WebUI Polymer3: Auto-generate P3 versions of various shared UI elements.

Specifically porting:
 - cr-button
 - cr-checkbox
 - cr-toast
 - cr-toggle
 - cr-view-manager
 - md-select, shared-style, hidden-style styles
 - shared icons

Repro:
 - Add optimize_webui=false flag.
 - Go to chrome://print/polymer3/demo.html.
 - See working cr-* elements, styles, icons.
 - Open Devtools console.
 - No HTML imports warnings should exist.

Bug: 965770
Change-Id: I1eec3c588a155ce32477cbd74cbd0a4864fb3ba3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1626665
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#683221}

chrome/browser/resources/print_preview/polymer3/demo.js

@@ -2,29 +2,63 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/polymer/v3_0/paper-button/paper-button.js';
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
+import 'chrome://resources/cr_elements/cr_toast/cr_toast.m.js';
+import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
+import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/cr_elements/md_select_css.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 class HelloPolymer3Element extends PolymerElement {
   static get template() {
     return html`
-      <div>Hello Polymer3 [[time]]</div>
-      <paper-button on-click="onClick_">Update time</paper-button>
+      <style include="md-select">
+        cr-toggle {
+          display: inline-block;
+        }
+      </style>
+
+      <cr-checkbox checked="{{checkboxChecked_}}">
+        [[checkboxChecked_]]
+      </cr-checkbox>
+
+      <div>
+        <cr-toggle checked="{{toggleChecked_}}"></cr-toggle>
+        <span>[[toggleChecked_]]</span>
+      </div>
+
+      <select class="md-select">
+        <option>JS</option>
+        <option>modules</option>
+        <option>are</option>
+        <option>cool</option>
+      </select>
+
+      <div>
+        <cr-button on-click="onClick_">Show toast</cr-button>
+        <cr-toast><span>I am toasted</span></cr-toast>
+      </div>
+
+      <iron-icon icon="cr:error"></iron-icon>
     `;
   }
 
   static get properties() {
     return {
-      time: {
-        type: Number,
-        value: Date.now(),
-      },
+      /** @private */
+      toggleChecked_: Boolean,
+
+      /** @private */
+      checkboxChecked_: Boolean,
     };
   }
 
+  /** @private */
   onClick_() {
-    this.time = Date.now();
+    this.shadowRoot.querySelector('cr-toast').show(2000);
   }
 }  // class HelloPolymer3
 

tools/polymer/polymer.gni

@@ -2,17 +2,20 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
-common_namespace_rewrites = [
-  "Polymer.PaperRippleBehavior|PaperRippleBehavior",
+common_namespace_rewrites_polymer = [
   "cr.ui.FocusOutlineManager|FocusOutlineManager",
+  "Polymer.PaperRippleBehavior|PaperRippleBehavior",
+  "Polymer.RenderStatus.afterNextRender|afterNextRender",
+  "Polymer.IronA11yAnnouncer|IronA11yAnnouncer",
 
   # TODO(dpapad): Add more such rewrites as they get discovered.
 ]
 
 common_auto_imports = [
-  "ui/webui/resources/html/polymer.html|Polymer,html",
-  "ui/webui/resources/html/cr/ui/focus_outline_manager.html|FocusOutlineManager",
+  "third_party/polymer/v1_0/components-chromium/iron-a11y-announcer/iron-a11y-announcer.html|IronA11yAnnouncer",
   "third_party/polymer/v1_0/components-chromium/paper-behaviors/paper-ripple-behavior.html|PaperRippleBehavior",
+  "ui/webui/resources/html/cr/ui/focus_outline_manager.html|FocusOutlineManager",
+  "ui/webui/resources/html/polymer.html|Polymer,html",
 
   # TODO(dpapad): Add more auto-imports here, as needed.
 ]
@@ -50,7 +53,7 @@ template("polymer_modulizer") {
       rebase_path(target_gen_dir, root_build_dir),
     ]
 
-    args += [ "--namespace_rewrites" ] + common_namespace_rewrites
+    args += [ "--namespace_rewrites" ] + common_namespace_rewrites_polymer
     if (defined(invoker.namespace_rewrites)) {
       args += invoker.namespace_rewrites
     }

ui/resources/BUILD.gn

@@ -40,7 +40,7 @@ grit("webui_resources_grd") {
   source = "../webui/resources/webui_resources.grd"
 
   deps = [
-    "//ui/webui/resources/js:modulize",
+    "//ui/webui/resources:modulize",
   ]
 
   # The .grd contains references to generated files.

ui/webui/resources/BUILD.gn

@@ -12,3 +12,10 @@ group("closure_compile") {
     "js:closure_compile_modules",
   ]
 }
+
+group("modulize") {
+  deps = [
+    "cr_elements:polymer3_elements",
+    "js:modulize",
+  ]
+}

ui/webui/resources/cr_elements/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 group("closure_compile") {
   deps = [
@@ -56,3 +57,50 @@ js_library("cr_container_shadow_behavior") {
     "//ui/webui/resources/js:assert",
   ]
 }
+
+# Targets for auto-generating Polymer 3 JS Modules.
+
+polymer_modulizer("shared_vars_css") {
+  js_file = "shared_vars_css.m.js"
+  html_file = "shared_vars_css.html"
+  html_type = "custom-style"
+}
+
+polymer_modulizer("shared_style_css") {
+  js_file = "shared_style_css.m.js"
+  html_file = "shared_style_css.html"
+  html_type = "style-module"
+}
+
+polymer_modulizer("hidden_style_css") {
+  js_file = "hidden_style_css.m.js"
+  html_file = "hidden_style_css.html"
+  html_type = "style-module"
+}
+
+polymer_modulizer("md_select_css") {
+  js_file = "md_select_css.m.js"
+  html_file = "md_select_css.html"
+  html_type = "style-module"
+}
+
+polymer_modulizer("icons") {
+  js_file = "icons.m.js"
+  html_file = "icons.html"
+  html_type = "iron-iconset"
+}
+
+group("polymer3_elements") {
+  deps = [
+    ":hidden_style_css_module",
+    ":icons_module",
+    ":md_select_css_module",
+    ":shared_style_css_module",
+    ":shared_vars_css_module",
+    "cr_button:cr_button_module",
+    "cr_checkbox:cr_checkbox_module",
+    "cr_toast:cr_toast_module",
+    "cr_toggle:cr_toggle_module",
+    "cr_view_manager:cr_view_manager_module",
+  ]
+}

ui/webui/resources/cr_elements/cr_button/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -16,3 +17,9 @@ js_library("cr_button") {
     "//ui/webui/resources/js/cr/ui:focus_outline_manager",
   ]
 }
+
+polymer_modulizer("cr_button") {
+  js_file = "cr_button.js"
+  html_file = "cr_button.html"
+  html_type = "dom-module"
+}

ui/webui/resources/cr_elements/cr_checkbox/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -15,3 +16,9 @@ js_library("cr_checkbox") {
     "//third_party/polymer/v1_0/components-chromium/paper-behaviors:paper-ripple-behavior-extracted",
   ]
 }
