WebUI: Migrate cr-slider shared element to TypeScript.

Adding minimal Closure externs file to satisfy a few CrOS cases that
still refer to cr-slider from JS code.

Bug: 1189595
Change-Id: I31cb1d19fc33fe02d97e6635bdcf5d15b3c85fda
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3536427
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#984209}

chrome/browser/resources/chromeos/crostini_installer/BUILD.gn

@@ -36,6 +36,7 @@ build_mwc_app("crostini_installer") {
   deps = [
     ":web_components",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources:library",
     "//ui/webui/resources:preprocess",
   ]
 }

chrome/browser/resources/settings/chromeos/crostini_page/BUILD.gn

@@ -79,18 +79,18 @@ js_library("crostini_disk_resize_dialog") {
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
-    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:i18n_behavior.m",
     "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
+  externs_list =
+      [ "//ui/webui/resources/cr_elements/cr_slider/cr_slider_externs.js" ]
 }
 
 js_library("crostini_disk_resize_confirmation_dialog") {
   deps = [
     ":crostini_browser_proxy",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
-    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:i18n_behavior.m",
     "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
@@ -115,7 +115,6 @@ js_library("crostini_import_confirmation_dialog") {
     ":crostini_browser_proxy",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
-    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
 }

chrome/browser/resources/settings/chromeos/crostini_page/crostini_disk_resize_confirmation_dialog.js

@@ -11,7 +11,6 @@ import '//resources/cr_elements/cr_button/cr_button.m.js';
 import '//resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import '../../settings_shared_css.js';
 
-import {SliderTick} from '//resources/cr_elements/cr_slider/cr_slider.js';
 import {I18nBehavior} from '//resources/js/i18n_behavior.m.js';
 import {WebUIListenerBehavior} from '//resources/js/web_ui_listener_behavior.m.js';
 import {afterNextRender, flush, html, Polymer, TemplateInstanceBase, Templatizer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

chrome/browser/resources/settings/chromeos/crostini_page/crostini_disk_resize_dialog.js

@@ -12,8 +12,8 @@ import '//resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import '//resources/cr_elements/icons.m.js';
 import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import '../../settings_shared_css.js';
+import '//resources/cr_elements/cr_slider/cr_slider.js';
 
-import {SliderTick} from '//resources/cr_elements/cr_slider/cr_slider.js';
 import {I18nBehavior} from '//resources/js/i18n_behavior.m.js';
 import {WebUIListenerBehavior} from '//resources/js/web_ui_listener_behavior.m.js';
 import {afterNextRender, flush, html, Polymer, TemplateInstanceBase, Templatizer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

chrome/browser/resources/settings/chromeos/device_page/BUILD.gn

@@ -53,14 +53,15 @@ js_library("display") {
     "../..:router",
     "../settings_scheduler_slider:settings_scheduler_slider",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:cr.m",
   ]
-  externs_list = chrome_extension_public_externs + [
-                   "$externs_path/settings_private.js",
-                   "$externs_path/system_display.js",
-                   "../settings_controls_types.js",
-                 ]
+  externs_list =
+      chrome_extension_public_externs + [
+        "$externs_path/settings_private.js",
+        "$externs_path/system_display.js",
+        "//ui/webui/resources/cr_elements/cr_slider/cr_slider_externs.js",
+        "../settings_controls_types.js",
+      ]
 }
 
 js_library("display_layout") {
@@ -118,6 +119,9 @@ js_library("pointers") {
     "../..:router",
     "//ui/webui/resources/cr_components/localized_link:localized_link",
   ]
+
+  externs_list =
+      [ "//ui/webui/resources/cr_elements/cr_slider/cr_slider_externs.js" ]
 }
 
 js_library("power") {

chrome/browser/resources/settings/chromeos/device_page/display.js

@@ -20,8 +20,8 @@ import '../../controls/settings_slider.js';
 import '../../settings_shared_css.js';
 import '../../settings_vars_css.js';
 import '../../controls/settings_dropdown_menu.js';
+import '//resources/cr_elements/cr_slider/cr_slider.js';
 
-import {SliderTick} from '//resources/cr_elements/cr_slider/cr_slider.js';
 import {assert, assertNotReached} from '//resources/js/assert.m.js';
 import {focusWithoutInk} from '//resources/js/cr/ui/focus_without_ink.m.js';
 import {I18nBehavior} from '//resources/js/i18n_behavior.m.js';

chrome/browser/resources/settings/chromeos/device_page/pointers.js

@@ -13,8 +13,8 @@ import '../../controls/settings_radio_group.js';
 import '../../controls/settings_slider.js';
 import '../../controls/settings_toggle_button.js';
 import '../../settings_shared_css.js';
+import '//resources/cr_elements/cr_slider/cr_slider.js';
 
-import {SliderTick} from '//resources/cr_elements/cr_slider/cr_slider.js';
 import {loadTimeData} from '//resources/js/load_time_data.m.js';
 import {afterNextRender, flush, html, Polymer, TemplateInstanceBase, Templatizer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

chrome/browser/resources/settings/chromeos/os_a11y_page/BUILD.gn

@@ -122,11 +122,12 @@ js_library("switch_access_setup_guide_dialog") {
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
-    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:i18n_behavior.m",
     "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
+  externs_list =
+      [ "//ui/webui/resources/cr_elements/cr_slider/cr_slider_externs.js" ]
 }
 
 js_library("switch_access_setup_guide_warning_dialog") {
@@ -151,6 +152,8 @@ js_library("switch_access_subpage") {
     "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
+  externs_list =
+      [ "//ui/webui/resources/cr_elements/cr_slider/cr_slider_externs.js" ]
 }
 
 js_library("switch_access_subpage_browser_proxy") {
@@ -170,10 +173,11 @@ js_library("tts_subpage") {
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/cr_elements/cr_expand_button:cr_expand_button.m",
     "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
-    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:i18n_behavior.m",
     "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
+  externs_list =
+      [ "//ui/webui/resources/cr_elements/cr_slider/cr_slider_externs.js" ]
 }
 
 js_library("tts_subpage_browser_proxy") {

chrome/browser/resources/settings/chromeos/os_a11y_page/switch_access_setup_guide_dialog.js

@@ -13,7 +13,6 @@ import '//resources/cr_elements/shared_style_css.m.js';
 import '../../controls/settings_slider.js';
 import '../os_icons.js';
 
-import {SliderTick} from '//resources/cr_elements/cr_slider/cr_slider.js';
 import {I18nBehavior} from '//resources/js/i18n_behavior.m.js';
 import {loadTimeData} from '//resources/js/load_time_data.m.js';
 import {WebUIListenerBehavior} from '//resources/js/web_ui_listener_behavior.m.js';

chrome/browser/resources/settings/chromeos/os_a11y_page/switch_access_subpage.js

@@ -15,7 +15,6 @@ import './switch_access_action_assignment_dialog.js';
 import './switch_access_setup_guide_dialog.js';
 import './switch_access_setup_guide_warning_dialog.js';
 
-import {SliderTick} from '//resources/cr_elements/cr_slider/cr_slider.js';
 import {I18nBehavior} from '//resources/js/i18n_behavior.m.js';
 import {loadTimeData} from '//resources/js/load_time_data.m.js';
 import {WebUIListenerBehavior} from '//resources/js/web_ui_listener_behavior.m.js';

chrome/browser/resources/settings/chromeos/os_a11y_page/tts_subpage.js

@@ -15,7 +15,6 @@ import '//resources/cr_elements/md_select_css.m.js';
 import '../../controls/settings_slider.js';
 import '../../settings_shared_css.js';
 
-import {SliderTick} from '//resources/cr_elements/cr_slider/cr_slider.js';
 import {I18nBehavior} from '//resources/js/i18n_behavior.m.js';
 import {WebUIListenerBehavior} from '//resources/js/web_ui_listener_behavior.m.js';
 import {afterNextRender, flush, html, Polymer, TemplateInstanceBase, Templatizer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

chrome/browser/resources/settings/chromeos/os_settings.gni

@@ -270,7 +270,6 @@ os_settings_auto_imports = settings_auto_imports +
                              "ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html|CrActionMenuElement",
                              "ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html|CrToolbarElement",
                              "ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html|CrToolbarSearchFieldElement",
-                             "ui/webui/resources/cr_elements/cr_slider/cr_slider.html|SliderTick",
                              "ui/webui/resources/html/assert.html|assert,assertNotReached",
                              "ui/webui/resources/html/cr.html|sendWithPromise,removeWebUIListener,addWebUIListener,WebUIListener",
                              "ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.html|CrPolicyIndicatorType",

ui/file_manager/audio_player/elements/BUILD.gn

@@ -29,9 +29,10 @@ js_library("control_panel") {
     ":repeat_button",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/file_manager/file_manager/foreground/elements:files_icon_button",
-    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/js:assert.m",
   ]
+  externs_list =
+      [ "//ui/webui/resources/cr_elements/cr_slider/cr_slider_externs.js" ]
 }
 
 js_library("track_info_panel") {

ui/file_manager/audio_player/elements/control_panel.js

@@ -4,8 +4,8 @@
 
 import 'chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_icon_button.js';
 import './repeat_button.js';
+import 'chrome://resources/cr_elements/cr_slider/cr_slider.js';
 
-import {CrSliderElement} from 'chrome://resources/cr_elements/cr_slider/cr_slider.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

ui/file_manager/audio_player/js/BUILD.gn

@@ -137,6 +137,7 @@ optimize_webui("build") {
     ":main",
     "//ui/file_manager:preprocess_generated",
     "//ui/file_manager:preprocess_static",
+    "//ui/webui/resources:library",
     "//ui/webui/resources:preprocess",
   ]
 }

ui/webui/resources/BUILD.gn

@@ -172,7 +172,6 @@ checked_in_dts_files = [
   "cr_elements/cr_scrollable_behavior.m.d.ts",
   "cr_elements/cr_search_field/cr_search_field_behavior.d.ts",
   "cr_elements/cr_search_field/cr_search_field.d.ts",
-  "cr_elements/cr_slider/cr_slider.d.ts",
   "cr_elements/cr_toast/cr_toast_manager.d.ts",
   "cr_elements/cr_toast/cr_toast.d.ts",
   "cr_elements/cr_toggle/cr_toggle.m.d.ts",
@@ -266,6 +265,7 @@ ts_library("library") {
     "cr_elements/cr_a11y_announcer/cr_a11y_announcer.ts",
     "cr_elements/cr_container_shadow_mixin.ts",
     "cr_elements/cr_nav_menu_item_style.ts",
+    "cr_elements/cr_slider/cr_slider.ts",
     "cr_elements/cr_splitter/cr_splitter.ts",
     "cr_elements/cr_tabs/cr_tabs.ts",
     "cr_elements/cr_toolbar/cr_toolbar_selection_overlay.ts",

ui/webui/resources/cr_elements/BUILD.gn

@@ -176,7 +176,6 @@ preprocess_if_expr("preprocess_generated") {
     "cr_radio_group/cr_radio_group.m.js",
     "cr_scrollable_behavior.m.js",
     "cr_search_field/cr_search_field.js",
-    "cr_slider/cr_slider.js",
     "cr_toast/cr_toast_manager.js",
     "cr_toast/cr_toast.js",
     "cr_toggle/cr_toggle.m.js",
@@ -217,6 +216,7 @@ preprocess_if_expr("preprocess_generated_ts") {
   out_folder = preprocess_folder
   in_files = [
     "cr_a11y_announcer/cr_a11y_announcer.ts",
+    "cr_slider/cr_slider.ts",
     "cr_tabs/cr_tabs.ts",
     "cr_toolbar/cr_toolbar_selection_overlay.ts",
     "cr_nav_menu_item_style.ts",
@@ -265,7 +265,6 @@ 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_toast:closure_compile_module",
     "cr_toggle:closure_compile_module",
     "cr_toolbar:closure_compile_module",

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

@@ -2,22 +2,8 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
-import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/polymer/html_to_js.gni")
 
 html_to_js("web_components") {
-  js_files = [ "cr_slider.js" ]
-}
-
-js_type_check("closure_compile_module") {
-  is_polymer3 = true
-  deps = [ ":cr_slider" ]
-}
-
-js_library("cr_slider") {
-  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:event_tracker.m",
-  ]
+  js_files = [ "cr_slider.ts" ]
 }