[unified-consent] Add sign-in-again button when sync is paused

When sync is paused, i.e. the user is in an auth error, the
syncSetup page now has a button to sign in again to resolve
the error.

Mocks:
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZWnUS9sdsb0Q/files/MCHtA7U1iMGr664Bt8FBOxWEyjSSOyFCbW0

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

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

@@ -130,10 +130,6 @@
       :host([showing-promo]) #promo-separator {
         @apply --promo-separator;
       }
-
-      :host([always-show-promo]) #turn-off {
-        display: none;
-      }
     </style>
     <div id="banner" hidden="[[syncStatus.signedIn]]"></div>
     <div class="settings-box first two-line" id="promo-header"
@@ -193,17 +189,25 @@
           </button>
         </paper-icon-button-light>
         <div class="separator" hidden="[[syncStatus.signedIn]]"></div>
-        <paper-button class="action-button" on-click="onSyncButtonTap_"
-            hidden="[[syncStatus.signedIn]]"
+        <paper-button id="sync-button" class="action-button"
+            hidden="[[syncStatus.signedIn]]" on-click="onSyncButtonTap_"
             disabled="[[syncStatus.setupInProgress]]">
           [[getSubstituteLabel_(
               '$i18nPolymer{syncAsName}', shownAccount_.givenName)]]
         </paper-button>
-        <paper-button class="secondary-button" on-click="onTurnOffButtonTap_"
-            hidden="[[!syncStatus.signedIn]]" id="turn-off"
+        <paper-button id="turn-off" class="secondary-button"
+            hidden="[[!shouldShowTurnOffButton_(syncStatus.signedIn)]]"
+            on-click="onTurnOffButtonTap_"
             disabled="[[syncStatus.setupInProgress]]">
           $i18n{turnOffSync}
         </paper-button>
+        <paper-button id="sync-paused-button" class="action-button"
+            hidden="[[!shouldShowSigninAgainButton_(
+                syncStatus.signedIn, syncStatus.hasError,
+                syncStatus.statusAction)]]"
+            on-click="onSigninTap_" disabled="[[syncStatus.setupInProgress]]">
+          $i18n{signInAgain}
+        </paper-button>
       </div>
       <template is="dom-if" if="[[!syncStatus.signedIn]]" restamp>
         <cr-action-menu id="menu" auto-reposition>

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

@@ -58,7 +58,7 @@ Polymer({
 
     // This property should be set by the parent only and should not change
     // after the element is created.
-    alwaysShowPromo: {
+    embeddedInSubpage: {
       type: Boolean,
       reflectToAttribute: true,
     },
@@ -123,7 +123,7 @@ Polymer({
 
   /** @private */
   onSignedInChanged_: function() {
-    if (this.alwaysShowPromo) {
+    if (this.embeddedInSubpage) {
       this.showingPromo = true;
       return;
     }
@@ -251,6 +251,24 @@ Polymer({
     return accountName;
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowTurnOffButton_: function() {
+    return !!this.syncStatus.signedIn && !this.embeddedInSubpage;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowSigninAgainButton_: function() {
+    return !!this.syncStatus.signedIn && this.embeddedInSubpage &&
+        !!this.syncStatus.hasError &&
+        this.syncStatus.statusAction == settings.StatusAction.REAUTHENTICATE;
+  },
+
   /**
    * @param {!Array<!settings.StoredAccount>} accounts
    * @private

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

@@ -80,7 +80,7 @@
     <template is="dom-if" if="[[shouldShowSyncAccountControl_(diceEnabled,
         unifiedConsentEnabled, syncStatus.syncSystemEnabled,
         syncStatus.signinAllowed)]]">
-      <settings-sync-account-control always-show-promo
+      <settings-sync-account-control embedded-in-subpage
           sync-status="[[syncStatus]]"
           promo-label-with-account="$i18n{peopleSignInPrompt}"
           promo-label-with-no-account="$i18n{peopleSignInPrompt}"

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

@@ -1610,6 +1610,7 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"syncAsName", IDS_SETTINGS_PEOPLE_SYNC_AS_NAME},
     {"syncingTo", IDS_SETTINGS_PEOPLE_SYNCING_TO_ACCOUNT},
     {"turnOffSync", IDS_SETTINGS_PEOPLE_SYNC_TURN_OFF},
+    {"signInAgain", IDS_SYNC_ERROR_USER_MENU_SIGNIN_AGAIN_BUTTON},
     {"syncNotWorking", IDS_SETTINGS_PEOPLE_SYNC_NOT_WORKING},
     {"syncPaused", IDS_SETTINGS_PEOPLE_SYNC_PAUSED},
     {"syncSignInPromptWithAccount",

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

@@ -122,7 +122,7 @@ cr.define('settings_sync_account_control', function() {
       ]);
 
       const userInfo = testElement.$$('#user-info');
-      const syncButton = testElement.$$('#avatar-row .action-button');
+      const syncButton = testElement.$$('#sync-button');
 
       // Avatar row shows the right account.
       assertVisible(testElement.$$('#promo-header'), true);
@@ -145,7 +145,7 @@ cr.define('settings_sync_account_control', function() {
       // "sync to" button is showing the correct name and syncs with the
       // correct account when clicked.
       assertVisible(syncButton, true);
-      assertVisible(testElement.$$('#avatar-row .secondary-button'), false);
+      assertVisible(testElement.$$('#turn-off'), false);
       assertTrue(syncButton.textContent.includes('foo'));
       assertFalse(syncButton.textContent.includes('bar'));
       syncButton.click();
@@ -230,8 +230,9 @@ cr.define('settings_sync_account_control', function() {
       assertFalse(userInfo.textContent.includes('fooName'));
       assertFalse(userInfo.textContent.includes('foo@foo.com'));
 
-      assertVisible(testElement.$$('#avatar-row .action-button'), false);
-      assertVisible(testElement.$$('#avatar-row .secondary-button'), true);
+      assertVisible(testElement.$$('#sync-button'), false);
+      assertVisible(testElement.$$('#turn-off'), true);
+      assertVisible(testElement.$$('#sync-paused-button'), false);
 
       testElement.$$('#avatar-row .secondary-button').click();
       Polymer.dom.flush();
@@ -268,6 +269,8 @@ cr.define('settings_sync_account_control', function() {
       assertFalse(displayedText.includes('barName'));
       assertFalse(displayedText.includes('fooName'));
       assertTrue(displayedText.includes('Sync is paused'));
+      // Not embedded in a subpage, so there is no sync-paused button.
+      assertVisible(testElement.$$('#sync-paused-button'), false);
 
       testElement.syncStatus = {
         signedIn: true,
@@ -287,7 +290,7 @@ cr.define('settings_sync_account_control', function() {
     });
 
     test('embedded in another page', function() {
-      testElement.alwaysShowPromo = true;
+      testElement.embeddedInSubpage = true;
       forcePromoResetWithCount(100, false);
       const banner = testElement.$$('#banner');
       assertVisible(banner, true);
@@ -301,6 +304,18 @@ cr.define('settings_sync_account_control', function() {
       };
 
       assertVisible(testElement.$$('#turn-off'), false);
+      assertVisible(testElement.$$('#sync-paused-button'), false);
+
+      testElement.embeddedInSubpage = true;
+      testElement.syncStatus = {
+        signedIn: true,
+        signedInUsername: 'bar@bar.com',
+        hasError: true,
+        statusAction: settings.StatusAction.REAUTHENTICATE,
+        disabled: false,
+      };
+      assertVisible(testElement.$$('#turn-off'), false);
+      assertVisible(testElement.$$('#sync-paused-button'), true);
     });
   });
 });