Typescriptify Distances tool in inspector overlay

Bug: 1131801
Change-Id: I8e80c06a96f25cd36072956b8edc3c748f47b2a7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2428323
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>

diff --git a/inspector_overlay/BUILD.gn b/inspector_overlay/BUILD.gn
index 51d288b..76ebb60 100644
--- a/inspector_overlay/BUILD.gn
+++ b/inspector_overlay/BUILD.gn

@@ -102,8 +102,8 @@
     "css_grid_label_helpers.js",
     "highlight_common.js",
     "highlight_grid_common.js",
-    "tool_distances.js",
-    "tool_distances_impl.js",
+    "tool_distances.ts",
+    "tool_distances_impl.ts",
     "tool_highlight.js",
     "tool_highlight_grid.js",
     "tool_highlight_grid_impl.js",

diff --git a/inspector_overlay/tool_distances.js b/inspector_overlay/tool_distances.ts
similarity index 63%
rename from inspector_overlay/tool_distances.js
rename to inspector_overlay/tool_distances.ts
index 97b1189..e164be5 100644
--- a/inspector_overlay/tool_distances.js
+++ b/inspector_overlay/tool_distances.ts

@@ -2,9 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// @ts-nocheck
-// TODO(crbug.com/1011811): Enable TypeScript compiler checks
-
 import {DistancesOverlay} from './tool_distances_impl.js';
 
 const overlay = new DistancesOverlay(window);
@@ -12,3 +9,10 @@
 window.dispatch = message => {
   overlay.dispatch(message);
 };
+
+declare global {
+  interface Window {
+    // This method is invoked by the inspector overlay agent on the backend to send messages to the overlay.
+    dispatch: (message: unknown) => void;
+  }
+}

diff --git a/inspector_overlay/tool_distances_impl.js b/inspector_overlay/tool_distances_impl.js
deleted file mode 100644
index 92a77b4..0000000
--- a/inspector_overlay/tool_distances_impl.js
+++ /dev/null

