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..2498edc2aac661e7a06d66831b2c0a30a8035cba
--- /dev/null
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.html
@@ -0,0 +1,82 @@
+<link rel="import" href="chrome://resources/html/polymer.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="chrome://md-settings/settings_dialog.html">

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

remember to make these relative to / after rebasing

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

Done.

+<link rel="import" href="chrome://md-settings/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: #737373;
+      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}"

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

indent off

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

Good eye. Fixed.

+            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="{{selectedMonthIndex_}}">
+            <paper-item>01</paper-item>
+            <paper-item>02</paper-item>
+            <paper-item>03</paper-item>
+            <paper-item>04</paper-item>
+            <paper-item>05</paper-item>
+            <paper-item>06</paper-item>
+            <paper-item>07</paper-item>
+            <paper-item>08</paper-item>
+            <paper-item>09</paper-item>
+            <paper-item>10</paper-item>
+            <paper-item>11</paper-item>
+            <paper-item>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="{{selectedYearIndex_}}">
+            <template is="dom-repeat" items="[[yearList_]]">
+              <paper-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="chrome://md-settings/passwords_and_forms_page/credit_card_edit_dialog.js"></script>
+</dom-module>