[ProfilePicker]: Support picking a color for the profile creation flow.

The profile color will be used by different screens (Sign in promo,
local profile customization, may be sync promo) that belong to the
profile creation flow. This CL provides the pipeline to request the new
profile color from native and passing it to the sign in promo component.
A smarter profile color picking will be implemented in the future.

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

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
+import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js';
 
 /**
  * This is the data structure sent back and forth between C++ and JS.
@@ -15,6 +15,15 @@ import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
  */
 export let ProfileState;
 
+/**
+ * This is the data structure sent back and forth between C++ and JS.
+ * @typedef {{
+ *   colorId: number,
+ *   themeColor: string,
+ * }}
+ */
+export let AutogeneratedThemeColorInfo;
+
 /** @interface */
 export class ManageProfilesBrowserProxy {
   /**
@@ -27,6 +36,13 @@ export class ManageProfilesBrowserProxy {
    * @param {string} profilePath
    */
   launchSelectedProfile(profilePath) {}
+
+  /**
+   * Retrieves suggested theme for the new profile.
+   * @return {!Promise<!AutogeneratedThemeColorInfo>} A promise firing with the
+   * suggested theme info, once it has been retrieved.
+   */
+  getNewProfileSuggestedThemeInfo() {}
 }
 
 /** @implements {ManageProfilesBrowserProxy} */
@@ -40,6 +56,11 @@ export class ManageProfilesBrowserProxyImpl {
   launchSelectedProfile(profilePath) {
     chrome.send('launchSelectedProfile', [profilePath]);
   }
+
+  /** @override */
+  getNewProfileSuggestedThemeInfo() {
+    return sendWithPromise('getNewProfileSuggestedThemeInfo');
+  }
 }
 
 addSingletonGetter(ManageProfilesBrowserProxyImpl);

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

