MD Settings: Migrating add/edit credit card dropdowns to native select.

BUG=651513
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

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

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

@@ -2,29 +2,30 @@
 <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-light.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-listbox/paper-listbox.html">
 <link rel="import" href="/settings_shared_css.html">
+<link rel="import" href="/select_css.html">
 
 <dom-module id="settings-credit-card-edit-dialog">
-  <style include="settings-shared">
+  <style include="settings-shared select">
     paper-input {
       width: var(--paper-input-max-width);
     }
 
-    .months,
-    .month-dropdown {
-      width: 70px;
+    .select-wrapper {
+      display: inline-block;
     }
 
-    .years,
-    .year-dropdown {
-      width: 100px;
+    .select-wrapper + .select-wrapper {
+      -webkit-margin-start: 16px;
+    }
+
+    #month {
+      width: 70px;
     }
 
-    .month-dropdown {
-      -webkit-padding-end: 16px;
+    #year {
+      width: 100px;
     }
 
     label {
@@ -39,32 +40,28 @@
       <div class="body">
         <paper-input id="nameInput" label="$i18n{creditCardName}"
             value="{{creditCard.name}}" always-float-label></paper-input>
-          <paper-input id="numberInput" label="$i18n{creditCardNumber}"
-              value="{{creditCard.cardNumber}}" always-float-label>
-          </paper-input>
+        <paper-input id="numberInput" label="$i18n{creditCardNumber}"
+            value="{{creditCard.cardNumber}}" always-float-label>
+        </paper-input>
         <label>$i18n{creditCardExpiration}</label>
-        <paper-dropdown-menu-light class="month-dropdown" no-label-float
-            vertical-align="auto" label="$i18n{creditCardExpirationMonth}">
-          <paper-listbox class="dropdown-content months"
-              selected="{{expirationMonth}}" attr-for-selected="name">
+        <span class="select-wrapper">
+          <select id="month" value="[[expirationMonth_]]"
+              on-change="onMonthChange_">
             <template is="dom-repeat" items="[[monthList_]]">
-              <button class="dropdown-item" role="option" name="[[item]]">
-                [[item]]
-              </button>
+              <option>[[item]]</option>
             </template>
-          </paper-listbox>
-        </paper-dropdown-menu-light>
-        <paper-dropdown-menu-light class="year-dropdown" no-label-float
-            vertical-align="auto" label="$i18n{creditCardExpirationYear}">
-          <paper-listbox id="yearList" class="dropdown-content years"
-              selected="{{expirationYear}}" attr-for-selected="name">
+          </select>
+          <span class="select-underline"></span>
+        </span>
+        <span class="select-wrapper">
+          <select id="year" value="[[expirationYear_]]"
+              on-change="onYearChange_">
             <template is="dom-repeat" items="[[yearList_]]">
-              <button class="dropdown-item" role="option" name="[[item]]">
-                [[item]]
-              </button>
+              <option>[[item]]</option>
             </template>
-          </paper-listbox>
-        </paper-dropdown-menu-light>
+          </select>
+          <span class="select-underline"></span>
+        </span>
       </div>
       <div class="button-container">
         <paper-button id="cancelButton" class="cancel-button"

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

@@ -43,6 +43,12 @@ Polymer({
      * @private {!Array<string>}
      */
     yearList_: Array,
+
+    /** @private */
+    expirationYear_: String,
+
+    /** @private {string|undefined} */
+    expirationMonth_: String,
   },
 
   behaviors: [
@@ -77,10 +83,11 @@ Polymer({
     }
     this.yearList_ = yearList;
 
-    this.expirationYear = this.creditCard.expirationYear;
-    this.expirationMonth = this.creditCard.expirationMonth;
-
-    this.$.dialog.showModal();
+    this.async(function() {
+      this.expirationYear_ = selectedYear.toString();
+      this.expirationMonth_ = this.creditCard.expirationMonth;
+      this.$.dialog.showModal();
+    }.bind(this));
   },
 
   /** Closes the dialog. */
@@ -101,10 +108,20 @@ Polymer({
    * @private
    */
   onSaveButtonTap_: function() {
-    this.creditCard.expirationYear = this.expirationYear;
-    this.creditCard.expirationMonth = this.expirationMonth;
+    this.creditCard.expirationYear = this.expirationYear_;
+    this.creditCard.expirationMonth = this.expirationMonth_;
     this.fire('save-credit-card', this.creditCard);
     this.close();
   },
+
+  /** @private */
+  onMonthChange_: function() {
+    this.expirationMonth_ = this.monthList_[this.$.month.selectedIndex];
+  },
+
+  /** @private */
+  onYearChange_: function() {
+    this.expirationYear_ = this.yearList_[this.$.year.selectedIndex];
+  },
 });
 })();

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

@@ -10,8 +10,6 @@ var ROOT_PATH = '../../../../../';
 // Polymer BrowserTest fixture.
 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',
 ]);
 
