chrome-devtools-frontend 1.0.941208 → 1.0.943182

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/components/tree_outline/TreeOutline.ts

@@ -10,7 +10,7 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import treeOutlineStyles from './treeOutline.css.js';
 
-import type {TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';
+import type {TreeNodeId, TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';
 import {findNextNodeForTreeOutlineKeyboardNavigation, getNodeChildren, getPathToTreeNode, isExpandableNode, trackDOMNodeToTreeNode} from './TreeOutlineUtils.js';
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
@@ -24,6 +24,7 @@ export interface TreeOutlineData<TreeNodeDataType> {
    * cause issues in the TreeOutline.
    */
   tree: readonly TreeNode<TreeNodeDataType>[];
+  filter?: (node: TreeNodeDataType) => FilterOption;
 }
 
 export function defaultRenderer(node: TreeNode<string>): LitHtml.TemplateResult {
@@ -66,6 +67,19 @@ export class ItemMouseOutEvent<TreeNodeDataType> extends Event {
   }
 }
 
+/**
+ *
+ * The tree can be filtered by providing a custom filter function.
+ * The filter is applied on every node when constructing the tree
+ * and proceeds as follows:
+ * - If the filter return SHOW for a node, the node is included in the tree.
+ * - If the filter returns FLATTEN, the node is ignored but its subtree is included.
+ */
+export const enum FilterOption {
+  SHOW = 'SHOW',
+  FLATTEN = 'FLATTEN',
+}
+
 export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-tree-outline`;
   private readonly shadow = this.attachShadow({mode: 'open'});
@@ -79,7 +93,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * know for sure when that node will be rendered. This variable tracks the
    * node that we want focused but may not yet have been rendered.
    */
-  private nodePendingFocus: TreeNode<TreeNodeDataType>|null = null;
+  private nodeIdPendingFocus: TreeNodeId|null = null;
   private selectedTreeNode: TreeNode<TreeNodeDataType>|null = null;
   private defaultRenderer =
       (node: TreeNode<TreeNodeDataType>, _state: {isExpanded: boolean}): LitHtml.TemplateResult => {
@@ -91,6 +105,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         }
         return LitHtml.html`${String(node.treeNodeData)}`;
       };
+  private nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
 
   /**
    * scheduledRender = render() has been called and scheduled a render.
@@ -134,6 +149,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   set data(data: TreeOutlineData<TreeNodeDataType>) {
     this.defaultRenderer = data.defaultRenderer;
     this.treeData = data.tree;
+    this.nodeFilter = data.filter;
     if (!this.hasRenderedAtLeastOnce) {
       this.selectedTreeNode = this.treeData[0];
     }
@@ -154,10 +170,17 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * Takes a TreeNode, expands the outline to reveal it, and focuses it.
    */
   async expandToAndSelectTreeNode(targetTreeNode: TreeNode<TreeNodeDataType>): Promise<void> {
-    const pathToTreeNode = await getPathToTreeNode(this.treeData, targetTreeNode);
+    return this.expandToAndSelectTreeNodeId(targetTreeNode.id);
+  }
+
+  /**
+   * Takes a TreeNode ID, expands the outline to reveal it, and focuses it.
+   */
+  async expandToAndSelectTreeNodeId(targetTreeNodeId: TreeNodeId): Promise<void> {
+    const pathToTreeNode = await getPathToTreeNode(this.treeData, targetTreeNodeId);
 
     if (pathToTreeNode === null) {
-      throw new Error(`Could not find node with id ${targetTreeNode.id} in the tree.`);
+      throw new Error(`Could not find node with id ${targetTreeNodeId} in the tree.`);
     }
     pathToTreeNode.forEach((node, index) => {
       // We don't expand the very last node, which was the target node.
@@ -167,10 +190,26 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     });
 
     // Mark the node as pending focus so when it is rendered into the DOM we can focus it
-    this.nodePendingFocus = targetTreeNode;
+    this.nodeIdPendingFocus = targetTreeNodeId;
     await this.render();
   }
 
+  /**
+   * Takes a list of TreeNode IDs and expands the corresponding nodes.
+   */
+  expandNodeIds(nodeIds: TreeNodeId[]): Promise<void> {
+    nodeIds.forEach(id => this.nodeExpandedMap.set(id, true));
+    return this.render();
+  }
+
+  /**
+   * Takes a TreeNode ID and focuses the corresponding node.
+   */
+  focusNodeId(nodeId: TreeNodeId): Promise<void> {
+    this.nodeIdPendingFocus = nodeId;
+    return this.render();
+  }
+
   async collapseChildrenOfNode(domNode: HTMLLIElement): Promise<void> {
     const treeNode = this.domNodeToTreeNodeMap.get(domNode);
     if (!treeNode) {
@@ -208,7 +247,22 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private async fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
-    return getNodeChildren(node);
+    const children = await getNodeChildren(node);
+    if (!this.nodeFilter) {
+      return children;
+    }
+    const filteredChildren = [];
+    for (const child of children) {
+      const filtering = this.nodeFilter(child.treeNodeData);
+      // We always include the selected node in the tree, regardless of its filtering status.
+      if (filtering === FilterOption.SHOW || this.isSelectedNode(child) || child.id === this.nodeIdPendingFocus) {
+        filteredChildren.push(child);
+      } else if (filtering === FilterOption.FLATTEN && isExpandableNode(child)) {
+        const grandChildren = await this.fetchNodeChildren(child);
+        filteredChildren.push(...grandChildren);
+      }
+    }
+    return filteredChildren;
   }
 
   private setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
@@ -337,7 +391,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private focusPendingNode(domNode: HTMLLIElement): void {
-    this.nodePendingFocus = null;
+    this.nodeIdPendingFocus = null;
     this.focusTreeNode(domNode);
   }
 
@@ -411,7 +465,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
             return;
           }
 
-          if (this.nodePendingFocus && node.id === this.nodePendingFocus.id) {
+          if (this.nodeIdPendingFocus && node.id === this.nodeIdPendingFocus) {
             this.focusPendingNode(domNode);
           }
         })}
@@ -433,6 +487,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     `;
     // clang-format on
   }
+
   private async render(): Promise<void> {
     if (this.scheduledRender) {
       // If we are already rendering, don't render again immediately, but

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

@@ -4,10 +4,12 @@
 import * as Platform from '../../../core/platform/platform.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 
+export type TreeNodeId = string;
+
 interface BaseTreeNode<TreeNodeDataType> {
   treeNodeData: TreeNodeDataType;
   renderer?: (node: TreeNode<TreeNodeDataType>, state: {isExpanded: boolean}) => LitHtml.TemplateResult;
-  id: string;
+  id: TreeNodeId;
 }
 
 export interface TreeNodeWithChildren<TreeNodeDataType> extends BaseTreeNode<TreeNodeDataType> {
@@ -196,10 +198,10 @@ export const getNodeChildren =
  * And you look for F, you'll get back [A, D, F]
  */
 export const getPathToTreeNode =
-    async<TreeNodeDataType>(tree: readonly TreeNode<TreeNodeDataType>[], nodeToFind: TreeNode<TreeNodeDataType>):
+    async<TreeNodeDataType>(tree: readonly TreeNode<TreeNodeDataType>[], nodeIdToFind: TreeNodeId):
         Promise<TreeNode<TreeNodeDataType>[]|null> => {
           for (const rootNode of tree) {
-            const foundPathOrNull = await getPathToTreeNodeRecursively(rootNode, nodeToFind, [rootNode]);
+            const foundPathOrNull = await getPathToTreeNodeRecursively(rootNode, nodeIdToFind, [rootNode]);
             if (foundPathOrNull !== null) {
               return foundPathOrNull;
             }
@@ -208,16 +210,16 @@ export const getPathToTreeNode =
         };
 
 const getPathToTreeNodeRecursively = async<TreeNodeDataType>(
-    currentNode: TreeNode<TreeNodeDataType>, nodeToFind: TreeNode<TreeNodeDataType>,
+    currentNode: TreeNode<TreeNodeDataType>, nodeIdToFind: TreeNodeId,
     pathToNode: TreeNode<TreeNodeDataType>[]): Promise<TreeNode<TreeNodeDataType>[]|null> => {
-  if (currentNode.id === nodeToFind.id) {
+  if (currentNode.id === nodeIdToFind) {
     return pathToNode;
   }
 
   if (currentNode.children) {
     const children = await getNodeChildren(currentNode);
     for (const child of children) {
-      const foundPathOrNull = await getPathToTreeNodeRecursively(child, nodeToFind, [...pathToNode, child]);
+      const foundPathOrNull = await getPathToTreeNodeRecursively(child, nodeIdToFind, [...pathToNode, child]);
       if (foundPathOrNull !== null) {
         return foundPathOrNull;
       }

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