SplitSettings: Add avatar icon to People section in OS settings

UX wants the icon back in OS Settings. This is a partial revert of:
https://chromium-review.googlesource.com/c/chromium/src/+/1709783

Screenshot: http://screen/ygVfqu1eVb7

Note that this is currently the device account icon. A follow-up CL
will change the Chrome C++ code to send the primary GAIA account icon,
which could be different.

Bug: 990528
Test: added to browser_tests
Change-Id: I983846c517763d64e5cf2830deb9334865d7a17a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1745590
Commit-Queue: James Cook <jamescook@chromium.org>
Commit-Queue: Xiyuan Xia <xiyuan@chromium.org>
Auto-Submit: James Cook <jamescook@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#685412}

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_png_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
@@ -7,6 +8,7 @@
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/icon.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
@@ -99,7 +101,11 @@
           <div class="settings-box first two-line">
             <template is="dom-if" if="[[syncStatus]]">
               <!-- Does not use <cr-link-row> due to custom aria label. -->
-              <div class="start two-line no-min-width"
+              <div id="profile-icon"
+                  style="background-image: [[getIconImageSet_(
+                      profileIconUrl_)]]">
+              </div>
+              <div class="middle two-line no-min-width"
                   on-click="onAccountManagerTap_"
                   actionable>
                 <div class="flex text-elide settings-box-text">

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

@@ -11,6 +11,7 @@ Polymer({
 
   behaviors: [
     settings.RouteObserverBehavior,
+    CrPngBehavior,
     I18nBehavior,
     WebUIListenerBehavior,
     LockStateBehavior,
@@ -60,6 +61,12 @@ Polymer({
       value: '',
     },
 
+    /**
+     * The currently selected profile icon URL. May be a data URL.
+     * @private
+     */
+    profileIconUrl_: String,
+
     /**
      * The current profile name.
      * @private
@@ -205,13 +212,20 @@ Polymer({
   },
 
   /**
-   * Handler for when the profile's name is updated.
+   * Handler for when the profile's icon and name is updated.
    * @private
    * @param {!settings.ProfileInfo} info
    */
   handleProfileInfo_: function(info) {
     this.profileName_ = info.name;
-    // info.iconUrl is not used for this page.
+    // Extract first frame from image by creating a single frame PNG using
+    // url as input if base64 encoded and potentially animated.
+    if (info.iconUrl.startsWith('data:image/png;base64')) {
+      this.profileIconUrl_ =
+          CrPngBehavior.convertImageSequenceToPng([info.iconUrl]);
+      return;
+    }
+    this.profileIconUrl_ = info.iconUrl;
   },
 
   /**
@@ -420,6 +434,15 @@ Polymer({
     return '';
   },
 
+  /**
+   * @param {string} iconUrl
+   * @return {string} A CSS image-set for multiple scale factors.
+   * @private
+   */
+  getIconImageSet_: function(iconUrl) {
+    return cr.icon.getImage(iconUrl);
+  },
+
   /**
    * @param {!settings.SyncStatus} syncStatus
    * @return {boolean} Whether to show the "Sign in to Chrome" button.

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

@@ -116,13 +116,19 @@ cr.define('settings_people_page', function() {
       assertEquals(
           browserProxy.fakeProfileInfo.name,
           peoplePage.$$('#profile-name').textContent.trim());
+      const bg = peoplePage.$$('#profile-icon').style.backgroundImage;
+      assertTrue(bg.includes(browserProxy.fakeProfileInfo.iconUrl));
 
+      const iconDataUrl = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEA' +
+          'LAAAAAABAAEAAAICTAEAOw==';
       cr.webUIListenerCallback(
-          'profile-info-changed', {name: 'pushedName', iconUrl: ''});
+          'profile-info-changed', {name: 'pushedName', iconUrl: iconDataUrl});
 
       Polymer.dom.flush();
       assertEquals(
           'pushedName', peoplePage.$$('#profile-name').textContent.trim());
+      const newBg = peoplePage.$$('#profile-icon').style.backgroundImage;
+      assertTrue(newBg.includes(iconDataUrl));
 
       // Rather than trying to mock cr.sendWithPromise('getPluralString', ...)
       // just force an update.