[unified-consent] Add sync-disabled UI to settings

When unified consent is enabled and sync is disabled for
the signed-in user, the settings people page and the
sync setup page should show the sync-disabled UI.

Mocks:
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZWnUS9sdsb0Q/files/MCHtA7U1iMGr60tih5X-IsS0IMOULEjJwZM

Bug: 824546, 811769
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: If941f3432081af54baf1c040315fa055010aaa77
Reviewed-on: https://chromium-review.googlesource.com/1087463
Commit-Queue: Thomas Tangl <tangltom@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#571870}

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

@@ -79,10 +79,14 @@
         background: var(--settings-error-color);
       }
 
-      #sync-icon-container.sync-disabled {
+      #sync-icon-container.sync-paused {
         background: var(--google-blue-500);
       }
 
+      #sync-icon-container.sync-disabled {
+        background: var(--google-grey-400);
+      }
+
       #sync-icon-container iron-icon {
         fill: white;
         height: 12px;
@@ -155,26 +159,27 @@
           <img class="account-icon" alt=""
               src="[[getAccountImageSrc_(shownAccount_.avatarImage)]]">
           <div id="sync-icon-container" hidden="[[!syncStatus.signedIn]]"
-              class$="[[getSyncIcon_(
-                  syncStatus.hasError, syncStatus.statusAction)]]">
+              class$="[[getSyncIconStyle_(
+                  syncStatus.hasError, syncStatus.statusAction,
+                  syncStatus.disabled)]]">
             <iron-icon icon$="settings:[[getSyncIcon_(
-                syncStatus.hasError, syncStatus.statusAction)]]"></iron-icon>
+                syncStatus.hasError, syncStatus.statusAction,
+                syncStatus.disabled)]]"></iron-icon>
           </div>
         </div>
         <div class="middle two-line no-min-width">
           <div class="flex text-elide" id="user-info">
-            <span hidden="[[syncStatus.hasError]]">
-              [[shownAccount_.fullName]]
-            </span>
-            <span hidden="[[!syncStatus.hasError]]">
-              [[getErrorLabel_('$i18nPolymer{syncNotWorking}',
-                  '$i18nPolymer{syncPaused}', syncStatus.hasError,
-                  syncStatus.statusAction)]]
+            <span>
+              [[getAvatarRowTitle_(shownAccount_.fullName,
+                  '$i18nPolymer{syncNotWorking}', '$i18nPolymer{syncPaused}',
+                  '$i18nPolymer{syncDisabled}', syncStatus.hasError,
+                  syncStatus.statusAction, syncStatus.disabled)]]
             </span>
             <div class="secondary">
               [[getAccountLabel_(
                   '$i18nPolymer{syncingTo}', shownAccount_.email,
-                  syncStatus.hasError, syncStatus.signedIn)]]
+                  syncStatus.hasError, syncStatus.signedIn,
+                  syncStatus.disabled)]]
             </div>
           </div>
         </div>

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

