Add dialog to edit and save credit cards.

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
new file mode 100644
index 0000000000000000000000000000000000000000..e5c1627d4820f1bc27158b45e6d74fd80ee4287c
--- /dev/null
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
@@ -0,0 +1,83 @@
+<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>