Web UI Polymer 3: Port cr-icon-button and tests

Based on
https://chromium-review.googlesource.com/c/chromium/src/+/1744521
by dpapad@

Autogenerate Polymer 3 version of cr-icon-button, add closure target,
and autogenerate and run its automated tests.

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

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_icon_button/cr_icon_button.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';
@@ -40,6 +41,8 @@ class HelloPolymer3Element extends PolymerElement {
 
       <cr-input></cr-input>
 
+      <cr-icon-button iron-icon="cr:more-vert"></cr-icon-button>
+
       <div>
         <cr-button on-click="onClick_">Show toast</cr-button>
         <cr-toast><span>I am toasted</span></cr-toast>

chrome/test/data/webui/BUILD.gn

@@ -33,6 +33,7 @@ js2gtest("interactive_ui_tests_js_webui") {
   ]
   data = [
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_checkbox_test.m.js",
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_icon_button_focus_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_input_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toggle_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/test_browser_proxy.m.js",
@@ -159,6 +160,7 @@ js2gtest("browser_tests_js_webui") {
   ]
   data = [
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_button_tests.m.js",
+    "$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_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

@@ -8,12 +8,15 @@ js_modulizer("modulize") {
   input_files = [
     "cr_button_tests.js",
     "cr_checkbox_test.js",
+    "cr_icon_button_tests.js",
+    "cr_icon_button_focus_tests.js",
     "cr_input_test.js",
     "cr_toast_test.js",
     "cr_toggle_test.js",
     "cr_view_manager_test.js",
   ]
   namespace_rewrites = [
+    "MockInteractions.downAndUp|downAndUp",
     "MockInteractions.keyDownOn|keyDownOn",
     "MockInteractions.keyEventOn|keyEventOn",
     "MockInteractions.keyUpOn|keyUpOn",
@@ -21,6 +24,7 @@ js_modulizer("modulize") {
     "MockInteractions.tap|tap",
     "Polymer.dom.flush|flush",
     "test_util.eventToPromise|eventToPromise",
+    "test_util.flushTasks|flushTasks",
     "test_util.isVisible|isVisible",
     "test_util.whenAttributeIs|whenAttributeIs",
   ]

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

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

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

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

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

@@ -2,6 +2,12 @@
 // 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_icon_button/cr_icon_button.m.js';
+//
+// #import {flushTasks} from 'chrome://test/test_util.m.js';
+// clang-format on
+
 suite('cr-icon-button-focus-tests', function() {
   let button;
 

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

@@ -2,6 +2,14 @@
 // 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_icon_button/cr_icon_button.m.js';
+
+// #import {downAndUp, pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// #import {eventToPromise} from 'chrome://test/test_util.m.js';
+// #import {flushTasks} from 'chrome://test/test_util.m.js';
+// clang-format on
+
 suite('cr-icon-button', function() {
   let button;
 

ui/webui/resources/cr_elements/BUILD.gn

@@ -31,6 +31,7 @@ group("closure_compile") {
     # Targets for auto-generated Polymer 3 JS Modules
     "cr_button:closure_compile_module",
     "cr_checkbox:closure_compile_module",
+    "cr_icon_button:closure_compile_module",
     "cr_input:closure_compile_module",
     "cr_toast:closure_compile_module",
     "cr_toggle:closure_compile_module",
@@ -115,6 +116,7 @@ group("polymer3_elements") {
     ":shared_vars_css_module",
     "cr_button:cr_button_module",
     "cr_checkbox:cr_checkbox_module",
+    "cr_icon_button:cr_icon_button_module",
     "cr_input:cr_input_module",
     "cr_input:cr_input_style_css_module",
     "cr_toast:cr_toast_module",

ui/webui/resources/cr_elements/cr_icon_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 = [
@@ -15,3 +16,27 @@ js_library("cr_icon_button") {
     "//third_party/polymer/v1_0/components-chromium/paper-behaviors:paper-ripple-behavior-extracted",
   ]
 }
+
+polymer_modulizer("cr_icon_button") {
+  js_file = "cr_icon_button.js"
+  html_file = "cr_icon_button.html"
+  html_type = "dom-module"
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_icon_button.m",
+  ]
+}
+
+js_library("cr_icon_button.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/paper-behaviors:paper-ripple-behavior",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":cr_icon_button_module" ]
+}

ui/webui/resources/cr_elements_resources_v3.grdp

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