cros: Add account image, name and email to OS sync settings WebUI

The labels can change based on the sync system status.

Screenshots:
http://screen/eRLqmmfD5WP - sync off
http://screen/iJ6OT7Z8qti - sync on
http://screen/QswdwERfXjv - sync system error

Also remove the horizontal lines between sections. See bug for mock.

TODO: Add the overlay icon with sync status on top of the avatar icon.

Bug: 1057200
Test: added to browser_tests
Change-Id: Ie68f9be162c38045dcea8bc9ee774d37e1f8ebd0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2080952
Commit-Queue: James Cook <jamescook@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Auto-Submit: James Cook <jamescook@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#746220}

chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.html

@@ -170,7 +170,10 @@
           <settings-subpage page-title="$i18n{osSyncPageTitle}"
               associated-control="[[$$('#sync-setup')]]"
               learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
-            <os-sync-controls sync-status="[[syncStatus]]">
+            <os-sync-controls sync-status="[[syncStatus]]"
+                profile-icon-url="[[profileIconUrl_]]"
+                profile-name="[[profileName_]]"
+                profile-email="[[profileEmail_]]">
             </os-sync-controls>
           </settings-subpage>
         </template>

chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.js

@@ -55,18 +55,28 @@ Polymer({
     },
 
     /**
-     * The currently selected profile icon URL. May be a data URL.
+     * The current profile icon URL. Usually a data:image/png URL.
      * @private
      */
     profileIconUrl_: String,
 
     /**
-     * The current profile name.
+     * The current profile name, e.g. "John Cena".
      * @private
      */
     profileName_: String,
 
-    /** @private */
+    /**
+     * The current profile email, e.g. "john.cena@gmail.com".
+     * @private
+     */
+    profileEmail_: String,
+
+    /**
+     * The label may contain additional text, for example:
+     * "john.cena@gmail, + 2 more accounts".
+     * @private
+     */
     profileLabel_: String,
 
     /** @private */
@@ -244,6 +254,7 @@ Polymer({
       return;
     }
     this.profileName_ = accounts[0].fullName;
+    this.profileEmail_ = accounts[0].email;
     this.profileIconUrl_ = accounts[0].pic;
 
     const moreAccounts = accounts.length - 1;

chrome/browser/resources/settings/chromeos/os_people_page/os_sync_controls.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/html/assert.html">
-<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-<link rel="import" href="../os_route.html">
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="../../settings_shared_css.html">
 <link rel="import" href="../metrics_recorder.html">
+<link rel="import" href="../os_route.html">
 <link rel="import" href="os_sync_browser_proxy.html">
 
 <dom-module id="os-sync-controls">
   <template>
     <style include="settings-shared">
-      #sync-data-types .list-item:not([hidden]) ~ .list-item:not([hidden]) {
-        border-top: var(--cr-separator-line);
+      :host {
+        --shown-avatar-size: 40px;
+      }
+
+      #avatarContainer {
+        height: var(--shown-avatar-size);
+        position: relative;
+      }
+
+      #avatarIcon {
+        border-radius: 20px;
+        flex-shrink: 0;
+        height: var(--shown-avatar-size);
+        width: var(--shown-avatar-size);
+      }
+
+      .settings-box {
+        border-top: none;
+      }
+
+      .flex {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
       }
 
       .list-item {
@@ -28,28 +52,44 @@
         opacity: var(--cr-disabled-opacity);
       }
     </style>
-    <div class="settings-box first">
-      <!-- TODO(jamescook): Replace this section with the sync status component.
-           For now, just use placeholder strings.
-           TODO(jamescook): UI for sync error states.
-           TODO(jamescook): Passphrase support. -->
-      <div id="featureLabel" class="start">
-        Chrome OS sync PLACEHOLDER
+    <div class="settings-box first two-line">
+      <div id="avatarContainer">
+        <img id="avatarIcon" alt="" src="[[profileIconUrl]]">
+        <!-- TODO(jamescook): Sync status overlay icon. -->
+      </div>
+      <div class="middle two-line no-min-width">
+        <div class="flex text-elide settings-box-text">
+          <span id="accountTitle" aria-hidden="true">
+            [[getAccountTitle_(profileName, syncStatus.hasError)]]
+          </span>
+          <div id="accountSubtitle" class="secondary" aria-hidden="true">
+            [[getAccountSubtitle_(profileEmail, syncStatus.hasError,
+                osSyncFeatureEnabled)]]
+          </div>
         </div>
+      </div>
+
       <cr-button id="turnOnSyncButton"
           class="action-button"
           on-click="onTurnOnSyncButtonClick_"
