DOMUI: Revert back to v1 sync UI.

Implementing the new Sync Setup flow will require a major refactor that is too
large for M10.

BUG=61006,69110
TEST=none

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

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

chrome/browser/dom_ui/options/personal_options_handler.cc

@@ -58,6 +58,8 @@ void PersonalOptionsHandler::GetLocalizedValues(
   localized_strings->SetString("syncSection",
       dom_options_util::StripColon(
           l10n_util::GetStringUTF16(IDS_SYNC_OPTIONS_GROUP_NAME)));
+  localized_strings->SetString("customizeSync",
+      l10n_util::GetStringUTF16(IDS_SYNC_CUSTOMIZE_BUTTON_LABEL));
   localized_strings->SetString("privacyDashboardLink",
       l10n_util::GetStringUTF16(IDS_SYNC_PRIVACY_DASHBOARD_LINK_LABEL));
 
@@ -156,6 +158,9 @@ void PersonalOptionsHandler::RegisterMessages() {
   dom_ui_->RegisterMessageCallback(
       "showSyncLoginDialog",
       NewCallback(this, &PersonalOptionsHandler::ShowSyncLoginDialog));
+  dom_ui_->RegisterMessageCallback(
+      "showCustomizeSyncDialog",
+      NewCallback(this, &PersonalOptionsHandler::ShowCustomizeSyncDialog));
   dom_ui_->RegisterMessageCallback(
       "themesReset",
       NewCallback(this, &PersonalOptionsHandler::ThemesReset));
@@ -324,6 +329,12 @@ void PersonalOptionsHandler::ShowSyncLoginDialog(const ListValue* args) {
 #endif
 }
 
+void PersonalOptionsHandler::ShowCustomizeSyncDialog(const ListValue* args) {
+  ProfileSyncService* service = dom_ui_->GetProfile()->GetProfileSyncService();
+  DCHECK(service);
+  service->ShowConfigure(NULL);
+}
+
 void PersonalOptionsHandler::ThemesReset(const ListValue* args) {
   UserMetricsRecordAction(UserMetricsAction("Options_ThemesReset"));
   dom_ui_->GetProfile()->ClearTheme();

chrome/browser/dom_ui/options/personal_options_handler.h

@@ -42,6 +42,7 @@ class PersonalOptionsHandler : public OptionsPageUIHandler,
  private:
   void ObserveThemeChanged();
   void ShowSyncLoginDialog(const ListValue* args);
+  void ShowCustomizeSyncDialog(const ListValue* args);
   void ThemesReset(const ListValue* args);
 #if defined(TOOLKIT_GTK)
   void ThemesSetGTK(const ListValue* args);

chrome/browser/resources/options/personal_options.css

@@ -5,6 +5,15 @@
   height: 70px;
 }
 
+#sync-buttons {
+  margin: 10px 0;
+}
+
+#start-stop-sync {
+  margin-left: 0;
+  margin-right: 5px;
+}
+
 .sync-error {
   background-color: #FF9A9A;
 }

chrome/browser/resources/options/personal_options.html

@@ -26,77 +26,11 @@
   <section id="sync-section">
     <h3 i18n-content="syncSection"></h3>
     <div>
-      <select id="sync-select" pref="sync.keep_everything_synced"
-          i18n-options="syncSelectList" dataType="boolean"></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>
+      <div id="sync-buttons">
         <button id="start-stop-sync"></button>
+        <button id="customize-sync" i18n-content="customizeSync"></button>
       </div>
       <a href="https://www.google.com/dashboard" id="privacy-dashboard-link"
           i18n-content="privacyDashboardLink" target="_blank"></a>

chrome/browser/resources/options/personal_options.js

@@ -40,6 +40,9 @@ cr.define('options', function() {
         else
           chrome.send('showSyncLoginDialog');
       };
+      $('customize-sync').onclick = function(event) {
+        chrome.send('showCustomizeSyncDialog');
+      };
       $('privacy-dashboard-link').onclick = function(event) {
         chrome.send('openPrivacyDashboardTabAndActivate');
       };
@@ -58,20 +61,6 @@ cr.define('options', function() {
         chrome.send('themesReset');
       };
 
-      // Initialize sync select control.
-      $('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');
@@ -92,35 +81,6 @@ cr.define('options', function() {
         $('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) {
-        // 'Choose what to sync.'
-        for (var i = 0; i < syncCheckboxes.length; i++) {
-          syncCheckboxes[i].disabled = false;
-        }
-      } else if (idx == 1) {
-        // 'Everything' is synced.
-        for (var i = 0; i < syncCheckboxes.length; i++) {
-          if (!syncCheckboxes[i].checked) {
-            syncCheckboxes[i].checked = true;
-
-            // Merely setting checked = true is not enough to trigger the pref
-            // being set; thus, we dispatch a change event to notify
-            // PrefCheckbox |checked| has changed.
-            cr.dispatchSimpleEvent(syncCheckboxes[i], 'change');
-          }
-
-          syncCheckboxes[i].disabled = true;
-        }
-      }
-    },
-
     showStopSyncingOverlay_: function(event) {
       AlertOverlay.show(localStrings.getString('stop_syncing_title'),
                         localStrings.getString('stop_syncing_explanation'),
@@ -147,6 +107,7 @@ cr.define('options', function() {
 
     setSyncSetupCompleted_: function(completed) {
       this.syncSetupCompleted = completed;
+      this.setElementVisible_($('customize-sync'), completed);
     },
 
     setAccountPicture_: function(image) {