chrome-devtools-frontend 1.0.1698733 → 1.0.1700561

package/front_end/panels/common/CommentsOverlayWidget.ts

@@ -4,13 +4,15 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as CommentManager from '../../models/comment_manager/comment_manager.js';
 import * as Comments from '../../ui/comments/comments.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import commentsOverlayStyles from './commentsOverlay.css.js';
-import {CommentThreadWidget} from './CommentThreadWidget.js';
+import {CommentThreadWidget, type Title} from './CommentThreadWidget.js';
 
 const {
   html,
@@ -27,6 +29,7 @@ export interface ViewInput {
   onPinClick: (threadId: string) => void;
   activeThread: CommentManager.CommentManager.CommentThread|null;
   activePin: Comments.CommentOverlayManager.PinPositionData|null;
+  title: Title;
   onAddComment: (text: string) => void;
 }
 
@@ -96,6 +99,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
               )}px`,
             })}>
             ${UI.Widget.widget(CommentThreadWidget, {
+              title: input.title,
               comments: [...item.thread.comments],
               onAddComment: input.onAddComment,
             })}
@@ -115,6 +119,8 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   readonly #commentManager: CommentManager.CommentManager.CommentManager;
   #commentOverlayManager: Comments.CommentOverlayManager.CommentOverlayManager;
   #activeThreadId: string|null = null;
+  #cachedTitle: Title = {text: ''};
+  #cachedTitleAnchor: CommentManager.CommentManager.CommentAnchorSignature|null = null;
 
   constructor(
       element: HTMLElement|undefined,
@@ -157,6 +163,11 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
         this.#onCommentModeChanged,
         this,
     );
+    this.#commentManager.addEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        this.#onAgentAttachedChanged,
+        this,
+    );
 
     this.requestUpdate();
   }
@@ -184,10 +195,25 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
         this.#onCommentModeChanged,
         this,
     );
+    this.#commentManager.removeEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        this.#onAgentAttachedChanged,
+        this,
+    );
 
     super.willHide();
   }
 
+  #onAgentAttachedChanged(
+      event: Common.EventTarget.EventTargetEvent<
+          CommentManager.CommentManager.EventTypes[CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED]>,
+      ): void {
+    if (!event.data) {
+      this.#activeThreadId = null;
+    }
+    this.requestUpdate();
+  }
+
   #onCommentModeChanged(
       event: Common.EventTarget.EventTargetEvent<
           CommentManager.CommentManager.EventTypes[CommentManager.CommentManager.Events.COMMENT_MODE_CHANGED]>,
@@ -213,6 +239,43 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  async #getOrComputeTitle(anchor: CommentManager.CommentManager.CommentAnchorSignature|null): Promise<Title> {
+    if (anchor === this.#cachedTitleAnchor) {
+      return this.#cachedTitle;
+    }
+    const title = anchor ? await this.#computeTitle(anchor) : {text: ''};
+    this.#cachedTitleAnchor = anchor;
+    this.#cachedTitle = title;
+    return title;
+  }
+
+  async #computeTitle(anchor: CommentManager.CommentManager.CommentAnchorSignature): Promise<Title> {
+    if (anchor.node) {
+      const target = SDK.TargetManager.TargetManager.instance().targetById(anchor.node.targetId);
+      if (target) {
+        const deferredNode = new SDK.DOMModel.DeferredDOMNode(
+            target,
+            anchor.node.backendNodeId as Protocol.DOM.BackendNodeId,
+        );
+        const node = await deferredNode.resolvePromise();
+        if (node) {
+          return {node};
+        }
+      }
+      return {text: ''};
+    }
+
+    if (anchor.networkRequestId) {
+      const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+      const request = target?.model(SDK.NetworkManager.NetworkManager)?.requestForId(anchor.networkRequestId);
+      if (request) {
+        return {text: request.name()};
+      }
+    }
+
+    return {text: anchor.textSignature || ''};
+  }
+
   #handlePinClick = (threadId: string): void => {
     const thread = this.#commentManager.getCommentThread(threadId);
     if (this.#activeThreadId === threadId) {
@@ -227,16 +290,34 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     this.requestUpdate();
   };
 
-  override performUpdate(): void {
+  override async performUpdate(signal?: AbortSignal): Promise<void> {
+    if (!this.#commentManager.isAgentAttached()) {
+      this.#view(
+          {
+            pins: [],
+            highlights: [],
+            hoverHighlight: null,
+            commentMode: false,
+            onPinClick: this.#handlePinClick,
+            activeThread: null,
+            activePin: null,
+            title: {text: ''},
+            onAddComment: () => {},
+          },
+          undefined,
+          this.contentElement,
+      );
+      return;
+    }
+
+    const activeThread =
+        this.#activeThreadId ? this.#commentManager.getCommentThread(this.#activeThreadId) ?? null : null;
+    const title = await this.#getOrComputeTitle(activeThread?.anchor ?? null);
+    signal?.throwIfAborted();
+
     const pins = this.#commentOverlayManager.getPinPositions();
     const highlights = this.#commentOverlayManager.getHighlightRects();
-
-    let activePin: Comments.CommentOverlayManager.PinPositionData|null = null;
-    let activeThread: CommentManager.CommentManager.CommentThread|null = null;
-    if (this.#activeThreadId) {
-      activePin = pins.find(p => p.id === this.#activeThreadId) ?? null;
-      activeThread = this.#commentManager.getCommentThread(this.#activeThreadId) ?? null;
-    }
+    const activePin = this.#activeThreadId ? pins.find(p => p.id === this.#activeThreadId) ?? null : null;
 
     const viewInput: ViewInput = {
       pins,
@@ -246,6 +327,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
       onPinClick: this.#handlePinClick,
       activeThread,
       activePin,
+      title,
       onAddComment: (text: string) => {
         activeThread?.save(text);
       },
@@ -291,3 +373,27 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     }
   }
 }
+
+export class ButtonProvider implements UI.Toolbar.Provider {
+  readonly #button: UI.Toolbar.ToolbarButton;
+  readonly #commentManager: CommentManager.CommentManager.CommentManager;
+
+  constructor(commentManager?: CommentManager.CommentManager.CommentManager) {
+    this.#commentManager = commentManager ??
+        Root.DevToolsContext.globalInstance().get(
+            CommentManager.CommentManager.CommentManager,
+        );
+    this.#button = UI.Toolbar.Toolbar.createActionButton('comments.toggle-comment-mode');
+    this.#button.setVisible(this.#commentManager.isAgentAttached());
+    this.#commentManager.addEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        event => {
+          this.#button.setVisible(event.data);
+        },
+    );
+  }
+
+  item(): UI.Toolbar.ToolbarItem|null {
+    return this.#button;
+  }
+}

package/front_end/panels/common/CommentsStatusBarPill.ts

@@ -72,6 +72,11 @@ export class CommentsStatusBarPill extends UI.Widget.Widget {
         this.#onThreadsChanged,
         this,
     );
+    this.#commentManager.addEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        this.#onThreadsChanged,
+        this,
+    );
     this.requestUpdate();
   }
 
@@ -81,12 +86,19 @@ export class CommentsStatusBarPill extends UI.Widget.Widget {
         this.#onThreadsChanged,
         this,
     );
+    this.#commentManager.removeEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        this.#onThreadsChanged,
+        this,
+    );
     super.willHide();
   }
 
   override performUpdate(): void {
     const viewInput: ViewInput = {
-      threads: this.#commentManager.getCommentThreads().filter(thread => thread.status !== 'DRAFT'),
+      threads: this.#commentManager.isAgentAttached() ?
+          this.#commentManager.getCommentThreads().filter(thread => thread.status !== 'DRAFT') :
+          [],
       onPillClick: this.#handlePillClick,
     };
     this.#view(viewInput, undefined, this.contentElement);

package/front_end/panels/common/ExtensionServer.ts

@@ -584,7 +584,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.subscribers.has(type);
   }
 
-  private postNotification(type: string, args: unknown[], filter?: (extension: RegisteredExtension) => boolean): void {
+  private postNotification(type: string, args: unknown[], filter?: (extension: RegisteredExtension) => boolean,
+                           argsForExtension?: (extension: RegisteredExtension) => unknown[]): void {
     if (!this.extensionsEnabled) {
       return;
     }
@@ -592,18 +593,22 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!subscribers) {
       return;
     }
-    const message = {command: 'notify-' + type, arguments: args};
     for (const subscriber of subscribers) {
       if (!this.extensionEnabled(subscriber)) {
         continue;
       }
-      if (filter) {
+      let extension: RegisteredExtension|undefined;
+      if (filter || argsForExtension) {
         const origin = extensionOrigins.get(subscriber);
-        const extension = origin && this.registeredExtensions.get(origin);
-        if (!extension || !filter(extension)) {
+        extension = origin && this.registeredExtensions.get(origin);
+        if (!extension || (filter && !filter(extension))) {
           continue;
         }
       }
+      const message = {
+        command: 'notify-' + type,
+        arguments: extension && argsForExtension ? argsForExtension(extension) : args,
+      };
       subscriber.postMessage(message);
     }
   }
@@ -1104,10 +1109,9 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.evaluate(expression, true, true, evaluateOptions, this.getExtensionOrigin(port), callback.bind(this));
   }
 
-  private harEntryReferencesBlockedURL(entry: HAR.Log.EntryDTO, extension: RegisteredExtension): boolean {
+  private sanitizeHarEntry(entry: HAR.Log.EntryDTO, extension: RegisteredExtension): HAR.Log.EntryDTO {
     const baseURL = entry.request.url;
 
-    // Helper to cleanly resolve and check permission
     const isBlocked = (url: string|undefined): boolean => {
       if (!url) {
         return false;
@@ -1116,44 +1120,49 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         const absoluteURL = new URL(url, baseURL).toString() as Platform.DevToolsPath.UrlString;
         return !extension.isAllowedOnTarget(absoluteURL);
       } catch {
-        return true;  // Fallback safely: treat unparsable URLs as blocked
+        return true;
       }
     };
 
-    if (isBlocked(entry.response.redirectURL)) {
-      return true;
-    }
+    let initiator = entry._initiator;
     if (entry._initiator) {
       if (isBlocked(entry._initiator.url)) {
-        return true;
-      }
-      let stack = entry._initiator.stack;
-      while (stack) {
-        if (stack.callFrames.some(f => isBlocked(f.url))) {
-          return true;
+        initiator = null;
+      } else {
+        let stack = entry._initiator.stack;
+        while (stack) {
+          if (stack.callFrames.some(f => isBlocked(f.url))) {
+            initiator = null;
+            break;
+          }
+          stack = stack.parent;
         }
-        stack = stack.parent;
       }
     }
-    for (const header of entry.response.headers) {
+
+    const headerReferencesBlockedURL = (header: {name: string, value: string}): boolean => {
       const name = header.name.toLowerCase();
       if (name === 'location' || name === 'content-location') {
-        if (isBlocked(header.value)) {
-          return true;
-        }
-      } else if (name === 'refresh') {
+        return isBlocked(header.value);
+      }
+      if (name === 'refresh') {
         const match = header.value.match(/;\s*url\s*=\s*(.+)$/i);
-        if (isBlocked(match?.[1]?.trim())) {
-          return true;
-        }
-      } else if (name === 'link') {
+        return isBlocked(match?.[1]?.trim());
+      }
+      if (name === 'link') {
         const urls = [...header.value.matchAll(/<([^>]+)>/g)].map(m => m[1]);
-        if (urls.some(url => isBlocked(url))) {
-          return true;
-        }
+        return urls.some(url => isBlocked(url));
       }
+      return false;
+    };
+
+    const headers = entry.response.headers.filter(header => !headerReferencesBlockedURL(header));
+    const redirectURL = isBlocked(entry.response.redirectURL) ? '' : entry.response.redirectURL;
+    if (initiator === entry._initiator && headers.length === entry.response.headers.length &&
+        redirectURL === entry.response.redirectURL) {
+      return entry;
     }
-    return false;
+    return {...entry, _initiator: initiator, response: {...entry.response, headers, redirectURL}};
   }
 
   private async onGetHAR(message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage, port: MessagePort):
@@ -1173,7 +1182,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       // @ts-expect-error
       harLog.entries[i]._requestId = this.requestId(requests[i]);
     }
-    harLog.entries = harLog.entries.filter(entry => !this.harEntryReferencesBlockedURL(entry, extension));
+    harLog.entries = harLog.entries.map(entry => this.sanitizeHarEntry(entry, extension));
     return harLog;
   }
 
@@ -1513,8 +1522,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.postNotification(
         Extensions.ExtensionAPI.PrivateAPI.Events.NetworkRequestFinished, [this.requestId(request), entry],
         extension => extension.isAllowedOnTarget(entry.request.url as Platform.DevToolsPath.UrlString) &&
-            (!targetUrl || extension.isAllowedOnTarget(targetUrl)) &&
-            !this.harEntryReferencesBlockedURL(entry, extension));
+            (!targetUrl || extension.isAllowedOnTarget(targetUrl)),
+        extension => [this.requestId(request), this.sanitizeHarEntry(entry, extension)]);
   }
 
   private notifyElementsSelectionChanged(): void {

package/front_end/panels/common/GeminiRebrandPromoDialog.ts

@@ -26,7 +26,7 @@ const UIStrings = {
   /**
    * @description ARIA label for the dialog.
    */
-  dialogAriaLabel: 'Gemini 3 Flash in DevTools',
+  dialogAriaLabel: '`Gemini 3 Flash` in `DevTools`',
   /**
    * @description Button text for dismissing the dialog.
    */

package/front_end/panels/common/commentThreadWidget.css

@@ -27,6 +27,7 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
+    gap: var(--sys-size-4);
   }
 
   .sent-status {
@@ -35,6 +36,7 @@
     gap: var(--sys-size-2);
     font-size: var(--sys-typescale-body5-size);
     color: var(--sys-color-on-surface-subtle);
+    flex-shrink: 0;
   }
 
   .check-icon {
@@ -165,7 +167,11 @@
     cursor: pointer;
   }
 
+  .selected-item devtools-widget,
   .selected-item-text {
+    display: block;
+    flex: 0 1 auto;
+    min-width: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

package/front_end/panels/common/common-meta.ts

@@ -65,7 +65,10 @@ UI.ActionRegistration.registerActionExtension({
 });
 
 UI.Toolbar.registerToolbarItem({
-  actionId: 'comments.toggle-comment-mode',
+  async loadItem() {
+    const Common = await loadCommonModule();
+    return new Common.CommentsOverlayWidget.ButtonProvider();
+  },
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,
   order: 1,
   condition: isCommentsEnabled,

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -72,7 +72,7 @@ const UIStrings = {
    * @example {Arial} PH5
    */
   fontVariationSettingsWarning:
-      'Value for setting "{PH1}" {PH2} is outside the supported range [{PH3}, {PH4}] for font-family "{PH5}"',
+      'Value for setting "{PH1}" {PH2} is outside the supported range [{PH3}, {PH4}] for font-family "{PH5}".',
   /**
    * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect on flex or grid child items.
    * @example {flex} CONTAINER_DISPLAY_NAME

package/front_end/panels/elements/ElementsPanel.ts

@@ -868,7 +868,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
         // If any of these properties are undefined or reset to an invalid value,
         // this means the search/highlight request is outdated.
-        const highlightRequestValid = this.searchConfig && this.searchResults && (this.currentSearchResultIndex !== -1);
+        const highlightRequestValid =
+            this.searchConfig && this.searchResults && (this.currentSearchResultIndex === index);
         if (highlightRequestValid) {
           this.highlightCurrentSearchResult();
         }
@@ -877,12 +878,11 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     void searchResult.node.scrollIntoView();
-    if (searchResult.node) {
-      this.#domTreeWidget.highlightMatch(searchResult.node, this.searchConfig?.query);
-    }
+    this.#domTreeWidget.highlightMatch(searchResult.node, this.searchConfig?.query);
   }
 
   private hideSearchHighlights(): void {
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(this.#targetManager);
     if (!this.searchResults?.length || this.currentSearchResultIndex === -1) {
       return;
     }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1821,11 +1821,16 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
   }
 
-  hideSearchHighlights(): void {
+  #clearHighlights(): void {
     Highlighting.HighlightManager.HighlightManager.instance().removeHighlights(this.#highlights);
     this.#highlights = [];
   }
 
+  hideSearchHighlights(): void {
+    this.#searchQuery = null;
+    this.#clearHighlights();
+  }
+
   setInClipboard(inClipboard: boolean): void {
     if (this.inClipboard === inClipboard) {
       return;
@@ -2949,7 +2954,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   #highlightSearchResults(): void {
-    this.hideSearchHighlights();
+    this.#clearHighlights();
 
     if (!this.searchQuery) {
       return;
@@ -3173,6 +3178,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           drag: true,
           click: true,
         })}`);
