SplitSettings: Show GAIA avatar in browser settings People section

UX wants to show the GAIA avatar instead of the device account image.

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

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

@@ -28,6 +28,7 @@
 
 <if expr="chromeos">
 <link rel="import" href="account_manager.html">
+<link rel="import" href="account_manager_browser_proxy.html">
 <link rel="import" href="change_picture.html">
 <link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_png_behavior.html">
 <link rel="import" href="fingerprint_list.html">

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

@@ -233,10 +233,24 @@ Polymer({
 
   /** @override */
   attached: function() {
-    const profileInfoProxy = settings.ProfileInfoBrowserProxyImpl.getInstance();
-    profileInfoProxy.getProfileInfo().then(this.handleProfileInfo_.bind(this));
+    let useProfileNameAndIcon = true;
+    // <if expr="chromeos">
+    if (!loadTimeData.getBoolean('showOSSettings') &&
+        this.isAccountManagerEnabled_) {
+      // If this is SplitSettings and we have the Google Account manager,
+      // prefer the GAIA name and icon.
+      useProfileNameAndIcon = false;
+      this.addWebUIListener(
+          'accounts-changed', this.updateAccounts_.bind(this));
+      this.updateAccounts_();
+    }
+    // </if>
+    if (useProfileNameAndIcon) {
+      settings.ProfileInfoBrowserProxyImpl.getInstance().getProfileInfo().then(
+          this.handleProfileInfo_.bind(this));
       this.addWebUIListener(
           'profile-info-changed', this.handleProfileInfo_.bind(this));
+    }
 
     this.syncBrowserProxy_ = settings.SyncBrowserProxyImpl.getInstance();
     this.syncBrowserProxy_.getSyncStatus().then(
@@ -318,6 +332,27 @@ Polymer({
     this.profileIconUrl_ = info.iconUrl;
   },
 
+  // <if expr="chromeos">
+  /**
+   * @private
+   * @suppress {checkTypes} The types only exists in Chrome OS builds, but
+   * Closure doesn't understand the <if> above.
+   */
+  updateAccounts_: async function() {
+    const /** @type {!Array<{settings.Account}>} */ accounts =
+        await settings.AccountManagerBrowserProxyImpl.getInstance()
+            .getAccounts();
+    // The user might not have any GAIA accounts (e.g. guest mode, Kerberos,
+    // Active Directory). In these cases the profile row is hidden, so there's
+    // nothing to do.
+    if (accounts.length == 0) {
+      return;
+    }
+    this.profileName_ = accounts[0].fullName;
+    this.profileIconUrl_ = accounts[0].pic;
+  },
+  // </if>
+
   /**
    * Handler for when the sync state is pushed from the browser.
    * @param {?settings.SyncStatus} syncStatus

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

@@ -33,9 +33,15 @@ cr.define('settings_people_page', function() {
         // UnifiedConsentUITest suite.
         unifiedConsentEnabled: false,
       });
+      if (cr.isChromeOS) {
+        loadTimeData.overrideValues({
+          // Account Manager is tested in the Chrome OS-specific section below.
+          isAccountManagerEnabled: false,
+        });
+      }
     });
 
-    setup(function() {
+    setup(async function() {
       browserProxy = new TestProfileInfoBrowserProxy();
       settings.ProfileInfoBrowserProxyImpl.instance_ = browserProxy;
 
@@ -47,15 +53,10 @@ cr.define('settings_people_page', function() {
       peoplePage.pageVisibility = settings.pageVisibility;
       document.body.appendChild(peoplePage);
 
-      return Promise
-          .all([
-            browserProxy.whenCalled('getProfileInfo'),
-            syncBrowserProxy.whenCalled('getSyncStatus')
-          ])
-          .then(function() {
+      await syncBrowserProxy.whenCalled('getSyncStatus');
+      await browserProxy.whenCalled('getProfileInfo');
       Polymer.dom.flush();
     });
-    });
 
     teardown(function() {
       peoplePage.remove();
@@ -587,18 +588,70 @@ cr.define('settings_people_page', function() {
   });
 
   if (cr.isChromeOS) {
-    suite('Chrome OS with SplitSettings', function() {
+    /** @implements {settings.AccountManagerBrowserProxy} */
+    class TestAccountManagerBrowserProxy extends TestBrowserProxy {
+      constructor() {
+        super([
+          'getAccounts',
+          'addAccount',
+          'reauthenticateAccount',
+          'removeAccount',
+          'showWelcomeDialogIfRequired',
+        ]);
+      }
+
+      /** @override */
+      getAccounts() {
+        this.methodCalled('getAccounts');
+        return Promise.resolve([{
+          id: '123',
+          accountType: 1,
+          isDeviceAccount: false,
+          isSignedIn: true,
+          unmigrated: false,
+          fullName: 'Primary Account',
+          email: 'user@gmail.com',
+          pic: 'data:image/png;base64,primaryAccountPicData',
+        }]);
+      }
+
+      /** @override */
+      addAccount() {
+        this.methodCalled('addAccount');
+      }
+
+      /** @override */
+      reauthenticateAccount(account_email) {
+        this.methodCalled('reauthenticateAccount', account_email);
+      }
+
+      /** @override */
+      removeAccount(account) {
+        this.methodCalled('removeAccount', account);
+      }
+
+      /** @override */
+      showWelcomeDialogIfRequired() {
+        this.methodCalled('showWelcomeDialogIfRequired');
+      }
+    }
+
+    suite('Chrome OS', function() {
       /** @type {SettingsPeoplePageElement} */
       let peoplePage = null;
       /** @type {settings.SyncBrowserProxy} */
       let browserProxy = null;
       /** @type {settings.ProfileInfoBrowserProxy} */
       let profileInfoBrowserProxy = null;
+      /** @type {settings.AccountManagerBrowserProxy} */
+      let accountManagerBrowserProxy = null;
 
       suiteSetup(function() {
         loadTimeData.overrideValues({
           // Simulate SplitSettings (OS settings in their own surface).
           showOSSettings: false,
+          // Simulate ChromeOSAccountManager (Google Accounts support).
+          isAccountManagerEnabled: true,
         });
       });
 
@@ -610,19 +663,33 @@ cr.define('settings_people_page', function() {
         settings.ProfileInfoBrowserProxyImpl.instance_ =
             profileInfoBrowserProxy;
 
+        accountManagerBrowserProxy = new TestAccountManagerBrowserProxy();
+        settings.AccountManagerBrowserProxyImpl.instance_ =
+            accountManagerBrowserProxy;
+
         PolymerTest.clearBody();
         peoplePage = document.createElement('settings-people-page');
         peoplePage.pageVisibility = settings.pageVisibility;
         document.body.appendChild(peoplePage);
 
-        Polymer.dom.flush();
+        await accountManagerBrowserProxy.whenCalled('getAccounts');
         await browserProxy.whenCalled('getSyncStatus');
+        Polymer.dom.flush();
       });
 
       teardown(function() {
         peoplePage.remove();
       });
 
+      test('GAIA name and picture', async () => {
+        chai.assert.include(
+            peoplePage.$$('#profile-icon').style.backgroundImage,
+            'data:image/png;base64,primaryAccountPicData');
+        assertEquals(
+            'Primary Account',
+            peoplePage.$$('#profile-name').textContent.trim());
+      });
+
       test('clicking profile row does not open change picture page', () => {
         // Simulate a signed-in user.
         sync_test_util.simulateSyncStatus({