@@ -187,7 +187,8 @@ Polymer({
    * @private
    */
   getAccountLabel_: function(label, account) {
-    return this.syncStatus.signedIn && !this.syncStatus.hasError ?
+    return this.syncStatus.signedIn && !this.syncStatus.hasError &&
+            !this.syncStatus.disabled ?
         loadTimeData.substituteString(label, account) :
         account;
   },
@@ -203,21 +204,53 @@ Polymer({
   },
 
   /**
-   * Returned value must match one of iron-icon's settings:(*) icon name.
+   * Returns the class of the sync icon.
    * @return {string}
    * @private
    */
-  getSyncIcon_: function() {
+  getSyncIconStyle_: function() {
     if (this.syncStatus.hasError) {
       return this.syncStatus.statusAction ==
               settings.StatusAction.REAUTHENTICATE ?
-          'sync-disabled' :
+          'sync-paused' :
           'sync-problem';
     }
-
+    if (!!this.syncStatus.disabled)
+      return 'sync-disabled';
     return 'sync';
   },
 
+  /**
+   * Returned value must match one of iron-icon's settings:(*) icon name.
+   * @return {string}
+   * @private
+   */
+  getSyncIcon_: function() {
+    switch (this.getSyncIconStyle_()) {
+      case 'sync-problem':
+        return 'sync-problem';
+      case 'sync-paused':
+        return 'sync-disabled';
+      default:
+        return 'sync';
+    }
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getAvatarRowTitle_: function(
+      accountName, syncErrorLabel, authErrorLabel, disabledLabel) {
+    if (!!this.syncStatus.disabled)
+      return disabledLabel;
+
+    if (this.syncStatus.hasError)
+      return this.getErrorLabel_(syncErrorLabel, authErrorLabel);
+
+    return accountName;
+  },
+
   /**
    * @param {!Array<!settings.StoredAccount>} accounts
    * @private

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

@@ -20,6 +20,7 @@ settings.StoredAccount;
 
 /**
  * @typedef {{childUser: (boolean|undefined),
+ *            disabled: (boolean|undefined),
  *            domain: (string|undefined),
  *            hasError: (boolean|undefined),
  *            hasUnrecoverableError: (boolean|undefined),

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

@@ -95,12 +95,14 @@
           in the C++ code after a change in the pref is observed. -->
     <settings-toggle-button class="first" pref="{{prefs.unified_consent_given}}"
         label="$i18n{syncUnifiedConsentToggleTitle}"
-        hidden="[[!unifiedConsentEnabled]]">
+        hidden="[[!shouldShowSyncControls_(unifiedConsentEnabled,
+                   syncStatus.disabled)]]">
     </settings-toggle-button>
     <div class="settings-box two-line" id="sync-section-toggle"
         actionable$="[[!syncSectionDisabled_]]"
         on-click="toggleExpandButton_"
-        hidden="[[!unifiedConsentEnabled]]">
+        hidden="[[!shouldShowSyncControls_(unifiedConsentEnabled,
+                   syncStatus.disabled)]]">
       <div class="start">
         <div>$i18n{sync}</div>
         <div class="secondary">$i18n{syncDescription}</div>

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

@@ -134,7 +134,7 @@ Polymer({
       type: Boolean,
       value: false,
       computed: 'computeSyncSectionDisabled_(' +
-          'unifiedConsentEnabled, syncStatus.signedIn)',
+          'unifiedConsentEnabled, syncStatus.signedIn, syncStatus.disabled)',
     },
 
     /** @private */
@@ -216,7 +216,8 @@ Polymer({
    * @private
    */
   computeSyncSectionDisabled_() {
-    return this.unifiedConsentEnabled && !this.syncStatus.signedIn;
+    return !!this.unifiedConsentEnabled &&
+        (!this.syncStatus.signedIn || !!this.syncStatus.disabled);
   },
 
   /** @protected */
@@ -575,6 +576,14 @@ Polymer({
         !!this.syncStatus.syncSystemEnabled && !!this.syncStatus.signinAllowed;
   },
   // </if>
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowSyncControls_: function() {
+    return !!this.unifiedConsentEnabled && !this.syncStatus.disabled;
+  },
 });
 
 })();

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

@@ -1625,6 +1625,7 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"syncUnifiedConsentToggleTitle",
      IDS_SETTINGS_PEOPLE_SYNC_UNIFIED_CONSENT_TOGGLE_TITLE},
     {"syncOverview", IDS_SETTINGS_SYNC_OVERVIEW},
+    {"syncDisabled", IDS_PROFILES_DICE_SYNC_DISABLED_TITLE},
     {"syncDisabledByAdministrator",
      IDS_SETTINGS_SYNC_DISABLED_BY_ADMINISTRATOR},
     {"syncSignin", IDS_SETTINGS_SYNC_SIGNIN},

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

@@ -615,10 +615,12 @@ void PeopleHandler::HandleShowSetupUI(const base::ListValue* args) {
 
   ProfileSyncService* service = GetSyncService();
 
-  // Just let the page open for now, even when the user's not signed in.
+  // Just let the page open for now, even when the user's not signed in or sync
+  // is disabled.
   // TODO(scottchen): finish the UI for signed-out users
   //    (https://crbug.com/800972).
-  if (IsUnifiedConsentEnabled(profile_) && IsProfileAuthNeededOrHasErrors()) {
+  if (IsUnifiedConsentEnabled(profile_) &&
+      (IsProfileAuthNeededOrHasErrors() || !service)) {
     if (service && !sync_blocker_)
       sync_blocker_ = service->GetSetupInProgressHandle();
 
@@ -912,6 +914,11 @@ PeopleHandler::GetSyncStatusDictionary() {
   sync_status->SetString("statusAction", GetSyncErrorAction(action_type));
 
   sync_status->SetBoolean("managed", disallowed_by_policy);
+  sync_status->SetBoolean(
+      "disabled",
+      !service || disallowed_by_policy ||
+          service->HasDisableReason(
+              syncer::SyncService::DISABLE_REASON_PLATFORM_OVERRIDE));
   sync_status->SetBoolean("signedIn", signin->IsAuthenticated());
   sync_status->SetString("signedInUsername",
                          signin_ui_util::GetAuthenticatedUsername(signin));

chrome/test/data/webui/settings/a11y/sign_out_a11y_test.js

@@ -67,6 +67,7 @@ AccessibilityTest.define('SettingsA11ySignOut', {
         signedIn: false,
         signinAllowed: true,
         syncSystemEnabled: true,
+        disabled: false,
       });
     }
   },
@@ -85,6 +86,7 @@ AccessibilityTest.define('SettingsA11ySignOut', {
             signedInUsername: 'bar@bar.com',
             statusAction: settings.StatusAction.NO_ACTION,
             hasError: false,
+            disabled: false,
           };
           disconnectButton = syncAccountControl.$$('#turn-off');
         } else {

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

@@ -131,7 +131,7 @@ cr.define('settings_people_page_sync_page', function() {
       // When unified-consent is disabled and signed in, sync-section should be
       // visible and open by default. Accordion toggle row should not be present
       // and bottom items should not have classes used for indentation.
-      syncPage.syncStatus = {signedIn: true};
+      syncPage.syncStatus = {signedIn: true, disabled: false};
       syncPage.unifiedConsentEnabled = false;
       Polymer.dom.flush();
       assertTrue(ironCollapse.opened);
@@ -150,7 +150,7 @@ cr.define('settings_people_page_sync_page', function() {
       // When unified-consent is enabled and signed in, sync-section should be
       // visible and open by default. Accordion toggle row should be present,
       // and bottom items should have classes used for indentation.
-      syncPage.syncStatus = {signedIn: true};
+      syncPage.syncStatus = {signedIn: true, disabled: false};
       syncPage.unifiedConsentEnabled = true;
       Polymer.dom.flush();
       assertTrue(ironCollapse.opened);
@@ -181,7 +181,7 @@ cr.define('settings_people_page_sync_page', function() {
 
       // When unified-consent is enabled and signed out, sync-section should be
       // hidden, and the accordion toggle row should be visible not actionable.
-      syncPage.syncStatus = {signedIn: false};
+      syncPage.syncStatus = {signedIn: false, disabled: false};
       syncPage.unifiedConsentEnabled = true;
       Polymer.dom.flush();
       assertTrue(ironCollapse.hidden);
@@ -191,6 +191,19 @@ cr.define('settings_people_page_sync_page', function() {
       assertTrue(expandIcon.disabled);
     });
 
+    test('SyncSectionLayout_UnifiedConsentEnabled_SyncDisabled', function() {
+      const ironCollapse = syncPage.$$('#sync-section');
+      const syncSectionToggle = syncPage.$$('#sync-section-toggle');
+
+      // When unified-consent is enabled and sync is disabled, the sync-section
+      // should be hidden.
+      syncPage.syncStatus = {signedIn: false, disabled: true};
+      syncPage.unifiedConsentEnabled = true;
+      Polymer.dom.flush();
+      assertTrue(ironCollapse.hidden);
+      assertTrue(syncSectionToggle.hidden);
+    });
+
     test('LoadingAndTimeout', function() {
       const configurePage = syncPage.$$('#' + settings.PageStatus.CONFIGURE);
       const spinnerPage = syncPage.$$('#' + settings.PageStatus.SPINNER);

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

@@ -106,6 +106,7 @@ cr.define('settings_sync_account_control', function() {
         signedInUsername: '',
         statusAction: settings.StatusAction.NO_ACTION,
         hasError: false,
+        disabled: false,
       };
       sync_test_util.simulateStoredAccounts([
         {
@@ -201,6 +202,7 @@ cr.define('settings_sync_account_control', function() {
         signedInUsername: 'bar@bar.com',
         statusAction: settings.StatusAction.NO_ACTION,
         hasError: false,
+        disabled: false,
       };
       sync_test_util.simulateStoredAccounts([
         {
@@ -241,6 +243,7 @@ cr.define('settings_sync_account_control', function() {
         signedInUsername: 'bar@bar.com',
         hasError: true,
         statusAction: settings.StatusAction.CONFIRM_SYNC_SETTINGS,
+        disabled: false,
       };
       assertTrue(testElement.$$('#sync-icon-container')
                      .classList.contains('sync-problem'));
@@ -256,14 +259,31 @@ cr.define('settings_sync_account_control', function() {
         signedInUsername: 'bar@bar.com',
         hasError: true,
         statusAction: settings.StatusAction.REAUTHENTICATE,
+        disabled: false,
       };
       assertTrue(testElement.$$('#sync-icon-container')
-                     .classList.contains('sync-disabled'));
+                     .classList.contains('sync-paused'));
       assertTrue(!!testElement.$$('[icon=\'settings:sync-disabled\']'));
       displayedText = userInfo.querySelector('span:not([hidden])').textContent;
       assertFalse(displayedText.includes('barName'));
       assertFalse(displayedText.includes('fooName'));
       assertTrue(displayedText.includes('Sync is paused'));
+
+      testElement.syncStatus = {
+        signedIn: true,
+        signedInUsername: 'bar@bar.com',
+        statusAction: settings.StatusAction.NO_ACTION,
+        hasError: false,
+        disabled: true,
+      };
+
+      assertTrue(testElement.$$('#sync-icon-container')
+                     .classList.contains('sync-disabled'));
+      assertTrue(!!testElement.$$('[icon=\'settings:sync\']'));
+      displayedText = userInfo.querySelector('span:not([hidden])').textContent;
+      assertFalse(displayedText.includes('barName'));
+      assertFalse(displayedText.includes('fooName'));
+      assertTrue(displayedText.includes('Sync disabled'));
     });
 
     test('embedded in another page', function() {
@@ -277,6 +297,7 @@ cr.define('settings_sync_account_control', function() {
         signedInUsername: 'bar@bar.com',
         statusAction: settings.StatusAction.NO_ACTION,
         hasError: false,
+        disabled: false,
       };
 
       assertVisible(testElement.$$('#turn-off'), false);