Settings[DICE]: Add account selectors and sync buttons.

Bug: 800970
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ifdfa802f6eb36414bc51d0442f572eafbf089a54
Reviewed-on: https://chromium-review.googlesource.com/887728
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Mihai Sardarescu <msarda@chromium.org>
Cr-Commit-Position: refs/heads/master@{#534576}

chrome/app/settings_strings.grdp

@@ -3051,6 +3051,18 @@
     <message name="IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT_SECONDARY" desc="The secondary text displayed to prompt users to sign in to chrome.">
       Sync for a personalized browsing experience, across your devices
     </message>
+    <message name="IDS_SETTINGS_PEOPLE_SYNC_ANOTHER_ACCOUNT" desc="The label for the button that lets the user choose another account to sync with.">
+      Use another account
+    </message>
+    <message name="IDS_SETTINGS_PEOPLE_SYNC_AS_NAME" desc="The label for the button that lets the user lock-in the account to sync with.">
+      Sync as <ph name="FULL_NAME">$1<ex>Bob Smith</ex></ph>
+    </message>
+    <message name="IDS_SETTINGS_PEOPLE_SYNCED_TO_NAME" desc="The text displayed to the user that the profile is currently synced to a specific account.">
+      Synced to <ph name="FULL_NAME">$1<ex>Bob Smith</ex></ph>
+    </message>
+    <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_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/compiled_resources2.gyp

@@ -260,6 +260,8 @@
       'dependencies': [
         '../compiled_resources2.gyp:route',
         '../prefs/compiled_resources2.gyp:prefs_behavior',
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_action_menu/compiled_resources2.gyp:cr_action_menu',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:icon',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
         'profile_info_browser_proxy',

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

@@ -103,14 +103,10 @@
       <neon-animatable route-path="default">
 <if expr="not chromeos">
         <template is="dom-if" if="[[diceEnabled_]]">
-          <div class="settings-box first two-line"
-              hidden="[[syncStatus.signedIn]]">
-            <div class="start">
-              <div>$i18n{peopleSignInPrompt}</div>
-              <div class="secondary">$i18n{peopleSignInPromptSecondary}</div>
-            </div>
-          </div>
-          <settings-sync-account-control></settings-sync-account-control>
+          <settings-sync-account-control
+              promo-label="$i18n{peopleSignInPrompt}"
+              promo-secondary-label="$i18n{peopleSignInPromptSecondary}">
+          </settings-sync-account-control>
         </template>
         <template is="dom-if" if="[[!diceEnabled_]]">
 </if>

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/html/icon.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="profile_info_browser_proxy.html">
 <link rel="import" href="sync_browser_proxy.html">
+<link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
@@ -17,48 +18,93 @@
         -webkit-margin-start: 20px;
       }
 
-      #profile-icon {
-        background: center / cover no-repeat;
+      .account-icon {
+        background: url(chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE)
+            center / cover no-repeat;
         border-radius: 20px;
         flex-shrink: 0;
         height: 40px;
         width: 40px;
       }
 
+      .account-icon.small {
+        height: 20px;
+        width: 20px;
+      }
+
+      #menu .dropdown-item {
+        padding: 12px;
+      }
+
+      #menu .dropdown-item .email {
+        -webkit-margin-start: 8px;
+      }
+
       .flex {
         display: flex;
         flex-direction: column;
       }
     </style>
