DOMUI: Implement the new-style Autofill options page.

BUG=59281
TEST=none

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

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

15 files changed, 364 insertions, 378 deletions

diff --git a/chrome/browser/dom_ui/options/autofill_options_handler.cc b/chrome/browser/dom_ui/options/autofill_options_handler.cc
index e6d0f00..1e09fd2 100644
--- a/chrome/browser/dom_ui/options/autofill_options_handler.cc
+++ b/chrome/browser/dom_ui/options/autofill_options_handler.cc
@@ -34,20 +34,14 @@ void AutoFillOptionsHandler::GetLocalizedValues(
 
   localized_strings->SetString("autoFillOptionsTitle",
       l10n_util::GetStringUTF16(IDS_AUTOFILL_OPTIONS_TITLE));
-  localized_strings->SetString("autoFillEnabled",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_AUTOFILL_ENABLE));
-  localized_strings->SetString("addressesHeader",
+  localized_strings->SetString("autoFillAddresses",
       l10n_util::GetStringUTF16(IDS_AUTOFILL_ADDRESSES_GROUP_NAME));
-  localized_strings->SetString("creditCardsHeader",
+  localized_strings->SetString("autoFillCreditCards",
       l10n_util::GetStringUTF16(IDS_AUTOFILL_CREDITCARDS_GROUP_NAME));
-  localized_strings->SetString("addAddressButton",
+  localized_strings->SetString("autoFillAddAddress",
       l10n_util::GetStringUTF16(IDS_AUTOFILL_ADD_ADDRESS_BUTTON));
-  localized_strings->SetString("addCreditCardButton",
+  localized_strings->SetString("autoFillAddCreditCard",
       l10n_util::GetStringUTF16(IDS_AUTOFILL_ADD_CREDITCARD_BUTTON));
-  localized_strings->SetString("editButton",
-      l10n_util::GetStringUTF16(IDS_AUTOFILL_EDIT_BUTTON));
-  localized_strings->SetString("deleteButton",
-      l10n_util::GetStringUTF16(IDS_AUTOFILL_DELETE_BUTTON));
   localized_strings->SetString("helpButton",
       l10n_util::GetStringUTF16(IDS_AUTOFILL_HELP_LABEL));
   localized_strings->SetString("addAddressTitle",
@@ -64,8 +58,7 @@ void AutoFillOptionsHandler::GetLocalizedValues(
 }
 
 void AutoFillOptionsHandler::Initialize() {
-  personal_data_ =
-      dom_ui_->GetProfile()->GetOriginalProfile()->GetPersonalDataManager();
+  personal_data_ = dom_ui_->GetProfile()->GetPersonalDataManager();
   personal_data_->SetObserver(this);
 
   LoadAutoFillData();
@@ -73,28 +66,17 @@ void AutoFillOptionsHandler::Initialize() {
 
 void AutoFillOptionsHandler::RegisterMessages() {
   dom_ui_->RegisterMessageCallback(
-      "updateAddress",
-      NewCallback(this, &AutoFillOptionsHandler::UpdateAddress));
-
-  dom_ui_->RegisterMessageCallback(
-      "editAddress",
-      NewCallback(this, &AutoFillOptionsHandler::EditAddress));
-
+      "removeAutoFillProfile",
+      NewCallback(this, &AutoFillOptionsHandler::RemoveAutoFillProfile));
   dom_ui_->RegisterMessageCallback(
-      "removeAddress",
-      NewCallback(this, &AutoFillOptionsHandler::RemoveAddress));
-
+      "loadProfileEditor",
+      NewCallback(this, &AutoFillOptionsHandler::LoadProfileEditor));
   dom_ui_->RegisterMessageCallback(
-      "updateCreditCard",
-      NewCallback(this, &AutoFillOptionsHandler::UpdateCreditCard));
-
-  dom_ui_->RegisterMessageCallback(
-      "editCreditCard",
-      NewCallback(this, &AutoFillOptionsHandler::EditCreditCard));
-
+      "setAddress",
+      NewCallback(this, &AutoFillOptionsHandler::SetAddress));
   dom_ui_->RegisterMessageCallback(
-      "removeCreditCard",
-      NewCallback(this, &AutoFillOptionsHandler::RemoveCreditCard));
+      "setCreditCard",
+      NewCallback(this, &AutoFillOptionsHandler::SetCreditCard));
 }
 
 /////////////////////////////////////////////////////////////////////////////
@@ -157,30 +139,68 @@ void AutoFillOptionsHandler::LoadAutoFillData() {
   for (std::vector<AutoFillProfile*>::const_iterator i =
            personal_data_->web_profiles().begin();
        i != personal_data_->web_profiles().end(); ++i) {
-    DictionaryValue* address = new DictionaryValue();
-    address->SetString("label", (*i)->Label());
-    address->SetString("guid", (*i)->guid());
-    addresses.Append(address);
+    ListValue* entry = new ListValue();
+    entry->Append(new StringValue((*i)->guid()));
+    entry->Append(new StringValue((*i)->Label()));
+    addresses.Append(entry);
   }
 
-  dom_ui_->CallJavascriptFunction(L"AutoFillOptions.updateAddresses",
+  dom_ui_->CallJavascriptFunction(L"AutoFillOptions.setAddressList",
                                   addresses);
 
   ListValue credit_cards;
   for (std::vector<CreditCard*>::const_iterator i =
            personal_data_->credit_cards().begin();
        i != personal_data_->credit_cards().end(); ++i) {
-    DictionaryValue* credit_card = new DictionaryValue();
-    credit_card->SetString("label", (*i)->PreviewSummary());
-    credit_card->SetString("guid", (*i)->guid());
-    credit_cards.Append(credit_card);
+    ListValue* entry = new ListValue();
+    entry->Append(new StringValue((*i)->guid()));
+    entry->Append(new StringValue((*i)->PreviewSummary()));
+    credit_cards.Append(entry);
   }
 
-  dom_ui_->CallJavascriptFunction(L"AutoFillOptions.updateCreditCards",
+  dom_ui_->CallJavascriptFunction(L"AutoFillOptions.setCreditCardList",
                                   credit_cards);
 }
 
-void AutoFillOptionsHandler::UpdateAddress(const ListValue* args) {
+void AutoFillOptionsHandler::RemoveAutoFillProfile(const ListValue* args) {
+  DCHECK(personal_data_->IsDataLoaded());
+
+  std::string guid;
+  if (!args->GetString(0, &guid)) {
+    NOTREACHED();
+    return;
+  }
+
+  // |guid| is the GUID of either an address or a credit card. Try to load the
+  // corresponding address. If it exists, then remove that address; otherwise,
+  // the GUID identifies a credit card, so remove the credit card.
+  // TODO(jhawkins): Make RemoveProfile return true/false depending on whether
+  // the profile was removed or not.
+  if (personal_data_->GetProfileByGUID(guid) != NULL)
+    personal_data_->RemoveProfile(guid);
+  else
+    personal_data_->RemoveCreditCard(guid);
+}
+
+void AutoFillOptionsHandler::LoadProfileEditor(const ListValue* args) {
+  DCHECK(personal_data_->IsDataLoaded());
+
+  std::string guid;
+  if (!args->GetString(0, &guid)) {
+    NOTREACHED();
+    return;
+  }
+
+  // |guid| is the GUID of either an address or a credit card. Try to load the
+  // corresponding address. If it exists, then edit that address; otherwise, the
+  // GUID identifies a credit card, so load the credit card editor.
+  if (personal_data_->GetProfileByGUID(guid) != NULL)
+    EditAddress(guid);
+  else
+    EditCreditCard(guid);
+}
+
+void AutoFillOptionsHandler::SetAddress(const ListValue* args) {
   if (!personal_data_->IsDataLoaded())
     return;
 
@@ -224,7 +244,7 @@ void AutoFillOptionsHandler::UpdateAddress(const ListValue* args) {
   }
 }
 
-void AutoFillOptionsHandler::EditAddress(const ListValue* args) {
+void AutoFillOptionsHandler::SetCreditCard(const ListValue* args) {
   if (!personal_data_->IsDataLoaded())
     return;
 
@@ -234,6 +254,29 @@ void AutoFillOptionsHandler::EditAddress(const ListValue* args) {
     return;
   }
 
+  CreditCard credit_card(guid);
+
+  string16 value;
+  if (args->GetString(1, &value))
+    credit_card.SetInfo(AutoFillType(CREDIT_CARD_NAME), value);
+  if (args->GetString(2, &value))
+    credit_card.SetInfo(AutoFillType(CREDIT_CARD_NUMBER), value);
+  if (args->GetString(3, &value))
+    credit_card.SetInfo(AutoFillType(CREDIT_CARD_EXP_MONTH), value);
+  if (args->GetString(4, &value))
+    credit_card.SetInfo(AutoFillType(CREDIT_CARD_EXP_4_DIGIT_YEAR), value);
+
+  if (!guid::IsValidGUID(credit_card.guid())) {
+    credit_card.set_guid(guid::GenerateGUID());
+    personal_data_->AddCreditCard(credit_card);
+  } else {
+    personal_data_->UpdateCreditCard(credit_card);
+  }
+}
+
+void AutoFillOptionsHandler::EditAddress(const std::string& guid) {
+  DCHECK(personal_data_->IsDataLoaded());
+
   AutoFillProfile* profile = personal_data_->GetProfileByGUID(guid);
   if (!profile) {
     NOTREACHED();
@@ -275,62 +318,10 @@ void AutoFillOptionsHandler::EditAddress(const ListValue* args) {
                                   addressList);
 }
 
-void AutoFillOptionsHandler::RemoveAddress(const ListValue* args) {
-  if (!personal_data_->IsDataLoaded())
-    return;
-
-  std::string guid;
-  if (!args->GetString(0, &guid)) {
-    NOTREACHED();
-    return;
-  }
-
-  personal_data_->RemoveProfile(guid);
-}
-
-void AutoFillOptionsHandler::UpdateCreditCard(const ListValue* args) {
-  if (!personal_data_->IsDataLoaded())
-    return;
-
-  std::string guid;
-  if (!args->GetString(0, &guid)) {
-    NOTREACHED();
-    return;
-  }
-
-  CreditCard credit_card(guid);
-
-  string16 value;
-  if (args->GetString(1, &value))
-    credit_card.SetInfo(AutoFillType(CREDIT_CARD_NAME), value);
-  if (args->GetString(2, &value))
-    credit_card.SetInfo(AutoFillType(CREDIT_CARD_NUMBER), value);
-  if (args->GetString(3, &value))
-    credit_card.SetInfo(AutoFillType(CREDIT_CARD_EXP_MONTH), value);
-  if (args->GetString(4, &value))
-    credit_card.SetInfo(AutoFillType(CREDIT_CARD_EXP_4_DIGIT_YEAR), value);
-
-  if (!guid::IsValidGUID(credit_card.guid())) {
-    credit_card.set_guid(guid::GenerateGUID());
-    personal_data_->AddCreditCard(credit_card);
-  } else {
-    personal_data_->UpdateCreditCard(credit_card);
-  }
-
-}
-
-void AutoFillOptionsHandler::EditCreditCard(const ListValue* args) {
-  if (!personal_data_->IsDataLoaded())
-      return;
-
-  std::string guid;
-  if (!args->GetString(0, &guid)) {
-    NOTREACHED();
-    return;
-  }
+void AutoFillOptionsHandler::EditCreditCard(const std::string& guid) {
+  DCHECK(personal_data_->IsDataLoaded());
 
   CreditCard* credit_card = personal_data_->GetCreditCardByGUID(guid);
-
   if (!credit_card) {
     NOTREACHED();
     return;
@@ -358,16 +349,3 @@ void AutoFillOptionsHandler::EditCreditCard(const ListValue* args) {
   dom_ui_->CallJavascriptFunction(L"AutoFillOptions.editCreditCard",
                                   credit_card_list);
 }
-
-void AutoFillOptionsHandler::RemoveCreditCard(const ListValue* args) {
-  if (!personal_data_->IsDataLoaded())
-    return;
-
-  std::string guid;
-  if (!args->GetString(0, &guid)) {
-    NOTREACHED();
-    return;
-  }
-
-  personal_data_->RemoveCreditCard(guid);
-}
diff --git a/chrome/browser/dom_ui/options/autofill_options_handler.h b/chrome/browser/dom_ui/options/autofill_options_handler.h
index e932047..eff357a 100644
--- a/chrome/browser/dom_ui/options/autofill_options_handler.h
+++ b/chrome/browser/dom_ui/options/autofill_options_handler.h
@@ -5,9 +5,14 @@
 #ifndef CHROME_BROWSER_DOM_UI_OPTIONS_AUTOFILL_OPTIONS_HANDLER_H_
 #define CHROME_BROWSER_DOM_UI_OPTIONS_AUTOFILL_OPTIONS_HANDLER_H_
 
+#include <string>
+
 #include "chrome/browser/autofill/personal_data_manager.h"
 #include "chrome/browser/dom_ui/options/options_ui.h"
 
+class DictionaryValue;
+class ListValue;
+
 class AutoFillOptionsHandler : public OptionsPageUIHandler,
                                public PersonalDataManager::Observer {
  public:
@@ -31,38 +36,38 @@ class AutoFillOptionsHandler : public OptionsPageUIHandler,
   // Loads AutoFill addresses and credit cards using the PersonalDataManager.
   void LoadAutoFillData();
 
-  // Adds or updates an address, depending on the unique ID of the address. If
-  // the unique ID is 0, a new address is added to the WebDatabase; otherwise,
-  // the address with the matching ID is updated. Called from DOMUI.
-  // |args| - an array containing the unique ID of the address followed by the
+  // Removes either an address or a credit card, depending on the type of the
+  // profile.
+  // |args| - A string, the GUID of the profile to remove.
+  void RemoveAutoFillProfile(const ListValue* args);
+
+  // Requests profile data for a specific profile. Calls into DOMUI with the
+  // loaded profile data to open the appropriate editor, depending on the type
+  // of the profile.
+  // |args| - A string, the GUID of the profile to load.
+  void LoadProfileEditor(const ListValue* args);
+
+  // Adds or updates an address, depending on the GUID of the profile. If the
+  // GUID is empty, a new address is added to the WebDatabase; otherwise, the
+  // address with the matching GUID is updated. Called from DOMUI.
+  // |args| - an array containing the GUID of the address followed by the
   // address data.
-  void UpdateAddress(const ListValue* args);
+  void SetAddress(const ListValue* args);
+
+  // Adds or updates a credit card, depending on the GUID of the profile. If the
+  // GUID is empty, a new credit card is added to the WebDatabase; otherwise,
+  // the credit card with the matching GUID is updated. Called from DOMUI.
+  // |args| - an array containing the GUID of the credit card followed by the
+  // credit card data.
+  void SetCreditCard(const ListValue* args);
 
   // Loads the data from an address and sends this data back to the DOMUI to
-  // show in the address editor. Called from DOMUI.
-  // |args| - an integer, the unique ID of the address to edit.
-  void EditAddress(const ListValue* args);
-
-  // Removes an address from the WebDatabase. Called from DOMUI.
-  // |args| - an integer, the unique ID of the address to remove.
-  void RemoveAddress(const ListValue* args);
-
-  // Adds or updates a credit card, depending on the unique ID of the credit
-  // card. If the unique ID is 0, a new credit card is added to the WebDatabase;
-  // otherwise, the credit card with the matching ID is updated. Called from
-  // DOMUI.
-  // |args| - an array containing the unique ID of the credit card followed by
-  // the credit card data.
-  void UpdateCreditCard(const ListValue* args);
+  // show in the address editor. |guid| is the GUID of the profile to load.
+  void EditAddress(const std::string& guid);
 
   // Loads the data from a credit card and sends this data back to the DOMUI to
-  // show in the credit card editor. Called from DOMUI.
-  // |args| - an integer, the unique ID of the credit card to edit.
-  void EditCreditCard(const ListValue* args);
-
-  // Removes a credit card from the WebDatabase. Called from DOMUI.
-  // |args| - an integer, the unique ID of the credit card to remove.
-  void RemoveCreditCard(const ListValue* args);
+  // show in the credit card editor. |guid| is the GUID of the profile to load.
+  void EditCreditCard(const std::string& guid);
 
   // The personal data manager, used to load AutoFill profiles and credit cards.
   // Unowned pointer, may not be NULL.
diff --git a/chrome/browser/dom_ui/options/personal_options_handler.cc b/chrome/browser/dom_ui/options/personal_options_handler.cc
index a7bacb0..bc14c1f 100644
--- a/chrome/browser/dom_ui/options/personal_options_handler.cc
+++ b/chrome/browser/dom_ui/options/personal_options_handler.cc
@@ -73,6 +73,8 @@ void PersonalOptionsHandler::GetLocalizedValues(
   localized_strings->SetString("autofill",
       dom_options_util::StripColon(
           l10n_util::GetStringUTF16(IDS_AUTOFILL_SETTING_WINDOWS_GROUP_NAME)));
+  localized_strings->SetString("autoFillEnabled",
+      l10n_util::GetStringUTF16(IDS_OPTIONS_AUTOFILL_ENABLE));
   localized_strings->SetString("manageAutofillSettings",
       l10n_util::GetStringUTF16(IDS_OPTIONS_MANAGE_AUTOFILL_SETTINGS));
 
diff --git a/chrome/browser/resources/options/autofill_edit_address_overlay.js b/chrome/browser/resources/options/autofill_edit_address_overlay.js
index 46a17d0..5794daa 100644
--- a/chrome/browser/resources/options/autofill_edit_address_overlay.js
+++ b/chrome/browser/resources/options/autofill_edit_address_overlay.js
@@ -75,7 +75,7 @@ cr.define('options', function() {
       address[10] = $('fax').value;
       address[11] = $('email').value;
 
-      chrome.send('updateAddress', address);
+      chrome.send('setAddress', address);
     },
 
     /**
diff --git a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
index 01b1722..c61255e 100644
--- a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
+++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js
@@ -68,7 +68,7 @@ cr.define('options', function() {
       creditCard[3] = $('expirationMonth').value;
       creditCard[4] = $('expirationYear').value;
 
-      chrome.send('updateCreditCard', creditCard);
+      chrome.send('setCreditCard', creditCard);
     },
 
     /**
diff --git a/chrome/browser/resources/options/autofill_options.css b/chrome/browser/resources/options/autofill_options.css
index 0c18e3c..673731c 100644
--- a/chrome/browser/resources/options/autofill_options.css
+++ b/chrome/browser/resources/options/autofill_options.css
@@ -1,16 +1,12 @@
-div.autofill-section {
-  display: block;
-  padding: 1em 0 0;
+.autofill-list-item {
+  -webkit-padding-start: 8px;
 }
 
-#profile-select-container {
-  display: -webkit-box;
+#autofill-options > div:last-child {
+  margin-top: 15px;
 }
 
-#profile-select-left-column {
-  -webkit-box-flex: 1;
-}
-
-#profile-select-left-column select {
-  width: 100%;
+#autofill-options * div.settings-list > :last-child {
+  border-top: 1px solid #D9D9D9;
+  padding: 5px 10px;
 }
diff --git a/chrome/browser/resources/options/autofill_options.html b/chrome/browser/resources/options/autofill_options.html
index c5bbb72..727c9ae 100644
--- a/chrome/browser/resources/options/autofill_options.html
+++ b/chrome/browser/resources/options/autofill_options.html
@@ -1,38 +1,22 @@
 <div id="autofill-options" class="page hidden">
   <h1 i18n-content="autoFillOptionsTitle"></h1>
-
-  <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>
-        <option value="addressesBlankOption" disabled></option>
-        <option value="creditCardsHeader" disabled
-            i18n-content="creditCardsHeader"></option>
-        <option value="creditCardsHorizontalRule" disabled></option>
-      </select>
+  <h3 i18n-content="autoFillAddresses"></h3>
+  <div class="settings-list">
+    <list id="address-list"></list>
+    <div>
+      <button id="autofill-add-address" i18n-content="autoFillAddAddress">
+      </button>
     </div>
+  </div>
+  <h3 i18n-content="autoFillCreditCards"></h3>
+  <div class="settings-list">
+    <list id="creditcard-list"></list>
     <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>
+      <button id="autofill-add-creditcard"
+          i18n-content="autoFillAddCreditCard"></button>
     </div>
   </div>
-
-  <div class="autofill-section">
+  <div>
 <if expr="pp_ifdef('chromeos')">
     <a href="http://www.google.com/support/chromeos/bin/answer.py?answer=142893"
         target="_blank" i18n-content="helpButton"></a>
diff --git a/chrome/browser/resources/options/autofill_options.js b/chrome/browser/resources/options/autofill_options.js
index 0c630fd..a3637c4 100644
--- a/chrome/browser/resources/options/autofill_options.js
+++ b/chrome/browser/resources/options/autofill_options.js
@@ -3,28 +3,18 @@
 // found in the LICENSE file.
 
 cr.define('options', function() {
-  var OptionsPage = options.OptionsPage;
-
-  // The offset of the first profile in either the address list or the credit
-  // card list. Consists of the header and the horizontal rule.
-  const addressOffset = 2;
-  const creditCardOffset = 3;
+  const OptionsPage = options.OptionsPage;
+  const ArrayDataModel = cr.ui.ArrayDataModel;
+  const ListSingleSelectionModel = cr.ui.ListSingleSelectionModel;
 
   /////////////////////////////////////////////////////////////////////////////
   // AutoFillOptions class:
-  //
-  // TODO(jhawkins): Replace <select> with a DOMUI List.
 
   /**
    * Encapsulated handling of AutoFill options page.
    * @constructor
    */
   function AutoFillOptions() {
-    this.numAddresses = 0;
-    this.numCreditCards = 0;
-    this.activeNavTab = null;
-    this.addressGUIDs = null;
-    this.creditCardGUIDs = null;
     OptionsPage.call(this,
                      'autoFillOptions',
                      templateData.autoFillOptionsTitle,
@@ -36,32 +26,58 @@ cr.define('options', function() {
   AutoFillOptions.prototype = {
     __proto__: OptionsPage.prototype,
 
+    /**
+     * The address list.
+     * @type {DeletableItemList}
+     * @private
+     */
+    addressList_: null,
+
+    /**
+     * The credit card list.
+     * @type {DeletableItemList}
+     * @private
+     */
+    creditCardList_: null,
+
     initializePage: function() {
       OptionsPage.prototype.initializePage.call(this);
 
+      this.createAddressList_();
+      this.createCreditCardList_();
+
       var self = this;
-      $('profile-list').onchange = function(event) {
-        self.updateButtonState_();
-      };
-      $('profile-list').addEventListener('dblclick', function(event) {
-        if ($('autoFillEnabled').checked)
-          self.editProfile_();
-      });
-      $('add-address-button').onclick = function(event) {
+      $('autofill-add-address').onclick = function(event) {
         self.showAddAddressOverlay_();
       };
-      $('add-credit-card-button').onclick = function(event) {
+      $('autofill-add-creditcard').onclick = function(event) {
         self.showAddCreditCardOverlay_();
       };
-      $('autofill-edit-button').onclick = function(event) {
-        self.editProfile_();
-      };
-      $('autofill-remove-button').onclick = function(event) {
-        self.removeProfile_();
-      };
 
-      Preferences.getInstance().addEventListener('autofill.enabled',
-          this.updateButtonState_.bind(this));
+      // TODO(jhawkins): What happens when AutoFill is disabled whilst on the
+      // AutoFill options page?
+    },
+
+    /**
+     * Creates, decorates and initializes the address list.
+     * @private
+     */
+    createAddressList_: function() {
+      this.addressList_ = $('address-list');
+      options.autoFillOptions.AutoFillList.decorate(this.addressList_);
+      this.addressList_.selectionModel = new ListSingleSelectionModel;
+      this.addressList_.autoExpands = true;
+    },
+
+    /**
+     * Creates, decorates and initializes the credit card list.
+     * @private
+     */
+    createCreditCardList_: function() {
+      this.creditCardList_ = $('creditcard-list');
+      options.autoFillOptions.AutoFillList.decorate(this.creditCardList_);
+      this.creditCardList_.selectionModel = new ListSingleSelectionModel;
+      this.creditCardList_.autoExpands = true;
     },
 
     /**
@@ -78,19 +94,6 @@ cr.define('options', function() {
     },
 
     /**
-     * Shows the 'Edit address' overlay, using the data in |address| to fill the
-     * input fields. |address| is a list with one item, an associative array
-     * that contains the address data.
-     * @private
-     */
-    showEditAddressOverlay_: function(address) {
-      var title = localStrings.getString('editAddressTitle');
-      AutoFillEditAddressOverlay.setTitle(title);
-      AutoFillEditAddressOverlay.loadAddress(address[0]);
-      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.
@@ -104,177 +107,91 @@ cr.define('options', function() {
     },
 
     /**
-     * Shows the 'Edit credit card' overlay, using the data in |credit_card| to
-     * fill the input fields. |address| is a list with one item, an associative
-     * array that contains the credit card data.
-     * @private
+     * Updates the data model for the address list with the values from
+     * |entries|.
+     * @param {Array} entries The list of addresses.
      */
-    showEditCreditCardOverlay_: function(creditCard) {
-      var title = localStrings.getString('editCreditCardTitle');
-      AutoFillEditCreditCardOverlay.setTitle(title);
-      AutoFillEditCreditCardOverlay.loadCreditCard(creditCard[0]);
-      OptionsPage.showOverlay('autoFillEditCreditCardOverlay');
+    setAddressList_: function(entries) {
+      this.addressList_.dataModel = new ArrayDataModel(entries);
     },
 
     /**
-     * Resets the address list. This method leaves the header and horizontal
-     * rule unchanged.
-     * @private
+     * Updates the data model for the credit card list with the values from
+     * |entries|.
+     * @param {Array} entries The list of credit cards.
      */
-    resetAddresses_: function() {
-      var profiles = $('profile-list');
-      for (var i = 0; i <  this.numAddresses; ++i)
-        profiles.remove(addressOffset);
-      this.numAddresses = 0;
+    setCreditCardList_: function(entries) {
+      this.creditCardList_.dataModel = new ArrayDataModel(entries);
     },
 
     /**
-     * Resets the credit card list. This method leaves the header and horizontal
-     * rule unchanged.
+     * Removes the AutoFill profile represented by |guid|.
+     * @param {String} guid The GUID of the profile to remove.
      * @private
      */
-    resetCreditCards_: function() {
-      var profiles = $('profile-list');
-      var offset = this.numAddresses + addressOffset + creditCardOffset;
-      for (var i = 0; i <  this.numCreditCards; ++i)
-        profiles.remove(offset);
-      this.numCreditCards = 0;
+    removeAutoFillProfile_: function(guid) {
+      chrome.send('removeAutoFillProfile', [guid]);
     },
 
     /**
-     * Updates the address list with the given entries.
+     * Requests profile data for the profile represented by |guid| from the
+     * PersonalDataManager. Once the data is loaded, the AutoFillOptionsHandler
+     * calls showEdit[Address,CreditCard]Overlay(), depending on the type of the
+     * profile.
+     * @param {String} guid The GUID of the profile to edit.
      * @private
-     * @param {Array} address List of addresses.
      */
-    updateAddresses_: function(addresses) {
-      this.resetAddresses_();
-      var profileList = $('profile-list');
-      var blankAddress = profileList.options[addressOffset];
-      this.numAddresses = addresses.length;
-      this.addressGUIDs = new Array(this.numAddresses);
-      for (var i = 0; i < this.numAddresses; i++) {
-        var address = addresses[i];
-        var option = new Option(address['label']);
-        this.addressGUIDs[i] = address['guid'];
-        profileList.add(option, blankAddress);
-      }
-
-      this.updateButtonState_();
+    loadProfileEditor_: function(guid) {
+      chrome.send('loadProfileEditor', [guid]);
     },
 
     /**
-     * Updates the credit card list with the given entries.
-     * @private
-     * @param {Array} creditCards List of credit cards.
-     */
-    updateCreditCards_: function(creditCards) {
-      this.resetCreditCards_();
-      var profileList = $('profile-list');
-      this.numCreditCards = creditCards.length;
-      this.creditCardGUIDs = new Array(this.numCreditCards);
-      for (var i = 0; i < this.numCreditCards; i++) {
-        var creditCard = creditCards[i];
-        var option = new Option(creditCard['label']);
-        this.creditCardGUIDs[i] = creditCard['guid'];
-        profileList.add(option, null);
-      }
-
-      this.updateButtonState_();
-    },
-
-    /**
-     * Sets the enabled state of the AutoFill Add Address and Credit Card
-     * buttons on the current state of the |autoFillEnabled| checkbox.
-     * Sets the enabled state of the AutoFill Edit and Remove buttons based on
-     * the current selection in the profile list.
-     * @private
-     */
-    updateButtonState_: function() {
-      var disabled = !$('autoFillEnabled').checked;
-      $('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;
-    },
-
-    /**
-     * Calls into the browser to load either an address or a credit card,
-     * depending on the selected index.  The browser calls back into either
-     * editAddress() or editCreditCard() which show their respective editors.
-     * @private
-     */
-    editProfile_: function() {
-      var idx = $('profile-list').selectedIndex;
-      if ((profileIndex = this.getAddressIndex_(idx)) != -1) {
-        chrome.send('editAddress', [this.addressGUIDs[profileIndex]]);
-      } else if ((profileIndex = this.getCreditCardIndex_(idx)) != -1) {
-        chrome.send('editCreditCard', [this.creditCardGUIDs[profileIndex]]);
-      }
-    },
-
-    /**
-     * Removes the currently selected profile, whether it's an address or a
-     * credit card.
+     * Shows the 'Edit address' overlay, using the data in |address| to fill the
+     * input fields. |address| is a list with one item, an associative array
+     * that contains the address data.
      * @private
      */
-    removeProfile_: function() {
-      var idx = $('profile-list').selectedIndex;
-      if ((profileIndex = this.getAddressIndex_(idx)) != -1)
-        chrome.send('removeAddress', [this.addressGUIDs[profileIndex]]);
-      else if ((profileIndex = this.getCreditCardIndex_(idx)) != -1)
-        chrome.send('removeCreditCard', [this.creditCardGUIDs[profileIndex]]);
+    showEditAddressOverlay_: function(address) {
+      var title = localStrings.getString('editAddressTitle');
+      AutoFillEditAddressOverlay.setTitle(title);
+      AutoFillEditAddressOverlay.loadAddress(address[0]);
+      OptionsPage.showOverlay('autoFillEditAddressOverlay');
     },
 
     /**
-     * Returns the index into the address list based on |index|, the index into
-     * the select control. Returns -1 if this is not an address index.
+     * Shows the 'Edit credit card' overlay, using the data in |credit_card| to
+     * fill the input fields. |address| is a list with one item, an associative
+     * array that contains the credit card data.
      * @private
      */
-    getAddressIndex_: function(index) {
-      index -= addressOffset;
-      if (index >= 0 && index < this.numAddresses)
-        return index;
-
-      return -1;
+    showEditCreditCardOverlay_: function(creditCard) {
+      var title = localStrings.getString('editCreditCardTitle');
+      AutoFillEditCreditCardOverlay.setTitle(title);
+      AutoFillEditCreditCardOverlay.loadCreditCard(creditCard[0]);
+      OptionsPage.showOverlay('autoFillEditCreditCardOverlay');
     },
+  };
 
-    /**
-     * Returns the index into the credit card list based on |index|, the index
-     * into the select control. Returns -1 if this is not a credit card index.
-     * @private
-     */
-    getCreditCardIndex_: function(index) {
-      index -= addressOffset + this.numAddresses + creditCardOffset;
-      if (index >= 0 && index < this.numCreditCards)
-        return index;
+  AutoFillOptions.setAddressList = function(entries) {
+    AutoFillOptions.getInstance().setAddressList_(entries);
+  };
 
-      return -1;
-    },
+  AutoFillOptions.setCreditCardList = function(entries) {
+    AutoFillOptions.getInstance().setCreditCardList_(entries);
+  };
 
-    /**
-     * Returns true if |index| points to a credit card profile.
-     * @private
-     */
-    profileIndexIsCreditCard_: function(index) {
-      index -= addressOffset + this.numAddresses + creditCardOffset;
-      return (index >= 0 && index < this.numCreditCards);
-    }
+  AutoFillOptions.removeAutoFillProfile = function(guid) {
+    AutoFillOptions.getInstance().removeAutoFillProfile_(guid);
   };
 
-  AutoFillOptions.updateAddresses = function(addresses) {
-    AutoFillOptions.getInstance().updateAddresses_(addresses);
+  AutoFillOptions.loadProfileEditor = function(guid) {
+    AutoFillOptions.getInstance().loadProfileEditor_(guid);
   };
 
   AutoFillOptions.editAddress = function(address) {
     AutoFillOptions.getInstance().showEditAddressOverlay_(address);
   };
 
-  AutoFillOptions.updateCreditCards = function(creditCards) {
-    AutoFillOptions.getInstance().updateCreditCards_(creditCards);
-  };
-
   AutoFillOptions.editCreditCard = function(creditCard) {
     AutoFillOptions.getInstance().showEditCreditCardOverlay_(creditCard);
   };
diff --git a/chrome/browser/resources/options/autofill_options_list.js b/chrome/browser/resources/options/autofill_options_list.js
new file mode 100644
index 0000000..4d2dba7
--- /dev/null
+++ b/chrome/browser/resources/options/autofill_options_list.js
@@ -0,0 +1,93 @@
+// 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.autoFillOptions', function() {
+  const DeletableItemList = options.DeletableItemList;
+  const DeletableItem = options.DeletableItem;
+  const List = cr.ui.List;
+
+  /**
+   * Creates a new AutoFill list item.
+   * @param {Array} entry An array of the form [guid, label].
+   * @constructor
+   * @extends {options.DeletableItem}
+   */
+  function AutoFillListItem(entry) {
+    var el = cr.doc.createElement('div');
+    el.guid = entry[0];
+    el.label = entry[1];
+    el.__proto__ = AutoFillListItem.prototype;
+    el.decorate();
+
+    return el;
+  }
+
+  AutoFillListItem.prototype = {
+    __proto__: DeletableItem.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      DeletableItem.prototype.decorate.call(this);
+
+      // The stored label.
+      var label = this.ownerDocument.createElement('div');
+      label.className = 'autofill-list-item';
+      label.textContent = this.label;
+      this.contentElement.appendChild(label);
+    },
+
+    /**
+     * Get and set the GUID for the entry.
+     * @type {string}
+     */
+    get guid() {
+      return this.guid;
+    },
+    set guid(guid) {
+      this.guid = guid;
+    },
+
+    /**
+     * Get and set the label for the entry.
+     * @type {string}
+     */
+    get label() {
+      return this.label;
+    },
+    set label(label) {
+      this.label = label;
+    },
+  };
+
+  /**
+   * Create a new AutoFill list.
+   * @constructor
+   * @extends {options.DeletableItemList}
+   */
+  var AutoFillList = cr.ui.define('list');
+
+  AutoFillList.prototype = {
+    __proto__: DeletableItemList.prototype,
+
+    /** @inheritDoc */
+    createItem: function(entry) {
+      return new AutoFillListItem(entry);
+    },
+
+    /** @inheritDoc */
+    activateItemAtIndex: function(index) {
+      AutoFillOptions.loadProfileEditor(this.dataModel.item(index)[0]);
+    },
+
+    /** @inheritDoc */
+    deleteItemAtIndex: function(index) {
+      AutoFillOptions.removeAutoFillProfile(this.dataModel.item(index)[0]);
+    },
+  };
+
+  return {
+    AutoFillListItem: AutoFillListItem,
+    AutoFillList: AutoFillList,
+  };
+});
diff --git a/chrome/browser/resources/options/content_settings.html b/chrome/browser/resources/options/content_settings.html
index 9c48996..1c1f45b 100644
--- a/chrome/browser/resources/options/content_settings.html
+++ b/chrome/browser/resources/options/content_settings.html
@@ -29,7 +29,7 @@
           i18n-content="flash_storage_settings" target="_blank"></a>
 
       <button class="exceptionsListButton" contentType="cookies"
-              i18n-content="manage_exceptions"></button>
+          i18n-content="manage_exceptions"></button>
    </div>
   </section>
 
@@ -47,7 +47,7 @@
       </label>
 
       <button class="exceptionsListButton" contentType="images"
-              i18n-content="manage_exceptions"></button>
+          i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
@@ -65,7 +65,7 @@
       </label>
 
       <button class="exceptionsListButton" contentType="javascript"
-              i18n-content="manage_exceptions"></button>
+          i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
@@ -87,7 +87,7 @@
       </label>
 
       <button class="exceptionsListButton" contentType="plugins"
-              i18n-content="manage_exceptions"></button>
+          i18n-content="manage_exceptions"></button>
 
       <a i18n-content="disable_individual_plugins" id="plugins-tab" href="#"></a>
     </div>
@@ -107,7 +107,7 @@
       </label>
 
       <button class="exceptionsListButton" contentType="popups"
-              i18n-content="manage_exceptions"></button>
+          i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
@@ -129,7 +129,7 @@
       </label>
 
       <button class="exceptionsListButton" contentType="location"
-              i18n-content="manage_exceptions"></button>
+          i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
@@ -151,7 +151,7 @@
       </label>
 
       <button class="exceptionsListButton" contentType="notifications"
-              i18n-content="manage_exceptions"></button>
+          i18n-content="manage_exceptions"></button>
     </div>
   </section>
 </div>
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 8b8e155..30e0cb0 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -106,6 +106,7 @@
 <script src="alert_overlay.js"></script>
 <script src="autofill_edit_address_overlay.js"></script>
 <script src="autofill_edit_creditcard_overlay.js"></script>
+<script src="autofill_options_list.js"></script>
 <script src="autofill_options.js"></script>
 <script src="browser_options.js"></script>
 <script src="browser_options_startup_page_list.js"></script>
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 091f91f..684ab56 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -309,6 +309,12 @@ div.page section:last-child {
   border-bottom: none;
 }
 
+div.page > h3 {
+  font-size: 105%;
+  font-weight: bold;
+  margin: 20px 0 10px 0;
+}
+
 section > h3 {
   font-size: 105%;
   font-weight: bold;
diff --git a/chrome/browser/resources/options/password_manager.css b/chrome/browser/resources/options/password_manager.css
index bc01647..48ac0d9 100644
--- a/chrome/browser/resources/options/password_manager.css
+++ b/chrome/browser/resources/options/password_manager.css
@@ -1,8 +1,3 @@
-.passwords-list-title {
-  font-weight: bold;
-  margin: 20px 0 10px 0;
-}
-
 #saved-passwords-list .url {
   box-sizing: border-box;
   width: 40%;
diff --git a/chrome/browser/resources/options/password_manager.html b/chrome/browser/resources/options/password_manager.html
index df74db0..b103dbf 100644
--- a/chrome/browser/resources/options/password_manager.html
+++ b/chrome/browser/resources/options/password_manager.html
@@ -1,13 +1,7 @@
 <div id="password-manager" class="page hidden">
   <h1 i18n-content="passwordsTitle"></h1>
-  <div id="saved-passwords">
-    <div class="passwords-list-title" i18n-content="savedPasswordsTitle">
-    </div>
-    <list id="saved-passwords-list" class="settings-list"></list>
-  </div>
-  <div id="password-exceptions">
-    <div class="passwords-list-title" i18n-content="passwordExceptionsTitle">
-    </div>
-    <list id="password-exceptions-list" class="settings-list"></list>
-  </div>
+  <h3 i18n-content="savedPasswordsTitle"></h3>
+  <list id="saved-passwords-list" class="settings-list"></list>
+  <h3 i18n-content="passwordExceptionsTitle"></h3>
+  <list id="password-exceptions-list" class="settings-list"></list>
 </div>
diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js
index 121703a..9a579d8 100644
--- a/chrome/browser/resources/shared/js/cr/ui/list.js
+++ b/chrome/browser/resources/shared/js/cr/ui/list.js
@@ -269,6 +269,7 @@ cr.define('cr.ui', function() {
       var length = this.dataModel ? this.dataModel.length : 0;
       this.selectionModel = new ListSelectionModel(length);
 
+      this.addEventListener('dblclick', this.handleDoubleClick_);
       this.addEventListener('mousedown', this.handleMouseDownUp_);
       this.addEventListener('mouseup', this.handleMouseDownUp_);
       this.addEventListener('keydown', this.handleKeyDown);
@@ -290,6 +291,20 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * Callback for the double click event.
+     * @param {Event} e The mouse event object.
+     * @private
+     */
+    handleDoubleClick_: function(e) {
+      if (this.disabled)
+        return;
+
+      var target = this.getListItemAncestor(e.target);
+      var index = target ? this.getIndexOfListItem(target) : -1;
+      this.activateItemAtIndex(index);
+    },
+
+    /**
      * Callback for mousedown and mouseup events.
      * @param {Event} e The mouse event object.
      * @private