@@ -98,7 +96,10 @@ SettingsAutofillSectionBrowserTest.prototype = {
       'chrome://md-settings/passwords_and_forms_page/autofill_section.html',
 
   /** @override */
-  extraLibraries: PolymerTest.getLibraries(ROOT_PATH),
+  extraLibraries: PolymerTest.getLibraries(ROOT_PATH).concat([
+    'passwords_and_autofill_fake_data.js',
+    'test_util.js',
+  ]),
 
   /**
    * TODO(hcarmona): Increases speed, but disables A11y checks. Enable checks
@@ -246,15 +247,20 @@ TEST_F('SettingsAutofillSectionBrowserTest', 'CreditCardTests', function() {
       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.trim());
-      assertEquals(maxYear.toString(), lastSelectableYear.textContent.trim());
+      return test_util.whenAttributeIs(
+          creditCardDialog.$.dialog, 'open', true).then(function() {
+        var now = new Date();
+        var maxYear = now.getFullYear() + 9;
+        var yearOptions = creditCardDialog.$.year.options;
+
+        assertEquals('2015', yearOptions[0].textContent.trim());
+        assertEquals(
+            maxYear.toString(),
+            yearOptions[yearOptions.length -1].textContent.trim());
+        assertEquals(
+            creditCard.expirationYear, creditCardDialog.$.year.value);
+      });
     });
 
     test('verifyVeryFutureCreditCardYear', function() {
@@ -266,14 +272,20 @@ TEST_F('SettingsAutofillSectionBrowserTest', 'CreditCardTests', function() {
       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.trim());
-      assertEquals(farFutureYear.toString(),
-          lastSelectableYear.textContent.trim());
+
+      return test_util.whenAttributeIs(
+          creditCardDialog.$.dialog, 'open', true).then(function() {
+        var yearOptions = creditCardDialog.$.year.options;
+
+        assertEquals(
+            now.getFullYear().toString(),
+            yearOptions[0].textContent.trim());
+        assertEquals(
+            farFutureYear.toString(),
+            yearOptions[yearOptions.length -1].textContent.trim());
+        assertEquals(
+            creditCard.expirationYear, creditCardDialog.$.year.value);
+      });
     });
 
     test('verifyVeryNormalCreditCardYear', function() {
@@ -286,13 +298,20 @@ TEST_F('SettingsAutofillSectionBrowserTest', 'CreditCardTests', function() {
       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.trim());
-      assertEquals(maxYear.toString(), lastSelectableYear.textContent.trim());
+      return test_util.whenAttributeIs(
+          creditCardDialog.$.dialog, 'open', true).then(function() {
+        var yearOptions = creditCardDialog.$.year.options;
+
+        assertEquals(
+            now.getFullYear().toString(),
+            yearOptions[0].textContent.trim());
+        assertEquals(
+            maxYear.toString(),
+            yearOptions[yearOptions.length -1].textContent.trim());
+        assertEquals(
+            creditCard.expirationYear, creditCardDialog.$.year.value);
+      });
     });
 
     // Test will timeout if event is not received.
@@ -300,32 +319,37 @@ TEST_F('SettingsAutofillSectionBrowserTest', 'CreditCardTests', function() {
       var creditCard = FakeDataMaker.emptyCreditCardEntry();
       var creditCardDialog = self.createCreditCardDialog_(creditCard);
 
-      creditCardDialog.addEventListener('save-credit-card', function(event) {
-        assertEquals(creditCard.guid, event.detail.guid);
-        done();
+      return test_util.whenAttributeIs(
+          creditCardDialog.$.dialog, 'open', true).then(function() {
+        creditCardDialog.addEventListener('save-credit-card', function(event) {
+          assertEquals(creditCard.guid, event.detail.guid);
+          done();
+        });
+        MockInteractions.tap(creditCardDialog.$.saveButton);
       });
-
-      MockInteractions.tap(creditCardDialog.$.saveButton);
     });
 
     test('verifyCancelCreditCardEdit', function(done) {
       var creditCard = FakeDataMaker.emptyCreditCardEntry();
       var creditCardDialog = self.createCreditCardDialog_(creditCard);
 
-      creditCardDialog.addEventListener('save-credit-card', function() {
-        // Fail the test because the save event should not be called when cancel
-        // is clicked.
-        assertTrue(false);
-        done();
-      });
+      return test_util.whenAttributeIs(
+          creditCardDialog.$.dialog, 'open', true).then(function() {
+        creditCardDialog.addEventListener('save-credit-card', function() {
+          // Fail the test because the save event should not be called when
+          // cancel is clicked.
+          assertTrue(false);
+          done();
+        });
 
-      creditCardDialog.addEventListener('close', function() {
-        // Test is |done| in a timeout in order to ensure that
-        // 'save-credit-card' is NOT fired after this test.
-        window.setTimeout(done, 100);
-      });
+        creditCardDialog.addEventListener('close', function() {
+          // 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);
+        MockInteractions.tap(creditCardDialog.$.cancelButton);
+      });
     });
   });