Refactor: Decouple PasswordListItem from embedder

This CL addresses a few design issues with PasswordListItem that predate
the introduction of PasswordsListHandler.

- PasswordListItem would refer to a "menu" even though it knows nothing
about such menu, which is actually provided by the embedder. This CL
replaces mentions to passwordMenu in the component with what it actually
represents: the "more actions" button.
- The event fired by clicking the button was not documented in the file
overview. Moreover, the typedef for the event lived in the embedder. Now
the file exports the typedef.
- Tests that simulated clicks on the button would use the $$('#id')
syntax instead of the $.id one. This is now fixed.

Bug: None
Change-Id: Ie815237134236468c639e73831bdb3eb7db36f98
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2248561
Commit-Queue: Victor Vianna <victorvianna@google.com>
Reviewed-by: Friedrich [CET] <fhorschig@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#779777}

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

@@ -63,8 +63,8 @@
           [[entry.federationText]]
         </span>
       </div>
-      <cr-icon-button class="icon-more-vert" id="passwordMenu"
-          on-click="onPasswordMenuTap_" title="$i18n{moreActions}"
-          focus-row-control focus-type="passwordMenu"
+      <cr-icon-button class="icon-more-vert" id="moreActionsButton"
+          on-click="onPasswordMoreActionsButtonTap_" title="$i18n{moreActions}"
+          focus-row-control focus-type="moreActionsButton"
           aria-label$="[[getMoreActionsLabel_(entry)]]"></cr-icon-button>
     </div>

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

@@ -3,8 +3,10 @@
 // found in the LICENSE file.
 
 /**
- * @fileoverview PasswordListItem represents one row in the list of passwords.
- * It needs to be its own component because FocusRowBehavior provides good a11y.
+ * @fileoverview PasswordListItem represents one row in a list of passwords,
+ * with a "more actions" button. It needs to be its own component because
+ * FocusRowBehavior provides good a11y.
+ * Clicking the button fires a password-more-actions-clicked event.
  */
 
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
@@ -21,6 +23,12 @@ import {loadTimeData} from '../i18n_setup.js';
 import {MultiStorePasswordUiEntry} from './multi_store_password_ui_entry.js';
 import {ShowPasswordBehavior} from './show_password_behavior.js';
 
