chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

package/front_end/panels/timeline/utils/IgnoreList.ts

@@ -10,19 +10,19 @@ import * as Workspace from '../../../models/workspace/workspace.js';
 
 const UIStrings = {
   /**
-   * @description Refers to when skipping content scripts is enabled and the current script is ignored because it's a content script.
+   * @description Reason why a script is ignored because it is a Chrome extension content script.
    */
   skipContentScripts: 'Content script',
   /**
-   * @description Refers to when skipping known third party scripts is enabled and the current script is ignored because it's a known third party script.
+   * @description Reason why a script is ignored because it is marked with ignoreList in the source map.
    */
   skip3rdPartyScripts: 'Marked with ignoreList in source map',
   /**
-   * @description Refers to when skipping anonymous scripts is enabled and the current script is ignored because is an anonymous script.
+   * @description Reason why a script is ignored because it is an anonymous script.
    */
   skipAnonymousScripts: 'Anonymous script',
   /**
-   * @description Refers to when the current script is ignored because of an unknown rule.
+   * @description Reason why a script is ignored because of an unknown ignore rule.
    */
   unknown: 'Unknown',
 } as const;

package/front_end/panels/timeline/utils/ImageCache.ts

@@ -6,7 +6,7 @@ import * as Trace from '../../../models/trace/trace.js';
 
 const imageCache =
     new WeakMap<Trace.Types.Events.LegacySyntheticScreenshot|Trace.Types.Events.Screenshot, HTMLImageElement|null>();
-export const emitter = new EventTarget();
+export const emitter: EventTarget = new EventTarget();
 
 /**
  * Synchronously returns an image, or return `null` while queuing up an async load of that image.
@@ -55,5 +55,7 @@ export function preload(screenshots: Array<Trace.Types.Events.LegacySyntheticScr
   return Promise.all(promises);
 }
 
-export const cacheForTesting = imageCache;
-export const loadImageForTesting = loadImage;
+export const cacheForTesting:
+    WeakMap<Trace.Types.Events.LegacySyntheticScreenshot|Trace.Types.Events.Screenshot, HTMLImageElement|null> =
+        imageCache;
+export const loadImageForTesting: typeof loadImage = loadImage;

package/front_end/panels/web_audio/WebAudioView.ts

@@ -76,14 +76,14 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const WEBAUDIO_EXPLANATION_URL =
     'https://developer.chrome.com/docs/devtools/webaudio' as Platform.DevToolsPath.UrlString;
 
-interface ViewInput {
+export interface ViewInput {
   contexts: Protocol.WebAudio.BaseAudioContext[];
   selectedContextIndex: number;
   onContextSelectorSelectionChanged: (contextId: string) => void;
   contextRealtimeData: Protocol.WebAudio.ContextRealtimeData|null;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   const {
@@ -189,7 +189,7 @@ export class WebAudioView extends UI.Widget.VBox<ShadowRoot> implements
   private selectedContextIndex = -1;
   private readonly pollRealtimeDataThrottler: Common.Throttler.Throttler;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super({useShadowDom: 'pure'});
     this.view = view;
 

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -240,19 +240,13 @@ const PROTOCOL_AUTHENTICATOR_VALUES: Protocol.EnumerableEnum<typeof Protocol.Web
   U2f: Protocol.WebAuthn.AuthenticatorProtocol.U2f,
 };
 
-interface Authenticator {
+export interface Authenticator {
   name: string;
   options: Protocol.WebAuthn.VirtualAuthenticatorOptions;
   credentials: Protocol.WebAuthn.Credential[];
 }
 
-interface Authenticator {
-  name: string;
-  options: Protocol.WebAuthn.VirtualAuthenticatorOptions;
-  credentials: Protocol.WebAuthn.Credential[];
-}
-
-interface ViewInput {
+export interface ViewInput {
   enabled: boolean;
   onToggleEnabled: () => void;
   authenticators: Map<Protocol.WebAuthn.AuthenticatorId, Authenticator>;
@@ -270,11 +264,11 @@ interface ViewInput {
   onRemoveCredential: (id: Protocol.WebAuthn.AuthenticatorId, credentialId: string) => void;
 }
 
-interface ViewOutput {
+export interface ViewOutput {
   revealSection: Map<string, () => void>;
 }
 
-type ViewFunction = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+export type ViewFunction = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
 function renderToolbar(enabled: boolean, onToggle: () => void): Lit.TemplateResult {
   const enableCheckboxTitle = i18nString(UIStrings.enableVirtualAuthenticator);
@@ -629,7 +623,7 @@ export class WebauthnPaneImpl extends UI.Panel.Panel implements
     revealSection: new Map(),
   };
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: ViewFunction = DEFAULT_VIEW) {
     super('webauthn');
 
     this.#view = view;

package/front_end/third_party/acorn/acorn.ts

@@ -9,6 +9,6 @@ export {ESTree};
 
 export { type Comment, defaultOptions, getLineInfo, Node, SourceLocation, Token, tokTypes} from './package/dist/acorn.mjs';
 
-export const Parser = acorn.Parser;
-export const tokenizer = acorn.Parser.tokenizer.bind(acorn.Parser);
-export const parse = acorn.Parser.parse.bind(acorn.Parser);
+export const Parser: typeof acorn.Parser = acorn.Parser;
+export const tokenizer: typeof acorn.Parser.tokenizer = acorn.Parser.tokenizer.bind(acorn.Parser);
+export const parse: typeof acorn.Parser.parse = acorn.Parser.parse.bind(acorn.Parser);

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: e10b20e60f162e7ad88e4930833695a54f4e15fb
+Revision: e8d7f556806fab69401893b125dee4b6e6ded695
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/chromium/ahem/ahem.d.ts

@@ -0,0 +1 @@
+export {};

package/front_end/third_party/csp_evaluator/package/csp.ts

@@ -343,12 +343,12 @@ export function isUrlScheme(urlScheme: string): boolean {
 /**
  * A regex pattern to check nonce prefix and Base64 formatting of a nonce value.
  */
