chrome-devtools-frontend 1.0.943017 → 1.0.944427

package/front_end/third_party/codemirror.next/codemirror.next.d.ts

@@ -3537,6 +3537,12 @@ interface CompletionConfig {
     */
     defaultKeymap?: boolean;
     /**
+    By default, completions are shown below the cursor when there is
+    space. Setting this to true will make the extension put the
+    completions above the cursor when possible.
+    */
+    aboveCursor?: boolean;
+    /**
     This can be used to add additional CSS classes to completion
     options.
     */
@@ -3739,6 +3745,14 @@ interface CompletionResult {
 Accept the current completion.
 */
 declare const acceptCompletion: Command;
+/**
+Explicitly start autocompletion.
+*/
+declare const startCompletion: Command;
+/**
+Close the currently active completion.
+*/
+declare const closeCompletion: Command;
 
 /**
 A completion source that will scan the document for words (using a
@@ -3755,6 +3769,10 @@ declare function autocompletion(config?: CompletionConfig): Extension;
 Returns the available completions as an array.
 */
 declare function currentCompletions(state: EditorState): readonly Completion[];
+/**
+Return the currently selected completion, if any.
+*/
+declare function selectedCompletion(state: EditorState): Completion | null;
 
 /**
 Describes an element in your XML document schema.
@@ -5484,6 +5502,19 @@ declare function tooltips(config?: {
     those.
     */
     parent?: HTMLElement;
+    /**
+    By default, when figuring out whether there is room for a
+    tooltip at a given position, the extension considers the entire
+    space between 0,0 and `innerWidth`,`innerHeight` to be available
+    for showing tooltips. You can provide a function here that
+    returns an alternative rectangle.
+    */
+    tooltipSpace?: (view: EditorView) => {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
 }): Extension;
 /**
 Describes a tooltip. Values of this type, when provided through
@@ -5574,4 +5605,4 @@ declare function shell(): Promise<StreamLanguage<unknown>>;
 declare function wast(): Promise<typeof _codemirror_lang_wast>;
 declare function xml(): Promise<typeof _codemirror_lang_xml>;
 
-export { Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Command, Compartment, Completion, CompletionContext, CompletionResult, CompletionSource, Decoration, DecorationSet, EditorSelection, EditorState, EditorStateConfig, EditorView, Extension, Facet, GutterMarker, HighlightStyle, KeyBinding, LRParser, Language, LanguageSupport, Line$1 as Line, MatchDecorator, NodeProp, NodeSet, NodeType, Panel, Parser, Prec, Range, RangeSet, RangeSetBuilder, SelectionRange, StateEffect, StateEffectType, StateField, StreamLanguage, StreamParser, StringStream, StyleModule, SyntaxNode, Tag, TagStyle, Text, TextIterator, Tooltip, TooltipView, Transaction, TransactionSpec, Tree, TreeCursor, ViewPlugin, ViewUpdate, WidgetType, acceptCompletion, autocompletion, bracketMatching, clojure, closeBrackets, closeBracketsKeymap, codeFolding, coffeescript, completeAnyWord, cpp, index_d$2 as css, currentCompletions, cursorMatchingBracket, cursorSubwordBackward, cursorSubwordForward, drawSelection, ensureSyntaxTree, foldGutter, foldKeymap, gutter, gutters, highlightSpecialChars, highlightTree, history, historyKeymap, index_d$1 as html, ifNotIn, indentLess, indentMore, indentOnInput, indentUnit, insertNewlineAndIndent, java, index_d as javascript, json, keymap, lineNumberMarkers, lineNumbers, markdown, php, placeholder, python, redo, redoSelection, scrollPastEnd, selectMatchingBracket, selectNextOccurrence, selectSubwordBackward, selectSubwordForward, shell, showPanel, showTooltip, standardKeymap, syntaxTree, tags, toggleComment, tooltips, undo, undoSelection, wast, xml };
+export { Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Command, Compartment, Completion, CompletionContext, CompletionResult, CompletionSource, Decoration, DecorationSet, EditorSelection, EditorState, EditorStateConfig, EditorView, Extension, Facet, GutterMarker, HighlightStyle, KeyBinding, LRParser, Language, LanguageSupport, Line$1 as Line, MatchDecorator, NodeProp, NodeSet, NodeType, Panel, Parser, Prec, Range, RangeSet, RangeSetBuilder, SelectionRange, StateEffect, StateEffectType, StateField, StreamLanguage, StreamParser, StringStream, StyleModule, SyntaxNode, Tag, TagStyle, Text, TextIterator, Tooltip, TooltipView, Transaction, TransactionSpec, Tree, TreeCursor, ViewPlugin, ViewUpdate, WidgetType, acceptCompletion, autocompletion, bracketMatching, clojure, closeBrackets, closeBracketsKeymap, closeCompletion, codeFolding, coffeescript, completeAnyWord, cpp, index_d$2 as css, currentCompletions, cursorMatchingBracket, cursorSubwordBackward, cursorSubwordForward, drawSelection, ensureSyntaxTree, foldGutter, foldKeymap, gutter, gutters, highlightSpecialChars, highlightTree, history, historyKeymap, index_d$1 as html, ifNotIn, indentLess, indentMore, indentOnInput, indentUnit, insertNewlineAndIndent, java, index_d as javascript, json, keymap, lineNumberMarkers, lineNumbers, markdown, php, placeholder, python, redo, redoSelection, scrollPastEnd, selectMatchingBracket, selectNextOccurrence, selectSubwordBackward, selectSubwordForward, selectedCompletion, shell, showPanel, showTooltip, standardKeymap, startCompletion, syntaxTree, tags, toggleComment, tooltips, undo, undoSelection, wast, xml };

package/front_end/third_party/codemirror.next/codemirror.next.js

@@ -1,2 +1,2 @@
-export{$ as insertNewlineAndIndent,_ as indentMore,A as java,a$ as StyleModule,a0 as selectMatchingBracket,a1 as selectSubwordBackward,a2 as selectSubwordForward,a3 as standardKeymap,a4 as toggleComment,a5 as codeFolding,a6 as foldGutter,a7 as foldKeymap,a8 as gutter,a9 as GutterMarker,a_ as TreeCursor,aA as ChangeDesc,aa as gutters,aB as ChangeSet,ab as lineNumberMarkers,aC as Compartment,ac as lineNumbers,aD as EditorState,ad as HighlightStyle,aE as Facet,ae as highlightTree,aF as SelectionRange,af as Tag,aG as StateEffect,ag as history,aH as StateEffectType,ah as historyKeymap,aI as StateField,ai as redo,aJ as Transaction,aj as redoSelection,aK as StreamLanguage,ak as undo,aL as StringStream,al as undoSelection,aM as Line,am as css,aN as Text,an as html,ao as javascript,aO as showTooltip,ap as ensureSyntaxTree,aP as tooltips,aQ as Decoration,aq as indentOnInput,aR as drawSelection,ar as indentUnit,aS as EditorView,as as bracketMatching,aT as highlightSpecialChars,at as showPanel,aU as MatchDecorator,au as Range,av as RangeSet,aV as placeholder,aw as RangeSetBuilder,aW as scrollPastEnd,aX as ViewPlugin,ax as selectNextOccurrence,ay as Annotation,aY as ViewUpdate,az as AnnotationType,aZ as WidgetType,B as json,D as markdown,e as LanguageSupport,F as php,g as NodeType,G as python,h as NodeSet,H as shell,I as wast,j as Language,J as xml,K as acceptCompletion,k as syntaxTree,L as LRParser,m as EditorSelection,M as autocompletion,N as NodeProp,n as Prec,O as completeAnyWord,o as keymap,P as Parser,Q as CompletionContext,R as currentCompletions,S as ifNotIn,T as Tree,t as tags,U as closeBrackets,V as closeBracketsKeymap,W as cursorMatchingBracket,x as clojure,X as cursorSubwordBackward,y as coffeescript,Y as cursorSubwordForward,z as cpp,Z as indentLess}from"./chunk/codemirror.js";
+export{$ as cursorSubwordForward,_ as cursorSubwordBackward,A as java,a$ as ViewUpdate,a0 as indentLess,a1 as indentMore,a2 as insertNewlineAndIndent,a3 as selectMatchingBracket,a4 as selectSubwordBackward,a5 as selectSubwordForward,a6 as standardKeymap,a7 as toggleComment,a8 as codeFolding,a9 as foldGutter,a_ as ViewPlugin,aa as foldKeymap,aA as selectNextOccurrence,aB as Annotation,ab as gutter,aC as AnnotationType,ac as GutterMarker,aD as ChangeDesc,ad as gutters,aE as ChangeSet,ae as lineNumberMarkers,aF as Compartment,af as lineNumbers,aG as EditorState,ag as HighlightStyle,aH as Facet,ah as highlightTree,aI as SelectionRange,ai as Tag,aJ as StateEffect,aj as history,aK as StateEffectType,ak as historyKeymap,aL as StateField,al as redo,aM as Transaction,am as redoSelection,aN as StreamLanguage,an as undo,aO as StringStream,ao as undoSelection,aP as Line,ap as css,aQ as Text,aq as html,ar as javascript,aR as showTooltip,as as ensureSyntaxTree,aS as tooltips,aT as Decoration,at as indentOnInput,aU as drawSelection,au as indentUnit,aV as EditorView,av as bracketMatching,aW as highlightSpecialChars,aw as showPanel,aX as MatchDecorator,ax as Range,ay as RangeSet,aY as placeholder,az as RangeSetBuilder,aZ as scrollPastEnd,B as json,b0 as WidgetType,b1 as TreeCursor,b2 as StyleModule,D as markdown,e as LanguageSupport,F as php,g as NodeType,G as python,h as NodeSet,H as shell,I as wast,j as Language,J as xml,K as acceptCompletion,k as syntaxTree,L as LRParser,m as EditorSelection,M as autocompletion,N as NodeProp,n as Prec,O as closeCompletion,o as keymap,P as Parser,Q as completeAnyWord,R as CompletionContext,S as currentCompletions,T as Tree,t as tags,U as ifNotIn,V as selectedCompletion,W as startCompletion,x as clojure,X as closeBrackets,Y as closeBracketsKeymap,y as coffeescript,z as cpp,Z as cursorMatchingBracket}from"./chunk/codemirror.js";
 

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

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "0.19.5",
+    "@codemirror/autocomplete": "0.19.8",
     "@codemirror/closebrackets": "0.19.0",
     "@codemirror/commands": "0.19.5",
     "@codemirror/comment": "0.19.0",
@@ -31,8 +31,8 @@
     "@codemirror/state": "0.19.5",
     "@codemirror/stream-parser": "0.19.2",
     "@codemirror/text": "0.19.5",
-    "@codemirror/tooltip": "0.19.6",
-    "@codemirror/view": "0.19.16",
+    "@codemirror/tooltip": "0.19.9",
+    "@codemirror/view": "0.19.20",
     "@lezer/common": "0.15.8",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "rollup-plugin-dts": "^4.0.0",

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/text_editor/config.ts

@@ -68,7 +68,10 @@ export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.k
   shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
 }]));
 
-export const autocompletion = CM.autocompletion({icons: false});
+export const autocompletion = CM.autocompletion({
+  icons: false,
+  optionClass: (option: CM.Completion): string => option.type === 'secondary' ? 'cm-secondaryCompletion' : '',
+});
 
 export const sourcesAutocompletion = DynamicSetting.bool('textEditorAutocompletion', autocompletion);
 
@@ -185,7 +188,6 @@ const baseKeymap = CM.keymap.of([
   {key: 'Mod-d', run: CM.selectNextOccurrence},
   {key: 'Alt-ArrowLeft', mac: 'Ctrl-ArrowLeft', run: CM.cursorSubwordBackward, shift: CM.selectSubwordBackward},
   {key: 'Alt-ArrowRight', mac: 'Ctrl-ArrowRight', run: CM.cursorSubwordForward, shift: CM.selectSubwordForward},
-  ...CM.closeBracketsKeymap,
   ...CM.standardKeymap,
   ...CM.historyKeymap,
 ]);
@@ -201,6 +203,15 @@ export function theme(): CM.Extension {
   return [editorTheme, themeIsDark() ? dummyDarkTheme : []];
 }
 
+let sideBarElement: HTMLElement|null = null;
+
+function getTooltipSpace(): DOMRect {
+  if (!sideBarElement) {
+    sideBarElement = document.querySelector('[slot="insertion-point-sidebar"]');
+  }
+  return (sideBarElement || document.body).getBoundingClientRect();
+}
+
 export function baseConfiguration(text: string): CM.Extension {
   return [
     theme(),
@@ -210,7 +221,6 @@ export function baseConfiguration(text: string): CM.Extension {
     CM.EditorState.allowMultipleSelections.of(true),
     CM.indentOnInput(),
     CodeHighlighter.CodeHighlighter.highlightStyle,
-    CM.closeBrackets(),
     baseKeymap,
     tabMovesFocus.instance(),
     bracketMatching.instance(),
@@ -218,10 +228,18 @@ export function baseConfiguration(text: string): CM.Extension {
     CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     detectLineSeparator(text),
     autocompletion,
-    CM.tooltips({parent: getTooltipHost() as unknown as HTMLElement}),
+    CM.tooltips({
+      parent: getTooltipHost() as unknown as HTMLElement,
+      tooltipSpace: getTooltipSpace,
+    }),
   ];
 }
 
+export const closeBrackets: CM.Extension = [
+  CM.closeBrackets(),
+  CM.keymap.of(CM.closeBracketsKeymap),
+];
+
 // Root editor tooltips at the top of the document, creating a special
 // element with the editor styles mounted in it for them. This is
 // annoying, but necessary because a scrollable parent node clips them
@@ -287,12 +305,16 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
   }
 
   topCompletion(state: CM.EditorState): string|null {
-    const completions = CM.currentCompletions(state);
-    if (!completions.length) {
+    const completion = CM.selectedCompletion(state);
+    if (!completion) {
       return null;
     }
-    const {label} = completions[0];
-    if (label.length > 100 || label.indexOf('\n') > -1) {
+    let {label, apply} = completion;
+    if (typeof apply === 'string') {
+      label = apply;
+      apply = undefined;
+    }
+    if (apply || label.length > 100 || label.indexOf('\n') > -1 || completion.type === 'secondary') {
       return null;
     }
     const pos = state.selection.main.head;
@@ -300,13 +322,11 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
     if (pos !== lineBefore.to) {
       return null;
     }
-    const textBefore = lineBefore.text.slice(0, pos - lineBefore.from);
-    for (let i = label.length - 1; i > 0; i--) {
-      if (textBefore.endsWith(label.slice(0, i)) && !/\w/.test(textBefore.charAt(textBefore.length - i - 1))) {
-        return label.slice(i);
-      }
+    const wordBefore = /[\w$]+$/.exec(lineBefore.text);
+    if (wordBefore && !label.startsWith(wordBefore[0])) {
+      return null;
     }
-    return null;
+    return label.slice(wordBefore ? wordBefore[0].length : 0);
   }
 }, {decorations: p => p.decorations});
 

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

@@ -90,7 +90,7 @@ export const enum QueryType {
   PropertyExpression = 2,
 }
 
-export function getQueryType(tree: CodeMirror.Tree, pos: number): {
+export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror.Text): {
   type: QueryType,
   from?: number,
   relatedNode?: CodeMirror.SyntaxNode,
@@ -101,13 +101,15 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number): {
     return null;
   }
 
-  if (node.name === 'VariableName') {
-    return {type: QueryType.Expression, from: node.from};
-  }
   if (node.name === 'PropertyName') {
     return parent?.name !== 'MemberExpression' ? null :
                                                  {type: QueryType.PropertyName, from: node.from, relatedNode: parent};
   }
+  if (node.name === 'VariableName' ||
+      // Treat alphabetic keywords as variables
+      !node.firstChild && node.to - node.from < 20 && !/[^a-z]/.test(doc.sliceString(node.from, node.to))) {
+    return {type: QueryType.Expression, from: node.from};
+  }
   if (node.name === 'String') {
     const parent = node.parent;
     return parent?.name === 'MemberExpression' && parent.childBefore(node.from)?.name === '[' ?
@@ -134,8 +136,8 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number): {
 
 export async function javascriptCompletionSource(cx: CodeMirror.CompletionContext):
     Promise<CodeMirror.CompletionResult|null> {
-  const query = getQueryType(CodeMirror.syntaxTree(cx.state), cx.pos);
-  if (!query || query.from === undefined && !cx.explicit) {
+  const query = getQueryType(CodeMirror.syntaxTree(cx.state), cx.pos, cx.state.doc);
+  if (!query || query.from === undefined && !cx.explicit && query.type === QueryType.Expression) {
     return null;
   }
 
@@ -162,7 +164,8 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
     if (!objectExpr) {
       return null;
     }
-    result = await completeProperties(cx.state.sliceDoc(objectExpr.from, objectExpr.to), quote);
+    result = await completeProperties(
+        cx.state.sliceDoc(objectExpr.from, objectExpr.to), quote, cx.state.sliceDoc(cx.pos, cx.pos + 1) === ']');
   } else {
     return null;
   }
@@ -250,6 +253,7 @@ class PropertyCache {
 async function completeProperties(
     expression: string,
     quoted?: string,
+    hasBracket: boolean = false,
     ): Promise<CompletionSet> {
   const cache = PropertyCache.instance();
   if (!quoted) {
@@ -262,7 +266,7 @@ async function completeProperties(
   if (!context) {
     return new CompletionSet();
   }
-  const result = completePropertiesInner(expression, context, quoted);
+  const result = completePropertiesInner(expression, context, quoted, hasBracket);
   if (!quoted) {
     cache.set(expression, result);
   }
@@ -275,6 +279,7 @@ async function completePropertiesInner(
     expression: string,
     context: SDK.RuntimeModel.ExecutionContext,
     quoted?: string,
+    hasBracket: boolean = false,
     ): Promise<CompletionSet> {
   const result = new CompletionSet();
   if (!context) {
@@ -313,7 +318,7 @@ async function completePropertiesInner(
           label,
           type: prop.value?.type === 'function' ? functionType : otherType,
         };
-        if (quoted) {
+        if (quoted && !hasBracket) {
           completion.apply = label + ']';
         }
         if (!prop.isOwn) {

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

@@ -18,7 +18,7 @@ export const editorTheme = CM.EditorView.theme({
     fontSize: 'var(--source-code-font-size)',
   },
 
-  '.cm-panels, .cm-tooltip': {
+  '.cm-panels': {
     backgroundColor: 'var(--color-background-elevation-1)',
   },
 
@@ -110,25 +110,50 @@ export const editorTheme = CM.EditorView.theme({
     color: 'var(--color-text-secondary)',
   },
 
+  '.cm-tooltip': {
+    boxShadow: 'var(--drop-shadow)',
+    backgroundColor: 'var(--color-background-elevation-1)',
+  },
+
   '.cm-argumentHints': {
     pointerEvents: 'none',
     padding: '0 4px',
     whiteSpace: 'nowrap',
     lineHeight: '20px',
     marginBottom: '4px',
-    boxShadow: 'var(--drop-shadow)',
-    backgroundColor: 'var(--color-background)',
     width: 'fit-content',
   },
 
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    backgroundColor: 'var(--color-background)',
     minWidth: '16em',
+    '& > li.cm-secondaryCompletion': {
+      display: 'flex',
+      backgroundColor: 'var(--color-background-elevation-1)',
+      justifyContent: 'space-between',
+      '&::before': {
+        content: '">"',
+        fontWeight: 'bold',
+        color: 'var(--color-primary-variant)',
+        marginRight: '5px',
+      },
+    },
+    '& > li:hover': {
+      backgroundColor: 'var(--item-hover-color)',
+    },
     '& > li[aria-selected]': {
       backgroundColor: 'var(--color-selected-option-background)',
-      color: 'var(--color-selected-option)',
+      '&, &.cm-secondaryCompletion::before': {
+        color: 'var(--color-selected-option)',
+      },
     },
   },
 
+  '.cm-completionMatchedText': {
+    textDecoration: 'none',
+    fontWeight: 'bold',
+  },
+
   '.cm-highlightedLine': {
     animation: 'cm-fading-highlight 2s 0s',
   },

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;
+          }
         }
       }
     }