chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -277,6 +277,9 @@ function getElementLoggingConfig(element: Element): VisualLogging.LoggingConfig|
 export function hasDisallowedCommentAncestor(element: Element): boolean {
   let current: Element|null = element;
   while (current) {
+    if (current.classList.contains('comments-overlay-container')) {
+      return true;
+    }
     const config = getElementLoggingConfig(current);
     if (config && (DISALLOWED_COMMENT_ANCESTORS.has(config.ve) || config.context === 'comments')) {
       return true;

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -37,7 +37,6 @@ export interface PinPositionData {
   top: number;
   left: number;
   visible: boolean;
-  index: number;
 }
 
 export interface HighlightRectData {
@@ -238,8 +237,8 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     return this.#pinPositions;
   }
 
-  getHighlightRects(): HighlightRectData[] {
-    return this.#highlightRects;
+  getHighlight(threadId: string): HighlightRectData|undefined {
+    return this.#highlightRects.find(h => h.id === threadId);
   }
 
   getAnchorElement(thread: CommentThread): Element|undefined {
@@ -490,7 +489,6 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         top: scrollY + visibleRect.top - 12 + offsetY,
         left: scrollX + visibleRect.right - 12,
         visible: true,
-        index: thread.index,
       });
 
       newHighlights.push({

package/front_end/ui/components/lists/List.ts

@@ -107,7 +107,10 @@ export class List extends HTMLElement {
 
   createSlottedListItem(index: number): TemplateResult {
     return html`
-    <li role='listitem' tabindex=${this.#disableListItemFocus ? '-1' : '0'}>
+    <li
+      role='listitem'
+      tabindex=${this.#disableListItemFocus ? '-1' : '0'}
+      @keydown=${this.#deletable ? this.#dispatchRemoveOnDelete.bind(this, index) : nothing}>
     <slot name='slot-${index}'></slot>
     <div class='controls-container'>
               <div class='controls-gradient'></div>
@@ -166,6 +169,16 @@ export class List extends HTMLElement {
     this.dispatchEvent(new ItemRemoveEvent({index}));
   }
 
+  #dispatchRemoveOnDelete(index: number, event: KeyboardEvent): void {
+    if (!this.#deletable || event.target !== event.currentTarget ||
+        (event.key !== 'Delete' && event.key !== 'Backspace')) {
+      return;
+    }
+
+    event.preventDefault();
+    this.#dispatchRemove(index);
+  }
+
   #dispatchEdit(index: number): void {
     this.dispatchEvent(new ItemEditEvent({index}));
   }

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

@@ -68,7 +68,7 @@ export class PreviewToggle extends HTMLElement {
       <style>${previewToggleStyles}</style>
       <div class="container">
           <devtools-checkbox
-            ?checked=${checked}
+            .checked=${Boolean(checked)}
             @change=${this.#checkboxChanged}
             aria-label=${this.#name} >
             <devtools-icon name="experiment" class="medium">

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

@@ -246,24 +246,33 @@ export class AiCodeCompletionProvider {
       },
       {
         key: 'Tab',
-        run: (): boolean => {
-          if (!this.#aiCodeCompletion || !this.#editor || !hasActiveAiSuggestion(this.#editor.state)) {
-            return false;
-          }
-          const {accepted, suggestion} = acceptAiAutoCompleteSuggestion(this.#editor.editor);
-          if (!accepted) {
-            return false;
-          }
-          if (suggestion?.rpcGlobalId) {
-            this.#aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
-          }
-          this.#aiCodeCompletionConfig?.onSuggestionAccepted(this.#aiCodeCompletionCitations);
-          return true;
-        },
+        run: this.#acceptAiSuggestion.bind(this),
+      },
+      {
+        key: 'Enter',
+        run: this.#acceptAiSuggestion.bind(this),
       },
     ];
   }
 
+  #acceptAiSuggestion(): boolean {
+    if (!this.#aiCodeCompletion || !this.#editor || !hasActiveAiSuggestion(this.#editor.state)) {
+      return false;
+    }
+    if (this.#editor.state.field(aiAutoCompleteSuggestionState)?.source !== AiSuggestionSource.COMPLETION) {
+      return false;
+    }
+    const {accepted, suggestion} = acceptAiAutoCompleteSuggestion(this.#editor.editor);
+    if (!accepted) {
+      return false;
+    }
+    if (suggestion?.rpcGlobalId) {
+      this.#aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
+    }
+    this.#aiCodeCompletionConfig?.onSuggestionAccepted(this.#aiCodeCompletionCitations);
+    return true;
+  }
+
   #detachTeaser(): void {
     if (!this.#teaser) {
       return;

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

@@ -270,6 +270,9 @@ export class AiCodeGenerationProvider {
     if (!this.#aiCodeGeneration || !this.#editor || !hasActiveAiSuggestion(this.#editor.state)) {
       return false;
     }
+    if (this.#editor.state.field(aiAutoCompleteSuggestionState)?.source !== AiSuggestionSource.GENERATION) {
+      return false;
+    }
     const {accepted, suggestion} = acceptAiAutoCompleteSuggestion(this.#editor.editor);
     if (!accepted) {
       return false;

package/front_end/ui/helpers/OpenInNewTab.ts

@@ -57,6 +57,8 @@ import * as SDK from '../../core/sdk/sdk.js';
  *   Chrome ("stable", "beta", "dev", or "canary").
  *
  * @param url the URL to open in a new tab.
+ * @param allowPrivileged whether to also open URLs with privileged or other non-web-safe schemes. By default,
+ *     only URLs with web-safe schemes (see `Common.ParsedURL.hasWebSafeScheme`) are opened.
  * @throws TypeError if `url` is not a valid URL.
  * @see https://en.wikipedia.org/wiki/UTM_parameters
  */
@@ -66,6 +68,12 @@ export function openInNewTab(url: URL|string, allowPrivileged?: boolean): void {
     return;
   }
 
+  // Only open URLs with privileged or other non-web-safe schemes (such as `chrome:`, `devtools:`, or `file:`)
+  // when the caller explicitly allows it.
+  if (!allowPrivileged && !Common.ParsedURL.hasWebSafeScheme(url)) {
+    return;
+  }
+
   // Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
   // there using CDP if explicitly requested.
   if (allowPrivileged && Common.ParsedURL.schemeIs(url, 'chrome:')) {

package/front_end/ui/legacy/LinkContextMenuProvider.ts

@@ -28,7 +28,7 @@ export class LinkContextMenuProvider implements Provider<Node> {
     const node: Link = targetNode;
     contextMenu.revealSection().appendItem(openLinkExternallyLabel(), () => {
       if (node.href) {
-        UIHelpers.openInNewTab(node.href);
+        UIHelpers.openInNewTab(node.href, node.allowPrivileged);
       }
     }, {jslogContext: 'open-in-new-tab'});
     contextMenu.revealSection().appendItem(copyLinkAddressLabel(), () => {

package/front_end/ui/legacy/ListWidget.ts

@@ -351,12 +351,7 @@ export interface Delegate<T> {
   commitEdit(item: T, editor: Editor<T>, isNew: boolean): void;
 }
 
-export interface CustomEditorControl<T> extends HTMLElement {
-  value: T;
-  validate: () => ValidatorResult;
-}
-
-export type EditorControl<T = string> = (HTMLInputElement|HTMLSelectElement|CustomEditorControl<T>);
+export type EditorControl = HTMLInputElement|HTMLSelectElement;
 
 export class Editor<T> {
   element: HTMLDivElement;
@@ -364,9 +359,9 @@ export class Editor<T> {
   private commitButton: Buttons.Button.Button;
   private readonly cancelButton: Buttons.Button.Button;
   private errorMessageContainer: HTMLElement;
-  private readonly controls: EditorControl[] = [];
+  private readonly controls: HTMLElement[] = [];
   private readonly controlByName = new Map<string, EditorControl>();
-  private readonly validators: Array<(arg0: T, arg1: number, arg2: EditorControl) => ValidatorResult> = [];
+  private readonly validators: Array<(item: T, index: number) => ValidatorResult> = [];
   private commit: (() => void)|null = null;
   private cancel: (() => void)|null = null;
   private item: T|null = null;
@@ -429,7 +424,7 @@ export class Editor<T> {
     ARIAUtils.setLabel(input, title);
     this.controlByName.set(name, input);
     this.controls.push(input);
-    this.validators.push(validator);
+    this.validators.push((item, index) => validator(item, index, input));
     return input;
   }
 
@@ -453,18 +448,19 @@ export class Editor<T> {
     select.addEventListener('blur', this.validateControls.bind(this, false), false);
     this.controlByName.set(name, select);
     this.controls.push(select);
-    this.validators.push(validator);
+    this.validators.push((item, index) => validator(item, index, select));
     return select;
   }
 
-  createCustomControl<S, U extends CustomEditorControl<S>>(
-      name: string, ctor: {new(): U},
-      validator: (arg0: T, arg1: number, arg2: EditorControl) => ValidatorResult): CustomEditorControl<S> {
-    const control = new ctor();
-    this.controlByName.set(name, control as unknown as CustomEditorControl<string>);
-    this.controls.push(control as unknown as CustomEditorControl<string>);
+  /**
+   * Adds an existing element, for example the element of a widget, as an
+   * editor control. The editor marks the element as invalid when the
+   * validator fails. The caller keeps its own reference to the control to
+   * read and write its value.
+   */
+  addCustomControl(element: HTMLElement, validator: (item: T, index: number) => ValidatorResult): void {
+    this.controls.push(element);
     this.validators.push(validator);
-    return control;
   }
 
   control(name: string): EditorControl {
@@ -480,7 +476,7 @@ export class Editor<T> {
     this.errorMessageContainer.textContent = '';
     for (let index = 0; index < this.controls.length; ++index) {
       const input = this.controls[index];
-      const {valid, errorMessage} = this.validators[index].call(null, (this.item as T), this.index, input);
+      const {valid, errorMessage} = this.validators[index].call(null, (this.item as T), this.index);
 
       input.classList.toggle('error-input', !valid && !forceValid);
       if (valid || forceValid) {

package/front_end/ui/legacy/TabbedPane.ts

@@ -816,7 +816,10 @@ export class TabbedPane extends TabbedPaneBase {
       if (this.tabsElement.children[i] !== tab.tabElement) {
         this.tabsElement.insertBefore(tab.tabElement, this.tabsElement.children[i] ?? null);
       }
-      tab.shown = true;
+      if (!tab.shown) {
+        tab.shown = true;
+        tab.slotsAttached();
+      }
     }
 
     this.maybeShowDropDown(tabsToShowIndexes.length !== this.#tabs.length);
@@ -1429,13 +1432,53 @@ export class TabbedPaneTab {
     // next slot assignment recalc, so anything retained by the <slot> stays
     // alive after the tab is closed if no recalc follows.
     container.addEventListener('slotchange', () => {
-      this.#hasSlottedContent[kind] = slot.assignedElements().length > 0;
-      container.style.display = this.#hasSlottedContent[kind] ? '' : 'none';
+      // A detached <slot> has no assigned nodes, so `slotchange` also fires
+      // when the tab header is removed from the DOM (e.g. moved into the
+      // overflow drop-down). That doesn't reflect a change to the slotted
+      // content, so keep the current state (and the cached width) so that
+      // the tab keeps measuring the same while hidden. The state is synced
+      // again in `slotsAttached` once the header is re-attached.
+      if (!slot.isConnected) {
+        return;
+      }
+      this.#updateSlottedContent(kind, container, slot);
       delete this.measuredWidth;
       this.tabbedPane.requestUpdate();
     });
   }
 
+  #updateSlottedContent(kind: 'icon'|'suffix', container: HTMLElement, slot: HTMLSlotElement): boolean {
+    const hasSlottedContent = slot.assignedElements().length > 0;
+    if (hasSlottedContent === this.#hasSlottedContent[kind]) {
+      return false;
+    }
+    this.#hasSlottedContent[kind] = hasSlottedContent;
+    container.style.display = hasSlottedContent ? '' : 'none';
+    return true;
+  }
+
+  /**
+   * Called when the tab header is (re-)attached to the DOM. If the slotted
+   * content changed while the header was detached, no `slotchange` fires
+   * on re-attachment when the slot is still empty afterwards (its assigned
+   * nodes were already cleared on detach), so sync the state explicitly.
+   */
+  slotsAttached(): void {
+    let changed = false;
+    for (const kind of ['icon', 'suffix'] as const) {
+      const container = this.#slotContainers[kind];
+      const slot = container?.querySelector('slot');
+      if (container && slot?.isConnected) {
+        const updated = this.#updateSlottedContent(kind, container, slot);
+        changed = updated || changed;
+      }
+    }
+    if (changed) {
+      delete this.measuredWidth;
+      this.tabbedPane.requestUpdate();
+    }
+  }
+
   clearSlots(): void {
     // Detach the <slot> elements from the tab header so that Blink's
     // SlotAssignment cache cannot retain the tab element (and through its

package/front_end/ui/legacy/Toolbar.ts

@@ -1381,7 +1381,6 @@ export interface ToolbarItemRegistration {
 }
 
 export const enum ToolbarItemLocation {
-  FILES_NAVIGATION_TOOLBAR = 'files-navigator-toolbar',
   MAIN_TOOLBAR_RIGHT = 'main-toolbar-right',
   MAIN_TOOLBAR_LEFT = 'main-toolbar-left',
   STYLES_SIDEBARPANE_TOOLBAR = 'styles-sidebarpane-toolbar',

package/front_end/ui/legacy/Treeoutline.ts

@@ -1242,7 +1242,9 @@ export class TreeElement {
   select(omitFocus?: boolean, selectedByUser?: boolean): boolean {
     omitFocus = omitFocus || this.disableSelectFocus;
     if (!this.treeOutline || !this.selectable || this.selected) {
-      if (!omitFocus) {
+      // An inline editor or other interactive child may already hold the focus
+      // inside this row; re-selecting must not take it away from them.
+      if (!omitFocus && !this.listItemElement.hasFocus()) {
         this.listItemElement.focus();
       }
       return false;
@@ -1728,6 +1730,11 @@ class TreeViewTreeElement extends TreeElement {
     return super.onselect(selectedByUser);
   }
 
+  override async expandRecursively(maxDepth?: number): Promise<void> {
+    await super.expandRecursively(maxDepth);
+    this.listItemElement.dispatchEvent(new TreeViewElement.ExpandEvent({expanded: true, recursively: true}));
+  }
+
   override onenter(): boolean {
     const enterEvent = new TreeViewElement.EnterEvent();
     const shouldExpand = this.listItemElement.dispatchEvent(enterEvent);
@@ -2127,8 +2134,8 @@ export namespace TreeViewElement {
     }
   }
 
-  export class ExpandEvent extends CustomEvent<{expanded: boolean}> {
-    constructor(detail: {expanded: boolean}) {
+  export class ExpandEvent extends CustomEvent<{expanded: boolean, recursively?: boolean}> {
+    constructor(detail: {expanded: boolean, recursively?: boolean}) {
       super('expand', {detail});
     }
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -345,7 +345,7 @@ export function isBeingEdited(node?: Node|null): boolean {
 
   let currentElement: (Element|null)|Element = element;
   while (currentElement) {
-    if (elementsBeingEdited.has(element)) {
+    if (elementsBeingEdited.has(currentElement)) {
       return true;
     }
     currentElement = currentElement.parentElementOrShadowHost();
@@ -1244,7 +1244,10 @@ export class CheckboxLabel extends HTMLElement {
   }
 
   set checked(checked: boolean) {
-    this.toggleAttribute('checked', checked);
+    // Coerce explicitly: `toggleAttribute(name, undefined)` toggles the
+    // attribute instead of removing it, which would flip the state when a
+    // Lit `.checked=${...}` binding receives `undefined`.
+    this.toggleAttribute('checked', Boolean(checked));
   }
 
   get small(): boolean {

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

@@ -6,33 +6,46 @@
 import '../../../kit/kit.js';
 
 import type {Icon} from '../../../kit/kit.js';
-import {html, render} from '../../../lit/lit.js';
+import {Directives, html, render} from '../../../lit/lit.js';
 
 import type {CSSShadowModel} from './CSSShadowEditor.js';
 import cssShadowSwatchStyles from './cssShadowSwatch.css.js';
 
 export class CSSShadowSwatch extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #icon: Icon;
-  readonly #model: CSSShadowModel;
+  #model?: CSSShadowModel;
 
-  constructor(model: CSSShadowModel) {
+  constructor(model?: CSSShadowModel) {
     super();
     this.#model = model;
+    const icon = Directives.createRef<Icon>();
 
     // clang-format off
     render(html`
         <style>${cssShadowSwatchStyles}</style>
-        <devtools-icon tabindex=-1 name="shadow" class="shadow-swatch-icon"></devtools-icon>`,
-        this, {host: this});
+        <devtools-icon ${Directives.ref(icon)} tabindex=-1 name="shadow" class="shadow-swatch-icon"></devtools-icon>`,
+        this.#shadow, {host: this});
     // clang-format on
 
-    this.#icon = this.querySelector('devtools-icon') as Icon;
+    this.#icon = icon.value as Icon;
   }
 
   model(): CSSShadowModel {
+    return this.cssShadowModel;
+  }
+
+  get cssShadowModel(): CSSShadowModel {
+    if (!this.#model) {
+      throw new Error('No model set on CSSShadowSwatch');
+    }
     return this.#model;
   }
 
+  set cssShadowModel(model: CSSShadowModel) {
+    this.#model = model;
+  }
+
   iconElement(): Icon {
     return this.#icon;
   }

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

@@ -613,7 +613,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     }
   }
 
-  async expandRecursively(maxDepth: number): Promise<void> {
+  async expandRecursively(maxDepth = 3): Promise<void> {
     for (const node of this.#walk(maxDepth, n => n.canExpandRecursively)) {
       await node.populateChildrenIfNeeded();
       node.expanded = true;
@@ -1313,10 +1313,15 @@ export class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  onExpand = (expanded: boolean): void => {
-    if (this.#root) {
-      this.#root.expanded = expanded;
+  onExpand = (expanded: boolean, recursively = false): void => {
+    if (!this.#root) {
+      return;
+    }
+    if (expanded && recursively) {
+      void this.#root.expandRecursively();
+      return;
     }
+    this.#root.expanded = expanded;
   };
   override performUpdate(): void {
     if (!this.#root) {
@@ -1442,7 +1447,7 @@ export function populateObjectTreeContextMenu(contextMenu: UI.ContextMenu.Contex
 
 interface ObjectTreeViewInput extends ContextMenuHandlers {
   onShowAllProperties: (node: ObjectTreeNode) => void;
-  onExpand: (node: ObjectTreeNodeBase, expanded: boolean) => void;
+  onExpand: (node: ObjectTreeNodeBase, expanded: boolean, recursively?: boolean) => void;
   renderAsSubtree: boolean;
   objectTree?: ObjectTree;
   linkifier?: Components.Linkifier.Linkifier;
@@ -1466,7 +1471,7 @@ const OBJECT_TREE_DEFAULT_VIEW: ObjectTreeView = (input, output, target) => {
     };
 
     const onExpand = (e: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
-      input.onExpand(property, e.detail.expanded);
+      input.onExpand(property, e.detail.expanded, e.detail.recursively);
       e.consume(true);
     };
     const childCount = (property.children?.properties?.length ?? 0) +
@@ -1510,7 +1515,7 @@ const OBJECT_TREE_DEFAULT_VIEW: ObjectTreeView = (input, output, target) => {
 
   function renderArrayGroup(child: ArrayGroupTreeNode): LitTemplate {
     const onExpand = (e: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
-      input.onExpand(child, e.detail.expanded);
+      input.onExpand(child, e.detail.expanded, e.detail.recursively);
       e.consume(true);
     };
 
@@ -1684,7 +1689,11 @@ export class ObjectTreeWidget extends UI.Widget.Widget {
     }
   }
 
-  onExpand = (node: ObjectTreeNodeBase, expanded: boolean): void => {
+  onExpand = (node: ObjectTreeNodeBase, expanded: boolean, recursively = false): void => {
+    if (expanded && recursively) {
+      void node.expandRecursively().then(() => this.requestUpdate());
+      return;
+    }
     if (node.expanded !== expanded) {
       node.expanded = expanded;
       this.requestUpdate();
@@ -1822,7 +1831,7 @@ interface ObjectPropertiesSectionViewInput {
   skipProto: boolean;
   showOverflow: boolean;
   onRootItemContextMenu: (menu: UI.ContextMenu.ContextMenu) => void;
-  onExpand: (expanded: boolean) => void;
+  onExpand: (expanded: boolean, recursively?: boolean) => void;
 }
 
 type ObjectPropertiesSectionView = (input: ObjectPropertiesSectionViewInput, output: object, target: HTMLElement) =>
@@ -1849,8 +1858,8 @@ export const OBJECT_PROPERTIES_SECTION_DEFAULT_VIEW: ObjectPropertiesSectionView
         <style>${objectPropertiesSectionStyles}</style>
         <li role="treeitem" class="object-properties-section-root-element" toggle-on-click ?open=${
                      input.objectTree.expanded} @expand=${
-                     (e: Event) => input.onExpand((e as UI.TreeOutline.TreeViewElement.ExpandEvent)
-                                                      .detail.expanded)} @contextmenu=${onRootItemContextMenuHandler}>
+                     (e: UI.TreeOutline.TreeViewElement.ExpandEvent) => input.onExpand(
+                         e.detail.expanded, e.detail.recursively)} @contextmenu=${onRootItemContextMenuHandler}>
           ${input.title}
           <ul role="group" ${widget(ObjectTreeWidget, {
                    objectTree: input.objectTree,

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

@@ -23,7 +23,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/XMLView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = Lit;
-const {ifExpanded} = UI.TreeOutline;
 
 function* attributes(element: Element): Generator<Attr> {
   for (let i = 0; i < element.attributes.length; ++i) {
@@ -111,7 +110,7 @@ function htmlView(treeNode: XMLTreeViewNode): Lit.LitTemplate {
 }
 
 interface ViewInput {
-  onExpand(node: XMLTreeViewNode, expanded: boolean): void;
+  onExpand(node: XMLTreeViewNode, expanded: boolean, recursively?: boolean): void;
   xml: XMLTreeViewNode;
   search: UI.TreeOutline.TreeSearch<XMLTreeViewNode, SearchResult>|undefined;
   jumpToNextSearchResult: SearchResult|undefined;
@@ -140,7 +139,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
   function layOutNode(node: XMLTreeViewNode): Lit.LitTemplate {
     const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void =>
-        input.onExpand(node, event.detail.expanded);
+        input.onExpand(node, event.detail.expanded, event.detail.recursively);
     const {highlights, selected} = highlight(node, /* closeTag=*/ false);
 
     const containsSearchResult = (node: XMLTreeViewNode): boolean => {
@@ -155,18 +154,20 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       return false;
     };
 
+    const isExpanded = node.expanded || containsSearchResult(node);
+
     // clang-format off
     return html`
       <li role="treeitem"
           ?selected=${input.jumpToNextSearchResult?.node === node}
           @expand=${onExpand}
-          ?open=${containsSearchResult(node)}>
+          ?open=${isExpanded}>
         <devtools-highlight ranges=${highlights} current-range=${selected}>
           ${htmlView(node)}
         </devtools-highlight>
         ${node.children().length ? html`
           <ul role="group">
-            ${ifExpanded(subtree(node))}
+            ${isExpanded ? subtree(node) : Lit.nothing}
           </ul>` : Lit.nothing}
       </li>`;
     // clang-format on
@@ -253,6 +254,18 @@ export class XMLTreeViewNode {
     return this.children();
   }
 
+  expandRecursively(maxDepth = 3): void {
+    this.expanded = true;
+    if (maxDepth <= 1) {
+      return;
+    }
+    for (const child of this.children()) {
+      if (child.children().length > 0) {
+        child.expandRecursively(maxDepth - 1);
+      }
+    }
+  }
+
   match(regex: RegExp, closeTag: boolean): RegExpStringIterator<RegExpExecArray> {
     return textView(this, closeTag).matchAll(regex);
   }
@@ -294,8 +307,15 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
 
   override performUpdate(): void {
     if (this.#treeViewModel) {
-      const onExpand = (node: XMLTreeViewNode, expanded: boolean): void => {
-        node.expanded = expanded;
+      const onExpand = (node: XMLTreeViewNode, expanded: boolean, recursively = false): void => {
+        if (node.expanded === expanded && !recursively) {
+          return;
+        }
+        if (expanded && recursively) {
+          node.expandRecursively();
+        } else {
+          node.expanded = expanded;
+        }
         this.requestUpdate();
       };
       this.#view(

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -284,6 +284,7 @@ export const knownContextValues: Set<string> = new Set([
   'accept-execute-code',
   'access-control-allow-origin',
   'accessibility-announcements.filter-by-type',
+  'accessibility-announcements.resizer',
   'accessibility-default',
   'accessibility-tree',
   'accessibility.clear-announcements',
@@ -773,6 +774,7 @@ export const knownContextValues: Set<string> = new Set([
   'browserLanguage',
   'bs',
   'buffered-rendering',
+  'buffering',
   'button',
   'bypass-service-worker',
   'ca',
@@ -2817,6 +2819,8 @@ export const knownContextValues: Set<string> = new Set([
   'manage-settings',
   'manager-custom-headers',
   'manifest',
+  'manifest-id',
+  'manifest-id-start-url',
   'manifest.copy-id',
   'margin',
   'margin-block',
@@ -4173,6 +4177,7 @@ export const knownContextValues: Set<string> = new Set([
   'stylesheet',
   'styling',
   'styling-default',
+  'sub-apps',
   'subdomain',
   'subgrid',
   'subgrid-how',

package/package.json

@@ -91,5 +91,5 @@
     "yargs": "18.1.0",
     "yargs-unparser": "2.0.0"
   },
-  "version": "1.0.1721762"
+  "version": "1.0.1726686"
 }