Add first batch of controlled setting indicators

chrome/browser/resources/options/home_page_overlay.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 */ var OptionsPage = options.OptionsPage;
   /** @const */ var SettingsDialog = options.SettingsDialog;
 
   /**
    * HomePageOverlay class
@@ skipping 20 matching lines @@
     autocompleteList_: null,
 
     /**
      * Initialize the page.
      */
     initializePage: function() {
       // Call base class implementation to start preference initialization.
       SettingsDialog.prototype.initializePage.call(this);
 
       var self = this;
-      $('homepage-use-ntp').onchange = this.updateHomePageInput_.bind(this);
-      $('homepage-use-url').onchange = this.updateHomePageInput_.bind(this);
+      options.Preferences.getInstance().addEventListener(
+          'homepage_is_newtabpage',
+          this.handleHomepageIsNTPPrefChange.bind(this));
 
       var urlField = $('homepage-url-field');
       urlField.addEventListener('keydown', function(event) {
         // Focus the 'OK' button when the user hits enter since people expect
         // feedback indicating that they are done editing.
         if (event.keyIdentifier == 'Enter' && self.autocompleteList_.hidden)
           $('home-page-confirm').focus();
       });
       urlField.addEventListener('change', this.updateFavicon_.bind(this));
 
@@ skipping 13 matching lines @@
 
       // Text fields may change widths when the window changes size, so make
       // sure the suggestion list stays in sync.
       window.addEventListener('resize', function() {
         self.autocompleteList_.syncWidthToInput();
       });
     },
 
     /** @inheritDoc */
     didShowPage: function() {
-      this.updateHomePageInput_();
       this.updateFavicon_();
     },
 
     /**
-     * Updates the state of the homepage text input. The input is enabled only
-     * if the |homepage-use-url| radio button is checked.
-     * @private
+     * Updates the state of the homepage text input and its controlled setting
+     * indicator when the |homepage_is_newtabpage| pref changes. The input is
+     * enabled only if the homepage is not the NTP. The indicator is always
+     * enabled but treats the input's value as read-only if the homepage is the
+     * NTP.
+     * @param {Event} Pref change event.
      */
-    updateHomePageInput_: function() {
+    handleHomepageIsNTPPrefChange: function(event) {
       var urlField = $('homepage-url-field');
-      var homePageUseURL = $('homepage-use-url');
-      urlField.setDisabled('radio-choice', !homePageUseURL.checked);
+      var urlFieldIndicator = $('homepage-url-field-indicator');
+      urlField.setDisabled('homepage-is-ntp', event.value.value);
+      urlFieldIndicator.readOnly = event.value.value;
     },
 
     /**
      * Updates the background of the url field to show the favicon for the
      * URL that is currently typed in.
      * @private
      */
     updateFavicon_: function() {
       var urlField = $('homepage-url-field');
       urlField.style.backgroundImage = url('chrome://favicon/' +
@@ skipping 50 matching lines @@
   HomePageOverlay.updateAutocompleteSuggestions = function() {
     var instance = HomePageOverlay.getInstance();
     instance.updateAutocompleteSuggestions_.apply(instance, arguments);
   };
 
   // Export
   return {
     HomePageOverlay: HomePageOverlay
   };
 });