[unified-consent] Make sync controls searchable

- Associate the sync-setup row on the people page
  to the sync-controls page to make the sync controls
  searchable.
- Hide the sync controls when not available, so
  they don't show up during a search.

Additional:
 - Fix syncStatus update for settings-sync-controls
   when unified consent is disabled. (syncStatus
   wasn't used before.)

Bug: 916988
Change-Id: I5cc73cc32a03fb3960fe57e9075a16a6b31d2afe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1498531
Commit-Queue: Thomas Tangl <tangltom@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#637908}

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

@@ -327,8 +327,9 @@
       </template>
 
       <template is="dom-if" if="[[unifiedConsentEnabled_]]">
-        <template is="dom-if" route-path="/syncSetup/advanced" no-search>
+        <template is="dom-if" route-path="/syncSetup/advanced">
           <settings-subpage page-title="$i18n{syncAdvancedPageTitle}"
+              associated-control="[[$$('#sync-setup')]]"
               learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
             <settings-sync-controls sync-status="[[syncStatus]]">
             </settings-sync-controls>

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

@@ -24,7 +24,6 @@
         flex: 1;
       }
     </style>
-
     <div class="settings-box first">
       <div id="syncEverythingCheckboxLabel" class="start">
         $i18n{syncEverythingCheckboxLabel}

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

@@ -32,6 +32,14 @@ Polymer({
   behaviors: [WebUIListenerBehavior],
 
   properties: {
+    hidden: {
+      type: Boolean,
+      value: false,
+      computed: 'syncControlsHidden_(' +
+          'syncStatus.signedIn, syncStatus.disabled, syncStatus.hasError)',
+      reflectToAttribute: true,
+    },
+
     /**
      * The current sync preferences, supplied by SyncBrowserProxy.
      * @type {settings.SyncPrefs|undefined}
@@ -161,21 +169,29 @@ Polymer({
   },
 
   /** @private */
-  syncStatusChanged_: function(syncStatus) {
-    // When the sync controls are embedded, the parent has to take care of
-    // showing/hiding them.
-    if (settings.getCurrentRoute() != settings.routes.SYNC_ADVANCED ||
-        !syncStatus) {
-      return;
+  syncStatusChanged_: function() {
+    if (settings.getCurrentRoute() == settings.routes.SYNC_ADVANCED &&
+        this.syncControlsHidden_()) {
+      settings.navigateTo(settings.routes.SYNC);
     }
+  },
 
-    // Navigate to main sync page when the sync controls page should *not* be
-    // available.
-    if (!syncStatus.signedIn || syncStatus.disabled ||
-        (syncStatus.hasError &&
-         syncStatus.statusAction !== settings.StatusAction.ENTER_PASSPHRASE)) {
-      settings.navigateTo(settings.routes.SYNC);
+  /**
+   * @return {boolean} Whether the sync controls are hidden.
+   * @private
+   */
+  syncControlsHidden_: function() {
+    if (!this.syncStatus) {
+      // Show sync controls by default.
+      return false;
     }
+
+    if (!this.syncStatus.signedIn || this.syncStatus.disabled) {
+      return true;
+    }
+
+    return !!this.syncStatus.hasError &&
+        this.syncStatus.statusAction !== settings.StatusAction.ENTER_PASSPHRASE;
   },
 });
 })();

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

@@ -197,7 +197,7 @@
         </template>
 
         <template is="dom-if" if="[[!unifiedConsentEnabled]]">
-          <settings-sync-controls sync-status="syncStatus">
+          <settings-sync-controls sync-status="[[syncStatus]]">
           </settings-sync-controls>
         </template>
 

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

@@ -105,6 +105,40 @@ cr.define('settings_people_page_sync_controls', function() {
       }
       return browserProxy.whenCalled('setSyncDatatypes').then(verifyPrefs);
     });
+
+    test('SignedIn', function() {
+      // Controls are available by default.
+      assertFalse(syncControls.hidden);
+
+      syncControls
+          .syncStatus = {disabled: false, hasError: false, signedIn: true};
+      // Controls are available when signed in and there is no error.
+      assertFalse(syncControls.hidden);
+    });
+
+    test('SyncDisabled', function() {
+      syncControls
+          .syncStatus = {disabled: true, hasError: false, signedIn: true};
+      // Controls are hidden when sync is disabled.
+      assertTrue(syncControls.hidden);
+    });
+
+    test('SyncError', function() {
+      syncControls
+          .syncStatus = {disabled: false, hasError: true, signedIn: true};
+      // Controls are hidden when there is an error but it's not a
+      // passphrase error.
+      assertTrue(syncControls.hidden);
+
+      syncControls.syncStatus = {
+        disabled: false,
+        hasError: true,
+        signedIn: true,
+        statusAction: settings.StatusAction.ENTER_PASSPHRASE
+      };
+      // Controls are available when there is a passphrase error.
+      assertFalse(syncControls.hidden);
+    });
   });
 
   suite('SyncControlsSubpageTest', function() {