Web UI Polymer 3: Port cr-search-field

- Autogenerate Polymer 3 version of cr-search-field and its automated
tests
- Add to Polymer 3 demo page

Bug: 965770
Change-Id: I6901db78e71767f757642aa89dae43be4473dd33
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1786177Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#693917}

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

@@ -10,6 +10,7 @@ import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.m.js';
 import 'chrome://resources/cr_elements/cr_radio_group/cr_radio_group.m.js';
+import 'chrome://resources/cr_elements/cr_search_field/cr_search_field.m.js';
 import 'chrome://resources/cr_elements/cr_tabs/cr_tabs.m.js';
 import 'chrome://resources/cr_elements/cr_toast/cr_toast.m.js';
 import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
@@ -89,6 +90,10 @@ class HelloPolymer3Element extends PolymerElement {
           <div slot="title">I am a dialog</div>
         </cr-dialog>
       </div>
+
+      <div>
+        <cr-search-field label="test search field"></cr-search-field>
+      <div>
     `;
   }
 

chrome/test/data/webui/BUILD.gn

@@ -166,6 +166,7 @@ js2gtest("browser_tests_js_webui") {
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_icon_button_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_button_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_group_test.m.js",
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_search_field_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_view_manager_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/mock_timer.m.js",

chrome/test/data/webui/cr_elements/BUILD.gn

@@ -15,6 +15,7 @@ js_modulizer("modulize") {
     "cr_input_test.js",
     "cr_radio_button_test.js",
     "cr_radio_group_test.js",
+    "cr_search_field_tests.js",
     "cr_tabs_test.js",
     "cr_toast_test.js",
     "cr_toggle_test.js",

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

@@ -113,6 +113,18 @@ TEST_F('CrElementsRadioGroupV3Test', 'All', function() {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var CrElementsSearchFieldV3Test = class extends CrElementsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_search_field_tests.m.js';
+  }
+};
+
+TEST_F('CrElementsSearchFieldV3Test', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var CrElementsToastV3Test = class extends CrElementsV3BrowserTest {
   /** @override */

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

@@ -2,6 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import 'chrome://resources/cr_elements/cr_search_field/cr_search_field.m.js';
+//
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {flushTasks} from 'chrome://test/test_util.m.js';
+// clang-format on
+
 /** @fileoverview Suite of tests for cr-search-field. */
 suite('cr-search-field', function() {
   /** @type {?CrSearchFieldElement} */
@@ -19,6 +26,11 @@ suite('cr-search-field', function() {
 
   setup(function() {
     PolymerTest.clearBody();
+    // Ensure svg, which is referred to by a relative URL, is loaded from
+    // chrome://resources and not chrome://test
+    const base = document.createElement('base');
+    base.href = 'chrome://resources/cr_elements/';
+    document.head.appendChild(base);
     field = document.createElement('cr-search-field');
     searches = [];
     field.addEventListener('search-changed', function(event) {

ui/webui/resources/cr_elements/BUILD.gn

@@ -22,6 +22,7 @@ group("closure_compile") {
     "cr_profile_avatar_selector:closure_compile",
     "cr_radio_button:closure_compile",
     "cr_radio_group:closure_compile",
+    "cr_search_field:closure_compile",
     "cr_slider:closure_compile",
     "cr_tabs:closure_compile",
     "cr_toast:closure_compile",
@@ -39,6 +40,7 @@ group("closure_compile") {
     "cr_input:closure_compile_module",
     "cr_radio_button:closure_compile_module",
     "cr_radio_group:closure_compile_module",
+    "cr_search_field:closure_compile_module",
     "cr_tabs:closure_compile_module",
     "cr_toast:closure_compile_module",
     "cr_toggle:closure_compile_module",
@@ -138,6 +140,8 @@ group("polymer3_elements") {
     "cr_radio_button:cr_radio_button_style_css_module",
     "cr_radio_button:modulize",
     "cr_radio_group:cr_radio_group_module",
+    "cr_search_field:cr_search_field_module",
+    "cr_search_field:modulize",
     "cr_tabs:cr_tabs_module",
     "cr_toast:cr_toast_module",
     "cr_toggle:cr_toggle_module",

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

@@ -3,6 +3,8 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
+import("../../tools/js_modulizer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -12,9 +14,7 @@ js_type_check("closure_compile") {
 }
 
 js_library("cr_search_field_behavior") {
-  deps = [
-    "//ui/webui/resources/js:assert",
-  ]
+  deps = []
 }
 
 js_library("cr_search_field") {
@@ -24,3 +24,46 @@ js_library("cr_search_field") {
     "//ui/webui/resources/js:assert",
   ]
 }
+
+# Targets for auto-generating and typechecking Polymer 3 JS modules
+
+js_modulizer("modulize") {
+  input_files = [ "cr_search_field_behavior.js" ]
+  deps = []
+}
+
+polymer_modulizer("cr_search_field") {
+  js_file = "cr_search_field.js"
+  html_file = "cr_search_field.html"
+  html_type = "dom-module"
+  auto_imports = [ "ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.html|CrSearchFieldBehavior" ]
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_search_field.m",
+    ":cr_search_field_behavior.m",
+  ]
+}
+
+js_library("cr_search_field.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.m.js",
+  ]
+  deps = [
+    ":cr_search_field_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
+    "//ui/webui/resources/js:assert.m",
+  ]
+  extra_deps = [ ":cr_search_field_module" ]
+}
+
+js_library("cr_search_field_behavior.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.m.js",
+  ]
+  deps = []
+  extra_deps = [ ":modulize" ]
+}

ui/webui/resources/cr_elements/cr_search_field/cr_search_field.js

@@ -22,7 +22,7 @@ Polymer({
 
   /** @return {!CrInputElement} */
   getSearchInput: function() {
-    return this.$.searchInput;
+    return /** @type {!CrInputElement} */ (this.$.searchInput);
   },
 
   /** @private */
@@ -32,4 +32,4 @@ Polymer({
       this.$.searchInput.focus();
     });
   },
-});
\ No newline at end of file
+});

ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.js

@@ -7,7 +7,7 @@
  * <settings-subpage-search> for a simple implementation.
  * @polymerBehavior
  */
-const CrSearchFieldBehavior = {
+/* #export */ const CrSearchFieldBehavior = {
   properties: {
     label: {
       type: String,

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -66,6 +66,16 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_SEARCH_FIELD_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_SEARCH_FIELD_BEHAVIOR_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_search_field/cr_search_field_behavior.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"