Update the UI of compromised passwords section

This CL updates the label that is shown if a user is not signed in, but
has compromised credentials that have been found in the past. This
label is located in the bottom of the compromised passwords section in
the Password Check page.
Screenshots of the compromised passwords section in the Password Check
page after changes:
https://bugs.chromium.org/p/chromium/issues/detail?id=1119752#c20

Bug: 1119752
Change-Id: I85038f38a158daf7e69f098c1cc8ca9cc60a97ae
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2440585Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Irina Fedorova <irfedorova@google.com>
Cr-Commit-Position: refs/heads/master@{#812757}

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

@@ -110,14 +110,6 @@
       <div class="cr-row first">
         <h2>$i18n{compromisedPasswords}</h2>
       </div>
-      <div class="list-frame vertical-list">
-        <div class="list-item secondary" hidden$="[[!isSignedOut_]]"
-            id="signedOutUserLabel">
-          <div>
-            $i18nRaw{signedOutUserLabel}
-          </div>
-        </div>
-      </div>
       <div class="list-frame vertical-list">
         <div class="list-item secondary" id="compromisedPasswordsDescription"
             hidden$="[[!hasLeakedCredentials_(leakedPasswords)]]">
@@ -140,6 +132,12 @@
           </template>
         </iron-list>
       </div>
+      <div class="list-frame vertical-list">
+        <div class="list-item secondary" hidden$="[[!isSignedOut_]]"
+            id="signedOutUserLabel">
+          <div inner-h-t-m-l="[[getSignedOutUserLabel_(leakedPasswords)]]"></div>
+        </div>
+      </div>
     </div>
     <!-- TODO(crbug.com/1119752): |weakCredentialsBody| is almost a copy-paste
     of |compromisedCredentialsBody|. Clean it up by creating a polymer element

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

@@ -667,6 +667,22 @@ Polymer({
     }
   },
 
+  /**
+   * Returns the label that should be shown in the compromised password section
+   * if a user is signed out. This label depends on whether the user already had
+   * compromised credentials that were found in the past.
+   * @return {string}
+   * @private
+   */
+  getSignedOutUserLabel_() {
+    // This label contains the link, thus we need to use i18nAdvanced() here as
+    // well as the `inner-h-t-m-l` attribute in the DOM.
+    return this.i18nAdvanced(
+        this.hasLeakedCredentials_() ?
+            'signedOutUserHasCompromisedCredentialsLabel' :
+            'signedOutUserLabel');
+  },
+
   /**
    * Returns true iff the leak check was performed at least once before.
    * @return {boolean}

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

@@ -929,7 +929,7 @@ suite('PasswordsCheckSection', function() {
     assertTrue(isElementVisible(section.$.compromisedCredentialsBody));
     assertTrue(isElementVisible(section.$.signedOutUserLabel));
     expectEquals(
-        section.i18n('signedOutUserLabel'),
+        section.i18n('signedOutUserHasCompromisedCredentialsLabel'),
         section.$.signedOutUserLabel.textContent.trim());
     assertTrue(isElementVisible(section.$.compromisedPasswordsDescription));
     expectEquals(