Web UI Polymer 3: Port cr-radio-group and event_tracker

- Autogenerate Polymer 3 version of cr-radio-group
- Add to the Polymer 3 demo page
- Add an autogenerated JS module version of event tracker, since this is
used by cr-radio-group
- Autogenerate cr-radio-group v3 automated test.

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

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

@@ -7,6 +7,7 @@ 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_radio_group/cr_radio_group.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';
@@ -51,8 +52,13 @@ class HelloPolymer3Element extends PolymerElement {
 
       <iron-icon icon="cr:error"></iron-icon>
 
-      <cr-radio-button>one</cr-radio-button>
-      <cr-radio-button>two</cr-radio-button>
+      <div>
+        <cr-radio-group id="radioGroup" selected="cr">
+          <cr-radio-button name="cr">cr</cr-radio-button>
+          <cr-radio-button name="radio">radio</cr-radio-button>
+          <cr-radio-button name="buttons">buttons</cr-radio-button>
+        </cr-radio-group>
+      </div>
     `;
   }
 

chrome/test/data/webui/BUILD.gn

@@ -162,6 +162,7 @@ js2gtest("browser_tests_js_webui") {
     "$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_radio_group_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

@@ -12,6 +12,7 @@ js_modulizer("modulize") {
     "cr_icon_button_focus_tests.js",
     "cr_input_test.js",
     "cr_radio_button_test.js",
+    "cr_radio_group_test.js",
     "cr_toast_test.js",
     "cr_toggle_test.js",
     "cr_view_manager_test.js",
@@ -24,6 +25,7 @@ js_modulizer("modulize") {
     "MockInteractions.pressAndReleaseKeyOn|pressAndReleaseKeyOn",
     "MockInteractions.tap|tap",
     "Polymer.dom.flush|flush",
+    "PolymerTest.importHtml|importHtml",
     "test_util.eventToPromise|eventToPromise",
     "test_util.flushTasks|flushTasks",
     "test_util.isVisible|isVisible",

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

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

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

@@ -2,6 +2,15 @@
 // 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_group/cr_radio_group.m.js';
+// #import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.m.js';
+//
+// #import {eventToPromise, importHtml} from 'chrome://test/test_util.m.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// clang-format on
+
 suite('cr-radio-group', () => {
   let radioGroup;
 

chrome/test/data/webui/test_util.js

@@ -127,12 +127,22 @@ cr.define('test_util', function() {
     return !!rect && rect.width * rect.height > 0;
   }
 
+  /**
+   * Dummy importHtml() for Polymer 3 tests, that does nothing since Polymer 3
+   * doesn't use HTML imports. To use, import from test_util.m.js and set
+   * PolymerTest.importHtml|importHtml in namespace_rewrites.
+   * @return {!Promise}
+   */
+  /* #export */ function importHtml() {
+    return Promise.resolve();
+  }
 
   // #cr_define_end
   return {
     eventToPromise: eventToPromise,
     fakeDataBind: fakeDataBind,
     flushTasks: flushTasks,
+    importHtml: importHtml,
     isVisible: isVisible,
     waitAfterNextRender: waitAfterNextRender,
     waitBeforeNextRender: waitBeforeNextRender,

ui/webui/resources/cr_elements/BUILD.gn

@@ -34,6 +34,7 @@ group("closure_compile") {
     "cr_icon_button:closure_compile_module",
     "cr_input:closure_compile_module",
     "cr_radio_button:closure_compile_module",
+    "cr_radio_group:closure_compile_module",
     "cr_toast:closure_compile_module",
     "cr_toggle:closure_compile_module",
     "cr_view_manager:closure_compile_module",
@@ -123,6 +124,7 @@ group("polymer3_elements") {
     "cr_radio_button:cr_radio_button_module",
     "cr_radio_button:cr_radio_button_style_css_module",
     "cr_radio_button:modulize",
+    "cr_radio_group:cr_radio_group_module",
     "cr_toast:cr_toast_module",
     "cr_toggle:cr_toggle_module",
     "cr_view_manager:cr_view_manager_module",

ui/webui/resources/cr_elements/cr_radio_group/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_radio_group") {
     "//ui/webui/resources/js:event_tracker",
   ]
 }
+
+# Targets for auto-generating and typechecking Polymer 3 JS modules
+
+polymer_modulizer("cr_radio_group") {
+  js_file = "cr_radio_group.js"
+  html_file = "cr_radio_group.html"
+  html_type = "dom-module"
+  auto_imports = [
+    "ui/webui/resources/html/event_tracker.html|EventTracker",
+    "ui/webui/resources/html/polymer.html|Polymer,html,dom",
+  ]
+  namespace_rewrites = [ "Polymer.dom|dom" ]
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_radio_group.m",
+  ]
+}
+
+js_library("cr_radio_group.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_radio_group/cr_radio_group.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:event_tracker.m",
+  ]
+  extra_deps = [ ":cr_radio_group_module" ]
+}

ui/webui/resources/cr_elements_resources_v3.grdp

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

ui/webui/resources/js/BUILD.gn

@@ -141,6 +141,7 @@ js_library("find_shortcut_behavior") {
 js_modulizer("modulize") {
   input_files = [
     "assert.js",
+    "event_tracker.js",
     "icon.js",
     "i18n_behavior.js",
     "load_time_data.js",
@@ -158,6 +159,7 @@ js_type_check("closure_compile_modules") {
   deps = [
     ":assert.m",
     ":cr.m",
+    ":event_tracker.m",
     ":i18n_behavior.m",
     ":icon.m",
     ":load_time_data.m",
@@ -182,6 +184,13 @@ js_library("cr.m") {
   externs_list = [ "$externs_path/chrome_send.js" ]
 }
 
+js_library("event_tracker.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/js/event_tracker.m.js",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("icon.m") {
   sources = [
     "$root_gen_dir/ui/webui/resources/js/icon.m.js",

ui/webui/resources/js/event_tracker.js

@@ -11,31 +11,22 @@
  * calling Function.bind.
  */
 
-/**
- * Create an EventTracker to track a set of events.
- * EventTracker instances are typically tied 1:1 with other objects or
- * DOM elements whose listeners should be removed when the object is disposed
- * or the corresponding elements are removed from the DOM.
- * @constructor
- */
-function EventTracker() {
+// eslint-disable-next-line no-var
+/* #export */ var EventTracker = class {
   /**
-   * @type {Array<EventTracker.Entry>}
-   * @private
+   * Create an EventTracker to track a set of events.
+   * EventTracker instances are typically tied 1:1 with other objects or
+   * DOM elements whose listeners should be removed when the object is disposed
+   * or the corresponding elements are removed from the DOM.
    */
-  this.listeners_ = [];
-}
-
-/**
- * The type of the internal tracking entry.
- * @typedef {{target: !EventTarget,
- *            eventType: string,
- *            listener: (EventListener|Function),
- *            capture: boolean}}
- */
-EventTracker.Entry;
+  constructor() {
+    /**
+     * @type {Array<EventTracker.Entry>}
+     * @private
+     */
+    this.listeners_ = [];
+  }
 
-EventTracker.prototype = {
   /**
    * Add an event listener - replacement for EventTarget.addEventListener.
    * @param {!EventTarget} target The DOM target to add a listener to.
@@ -43,7 +34,7 @@ EventTracker.prototype = {
    * @param {EventListener|Function} listener The listener to add.
    * @param {boolean=} opt_capture Whether to invoke during the capture phase.
    */
-  add: function(target, eventType, listener, opt_capture) {
+  add(target, eventType, listener, opt_capture) {
     const capture = !!opt_capture;
     const h = {
       target: target,
@@ -53,38 +44,48 @@ EventTracker.prototype = {
     };
     this.listeners_.push(h);
     target.addEventListener(eventType, listener, capture);
-  },
+  }
 
   /**
    * Remove any specified event listeners added with this EventTracker.
    * @param {!EventTarget} target The DOM target to remove a listener from.
    * @param {?string} eventType The type of event to remove.
    */
-  remove: function(target, eventType) {
-    this.listeners_ = this.listeners_.filter(function(h) {
-      if (h.target == target && (!eventType || (h.eventType == eventType))) {
-        EventTracker.removeEventListener_(h);
+  remove(target, eventType) {
+    this.listeners_ = this.listeners_.filter(listener => {
+      if (listener.target == target &&
+          (!eventType || (listener.eventType == eventType))) {
+        EventTracker.removeEventListener(listener);
         return false;
       }
       return true;
     });
-  },
+  }
+
+  /** Remove all event listeners added with this EventTracker. */
+  removeAll() {
+    this.listeners_.forEach(
+        listener => EventTracker.removeEventListener(listener));
+    this.listeners_ = [];
+  }
 
   /**
-   * Remove all event listeners added with this EventTracker.
+   * Remove a single event listener given it's tracking entry. It's up to the
+   * caller to ensure the entry is removed from listeners_.
+   * @param {EventTracker.Entry} entry The entry describing the listener to
+   * remove.
    */
-  removeAll: function() {
-    this.listeners_.forEach(EventTracker.removeEventListener_);
-    this.listeners_ = [];
+  static removeEventListener(entry) {
+    entry.target.removeEventListener(
+        entry.eventType, entry.listener, entry.capture);
   }
 };
 
 /**
- * Remove a single event listener given it's tracking entry. It's up to the
- * caller to ensure the entry is removed from listeners_.
- * @param {EventTracker.Entry} h The entry describing the listener to remove.
- * @private
+ * The type of the internal tracking entry.
+ * @typedef {{target: !EventTarget,
+ *            eventType: string,
+ *            listener: (EventListener|Function),
+ *            capture: boolean}}
  */
-EventTracker.removeEventListener_ = function(h) {
-  h.target.removeEventListener(h.eventType, h.listener, h.capture);
-};
+EventTracker.Entry;

ui/webui/resources/webui_resources.grd

@@ -89,6 +89,9 @@ without changes to the corresponding grd file. -->
       <include name="IDR_WEBUI_JS_CR_UI_FOCUS_OUTLINE_MANAGER_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/cr/ui/focus_outline_manager.m.js"
                use_base_dir="false" type="BINDATA" compress="gzip" />
+      <include name="IDR_WEBUI_JS_EVENT_TRACKER_M_JS"
+               file="${root_gen_dir}/ui/webui/resources/js/event_tracker.m.js"
+               use_base_dir="false" type="BINDATA" compress="gzip" />
       <include name="IDR_WEBUI_JS_ICON_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/icon.m.js"
                use_base_dir="false" type="BINDATA" compress="gzip" />