-export const STRICT_NONCE_PATTERN =
+export const STRICT_NONCE_PATTERN: RegExp =
     new RegExp('^\'nonce-[a-zA-Z0-9+/_-]+[=]{0,2}\'$');
 
 
 /** A regex pattern for checking if nonce prefix. */
-export const NONCE_PATTERN = new RegExp('^\'nonce-(.+)\'$');
+export const NONCE_PATTERN: RegExp = new RegExp('^\'nonce-(.+)\'$');
 
 
 /**
@@ -367,12 +367,12 @@ export function isNonce(nonce: string, strictCheck?: boolean): boolean {
 /**
  * A regex pattern to check hash prefix and Base64 formatting of a hash value.
  */
-export const STRICT_HASH_PATTERN =
+export const STRICT_HASH_PATTERN: RegExp =
     new RegExp('^\'(sha256|sha384|sha512)-[a-zA-Z0-9+/]+[=]{0,2}\'$');
 
 
 /** A regex pattern to check hash prefix. */
-export const HASH_PATTERN = new RegExp('^\'(sha256|sha384|sha512)-(.+)\'$');
+export const HASH_PATTERN: RegExp = new RegExp('^\'(sha256|sha384|sha512)-(.+)\'$');
 
 
 /**

package/front_end/third_party/csp_evaluator/package/parser.ts

@@ -97,4 +97,6 @@ function normalizeDirectiveValue(directiveValue: string): string {
   return directiveValue;
 }
 
-export const TEST_ONLY = {normalizeDirectiveValue};
+export const TEST_ONLY: {
+  normalizeDirectiveValue: typeof normalizeDirectiveValue,
+} = {normalizeDirectiveValue};

package/front_end/third_party/csp_evaluator/package/utils.ts

@@ -136,7 +136,7 @@ export function matchWildcardUrls(
 export function applyCheckFunktionToDirectives(
     parsedCsp: csp.Csp,
     check: (directive: string, directiveValues: string[]) => void,
-) {
+): void {
   const directiveNames = Object.keys(parsedCsp.directives);
 
   for (const directive of directiveNames) {

package/front_end/third_party/diff/diff_match_patch.d.ts

@@ -0,0 +1,10 @@
+// Copyright 2026 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* eslint-disable @typescript-eslint/naming-convention */
+declare class diff_match_patch {
+  diff_main(text1: string, text2: string): Array<{0: number, 1: string}>;
+  diff_cleanupSemantic(diff: Array<{0: number, 1: string}>): void;
+}
+/* eslint-enable @typescript-eslint/naming-convention */

