MD Settings: Migrating autofill cr-shared-menu to settings-action-menu.

chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js

Index: chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js b/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js
index 9fa0edf19b4048d5321e48609d0ce650fccb0ccb..e92067ed45e9205a5a05f06494b698ec8768c950 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js
@@ -22,11 +22,14 @@
       addresses: Array,
 
       /**
-       * Assigning a non-null value triggers the add/edit dialog.
+       * The model for any address related action menus or dialogs.
        * @private {?chrome.autofillPrivate.AddressEntry}
        */
       activeAddress: Object,
 
+      /** @private */
+      showAddressDialog_: Boolean,
+
       /**
        * An array of saved addresses.
        * @type {!Array<!chrome.autofillPrivate.CreditCardEntry>}
@@ -34,15 +37,13 @@
       creditCards: Array,
 
       /**
-       * Assigning a non-null value triggers the add/edit dialog.
+       * The model for any credit card related action menus or dialogs.
        * @private {?chrome.autofillPrivate.CreditCardEntry}
        */
       activeCreditCard: Object,
-   },
 
-    listeners: {
-      'addressList.scroll': 'closeMenu_',
-      'creditCardList.scroll': 'closeMenu_',
+      /** @private */
+      showCreditCardDialog_: Boolean,
     },
 
     /**
@@ -64,30 +65,32 @@
     },
 
     /**
-     * Toggles the address overflow menu.
+     * Open the address action menu.
      * @param {!Event} e The polymer event.
      * @private
      */
     onAddressMenuTap_: function(e) {
-      // Close the other menu.
-      this.$.creditCardSharedMenu.closeMenu();
-
       var menuEvent = /** @type {!{model: !{item: !Object}}} */(e);
-      var address = /** @type {!chrome.autofillPrivate.AddressEntry} */(
+      this.activeAddress = /** @type {!chrome.autofillPrivate.AddressEntry} */(
           menuEvent.model.item);
-      this.$.menuRemoveAddress.hidden = !address.metadata.isLocal;
-      this.$.addressSharedMenu.toggleMenu(Polymer.dom(e).localTarget, address);
-      e.stopPropagation();  // Prevent the tap event from closing the menu.
+
+      var dotsButton = /** @type {!HTMLElement} */ (Polymer.dom(e).localTarget);
+      /** @type {!SettingsActionMenuElement} */ (
+          this.$.addressSharedMenu).showAt(dotsButton);
     },
 
     /**
      * Handles tapping on the "Add address" button.
-     * @param {!Event} e
      * @private
      */
-    onAddAddressTap_: function(e) {
-      e.preventDefault();
+    onAddAddressTap_: function() {
       this.activeAddress = {};
+      this.showAddressDialog_ = true;
+    },
+
+    /** @private */
+    onAddressDialogClosed_: function() {
+      this.showAddressDialog_ = false;
     },
 
     /**
@@ -95,21 +98,12 @@
      * @private
      */
     onMenuEditAddressTap_: function() {
-      var menu = this.$.addressSharedMenu;
-      /** @type {chrome.autofillPrivate.AddressEntry} */
-      var address = menu.itemData;
-
-      if (address.metadata.isLocal)
-        this.activeAddress = address;
+      if (this.activeAddress.metadata.isLocal)
+        this.showAddressDialog_ = true;
       else
         window.open(this.i18n('manageAddressesUrl'));
 
-      menu.closeMenu();
-    },
-
-    /** @private */
-    unstampAddressEditDialog_: function(e) {
-      this.activeAddress = null;
+      this.$.addressSharedMenu.close();
     },
 
     /**
@@ -117,28 +111,24 @@
      * @private
      */
     onMenuRemoveAddressTap_: function() {
-      var menu = this.$.addressSharedMenu;
-      this.fire('remove-address', menu.itemData);
-      menu.closeMenu();
+      this.fire('remove-address', this.activeAddress);
+      this.$.addressSharedMenu.close();
     },
 
     /**
-     * Toggles the credit card overflow menu.
+     * Opens the credit card action menu.
      * @param {!Event} e The polymer event.
      * @private
      */
     onCreditCardMenuTap_: function(e) {
-      // Close the other menu.
-      this.$.addressSharedMenu.closeMenu();
-
       var menuEvent = /** @type {!{model: !{item: !Object}}} */(e);
-      var creditCard = /** @type {!chrome.autofillPrivate.CreditCardEntry} */(
-          menuEvent.model.item);
-      this.$.menuRemoveCreditCard.hidden = !creditCard.metadata.isLocal;
-      this.$.menuClearCreditCard.hidden = !creditCard.metadata.isCached;
-      this.$.creditCardSharedMenu.toggleMenu(
-          Polymer.dom(e).localTarget, creditCard);
-      e.stopPropagation();  // Prevent the tap event from closing the menu.
+      this.activeCreditCard =
+          /** @type {!chrome.autofillPrivate.CreditCardEntry} */(
+              menuEvent.model.item);
+
+      var dotsButton = /** @type {!HTMLElement} */ (Polymer.dom(e).localTarget);
+      /** @type {!SettingsActionMenuElement} */ (
+          this.$.creditCardSharedMenu).showAt(dotsButton);
     },
 
     /**
@@ -153,7 +143,12 @@
         expirationMonth: expirationMonth.toString(),
         expirationYear: date.getFullYear().toString(),
       };
-      e.preventDefault();
+      this.showCreditCardDialog_ = true;
+    },
+
+    /** @private */
+    onCreditCardDialogClosed_: function() {
+      this.showCreditCardDialog_ = false;
     },
 
     /**
@@ -161,31 +156,22 @@
      * @private
      */
     onMenuEditCreditCardTap_: function() {
-      var menu = this.$.creditCardSharedMenu;
-      /** @type {chrome.autofillPrivate.CreditCardEntry} */
-      var creditCard = menu.itemData;
-
-      if (creditCard.metadata.isLocal)
-        this.activeCreditCard = creditCard;
+      if (this.activeCreditCard.metadata.isLocal)
+        this.showCreditCardDialog_ = true;
       else
         window.open(this.i18n('manageCreditCardsUrl'));
 
-      menu.closeMenu();
+      this.$.creditCardSharedMenu.close();
     },
 
-    /** @private */
-    unstampCreditCardEditDialog_: function(e) {
-      this.activeCreditCard = null;
-    },
 
     /**
      * Handles tapping on the "Remove" credit card button.
      * @private
      */
     onMenuRemoveCreditCardTap_: function() {
-      var menu = this.$.creditCardSharedMenu;
-      this.fire('remove-credit-card', menu.itemData);
-      menu.closeMenu();
+      this.fire('remove-credit-card', this.activeCreditCard);
+      this.$.creditCardSharedMenu.close();
     },
 
     /**
@@ -193,18 +179,8 @@
      * @private
      */
     onMenuClearCreditCardTap_: function() {
-      var menu = this.$.creditCardSharedMenu;
-      this.fire('clear-credit-card', menu.itemData);
-      menu.closeMenu();
-    },
-
-    /**
-     * Closes the overflow menus.
-     * @private
-     */
-    closeMenu_: function() {
-      this.$.addressSharedMenu.closeMenu();
-      this.$.creditCardSharedMenu.closeMenu();
+      this.fire('clear-credit-card', this.activeCreditCard);
+      this.$.creditCardSharedMenu.close();
     },
 
     /**