DOMUI: Several fixes for AutoFill page.

* Properly enable and disable the Edit and Remove buttons based on select
control state.
* Modify the title of the address/CC overlays when pressing the
'Add address/CC' buttons.
* Remove the ability to select multiple options.

BUG=49094
TEST=none

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

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

chrome/browser/dom_ui/autofill_options_handler.cc

@@ -47,6 +47,10 @@ void AutoFillOptionsHandler::GetLocalizedValues(
       l10n_util::GetStringUTF16(IDS_AUTOFILL_DELETE_BUTTON));
   localized_strings->SetString("helpButton",
       l10n_util::GetStringUTF16(IDS_AUTOFILL_HELP_LABEL));
+  localized_strings->SetString("addAddressTitle",
+      l10n_util::GetStringUTF16(IDS_AUTOFILL_ADD_ADDRESS_CAPTION));
+  localized_strings->SetString("addCreditCardTitle",
+      l10n_util::GetStringUTF16(IDS_AUTOFILL_ADD_CREDITCARD_CAPTION));
 }
 
 void AutoFillOptionsHandler::Initialize() {

chrome/browser/resources/options/autofill_edit_address_overlay.html

 <div class="page hidden" id="autoFillEditAddressOverlay">
-  <h1 i18n-content="autoFillEditAddressTitle"></h1>
+  <h1 id="autoFillAddressTitle"></h1>
 
   <div><label id="fullNameLabel"><span i18n-content="fullNameLabel"></span><br>
       <input type="text" id="fullName"></label></div>

chrome/browser/resources/options/autofill_edit_address_overlay.js

@@ -38,19 +38,26 @@ cr.define('options', function() {
      * @private
      */
     dismissOverlay_: function() {
-      $('fullName').value = '';
-      $('companyName').value = '';
-      $('addrLine1').value = '';
-      $('addrLine2').value = '';
-      $('city').value = '';
-      $('state').value = '';
-      $('zipCode').value = '';
-      $('phone').value = '';
-      $('fax').value = '';
-      $('email').value = '';
+      AutoFillEditAddressOverlay.clearInputFields();
       OptionsPage.clearOverlays();
     },
+  };
+
+  AutoFillEditAddressOverlay.clearInputFields = function() {
+    $('fullName').value = '';
+    $('companyName').value = '';
+    $('addrLine1').value = '';
+    $('addrLine2').value = '';
+    $('city').value = '';
+    $('state').value = '';
+    $('zipCode').value = '';
+    $('phone').value = '';
+    $('fax').value = '';
+    $('email').value = '';
+  };
 
+  AutoFillEditAddressOverlay.setTitle = function(title) {
+    $('autoFillAddressTitle').textContent = title;
   };
 
   // Export

chrome/browser/resources/options/autofill_edit_creditcard_overlay.html

 <div class="page hidden" id="autoFillEditCreditCardOverlay">
-  <h1 i18n-content="autoFillEditCreditCardTitle"></h1>
+  <h1 id="autoFillCreditCardTitle"></h1>
 
   <div>
     <label id="nameOnCardLabel">

chrome/browser/resources/options/autofill_edit_creditcard_overlay.js

@@ -40,16 +40,7 @@ cr.define('options', function() {
      * @private
      */
     dismissOverlay_: function() {
-      $('fullName').value = '';
-      $('companyName').value = '';
-      $('addrLine1').value = '';
-      $('addrLine2').value = '';
-      $('city').value = '';
-      $('state').value = '';
-      $('zipCode').value = '';
-      $('phone').value = '';
-      $('fax').value = '';
-      $('email').value = '';
+      AutoFillEditCreditCardOverlay.clearInputFields();
       OptionsPage.clearOverlays();
     },
 
@@ -96,6 +87,18 @@ cr.define('options', function() {
     }
   };
 
+  AutoFillEditCreditCardOverlay.clearInputFields = function(title) {
+    $('nameOnCard').value = '';
+    $('billingAddress').value = '';
+    $('creditCardNumber').value = '';
+    $('expirationMonth').value = '';
+    $('expirationYear').value = '';
+  };
+
+  AutoFillEditCreditCardOverlay.setTitle = function(title) {
+    $('autoFillCreditCardTitle').textContent = title;
+  };
+
   // Export
   return {
     AutoFillEditCreditCardOverlay: AutoFillEditCreditCardOverlay

chrome/browser/resources/options/autofill_options.html

@@ -12,7 +12,7 @@
 
   <div class="autofill-section" id="profileSelectContainer">
     <div id="profileSelectLeftColumn">
-      <select id="profileList" size="10" multiple>
+      <select id="profileList" size="10">
         <option value="addressesHeader" disabled
             i18n-content="addressesHeader"></option>
         <option value="addressesHorizontalRule" disabled></option>
@@ -27,7 +27,8 @@
           </button></div>
       <div><button id="addCreditCardButton" i18n-content="addCreditCardButton">
           </button></div>
-      <div><button id="editButton" i18n-content="editButton"></button></div>
+      <div><button id="autoFillEditButton" i18n-content="editButton">
+          </button></div>
       <div><button id="autoFillRemoveButton" i18n-content="deleteButton">
           </button></div>
     </div>

chrome/browser/resources/options/autofill_options.js

@@ -37,17 +37,17 @@ cr.define('options', function() {
 
       var self = this;
       $('profileList').onchange = function(event) {
-        self.updateRemoveButtonState_();
+        self.updateButtonState_();
       };
       $('addAddressButton').onclick = function(event) {
-        OptionsPage.showOverlay('autoFillEditAddressOverlay');
+        self.showAddAddressOverlay_();
       };
       $('addCreditCardButton').onclick = function(event) {
-        OptionsPage.showOverlay('autoFillEditCreditCardOverlay');
+        self.showAddCreditCardOverlay_();
       };
 
       Preferences.getInstance().addEventListener('autofill.enabled',
-          cr.bind(self.updateButtonState_, self));
+          cr.bind(self.updateEnabledState_, self));
     },
 
     /**
@@ -55,13 +55,39 @@ cr.define('options', function() {
      * of the |autoFillEnabled| checkbox.
      * @private
      */
-    updateButtonState_: function() {
+    updateEnabledState_: function() {
       var checkbox = $('autoFillEnabled');
       $('addAddressButton').disabled = $('addCreditCardButton').disabled =
           $('editButton').disabled = $('autoFillRemoveButton').disabled =
               !checkbox.checked;
     },
 
+    /**
+     * Shows the 'Add address' overlay, specifically by loading the
+     * 'Edit address' overlay, emptying the input fields and modifying the
+     * overlay title.
+     * @private
+     */
+    showAddAddressOverlay_: function() {
+      var title = localStrings.getString('addAddressTitle');
+      AutoFillEditAddressOverlay.setTitle(title);
+      AutoFillEditAddressOverlay.clearInputFields();
+      OptionsPage.showOverlay('autoFillEditAddressOverlay');
+    },
+
+    /**
+     * Shows the 'Add credit card' overlay, specifically by loading the
+     * 'Edit credit card' overlay, emptying the input fields and modifying the
+     * overlay title.
+     * @private
+     */
+    showAddCreditCardOverlay_: function() {
+      var title = localStrings.getString('addCreditCardTitle');
+      AutoFillEditCreditCardOverlay.setTitle(title);
+      AutoFillEditCreditCardOverlay.clearInputFields();
+      OptionsPage.showOverlay('autoFillEditCreditCardOverlay');
+    },
+
     /**
      * Resets the address list. This method leaves the header and horizontal
      * rule unchanged.
@@ -102,7 +128,7 @@ cr.define('options', function() {
         profileList.add(option, blankAddress);
       }
 
-      this.updateRemoveButtonState_();
+      this.updateButtonState_();
     },
 
     /**
@@ -120,16 +146,16 @@ cr.define('options', function() {
         profileList.add(option, null);
       }
 
-      this.updateRemoveButtonState_();
+      this.updateButtonState_();
     },
 
     /**
-     * Sets the enabled state of the AutoFill Remove button based on the current
-     * selection in the profile list.
+     * Sets the enabled state of the AutoFill Edit and Remove buttons based on
+     * the current selection in the profile list.
      * @private
      */
-    updateRemoveButtonState_: function() {
-      $('autoFillRemoveButton').disabled =
+    updateButtonState_: function() {
+      $('autoFillRemoveButton').disabled = $('autoFillEditButton').disabled =
           ($('profileList').selectedIndex == -1);
     },
   };