chrome-devtools-frontend/inspector_overlay/common.ts

Chrome DevTools UI

// 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.

export type PathCommands = Array<string|number>;

export interface Quad {
  p1: Position;
  p2: Position;
  p3: Position;
  p4: Position;
}

export interface Position {
  x: number;
  y: number;
}

export interface Bounds {
  minX: number;
  maxX: number;
  minY: number;
  maxY: number;
  width?: number;
  height?: number;
  allPoints: Position[];
}

export interface AreaBounds {
  name: string;
  bounds: {allPoints: Position[]};
}

interface ViewportSize {
  width: number;
  height: number;
}

export interface ResetData {
  viewportSize: ViewportSize;
  viewportSizeForMediaQueries?: ViewportSize;
  deviceScaleFactor: number;
  pageScaleFactor: number;
  pageZoomFactor: number;
  emulationScaleFactor: number;
  scrollX: number;
  scrollY: number;
}

// 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 {
  protected viewportSize = {width: 800, height: 600};
  protected viewportSizeForMediaQueries?: ViewportSize;
  protected deviceScaleFactor = 1;
  protected emulationScaleFactor = 1;
  protected pageScaleFactor = 1;
  protected pageZoomFactor = 1;
  protected scrollX = 0;
  protected scrollY = 0;
  protected style: CSSStyleSheet[];
  protected canvas?: HTMLCanvasElement;
  protected canvasWidth: number = 0;
  protected canvasHeight: number = 0;
  protected platform?: string;
  // eslint-disable-next-line @typescript-eslint/naming-convention
  private _window?: Window;
  // eslint-disable-next-line @typescript-eslint/naming-convention
  private _document?: Document;
  // eslint-disable-next-line @typescript-eslint/naming-convention
  private _context?: CanvasRenderingContext2D|null;
  // eslint-disable-next-line @typescript-eslint/naming-convention
  private _installed = false;

  constructor(window: Window, style: CSSStyleSheet[] = []) {
    this._window = window;
    this._document = window.document;
    if (!Array.isArray(style)) {
      style = [style];
    }
    this.style = style;
  }

  setCanvas(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this._context = canvas.getContext('2d');
  }

  install() {
    for (const style of this.style) {
      adoptStyleSheet(style);
    }
    this._installed = true;
  }

  uninstall() {
    for (const style of this.style) {
      document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== style);
    }
    this._installed = false;
  }

  reset(resetData?: ResetData) {
    if (resetData) {
      this.viewportSize = resetData.viewportSize;
      this.viewportSizeForMediaQueries = resetData.viewportSizeForMediaQueries;
      this.deviceScaleFactor = resetData.deviceScaleFactor;
      this.pageScaleFactor = resetData.pageScaleFactor;
      this.pageZoomFactor = resetData.pageZoomFactor;
      this.emulationScaleFactor = resetData.emulationScaleFactor;
      this.scrollX = Math.round(resetData.scrollX);
      this.scrollY = Math.round(resetData.scrollY);
    }
    this.resetCanvas();
  }

  resetCanvas() {
    if (!this.canvas || !this._context) {
      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: string) {
    this.platform = platform;
    this.document.body.classList.add('platform-' + platform);
    if (!this._installed) {
      this.install();
    }
  }

  dispatch(message: unknown[]) {
    const functionName = message.shift() as string;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (this as any)[functionName].apply(this, message);
  }

  eventHasCtrlOrMeta(event: KeyboardEvent) {
    return this.platform === 'mac' ? (event.metaKey && !event.ctrlKey) : (event.ctrlKey && !event.metaKey);
  }

  get context(): CanvasRenderingContext2D {
    if (!this._context) {
      throw new Error('Context object is missing');
    }
    return this._context;
  }

  get document(): Document {
    if (!this._document) {
      throw new Error('Document object is missing');
    }
    return this._document;
  }

  get window(): Window {
    if (!this._window) {
      throw new Error('Window object is missing');
    }
    return this._window;
  }

  get installed(): boolean {
    return this._installed;
  }
}

export function log(text: string) {
  let element = document.getElementById('log');
  if (!element) {
    element = createChild(document.body, 'div');
    element.id = 'log';
  }
  createChild(element, 'div').textContent = text;
}

export function createChild(parent: HTMLElement, tagName: string, className?: string): HTMLElement {
  const element = createElement(tagName, className);
  element.addEventListener('click', function(e: Event) {
    e.stopPropagation();
  }, false);
  parent.appendChild(element);
  return element;
}

export function createTextChild(parent: HTMLElement, text: string): Text {
  const element = document.createTextNode(text);
  parent.appendChild(element);
  return element;
}

export function createElement(tagName: string, className?: string) {
  const element = document.createElement(tagName);
  if (className) {
    element.className = className;
  }
  return element;
}

export function ellipsify(str: string, maxLength: number) {
  if (str.length <= maxLength) {
    return String(str);
  }
  return str.substr(0, maxLength - 1) + '\u2026';
}

export function constrainNumber(num: number, min: number, max: number): number {
  if (num < min) {
    num = min;
  } else if (num > max) {
    num = max;
  }
  return num;
}

declare global {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Document {
    adoptedStyleSheets: CSSStyleSheet[];
  }
}

export function adoptStyleSheet(styleSheet: CSSStyleSheet) {
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
}