[Password Manager] Action menu for leaked passwords

This change makes clicking on the dots icon open a menu with action
items for the compromised password.

Bug: 1047726
Change-Id: If192af77ca8dc184670d64cbf99322c29f94b42b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2088151
Commit-Queue: Christos Froussios <cfroussios@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748026}

chrome/app/settings_strings.grdp

@@ -350,6 +350,15 @@
   <message name="IDS_SETTINGS_NO_COMPROMISED_CREDENTIALS_LABEL" desc="Label which is shown when there were no compromised passwords detected.">
     Chrome will notify you when you sign in with a compromised password
   </message>
+  <message name="IDS_SETTINGS_COMPROMISED_PASSWORD_SHOW" desc="Action menu item for a row which displays a compromised password. The password value, which is initialy obfuscated, will be show in plain text.">
+    Show password
+  </message>
+  <message name="IDS_SETTINGS_COMPROMISED_PASSWORD_EDIT" desc="Action menu item for a row which displays a compromised password. It will open a modal dialog which will allow the user to edit the password and other metadata (username, website).">
+    Edit password
+  </message>
+  <message name="IDS_SETTINGS_COMPROMISED_PASSWORD_REMOVE" desc="Action menu item for a row which displays a compromised password. It will open a confirmation dialog for deleting the password.">
+    Remove password
+  </message>
   <message name="IDS_SETTINGS_PASSWORDS_SAVE_PASSWORDS_TOGGLE_LABEL" desc="Label for a toggle that allows users to be prompted if they want to save their passwords when logging into webpages.">
     Offer to save passwords
   </message>

chrome/app/settings_strings_grdp/IDS_SETTINGS_COMPROMISED_PASSWORD_EDIT.png.sha1

+a0d753efbf2d825c0f85796b6289d1ab03a67cdd
\ No newline at end of file

chrome/app/settings_strings_grdp/IDS_SETTINGS_COMPROMISED_PASSWORD_REMOVE.png.sha1

+a0d753efbf2d825c0f85796b6289d1ab03a67cdd
\ No newline at end of file

chrome/app/settings_strings_grdp/IDS_SETTINGS_COMPROMISED_PASSWORD_SHOW.png.sha1

+a0d753efbf2d825c0f85796b6289d1ab03a67cdd
\ No newline at end of file

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -58,12 +59,27 @@
       <div class="list-frame first">
         <iron-list id="leakedPasswordList" items="[[leakedPasswords]]">
           <template>
-            <password-check-list-item item="[[item]]">
+            <password-check-list-item item="[[item]]"
+                on-more-actions-click="onMoreActionsClick_">
             </password-check-list-item>
           </template>
         </iron-list>
       </div>
     </div>
+    <cr-action-menu id="moreActionsMenu" role-description="$i18n{menu}">
+      <button id="menuShowPassword" class="dropdown-item"
+          on-click="onMenuShowPasswordClick_">
+        $i18n{showCompromisedPassword}
+      </button>
+      <button id="menuEditPassword" class="dropdown-item"
+          on-click="onMenuEditPasswordClick_">
+        $i18n{editCompromisedPassword}
+      </button>
+      <button id="menuRemovePassword" class="dropdown-item"
+          on-click="onMenuRemovePasswordClick_">
+        $i18n{removeCompromisedPassword}
+      </button>
+    </cr-action-menu>
   </template>
   <script src="password_check.js"></script>
 </dom-module>

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