package/front_end/third_party/json5/json5.ts

@@ -1,4 +1,4 @@
 import JSON5 from './lib/index.js';
 
-export const parse = JSON5.parse;
-export const stringify = JSON5.stringify;
+export const parse: typeof JSON5.parse = JSON5.parse;
+export const stringify: typeof JSON5.stringify = JSON5.stringify;

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -57,6 +57,16 @@ function isCodeMirrorEditor(element: Element): boolean {
   return element.classList.contains('cm-editor');
 }
 
+/**
+ * Resolves the file path attribute for a CodeMirror editor element.
+ *
+ * @param element The editor element to check.
+ * @returns The file path string or undefined if not found.
+ */
+export function getEditorFilePath(element: Element): string|undefined {
+  return element.getAttribute('data-file-path') ?? undefined;
+}
+
 /**
  * Checks whether an element contains non-empty text content (after trimming whitespace),
  * including text from any nested shadow roots.
@@ -340,7 +350,7 @@ export function resolveCommentAnchor(
       return null;
     }
     textSignature = lineInfo.textSignature;
-    const filePath = target.getAttribute('data-file-path') ?? undefined;
+    const filePath = getEditorFilePath(target);
     editor = {lineNumber: lineInfo.lineNumber, filePath};
   } else {
     textSignature = target.deepTextContent();
@@ -379,7 +389,6 @@ export function resolveCommentAnchor(
  * @param limit Maximum number of matching elements to return (defaults to Infinity).
  * @returns Array of matching Elements in document order.
  */