+    this.listItemElement.setAttribute('data-backend-node-id', String(node.backendNodeId()));
+    this.listItemElement.setAttribute('data-target-id', node.domModel().target().id());
 
     this.widgetWrapper = document.createElement('div');
     this.widgetWrapper.style.display = 'contents';

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -919,6 +919,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     // clang-format off
     return html`
       <li role="treeitem"
+          selectable=${input.selectEnabled ? 'true' : 'false'}
           ?selected=${isSelected && !input.selectedClosingTag}
           class=${classes}
           style=${styleMap({'--indent': `${computeLeftIndent(depth, isExpandable)}px`})}
@@ -933,8 +934,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           @dragleave=${on(onDragLeave)}
           @drop=${on(onDrop)}
           @dragend=${on(onDragEnd)}
-          jslog=${treeItemJslog(undefined, true)}>
-        ${UI.Widget.widget(ElementsTreeWidget, {
+          jslog=${treeItemJslog(undefined, true)}>${UI.Widget.widget(ElementsTreeWidget, {
           node,
           isClosingTag: false,
           renderSelection: false,
@@ -976,32 +976,28 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
             }
           },
           updateRecord: input.updateRecordForNode?.(node) ?? null,
-        })}
-        ${hasChildren ? html`
-          <ul role="group">
-            ${UI.TreeOutline.ifExpanded(html`
+        })}${hasChildren ? html`<ul role="group">
+            ${isExpanded && !isEditingAsHTML ? html`
               ${node.adoptedStyleSheetsForNode.length > 0 ? renderAdoptedStyleSheets(node, depth + 1) : nothing}
               ${repeat(children, child => child.id, child => renderNode(child, depth + 1))}
               ${remainingChildrenCount > 0 ? html`
                 <li role="treeitem"
+                    selectable="false"
                     class="elements-tree-expand-all"
                     style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
-                    jslog=${treeItemJslog('show-all-nodes')}>
-                  <devtools-button
+                    jslog=${treeItemJslog('show-all-nodes')}><devtools-button
                       .variant=${Buttons.Button.Variant.OUTLINED}
                       title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}
                       @click=${on((event: Event) => {
                         event.stopPropagation();
                         input.onExpandAllChildren?.(node);
-                      })}>
-                    ${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}
-                  </devtools-button>
-                </li>
+                      })}>${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}</devtools-button></li>
               ` : nothing}
               ${node.isInsertionPoint() ? node.distributedNodes().map(distributedNode => renderShortcut(distributedNode, depth + 1)) : nothing}
               ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
               ${needsClosingTag ? html`
                 <li role="treeitem"