@@ -41,6 +41,13 @@ Polymer({
    */
   passwordManager_: null,
 
+  /**
+   * The element to return focus to, when the currently active dialog is
+   * closed.
+   * @private {?HTMLElement}
+   */
+  activeDialogAnchor_: null,
+
   /** @override */
   attached() {
     // Set the manager. These can be overridden by tests.
@@ -97,4 +104,35 @@ Polymer({
   hasLeakedCredentials_(list) {
     return !!list.length;
   },
+
+  /**
+   * @param {!CustomEvent<{moreActionsButton: !HTMLElement}>} event
+   * @private
+   */
+  onMoreActionsClick_(event) {
+    const target = event.detail.moreActionsButton;
+    this.$.moreActionsMenu.showAt(target);
+    this.activeDialogAnchor_ = target;
+  },
+
+  /** @private */
+  onMenuShowPasswordClick_() {
+    this.$.moreActionsMenu.close();
+
+    // TODO(crbug.com/1047726) Implement dialog.
+  },
+
+  /** @private */
+  onMenuEditPasswordClick_() {
+    this.$.moreActionsMenu.close();
+
+    // TODO(crbug.com/1047726) Implement dialog.
+  },
+
+  /** @private */
+  onMenuRemovePasswordClick_() {
+    this.$.moreActionsMenu.close();
+
+    // TODO(crbug.com/1047726) Implement dialog.
+  },
 });

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

@@ -73,8 +73,9 @@
           </iron-icon>
         </cr-button>
       </div>
-      <cr-icon-button class="icon-more-vert"
-          title="$i18n{moreActions}"></cr-icon-button>
+      <cr-icon-button class="icon-more-vert" id="more"
+          title="$i18n{moreActions}" on-click="onMoreClick_">
+      </cr-icon-button>
     </div>
   </template>
   <script src="password_check_list_item.js"></script>

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

@@ -40,8 +40,16 @@ Polymer({
    */
   onChangePasswordClick_() {
     const url = this.item.changePasswordUrl;
-    if(url) {
+    if (url) {
       settings.OpenWindowProxyImpl.getInstance().openURL(url);
     }
   },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onMoreClick_(event) {
+    this.fire('more-actions-click', {moreActionsButton: event.target});
+  },
 });

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

@@ -741,6 +741,9 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
       {"phishedPassword", IDS_SETTINGS_COMPROMISED_PASSWORD_REASON_PHISHED},
       {"noCompromisedCredentials",
        IDS_SETTINGS_NO_COMPROMISED_CREDENTIALS_LABEL},
+      {"showCompromisedPassword", IDS_SETTINGS_COMPROMISED_PASSWORD_SHOW},
+      {"editCompromisedPassword", IDS_SETTINGS_COMPROMISED_PASSWORD_EDIT},
+      {"removeCompromisedPassword", IDS_SETTINGS_COMPROMISED_PASSWORD_REMOVE},
       {"creditCards", IDS_AUTOFILL_PAYMENT_METHODS},
       {"noPaymentMethodsFound", IDS_SETTINGS_PAYMENT_METHODS_NONE},
       {"googlePayments", IDS_SETTINGS_GOOGLE_PAYMENTS},

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

@@ -97,5 +97,31 @@ cr.define('settings_passwords_check', function() {
                 checkPasswordSection.$.leakedPasswordList, leakedPasswords);
           });
     });
+
+    // Verify that the More Actions menu opens when the button is clicked.
+    test('testMoreActionsMenu', function() {
+      const leakedPasswords = [
+        autofill_test_util.makeCompromisedCredentials(
+            'google.com', 'jdoerrie', 'LEAKED'),
+      ];
+      const leakedPasswordsInfo =
+          autofill_test_util.makeCompromisedCredentialsInfo(
+              leakedPasswords, '5 min ago');
+      passwordManager.data.leakedCredentials = leakedPasswordsInfo;
+      const checkPasswordSection = createCheckPasswordSection();
+
+      return passwordManager.whenCalled('getCompromisedCredentialsInfo')
+          .then(() => {
+            Polymer.dom.flush();
+            assertFalse(checkPasswordSection.$.passwordCheckBody.hidden);
+            const listElements = checkPasswordSection.$.leakedPasswordList;
+            const node = Polymer.dom(listElements).children[1];
+            const menu = checkPasswordSection.$.moreActionsMenu;
+
+            assertFalse(menu.open);
+            node.$.more.click();
+            assertTrue(menu.open);
+          });
+    });
   });
 });