[ProfilePicker]: Show profile list in the profile picker.

Screenshot: https://drive.google.com/file/d/18bGaUJgUnLlOepkFNhcaL1dfCJGOnHMw/view?usp=sharing

Bug: 1063856
Change-Id: I85c2ed37f84b941a052af604623db44615832a00
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2277810
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#785671}

chrome/browser/resources/signin/profile_picker/BUILD.gn

@@ -49,5 +49,6 @@ html_to_js("web_components") {
   js_files = [
     "profile_picker_app.js",
     "profile_picker_main_view.js",
+    "profile_card.js",
   ]
 }

chrome/browser/resources/signin/profile_picker/manage_profiles_browser_proxy.js

@@ -4,12 +4,29 @@
 
 import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
 
+/**
+ * This is the data structure sent back and forth between C++ and JS.
+ * @typedef {{
+ *   profilePath: string,
+ *   localProfileName: string,
+ *   gaiaName: string,
+ *   avatarIcon: string,
+ * }}
+ */
+export let ProfileState;
+
 /** @interface */
 export class ManageProfilesBrowserProxy {
   /**
    * Initializes profile picker main view.
    */
   initializeMainView() {}
+
+  /**
+   * Opens picked profile and closes the profile picker.
+   * @param {string} profilePath
+   */
+  openSelectedProfile(profilePath) {}
 }
 
 /** @implements {ManageProfilesBrowserProxy} */
@@ -18,6 +35,11 @@ export class ManageProfilesBrowserProxyImpl {
   initializeMainView() {
     chrome.send('mainViewInitialize');
   }
+
+  /** @override */
+  openSelectedProfile(profilePath) {
+    // TODO(msalama): Implement open selected profile.
+  }
 }
 
 addSingletonGetter(ManageProfilesBrowserProxyImpl);

chrome/browser/resources/signin/profile_picker/profile_card.html

@@ -0,0 +1,40 @@
+<style>
+  cr-button {
+    --text-color: inherit;
+    background-color: rgb(248, 249, 250);
+    border: none;
+    border-radius: inherit;
+    box-shadow: none;
+    flex-direction: column;
+    height: inherit;
+    padding: 0;
+    width: inherit;
+  }
+
+  :host-context(.focus-outline-visible) cr-button:focus {
+    box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
+  }
+
+  .profile-avatar {
+    border-radius: 37px;
+    height: var(--avatar-icon-size);
+    width: var(--avatar-icon-size);
+  }
+
+  .profile-info {
+    height: 20px;
+    overflow: hidden;
+    padding: 16px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 146px;
+  }
+</style>
+
+<cr-button on-click="onProfileClick_">
+  <!-- TODO(msalama): Implement editing local profile name in place -->
+  <div class="profile-info">[[profileState.localProfileName]]</div>
+  <img class="profile-avatar" alt="" src="[[profileState.avatarIcon]]">
+  <div class="profile-info">[[profileState.gaiaName]]</div>
+</cr-button>

chrome/browser/resources/signin/profile_picker/profile_card.js

@@ -0,0 +1,37 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl, ProfileState} from './manage_profiles_browser_proxy.js';
+
+Polymer({
+  is: 'profile-card',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    /**  @type {!ProfileState} */
+    profileState: {
+      type: Object,
+    }
+  },
+
+  /** @private {ManageProfilesBrowserProxy} */
+  manageProfilesBrowserProxy_: null,
+
+  /** @override */
+  ready() {
+    this.manageProfilesBrowserProxy_ =
+        ManageProfilesBrowserProxyImpl.getInstance();
+  },
+
+  /** @private */
+  onProfileClick_() {
+    this.manageProfilesBrowserProxy_.openSelectedProfile(
+        this.profileState.profilePath);
+  },
+
+});

chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html

@@ -1,23 +1,28 @@
 <style>
+  :host {
+    --avatar-icon-size: 74px;
+  }
+
  .profiles-container {
-    --grid-gutter: 12px;
+    --grid-gutter: 24px;
     --max-columns: 4;
     --profile-item-height:178px;
     --profile-item-width: 162px;
     align-items: center;
     display: grid;
-    height: 80%;
     grid-column-gap: var(--grid-gutter);
     grid-row-gap: var(--grid-gutter);
     grid-template-columns: repeat(auto-fit, var(--profile-item-width));
     justify-content: center;
     margin: auto;
     max-width: calc(var(--profile-item-width) * var(--max-columns) +
         var(--grid-gutter) * var(--max-columns));
+    padding: 20px;
  }
 
