Settings: Clean up browser_options page according to style guide.

BUG=none
TEST=none
R=csilv

Review URL: https://chromiumcodereview.appspot.com/9317114

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

11 files changed, 168 insertions, 181 deletions

diff --git a/chrome/browser/resources/options2/browser_options.css b/chrome/browser/resources/options2/browser_options.css
index 75d9441..1617f4a 100644
--- a/chrome/browser/resources/options2/browser_options.css
+++ b/chrome/browser/resources/options2/browser_options.css
@@ -1,6 +1,7 @@
 /* Copyright (c) 2012 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. */
+ * found in the LICENSE file.
+ */
 
 /* TODO(csilv): Re-order, rename selectors according to style guide. */
 
@@ -12,72 +13,52 @@
   display: inline;
 }
 
-#customHomePageGroup {
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-}
-
-#homepageURL {
-  margin-left: 10px;
-}
-
-#defaultSearchEngineGroup {
-  display: -webkit-box;
+#default-search-engine-group {
   -webkit-box-orient: vertical;
+  display: -webkit-box;
 }
 
-#defaultSearchEngineGroup > div {
-  display: -webkit-box;
+#default-search-engine-group > div {
   -webkit-box-orient: horizontal;
+  display: -webkit-box;
 }
 
-#defaultSearchEngine {
-  display: block;
+#default-search-engine {
   -webkit-box-flex: 1;
+  display: block;
   max-width: 100px;
 }
 
-#defaultSearchGroupLabel {
+#default-search-group-label {
   margin-bottom: 5px;
 }
 
-#defaultSearchManageEnginesButton {
-  margin-top: 0;
+#manage-default-search-engines {
   -webkit-margin-start: 10px;
+  margin-top: 0;
 }
 
-#defaultBrowserState {
+#default-browser-state {
   margin-top: 6px;
 }
 
-#instantOption {
+#instant-setting {
   margin-bottom: 3px;
   margin-top: 10px
 }
 
-.overlayText {
-  font-family: inherit;
-  white-space: pre-wrap;
-  width: 500px;
-}
-
-#instantConfirmLearnMore {
-  position: absolute;
-  bottom: 18px;
-}
-
 #account-picture-wrapper {
-  border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
   display: inline-block;
   margin: 5px 10px 5px 2px;
   padding: 3px;
 }
 
 #account-picture {
-  width: 70px;
   height: 70px;
   vertical-align: middle;
+  width: 70px;
 }
 
 #sync-overview p {
@@ -85,8 +66,8 @@
 }
 
 #profiles-list {
-  min-height: 0;
   margin-bottom: 10px;
+  min-height: 0;
 }
 
 #profiles-list > * {
diff --git a/chrome/browser/resources/options2/browser_options.html b/chrome/browser/resources/options2/browser_options.html
index a8eeaf1..1994039 100644
--- a/chrome/browser/resources/options2/browser_options.html
+++ b/chrome/browser/resources/options2/browser_options.html
@@ -1,6 +1,6 @@
-<div id="browserPage" class="page" hidden>
+<div id="settings" class="page" hidden>
   <header>
-    <h1 i18n-content="browserPage"></h1>
+    <h1 i18n-content="settingsTitle"></h1>
     <span id="browser-options-search-field-container"
         class="search-field-container">
       <input id="search-field" type="search"
@@ -14,7 +14,8 @@
     <div id="sync-overview" class="section-description" hidden>
       <p i18n-content="syncOverview"></p>
       <a i18n-values="href:syncLearnMoreURL" i18n-content="learnMore"
-          target="_blank"></a>
+          target="_blank">
+      </a>
     </div>
     <div id="sync-status" hidden>
       <span id="sync-status-text"></span>
@@ -39,13 +40,14 @@
     <h3 i18n-content="sectionTitleInternet"></h3>
     <div>
       <button id="internet-options-button"
-          i18n-content="internetOptionsButtonTitle"></button>
+          i18n-content="internetOptionsButtonTitle">
+      </button>
     </div>
   </section>
 </if>
 <if expr="not pp_ifdef('chromeos')">
   <!-- This section is temporarily duplicated down below for ChromeOS. -->
-  <section id="startupSection">
+  <section id="startup-section">
     <h3 i18n-content="sectionTitleStartup"></h3>
     <div>
       <div class="radio">
