Add weak passwords section to Password Check page

This CL updates the UI in the chrome://settings/passswords/check and
adds to it a new weak password section.
Screenshot of Password Check page before and after changes:
https://bugs.chromium.org/p/chromium/issues/detail?id=1119752#c15

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

chrome/app/settings_strings.grdp

@@ -340,7 +340,7 @@
   <message name="IDS_SETTINGS_CHECK_PASSWORDS_CANCELED" desc="Message for when the password check was canceled by the user.">
     Canceled
   </message>
-  <message name="IDS_SETTINGS_CHECKED_PASSWORDS" desc="Title above amount of found compromised passwords after password bulk check.">
+  <message name="IDS_SETTINGS_CHECKED_PASSWORDS" desc="Title above amount of found insecure passwords after password bulk check.">
     Checked passwords
   </message>
   <message name="IDS_SETTINGS_CHECK_PASSWORDS_DESCRIPTION" desc="Explanation of the passwords bulk check feature found within the password settings.">
@@ -379,6 +379,13 @@
   <message name="IDS_SETTINGS_COMPROMISED_PASSWORDS_ADVICE" desc="Description of what user should do after compromised passwords are found.">
     Change these passwords immediately to keep your account safe:
   </message>
+  <message name="IDS_SETTINGS_WEAK_PASSWORDS" desc="Title for list of weak credentials after passwords bulk check.">
+    Weak passwords
+  </message>
+  <message name="IDS_SETTINGS_WEAK_PASSWORDS_DESCRIPTION" desc="Information about why weak passwords are a security issue and what user should do to fix the problem. Has a link.">
+    Weak passwords are easy to guess. Make sure you're creating strong passwords.
+    <ph name="BEGIN_LINK">&lt;br/&gt;&lt;a target='_blank' href='$1'&gt;</ph>See more security tips.<ph name="END_LINK">&lt;/a&gt;</ph>
+  </message>
   <message name="IDS_SETTINGS_CHANGE_PASSWORD_BUTTON" desc="Button inside password check section which opens url for changing leaked password.">
     Change password
   </message>

chrome/app/settings_strings_grdp/IDS_SETTINGS_WEAK_PASSWORDS.png.sha1

+428225b74a1b2102df1b1d6b7cf6270ca3803e00
\ No newline at end of file

chrome/app/settings_strings_grdp/IDS_SETTINGS_WEAK_PASSWORDS_DESCRIPTION.png.sha1

+428225b74a1b2102df1b1d6b7cf6270ca3803e00
\ No newline at end of file

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

@@ -46,6 +46,11 @@
         width: 100%;
       }
 
+      #weakPasswordsDescription {
+        display: block;
+        text-align: left;
+      }
+
     </style>
     <!-- The banner is visible if no insecure password was found (yet). -->
     <template is="dom-if"
@@ -99,7 +104,7 @@
         $i18n{noCompromisedCredentials}
       </div>
     </div>
-    <div id="passwordCheckBody"
+    <div id="compromisedCredentialsBody"
         hidden$="[[!hasLeakedCredentials_(leakedPasswords)]]">
       <div class="cr-row first">
         <h2>$i18n{compromisedPasswords}</h2>
@@ -119,6 +124,35 @@
                 on-change-password-clicked="onChangePasswordClick_"
 <if expr="chromeos">
                 token-request-manager="[[tokenRequestManager_]]"
+</if>
+                on-already-changed-password-click="onAlreadyChangedClick_">
+            </password-check-list-item>
+          </template>
+        </iron-list>
+      </div>
+    </div>
+    <!-- TODO(crbug.com/1119752): |weakCredentialsBody| is almost a copy-paste
+    of |compromisedCredentialsBody|. Clean it up by creating a polymer element
+    for this. -->
+    <div id="weakCredentialsBody" hidden$="[[!hasWeakCredentials_(weakPasswords)]]">
+      <div class="cr-row first">
+        <h2>$i18n{weakPasswords}</h2>
+      </div>
+      <div class="list-frame vertical-list">
+        <div class="list-item secondary" id="weakPasswordsDescription">
+          $i18nRaw{weakPasswordsDescription}
+        </div>
+      </div>
+      <div class="list-frame first">
+        <iron-list id="weakPasswordList" items="[[weakPasswords]]">
+          <template>
+            <password-check-list-item item="[[item]]"
+                on-more-actions-click="onMoreActionsClick_"
+                clicked-change-password=
+                "[[clickedChangePassword_(item, clickedChangePasswordIds_.size)]]"
+                on-change-password-clicked="onChangePasswordClick_"
+<if expr="chromeos">
+                token-request-manager="[[tokenRequestManager_]]"
 </if>
                 on-already-changed-password-click="onAlreadyChangedClick_">
             </password-check-list-item>

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

