DOMUI: Cleanup the Autofill page.

BUG=59281
TEST=none

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

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

4 files changed, 46 insertions, 35 deletions

diff --git a/chrome/browser/resources/options/autofill_options_page.css b/chrome/browser/resources/options/autofill_options.css
index 923479b..0c18e3c 100644
--- a/chrome/browser/resources/options/autofill_options_page.css
+++ b/chrome/browser/resources/options/autofill_options.css
@@ -3,13 +3,14 @@ div.autofill-section {
   padding: 1em 0 0;
 }
 
-#profileSelectContainer {
+#profile-select-container {
   display: -webkit-box;
 }
 
-#profileSelectLeftColumn {
+#profile-select-left-column {
   -webkit-box-flex: 1;
 }
-#profileSelectLeftColumn select {
+
+#profile-select-left-column select {
   width: 100%;
 }
diff --git a/chrome/browser/resources/options/autofill_options.html b/chrome/browser/resources/options/autofill_options.html
index 62629ec..c5bbb72 100644
--- a/chrome/browser/resources/options/autofill_options.html
+++ b/chrome/browser/resources/options/autofill_options.html
@@ -1,9 +1,9 @@
-<div class="page hidden" id="autoFillOptionsPage">
+<div id="autofill-options" class="page hidden">
   <h1 i18n-content="autoFillOptionsTitle"></h1>
 
-  <div class="autofill-section" id="profileSelectContainer">
-    <div id="profileSelectLeftColumn">
-      <select id="profileList" size="10">
+  <div id="profile-select-container" class="autofill-section">
+    <div id="profile-select-left-column">
+      <select id="profile-list" size="10">
         <option value="addressesHeader" disabled
             i18n-content="addressesHeader"></option>
         <option value="addressesHorizontalRule" disabled></option>
@@ -13,15 +13,22 @@
         <option value="creditCardsHorizontalRule" disabled></option>
       </select>
     </div>
-    <div id="profileSelectRightColumn">
-      <div><button id="addAddressButton" i18n-content="addAddressButton">
-          </button></div>
-      <div><button id="addCreditCardButton" i18n-content="addCreditCardButton">
-          </button></div>
-      <div><button id="autoFillEditButton" i18n-content="editButton">
-          </button></div>
-      <div><button id="autoFillRemoveButton" i18n-content="deleteButton">
-          </button></div>
+    <div>
+      <div>
+        <button id="add-address-button" i18n-content="addAddressButton">
+        </button>
+      </div>
+      <div>
+        <button id="add-credit-card-button" i18n-content="addCreditCardButton">
+        </button>
+      </div>
+      <div>
+        <button id="autofill-edit-button" i18n-content="editButton"></button>
+      </div>
+      <div>
+        <button id="autofill-remove-button" i18n-content="deleteButton">
+        </button>
+      </div>
     </div>
   </div>
 