@@ -1,110 +0,0 @@
-//  Copyright 2019 The Chromium Authors. All rights reserved.
-//  Use of this source code is governed by a BSD-style license that can be
-//  found in the LICENSE file.
-
-// @ts-nocheck
-// TODO(crbug.com/1011811): Enable TypeScript compiler checks
-
-import {Overlay} from './common.js';
-
-export class DistancesOverlay extends Overlay {
-  /**
-  * @param {!Object} data
-  */
-  drawDistances(data) {
-    const info = data.distanceInfo;
-    if (!info) {
-      return;
-    }
-    const rect = quadToRect(getVisualQuad(info));
-    const context = this.context;
-    context.save();
-    context.strokeStyle = '#ccc';
-    for (const box of info.boxes) {
-      context.strokeRect(box[0], box[1], box[2], box[3]);
-    }
-    context.strokeStyle = '#f00';
-    context.lineWidth = 1;
-    context.rect(rect.x - 0.5, rect.y - 0.5, rect.w + 1, rect.h + 1);
-    context.stroke();
-    context.restore();
-  }
-
-  setPlatform(platform) {
-    super.setPlatform(platform);
-    this.document.body.classList.add('fill');
-
-    const canvas = this.document.createElement('canvas');
-    canvas.id = 'canvas';
-    canvas.classList.add('fill');
-    this.document.body.append(canvas);
-
-    this.setCanvas(canvas);
-  }
-}
-
-/**
- * @param {!Object} data
- * @return {!Array<number>}
- */
-function getVisualQuad(data) {
-  const style = data['style'];
-  if (shouldUseVisualBorder(style)) {
-    return data['border'];
-  }
-  if (ShouldUseVisualPadding(style)) {
-    return data['padding'];
-  }
-  return data['content'];
-
-  /**
-   * @param {!Object} style
-   * @return {boolean}
-   */
-  function shouldUseVisualBorder(style) {
-    const sides = ['top', 'right', 'bottom', 'left'];
-    for (const side of sides) {
-      const border_width = style[`border-${side}-width`];
-      const border_style = style[`border-${side}-style`];
-      const border_color = style[`border-${side}-color`];
-      if (border_width !== '0px' && border_style !== 'none' && !border_color.endsWith('00')) {
-        return true;
-      }
-    }
-    const outline_width = style['outline-width'];
-    const outline_style = style['outline-style'];
-    const outline_color = style['outline-color'];
-    if (outline_width !== '0px' && outline_style !== 'none' && !outline_color.endsWith('00')) {
-      return true;
-    }
-    const box_shadow = style['box-shadow'];
-    if (box_shadow !== 'none') {
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * @param {!Object} style
-   * @return {boolean}
-   */
-  function ShouldUseVisualPadding(style) {
-    const bg_color = style['background-color'];
-    const bg_image = style['background-image'];
-    if (!bg_color.startsWith('#FFFFFF') && !bg_color.endsWith('00')) {
-      return true;
-    }
-    if (bg_image !== 'none') {
-      return true;
-    }
-    return false;
-  }
-}
-
-/**
- * @param {!Array<number>} quad
- * @return {!Object}
- */
-function quadToRect(quad) {
-  return {x: quad[0], y: quad[1], w: quad[4] - quad[0], h: quad[5] - quad[1]};
-}

diff --git a/inspector_overlay/tool_distances_impl.ts b/inspector_overlay/tool_distances_impl.ts
new file mode 100644
index 0000000..9e78690
--- /dev/null
+++ b/inspector_overlay/tool_distances_impl.ts

@@ -0,0 +1,119 @@
+//  Copyright 2019 The Chromium Authors. All rights reserved.
+//  Use of this source code is governed by a BSD-style license that can be
+//  found in the LICENSE file.
+
+import {Overlay} from './common.js';
+
+interface Style {
+  'background-color': string;
+  'background-image': string;
+  'border-left-width': string;
+  'border-left-style': string;
+  'border-left-color': string;
+  'border-right-width': string;
+  'border-right-style': string;
+  'border-right-color': string;
+  'border-top-width': string;
+  'border-top-style': string;
+  'border-top-color': string;
+  'border-bottom-width': string;
+  'border-bottom-style': string;
+  'border-bottom-color': string;
+  'outline-width': string;
+  'outline-style': string;
+  'outline-color': string;
+  'box-shadow': string;
+}
+
+type StyleKey = keyof Style;
+type Quad = number[];
+
+interface DistanceInfo {
+  style: Style;
+  border: Quad;
+  padding: Quad;
+  content: Quad;
+  boxes: number[][];
+}
+
+export class DistancesOverlay extends Overlay {
+  drawDistances({distanceInfo}: {distanceInfo: DistanceInfo}) {
+    if (!distanceInfo) {
+      return;
+    }
+    const rect = quadToRect(getVisualQuad(distanceInfo));
+    const context = this.context;
+    context.save();
+    context.strokeStyle = '#ccc';
+    for (const box of distanceInfo.boxes) {
+      context.strokeRect(box[0], box[1], box[2], box[3]);
+    }
+    context.strokeStyle = '#f00';
+    context.lineWidth = 1;
+    context.rect(rect.x - 0.5, rect.y - 0.5, rect.w + 1, rect.h + 1);
+    context.stroke();
+    context.restore();
+  }
+
+  setPlatform(platform: string) {
+    super.setPlatform(platform);
+    this.document.body.classList.add('fill');
+
+    const canvas = this.document.createElement('canvas');
+    canvas.id = 'canvas';
+    canvas.classList.add('fill');
+    this.document.body.append(canvas);
+
+    this.setCanvas(canvas);
+  }
+}
+
+function getVisualQuad(data: DistanceInfo): Quad {
+  const style = data['style'];
+  if (shouldUseVisualBorder(style)) {
+    return data['border'];
+  }
+  if (ShouldUseVisualPadding(style)) {
+    return data['padding'];
+  }
+  return data['content'];
+
+  function shouldUseVisualBorder(style: Style): boolean {
+    const sides = ['top', 'right', 'bottom', 'left'];
+    for (const side of sides) {
+      const border_width = style[`border-${side}-width` as StyleKey];
+      const border_style = style[`border-${side}-style` as StyleKey];
+      const border_color = style[`border-${side}-color` as StyleKey];
+      if (border_width !== '0px' && border_style !== 'none' && !border_color.endsWith('00')) {
+        return true;
+      }
+    }
+    const outline_width = style['outline-width'];
+    const outline_style = style['outline-style'];
+    const outline_color = style['outline-color'];
+    if (outline_width !== '0px' && outline_style !== 'none' && !outline_color.endsWith('00')) {
+      return true;
+    }
+    const box_shadow = style['box-shadow'];
+    if (box_shadow !== 'none') {
+      return true;
+    }
+    return false;
+  }
+
+  function ShouldUseVisualPadding(style: Style): boolean {
+    const bg_color = style['background-color'];
+    const bg_image = style['background-image'];
+    if (!bg_color.startsWith('#FFFFFF') && !bg_color.endsWith('00')) {
+      return true;
+    }
+    if (bg_image !== 'none') {
+      return true;
+    }
+    return false;
+  }
+}
+
+function quadToRect(quad: Quad): {x: number, y: number, w: number, h: number} {
+  return {x: quad[0], y: quad[1], w: quad[4] - quad[0], h: quad[5] - quad[1]};
+}