WebUI: Migrate cr-menu-selector, cr_profile_avatar_selector to TS.

Bug: 1189595
Change-Id: Idbd15a152df84325ae23f1f3a927127783cad5bc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3564709
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/main@{#989126}

ui/webui/resources/BUILD.gn

@@ -163,7 +163,6 @@ checked_in_dts_files = [
   "cr_elements/cr_input/cr_input.m.d.ts",
   "cr_elements/cr_lazy_render/cr_lazy_render.m.d.ts",
   "cr_elements/cr_lottie/cr_lottie.m.d.ts",
-  "cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.d.ts",
   "cr_elements/cr_radio_button/cr_card_radio_button.m.d.ts",
   "cr_elements/cr_radio_button/cr_radio_button_behavior.m.d.ts",
   "cr_elements/cr_radio_button/cr_radio_button.m.d.ts",
@@ -225,9 +224,7 @@ if (include_polymer) {
     "cr_elements/cr_actionable_row_style.m.js",
     "cr_elements/cr_icons_css.m.js",
     "cr_elements/cr_input/cr_input_style_css.m.js",
-    "cr_elements/cr_menu_selector/cr_menu_selector.js",
     "cr_elements/cr_page_host_style_css.js",
-    "cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.js",
     "cr_elements/cr_radio_button/cr_radio_button_style_css.m.js",
     "cr_elements/hidden_style_css.m.js",
     "cr_elements/icons.m.js",
@@ -273,7 +270,10 @@ ts_library("library") {
       "cr_elements/cr_container_shadow_mixin.ts",
       "cr_elements/cr_drawer/cr_drawer.ts",
       "cr_elements/cr_link_row/cr_link_row.ts",
+      "cr_elements/cr_menu_selector/cr_menu_selector.ts",
       "cr_elements/cr_nav_menu_item_style.ts",
+      "cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts",
+      "cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.ts",
       "cr_elements/cr_slider/cr_slider.ts",
       "cr_elements/cr_splitter/cr_splitter.ts",
       "cr_elements/cr_tabs/cr_tabs.ts",

ui/webui/resources/cr_elements/BUILD.gn

@@ -161,10 +161,7 @@ preprocess_if_expr("preprocess_generated") {
     "cr_input/cr_input_style_css.m.js",
     "cr_lazy_render/cr_lazy_render.m.js",
     "cr_lottie/cr_lottie.m.js",
-    "cr_menu_selector/cr_menu_selector.js",
     "cr_page_host_style_css.js",
-    "cr_profile_avatar_selector/cr_profile_avatar_selector_grid.js",
-    "cr_profile_avatar_selector/cr_profile_avatar_selector.js",
     "cr_radio_button/cr_card_radio_button.m.js",
     "cr_radio_button/cr_radio_button_behavior.m.js",
     "cr_radio_button/cr_radio_button.m.js",
@@ -211,7 +208,10 @@ preprocess_if_expr("preprocess_generated_ts") {
     "cr_drawer/cr_drawer.ts",
     "cr_grid/cr_grid.ts",
     "cr_link_row/cr_link_row.ts",
+    "cr_menu_selector/cr_menu_selector.ts",
     "cr_nav_menu_item_style.ts",
+    "cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts",
+    "cr_profile_avatar_selector/cr_profile_avatar_selector.ts",
     "cr_slider/cr_slider.ts",
     "cr_tabs/cr_tabs.ts",
     "cr_toast/cr_toast.ts",
@@ -239,7 +239,6 @@ group("closure_compile") {
     "cr_icon_button:closure_compile",
     "cr_input:closure_compile",
     "cr_lottie:closure_compile",
-    "cr_menu_selector:closure_compile",
     "cr_radio_button:closure_compile",
     "cr_radio_group:closure_compile",
     "cr_toggle:closure_compile",
@@ -256,7 +255,6 @@ group("closure_compile") {
     "cr_input:closure_compile_module",
     "cr_lazy_render:closure_compile_module",
     "cr_lottie:closure_compile_module",
-    "cr_profile_avatar_selector:closure_compile_module",
     "cr_radio_button:closure_compile_module",
     "cr_radio_group:closure_compile_module",
     "cr_search_field:closure_compile_module",

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

@@ -2,21 +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_menu_selector.js" ]
-}
-
-js_type_check("closure_compile") {
-  is_polymer3 = true
-  deps = [ ":cr_menu_selector" ]
-}
-
-js_library("cr_menu_selector") {
-  deps = [
-    "//ui/webui/resources/js:assert.m",
-    "//ui/webui/resources/js/cr/ui:focus_outline_manager.m",
-  ]
+  js_files = [ "cr_menu_selector.ts" ]
 }

ui/webui/resources/cr_elements/cr_menu_selector/cr_menu_selector.js → ui/webui/resources/cr_elements/cr_menu_selector/cr_menu_selector.ts

@@ -5,66 +5,49 @@
 import {assert} from '../../js/assert.m.js';
 import {FocusOutlineManager} from '../../js/cr/ui/focus_outline_manager.m.js';
 
-/** @extends {HTMLElement} */
 export class CrMenuSelector extends HTMLElement {
   static get is() {
     return 'cr-menu-selector';
   }
 
+  private focusOutlineManager_: FocusOutlineManager;
+
   constructor() {
     super();
 
-    /** @private {!FocusOutlineManager} */
-    this.focusOutlineManager_;
-
-    this.addEventListener(
-        'focusin', e => this.onFocusin_(/** @type {!FocusEvent} */ (e)));
-    this.addEventListener(
-        'keydown', e => this.onKeydown_(/** @type {!KeyboardEvent} */ (e)));
+    this.addEventListener('focusin', this.onFocusin_.bind(this));
+    this.addEventListener('keydown', this.onKeydown_.bind(this));
   }
 
   connectedCallback() {
     this.focusOutlineManager_ = FocusOutlineManager.forDocument(document);
     this.setAttribute('role', 'menu');
   }
 
-  /**
-   * @return {!Array<!HTMLElement>}
-   * @private
-   */
-  getItems_() {
-    return /** @type {!Array<!HTMLElement>} */ (
-        Array.from(this.querySelectorAll(
-            '[role=menuitem]:not([disabled]):not([hidden])')));
+  private getItems_(): Array<HTMLElement> {
+    return Array.from(
+        this.querySelectorAll('[role=menuitem]:not([disabled]):not([hidden])'));
   }
 
-  /**
-   * @param {!FocusEvent} e
-   * @private
-   */
-  onFocusin_(e) {
+  private onFocusin_(e: FocusEvent) {
     // If the focus was moved by keyboard and is coming in from a relatedTarget
     // that is not within this menu, move the focus to the first menu item. This
     // ensures that the first menu item is always the first focused item when
     // focusing into the menu. A null relatedTarget means the focus was moved
     // from outside the WebContents.
     const focusMovedWithKeyboard = this.focusOutlineManager_.visible;
     const focusMovedFromOutside = e.relatedTarget === null ||
-        !this.contains(/** @type {!HTMLElement} */ (e.relatedTarget));
+        !this.contains(e.relatedTarget as HTMLElement);
     if (focusMovedWithKeyboard && focusMovedFromOutside) {
-      this.getItems_()[0].focus();
+      this.getItems_()[0]!.focus();
     }
   }
 
-  /**
-   * @param {!KeyboardEvent} event
-   * @private
-   */
-  onKeydown_(event) {
+  private onKeydown_(event: KeyboardEvent) {
     const items = this.getItems_();
     assert(items.length >= 1);
-    const currentFocusedIndex = items.indexOf(
-        /** @type {!HTMLElement} */ (this.querySelector(':focus')));
+    const currentFocusedIndex =
+        items.indexOf(this.querySelector<HTMLElement>(':focus')!);
 
     let newFocusedIndex = currentFocusedIndex;
     switch (event.key) {
@@ -73,12 +56,12 @@ export class CrMenuSelector extends HTMLElement {
           // If pressing Shift+Tab, immediately focus the first element so that
           // when the event is finished processing, the browser automatically
           // focuses the previous focusable element outside of the menu.
-          items[0].focus();
+          items[0]!.focus();
         } else {
           // If pressing Tab, immediately focus the last element so that when
           // the event is finished processing, the browser automatically focuses
           // the next focusable element outside of the menu.
-          items[items.length - 1].focus({preventScroll: true});
+          items[items.length - 1]!.focus({preventScroll: true});
         }
         return;
       case 'ArrowDown':
@@ -101,7 +84,7 @@ export class CrMenuSelector extends HTMLElement {
     }
 
     event.preventDefault();
-    items[newFocusedIndex].focus();
+    items[newFocusedIndex]!.focus();
   }
 }
 

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

@@ -2,36 +2,11 @@
 # 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_profile_avatar_selector_grid.js",
-    "cr_profile_avatar_selector.js",
-  ]
-}
-
-js_type_check("closure_compile_module") {
-  is_polymer3 = true
-  deps = [
-    ":cr_profile_avatar_selector",
-    ":cr_profile_avatar_selector_grid",
-  ]
-}
-
-js_library("cr_profile_avatar_selector") {
-  deps = [
-    ":cr_profile_avatar_selector_grid",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-    "//ui/webui/resources/js:icon",
-  ]
-}
-
-js_library("cr_profile_avatar_selector_grid") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-    "//ui/webui/resources/js:assert.m",
-    "//ui/webui/resources/js:util.m",
+    "cr_profile_avatar_selector_grid.ts",
+    "cr_profile_avatar_selector.ts",
   ]
 }