Web UI Polymer3: Port cr-radio-button and tests

- Autogenerate Polymer 3 version of cr-radio-button and its style and
  behavior
- Add closure targets
- Autogenerate and run cr-radio-button automated tests with Polymer 3
- Add to demo page

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

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

@@ -6,6 +6,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_radio_button/cr_radio_button.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';
@@ -49,6 +50,9 @@ class HelloPolymer3Element extends PolymerElement {
       </div>
 
       <iron-icon icon="cr:error"></iron-icon>
+
+      <cr-radio-button>one</cr-radio-button>
+      <cr-radio-button>two</cr-radio-button>
     `;
   }
 

chrome/test/data/webui/BUILD.gn

@@ -161,6 +161,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_radio_button_test.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

@@ -11,6 +11,7 @@ js_modulizer("modulize") {
     "cr_icon_button_tests.js",
     "cr_icon_button_focus_tests.js",
     "cr_input_test.js",
+    "cr_radio_button_test.js",
     "cr_toast_test.js",
     "cr_toggle_test.js",
     "cr_view_manager_test.js",

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

@@ -488,7 +488,6 @@ CrElementsRadioButtonTest.prototype = {
 
   /** @override */
   extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
-    '../test_util.js',
     'cr_radio_button_test.js',
   ]),
 };

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

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

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

@@ -2,6 +2,10 @@
 // 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_radio_button/cr_radio_button.m.js';
+// clang-format on
+
 suite('cr-radio-button', function() {
   let radioButton;
 

ui/webui/resources/cr_elements/BUILD.gn

@@ -33,6 +33,7 @@ group("closure_compile") {
     "cr_checkbox:closure_compile_module",
     "cr_icon_button:closure_compile_module",
     "cr_input:closure_compile_module",
+    "cr_radio_button:closure_compile_module",
     "cr_toast:closure_compile_module",
     "cr_toggle:closure_compile_module",
     "cr_view_manager:closure_compile_module",
@@ -119,6 +120,9 @@ group("polymer3_elements") {
     "cr_icon_button:cr_icon_button_module",
     "cr_input:cr_input_module",
     "cr_input:cr_input_style_css_module",
+    "cr_radio_button:cr_radio_button_module",
+    "cr_radio_button:cr_radio_button_style_css_module",
+    "cr_radio_button:modulize",
     "cr_toast:cr_toast_module",
     "cr_toggle:cr_toggle_module",
     "cr_view_manager:cr_view_manager_module",

ui/webui/resources/cr_elements/cr_radio_button/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 = [
@@ -21,3 +23,55 @@ js_library("cr_radio_button_behavior") {
     "//third_party/polymer/v1_0/components-chromium/paper-behaviors:paper-ripple-behavior-extracted",
   ]
 }
+
+# Targets for auto-generating and typechecking Polymer 3 JS modules
+
+js_modulizer("modulize") {
+  input_files = [ "cr_radio_button_behavior.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/paper-behaviors:paper-ripple-behavior",
+  ]
+  namespace_rewrites = [ "Polymer.PaperRippleBehavior|PaperRippleBehavior" ]
+}
+
+polymer_modulizer("cr_radio_button") {
+  js_file = "cr_radio_button.js"
+  html_file = "cr_radio_button.html"
+  html_type = "dom-module"
+  auto_imports = [ "ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.html|CrRadioButtonBehavior" ]
+}
+
+polymer_modulizer("cr_radio_button_style_css") {
+  js_file = "cr_radio_button_style_css.m.js"
+  html_file = "cr_radio_button_style_css.html"
+  html_type = "style-module"
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_radio_button.m",
+    ":cr_radio_button_behavior.m",
+  ]
+}
+
+js_library("cr_radio_button.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.m.js",
+  ]
+  deps = [
+    ":cr_radio_button_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":cr_radio_button_module" ]
+}
+
+js_library("cr_radio_button_behavior.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/paper-behaviors:paper-ripple-behavior",
+  ]
+  extra_deps = [ ":modulize" ]
+}

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.js

@@ -6,6 +6,10 @@
  * @fileoverview Behavior for cr-radio-button-like elements.
  */
 
+// clang-format off
+// #import {PaperRippleBehavior} from 'chrome://resources/polymer/v3_0/paper-behaviors/paper-ripple-behavior.js'
+// clang-format on
+
 /** @polymerBehavior */
 const CrRadioButtonBehaviorImpl = {
   properties: {
@@ -89,7 +93,7 @@ const CrRadioButtonBehaviorImpl = {
 
 
 /** @polymerBehavior */
-const CrRadioButtonBehavior = [
+/* #export */ const CrRadioButtonBehavior = [
   Polymer.PaperRippleBehavior,
   CrRadioButtonBehaviorImpl,
 ];

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -31,6 +31,21 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_BEHAVIOR_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_behavior.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_STYLE_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_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"