@@ -70,13 +72,12 @@
       </div>
       <div class="radio">
         <label>
-          <input id="startupShowPagesButton" type="radio" name="startup"
+          <input id="startup-show-pages" type="radio" name="startup"
               pref="session.restore_on_startup"
               value="4" metric="Options_Startup_Custom">
           <span>
-            <span id="startupShowPagesLabel"
-                i18n-content="startupShowPages"></span>
-            <button id="startupSetPages" class="link-button"
+            <span i18n-content="startupShowPages"></span>
+            <button id="startup-set-pages" class="link-button"
                 i18n-content="startupSetPages"></button>
           </span>
         </label>
@@ -88,13 +89,11 @@
     <h3 i18n-content="sectionTitleAppearance"></h3>
 <if expr="not pp_ifdef('toolkit_views') and is_posix and not is_macosx">
     <div>
-      <div>
-        <button id="themes-gallery" i18n-content="themesGallery"></button>
-        <button id="themes-GTK-button"
-            i18n-content="themesGTKButton"></button>
-        <button id="themes-reset"
-            i18n-content="themesSetClassic"></button>
-      </div>
+      <button id="themes-gallery" i18n-content="themesGallery"></button>
+      <button id="themes-GTK-button"
+          i18n-content="themesGTKButton"></button>
+      <button id="themes-reset"
+          i18n-content="themesSetClassic"></button>
     </div>
 </if>
 <if expr="pp_ifdef('toolkit_views') or os == 'win32' or os == 'darwin'">
@@ -105,19 +104,19 @@
 </if>
     <div>
       <div class="checkbox">
-        <input id="toolbarShowHomeButton" pref="browser.show_home_button"
+        <input id="toolbar-show-home-button" pref="browser.show_home_button"
             metric="Options_Homepage_HomeButton" type="checkbox">
-        <label id="home-page-label" for="toolbarShowHomeButton"
+        <label id="home-page-label" for="toolbar-show-home-button"
             i18n-content="toolbarShowHomeButton">
         </label>
         <button id="change-home-page" i18n-content="changeHomePage"
-            class="link-button"></button>
+            class="link-button">
+        </button>
       </div>
       <div class="checkbox">
         <label>
-          <input id="toolbarShowBookmarksBar"
-              pref="bookmark_bar.show_on_all_tabs"
-              metric="Options_ShowBookmarksBar" type="checkbox">
+          <input type="checkbox" pref="bookmark_bar.show_on_all_tabs"
+              metric="Options_ShowBookmarksBar">
           <span i18n-content="toolbarShowBookmarksBar"></span>
         </label>
       </div>
@@ -150,38 +149,44 @@
         </div>
       </div>
       <button id="pointer-settings-button"
-          i18n-content="pointerSettingsButtonTitle" hidden></button>
+          i18n-content="pointerSettingsButtonTitle" hidden>
+      </button>
     </div>
     <div>
       <span i18n-content="deviceGroupKeyboard"></span>
       <button id="keyboard-settings-button"
-          i18n-content="keyboardSettingsButtonTitle"></button>
+          i18n-content="keyboardSettingsButtonTitle">
+      </button>
     </div>
     <div id="brightness-value">
       <span i18n-content="deviceGroupBrightness"></span>
       <button id="brightness-decrease-button"
-          i18n-content="brightnessDecrease"></button>
+          i18n-content="brightnessDecrease">
+      </button>
       <button id="brightness-increase-button"
-          i18n-content="brightnessIncrease"></button>
+          i18n-content="brightnessIncrease">
+      </button>
     </div>
   </section>
 </if>
   <section>
     <h3 i18n-content="sectionTitleSearch"></h3>
-      <div id="defaultSearchEngineGroup">
-        <div id="defaultSearchGroupLabel"
-             i18n-values=".innerHTML:defaultSearchGroupLabel"></div>
+      <div id="default-search-engine-group">
+        <div id="default-search-group-label"
+            i18n-values=".innerHTML:defaultSearchGroupLabel">
+        </div>
         <div>
-          <select id="defaultSearchEngine" class="weakrtl"></select>
-          <button id="defaultSearchManageEnginesButton"
-              i18n-content="defaultSearchManageEngines"></button>
+          <select id="default-search-engine" class="weakrtl"></select>
+          <button id="manage-default-search-engines"
+              i18n-content="defaultSearchManageEngines">
+          </button>
         </div>
