chrome-devtools-frontend 1.0.1699061 → 1.0.1701636

package/front_end/panels/common/ExtensionServer.ts

@@ -34,6 +34,7 @@ const kForbiddenSchemes = [
   'chrome-error:',
   'chrome-search:',
   'devtools:',
+  'isolated-app:',
 ];
 
 declare global {
@@ -44,6 +45,18 @@ declare global {
 
 let extensionServerInstance: ExtensionServer|null;
 
+function parseCanonicalURL(url: Platform.DevToolsPath.UrlString): URL|null {
+  try {
+    let parsedURL = new URL(url);
+    while (parsedURL.protocol === 'blob:' || parsedURL.protocol === 'filesystem:') {
+      parsedURL = new URL(parsedURL.href.slice(parsedURL.protocol.length));
+    }
+    return parsedURL;
+  } catch {
+    return null;
+  }
+}
+
 export class HostsPolicy {
   static create(policy?: Host.InspectorFrontendHostAPI.ExtensionHostsPolicy): HostsPolicy|null {
     const runtimeAllowedHosts = [];
@@ -98,12 +111,11 @@ class RegisteredExtension {
       return false;
     }
 
-    let parsedURL;
-    try {
-      parsedURL = new URL(inspectedURL);
-    } catch {
+    const parsedURL = parseCanonicalURL(inspectedURL);
+    if (!parsedURL) {
       return false;
     }
+    inspectedURL = parsedURL.href as Platform.DevToolsPath.UrlString;
 
     if (parsedURL.protocol === 'chrome-extension:') {
       if (parsedURL.origin !== this.origin) {
@@ -584,7 +596,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 +605,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 +1121,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 +1132,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 +1194,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 +1534,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 {
@@ -1818,12 +1839,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   static canInspectURL(url: Platform.DevToolsPath.UrlString): boolean {
-    let parsedURL;
     // This is only to work around invalid URLs we're occasionally getting from some tests.
     // TODO(caseq): make sure tests supply valid URLs or we specifically handle invalid ones.
-    try {
-      parsedURL = new URL(url);
-    } catch {
+    const parsedURL = parseCanonicalURL(url);
+    if (!parsedURL) {
       return false;
     }
 

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 {
@@ -153,7 +155,23 @@
     padding: var(--sys-size-4) var(--sys-size-5);
   }
 
+  .tooltip-link {
+    display: block;
+    margin-top: var(--sys-size-4);
+    color: var(--sys-color-primary);
+    padding-left: 0;
+    background: none;
+    border: none;
+    font: inherit;
+    text-decoration: underline;
+    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/console/ConsolePrompt.ts

@@ -459,7 +459,7 @@ export class ConsolePrompt extends ConsolePromptBase {
         ?.evaluateCommandInConsole(executionContext, message, expression, useCommandLineAPI);
   }
 
-  private async substituteNames(expression: string, mapping: Map<string, string|null>): Promise<string> {
+  private async substituteNames(expression: string, mapping: Array<Map<string, string|null>>): Promise<string> {
     try {
       return await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(expression, mapping);
     } catch {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1030,7 +1030,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));
         return;
       }
-      const treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline(
+      const treeOutline = new Elements.DOMTreeWidget.ElementsTreeOutline(
           /* omitRootDOMNode: */ false, /* selectEnabled: */ true, /* hideGutter: */ true);
       treeOutline.rootDOMNode = node;
       treeOutline.deindentSingleNode();

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -359,7 +359,8 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
 
     let completions: string[] = await this.classNamesPromise;
     const classesMap = this.nodeClasses((selectedNode));
-    completions = completions.filter(value => !classesMap.get(value));
+    const existingClasses = new Set(expression.split(/[,\s]/).map(className => className.trim()).filter(Boolean));
+    completions = completions.filter(value => !classesMap.get(value) && !existingClasses.has(value));
 
     if (prefix[0] === '.') {
       completions = completions.map(value => '.' + value);

package/front_end/panels/elements/DOMTreeContextMenu.ts

@@ -9,9 +9,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
 
 import {canGetJSPath} from './DOMPath.js';
+import type {DOMTreeWidget} from './DOMTreeWidget.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement} from './ElementsTreeElement.js';
-import type {DOMTreeWidget} from './ElementsTreeOutline.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/{ElementsTreeOutline.ts → DOMTreeWidget.ts}

@@ -75,7 +75,7 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 import {TopLayerContainer} from './TopLayerContainer.js';
 
-const {html, nothing, render, Directives: {classMap, repeat, styleMap}} = Lit;
+const {html, nothing, render, Directives: {classMap, ifDefined, repeat, styleMap}} = Lit;
 
 const UIStrings = {
   /**
@@ -101,7 +101,7 @@ const UIStrings = {
    */
   reveal: 'reveal',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/elements/DOMTreeWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, ElementsTreeOutline>();
 
@@ -919,6 +919,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     // clang-format off
     return html`
       <li role="treeitem"
+          data-backend-node-id=${ifDefined(node.backendNodeId())}
+          data-target-id=${ifDefined(node.domModel().target().id())}
           selectable=${input.selectEnabled ? 'true' : 'false'}
           ?selected=${isSelected && !input.selectedClosingTag}
           class=${classes}
@@ -977,7 +979,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           },
           updateRecord: input.updateRecordForNode?.(node) ?? null,
         })}${hasChildren ? html`<ul role="group">
-            ${UI.TreeOutline.ifExpanded(html`
+            ${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`
@@ -997,6 +999,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
               ${needsClosingTag ? html`
                 <li role="treeitem"
+                    data-backend-node-id=${ifDefined(node.backendNodeId())}
+                    data-target-id=${ifDefined(node.domModel().target().id())}
                     selectable=${input.selectEnabled ? 'true' : 'false'}
                     ?selected=${isSelected && Boolean(input.selectedClosingTag)}
                     class=${classMap({
@@ -1034,7 +1038,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                     updateRecord: input.updateRecordForNode?.(node) ?? null,
                   })}</li>
               ` : nothing}
-            `)}
+            ` : nothing}
           </ul>` : nothing}</li>
     `;
     // clang-format on
@@ -1062,7 +1066,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}
@@ -1348,7 +1352,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       element?: HTMLElement,
       [changeTracker]:
           UI.Widget.WidgetDependencies<typeof DOMTreeWidget>|[ChangeTracker.ChangeTracker.ChangeTracker?] = [],
-      view: View = DEFAULT_VIEW,
+      view: View = DECLARATIVE_VIEW,
   ) {
     super(element, {
       useShadowDom: false,
@@ -1358,12 +1362,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#changeTracker = changeTracker;
     this.#showHTMLCommentsSetting.addChangeListener(this.#onShowHTMLCommentsChange, this);
     if (Common.Settings.Settings.instance().moduleSetting('highlight-node-on-hover-in-overlay').get()) {
-      SDK.TargetManager.TargetManager.instance().addModelListener(
-          SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED, this.#highlightNode, this,
-          {scoped: true});
-      SDK.TargetManager.TargetManager.instance().addModelListener(
-          SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED,
-          this.#clearHighlightedNode, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
+                                                                  SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED,
+                                                                  this.#highlightNode, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
+                                                                  SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED,
+                                                                  this.#clearHighlightedNode, this, {scoped: true});
     }
     this.#setupPopovers();
   }
@@ -1464,7 +1468,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     if (domModel.existingDocument()) {
       this.rootDOMNode = domModel.existingDocument();
     }
-    this.onDocumentUpdated(domModel);
   }
 
   #updateModifiedNodesTimeout?: number;
@@ -1518,12 +1521,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();
   }
 
@@ -1671,6 +1674,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);
@@ -2241,7 +2249,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           this.onDocumentUpdated(domModel);
         } else {
           void domModel.requestDocument().then(document => {
-            if (document && this.isShowing()) {
+            if (document && this.isShowing() && this.#wiredDOMModels.has(domModel)) {
               this.rootDOMNode = document;
               this.onDocumentUpdated(domModel);
             }
@@ -2265,6 +2273,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         this.#wiredDOMModels.delete(domModel);
         this.#unwireDOMModel(domModel);
       }
+      if (this.#rootDOMNode?.domModel() === domModel) {
+        this.#rootDOMNode = null;
+        this.#selectedDOMNode = null;
+        this.#expandedNodes.clear();
+        this.#updateRecords.clear();
+      }
       this.performUpdate();
       return;
     }
@@ -3137,7 +3151,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           this.onDocumentUpdated(domModel);
         } else if (this.#view === DECLARATIVE_VIEW) {
           void domModel.requestDocument().then(document => {
-            if (document && this.isShowing()) {
+            if (document && this.isShowing() && this.#wiredDOMModels.has(domModel)) {
               this.rootDOMNode = document;
               this.onDocumentUpdated(domModel);
             }
@@ -3468,8 +3482,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
   }
 
   selectedNodeChanged(focus: boolean): void {
-    this.dispatchEventToListeners(
-        ElementsTreeOutline.Events.SelectedNodeChanged, {node: this.selectedDOMNodeInternal, focus});
+    this.dispatchEventToListeners(ElementsTreeOutline.Events.SelectedNodeChanged,
+                                  {node: this.selectedDOMNodeInternal, focus});
   }
 
   private fireElementsTreeUpdated(nodes: SDK.DOMModel.DOMNode[]): void {
@@ -3783,8 +3797,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     domModel.addEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.documentURLChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.addEventListener(
-        SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.addEventListener(SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated,
+                              this.affectedByStartingStylesFlagUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
   }
 
@@ -3799,8 +3813,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.documentURLChanged, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.removeEventListener(
-        SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated,
+                                 this.affectedByStartingStylesFlagUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
     elementsTreeOutlineByDOMModel.delete(domModel);
   }
@@ -4022,8 +4036,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     return false;
   }
 
-  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], isClosingTag?: boolean):
-      UI.TreeOutline.TreeElement {
+  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
+                                   isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     if (node instanceof Array) {
       return new AdoptedStyleSheetSetTreeElement(node);
     }
@@ -4198,9 +4212,9 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     this.#updateChildren(treeElement);
   }
 
-  insertChildElement(
-      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
-      index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
+  insertChildElement(treeElement: ElementsTreeElement|TopLayerContainer,
+                     child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], index: number,
+                     isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
     return newElement;
@@ -4233,8 +4247,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
 
     // Remove any tree elements that no longer have this node as their parent and save
     // all existing elements that could be reused. This also removes closing tag element.
-    const existingTreeElements = new Map<
-        SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], UI.TreeOutline.TreeElement&ElementsTreeElement>();
+    const existingTreeElements = new Map<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
+                                         UI.TreeOutline.TreeElement&ElementsTreeElement>();
     for (let i = treeElement.childCount() - 1; i >= 0; --i) {
       const existingTreeElement = treeElement.childAt(i);
       if (!(existingTreeElement instanceof ElementsTreeElement)) {

package/front_end/panels/elements/ElementsPanel.ts

@@ -51,8 +51,8 @@ import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import {ColorSwatchPopoverIcon} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
+import {DOMTreeWidget, type ElementsTreeOutline} from './DOMTreeWidget.js';
 import elementsPanelStyles from './elementsPanel.css.js';
-import {DOMTreeWidget, type ElementsTreeOutline} from './ElementsTreeOutline.js';
 import {LayoutPane} from './LayoutPane.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -67,10 +67,10 @@ import * as Media from '../media/media.js';
 
 import * as ElementsComponents from './components/components.js';
 import {cssPath} from './DOMPath.js';
+import {type ElementsTreeOutline, MappedCharToEntity} from './DOMTreeWidget.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
-import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
@@ -3178,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/ShortcutTreeElement.ts

@@ -40,8 +40,8 @@ import * as Lit from '../../ui/lit/lit.js';
 import * as VisualElements from '../../ui/visual_logging/visual_logging.js';
 
 import * as ElementsComponents from './components/components.js';
+import {ElementsTreeOutline} from './DOMTreeWidget.js';
 import {adornerRef, ElementsTreeElement, handleAdornerKeydown} from './ElementsTreeElement.js';
-import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
 const {html, render} = Lit;
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2044,7 +2044,7 @@ export class AnchorFunctionRenderer extends AnchorFunctionRendererBase {
 
   override render(match: SDK.CSSPropertyParserMatchers.AnchorFunctionMatch, context: RenderingContext): Node[] {
     const content = document.createElement('span');
-    if (match.node.name === 'VariableName') {
+    if (match.node.name !== 'CallExpression') {
       // Link an anchor double-dashed ident to its matching anchor element.
       void AnchorFunctionRenderer.decorateAnchorForAnchorLink(this.#stylesContainer, content, {identifier: match.text});
     } else {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -729,9 +729,6 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
   }
 
   setEditingStyle(editing: boolean): void {
-    if (editing) {
-      this.isSuppressingResets = false;
-    }
     if (this.isEditingStyle === editing) {
       return;
     }
@@ -816,12 +813,13 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
   #scheduleResetUpdateIfNotEditing(): void {
     this.scheduleResetUpdateIfNotEditingCalledForTest();
 
-    if (this.isSuppressingResets) {
+    // Don't schedule if editing; the edit completion will handle the update.
+    if (this.userOperation || this.isEditingStyle) {
       return;
     }
 
-    // Don't schedule if editing; the edit completion will handle the update.
-    if (this.userOperation || this.isEditingStyle) {
+    if (this.isSuppressingResets) {
+      this.isSuppressingResets = false;
       return;
     }
 

package/front_end/panels/elements/TopLayerContainer.ts

@@ -6,7 +6,7 @@ import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {ElementsTreeOutline} from './ElementsTreeOutline.js';
+import type {ElementsTreeOutline} from './DOMTreeWidget.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {

package/front_end/panels/elements/elements.ts

@@ -10,7 +10,7 @@ import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
 import './AdoptedStyleSheetTreeElement.js';
 import './TopLayerContainer.js';
-import './ElementsTreeOutline.js';
+import './DOMTreeWidget.js';
 import './ImagePreviewPopover.js';
 import './EventListenersWidget.js';
 import './MarkerDecorator.js';
@@ -42,11 +42,11 @@ import * as CSSSpecificityBreakdown from './CSSSpecificityBreakdown.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
 import * as DOMPath from './DOMPath.js';
 import * as DOMTreeContextMenu from './DOMTreeContextMenu.js';
+import * as DOMTreeWidget from './DOMTreeWidget.js';
 import * as ElementsPanel from './ElementsPanel.js';
 import * as ElementsSidebarPane from './ElementsSidebarPane.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
 import * as ElementsTreeElement from './ElementsTreeElement.js';
-import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 import * as EventListenersWidget from './EventListenersWidget.js';
 import * as ImagePreviewPopover from './ImagePreviewPopover.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
@@ -80,11 +80,12 @@ export {
   CSSValueTraceView,
   DOMPath,
   DOMTreeContextMenu,
+  DOMTreeWidget,
+  DOMTreeWidget as ElementsTreeOutline,
   ElementsPanel,
   ElementsSidebarPane,
   ElementStatePaneWidget,
   ElementsTreeElement,
-  ElementsTreeOutline,
   EventListenersWidget,
   ImagePreviewPopover,
   InspectElementModeController,