diff --git a/inspector_overlay/common.js b/inspector_overlay/common.js index d82da06588..085a81d593 100644 --- a/inspector_overlay/common.js +++ b/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 diff --git a/inspector_overlay/debug/tool_distances.html b/inspector_overlay/debug/tool_distances.html index 7b590f05d4..b598ec373d 100644 --- a/inspector_overlay/debug/tool_distances.html +++ b/inspector_overlay/debug/tool_distances.html @@ -15,9 +15,9 @@ found in the LICENSE file. diff --git a/inspector_overlay/tool_distances.js b/inspector_overlay/tool_distances.js index f6e283757d..97b1189ec4 100644 --- a/inspector_overlay/tool_distances.js +++ b/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; diff --git a/inspector_overlay/tool_distances_impl.js b/inspector_overlay/tool_distances_impl.js index ae6aa3edac..92a77b417f 100644 --- a/inspector_overlay/tool_distances_impl.js +++ b/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(); } /**