-.profile-item {
+ .profile-item {
     align-items: center;
+    border-radius: 12px;
     display: flex;
     flex-direction: column;
     height: var(--profile-item-height);
@@ -28,23 +33,26 @@
  #addProfile {
   border: 1px dashed;
   border-color:  var(--google-grey-400);
-  border-radius: 12px;
  }
 
  cr-icon-button[iron-icon='profiles:add'] {
-  --cr-icon-button-icon-size: 74px;
+  --cr-icon-button-icon-size: var(--avatar-icon-size);
   --cr-icon-button-size: 84px;
   --cr-icon-button-fill-color: var(--google-grey-refresh-100);
   --cr-icon-button-margin-end: 0px;
   --cr-icon-button-margin-start: 0px;
   --cr-icon-button-stroke-color: var(--google-grey-refresh-700);
  }
 
-@media (prefers-color-scheme: dark) {
+ @media (prefers-color-scheme: dark) {
   /* TODO(msalama): Dark mode mocks not ready yet.*/
-}
+ }
 </style>
 <div class="profiles-container">
+  <template is="dom-repeat"
+      hidden="[[!profilesList_]]" items="[[profilesList_]]">
+    <profile-card class="profile-item" profile-state="[[item]]"></profile-card>
+  </template>
   <div id="addProfile" class="profile-item">
     <!-- TODO(msalama): Add title, aria-label once strings are ready-->
     <cr-icon-button iron-icon="profiles:add"

chrome/browser/resources/signin/profile_picker/profile_picker_main_view.js

@@ -5,11 +5,12 @@
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import './icons.js';
+import './profile_card.js';
 
 import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl} from './manage_profiles_browser_proxy.js';
+import {ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl, ProfileState} from './manage_profiles_browser_proxy.js';
 import {navigateTo, NavigationBehavior, Routes} from './navigation_behavior.js';
 
 
@@ -20,6 +21,16 @@ Polymer({
 
   behaviors: [WebUIListenerBehavior, NavigationBehavior],
 
+  properties: {
+    /**
+     * Profiles list supplied by ManageProfilesBrowserProxy.
+     * @type {!Array<!ProfileState>}
+     */
+    profilesList_: {
+      type: Object,
+    },
+  },
+
   /** @private {?ManageProfilesBrowserProxy} */
   manageProfilesBrowserProxy_: null,
 
@@ -38,10 +49,11 @@ Polymer({
 
   /**
    * Handler for when the profiles list are updated.
+   * @param {!Array<!ProfileState>} profilesList
    * @private
    */
-  handleProfilesListChanged_() {
-    // TODO(msalama): update profiles list to be displayed.
+  handleProfilesListChanged_(profilesList) {
+    this.profilesList_ = profilesList;
   },
 
   /** @private */

chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd

@@ -19,6 +19,9 @@
       <include name="IDR_PROFILE_PICKER_PROFILE_PICKER_APP_JS"
                file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_picker_app.js"
                use_base_dir="false" type="BINDATA" preprocess="true"/>
+      <include name="IDR_PROFILE_PICKER_PROFILE_CARD_JS"
+               file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_card.js"
+               use_base_dir="false" type="BINDATA" preprocess="true"/>
     </includes>
     <structures>
       <structure

chrome/browser/ui/webui/signin/profile_picker_handler.cc

@@ -6,6 +6,18 @@
 
 #include "base/bind.h"
 #include "base/bind_helpers.h"
+#include "base/util/values/values_util.h"
+#include "chrome/browser/browser_process.h"
+#include "chrome/browser/profiles/profile_attributes_entry.h"
+#include "chrome/browser/profiles/profile_attributes_storage.h"
+#include "chrome/browser/profiles/profile_avatar_icon_util.h"
+#include "chrome/browser/profiles/profile_manager.h"
+#include "ui/base/webui/web_ui_util.h"
+#include "ui/gfx/image/image.h"
+
+namespace {
+const size_t kAvatarIconSize = 74;
+}
 
 ProfilePickerHandler::ProfilePickerHandler() = default;
 
@@ -29,6 +41,28 @@ void ProfilePickerHandler::PushProfilesList() {
 }
 
 base::Value ProfilePickerHandler::GetProfilesList() {
-  // TODO(msalama): Return profiles list.
-  return base::Value(base::Value::Type::LIST);
+  base::ListValue profiles_list;
+  std::vector<ProfileAttributesEntry*> entries =
+      g_browser_process->profile_manager()
+          ->GetProfileAttributesStorage()
+          .GetAllProfilesAttributesSortedByName();
+  for (const ProfileAttributesEntry* entry : entries) {
+    // Don't show profiles still in the middle of being set up as new legacy
+    // supervised users.
+    if (entry->IsOmitted())
+      continue;
+
+    auto profile_entry = std::make_unique<base::DictionaryValue>();
+    profile_entry->SetKey("profilePath",
+                          util::FilePathToValue(entry->GetPath()));
+    profile_entry->SetString("localProfileName", entry->GetLocalProfileName());
+    // GAIA name can be empty, if the profile is not signed in to chrome.
+    profile_entry->SetString("gaiaName", entry->GetGAIANameToDisplay());
+    gfx::Image icon = profiles::GetSizedAvatarIcon(
+        entry->GetAvatarIcon(), true, kAvatarIconSize, kAvatarIconSize);
+    std::string icon_url = webui::GetBitmapDataUrl(icon.AsBitmap());
+    profile_entry->SetString("avatarIcon", icon_url);
+    profiles_list.Append(std::move(profile_entry));
+  }
+  return std::move(profiles_list);
 }