Commit 7763a092 authored by Monica Basta's avatar Monica Basta Committed by Commit Bot

[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: default avatarAlex Ilin <alexilin@chromium.org>
Reviewed-by: default avatarDavid Roger <droger@chromium.org>
Reviewed-by: default avatarEsmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799721}
parent cb7dfca2
......@@ -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>
......@@ -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);
......@@ -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;
......
......@@ -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",
]
}
<div> Local profile customization </div>
\ No newline at end of file
<style include="profile-creation-shared">
#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>
......@@ -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__}`,
});
\ No newline at end of file
properties: {
/** @type {!AutogeneratedThemeColorInfo} */
profileThemeInfo: {
type: Object,
},
},
/** @private */
onClickBack_() {
navigateToPreviousRoute();
},
});
<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]];">
<cr-icon-button id="backButton" class="icon-arrow-back"
on-click="onTapBack_" aria-label="$i18n{backButtonLabel}">
</cr-icon-button>
<div id="banner"></div>
<img src="chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE">
<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="onClickBack_" aria-label="$i18n{backButtonLabel}">
</cr-icon-button>
<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>
......@@ -93,4 +69,4 @@
on-click="onNotNowClick_">
$i18n{notNowButtonLabel}
</button>
</div>
\ No newline at end of file
</div>
......@@ -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();
},
});
<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>
// 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));
......@@ -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>
......@@ -12,25 +12,25 @@
</outputs>
<release seq="1">
<includes>
<include name="IDR_PROFILE_PICKER_IMAGES_LEFT_BANNER_IMAGE"
<include name="IDR_PROFILE_PICKER_IMAGES_LEFT_BANNER_IMAGE"
file="images/left_banner_image.svg"
type="BINDATA" />
<include name="IDR_PROFILE_PICKER_IMAGES_RIGHT_BANNER_IMAGE"
<include name="IDR_PROFILE_PICKER_IMAGES_RIGHT_BANNER_IMAGE"
file="images/right_banner_image.svg"
type="BINDATA" />
<include name="IDR_PROFILE_PICKER_IMAGES_DARK_MODE_LEFT_BANNER_IMAGE"
<include name="IDR_PROFILE_PICKER_IMAGES_DARK_MODE_LEFT_BANNER_IMAGE"
file="images/dark_mode_left_banner_image.svg"
type="BINDATA" />
<include name="IDR_PROFILE_PICKER_IMAGES_DARK_MODE_RIGHT_BANNER_IMAGE"
<include name="IDR_PROFILE_PICKER_IMAGES_DARK_MODE_RIGHT_BANNER_IMAGE"
file="images/dark_mode_right_banner_image.svg"
type="BINDATA" />
<include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_LIGHT_IMAGE"
<include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_LIGHT_IMAGE"
file="profile_creation_flow/images/banner_light_image.svg"
type="BINDATA" />
<include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_DARK_IMAGE"
<include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_DARK_IMAGE"
file="profile_creation_flow/images/banner_dark_image.svg"
type="BINDATA" />
<!-- Generated Polymer 3 elements -->
<!-- Generated Polymer 3 elements -->
<include name="IDR_PROFILE_PICKER_PROFILE_PICKER_MAIN_VIEW_JS"
file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_picker_main_view.js"
use_base_dir="false" type="BINDATA"/>
......@@ -49,9 +49,12 @@
<include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CUSTOMIZATION_JS"
file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.js"
use_base_dir="false" type="BINDATA"/>
<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_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
......
......@@ -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));
}
......
......@@ -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",
......
......@@ -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 */
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment