WebUI: Migrate cr-grid shared element to TypeScript.

Bug: 1189595
Change-Id: Ie496dea08ae2f27d3cf614debfe47691e28adaf6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3540657
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#984221}

ui/webui/resources/BUILD.gn

@@ -158,7 +158,6 @@ checked_in_dts_files = [
   "cr_elements/cr_drawer/cr_drawer.d.ts",
   "cr_elements/cr_expand_button/cr_expand_button.m.d.ts",
   "cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.m.d.ts",
-  "cr_elements/cr_grid/cr_grid.d.ts",
   "cr_elements/cr_icon_button/cr_icon_button.m.d.ts",
   "cr_elements/cr_input/cr_input.m.d.ts",
   "cr_elements/cr_lazy_render/cr_lazy_render.m.d.ts",
@@ -262,6 +261,7 @@ ts_library("library") {
     "cr_components/iph_bubble/iph_bubble.ts",
     "cr_components/managed_footnote/managed_footnote.ts",
     "cr_components/managed_dialog/managed_dialog.ts",
+    "cr_elements/cr_grid/cr_grid.ts",
     "cr_elements/cr_a11y_announcer/cr_a11y_announcer.ts",
     "cr_elements/cr_container_shadow_mixin.ts",
     "cr_elements/cr_nav_menu_item_style.ts",

ui/webui/resources/cr_elements/BUILD.gn

@@ -157,7 +157,6 @@ preprocess_if_expr("preprocess_generated") {
     "cr_expand_button/cr_expand_button.m.js",
     "cr_fingerprint/cr_fingerprint_icon.m.js",
     "cr_fingerprint/cr_fingerprint_progress_arc.m.js",
-    "cr_grid/cr_grid.js",
     "cr_icon_button/cr_icon_button.m.js",
     "cr_icons_css.m.js",
     "cr_input/cr_input.m.js",
@@ -216,6 +215,7 @@ preprocess_if_expr("preprocess_generated_ts") {
   out_folder = preprocess_folder
   in_files = [
     "cr_a11y_announcer/cr_a11y_announcer.ts",
+    "cr_grid/cr_grid.ts",
     "cr_slider/cr_slider.ts",
     "cr_tabs/cr_tabs.ts",
     "cr_toolbar/cr_toolbar_selection_overlay.ts",
@@ -237,7 +237,6 @@ group("closure_compile") {
     "cr_dialog:closure_compile",
     "cr_expand_button:closure_compile",
     "cr_fingerprint:closure_compile",
-    "cr_grid:closure_compile",
     "cr_icon_button:closure_compile",
     "cr_input:closure_compile",
     "cr_lottie:closure_compile",

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

@@ -2,20 +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_grid.js" ]
-}
-
-js_type_check("closure_compile") {
-  is_polymer3 = true
-  deps = [ ":cr_grid" ]
-}
-
-js_library("cr_grid") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
+  js_files = [ "cr_grid.ts" ]
 }

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

@@ -6,6 +6,13 @@ import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/poly
 
 // Displays children in a two-dimensional grid and supports focusing children
 // with arrow keys.
+
+export interface CrGridElement {
+  $: {
+    items: HTMLSlotElement,
+  };
+}
+
 export class CrGridElement extends PolymerElement {
   static get is() {
     return 'cr-grid';
@@ -24,30 +31,22 @@ export class CrGridElement extends PolymerElement {
     };
   }
 
-  constructor() {
-    super();
-
-    /** @type {number} */
-    this.columns = 1;
-  }
+  columns: number = 1;
 
-  /** @private */
-  onColumnsChange_() {
+  private onColumnsChange_() {
     this.updateStyles({'--cr-grid-columns': this.columns});
   }
 
-  /**
-   * @param {!Event} e
-   * @private
-   */
-  onKeyDown_(e) {
+  private onKeyDown_(e: KeyboardEvent) {
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
       e.preventDefault();
-      const items = this.$.items.assignedElements().filter(
-          (el) =>
-              (!!(el.offsetWidth || el.offsetHeight ||
-                  el.getClientRects().length)));
-      const currentIndex = items.indexOf(e.target);
+      const items =
+          (this.$.items.assignedElements() as HTMLElement[]).filter(el => {
+            return !!(
+                el.offsetWidth || el.offsetHeight ||
+                el.getClientRects().length);
+          });
+      const currentIndex = items.indexOf(e.target as HTMLElement);
       const isRtl = window.getComputedStyle(this)['direction'] === 'rtl';
       const bottomRowColumns = items.length % this.columns;
       const direction = ['ArrowRight', 'ArrowDown'].includes(e.key) ? 1 : -1;
@@ -75,19 +74,23 @@ export class CrGridElement extends PolymerElement {
           currentIndex + delta >= items.length) {
         delta += bottomRowColumns;
       }
-      const mod = function(m, n) {
-        return ((m % n) + n) % n;
-      };
-      const newIndex = mod(currentIndex + delta, items.length);
-      items[newIndex].focus();
+
+      const newIndex = (items.length + currentIndex + delta) % items.length;
+      items[newIndex]!.focus();
     }
 
     if (['Enter', ' '].includes(e.key)) {
       e.preventDefault();
       e.stopPropagation();
-      e.target.click();
+      (e.target as HTMLElement).click();
     }
   }
 }
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'cr-grid': CrGridElement;
+  }
+}
+
 customElements.define(CrGridElement.is, CrGridElement);