chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/ui/visual_logging/Debugging.ts

@@ -10,11 +10,11 @@ import {getLoggingState, type LoggingState} from './LoggingState.js';
 
 let veDebuggingEnabled = false;
 let debugPopover: HTMLElement|null = null;
-let hightlightedElement: HTMLElement|null = null;
+let highlightedElement: HTMLElement|null = null;
 const nonDomDebugElements = new WeakMap<Loggable, HTMLElement>();
 let onInspect: ((query: string) => void)|undefined = undefined;
 
-export function setVeDebuggingEnabled(enabled: boolean, inpsect?: (query: string) => void): void {
+export function setVeDebuggingEnabled(enabled: boolean, inspect?: (query: string) => void): void {
   veDebuggingEnabled = enabled;
   if (enabled && !debugPopover) {
     debugPopover = document.createElement('div');
@@ -27,10 +27,10 @@ export function setVeDebuggingEnabled(enabled: boolean, inpsect?: (query: string
     debugPopover.style.zIndex = '100000';
     document.body.appendChild(debugPopover);
   }
-  onInspect = inpsect;
-  if (!enabled && hightlightedElement) {
-    hightlightedElement.style.backgroundColor = '';
-    hightlightedElement.style.outline = '';
+  onInspect = inspect;
+  if (!enabled && highlightedElement) {
+    highlightedElement.style.backgroundColor = '';
+    highlightedElement.style.outline = '';
   }
 }
 
@@ -53,12 +53,33 @@ function showDebugPopover(content: string, rect?: DOMRect): void {
   if (!debugPopover) {
     return;
   }
-  if (rect) {
-    debugPopover.style.left = `${rect.left}px`;
-    debugPopover.style.top = `${rect.bottom + 8}px`;
-  }
+
+  // Set these first so we get the correct information from
+  // getBoundingClientRect
   debugPopover.style.display = 'block';
   debugPopover.textContent = content;
+
+  if (rect) {
+    const debugPopoverReact = debugPopover.getBoundingClientRect();
+
+    // If there is no space under the element
+    // render render it above the element
+    if (window.innerHeight < rect.bottom + debugPopoverReact.height + 8) {
+      debugPopover.style.top = `${rect.top - debugPopoverReact.height - 8}px`;
+    } else {
+      debugPopover.style.top = `${rect.bottom + 8}px`;
+    }
+
+    // If the element will go outside the viewport on the right
+    // render it with it's and at the viewport end.
+    if (window.innerWidth < rect.left + debugPopoverReact.width) {
+      debugPopover.style.right = '0px';
+      debugPopover.style.left = '';
+    } else {
+      debugPopover.style.right = '';
+      debugPopover.style.left = `${rect.left}px`;
+    }
+  }
 }
 
 function processElementForDebugging(element: HTMLElement, loggingState: LoggingState): void {
@@ -69,7 +90,7 @@ function processElementForDebugging(element: HTMLElement, loggingState: LoggingS
     }
   } else {
     element.addEventListener('mousedown', event => {
-      if (event.currentTarget === hightlightedElement && onInspect && debugPopover && veDebuggingEnabled) {
+      if (event.currentTarget === highlightedElement && onInspect && debugPopover && veDebuggingEnabled) {
         onInspect(debugPopover.textContent || '');
         event.stopImmediatePropagation();
         event.preventDefault();
@@ -79,13 +100,13 @@ function processElementForDebugging(element: HTMLElement, loggingState: LoggingS
       if (!veDebuggingEnabled) {
         return;
       }
-      if (hightlightedElement) {
-        hightlightedElement.style.backgroundColor = '';
-        hightlightedElement.style.outline = '';
+      if (highlightedElement) {
+        highlightedElement.style.backgroundColor = '';
+        highlightedElement.style.outline = '';
       }
       element.style.backgroundColor = '#A7C3E4';
       element.style.outline = 'dashed 1px #7327C6';
-      hightlightedElement = element;
+      highlightedElement = element;
       assertNotNullOrUndefined(debugPopover);
       const pathToRoot = [loggingState];
       let ancestor = loggingState.parent;
@@ -167,21 +188,21 @@ function deleteUndefinedFields<T>(entry: T): void {
   }
 }
 
-export type EventAttributes = {
-  context?: string,
-  width?: number,
-  height?: number,
-  mouseButton?: number,
-  doubleClick?: boolean,
-};
+export interface EventAttributes {
+  context?: string;
+  width?: number;
+  height?: number;
+  mouseButton?: number;
+  doubleClick?: boolean;
+}
 
-type VisualElementAttributes = {
-  ve: string,
-  veid: number,
-  context?: string,
-  width?: number,
-  height?: number,
-};
+interface VisualElementAttributes {
+  ve: string;
+  veid: number;
+  context?: string;
+  width?: number;
+  height?: number;
+}
 
 type IntuitiveLogEntry = {
   event?: EventType|'Impression'|'SessionStart',
@@ -458,7 +479,7 @@ DEFINE MACRO Interaction STRUCT(${
       ])});
 DEFINE MACRO Entry STRUCT($1, $2 AS interactions, $3 AS time);
 
-// This fake entry put first fixes nested struct fiels names being lost
+// This fake entry put first fixes nested struct fields names being lost
 DEFINE MACRO FakeVeFields $VeFields("", $NullString, 0, 0, 0, $1);
 DEFINE MACRO FakeVe STRUCT($FakeVeFields($1));
 DEFINE MACRO FakeEntry $Entry($FakeVeFields($FakeVe($FakeVe($FakeVe($FakeVe($FakeVe($FakeVe($FakeVe(null)))))))), ([]), 0);
@@ -606,7 +627,7 @@ export function processStartLoggingForDebugging(): void {
 
 // Compares the 'actual' log entry against the 'expected'.
 // For impressions events to match, all expected impressions need to be present
-// in the actual event. Unexected impressions in the actual event are ignored.
+// in the actual event. Unexpected impressions in the actual event are ignored.
 // Interaction events need to match exactly.
 function compareVeEvents(actual: TestLogEntry, expected: TestLogEntry): boolean {
   if ('interaction' in expected && 'interaction' in actual) {
@@ -653,7 +674,8 @@ export async function expectVeEvents(expectedEvents: TestLogEntry[]): Promise<vo
   const {promise, resolve: success, reject: fail} = Promise.withResolvers<void>();
   pendingEventExpectation = {expectedEvents, success, fail};
   checkPendingEventExpectation();
-  setTimeout(() => {
+
+  const timeout = setTimeout(() => {
     if (pendingEventExpectation?.missingEvents) {
       pendingEventExpectation.fail(new Error(
           'Missing VE Events: ' +
@@ -662,7 +684,10 @@ export async function expectVeEvents(expectedEvents: TestLogEntry[]): Promise<vo
               .join('\n')));
     }
   }, EVENT_EXPECTATION_TIMEOUT);
-  return promise;
+
+  return promise.finally(() => {
+    clearTimeout(timeout);
+  });
 }
 
 let numMatchedEvents = 0;

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -335,7 +335,6 @@ export const knownContextValues = new Set([
   'affected-sources',
   'ai-assistance-enabled',
   'ai-assistance-history-entries',
-  'ai-assistance.filesystem',
   'ai_assistance',
   'align-content',
   'align-content-center',
@@ -417,6 +416,15 @@ export const knownContextValues = new Set([
   'animation-range-start',
   'animation-timeline',
   'animation-timing-function',
+  'animation-trigger',
+  'animation-trigger-exit-range',
+  'animation-trigger-exit-range-end',
+  'animation-trigger-exit-range-start',
+  'animation-trigger-range',
+  'animation-trigger-range-end',
+  'animation-trigger-range-start',
+  'animation-trigger-timeline',
+  'animation-trigger-type',
   'animations',
   'animations.buffer-preview',
   'animations.clear',
@@ -643,6 +651,7 @@ export const knownContextValues = new Set([
   'cache-storage-view-tab',
   'cache-storage.delete-selected',
   'cache-storage.refresh',
+  'calibrated-cpu-throttling',
   'call-tree',
   'cancel',
   'cancel-animation-frame',
@@ -676,6 +685,8 @@ export const knownContextValues = new Set([
   'chrome-extension://ienfalfjdbdpebioblfackkekamfmbnhAngular',
   'chrome-extensions',
   'chrome-flags-bounce-tracking-mitigations',
+  'chrome-flags-tpcd-heuristics-grants',
+  'chrome-flags-tpcd-metadata-grants',
   'chrome-i-pad',
   'chrome-i-phone',
   'chrome-mac',
@@ -750,7 +761,9 @@ export const knownContextValues = new Set([
   'column-fill',
   'column-gap',
   'column-rule',
+  'column-rule-break',
   'column-rule-color',
+  'column-rule-outset',
   'column-rule-style',
   'column-rule-width',
   'column-span',
@@ -850,7 +863,9 @@ export const knownContextValues = new Set([
   'converter-puppeteer-firefox',
   'converter-puppeteer-replay',
   'cookie-control-override-enabled',
+  'cookie-flag-controls',
   'cookie-preview',
+  'cookie-report',
   'cookie-view-show-decoded',
   'cookies',
   'cookies-data',
@@ -878,6 +893,7 @@ export const knownContextValues = new Set([
   'copy-as-powershell',
   'copy-as-utf',
   'copy-color',
+  'copy-console',
   'copy-css-declaration-as-js',
   'copy-declaration',
   'copy-element',
@@ -910,6 +926,15 @@ export const knownContextValues = new Set([
   'copy-visible-styled-selection',
   'copy-watch-expression-value',
   'copy-xpath',
+  'corner-bottom-left-shape',
+  'corner-bottom-right-shape',
+  'corner-end-end-shape',
+  'corner-end-start-shape',
+  'corner-shape',
+  'corner-start-end-shape',
+  'corner-start-start-shape',
+  'corner-top-left-shape',
+  'corner-top-right-shape',
   'cors-details',
   'count',
   'count-delta',
@@ -930,8 +955,11 @@ export const knownContextValues = new Set([
   'cpu-throttled-20',
   'cpu-throttled-4',
   'cpu-throttled-6',
+  'cpu-throttled-calibrated-low-tier-mobile',
+  'cpu-throttled-calibrated-mid-tier-mobile',
   'cpu-throttling',
   'cpu-throttling-selector',
+  'cpu-throttling-selector-calibrate',
   'create-new-snippet',
   'create-recording',
   'create-recording-view',
@@ -963,9 +991,6 @@ export const knownContextValues = new Set([
   'css-source-maps-enabled',
   'css-source-maps-enabled-false',
   'css-text-node',
-  'css-type-component-length-deprecate',
-  'css-type-component-length-deprecate-documentation',
-  'css-type-component-length-deprecate-feedback',
   'css-variable',
   'css-wide-keyword-link',
   'cssAngleEditor',
@@ -1223,9 +1248,8 @@ export const knownContextValues = new Set([
   'edit-title',
   'editor',
   'el',
-  'elapsed (us)',
-  'elapsed(us)',
   'elapsed-time',
+  'elapsed-us',
   'element-class',
   'element-properties',
   'element-states',
@@ -1269,6 +1293,7 @@ export const knownContextValues = new Set([
   'empty-view',
   'emulate-auto-dark-mode',
   'emulate-page-focus',
+  'emulate-page-focus-false',
   'emulate-page-focus-true',
   'emulated-css-media',
   'emulated-css-media-feature-color-gamut',
@@ -1380,6 +1405,8 @@ export const knownContextValues = new Set([
   'expose-internals',
   'expression',
   'extend-grid-lines',
+  'extend-grid-lines-false',
+  'extend-grid-lines-true',
   'extension-storage',
   'extension-storage-data',
   'extension-storage-for-domain',
@@ -1424,6 +1451,7 @@ export const knownContextValues = new Set([
   'fix-this-issue',
   'flame',
   'flamechart-selected-navigation',
+  'flamechart-selected-navigation-modern',
   'flex',
   'flex-basis',
   'flex-direction',
@@ -1682,6 +1710,7 @@ export const knownContextValues = new Set([
   'initiator-address-space',
   'initiator-tree',
   'inline',
+  'inline-citation',
   'inline-size',
   'inline-variable-values',
   'inline-variable-values-false',
@@ -1729,6 +1758,9 @@ export const knownContextValues = new Set([
   'interactions',
   'interactivity',
   'interest-groups',
+  'interest-target-delay',
+  'interest-target-hide-delay',
+  'interest-target-show-delay',
   'internal',
   'internet-explorer-10',
   'internet-explorer-11',
@@ -1761,6 +1793,7 @@ export const knownContextValues = new Set([
   'item-1',
   'item-2',
   'ja',
+  'java-script',
   'java-script-disabled',
   'java-script-disabled-true',
   'javascript',
@@ -1933,6 +1966,7 @@ export const knownContextValues = new Set([
   'left',
   'legend',
   'length',
+  'length-popover',
   'less',
   'letter-spacing',
   'letter-spacing-unit',
@@ -2226,17 +2260,19 @@ export const knownContextValues = new Set([
   'mask-repeat',
   'mask-size',
   'mask-type',
+  'masonry-auto-tracks',
   'masonry-direction',
   'masonry-fill',
+  'masonry-flow',
   'masonry-slack',
   'masonry-template-tracks',
   'masonry-track',
   'masonry-track-end',
   'masonry-track-start',
+  'match-attempts',
   'match-case',
+  'match-count',
   'match-whole-word',
-  'match_attempts',
-  'match_count',
   'matched-address-item',
   'math',
   'math-depth',
@@ -2717,6 +2753,7 @@ export const knownContextValues = new Set([
   'read-write',
   'readiness-list-link',
   'reading-flow',
+  'reading-order',
   'readystatechange',
   'rec-2020',
   'recalc-style-count',
@@ -2747,7 +2784,7 @@ export const knownContextValues = new Set([
   'refresh-watch-expressions',
   'regular-breakpoint',
   'regular-expression',
-  'reject_percentage',
+  'reject-percentage',
   'release-note',
   'release-notes',
   'reload-required',
@@ -2824,6 +2861,7 @@ export const knownContextValues = new Set([
   'responsive',
   'restart-frame',
   'restore-default-shortcuts',
+  'result',
   'retained-size',
   'retainedSize',
   'retainers',
@@ -2843,6 +2881,8 @@ export const knownContextValues = new Set([
   'roboto',
   'rotate',
   'row-gap',
+  'row-rule-break',
+  'row-rule-outset',
   'rp-id',
   'rpId',
   'ru',
@@ -2952,6 +2992,7 @@ export const knownContextValues = new Set([
   'second-col',
   'secure',
   'security',
+  'security-last-selected-element-path',
   'security.main-view',
   'security.origin-view',
   'security.toggle-san-truncation',
@@ -3156,6 +3197,7 @@ export const knownContextValues = new Set([
   'signCount',
   'simulate',
   'simulate-custom-quota',
+  'site',
   'sites',
   'size',
   'size-adjust',
@@ -3251,6 +3293,7 @@ export const knownContextValues = new Set([
   'standard-emulated-device-list',
   'start',
   'start-new-chat',
+  'start-recording',
   'start-time',
   'start-url',
   'start-view',
@@ -3286,7 +3329,7 @@ export const knownContextValues = new Set([
   'style-attribute',
   'style-properties',
   'style-sheet-header',
-  'style_sheet_id',
+  'style-sheet-id',
   'styles',
   'styles-metrics',
   'styles-pane-css-changes',
@@ -3362,6 +3405,7 @@ export const knownContextValues = new Set([
   'text-editor-code-folding-false',
   'text-editor-indent',
   'text-editor-tab-moves-focus',
+  'text-editor-tab-moves-focus-true',
   'text-emphasis',
   'text-emphasis-color',
   'text-emphasis-position',
@@ -3384,9 +3428,12 @@ export const knownContextValues = new Set([
   'th',
   'third',
   'third-parties',
+  'third-party-tree',
   'third-property',
   'this-origin',
   'throttling-conditions',
+  'throttling.calibrate',
+  'throttling.calibrate-cancel',
   'thumbs-down',
   'thumbs-up',
   'time',
@@ -3465,8 +3512,12 @@ export const knownContextValues = new Set([
   'timeline.ignore-list-pattern.remove',
   'timeline.insights-tab',
   'timeline.insights.cls-culprits',
+  'timeline.insights.dismiss-field-mismatch',
   'timeline.insights.document-latency',
+  'timeline.insights.dom-size',
+  'timeline.insights.field-mismatch',
   'timeline.insights.font-display',
+  'timeline.insights.forced-reflow',
   'timeline.insights.image-delivery',
   'timeline.insights.inp',
   'timeline.insights.lcp-by-phase',
@@ -3532,11 +3583,14 @@ export const knownContextValues = new Set([
   'timeline.timings',
   'timeline.toggle-insight.cls-culprits',
   'timeline.toggle-insight.document-latency',
+  'timeline.toggle-insight.dom-size',
   'timeline.toggle-insight.font-display',
+  'timeline.toggle-insight.forced-reflow',
   'timeline.toggle-insight.image-delivery',
   'timeline.toggle-insight.inp',
   'timeline.toggle-insight.lcp-by-phase',
   'timeline.toggle-insight.lcp-discovery',
+  'timeline.toggle-insight.long-critical-network-tree',
   'timeline.toggle-insight.render-blocking-requests',
   'timeline.toggle-insight.slow-css-selector',
   'timeline.toggle-insight.third-parties',
@@ -3575,6 +3629,7 @@ export const knownContextValues = new Set([
   'track-configuration-exit',
   'tracking-sites-details',
   'trailing',
+  'transfer-size',
   'transform',
   'transform-box',
   'transform-origin',

package/front_end/ui/visual_logging/visual_logging.ts

@@ -9,8 +9,8 @@ import * as LoggingEvents from './LoggingEvents.js';
 import * as NonDomState from './NonDomState.js';
 
 export type Loggable = LoggableModule.Loggable;
-export {setVeDebugLoggingEnabled, DebugLoggingFormat, setVeDebuggingEnabled} from './Debugging.js';
-export {startLogging, stopLogging, addDocument} from './LoggingDriver.js';
+export {DebugLoggingFormat, setVeDebuggingEnabled, setVeDebugLoggingEnabled} from './Debugging.js';
+export {addDocument, startLogging, stopLogging} from './LoggingDriver.js';
 export {logImpressions} from './LoggingEvents.js';
 export const logClick = (loggable: Loggable, event: Event, options: {doubleClick?: boolean} = {}): void =>
     LoggingEvents.logClick(LoggingDriver.clickLogThrottler)(loggable, event, options);

package/inspector_overlay/common.ts

@@ -224,7 +224,6 @@ export function constrainNumber(num: number, min: number, max: number): number {
 }
 
 declare global {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Document {
     adoptedStyleSheets: CSSStyleSheet[];
   }

package/inspector_overlay/css_grid_label_helpers.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {luminance} from '../front_end/core/common/ColorUtils.js';  // eslint-disable-line rulesdir/es-modules-import
+import {luminance} from '../front_end/core/common/ColorUtils.js';
 
 import {type AreaBounds, type Bounds, createChild, type Position} from './common.js';
 import {applyMatrixToPoint, parseHexa} from './highlight_common.js';

package/inspector_overlay/drag_resize_handler.ts

@@ -25,10 +25,10 @@ const cursorByResizerType = new Map([
   [ResizerType.BIDIRECTION, 'nwse-resize'],
 ]);
 
-type OriginInfo = {
-  coord: number,
-  value: number,
-};
+interface OriginInfo {
+  coord: number;
+  value: number;
+}
 
 export class DragResizeHandler {
   private document: Document;

package/inspector_overlay/highlight_common.ts

@@ -28,7 +28,6 @@
 //  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-// eslint-disable-next-line rulesdir/es-modules-import
 import {
   type Color4D,
   rgbaToHsla,

package/inspector_overlay/main.ts

@@ -3,34 +3,33 @@
 // found in the LICENSE file.
 
 // @ts-ignore Importing CSS is handled in Rollup.
-import commonStyle from './common.css'; // eslint-disable-line rulesdir/es-modules-import
+import commonStyle from './common.css';
 import {adoptStyleSheet} from './common.js';
 import {gridStyle} from './highlight_grid_common.js';
 import {DistancesOverlay} from './tool_distances.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import highlightGridStyle from './tool_grid.css'; // eslint-disable-line rulesdir/es-modules-import
+import highlightGridStyle from './tool_grid.css';
 // @ts-ignore Importing CSS is handled in Rollup.
-import highlightStyle from './tool_highlight.css'; // eslint-disable-line rulesdir/es-modules-import
+import highlightStyle from './tool_highlight.css';
 import {HighlightOverlay} from './tool_highlight.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import pausedStyle from './tool_paused.css'; // eslint-disable-line rulesdir/es-modules-import
+import pausedStyle from './tool_paused.css';
 import {PausedOverlay, type PausedToolMessage} from './tool_paused.js';
 import {PersistentOverlay, type PersistentToolMessage} from './tool_persistent.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import screenshotStyle from './tool_screenshot.css'; // eslint-disable-line rulesdir/es-modules-import
+import screenshotStyle from './tool_screenshot.css';
 import {ScreenshotOverlay, type ScreenshotToolMessage} from './tool_screenshot.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import sourceOrderStyle from './tool_source_order.css'; // eslint-disable-line rulesdir/es-modules-import
+import sourceOrderStyle from './tool_source_order.css';
 import {SourceOrderOverlay} from './tool_source_order.js';
 import {ViewportSizeOverlay} from './tool_viewport_size.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import wcoStyle from './tool_window_controls.css'; // eslint-disable-line rulesdir/es-modules-import
+import wcoStyle from './tool_window_controls.css';
 import {WindowControlsOverlay} from './tool_window_controls.js';
 
 // @ts-ignore Importing CSS is handled in Rollup.
 
 declare global {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Window {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     InspectorOverlayHost: {send(data: PausedToolMessage|PersistentToolMessage|ScreenshotToolMessage|string): void};
@@ -79,11 +78,11 @@ const overlays: Overlays = {
 let currentOverlay: Overlays[keyof Overlays];
 let platformName: PlatformName;
 
-type MessageLookup = {
-  'setOverlay': keyof Overlays,
-  'setPlatform': PlatformName,
-  drawingFinished: '',
-};
+interface MessageLookup {
+  setOverlay: keyof Overlays;
+  setPlatform: PlatformName;
+  drawingFinished: '';
+}
 
 const dispatch = <K extends keyof MessageLookup>(message: [a: K, b: MessageLookup[K]]) => {
   const functionName = message[0];

package/inspector_overlay/resources.grd

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<grit latest_public_release="0" current_release="1" output_all_resource_defines="false">
+<grit latest_public_release="0" current_release="1">
   <outputs>
     <output filename="grit/inspector_overlay_resources_map.h" type="rc_header">
       <emit emit_type="prepend"></emit>

package/inspector_overlay/testing/InspectorOverlayHelpers.ts

@@ -44,9 +44,9 @@ const renderElementIntoDOM = (element: HTMLElement, renderOptions: RenderOptions
   return element;
 };
 
-type Constructor<T> = {
-  new (...args: unknown[]): T,
-};
+interface Constructor<T> {
+  new(...args: unknown[]): T;
+}
 
 function assertElements<T extends Element>(
     nodeList: NodeListOf<Element>, elementClass: Constructor<T>): asserts nodeList is NodeListOf<T> {

package/inspector_overlay/tool_highlight.css

@@ -202,13 +202,13 @@ body {
 }
 
 .material-tag-name {
-  /* Keep this in sync with inspectorSyntaxHighlight.css (--override-dom-tag-name-color) */
+  /* Keep this in sync with inspectorCommon.css (--override-dom-tag-name-color) */
   color: rgb(136 18 128);
 }
 
 .material-class-name,
 .material-node-id {
-  /* Keep this in sync with inspectorSyntaxHighlight.css (.webkit-html-attribute-value) */
+  /* Keep this in sync with inspectorCommon.css (.webkit-html-attribute-value) */
   color: rgb(26 26 166);
 }
 

package/inspector_overlay/tool_highlight.ts

@@ -28,7 +28,6 @@
 //  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-// eslint-disable-next-line rulesdir/es-modules-import
 import {
   contrastRatio,
   contrastRatioAPCA,

package/inspector_overlay/tool_persistent.ts

@@ -29,26 +29,20 @@
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import {Overlay, type ResetData} from './common.js';
-
 import {DragResizeHandler, ResizerType, type Delegate} from './drag_resize_handler.js';
-
 import {drawContainerQueryHighlight, type ContainerQueryHighlight} from './highlight_container_query.js';
-
 import {drawLayoutFlexContainerHighlight, type FlexContainerHighlight} from './highlight_flex_common.js';
-
 import {drawLayoutGridHighlight, type GridHighlight} from './highlight_grid_common.js';
-
 import {drawIsolatedElementHighlight, type IsolatedElementHighlight} from './highlight_isolated_element.js';
-
 import {drawScrollSnapHighlight, type ScrollSnapHighlight} from './highlight_scroll_snap.js';
 
-export type PersistentToolMessage = {
-  highlightType: string,
-  highlightIndex: number,
-  newWidth: string,
-  newHeight: string,
-  resizerType: ResizerType,
-};
+export interface PersistentToolMessage {
+  highlightType: string;
+  highlightIndex: number;
+  newWidth: string;
+  newHeight: string;
+  resizerType: ResizerType;
+}
 
 interface DraggableMetadata {
   type: ResizerType;