Migrate chrome://histograms to TypeScript.

Bug: 1316438
Change-Id: Ia0bd48d5481621497a6052b6dbe83c9ba7ddaaea
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3698963
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Thomas Anderson <thomasanderson@chromium.org>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1013593}

BUILD.gn

@@ -1678,7 +1678,6 @@ if (enable_js_type_check) {
       "components/security_interstitials:closure_compile",
       "components/sync/driver/resources:closure_compile",
       "components/ukm/debug:closure_compile",
-      "content/browser/resources:closure_compile",
       "mojo/public/tools/bindings/generators/js_templates/lite/test:closure_compile",
       "ui/webui/resources:closure_compile",
     ]

chrome/browser/resources/engagement/site_engagement.ts

@@ -9,8 +9,6 @@ import {Url} from 'chrome://resources/mojo/url/mojom/url.mojom-webui.js';
 
 import {SiteEngagementDetails, SiteEngagementDetailsProvider} from './site_engagement_details.mojom-webui.js';
 
-declare const trustedTypes: {emptyHTML: string};
-
 const pageIsPopulatedResolver = new PromiseResolver<void>();
 
 const whenPageIsPopulatedForTest = function() {
@@ -130,7 +128,8 @@ function initialize() {
    * Remove all rows from the engagement table.
    */
   function clearTable() {
-    engagementTableBody.innerHTML = trustedTypes.emptyHTML;
+    engagementTableBody.innerHTML =
+        window.trustedTypes!.emptyHTML as unknown as string;
   }
 
   /**

chrome/browser/resources/engagement/tsconfig_base.json

@@ -1,6 +1,12 @@
 {
   "extends": "../../../../tools/typescript/tsconfig_base.json",
   "compilerOptions": {
-    "allowJs": true
+    "allowJs": true,
+    "typeRoots": [
+      "../../../../third_party/node/node_modules/@types"
+    ],
+    "types": [
+      "trusted-types"
+    ]
   }
 }

content/BUILD.gn

@@ -94,6 +94,7 @@ grit("content_resources") {
     "content_resources.pak",
   ]
   deps = [
+    "//content/browser/resources/histograms:build_ts",
     "//gpu/ipc/common:vulkan_interface_webui_js",
     "//ui/base/mojom:mojom_js",
     "//ui/gfx/geometry/mojom:mojom_js",

content/browser/resources/BUILD.gn

@@ -2,14 +2,6 @@
 # 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")
-
 group("resources") {
   public_deps = [ "quota:resources" ]
 }
-
-if (enable_js_type_check) {
-  group("closure_compile") {
-    deps = [ "histograms:closure_compile" ]
-  }
-}

content/browser/resources/histograms/BUILD.gn

@@ -2,15 +2,12 @@
 # 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/typescript/ts_library.gni")
 
-js_type_check("closure_compile") {
-  deps = [ ":histograms_internals" ]
-}
-
-js_library("histograms_internals") {
-  deps = [
-    "//ui/webui/resources/js:cr.m",
-    "//ui/webui/resources/js:util.m",
-  ]
+ts_library("build_ts") {
+  root_dir = "."
+  out_dir = "$target_gen_dir/tsc"
+  tsconfig_base = "tsconfig_base.json"
+  in_files = [ "histograms_internals.ts" ]
+  deps = [ "//ui/webui/resources:library" ]
 }

content/browser/resources/histograms/histograms_internals.ts

@@ -2,17 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {assert} from 'chrome://resources/js/assert_ts.js';
 import {sendWithPromise} from 'chrome://resources/js/cr.m.js';
 import {$} from 'chrome://resources/js/util.m.js';
 
 // Timer for automatic update in monitoring mode.
-let fetchDiffScheduler = null;
+let fetchDiffScheduler: number|null = null;
 
 // Contains names for expanded histograms.
-const expandedEntries = new Set();
+const expandedEntries: Set<string> = new Set();
 
 // Whether the page is in Monitoring mode.
-let inMonitoringMode = false;
+let inMonitoringMode: boolean = false;
 
 /**
  * Initiates the request for histograms.
@@ -72,7 +73,8 @@ function enableMonitoring() {
   inMonitoringMode = true;
   $('accumulating_section').style.display = 'none';
   $('monitoring_section').style.display = 'block';
-  $('histograms').innerHTML = trustedTypes.emptyHTML;
+  $('histograms').innerHTML =
+      window.trustedTypes!.emptyHTML as unknown as string;
   expandedEntries.clear();
   startMonitoring();
 }
@@ -88,61 +90,74 @@ function disableMonitoring() {
   }
   $('accumulating_section').style.display = 'block';
   $('monitoring_section').style.display = 'none';
-  $('histograms').innerHTML = trustedTypes.emptyHTML;
+  $('histograms').innerHTML =
+      window.trustedTypes!.emptyHTML as unknown as string;
   expandedEntries.clear();
   requestHistograms();
 }
 
-function onHistogramHeaderClick(event) {
-  const headerElement =
-      event.composedPath().find((e) => e.className === 'histogram-header');
+function onHistogramHeaderClick(event: Event) {
+  const headerElement = event.currentTarget as HTMLElement;
   const name = headerElement.getAttribute('histogram-name');
+  assert(name);
   const shouldExpand = !expandedEntries.has(name);
   if (shouldExpand) {
     expandedEntries.add(name);
   } else {
     expandedEntries.delete(name);
   }
-  setExpanded(headerElement.parentNode, shouldExpand);
+  setExpanded(headerElement.parentElement!, shouldExpand);
 }
 
 /**
  * Expands or collapses a histogram node.
- * @param {Element} histogramNode the histogram element to expand or collapse
- * @param {boolean} expanded whether to expand or collapse the node
+ * @param histogramNode the histogram element to expand or collapse
+ * @param expanded whether to expand or collapse the node
  */
-function setExpanded(histogramNode, expanded) {
-  if (expanded) {
-    histogramNode.querySelector('.histogram-body').style.display = 'block';
-    histogramNode.querySelector('.expand').style.display = 'none';
-    histogramNode.querySelector('.collapse').style.display = 'inline';
-  } else {
-    histogramNode.querySelector('.histogram-body').style.display = 'none';
-    histogramNode.querySelector('.expand').style.display = 'inline';
-    histogramNode.querySelector('.collapse').style.display = 'none';
-  }
+function setExpanded(histogramNode: HTMLElement, expanded: boolean) {
+  const body = histogramNode.querySelector<HTMLElement>('.histogram-body');
+  const expand = histogramNode.querySelector<HTMLElement>('.expand');
+  const collapse = histogramNode.querySelector<HTMLElement>('.collapse');
+  assert(body && expand && collapse);
+
+  body.style.display = expanded ? 'block' : 'none';
+  expand.style.display = expanded ? 'none' : 'inline';
+  collapse.style.display = expanded ? 'inline' : 'none';
 }
 
+type Histogram = {
+  name: string,
+  header: string,
+  body: string,
+};
+
 /**
  * Callback from backend with the list of histograms. Builds the UI.
- * @param {!Array<{name: string, header: string, body: string}>} histograms
- *     A list of name, header and body strings representing histograms.
+ * @param histograms A list of name, header and body strings representing
+ *     histograms.
  */
-function addHistograms(histograms) {
-  $('histograms').innerHTML = trustedTypes.emptyHTML;
+function addHistograms(histograms: Histogram[]) {
+  $('histograms').innerHTML =
+      window.trustedTypes!.emptyHTML as unknown as string;
   // TBD(jar) Write a nice HTML bar chart, with divs an mouse-overs etc.
   for (const histogram of histograms) {
     const {name, header, body} = histogram;
-    const clone = $('histogram-template').content.cloneNode(true);
-    const headerNode = clone.querySelector('.histogram-header');
+    const template =
+        document.body.querySelector<HTMLTemplateElement>('#histogram-template');
+    assert(template);
+    const clone = template.content.cloneNode(true) as HTMLElement;
+    const headerNode = clone.querySelector<HTMLElement>('.histogram-header');
+    assert(headerNode);
     headerNode.setAttribute('histogram-name', name);
     headerNode.onclick = onHistogramHeaderClick;
-    clone.querySelector('.histogram-header-text').textContent = header;
-    const link = clone.querySelector('.histogram-header-link');
+    clone.querySelector('.histogram-header-text')!.textContent = header;
+    const link =
+        clone.querySelector<HTMLAnchorElement>('.histogram-header-link');
+    assert(link);
     link.href = '/#' + name;
     // Don't run expand/collapse handler on link click.
-    link.onclick = e => e.stopPropagation();
-    clone.querySelector('p').textContent = body;
+    link.onclick = (e: Event) => e.stopPropagation();
+    clone.querySelector('p')!.textContent = body;
     // If we are not in monitoring mode, default to expand.
     if (!inMonitoringMode) {
       expandedEntries.add(name);

content/browser/resources/histograms/tsconfig_base.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../../tools/typescript/tsconfig_base.json",
+  "compilerOptions": {
+    "typeRoots": [
+      "../../../../third_party/node/node_modules/@types"
+    ],
+    "types": [
+      "trusted-types"
+    ]
+  }
+}

content/content_resources.grd

@@ -27,7 +27,7 @@ Other resources that belong in this file:
       <include name="IDR_GEOMETRY_MOJOM_WEBUI_JS" file="${root_gen_dir}/mojom-webui/ui/gfx/geometry/mojom/geometry.mojom-webui.js" resource_path="mojo/ui/gfx/geometry/mojom/geometry.mojom-webui.js" use_base_dir="false" type="BINDATA" />
       <include name="IDR_IMAGE_MOJOM_WEBUI_JS" file="${root_gen_dir}/mojom-webui/ui/gfx/image/mojom/image.mojom-webui.js" resource_path="mojo/ui/gfx/image/mojom/image.mojom-webui.js" use_base_dir="false" type="BINDATA" />
       <include name="IDR_HISTOGRAMS_INTERNALS_HTML" file="browser/resources/histograms/histograms_internals.html" type="BINDATA" />
-      <include name="IDR_HISTOGRAMS_INTERNALS_JS" file="browser/resources/histograms/histograms_internals.js" type="BINDATA" />
+      <include name="IDR_HISTOGRAMS_INTERNALS_JS" file="${root_gen_dir}/content/browser/resources/histograms/tsc/histograms_internals.js" resource_path="histograms_internals.js" use_base_dir="false" type="BINDATA" />
       <include name="IDR_HISTOGRAMS_INTERNALS_CSS" file="browser/resources/histograms/histograms_internals.css" type="BINDATA" />
       <if expr="chromeos_ash">
         <include name="IDR_ORIGIN_MOJO_HTML" file="${root_gen_dir}/url/mojom/origin.mojom.html" resource_path="mojo/url/mojom/origin.mojom.html" use_base_dir="false" type="BINDATA" />