Refactor distances tool to use new Overlay class

This CL starts the refactoring of the overlay code:

- clearer API in the entry files (the backend actually uses the dispatch
method only, other methods were used by the debug files)
- avoid using global variables or storing data on window.*

Based on the discussion in https://crrev.com/c/2329777

Bug: 1131801
Change-Id: I88244407b6f40aab87187b1290191366c6525fd3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2426525
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>

inspector_overlay/common.js

@@ -14,6 +14,71 @@ export let Bounds;  // eslint-disable-line no-unused-vars
 /** @typedef {!{name: String, bounds: Bounds}} */
 export let AreaBounds;  // eslint-disable-line no-unused-vars
 
+// Overlay class should be used to implement various tools and provide
+// access to globals via the window object it receives in the constructor.
+// Old logic is kept temporarily while the tools are being migrated.
+export class Overlay {
+  constructor(window) {
+    this.viewportSize = {width: 800, height: 600};
+    this.deviceScaleFactor = 1;
+    this.emulationScaleFactor = 1;
+    this.pageScaleFactor = 1;
+    this.pageZoomFactor = 1;
+    this.scrollX = 0;
+    this.scrollY = 0;
+    this.window = window;
+    this.document = window.document;
+  }
+
+  setCanvas(canvas) {
+    this.canvas = canvas;
+    this.context = canvas.getContext('2d');
+  }
+
+  reset(resetData) {
+    if (resetData) {
+      this.viewportSize = resetData.viewportSize;
+      this.deviceScaleFactor = resetData.deviceScaleFactor;
+      this.pageScaleFactor = resetData.pageScaleFactor;
+      this.pageZoomFactor = resetData.pageZoomFactor;
+      this.emulationScaleFactor = resetData.emulationScaleFactor;
+      this.window.scrollX = this.scrollX = Math.round(resetData.scrollX);
+      this.window.scrollY = this.scrollY = Math.round(resetData.scrollY);
+    }
+    this.resetCanvas();
+  }
+
+  resetCanvas() {
+    if (!this.canvas) {
+      return;
+    }
+
+    this.canvas.width = this.deviceScaleFactor * this.viewportSize.width;
+    this.canvas.height = this.deviceScaleFactor * this.viewportSize.height;
+    this.canvas.style.width = this.viewportSize.width + 'px';
+    this.canvas.style.height = this.viewportSize.height + 'px';
+
+    this.context.scale(this.deviceScaleFactor, this.deviceScaleFactor);
+
+    this.canvasWidth = this.viewportSize.width;
+    this.canvasHeight = this.viewportSize.height;
+  }
+
+  setPlatform(platform) {
+    this.platform = platform;
+    this.document.body.classList.add('platform-' + platform);
+  }
+
+  dispatch(message) {
+    const functionName = message.shift();
+    this[functionName].apply(this, message);
+  }
+
+  eventHasCtrlOrMeta(event) {
+    return this.window.platform === 'mac' ? (event.metaKey && !event.ctrlKey) : (event.ctrlKey && !event.metaKey);
+  }
+}
+
 window.viewportSize = {
   width: 800,
   height: 600

inspector_overlay/tool_distances.js

@@ -5,22 +5,10 @@
 // @ts-nocheck
 // TODO(crbug.com/1011811): Enable TypeScript compiler checks
 
-import {dispatch, reset, setPlatform} from './common.js';
-import {drawDistances} from './tool_distances_impl.js';
+import {DistancesOverlay} from './tool_distances_impl.js';
 
-window.setPlatform = function(platform) {
-  document.body.classList.add('fill');
+const overlay = new DistancesOverlay(window);
 
-  const canvas = document.createElement('canvas');
-  canvas.id = 'canvas';
-  canvas.classList.add('fill');
-  document.body.append(canvas);
-
-  setPlatform(platform);
+window.dispatch = message => {
+  overlay.dispatch(message);
 };
-
-window.reset = function(data) {
-  reset(data);
-};
-window.drawDistances = drawDistances;
-window.dispatch = dispatch;

inspector_overlay/tool_distances_impl.js

@@ -5,26 +5,42 @@
 // @ts-nocheck
 // TODO(crbug.com/1011811): Enable TypeScript compiler checks
 
-/**
- * @param {!Object} data
- */
-export function drawDistances(data) {
-  const info = data['distanceInfo'];
-  if (!info) {
-    return;
+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();
   }
-  const rect = quadToRect(getVisualQuad(info));
-  const context = window.context;
-  context.save();
-  context.strokeStyle = '#ccc';
-  for (const box of info['boxes']) {
-    context.strokeRect(box[0], box[1], box[2], box[3]);
+
+  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);
   }
-  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();
 }
 
 /**