+                    selectable=${input.selectEnabled ? 'true' : 'false'}
                     ?selected=${isSelected && Boolean(input.selectedClosingTag)}
                     class=${classMap({
                       selected: isSelected && Boolean(input.selectedClosingTag),
@@ -1018,8 +1014,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                     @dragover=${on(onClosingTagDragOver)}
                     @dragleave=${on(onDragLeave)}
                     @drop=${on(onClosingTagDrop)}
-                    @dragend=${on(onDragEnd)}>
-                  ${UI.Widget.widget(ElementsTreeWidget, {
+                    @dragend=${on(onDragEnd)}>${UI.Widget.widget(ElementsTreeWidget, {
                     node,
                     isClosingTag: true,
                     renderSelection: false,
@@ -1037,13 +1032,10 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                       }
                     },
                     updateRecord: input.updateRecordForNode?.(node) ?? null,
-                  })}
-                </li>
+                  })}</li>
               ` : nothing}
-            `)}
-          </ul>
-        ` : nothing}
-      </li>
+            ` : nothing}
+          </ul>` : nothing}</li>
     `;
     // clang-format on
   };
@@ -1070,7 +1062,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     <style>${CodeHighlighter.codeHighlighterStyles}</style>
     <div class=${disclosureClasses} style=${disclosureStyles}>
       <devtools-tree