+/**
+ * @typedef {!Event<!{target: !HTMLElement, listItem:
+ *     !PasswordListItemElement}>}
+ */
+export let PasswordMoreActionsClickedEvent;
+
 Polymer({
   is: 'password-list-item',
 
@@ -42,12 +50,12 @@ Polymer({
   },
 
   /**
-   * Opens the password action menu.
    * @private
    */
-  onPasswordMenuTap_() {
+  onPasswordMoreActionsButtonTap_() {
     this.fire(
-        'password-menu-tap', {target: this.$.passwordMenu, listItem: this});
+        'password-more-actions-clicked',
+        {target: this.$.moreActionsButton, listItem: this});
   },
 
   /**

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

@@ -26,6 +26,7 @@ import {loadTimeData} from '../i18n_setup.js';
 // <if expr="chromeos">
 import {BlockingRequestManager} from './blocking_request_manager.js';
 // </if>
+import {PasswordMoreActionsClickedEvent} from './password_list_item.js';
 import {PasswordManagerImpl} from './password_manager_proxy.js';
 import {PasswordRemoveDialogPasswordsRemovedEvent} from './password_remove_dialog.js';
 
@@ -100,7 +101,7 @@ Polymer({
   ],
 
   listeners: {
-    'password-menu-tap': 'onPasswordMenuTap_',
+    'password-more-actions-clicked': 'onPasswordMoreActionsClicked_',
     'password-remove-dialog-passwords-removed':
         'onPasswordRemoveDialogPasswordsRemoved_',
   },
@@ -121,11 +122,10 @@ Polymer({
 
   /**
    * Opens the password action menu.
-   * @param {!Event<!{target: !HTMLElement, listItem:
-   *     !PasswordListItemElement}>} event
+   * @param {PasswordMoreActionsClickedEvent} event
    * @private
    */
-  onPasswordMenuTap_(event) {
+  onPasswordMoreActionsClicked_(event) {
     const target = event.detail.target;
 
     this.activePassword = event.detail.listItem;

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

@@ -216,7 +216,7 @@ suite('PasswordsDeviceSection', function() {
     // dialog is now open.
     const [password] =
         passwordsDeviceSection.root.querySelectorAll('password-list-item');
-    password.$.passwordMenu.click();
+    password.$.moreActionsButton.click();
     passwordsDeviceSection.$.passwordsListHandler
         .$$('#menuMovePasswordToAccount')
         .click();

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

@@ -493,7 +493,7 @@ suite('PasswordsSection', function() {
     const firstPassword = passwordList[0];
 
     // Click the remove button on the first password.
-    firstNode.$$('#passwordMenu').click();
+    firstNode.$.moreActionsButton.click();
     passwordsSection.$.passwordsListHandler.$.menuRemovePassword.click();
 
     const id = await passwordManager.whenCalled('removeSavedPassword');
@@ -515,7 +515,7 @@ suite('PasswordsSection', function() {
         passwordManager, passwordList, []);
     flush();
 
-    getFirstPasswordListItem(passwordsSection).$$('#passwordMenu').click();
+    getFirstPasswordListItem(passwordsSection).$.moreActionsButton.click();
     assertTrue(
         passwordsSection.$.passwordsListHandler.$$('#menuCopyPassword').hidden);
   });
@@ -530,7 +530,7 @@ suite('PasswordsSection', function() {
         passwordManager, passwordList, []);
     flush();
 
-    getFirstPasswordListItem(passwordsSection).$$('#passwordMenu').click();
+    getFirstPasswordListItem(passwordsSection).$.moreActionsButton.click();
     assertFalse(
         passwordsSection.$.passwordsListHandler.$$('#menuCopyPassword').hidden);
   });
@@ -961,7 +961,7 @@ suite('PasswordsSection', function() {
     const passwordsSection = elementFactory.createPasswordsSection(
         passwordManager, [expectedItem], []);
 
-    getFirstPasswordListItem(passwordsSection).$$('#passwordMenu').click();
+    getFirstPasswordListItem(passwordsSection).$.moreActionsButton.click();
     passwordsSection.$.passwordsListHandler.$$('#menuCopyPassword').click();
 
     return passwordManager.whenCalled('requestPlaintextPassword')
@@ -980,7 +980,7 @@ suite('PasswordsSection', function() {
 
     // Click the remove button on the first password and assert that an undo
     // toast is shown.
-    getFirstPasswordListItem(passwordsSection).$$('#passwordMenu').click();
+    getFirstPasswordListItem(passwordsSection).$.moreActionsButton.click();
     passwordsSection.$.passwordsListHandler.$.menuRemovePassword.click();
     assertTrue(toastManager.isToastOpen);
 
@@ -1275,13 +1275,13 @@ suite('PasswordsSection', function() {
           // No removal actually happens, so all passwords keep their position.
           const passwordListItems =
               passwordsSection.root.querySelectorAll('password-list-item');
-          passwordListItems[0].$$('#passwordMenu').click();
+          passwordListItems[0].$.moreActionsButton.click();
           passwordsSection.$.passwordsListHandler.$.menuRemovePassword.click();
           assertEquals(
               passwordsSection.i18n('passwordDeletedFromAccount'),
               getToastManager().$.content.textContent);
 
-          passwordListItems[1].$$('#passwordMenu').click();
+          passwordListItems[1].$.moreActionsButton.click();
           passwordsSection.$.passwordsListHandler.$.menuRemovePassword.click();
           assertEquals(
               passwordsSection.i18n('passwordDeletedFromDevice'),
@@ -1309,7 +1309,7 @@ suite('PasswordsSection', function() {
           !passwordsSection.$.passwordsListHandler.$$('#passwordRemoveDialog'));
 
       // Clicking remove in the overflow menu shows the dialog.
-      getFirstPasswordListItem(passwordsSection).$$('#passwordMenu').click();
+      getFirstPasswordListItem(passwordsSection).$.moreActionsButton.click();
       passwordsSection.$.passwordsListHandler.$.menuRemovePassword.click();
       flush();
       const removeDialog =
@@ -1348,7 +1348,7 @@ suite('PasswordsSection', function() {
           !passwordsSection.$.passwordsListHandler.$$('#passwordRemoveDialog'));
 
       // Clicking remove in the overflow menu shows the dialog.
-      getFirstPasswordListItem(passwordsSection).$$('#passwordMenu').click();
+      getFirstPasswordListItem(passwordsSection).$.moreActionsButton.click();
       passwordsSection.$.passwordsListHandler.$.menuRemovePassword.click();
       flush();
       const removeDialog =