More autofill overlay HTML cleanup

* Use dashed-form ids for the credit cards overlay
* Consolidate overlay css files.

BUG=none
TEST=none

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

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

6 files changed, 48 insertions, 55 deletions

diff --git a/chrome/browser/resources/options/autofill_edit_address_overlay.html b/chrome/browser/resources/options/autofill_edit_address_overlay.html
index 92f941f..d6d1b06 100644
--- a/chrome/browser/resources/options/autofill_edit_address_overlay.html
+++ b/chrome/browser/resources/options/autofill_edit_address_overlay.html
@@ -86,12 +86,10 @@
       </label>
     </div>
   </div>
-  <div class="action-area">
-    <div class="button-strip">
-      <button type="reset" id="autofill-edit-address-cancel-button"
-          i18n-content="cancel"></button>
-      <button type="submit" id="autofill-edit-address-apply-button" disabled
-          i18n-content="ok"></button>
-    </div>
+  <div class="action-area button-strip">
+    <button type="reset" id="autofill-edit-address-cancel-button"
+        i18n-content="cancel"></button>
+    <button type="submit" id="autofill-edit-address-apply-button" disabled
+        i18n-content="ok"></button>
   </div>
 </div>
diff --git a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.css b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.css
deleted file mode 100644
index edfb0a7..0000000
--- a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.css
+++ /dev/null
@@ -1,3 +0,0 @@
-#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
index 13cacd2..11f1b0c 100644
--- a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html
+++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.html
@@ -1,32 +1,30 @@
-<div class="page hidden" id="autoFillEditCreditCardOverlay">
-  <h1 id="autoFillCreditCardTitle"></h1>
+<div class="page hidden" id="autofill-edit-credit-card-overlay">
+  <h1 id="autofill-credit-card-title"></h1>
   <div class="content-area">
-    <div>
-      <label id="nameOnCardLabel">
+    <div class="input">
+      <label>
         <span i18n-content="nameOnCardLabel"></span><br>
-        <input type="text" id="nameOnCard">
+        <input type="text" id="name-on-card">
       </label>
     </div>
-    <div>
-      <label id="creditCardNumberLabel">
+    <div class="input">
+      <label>
         <span i18n-content="creditCardNumberLabel"></span><br>
-        <input type="text" id="creditCardNumber">
+        <input type="text" id="credit-card-number">
       </label>
     </div>
-    <div>
-      <label id="creditCardExpirationDateLabel">
+    <div class="input">
+      <label>
         <span i18n-content="creditCardExpirationDateLabel"></span><br>
-        <select id="expirationMonth"></select>
-        <select id="expirationYear"></select>
+        <select id="expiration-month"></select>
+        <select id="expiration-year"></select>
       </label>
     </div>
   </div>
