[settings] Expand sync settings on signin rather than sync state change

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

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

@@ -88,7 +88,6 @@ Polymer({
     /** @type {settings.SyncStatus} */
     syncStatus: {
       type: Object,
-      observer: 'onSyncStatusChanged_',
     },
 
     /**
@@ -129,6 +128,14 @@ Polymer({
       value: '',
     },
 
+    /** @private */
+    signedIn_: {
+      type: Boolean,
+      value: true,
+      computed: 'computeSignedIn_(syncStatus.signedIn)',
+      observer: 'onSignedInChanged_',
+    },
+
     /** @private */
     syncSectionDisabled_: {
       type: Boolean,
@@ -229,7 +236,15 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  computeSyncSectionDisabled_() {
+  computeSignedIn_: function() {
+    return !!this.syncStatus.signedIn;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeSyncSectionDisabled_: function() {
     return !!this.unifiedConsentEnabled &&
         (!this.syncStatus.signedIn || !!this.syncStatus.disabled ||
          (!!this.syncStatus.hasError &&
@@ -592,9 +607,12 @@ Polymer({
     settings.navigateTo(settings.routes.BASIC);
   },
 
-  /** @private */
-  onSyncStatusChanged_: function() {
-    this.syncSectionOpened_ = !!this.syncStatus.signedIn;
+  /**
+   * Collapses/Expands the sync section if the signedIn state has changed.
+   * @private
+   */
+  onSignedInChanged_: function() {
+    this.syncSectionOpened_ = !!this.signedIn_;
   },
 
   /**

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

@@ -195,6 +195,19 @@ cr.define('settings_people_page_sync_page', function() {
       Polymer.dom.flush();
       assertFalse(ironCollapse.opened);
       assertFalse(expandIcon.expanded);
+
+      // Random changes to syncStatus should not expand the section.
+      // Regression test for https://crbug.com/869938
+      syncPage.syncStatus = {
+        signedIn: true,
+        disabled: false,
+        hasError: false,
+        statusAction: settings.StatusAction.NO_ACTION,
+        statusText: 'UninterestingChange',  // Dummy change to trigger observer.
+      };
+      assertFalse(ironCollapse.opened);
+      assertFalse(expandIcon.expanded);
+
       syncSectionToggle.click();
       Polymer.dom.flush();
       assertTrue(ironCollapse.opened);
@@ -213,6 +226,44 @@ cr.define('settings_people_page_sync_page', function() {
       assertTrue(ironCollapse.hidden);
     });
 
+    test('SyncSectionLayout_UnifiedConsentEnabled_SignoutCollapse', function() {
+      const ironCollapse = syncPage.$$('#sync-section');
+      const syncSectionToggle = syncPage.$$('#sync-section-toggle');
+      const expandIcon = syncSectionToggle.querySelector('cr-expand-button');
+      syncPage.syncStatus = {
+        signedIn: true,
+        disabled: false,
+        hasError: false,
+        statusAction: settings.StatusAction.NO_ACTION,
+      };
+      syncPage.unifiedConsentEnabled = true;
+      Polymer.dom.flush();
+
+      // Sync section is initially open when signed in.
+      assertTrue(ironCollapse.opened);
+      assertTrue(expandIcon.expanded);
+
+      // Signout collapses the section.
+      syncPage.syncStatus = {
+        signedIn: false,
+        disabled: false,
+        hasError: false,
+        statusAction: settings.StatusAction.NO_ACTION,
+      };
+      assertFalse(ironCollapse.opened);
+      assertFalse(expandIcon.expanded);
+
+      // Signin expands the section.
+      syncPage.syncStatus = {
+        signedIn: true,
+        disabled: false,
+        hasError: false,
+        statusAction: settings.StatusAction.NO_ACTION,
+      };
+      assertTrue(ironCollapse.opened);
+      assertTrue(expandIcon.expanded);
+    });
+
     test('SyncSectionLayout_UnifiedConsentEnabled_SignedOut', function() {
       const ironCollapse = syncPage.$$('#sync-section');
       const syncSectionToggle = syncPage.$$('#sync-section-toggle');