Import Polymer templates at runtime in ash/webui/common/.

Also using css_to_wrapper() for wrapping CSS vars files with a JS file
that can be imported at runtime. Effectively this CL replaces
html_to_js(), with html_to_wrapper() and css_to_wrapper() in
ash/webui/common/.

Besides this being a good improvement on its own, it will also make it
easier to move various CrOS-only stuff that is already using
html_to_wrapper() and css_to_wrapper() from ui/webui/resources/ to
ash/webui/common moving forward.

Bug: 1292025,1322682
Change-Id: I760b02be0e1ff2336717546d1c7c2d5ea3665600
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3787238
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1028623}

ash/webui/common/resources/BUILD.gn

@@ -6,26 +6,84 @@ import("//build/config/chromeos/ui_mode.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/grit_rule.gni")
 import("//tools/grit/preprocess_if_expr.gni")
-import("//tools/grit/repack.gni")
-import("//tools/polymer/html_to_js.gni")
+import("//tools/polymer/css_to_wrapper.gni")
+import("//tools/polymer/html_to_wrapper.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 
 assert(is_chromeos_ash)
 
 preprocessed_dir = "preprocessed"
-preprocessed_gen_manifest = "preprocessed_gen_manifest.json"
+preprocessed_manifest = "preprocessed_manifest.json"
 
 polymer_element_files = [
   "keyboard_diagram.js",
-  "keyboard_icons.js",
   "keyboard_key.js",
-  "navigation_icons.js",
   "navigation_selector.js",
-  "navigation_shared_vars.js",
   "navigation_view_panel.js",
   "page_toolbar.js",
 ]
 
+icons_html_files = [
+  "keyboard_icons.html",
+  "navigation_icons.html",
+]
+
+# Files that are passed as input to html_to_wrapper().
+html_files = []
+foreach(f, polymer_element_files) {
+  html_files += [ string_replace(f, ".js", ".html") ]
+}
+
+# Files that are generated by html_to_wrapper().
+html_wrapper_files = []
+foreach(f, html_files + icons_html_files) {
+  html_wrapper_files += [ f + ".js" ]
+}
+
+css_files = [ "navigation_shared_vars.css" ]
+
+# Files that are generated by css_to_wrapper().
+css_wrapper_files = []
+foreach(f, css_files) {
+  css_wrapper_files += [ f + ".js" ]
+}
+
+preprocess_if_expr("preprocess") {
+  in_folder = "."
+  out_folder = "$target_gen_dir/$preprocessed_dir"
+  out_manifest = "$target_gen_dir/$preprocessed_manifest"
+  in_files = polymer_element_files + icons_html_files + html_files + css_files
+}
+
+html_to_wrapper("html_wrapper_files") {
+  deps = [ ":preprocess" ]
+  in_folder = "$target_gen_dir/$preprocessed_dir"
+  out_folder = "$target_gen_dir/$preprocessed_dir"
+  in_files = html_files + icons_html_files
+  use_js = true
+}
+
+css_to_wrapper("css_wrapper_files") {
+  deps = [ ":preprocess" ]
+  in_folder = "$target_gen_dir/$preprocessed_dir"
+  out_folder = "$target_gen_dir/$preprocessed_dir"
+  in_files = css_files
+  use_js = true
+}
+
+generate_grd("build_html_css_wrapper_files_grdp") {
+  input_files = html_wrapper_files + css_wrapper_files
+  input_files_base_dir =
+      rebase_path("$target_gen_dir/$preprocessed_dir", root_build_dir)
+  public_deps = [
+    ":css_wrapper_files",
+    ":html_wrapper_files",
+  ]
+  grd_prefix = "ash_common"
+  out_grd = "$target_gen_dir/html_css_wrapper_files_resources.grdp"
+  resource_path_prefix = "ash/common"
+}
+
 generate_grd("build_grdp") {
   input_files = [
     "fake_method_resolver.js",
@@ -34,8 +92,8 @@ generate_grd("build_grdp") {
     "mojo_utils.js",
   ]
   input_files_base_dir = rebase_path(".", "//")
-  public_deps = [ ":preprocess_generated" ]
-  manifest_files = [ "$target_gen_dir/$preprocessed_gen_manifest" ]
+  public_deps = [ ":preprocess" ]
+  manifest_files = [ "$target_gen_dir/$preprocessed_manifest" ]
   grd_prefix = "ash_common"
   out_grd = "$target_gen_dir/${grd_prefix}_resources.grdp"
   resource_path_prefix = "ash/common"
@@ -47,7 +105,6 @@ js_type_check("closure_compile_module") {
     ":fake_method_resolver",
     ":fake_observables",
     ":keyboard_diagram",
-    ":keyboard_icons",
     ":keyboard_key",
     ":keyboard_layouts",
     ":mojo_utils",
@@ -74,15 +131,8 @@ js_library("keyboard_diagram") {
   ]
 }
 
-js_library("keyboard_icons") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("keyboard_key") {
   deps = [
-    ":keyboard_icons",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
@@ -97,13 +147,6 @@ js_library("mojo_utils") {
 }
 
 js_library("navigation_selector") {
-  deps = [
-    ":navigation_icons",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
-js_library("navigation_shared_vars") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -116,26 +159,8 @@ js_library("navigation_view_panel") {
   ]
 }
 
-js_library("navigation_icons") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("page_toolbar") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
-
-preprocess_if_expr("preprocess_generated") {
-  deps = [ ":web_components" ]
-  in_folder = target_gen_dir
-  out_folder = "$target_gen_dir/$preprocessed_dir"
-  out_manifest = "$target_gen_dir/$preprocessed_gen_manifest"
-  in_files = polymer_element_files
-}
-
-html_to_js("web_components") {
-  js_files = polymer_element_files
-}

ash/webui/common/resources/keyboard_diagram.js

@@ -5,6 +5,7 @@
 import {I18nBehavior, I18nBehaviorInterface} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {getTemplate} from './keyboard_diagram.html.js';
 import {KeyboardKeyState} from './keyboard_key.js';
 import {getKeyboardLayoutForRegionCode} from './keyboard_layouts.js';
 
@@ -155,7 +156,7 @@ export class KeyboardDiagramElement extends KeyboardDiagramElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {

ash/webui/common/resources/keyboard_key.js

@@ -3,11 +3,13 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
-import './keyboard_icons.js';
+import './keyboard_icons.html.js';
 
 import {I18nBehavior, I18nBehaviorInterface} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {getTemplate} from './keyboard_key.html.js';
+
 /**
  * @fileoverview
  * 'keyboard-key' provides a visual representation of a single key for the
@@ -83,7 +85,7 @@ export class KeyboardKeyElement extends KeyboardKeyElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {

ash/webui/common/resources/navigation_selector.js

@@ -2,15 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-import './navigation_icons.js';
+import './navigation_icons.html.js';
 import 'chrome://resources/cr_elements/cr_expand_button/cr_expand_button.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './navigation_selector.html.js';
+
 /**
  * @typedef {{
  *   name: string,
@@ -34,7 +36,7 @@ export class NavigationSelectorElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -114,4 +116,4 @@ export class NavigationSelectorElement extends PolymerElement {
   }
 }
 
-customElements.define(NavigationSelectorElement.is, NavigationSelectorElement);
+customElements.define(NavigationSelectorElement.is, NavigationSelectorElement);

ash/webui/common/resources/navigation_shared_vars.css

@@ -0,0 +1,55 @@
+/* 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=vars
+ * #import=chrome://resources/cr_elements/shared_vars_css.m.js
+ * #import=chrome://resources/polymer/v3_0/paper-styles/color.js
+ * #css_wrapper_metadata_end */
+
+html {
+  --areas-no-header-nav: "sideNav main";
+  --areas-no-header-nav-banner: "banner banner"
+                                "sideNav main";
+  --iron-icon-fill-color: var(--cros-icon-color-primary);
+  --iron-icon-height: 20px;
+  --iron-icon-width: 20px;
+  --left-aligned-top-offset: 64px;
+}
+
+/* calc formula: (viewport width - (padding + side nav size)) */
+@media (min-width: 600px) {
+  html {
+    --areas-nav: "head head"
+             "main main";
+    --areas-nav-banner: "head head"
+                        "banner banner"
+                        "main main";
+    --columns-nav: 1fr 1fr;
+    --container-padding-nav: 24px;
+    --container-max-width-nav: calc(100vw - 48px);
+    }
+}
+
+@media (min-width: 769px) {
+  html {
+    --areas-nav: "head head"
+             "sideNav main";
+    --areas-nav-banner: "head head"
+                        "banner banner"
+                        "sideNav main";
+    --columns-nav: 192px 1fr;
+    --container-padding-nav: 40px;
+    --container-max-width-nav: calc(100vw - 272px);
+    }
+}
+
+@media (min-width: 961px) {
+  html {
+    --columns-nav: 248px 1fr;
+    --container-padding-nav: 48px;
+    --container-max-width-nav: calc(100vw - 344px);
+
+  }
+}