chrome-devtools-frontend/inspector_overlay/tool_viewport_size.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.

import {Overlay} from './common.js';

const darkGridColor = 'rgba(0,0,0,0.7)';
const gridBackgroundColor = 'rgba(255, 255, 255, 0.8)';

export class ViewportSizeOverlay extends Overlay {
  install() {
    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);
    super.install();
  }

  uninstall() {
    this.document.body.classList.remove('fill');
    this.document.body.innerHTML = '';
    super.uninstall();
  }

  drawViewSize() {
    const viewportSize = this.viewportSize;
    const text = `${viewportSize.width}px \u00D7 ${viewportSize.height}px`;
    const canvasWidth = this.canvasWidth || 0;
    this.context.save();
    this.context.font = `14px ${this.window.getComputedStyle(document.body).fontFamily}`;
    const textWidth = this.context.measureText(text).width;
    this.context.fillStyle = gridBackgroundColor;
    this.context.fillRect(canvasWidth - textWidth - 12, 0, canvasWidth, 25);
    this.context.fillStyle = darkGridColor;
    this.context.fillText(text, canvasWidth - textWidth - 6, 18);
    this.context.restore();
  }
}