chrome-devtools-frontend 1.0.942529 → 1.0.943986

package/front_end/third_party/codemirror.next/package.json

@@ -28,7 +28,7 @@
     "@codemirror/panel": "0.19.0",
     "@codemirror/rangeset": "0.19.2",
     "@codemirror/search": "0.19.2",
-    "@codemirror/state": "0.19.5",
+    "@codemirror/state": "0.19.6",
     "@codemirror/stream-parser": "0.19.2",
     "@codemirror/text": "0.19.5",
     "@codemirror/tooltip": "0.19.6",

package/front_end/ui/components/docs/component_docs.ts

@@ -12,3 +12,17 @@ import * as ToggleFonts from './toggle_fonts.js';
 ToggleDarkMode.init();
 CreateBreadcrumbs.init();
 ToggleFonts.init();
+
+// This can be used by tests to hide the UI elements that are part of the component docs interface.
+// E.g., this is useful for screenshot tests.
+window.addEventListener('hidecomponentdocsui', () => {
+  for (const node of document.querySelectorAll('.component-docs-ui')) {
+    (node as HTMLElement).style.display = 'none';
+  }
+});
+
+window.addEventListener('showcomponentdocsui', () => {
+  for (const node of document.querySelectorAll('.component-docs-ui')) {
+    (node as HTMLElement).style.display = '';
+  }
+});

package/front_end/ui/components/docs/create_breadcrumbs.ts

@@ -32,7 +32,7 @@ export function init(): void {
     }
   </style>
 