-    <div class="settings-box first two-line">
-      <template is="dom-if" if="[[syncStatus]]">
-        <div id="profile-icon"
-            style="background-image: [[getIcon_(profileInfo_.iconUrl)]]">
-        </div>
+    <!-- TODO(scottchen): figure out what to show if sign-in (not just sync)
+        is not even allowed by policy (crbug/807061). -->
+    <div class="settings-box first two-line" hidden="[[syncStatus.signedIn]]">
+      <div class="start">
+        <div>[[promoLabel]]</div>
+        <div class="secondary">[[promoSecondaryLabel]]</div>
+      </div>
+      <div class="separator" hidden="[[shouldShowAvatarRow_]]"></div>
+      <paper-button class="primary-button" on-tap="onSigninTap_"
+          disabled="[[syncStatus.setupInProgress]]"
+          hidden="[[shouldShowAvatarRow_]]">
+        $i18n{syncSignin}
+      </paper-button>
+    </div>
+    <template is="dom-if" if="[[shouldShowAvatarRow_]]">
+      <div class="settings-box first two-line">
+        <img class="account-icon" src="[[shownAccount_.image]]">
         <div class="middle two-line no-min-width">
           <div class="flex text-elide">
-            <span>[[profileInfo_.name]]</span>
-            <div class="secondary" hidden="[[!syncStatus.signedIn]]">
-              [[syncStatus.signedInUsername]]
-            </div>
+            <span>
+              [[getNameDisplay_('$i18nPolymer{syncedToName}',
+                  shownAccount_.fullName, syncStatus.signedIn)]]
+            </span>
+            <div class="secondary">[[shownAccount_.email]]</div>
           </div>
+          <div class="separator" hidden="[[syncStatus.signedIn]]"></div>
+          <button is="paper-icon-button-light" id="dots"
+              on-tap="onMenuButtonTap_" title="$i18n{moreActions}"
+              class="icon-arrow-dropdown" hidden="[[syncStatus.signedIn]]">
+          </button>
         </div>
-        <template is="dom-if" if="[[showSignin_(syncStatus)]]">
-          <paper-button class="primary-button" on-tap="onSigninTap_"
-              disabled="[[syncStatus.setupInProgress]]">
-            $i18n{syncSignin}
-          </paper-button>
-        </template>
-        <template is="dom-if" if="[[syncStatus.signedIn]]">
-          <div class="separator"></div>
-          <paper-button id="disconnectButton" class="secondary-button"
-              on-tap="onDisconnectTap_"
-              disabled="[[syncStatus.setupInProgress]]">
-            $i18n{syncDisconnect}
-          </paper-button>
-        </template>
+        <!-- TODO(scottchen): Disable if sync not allowed by policy
+            (crbug/807061). -->
+        <paper-button class="action-button" on-tap="onSyncButtonTap_"
+            hidden="[[syncStatus.signedIn]]">
+          [[getSubstituteLabel_(
+              '$i18nPolymer{syncAsName}', shownAccount_.fullName)]]
+        </paper-button>
+        <!-- TODO(scottchen): Find out if there's a policy that forbids
+            turning off sync. If so, disable button (crbug/807061). -->
+        <paper-button class="secondary-button" on-tap="onTurnOffButtonTap_"
+            hidden="[[!syncStatus.signedIn]]">
+          $i18n{turnOffSync}
+        </paper-button>
+      </div>
+      <template is="dom-if" if="[[!syncStatus.signedIn]]" restamp>
+        <dialog is="cr-action-menu" id="menu">
+          <template is="dom-repeat" items="[[storedAccounts_]]">
+            <button class="dropdown-item" on-tap="onAccountTap_" slot="item">
+              <img class="account-icon small" src="[[item.image]]">
+              <span class="email">[[item.email]]</span>
+            </button>
+          </template>
+          <button class="dropdown-item" on-tap="onSigninTap_" slot="item">
+            <div class="account-icon small"></div>
+            <span class="email">$i18n{useAnotherAccount}</span>
+          </button>
+        </dialog>
       </template>
-    </div>
+    </template>
   </template>
   <script src="sync_account_control.js"></script>
 </dom-module>

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

