chrome-devtools-frontend 1.0.941095 → 1.0.943017

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

@@ -31,24 +31,35 @@ export const dynamicSetting = CM.Facet.define<DynamicSetting<unknown>>();
 
 export class DynamicSetting<T> {
   compartment = new CM.Compartment();
-  extension: CM.Extension;
 
   constructor(
       readonly settingName: string,
-      private readonly getExtension: (value: T, state: CM.EditorState) => CM.Extension,
+      private readonly getExtension: (value: T) => CM.Extension,
   ) {
-    this.extension = [this.compartment.of(empty), dynamicSetting.of(this as DynamicSetting<unknown>)];
+  }
+
+  settingValue(): T {
+    return Common.Settings.Settings.instance().moduleSetting(this.settingName).get() as T;
+  }
+
+  instance(): CM.Extension {
+    return [
+      this.compartment.of(this.getExtension(this.settingValue())),
+      dynamicSetting.of(this as DynamicSetting<unknown>),
+    ];
   }
 
   sync(state: CM.EditorState, value: T): CM.StateEffect<unknown>|null {
     const cur = this.compartment.get(state);
-    const needed = this.getExtension(value, state);
+    const needed = this.getExtension(value);
     return cur === needed ? null : this.compartment.reconfigure(needed);
   }
 
   static bool(name: string, enabled: CM.Extension, disabled: CM.Extension = empty): DynamicSetting<boolean> {
     return new DynamicSetting<boolean>(name, val => val ? enabled : disabled);
   }
+
+  static none: readonly DynamicSetting<unknown>[] = [];
 }
 
 export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.keymap.of([{
@@ -82,23 +93,15 @@ export function guessIndent(doc: CM.Text): string {
     values[space] = (values[space] || 0) + 1;
   }
   const minOccurrence = scanned * 0.05;
-  const sorted = Object.entries(values).filter(e => e[1] > minOccurrence).sort((a, b) => a[1] - b[1]);
-  return sorted.length ? sorted[0][0] : Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
+  const shortest = Object.entries(values).reduce((shortest, [string, count]): string|null => {
+    return count < minOccurrence || shortest && shortest.length < string.length ? shortest : string;
+  }, null as string | null);
+  return shortest ?? Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
 }
 
-const cachedIndentUnit: {[indent: string]: CM.Extension} = Object.create(null);
+const deriveIndentUnit = CM.Prec.highest(CM.indentUnit.compute([], (state: CM.EditorState) => guessIndent(state.doc)));
 
-function getIndentUnit(indent: string): CM.Extension {
-  let value = cachedIndentUnit[indent];
-  if (!value) {
-    value = cachedIndentUnit[indent] = CM.indentUnit.of(indent);
-  }
-  return value;
-}
-
-export const autoDetectIndent = new DynamicSetting<boolean>('textEditorAutoDetectIndent', (on, state) => {
-  return on ? CM.Prec.override(getIndentUnit(guessIndent(state.doc))) : empty;
-});
+export const autoDetectIndent = DynamicSetting.bool('textEditorAutoDetectIndent', deriveIndentUnit);
 
 function matcher(decorator: CM.MatchDecorator): CM.Extension {
   return CM.ViewPlugin.define(
@@ -154,6 +157,16 @@ export const showWhitespace = new DynamicSetting<string>('showWhitespacesInEdito
 
 export const allowScrollPastEof = DynamicSetting.bool('allowScrollPastEof', CM.scrollPastEnd());
 
+const cachedIndentUnit: {[indent: string]: CM.Extension} = Object.create(null);
+
+function getIndentUnit(indent: string): CM.Extension {
+  let value = cachedIndentUnit[indent];
+  if (!value) {
+    value = cachedIndentUnit[indent] = CM.indentUnit.of(indent);
+  }
+  return value;
+}
+
 export const indentUnit = new DynamicSetting<string>('textEditorIndent', getIndentUnit);
 
 export const domWordWrap = DynamicSetting.bool('domWordWrap', CM.EditorView.lineWrapping);
@@ -184,22 +197,25 @@ function themeIsDark(): boolean {
 
 const dummyDarkTheme = CM.EditorView.theme({}, {dark: true});
 
+export function theme(): CM.Extension {
+  return [editorTheme, themeIsDark() ? dummyDarkTheme : []];
+}
+
 export function baseConfiguration(text: string): CM.Extension {
   return [
-    editorTheme,
-    themeIsDark() ? dummyDarkTheme : [],
+    theme(),
     CM.highlightSpecialChars(),
     CM.history(),
     CM.drawSelection(),
     CM.EditorState.allowMultipleSelections.of(true),
     CM.indentOnInput(),
-    CodeHighlighter.CodeHighlighter.getHighlightStyle(CM),
+    CodeHighlighter.CodeHighlighter.highlightStyle,
     CM.closeBrackets(),
     baseKeymap,
-    tabMovesFocus,
-    bracketMatching,
-    indentUnit,
-    CM.Prec.fallback(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
+    tabMovesFocus.instance(),
+    bracketMatching.instance(),
+    indentUnit.instance(),
+    CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     detectLineSeparator(text),
     autocompletion,
     CM.tooltips({parent: getTooltipHost() as unknown as HTMLElement}),
@@ -221,7 +237,7 @@ function getTooltipHost(): ShadowRoot {
                                extensions: [
                                  editorTheme,
                                  themeIsDark() ? dummyDarkTheme : [],
-                                 CodeHighlighter.CodeHighlighter.getHighlightStyle(CM),
+                                 CodeHighlighter.CodeHighlighter.highlightStyle,
                                  CM.showTooltip.of({
                                    pos: 0,
                                    create() {

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

@@ -9,9 +9,8 @@ import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.nex
 import * as UI from '../../legacy/legacy.js';
 import {cursorTooltip} from './cursor_tooltip.js';
 
-export async function completion(): Promise<CodeMirror.Extension> {
-  const {javascriptLanguage} = await CodeMirror.javascript();
-  return javascriptLanguage.data.of({
+export function completion(): CodeMirror.Extension {
+  return CodeMirror.javascript.javascriptLanguage.data.of({
     autocomplete: javascriptCompletionSource,
   });
 }

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

@@ -0,0 +1,17 @@
+// Copyright 2021 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.
+
+import type * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+
+export function toOffset(
+    doc: CodeMirror.Text, {lineNumber, columnNumber}: {lineNumber: number, columnNumber: number}): number {
+  const line = doc.line(Math.max(1, Math.min(doc.lines, lineNumber + 1)));
+  return Math.max(line.from, Math.min(line.to, line.from + columnNumber));
+}
+
+export function toLineColumn(doc: CodeMirror.Text, offset: number): {lineNumber: number, columnNumber: number} {
+  offset = Math.max(0, Math.min(offset, doc.length));
+  const line = doc.lineAt(offset);
+  return {lineNumber: line.number - 1, columnNumber: offset - line.from};
+}

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

@@ -4,4 +4,5 @@
 
 export * as Config from './config.js';
 export * as JavaScript from './javascript.js';
+export * as Position from './position.js';
 export * as TextEditor from './TextEditor.js';

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

@@ -52,6 +52,10 @@ export const editorTheme = CM.EditorView.theme({
     backgroundColor: 'var(--color-background)',
   },
 
+  '.cm-lineNumbers': {
+    overflow: 'visible',
+    minWidth: '40px',
+  },
   '.cm-lineNumbers .cm-gutterElement': {
     color: 'var(--color-line-number)',
     padding: '0 3px 0 9px',
@@ -74,7 +78,7 @@ export const editorTheme = CM.EditorView.theme({
   },
 
   '.cm-trailingWhitespace': {
-    backgroundColor: 'var(--color-error-text)',
+    backgroundColor: 'var(--color-trailing-whitespace)',
   },
 
   '.cm-highlightedTab': {

package/front_end/ui/legacy/Dialog.ts

@@ -39,6 +39,8 @@ import type {DevToolsCloseButton} from './UIUtils.js';
 import type {WidgetElement} from './Widget.js';
 import {WidgetFocusRestorer} from './Widget.js';
 
+import dialogStyles from './dialog.css.legacy.js';
+
 export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof GlassPane>(GlassPane) {
   private tabIndexBehavior: OutsideTabIndexBehavior;
   private tabIndexMap: Map<HTMLElement, number>;
@@ -50,7 +52,7 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
 
   constructor() {
     super();
-    this.registerRequiredCSS('ui/legacy/dialog.css');
+    this.registerRequiredCSS(dialogStyles);
     this.contentElement.tabIndex = 0;
     this.contentElement.addEventListener('focus', () => this.widget().focus(), false);
     this.widget().setDefaultFocusedElement(this.contentElement);

package/front_end/ui/legacy/DropTarget.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import dropTargetStyles from './dropTarget.css.legacy.js';
 import * as Utils from './utils/utils.js';
 
 export class DropTarget {
@@ -71,7 +72,7 @@ export class DropTarget {
     }
     this.dragMaskElement = this.element.createChild('div', '');
     const shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.dragMaskElement, {cssFile: 'ui/legacy/dropTarget.css', delegatesFocus: undefined});
+        this.dragMaskElement, {cssFile: dropTargetStyles, delegatesFocus: undefined});
     shadowRoot.createChild('div', 'drop-target-message').textContent = this.messageText;
     this.dragMaskElement.addEventListener('drop', this.onDrop.bind(this), true);
     this.dragMaskElement.addEventListener('dragleave', this.onDragLeave.bind(this), true);

package/front_end/ui/legacy/EmptyWidget.ts

@@ -30,6 +30,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 
+import emptyWidgetStyles from './emptyWidget.css.legacy.js';
 import {VBox} from './Widget.js';
 import {XLink} from './XLink.js';
 
@@ -47,7 +48,7 @@ export class EmptyWidget extends VBox {
 
   constructor(text: string) {
     super();
-    this.registerRequiredCSS('ui/legacy/emptyWidget.css');
+    this.registerRequiredCSS(emptyWidgetStyles);
     this.element.classList.add('empty-view-scroller');
     this.contentElement = this.element.createChild('div', 'empty-view') as HTMLDivElement;
     this.textElement = this.contentElement.createChild('div', 'empty-bold-text');

package/front_end/ui/legacy/FilterBar.ts

@@ -43,6 +43,7 @@ import {ToolbarSettingToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {CheckboxLabel, createTextChild} from './UIUtils.js';
 import {HBox} from './Widget.js';
+import filterStyles from './filter.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -79,7 +80,7 @@ export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTyp
 
   constructor(name: string, visibleByDefault?: boolean) {
     super();
-    this.registerRequiredCSS('ui/legacy/filter.css');
+    this.registerRequiredCSS(filterStyles);
     this.enabled = true;
     this.element.classList.add('filter-bar');
 

package/front_end/ui/legacy/GlassPane.ts

@@ -10,6 +10,7 @@ import {Icon} from './Icon.js';
 import {deepElementFromEvent} from './UIUtils.js';
 import type {WidgetElement} from './Widget.js';
 import {Widget} from './Widget.js';
+import glassPaneStyles from './glassPane.css.legacy.js';
 
 export class GlassPane {
   private readonly widgetInternal: Widget;
@@ -36,7 +37,7 @@ export class GlassPane {
       this.element.shadowRoot.appendChild(this.arrowElement);
     }
 
-    this.registerRequiredCSS('ui/legacy/glassPane.css');
+    this.registerRequiredCSS(glassPaneStyles);
     this.setPointerEventsBehavior(PointerEventsBehavior.PierceGlassPane);
 
     this.onMouseDownBound = this.onMouseDown.bind(this);
@@ -54,7 +55,8 @@ export class GlassPane {
     return this.widgetInternal.isShowing();
   }
 
-  registerRequiredCSS(cssFile: string): void {
+  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.widgetInternal.registerRequiredCSS(cssFile);
   }
 

package/front_end/ui/legacy/Infobar.ts

@@ -10,6 +10,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import {Keys} from './KeyboardShortcut.js';
 import {createTextButton} from './UIUtils.js';
 import type {Widget} from './Widget.js';
+import infobarStyles from './infobar.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -46,9 +47,7 @@ export class Infobar {
   private readonly closeContainer: HTMLElement;
   private readonly toggleElement: HTMLButtonElement;
   private readonly closeButton: HTMLElement;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private closeCallback: (() => any)|null;
+  private closeCallback: (() => void)|null;
   private parentView?: Widget;
 
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -56,8 +55,8 @@ export class Infobar {
   constructor(type: Type, text: string, actions?: InfobarAction[], disableSetting?: Common.Settings.Setting<any>) {
     this.element = document.createElement('div');
     this.element.classList.add('flex-none');
-    this.shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.element, {cssFile: 'ui/legacy/infobar.css', delegatesFocus: undefined});
+    this.shadowRoot =
+        Utils.createShadowRootWithCoreStyles(this.element, {cssFile: infobarStyles, delegatesFocus: undefined});
 
     this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type) as HTMLDivElement;
 
@@ -160,9 +159,7 @@ export class Infobar {
     this.onResize();
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setCloseCallback(callback: (() => any)|null): void {
+  setCloseCallback(callback: (() => void)|null): void {
     this.closeCallback = callback;
   }
 

package/front_end/ui/legacy/InspectorView.ts

@@ -52,6 +52,7 @@ import {ViewManager} from './ViewManager.js';
 import type {Widget} from './Widget.js';
 import {VBox, WidgetFocusRestorer} from './Widget.js';
 import * as ARIAUtils from './ARIAUtils.js';
+import inspectorViewTabbedPaneStyles from './inspectorViewTabbedPane.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -167,7 +168,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
 
     this.tabbedPane = this.tabbedLocation.tabbedPane();
     this.tabbedPane.element.classList.add('main-tabbed-pane');
-    this.tabbedPane.registerRequiredCSS('ui/legacy/inspectorViewTabbedPane.css');
+    this.tabbedPane.registerRequiredCSS(inspectorViewTabbedPaneStyles);
     this.tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
     this.tabbedPane.setAccessibleName(i18nString(UIStrings.panels));
     this.tabbedPane.setTabDelegate(this.tabDelegate);
@@ -210,6 +211,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     return inspectorViewInstance;
   }
 
+  static maybeGetInspectorViewInstance(): InspectorView|undefined {
+    return inspectorViewInstance;
+  }
+
   wasShown(): void {
     this.element.ownerDocument.addEventListener('keydown', this.keyDownBound, false);
   }

package/front_end/ui/legacy/ListWidget.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import listWidgetStyles from './listWidget.css.legacy.js';
 import {Toolbar, ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {createInput, createTextButton, ElementFocusRestorer} from './UIUtils.js';
@@ -49,7 +50,7 @@ export class ListWidget<T> extends VBox {
   private emptyPlaceholder: Element|null;
   constructor(delegate: Delegate<T>, delegatesFocus: boolean|undefined = true) {
     super(true, delegatesFocus);
-    this.registerRequiredCSS('ui/legacy/listWidget.css');
+    this.registerRequiredCSS(listWidgetStyles);
     this.delegate = delegate;
 
     this.list = this.contentElement.createChild('div', 'list');

package/front_end/ui/legacy/PopoverHelper.ts

@@ -29,6 +29,7 @@
  */
 
 import {GlassPane, MarginBehavior, SizeBehavior} from './GlassPane.js';
+import popoverStyles from './popover.css.legacy.js';
 
 export class PopoverHelper {
   private disableOnClick: boolean;
@@ -189,7 +190,7 @@ export class PopoverHelper {
 
   private showPopover(document: Document): void {
     const popover = new GlassPane();
-    popover.registerRequiredCSS('ui/legacy/popover.css');
+    popover.registerRequiredCSS(popoverStyles);
     popover.setSizeBehavior(SizeBehavior.MeasureContent);
     popover.setMarginBehavior(MarginBehavior.Arrow);
     const request = this.scheduledRequest;

package/front_end/ui/legacy/ProgressIndicator.ts

@@ -30,6 +30,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as Utils from './utils/utils.js';
+import progressIndicatorStyles from './progressIndicator.css.legacy.js';
 
 export class ProgressIndicator implements Common.Progress.Progress {
   element: HTMLDivElement;
@@ -46,7 +47,7 @@ export class ProgressIndicator implements Common.Progress.Progress {
     this.element = document.createElement('div');
     this.element.classList.add('progress-indicator');
     this.shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.element, {cssFile: 'ui/legacy/progressIndicator.css', delegatesFocus: undefined});
+        this.element, {cssFile: progressIndicatorStyles, delegatesFocus: undefined});
     this.contentElement = this.shadowRoot.createChild('div', 'progress-indicator-shadow-container');
 
     this.labelElement = this.contentElement.createChild('div', 'title');

package/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts

@@ -6,6 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 
 import {Dialog} from './Dialog.js';
 import {SizeBehavior} from './GlassPane.js';
+import remoteDebuggingTerminatedScreenStyles from './remoteDebuggingTerminatedScreen.css.legacy.js';
 import {createTextButton, formatLocalized} from './UIUtils.js';
 import {VBox} from './Widget.js';
 
@@ -30,7 +31,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class RemoteDebuggingTerminatedScreen extends VBox {
   constructor(reason: string) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/remoteDebuggingTerminatedScreen.css');
+    this.registerRequiredCSS(remoteDebuggingTerminatedScreenStyles);
     const message = this.contentElement.createChild('div', 'message');
     const reasonElement = message.createChild('span', 'reason');
     reasonElement.textContent = reason;

package/front_end/ui/legacy/ReportView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as ARIAUtils from './ARIAUtils.js';
+import reportViewStyles from './reportView.css.legacy.js';
 import {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {VBox} from './Widget.js';
@@ -20,7 +21,7 @@ export class ReportView extends VBox {
   private urlElement?: HTMLElement;
   constructor(title?: string) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/reportView.css');
+    this.registerRequiredCSS(reportViewStyles);
 
     this.contentBox = this.contentElement.createChild('div', 'report-content-box');
     this.headerElement = this.contentBox.createChild('div', 'report-header vbox');

package/front_end/ui/legacy/RootView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import rootViewStyles from './rootView.css.legacy.js';
 import {VBox} from './Widget.js';
 import {ZoomManager} from './ZoomManager.js';
 
@@ -11,7 +12,7 @@ export class RootView extends VBox {
     super();
     this.markAsRoot();
     this.element.classList.add('root-view');
-    this.registerRequiredCSS('ui/legacy/rootView.css');
+    this.registerRequiredCSS(rootViewStyles);
     this.element.setAttribute('spellcheck', 'false');
   }
 

package/front_end/ui/legacy/SearchableView.ts

@@ -39,6 +39,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {HistoryInput} from './HistoryInput.js';
 import {InspectorView} from './InspectorView.js';
+import searchableViewStyles from './searchableView.css.legacy.js';
 import {Toolbar, ToolbarButton, ToolbarToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {createTextButton} from './UIUtils.js';
@@ -123,7 +124,7 @@ export class SearchableView extends VBox {
 
   constructor(searchable: Searchable, replaceable: Replaceable|null, settingName?: string) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/searchableView.css');
+    this.registerRequiredCSS(searchableViewStyles);
     searchableViewsByElement.set(this.element, this);
 
     this.searchProvider = searchable;

package/front_end/ui/legacy/ShortcutRegistry.ts

@@ -144,27 +144,31 @@ export class ShortcutRegistry {
     return this.devToolsDefaultShortcutActions.has(actionId);
   }
 
-  addShortcutListener(element: Element, handlers: {
-    [x: string]: () => Promise<boolean>,
-  }): (arg0: Event) => void {
+  getShortcutListener(handlers: {[x: string]: () => Promise<boolean>}): (event: KeyboardEvent) => void {
+    const shortcuts = Object.keys(handlers).flatMap(action => [...this.actionToShortcut.get(action)]);
     // We only want keys for these specific actions to get handled this
     // way; all others should be allowed to bubble up.
     const allowlistKeyMap = new ShortcutTreeNode(0, 0);
-    const shortcuts = Object.keys(handlers).flatMap(action => [...this.actionToShortcut.get(action)]);
     shortcuts.forEach(shortcut => {
       allowlistKeyMap.addKeyMapping(shortcut.descriptors.map(descriptor => descriptor.key), shortcut.action);
     });
 
-    const listener = (event: Event): void => {
-      const key = KeyboardShortcut.makeKeyFromEvent((event as KeyboardEvent));
+    return (event: KeyboardEvent): void => {
+      const key = KeyboardShortcut.makeKeyFromEvent(event);
       const keyMap = this.activePrefixKey ? allowlistKeyMap.getNode(this.activePrefixKey.key()) : allowlistKeyMap;
       if (!keyMap) {
         return;
       }
       if (keyMap.getNode(key)) {
-        this.handleShortcut((event as KeyboardEvent), handlers);
+        this.handleShortcut(event, handlers);
       }
     };
+  }
+
+  addShortcutListener(element: Element, handlers: {
+    [x: string]: () => Promise<boolean>,
+  }): (arg0: Event) => void {
+    const listener = this.getShortcutListener(handlers) as (event: Event) => void;
     element.addEventListener('keydown', listener);
     return listener;
   }

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -37,6 +37,7 @@ import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior, SizeBe
 import {Icon} from './Icon.js';
 import * as ThemeSupport from './theme_support/theme_support.js';  // eslint-disable-line rulesdir/es_modules_import
 import {createTextChild, ElementFocusRestorer} from './UIUtils.js';
+import softContextMenuStyles from './softContextMenu.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -101,7 +102,7 @@ export class SoftContextMenu {
     this.glassPane = new GlassPane();
     this.glassPane.setPointerEventsBehavior(
         this.parentMenu ? PointerEventsBehavior.PierceGlassPane : PointerEventsBehavior.BlockedByGlassPane);
-    this.glassPane.registerRequiredCSS('ui/legacy/softContextMenu.css');
+    this.glassPane.registerRequiredCSS(softContextMenuStyles);
     this.glassPane.setContentAnchorBox(anchorBox);
     this.glassPane.setSizeBehavior(SizeBehavior.MeasureContent);
     this.glassPane.setMarginBehavior(MarginBehavior.NoMargin);

package/front_end/ui/legacy/SoftDropDown.ts

@@ -14,6 +14,8 @@ import type {ListDelegate} from './ListControl.js';
 import {ListControl, ListMode} from './ListControl.js';
 import type {ItemsReplacedEvent, ListModel} from './ListModel.js';
 import {Events as ListModelEvents} from './ListModel.js';
+import softDropDownStyles from './softDropDown.css.legacy.js';
+import softDropDownButtonStyles from './softDropDownButton.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -46,7 +48,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
 
     this.element = document.createElement('button');
     this.element.classList.add('soft-dropdown');
-    Utils.appendStyle(this.element, 'ui/legacy/softDropDownButton.css');
+    Utils.appendStyle(this.element, softDropDownButtonStyles);
     this.titleElement = this.element.createChild('span', 'title');
     const dropdownArrowIcon = Icon.create('smallicon-triangle-down');
     this.element.appendChild(dropdownArrowIcon);
@@ -63,7 +65,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
     this.width = 315;
     Utils
         .createShadowRootWithCoreStyles(this.glassPane.contentElement, {
-          cssFile: 'ui/legacy/softDropDown.css',
+          cssFile: softDropDownStyles,
           delegatesFocus: undefined,
         })
         .appendChild(this.list.element);

package/front_end/ui/legacy/SplitWidget.ts

@@ -37,6 +37,7 @@ import {Events as ResizerWidgetEvents, SimpleResizerWidget} from './ResizerWidge
 import {ToolbarButton} from './Toolbar.js';
 import {Widget} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
+import splitWidgetStyles from './splitWidget.css.legacy.js';
 
 export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
   private sidebarElementInternal: HTMLElement;
@@ -77,7 +78,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       defaultSidebarHeight?: number, constraintsInDip?: boolean) {
     super(true);
     this.element.classList.add('split-widget');
-    this.registerRequiredCSS('ui/legacy/splitWidget.css');
+    this.registerRequiredCSS(splitWidgetStyles);
 
     this.contentElement.classList.add('shadow-split-widget');
     this.sidebarElementInternal =

package/front_end/ui/legacy/SuggestBox.ts

@@ -41,6 +41,7 @@ import type {ListDelegate} from './ListControl.js';
 import {ListControl, ListMode} from './ListControl.js';
 import {ListModel} from './ListModel.js';
 import {measurePreferredSize} from './UIUtils.js';
+import suggestBoxStyles from './suggestBox.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -107,7 +108,7 @@ export class SuggestBox implements ListDelegate<Suggestion> {
     this.glassPane.setAnchorBehavior(AnchorBehavior.PreferBottom);
     this.glassPane.setOutsideClickCallback(this.hide.bind(this));
     const shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.glassPane.contentElement, {cssFile: 'ui/legacy/suggestBox.css', delegatesFocus: undefined});
+        this.glassPane.contentElement, {cssFile: suggestBoxStyles, delegatesFocus: undefined});
     shadowRoot.appendChild(this.element);
   }
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -43,6 +43,7 @@ import {installDragHandle, invokeOnceAfterBatchUpdate} from './UIUtils.js';
 import type {Widget} from './Widget.js';
 import {VBox} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
+import tabbedPaneStyles from './tabbedPane.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -110,7 +111,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   constructor() {
     super(true);
-    this.registerRequiredCSS('ui/legacy/tabbedPane.css');
+    this.registerRequiredCSS(tabbedPaneStyles);
     this.element.classList.add('tabbed-pane');
     this.contentElement.classList.add('tabbed-pane-shadow');
     this.contentElement.tabIndex = -1;

package/front_end/ui/legacy/TargetCrashedScreen.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 
+import targetCrashedScreenStyles from './targetCrashedScreen.css.legacy.js';
 import {VBox} from './Widget.js';
 
 const UIStrings = {
@@ -22,7 +23,7 @@ export class TargetCrashedScreen extends VBox {
   private readonly hideCallback: () => void;
   constructor(hideCallback: () => void) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/targetCrashedScreen.css');
+    this.registerRequiredCSS(targetCrashedScreenStyles);
     this.contentElement.createChild('div', 'message').textContent =
         i18nString(UIStrings.devtoolsWasDisconnectedFromThe);
     this.contentElement.createChild('div', 'message').textContent =