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

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
index 6fac49eaa04ce136746d8e4512f7a7476c76bbac..83ca8a907cd467a061f99c9bef7cc532c58834b4 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
+++ b/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"