[ProfilePicker]: Local profile customization header.

This CL adds backgrond illustration, back button, title.

Screenshot:
https://drive.google.com/file/d/1W9FMBB7ygkN3wtjxXon1SrEemfLWF2L_/view?usp=sharing

Bug: 1115056
Change-Id: Ic3aec74621ce6ef8e4aba8ad054e9ed99b681160
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2362894
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Alex Ilin <alexilin@chromium.org>
Reviewed-by: David Roger <droger@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799721}

chrome/app/profiles_strings.grdp

@@ -713,5 +713,8 @@
     <message name="IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_NOT_NOW_BUTTON_LABEL" desc="Label for a button to decline a prompt to sign in">
       Not now
     </message>
+    <message name="IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_TITLE" desc="Title for the local profile customiztion screen on the picker.">
+      Customize your profile
+    </message>
   </if>
 </grit-part>

chrome/app/profiles_strings_grdp/IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_TITLE.png.sha1

+b407b0a9308c1a05cb8e1255d836244a733a844a
\ No newline at end of file

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

@@ -17,6 +17,10 @@ element.innerHTML = `
     <g id="account-circle" viewBox="0 0 24 24" fill="var(--footer-text-color)" width="18px" height="18px">
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
     </g>
+
+    <g id="customize-banner" viewBox="0 0 678 266" width="678" height="266" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M70.51 115.677c-2.425 3.218-7.276 3.053-9.621-.248-6.711-9.738-6.63-23.107.97-32.928 7.762-9.903 20.538-12.957 31.453-8.5 3.639 1.65 4.852 6.272 2.426 9.408l-25.227 32.268zM531.612 112.52c1.744-1.18 4.236-.252 4.818 1.77 1.744 6.069-.582 12.811-6.064 16.351-5.566 3.624-12.544 2.95-17.279-1.18-1.578-1.433-1.412-3.961.332-5.141l18.193-11.8zM140 128.499c0 2.519-1.98 4.498-4.5 4.498-2.52.09-4.5-1.979-4.5-4.498 0-2.52 1.98-4.499 4.5-4.499 2.43 0 4.5 1.979 4.5 4.499z" fill="var(--theme-shape-color)"/><path d="M160.541 53.57c.993-4.303 5.297-7.035 9.601-6.042l18.294 4.222c4.304.993 7.035 5.297 6.042 9.602-.993 4.304-5.297 7.036-9.602 6.042L166.5 63.173c-4.304-.91-6.953-5.298-5.959-9.602z" stroke="var(--theme-shape-color)" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M526 69c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11zM608.042 81.007L630.448 83c.944.08 1.631.876 1.545 1.753l-2.146 20.805c-.086.877-.945 1.515-1.889 1.435L605.552 105c-.944-.079-1.631-.876-1.545-1.753l2.146-20.805c.086-.877.945-1.515 1.889-1.435z" stroke="var(--theme-shape-color)" stroke-width="2"/>
+    </g>
   </defs>
 </svg>`;
 document.head.appendChild(element);

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

@@ -21,7 +21,9 @@ export let ProfileState;
  * This is the data structure sent back and forth between C++ and JS.
  * @typedef {{
  *   colorId: number,
- *   themeColor: string,
+ *   themeFrameColor: string,
+ *   themeShapeColor: string,
+ *   themeFrameTextColor: string,
  * }}
  */
 export let AutogeneratedThemeColorInfo;

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

@@ -28,7 +28,10 @@ js_library("profile_type_choice") {
 
 js_library("local_profile_customization") {
   deps = [
+    "..:manage_profiles_browser_proxy",
+    "..:navigation_behavior",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
   ]
 }
 
@@ -36,5 +39,6 @@ html_to_js("web_components") {
   js_files = [
     "profile_type_choice.js",
     "local_profile_customization.js",
+    "shared_css.js",
   ]
 }

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

-<div> Local profile customization </div>
+<style include="profile-creation-shared">
\ No newline at end of file
+  #title {
+    color: var(--theme-text-color);
+    font-weight: normal;
+    padding-top: 84px;
+    text-align: center;
+  }
+</style>
+
+<div id="headerContainer"
+    style$="--theme-frame-color:[[profileThemeInfo.themeFrameColor]];
+            --theme-text-color:[[profileThemeInfo.themeFrameTextColor]];
+            --theme-shape-color:[[profileThemeInfo.themeShapeColor]]">
+  <iron-icon class="banner" icon="profiles:customize-banner"></iron-icon>
+  <cr-icon-button id="backButton" class="icon-arrow-back"
+        on-click="onClickBack_" aria-label="$i18n{backButtonLabel}">
+  </cr-icon-button>
+  <h2 id="title">$i18n{localProfileCreationTitle}<h2>
+  <img class="avatar" src="chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE">
+</div>

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