-        <div id="instantOption" class="checkbox">
-          <label id="instantLabel">
+        <div id="instant-setting" class="checkbox">
+          <label id="instant-label">
             <!-- TODO(estade): metric? -->
-            <input id="instantFieldTrialCheckbox" type="checkbox"
+            <input id="instant-field-trial-control" type="checkbox"
                 checked="checked" hidden>
-            <input id="instantEnabledCheckbox" type="checkbox"
+            <input id="instant-enabled-control" type="checkbox"
                 pref="instant.enabled">
             <span i18n-values=".innerHTML:instantPrefAndWarning"></span>
           </label>
@@ -219,8 +224,9 @@
         </button>
         <button id="start-stop-sync" hidden></button>
         <button id="customize-sync" i18n-content="customizeSync" hidden>
+        </button>
         <button id="manage-accounts-button"
-            i18n-content="manageAccountsButtonTitle"></button>
+            i18n-content="manageAccountsButtonTitle">
         </button>
       </div>
     </div>
@@ -250,10 +256,11 @@
   <section>
     <h3 i18n-content="sectionTitleDefaultBrowser"></h3>
     <div>
-      <button id="defaultBrowserUseAsDefaultButton"
-          i18n-content="defaultBrowserUseAsDefault" hidden></button>
-      <div id="defaultBrowserState"
-          i18n-content="defaultBrowserUnknown"></div>
+      <button id="set-as-default-browser"
+          i18n-content="defaultBrowserUseAsDefault" hidden>
+      </button>
+      <div id="default-browser-state" i18n-content="defaultBrowserUnknown">
+      </div>
     </div>
   </section>
 </if>
@@ -261,7 +268,7 @@
   <!-- This section is temporarily duplicated here for ChromeOS. -->
   <!-- TODO(csilv): Move to 'Under the Hood' for ChromeOS only. -->
   <!-- http://crbug.com/110527 -->
-  <section id="startupSection">
+  <section id="startup-section">
     <h3 i18n-content="sectionTitleStartup"></h3>
     <div>
       <div class="radio">
@@ -282,14 +289,16 @@
       </div>
       <div class="radio">
         <label>
-          <input id="startupShowPagesButton" type="radio" name="startup"
+          <input id="startup-show-pages" type="radio" name="startup"
               pref="session.restore_on_startup"
               value="4" metric="Options_Startup_Custom">
           <span>
             <span id="startupShowPagesLabel"
-                i18n-content="startupShowPages"></span>
-            <button id="startupSetPages" class="link-button"
-                i18n-content="startupSetPages"></button>
+                i18n-content="startupShowPages">
+            </span>
+            <button id="startup-set-pages" class="link-button"
+                i18n-content="startupSetPages">
+            </button>
           </span>
         </label>
       </div>
@@ -299,8 +308,9 @@
   <section>
     <h3 i18n-content="sectionTitleAdvanced"></h3>
     <div>
-      <button id="advancedOptionsButton"
-          i18n-content="advancedOptionsButtonTitle"></button>
+      <button id="advanced-settings"
+          i18n-content="advancedSettings">
+      </button>
     </div>
   </section>
 </div>
