chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -347,6 +347,9 @@ export const knownContextValues = new Set([
   'added-size',
   'addedSize',
   'additive-symbols',
+  'adopted-style-sheet',
+  'adopted-style-sheet-contents',
+  'adopted-style-sheets',
   'adorner-settings',
   'ads',
   'af',
@@ -745,6 +748,7 @@ export const knownContextValues = new Set([
   'cache-storage.refresh',
   'cache-widget',
   'calibrated-cpu-throttling',
+  'call-log',
   'call-tree',
   'cancel',
   'cancel-animation-frame',
@@ -1510,6 +1514,7 @@ export const knownContextValues = new Set([
   'edit',
   'edit-and-resend',
   'edit-and-resend-as-fetch',
+  'edit-and-run',
   'edit-attribute',
   'edit-breakpoint',
   'edit-item',
@@ -1747,6 +1752,7 @@ export const knownContextValues = new Set([
   'filter-bar',
   'filter-bitset',
   'filter-by-rule-set',
+  'filter-by-status',
   'finish',
   'firefox-android-mobile',
   'firefox-android-tablet',
@@ -3552,6 +3558,7 @@ export const knownContextValues = new Set([
   'rule-width',
   'rulers-enable',
   'run',
+  'run-tool',
   'rx',
   'ry',
   'sab-details',
@@ -3841,6 +3848,7 @@ export const knownContextValues = new Set([
   'show-grid-track-sizes-true',
   'show-html-comments',
   'show-html-comments-false',
+  'show-inactive-css-rules',
   'show-inherited-computed-style-properties',
   'show-issue-associated-with-this',
   'show-layout-shift-regions',
@@ -4436,6 +4444,9 @@ export const knownContextValues = new Set([
   'toggle-recording',
   'toggle-similar-issues',
   'toggle-url-decoding',
+  'tool',
+  'tool-details',
+  'tool-list',
   'top',
   'top-layer',
   'total',
@@ -4607,6 +4618,7 @@ export const knownContextValues = new Set([
   'webauthn.remove-credential',
   'webgl-error-fired',
   'webgl-warning-fired',
+  'webmcp-view',
   'webmcp.call-inputs',
   'webmcp.call-outputs',
   'webmcp.cancel-call',

package/inspector_overlay/common.ts

@@ -84,26 +84,26 @@ export class Overlay {
     this.style = style;
   }
 
-  setCanvas(canvas: HTMLCanvasElement) {
+  setCanvas(canvas: HTMLCanvasElement): void {
     this.canvas = canvas;
     this._context = canvas.getContext('2d');
   }
 
-  install() {
+  install(): void {
     for (const style of this.style) {
       adoptStyleSheet(style);
     }
     this._installed = true;
   }
 
-  uninstall() {
+  uninstall(): void {
     for (const style of this.style) {
       document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== style);
     }
     this._installed = false;
   }
 
-  reset(resetData?: ResetData) {
+  reset(resetData?: ResetData): void {
     if (resetData) {
       this.viewportSize = resetData.viewportSize;
       this.viewportSizeForMediaQueries = resetData.viewportSizeForMediaQueries;
@@ -117,7 +117,7 @@ export class Overlay {
     this.resetCanvas();
   }
 
-  resetCanvas() {
+  resetCanvas(): void {
     if (!this.canvas || !this._context) {
       return;
     }
@@ -133,7 +133,7 @@ export class Overlay {
     this.canvasHeight = this.viewportSize.height;
   }
 
-  setPlatform(platform: string) {
+  setPlatform(platform: string): void {
     this.platform = platform;
     this.document.body.classList.add('platform-' + platform);
     if (!this._installed) {
@@ -141,13 +141,13 @@ export class Overlay {
     }
   }
 
-  dispatch(message: unknown[]) {
+  dispatch(message: unknown[]): void {
     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) {
+  eventHasCtrlOrMeta(event: KeyboardEvent): boolean {
     return this.platform === 'mac' ? (event.metaKey && !event.ctrlKey) : (event.ctrlKey && !event.metaKey);
   }
 
@@ -177,7 +177,7 @@ export class Overlay {
   }
 }
 
-export function log(text: string) {
+export function log(text: string): void {
   let element = document.getElementById('log');
   if (!element) {
     element = createChild(document.body, 'div');
@@ -201,7 +201,7 @@ export function createTextChild(parent: HTMLElement, text: string): Text {
   return element;
 }
 
-export function createElement(tagName: string, className?: string) {
+export function createElement(tagName: string, className?: string): HTMLElement {
   const element = document.createElement(tagName);
   if (className) {
     element.className = className;
@@ -209,7 +209,7 @@ export function createElement(tagName: string, className?: string) {
   return element;
 }
 
-export function ellipsify(str: string, maxLength: number) {
+export function ellipsify(str: string, maxLength: number): string {
   if (str.length <= maxLength) {
     return String(str);
   }
@@ -231,6 +231,6 @@ declare global {
   }
 }
 
-export function adoptStyleSheet(styleSheet: CSSStyleSheet) {
+export function adoptStyleSheet(styleSheet: CSSStyleSheet): void {
   document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
 }

package/inspector_overlay/css_grid_label_helpers.ts

@@ -145,10 +145,9 @@ export interface GridLabelState {
  * Places all of the required grid labels on the overlay. This includes row and
  * column line number labels, and area labels.
  */
-export function drawGridLabels(
-    config: GridHighlightConfig, gridBounds: Bounds, areaBounds: AreaBounds[], canvasSize: CanvasSize,
-    labelState: GridLabelState, emulationScaleFactor: number,
-    writingModeMatrix: DOMMatrix|undefined = new DOMMatrix()) {
+export function drawGridLabels(config: GridHighlightConfig, gridBounds: Bounds, areaBounds: AreaBounds[],
+                               canvasSize: CanvasSize, labelState: GridLabelState, emulationScaleFactor: number,
+                               writingModeMatrix: DOMMatrix|undefined = new DOMMatrix()): void {
   // Find and clear the layer for the node specified in the config, or the default layer:
   // Each node has a layer for grid labels in order to draw multiple grid highlights
   // at once.
@@ -382,7 +381,7 @@ export function normalizePositionData(config: NormalizePositionDataConfig, bound
  */
 export function drawGridLineNumbers(
     container: HTMLElement, data: GridPositionNormalizedData, canvasSize: CanvasSize, emulationScaleFactor: number,
-    writingModeMatrix: DOMMatrix|undefined = new DOMMatrix(), writingMode: string|undefined = 'horizontal-tb') {
+    writingModeMatrix: DOMMatrix|undefined = new DOMMatrix(), writingMode: string|undefined = 'horizontal-tb'): void {
   if (!data.columns.positive.names) {
     for (const [i, pos] of positionIterator(data.columns.positive.positions, 'x')) {
       const element = createLabelElement(container, (i + 1).toString(), 'column');
@@ -418,10 +417,10 @@ export function drawGridLineNumbers(
 /**
  * Places the grid track size labels on the overlay.
  */
-export function drawGridTrackSizes(
-    container: HTMLElement, trackSizes: TrackSize[], direction: 'row'|'column', canvasSize: CanvasSize,
-    emulationScaleFactor: number, writingModeMatrix: DOMMatrix|undefined = new DOMMatrix(),
-    writingMode: string|undefined = 'horizontal-tb') {
+export function drawGridTrackSizes(container: HTMLElement, trackSizes: TrackSize[], direction: 'row'|'column',
+                                   canvasSize: CanvasSize, emulationScaleFactor: number,
+                                   writingModeMatrix: DOMMatrix|undefined = new DOMMatrix(),
+                                   writingMode: string|undefined = 'horizontal-tb'): void {
   const {main, cross} = getAxes(writingMode);
   const {crossSize} = getCanvasSizes(writingMode, canvasSize);
 
@@ -451,10 +450,10 @@ export function drawGridTrackSizes(
 /**
  * Places the grid row and column name labels on the overlay.
  */
-export function drawGridLineNames(
-    container: HTMLElement, data: GridPositionNormalizedDataWithNames, canvasSize: CanvasSize,
-    emulationScaleFactor: number, writingModeMatrix: DOMMatrix|undefined = new DOMMatrix(),
-    writingMode: string|undefined = 'horizontal-tb') {
+export function drawGridLineNames(container: HTMLElement, data: GridPositionNormalizedDataWithNames,
+                                  canvasSize: CanvasSize, emulationScaleFactor: number,
+                                  writingModeMatrix: DOMMatrix|undefined = new DOMMatrix(),
+                                  writingMode: string|undefined = 'horizontal-tb'): void {
   for (const [i, pos] of data.columns.positive.positions.entries()) {
     const names = data.columns.positive.names[i];
     const element = createLabelElement(container, makeLineNameLabelContent(names), 'column');
@@ -487,9 +486,9 @@ function makeLineNameLabelContent(names: string[]): HTMLElement {
 /**
  * Places the grid area name labels on the overlay.
  */
-export function drawGridAreaNames(
-    container: HTMLElement, areaBounds: AreaBounds[], writingModeMatrix: DOMMatrix|undefined = new DOMMatrix(),
-    writingMode: string|undefined = 'horizontal-tb') {
+export function drawGridAreaNames(container: HTMLElement, areaBounds: AreaBounds[],
+                                  writingModeMatrix: DOMMatrix|undefined = new DOMMatrix(),
+                                  writingMode: string|undefined = 'horizontal-tb'): void {
   for (const {name, bounds} of areaBounds) {
     const element = createLabelElement(container, name, 'row');
     const {width, height} = getLabelSize(element, writingMode);
@@ -982,7 +981,7 @@ function getLabelPositionByArrowType(
  * This is also made to generate the defaultLabelTextColor for all of the default label colors that the
  * OverlayColorGenerator produces.
  */
-export function generateLegibleTextColor(backgroundColor: string) {
+export function generateLegibleTextColor(backgroundColor: string): '#121212'|'white'|null {
   let rgb: number[] = [];
 
   // Try to parse it as a #rrggbbaa string first

package/inspector_overlay/drag_resize_handler.ts

@@ -45,12 +45,12 @@ export class DragResizeHandler {
     this.boundMousedown = this.onMousedown.bind(this);
   }
 
-  install() {
+  install(): void {
     this.document.body.addEventListener('mousemove', this.boundMousemove);
     this.document.body.addEventListener('mousedown', this.boundMousedown);
   }
 
-  uninstall() {
+  uninstall(): void {
     this.document.body.removeEventListener('mousemove', this.boundMousemove);
     this.document.body.removeEventListener('mousedown', this.boundMousedown);
   }

package/inspector_overlay/highlight_common.ts

@@ -33,8 +33,8 @@ export const enum LinePattern {
   DASHED = 'dashed',
 }
 
-export function drawPathWithLineStyle(
-    context: CanvasRenderingContext2D, path: Path2D, lineStyle?: LineStyle, lineWidth = 1) {
+export function drawPathWithLineStyle(context: CanvasRenderingContext2D, path: Path2D, lineStyle?: LineStyle,
+                                      lineWidth = 1): void {
   if (lineStyle?.color) {
     context.save();
     context.translate(0.5, 0.5);
@@ -51,8 +51,8 @@ export function drawPathWithLineStyle(
   }
 }
 
-export function fillPathWithBoxStyle(
-    context: CanvasRenderingContext2D, path: Path2D, bounds: PathBounds, angle: number, boxStyle?: BoxStyle) {
+export function fillPathWithBoxStyle(context: CanvasRenderingContext2D, path: Path2D, bounds: PathBounds, angle: number,
+                                     boxStyle?: BoxStyle): void {
   if (!boxStyle) {
     return;
   }
@@ -157,9 +157,8 @@ let hatchLineColor = '';
  *   |\  \  \ |
  *   **********
  */
-export function hatchFillPath(
-    context: CanvasRenderingContext2D, path: Path2D, bounds: Bounds, delta: number, color: string,
-    rotationAngle: number, flipDirection: boolean|undefined) {
+export function hatchFillPath(context: CanvasRenderingContext2D, path: Path2D, bounds: Bounds, delta: number,
+                              color: string, rotationAngle: number, flipDirection: boolean|undefined): void {
   // Make the bounds be at most the canvas size if it is bigger in any direction.
   // Making the bounds bigger than the canvas is useless as what's drawn there won't be visible.
   if (context.canvas.width < bounds.maxX - bounds.minX || context.canvas.height < bounds.maxY - bounds.minY) {
@@ -204,8 +203,8 @@ export function hatchFillPath(
  * Given a quad, create the corresponding path object. This also accepts a list of quads to clip from the resulting
  * path.
  */
-export function createPathForQuad(
-    outerQuad: Quad, quadsToClip: Quad[], bounds: PathBounds, emulationScaleFactor: number) {
+export function createPathForQuad(outerQuad: Quad, quadsToClip: Quad[], bounds: PathBounds,
+                                  emulationScaleFactor: number): Path2D {
   let commands = [
     'M',
     outerQuad.p1.x,
@@ -274,10 +273,9 @@ export function formatColor(hexa: string, colorFormat: string): string {
   return hexa;
 }
 
-export function drawPath(
-    context: CanvasRenderingContext2D, commands: PathCommands, fillColor: string|undefined,
-    outlineColor: string|undefined, outlinePattern: LinePattern|undefined, bounds: PathBounds,
-    emulationScaleFactor: number) {
+export function drawPath(context: CanvasRenderingContext2D, commands: PathCommands, fillColor: string|undefined,
+                         outlineColor: string|undefined, outlinePattern: LinePattern|undefined, bounds: PathBounds,
+                         emulationScaleFactor: number): Path2D {
   context.save();
   const path = buildPath(commands, bounds, emulationScaleFactor);
   if (fillColor) {

package/inspector_overlay/highlight_container_query.ts

@@ -17,8 +17,8 @@ export interface ContainerQueryHighlight {
   };
 }
 
-export function drawContainerQueryHighlight(
-    highlight: ContainerQueryHighlight, context: CanvasRenderingContext2D, emulationScaleFactor: number) {
+export function drawContainerQueryHighlight(highlight: ContainerQueryHighlight, context: CanvasRenderingContext2D,
+                                            emulationScaleFactor: number): void {
   const config = highlight.containerQueryContainerHighlightConfig;
   const bounds = emptyBounds();
   const borderPath = buildPath(highlight.containerBorder, bounds, emulationScaleFactor);

package/inspector_overlay/highlight_flex_common.ts

@@ -67,9 +67,8 @@ const ALIGNMENT_ARROW_DISTANCE_FROM_LINE = 2;
 const FLEXIBILITY_ARROW_THICKNESS = 1;
 const FLEXIBILITY_ARROW_TIP_SIZE = 5;
 
-export function drawLayoutFlexItemHighlight(
-    highlight: FlexItemHighlight, itemPath: PathCommands, context: CanvasRenderingContext2D,
-    emulationScaleFactor: number) {
+export function drawLayoutFlexItemHighlight(highlight: FlexItemHighlight, itemPath: PathCommands,
+                                            context: CanvasRenderingContext2D, emulationScaleFactor: number): void {
   const {baseSize, isHorizontalFlow} = highlight;
 
   const itemQuad = rectPathToQuad(itemPath);
@@ -178,7 +177,7 @@ export function drawLayoutFlexContainerHighlight(
     highlight: FlexContainerHighlight,
     context: CanvasRenderingContext2D,
     emulationScaleFactor: number,
-) {
+    ): void {
   const config = highlight.flexContainerHighlightConfig;
   const bounds = emptyBounds();
   const borderPath = buildPath(highlight.containerBorder, bounds, emulationScaleFactor);
@@ -649,8 +648,8 @@ export function getGapQuads(
  * quad2)
  * @param isReverse whether the direction is reversed (quad1 below quad2 or quad1 right of quad2)
  */
-export function getGapQuadBetweenQuads(
-    quad1: Quad, quad2: Quad, size: number, vertically: boolean, isReverse?: boolean) {
+export function getGapQuadBetweenQuads(quad1: Quad, quad2: Quad, size: number, vertically: boolean,
+                                       isReverse?: boolean): Quad {
   if (isReverse) {
     [quad1, quad2] = [quad2, quad1];
   }
@@ -880,7 +879,7 @@ export function segmentContains([p1, p2]: Position[], point: Position): boolean
   return (point.y - p1.y) * (p2.x - p1.x) === (p2.y - p1.y) * (point.x - p1.x);
 }
 
-export function distance(p1: Position, p2: Position) {
+export function distance(p1: Position, p2: Position): number {
   return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
 }
 

package/inspector_overlay/highlight_grid_common.ts

@@ -215,9 +215,9 @@ export interface GridHighlight {
   };
 }
 
-export function drawLayoutGridHighlight(
-    highlight: GridHighlight, context: CanvasRenderingContext2D, deviceScaleFactor: number, canvasWidth: number,
-    canvasHeight: number, emulationScaleFactor: number, labelState: GridLabelState) {
+export function drawLayoutGridHighlight(highlight: GridHighlight, context: CanvasRenderingContext2D,
+                                        deviceScaleFactor: number, canvasWidth: number, canvasHeight: number,
+                                        emulationScaleFactor: number, labelState: GridLabelState): void {
   const gridBounds = emptyBounds();
   const gridPath = buildPath(highlight.gridBorder, gridBounds, emulationScaleFactor);
 

package/inspector_overlay/highlight_isolated_element.ts

@@ -21,9 +21,18 @@ export interface IsolatedElementHighlight {
   };
 }
 
-export function drawIsolatedElementHighlight(
-    highlight: IsolatedElementHighlight, context: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number,
-    emulationScaleFactor: number) {
+export interface IsolatedElementPaths {
+  widthPath: Path2D;
+  heightPath: Path2D;
+  bidirectionPath: Path2D;
+  currentWidth: number;
+  currentHeight: number;
+  highlightIndex: number;
+}
+
+export function drawIsolatedElementHighlight(highlight: IsolatedElementHighlight, context: CanvasRenderingContext2D,
+                                             canvasWidth: number, canvasHeight: number,
+                                             emulationScaleFactor: number): IsolatedElementPaths {
   const {currentX, currentY, currentWidth, currentHeight, highlightIndex} = highlight;
   // Draw a mask covering other area of the canvas.
   context.save();

package/inspector_overlay/highlight_scroll_snap.ts

@@ -156,8 +156,8 @@ function drawSnapportBorder(
       emulationScaleFactor);
 }
 
-export function drawScrollSnapHighlight(
-    highlight: ScrollSnapHighlight, context: CanvasRenderingContext2D, emulationScaleFactor: number) {
+export function drawScrollSnapHighlight(highlight: ScrollSnapHighlight, context: CanvasRenderingContext2D,
+                                        emulationScaleFactor: number): void {
   // The order of the following draw calls is important, change it carefully.
   drawScrollPadding(highlight, context, emulationScaleFactor);
   const areaBounds = drawSnapAreas(highlight, context, emulationScaleFactor);

package/inspector_overlay/loadCSS.rollup.js

@@ -5,7 +5,6 @@
 // WARNING: don't use this rollup plugin outside of inspector_overlay.
 // See README for special constraints the overlay has.
 
-// eslint-disable-next-line import/no-default-export
 export default function loadCSS() {
   return {
     name: 'loadCSS',

package/inspector_overlay/testing/InspectorOverlayHelpers.ts

@@ -58,20 +58,20 @@ function assertElements<T extends Element>(
 /**
  * This does the same as initFrame but also prepares the DOM for testing grid labels.
  */
-export function initFrameForGridLabels() {
+export function initFrameForGridLabels(): void {
   const styleTag = document.createElement('style');
   styleTag.textContent = gridStyle;
   document.head.append(styleTag);
   createGridLabelContainer();
 }
 
-export function initFrameForMultipleGridLabels(numGrids: number) {
+export function initFrameForMultipleGridLabels(numGrids: number): void {
   for (let i = 1; i <= numGrids; i++) {
     createGridLabelContainer(i);
   }
 }
 
-export function createGridLabelContainer(layerId?: number) {
+export function createGridLabelContainer(layerId?: number): void {
   // Ensure main layer is created first
   let el = document.getElementById(GRID_LABEL_CONTAINER_ID);
   if (!el) {
@@ -156,9 +156,9 @@ interface ExpectedAreaNameLabel {
   top?: string;
 }
 
-export function drawGridLineNumbersAndAssertLabels(
-    config: NormalizePositionDataConfig&{writingMode?: string}, bounds: Bounds, canvasSize: CanvasSize, layerId: number,
-    expectedLabels: ExpectedLineNumberLabel[]) {
+export function drawGridLineNumbersAndAssertLabels(config: NormalizePositionDataConfig&{writingMode?: string},
+                                                   bounds: Bounds, canvasSize: CanvasSize, layerId: number,
+                                                   expectedLabels: ExpectedLineNumberLabel[]): void {
   const el = getGridLineNumberLabelContainer(layerId);
   const data = normalizePositionData(config, bounds);
 
@@ -178,9 +178,9 @@ export function drawGridLineNumbersAndAssertLabels(
       'The right total number of line number labels were displayed');
 }
 
-export function drawGridLineNamesAndAssertLabels(
-    config: NormalizePositionDataConfig, bounds: Bounds, canvasSize: CanvasSize, layerId: number,
-    deviceEmulationFactor: number, expectedLabels: ExpectedLineNameLabel[]) {
+export function drawGridLineNamesAndAssertLabels(config: NormalizePositionDataConfig, bounds: Bounds,
+                                                 canvasSize: CanvasSize, layerId: number, deviceEmulationFactor: number,
+                                                 expectedLabels: ExpectedLineNameLabel[]): void {
   const el = getGridLineNameLabelContainer(layerId);
   const data = normalizePositionData(config, bounds);
   drawGridLineNames(el, data as GridPositionNormalizedDataWithNames, canvasSize, deviceEmulationFactor);
@@ -234,9 +234,9 @@ export function drawGridLineNamesAndAssertLabels(
   }
 }
 
-export function drawGridAreaNamesAndAssertLabels(
-    areaNames: AreaBounds[], writingModeMatrix: DOMMatrix|undefined, writingMode: string|undefined,
-    expectedLabels: ExpectedAreaNameLabel[]) {
+export function drawGridAreaNamesAndAssertLabels(areaNames: AreaBounds[], writingModeMatrix: DOMMatrix|undefined,
+                                                 writingMode: string|undefined,
+                                                 expectedLabels: ExpectedAreaNameLabel[]): void {
   const el = getGridAreaNameLabelContainer();
   drawGridAreaNames(el, areaNames, writingModeMatrix, writingMode);
 
@@ -271,7 +271,7 @@ export function drawGridAreaNamesAndAssertLabels(
 
 export function drawMultipleGridLineNumbersAndAssertLabels(
     configs: Array<{config: NormalizePositionDataConfig, layerId: number}>, bounds: Bounds, canvasSize: CanvasSize,
-    expectedLabelList: ExpectedLayerLabel[]) {
+    expectedLabelList: ExpectedLayerLabel[]): void {
   for (const item of configs) {
     const el = getGridLineNumberLabelContainer(item.layerId);
     const data = normalizePositionData(item.config, bounds);

package/inspector_overlay/tool_green_dev_anchors.ts

@@ -42,7 +42,7 @@ export class GreenDevAnchorsOverlay extends Overlay {
   #anchorsContainer!: HTMLElement;
   #anchorsByNodeId = new Map<number, HTMLElement>();
 
-  override install() {
+  override install(): void {
     consoleLog('GreenDevAnchorsOverlay.install() called');
 
     this.document.body.classList.add('fill');
@@ -62,7 +62,7 @@ export class GreenDevAnchorsOverlay extends Overlay {
     super.install();
   }
 
-  override uninstall() {
+  override uninstall(): void {
     consoleLog('GreenDevAnchorsOverlay.uninstall() called');
 
     this.document.body.classList.remove('fill');
@@ -74,7 +74,7 @@ export class GreenDevAnchorsOverlay extends Overlay {
     super.uninstall();
   }
 
-  drawGreenDevAnchors(highlights: GreenDevAnchorsHighlight[]) {
+  drawGreenDevAnchors(highlights: GreenDevAnchorsHighlight[]): void {
     if (this.#anchorsContainer && !this.#anchorsContainer.isConnected) {
       // The container was removed from the DOM (likely by PersistentOverlay.uninstall cleaning up),
       // but this overlay still thinks it's installed. We need to re-install to restore the DOM.

package/inspector_overlay/tool_highlight.ts

@@ -94,7 +94,7 @@ export class HighlightOverlay extends Overlay {
   private persistentOverlay?: PersistentOverlay;
   private gridLabelState = {gridLayerCounter: 0};
 
-  override reset(resetData: ResetData) {
+  override reset(resetData: ResetData): void {
     super.reset(resetData);
     this.tooltip.innerHTML = '';
     this.gridLabelState.gridLayerCounter = 0;
@@ -103,7 +103,7 @@ export class HighlightOverlay extends Overlay {
     }
   }
 
-  override install() {
+  override install(): void {
     this.document.body.classList.add('fill');
 
     const canvas = this.document.createElement('canvas');
@@ -125,14 +125,14 @@ export class HighlightOverlay extends Overlay {
     super.install();
   }
 
-  override uninstall() {
+  override uninstall(): void {
     this.document.body.classList.remove('fill');
     this.document.body.innerHTML = '';
 
     super.uninstall();
   }
 
-  drawHighlight(highlight: Highlight) {
+  drawHighlight(highlight: Highlight): {bounds: PathBounds} {
     this.context.save();
 
     const bounds = emptyBounds();
@@ -224,27 +224,27 @@ export class HighlightOverlay extends Overlay {
     return {bounds};
   }
 
-  drawGridHighlight(highlight: GridHighlight) {
+  drawGridHighlight(highlight: GridHighlight): void {
     if (this.persistentOverlay) {
       this.persistentOverlay.drawGridHighlight(highlight);
     }
   }
 
-  drawFlexContainerHighlight(highlight: FlexContainerHighlight) {
+  drawFlexContainerHighlight(highlight: FlexContainerHighlight): void {
     if (this.persistentOverlay) {
       this.persistentOverlay.drawFlexContainerHighlight(highlight);
     }
   }
 
-  drawScrollSnapHighlight(highlight: ScrollSnapHighlight) {
+  drawScrollSnapHighlight(highlight: ScrollSnapHighlight): void {
     this.persistentOverlay?.drawScrollSnapHighlight(highlight);
   }
 
-  drawContainerQueryHighlight(highlight: ContainerQueryHighlight) {
+  drawContainerQueryHighlight(highlight: ContainerQueryHighlight): void {
     this.persistentOverlay?.drawContainerQueryHighlight(highlight);
   }
 
-  drawIsolatedElementHighlight(highlight: IsolatedElementHighlight) {
+  drawIsolatedElementHighlight(highlight: IsolatedElementHighlight): void {
     this.persistentOverlay?.drawIsolatedElementHighlight(highlight);
   }
 

package/inspector_overlay/tool_paused.ts

@@ -14,7 +14,7 @@ export class PausedOverlay extends Overlay {
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
-  onKeyDown(event: KeyboardEvent) {
+  onKeyDown(event: KeyboardEvent): void {
     if (event.key === 'F8' || this.eventHasCtrlOrMeta(event) && event.key === '\\') {
       this.window.InspectorOverlayHost.send('resume');
     } else if (event.key === 'F10' || this.eventHasCtrlOrMeta(event) && event.key === '\'') {
@@ -22,7 +22,7 @@ export class PausedOverlay extends Overlay {
     }
   }
 
-  override install() {
+  override install(): void {
     const controlsLine = this.document.createElement('div');
     controlsLine.classList.add('controls-line');
 
@@ -62,13 +62,13 @@ export class PausedOverlay extends Overlay {
     super.install();
   }
 
-  override uninstall() {
+  override uninstall(): void {
     this.document.body.innerHTML = '';
     this.document.removeEventListener('keydown', this.onKeyDown);
     super.uninstall();
   }
 
-  drawPausedInDebuggerMessage(message: string) {
+  drawPausedInDebuggerMessage(message: string): void {
     this.container.textContent = message;
   }
 }