-        class="elements-tree-outline source-code ${input.wrap ? '' : 'elements-tree-nowrap'} ${input.hideGutter ? 'elements-hide-gutter' : ''} ${isSingleNode ? 'single-node' : ''}"
+        class="elements-tree-outline ${input.wrap ? '' : 'elements-tree-nowrap'} ${input.hideGutter ? 'elements-hide-gutter' : ''} ${isSingleNode ? 'single-node' : ''}"
         disclosure-class="elements-disclosure ${isSingleNode ? 'single-node' : ''} ${input.maxRowsShown ? 'elements-tree-truncated' : ''}"
         jslog=${VisualLogging.tree('elements')}
         ?show-selection-on-keyboard-focus=${input.showSelectionOnKeyboardFocus}
@@ -1096,19 +1088,16 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               const root = input.rootDOMNode;
               return html`
                 <li role="treeitem"
+                    selectable="false"
                     class="elements-tree-expand-all"
                     style=${styleMap({'--indent': `${computeLeftIndent(0, false)}px`})}
-                    jslog=${treeItemJslog('show-all-nodes')}>
-                  <devtools-button
+                    jslog=${treeItemJslog('show-all-nodes')}><devtools-button
                     .variant=${Buttons.Button.Variant.OUTLINED}
                     title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}
                     @click=${on((event: Event) => {
                       event.stopPropagation();
                       input.onExpandAllChildren?.(root);
-                    })}>
-                    ${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}
-                  </devtools-button>
-                </li>
+                    })}>${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}</devtools-button></li>
               `;
             })() : nothing}
             ${input.omitRootDOMNode && input.rootDOMNode instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(input.rootDOMNode, 0) : nothing}
