Add dialog to edit and save credit cards.

Tests included for dialog.
Screenshots in bug.

BUG=607348
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2015463003
Cr-Commit-Position: refs/heads/master@{#398133}

chrome/app/settings_strings.grdp

@@ -236,9 +236,6 @@
   <message name="IDS_SETTINGS_AUTOFILL_CREDIT_CARD_TYPE_COLUMN_LABEL" desc="Label for the column containing the type of credit card that is saved. The type is in the format: `Visa ****1234`.">
     Type
   </message>
-  <message name="IDS_SETTINGS_AUTOFILL_CREDIT_CARD_EXPIRATION_COLUMN_LABEL" desc="Label for the heading containing the expiration date for the credit card that has been saved.">
-    Expiration date
-  </message>
   <message name="IDS_SETTINGS_AUTOFILL_DETAIL" desc="Description of what toggling the 'Autofill' setting does. Immediately underneath IDS_SETTINGS_AUTOFILL">
     Enable Autofill to fill out forms in a single click
   </message>
@@ -254,6 +251,27 @@
   <message name="IDS_SETTINGS_CREDIT_CARD_REMOVE" desc="Label for a context menu item that removes the selected credit card." meaning="Remove selected credit card.">
    Remove
   </message>
+  <message name="IDS_SETTINGS_EDIT_CREDIT_CARD_TITLE" desc="The title for the dialog that's shown when editing a credit card.">
+    Edit credit card
+  </message>
+  <message name="IDS_SETTINGS_ADD_CREDIT_CARD_TITLE" desc="The title for the dialog that's shown when entering the information for a new credit card.">
+    Add credit card
+  </message>
+  <message name="IDS_SETTINGS_NAME_ON_CREDIT_CARD" desc="The title for the input that lets users modify the name on the credit card.">
+    Name on card
+  </message>
+  <message name="IDS_SETTINGS_CREDIT_CARD_NUMBER" desc="The title for the input that lets users modify the credit card number for a credit card.">
+    Credit card number
+  </message>
+  <message name="IDS_SETTINGS_CREDIT_CARD_EXPIRATION_DATE" desc="Label for the expiration date fields of a credit card that has been or is being saved.">
+    Expiration date
+  </message>
+  <message name="IDS_SETTINGS_CREDIT_CARD_EXPIRATION_MONTH" desc="Accessibility label on the month drop down to let users know the field corresponds to the expiration month">
+    Expiration month
+  </message>
+  <message name="IDS_SETTINGS_CREDIT_CARD_EXPIRATION_YEAR" desc="Accessibility label on the year drop down to let users know the field corresponds to the expiration year">
+    Expiration year
+  </message>
   <message name="IDS_SETTINGS_PASSWORDS" desc="Name for the password section and toggle">
     Manage passwords
   </message>

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

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="/passwords_and_forms_page/credit_card_edit_dialog.html">
 <link rel="import" href="/passwords_and_forms_page/passwords_shared_css.html">
 <link rel="import" href="/settings_shared_css.html">
 
@@ -87,6 +88,8 @@
       <div id="menuRemoveCreditCard" class="list-item menu-item"
           on-tap="onMenuRemoveCreditCardTap_">$i18n{removeCreditCard}</div>
     </cr-shared-menu>
+    <settings-credit-card-edit-dialog id="editCreditCardDialog">
+    </settings-credit-card-edit-dialog>
   </template>
   <link rel="import" type="css" href="chrome://resources/css/action_link.css">
   <script src="/passwords_and_forms_page/autofill_section.js"></script>

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

@@ -17,17 +17,13 @@
        * An array of saved addresses.
        * @type {!Array<!chrome.autofillPrivate.AddressEntry>}
        */
-      addresses: {
-        type: Array,
-      },
+      addresses: Array,
 
       /**
        * An array of saved addresses.
        * @type {!Array<!chrome.autofillPrivate.CreditCardEntry>}
        */
-      creditCards: {
-        type: Array,
-      },
+      creditCards: Array,
     },
 
     listeners: {
@@ -39,7 +35,7 @@
     /**
      * Formats an AddressEntry so it's displayed as an address.
      * @param {!chrome.autofillPrivate.AddressEntry} item
-     * @return {!string}
+     * @return {string}
      */
     address_: function(item) {
       return item.metadata.summaryLabel + item.metadata.summarySublabel;
@@ -48,7 +44,7 @@
     /**
      * Formats the expiration date so it's displayed as MM/YYYY.
      * @param {!chrome.autofillPrivate.CreditCardEntry} item
-     * @return {!string}
+     * @return {string}
      */
     expiration_: function(item) {
       return item.expirationMonth + '/' + item.expirationYear;
@@ -122,7 +118,13 @@
      * @private
      */
     onAddCreditCardTap_: function(e) {
-      // TODO(hcarmona): implement adding a credit card.
+      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({
+        expirationMonth: expirationMonth.toString(),
+        expirationYear: date.getFullYear().toString(),
+      });
       e.preventDefault();
     },
 
@@ -131,8 +133,10 @@
      * @private
      */
     onMenuEditCreditCardTap_: function() {
-      // TODO(hcarmona): implement editing a credit card.
-      this.$.creditCardSharedMenu.closeMenu();
+      var menu = this.$.creditCardSharedMenu;
+      this.$.editCreditCardDialog.open(
+          /** @type {chrome.autofillPrivate.CreditCardEntry} */(menu.itemData));
+      menu.closeMenu();
     },
 
     /**

chrome/browser/resources/settings/passwords_and_forms_page/compiled_resources2.gyp

@@ -22,6 +22,15 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp:cr_shared_menu',
         '<(EXTERNS_GYP):autofill_private',
+        'credit_card_edit_dialog',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'credit_card_edit_dialog',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(EXTERNS_GYP):autofill_private',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -30,13 +39,13 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp:cr_shared_menu',
         '<(EXTERNS_GYP):passwords_private',
+        'password_edit_dialog',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
       'target_name': 'password_edit_dialog',
       'dependencies': [
-        '<(DEPTH)/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp:cr_shared_menu',
         '<(EXTERNS_GYP):passwords_private',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
+<link rel="import" href="/settings_dialog.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-credit-card-edit-dialog">
+  <style include="settings-shared">
+    paper-input {
+      width: var(--paper-input-max-width);
+    }
+
+    .months,
+    .month-dropdown {
+      width: 70px;
+    }
+
+    .years,
+    .year-dropdown {
+      width: 100px;
+    }
+
+    .month-dropdown {
+      -webkit-padding-end: 16px;
+    }
+
+    label {
+      color: var(--light-theme-secondary-color);
+      display: block;
+      padding-top: 8px;
+    }
+  </style>
+  <template>
+    <settings-dialog id="dialog">
+      <div class="title">[[title_]]</div>
+      <div class="body">
+        <paper-input id="nameInput" label="$i18n{creditCardName}"
+            value="{{item.name}}" always-float-label></paper-input>
+          <paper-input id="numberInput" label="$i18n{creditCardNumber}"
+              value="{{item.cardNumber}}" always-float-label></paper-input>
+        <label>$i18n{creditCardExpiration}</label>
+        <paper-dropdown-menu class="month-dropdown" no-label-float
+            label="$i18n{creditCardExpirationMonth}">
+          <paper-listbox class="dropdown-content months"
+              selected="{{item.expirationMonth}}" attr-for-selected="name">
+            <paper-item name="01">01</paper-item>
+            <paper-item name="02">02</paper-item>
+            <paper-item name="03">03</paper-item>
+            <paper-item name="04">04</paper-item>
+            <paper-item name="05">05</paper-item>
+            <paper-item name="06">06</paper-item>
+            <paper-item name="07">07</paper-item>
+            <paper-item name="08">08</paper-item>
+            <paper-item name="09">09</paper-item>
+            <paper-item name="10">10</paper-item>
+            <paper-item name="11">11</paper-item>
+            <paper-item name="12">12</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu>
+        <paper-dropdown-menu class="year-dropdown" no-label-float
+            label="$i18n{creditCardExpirationYear}">
+          <paper-listbox id="yearList" class="dropdown-content years"
+              selected="{{item.expirationYear}}" attr-for-selected="name">
+            <template is="dom-repeat" items="[[yearList_]]">
+              <paper-item name="[[item]]">[[item]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+      </div>
+      <div class="button-container">
+        <paper-button id="cancelButton"
+            on-tap="onCancelButtonTap_">$i18n{cancel}</paper-button>
+        <paper-button id="saveButton" class="action-button"
+            on-tap="onSaveButtonTap_">$i18n{save}</paper-button>
+      </div>
+    </settings-dialog>
+  </template>
+  <script src="/passwords_and_forms_page/credit_card_edit_dialog.js"></script>
+</dom-module>

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

+// 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 'settings-credit-card-edit-dialog' is the dialog that allows
+ * editing or creating a credit card entry.
+ */
+
+(function() {
+'use strict';
+
+Polymer({
+  is: 'settings-credit-card-edit-dialog',
+
+  properties: {
+    /**
+     * The credit card being edited
+     * @type {!chrome.autofillPrivate.CreditCardEntry}
+     */
+    item: Object,
+
+    /**
+     * The actual title that's used for this dialog. Will be context sensitive
+     * based on if |item| is being created or edited.
+     * @private
+     */
+    title_: String,
+
+    /**
+     * The list of years to show in the dropdown.
+     * @type {!Array<string>}
+     */
+    yearList_: Array,
+  },
+
+  behaviors: [
+    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');
+
+    // Add a leading '0' if a month is 1 char.
+    if (item.expirationMonth.length == 1)
+      item.expirationMonth = '0' + item.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);
+
+    // |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;
+
+    // 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.$.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();
+  },
+
+  /**
+   * 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;
+  },
+});
+})();

chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html

@@ -8,8 +8,7 @@
 
 <dom-module id="password-edit-dialog">
   <template>
-    <style include="settings-shared"></style>
-    <style>
+    <style include="settings-shared">
       #passwordGroup {
         align-items: center;
         display: flex;

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

@@ -18,15 +18,10 @@ Polymer({
      * The password that is being displayed.
      * @type {!chrome.passwordsPrivate.PasswordUiEntry}
      */
-    item: {
-      type: Object,
-      value: null,
-    },
+    item: Object,
 
-    password: {
-      type: String,
-      value: '',
-    },
+    /** Holds the plaintext password when requested. */
+    password: String,
   },
 
   /** Opens the dialog. */

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

@@ -71,7 +71,7 @@ PasswordManager.prototype = {
 
   /**
    * Should remove the password exception and notify that the list has changed.
-   * @param {!string} exception The exception that should be removed from the
+   * @param {string} exception The exception that should be removed from the
    *     list. No-op if |exception| is not in the list.
    */
   removeException: assertNotReached,
@@ -142,6 +142,12 @@ AutofillManager.prototype = {
    *     remove.
    */
   removeCreditCard: assertNotReached,
+
+  /**
+   * Saves the given credit card.
+   * @param {!AutofillManager.CreditCardEntry} creditCard
+   */
+  saveCreditCard: assertNotReached,
 };
 
 /**
@@ -264,6 +270,11 @@ AutofillManagerImpl.prototype = {
   removeCreditCard: function(creditCard) {
     chrome.autofillPrivate.removeEntry(/** @type {string} */(creditCard.guid));
   },
+
+  /** @override */
+  saveCreditCard: function(creditCard) {
+    chrome.autofillPrivate.saveCreditCard(creditCard);
+  }
 };
 
 (function() {
@@ -293,33 +304,25 @@ Polymer({
      * An array of passwords to display.
      * @type {!Array<!PasswordManager.PasswordUiEntry>}
      */
-    savedPasswords: {
-      type: Array,
-    },
+    savedPasswords: Array,
 
     /**
      * An array of sites to display.
      * @type {!Array<!PasswordManager.ExceptionPair>}
      */
-    passwordExceptions: {
-      type: Array,
-    },
+    passwordExceptions: Array,
 
      /**
      * An array of saved addresses.
      * @type {!Array<!AutofillManager.AddressEntry>}
      */
-    addresses: {
-      type: Array,
-    },
+    addresses: Array,
 
     /**
      * An array of saved addresses.
      * @type {!Array<!AutofillManager.CreditCardEntry>}
      */
-    creditCards: {
-      type: Array,
-    },
+    creditCards: Array,
  },
 
   listeners: {
@@ -327,6 +330,7 @@ Polymer({
     'remove-credit-card': 'removeCreditCard_',
     'remove-password-exception': 'removePasswordException_',
     'remove-saved-password': 'removeSavedPassword_',
+    'save-credit-card': 'saveCreditCard_',
     'show-password': 'showPassword_',
   },
 
@@ -457,6 +461,15 @@ Polymer({
     }
   },
 
+  /**
+   * Listens for the save-credit-card event, and calls the private API.
+   * @param {!Event} event
+   * @private
+   */
+  saveCreditCard_: function(event) {
+    this.autofillManager_.saveCreditCard(event.detail);
+  },
+
   /**
    * Listens for the show-password event, and calls the private API.
    * @param {!Event} event

chrome/browser/resources/settings/settings_resources.grd

@@ -471,6 +471,12 @@
       <structure name="IDR_SETTINGS_PASSWORDS_SHARED_CSS_HTML"
                  file="passwords_and_forms_page/passwords_shared_css.html"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_CREDIT_CARD_EDIT_DIALOG_HTML"
+                 file="passwords_and_forms_page/credit_card_edit_dialog.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_CREDIT_CARD_EDIT_DIALOG_JS"
+                 file="passwords_and_forms_page/credit_card_edit_dialog.js"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_AUTOFILL_SECTION_HTML"
                  file="passwords_and_forms_page/autofill_section.html"
                  type="chrome_html" />

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -659,8 +659,13 @@ void AddPasswordsAndFormsStrings(content::WebUIDataSource* html_source) {
       {"editCreditCard", IDS_SETTINGS_CREDIT_CARD_EDIT},
       {"removeCreditCard", IDS_SETTINGS_CREDIT_CARD_REMOVE},
       {"creditCardType", IDS_SETTINGS_AUTOFILL_CREDIT_CARD_TYPE_COLUMN_LABEL},
-      {"creditCardExpiration",
-       IDS_SETTINGS_AUTOFILL_CREDIT_CARD_EXPIRATION_COLUMN_LABEL},
+      {"creditCardExpiration", IDS_SETTINGS_CREDIT_CARD_EXPIRATION_DATE},
+      {"creditCardName", IDS_SETTINGS_NAME_ON_CREDIT_CARD},
+      {"creditCardNumber", IDS_SETTINGS_CREDIT_CARD_NUMBER},
+      {"creditCardExpirationMonth", IDS_SETTINGS_CREDIT_CARD_EXPIRATION_MONTH},
+      {"creditCardExpirationYear", IDS_SETTINGS_CREDIT_CARD_EXPIRATION_YEAR},
+      {"editCreditCardTitle", IDS_SETTINGS_EDIT_CREDIT_CARD_TITLE},
+      {"addCreditCardTitle", IDS_SETTINGS_ADD_CREDIT_CARD_TITLE},
       {"autofillDetail", IDS_SETTINGS_AUTOFILL_DETAIL},
       {"passwords", IDS_SETTINGS_PASSWORDS},
       {"passwordsDetail", IDS_SETTINGS_PASSWORDS_DETAIL},

chrome/test/data/webui/settings/passwords_and_autofill_fake_data.js

@@ -66,6 +66,19 @@ FakeDataMaker.addressEntry = function() {
   return ret;
 };
 
+/**
+ * Creates a new empty credit card entry for testing.
+ * @return {!chrome.autofillPrivate.CreditCardEntry}
+ */
+FakeDataMaker.emptyCreditCardEntry = function() {
+  var now = new Date();
+  var expirationMonth = now.getMonth() + 1;
+  var ret = {};
+  ret.expirationMonth = expirationMonth.toString()
+  ret.expirationYear = now.getFullYear().toString();
+  return ret;
+};
+
 /**
  * Creates a new random credit card entry for testing.
  * @return {!chrome.autofillPrivate.CreditCardEntry}
@@ -86,7 +99,7 @@ FakeDataMaker.creditCardEntry = function() {
 
 /**
  * Creates a new random GUID for testing.
- * @return {!string}
+ * @return {string}
  * @private
  */
 FakeDataMaker.makeGuid_ = function() {
@@ -96,9 +109,9 @@ FakeDataMaker.makeGuid_ = function() {
 
 /**
  * Replaces any 'x' in a string with a random number of the base.
- * @param {!string} pattern The pattern that should be used as an input.
- * @param {!number} base The number base. ie: 16 for hex or 10 for decimal.
- * @return {!string}
+ * @param {string} pattern The pattern that should be used as an input.
+ * @param {number} base The number base. ie: 16 for hex or 10 for decimal.
+ * @return {string}
  * @private
  */
 FakeDataMaker.patternMaker_ = function(pattern, base) {

chrome/test/data/webui/settings/settings_autofill_section_browsertest.js

@@ -8,12 +8,12 @@
 var ROOT_PATH = '../../../../../';
 
 // Polymer BrowserTest fixture.
-GEN_INCLUDE(
-    [ROOT_PATH + 'chrome/test/data/webui/polymer_browser_test_base.js']);
-
-// Fake data generator.
-GEN_INCLUDE([ROOT_PATH +
-    'chrome/test/data/webui/settings/passwords_and_autofill_fake_data.js']);
+GEN_INCLUDE([
+    ROOT_PATH + 'chrome/test/data/webui/polymer_browser_test_base.js',
+    ROOT_PATH +
+        'chrome/test/data/webui/settings/passwords_and_autofill_fake_data.js',
+    ROOT_PATH + 'ui/webui/resources/js/load_time_data.js',
+]);
 
 /**
  * @constructor
@@ -37,6 +37,12 @@ SettingsAutofillSectionBrowserTest.prototype = {
 
     // Test is run on an individual element that won't have a page language.
     this.accessibilityAuditConfig.auditRulesToIgnore.push('humanLangMissing');
+
+    // Faking 'strings.js' for this test.
+    loadTimeData.data = {
+      editCreditCardTitle: 'edit-title',
+      addCreditCardTitle: 'add-title'
+    };
   },
 
   /**
@@ -49,6 +55,7 @@ SettingsAutofillSectionBrowserTest.prototype = {
     autofillSection.$.creditCardList.notifyResize();
     Polymer.dom.flush();
   },
+
   /**
    * Creates the autofill section for the given lists.
    * @param {!Array<!chrome.passwordsPrivate.PasswordUiEntry>} passwordList
@@ -57,7 +64,6 @@ SettingsAutofillSectionBrowserTest.prototype = {
    * @private
    */
   createAutofillSection_: function(addresses, creditCards) {
-    // Create a passwords-section to use for testing.
     var section = document.createElement('settings-autofill-section');
     section.addresses = addresses;
     section.creditCards = creditCards;
@@ -65,6 +71,19 @@ SettingsAutofillSectionBrowserTest.prototype = {
     this.flushAutofillSection_(section);
     return section;
   },
+
+  /**
+   * Creates the Edit Credit Card dialog.
+   * @param {!chrome.autofillPrivate.CreditCardEntry} creditCardItem
+   * @return {!Object}
+   */
+  createCreditCardDialog_: function(creditCardItem) {
+    var section = document.createElement('settings-credit-card-edit-dialog');
+    document.body.appendChild(section);
+    section.open(creditCardItem);  // Opening the dialog will add the item.
+    Polymer.dom.flush();
+    return section;
+  },
 };
 
 /**
@@ -107,6 +126,106 @@ TEST_F('SettingsAutofillSectionBrowserTest', 'uiTests', function() {
                    row.querySelector('#creditCardExpiration').textContent);
     });
 
+    test('verifyAddVsEditCreditCardTitle', function() {
+      var newCreditCard = FakeDataMaker.emptyCreditCardEntry();
+      var newCreditCardDialog = self.createCreditCardDialog_(newCreditCard);
+      var oldCreditCard = FakeDataMaker.creditCardEntry();
+      var oldCreditCardDialog = self.createCreditCardDialog_(oldCreditCard);
+
+      assertNotEquals(oldCreditCardDialog.title_, newCreditCardDialog.title_);
+      assertNotEquals('', newCreditCardDialog.title_);
+      assertNotEquals('', oldCreditCardDialog.title_);
+    }),
+
+    test('verifyExpiredCreditCardYear', function() {
+      var creditCard = FakeDataMaker.creditCardEntry();
+
+      // 2015 is over unless time goes wobbly.
+      var twentyFifteen = 2015;
+      creditCard.expirationYear = twentyFifteen.toString();
+
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+      var selectableYears = creditCardDialog.$.yearList.items;
+      var firstSelectableYear = selectableYears[0];
+      var lastSelectableYear = selectableYears[selectableYears.length - 1];
+
+      var now = new Date();
+      var maxYear = now.getFullYear() + 9;
+
+      assertEquals('2015', firstSelectableYear.textContent);
+      assertEquals(maxYear.toString(), lastSelectableYear.textContent);
+    }),
+
+    test('verifyVeryFutureCreditCardYear', function() {
+      var creditCard = FakeDataMaker.creditCardEntry();
+
+      // Expiring 20 years from now is unusual.
+      var now = new Date();
+      var farFutureYear = now.getFullYear() + 20;
+      creditCard.expirationYear = farFutureYear.toString();
+
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+      var selectableYears = creditCardDialog.$.yearList.items;
+      var firstSelectableYear = selectableYears[0];
+      var lastSelectableYear = selectableYears[selectableYears.length - 1];
+
+      assertEquals(now.getFullYear().toString(),
+          firstSelectableYear.textContent);
+      assertEquals(farFutureYear.toString(), lastSelectableYear.textContent);
+    }),
+
+    test('verifyVeryNormalCreditCardYear', function() {
+      var creditCard = FakeDataMaker.creditCardEntry();
+
+      // Expiring 2 years from now is not unusual.
+      var now = new Date();
+      var nearFutureYear = now.getFullYear() + 2;
+      creditCard.expirationYear = nearFutureYear.toString();
+      var maxYear = now.getFullYear() + 9;
+
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+      var selectableYears = creditCardDialog.$.yearList.items;
+      var firstSelectableYear = selectableYears[0];
+      var lastSelectableYear = selectableYears[selectableYears.length - 1];
+
+      assertEquals(now.getFullYear().toString(),
+          firstSelectableYear.textContent);
+      assertEquals(maxYear.toString(), lastSelectableYear.textContent);
+    }),
+
+    // Test will timeout if event is not received.
+    test('verifySaveCreditCardEdit', function(done) {
+      var creditCard = FakeDataMaker.emptyCreditCardEntry();
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+
+      creditCardDialog.addEventListener('save-credit-card', function(event) {
+        assertEquals(creditCard.guid, event.detail.guid);
+        done();
+      });
+
+      MockInteractions.tap(creditCardDialog.$.saveButton);
+    }),
+
+    test('verifyCancelCreditCardEdit', function(done) {
+      var creditCard = FakeDataMaker.emptyCreditCardEntry();
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+
+      creditCardDialog.addEventListener('save-credit-card', function(event) {
+        // Fail the test because the save event should not be called when cancel
+        // is clicked.
+        assertTrue(false);
+        done();
+      });
+
+      creditCardDialog.addEventListener('iron-overlay-closed', function(event) {
+        // Test is |done| in a timeout in order to ensure that
+        // 'save-credit-card' is NOT fired after this test.
+        window.setTimeout(done, 100);
+      });
+
+      MockInteractions.tap(creditCardDialog.$.cancelButton);
+    }),
+
     test('verifyAddressCount', function() {
       var addresses = [
         FakeDataMaker.addressEntry(),