ProfilePicker: Use css_to_wrapper() for Polymer styles.

Bug: 1322682
Change-Id: Iacb253d11dc23c35ad1e220e1a628b21bd4080b1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3639730
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Monica Basta <msalama@chromium.org>
Commit-Queue: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1002001}

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

@@ -6,7 +6,7 @@ import("//build/config/chromeos/ui_mode.gni")
 import("//chrome/common/features.gni")
 import("//tools/grit/grit_rule.gni")
 import("//tools/grit/preprocess_if_expr.gni")
-import("//tools/polymer/html_to_js.gni")
+import("//tools/polymer/css_to_wrapper.gni")
 import("//tools/polymer/html_to_wrapper.gni")
 import("//tools/typescript/ts_library.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
@@ -84,8 +84,8 @@ preprocess_if_expr("preprocess_generated") {
   in_files = html_wrapper_files + css_wrapper_files
 }
 
-html_to_js("css_wrapper_files") {
-  js_files = css_wrapper_files
+css_to_wrapper("css_wrapper_files") {
+  in_files = css_files
 }
 
 html_to_wrapper("html_wrapper_files") {

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

@@ -7,7 +7,7 @@ import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import './profile_card_menu.js';
-import './profile_picker_shared_css.js';
+import './profile_picker_shared.css.js';
 import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 import 'chrome://resources/polymer/v3_0/paper-tooltip/paper-tooltip.js';
 

chrome/browser/resources/signin/profile_picker/profile_card_menu.ts

@@ -9,7 +9,7 @@ import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/js/action_link.js';
-import './profile_picker_shared_css.js';
+import './profile_picker_shared.css.js';
 import './icons.js';
 
 import {CrActionMenuElement} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';

chrome/browser/resources/signin/profile_picker/profile_creation_flow/account_selection_lacros.ts

@@ -5,7 +5,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/shared_vars_css.m.js';
-import './shared_css.js';
+import './profile_creation_shared.css.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';

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

@@ -11,9 +11,9 @@ import 'chrome://resources/cr_elements/cr_profile_avatar_selector/cr_profile_ava
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_components/customize_themes/customize_themes.js';
-import './shared_css.js';
+import './profile_creation_shared.css.js';
 import '../icons.js';
-import '../profile_picker_shared_css.js';
+import '../profile_picker_shared.css.js';
 
 import {Theme, ThemeInfo, ThemeType} from 'chrome://resources/cr_components/customize_themes/customize_themes.mojom-webui.js';
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.m.js';

chrome/browser/resources/signin/profile_picker/profile_creation_flow/profile_creation_shared.css

@@ -0,0 +1,85 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=chrome://resources/cr_elements/shared_vars_css.m.js
+ * #import=chrome://resources/cr_elements/cr_icons_css.m.js
+ * #import=../profile_picker_shared.css.js
+ * #include=cr-icons profile-picker-shared
+ * #css_wrapper_metadata_end */
+
+:host {
+  --avatar-size: 100px;
+  --banner-height: 244px;
+}
+
+#leftBanner {
+  background: url(../images/left_banner_image.svg);
+  left: 0;
+}
+
+#rightBanner {
+  background: url(../images/right_banner_image.svg);
+  right: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  #leftBanner {
+    background: url(../images/dark_mode_left_banner_image.svg);
+  }
+
+  #rightBanner {
+    background: url(../images/dark_mode_right_banner_image.svg);
+  }
+}
+
+#headerContainer {
+  height: var(--banner-height);
+  position: relative;
+  width: 100%;
+}
+
+.banner {
+  height: 400px;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 169px;
+  z-index: -1;
+}
+
+#backButton {
+  --cr-icon-button-icon-size: 22px;
+  --cr-icon-button-margin-start: 4px;
+  --cr-icon-button-size: 36px;
+  margin-inline-start: 16px;
+  margin-top: 4px;
+  position: relative;
+  z-index: 1;
+}
+
+@media (forced-colors: none) {
+  #backButton {
+    --cr-icon-button-fill-color: var(--cr-secondary-text-color);
+  }
+}
+
+#avatarContainer {
+  bottom: calc(var(--avatar-size) / -2);
+  height: calc(var(--avatar-size) + 4px);
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  width: calc(var(--avatar-size) + 4px);
+}
+
+.avatar {
+  border: 2px solid var(--md-background-color);
+  border-radius: 50%;
+  height: var(--avatar-size);
+  width: var(--avatar-size);
+  z-index: 1;
+}

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

