[settings] Collapse/expand sections depending on unified consent and sync state

Bug: 870912
Change-Id: Ic01425317b2c363a27e2edf9b98ae8f67684cb22
Reviewed-on: https://chromium-review.googlesource.com/1230738
Commit-Queue: David Roger <droger@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593500}

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

@@ -88,6 +88,7 @@ Polymer({
     /** @type {settings.SyncStatus} */
     syncStatus: {
       type: Object,
+      observer: 'onSyncStatusChanged_',
     },
 
     /**
@@ -133,7 +134,6 @@ Polymer({
       type: Boolean,
       value: true,
       computed: 'computeSignedIn_(syncStatus.signedIn)',
-      observer: 'onSignedInChanged_',
     },
 
     /** @private */
@@ -177,6 +177,12 @@ Polymer({
     unifiedConsentEnabled: Boolean,
   },
 
+  observers: [
+    // Depends on signedIn_ so that the sync section is updated on signin
+    // changes, even though the actual value of signedIn_ is not used.
+    'onSyncSectionOpenedShouldChange_(signedIn_, syncSectionDisabled_)',
+  ],
+
   /** @private {?settings.SyncBrowserProxy} */
   browserProxy_: null,
 
@@ -192,6 +198,13 @@ Polymer({
    */
   beforeunloadCallback_: null,
 
+  /**
+   * Whether the initial layout for collapsible sections has been computed. It
+   * is computed only once, the first time the sync status is updated.
+   * @private {boolean}
+   */
+  collapsibleSectionsInitialized_: false,
+
   /**
    * Whether the user decided to abort sync.
    * @private {boolean}
@@ -276,6 +289,8 @@ Polymer({
     if (this.beforeunloadCallback_)
       return;
 
+    this.collapsibleSectionsInitialized_ = false;
+
     // Display loading page until the settings have been retrieved.
     this.pageStatus_ = settings.PageStatus.SPINNER;
 
@@ -306,8 +321,8 @@ Polymer({
    * @private
    */
   onUnifiedConsentToggleChange_: function() {
-    if(!this.$$('#unifiedConsentToggle').checked){
-      this.syncSectionOpened_ = true;
+    if (!this.$$('#unifiedConsentToggle').checked) {
+      this.syncSectionOpened_ = !this.syncSectionDisabled_;
       this.personalizeSectionOpened_ = true;
     }
   },
@@ -607,12 +622,27 @@ Polymer({
     settings.navigateTo(settings.routes.BASIC);
   },
 
+  // Computes the initial layout for the sync section and the personalize
+  // section. This function only does something on its first call.
+  onSyncStatusChanged_: function() {
+    if (!!this.syncStatus && !this.collapsibleSectionsInitialized_) {
+      this.collapsibleSectionsInitialized_ = true;
+      this.personalizeSectionOpened_ =
+          !this.$$('#unifiedConsentToggle').checked ||
+          !!this.syncStatus.setupInProgress;
+      this.syncSectionOpened_ =
+          this.personalizeSectionOpened_ && !this.syncSectionDisabled_;
+    }
+  },
+
   /**
-   * Collapses/Expands the sync section if the signedIn state has changed.
+   * Collapses the sync section if it becomes disabled, and expands it when it's
+   * re-enabled.
    * @private
    */
-  onSignedInChanged_: function() {
-    this.syncSectionOpened_ = !!this.signedIn_;
+  onSyncSectionOpenedShouldChange_: function() {
+    this.syncSectionOpened_ =
+        !this.syncSectionDisabled_ && !this.$$('#unifiedConsentToggle').checked;
   },
 
   /**

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

@@ -74,6 +74,40 @@ cr.define('settings_people_page_sync_page', function() {
       syncAllDataTypesControl.click();
     }
 
+    // Tests the initial layout of the sync section and the personalize section,
+    // depending on the sync state and the unified consent state.
+    function testInitialLayout(
+        unifiedConsentGiven, signedIn, hasError, setupInProgress,
+        syncSectionExpanded, syncSectionDisabled, personalizeSectionExpanded) {
+      syncPage.unifiedConsentEnabled = true;
+      syncPage.prefs = {unified_consent_given: {value: unifiedConsentGiven}};
+      syncPage.syncStatus = {
+        signedIn: signedIn,
+        disabled: false,
+        hasError: hasError,
+        setupInProgress: setupInProgress,
+        statusAction: hasError ? settings.StatusAction.REAUTHENTICATE :
+                                 settings.StatusAction.NO_ACTION,
+      };
+      Polymer.dom.flush();
+
+      const syncSectionToggle = syncPage.$$('#sync-section-toggle');
+      const syncSectionExpandIcon =
+          syncSectionToggle.querySelector('cr-expand-button');
+      const personalizeSectionToggle =
+          syncPage.$$('#personalize-section-toggle');
+      const personalizeSectionExpandIcon =
+          personalizeSectionToggle.querySelector('cr-expand-button');
+      const unifiedConsentToggle = syncPage.$$('#unifiedConsentToggle');
+
+      assertTrue(unifiedConsentToggle.checked == unifiedConsentGiven);
+      assertTrue(syncSectionExpandIcon.expanded == syncSectionExpanded);
+      assertTrue(syncSectionExpandIcon.disabled == syncSectionDisabled);
+      assertTrue(
+          personalizeSectionExpandIcon.expanded == personalizeSectionExpanded);
+      assertFalse(personalizeSectionExpandIcon.disabled);
+    }
+
     setup(function() {
       browserProxy = new TestSyncBrowserProxy();
       settings.SyncBrowserProxyImpl.instance_ = browserProxy;
@@ -323,6 +357,83 @@ cr.define('settings_people_page_sync_page', function() {
       assertTrue(unifiedConsentToggle.hidden);
     });
 
+    test('InitialLayout_UnifiedConsentGiven_SignedIn', function() {
+      testInitialLayout(
+          /*unifiedConsentGiven=*/true,
+          /*signedIn=*/true,
+          /*hasError=*/false,
+          /*setupInProgress=*/false,
+          /*syncSectionExpanded=*/false,
+          /*syncSectionDisabled=*/false,
+          /*personalizeSectionExpanded=*/false);
+    });
+
+    test('InitialLayout_UnifiedConsentGiven_SignedOut', function() {
+      testInitialLayout(
+          /*unifiedConsentGiven=*/true,
+          /*signedIn=*/false,
+          /*hasError=*/false,
+          /*setupInProgress=*/false,
+          /*syncSectionExpanded=*/false,
+          /*syncSectionDisabled=*/true,
+          /*personalizeSectionExpanded=*/false);
+    });
+
+    test('InitialLayout_UnifiedConsentGiven_SyncPaused', function() {
+      testInitialLayout(
+          /*unifiedConsentGiven=*/true,
+          /*signedIn=*/true,
+          /*hasError=*/true,
+          /*setupInProgress=*/false,
+          /*syncSectionExpanded=*/false,
+          /*syncSectionDisabled=*/true,
+          /*personalizeSectionExpanded=*/false);
+    });
+
+    test('InitialLayout_NoUnifiedConsentGiven_SignedIn', function() {
+      testInitialLayout(
+          /*unifiedConsentGiven=*/false,
+          /*signedIn=*/true,
+          /*hasError=*/false,
+          /*setupInProgress=*/false,
+          /*syncSectionExpanded=*/true,
+          /*syncSectionDisabled=*/false,
+          /*personalizeSectionExpanded=*/true);
+    });
+
+    test('InitialLayout_NoUnifiedConsentGiven_SignedOut', function() {
+      testInitialLayout(
+          /*unifiedConsentGiven=*/false,
+          /*signedIn=*/false,
+          /*hasError=*/false,
+          /*setupInProgress=*/false,
+          /*syncSectionExpanded=*/false,
+          /*syncSectionDisabled=*/true,
+          /*personalizeSectionExpanded=*/true);
+    });
+
+    test('InitialLayout_NoUnifiedConsentGiven_SyncPaused', function() {
+      testInitialLayout(
+          /*unifiedConsentGiven=*/false,
+          /*signedIn=*/true,
+          /*hasError=*/true,
+          /*setupInProgress=*/false,
+          /*syncSectionExpanded=*/false,
+          /*syncSectionDisabled=*/true,
+          /*personalizeSectionExpanded=*/true);
+    });
+
+    test('InitialLayout_SetupInProgress', function() {
+      testInitialLayout(
+          /*unifiedConsentGiven=*/true,
+          /*signedIn=*/true,
+          /*hasError=*/false,
+          /*setupInProgress=*/true,
+          /*syncSectionExpanded=*/true,
+          /*syncSectionDisabled=*/false,
+          /*personalizeSectionExpanded=*/true);
+    });
+
     test('LoadingAndTimeout', function() {
       const configurePage = syncPage.$$('#' + settings.PageStatus.CONFIGURE);
       const spinnerPage = syncPage.$$('#' + settings.PageStatus.SPINNER);