Add dialog to edit and save credit cards.

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
new file mode 100644
index 0000000000000000000000000000000000000000..4a63b655bacdb244bfa8575609bfc3ffa5f363ad
--- /dev/null
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
@@ -0,0 +1,164 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview 'password-edit-dialog' is the dialog that allows showing a

[michaelpg, 2016/05/27 17:57:08]

fix

[hcarmona, 2016/05/31 21:14:06]

Done.

+ *     saved password.
+ */
+
+(function() {
+'use strict';
+
+Polymer({
+  is: 'settings-credit-card-edit-dialog',
+
+  properties: {
+    /**
+     * Title that's used for this dialog if editing a new credit card.
+     * @type {string}
+     */
+    newTitle: {

[michaelpg, 2016/05/27 17:57:08]

nit: use shorthand "newTitle: String," for this and the below props

[hcarmona, 2016/05/31 21:14:06]

Didn't know this shorthand existed. Will use more now. Thanks!

+      type: String,
+    },
+
+    /**
+     * Title that's used for this dialog if editing an existing credit card.
+     * @type {string}
+     */
+    editTitle: {

[michaelpg, 2016/05/27 17:57:08]

Do these really have to be separate variables? It looks like they always map to
hard-coded i18n strings.

[hcarmona, 2016/05/31 21:14:06]

Not anymore. I18nBehavior'd.

+      type: String,
+    },
+
+    /**
+     * The credit card being edited
+     * @type {!chrome.autofillPrivate.CreditCardEntry}
+     */
+    item: {
+      type: Object,
+    },
+
+    /**
+     * The actual title that's used for this dialog. Will be either
+     * |newTitle| or |editTitle|

[michaelpg, 2016/05/27 17:57:08]

nit: end with period

[hcarmona, 2016/05/31 21:14:06]

Done.

+     * @type {string}
+     * @private
+     */
+    title_: {
+      type: String,
+    },
+
+    /** @type {number} */
+    selectedMonthIndex_: {
+      type: Number,
+      observer: 'onSetMonth_',
+    },
+
+    /** @type {number} */
+    selectedYearIndex_: {
+      type: Number,
+      observer: 'onSetYear_',
+    },
+
+    /**
+     * The list of years to show in the dropdown.
+     * @type {!Array<string>}}
+     */
+    yearList_: {
+      type: Array,
+    },
+  },
+
+  /**
+   * 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_ = item.guid ? this.editTitle : this.newTitle;

[michaelpg, 2016/05/27 17:57:08]

this.title_ = this.i18n(item.guid ? 'editTitle' : 'newTitle');

[hcarmona, 2016/05/31 21:14:06]

Done.

+    this.item = item;
+    this.selectedMonthIndex_ = parseInt(item.expirationMonth, 10) - 1;

[michaelpg, 2016/05/27 17:57:07]

it's weird that the expiration dates are Strings in the API, but whatever

[hcarmona, 2016/05/31 21:14:06]

Acknowledged.

+
+    var date = new Date();
+    var firstYear = date.getFullYear();
+    var lastYear = firstYear + 9;  // Show next 9 years (10 total).
+    var selectedYear = parseInt(item.expirationYear, 10);
+
+    // |selectedYear| must be valid and between first and last years.
+    if (!selectedYear) {
+      selectedYear = firstYear;
+    } else if (selectedYear < firstYear) {
+      firstYear = selectedYear;
+    } else if (selectedYear > lastYear) {
+      lastYear = selectedYear;
+    }
+
+    this.yearList_ = this.createYearList_(firstYear, lastYear);
+    this.firstYearInList_ = firstYear;
+
+    this.async(function() {
+      // Async to allow dom-repeat to be built before changing the index.
+      this.selectedYearIndex_ = selectedYear - firstYear;
+    });
+
+    this.$.dialog.open();
+  },
+
+  /** Closes the dialog. */
+  close: function() {
+    this.$.dialog.close();
+  },
+
+  /**
+   * Handler for tapping the 'cancel' button. Should just dismiss the dialog.
+   * @private
+   */
+  onCancelButtonTap_: function() {
+    this.close();
+  },
+
+  /**
+   * Handler for tapping the save button.
+   * @private
+   */
+  onSaveButtonTap_: function() {
+    this.fire('save-credit-card', this.item);
+    this.close();
+  },
+
+  /**
+   * Sets the month in the item by converting it from 0 based to 1 based.
+   * @param {number} monthIndex
+   */
+  onSetMonth_: function(monthIndex) {
+    this.item.expirationMonth = '' + (monthIndex + 1);

[michaelpg, 2016/05/27 17:57:08]

it may be clearer to just give the paper-items string values "01" thru "12" and
use that as the attribute for selection, so you don't have to keep converting
between 0-indexed numbers and 1-indexed strings

[hcarmona, 2016/05/31 21:14:06]

Done. Did same for year.

+  },
+
+  /**
+   * Sets the year in the item by converting the index to the real year.
+   * @param {number} yearIndex
+   */
+  onSetYear_: function(yearIndex) {
+    this.item.expirationYear = '' + (yearIndex + this.firstYearInList_);
+  },
+
+  /**
+   * 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);

[michaelpg, 2016/05/27 17:57:08]

i would prefer i.toString() so it's clear why you're doing this

[hcarmona, 2016/05/31 21:14:06]

Done. Everywhere.

+    }
+    return yearList;
+  },
+});
+})();