[uber] Redoing the homepage selection UI

chrome/browser/resources/options2/browser_options.js

 // 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.
 
 cr.define('options', function() {
   const OptionsPage = options.OptionsPage;
   const ArrayDataModel = cr.ui.ArrayDataModel;
   const RepeatingButton = cr.ui.RepeatingButton;
 
   //
@@ skipping 10 matching lines @@
 
   BrowserOptions.prototype = {
     // Inherit BrowserOptions from OptionsPage.
     __proto__: options.OptionsPage.prototype,
 
     // State variables.
     syncEnabled: false,
     syncSetupCompleted: false,
 
     /**
-     * An autocomplete list that can be attached to the homepage URL text field
+     * The value attribute of the most recently selected option in the home page
+     * selector.
+     * @type {string} (One of: 'none', 'ntp', 'url')
+     */
+    previousHomePageSelection_: null,
+
+    showHomeButton_: false,
+    homePageIsNtp_: false,
+
+    /**
+     * An autocomplete list that can be attached to the home page URL text field
      * during editing.
      * @type {HTMLElement}
      * @private
      */
     autocompleteList_: null,
 
     // The cached value of the instant.confirm_dialog_shown preference.
     instantConfirmDialogShown_: false,
 
     /**
@@ skipping 27 matching lines @@
               ['Options_InternetOptions']);
         });
       }
 
       // On Startup section.
       $('startupSetPages').addEventListener('click', function() {
         OptionsPage.navigateToPage('startup');
       });
 
       // 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'));
       });
       $('themes-reset').addEventListener('click', function(event) {
         chrome.send('themesReset');
       });
 
       // Device section (ChromeOS only).
       if (cr.isChromeOS) {
         $('keyboard-settings-button').addEventListener('click', function(evt) {
@@ skipping 215 matching lines @@
     /**
      * Get the start/stop sync button DOM element.
      * @return {DOMElement} The start/stop sync button.
      * @private
      */
     getStartStopSyncButton_: function() {
       return $('start-stop-sync');
     },
 
     /**
-     * Sets the label for the 'Show Home page' input.
-     * @param {string} label The HTML of the input label.
-     * @private
+     * Returns the <option> element with the given |value|.
+     * @param {string} value One of 'none', 'ntp', 'url', 'choose'.
+     * @return {HTMLOptionElement} the specified <option> element.
      */
-    updateHomePageLabel_: function(label) {
-      $('home-page-label').innerHTML = label;
+    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
+     */
+    onHomePageSelectChange_: function() {
+      var option = $('homepage-select').value;
+      if (option == 'choose') {
+        OptionsPage.navigateToPage('homePageOverlay');
+        return;
+      }
+
+      this.previousHomePageSelection_ = option;
+
+      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');
+    },
+
+    /**
      * Called when the value of the instant.confirm_dialog_shown preference
      * changes. Cache this value.
      * @param {Event} event Change event.
      * @private
      */
     onInstantConfirmDialogShownChanged_: function(event) {
       this.instantConfirmDialogShown_ = event.value['value'];
     },
 
     /**
@@ skipping 61 matching lines @@
         var option = new Option(engine['name'], engine['index']);
         if (defaultValue == option.value)
           defaultIndex = i;
         engineSelect.appendChild(option);
       }
       if (defaultIndex >= 0)
         engineSelect.selectedIndex = defaultIndex;
     },
 
     /**
-     * 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
      */
     setDefaultSearchEngine_: function() {
       var engineSelect = $('defaultSearchEngine');
       var selectedIndex = engineSelect.selectedIndex;
       if (selectedIndex >= 0) {
         var selection = engineSelect.options[selectedIndex];
         chrome.send('setDefaultSearchEngine', [String(selection.value)]);
       }
@@ skipping 135 matching lines @@
     'setStartStopButtonVisible',
     'setSyncActionLinkEnabled',
     'setSyncActionLinkLabel',
     'setSyncEnabled',
     'setSyncSetupCompleted',
     'setSyncStatus',
     'setSyncStatusErrorVisible',
     'setThemesResetButtonEnabled',
     'updateAccountPicture',
     'updateAutocompleteSuggestions',
-    'updateHomePageLabel',
     'updateSearchEngines',
     'updateStartupPages',
   ].forEach(function(name) {
     BrowserOptions[name] = function(value) {
       return BrowserOptions.getInstance()[name + '_'](value);
     };
   });
 
   BrowserOptions.updateDefaultBrowserState = function(statusString, isDefault,
                                                       canBeDefault) {
@@ skipping 14 matching lines @@
       return BrowserOptions.getInstance().username_;
     };
   }
 
   // Export
   return {
     BrowserOptions: BrowserOptions
   };
 
 });