DOMUI: Implement the base HTML for the 'Edit credit card' AutoFill overlay.

BUG=49094
TEST=none

Review URL: http://codereview.chromium.org/3174028

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@57110 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 154 insertions, 0 deletions

diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index 91b225f..3e173e8 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -47,6 +47,7 @@
 <script src="options/add_startup_page_recent_pages_list.js"></script>
 <script src="options/advanced_options.js"></script>
 <script src="options/autofill_edit_address_overlay.js"></script>
+<script src="options/autofill_edit_creditcard_overlay.js"></script>
 <script src="options/autofill_options.js"></script>
 <script src="options/browser_options.js"></script>
 <script src="options/browser_options_startup_page_list.js"></script>
@@ -68,6 +69,7 @@
 var AddStartupPageOverlay = options.AddStartupPageOverlay;
 var AdvancedOptions = options.AdvancedOptions;
 var AutoFillEditAddressOverlay = options.AutoFillEditAddressOverlay;
+var AutoFillEditCreditCardOverlay = options.AutoFillEditCreditCardOverlay;
 var AutoFillOptions = options.AutoFillOptions;
 var BrowserOptions = options.BrowserOptions;
 var ClearBrowserDataOverlay = options.ClearBrowserDataOverlay;
@@ -103,6 +105,7 @@ function load() {
   OptionsPage.registerSubPage(SearchEngineManager.getInstance());
   OptionsPage.registerOverlay(AddStartupPageOverlay.getInstance());
   OptionsPage.registerOverlay(AutoFillEditAddressOverlay.getInstance());
+  OptionsPage.registerOverlay(AutoFillEditCreditCardOverlay.getInstance());
   OptionsPage.registerOverlay(ClearBrowserDataOverlay.getInstance());
   OptionsPage.registerOverlay(FontSettingsOverlay.getInstance());
   OptionsPage.registerOverlay(ImportDataOverlay.getInstance());
@@ -178,6 +181,7 @@ window.onpopstate = function(e) {
 <link rel="stylesheet" href="options/options_page.css">
 <link rel="stylesheet" href="options/add_startup_page_overlay.css">
 <link rel="stylesheet" href="options/autofill_edit_address_overlay.css">
+<link rel="stylesheet" href="options/autofill_edit_creditcard_overlay.css">
 <link rel="stylesheet" href="options/autofill_options_page.css">
 <link rel="stylesheet" href="options/browser_options_page.css">
 <link rel="stylesheet" href="options/clear_browser_data_overlay.css">
@@ -200,6 +204,7 @@ window.onpopstate = function(e) {
 <div id="overlay" class="overlay hidden">
   <include src="options/add_startup_page_overlay.html">
   <include src="options/autofill_edit_address_overlay.html">
+  <include src="options/autofill_edit_creditcard_overlay.html">
   <include src="options/clear_browser_data_overlay.html">
   <include src="options/font_settings_overlay.html">
   <include src="options/import_data_overlay.html">
diff --git a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.css b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.css
new file mode 100644
index 0000000..edfb0a7
--- /dev/null
+++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.css
@@ -0,0 +1,3 @@
+#autoFillEditCreditCardOverlay {
+  width: 500px;
+}
diff --git a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html
new file mode 100644
index 0000000..4223cdb
--- /dev/null
+++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html
@@ -0,0 +1,39 @@
+<div class="page hidden" id="autoFillEditCreditCardOverlay">
+  <h1 i18n-content="autoFillEditCreditCardTitle"></h1>
+
+  <div>
+    <label id="nameOnCardLabel">
+      <span i18n-content="nameOnCardLabel"></span><br>
+      <input type="text" id="nameOnCard">
+    </label>
+  </div>
+
+  <div>
+    <label id="billingAddressLabel">
+      <span i18n-content="billingAddressLabel"></span><br>
+      <select id="billingAddress"></select>
+    </label>
+  </div>
+
+  <div>
+    <label id="creditCardNumberLabel">
+      <span i18n-content="creditCardNumberLabel"></span><br>
+      <input type="text" id="creditCardNumber">
+    </label>
+  </div>
+
+  <div>
+    <label id="creditCardExpirationDateLabel">
+      <span i18n-content="creditCardExpirationDateLabel"></span><br>
+      <select id="expirationMonth"></select>
+      <select id="expirationYear"></select>
+    </label>
+  </div>
+
+  <div class="button-strip">
+    <button type="submit" id="autoFillEditCreditCardApplyButton" disabled
+        i18n-content="autoFillEditCreditCardApplyButton"></button>
+    <button type="reset" id="autoFillEditCreditCardCancelButton"
+        i18n-content="autoFillEditCreditCardCancelButton"></button>
+  </div>
+</div>
diff --git a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
new file mode 100644
index 0000000..d66f8c2
--- /dev/null
+++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
@@ -0,0 +1,104 @@
+// Copyright (c) 2010 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.
+
+cr.define('options', function() {
+  const OptionsPage = options.OptionsPage;
+
+  /**
+   * AutoFillEditCreditCardOverlay class
+   * Encapsulated handling of the 'Add Page' overlay page.
+   * @class
+   */
+  function AutoFillEditCreditCardOverlay() {
+    OptionsPage.call(this, 'autoFillEditCreditCardOverlay',
+                     templateData.autoFillEditCreditCardTitle,
+                     'autoFillEditCreditCardOverlay');
+  }
+
+  cr.addSingletonGetter(AutoFillEditCreditCardOverlay);
+
+  AutoFillEditCreditCardOverlay.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Initializes the page.
+     */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      var self = this;
+      $('autoFillEditCreditCardCancelButton').onclick = function(event) {
+        self.dismissOverlay_();
+      }
+
+      self.setDefaultSelectOptions_();
+    },
+
+    /**
+     * Clears any uncommited input, and dismisses the overlay.
+     * @private
+     */
+    dismissOverlay_: function() {
+      $('fullName').value = '';
+      $('companyName').value = '';
+      $('addrLine1').value = '';
+      $('addrLine2').value = '';
+      $('city').value = '';
+      $('state').value = '';
+      $('zipCode').value = '';
+      $('phone').value = '';
+      $('fax').value = '';
+      $('email').value = '';
+      OptionsPage.clearOverlays();
+    },
+
+    /**
+     * Sets the default values of the options in the 'Billing address' and
+     * 'Expiration date' select controls.
+     * @private
+     */
+    setDefaultSelectOptions_: function() {
+      // Set the 'Billing address' default option.
+      var existingAddress = document.createElement('option');
+      existingAddress.text = localStrings.getString('chooseExistingAddress');
+      existingAddress.value = 'existingAddress';
+
+      var billingAddress = $('billingAddress');
+      billingAddress.add(existingAddress, null);
+
+      // Set the 'Expiration month' default options.
+      var expirationMonth = $('expirationMonth');
+      for (var i = 1; i <= 12; ++i) {
+        var text;
+        if (i < 10)
+          text = '0' + i;
+        else
+          text = i;
+
+        var option = document.createElement('option');
+        option.text = text;
+        option.value = text;
+        expirationMonth.add(option, null);
+      }
+
+      // Set the 'Expiration year' default options.
+      var expirationYear = $('expirationYear');
+      var date = new Date();
+      var year = date.getFullYear();
+      for (var i = 0; i < 10; ++i) {
+        var text = parseInt(year) + i;
+        var option = document.createElement('option');
+        option.text = text;
+        option.value = text;
+        expirationYear.add(option, null);
+      }
+    }
+  };
+
+  // Export
+  return {
+    AutoFillEditCreditCardOverlay: AutoFillEditCreditCardOverlay
+  };
+
+});
diff --git a/chrome/browser/resources/options/autofill_options.js b/chrome/browser/resources/options/autofill_options.js
index 40d28c1..1612dc4 100644
--- a/chrome/browser/resources/options/autofill_options.js
+++ b/chrome/browser/resources/options/autofill_options.js
@@ -42,6 +42,9 @@ cr.define('options', function() {
       $('addAddressButton').onclick = function(event) {
         OptionsPage.showOverlay('autoFillEditAddressOverlay');
       };
+      $('addCreditCardButton').onclick = function(event) {
+        OptionsPage.showOverlay('autoFillEditCreditCardOverlay');
+      };
 
       Preferences.getInstance().addEventListener('autofill.enabled',
           cr.bind(self.updateButtonState_, self));