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]};
+}