Settings[DICE]: update sync account control UI when sync has error

Bug: 819862
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I67b2d99c2efa25749764bc8cc524c472d57a0c67
Reviewed-on: https://chromium-review.googlesource.com/955952
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542893}

chrome/app/settings_strings.grdp

@@ -3099,6 +3099,9 @@
     <message name="IDS_SETTINGS_PEOPLE_SYNC_TURN_OFF" desc="The label for the button that lets the user turn off profile syncing with their gaia account.">
       Turn off
     </message>
+    <message name="IDS_SETTINGS_PEOPLE_SYNC_NOT_WORKING" desc="The label informing the user that sync is currently not working.">
+      Sync isn't working
+    </message>
     <message name="IDS_SETTINGS_SYNC_DISCONNECT_MANAGED_PROFILE_EXPLANATION" desc="The text to display in the 'Sign out of Chrome' dialog to stop syncing for managed profiles.">
       Because this account is managed by <ph name="DOMAIN">$1<ex>example.com</ex></ph>, your bookmarks, history, passwords, and other settings will be cleared from this device. However, your data will remain stored in your Google Account and can be managed on <ph name="BEGIN_LINK">&lt;a href="$2" target=&quot;_blank&quot;&gt;<ex>&lt;a href="$2" target=&quot;_blank&quot;&gt;</ex></ph>Google Dashboard<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph>.
     </message>

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

@@ -75,11 +75,15 @@
         right: initial;
       }
 
-      #sync-icon-container[syncing] {
+      #sync-logo-container[signed-in] {
         background: green;
       }
 
-      #sync-icon-container iron-icon {
+      #sync-logo-container[signed-in][has-error] {
+        background: var(--settings-error-color);
+      }
+
+      #sync-logo-container iron-icon {
         fill: white;
         height: 12px;
         margin: auto;
@@ -147,15 +151,17 @@
         <div id="avatar-container">
           <img class="account-icon" alt=""
               src="[[getAccountImageSrc_(shownAccount_.avatarImage)]]">
-          <div id="sync-icon-container" syncing$="[[syncStatus.signedIn]]">
-            <iron-icon icon="notification:sync"></iron-icon>
+          <div id="sync-logo-container" signed-in$="[[syncStatus.signedIn]]"
+              has-error$="[[syncStatus.hasError]]">
+            <iron-icon icon="[[getSyncIcon_(syncStatus.hasError)]]"></iron-icon>
           </div>
         </div>
         <div class="middle two-line no-min-width">
           <div class="flex text-elide" id="user-info">
             <span>
               [[getNameDisplay_('$i18nPolymer{syncedToName}',
-                  shownAccount_.fullName, syncStatus.signedIn)]]
+                  shownAccount_.fullName, '$i18nPolymer{syncNotWorking}',
+                  syncStatus)]]
             </span>
             <div class="secondary">[[shownAccount_.email]]</div>
           </div>

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

@@ -115,7 +115,10 @@ Polymer({
    * @return {string}
    * @private
    */
-  getNameDisplay_: function(label, name) {
+  getNameDisplay_: function(label, name, errorLabel) {
+    if (this.syncStatus.hasError === true)
+      return errorLabel;
+
     return this.syncStatus.signedIn ?
         loadTimeData.substituteString(label, name) :
         name;
@@ -131,6 +134,14 @@ Polymer({
     return image || 'chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE';
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  getSyncIcon_: function() {
+    return this.syncStatus.hasError ? 'settings:sync-problem' : 'settings:sync';
+  },
+
   /**
    * @param {!Array<!settings.StoredAccount>} accounts
    * @private

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

@@ -1509,6 +1509,7 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"syncAsName", IDS_SETTINGS_PEOPLE_SYNC_AS_NAME},
     {"syncedToName", IDS_SETTINGS_PEOPLE_SYNCED_AS_NAME},
     {"turnOffSync", IDS_SETTINGS_PEOPLE_SYNC_TURN_OFF},
+    {"syncNotWorking", IDS_SETTINGS_PEOPLE_SYNC_NOT_WORKING},
 #endif
     {"syncOverview", IDS_SETTINGS_SYNC_OVERVIEW},
     {"syncDisabledByAdministrator",

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

@@ -154,8 +154,8 @@ cr.define('settings_sync_account_control', function() {
             assertEquals(email, 'foo@foo.com');
 
             assertVisible(testElement.$$('#dropdown-arrow'), true);
-            assertFalse(
-                testElement.$$('#sync-icon-container').hasAttribute('syncing'));
+            assertFalse(testElement.$$('#sync-logo-container')
+                            .hasAttribute('signed-in'));
 
             testElement.$$('#dropdown-arrow').click();
             Polymer.dom.flush();
@@ -208,7 +208,8 @@ cr.define('settings_sync_account_control', function() {
       assertVisible(testElement.$$('#dropdown-arrow'), false);
       assertVisible(testElement.$$('#promo-headers'), false);
       assertTrue(
-          testElement.$$('#sync-icon-container').hasAttribute('syncing'));
+          testElement.$$('#sync-logo-container').hasAttribute('signed-in'));
+
       assertFalse(!!testElement.$$('#menu'));
 
       const userInfo = testElement.$$('#user-info');
@@ -224,6 +225,14 @@ cr.define('settings_sync_account_control', function() {
       Polymer.dom.flush();
 
       assertEquals(settings.getCurrentRoute(), settings.routes.SIGN_OUT);
+
+      sync_test_util.simulateSyncStatus(
+          {signedIn: true, signedInUsername: 'bar@bar.com', hasError: true});
+      assertTrue(
+          testElement.$$('#sync-logo-container').hasAttribute('has-error'));
+      assertFalse(userInfo.textContent.includes('barName'));
+      assertFalse(userInfo.textContent.includes('fooName'));
+      assertTrue(userInfo.textContent.includes('Sync isn\'t working'));
     });
   });
 });