chrome-devtools-frontend 1.0.940714 → 1.0.942529

package/front_end/ui/components/panel_feedback/panelFeedback.css

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+
+/**
+ * Copyright 2021 Google LLC. All rights reserved.
+ */
+
+:host {
+  display: block;
+}
+
+.preview {
+  padding: 12px 16px;
+  border: 1px solid var(--color-details-hairline);
+  color: var(--color-text-primary);
+  font-size: 13px;
+  line-height: 20px;
+  border-radius: 12px;
+  margin: 42px 0;
+  letter-spacing: 0.01em;
+}
+
+h2 {
+  color: var(--color-primary);
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+  margin: 9px 0 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: normal;
+}
+
+h3 {
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
+  color: var(--color-text-primary);
+  margin-bottom: 2px;
+  font-weight: normal;
+}
+
+.preview p {
+  margin-bottom: 24px;
+}
+
+.thumbnail {
+  height: 92px;
+}
+
+.video {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 20px;
+}
+
+x-link { /* stylelint-disable-line selector-type-no-unknown */
+  color: var(--color-primary);
+  text-decoration-line: underline;
+}
+
+x-link.quick-start-link { /* stylelint-disable-line selector-type-no-unknown */
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0.04em;
+}
+
+.video-description {
+  min-width: min-content;
+  flex-basis: min-content;
+  flex-grow: 1;
+}

package/front_end/ui/components/panel_feedback/panel_feedback.ts

@@ -0,0 +1,6 @@
+// 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.
+
+export * as FeedbackButton from './FeedbackButton.js';
+export * as PanelFeedback from './PanelFeedback.js';

package/front_end/ui/components/report_view/reportValue.css

@@ -14,4 +14,5 @@
   color: var(--color-text-primary);
   margin-inline-start: 0;
   padding: 0 6px;
+  overflow-wrap: break-word;
 }

package/front_end/ui/components/survey_link/SurveyLink.ts