+
+polymer_modulizer("cr_checkbox") {
+  js_file = "cr_checkbox.js"
+  html_file = "cr_checkbox.html"
+  html_type = "dom-module"
+}

ui/webui/resources/cr_elements/cr_toast/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -22,3 +23,9 @@ js_library("cr_toast_manager") {
     "//ui/webui/resources/js:cr",
   ]
 }
+
+polymer_modulizer("cr_toast") {
+  js_file = "cr_toast.js"
+  html_file = "cr_toast.html"
+  html_type = "dom-module"
+}

ui/webui/resources/cr_elements/cr_toggle/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -16,3 +17,9 @@ js_library("cr_toggle") {
     "//third_party/polymer/v1_0/components-chromium/paper-behaviors:paper-ripple-behavior-extracted",
   ]
 }
+
+polymer_modulizer("cr_toggle") {
+  js_file = "cr_toggle.js"
+  html_file = "cr_toggle.html"
+  html_type = "dom-module"
+}

ui/webui/resources/cr_elements/cr_view_manager/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -16,3 +17,10 @@ js_library("cr_view_manager") {
   ]
   externs_list = [ "$externs_path/web_animations.js" ]
 }
+
+polymer_modulizer("cr_view_manager") {
+  js_file = "cr_view_manager.js"
+  html_file = "cr_view_manager.html"
+  html_type = "dom-module"
+  auto_imports = [ "ui/webui/resources/html/assert.html|assert" ]
+}

ui/webui/resources/cr_elements_resources_v3.grdp

+<?xml version="1.0" encoding="utf-8"?>
+<grit-part>
+  <!-- Polymer 3.0 Elements -->
+  <include name="IDR_CR_ELEMENTS_CR_BUTTON_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_button/cr_button.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_CHECKBOX_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_SHARED_STYLE_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/shared_style_css.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_SHARED_VARS_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/shared_vars_css.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_TOAST_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_toast/cr_toast.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_TOGGLE_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_VIEW_MANAGER_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_view_manager/cr_view_manager.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_MD_SELECT_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/md_select_css.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_HIDDEN_STYLE_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/hidden_style_css.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_ICONS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/icons.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+</grit-part>

ui/webui/resources/webui_resources.grd

@@ -109,6 +109,7 @@ without changes to the corresponding grd file. -->
       </if>
 
       <if expr="not is_android and not is_ios">
+        <part file="cr_elements_resources_v3.grdp" />
         <part file="cr_polymer_resources_v3.grdp" />
       </if>
     </includes>