[SyncSetup]: Change Sync everything to a radio behaviour.

As part of friendly settings, this CL implements changing |sync
everything| from check box to radio button. The motivation behind this
work is to clarify to users the difference between |Sync everything|
checked and |Sync everything| unchecked but all single data types
checked.

Bug: 1043122
Change-Id: I579b8173a7b32f1416a3b1eda999196d177a2b5c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2007730
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#733286}

chrome/app/settings_strings.grdp

@@ -4402,6 +4402,21 @@
   </message>
   <message name="IDS_SETTINGS_SYNC_EVERYTHING_CHECKBOX_LABEL" desc="Label for the checkbox which causes all properties to be synced.">
     Sync everything
+  </message>
+   <message name="IDS_SETTINGS_SYNC_EVERYTHING" desc="Label for the radio button which causes all properties to be synced.">
+    Sync everything
+  </message>
+  <message name="IDS_SETTINGS_SYNC_EVERYTHING_HINT" desc="Hint for the radio button which causes all properties to be synced.">
+    Sync all data types including ones that might be added in the future
+  </message>
+   <message name="IDS_SETTINGS_CUSTOMIZE_SYNC" desc="Label for the radio button to customize sync data types.">
+    Customize sync
+  </message>
+  <message name="IDS_SETTINGS_CUSTOMIZE_SYNC_HINT" desc="Hint or the radio button to customize sync data types.">
+    Sync only selected data types
+  </message>
+  <message name="IDS_SETTINGS_SYNC_DATA" desc="Title for sync data types list.">
+    Sync data
   </message>
   <message name="IDS_SETTINGS_MANAGE_GOOGLE_ACCOUNT" desc="Label for the button that takes the user to the Google Account website.">
     Manage your Google Account

chrome/browser/resources/settings/people_page/sync_controls.html

@@ -22,17 +22,51 @@
       .list-item > div {
         flex: 1;
       }
+
+      cr-radio-button[name='sync-everything'] > .secondary {
+        border-bottom: var(--cr-separator-line);
+        padding-bottom: var(--cr-section-vertical-padding);
+      }
+
+      cr-radio-button[name='customize-sync'] {
+        padding-top: var(--cr-section-vertical-padding);
+      }
     </style>
-    <div class="settings-box first">
-      <div id="syncEverythingCheckboxLabel" class="start">
-        $i18n{syncEverythingCheckboxLabel}
+
+    <template is="dom-if" if="[[syncSetupFriendlySettings_]]">
+      <div id="sync-data-radio" class="settings-box first">
+        <cr-radio-group
+            selected="[[selectedSyncDataRadio_(syncPrefs)]]"
+            on-selected-changed="onSyncDataRadioSelectionChanged_">
+          <cr-radio-button name="sync-everything">
+            $i18n{syncEverythingLabel}
+            <div class="secondary">$i18n{syncEverythingHint}</div>
+          </cr-radio-button>
+          <cr-radio-button name="customize-sync">
+            $i18n{customizeSyncLabel}
+            <div class="secondary">$i18n{customizeSyncHint}</div>
+          </cr-radio-button>
+        </cr-radio-group>
       </div>
-      <cr-toggle id="syncAllDataTypesControl"
-          checked="{{syncPrefs.syncAllDataTypes}}"
-          on-change="onSyncAllDataTypesChanged_"
-          aria-labelledby="syncEverythingCheckboxLabel">
-      </cr-toggle>
-    </div>
+
+      <div class="settings-box first">
+        <h2 class="cr-title-text start">$i18n{syncData}</h2>
+      </div>
+    </template>
+
+
+    <template is="dom-if" if="[[!syncSetupFriendlySettings_]]">
+      <div class="settings-box first">
+        <div id="syncEverythingCheckboxLabel" class="start">
+          $i18n{syncEverythingCheckboxLabel}
+        </div>
+        <cr-toggle id="syncAllDataTypesControl"
+            checked="{{syncPrefs.syncAllDataTypes}}"
+            on-change="onSyncAllDataTypesChanged_"
+            aria-labelledby="syncEverythingCheckboxLabel">
+        </cr-toggle>
+      </div>
+    </template>
 
     <div class="list-frame" id="sync-data-types">
       <div class="list-item" hidden="[[!syncPrefs.appsRegistered]]">