diff --git a/chrome/browser/resources/options/autofill_options.js b/chrome/browser/resources/options/autofill_options.js
index 3b662f2..0c630fd 100644
--- a/chrome/browser/resources/options/autofill_options.js
+++ b/chrome/browser/resources/options/autofill_options.js
@@ -25,9 +25,10 @@ cr.define('options', function() {
     this.activeNavTab = null;
     this.addressGUIDs = null;
     this.creditCardGUIDs = null;
-    OptionsPage.call(this, 'autoFillOptions',
+    OptionsPage.call(this,
+                     'autoFillOptions',
                      templateData.autoFillOptionsTitle,
-                     'autoFillOptionsPage');
+                     'autofill-options');
   }
 
   cr.addSingletonGetter(AutoFillOptions);
@@ -39,23 +40,23 @@ cr.define('options', function() {
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
-      $('profileList').onchange = function(event) {
+      $('profile-list').onchange = function(event) {
         self.updateButtonState_();
       };
-      $('profileList').addEventListener('dblclick', function(event) {
+      $('profile-list').addEventListener('dblclick', function(event) {
         if ($('autoFillEnabled').checked)
           self.editProfile_();
       });
-      $('addAddressButton').onclick = function(event) {
+      $('add-address-button').onclick = function(event) {
         self.showAddAddressOverlay_();
       };
-      $('addCreditCardButton').onclick = function(event) {
+      $('add-credit-card-button').onclick = function(event) {
         self.showAddCreditCardOverlay_();
       };
-      $('autoFillEditButton').onclick = function(event) {
+      $('autofill-edit-button').onclick = function(event) {
         self.editProfile_();
       };
-      $('autoFillRemoveButton').onclick = function(event) {
+      $('autofill-remove-button').onclick = function(event) {
         self.removeProfile_();
       };
 
@@ -121,7 +122,7 @@ cr.define('options', function() {
      * @private
      */
     resetAddresses_: function() {
-      var profiles = $('profileList');
+      var profiles = $('profile-list');
       for (var i = 0; i <  this.numAddresses; ++i)
         profiles.remove(addressOffset);
       this.numAddresses = 0;
@@ -133,7 +134,7 @@ cr.define('options', function() {
      * @private
      */
     resetCreditCards_: function() {
-      var profiles = $('profileList');
+      var profiles = $('profile-list');
       var offset = this.numAddresses + addressOffset + creditCardOffset;
       for (var i = 0; i <  this.numCreditCards; ++i)
         profiles.remove(offset);
@@ -147,7 +148,7 @@ cr.define('options', function() {
      */
     updateAddresses_: function(addresses) {
       this.resetAddresses_();
-      var profileList = $('profileList');
+      var profileList = $('profile-list');
       var blankAddress = profileList.options[addressOffset];
       this.numAddresses = addresses.length;
       this.addressGUIDs = new Array(this.numAddresses);
@@ -168,7 +169,7 @@ cr.define('options', function() {
      */
     updateCreditCards_: function(creditCards) {
       this.resetCreditCards_();
-      var profileList = $('profileList');
+      var profileList = $('profile-list');
       this.numCreditCards = creditCards.length;
       this.creditCardGUIDs = new Array(this.numCreditCards);
       for (var i = 0; i < this.numCreditCards; i++) {
@@ -190,10 +191,12 @@ cr.define('options', function() {
      */
     updateButtonState_: function() {
       var disabled = !$('autoFillEnabled').checked;
-      $('addAddressButton').disabled = disabled;
-      $('addCreditCardButton').disabled = disabled;
-      $('autoFillRemoveButton').disabled = $('autoFillEditButton').disabled =
-          disabled || ($('profileList').selectedIndex == -1);
+      $('add-address-button').disabled = disabled;
+      $('add-credit-card-button').disabled = disabled;
+
+      disabled = disabled || ($('profile-list').selectedIndex == -1);
+      $('autofill-remove-button').disabled = disabled;
+      $('autofill-edit-button').disabled = disabled;
     },
 
     /**
@@ -203,7 +206,7 @@ cr.define('options', function() {
      * @private
      */
     editProfile_: function() {
-      var idx = $('profileList').selectedIndex;
+      var idx = $('profile-list').selectedIndex;
       if ((profileIndex = this.getAddressIndex_(idx)) != -1) {
         chrome.send('editAddress', [this.addressGUIDs[profileIndex]]);
       } else if ((profileIndex = this.getCreditCardIndex_(idx)) != -1) {
@@ -217,7 +220,7 @@ cr.define('options', function() {
      * @private
      */
     removeProfile_: function() {
-      var idx = $('profileList').selectedIndex;
+      var idx = $('profile-list').selectedIndex;
       if ((profileIndex = this.getAddressIndex_(idx)) != -1)
         chrome.send('removeAddress', [this.addressGUIDs[profileIndex]]);
       else if ((profileIndex = this.getCreditCardIndex_(idx)) != -1)
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 7dd185a..643abd7 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -17,7 +17,7 @@
 <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_page.css">
+<link rel="stylesheet" href="autofill_options.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">