-// eslint-disable-next-line @typescript-eslint/no-inferrable-types
 export function deepQuerySelectorAll(root: Document|Element, selector: string, limit: number = Infinity): Element[] {
   const results: Element[] = [];
   if (limit <= 0 || Number.isNaN(limit)) {
@@ -453,7 +462,7 @@ export function rematchCommentAnchor(comment: CommentThread, root: Document|Elem
     const {lineNumber, filePath} = anchor.editor;
     const cmEditors = deepQuerySelectorAll(root, '.cm-editor');
     const matchingEditors = cmEditors.filter(cmEditor => {
-      if (filePath !== undefined && cmEditor.getAttribute('data-file-path') !== filePath) {
+      if (filePath !== undefined && getEditorFilePath(cmEditor) !== filePath) {
         return false;
       }
       return VisualLogging.getVePath(cmEditor) === anchor.vePath;

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -9,6 +9,7 @@ import {
   type CommentThread,
   computeVisibleRect,
   deepQuerySelectorAll,
+  getEditorFilePath,
   rematchCommentAnchor,
   resolveCommentAnchor,
   resolveCommentAnchorElement,
@@ -298,6 +299,13 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         continue;
       }
 
+      if (thread.anchor.editor?.filePath) {
+        const currentFilePath = getEditorFilePath(el);
+        if (currentFilePath && currentFilePath !== thread.anchor.editor.filePath) {
+          continue;
+        }
+      }
+
       const observer = this.#getIntersectionObserver();
       if (!this.#observedThreads.has(el)) {
         observer.observe(el);
@@ -608,7 +616,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ['jslog', 'data-network-request-id', 'data-backend-node-id', 'aria-expanded'],
+      attributeFilter: ['jslog', 'data-network-request-id', 'data-backend-node-id', 'aria-expanded', 'data-file-path'],
     });
   }
 

package/front_end/ui/components/buttons/Button.docs.ts

@@ -4,7 +4,7 @@
 
 import {Button, FloatingButton} from './buttons.js';
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   const buttonDocs = container.createChild('div', 'button-docs');
   const style = document.createElement('style');
   style.textContent = `

package/front_end/ui/components/buttons/button.css

@@ -358,3 +358,24 @@ button {
     transform: rotate(360deg);
   }
 }
+
+@media (forced-colors: active) {
+  button.outlined {
+    background: ButtonFace;
+    border-color: ButtonText;
+    color: ButtonText;
+
+    devtools-icon {
+      color: ButtonText;
+    }
+
+    &:disabled {
+      border-color: GrayText;
+      color: GrayText;
+
+      devtools-icon {
+        color: GrayText;
+      }
+    }
+  }
+}

package/front_end/ui/components/buttons/floatingButton.css

@@ -116,3 +116,28 @@ button {
     color: var(--ref-palette-neutral100) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
+
+@media (forced-colors: active) {
+  button {
+    forced-color-adjust: none;
+    box-shadow: 0 0 0 var(--sys-size-1) ButtonText;
+
+    :host-context(:not(.theme-with-dark-background)) &,
+    :host-context(.theme-with-dark-background) &:not(:disabled) {
+      background-color: ButtonFace;
+    }
+
+    :host-context(:not(.theme-with-dark-background)) &:not(:disabled) > devtools-icon,
+    :host-context(.theme-with-dark-background) &:not(:disabled) > devtools-icon {
+      color: ButtonText;
+    }
+
+    &:focus-visible {
+      outline-color: ButtonText;
+    }
+
+    &:disabled > devtools-icon {
+      color: GrayText;
+    }
+  }
+}

package/front_end/ui/components/report_view/ReportView.docs.ts

@@ -15,7 +15,7 @@ const exampleRenderHelper = (key: string, value: string) => html`
           <devtools-report-value>${value}</devtools-report-value>
         `;
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   // clang-format off
   Lit.render(
       html`

package/front_end/ui/components/snackbars/Snackbars.docs.ts

@@ -4,7 +4,7 @@
 
 import {Snackbar} from './snackbars.js';
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   const onActionClick = (): void => {
     console.log('Action button clicked!');
   };

package/front_end/ui/components/spinners/Spinner.ts

@@ -14,7 +14,7 @@ export interface SpinnerProperties {
 }
 
 export class Spinner extends HTMLElement {
-  static readonly observedAttributes = ['active'];
+  static readonly observedAttributes = ['active'] as const;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   constructor(props?: SpinnerProperties) {

package/front_end/ui/components/spinners/Spinners.docs.ts

@@ -8,6 +8,6 @@ import * as Lit from '../../lit/lit.js';
 
 const {html} = Lit;
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   Lit.render(html`<devtools-spinner></devtools-spinner>`, container);
 }

package/front_end/ui/components/srgb_overlay/SrgbOverlay.ts

@@ -9,7 +9,7 @@ import {html, render} from '../../../ui/lit/lit.js';
 
 import srgbOverlayStyles from './srgbOverlay.css.js';
 
-interface SrgbOverlayProps {
+export interface SrgbOverlayProps {
   // [0 - 1] corresponding to HSV hue
   hue: number;
   width: number;

package/front_end/ui/components/suggestion_input/SuggestionInput.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/enforce-custom-element-definitions-location */
 
 import * as CodeHighlighter from '../../../ui/components/code_highlighter/code_highlighter.js';
-import codeHighlighterStyles from '../../../ui/components/code_highlighter/codeHighlighter.css.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -23,8 +22,7 @@ function assert<T>(
   }
 }
 
-const {html, Decorators, Directives, LitElement} = Lit;
-const {customElement, property, state} = Decorators;
+const {html, Directives} = Lit;
 const {classMap} = Directives;
 
 declare global {
@@ -42,7 +40,6 @@ const jsonPropertyOptions = {
   attribute: false,
 };
 
-@customElement('devtools-editable-content')
 class EditableContent extends HTMLElement {
   static get observedAttributes(): string[] {
     return ['disabled', 'placeholder'];
@@ -128,7 +125,7 @@ class SuggestionInitEvent extends Event {
   }
 }
 
-type SuggestionFilter = (option: string, query: string) => boolean;
+export type SuggestionFilter = (option: string, query: string) => boolean;
 
 const defaultSuggestionFilter = (option: string, query: string): boolean =>
     option.toLowerCase().startsWith(query.toLowerCase());
@@ -137,13 +134,19 @@ const defaultSuggestionFilter = (option: string, query: string): boolean =>
  * @fires SuggestionInitEvent#suggestioninit
  * @fires SuggestEvent#suggest
  */
-@customElement('devtools-suggestion-box')
-class SuggestionBox extends LitElement {
-  @property(jsonPropertyOptions) declare options: readonly string[];
-  @property() declare expression: string;
-  @property() declare suggestionFilter?: SuggestionFilter;
+class SuggestionBox extends Lit.LitElement {
+  static override properties: typeof Lit.LitElement.properties = {
+    options: jsonPropertyOptions,
+    expression: {type: String},
+    suggestionFilter: {attribute: false},
+    cursor: {state: true},
+  };
+
+  declare options: readonly string[];
+  declare expression: string;
+  declare suggestionFilter?: SuggestionFilter;
 
-  @state() private declare cursor: number;
+  private declare cursor: number;
 
   #suggestions: string[] = [];
 
@@ -230,30 +233,42 @@ class SuggestionBox extends LitElement {
   }
 }
 
-@customElement('devtools-suggestion-input')
-export class SuggestionInput extends LitElement {
-  static override shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+export class SuggestionInput extends Lit.LitElement {
+  static override shadowRootOptions: ShadowRootInit = {
+    ...Lit.LitElement.shadowRootOptions,
     delegatesFocus: true,
-  } as const;
+  };
+
+  static override properties: typeof Lit.LitElement.properties = {
+    options: jsonPropertyOptions,
+    autocomplete: {type: Boolean},
+    suggestionFilter: {attribute: false},
+    expression: {state: true},
+    placeholder: {type: String},
+    value: {type: String},
+    disabled: {type: Boolean},
+    strikethrough: {type: Boolean},
+    mimeType: {type: String},
+    jslogContext: {type: String},
+  };
 
   /**
    * State passed to devtools-suggestion-box.
    */
-  @property(jsonPropertyOptions) declare options: readonly string[];
-  @property({type: Boolean}) declare autocomplete?: boolean;
-  @property() declare suggestionFilter?: SuggestionFilter;
-  @state() declare expression: string;
+  declare options: readonly string[];
+  declare autocomplete?: boolean;
+  declare suggestionFilter?: SuggestionFilter;
+  declare expression: string;
 
   /**
    * State passed to devtools-editable-content.
    */
-  @property() declare placeholder: string;
-  @property() declare value: string;
-  @property({type: Boolean}) declare disabled: boolean;
-  @property({type: Boolean}) declare strikethrough: boolean;
-  @property() declare mimeType: string;
-  @property() declare jslogContext?: string;
+  declare placeholder: string;
+  declare value: string;
+  declare disabled: boolean;
+  declare strikethrough: boolean;
+  declare mimeType: string;
+  declare jslogContext?: string;
 
   constructor() {
     super();
@@ -338,7 +353,7 @@ export class SuggestionInput extends LitElement {
   protected override render(): Lit.TemplateResult {
     // clang-format off
     return html`<style>${contentEditableStyles}</style>
-      <style>${codeHighlighterStyles}</style>
+      <style>${CodeHighlighter.codeHighlighterStyles}</style>
       <devtools-editable-content
         ?disabled=${this.disabled}
         class=${classMap({
@@ -365,3 +380,7 @@ export class SuggestionInput extends LitElement {
     // clang-format on
   }
 }
+
+customElements.define('devtools-editable-content', EditableContent);
+customElements.define('devtools-suggestion-box', SuggestionBox);
+customElements.define('devtools-suggestion-input', SuggestionInput);

package/front_end/ui/components/switch/Switch.docs.ts

@@ -4,7 +4,7 @@
 
 import {Switch} from './switch.js';
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   function switchExample({checked, disabled}: {checked: boolean, disabled: boolean}): HTMLElement {
     const example = document.createElement('div');
     example.style.marginTop = '20px';

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -33,14 +33,16 @@ export enum AiCodeCompletionTeaserMode {
   ONLY_SHOW_ON_EMPTY = 'onlyShowOnEmpty',
 }
 
-export const setAiCodeCompletionTeaserMode = CodeMirror.StateEffect.define<AiCodeCompletionTeaserMode>();
-
-export const aiCodeCompletionTeaserModeState = CodeMirror.StateField.define<AiCodeCompletionTeaserMode>({
-  create: () => AiCodeCompletionTeaserMode.OFF,
-  update(value, tr) {
-    return tr.effects.find(effect => effect.is(setAiCodeCompletionTeaserMode))?.value ?? value;
-  },
-});
+export const setAiCodeCompletionTeaserMode: CodeMirror.StateEffectType<AiCodeCompletionTeaserMode> =
+    CodeMirror.StateEffect.define<AiCodeCompletionTeaserMode>();
+
+export const aiCodeCompletionTeaserModeState: CodeMirror.StateField<AiCodeCompletionTeaserMode> =
+    CodeMirror.StateField.define<AiCodeCompletionTeaserMode>({
+      create: () => AiCodeCompletionTeaserMode.OFF,
+      update(value, tr) {
+        return tr.effects.find(effect => effect.is(setAiCodeCompletionTeaserMode))?.value ?? value;
+      },
+    });
 
 export interface AiCodeCompletionConfig {
   completionContext: {

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -31,7 +31,8 @@ export enum AiCodeGenerationTeaserMode {
   DISMISSED = 'dismissed',
 }
 
-export const setAiCodeGenerationTeaserMode = CodeMirror.StateEffect.define<AiCodeGenerationTeaserMode>();
+export const setAiCodeGenerationTeaserMode: CodeMirror.StateEffectType<AiCodeGenerationTeaserMode> =
+    CodeMirror.StateEffect.define<AiCodeGenerationTeaserMode>();
 
 const aiCodeGenerationTeaserModeState = CodeMirror.StateField.define<AiCodeGenerationTeaserMode>({
   create: () => AiCodeGenerationTeaserMode.ACTIVE,

package/front_end/ui/components/text_editor/ExecutionPositionHighlighter.ts

@@ -12,7 +12,7 @@ import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.nex
  * view.dispatch({effects: setHighlightedPosition.of(position)});
  * ```
  */
-export const setHighlightedPosition = CodeMirror.StateEffect.define<number>();
+export const setHighlightedPosition: CodeMirror.StateEffectType<number> = CodeMirror.StateEffect.define<number>();
 
 /**
  * The CodeMirror effect used to clear the highlighted execution position.
@@ -22,7 +22,7 @@ export const setHighlightedPosition = CodeMirror.StateEffect.define<number>();
  * view.dispatch({effects: clearHighlightedPosition.of()});
  * ```
  */
-export const clearHighlightedPosition = CodeMirror.StateEffect.define<void>();
+export const clearHighlightedPosition: CodeMirror.StateEffectType<void> = CodeMirror.StateEffect.define<void>();
 
 /**
  * Constructs a CodeMirror extension that can be used to decorate the current execution

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -38,6 +38,20 @@ export class TextEditor extends HTMLElement {
   };
   #devtoolsResizeObserver = new ResizeObserver(this.#resizeListener);
 
+  static get observedAttributes(): string[] {
+    return ['data-file-path'];
+  }
+
+  attributeChangedCallback(name: string, _oldValue: string|null, newValue: string|null): void {
+    if (name === 'data-file-path' && this.#activeEditor) {
+      if (newValue !== null) {
+        this.#activeEditor.dom.setAttribute('data-file-path', newValue);
+      } else {
+        this.#activeEditor.dom.removeAttribute('data-file-path');
+      }
+    }
+  }
+
   constructor(pendingState?: CodeMirror.EditorState) {
     super();
     this.#pendingState = pendingState;
@@ -59,6 +73,11 @@ export class TextEditor extends HTMLElement {
       scrollTo: this.#lastScrollSnapshot,
     });
 
+    const filePath = this.getAttribute('data-file-path');
+    if (filePath) {
+      this.#activeEditor.dom.setAttribute('data-file-path', filePath);
+    }
+
     this.#activeEditor.scrollDOM.addEventListener('scroll', () => {
       if (!this.#activeEditor) {
         return;