chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

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;

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

@@ -37,7 +37,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const empty: CM.Extension = [];
 
-export const dynamicSetting = CM.Facet.define<DynamicSetting<unknown>>();
+export const dynamicSetting: CM.Facet<DynamicSetting<unknown>, ReadonlyArray<DynamicSetting<unknown>>> =
+    CM.Facet.define<DynamicSetting<unknown>>();
 
 // The code below is used to wire up dynamic settings to editors. When
 // you include the result of calling `instance()` in an editor
@@ -46,7 +47,7 @@ export const dynamicSetting = CM.Facet.define<DynamicSetting<unknown>>();
 // appropriate.
 
 export class DynamicSetting<T> {
-  compartment = new CM.Compartment();
+  compartment: CM.Compartment = new CM.Compartment();
   readonly setting: string|Common.Settings.SettingDescriptor<T>;
 
   constructor(
@@ -90,11 +91,12 @@ export class DynamicSetting<T> {
   static none: ReadonlyArray<DynamicSetting<unknown>> = [];
 }
 
-export const tabMovesFocus = DynamicSetting.bool('text-editor-tab-moves-focus', [], CM.keymap.of([{
-  key: 'Tab',
-  run: (view: CM.EditorView) => view.state.doc.length ? CM.indentMore(view) : false,
-  shift: (view: CM.EditorView) => view.state.doc.length ? CM.indentLess(view) : false,
-}]));
+export const tabMovesFocus: DynamicSetting<boolean> =
+    DynamicSetting.bool('text-editor-tab-moves-focus', [], CM.keymap.of([{
+      key: 'Tab',
+      run: (view: CM.EditorView) => view.state.doc.length ? CM.indentMore(view) : false,
+      shift: (view: CM.EditorView) => view.state.doc.length ? CM.indentLess(view) : false,
+    }]));
 
 const disableConservativeCompletion = CM.StateEffect.define();
 
@@ -103,7 +105,7 @@ const disableConservativeCompletion = CM.StateEffect.define();
  * and accepting of completions with Enter until the user selects a
  * completion beyond the initially selected one. Used in the console.
  **/
-export const conservativeCompletion = CM.StateField.define<boolean>({
+export const conservativeCompletion: CM.StateField<boolean> = CM.StateField.define<boolean>({
   create() {
     return true;
   },
@@ -180,36 +182,36 @@ function announceSelectedCompletionInfo(view: CM.EditorView): void {
   UI.ARIAUtils.LiveAnnouncer.alert(ariaMessage);
 }
 
-export const autocompletion = new DynamicSetting<boolean>(
+export const autocompletion: DynamicSetting<boolean> = new DynamicSetting<boolean>(
     'text-editor-autocompletion',
-    (activateOnTyping: boolean) =>
-        [CM.autocompletion({
-          activateOnTyping,
-          icons: false,
-          optionClass: (option: CM.Completion) => option.type === 'secondary' ? 'cm-secondaryCompletion' : '',
-          tooltipClass: (state: CM.EditorState) => {
-            return state.field(conservativeCompletion, false) ? 'cm-conservativeCompletion' : '';
-          },
-          defaultKeymap: false,
-          updateSyncTime: 100,
-        }),
-         CM.Prec.highest(CM.keymap.of([
-           {key: 'End', run: acceptCompletionIfAtEndOfLine},
-           {key: 'ArrowRight', run: acceptCompletionIfAtEndOfLine},
-           {key: 'Ctrl-Space', run: CM.startCompletion},
-           {key: 'Escape', run: CM.closeCompletion},
-           {key: 'ArrowDown', run: moveCompletionSelectionIfNotConservative(true)},
-           {key: 'ArrowUp', run: moveCompletionSelectionBackwardWrapper()},
-           {mac: 'Ctrl-n', run: moveCompletionSelectionIfNotConservative(true)},
-           {mac: 'Ctrl-p', run: moveCompletionSelectionBackwardWrapper()},
-           {key: 'PageDown', run: CM.moveCompletionSelection(true, 'page')},
-           {key: 'PageUp', run: CM.moveCompletionSelection(false, 'page')},
-           {key: 'Enter', run: acceptCompletionIfNotConservative},
-         ]))]);
-
-export const bracketMatching = DynamicSetting.bool('text-editor-bracket-matching', CM.bracketMatching());
-
-export const codeFolding = DynamicSetting.bool('text-editor-code-folding', [
+    (activateOnTyping: boolean) => [CM.autocompletion({
+      activateOnTyping,
+      icons: false,
+      optionClass: (option: CM.Completion) => option.type === 'secondary' ? 'cm-secondaryCompletion' : '',
+      tooltipClass: (state: CM.EditorState) => {
+        return state.field(conservativeCompletion, false) ? 'cm-conservativeCompletion' : '';
+      },
+      defaultKeymap: false,
+      updateSyncTime: 100,
+    }),
+                                    CM.Prec.highest(CM.keymap.of([
+                                      {key: 'End', run: acceptCompletionIfAtEndOfLine},
+                                      {key: 'ArrowRight', run: acceptCompletionIfAtEndOfLine},
+                                      {key: 'Ctrl-Space', run: CM.startCompletion},
+                                      {key: 'Escape', run: CM.closeCompletion},
+                                      {key: 'ArrowDown', run: moveCompletionSelectionIfNotConservative(true)},
+                                      {key: 'ArrowUp', run: moveCompletionSelectionBackwardWrapper()},
+                                      {mac: 'Ctrl-n', run: moveCompletionSelectionIfNotConservative(true)},
+                                      {mac: 'Ctrl-p', run: moveCompletionSelectionBackwardWrapper()},
+                                      {key: 'PageDown', run: CM.moveCompletionSelection(true, 'page')},
+                                      {key: 'PageUp', run: CM.moveCompletionSelection(false, 'page')},
+                                      {key: 'Enter', run: acceptCompletionIfNotConservative},
+                                    ]))]);
+
+export const bracketMatching: DynamicSetting<boolean> =
+    DynamicSetting.bool('text-editor-bracket-matching', CM.bracketMatching());
+
+export const codeFolding: DynamicSetting<boolean> = DynamicSetting.bool('text-editor-code-folding', [
   CM.foldGutter({
     markerDOM(open: boolean): HTMLElement {
       const iconName = open ? 'triangle-down' : 'triangle-right';
@@ -247,7 +249,8 @@ function detectIndentation(doc: CM.Text): string {
   return indentUnit ?? Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
 }
 
-export const autoDetectIndent = DynamicSetting.bool('text-editor-auto-detect-indent', AutoDetectIndent);
+export const autoDetectIndent: DynamicSetting<boolean> =
+    DynamicSetting.bool('text-editor-auto-detect-indent', AutoDetectIndent);
 
 function matcher(decorator: CM.MatchDecorator): CM.Extension {
   return CM.ViewPlugin.define(
@@ -291,17 +294,19 @@ const showTrailingWhitespace = matcher(new CM.MatchDecorator({
   boundary: /\S/,
 }));
 
-export const showWhitespace = new DynamicSetting<string>('show-whitespaces-in-editor', value => {
-  if (value === 'all') {
-    return showAllWhitespace;
-  }
-  if (value === 'trailing') {
-    return showTrailingWhitespace;
-  }
-  return empty;
-});
+export const showWhitespace: DynamicSetting<string> =
+    new DynamicSetting<string>('show-whitespaces-in-editor', value => {
+      if (value === 'all') {
+        return showAllWhitespace;
+      }
+      if (value === 'trailing') {
+        return showTrailingWhitespace;
+      }
+      return empty;
+    });
 
-export const allowScrollPastEof = DynamicSetting.bool('allow-scroll-past-eof', CM.scrollPastEnd());
+export const allowScrollPastEof: DynamicSetting<boolean> =
+    DynamicSetting.bool('allow-scroll-past-eof', CM.scrollPastEnd());
 
 const cachedIndentUnit: Record<string, CM.Extension> = Object.create(null);
 
@@ -313,11 +318,12 @@ function getIndentUnit(indent: string): CM.Extension {
   return value;
 }
 
-export const indentUnit = new DynamicSetting<string>('text-editor-indent', getIndentUnit);
+export const indentUnit: DynamicSetting<string> = new DynamicSetting<string>('text-editor-indent', getIndentUnit);
 
-export const domWordWrap = DynamicSetting.bool('dom-word-wrap', CM.EditorView.lineWrapping);
+export const domWordWrap: DynamicSetting<boolean> = DynamicSetting.bool('dom-word-wrap', CM.EditorView.lineWrapping);
 
-export const sourcesWordWrap = DynamicSetting.bool('sources.word-wrap', CM.EditorView.lineWrapping);
+export const sourcesWordWrap: DynamicSetting<boolean> =
+    DynamicSetting.bool('sources.word-wrap', CM.EditorView.lineWrapping);
 
 function detectLineSeparator(text: string): CM.Extension {
   if (/\r\n/.test(text) && !/(^|[^\r])\n/.test(text)) {
@@ -344,8 +350,8 @@ function themeIsDark(): boolean {
   return setting === 'systemPreferred' ? window.matchMedia('(prefers-color-scheme: dark)').matches : setting === 'dark';
 }
 
-export const dummyDarkTheme = CM.EditorView.theme({}, {dark: true});
-export const themeSelection = new CM.Compartment();
+export const dummyDarkTheme: CM.Extension = CM.EditorView.theme({}, {dark: true});
+export const themeSelection: CM.Compartment = new CM.Compartment();
 
 export function theme(): CM.Extension {
   return [editorTheme, themeIsDark() ? themeSelection.of(dummyDarkTheme) : themeSelection.of([])];
@@ -385,7 +391,7 @@ export function baseConfiguration(text: string|CM.Text): CM.Extension {
   ];
 }
 
-export const closeBrackets = DynamicSetting.bool('text-editor-bracket-closing', [
+export const closeBrackets: DynamicSetting<boolean> = DynamicSetting.bool('text-editor-bracket-closing', [
   CM.html.autoCloseTags,
   CM.closeBrackets(),
   CM.keymap.of(CM.closeBracketsKeymap),
@@ -448,7 +454,7 @@ class CompletionHint extends CM.WidgetType {
   }
 }
 
-export const showCompletionHint = CM.ViewPlugin.fromClass(class {
+export class CompletionHintPlugin {
   decorations: CM.DecorationSet = CM.Decoration.none;
   currentHint: string|null = null;
 
@@ -489,7 +495,12 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
     }
     return label.slice(partBefore ? partBefore[0].length : 0);
   }
-}, {decorations: p => p.decorations});
+}
+
+export const showCompletionHint: CM.ViewPlugin<CompletionHintPlugin> = CM.ViewPlugin.fromClass(
+    CompletionHintPlugin,
+    {decorations: p => p.decorations},
+);
 
 export function contentIncludingHint(view: CM.EditorView): string {
   const plugin = view.plugin(showCompletionHint);
@@ -501,7 +512,8 @@ export function contentIncludingHint(view: CM.EditorView): string {
   return content;
 }
 
-export const setAiAutoCompleteSuggestion = CM.StateEffect.define<ActiveSuggestion|null>();
+export const setAiAutoCompleteSuggestion: CM.StateEffectType<ActiveSuggestion|null> =
+    CM.StateEffect.define<ActiveSuggestion|null>();
 
 export const enum AiSuggestionSource {
   COMPLETION = 'completion',
@@ -519,52 +531,53 @@ export interface ActiveSuggestion {
   source: AiSuggestionSource;
 }
 
-export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggestion|null>({
-  create: () => null,
-  update(value, tr) {
-    for (const effect of tr.effects) {
-      if (effect.is(setAiAutoCompleteSuggestion)) {
-        if (effect.value) {
-          return effect.value;
+export const aiAutoCompleteSuggestionState: CM.StateField<ActiveSuggestion|null> =
+    CM.StateField.define<ActiveSuggestion|null>({
+      create: () => null,
+      update(value, tr) {
+        for (const effect of tr.effects) {
+          if (effect.is(setAiAutoCompleteSuggestion)) {
+            if (effect.value) {
+              return effect.value;
+            }
+            value?.clearCachedRequest?.();
+            return null;
+          }
         }
-        value?.clearCachedRequest?.();
-        return null;
-      }
-    }
 
-    if (!value) {
-      return value;
-    }
+        if (!value) {
+          return value;
+        }
 
-    // A suggestion from an effect can be stale if the document was changed
-    // between when the request was sent and the response was received.
-    // We check if the position is still valid before trying to map it.
-    if (value.from > tr.state.doc.length) {
-      value.clearCachedRequest?.();
-      return null;
-    }
+        // A suggestion from an effect can be stale if the document was changed
+        // between when the request was sent and the response was received.
+        // We check if the position is still valid before trying to map it.
+        if (value.from > tr.state.doc.length) {
+          value.clearCachedRequest?.();
+          return null;
+        }
 
-    // If deletion occurs, set to null. Otherwise, the mapping might fail if
-    // the position is inside the deleted range.
-    if (tr.docChanged && tr.state.doc.length < tr.startState.doc.length) {
-      value.clearCachedRequest?.();
-      return null;
-    }
+        // If deletion occurs, set to null. Otherwise, the mapping might fail if
+        // the position is inside the deleted range.
+        if (tr.docChanged && tr.state.doc.length < tr.startState.doc.length) {
+          value.clearCachedRequest?.();
+          return null;
+        }
 
-    const from = tr.changes.mapPos(value.from);
-    const {head} = tr.state.selection.main;
+        const from = tr.changes.mapPos(value.from);
+        const {head} = tr.state.selection.main;
 
-    // If a change happened before the position from which suggestion was generated, set to null.
-    if (tr.docChanged && head < from) {
-      value.clearCachedRequest?.();
-      return null;
-    }
+        // If a change happened before the position from which suggestion was generated, set to null.
+        if (tr.docChanged && head < from) {
+          value.clearCachedRequest?.();
+          return null;
+        }
 
-    // Check if what's typed after the AI suggestion is a prefix of the AI suggestion.
-    const typedText = tr.state.doc.sliceString(from, head);
-    return value.text.startsWith(typedText) ? value : null;
-  },
-});
+        // Check if what's typed after the AI suggestion is a prefix of the AI suggestion.
+        const typedText = tr.state.doc.sliceString(from, head);
+        return value.text.startsWith(typedText) ? value : null;
+      },
+    });
 
 export function hasActiveAiSuggestion(state: CM.EditorState): boolean {
   return state.field(aiAutoCompleteSuggestionState) !== null;

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

@@ -5,7 +5,7 @@
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 
 export type ArgumentHintsTooltip = [CodeMirror.StateField<CodeMirror.Tooltip|null>, CodeMirror.ViewPlugin<object>];
-export const closeTooltip = CodeMirror.StateEffect.define<null>();
+export const closeTooltip: CodeMirror.StateEffectType<null> = CodeMirror.StateEffect.define<null>();
 
 export function cursorTooltip(
     source: (state: CodeMirror.EditorState, pos: number) => Promise<(() => CodeMirror.TooltipView)|null>,

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

@@ -4,7 +4,7 @@
 
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 
-export const editorTheme = CM.EditorView.theme({
+export const editorTheme: CM.Extension = CM.EditorView.theme({
   '&.cm-editor': {
     color: 'color: var(--sys-color-on-subtle)',
     cursor: 'auto',

package/front_end/ui/components/tooltips/Tooltip.docs.ts

@@ -8,7 +8,7 @@ import {Tooltip} from './tooltips.js';
 
 const {html} = Lit;
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   Lit.render(
       html`
     <div style="position: relative; z-index: 0;">

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -228,7 +228,7 @@ export interface TooltipProperties {
  *                  as well, `"trigger"` takes precedence.
  */
 export class Tooltip extends HTMLElement {
-  static readonly observedAttributes = ['id', 'variant', 'jslogcontext', 'trigger'];
+  static readonly observedAttributes = ['id', 'variant', 'jslogcontext', 'trigger'] as const;
   static lastOpenedTooltipId: string|null = null;
 
   readonly #shadow = this.attachShadow({mode: 'open'});

package/front_end/ui/components/tree_outline/TreeOutlineUtils.ts

@@ -64,7 +64,10 @@ class TrackDOMNodeToTreeNode extends Lit.Directive.Directive {
   }
 }
 
-export const trackDOMNodeToTreeNode = Lit.Directive.directive(TrackDOMNodeToTreeNode);
+export const trackDOMNodeToTreeNode: <TreeNodeDataType>(
+    weakmap: WeakMap<HTMLLIElement, TreeNode<TreeNodeDataType>>,
+    treeNode: TreeNode<TreeNodeDataType>,
+    ) => Lit.DirectiveResult<typeof TrackDOMNodeToTreeNode> = Lit.Directive.directive(TrackDOMNodeToTreeNode);
 
 /**
  * Finds the next sibling of the node's parent, recursing up the tree if

package/front_end/ui/kit/cards/Card.ts

@@ -44,7 +44,7 @@ import cardStyles from './card.css.js';
  * @attribute heading - The heading text.
  */
 export class Card extends HTMLElement {
-  static readonly observedAttributes = ['heading'];
+  static readonly observedAttributes: string[] = ['heading'];
 
   readonly #shadow = this.attachShadow({mode: 'open'});
 

package/front_end/ui/kit/icons/Icon.ts

@@ -68,7 +68,7 @@ export type IconData = IconWithName|{
  *              should not be used in newly written code.
  */
 export class Icon extends HTMLElement {
-  static readonly observedAttributes = ['name'];
+  static readonly observedAttributes: string[] = ['name'];
 
   readonly #shadowRoot;
   readonly #icon;

package/front_end/ui/kit/link/Link.docs.ts

@@ -8,7 +8,7 @@ import * as Lit from '../../lit/lit.js';
 
 const {html} = Lit;
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   // We should stop the click as we have the wiring only in a
   // full DevTools env
   Lit.render(html`<devtools-link @click=${(ev: Event) => ev.consume()}>I am a link</devtools-link>`, container);

package/front_end/ui/kit/link/Link.ts

@@ -32,7 +32,7 @@ import linkStyles from './link.css.js';
 export class Link extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
-  static readonly observedAttributes = ['href', 'jslogcontext'];
+  static readonly observedAttributes: string[] = ['href', 'jslogcontext'];
 
   connectedCallback(): void {
     if (!this.hasAttribute('tabindex')) {

package/front_end/ui/legacy/ContextMenu.docs.ts

@@ -8,7 +8,7 @@ import {ContextMenu} from './legacy.js';
 
 const {html} = Lit;
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   const menuDocs = container.createChild('div', 'menu-docs');
   const style = document.createElement('style');
   style.textContent = `

package/front_end/ui/legacy/Dialog.ts

@@ -27,7 +27,11 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/Dialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof GlassPane>(GlassPane) {
+const DialogBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof GlassPane> = Common.ObjectWrapper.eventMixin(
+    GlassPane,
+);
+
+export class Dialog extends DialogBase {
   private tabIndexBehavior = OutsideTabIndexBehavior.DISABLE_ALL_OUTSIDE_TAB_INDEX;
   private tabIndexMap = new Map<HTMLElement, number>();
   private focusRestorer: WidgetFocusRestorer|null = null;
@@ -253,7 +257,11 @@ export const enum OutsideTabIndexBehavior {
   PRESERVE_TAB_INDEX = 'PreserveTabIndex',
 }
 
-export class DialogWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
+const DialogWidgetBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof Widget> = Common.ObjectWrapper.eventMixin(
+    Widget,
+);
+
+export class DialogWidget extends DialogWidgetBase {
   #open = false;
   #jslogContext = '';
   #dialogStack = false;

package/front_end/ui/legacy/FilterBar.ts

@@ -44,7 +44,12 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/FilterBar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTypes, typeof HBox>(HBox) {
+const FilterBarBase: Common.ObjectWrapper.EventMixin<FilterBarEventTypes, typeof HBox> =
+    Common.ObjectWrapper.eventMixin(
+        HBox,
+    );
+
+export class FilterBar extends FilterBarBase {
   private enabled: boolean;
   private readonly stateSetting: Common.Settings.Setting<boolean>;
   readonly #filterButton: ToolbarSettingToggle;

package/front_end/ui/legacy/RadioButton.docs.ts

@@ -4,7 +4,7 @@
 
 import {UIUtils} from './legacy.js';
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   const styleElement = document.createElement('style');
   styleElement.textContent = 'fieldset { label { display: block; } }';
   container.appendChild(styleElement);

package/front_end/ui/legacy/SelectMenu.docs.ts

@@ -9,7 +9,7 @@ import {UIUtils} from './legacy.js';
 
 const {html} = Lit;
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   function createDivWithP(text: string): HTMLDivElement {
     const div = document.createElement('div');
     div.style.paddingLeft = '25px';

package/front_end/ui/legacy/Slider.docs.ts

@@ -4,7 +4,7 @@
 
 import {UIUtils} from './legacy.js';
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   function sliderExample({min, max, tabIndex, disabled}: {
     min: number,
     max: number,

package/front_end/ui/legacy/SplitWidget.ts

@@ -16,7 +16,11 @@ import {ToolbarButton} from './Toolbar.js';
 import {type AnyWidget, registerWidgetConfig, Widget, widgetConfig, WidgetElement} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
-export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
+const SplitWidgetBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof Widget> = Common.ObjectWrapper.eventMixin(
+    Widget,
+);
+
+export class SplitWidget extends SplitWidgetBase {
   #sidebarElement: HTMLElement;
   #mainElement: HTMLElement;
   #resizerElement: HTMLElement;

package/front_end/ui/legacy/TabbedPane.ts

@@ -79,7 +79,11 @@ export interface TabInfo {
   selected?: boolean;
 }
 
-export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof VBox>(VBox) {
+const TabbedPaneBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof VBox> = Common.ObjectWrapper.eventMixin(
+    VBox,
+);
+
+export class TabbedPane extends TabbedPaneBase {
   readonly #headerElement: HTMLElement;
   protected readonly headerContentsElement: HTMLElement;
   tabSlider: HTMLDivElement;

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -208,7 +208,12 @@ function getColorFromHsva(gamut: SpectrumGamut, hsva: Common.ColorUtils.Color4D)
   }
 }
 
-export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const SpectrumBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class Spectrum extends SpectrumBase {
   #color?: Common.Color.Color;
   private gamut: SpectrumGamut = SpectrumGamut.SRGB;
   private colorElement: HTMLElement;

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -11,8 +11,12 @@ import {type DataGridData, DataGridImpl, DataGridNode, Events as DataGridEvents,
 
 let nextId = 0;
 
-export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTypes, typeof DataGridImpl>(
-    DataGridImpl)<ViewportDataGridNode<T>> {
+const ViewportDataGridBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof DataGridImpl> =
+    Common.ObjectWrapper.eventMixin(
+        DataGridImpl,
+    );
+
+export class ViewportDataGrid<T> extends ViewportDataGridBase<ViewportDataGridNode<T>> {
   private readonly onScrollBound: (event: Event|null) => void;
   private visibleNodes: Array<ViewportDataGridNode<T>>;
   /**