@@ -2,10 +2,29 @@
 // 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_icon_button/cr_icon_button.m.js';
+import './shared_css.js';
+import '../icons.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({
   is: 'local-profile-customization',
 
   _template: html`{__html_template__}`,
+
+  properties: {
+    /** @type {!AutogeneratedThemeColorInfo} */
+    profileThemeInfo: {
+      type: Object,
+    },
+  },
+
+  /** @private */
+  onClickBack_() {
+    navigateToPreviousRoute();
+  },
 });

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

-<style include="action-link-style cr-icons profile-picker-shared">
+<style include="profile-creation-shared">
   #actionContainer {
     align-items: center;
     display: flex;
     flex-direction: column;
   }
 
-  #backButton {
-    --cr-icon-button-icon-size: 14px;
-    --cr-icon-button-margin-start: 4px;
-    --cr-icon-button-size: 25px;
-    margin-top: 4px;
-  }
-
-  #banner {
+  #signinPromoBanner {
     background-image: url(profile_creation_flow/images/banner_light_image.svg);
-    background-size: 100% 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    width: 100%;
   }
 
   @media (prefers-color-scheme: dark) {
-    #banner {
+    #signinPromoBanner {
       background-image:
           url(profile_creation_flow/images/banner_dark_image.svg);
     }
@@ -34,19 +22,6 @@
     width: 100%;
   }
 
-  #bannerContainer > img {
-    --avatar-size: 100px;
-    border: 2px solid var(--md-background-color);
-    border-radius: 50%;
-    bottom: calc(var(--avatar-size)/-2);
-    height: var(--avatar-size);
-    left: 0;
-    margin: auto;
-    position: absolute;
-    right: 0;
-    width: var(--avatar-size);
-  }
-
   #notNowButton {
     background: none;
     border: none;
@@ -72,13 +47,14 @@
   }
 </style>
 
-<div id="bannerContainer"
-    style$="background-color:[[profileThemeInfo.themeColor]];">
+<div id="headerContainer"
+    style$="--theme-frame-color:[[profileThemeInfo.themeFrameColor]];
+            --theme-text-color:[[profileThemeInfo.themeFrameTextColor]];">
   <cr-icon-button id="backButton" class="icon-arrow-back"
-        on-click="onTapBack_" aria-label="$i18n{backButtonLabel}">
+      on-click="onClickBack_" aria-label="$i18n{backButtonLabel}">
   </cr-icon-button>
-    <div id="banner"></div>
-    <img src="chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE">
+  <div id="signinPromoBanner" class="banner"></div>
+  <img class="avatar" src="chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE">
 </div>
 <div class="title-container">
   <h2>$i18n{profileTypeChoiceTitle}</h2>

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

@@ -4,8 +4,7 @@
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
-import 'chrome://resources/cr_elements/cr_icons_css.m.js';
-import '../profile_picker_shared_css.js';
+import './shared_css.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -36,7 +35,7 @@ Polymer({
   },
 
   /** @private */
-  onTapBack_() {
+  onClickBack_() {
     navigateToPreviousRoute();
   },
 });

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