chrome/browser/resources/settings/people_page/sync_controls.js

@@ -22,6 +22,16 @@ const SyncPrefsIndividualDataTypes = [
   'paymentsIntegrationEnabled',
 ];
 
+/**
+ * Names of the radio buttons which allow the user to choose their data sync
+ * mechanism.
+ * @enum {string}
+ */
+const RadioButtonNames = {
+  SYNC_EVERYTHING: 'sync-everything',
+  CUSTOMIZE_SYNC: 'customize-sync',
+};
+
 /**
  * @fileoverview
  * 'settings-sync-controls' contains all sync data type controls.
@@ -54,6 +64,18 @@ Polymer({
       type: Object,
       observer: 'syncStatusChanged_',
     },
+
+    /**
+     * If sync page friendly settings is enabled.
+     * @private
+     */
+    syncSetupFriendlySettings_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.valueExists('syncSetupFriendlySettings') &&
+            loadTimeData.getBoolean('syncSetupFriendlySettings');
+      }
+    },
   },
 
   /** @private {?settings.SyncBrowserProxy} */
@@ -95,6 +117,42 @@ Polymer({
     }
   },
 
+  /**
+   * Computed binding returning the selected sync data radio button.
+   * @private
+   */
+  selectedSyncDataRadio_: function() {
+    return this.syncPrefs.syncAllDataTypes ? RadioButtonNames.SYNC_EVERYTHING :
+                                             RadioButtonNames.CUSTOMIZE_SYNC;
+  },
+
+  /**
+   * Called when the sync data radio button selection changes.
+   * @param {!Event} event
+   * @private
+   */
+  onSyncDataRadioSelectionChanged_: function(event) {
+    if (event.detail.value === RadioButtonNames.SYNC_EVERYTHING) {
+      this.set('syncPrefs.syncAllDataTypes', true);
+      // Cache the previously selected preference before checking every box.
+      this.cachedSyncPrefs_ = {};
+      for (const dataType of SyncPrefsIndividualDataTypes) {
+        // These are all booleans, so this shallow copy is sufficient.
+        this.cachedSyncPrefs_[dataType] = this.syncPrefs[dataType];
+        this.set(['syncPrefs', dataType], true);
+      }
+    } else {
+      this.set('syncPrefs.syncAllDataTypes', false);
+      if (this.cachedSyncPrefs_) {
+        // Restore the previously selected preference.
+        for (const dataType of SyncPrefsIndividualDataTypes) {
+          this.set(['syncPrefs', dataType], this.cachedSyncPrefs_[dataType]);
+        }
+      }
+    }
+    this.onSingleSyncDataTypeChanged_();
+  },
+
   /**
    * Handler for when the sync all data types checkbox is changed.
    * @param {!Event} event

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -2010,6 +2010,11 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"syncTimeout", IDS_SETTINGS_SYNC_TIMEOUT},
     {"syncEverythingCheckboxLabel",
      IDS_SETTINGS_SYNC_EVERYTHING_CHECKBOX_LABEL},
+    {"syncEverythingLabel", IDS_SETTINGS_SYNC_EVERYTHING},
+    {"syncEverythingHint", IDS_SETTINGS_SYNC_EVERYTHING_HINT},
+    {"customizeSyncLabel", IDS_SETTINGS_CUSTOMIZE_SYNC},
+    {"customizeSyncHint", IDS_SETTINGS_CUSTOMIZE_SYNC_HINT},
+    {"syncData", IDS_SETTINGS_SYNC_DATA},
     {"manageGoogleAccount", IDS_SETTINGS_MANAGE_GOOGLE_ACCOUNT},
     {"appCheckboxLabel", IDS_SETTINGS_APPS_CHECKBOX_LABEL},
     {"extensionsCheckboxLabel", IDS_SETTINGS_EXTENSIONS_CHECKBOX_LABEL},

chrome/test/data/webui/settings/cr_settings_browsertest.js

@@ -512,7 +512,7 @@ CrSettingsPeoplePageSyncControlsTest.prototype = {
     '../test_browser_proxy.js',
     'sync_test_util.js',
     'test_sync_browser_proxy.js',
-    'test_util.js',
+    '../test_util.js',
     'people_page_sync_controls_test.js',
   ]),
 };

chrome/test/data/webui/settings/people_page_sync_controls_test.js

@@ -27,7 +27,8 @@ cr.define('settings_people_page_sync_controls', function() {
     });
 
     test('SettingIndividualDatatypes', function() {
-      const syncAllDataTypesControl = syncControls.$.syncAllDataTypesControl;
+      const syncAllDataTypesControl =
+          syncControls.$$('#syncAllDataTypesControl');
       assertFalse(syncAllDataTypesControl.disabled);
       assertTrue(syncAllDataTypesControl.checked);
 
@@ -165,4 +166,82 @@ cr.define('settings_people_page_sync_controls', function() {
           settings.Router.getInstance().getCurrentRoute());
     });
   });
+
+  // TODO(msalama): Merge |SyncControlsFriendlySettingsOnTest| and
+  // |SyncControlsTest| once |syncSetupFriendlySettings| is enabled 100%.
+  suite('SyncControlsFriendlySettingsOnTest', function() {
+    let syncControls = null;
+    let browserProxy = null;
+    let syncEverything = null;
+    let customizeSync = null;
+
+    suiteSetup(function() {
+      loadTimeData.overrideValues({
+        syncSetupFriendlySettings: true,
+      });
+    });
+
+    setup(function() {
+      browserProxy = new TestSyncBrowserProxy();
+      settings.SyncBrowserProxyImpl.instance_ = browserProxy;
+
+      PolymerTest.clearBody();
+      syncControls = document.createElement('settings-sync-controls');
+      document.body.appendChild(syncControls);
+
+      // Start with Sync All.
+      cr.webUIListenerCallback(
+          'sync-prefs-changed', sync_test_util.getSyncAllPrefs());
+      Polymer.dom.flush();
+
+      return test_util.waitBeforeNextRender().then(() => {
+        syncEverything =
+            syncControls.$$('cr-radio-button[name="sync-everything"]');
+        customizeSync =
+            syncControls.$$('cr-radio-button[name="customize-sync"]');
+        assertTrue(!!syncEverything);
+        assertTrue(!!customizeSync);
+      });
+    });
+
+    teardown(function() {
+      syncControls.remove();
+    });
+
+    test('SettingIndividualDatatypes', function() {
+      assertTrue(syncEverything.checked);
+      assertFalse(customizeSync.checked);
+      assertEquals(syncControls.$$('#syncAllDataTypesControl'), null);
+
+      // Assert that all the individual datatype controls are disabled.
+      const datatypeControls = syncControls.shadowRoot.querySelectorAll(
+          '.list-item:not([hidden]) > cr-toggle');
+
+      for (const control of datatypeControls) {
+        assertTrue(control.disabled);
+        assertTrue(control.checked);
+      }
+
+      customizeSync.click();
+      Polymer.dom.flush();
+      assertFalse(syncEverything.checked);
+      assertTrue(customizeSync.checked);
+
+      function verifyPrefs(prefs) {
+        const expected = sync_test_util.getSyncAllPrefs();
+        expected.syncAllDataTypes = false;
+        assertEquals(JSON.stringify(expected), JSON.stringify(prefs));
+
+        cr.webUIListenerCallback('sync-prefs-changed', expected);
+
+        // Assert that all the individual datatype controls are enabled.
+        for (const control of datatypeControls) {
+          assertFalse(control.disabled);
+          assertTrue(control.checked);
+        }
+        browserProxy.resetResolver('setSyncDatatypes');
+      }
+      return browserProxy.whenCalled('setSyncDatatypes').then(verifyPrefs);
+    });
+  });
 });