@@ -280,7 +280,7 @@ Polymer({
    * @private
    */
   hasWeakCredentials_() {
-    return !!this.weakPasswords.length;
+    return this.passwordsWeaknessCheckEnabled && !!this.weakPasswords.length;
   },
 
   /**
@@ -289,7 +289,7 @@ Polymer({
    * @private
    */
   hasInsecureCredentials_() {
-    return !!this.leakedPasswords.length || !!this.weakPasswords.length;
+    return !!this.leakedPasswords.length || this.hasWeakCredentials_();
   },
 
   /**

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

@@ -6,25 +6,25 @@
         --iron-icon-fill-color: var(--text-color-action);
       }
 
-      #leakedPassword {
+      #insecurePassword {
         background-color: transparent;
         border: none;
         font-size: inherit;
         margin-inline-start: 4px;
       }
 
-      #leaked-item {
+      #insecure-item {
         margin-bottom: 12px;
         margin-top: 12px;
       }
 
-      #leaked-info {
+      #insecure-info {
         display: flex;
         flex: 2;
         width: 0;
       }
 
-      #leakUsername {
+      #insecureUsername {
         align-items: baseline;
         display: flex;
         flex: 1;
@@ -59,43 +59,46 @@
         flex-direction: column;
       }
 
-      #leakOrigin {
+      #insecureOrigin {
         direction: rtl;
         display: flex;
         justify-content: flex-end;
       }
 
-      :host-context([dir='rtl']) #leakOrigin {
+      :host-context([dir='rtl']) #insecureOrigin {
         justify-content: flex-start;
       }
     </style>
-    <div class="list-item" id="leaked-item" focus-row-container>
+    <div class="list-item" id="insecure-item" focus-row-container>
       <site-favicon url="[[item.changePasswordUrl]]"></site-favicon>
-      <div id="leaked-info">
+      <div id="insecure-info">
         <div id="info-column" class="no-min-width">
-          <div id="leakOrigin" class="no-min-width">
+          <div id="insecureOrigin" class="no-min-width">
             <span class="text-elide">
               <!-- This bdo tag is necessary to fix the display of domains
                 starting with numbers. -->
               <bdo dir="ltr">[[item.formattedOrigin]]</bdo>
             </span>
           </div>
-          <div class="no-min-width" id="leakUsername" >
+          <div class="no-min-width" id="insecureUsername" >
             <span class="no-min-width text-elide secondary">
               [[item.username]]
             </span>
-            <input class="no-min-width secondary text-elide" id="leakedPassword"
-                focus-row-control focus-type="passwordField" readonly
+            <input class="no-min-width secondary text-elide"
+                id="insecurePassword" focus-row-control
+                focus-type="passwordField" readonly
                 type="[[getInputType_(isPasswordVisible_)]]"
                 value="[[password_]]" on-click="onReadonlyInputTap_"
                 disabled$="[[!isPasswordVisible_]]">
           </div>
-          <div class="secondary" id="leakType">
-            [[getCompromiseType_(item)]]
-          </div>
-          <div class="secondary" id="elapsedTime">
-            [[item.compromisedInfo.elapsedTimeSinceCompromise]]
-          </div>
+          <template is="dom-if" if="[[isCompromisedItem_(item)]]">
+            <div class="secondary" id="leakType">
+              [[getCompromiseType_(item)]]
+            </div>
+            <div class="secondary" id="elapsedTime">
+              [[item.compromisedInfo.elapsedTimeSinceCompromise]]
+            </div>
+          </template>
         </div>
       </div>
       <template is="dom-if" if="[[item.changePasswordUrl]]">

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

@@ -73,6 +73,15 @@ Polymer({
     this.passwordManager_ = PasswordManagerImpl.getInstance();
   },
 
+  /**
+   * Returns true if |item| is compromised credential, otherwise returns false.
+   * @return {boolean}
+   * @private
+   */
+  isCompromisedItem_() {
+    return !!this.item.compromisedInfo;
+  },
+
   /**
    * @return {string}
    * @private

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -831,6 +831,7 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
       {"compromisedPasswords", IDS_SETTINGS_COMPROMISED_PASSWORDS},
       {"compromisedPasswordsDescription",
        IDS_SETTINGS_COMPROMISED_PASSWORDS_ADVICE},
+      {"weakPasswords", IDS_SETTINGS_WEAK_PASSWORDS},
       {"changePasswordButton", IDS_SETTINGS_CHANGE_PASSWORD_BUTTON},
       {"changePasswordInApp", IDS_SETTINGS_CHANGE_PASSWORD_IN_APP_LABEL},
       {"leakedPassword", IDS_SETTINGS_COMPROMISED_PASSWORD_REASON_LEAKED},
@@ -1036,6 +1037,11 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
                          autofill::payments::GetManageInstrumentsUrl().spec());
   html_source->AddString("paymentMethodsLearnMoreURL",
                          chrome::kPaymentMethodsLearnMoreURL);
+  html_source->AddString(
+      "weakPasswordsDescription",
+      l10n_util::GetStringFUTF16(
+          IDS_SETTINGS_WEAK_PASSWORDS_DESCRIPTION,
+          base::ASCIIToUTF16(chrome::kSeeMoreSecurityTipsURL)));
   // The warning message that will be shown if there is a content setting
   // pattern with a wildcard in it. The check for wildcards is done on the js
   // side.

chrome/common/url_constants.cc

@@ -246,6 +246,9 @@ const char kSafeBrowsingHelpCenterURL[] =
 const char kSafetyTipHelpCenterURL[] =
     "https://support.google.com/chrome/?p=safety_tip";
 
+const char kSeeMoreSecurityTipsURL[] =
+    "https://support.google.com/accounts/answer/32040";
+
 const char kSettingsSearchHelpURL[] =
     "https://support.google.com/chrome/?p=settings_search_help";
 

chrome/common/url_constants.h

@@ -215,6 +215,10 @@ extern const char kSafeBrowsingHelpCenterURL[];
 // "Learn more" URL for safety tip bubble.
 extern const char kSafetyTipHelpCenterURL[];
 
+// The URL for the "See more security tips" with advices how to create a strong
+// password.
+extern const char kSeeMoreSecurityTipsURL[];
+
 // Help URL for the settings page's search feature.
 extern const char kSettingsSearchHelpURL[];