[uber] Redoing the homepage selection UI

chrome/browser/resources/options2/browser_options.js

Index: chrome/browser/resources/options2/browser_options.js
diff --git a/chrome/browser/resources/options2/browser_options.js b/chrome/browser/resources/options2/browser_options.js
index 1fbe3cce331ade70497a647e0c82d70d7880e1ae..0cc4ae31511b6ec0745a1459dd6ab7a700be3ca6 100644
--- a/chrome/browser/resources/options2/browser_options.js
+++ b/chrome/browser/resources/options2/browser_options.js
@@ -27,8 +27,11 @@ cr.define('options', function() {
     syncEnabled: false,
     syncSetupCompleted: false,
 
+    showHomeButton_: false,
+    homePageIsNtp_: false,
+
     /**
-     * An autocomplete list that can be attached to the homepage URL text field
+     * An autocomplete list that can be attached to the home page URL text field
      * during editing.
      * @type {HTMLElement}
      * @private
@@ -76,9 +79,17 @@ cr.define('options', function() {
       });
 
       // Appearance section.
-      $('change-home-page').addEventListener('click', function(event) {
-        OptionsPage.navigateToPage('homePageOverlay');
+      $('homepage-select').addEventListener(
+          'change', this.onHomePageSelectChange_.bind(this));
+
+      ['browser.show_home_button',
+          'homepage',
+          'homepage_is_newtabpage'].forEach(function(pref) {
+        Preferences.getInstance().addEventListener(
+            pref,
+            self.onHomePagePrefChanged_.bind(self));
       });
+
       $('themes-gallery').addEventListener('click', function(event) {
         window.open(localStrings.getString('themesGalleryURL'));
       });
@@ -314,12 +325,88 @@ cr.define('options', function() {
     },
 
     /**
-     * Sets the label for the 'Show Home page' input.
-     * @param {string} label The HTML of the input label.
+     * Returns the <option> element with the given |value|.
+     * @param {string} value One of 'none', 'ntp', 'url', 'choose'.
+     * @return {HTMLOptionElement} the specified <option> element.
+     */
+    getHomePageOption_: function(value) {
+      var select = $('homepage-select');
+      return select.querySelector('option[value=' + value + ']');
+    },
+
+    /**
+     * Selects the <option> element with the given |value|.
+     * @private
+     */
+    selectHomePageOption_: function(value) {
+      var select = $('homepage-select');
+      var option = this.getHomePageOption_(value);
+      if (!option.selected)
+        option.selected = true;
+    },
+
+    /**
+     * Event listener for the |change| event on the homepage <select> element.
      * @private
      */
-    updateHomePageLabel_: function(label) {
-      $('home-page-label').innerHTML = label;
+    onHomePageSelectChange_: function() {
+      var option = $('homepage-select').value;
+      if (option == 'choose') {
+        OptionsPage.navigateToPage('homePageOverlay');
+        return;
+      }
+
+      var showHomeButton = (option != 'none');
+      Preferences.setBooleanPref('browser.show_home_button', showHomeButton);
+
+      if (option == 'ntp')
+        Preferences.setBooleanPref('homepage_is_newtabpage', true);
+      else if (option == 'url')
+        Preferences.setBooleanPref('homepage_is_newtabpage', false);
+    },
+
+    /**
+     * Event listener called when any homepage-related preferences change.
+     * @private
+     */
+    onHomePagePrefChanged_: function(event) {
+      switch (event.type) {
+        case 'homepage':
+          this.getHomePageOption_('url').textContent = event.value['value'];
+          break;
+        case 'browser.show_home_button':
+          this.showHomeButton_ = event.value['value'];
+          break;
+        case 'homepage_is_newtabpage':
+          this.homePageIsNtp_ = event.value['value'];
+          break;
+        default:
+          console.error('Unexpected pref change event:', event.type);
+      }
+      this.updateHomePageSelector();
+    },
+
+    /**
+     * Updates the homepage <select> element to have the appropriate option
+     * selected.
+     */
+    updateHomePageSelector: function() {
+      if (this.showHomeButton_) {
+        if (this.homePageIsNtp_)
+          this.selectHomePageOption_('ntp');
+        else
+          this.selectHomePageOption_('url');
+      } else {
+        this.selectHomePageOption_('none');
+      }
+    },
+
+    /**
+     * Sets the home page selector to the 'url' option.Called when user clicks
+     * OK in the "Choose another..." dialog.
+     */
+    homePageSelectUrl: function() {
+      this.selectHomePageOption_('url');
     },
 
     /**
@@ -404,34 +491,6 @@ cr.define('options', function() {
     },
 
     /**
-     * Returns true if the custom startup page control block should
-     * be enabled.
-     * @returns {boolean} Whether the startup page controls should be
-     *     enabled.
-     */
-    shouldEnableCustomStartupPageControls: function(pages) {
-      return $('startupShowPagesButton').checked &&
-          !this.startup_pages_pref_.disabled;
-    },
-
-    /**
-     * Sets the enabled state of the custom startup page list controls
-     * based on the current startup radio button selection.
-     * @private
-     */
-    updateCustomStartupPageControlStates_: function() {
-      var disable = !this.shouldEnableCustomStartupPageControls();
-      var startupPagesList = $('startupPagesList');
-      startupPagesList.disabled = disable;
-      startupPagesList.setAttribute('tabindex', disable ? -1 : 0);
-      // Explicitly set disabled state for input text elements.
-      var inputs = startupPagesList.querySelectorAll("input[type='text']");
-      for (var i = 0; i < inputs.length; i++)
-        inputs[i].disabled = disable;
-      $('startupUseCurrentButton').disabled = disable;
-    },
-
-    /**
      * Set the default search engine based on the popup selection.
      * @private
      */
@@ -587,7 +646,6 @@ cr.define('options', function() {
     'setThemesResetButtonEnabled',
     'updateAccountPicture',
     'updateAutocompleteSuggestions',
-    'updateHomePageLabel',
     'updateSearchEngines',
     'updateStartupPages',
   ].forEach(function(name) {