Password check: show weak CTA for weak passwords

* Make the button next to weak passwords white (instead of blue for
  compromised passwords).
* Adapt the color of the "external" icon in the button to the button's
  strong or weak CTA, including for dark mode.
* Screenshots: screen/3QHcFDpoZTpovNP, screen/6oPv3M82uqZAxk3

Bug: 1128904
Change-Id: Ibea49560a033d51b143b6eacdf08a205a8801d14
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2599859Reviewed-by: Rainhard Findling <rainhard@chromium.org>
Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Rainhard Findling <rainhard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842030}

chrome/browser/resources/settings/autofill_page/password_check_list_item.html

@@ -65,6 +65,17 @@
         justify-content: flex-end;
       }
 
+      .icon-weak-cta {
+        fill: var(--google-blue-600);
+      }
+
+      /* dark mode */
+      @media (prefers-color-scheme: dark) {
+        .icon-weak-cta {
+          fill: var(--google-blue-refresh-300);
+        }
+      }
+
       :host-context([dir='rtl']) #insecureOrigin {
         justify-content: flex-start;
       }
@@ -107,10 +118,11 @@
       </div>
       <template is="dom-if" if="[[item.changePasswordUrl]]">
         <div class="button-container" id="changePasswordUrl">
-          <cr-button id="changePasswordButton" class="action-button"
+          <cr-button id="changePasswordButton" class$="[[buttonClass_]]"
               on-click="onChangePasswordClick_">
             $i18n{changePasswordButton}
-            <iron-icon icon="cr:open-in-new" id="change-password-link-icon">
+            <iron-icon icon="cr:open-in-new" id="change-password-link-icon"
+                class$="[[iconClass_]]">
             </iron-icon>
           </cr-button>
           <a id="alreadyChanged" hidden="[[!clickedChangePassword]]"

chrome/browser/resources/settings/autofill_page/password_check_list_item.js

@@ -59,7 +59,19 @@ Polymer({
     clickedChangePassword: {
       type: Boolean,
       value: false,
-    }
+    },
+
+    /** @private */
+    buttonClass_: {
+      type: String,
+      computed: 'computeButtonClass_(item.compromisedInfo)',
+    },
+
+    /** @private */
+    iconClass_: {
+      type: String,
+      computed: 'computeIconClass_(item.compromisedInfo)',
+    },
   },
 
   /**
@@ -138,6 +150,32 @@ Polymer({
     return !!this.item.password;
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  computeButtonClass_() {
+    if (this.item.compromisedInfo) {
+      // Strong CTA.
+      return 'action-button';
+    }
+    // Weak CTA.
+    return '';
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeIconClass_() {
+    if (this.item.compromisedInfo) {
+      // Strong CTA, white icon.
+      return '';
+    }
+    // Weak CTA, non-white-icon.
+    return 'icon-weak-cta';
+  },
+
   /**
    * @return {string}
    * @private

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

@@ -674,6 +674,26 @@ suite('PasswordsCheckSection', function() {
     expectFalse(icon.classList.contains('no-security-issues'));
   });
 
+  // Test that leaked password items have a strong CTA.
+  test('showStrongCtaOnLeaks', function() {
+    const password = makeCompromisedCredential('one.com', 'test6', 'LEAKED');
+    const passwordCheckListItem = createLeakedPasswordItem(password);
+    const button = passwordCheckListItem.$$('#changePasswordButton');
+    assertTrue(button.classList.contains('action-button'));
+    const icon = passwordCheckListItem.$$('iron-icon');
+    assertFalse(icon.classList.contains('icon-weak-cta'));
+  });
+
+  // Tests that weak password items have a weak CTA.
+  test('showWeakCtaOnWeaksPasswords', function() {
+    const password = makeInsecureCredential('one.com', 'test7');
+    const passwordCheckListItem = createLeakedPasswordItem(password);
+    const button = passwordCheckListItem.$$('#changePasswordButton');
+    assertFalse(button.classList.contains('action-button'));
+    const icon = passwordCheckListItem.$$('iron-icon');
+    assertTrue(icon.classList.contains('icon-weak-cta'));
+  });
+
   // Tests that the spinner is replaced with a warning on errors.
   test('showsInfoIconWhenFinishedWithErrors', async function() {
     passwordManager.data.checkStatus = makePasswordCheckStatus(