[MD Settings] Lazy create dialogs in Passwords and Autofill section.

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 edf7f53bc1c74b83ecfb3948ccaa9473f9011544..8bb11f13fbafd3dd02be33ac74563b82b0a2959e 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,23 @@
       addresses: Array,
 
       /**
+       * Assigning a non-null value triggers the add/edit dialog.
+       * @private {?chrome.autofillPrivate.AddressEntry}
+       */
+      activeAddress: Object,
+
+      /**
        * An array of saved addresses.
        * @type {!Array<!chrome.autofillPrivate.CreditCardEntry>}
        */
       creditCards: Array,
-    },
+
+      /**
+       * Assigning a non-null value triggers the add/edit dialog.
+       * @private {?chrome.autofillPrivate.CreditCardEntry}
+       */
+      activeCreditCard: Object,
+   },
 
     listeners: {
       'addressList.scroll': 'closeMenu_',
@@ -75,7 +87,7 @@
      */
     onAddAddressTap_: function(e) {
       e.preventDefault();
-      this.$.addressEditDialog.open({});
+      this.activeAddress = {};
     },
 
     /**
@@ -88,13 +100,20 @@
       var address = menu.itemData;
 
       if (address.metadata.isLocal)
-        this.$.addressEditDialog.open(address);
+        this.activeAddress = address;
       else
         window.open(this.i18n('manageAddressesUrl'));
 
       menu.closeMenu();
     },
 
+    /** @private */
+    unstampAddressEditDialog_: function(e) {
+      var expectedDialog = this.$$('settings-address-edit-dialog').$.dialog;
+      if (Polymer.dom(e).rootTarget == expectedDialog)

[hcarmona, 2016/07/19 23:33:06]

Necessary b/c closing a dropdown also triggers |iron-overlay-closed|.

[dpapad, 2016/07/19 23:52:17]

Understood. Would the following (shorter) variation also work (here and
elsewhere)?

var expectedDialog = this.$$('settings-address-edit-dialog');
if (Polymer.dom(e).localTarget == expectedDialog)
  this.activeAddress = null;
 
BTW, this will not be necessary when/if we migrate to native <dialog>, since the
name of the event becomes 'close' instead of 'iron-overlay-closed'.

[hcarmona, 2016/07/20 00:07:50]

Unfortunately the localTarget is the same for both the dialog closing
and the drop down, so it can't be used to distinguish the events.

+        this.activeAddress = null;
+    },
+
     /**
      * Handles tapping on the "Remove" address button.
      * @private
@@ -132,11 +151,10 @@
     onAddCreditCardTap_: function(e) {
       var date = new Date();  // Default to current month/year.
       var expirationMonth = date.getMonth() + 1;  // Months are 0 based.
-      // Pass in a new object to edit.
-      this.$.editCreditCardDialog.open({
+      this.activeCreditCard = {
         expirationMonth: expirationMonth.toString(),
         expirationYear: date.getFullYear().toString(),
-      });
+      };
       e.preventDefault();
     },
 
@@ -150,13 +168,20 @@
       var creditCard = menu.itemData;
 
       if (creditCard.metadata.isLocal)
-        this.$.editCreditCardDialog.open(creditCard);
+        this.activeCreditCard = creditCard;
       else
         window.open(this.i18n('manageCreditCardsUrl'));
 
       menu.closeMenu();
     },
 
+    /** @private */
+    unstampCreditCardEditDialog_: function(e) {
+      var expectedDialog = this.$$('settings-credit-card-edit-dialog').$.dialog;
+      if (Polymer.dom(e).rootTarget == expectedDialog)
+        this.activeCreditCard = null;
+    },
+
     /**
      * Handles tapping on the "Remove" credit card button.
      * @private