WebUI: Port cr-input and its tests to Polymer3

Also porting cr-icons style module, which is a transitive
dependency of cr-input.

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

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

@@ -4,6 +4,7 @@
 
 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_input/cr_input.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';
@@ -37,6 +38,8 @@ class HelloPolymer3Element extends PolymerElement {
         <option>cool</option>
       </select>
 
+      <cr-input></cr-input>
+
       <div>
         <cr-button on-click="onClick_">Show toast</cr-button>
         <cr-toast><span>I am toasted</span></cr-toast>

chrome/test/data/webui/PRESUBMIT.py

@@ -6,6 +6,7 @@ def _CheckForModularizedTests(input_api, output_api):
   module_tests = [
       'cr_elements/cr_button_tests.m.js',
       'cr_elements/cr_checkbox_test.m.js',
+      'cr_elements/cr_input_test.m.js',
       'cr_elements/cr_toast_test.m.js',
       'cr_elements/cr_toggle_test.m.js',
       'cr_elements/cr_view_manager_test.m.js',

chrome/test/data/webui/cr_elements/cr_elements_v3_focus_test.js

@@ -51,3 +51,15 @@ var CrElementsToggleV3Test = class extends CrElementsV3FocusTest {
 TEST_F('CrElementsToggleV3Test', 'All', function() {
   mocha.run();
 });
+
+// eslint-disable-next-line no-var
+var CrElementsInputV3Test = class extends CrElementsV3FocusTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_input_test.m.js';
+  }
+};
+
+TEST_F('CrElementsInputV3Test', 'All', function() {
+  mocha.run();
+});

ui/webui/resources/cr_elements/BUILD.gn

@@ -30,6 +30,7 @@ group("closure_compile") {
     # Targets for auto-generated Polymer 3 JS Modules
     "cr_button:closure_compile_module",
     "cr_checkbox:closure_compile_module",
+    "cr_input:closure_compile_module",
     "cr_toast:closure_compile_module",
     "cr_toggle:closure_compile_module",
     "cr_view_manager:closure_compile_module",
@@ -91,6 +92,12 @@ polymer_modulizer("md_select_css") {
   html_type = "style-module"
 }
 
+polymer_modulizer("cr_icons_css") {
+  js_file = "cr_icons_css.m.js"
+  html_file = "cr_icons_css.html"
+  html_type = "style-module"
+}
+
 polymer_modulizer("icons") {
   js_file = "icons.m.js"
   html_file = "icons.html"
@@ -99,6 +106,7 @@ polymer_modulizer("icons") {
 
 group("polymer3_elements") {
   deps = [
+    ":cr_icons_css_module",
     ":hidden_style_css_module",
     ":icons_module",
     ":md_select_css_module",
@@ -106,6 +114,8 @@ group("polymer3_elements") {
     ":shared_vars_css_module",
     "cr_button:cr_button_module",
     "cr_checkbox:cr_checkbox_module",
+    "cr_input:cr_input_module",
+    "cr_input:cr_input_style_css_module",
     "cr_toast:cr_toast_module",
     "cr_toggle:cr_toggle_module",
     "cr_view_manager:cr_view_manager_module",

ui/webui/resources/cr_elements/cr_input/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,34 @@ js_library("cr_input") {
     "//ui/webui/resources/js:assert",
   ]
 }
+
+polymer_modulizer("cr_input") {
+  js_file = "cr_input.js"
+  html_file = "cr_input.html"
+  html_type = "dom-module"
+  auto_imports = [ "ui/webui/resources/html/assert.html|assert" ]
+}
+
+polymer_modulizer("cr_input_style_css") {
+  js_file = "cr_input_style_css.m.js"
+  html_file = "cr_input_style_css.html"
+  html_type = "style-module"
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_input.m",
+  ]
+}
+
+js_library("cr_input.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_input/cr_input.m.js",
+  ]
+  deps = [
+    "../../js:assert.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":cr_input_module" ]
+}

ui/webui/resources/cr_elements/cr_input/cr_input.js

@@ -170,7 +170,7 @@ Polymer({
 
   /** @return {!HTMLInputElement} */
   get inputElement() {
-    return this.$.input;
+    return /** @type {!HTMLInputElement} */ (this.$.input);
   },
 
   /** @private */

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -11,6 +11,21 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_ICONS_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_icons_css.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_INPUT_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_input/cr_input.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_INPUT_STYLE_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.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"