@@ -5,7 +5,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/shared_vars_css.m.js';
-import './shared_css.js';
+import './profile_creation_shared.css.js';
 
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import {assert} from 'chrome://resources/js/assert.m.js';

chrome/browser/resources/signin/profile_picker/profile_picker.gni

@@ -43,7 +43,14 @@ foreach(f, html_files) {
 
 ts_files = non_web_component_files + web_component_files
 
-css_wrapper_files = [
-  "profile_creation_flow/shared_css.ts",
-  "profile_picker_shared_css.ts",
+# Files that are passed as input to css_to_wrapper().
+css_files = [
+  "profile_creation_flow/profile_creation_shared.css",
+  "profile_picker_shared.css",
 ]
+
+# Files that are generated by css_to_wrapper().
+css_wrapper_files = []
+foreach(f, css_files) {
+  css_wrapper_files += [ f + ".ts" ]
+}

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

@@ -5,7 +5,7 @@
 import 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.js';
 import 'chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.m.js';
 import './profile_picker_main_view.js';
-import './profile_picker_shared_css.js';
+import './profile_picker_shared.css.js';
 import './strings.m.js';
 
 import {CrViewManagerElement} from 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.js';

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

@@ -10,7 +10,7 @@ import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './icons.js';
 import './profile_card.js';
-import './profile_picker_shared_css.js';
+import './profile_picker_shared.css.js';
 import './strings.m.js';
 
 import {CrCheckboxElement} from 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';

chrome/browser/resources/signin/profile_picker/profile_picker_shared.css

@@ -0,0 +1,107 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=chrome://resources/cr_elements/shared_style_css.m.js
+ * #import=chrome://resources/cr_elements/shared_vars_css.m.js
+ * #include=cr-shared-style
+ * #css_wrapper_metadata_end */
+
+:host {
+  --profile-card-avatar-icon-size: 74px;
+  --text-font-size: 1.16em;
+  --scrollbar-width: 4px;
+  --scrollbar-background: var(--google-grey-100);
+  --footer-spacing: 40px;
+  --profile-card-hover-color: var(--md-background-color);
+  --profile-item-height: 178px;
+  --profile-item-width: 162px;
+}
+
+html {
+  font-family: roboto;
+}
+
+h2 {
+  color: var(--cr-primary-text-color);
+  font-size: 1.85em;
+  font-weight: normal;
+}
+
+h3 {
+  color: var(--cr-secondary-text-color);
+  font-size: var(--text-font-size);
+  font-weight: normal;
+}
+
+.profile-card-info {
+  --profile-card-info-height: 52px;
+  color: var(--cr-primary-text-color);
+  height: 20px;
+  overflow: hidden;
+  position: absolute;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-card-info.prominent-text {
+  font-size: var(--text-font-size);
+  font-weight: 500;
+  padding: 16px;
+  width: 130px;
+}
+
+.profile-card-info.secondary-text {
+  padding: 16px 10px;
+  width: 142px;
+}
+
+.footer {
+  bottom: 0;
+  display: flex;
+  font-size: var(--text-font-size);
+  padding-bottom: var(--footer-spacing);
+  padding-top: var(--footer-spacing);
+  position: absolute;
+  width: 100%;
+}
+
+.footer.division-line {
+  border-top: 1px solid var(--google-grey-300);
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+}
+
+/* Track */
+.custom-scrollbar::-webkit-scrollbar-track {
+  border-radius: var(--scrollbar-width);
+}
+
+/* Handle */
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-background);
+  border-radius: var(--scrollbar-width);
+}
+
+.profile-avatar {
+  border-radius: 50%;
+  flex-shrink: 0;
+  height: var(--profile-card-avatar-icon-size);
+  width: var(--profile-card-avatar-icon-size);
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --scrollbar-background: var(--google-grey-800);
+    --profile-card-hover-color: var(--google-grey-800);
+  }
+
+  .footer.division-line {
+    border-top-color: var(--cr-separator-color);
+  }
+}