-  <div class="action-area">
-    <div class="button-strip">
-      <button type="reset" id="autoFillEditCreditCardCancelButton"
-          i18n-content="cancel"></button>
-      <button type="submit" id="autoFillEditCreditCardApplyButton" disabled
-          i18n-content="ok"></button>
-    </div>
+  <div class="action-area button-strip">
+    <button type="reset" id="autofill-edit-credit-card-cancel-button"
+        i18n-content="cancel"></button>
+    <button type="submit" id="autofill-edit-credit-card-apply-button" disabled
+        i18n-content="ok"></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
index aaab39c..4becab2 100644
--- a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
+++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
@@ -24,7 +24,7 @@ cr.define('options', function() {
   function AutoFillEditCreditCardOverlay() {
     OptionsPage.call(this, 'autoFillEditCreditCardOverlay',
                      templateData.autoFillEditCreditCardTitle,
-                     'autoFillEditCreditCardOverlay');
+                     'autofill-edit-credit-card-overlay');
   }
 
   cr.addSingletonGetter(AutoFillEditCreditCardOverlay);
@@ -39,10 +39,10 @@ cr.define('options', function() {
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
-      $('autoFillEditCreditCardCancelButton').onclick = function(event) {
+      $('autofill-edit-credit-card-cancel-button').onclick = function(event) {
         self.dismissOverlay_();
       }
-      $('autoFillEditCreditCardApplyButton').onclick = function(event) {
+      $('autofill-edit-credit-card-apply-button').onclick = function(event) {
         self.saveCreditCard_();
         self.dismissOverlay_();
       }
@@ -75,12 +75,12 @@ cr.define('options', function() {
     saveCreditCard_: function() {
       var creditCard = new Array(5);
       creditCard[0] = this.guid_;
-      creditCard[1] = $('nameOnCard').value;
-      creditCard[3] = $('expirationMonth').value;
-      creditCard[4] = $('expirationYear').value;
+      creditCard[1] = $('name-on-card').value;
+      creditCard[3] = $('expiration-month').value;
+      creditCard[4] = $('expiration-year').value;
 
       if (this.hasEditedNumber_)
-        creditCard[2] = $('creditCardNumber').value;
+        creditCard[2] = $('credit-card-number').value;
       else
         creditCard[2] = this.storedCCNumber_;
 
@@ -94,8 +94,8 @@ cr.define('options', function() {
      * @private
      */
     connectInputEvents_: function() {
-      $('nameOnCard').oninput = $('creditCardNumber').oninput =
-          $('expirationMonth').onchange = $('expirationYear').onchange =
+      $('name-on-card').oninput = $('credit-card-number').oninput =
+          $('expiration-month').onchange = $('expiration-year').onchange =
               this.inputFieldChanged_.bind(this);
     },
 
@@ -106,9 +106,9 @@ cr.define('options', function() {
      * @private
      */
     inputFieldChanged_: function(opt_event) {
-      var ccNumber = $('creditCardNumber');
-      var disabled = !$('nameOnCard').value && !ccNumber.value;
-      $('autoFillEditCreditCardApplyButton').disabled = disabled;
+      var ccNumber = $('credit-card-number');
+      var disabled = !$('name-on-card').value && !ccNumber.value;
+      $('autofill-edit-credit-card-apply-button').disabled = disabled;
 
       if (opt_event && opt_event.target == ccNumber) {
         // If the user hasn't edited the text yet, delete it all on edit.
@@ -128,7 +128,7 @@ cr.define('options', function() {
      */
     setDefaultSelectOptions_: function() {
       // Set the 'Expiration month' default options.
-      var expirationMonth = $('expirationMonth');
+      var expirationMonth = $('expiration-month');
       expirationMonth.options.length = 0;
       for (var i = 1; i <= 12; ++i) {
         var text;
@@ -144,7 +144,7 @@ cr.define('options', function() {
       }
 
       // Set the 'Expiration year' default options.
-      var expirationYear = $('expirationYear');
+      var expirationYear = $('expiration-year');
       expirationYear.options.length = 0;
 
       var date = new Date();
@@ -163,10 +163,10 @@ cr.define('options', function() {
      * @private
      */
     clearInputFields_: function() {
-      $('nameOnCard').value = '';
-      $('creditCardNumber').value = '';
-      $('expirationMonth').selectedIndex = 0;
-      $('expirationYear').selectedIndex = 0;
+      $('name-on-card').value = '';
+      $('credit-card-number').value = '';
+      $('expiration-month').selectedIndex = 0;
+      $('expiration-year').selectedIndex = 0;
     },
 
     /**
@@ -174,8 +174,8 @@ cr.define('options', function() {
      * @private
      */
     setInputFields_: function(creditCard) {
-      $('nameOnCard').value = creditCard['nameOnCard'];
-      $('creditCardNumber').value = creditCard['obfuscatedCardNumber'];
+      $('name-on-card').value = creditCard['nameOnCard'];
+      $('credit-card-number').value = creditCard['obfuscatedCardNumber'];
 
       // The options for the year select control may be out-dated at this point,
       // e.g. the user opened the options page before midnight on New Year's Eve
@@ -184,7 +184,7 @@ cr.define('options', function() {
       this.setDefaultSelectOptions_();
 
       var idx = parseInt(creditCard['expirationMonth'], 10);
-      $('expirationMonth').selectedIndex = idx - 1;
+      $('expiration-month').selectedIndex = idx - 1;
 
       expYear = creditCard['expirationYear'];
       var date = new Date();
@@ -192,7 +192,7 @@ cr.define('options', function() {
       for (var i = 0; i < 10; ++i) {
         var text = year + i;
         if (expYear == String(text))
-          $('expirationYear').selectedIndex = i;
+          $('expiration-year').selectedIndex = i;
       }
     },
 
@@ -218,7 +218,7 @@ cr.define('options', function() {
   };
 
   AutoFillEditCreditCardOverlay.setTitle = function(title) {
-    $('autoFillCreditCardTitle').textContent = title;
+    $('autofill-credit-card-title').textContent = title;
   };
 
   // Export
diff --git a/chrome/browser/resources/options/autofill_edit_address_overlay.css b/chrome/browser/resources/options/autofill_overlay.css
index 2a8142e..ce1dd1b 100644
--- a/chrome/browser/resources/options/autofill_edit_address_overlay.css
+++ b/chrome/browser/resources/options/autofill_overlay.css
@@ -1,4 +1,5 @@
-#autofill-edit-address-overlay {
+#autofill-edit-address-overlay,
+#autofill-edit-credit-card-overlay {
   width: 500px;
 }
 
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 057cc0b..14632ec 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -17,9 +17,8 @@
 <link rel="stylesheet" href="add_startup_page_overlay.css">
 <link rel="stylesheet" href="advanced_options.css">
 <link rel="stylesheet" href="alert_overlay.css">
-<link rel="stylesheet" href="autofill_edit_address_overlay.css">
-<link rel="stylesheet" href="autofill_edit_creditcard_overlay.css">
 <link rel="stylesheet" href="autofill_options.css">
+<link rel="stylesheet" href="autofill_overlay.css">
 <link rel="stylesheet" href="browser_options_page.css">
 <link rel="stylesheet" href="clear_browser_data_overlay.css">
 <link rel="stylesheet" href="content_settings.css">