chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/ui/legacy/tabbedPane.css

@@ -134,9 +134,9 @@
     text-align: left;
 
     &:focus-visible {
-      outline: 2px solid var(--sys-color-state-focus-ring);
-      outline-offset: 2px;
-      border-radius: 2px;
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+      outline-offset: var(--sys-size-2);
+      border-radius: var(--sys-size-2);
     }
   }
 }
@@ -144,7 +144,7 @@
 .tabbed-pane-header {
   display: flex;
   flex: 0 0 27px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: visible;
   width: 100%;
   background-color: var(--app-color-toolbar-background);
@@ -167,7 +167,7 @@
 }
 
 .tabbed-pane-header-tab-icon {
-  min-width: 14px;
+  min-width: var(--sys-size-7);
   display: flex;
   align-items: center;
   margin-right: var(--sys-size-2);
@@ -272,7 +272,7 @@
   --override-dragging-box-shadow-color: rgb(0 0 0 / 37%);
 
   position: relative;
-  box-shadow: 0 1px 4px 0 var(--override-dragging-box-shadow-color);
+  box-shadow: 0 var(--sys-size-1) var(--sys-size-3) 0 var(--override-dragging-box-shadow-color);
   background-color: var(--app-color-toolbar-background);
 }
 
@@ -349,9 +349,9 @@
 }
 
 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab {
-  height: var(--size-12, 28px);
-  padding: 0 var(--size-8, 16px) 0 var(--size-7, 14px);
-  border-radius: 0 100px 100px 0;
+  height: var(--sys-size-12);
+  padding: 0 var(--sys-size-8) 0 var(--sys-size-7);
+  border-radius: 0 var(--sys-shape-corner-full) var(--sys-shape-corner-full) 0;
   color: var(--sys-color-on-surface);
   position: relative;
 
@@ -370,7 +370,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sys-color-state-focus-ring);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   }
 
   &:active::before {
@@ -388,7 +388,7 @@
 .tabbed-pane-tab-slider {
   height: 3px;
   position: absolute;
-  bottom: -1px;
+  bottom: calc(-1 * var(--sys-size-1));
   background-color: var(--sys-color-primary);
   border-radius: var(--sys-shape-corner-full) var(--sys-shape-corner-full) 0 0;
   left: 0;
@@ -413,20 +413,20 @@
 }
 
 .tabbed-pane-left-toolbar {
-  margin-right: -4px;
+  margin-right: calc(-1 * var(--sys-size-3));
   flex: none;
 }
 
 .tabbed-pane-right-toolbar {
-  margin-left: -4px;
+  margin-left: calc(-1 * var(--sys-size-3));
   flex: none;
 }
 
 .preview-icon {
   --override-tabbed-pane-preview-icon-color: var(--icon-default);
 
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -446,7 +446,7 @@
 
   .tabbed-pane-header {
     forced-color-adjust: none;
-    border-bottom: 1px solid transparent;
+    border-bottom: var(--sys-size-1) solid transparent;
     background-color: ButtonFace;
   }
 
@@ -523,7 +523,7 @@
 
 .spark {
   position: absolute;
-  top: 2px;
+  top: var(--sys-size-2);
 
   --icon-default: var(--sys-color-primary);
 }

package/front_end/ui/legacy/textPrompt.css

@@ -13,8 +13,8 @@
   box-shadow: var(--drop-shadow);
   background-color: var(--sys-color-cdt-base-container);
   text-overflow: clip !important; /* stylelint-disable-line declaration-no-important */
-  margin: 0 -2px -1px;
-  padding: 0 2px 1px;
+  margin: 0 calc(-1 * var(--sys-size-2)) calc(-1 * var(--sys-size-1));
+  padding: 0 var(--sys-size-2) var(--sys-size-1);
   opacity: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 

package/front_end/ui/legacy/toolbar.css

@@ -5,7 +5,7 @@
  */
 
 :host {
-  padding: 0 2px;
+  padding: 0 var(--sys-size-2);
   position: relative;
   white-space: nowrap;
   overflow: hidden;
@@ -21,9 +21,9 @@
   flex-direction: column;
   inset: 0;
   background-color: var(--sys-color-cdt-base-container);
-  border: 1px solid var(--sys-color-divider);
-  margin-top: -1px;
-  width: 28px;
+  border: var(--sys-size-1) solid var(--sys-color-divider);
+  margin-top: calc(-1 * var(--sys-size-1));
+  width: var(--sys-size-12);
 }
 
 :host([hidden]) {

package/front_end/ui/legacy/treeoutline.css

@@ -6,7 +6,7 @@
 
 :host {
   flex: 1 1 auto;
-  padding: 2px 0 0;
+  padding: var(--sys-size-2) 0 0;
 }
 
 :host(devtools-tree) {
@@ -19,14 +19,14 @@
 }
 
 .tree-outline {
-  padding: 0 0 4px 4px;
+  padding: 0 0 var(--sys-size-3) var(--sys-size-3);
   margin: 0;
   z-index: 0;
   position: relative;
 }
 
 .tree-outline:focus-visible {
-  box-shadow: 0 0 0 2px var(--sys-color-state-focus-ring) inset;
+  box-shadow: 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring) inset;
 }
 
 .tree-outline li .selection {
@@ -46,8 +46,8 @@
 
 .tree-outline:not(.hide-selection-when-blurred) li.elements-drag-over .selection {
   display: block;
-  margin-top: -2px;
-  border-top: 2px solid;
+  margin-top: calc(-1 * var(--sys-size-2));
+  border-top: var(--sys-size-2) solid;
   border-top-color: var(--sys-color-tonal-container);
 }
 
@@ -65,7 +65,7 @@
 }
 
 .tree-outline:not(.hide-selection-when-blurred) li.in-clipboard .highlight {
-  outline: 1px dotted var(--sys-color-neutral-outline);
+  outline: var(--sys-size-1) dotted var(--sys-color-neutral-outline);
 }
 
 ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
@@ -78,7 +78,7 @@ ol.tree-outline,
 }
 
 .tree-outline ol {
-  padding-left: 12px;
+  padding-left: var(--sys-size-6);
 }
 
 .tree-outline li {
@@ -87,7 +87,7 @@ ol.tree-outline,
   position: relative;
   display: flex;
   align-items: center;
-  min-height: 16px;
+  min-height: var(--sys-size-8);
 }
 
 ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
@@ -110,11 +110,11 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
 }
 
 .tree-outline li .leading-icons {
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }
 
 .tree-outline li .trailing-icons {
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .tree-outline li::before {
@@ -145,8 +145,8 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
 }
 
 .tree-outline.tree-outline-dense li {
-  margin-top: 1px;
-  min-height: 12px;
+  margin-top: var(--sys-size-1);
+  min-height: var(--sys-size-6);
 }
 
 .tree-outline.tree-outline-dense li.parent {
@@ -163,7 +163,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
 
 .tree-outline.hide-selection-when-blurred .selected:focus-visible {
   background: var(--sys-color-state-focus-highlight);
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
 }
 
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .selected:focus-visible {
@@ -181,7 +181,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
   height: var(--sys-size-10);
   margin-right: var(--sys-size-3);
   padding-right: var(--sys-size-3);
-  padding-left: 6px;
+  padding-left: var(--sys-size-4);
 
   &::before {
     flex-shrink: 0;

package/front_end/ui/legacy/viewContainers.css

@@ -35,17 +35,17 @@ found in the LICENSE file. */
   display: flex;
   align-items: center;
   background-color: var(--sys-color-surface2);
-  height: 22px;
+  height: var(--sys-size-10);
   padding: 0 5px;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
-  border-bottom: 1px solid transparent;
+  border-bottom: var(--sys-size-1) solid transparent;
 }
 
 .expandable-view-title.expanded,
 .expandable-view-title:last-child {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .expandable-view-title devtools-toolbar {
@@ -63,8 +63,8 @@ found in the LICENSE file. */
 }
 
 .title-expand-icon {
-  margin-right: 2px;
-  margin-bottom: -2px;
+  margin-right: var(--sys-size-2);
+  margin-bottom: calc(-1 * var(--sys-size-2));
 }
 
 .expandable-view-title:focus-visible {
@@ -80,7 +80,7 @@ found in the LICENSE file. */
     forced-color-adjust: none;
     color: HighlightText;
     background-color: Highlight;
-    box-shadow: 0 0 0 2px Highlight inset;
+    box-shadow: 0 0 0 var(--sys-size-2) Highlight inset;
   }
 
   .expandable-view-title:focus-visible .title-expand-icon {

package/front_end/ui/settings/ConsoleSettings.ts

@@ -30,3 +30,37 @@ export const consoleHistoryAutocompleteSettingDescriptor: Common.Settings.Settin
   type: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
 };
+
+export const consoleAutocompleteOnEnterSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'console-autocomplete-on-enter',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const consoleGroupSimilarSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'console-group-similar',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const consoleShowsCorsErrorsSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'console-shows-cors-errors',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+};
+
+export const consoleEagerEvalSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'console-eager-eval',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};
+
+export const consoleTraceExpandSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'console-trace-expand',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+};

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);