Web UI Polymer 3: Port cr_slider.

Autogenerate Polymer 3 version of cr_slider and tests.

Bug: chromium:858815
Test: browser tests
Change-Id: Ied01457e7b404400c277149539c9bbb6d630ad10
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2004184
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Auto-Submit: David Munro <davidmunro@google.com>
Cr-Commit-Position: refs/heads/master@{#733412}

chrome/test/data/webui/BUILD.gn

@@ -188,6 +188,7 @@ js2gtest("browser_tests_js_webui") {
     "$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_slider_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_toast_manager_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toolbar_search_field_tests.m.js",

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

@@ -22,6 +22,7 @@ js_modulizer("modulize") {
     "cr_radio_button_test.js",
     "cr_radio_group_test.js",
     "cr_search_field_tests.js",
+    "cr_slider_test.js",
     "cr_toolbar_search_field_tests.js",
     "cr_tabs_test.js",
     "cr_toast_test.js",

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

@@ -184,6 +184,18 @@ TEST_F('CrElementsSearchableDropDownV3Test', 'All', function() {
 });
 GEN('#endif');
 
+// eslint-disable-next-line no-var
+var CrElementsSliderV3Test = class extends CrElementsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_slider_test.m.js';
+  }
+};
+
+TEST_F('CrElementsSliderV3Test', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var CrElementsSplitterV3Test = class extends CrElementsV3BrowserTest {
   /** @override */

chrome/test/data/webui/cr_elements/cr_slider_test.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_slider/cr_slider.m.js';
+// #import {Polymer, flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {flushTasks, eventToPromise} from '../test_util.m.js';
+// #import {pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// clang-format on
+
 suite('cr-slider', function() {
   let crSlider;
 

ui/webui/resources/cr_elements/BUILD.gn

@@ -46,6 +46,7 @@ group("closure_compile") {
     "cr_radio_button:closure_compile_module",
     "cr_radio_group:closure_compile_module",
     "cr_search_field:closure_compile_module",
+    "cr_slider:closure_compile_module",
     "cr_tabs:closure_compile_module",
     "cr_toast:closure_compile_module",
     "cr_toggle:closure_compile_module",
@@ -171,6 +172,7 @@ group("polymer3_elements") {
     "cr_radio_group:cr_radio_group_module",
     "cr_search_field:cr_search_field_module",
     "cr_search_field:modulize",
+    "cr_slider:cr_slider_module",
     "cr_tabs:cr_tabs_module",
     "cr_toast:cr_toast_manager_module",
     "cr_toast:cr_toast_module",

ui/webui/resources/cr_elements/cr_slider/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 = [ ":cr_slider" ]
@@ -15,3 +16,28 @@ js_library("cr_slider") {
     "//ui/webui/resources/js:event_tracker",
   ]
 }
+
+polymer_modulizer("cr_slider") {
+  js_file = "cr_slider.js"
+  html_file = "cr_slider.html"
+  html_type = "dom-module"
+  auto_imports = [ "ui/webui/resources/html/event_tracker.html|EventTracker" ]
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [ ":cr_slider.m" ]
+}
+
+js_library("cr_slider.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_slider/cr_slider.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",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:event_tracker.m",
+  ]
+  extra_deps = [ ":cr_slider_module" ]
+}

ui/webui/resources/cr_elements/cr_slider/cr_slider.js

@@ -32,7 +32,9 @@ cr.define('cr_slider', function() {
   }
 
   /**
-   * @param {!(cr_slider.SliderTick|number)} tick
+   * Object is actually a SliderTick, but the closure compiler won't
+   * recognise it with the way this code is structured.
+   * @param {!(Object|number)} tick
    * @return {number}
    */
   function getAriaValue(tick) {
@@ -122,7 +124,9 @@ cr.define('cr_slider', function() {
       /**
        * The data associated with each tick on the slider. Each element in the
        * array contains a value and the label corresponding to that value.
-       * @type {!Array<cr_slider.SliderTick>|!Array<number>}
+       * Object is actually a SliderTick, but the closure compiler won't
+       * recognise it with the way this code is structured.
+       * @type {!Array<Object>|!Array<number>}
        */
       ticks: {
         type: Array,
@@ -469,6 +473,7 @@ cr.define('cr_slider', function() {
     },
   });
 
+  // #cr_define_end
   return {
     SliderTick: SliderTick,
   };

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -185,6 +185,11 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_SLIDER_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_slider/cr_slider.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <if expr="chromeos">
     <include name="IDR_CR_ELEMENTS_CR_SEARCHABLE_DROP_DOWN_M_JS"
            file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.m.js"