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