+          aria-labelledby="turnOnSyncButton accountTitle accountSubtitle"
           aria-describedby="featureLabel"
           hidden="[[osSyncFeatureEnabled]]">
         $i18n{osSyncTurnOn}
       </cr-button>
       <cr-button id="turnOffSyncButton"
           on-click="onTurnOffSyncButtonClick_"
+          aria-labelledby="turnOffSyncButton accountTitle accountSubtitle"
           aria-describedby="featureLabel"
           hidden="[[!osSyncFeatureEnabled]]">
         $i18n{osSyncTurnOff}
       </cr-button>
     </div>
+
+    <div id="featureLabel" class="settings-box" aria-hidden="true">
+      Chrome OS sync feature description PLACEHOLDER
+    </div>
+
     <div class="settings-box">
       <div id="syncEverythingCheckboxLabel"
           class="start"

chrome/browser/resources/settings/chromeos/os_people_page/os_sync_controls.js

@@ -27,6 +27,7 @@ Polymer({
   is: 'os-sync-controls',
 
   behaviors: [
+    I18nBehavior,
     settings.RouteObserverBehavior,
     WebUIListenerBehavior,
   ],
@@ -39,6 +40,30 @@ Polymer({
       reflectToAttribute: true,
     },
 
+    /**
+     * Injected sync system status.
+     * @type {?settings.SyncStatus}
+     */
+    syncStatus: Object,
+
+    /**
+     * Injected profile icon URL, usually a data:image/png URL.
+     * @private
+     */
+    profileIconUrl: String,
+
+    /**
+     * Injected profile name, e.g. "John Cena".
+     * @private
+     */
+    profileName: String,
+
+    /**
+     * Injected profile email address, e.g. "john.cena@gmail.com".
+     * @private
+     */
+    profileEmail: String,
+
     /**
      * Whether the OS sync feature is enabled. This object does not directly
      * manipulate prefs so we can defer turning on OS sync until the user
@@ -99,6 +124,25 @@ Polymer({
     }
   },
 
+  /**
+   * @return {string} The top label for the account row.
+   * @private
+   */
+  getAccountTitle_() {
+    return this.syncStatus.hasError ? this.i18n('syncNotWorking') :
+                                      this.profileName;
+  },
+
+  /**
+   * @return {string} The bottom label for the account row.
+   * @private
+   */
+  getAccountSubtitle_() {
+    return this.osSyncFeatureEnabled && !this.syncStatus.hasError ?
+        this.i18n('syncingTo', this.profileEmail) :
+        this.profileEmail;
+  },
+
   /**
    * Handler for when the sync preferences are updated.
    * @private

chrome/test/data/webui/settings/chromeos/os_sync_controls_test.js

@@ -83,6 +83,10 @@ suite('OsSyncControlsTest', function() {
 
     PolymerTest.clearBody();
     syncControls = document.createElement('os-sync-controls');
+    syncControls.syncStatus = {hasError: false};
+    syncControls.profileName = 'John Cena';
+    syncControls.profileEmail = 'john.cena@gmail.com';
+    syncControls.profileIconUrl = 'data:image/png;base64,abc123';
     document.body.appendChild(syncControls);
   });
 
@@ -96,6 +100,37 @@ suite('OsSyncControlsTest', function() {
     assertFalse(syncControls.hidden);
   });
 
+  test('Avatar icon', function() {
+    assertEquals('data:image/png;base64,abc123', syncControls.$.avatarIcon.src);
+  });
+
+  test('Account name and email with feature enabled', function() {
+    setupWithFeatureEnabled();
+    assertEquals('John Cena', syncControls.$.accountTitle.textContent.trim());
+    assertEquals(
+        'Syncing to john.cena@gmail.com',
+        syncControls.$.accountSubtitle.textContent.trim());
+  });
+
+  test('Account name and email with feature disabled', function() {
+    setupWithFeatureDisabled();
+    assertEquals('John Cena', syncControls.$.accountTitle.textContent.trim());
+    assertEquals(
+        'john.cena@gmail.com',
+        syncControls.$.accountSubtitle.textContent.trim());
+  });
+
+  test('Account name and email with sync error', function() {
+    setupWithFeatureEnabled();
+    syncControls.syncStatus = {hasError: true};
+    Polymer.dom.flush();
+    assertEquals(
+        `Sync isn't working`, syncControls.$.accountTitle.textContent.trim());
+    assertEquals(
+        'john.cena@gmail.com',
+        syncControls.$.accountSubtitle.textContent.trim());
+  });
+
   test('FeatureDisabled', function() {
     setupWithFeatureDisabled();