[OOBE] - Polymer3 - Check-in stylesheets

Check-in all the stylesheets inside components/ that are reused by other components. Stylesheets are now being processed by the same tool that TypeScript WebUIs use -- 'css_to_wrapper'. Unfortunately it does not seem trivial to migrate each file separately. Indentations were kept in order for Git to properly identify a rename instead of a new file. The styles are now properly stored in .css files that become .css.js during runtime. Bug: b/250893501, b/260015687, b/250892709 Change-Id: I4570c8870b96cd1557c872cfaa8142981e5dbb61 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4110902 Reviewed-by: Danila Kuzmin <dkuzmin@google.com> Commit-Queue: Renato Silva <rrsilva@google.com> Cr-Commit-Position: refs/heads/main@{#1084901}
chromium · Dec 19, 2022 · 6e11c6d · 6e11c6d
1 parent 3c7fba1
commit 6e11c6d
Show file tree

Hide file tree

Showing 95 changed files with 271 additions and 319 deletions.
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_loading.js b/chrome/browser/resources/chromeos/assistant_optin/assistant_loading.js
@@ -12,7 +12,7 @@
 import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import '//resources/polymer/v3_0/paper-progress/paper-progress.js';
 import '../components/buttons/oobe_text_button.js';
-import '../components/common_styles/oobe_dialog_host_styles.m.js';
+import '../components/common_styles/oobe_dialog_host_styles.css.js';
 import '../components/dialogs/oobe_adaptive_dialog.js';
 import '../components/dialogs/oobe_content_dialog.js';
 import './assistant_icon.m.js';

diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_optin_flow.js b/chrome/browser/resources/chromeos/assistant_optin/assistant_optin_flow.js
@@ -8,7 +8,7 @@
  *
  */
 
-import '../components/common_styles/oobe_common_styles.m.js';
+import '../components/common_styles/oobe_common_styles.css.js';
 import './assistant_common_styles.m.js';
 import './assistant_icon.m.js';
 import './assistant_loading.js';

diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_related_info.js b/chrome/browser/resources/chromeos/assistant_optin/assistant_related_info.js
@@ -14,7 +14,7 @@ import '//resources/cr_elements/cr_lottie/cr_lottie.js';
 import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import '../components/buttons/oobe_next_button.js';
 import '../components/buttons/oobe_text_button.js';
-import '../components/common_styles/oobe_dialog_host_styles.m.js';
+import '../components/common_styles/oobe_dialog_host_styles.css.js';
 import '../components/dialogs/oobe_adaptive_dialog.js';
 import './assistant_common_styles.m.js';
 import './assistant_icon.m.js';

diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js b/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js
@@ -16,7 +16,7 @@ import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import '../components/dialogs/oobe_adaptive_dialog.js';
 import '../components/buttons/oobe_next_button.js';
 import '../components/buttons/oobe_text_button.js';
-import '../components/common_styles/oobe_dialog_host_styles.m.js';
+import '../components/common_styles/oobe_dialog_host_styles.css.js';
 import './assistant_common_styles.m.js';
 import './assistant_icon.m.js';
 import './setting_zippy.js';

diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.html b/chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.html
@@ -17,7 +17,7 @@
 <link rel="import" href="../components/behaviors/oobe_i18n_behavior.html">
 <link rel="import" href="../components/buttons/oobe_next_button.html">
 <link rel="import" href="../components/buttons/oobe_text_button.html">
-<link rel="import" href="../components/common_styles/oobe_dialog_host_styles.html">
+<link rel="import" href="../components/common_styles/oobe_dialog_host_styles.css.js">
 <link rel="import" href="../components/dialogs/oobe_adaptive_dialog.html">
 <link rel="import" href="../components/oobe_cr_lottie.html">
 

diff --git a/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.js b/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.js
@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import '//resources/cr_elements/cr_toggle/cr_toggle.js';
-import '../components/common_styles/oobe_common_styles.m.js';
+import '../components/common_styles/oobe_common_styles.css.js';
 import './assistant_common_styles.m.js';
 
 import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

diff --git a/chrome/browser/resources/chromeos/assistant_optin/voice_match_entry.html b/chrome/browser/resources/chromeos/assistant_optin/voice_match_entry.html
@@ -11,7 +11,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 
 <link rel="import" href="../components/behaviors/oobe_i18n_behavior.html">
-<link rel="import" href="../components/common_styles/oobe_common_styles.html">
+<link rel="import" href="../components/common_styles/oobe_common_styles.css.js">
 
 <link rel="import" href="./assistant_common_styles.html">
 

diff --git a/chrome/browser/resources/chromeos/login/BUILD.gn b/chrome/browser/resources/chromeos/login/BUILD.gn
@@ -173,13 +173,15 @@ preprocess_if_expr("preprocess_unconditional_existing") {
 
 # Autogenerated files that are served conditionally
 preprocess_if_expr("preprocess_conditional_autogenerated_modules") {
-  deps = [ ":polymer3_elements" ]
+  deps = [ 
+    ":polymer3_elements",
+    "components/oobe_vars:css_wrapper_files"]
   in_folder = target_gen_dir
   out_folder = "$target_gen_dir/$oobe_preprocessed_folder"
   out_manifest = "$target_gen_dir/$autogenerated_conditional_files_manifest"
   in_files = [
-    "components/oobe_vars/oobe_custom_vars_css.m.js",
-    "components/oobe_vars/oobe_custom_vars_remora_css.m.js",
+    "components/oobe_vars/oobe_custom_vars.css.js",
+    "components/oobe_vars/oobe_custom_vars_remora.css.js",
     "debug/debug.m.js",
     "test_api/test_api.m.js",
     "test_api/no_test_api.m.js",
@@ -198,10 +200,6 @@ preprocess_if_expr("preprocess_unconditional_autogenerated_modules") {
   out_folder = "$target_gen_dir/$oobe_preprocessed_folder"
   out_manifest = "$target_gen_dir/$autogenerated_unconditional_files_manifest"
   in_files = [
-    "components/common_styles/oobe_common_styles.m.js",
-    "components/common_styles/oobe_dialog_host_styles.m.js",
-    "components/common_styles/oobe_flex_layout_styles.m.js",
-    "components/oobe_vars/oobe_shared_vars_css.m.js",
     "components/long_touch_detector.m.js",
     "components/oobe_icons.m.js",
     "components/oobe_network_icons.m.js",
@@ -232,10 +230,14 @@ preprocess_if_expr("preprocess_gen_js_files") {
     "components/buttons/oobe_next_button.js",
     "components/buttons/oobe_text_button.js",
     "components/common_styles/cr_card_radio_group_styles.css.js",
+    "components/common_styles/oobe_common_styles.css.js",
+    "components/common_styles/oobe_dialog_host_styles.css.js",
+    "components/common_styles/oobe_flex_layout_styles.css.js",
     "components/dialogs/oobe_adaptive_dialog.js",
     "components/dialogs/oobe_content_dialog.js",
     "components/dialogs/oobe_loading_dialog.js",
     "components/dialogs/oobe_modal_dialog.js",
+    "components/oobe_vars/oobe_shared_vars.css.js",
     "components/gaia_button.js",
     "components/gaia_dialog.js",
     "components/gaia_header.js",
@@ -334,6 +336,7 @@ group("generate_web_components") {
     "components/buttons:web_components",
     "components/common_styles:css_wrapper_files",
     "components/dialogs:web_components",
+    "components/oobe_vars:css_wrapper_files",
     "screens/common:web_components",
     "screens/login:web_components",
     "screens/oobe:web_components",

diff --git a/chrome/browser/resources/chromeos/login/components/BUILD.gn b/chrome/browser/resources/chromeos/login/components/BUILD.gn
@@ -51,9 +51,6 @@ group("closure_compile") {
 
 group("polymer3_elements") {
   public_deps = [
-                  "common_styles:polymer3_elements",
-                  "oobe_vars:polymer3_elements",
-
                   # Local targets
                   ":oobe_icons_module",
                   ":oobe_icons_module",

diff --git a/chrome/browser/resources/chromeos/login/components/buttons/oobe_back_button.js b/chrome/browser/resources/chromeos/login/components/buttons/oobe_back_button.js
@@ -38,8 +38,8 @@ import '//resources/cr_elements/cr_button/cr_button.js';
 import '//resources/cr_elements/cr_icons.css.js';
 import '//resources/cr_elements/cr_shared_style.css.js';
 import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
-import '../common_styles/oobe_common_styles.m.js';
-import '../oobe_vars/oobe_custom_vars_css.m.js';
+import '../common_styles/oobe_common_styles.css.js';
+import '../oobe_vars/oobe_custom_vars.css.js';
 import '../oobe_icons.m.js';
 
 import {html} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

diff --git a/chrome/browser/resources/chromeos/login/components/buttons/oobe_icon_button.js b/chrome/browser/resources/chromeos/login/components/buttons/oobe_icon_button.js
@@ -30,9 +30,9 @@
 import '//resources/cr_elements/cr_button/cr_button.js';
 import '//resources/cr_elements/cr_icons.css.js';
 import '//resources/cr_elements/cr_shared_style.css.js';
-import '../common_styles/oobe_common_styles.m.js';
+import '../common_styles/oobe_common_styles.css.js';
 import '../hd_iron_icon.js';
-import '../oobe_vars/oobe_custom_vars_css.m.js';
+import '../oobe_vars/oobe_custom_vars.css.js';
 
 import {html} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

diff --git a/chrome/browser/resources/chromeos/login/components/buttons/oobe_next_button.js b/chrome/browser/resources/chromeos/login/components/buttons/oobe_next_button.js
@@ -39,8 +39,8 @@ import '//resources/cr_elements/cr_button/cr_button.js';
 import '//resources/cr_elements/cr_icons.css.js';
 import '//resources/cr_elements/cr_shared_style.css.js';
 import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
-import '../common_styles/oobe_common_styles.m.js';
-import '../oobe_vars/oobe_custom_vars_css.m.js';
+import '../common_styles/oobe_common_styles.css.js';
+import '../oobe_vars/oobe_custom_vars.css.js';
 import '../oobe_icons.m.js';
 
 import {html} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

diff --git a/chrome/browser/resources/chromeos/login/components/buttons/oobe_text_button.js b/chrome/browser/resources/chromeos/login/components/buttons/oobe_text_button.js
@@ -32,8 +32,8 @@
 import '//resources/cr_elements/cr_button/cr_button.js';
 import '//resources/cr_elements/cr_shared_style.css.js';
 import '//resources/polymer/v3_0/paper-styles/color.js';
-import '../common_styles/oobe_common_styles.m.js';
-import '../oobe_vars/oobe_custom_vars_css.m.js';
+import '../common_styles/oobe_common_styles.css.js';
+import '../oobe_vars/oobe_custom_vars.css.js';
 
 import {html} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

diff --git a/chrome/browser/resources/chromeos/login/components/common_styles/BUILD.gn b/chrome/browser/resources/chromeos/login/components/common_styles/BUILD.gn
@@ -9,31 +9,27 @@ import("//tools/polymer/polymer.gni")
 js_type_check("closure_compile") {
   is_polymer3 = true
   deps = [
-    ":oobe_common_styles.m",
+    ":oobe_common_styles.css",
     ":cr_card_radio_group_styles.css",
-    ":oobe_dialog_host_styles.m",
-    ":oobe_flex_layout_styles.m",
+    ":oobe_dialog_host_styles.css",
+    ":oobe_flex_layout_styles.css",
   ]
 }
 
-group("polymer3_elements") {
-  public_deps = [
-    ":oobe_common_styles_module",
-    ":oobe_dialog_host_styles_module",
-    ":oobe_flex_layout_styles_module",
+js_library("oobe_common_styles.css") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/common_styles/oobe_common_styles.css.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
+  extra_deps = [ ":css_wrapper_files" ]
 }
 
-js_library("oobe_common_styles.m") {
-  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/common_styles/oobe_common_styles.m.js" ]
-  deps = []
-  extra_deps = [ ":oobe_common_styles_module" ]
-}
-
-js_library("oobe_dialog_host_styles.m") {
-  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/common_styles/oobe_dialog_host_styles.m.js" ]
-  deps = []
-  extra_deps = [ ":oobe_dialog_host_styles_module" ]
+js_library("oobe_dialog_host_styles.css") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/common_styles/oobe_dialog_host_styles.css.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":css_wrapper_files" ]
 }
 
 js_library("cr_card_radio_group_styles.css") {
@@ -44,31 +40,20 @@ js_library("cr_card_radio_group_styles.css") {
   extra_deps = [ ":css_wrapper_files" ]
 }
 
-js_library("oobe_flex_layout_styles.m") {
-  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/common_styles/oobe_flex_layout_styles.m.js" ]
-  deps = []
-  extra_deps = [ ":oobe_flex_layout_styles_module" ]
-}
-
-polymer_modulizer("oobe_common_styles") {
-  js_file = "oobe_common_styles.m.js"
-  html_file = "oobe_common_styles.html"
-  html_type = "style-module"
-}
-
-polymer_modulizer("oobe_dialog_host_styles") {
-  js_file = "oobe_dialog_host_styles.m.js"
-  html_file = "oobe_dialog_host_styles.html"
-  html_type = "style-module"
-}
-
-polymer_modulizer("oobe_flex_layout_styles") {
-  js_file = "oobe_flex_layout_styles.m.js"
-  html_file = "oobe_flex_layout_styles.html"
-  html_type = "style-module"
+js_library("oobe_flex_layout_styles.css") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/common_styles/oobe_flex_layout_styles.css.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":css_wrapper_files" ]
 }
 
 css_to_wrapper("css_wrapper_files") {
-  in_files = [ "cr_card_radio_group_styles.css" ]
+  in_files = [
+    "cr_card_radio_group_styles.css",
+    "oobe_common_styles.css",
+    "oobe_dialog_host_styles.css",
+    "oobe_flex_layout_styles.css",
+  ]
   use_js = true
 }
diff --git a/...nts/common_styles/oobe_common_styles.html → ...ents/common_styles/oobe_common_styles.css b/...nts/common_styles/oobe_common_styles.html → ...ents/common_styles/oobe_common_styles.css
@@ -1,16 +1,16 @@
-<!--
-Copyright 2020 The Chromium Authors
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
+/* Copyright 2020 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
 
-<link rel="import" href="../oobe_vars/oobe_custom_vars_css.html">
-<link rel="import" href="../oobe_vars/oobe_shared_vars_css.html">
-<link rel="import" href="../common_styles/oobe_flex_layout_styles.html">
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=../oobe_vars/oobe_custom_vars.css.js
+ * #import=../oobe_vars/oobe_shared_vars.css.js
+ * #import=./oobe_flex_layout_styles.css.js
+ * #include=oobe-flex-layout-styles
+ * #css_wrapper_metadata_end */
 
-<dom-module id="oobe-common-styles">
-  <template>
-    <style include="oobe-flex-layout-styles">
       :host .oobe-default-font {
         color: var(--oobe-text-color);
         font-family: var(--oobe-default-font-family);
@@ -20,7 +20,7 @@
       }
 
       /* Classes can-scroll is-scrolled scrolled-to-bottom are set by
-         OobeScrollableBehavior. */
+          OobeScrollableBehavior. */
       .scrollable.can-scroll:not(.is-scrolled):not(.scrolled-to-bottom) {
         background: linear-gradient(0deg,
                         rgba(var(--google-grey-100-rgb), 1) 0,
@@ -69,6 +69,3 @@
       .oobe-optin-content {
         margin-inline-end: 16px;
       }
-    </style>
-  </template>
-</dom-module>
diff --git a/...ommon_styles/oobe_dialog_host_styles.html → ...common_styles/oobe_dialog_host_styles.css b/...ommon_styles/oobe_dialog_host_styles.html → ...common_styles/oobe_dialog_host_styles.css
@@ -1,16 +1,15 @@
-<!--
-Copyright 2021 The Chromium Authors
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
+/* Copyright 2021 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
 
-<link rel="import" href="/components/common_styles/oobe_common_styles.html">
-<link rel="import" href="/components/oobe_vars/oobe_custom_vars_css.html">
-<link rel="import" href="/components/oobe_vars/oobe_shared_vars_css.html">
-
-<dom-module id="oobe-dialog-host-styles">
-    <template>
-      <style include="oobe-common-styles">
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=../oobe_vars/oobe_custom_vars.css.js
+ * #import=../oobe_vars/oobe_shared_vars.css.js
+ * #import=./oobe_common_styles.css.js
+ * #include=oobe-common-styles
+ * #css_wrapper_metadata_end */
 
         :host(:not([hidden])) {
           display: flex;
@@ -67,6 +66,3 @@
         :host-context([orientation=vertical]) .portrait-horizontal-centered {
           margin: 0 auto;
         }
-      </style>
-    </template>
-  </dom-module>
diff --git a/...ommon_styles/oobe_flex_layout_styles.html → ...common_styles/oobe_flex_layout_styles.css b/...ommon_styles/oobe_flex_layout_styles.html → ...common_styles/oobe_flex_layout_styles.css
@@ -1,18 +1,15 @@
-<!--
-Copyright 2021 The Chromium Authors
+/* Copyright 2021 The Chromium Authors
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
--->
+ */
 
-<!--
-****************************************************
-OOBE Flex Layout (based on polymer iron-flex-layout)
-*****************************************************
--->
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #css_wrapper_metadata_end */
 
-<dom-module id="oobe-flex-layout-styles">
-  <template>
-    <style>
+/*****************************************************
+OOBE Flex Layout (based on polymer iron-flex-layout)
+******************************************************/
 
       .layout.horizontal,
       .layout.horizontal-reverse,
@@ -120,7 +117,7 @@
       }
 
       /*******************************
-                Other Layout
+      Other Layout
       *******************************/
 
       [hidden] {
@@ -138,6 +135,3 @@
         right: 0;
         top: 0;
       }
-    </style>
-  </template>
-</dom-module>
diff --git a/chrome/browser/resources/chromeos/login/components/dialogs/oobe_adaptive_dialog.js b/chrome/browser/resources/chromeos/login/components/dialogs/oobe_adaptive_dialog.js
@@ -18,10 +18,10 @@ import '//resources/cr_elements/cr_shared_style.css.js';
 import '//resources/ash/common/cr_scrollable_behavior.js';
 import '//resources/cr_elements/cr_lazy_render/cr_lazy_render.js';
 
-import '../common_styles/oobe_common_styles.m.js';
-import '../common_styles/oobe_dialog_host_styles.m.js';
-import '../oobe_vars/oobe_custom_vars_css.m.js';
-import '../oobe_vars/oobe_shared_vars_css.m.js';
+import '../common_styles/oobe_common_styles.css.js';
+import '../common_styles/oobe_dialog_host_styles.css.js';
+import '../oobe_vars/oobe_custom_vars.css.js';
+import '../oobe_vars/oobe_shared_vars.css.js';
 
 /** @polymer */
 export class OobeAdaptiveDialog extends PolymerElement {