diff --git a/chrome/browser/resources/options2/browser_options.js b/chrome/browser/resources/options2/browser_options.js
index 010db60..1c3de8d 100644
--- a/chrome/browser/resources/options2/browser_options.js
+++ b/chrome/browser/resources/options2/browser_options.js
@@ -3,24 +3,22 @@
 // found in the LICENSE file.
 
 cr.define('options', function() {
-  const OptionsPage = options.OptionsPage;
-  const ArrayDataModel = cr.ui.ArrayDataModel;
-  const RepeatingButton = cr.ui.RepeatingButton;
+  var OptionsPage = options.OptionsPage;
+  var ArrayDataModel = cr.ui.ArrayDataModel;
+  var RepeatingButton = cr.ui.RepeatingButton;
 
   //
   // BrowserOptions class
   // Encapsulated handling of browser options page.
   //
   function BrowserOptions() {
-    OptionsPage.call(this, 'browser',
-                     templateData.browserPageTabTitle,
-                     'browserPage');
+    OptionsPage.call(this, 'settings', templateData.settingsTitle,
+                     'settings');
   }
 
   cr.addSingletonGetter(BrowserOptions);
 
   BrowserOptions.prototype = {
-    // Inherit BrowserOptions from OptionsPage.
     __proto__: options.OptionsPage.prototype,
 
     // State variables.
@@ -35,65 +33,66 @@ cr.define('options', function() {
      */
     autocompleteList_: null,
 
-    // The cached value of the instant.confirm_dialog_shown preference.
+    /**
+     * The cached value of the instant.confirm_dialog_shown preference.
+     * @type {bool}
+     * @private
+     */
     instantConfirmDialogShown_: false,
 
     /**
-     * Initialize BrowserOptions page.
+     * @inheritDoc
      */
     initializePage: function() {
-      // Call base class implementation to start preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
-      var self = this;
-
       // Sync (Sign in) section.
-      $('sync-action-link').addEventListener('click', function(event) {
+      $('sync-action-link').onclick = function(event) {
         SyncSetupOverlay.showErrorUI();
-      });
-      $('start-stop-sync').addEventListener('click', function(event) {
+      };
+      $('start-stop-sync').onclick = function(event) {
         if (self.syncSetupCompleted)
           SyncSetupOverlay.showStopSyncingUI();
         else
           SyncSetupOverlay.showSetupUI();
-      });
-      $('customize-sync').addEventListener('click', function(event) {
+      };
+      $('customize-sync').onclick = function(event) {
         SyncSetupOverlay.showSetupUI();
-      });
+      };
 
       // Internet connection section (ChromeOS only).
       if (cr.isChromeOS) {
-        $('internet-options-button').addEventListener('click', function(event) {
+        $('internet-options-button').onclick = function(event) {
           OptionsPage.navigateToPage('internet');
           chrome.send('coreOptionsUserMetricsAction',
               ['Options_InternetOptions']);
-        });
+        };
       }
 
       // On Startup section.
-      $('startupSetPages').addEventListener('click', function() {
+      $('startup-set-pages').onclick = function() {
         OptionsPage.navigateToPage('startup');
-      });
+      };
 
       // Appearance section.
-      $('change-home-page').addEventListener('click', function(event) {
+      $('change-home-page').onclick = function(event) {
         OptionsPage.navigateToPage('homePageOverlay');
-      });
-      $('themes-gallery').addEventListener('click', function(event) {
+      };
+      $('themes-gallery').onclick = function(event) {
         window.open(localStrings.getString('themesGalleryURL'));
-      });
-      $('themes-reset').addEventListener('click', function(event) {
+      };
+      $('themes-reset').onclick = function(event) {
         chrome.send('themesReset');
-      });
+      };
 
       // Device section (ChromeOS only).
       if (cr.isChromeOS) {
-        $('keyboard-settings-button').addEventListener('click', function(evt) {
+        $('keyboard-settings-button').onclick = function(evt) {
           OptionsPage.navigateToPage('keyboard-overlay');
-        });
-        $('pointer-settings-button').addEventListener('click', function(evt) {
+        };
+        $('pointer-settings-button').onclick = function(evt) {
           OptionsPage.navigateToPage('pointer-overlay');
-        });
+        };
         this.initBrightnessButton_('brightness-decrease-button',
             'decreaseScreenBrightness');
         this.initBrightnessButton_('brightness-increase-button',
@@ -101,15 +100,14 @@ cr.define('options', function() {
       }
 
       // Search section.
-      $('defaultSearchManageEnginesButton').addEventListener('click',
-          function(event) {
-            OptionsPage.navigateToPage('searchEngines');
-            chrome.send('coreOptionsUserMetricsAction',
-                        ['Options_ManageSearchEngines']);
-          });
-      $('defaultSearchEngine').addEventListener('change',
+      $('manage-default-search-engines').onclick = function(event) {
+        OptionsPage.navigateToPage('searchEngines');
+        chrome.send('coreOptionsUserMetricsAction',
+                    ['Options_ManageSearchEngines']);
+      };
+      $('default-search-engine').addEventListener('change',
           this.setDefaultSearchEngine_);
-      $('instantEnabledCheckbox').customChangeHandler = function(event) {
+      $('instant-enabled-control').customChangeHandler = function(event) {
         if (this.checked) {
           if (self.instantConfirmDialogShown_)
             chrome.send('enableInstant');
@@ -120,10 +118,10 @@ cr.define('options', function() {
         }
         return true;
       };
-      $('instantFieldTrialCheckbox').addEventListener('change', function(evt) {
+      $('instant-field-trial-control').onchange = function(evt) {
         this.checked = true;
         chrome.send('disableInstant');
-      });
+      };
       Preferences.getInstance().addEventListener('instant.confirm_dialog_shown',
           this.onInstantConfirmDialogShownChanged_.bind(this));
       Preferences.getInstance().addEventListener('instant.enabled',
@@ -137,15 +135,11 @@ cr.define('options', function() {
 
       // Text fields may change widths when the window changes size, so make
       // sure the suggestion list stays in sync.
+      var self = this;
       window.addEventListener('resize', function() {
         self.autocompleteList_.syncWidthToInput();
       });
 
-      if (cr.commandLine && cr.commandLine.options['--bwsi']) {
-        // Hide the startup section in Guest mode.
-        $('startupSection').hidden = true;
-      }
-
       var suggestionList = new cr.ui.AutocompleteList();
       suggestionList.autoExpands = true;
       suggestionList.suggestionUpdateRequestCallback =
@@ -159,29 +153,29 @@ cr.define('options', function() {
       profilesList.autoExpands = true;
 
       profilesList.addEventListener('change',
-          self.setProfileViewButtonsStatus_);
-      $('profiles-create').addEventListener('click', function(event) {
+          this.setProfileViewButtonsStatus_);
+      $('profiles-create').onclick = function(event) {
         chrome.send('createProfile');
-      });
-      $('profiles-manage').addEventListener('click', function(event) {
+      };
+      $('profiles-manage').onclick = function(event) {
         var selectedProfile = self.getSelectedProfileItem_();
         if (selectedProfile)
           ManageProfileOverlay.showManageDialog(selectedProfile);
-      });
-      $('profiles-delete').addEventListener('click', function(event) {
+      };
+      $('profiles-delete').onclick = function(event) {
         var selectedProfile = self.getSelectedProfileItem_();
         if (selectedProfile)
           ManageProfileOverlay.showDeleteDialog(selectedProfile);
-      });
+      };
 
       if (cr.isChromeOS) {
         // Username (canonical email) of the currently logged in user or
         // |kGuestUser| if a guest session is active.
         this.username_ = localStrings.getString('username');
 
-        $('change-picture-button').addEventListener('click', function(event) {
+        $('change-picture-button').onclick = function(event) {
           OptionsPage.navigateToPage('changePicture');
-        });
+        };
         this.updateAccountPicture_();
 
         if (cr.commandLine && cr.commandLine.options['--bwsi']) {
@@ -189,44 +183,46 @@ cr.define('options', function() {
           // guest mode.
           $('enable-screen-lock').disabled = true;
           $('change-picture-button').disabled = true;
+
+          // Hide the startup section in Guest mode.
+          $('startup-section').hidden = true;
         }
 
-        $('manage-accounts-button').addEventListener('click', function(event) {
+        $('manage-accounts-button').onclick, function(event) {
           OptionsPage.navigateToPage('accounts');
           chrome.send('coreOptionsUserMetricsAction',
               ['Options_ManageAccounts']);
-        });
+        };
       } else {
-        $('import-data').addEventListener('click', function(event) {
+        $('import-data').onclick = function(event) {
           // Make sure that any previous import success message is hidden, and
           // we're showing the UI to import further data.
           $('import-data-configure').hidden = false;
           $('import-data-success').hidden = true;
           OptionsPage.navigateToPage('importData');
           chrome.send('coreOptionsUserMetricsAction', ['Import_ShowDlg']);
-        });
+        };
 
         if ($('themes-GTK-button')) {
-          $('themes-GTK-button').addEventListener('click', function(event) {
+          $('themes-GTK-button').onclick = function(event) {
             chrome.send('themesSetGTK');
-          });
+          };
         }
       }
 
       // Default browser section.
       if (!cr.isChromeOS) {
-        $('defaultBrowserUseAsDefaultButton').addEventListener('click',
-            function(event) {
-              chrome.send('becomeDefaultBrowser');
-            });
+        $('set-as-default-browser').onclick = function(event) {
+          chrome.send('becomeDefaultBrowser');
+        };
       }
 
       // Under the hood section.
-      $('advancedOptionsButton').addEventListener('click', function(event) {
+      $('advanced-settings').onclick = function(event) {
         OptionsPage.navigateToPage('advanced');
         chrome.send('coreOptionsUserMetricsAction',
-            ['Options_OpenUnderTheHood']);
-      });
+                    ['Options_OpenUnderTheHood']);
+      };
 
       this.sessionRestoreEnabled_ = templateData.enable_restore_session_state;
       if (this.sessionRestoreEnabled_) {
@@ -360,10 +356,10 @@ cr.define('options', function() {
      * @private
      */
     setInstantFieldTrialStatus_: function(enabled) {
-      $('instantEnabledCheckbox').hidden = enabled;
-      $('instantFieldTrialCheckbox').hidden = !enabled;
-      $('instantLabel').htmlFor = enabled ? 'instantFieldTrialCheckbox'
-                                          : 'instantEnabledCheckbox';
+      $('instant-enabled-control').hidden = enabled;
+      $('instant-field-trial-control').hidden = !enabled;
+      $('instant-label').htmlFor = enabled ? 'instant-field-trial-control'
+                                           : 'instant-enabled-control';
     },
 
     onSessionRestoreSelectedChanged_ : function(event) {
@@ -398,10 +394,10 @@ cr.define('options', function() {
      */
     updateDefaultBrowserState_: function(statusString, isDefault,
                                          canBeDefault) {
-      var label = $('defaultBrowserState');
+      var label = $('default-browser-state');
       label.textContent = statusString;
 
-      $('defaultBrowserUseAsDefaultButton').hidden = !canBeDefault || isDefault;
+      $('set-as-default-browser').hidden = !canBeDefault || isDefault;
     },
 
     /**
@@ -409,7 +405,7 @@ cr.define('options', function() {
      * @private
      */
     clearSearchEngines_: function() {
-      $('defaultSearchEngine').textContent = '';
+      $('default-search-engine').textContent = '';
     },
 
     /**
@@ -422,7 +418,7 @@ cr.define('options', function() {
      */
     updateSearchEngines_: function(engines, defaultValue, defaultManaged) {
       this.clearSearchEngines_();
-      engineSelect = $('defaultSearchEngine');
+      engineSelect = $('default-search-engine');
       engineSelect.disabled = defaultManaged;
       engineCount = engines.length;
       var defaultIndex = -1;
@@ -444,7 +440,7 @@ cr.define('options', function() {
      *     enabled.
      */
     shouldEnableCustomStartupPageControls: function(pages) {
-      return $('startupShowPagesButton').checked &&
+      return $('startup-show-pages').checked &&
           !this.startup_pages_pref_.disabled;
     },
 
@@ -470,7 +466,7 @@ cr.define('options', function() {
      * @private
      */
     setDefaultSearchEngine_: function() {
-      var engineSelect = $('defaultSearchEngine');
+      var engineSelect = $('default-search-engine');
       var selectedIndex = engineSelect.selectedIndex;
       if (selectedIndex >= 0) {
         var selection = engineSelect.options[selectedIndex];
@@ -578,9 +574,8 @@ cr.define('options', function() {
     },
 
     setGtkThemeButtonEnabled_: function(enabled) {
-      if (!cr.isChromeOS && navigator.platform.match(/linux|BSD/i)) {
+      if (!cr.isChromeOS && navigator.platform.match(/linux|BSD/i))
         $('themes-GTK-button').disabled = !enabled;
-      }
     },
 
     setThemesResetButtonEnabled_: function(enabled) {
@@ -589,6 +584,7 @@ cr.define('options', function() {
 
     /**
      * (Re)loads IMG element with current user account picture.
+     * @private
      */
     updateAccountPicture_: function() {
       var picture = $('account-picture');
@@ -655,5 +651,4 @@ cr.define('options', function() {
   return {
     BrowserOptions: BrowserOptions
   };
-
 });
diff --git a/chrome/browser/resources/options2/instant_confirm_overlay.html b/chrome/browser/resources/options2/instant_confirm_overlay.html
index bbd55a7..d2f845dc 100644
--- a/chrome/browser/resources/options2/instant_confirm_overlay.html
+++ b/chrome/browser/resources/options2/instant_confirm_overlay.html
@@ -1,8 +1,8 @@
 <div id="instantConfirmOverlay" class="page" hidden>
   <h1 i18n-content="instantConfirmTitle"></h1>
-  <!-- The text has line breaks, so we must use a pre. -->
   <div class="content-area">
-    <pre class="overlayText" i18n-content="instantConfirmMessage"></pre>
+    <!-- The text has line breaks, so we must use a pre. -->
+    <pre i18n-content="instantConfirmMessage"></pre>
     <a id="instantConfirmLearnMore" target="_blank" i18n-content="learnMore"
         i18n-values="href:instantLearnMoreLink"></a>
   </div>
diff --git a/chrome/browser/resources/options2/options.html b/chrome/browser/resources/options2/options.html
index cc96eaa..3274539 100644
--- a/chrome/browser/resources/options2/options.html
+++ b/chrome/browser/resources/options2/options.html
@@ -26,7 +26,9 @@
 <if expr="pp_ifdef('enable_register_protocol_handler')">
   <link rel="stylesheet" href="handler_options.css">
 </if>
+<link rel="stylesheet" href="home_page_overlay.css">
 <link rel="stylesheet" href="import_data_overlay.css">
+<link rel="stylesheet" href="instant_confirm_overlay.css">
 <if expr="pp_ifdef('enable_web_intents_tag')">
   <link rel="stylesheet" href="intents_view.css">
 </if>
diff --git a/chrome/browser/resources/options2/options.js b/chrome/browser/resources/options2/options.js
index 2e1a0cf..29a3602 100644
--- a/chrome/browser/resources/options2/options.js
+++ b/chrome/browser/resources/options2/options.js
@@ -70,7 +70,7 @@ function load() {
   // BrowserOptions sub-pages.
   OptionsPage.registerSubPage(AdvancedOptions.getInstance(),
                               BrowserOptions.getInstance(),
-                              [$('advancedOptionsButton')]);
+                              [$('advanced-settings')]);
   if (cr.isChromeOS) {
     OptionsPage.registerSubPage(AccountsOptions.getInstance(),
                                 BrowserOptions.getInstance(),
@@ -162,7 +162,7 @@ function load() {
                               [$('fontSettingsCustomizeFontsButton')]);
   OptionsPage.registerOverlay(HomePageOverlay.getInstance(),
                               BrowserOptions.getInstance(),
-                              [$('toolbarShowHomeButton')]);
+                              [$('change-home-page')]);
   OptionsPage.registerOverlay(ImportDataOverlay.getInstance(),
                               BrowserOptions.getInstance());
   OptionsPage.registerOverlay(InstantConfirmOverlay.getInstance(),
@@ -177,7 +177,7 @@ function load() {
                               [$('manage-passwords')]);
   OptionsPage.registerOverlay(SearchEngineManager.getInstance(),
                               BrowserOptions.getInstance(),
-                              [$('defaultSearchManageEnginesButton')]);
+                              [$('manage-default-search-engines')]);
   OptionsPage.registerOverlay(SessionRestoreOverlay.getInstance(),
                               BrowserOptions.getInstance());
   OptionsPage.registerOverlay(StartupOverlay.getInstance(),
diff --git a/chrome/browser/resources/options2/options_page.css b/chrome/browser/resources/options2/options_page.css
index 1b5b180..b4fabfb 100644
--- a/chrome/browser/resources/options2/options_page.css
+++ b/chrome/browser/resources/options2/options_page.css
@@ -227,9 +227,10 @@ html.hide-menu .close-subpage {
   top: 0;
 }
 
-/* Omit top padding (currently only on #browserPage) whenever the search page is
- * showing. */
-#searchPage:not([hidden]) + #browserPage {
+/* Omit top padding (currently only on #settings) whenever the search page is
+ * showing.
+ */
+#searchPage:not([hidden]) + #settings {
   padding-top: 0;
 }
 
diff --git a/chrome/browser/resources/options2/options_page.js b/chrome/browser/resources/options2/options_page.js
index be86a1c..72cddff 100644
--- a/chrome/browser/resources/options2/options_page.js
+++ b/chrome/browser/resources/options2/options_page.js
@@ -9,9 +9,7 @@ cr.define('options', function() {
   /**
    * Base class for options page.
    * @constructor
-   * @param {string} name Options page name, also defines id of the div element
-   *     containing the options view and the name of options page navigation bar
-   *     item as name+'PageNav'.
+   * @param {string} name Options page name.
    * @param {string} title Options page title, used for navigation bar
    * @extends {EventTarget}
    */
diff --git a/chrome/browser/resources/options2/session_restore_overlay.html b/chrome/browser/resources/options2/session_restore_overlay.html
index 0439dbf..5791ef2 100644
--- a/chrome/browser/resources/options2/session_restore_overlay.html
+++ b/chrome/browser/resources/options2/session_restore_overlay.html
@@ -1,8 +1,8 @@
 <div id="sessionRestoreOverlay" class="page" hidden>
   <h1 i18n-content="sessionRestoreOverlayTitle"></h1>
-  <!-- The text has line breaks, so we must use a pre. -->
   <div class="content-area">
-    <pre class="overlayText" i18n-content="sessionRestoreOverlayMessage"></pre>
+    <!-- The text has line breaks, so we must use a pre. -->
+    <pre i18n-content="sessionRestoreOverlayMessage"></pre>
   </div>
   <div class="action-area">
     <div class="button-strip">
diff --git a/chrome/browser/ui/webui/options2/browser_options_handler2.cc b/chrome/browser/ui/webui/options2/browser_options_handler2.cc
index 35ad33d..bbda7e1 100644
--- a/chrome/browser/ui/webui/options2/browser_options_handler2.cc
+++ b/chrome/browser/ui/webui/options2/browser_options_handler2.cc
@@ -111,7 +111,7 @@ void BrowserOptionsHandler::GetLocalizedValues(
   DCHECK(localized_strings);
 
   static OptionsStringResource resources[] = {
-    { "advancedOptionsButtonTitle", IDS_OPTIONS_ADVANCED_BUTTON_TITLE },
+    { "advancedSettings", IDS_OPTIONS_ADVANCED_BUTTON_TITLE },
     { "autologinEnabled", IDS_OPTIONS_PASSWORDS_AUTOLOGIN },
     { "browsingData", IDS_OPTIONS_BROWSING_DATA_GROUP_NAME },  // needed?
     { "changeHomePage", IDS_OPTIONS_CHANGE_HOME_PAGE },
@@ -139,6 +139,7 @@ void BrowserOptionsHandler::GetLocalizedValues(
     { "sessionRestoreOverlayMessage", IDS_SESSION_RESTORE_OVERLAY_MESSAGE },
     { "sessionRestoreOverlayTitle", IDS_SESSION_RESTORE_OVERLAY_TITLE },
     { "startupRestoreLastSession", IDS_OPTIONS_STARTUP_RESTORE_LAST_SESSION },
+    { "settingsTitle", IDS_SETTINGS_TITLE },
     { "startupSetPages", IDS_OPTIONS2_STARTUP_SET_PAGES },
     { "startupShowDefaultAndNewTab",
       IDS_OPTIONS_STARTUP_SHOW_DEFAULT_AND_NEWTAB},
@@ -181,7 +182,6 @@ void BrowserOptionsHandler::GetLocalizedValues(
   };
 
   RegisterStrings(localized_strings, resources, arraysize(resources));
-  RegisterTitle(localized_strings, "browserPage", IDS_SETTINGS_TITLE);
 
   localized_strings->SetString(
       "syncOverview",
diff --git a/chrome/browser/ui/webui/options2/options2_browsertest.js b/chrome/browser/ui/webui/options2/options2_browsertest.js
index 9be9041..400dd38 100644
--- a/chrome/browser/ui/webui/options2/options2_browsertest.js
+++ b/chrome/browser/ui/webui/options2/options2_browsertest.js
@@ -55,7 +55,7 @@ GEN('#endif  // defined(OS_MACOSX)');
 
 TEST_F('OptionsWebUITest', 'MAYBE_testSetBooleanPrefTriggers', function() {
   // TODO(dtseng): make generic to click all buttons.
-  var showHomeButton = $('toolbarShowHomeButton');
+  var showHomeButton = $('toolbar-show-home-button');
   var trueListValue = [
     'browser.show_home_button',
     true,