@@ -124,7 +124,7 @@ export class SurveyLink extends HTMLElement {
     // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
     const output = LitHtml.html`
       <button class="link ${linkState}" tabindex=${ariaDisabled ? '-1' : '0'} .disabled=${ariaDisabled} aria-disabled=${ariaDisabled} @click=${this.sendSurvey}>
-        <${IconButton.Icon.Icon.litTagName} class="link-icon" .data=${{iconName: 'feedback_thin_16x16_icon', color: 'var(--color-link)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}><!--
+        <${IconButton.Icon.Icon.litTagName} class="link-icon" .data=${{iconName: 'feedback_button_icon', color: 'var(--color-link)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}><!--
       -->${linkText}
       </button>
     `;

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

@@ -8,7 +8,8 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 
-import {baseConfiguration, dynamicSetting} from './config.js';
+import {baseConfiguration, dynamicSetting, DynamicSetting} from './config.js';
+import {toLineColumn, toOffset} from './position.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -21,6 +22,7 @@ export class TextEditor extends HTMLElement {
 
   private readonly shadow = this.attachShadow({mode: 'open'});
   private activeEditor: CodeMirror.EditorView|undefined = undefined;
+  private dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
   private activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
   private pendingState: CodeMirror.EditorState|undefined;
 
@@ -32,10 +34,17 @@ export class TextEditor extends HTMLElement {
 
   private createEditor(): CodeMirror.EditorView {
     this.activeEditor = new CodeMirror.EditorView({
-      state: this.updateDynamicSettings(this.state),
+      state: this.state,
       parent: this.shadow,
       root: this.shadow,
+      dispatch: (tr: CodeMirror.Transaction): void => {
+        this.editor.update([tr]);
+        if (tr.reconfigured) {
+          this.ensureSettingListeners();
+        }
+      },
     });
+    this.ensureSettingListeners();
     return this.activeEditor;
   }
 
@@ -43,6 +52,10 @@ export class TextEditor extends HTMLElement {
     return this.activeEditor || this.createEditor();
   }
 
+  dispatch(spec: CodeMirror.TransactionSpec): void {
+    return this.editor.dispatch(spec);
+  }
+
   get state(): CodeMirror.EditorState {
     if (this.activeEditor) {
       return this.activeEditor.state;
@@ -65,7 +78,6 @@ export class TextEditor extends HTMLElement {
     if (!this.activeEditor) {
       this.createEditor();
     }
-    this.registerSettingHandlers();
   }
 
   disconnectedCallback(): void {
@@ -73,63 +85,94 @@ export class TextEditor extends HTMLElement {
       this.pendingState = this.activeEditor.state;
       this.activeEditor.destroy();
       this.activeEditor = undefined;
+      this.ensureSettingListeners();
     }
-    for (const [setting, listener] of this.activeSettingListeners) {
-      setting.removeChangeListener(listener);
-    }
-    this.activeSettingListeners = [];
   }
 
-  private updateDynamicSettings(state: CodeMirror.EditorState): CodeMirror.EditorState {
-    const settings = Common.Settings.Settings.instance();
-    const changes = [];
-    for (const opt of state.facet(dynamicSetting)) {
-      const mustUpdate = opt.sync(state, settings.moduleSetting(opt.settingName).get());
-      if (mustUpdate) {
-        changes.push(mustUpdate);
-      }
+  focus(): void {
+    if (this.activeEditor) {
+      this.activeEditor.focus();
     }
-    return changes.length ? state.update({effects: changes}).state : state;
   }
 
-  private registerSettingHandlers(): void {
+  private ensureSettingListeners(): void {
+    const dynamicSettings = this.activeEditor ? this.activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
+    if (dynamicSettings === this.dynamicSettings) {
+      return;
+    }
+    this.dynamicSettings = dynamicSettings;
+
+    for (const [setting, listener] of this.activeSettingListeners) {
+      setting.removeChangeListener(listener);
+    }
+    this.activeSettingListeners = [];
+
     const settings = Common.Settings.Settings.instance();
-    for (const opt of this.state.facet(dynamicSetting)) {
+    for (const dynamicSetting of dynamicSettings) {
       const handler = ({data}: {data: unknown}): void => {
-        const change = opt.sync(this.state, data);
+        const change = dynamicSetting.sync(this.state, data);
         if (change && this.activeEditor) {
           this.activeEditor.dispatch({effects: change});
         }
       };
-      const setting = settings.moduleSetting(opt.settingName);
+      const setting = settings.moduleSetting(dynamicSetting.settingName);
       setting.addChangeListener(handler);
       this.activeSettingListeners.push([setting, handler]);
     }
   }
 
-  revealPosition(position: number): void {
+  revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {
     const view = this.activeEditor;
     if (!view) {
       return;
     }
 
-    const line = view.state.doc.lineAt(position);
+    const line = view.state.doc.lineAt(selection.main.head);
+    const effects: CodeMirror.StateEffect<unknown>[] = [];
+    if (highlight) {
+      effects.push(
+          view.state.field(highlightState, false) ?
+              setHighlightLine.of(line.from) :
+              CodeMirror.StateEffect.appendConfig.of(highlightState.init(() => highlightDeco(line.from))));
+    }
+    const editorRect = view.scrollDOM.getBoundingClientRect();
+    const targetPos = view.coordsAtPos(selection.main.head);
+    if (!targetPos || targetPos.top < editorRect.top || targetPos.bottom > editorRect.bottom) {
+      effects.push(CodeMirror.EditorView.centerOn.of(selection.main));
+    }
+
     view.dispatch({
-      selection: CodeMirror.EditorSelection.cursor(position),
-      scrollIntoView: true,
-      effects:
-          [view.state.field(highlightState, false) ?
-               setHighlightLine.of(line.from) :
-               CodeMirror.StateEffect.appendConfig.of(highlightState.init(() => highlightDeco(line.from)))],
+      selection,
+      effects,
+      userEvent: 'select.reveal',
     });
-    const {id} = view.state.field(highlightState);
-    // Reset the highlight state if, after 2 seconds (the animation
-    // duration) it is still showing this highlight.
-    setTimeout(() => {
-      if (view.state.field(highlightState).id === id) {
-        view.dispatch({effects: setHighlightLine.of(null)});
-      }
-    }, 2000);
+    if (highlight) {
+      const {id} = view.state.field(highlightState);
+      // Reset the highlight state if, after 2 seconds (the animation
+      // duration) it is still showing this highlight.
+      setTimeout(() => {
+        if (view.state.field(highlightState).id === id) {
+          view.dispatch({effects: setHighlightLine.of(null)});
+        }
+      }, 2000);
+    }
+  }
+
+  createSelection(head: {lineNumber: number, columnNumber: number}, anchor?: {
+    lineNumber: number,
+    columnNumber: number,
+  }): CodeMirror.EditorSelection {
+    const {doc} = this.state;
+    const headPos = toOffset(doc, head);
+    return CodeMirror.EditorSelection.single(anchor ? toOffset(doc, anchor) : headPos, headPos);
+  }
+
+  toLineColumn(pos: number): {lineNumber: number, columnNumber: number} {
+    return toLineColumn(this.state.doc, pos);
+  }
+
+  toOffset(pos: {lineNumber: number, columnNumber: number}): number {
+    return toOffset(this.state.doc, pos);
   }
 }
 

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