@@ -12,6 +12,7 @@ js_type_check("closure_compile") {
 
 js_library("profile_type_choice") {
   deps = [
+    "..:manage_profiles_browser_proxy",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
   ]

chrome/browser/resources/signin/profile_picker/profile_creation_flow/profile_type_choice.html

@@ -10,3 +10,7 @@
 <cr-icon-button class="icon-arrow-back" id="backButton"
     on-click="onTapBack_" aria-label="$i18n{backButtonLabel}">
 </cr-icon-button>
+
+<!-- TODO(crbug.com/1105865): Remove the debug info. -->
+<div style$="background-color:[[profileThemeInfo.themeColor]]; height:100px;">
+</div>

chrome/browser/resources/signin/profile_picker/profile_creation_flow/profile_type_choice.js

@@ -6,6 +6,8 @@ import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/cr_icons_css.m.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {AutogeneratedThemeColorInfo} from '../manage_profiles_browser_proxy.js';
 import {navigateToPreviousRoute} from '../navigation_behavior.js';
 
 Polymer({
@@ -13,9 +15,15 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  properties: {
+    /** @type {!AutogeneratedThemeColorInfo} */
+    profileThemeInfo: {
+      type: Object,
+    },
+  },
+
   /** @private */
   onTapBack_() {
     navigateToPreviousRoute();
   },
-
 });

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

@@ -11,7 +11,9 @@
 
   <cr-lazy-render id="profileTypeChoice">
     <template>
-      <profile-type-choice slot="view"></profile-type-choice>
+      <profile-type-choice slot="view"
+          profile-theme-info="[[newProfileThemeInfo]]">
+      </profile-type-choice>
     </template>
   </cr-lazy-render>
 </cr-view-manager>

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

@@ -10,6 +10,7 @@ import './profile_picker_shared_css.js';
 import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {AutogeneratedThemeColorInfo, ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl} from './manage_profiles_browser_proxy.js';
 import {NavigationBehavior, Routes} from './navigation_behavior.js';
 import {ensureLazyLoaded} from './profile_creation_flow/ensure_lazy_loaded.js';
 
@@ -20,9 +21,29 @@ Polymer({
 
   behaviors: [NavigationBehavior],
 
+  properties: {
+    /**
+     * Suggested new profile theme info for the profile creation flow.
+     * @type {!AutogeneratedThemeColorInfo}
+     */
+    newProfileThemeInfo: {
+      type: Object,
+      notify: true,
+    },
+  },
+
   /** @private {?Routes} */
   currentRoute_: null,
 
+  /** @private {?ManageProfilesBrowserProxy} */
+  manageProfilesBrowserProxy_: null,
+
+  /** @override */
+  ready() {
+    this.manageProfilesBrowserProxy_ =
+        ManageProfilesBrowserProxyImpl.getInstance();
+  },
+
   /**
    * @param {Routes} route
    * @param {string} step
@@ -51,10 +72,20 @@ Polymer({
       case Routes.MAIN:
         return Promise.resolve();
       case Routes.NEW_PROFILE:
-        return ensureLazyLoaded();
+        return Promise.all(
+            [this.initializeNewProfileThemeInfo_(), ensureLazyLoaded()]);
       default:
         // |this.currentRoute_| should be set by now.
         assertNotReached();
     }
   },
+
+  /**
+   * @return {!Promise}
+   * @private
+   */
+  async initializeNewProfileThemeInfo_() {
+    this.newProfileThemeInfo = await this.manageProfilesBrowserProxy_
+                                   .getNewProfileSuggestedThemeInfo();
+  },
 });

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

@@ -6,6 +6,7 @@
 
 #include "base/bind.h"
 #include "base/bind_helpers.h"
+#include "base/rand_util.h"
 #include "base/util/values/values_util.h"
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/profiles/profile_attributes_entry.h"
@@ -15,7 +16,10 @@
 #include "chrome/browser/profiles/profile_window.h"
 #include "chrome/browser/ui/browser_finder.h"
 #include "chrome/browser/ui/profile_picker.h"
+#include "chrome/common/search/generated_colors_info.h"
+#include "ui/base/l10n/l10n_util.h"
 #include "ui/base/webui/web_ui_util.h"
+#include "ui/gfx/color_utils.h"
 #include "ui/gfx/image/image.h"
 
 namespace {
@@ -37,6 +41,11 @@ void ProfilePickerHandler::RegisterMessages() {
       "launchSelectedProfile",
       base::BindRepeating(&ProfilePickerHandler::HandleLaunchSelectedProfile,
                           base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "getNewProfileSuggestedThemeInfo",
+      base::BindRepeating(
+          &ProfilePickerHandler::HandleGetNewProfileSuggestedThemeInfo,
+          base::Unretained(this)));
 }
 
 void ProfilePickerHandler::OnJavascriptAllowed() {
@@ -88,6 +97,25 @@ void ProfilePickerHandler::HandleLaunchSelectedProfile(
                  weak_factory_.GetWeakPtr()));
 }
 
+void ProfilePickerHandler::HandleGetNewProfileSuggestedThemeInfo(
+    const base::ListValue* args) {
+  AllowJavascript();
+  CHECK_EQ(1U, args->GetSize());
+  const base::Value& callback_id = args->GetList()[0];
+  // TODO(crbug.com/1108295): Implement more sophisticated algorithm to pick the
+  // new profile color.
+  size_t size = base::size(chrome_colors::kGeneratedColorsInfo);
+  size_t index = static_cast<size_t>(base::RandInt(0, size - 1));
+  const auto& color_info = chrome_colors::kGeneratedColorsInfo[index];
+
+  base::Value dict(base::Value::Type::DICTIONARY);
+  dict.SetIntKey("colorId", color_info.id);
+  dict.SetStringKey("themeColor",
+                    color_utils::SkColorToRgbaString(color_info.color));
+
+  ResolveJavascriptCallback(callback_id, std::move(dict));
+}
+
 void ProfilePickerHandler::OnSwitchToProfileComplete(
     Profile* profile,
     Profile::CreateStatus profile_create_status) {

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

@@ -26,6 +26,7 @@ class ProfilePickerHandler : public content::WebUIMessageHandler,
  private:
   void HandleMainViewInitialize(const base::ListValue* args);
   void HandleLaunchSelectedProfile(const base::ListValue* args);
+  void HandleGetNewProfileSuggestedThemeInfo(const base::ListValue* args);
 
   void OnSwitchToProfileComplete(Profile* profile,
                                  Profile::CreateStatus profile_create_status);