@@ -12,74 +12,148 @@ Polymer({
   properties: {
     /**
      * The current sync status, supplied by SyncBrowserProxy.
-     * @type {?settings.SyncStatus}
+     * @type {!settings.SyncStatus}
      */
     syncStatus: Object,
 
-    /** @private {!settings.ProfileInfo} */
-    profileInfo_: Object,
+    /** @private {!Array<!settings.StoredAccount>} */
+    storedAccounts_: Object,
+
+    /** @private {?settings.StoredAccount} */
+    shownAccount_: Object,
+
+    promoLabel: String,
+
+    promoSecondaryLabel: String,
+
+    /** @private {boolean} */
+    shouldShowAvatarRow_: {
+      type: Boolean,
+      value: false,
+      computed: 'computeShouldShowAvatarRow_(storedAccounts_, syncStatus,' +
+          'storedAccounts_.length, syncStatus.signedIn)',
+    }
   },
 
+  observers: [
+    'onShownAccountShouldChange_(storedAccounts_.*, syncStatus.*)',
+  ],
+
   /** @private {?settings.SyncBrowserProxy} */
   syncBrowserProxy_: null,
 
   /** @override */
   attached: function() {
-    const profileInfoProxy = settings.ProfileInfoBrowserProxyImpl.getInstance();
-    profileInfoProxy.getProfileInfo().then(this.handleProfileInfo_.bind(this));
-    this.addWebUIListener(
-        'profile-info-changed', this.handleProfileInfo_.bind(this));
     this.syncBrowserProxy_ = settings.SyncBrowserProxyImpl.getInstance();
     this.syncBrowserProxy_.getSyncStatus().then(
         this.handleSyncStatus_.bind(this));
+    this.syncBrowserProxy_.getStoredAccounts().then(
+        this.handleStoredAccounts_.bind(this));
     this.addWebUIListener(
         'sync-status-changed', this.handleSyncStatus_.bind(this));
+    this.addWebUIListener(
+        'stored-accounts-updated', this.handleStoredAccounts_.bind(this));
+  },
+
+  /**
+   * @param {string} label
+   * @param {string} name
+   * @return {string}
+   * @private
+   */
+  getSubstituteLabel_: function(label, name) {
+    return loadTimeData.substituteString(label, name);
+  },
+
+  /**
+   * @param {string} label
+   * @param {string} name
+   * @return {string}
+   * @private
+   */
+  getNameDisplay_: function(label, name) {
+    return this.syncStatus.signedIn ?
+        loadTimeData.substituteString(label, name) :
+        name;
   },
 
   /**
-   * Handler for when the profile's icon and name is updated.
+   * @param {!Array<!settings.StoredAccount>} accounts
    * @private
-   * @param {!settings.ProfileInfo} info
    */
-  handleProfileInfo_: function(info) {
-    this.profileInfo_ = info;
+  handleStoredAccounts_: function(accounts) {
+    this.storedAccounts_ = accounts;
   },
 
   /**
    * Handler for when the sync state is pushed from the browser.
-   * @param {?settings.SyncStatus} syncStatus
+   * @param {!settings.SyncStatus} syncStatus
    * @private
    */
   handleSyncStatus_: function(syncStatus) {
     this.syncStatus = syncStatus;
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeShouldShowAvatarRow_: function() {
+    return this.syncStatus.signedIn || this.storedAccounts_.length > 0;
+  },
+
   /** @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();
+    }
   },
 
   /** @private */
-  onDisconnectTap_: function() {
+  onSyncButtonTap_: function() {
+    assert(this.shownAccount_);
+    this.syncBrowserProxy_.startSyncingWithEmail(this.shownAccount_.email);
+  },
+
+  /** @private */
+  onTurnOffButtonTap_: function() {
     /* This will route to people_page's disconnect dialog. */
     settings.navigateTo(settings.routes.SIGN_OUT);
   },
 
-  /**
-   * @param {string} iconUrl
-   * @return {string} A CSS image-set for multiple scale factors.
-   * @private
-   */
-  getIcon_: function(iconUrl) {
-    return cr.icon.getImage(iconUrl);
+  /** @private */
+  onMenuButtonTap_: function() {
+    const actionMenu =
+        /** @type {!CrActionMenuElement} */ (this.$$('#menu'));
+    actionMenu.showAt(assert(this.$$('#dots')));
   },
 
   /**
-   * @param {!settings.SyncStatus} syncStatus
-   * @return {boolean} Whether to show the "Sign in to Chrome" button.
+   * @param {!{model:
+   *          !{item: !settings.StoredAccount},
+   *        }} e
    * @private
    */
-  showSignin_: function(syncStatus) {
-    return !!syncStatus.signinAllowed && !syncStatus.signedIn;
+  onAccountTap_: function(e) {
+    this.shownAccount_ = e.model.item;
+    /** @type {!CrActionMenuElement} */ (this.$$('#menu')).close();
   },
+
+  /** @private */
+  onShownAccountShouldChange_: function() {
+    if (this.syncStatus.signedIn) {
+      for (let i = 0; i < this.storedAccounts_.length; i++) {
+        if (this.storedAccounts_[i].email == this.syncStatus.signedInUsername) {
+          this.shownAccount_ = this.storedAccounts_[i];
+          return;
+        }
+      }
+    } else {
+      this.shownAccount_ =
+          this.storedAccounts_ ? this.storedAccounts_[0] : null;
+    }
+  }
 });
\ No newline at end of file

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

@@ -9,6 +9,14 @@
  */
 cr.exportPath('settings');
 
+/**
+ * @typedef {{fullName: (string|undefined),
+ *            email: !string,
+ *            image: (string|undefined)}}
+ * @see chrome/browser/ui/webui/settings/people_handler.cc
+ */
+settings.StoredAccount;
+
 /**
  * @typedef {{childUser: (boolean|undefined),
  *            domain: (string|undefined),
@@ -140,6 +148,12 @@ cr.define('settings', function() {
      */
     getSyncStatus() {}
 
+    /**
+     * Gets a list of stored accounts.
+     * @return {!Promise<!Array<!settings.StoredAccount>>}
+     */
+    getStoredAccounts() {}
+
     /**
      * Function to invoke when the sync page has been navigated to. This
      * registers the UI as the "active" sync UI so that if the user tries to
@@ -167,6 +181,12 @@ cr.define('settings', function() {
      */
     setSyncEncryption(syncPrefs) {}
 
+    /**
+     * Start syncing with an account, specified by its email.
+     * @param {!string} email
+     */
+    startSyncingWithEmail(email) {}
+
     /**
      * Opens the Google Activity Controls url in a new tab.
      */
@@ -199,7 +219,6 @@ cr.define('settings', function() {
     attemptUserExit() {
       return chrome.send('AttemptUserExit');
     }
-
     // </if>
 
     /** @override */
@@ -207,6 +226,11 @@ cr.define('settings', function() {
       return cr.sendWithPromise('SyncSetupGetSyncStatus');
     }
 
+    /** @override */
+    getStoredAccounts() {
+      return cr.sendWithPromise('SyncSetupGetStoredAccounts');
+    }
+
     /** @override */
     didNavigateToSyncPage() {
       chrome.send('SyncSetupShowSetupUI');
@@ -229,6 +253,11 @@ cr.define('settings', function() {
           'SyncSetupSetEncryption', JSON.stringify(syncPrefs));
     }
 
+    /** @override */
+    startSyncingWithEmail(email) {
+      chrome.send('SyncSetupStartSyncingWithEmail', [email]);
+    }
+
     /** @override */
     openActivityControlsUrl() {
       chrome.metricsPrivate.recordUserAction(

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

@@ -11,6 +11,7 @@
 #include "base/strings/string_number_conversions.h"
 #include "base/strings/utf_string_conversions.h"
 #include "build/build_config.h"
+#include "build/buildflag.h"
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/content_settings/host_content_settings_map_factory.h"
 #include "chrome/browser/plugins/plugin_utils.h"
@@ -28,6 +29,7 @@
 #include "components/google/core/browser/google_util.h"
 #include "components/password_manager/core/browser/password_manager_constants.h"
 #include "components/safe_browsing/common/safe_browsing_prefs.h"
+#include "components/signin/core/browser/signin_features.h"
 #include "components/strings/grit/components_strings.h"
 #include "components/subresource_filter/core/browser/subresource_filter_features.h"
 #include "content/public/browser/web_ui_data_source.h"
@@ -1439,13 +1441,19 @@ void AddPeopleStrings(content::WebUIDataSource* html_source) {
     {"videoModeAccessibleText", IDS_SETTINGS_VIDEO_MODE_ACCESSIBLE_TEXT},
 #else   // !defined(OS_CHROMEOS)
     {"domainManagedProfile", IDS_SETTINGS_PEOPLE_DOMAIN_MANAGED_PROFILE},
-    {"peopleSignInPrompt", IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT},
-    {"peopleSignInPromptSecondary",
-     IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT_SECONDARY},
     {"editPerson", IDS_SETTINGS_EDIT_PERSON},
     {"profileNameAndPicture", IDS_SETTINGS_PROFILE_NAME_AND_PICTURE},
     {"showShortcutLabel", IDS_SETTINGS_PROFILE_SHORTCUT_TOGGLE_LABEL},
 #endif  // defined(OS_CHROMEOS)
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+    {"peopleSignInPrompt", IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT},
+    {"peopleSignInPromptSecondary",
+     IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT_SECONDARY},
+    {"useAnotherAccount", IDS_SETTINGS_PEOPLE_SYNC_ANOTHER_ACCOUNT},
+    {"syncAsName", IDS_SETTINGS_PEOPLE_SYNC_AS_NAME},
+    {"syncedToName", IDS_SETTINGS_PEOPLE_SYNCED_TO_NAME},
+    {"turnOffSync", IDS_SETTINGS_PEOPLE_SYNC_TURN_OFF},
+#endif
     {"syncOverview", IDS_SETTINGS_SYNC_OVERVIEW},
     {"syncDisabledByAdministrator",
      IDS_SETTINGS_SYNC_DISABLED_BY_ADMINISTRATOR},

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

@@ -64,6 +64,13 @@
 #else
 #include "components/signin/core/browser/signin_manager.h"
 #endif
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+// TODO(scottchen): no longer need icon_util once we start loading real
+// account pictures.
+#include "chrome/browser/profiles/profile_avatar_icon_util.h"
+#include "chrome/browser/signin/account_tracker_service_factory.h"
+#include "components/signin/core/browser/account_tracker_service.h"
+#endif
 
 using browser_sync::ProfileSyncService;
 using content::WebContents;
@@ -186,7 +193,14 @@ PeopleHandler::PeopleHandler(Profile* profile)
     : profile_(profile),
       configuring_sync_(false),
       signin_observer_(this),
-      sync_service_observer_(this) {}
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+      sync_service_observer_(this),
+      account_tracker_observer_(this) {
+}
+#else
+      sync_service_observer_(this) {
+}
+#endif
 
 PeopleHandler::~PeopleHandler() {
   // Early exit if running unit tests (no actual WebUI is attached).
@@ -231,6 +245,16 @@ void PeopleHandler::RegisterMessages() {
       "SyncSetupStartSignIn",
       base::Bind(&PeopleHandler::HandleStartSignin, base::Unretained(this)));
 #endif
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+  web_ui()->RegisterMessageCallback(
+      "SyncSetupGetStoredAccounts",
+      base::BindRepeating(&PeopleHandler::HandleGetStoredAccounts,
+                          base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "SyncSetupStartSyncingWithEmail",
+      base::BindRepeating(&PeopleHandler::HandleStartSyncingWithEmail,
+                          base::Unretained(this)));
+#endif
 }
 
 void PeopleHandler::OnJavascriptAllowed() {
@@ -249,12 +273,22 @@ void PeopleHandler::OnJavascriptAllowed() {
       ProfileSyncServiceFactory::GetInstance()->GetForProfile(profile_));
   if (sync_service)
     sync_service_observer_.Add(sync_service);
+
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+  AccountTrackerService* account_tracker(
+      AccountTrackerServiceFactory::GetForProfile(profile_));
+  if (account_tracker)
+    account_tracker_observer_.Add(account_tracker);
+#endif
 }
 
 void PeopleHandler::OnJavascriptDisallowed() {
   profile_pref_registrar_.RemoveAll();
   signin_observer_.RemoveAll();
   sync_service_observer_.RemoveAll();
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+  account_tracker_observer_.RemoveAll();
+#endif
 }
 
 #if !defined(OS_CHROMEOS)
@@ -407,6 +441,60 @@ void PeopleHandler::HandleSetDatatypes(const base::ListValue* args) {
     ProfileMetrics::LogProfileSyncInfo(ProfileMetrics::SYNC_CHOOSE);
 }
 
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+void PeopleHandler::HandleGetStoredAccounts(const base::ListValue* args) {
+  CHECK_EQ(1U, args->GetSize());
+  const base::Value* callback_id;
+  CHECK(args->Get(0, &callback_id));
+
+  ResolveJavascriptCallback(*callback_id, *GetStoredAccountsList());
+}
+
+void PeopleHandler::OnAccountUpdated(const AccountInfo& info) {
+  FireWebUIListener("stored-accounts-updated", *GetStoredAccountsList());
+}
+
+void PeopleHandler::OnAccountRemoved(const AccountInfo& info) {
+  FireWebUIListener("stored-accounts-updated", *GetStoredAccountsList());
+}
+
+std::unique_ptr<base::ListValue> PeopleHandler::GetStoredAccountsList() {
+  std::vector<AccountInfo> accounts =
+      signin_ui_util::GetAccountsForDicePromos(profile_);
+
+  std::unique_ptr<base::ListValue> accounts_list(new base::ListValue);
+  accounts_list->Reserve(accounts.size());
+
+  for (auto const& account : accounts) {
+    accounts_list->GetList().push_back(
+        base::Value(base::Value::Type::DICTIONARY));
+    base::Value& acc = accounts_list->GetList().back();
+    acc.SetKey("email", base::Value(account.email));
+    acc.SetKey("fullName", base::Value(account.full_name));
+    // TODO(scottchen): should return account.picture_url as encoded image.
+    acc.SetKey("image", base::Value(profiles::GetPlaceholderAvatarIconUrl()));
+  }
+
+  return accounts_list;
+}
+
+void PeopleHandler::HandleStartSyncingWithEmail(const base::ListValue* args) {
+  const base::Value* email;
+  CHECK(args->Get(0, &email));
+
+  Browser* browser =
+      chrome::FindBrowserWithWebContents(web_ui()->GetWebContents());
+
+  AccountTrackerService* account_tracker =
+      AccountTrackerServiceFactory::GetForProfile(profile_);
+  AccountInfo account =
+      account_tracker->FindAccountInfoByEmail(email->GetString());
+
+  signin_ui_util::EnableSync(
+      browser, account, signin_metrics::AccessPoint::ACCESS_POINT_SETTINGS);
+}
+#endif
+
 void PeopleHandler::HandleSetEncryption(const base::ListValue* args) {
   DCHECK(!sync_startup_tracker_);
 
@@ -786,7 +874,6 @@ PeopleHandler::GetSyncStatusDictionary() {
                          signin_ui_util::GetAuthenticatedUsername(signin));
   sync_status->SetBoolean("hasUnrecoverableError",
                           service && service->HasUnrecoverableError());
-
   return sync_status;
 }
 

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

@@ -14,13 +14,19 @@
 #include "base/strings/utf_string_conversions.h"
 #include "base/timer/timer.h"
 #include "build/build_config.h"
+#include "build/buildflag.h"
 #include "chrome/browser/sync/sync_startup_tracker.h"
 #include "chrome/browser/ui/webui/settings/settings_page_ui_handler.h"
 #include "chrome/browser/ui/webui/signin/login_ui_service.h"
 #include "components/prefs/pref_change_registrar.h"
+#include "components/signin/core/browser/signin_features.h"
 #include "components/signin/core/browser/signin_manager_base.h"
 #include "components/sync/driver/sync_service_observer.h"
 
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+#include "components/signin/core/browser/account_tracker_service.h"
+#endif
+
 class LoginUIService;
 class SigninManagerBase;
 
@@ -45,6 +51,9 @@ namespace settings {
 class PeopleHandler : public SettingsPageUIHandler,
                       public SigninManagerBase::Observer,
                       public SyncStartupTracker::Observer,
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+                      public AccountTrackerService::Observer,
+#endif
                       public LoginUIService::LoginUI,
                       public syncer::SyncServiceObserver {
  public:
@@ -122,6 +131,12 @@ class PeopleHandler : public SettingsPageUIHandler,
   // syncer::SyncServiceObserver implementation.
   void OnStateChanged(syncer::SyncService* sync) override;
 
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+  // AccountTrackerService::Observer implementation.
+  void OnAccountUpdated(const AccountInfo& info) override;
+  void OnAccountRemoved(const AccountInfo& info) override;
+#endif
+
   // Returns a newly created dictionary with a number of properties that
   // correspond to the status of sync.
   std::unique_ptr<base::DictionaryValue> GetSyncStatusDictionary();
@@ -155,6 +170,12 @@ class PeopleHandler : public SettingsPageUIHandler,
       signin_metrics::AccessPoint access_point);
 #endif
 
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+  void HandleGetStoredAccounts(const base::ListValue* args);
+  void HandleStartSyncingWithEmail(const base::ListValue* args);
+  std::unique_ptr<base::ListValue> GetStoredAccountsList();
+#endif
+
   // Displays spinner-only UI indicating that something is going on in the
   // background.
   // TODO(kochi): better to show some message that the user can understand what
@@ -211,6 +232,11 @@ class PeopleHandler : public SettingsPageUIHandler,
   ScopedObserver<browser_sync::ProfileSyncService, PeopleHandler>
       sync_service_observer_;
 
+#if BUILDFLAG(ENABLE_DICE_SUPPORT)
+  ScopedObserver<AccountTrackerService, PeopleHandler>
+      account_tracker_observer_;
+#endif
+
   DISALLOW_COPY_AND_ASSIGN(PeopleHandler);
 };
 

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

@@ -7,6 +7,7 @@ class TestSyncBrowserProxy extends TestBrowserProxy {
   constructor() {
     super([
       'getSyncStatus',
+      'getStoredAccounts',
       'signOut',
     ]);
   }
@@ -20,6 +21,12 @@ class TestSyncBrowserProxy extends TestBrowserProxy {
     });
   }
 
+  /** @override */
+  getStoredAccounts() {
+    this.methodCalled('getStoredAccounts');
+    return Promise.resolve([]);
+  }
+
   /** @override */
   signOut(deleteProfile) {
     this.methodCalled('signOut', deleteProfile);

components/signin/core/browser/account_tracker_service.cc

@@ -204,12 +204,12 @@ void AccountTrackerService::StartTrackingAccount(
 void AccountTrackerService::StopTrackingAccount(const std::string& account_id) {
   DVLOG(1) << "StopTracking " << account_id;
   if (base::ContainsKey(accounts_, account_id)) {
-    AccountState& state = accounts_[account_id];
+    AccountState state = std::move(accounts_[account_id]);
     RemoveFromPrefs(state);
+    accounts_.erase(account_id);
+
     if (!state.info.gaia.empty())
       NotifyAccountRemoved(state);
-
-    accounts_.erase(account_id);
   }
 }