DOMUI: Remove the sync settings overlay.

* Move the sync settings into the Personal Stuff page.
* Fix disabling input elements from JS.
* Fix handling of boolean prefs in select controls.

BUG=59279
TEST=none

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

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

10 files changed, 188 insertions, 207 deletions

diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index 2d734a9..20c6264 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -93,10 +93,8 @@ cr.define('options', function() {
         // Disable all controls under the startup section.
         var elements =
             $('startupSection').querySelectorAll('input, button, list');
-        for (var i = 0; i < elements.length; i++) {
+        for (var i = 0; i < elements.length; i++)
           elements[i].disabled = true;
-          elements[i].manually_disabled = true;
-        }
       } else {
         // Initialize control enabled states.
         Preferences.getInstance().addEventListener('session.restore_on_startup',
diff --git a/chrome/browser/resources/options/chromeos_system_options.js b/chrome/browser/resources/options/chromeos_system_options.js
index 2098303..fa69ad4 100644
--- a/chrome/browser/resources/options/chromeos_system_options.js
+++ b/chrome/browser/resources/options/chromeos_system_options.js
@@ -32,13 +32,11 @@ cr.define('options', function() {
       var timezone = $('timezone-select');
       if (timezone) {
         timezone.initializeValues(templateData.timezoneList);
+
         // Disable the timezone setting for non-owners, as this is a
         // system wide setting.
-        if (!AccountsOptions.currentUserIsOwner()) {
+        if (!AccountsOptions.currentUserIsOwner())
           timezone.disabled = true;
-          // Mark that this is manually disabled. See also pref_ui.js.
-          timezone.manually_disabled = true;
-        }
       }
 
       $('language-button').onclick = function(event) {
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 95935fd..568ac09 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -127,7 +127,6 @@
 <script src="search_engine_manager_engine_list.js"></script>
 <script src="search_page.js"></script>
 <script src="startup_page_manager.js"></script>
-<script src="sync_options.js"></script>
 <script src="options.js"></script>
 
 </head>
@@ -204,7 +203,6 @@
            <include src="passwords_exceptions.html">
            <include src="search_engine_manager.html">
            <include src="startup_page_manager.html">
-           <include src="sync_options.html">
          </div>
        </div>
      </div>
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index 83b8154..6bebb94 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -24,7 +24,6 @@ var ProxyOptions = options.ProxyOptions;
 var SearchEngineManager = options.SearchEngineManager;
 var SearchPage = options.SearchPage;
 var StartupPageManager = options.StartupPageManager;
-var SyncOptions = options.SyncOptions;
 
 /**
  * DOMContentLoaded handler, sets up the page.
@@ -61,8 +60,6 @@ function load() {
                               PersonalOptions.getInstance());
   OptionsPage.registerSubPage(PasswordsExceptions.getInstance(),
                               PersonalOptions.getInstance());
-  OptionsPage.registerSubPage(SyncOptions.getInstance(),
-                              PersonalOptions.getInstance());
   if (cr.isChromeOS) {
     OptionsPage.register(SystemOptions.getInstance());
     OptionsPage.registerSubPage(AboutPage.getInstance(),
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 195c18f..2e5084d 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -309,11 +309,6 @@ section > div:only-of-type {
   margin-top: 0;
 }
 
-.option-control-table, section > div:only-of-type {
-  -webkit-padding-start: 10px;
-  border-spacing: 0 0;
-}
-
 /* TODO(stuartmorgan): make this less specific once all pages
  * are converted to the non-table style.
  */
diff --git a/chrome/browser/resources/options/personal_options.html b/chrome/browser/resources/options/personal_options.html
index 202e4ba0..3fba146 100644
--- a/chrome/browser/resources/options/personal_options.html
+++ b/chrome/browser/resources/options/personal_options.html
@@ -26,11 +26,76 @@
   <section id="sync-section">
     <h3 i18n-content="syncSection"></h3>
     <div>
+      <select id="sync-select" pref="sync.keep_everything_synced"></select>
+      <table id="sync-table">
+        <tr>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="settings-check" pref="sync.preferences"
+                  type="checkbox">
+              <span i18n-content="syncsettings"></span>
+            </label>
+          </td>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="bookmarks-check" pref="sync.bookmarks" type="checkbox">
+              <span i18n-content="syncbookmarks"></span>
+            </label>
+          </td>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="extensions-check" pref="sync.extensions"
+                  type="checkbox">
+              <span i18n-content="syncextensions"></span>
+            </label>
+          </td>
+        </tr>
+        <tr>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="autofill-check" pref="sync.autofill" type="checkbox">
+              <span i18n-content="syncautofill"></span>
+            </label>
+          </td>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="themes-check" pref="sync.themes" type="checkbox">
+              <span i18n-content="syncthemes"></span>
+            </label>
+          </td>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="apps-check" pref="sync.apps" type="checkbox">
+              <span i18n-content="syncapps"></span>
+            </label>
+          </td>
+        </tr>
+        <tr>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="typedurls-check" pref="sync.typed_urls"
+                  type="checkbox">
+              <span i18n-content="synctypedurls"></span>
+            </label>
+          </td>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="passwords-check" pref="sync.passwords" type="checkbox">
+              <span i18n-content="syncpasswords"></span>
+            </label>
+          </td>
+          <td class="option-name">
+            <label class="checkbox">
+              <input id="sessions-check" pref="sync.sessions" type="checkbox">
+              <span i18n-content="syncsessions"></span>
+            </label>
+          </td>
+        </tr>
+      </table>
       <div id="sync-status" class="section-text"></div>
       <button id="sync-action-link" class="link-button"></button>
       <div>
         <button id="start-stop-sync"></button>
-        <button id="customize-sync""></button>
       </div>
       <a href="https://www.google.com/dashboard" id="privacy-dashboard-link"
           i18n-content="privacyDashboardLink" target="_blank"></a>
diff --git a/chrome/browser/resources/options/personal_options.js b/chrome/browser/resources/options/personal_options.js
index e1b8007..859636a 100644
--- a/chrome/browser/resources/options/personal_options.js
+++ b/chrome/browser/resources/options/personal_options.js
@@ -10,10 +10,10 @@ cr.define('options', function() {
   var syncEnabled = false;
   var syncSetupCompleted = false;
 
-  //
-  // PersonalOptions class
-  // Encapsulated handling of personal options page.
-  //
+  /**
+   * Encapsulated handling of personal options page.
+   * @constructor
+   */
   function PersonalOptions() {
     OptionsPage.call(this, 'personal', templateData.personalPage,
                      'personal-page');
@@ -27,13 +27,10 @@ cr.define('options', function() {
 
     // Initialize PersonalOptions page.
     initializePage: function() {
-      // Call base class implementation to starts preference initialization.
+      // Call base class implementation to start preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
-      $('customize-sync').onclick = function(event) {
-        OptionsPage.showPageByName('sync');
-      };
       $('sync-action-link').onclick = function(event) {
         chrome.send('showSyncLoginDialog');
       };
@@ -62,6 +59,21 @@ cr.define('options', function() {
         chrome.send('themesReset');
       };
 
+      // Initialize sync select control.
+      $('sync-select').initializeValues(templateData.syncSelectList);
+      $('sync-select').onchange = function(event) {
+        self.updateSyncSelection_();
+      }
+
+      var syncCheckboxes = $('sync-table').getElementsByTagName('input');
+      for (var i = 0; i < syncCheckboxes.length; i++) {
+        if (syncCheckboxes[i].type == "checkbox") {
+          syncCheckboxes[i].onclick = function(event) {
+            chrome.send('updatePreferredDataTypes');
+          };
+        }
+      }
+
       if (!cr.isChromeOS) {
         $('import-data').onclick = function(event) {
           OptionsPage.showOverlay('importDataOverlay');
@@ -76,12 +88,32 @@ cr.define('options', function() {
       } else {
         chrome.send('loadAccountPicture');
       }
+
       // Disable the screen lock checkbox for the guest mode.
-      if (cr.commandLine.options['--bwsi']) {
-        var enableScreenLock = $('enable-screen-lock');
-        enableScreenLock.disabled = true;
-        // Mark that this is manually disabled. See also pref_ui.js.
-        enableScreenLock.manually_disabled = true;
+      if (cr.commandLine.options['--bwsi'])
+        $('enable-screen-lock').disabled = true;
+    },
+
+    /**
+     * Updates the sync datatype checkboxes based on the selected sync option.
+     * @private
+     */
+    updateSyncSelection_: function() {
+      var idx = $('sync-select').selectedIndex;
+      var syncCheckboxes = $('sync-table').getElementsByTagName('input');
+      if (idx == 0) {
+        for (var i = 0; i < syncCheckboxes.length; i++) {
+          syncCheckboxes[i].disabled = false;
+        }
+      } else if (idx == 1) {
+        for (var i = 0; i < syncCheckboxes.length; i++) {
+          // Merely setting checked = true is not enough to trigger the pref
+          // being set; thus, we simulate the click.
+          if (!syncCheckboxes[i].checked)
+            syncCheckboxes[i].click();
+
+          syncCheckboxes[i].disabled = true;
+        }
       }
     },
 
@@ -153,18 +185,6 @@ cr.define('options', function() {
       $('start-stop-sync').textContent = label;
     },
 
-    setCustomizeButtonVisible_: function(visible) {
-      this.setElementVisible_($('customize-sync'), visible);
-    },
-
-    setCustomizeButtonEnabled_: function(enabled) {
-      $('customize-sync').disabled = !enabled;
-    },
-
-    setCustomizeButtonLabel_: function(label) {
-      $('customize-sync').textContent = label;
-    },
-
     setGtkThemeButtonEnabled_: function(enabled) {
       if (!cr.isChromeOS && navigator.platform.match(/linux|BSD/i)) {
         $('themes-GTK-button').disabled = !enabled;
@@ -178,6 +198,24 @@ cr.define('options', function() {
     hideSyncSection_: function() {
       this.setElementVisible_($('sync-section'), false);
     },
+
+    /**
+     * Toggles the visibility of the data type checkboxes based on whether they
+     * are enabled on not.
+     * @param {Object} dict A mapping from data type to a boolean indicating
+     *     whether it is enabled.
+     * @private
+     */
+    setRegisteredDataTypes_: function(dict) {
+      for (var type in dict) {
+        if (type.match(/Registered$/) && !dict[type]) {
+          node = $(type.replace(/([a-z]+)Registered$/i, '$1').toLowerCase()
+                   + '-check');
+          if (node)
+            node.parentNode.style.display = 'none';
+        }
+      }
+    },
   };
 
   // Forward public APIs to private implementations.
@@ -193,12 +231,10 @@ cr.define('options', function() {
     'setStartStopButtonVisible',
     'setStartStopButtonEnabled',
     'setStartStopButtonLabel',
-    'setCustomizeButtonVisible',
-    'setCustomizeButtonEnabled',
-    'setCustomizeButtonLabel',
     'setGtkThemeButtonEnabled',
     'setThemesResetButtonEnabled',
     'hideSyncSection',
+    'setRegisteredDataTypes',
   ].forEach(function(name) {
     PersonalOptions[name] = function(value) {
       PersonalOptions.getInstance()[name + '_'](value);
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index 19b101c..6372776 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -7,6 +7,7 @@ cr.define('options', function() {
   var Preferences = options.Preferences;
   /////////////////////////////////////////////////////////////////////////////
   // PrefCheckbox class:
+  // TODO(jhawkins): Refactor all this copy-pasted code!
 
   // Define a constructor that uses an input element as its underlying element.
   var PrefCheckbox = cr.ui.define('input');
@@ -25,27 +26,31 @@ cr.define('options', function() {
       self.initializeValueType(self.getAttribute('value-type'));
 
       // Listen to pref changes.
-      Preferences.getInstance().addEventListener(this.pref,
+      Preferences.getInstance().addEventListener(
+          this.pref,
           function(event) {
             var value = event.value && event.value['value'] != undefined ?
                 event.value['value'] : event.value;
+
             // Invert pref value if inverted_pref == true.
             if (self.inverted_pref)
               self.checked = !Boolean(value);
             else
               self.checked = Boolean(value);
+
             self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
-            self.disabled = self.managed;
-            // Honor manually_disabled property, so options pages can
-            // disable preferences manually when needed.
-            if (self.manually_disabled) {
+
+            // Managed UI elements can only be disabled as a result of being
+            // managed. They cannot be enabled as a result of a pref being
+            // unmanaged.
+            if (self.managed)
               self.disabled = true;
-            }
           });
 
       // Listen to user events.
-      this.addEventListener('click',
+      this.addEventListener(
+          'click',
           function(e) {
             var value = self.inverted_pref ? !self.checked : self.checked;
             switch(self.valueType) {
@@ -113,12 +118,12 @@ cr.define('options', function() {
             self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
             self.checked = String(value) == self.value;
-            self.disabled = self.managed;
-            // Honor manually_disabled property, so options pages can
-            // disable preferences manually when needed.
-            if (self.manually_disabled) {
+
+            // Managed UI elements can only be disabled as a result of being
+            // managed. They cannot be enabled as a result of a pref being
+            // unmanaged.
+            if (self.managed)
               self.disabled = true;
-            }
           });
 
       // Listen to user events.
@@ -177,7 +182,12 @@ cr.define('options', function() {
                 event.value['value'] : event.value;
             self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
-            self.disabled = self.managed;
+
+            // Managed UI elements can only be disabled as a result of being
+            // managed. They cannot be enabled as a result of a pref being
+            // unmanaged.
+            if (self.managed)
+              self.disabled = true;
           });
 
       // Listen to user events.
@@ -293,22 +303,34 @@ cr.define('options', function() {
           function(event) {
             var value = event.value && event.value['value'] != undefined ?
                 event.value['value'] : event.value;
+
+            // Make sure |value| is a string, because the value is stored as a
+            // string in the HTMLOptionElement.
+            value = value.toString();
+
             self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
-            self.disabled = self.managed;
-            // Honor manually_disabled property, so options pages can
-            // disable preferences manually when needed.
-            if (self.manually_disabled) {
+
+            // Managed UI elements can only be disabled as a result of being
+            // managed. They cannot be enabled as a result of a pref being
+            // unmanaged.
+            if (self.managed)
               self.disabled = true;
-            }
+
+            var found = false;
             for (var i = 0; i < self.options.length; i++) {
               if (self.options[i].value == value) {
                 self.selectedIndex = i;
-                return;
+                found = true;
               }
             }
+
             // Item not found, select first item.
-            self.selectedIndex = 0;
+            if (!found)
+              self.selectedIndex = 0;
+
+            if (self.onchange != undefined)
+              self.onchange(event);
           });
 
       // Listen to user events.
@@ -320,8 +342,9 @@ cr.define('options', function() {
                     self.options[self.selectedIndex].value, self.metric);
                 break;
               case 'boolean':
-                Preferences.setBooleanValue(self.pref,
-                    self.options[self.selectedIndex].value, self.metric);
+                var option = self.options[self.selectedIndex];
+                var value = (option.value == 'true') ? true : false;
+                Preferences.setBooleanPref(self.pref, value, self.metric);
                 break;
               case 'string':
                 Preferences.setStringPref(self.pref,
@@ -334,8 +357,9 @@ cr.define('options', function() {
     /**
      * Sets up options in select element.
      * @param {Array} options List of option and their display text.
-     * Each element in the array is an array of length 2 which contains options
-     * value in the first element and display text in the second element.
+     *     Each element in the array is an array of length 2 which contains
+     *     options value in the first element and display text in the second
+     *     element. May be undefined.
      *
      * TODO(zelidrag): move this to that i18n template classes.
      */
@@ -343,6 +367,7 @@ cr.define('options', function() {
       options.forEach(function (values) {
         if (this.dataType == undefined)
           this.dataType = typeof values[0];
+
         this.appendChild(new Option(values[1], values[0]));
       }, this);
     }
@@ -383,7 +408,12 @@ cr.define('options', function() {
                 event.value['value'] : event.value;
             self.managed = event.value && event.value['managed'] != undefined ?
                 event.value['managed'] : false;
-            self.disabled = self.managed;
+
+            // Managed UI elements can only be disabled as a result of being
+            // managed. They cannot be enabled as a result of a pref being
+            // unmanaged.
+            if (self.managed)
+              self.disabled = true;
           });
 
       // Listen to user events.
diff --git a/chrome/browser/resources/options/sync_options.html b/chrome/browser/resources/options/sync_options.html
deleted file mode 100644
index d2b5aea..0000000
--- a/chrome/browser/resources/options/sync_options.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<div class="page hidden" id="syncPage">
-  <h1 i18n-content="syncPage"></h1>
-  <section>
-    <h3 i18n-content="sync_title"></h3>
-    <table class="option-control-table">
-      <tr>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="settings-check" pref="sync.preferences" type="checkbox">
-            <span i18n-content="syncsettings"></span>
-          </label>
-        </td>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="bookmarks-check" pref="sync.bookmarks" type="checkbox">
-            <span i18n-content="syncbookmarks"></span>
-          </label>
-        </td>
-      </tr>
-      <tr>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="extensions-check" pref="sync.extensions" type="checkbox">
-            <span i18n-content="syncextensions"></span>
-          </label>
-        </td>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="autofill-check" pref="sync.autofill" type="checkbox">
-            <span i18n-content="syncautofill"></span>
-          </label>
-        </td>
-      </tr>
-      <tr>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="themes-check" pref="sync.themes" type="checkbox">
-            <span i18n-content="syncthemes"></span>
-          </label>
-        </td>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="apps-check" pref="sync.apps" type="checkbox">
-            <span i18n-content="syncapps"></span>
-          <label>
-        </td>
-      </tr>
-      <tr>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="typedurls-check" pref="sync.typed_urls" type="checkbox">
-            <span i18n-content="synctypedurls"></span>
-          </label>
-        </td>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="passwords-check" pref="sync.passwords" type="checkbox">
-            <span i18n-content="syncpasswords"></span>
-          </label>
-        </td>
-      </tr>
-      <tr>
-        <td class="option-name">
-          <label class="checkbox">
-            <input id="sessions-check" pref="sync.sessions" type="checkbox">
-            <span i18n-content="syncsessions"></span>
-          </label>
-        </td>
-      </tr>
-    </table>
-  </section>
-</div>
diff --git a/chrome/browser/resources/options/sync_options.js b/chrome/browser/resources/options/sync_options.js
deleted file mode 100644
index 59c3781..0000000
--- a/chrome/browser/resources/options/sync_options.js
+++ /dev/null
@@ -1,64 +0,0 @@
-// 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', function() {
-  const OptionsPage = options.OptionsPage;
-
-  /**
-   * Encapsulated handling of the sync options page.
-   * @constructor
-   */
-  function SyncOptions() {
-    OptionsPage.call(this, 'sync', templateData.syncPage, 'syncPage');
-  }
-
-  cr.addSingletonGetter(SyncOptions);
-
-  SyncOptions.prototype = {
-    __proto__: OptionsPage.prototype,
-
-    initializePage: function() {
-      OptionsPage.prototype.initializePage.call(this);
-      this.registerEventHandlers();
-    },
-
-    /**
-     * Registers event handler on all the data type checkboxes so that the set
-     * of data types to sync get updated as the user checks/unchecks them.
-     */
-     registerEventHandlers: function() {
-      checks = $('syncPage').getElementsByTagName('input');
-      for (var i = 0; i < checks.length; i++) {
-        checks[i].onclick = function(event) {
-          chrome.send('updatePreferredDataTypes');
-        };
-      }
-    }
-  };
-
-  /**
-   * Toggles the visibility of the data type checkboxes based on whether they
-   * are enabled on not.
-   * @param {Object} dict A mapping from data type to a boolean indicating
-   *     whether it is enabled.
-   */
-  SyncOptions.setRegisteredDataTypes = function(dict) {
-    for (var type in dict) {
-      if (type.match(/Registered$/) && !dict[type]) {
-        node = $(type.replace(/([a-z]+)Registered$/i, '$1').toLowerCase()
-                 + '-check');
-        if (node) {
-          node.parentNode.style.display = 'none';
-        }
-      }
-    }
-  };
-
-  // Export
-  return {
-    SyncOptions: SyncOptions
-  };
-
-});
-