[Dice] Add error action button to account control in settings

When the user has an actionable sync error, a button to resolve
the error is shown in the sync account control row on settings
pages.

Exception: The passphrase action button is not shown on the sync
page because this page has its customized passphrase UI.

Bug: 902949
Change-Id: I558a79be8cb75f2a9260bf8e3236e7ef956627db
Reviewed-on: https://chromium-review.googlesource.com/c/1333768
Commit-Queue: Thomas Tangl <tangltom@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608405}

chrome/app/generated_resources.grd

@@ -7123,7 +7123,7 @@ Please help our engineers fix this problem. Tell us what happened right before y
         </if>
         <if expr="not chromeos">
           <message name="IDS_SYNC_RELOGIN_LINK_LABEL" desc="The text to display on in the hyperlink when the user needs to sign in again to use sync.">
-            Sign in
+            Sign in again
           </message>
         </if>
         <if expr="chromeos">

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

@@ -364,13 +364,13 @@ Polymer({
   onSyncTap_: function() {
     // When unified-consent is enabled, users can go to sync subpage regardless
     // of sync status.
-    // TODO(scottchen): figure out how to deal with sync error states in the
-    //    subpage (https://crbug.com/824546).
     if (this.unifiedConsentEnabled_) {
       settings.navigateTo(settings.routes.SYNC);
       return;
     }
 
+    // TODO(crbug.com/862983): Remove this code once UnifiedConsent is rolled
+    // out to 100%.
     assert(this.syncStatus.signedIn);
     assert(this.syncStatus.syncSystemEnabled);
 

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

@@ -201,12 +201,11 @@
             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 id="sync-error-button" class="action-button"
+            hidden="[[!shouldShowErrorActionButton_(syncStatus)]]"
+            on-click="onErrorButtonTap_"
+            disabled="[[syncStatus.setupInProgress]]">
+          [[syncStatus.statusActionText]]
         </paper-button>
       </div>
       <template is="dom-if" if="[[!syncStatus.signedIn]]" restamp>

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

@@ -258,10 +258,16 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  shouldShowSigninAgainButton_: function() {
+  shouldShowErrorActionButton_: function() {
+    if (this.embeddedInSubpage &&
+        this.syncStatus.statusAction ==
+            settings.StatusAction.ENTER_PASSPHRASE) {
+      // In a subpage the passphrase button is not required.
+      return false;
+    }
     return !this.hideButtons && !!this.syncStatus.signedIn &&
         !!this.syncStatus.hasError &&
-        this.syncStatus.statusAction == settings.StatusAction.REAUTHENTICATE;
+        this.syncStatus.statusAction != settings.StatusAction.NO_ACTION;
   },
 
   /**
@@ -284,9 +290,34 @@ Polymer({
   },
 
   /** @private */
-  onSigninTap_: function() {
+  onErrorButtonTap_: function() {
+    switch (this.syncStatus.statusAction) {
+      case settings.StatusAction.REAUTHENTICATE:
         this.syncBrowserProxy_.startSignIn();
+        break;
+      case settings.StatusAction.SIGNOUT_AND_SIGNIN:
+        if (this.syncStatus.domain)
+          settings.navigateTo(settings.routes.SIGN_OUT);
+        else {
+          // Silently sign the user out without deleting their profile and
+          // prompt them to sign back in.
+          this.syncBrowserProxy_.signOut(false);
+          this.syncBrowserProxy_.startSignIn();
+        }
+        break;
+      case settings.StatusAction.UPGRADE_CLIENT:
+        settings.navigateTo(settings.routes.ABOUT);
+        break;
+      case settings.StatusAction.ENTER_PASSPHRASE:
+      case settings.StatusAction.CONFIRM_SYNC_SETTINGS:
+      default:
+        settings.navigateTo(settings.routes.SYNC);
+    }
+  },
 
+  /** @private */
+  onSigninTap_: function() {
+    this.syncBrowserProxy_.startSignIn();
     // Need to close here since one menu item also triggers this function.
     if (this.$$('#menu')) {
       /** @type {!CrActionMenuElement} */ (this.$$('#menu')).close();

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

@@ -30,6 +30,7 @@ settings.StoredAccount;
  *            signedInUsername: (string|undefined),
  *            signinAllowed: (boolean|undefined),
  *            statusAction: (!settings.StatusAction),
+ *            statusActionText: (string|undefined),
  *            statusText: (string|undefined),
  *            supervisedUser: (boolean|undefined),
  *            syncSystemEnabled: (boolean|undefined)}}

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

@@ -999,6 +999,7 @@ PeopleHandler::GetSyncStatusDictionary() {
                                     &link_label,
                                     &action_type) == sync_ui_util::SYNC_ERROR;
   sync_status->SetString("statusText", status_label);
+  sync_status->SetString("statusActionText", link_label);
   sync_status->SetBoolean("hasError", status_has_error);
   sync_status->SetString("statusAction", GetSyncErrorAction(action_type));
 

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

@@ -234,7 +234,7 @@ cr.define('settings_sync_account_control', function() {
 
       assertVisible(testElement.$$('#sync-button'), false);
       assertVisible(testElement.$$('#turn-off'), true);
-      assertVisible(testElement.$$('#sync-paused-button'), false);
+      assertVisible(testElement.$$('#sync-error-button'), false);
 
       testElement.$$('#avatar-row .secondary-button').click();
       Polymer.dom.flush();
@@ -257,6 +257,8 @@ cr.define('settings_sync_account_control', function() {
       assertFalse(displayedText.includes('barName'));
       assertFalse(displayedText.includes('fooName'));
       assertTrue(displayedText.includes('Sync isn\'t working'));
+      // The sync error button is shown to resolve the error.
+      assertVisible(testElement.$$('#sync-error-button'), true);
 
       testElement.syncStatus = {
         signedIn: true,
@@ -273,8 +275,8 @@ cr.define('settings_sync_account_control', function() {
       assertFalse(displayedText.includes('barName'));
       assertFalse(displayedText.includes('fooName'));
       assertTrue(displayedText.includes('Sync is paused'));
-      // The sync-paused button is shown to resolve the error.
-      assertVisible(testElement.$$('#sync-paused-button'), true);
+      // The sync error button is shown to resolve the error.
+      assertVisible(testElement.$$('#sync-error-button'), true);
 
       testElement.syncStatus = {
         signedIn: true,
@@ -292,6 +294,7 @@ cr.define('settings_sync_account_control', function() {
       assertFalse(displayedText.includes('barName'));
       assertFalse(displayedText.includes('fooName'));
       assertTrue(displayedText.includes('Sync disabled'));
+      assertVisible(testElement.$$('#sync-error-button'), false);
 
       testElement.syncStatus = {
         signedIn: true,
@@ -326,7 +329,7 @@ cr.define('settings_sync_account_control', function() {
       };
 
       assertVisible(testElement.$$('#turn-off'), false);
-      assertVisible(testElement.$$('#sync-paused-button'), false);
+      assertVisible(testElement.$$('#sync-error-button'), false);
 
       testElement.embeddedInSubpage = true;
       testElement.syncStatus = {
@@ -338,7 +341,7 @@ cr.define('settings_sync_account_control', function() {
         disabled: false,
       };
       assertVisible(testElement.$$('#turn-off'), false);
-      assertVisible(testElement.$$('#sync-paused-button'), true);
+      assertVisible(testElement.$$('#sync-error-button'), true);
 
       testElement.embeddedInSubpage = true;
       testElement.syncStatus = {
@@ -350,7 +353,20 @@ cr.define('settings_sync_account_control', function() {
         disabled: false,
       };
       assertVisible(testElement.$$('#turn-off'), false);
-      assertVisible(testElement.$$('#sync-paused-button'), true);
+      assertVisible(testElement.$$('#sync-error-button'), true);
+
+      testElement.embeddedInSubpage = true;
+      testElement.syncStatus = {
+        signedIn: true,
+        signedInUsername: 'bar@bar.com',
+        hasError: true,
+        hasUnrecoverableError: false,
+        statusAction: settings.StatusAction.ENTER_PASSPHRASE,
+        disabled: false,
+      };
+      assertVisible(testElement.$$('#turn-off'), false);
+      // Don't show passphrase error button on embedded page.
+      assertVisible(testElement.$$('#sync-error-button'), false);
 
       testElement.embeddedInSubpage = true;
       testElement.syncStatus = {
@@ -362,7 +378,7 @@ cr.define('settings_sync_account_control', function() {
         disabled: false,
       };
       assertVisible(testElement.$$('#turn-off'), false);
-      assertVisible(testElement.$$('#sync-paused-button'), false);
+      assertVisible(testElement.$$('#sync-error-button'), false);
     });
 
     test('hide buttons', function() {
@@ -377,7 +393,7 @@ cr.define('settings_sync_account_control', function() {
       };
 
       assertVisible(testElement.$$('#turn-off'), false);
-      assertVisible(testElement.$$('#sync-paused-button'), false);
+      assertVisible(testElement.$$('#sync-error-button'), false);
 
       testElement.syncStatus = {
         signedIn: true,
@@ -388,7 +404,18 @@ cr.define('settings_sync_account_control', function() {
         disabled: false,
       };
       assertVisible(testElement.$$('#turn-off'), false);
-      assertVisible(testElement.$$('#sync-paused-button'), false);
+      assertVisible(testElement.$$('#sync-error-button'), false);
+
+      testElement.syncStatus = {
+        signedIn: true,
+        signedInUsername: 'bar@bar.com',
+        hasError: true,
+        hasUnrecoverableError: false,
+        statusAction: settings.StatusAction.ENTER_PASSPHRASE,
+        disabled: false,
+      };
+      assertVisible(testElement.$$('#turn-off'), false);
+      assertVisible(testElement.$$('#sync-error-button'), false);
     });
   });
 });