+<template>
+  <style include="cr-icons profile-picker-shared">
+    #headerContainer {
+      background-color: var(--theme-frame-color);
+      height: 266px;
+      position: relative;
+      width: 100%;
+    }
+
+    .banner {
+      background-size: 100% 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    #backButton {
+      --cr-icon-button-fill-color: var(--theme-text-color);
+      --cr-icon-button-icon-size: 14px;
+      --cr-icon-button-margin-start: 4px;
+      --cr-icon-button-size: 25px;
+      margin-top: 4px;
+    }
+
+    .avatar {
+      --avatar-size: 100px;
+      border: 2px solid var(--md-background-color);
+      border-radius: 50%;
+      bottom: calc(var(--avatar-size)/-2);
+      height: var(--avatar-size);
+      left: 0;
+      margin: auto;
+      position: absolute;
+      right: 0;
+      width: var(--avatar-size);
+    }
+  </style>
+</template>

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

+// 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/shared_vars_css.m.js';
+import 'chrome://resources/cr_elements/cr_icons_css.m.js';
+
+import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import '../profile_picker_shared_css.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+<dom-module id="profile-creation-shared">{__html_template__}</dom-module>
+`;
+document.body.appendChild(template.content.cloneNode(true));

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

@@ -19,7 +19,9 @@
 
   <cr-lazy-render id="localProfileCustomization">
     <template>
-      <local-profile-customization slot="view"></local-profile-customizatione>
+      <local-profile-customization slot="view"
+          profile-theme-info="[[newProfileThemeInfo]]">
+      </local-profile-customizatione>
     </template>
   </cr-lazy-render>
 </cr-view-manager>

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

@@ -52,6 +52,9 @@
       <include name="IDR_PROFILE_PICKER_PROFILE_PICKER_SHARED_CSS_JS"
                file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_picker_shared_css.js"
                use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_SHARED_CSS_JS"
+               file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_creation_flow/shared_css.js"
+               use_base_dir="false" type="BINDATA"/>
     </includes>
     <structures>
       <structure

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

@@ -22,6 +22,7 @@
 #include "chrome/browser/ui/signin/profile_colors_util.h"
 #include "chrome/browser/ui/webui/profile_helper.h"
 #include "chrome/common/pref_names.h"
+#include "chrome/common/themes/autogenerated_theme_util.h"
 #include "chrome/common/webui_url_constants.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/webui/web_ui_util.h"
@@ -154,10 +155,15 @@ void ProfilePickerHandler::HandleGetNewProfileSuggestedThemeInfo(
   CHECK_EQ(1U, args->GetSize());
   const base::Value& callback_id = args->GetList()[0];
   chrome_colors::ColorInfo color_info = GenerateNewProfileColor();
+  auto theme_colors = GetAutogeneratedThemeColors(color_info.color);
   base::Value dict(base::Value::Type::DICTIONARY);
   dict.SetIntKey("colorId", color_info.id);
-  dict.SetStringKey("themeColor",
-                    color_utils::SkColorToRgbaString(color_info.color));
+  dict.SetStringKey("themeFrameColor",
+                    color_utils::SkColorToRgbaString(theme_colors.frame_color));
+  dict.SetStringKey("themeShapeColor", color_utils::SkColorToRgbaString(
+                                           theme_colors.active_tab_color));
+  dict.SetStringKey("themeFrameTextColor", color_utils::SkColorToRgbaString(
+                                               theme_colors.frame_text_color));
 
   ResolveJavascriptCallback(callback_id, std::move(dict));
 }

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

@@ -66,6 +66,8 @@ void AddStrings(content::WebUIDataSource* html_source) {
        IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_SIGNIN_BUTTON_LABEL},
       {"notNowButtonLabel",
        IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_NOT_NOW_BUTTON_LABEL},
+      {"localProfileCreationTitle",
+       IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_TITLE},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
   html_source->AddBoolean("askOnStartup",

chrome/test/data/webui/signin/test_manage_profiles_browser_proxy.js

@@ -50,7 +50,12 @@ export class TestManageProfilesBrowserProxy extends TestBrowserProxy {
   /** @override */
   getNewProfileSuggestedThemeInfo() {
     this.methodCalled('getNewProfileSuggestedThemeInfo');
-    return Promise.resolve({colorId: 0, themeColor: ''});
+    return Promise.resolve({
+      colorId: 0,
+      themeFrameColor: '',
+      themeShapeColor: '',
+      themeFrameTextColor: ''
+    });
   }
 
   /** @override */