Add context menus in md-setting for the address and credit card lists.

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 1aa535287a78ffbf825b7f21865d3865591865ce..ebef68bcdff4b9a37edd216c2cfe32a87ae13034 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
@@ -30,6 +30,12 @@
       },
     },
 
+    listeners: {
+      'addressList.scroll': 'closeMenu_',
+      'creditCardList.scroll': 'closeMenu_',
+      'tap': 'closeMenu_',
+    },
+
     /**
      * Formats an AddressEntry so it's displayed as an address.
      * @param {!chrome.autofillPrivate.AddressEntry} item
@@ -49,21 +55,121 @@
     },
 
     /**
+     * Toggles the address overflow menu.
+     * @param {!Event} e The polymer event.
+     * @private
+     */
+    onAddressMenuTap_: function(e) {
+      // Close the other menu.
+      /** @type {CrSharedMenuElement} */(

[tommycli, 2016/05/18 23:29:20]

Are all these typecasts definitely necessary for closure?

[hcarmona, 2016/05/20 20:18:58]

Looked at them again, got rid of all the unnecessary ones.

[tommycli, 2016/05/20 20:24:18]

Perhaps try something that looks like this for assigning a type to the Event
within the @param tag:
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

[hcarmona, 2016/05/20 20:59:51]

Can't do that in this case because |e| also needs to be an Event in
order to get |localTarget| from Polymer.dom and call |stopPropagation|.

[tommycli, 2016/05/20 21:14:41]

Ah. I see that's a good explanation.

+          this.$.creditCardSharedMenu).closeMenu();
+      var menu = /** @type {CrSharedMenuElement} */(this.$.addressSharedMenu);
+      var target = /** @type {!Element} */(Polymer.dom(e).localTarget);
+      var menuEvent = /** @type {!{model: !{item: !Object}}} */(e);
+      var address = /** @type {!chrome.autofillPrivate.AddressEntry} */(
+          menuEvent.model.item);
+
+      menu.toggleMenu(target, address);
+      e.stopPropagation();  // Prevent the tap event from closing the menu.
+    },
+
+    /**
      * Handles tapping on the "Add address" button.
      * @param {!Event} e
+     * @private
      */
     onAddAddressTap_: function(e) {
-      // TODO(hcarmona): implement this.
+      // TODO(hcarmona): implement adding an address.
       e.preventDefault();
     },
 
     /**
+     * Handles tapping on the "Edit" address button.
+     * @private
+     */
+    onMenuEditAddressTap_: function() {
+      var menu = /** @type {CrSharedMenuElement} */(this.$.addressSharedMenu);
+      var data =

[tommycli, 2016/05/18 23:29:20]

Is data currently used? Or is this for the future?

[hcarmona, 2016/05/20 20:18:58]

Not used currently. Removed and will add when used.
Same for all uses of |data|.

+        /** @type {chrome.autofillPrivate.AddressEntry} */(menu.itemData);
+      // TODO(hcarmona): implement editing an address.
+      menu.closeMenu();
+    },
+
+    /**
+     * Handles tapping on the "Remove" address button.
+     * @private
+     */
+    onMenuRemoveAddressTap_: function() {
+      var menu = /** @type {CrSharedMenuElement} */(this.$.addressSharedMenu);
+      var data =

[tommycli, 2016/05/18 23:29:20]

same here

[hcarmona, 2016/05/20 20:18:58]

same.

+        /** @type {chrome.autofillPrivate.AddressEntry} */(menu.itemData);
+      // TODO(hcarmona): implement removing an address.
+      menu.closeMenu();
+    },
+
+    /**
+     * Toggles the credit card overflow menu.
+     * @param {!Event} e The polymer event.
+     * @private
+     */
+    onCreditCardMenuTap_: function(e) {
+      // Close the other menu.
+      /** @type {CrSharedMenuElement} */(this.$.addressSharedMenu).closeMenu();
+      var menu =
+          /** @type {CrSharedMenuElement} */(this.$.creditCardSharedMenu);
+      var target = /** @type {!Element} */(Polymer.dom(e).localTarget);
+      var menuEvent = /** @type {!{model: !{item: !Object}}} */(e);
+      var creditCard = /** @type {!chrome.autofillPrivate.CreditCardEntry} */(
+          menuEvent.model.item);
+
+      menu.toggleMenu(target, creditCard);
+      e.stopPropagation();  // Prevent the tap event from closing the menu.
+    },
+
+    /**
      * Handles tapping on the "Add credit card" button.
      * @param {!Event} e
+     * @private
      */
     onAddCreditCardTap_: function(e) {
-      // TODO(hcarmona): implement this.
+      // TODO(hcarmona): implement adding a credit card.
       e.preventDefault();
     },
+
+    /**
+     * Handles tapping on the "Edit" credit card button.
+     * @private
+     */
+    onMenuEditCreditCardTap_: function() {
+      var menu =
+          /** @type {CrSharedMenuElement} */(this.$.creditCardSharedMenu);
+      var data =
+        /** @type {chrome.autofillPrivate.CreditCardEntry} */(menu.itemData);
+      // TODO(hcarmona): implement editing a credit card.
+      menu.closeMenu();
+    },
+
+    /**
+     * Handles tapping on the "Remove" credit card button.
+     * @private
+     */
+    onMenuRemoveCreditCardTap_: function() {
+      var menu =
+          /** @type {CrSharedMenuElement} */(this.$.creditCardSharedMenu);
+      var data =
+        /** @type {chrome.autofillPrivate.CreditCardEntry} */(menu.itemData);
+      // TODO(hcarmona): implement removing a credit card.
+      menu.closeMenu();
+    },
+
+    /**
+     * Closes the overflow menus.
+     * @private
+     */
+    closeMenu_: function() {
+      /** @type {CrSharedMenuElement} */(this.$.addressSharedMenu).closeMenu();
+      /** @type {CrSharedMenuElement} */(
+          this.$.creditCardSharedMenu).closeMenu();

[tommycli, 2016/05/18 23:29:20]

I think these shouldn't require typecasts if CrSharedMenuElement is listed under
the dependencies of compiled_resources2.gyp. I can look on your machine if I'm
wrong... 

[hcarmona, 2016/05/20 20:18:58]

Done.

+    },
   });
 })();