-  <ul class="docs-breadcrumbs">
+  <ul class="docs-breadcrumbs component-docs-ui">
     <li><a href="/">Index</a></li>
     <li><a href=".">All component examples</a></li>
   </ul>`, container);

package/front_end/ui/components/docs/toggle_dark_mode.ts

@@ -16,6 +16,7 @@ export function init(): void {
   window.addEventListener('load', () => {
     const button = document.createElement('button');
     button.innerText = 'Toggle light/dark mode';
+    button.className = 'component-docs-ui';
 
     button.style.position = 'fixed';
     button.style.bottom = '10px';

package/front_end/ui/components/docs/toggle_fonts.ts

@@ -14,6 +14,7 @@ export function init(): void {
   // we want a single font-family to be used by the tests.
   if (urlParams.has('fontFamily')) {
     const div = document.createElement('div');
+    div.className = 'component-docs-ui';
     div.style.position = 'fixed';
     div.style.bottom = '10px';
     div.style.right = '230px';
@@ -30,6 +31,7 @@ export function init(): void {
 
   document.body.classList.add(PLATFORM_LINUX_CLASS);
   const button = document.createElement('button');
+  button.className = 'component-docs-ui';
 
   const loop = [
     PLATFORM_LINUX_CLASS,

package/front_end/ui/components/helpers/get-stylesheet.ts

@@ -42,5 +42,4 @@ export function legacyGetStyleSheets(path: string): CSSStyleSheet[] {
  */
 export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
   'panels/application/serviceWorkerUpdateCycleView.css',
-  'ui/legacy/components/source_frame/jsonView.css',
 ];

package/front_end/ui/components/linear_memory_inspector/linear_memory_inspector-meta.ts

@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as UI from '../../legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as LinearMemoryInspector from './linear_memory_inspector.js';
 
-import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {
   /**
   *@description Title of the Linear Memory Inspector tool

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];
     }
@@ -150,14 +166,29 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     await this.render();
   }
 
+  /**
+   * Collapses all nodes in the tree.
+   */
+  async collapseAllNodes(): Promise<void> {
+    this.nodeExpandedMap.clear();
+    await this.render();
+  }
+
   /**
    * 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 +198,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 +255,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 +399,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private focusPendingNode(domNode: HTMLLIElement): void {
-    this.nodePendingFocus = null;
+    this.nodeIdPendingFocus = null;
     this.focusTreeNode(domNode);
   }
 
@@ -411,7 +473,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 +495,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

@@ -137,9 +137,14 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
       if (node instanceof HTMLElement) {
         const element = (node as HTMLElement);
         const tabIndex = element.tabIndex;
-        if (tabIndex >= 0 && (!exclusionSet || !exclusionSet.has(element))) {
-          this.tabIndexMap.set(element, tabIndex);
-          element.tabIndex = -1;
+        if (!exclusionSet?.has(element)) {
+          if (tabIndex >= 0) {
+            this.tabIndexMap.set(element, tabIndex);
+            element.tabIndex = -1;
+          } else if (element.hasAttribute('contenteditable')) {
+            this.tabIndexMap.set(element, element.hasAttribute('tabindex') ? tabIndex : 0);
+            element.tabIndex = -1;
+          }
         }
       }
     }

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -35,7 +35,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {Icon} from './Icon.js';
-import * as ThemeSupport from './theme_support/theme_support.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as ThemeSupport from './theme_support/theme_support.js';
 import {createTextChild, ElementFocusRestorer} from './UIUtils.js';
 import softContextMenuStyles from './softContextMenu.css.legacy.js';
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -399,7 +399,7 @@ export class TreeOutlineInShadow extends TreeOutline {
     this.renderSelection = true;
   }
 
-  registerRequiredCSS(cssFile: string): void {
+  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
     Utils.appendStyle(this.shadowRoot, cssFile);
   }
 

package/front_end/ui/legacy/UIUtils.ts

@@ -46,7 +46,7 @@ import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {Icon} from './Icon.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
-import * as ThemeSupport from './theme_support/theme_support.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as ThemeSupport from './theme_support/theme_support.js';
 import * as Utils from './utils/utils.js';
 
 import type {ToolbarButton} from './Toolbar.js';

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -222,8 +222,7 @@ export class CSSAngle extends HTMLElement {
             .data=${{
               angle: this.angle,
             } as CSSAngleSwatchData}>
-          </${CSSAngleSwatch.litTagName}><slot></slot>
-        </div>
+          </${CSSAngleSwatch.litTagName}><slot></slot></div>
         ${this.popoverOpen ? this.renderPopover() : null}
       </div>
     `, this.shadow, {

package/front_end/ui/legacy/components/inline_editor/cssAngle.css

@@ -22,3 +22,7 @@ devtools-css-angle-editor {
   position: fixed;
   z-index: 2;
 }
+
+.preview {
+  display: inline-block;
+}

package/front_end/ui/legacy/components/object_ui/JavaScriptREPL.ts

@@ -36,7 +36,7 @@ export class JavaScriptREPL {
 
   static async evaluateAndBuildPreview(
       text: string, throwOnSideEffect: boolean, replMode: boolean, timeout?: number, allowErrors?: boolean,
-      objectGroup?: string): Promise<{
+      objectGroup?: string, awaitPromise: boolean = false): Promise<{
     preview: DocumentFragment,
     result: SDK.RuntimeModel.EvaluationResult|null,
   }> {
@@ -60,7 +60,7 @@ export class JavaScriptREPL {
       returnByValue: undefined,
       allowUnsafeEvalBlockedByCSP: undefined,
     };
-    const result = await executionContext.evaluate(options, false /* userGesture */, false /* awaitPromise */);
+    const result = await executionContext.evaluate(options, false /* userGesture */, awaitPromise);
     const preview = JavaScriptREPL.buildEvaluationPreview(result, allowErrors);
     return {preview, result};
   }

package/front_end/ui/legacy/components/object_ui/object_ui-meta.ts

@@ -2,19 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../../../core/root/root.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as ObjectUI from './object_ui.js';
 
 let loadedObjectUIModule: (typeof ObjectUI|undefined);
 
 async function loadObjectUIModule(): Promise<typeof ObjectUI> {
   if (!loadedObjectUIModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('ui/legacy/components/object_ui');
     loadedObjectUIModule = await import('./object_ui.js');
   }
   return loadedObjectUIModule;

package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -7,7 +7,6 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Root from '../../../../core/root/root.js';
 import * as UI from '../../legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as PerfUI from './perf_ui.js';
 
 const UIStrings = {
@@ -51,8 +50,6 @@ let loadedPerfUIModule: (typeof PerfUI|undefined);
 
 async function loadPerfUIModule(): Promise<typeof PerfUI> {
   if (!loadedPerfUIModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('perf_ui');
     loadedPerfUIModule = await import('./perf_ui.js');
   }
   return loadedPerfUIModule;

package/front_end/ui/legacy/components/quick_open/quick_open-meta.ts

@@ -5,6 +5,8 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as UI from '../../legacy.js';
 
+import type * as QuickOpen from './quick_open.js';
+
 const UIStrings = {
   /**
   *@description Title of action that opens a file
@@ -18,9 +20,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/quick_open-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-// eslint-disable-next-line rulesdir/es_modules_import
-import type * as QuickOpen from './quick_open.js';
-
 let loadedQuickOpenModule: (typeof QuickOpen|undefined);
 
 async function loadQuickOpenModule(): Promise<typeof QuickOpen> {

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -35,6 +35,8 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as UI from '../../legacy.js';
 
+import fontViewStyles from './fontView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text that appears on a button for the font resource type filter.
@@ -60,7 +62,7 @@ export class FontView extends UI.View.SimpleView {
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.font));
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/fontView.css');
+    this.registerRequiredCSS(fontViewStyles);
     this.element.classList.add('font-view');
     this.url = contentProvider.contentURL();
     UI.ARIAUtils.setAccessibleName(this.element, i18nString(UIStrings.previewOfFontFromS, {PH1: this.url}));

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -38,6 +38,8 @@ import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as UI from '../../legacy.js';
 
+import imageViewStyles from './imageView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text in Image View of the Sources panel
@@ -97,7 +99,7 @@ export class ImageView extends UI.View.SimpleView {
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.image));
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/imageView.css');
+    this.registerRequiredCSS(imageViewStyles);
     this.element.tabIndex = -1;
     this.element.classList.add('image-view');
     this.url = contentProvider.contentURL();

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -34,6 +34,8 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 import * as ObjectUI from '../object_ui/object_ui.js';
 
+import jsonViewStyles from './jsonView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text to find an item
@@ -55,7 +57,7 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     super();
     this.initialized = false;
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/jsonView.css');
+    this.registerRequiredCSS(jsonViewStyles);
     this.parsedJSON = parsedJSON;
     this.startCollapsed = Boolean(startCollapsed);
     this.element.classList.add('json-view');

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts

@@ -37,6 +37,7 @@ import * as UI from '../../legacy.js';
 
 import type {SourceFrameOptions} from './SourceFrame.js';
 import {SourceFrameImpl} from './SourceFrame.js';
+import resourceSourceFrameStyles from './resourceSourceFrame.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -84,7 +85,7 @@ export class SearchableContainer extends UI.Widget.VBox {
   constructor(resource: TextUtils.ContentProvider.ContentProvider, contentType: string, autoPrettyPrint?: boolean) {
     super(true);
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/resourceSourceFrame.css');
+    this.registerRequiredCSS(resourceSourceFrameStyles);
     const sourceFrame = new ResourceSourceFrame(resource, contentType);
     this.sourceFrame = sourceFrame;
     const canPrettyPrint =

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -159,6 +159,11 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.textEditorInternal = new TextEditor.TextEditor.TextEditor(this.placeholderEditorState(''));
     this.textEditorInternal.style.flexGrow = '1';
     this.element.appendChild(this.textEditorInternal);
+    this.element.addEventListener('keydown', (event: KeyboardEvent): void => {
+      if (event.defaultPrevented) {
+        event.stopPropagation();
+      }
+    });
 
     this.baseDoc = this.textEditorInternal.state.doc;
 
@@ -246,7 +251,6 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
               }),
       activeSearchState,
       CodeMirror.Prec.lowest(searchHighlighter),
-      config.lineNumbers.of([]),
       config.language.of([]),
       this.wasmDisassemblyInternal ? markNonBreakableLines(this.wasmDisassemblyInternal) : nonBreakableLines,
       this.options.lineWrapping ? CodeMirror.EditorView.lineWrapping : [],
@@ -708,7 +712,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       extensions: [
         this.editorConfiguration(content),
         languageSupport,
-        this.getLineNumberFormatter(),
+        config.lineNumbers.of(this.getLineNumberFormatter()),
         config.editable.of(this.editable ? [] : CodeMirror.EditorState.readOnly.of(true)),
       ],
     });
@@ -717,7 +721,6 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (wasLoaded) {
       textEditor.editor.scrollDOM.scrollTop = scrollTop;
     }
-    this.editorInitialized();
     this.wasShownOrLoaded();
 
     if (this.delayedFindSearchMatches) {
@@ -727,9 +730,6 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.muteChangeEventsForSetContent = false;
   }
 
-  protected editorInitialized(): void {
-  }
-
   setSearchableView(view: UI.SearchableView.SearchableView|null): void {
     this.searchableView = view;
   }

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -7,6 +7,9 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as UI from '../../legacy.js';
 
+import xmlTreeStyles from './xmlTree.css.legacy.js';
+import xmlViewStyles from './xmlView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text to find an item
@@ -26,11 +29,11 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
   constructor(parsedXML: Document) {
     super(true);
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/xmlView.css');
+    this.registerRequiredCSS(xmlViewStyles);
     this.contentElement.classList.add('shadow-xml-view', 'source-code');
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.treeOutline.registerRequiredCSS('ui/legacy/components/source_frame/xmlTree.css');
+    this.treeOutline.registerRequiredCSS(xmlTreeStyles);
     this.contentElement.appendChild(this.treeOutline.element);
     this.currentSearchFocusIndex = 0;
     this.currentSearchTreeElements = [];

package/front_end/ui/legacy/textButton.css

@@ -108,8 +108,9 @@
   .text-button:not(:disabled):focus {
     forced-color-adjust: none;
     background-color: ButtonFace;
-    color: ButtonText;
+    color: Highlight !important; /* stylelint-disable-line declaration-no-important */
     border-color: Highlight;
+    outline: 2px solid ButtonText;
     box-shadow: var(--legacy-focus-ring-active-shadow);
   }
 
@@ -117,7 +118,7 @@
   .text-button:not(:disabled):active {
     forced-color-adjust: none;
     background-color: Highlight;
-    color: HighlightText;
+    color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
     box-shadow: var(--legacy-accent-color);
   }
 
@@ -130,14 +131,14 @@
 
   .text-button.primary-button:not(:disabled):focus {
     background-color: Highlight;
-    color: HighlightText;
+    color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
     border-color: ButtonText;
   }
 
   .text-button.primary-button:not(:disabled):hover,
   .text-button.primary-button:not(:disabled):active {
     background-color: HighlightText;
-    color: Highlight;
+    color: Highlight !important; /* stylelint-disable-line declaration-no-important */
     border-color: Highlight;
   }
 }

package/inspector_overlay/css_grid_label_helpers.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {luminance} from '../front_end/core/common/ColorUtils.js';
+import {luminance} from '../front_end/core/common/ColorUtils.js';  // eslint-disable-line rulesdir/es_modules_import
 
 import type {AreaBounds, Bounds, Position} from './common.js';
 import {createChild} from './common.js';

package/inspector_overlay/highlight_common.ts

@@ -28,7 +28,7 @@
 //  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import {rgbaToHsla} from '../front_end/core/common/ColorUtils.js';
+import {rgbaToHsla} from '../front_end/core/common/ColorUtils.js';  // eslint-disable-line rulesdir/es_modules_import
 
 import type {Bounds, PathCommands, Quad} from './common.js';