1// Copyright 2019 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {Overlay} from './common.js';
6
7const darkGridColor = 'rgba(0,0,0,0.7)';
8const gridBackgroundColor = 'rgba(255, 255, 255, 0.8)';
9
10export class ViewportSizeOverlay extends Overlay {
11  install() {
12    this.document.body.classList.add('fill');
13    const canvas = this.document.createElement('canvas');
14    canvas.id = 'canvas';
15    canvas.classList.add('fill');
16    this.document.body.append(canvas);
17    this.setCanvas(canvas);
18    super.install();
19  }
20
21  uninstall() {
22    this.document.body.classList.remove('fill');
23    this.document.body.innerHTML = '';
24    super.uninstall();
25  }
26
27  drawViewSize() {
28    const viewportSize = this.viewportSize;
29    const text = `${viewportSize.width}px \u00D7 ${viewportSize.height}px`;
30    const canvasWidth = this.canvasWidth || 0;
31    this.context.save();
32    this.context.font = `14px ${this.window.getComputedStyle(document.body).fontFamily}`;
33    const textWidth = this.context.measureText(text).width;
34    this.context.fillStyle = gridBackgroundColor;
35    this.context.fillRect(canvasWidth - textWidth - 12, 0, canvasWidth, 25);
36    this.context.fillStyle = darkGridColor;
37    this.context.fillText(text, canvasWidth - textWidth - 6, 18);
38    this.context.restore();
39  }
40}
41