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

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
index 9275819048ceb0ff614bbad265b52508d8206264..c57d2f0b77c67d8d32faa96d7f652f37070be7ff 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
@@ -15,14 +15,14 @@ Polymer({
 
   properties: {
     /**
-     * The credit card being edited
+     * The credit card being edited.
      * @type {!chrome.autofillPrivate.CreditCardEntry}
      */
-    item: Object,
+    creditCard: Object,
 
     /**
      * The actual title that's used for this dialog. Will be context sensitive
-     * based on if |item| is being created or edited.
+     * based on if |creditCard| is being created or edited.
      * @private
      */
     title_: String,
@@ -49,28 +49,19 @@ Polymer({
     I18nBehavior,
   ],
 
-  /**
-   * Needed to move from year to selected index.
-   * @type {number}
-   */
-  firstYearInList_: 0,
-
-  /**
-   * Opens the dialog.
-   * @param {!chrome.autofillPrivate.CreditCardEntry} item The card to edit.
-   */
-  open: function(item) {
-    this.title_ =
-        this.i18n(item.guid ? 'editCreditCardTitle' : 'addCreditCardTitle');
+  /** @override */
+  attached: function() {
+    this.title_ = this.i18n(
+        this.creditCard.guid ? 'editCreditCardTitle' : 'addCreditCardTitle');
 
     // Add a leading '0' if a month is 1 char.
-    if (item.expirationMonth.length == 1)
-      item.expirationMonth = '0' + item.expirationMonth;
+    if (this.creditCard.expirationMonth.length == 1)
+      this.creditCard.expirationMonth = '0' + this.creditCard.expirationMonth;
 
     var date = new Date();
     var firstYear = date.getFullYear();
     var lastYear = firstYear + 9;  // Show next 9 years (10 total).
-    var selectedYear = parseInt(item.expirationYear, 10);
+    var selectedYear = parseInt(this.creditCard.expirationYear, 10);
 
     // |selectedYear| must be valid and between first and last years.
     if (!selectedYear)
@@ -80,12 +71,14 @@ Polymer({
     else if (selectedYear > lastYear)
       lastYear = selectedYear;
 
-    this.yearList_ = this.createYearList_(firstYear, lastYear);
-    this.firstYearInList_ = firstYear;
+    var yearList = [];
+    for (var i = firstYear; i <= lastYear; ++i) {
+      yearList.push(i.toString());
+    }
+    this.yearList_ = yearList;
 
-    // Set |this.item| last because it has the selected year which won't be
-    // valid until after the |this.yearList_| is set.
-    this.item = item;
+    this.expirationYear = this.creditCard.expirationYear;
+    this.expirationMonth = this.creditCard.expirationMonth;
 
     this.$.dialog.open();
   },
@@ -108,22 +101,10 @@ Polymer({
    * @private
    */
   onSaveButtonTap_: function() {
-    this.fire('save-credit-card', this.item);
+    this.creditCard.expirationYear = this.expirationYear;
+    this.creditCard.expirationMonth = this.expirationMonth;
+    this.fire('save-credit-card', this.creditCard);
     this.close();
   },
-
-  /**
-   * Creates an array of years given a start and end (inclusive).
-   * @param {number} firstYear
-   * @param {number} lastYear
-   * @return {!Array<string>}
-   */
-  createYearList_: function(firstYear, lastYear) {
-    var yearList = [];
-    for (var i = firstYear; i <= lastYear; ++i) {
-      yearList.push(i.toString());
-    }
-    return yearList;
-  },
 });
 })();