@@ -1475,7 +1464,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     if (domModel.existingDocument()) {
       this.rootDOMNode = domModel.existingDocument();
     }
-    this.onDocumentUpdated(domModel);
   }
 
   #updateModifiedNodesTimeout?: number;
@@ -1529,12 +1517,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, parent: SDK.DOMModel.DOMNode}>): void {
     const {node, parent} = event.data;
     this.resetClipboardIfNeeded(node);
-    if (this.#selectedDOMNode && (this.#selectedDOMNode === node || node.isAncestor(this.#selectedDOMNode))) {
-      this.selectDOMNode(this.#findNextNodeOnRemoval(node, parent), true);
-    }
     if (parent) {
       this.#addUpdateRecord(parent).nodeRemoved(node);
     }
+    if (this.#selectedDOMNode && (this.#selectedDOMNode === node || node.isAncestor(this.#selectedDOMNode))) {
+      this.selectDOMNode(this.#findNextNodeOnRemoval(node, parent), true);
+    }
     this.#updateModifiedNodesSoon();
   }
 
@@ -1682,6 +1670,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
     this.#selectedAdoptedStyleSheet = null;
     if (this.#view === DECLARATIVE_VIEW) {
+      if (node?.nodeType() === Node.TEXT_NODE && node.parentNode &&
+          (!nodeHasVisibleChildren(node.parentNode, this.rootDOMNode, this.maxTreeDepth, this.omitRootDOMNode) ||
+           !getVisibleChildren(node.parentNode, this.#showComments).includes(node))) {
+        node = node.parentNode;
+      }
       const isSameNode = this.#selectedDOMNode === node && this.#selectedClosingTag === Boolean(isClosingTag);
       this.#selectedDOMNode = node;
       this.#selectedClosingTag = Boolean(isClosingTag);
@@ -2326,9 +2319,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#searchMatchQuery = query ?? null;
     if (this.selectedDOMNode() !== node) {
       this.selectDOMNode(node, /* focus= */ false);
-    } else {
-      this.performUpdate();
     }
+    this.performUpdate();
   }
 
   hideMatchHighlights(node: SDK.DOMModel.DOMNode): void {