Add secondary CTA in SafetyCheck rows.

This change affects the password check row, the Safe Browsing row, and
the extension row. When the state is SAFE, make the entire row clickable
and display a clickable icon in the row. When the row is clicked, direct
the user to its corresponding settings page.

before: http://screen/ArPirizGoZhfiYz
after: http://screen/76CN4UQ4a4rbk4p
screen record: http://dr/file/d/1E6tBzL62Yfci7M4QqcWQm25cRX8O_7xl/view

Bug: 1103015
Change-Id: I545207019b52962e0b53dd1455b2e1108c4e2b20
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2401812Reviewed-by: Rainhard Findling <rainhard@chromium.org>
Reviewed-by: Varun Khaneja <vakh@chromium.org>
Reviewed-by: Theodore Olsauskas-Warren <sauski@google.com>
Commit-Queue: Xinghui Lu <xinghuilu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809000}

chrome/browser/resources/settings/safety_check_page/BUILD.gn

@@ -31,6 +31,7 @@ js_library("safety_check_browser_proxy") {
 js_library("safety_check_child") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]

chrome/browser/resources/settings/safety_check_page/safety_check_child.html

 <style include="cr-shared-style settings-shared iron-flex">
+  :host([row-clickable]) .cr-row {
+    cursor: pointer;
+  }
+
   iron-icon {
     display: flex;
     flex-shrink: 0;
@@ -46,6 +50,13 @@
       [[buttonLabel]]
     </cr-button>
   </template>
+  <template is="dom-if" if="[[rowClickable]]">
+    <cr-icon-button id="rowClickableIndicator"
+        iron-icon="[[getRowClickableIcon_(external)]]"
+        aria-describedby="subLabel"
+        aria-labelledby="label">
+    </cr-icon-button>
+  </template>
   <template is="dom-if" if="[[showManagedIcon_(managedIcon)]]" restamp>
     <iron-icon id="managedIcon" icon="[[managedIcon]]" aria-hidden="true">
     </iron-icon>

chrome/browser/resources/settings/safety_check_page/safety_check_child.js

@@ -62,6 +62,19 @@ Polymer({
     // Classes of the right hand button.
     buttonClass: String,
 
+    // Should the entire row be clickable.
+    rowClickable: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
+
+    // Is the row directed to external link.
+    external: {
+      type: Boolean,
+      value: false,
+    },
+
     // Right hand managed icon. |null| removes it from the DOM.
     managedIcon: String,
   },
@@ -157,4 +170,13 @@ Polymer({
   showManagedIcon_: function() {
     return !!this.managedIcon;
   },
+
+  /**
+   * Return the icon to show when the row is clickable.
+   * @return {string}
+   * @private
+   */
+  getRowClickableIcon_() {
+    return this.external ? 'cr:open-in-new' : 'cr:arrow-right';
+  },
 });

chrome/browser/resources/settings/safety_check_page/safety_check_extensions_child.html

@@ -7,5 +7,8 @@
     button-aria-label="$i18n{safetyCheckExtensionsButtonAriaLabel}"
     button-class="[[getButtonClass_(status_)]]"
     on-button-click="onButtonClick_"
+    on-click="onRowClick_"
+    row-clickable="[[isRowClickable_(status_)]]"
+    external
     managed-icon="[[getManagedIcon_(status_)]]">
 </settings-safety-check-child>

chrome/browser/resources/settings/safety_check_page/safety_check_extensions_child.js

@@ -51,6 +51,20 @@ Polymer({
      * @private
      */
     displayString_: String,
+
+    /**
+     * A set of statuses that the entire row is clickable.
+     * @type {!Set<!SafetyCheckExtensionsStatus>}
+     * @private
+     */
+    rowClickableStatuses: {
+      readOnly: true,
+      type: Object,
+      value: () => new Set([
+        SafetyCheckExtensionsStatus.NO_BLOCKLISTED_EXTENSIONS,
+        SafetyCheckExtensionsStatus.ERROR,
+      ]),
+    },
   },
 
   /** @private {?MetricsBrowserProxy} */
@@ -133,8 +147,7 @@ Polymer({
         SafetyCheckInteractions.SAFETY_CHECK_EXTENSIONS_REVIEW);
     this.metricsBrowserProxy_.recordAction(
         'Settings.SafetyCheck.ReviewExtensions');
-
-    OpenWindowProxyImpl.getInstance().openURL('chrome://extensions');
+    this.openExtensionsPage_();
   },
 
   /**
@@ -149,4 +162,27 @@ Polymer({
         return null;
     }
   },
+
+  /**
+   * @private
+   * @return {?boolean}
+   */
+  isRowClickable_: function() {
+    return this.rowClickableStatuses.has(this.status_);
+  },
+
+  /** @private */
+  onRowClick_: function() {
+    if (this.isRowClickable_()) {
+      // TODO(crbug.com/1103015): Log action and histogram:
+      // SafetyCheckInteractions.SAFETY_CHECK_EXTENSIONS_NAVIGATE
+      // Settings.SafetyCheck.NavigateToExtensions
+      this.openExtensionsPage_();
+    }
+  },
+
+  /** @private */
+  openExtensionsPage_: function() {
+    OpenWindowProxyImpl.getInstance().openURL('chrome://extensions');
+  },
 });

chrome/browser/resources/settings/safety_check_page/safety_check_passwords_child.html

@@ -6,5 +6,7 @@
     button-label="[[getButtonLabel_(status_)]]"
     button-aria-label="$i18n{safetyCheckPasswordsButtonAriaLabel}"
     button-class="action-button"
-    on-button-click="onButtonClick_">
+    on-button-click="onButtonClick_"
+    on-click="onRowClick_"
+    row-clickable="[[isRowClickable_(status_)]]">
 </settings-safety-check-child>

chrome/browser/resources/settings/safety_check_page/safety_check_passwords_child.js

@@ -53,6 +53,21 @@ Polymer({
      * @private
      */
     displayString_: String,
+
+    /**
+     * A set of statuses that the entire row is clickable.
+     * @type {!Set<!SafetyCheckPasswordsStatus>}
+     * @private
+     */
+    rowClickableStatuses: {
+      readOnly: true,
+      type: Object,
+      value: () => new Set([
+        SafetyCheckPasswordsStatus.SAFE,
+        SafetyCheckPasswordsStatus.QUOTA_LIMIT,
+        SafetyCheckPasswordsStatus.ERROR,
+      ]),
+    },
   },
 
   /** @private {?MetricsBrowserProxy} */
@@ -121,7 +136,29 @@ Polymer({
         SafetyCheckInteractions.SAFETY_CHECK_PASSWORDS_MANAGE);
     this.metricsBrowserProxy_.recordAction(
         'Settings.SafetyCheck.ManagePasswords');
+    this.openPasswordCheckPage_();
+  },
+
+  /**
+   * @private
+   * @return {?boolean}
+   */
+  isRowClickable_: function() {
+    return this.rowClickableStatuses.has(this.status_);
+  },
+
+  /** @private */
+  onRowClick_: function() {
+    if (this.isRowClickable_()) {
+      // TODO(crbug.com/1103015): Log action and histogram:
+      // SafetyCheckInteractions.SAFETY_CHECK_PASSWORDS_NAVIGATE
+      // Settings.SafetyCheck.NavigateToPasswords
+      this.openPasswordCheckPage_();
+    }
+  },
 
+  /** @private */
+  openPasswordCheckPage_: function() {
     Router.getInstance().navigateTo(
         routes.CHECK_PASSWORDS,
         /* dynamicParams= */ null, /* removeSearch= */ true);

chrome/browser/resources/settings/safety_check_page/safety_check_safe_browsing_child.html

@@ -7,5 +7,7 @@
     button-aria-label="$i18n{safetyCheckSafeBrowsingButtonAriaLabel}"
     button-class="action-button"
     on-button-click="onButtonClick_"
-    managed-icon="[[getManagedIcon_(status_)]]">
+    on-click="onRowClick_"
+    row-clickable="[[isRowClickable_(status_)]]"
+    managed-icon="[[getManagedIcon_(status_)]]"">
 </settings-safety-check-child>

chrome/browser/resources/settings/safety_check_page/safety_check_safe_browsing_child.js

@@ -52,6 +52,21 @@ Polymer({
      * @private
      */
     displayString_: String,
+
+    /**
+     * A set of statuses that the entire row is clickable.
+     * @type {!Set<!SafetyCheckSafeBrowsingStatus>}
+     * @private
+     */
+    rowClickableStatuses: {
+      readOnly: true,
+      type: Object,
+      value: () => new Set([
+        SafetyCheckSafeBrowsingStatus.ENABLED_STANDARD,
+        SafetyCheckSafeBrowsingStatus.ENABLED_ENHANCED,
+        SafetyCheckSafeBrowsingStatus.ENABLED_STANDARD_AVAILABLE_ENHANCED,
+      ]),
+    },
   },
 
   /** @private {?MetricsBrowserProxy} */
@@ -120,10 +135,7 @@ Polymer({
         SafetyCheckInteractions.SAFETY_CHECK_SAFE_BROWSING_MANAGE);
     this.metricsBrowserProxy_.recordAction(
         'Settings.SafetyCheck.ManageSafeBrowsing');
-
-    Router.getInstance().navigateTo(
-        routes.SECURITY, /* dynamicParams= */ null,
-        /* removeSearch= */ true);
+    this.openSecurityPage_();
   },
 
   /**
@@ -140,4 +152,29 @@ Polymer({
         return null;
     }
   },
+
+  /**
+   * @private
+   * @return {?boolean}
+   */
+  isRowClickable_: function() {
+    return this.rowClickableStatuses.has(this.status_);
+  },
+
+  /** @private */
+  onRowClick_: function() {
+    if (this.isRowClickable_()) {
+      // TODO(crbug.com/1103015): Log action and histogram:
+      // SafetyCheckInteractions.SAFETY_CHECK_SAFE_BROWSING_NAVIGATE
+      // Settings.SafetyCheck.NavigateToSafeBrowsing
+      this.openSecurityPage_();
+    }
+  },
+
+  /** @private */
+  openSecurityPage_: function() {
+    Router.getInstance().navigateTo(
+        routes.SECURITY, /* dynamicParams= */ null,
+        /* removeSearch= */ true);
+  },
 });

chrome/test/data/webui/settings/safety_check_page_test.js

@@ -107,6 +107,7 @@ function fireSafetyCheckChromeCleanerEvent(state) {
  *   buttonAriaLabel: (string|undefined),
  *   buttonClass: (string|undefined),
  *   managedIcon: (boolean|undefined),
+ *   rowClickable: (boolean|undefined),
  * }} destructured1
  */
 function assertSafetyCheckChild({
@@ -116,7 +117,8 @@ function assertSafetyCheckChild({
   buttonLabel,
   buttonAriaLabel,
   buttonClass,
-  managedIcon
+  managedIcon,
+  rowClickable
 }) {
   const safetyCheckChild = page.$$('#safetyCheckChild');
   assertTrue(safetyCheckChild.iconStatus === iconStatus);
@@ -127,6 +129,7 @@ function assertSafetyCheckChild({
       !buttonAriaLabel || safetyCheckChild.buttonAriaLabel === buttonAriaLabel);
   assertTrue(!buttonClass || safetyCheckChild.buttonClass === buttonClass);
   assertTrue(!!managedIcon === !!safetyCheckChild.managedIcon);
+  assertTrue(!!rowClickable === !!safetyCheckChild.rowClickable);
 }
 
 /** @implements {SafetyCheckBrowserProxy} */
@@ -370,6 +373,30 @@ suite('SafetyCheckChildTests', function() {
     // Managed icon not set -> no managed icon.
     assertFalse(!!page.$$('#managedIcon'));
   });
+
+  test('testRowClickableIndicator', function() {
+    page.rowClickable = true;
+    flush();
+    assertTrue(!!page.$$('#rowClickableIndicator'));
+    assertEquals(
+        'cr:arrow-right',
+        page.$$('#rowClickableIndicator').getAttribute('iron-icon'));
+  });
+
+  test('testExternalRowClickableIndicator', function() {
+    page.rowClickable = true;
+    page.external = true;
+    flush();
+    assertTrue(!!page.$$('#rowClickableIndicator'));
+    assertEquals(
+        'cr:open-in-new',
+        page.$$('#rowClickableIndicator').getAttribute('iron-icon'));
+  });
+
+  test('testNoRowClickableIndicator', function() {
+    // rowClickable not set -> no RowClickableIndicator.
+    assertFalse(!!page.$$('#rowClickableIndicator'));
+  });
 });
 
 suite('SafetyCheckUpdatesChildUiTests', function() {
@@ -517,6 +544,7 @@ suite('SafetyCheckPasswordsChildUiTests', function() {
 
   teardown(function() {
     page.remove();
+    Router.getInstance().navigateTo(routes.BASIC);
   });
 
   test('passwordCheckingUiTest', function() {
@@ -536,7 +564,14 @@ suite('SafetyCheckPasswordsChildUiTests', function() {
       page: page,
       iconStatus: SafetyCheckIconStatus.SAFE,
       label: 'Passwords',
+      rowClickable: true,
     });
+
+    // User clicks the row.
+    page.$$('#safetyCheckChild').click();
+    // Ensure the correct Settings page is shown.
+    assertEquals(
+        routes.CHECK_PASSWORDS, Router.getInstance().getCurrentRoute());
   });
 
   test('passwordCompromisedUiTest', async function() {
@@ -586,13 +621,20 @@ suite('SafetyCheckPasswordsChildUiTests', function() {
         case SafetyCheckPasswordsStatus.OFFLINE:
         case SafetyCheckPasswordsStatus.NO_PASSWORDS:
         case SafetyCheckPasswordsStatus.SIGNED_OUT:
+        case SafetyCheckPasswordsStatus.FEATURE_UNAVAILABLE:
+          assertSafetyCheckChild({
+            page: page,
+            iconStatus: SafetyCheckIconStatus.INFO,
+            label: 'Passwords',
+          });
+          break;
         case SafetyCheckPasswordsStatus.QUOTA_LIMIT:
         case SafetyCheckPasswordsStatus.ERROR:
-        case SafetyCheckPasswordsStatus.FEATURE_UNAVAILABLE:
           assertSafetyCheckChild({
             page: page,
             iconStatus: SafetyCheckIconStatus.INFO,
             label: 'Passwords',
+            rowClickable: true,
           });
           break;
         default:
@@ -623,6 +665,7 @@ suite('SafetyCheckSafeBrowsingChildUiTests', function() {
 
   teardown(function() {
     page.remove();
+    Router.getInstance().navigateTo(routes.BASIC);
   });
 
   test('safeBrowsingCheckingUiTest', function() {
@@ -643,7 +686,13 @@ suite('SafetyCheckSafeBrowsingChildUiTests', function() {
       page: page,
       iconStatus: SafetyCheckIconStatus.SAFE,
       label: 'Safe Browsing',
+      rowClickable: true,
     });
+
+    // User clicks the row.
+    page.$$('#safetyCheckChild').click();
+    // Ensure the correct Settings page is shown.
+    assertEquals(routes.SECURITY, Router.getInstance().getCurrentRoute());
   });
 
   test('safeBrowsingEnabledStandardAvailableEnhancedUiTest', function() {
@@ -654,6 +703,7 @@ suite('SafetyCheckSafeBrowsingChildUiTests', function() {
       page: page,
       iconStatus: SafetyCheckIconStatus.SAFE,
       label: 'Safe Browsing',
+      rowClickable: true,
     });
   });
 
@@ -665,6 +715,7 @@ suite('SafetyCheckSafeBrowsingChildUiTests', function() {
       page: page,
       iconStatus: SafetyCheckIconStatus.SAFE,
       label: 'Safe Browsing',
+      rowClickable: true,
     });
   });
 
@@ -780,10 +831,11 @@ suite('SafetyCheckExtensionsChildUiTests', function() {
       page: page,
       iconStatus: SafetyCheckIconStatus.INFO,
       label: 'Extensions',
+      rowClickable: true,
     });
   });
 
-  test('extensionsSafeUiTest', function() {
+  test('extensionsSafeUiTest', async function() {
     fireSafetyCheckExtensionsEvent(
         SafetyCheckExtensionsStatus.NO_BLOCKLISTED_EXTENSIONS);
     flush();
@@ -791,7 +843,14 @@ suite('SafetyCheckExtensionsChildUiTests', function() {
       page: page,
       iconStatus: SafetyCheckIconStatus.SAFE,
       label: 'Extensions',
+      rowClickable: true,
     });
+
+    // User clicks the row.
+    page.$$('#safetyCheckChild').click();
+    // Ensure the browser proxy call is done.
+    const url = await openWindowProxy.whenCalled('openURL');
+    assertEquals('chrome://extensions', url);
   });
 
   test('extensionsBlocklistedOffUiTest', function() {