chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/front_end/panels/console/ConsoleSidebar.ts

@@ -76,7 +76,7 @@ interface ViewInput {
   onSelectionChanged: (selectedFilter: ConsoleFilter) => void;
 }
 
-export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
   render(
       html`<devtools-tree
@@ -115,7 +115,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               </li>`)}
         </ul>`}
         ></devtools-tree>`,
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`}}});
 };
 
 export class ConsoleFilterGroup {
@@ -173,7 +173,8 @@ const CONSOLE_API_PARSED_FILTERS = [{
   regex: undefined,
 }];
 
-export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox<ShadowRoot>>(
+    UI.Widget.VBox) {
   #view: View;
   readonly #groups = [
     new ConsoleFilterGroup(GroupName.ALL, [], ConsoleFilter.allLevelsFilterValue()),
@@ -189,8 +190,7 @@ export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {
-      jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`,
-      useShadowDom: true,
+      useShadowDom: 'pure',
     });
     this.#view = view;
     this.setMinimumSize(125, 0);

package/front_end/panels/console/ConsoleView.ts

@@ -1959,15 +1959,22 @@ export class ConsoleViewFilter {
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     switch (actionId) {
-      case 'console.toggle':
-        if (ConsoleView.instance().hasFocus() && UI.InspectorView.InspectorView.instance().drawerVisible()) {
-          UI.InspectorView.InspectorView.instance().closeDrawer();
+      case 'console.toggle': {
+        const inspectorView = UI.InspectorView.InspectorView.instance();
+        const consoleView = ConsoleView.instance();
+        if (inspectorView.drawerVisible() && !inspectorView.isDrawerMinimized() && consoleView.isShowing() &&
+            consoleView.hasFocus()) {
+          inspectorView.minimizeDrawer();
           return true;
         }
+        if (inspectorView.drawerVisible() && inspectorView.isDrawerMinimized()) {
+          inspectorView.setDrawerMinimized(false);
+        }
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
         Common.Console.Console.instance().show();
-        ConsoleView.instance().focusPrompt();
+        consoleView.focusPrompt();
         return true;
+      }
       case 'console.clear':
         ConsoleView.instance().clearConsole();
         return true;

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -238,24 +238,6 @@ export const getMessageForElement = (element: Element): ConsoleViewMessage|undef
   return elementToMessage.get(element);
 };
 
-/**
- * Combines the error description (essentially the `Error#stack` property value)
- * with the `issueSummary`.
- *
- * @param description the `description` property of the `Error` remote object.
- * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
- * @returns the enriched description.
- * @see https://goo.gle/devtools-reduce-network-noise-design
- */
-export const concatErrorDescriptionAndIssueSummary = (description: string, issueSummary: string): string => {
-  // Insert the issue summary right after the error message.
-  const pos = description.indexOf('\n');
-  const prefix = pos === -1 ? description : description.substring(0, pos);
-  const suffix = pos === -1 ? '' : description.substring(pos);
-  description = `${prefix}. ${issueSummary}${suffix}`;
-  return description;
-};
-
 // This value reflects the 18px min-height of .console-message.
 // Keep in sync with consoleView.css.
 const defaultConsoleRowHeight = 18;
@@ -1948,7 +1930,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
     const issueSummary = exceptionDetails?.exceptionMetaData?.issueSummary;
     if (typeof issueSummary === 'string') {
-      string = concatErrorDescriptionAndIssueSummary(string, issueSummary);
+      string = StackTrace.ErrorStackParser.concatErrorDescriptionAndIssueSummary(string, issueSummary);
     }
 
     const linkInfos = StackTrace.ErrorStackParser.parseSourcePositionsFromErrorStack(runtimeModel, string);

package/front_end/panels/coverage/CoverageView.ts

@@ -153,7 +153,7 @@ export interface CoverageViewOutput {
   focusResults: () => void;
 }
 
-export type View = (input: CoverageViewInput, output: CoverageViewOutput, target: HTMLElement) => void;
+export type View = (input: CoverageViewInput, output: CoverageViewOutput, target: DocumentFragment) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format off
@@ -234,7 +234,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         <div class="coverage-message">
             ${input.statusMessage}
         </div>
-    </div>`, target);
+    </div>`, target, {container: {attributes: {jslog: `${VisualLogging.panel('coverage').track({resize: true})}`}}});
   // clang-format on
 };
 
@@ -282,7 +282,7 @@ function renderReloadPromptPage(message: Common.UIString.LocalizedString, classN
   // clang-format on
 }
 
-export class CoverageView extends UI.Widget.VBox {
+export class CoverageView extends UI.Widget.VBox<ShadowRoot> {
   #model: CoverageModel|null;
   #decorationManager: CoverageDecorationManager|null;
   readonly #coverageTypeComboBoxSetting: Common.Settings.Setting<number>;
@@ -303,8 +303,7 @@ export class CoverageView extends UI.Widget.VBox {
 
   constructor(view: View = DEFAULT_VIEW) {
     super({
-      jslog: `${VisualLogging.panel('coverage').track({resize: true})}`,
-      useShadowDom: true,
+      useShadowDom: 'pure',
       delegatesFocus: true,
     });
     this.registerRequiredCSS(coverageViewStyles);

package/front_end/panels/elements/ElementsPanel.ts

@@ -544,16 +544,15 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     if (selectedNode) {
-      const activeNode = ElementsComponents.Helper.legacyNodeToElementsComponentsNode(selectedNode);
-      const crumbs = [activeNode];
+      const crumbs = [selectedNode];
 
       for (let current: (SDK.DOMModel.DOMNode|null) = selectedNode.parentNode; current; current = current.parentNode) {
-        crumbs.push(ElementsComponents.Helper.legacyNodeToElementsComponentsNode(current));
+        crumbs.push(current);
       }
 
       this.breadcrumbs.data = {
         crumbs,
-        selectedNode: ElementsComponents.Helper.legacyNodeToElementsComponentsNode(selectedNode),
+        selectedNode,
       };
 
       if (this.accessibilityTreeView) {
@@ -938,16 +937,14 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
      */
 
     // Get the current set of active crumbs
-    const activeNode = ElementsComponents.Helper.legacyNodeToElementsComponentsNode(selectedNode);
-    const existingCrumbs = [activeNode];
+    const existingCrumbs = [selectedNode];
     for (let current: (SDK.DOMModel.DOMNode|null) = selectedNode.parentNode; current; current = current.parentNode) {
-      existingCrumbs.push(ElementsComponents.Helper.legacyNodeToElementsComponentsNode(current));
+      existingCrumbs.push(current);
     }
 
     /* Get the change nodes from the event & convert them to breadcrumb nodes */
-    const newNodes = nodes.map(ElementsComponents.Helper.legacyNodeToElementsComponentsNode);
-    const nodesThatHaveChangedMap = new Map<number, ElementsComponents.Helper.DOMNode>();
-    newNodes.forEach(crumb => nodesThatHaveChangedMap.set(crumb.id, crumb));
+    const nodesThatHaveChangedMap = new Map<Protocol.DOM.NodeId, SDK.DOMModel.DOMNode>();
+    nodes.forEach(crumb => nodesThatHaveChangedMap.set(crumb.id, crumb));
 
     /* Loop over our existing crumbs, and if any have an ID that matches an ID from the new nodes
      * that we have, use the new node, rather than the one we had, because it's changed.
@@ -959,12 +956,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.breadcrumbs.data = {
       crumbs: newSetOfCrumbs,
-      selectedNode: activeNode,
+      selectedNode,
     };
   }
 
   private crumbNodeSelected(event: ElementsComponents.ElementsBreadcrumbs.NodeSelectedEvent): void {
-    this.selectDOMNode(event.legacyDomNode, true);
+    this.selectDOMNode(event.node, true);
   }
 
   private leaveUserAgentShadowDOM(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode {

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -7,13 +7,12 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-export class ElementsSidebarPane extends UI.Widget.VBox {
+export class ElementsSidebarPane<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElement> extends
+    UI.Widget.VBox<ContentTypeT> {
   protected computedStyleModelInternal: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
   constructor(
-      computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, options: UI.Widget.WidgetOptions = {}) {
-    options.useShadowDom = options.useShadowDom ?? true;
-    options.classes = options.classes ?? [];
-    options.classes.push('flex-none');
+      computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel,
+      options: UI.Widget.WidgetOptions<ContentTypeT>) {
     super(options);
     this.computedStyleModelInternal = computedStyleModel;
     this.computedStyleModelInternal.addEventListener(

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1586,6 +1586,67 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.treeOutline?.updateNodeElementToIssue(nodeElement, issues);
   }
 
+  removeIssue(issue: IssuesManager.Issue.Issue): void {
+    if (!this.#elementIssues.has(issue.primaryKey())) {
+      return;
+    }
+
+    this.#removeIssueStyleAndTooltip(issue);
+    this.#elementIssues.delete(issue.primaryKey());
+  }
+
+  #removeIssueStyleAndTooltip(issue: IssuesManager.Issue.Issue): void {
+    const elementIssueDetails = getElementIssueDetails(issue);
+    if (!elementIssueDetails) {
+      return;
+    }
+
+    if (elementIssueDetails.attribute) {
+      this.#undoHighlightViolatingAttr(elementIssueDetails.attribute, issue);
+    } else {
+      this.#undoHighlightTagAsViolating(issue);
+    }
+  }
+
+  #undoHighlightViolatingAttr(name: string, issue: IssuesManager.Issue.Issue): void {
+    const violatingAttributes = this.listItemElement.querySelectorAll('.webkit-html-attribute-name.violating-element');
+    for (const attributeElement of violatingAttributes) {
+      if (attributeElement.textContent === name) {
+        this.#removeFromNodeElementToIssue(attributeElement, issue);
+        if (!this.#nodeElementToIssue.has(attributeElement)) {
+          attributeElement.classList.remove('violating-element');
+        }
+      }
+    }
+  }
+
+  #undoHighlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
+    const tagElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
+    if (!tagElement) {
+      return;
+    }
+
+    this.#removeFromNodeElementToIssue(tagElement, issue);
+    if (!this.#nodeElementToIssue.has(tagElement)) {
+      tagElement.classList.remove('violating-element');
+    }
+  }
+
+  #removeFromNodeElementToIssue(nodeElement: Element, issue: IssuesManager.Issue.Issue): void {
+    let issues = this.#nodeElementToIssue.get(nodeElement);
+    if (!issues) {
+      return;
+    }
+
+    issues = issues.filter(i => i !== issue);
+    if (issues.length === 0) {
+      this.#nodeElementToIssue.delete(nodeElement);
+    } else {
+      this.#nodeElementToIssue.set(nodeElement, issues);
+    }
+    this.treeOutline?.updateNodeElementToIssue(nodeElement, issues);
+  }
+
   expandedChildrenLimit(): number {
     return this.#expandedChildrenLimit;
   }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -639,6 +639,8 @@ export class ElementsTreeOutline extends
 
     this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
     this.#issuesManager.addEventListener(IssuesManager.IssuesManager.Events.ISSUE_ADDED, this.#onIssueAdded, this);
+    this.#issuesManager.addEventListener(
+        IssuesManager.IssuesManager.Events.ISSUE_HIDDEN_STATUS_UPDATED, this.#onIssueHiddenStatusUpdated, this);
 
     this.treeElementByNode = new WeakMap();
     const shadowContainer = document.createElement('div');
@@ -774,6 +776,20 @@ export class ElementsTreeOutline extends
     void this.#addTreeElementIssue(event.data.issue);
   }
 
+  #onIssueHiddenStatusUpdated(
+      event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueHiddenStatusUpdatedEvent>): void {
+    const issue = event.data.issue;
+    if (!issue) {
+      return;
+    }
+
+    if (issue.isHidden()) {
+      void this.#removeTreeElementIssue(issue);
+      return;
+    }
+    void this.#addTreeElementIssue(issue);
+  }
+
   #addAllElementIssues(): void {
     if (!this.#issuesManager) {
       return;
@@ -784,6 +800,10 @@ export class ElementsTreeOutline extends
   }
 
   async #addTreeElementIssue(issue: IssuesManager.Issue.Issue): Promise<void> {
+    if (issue.isHidden()) {
+      return;
+    }
+
     const elementIssueDetails = getElementIssueDetails(issue);
     if (!elementIssueDetails) {
       return;
@@ -810,6 +830,28 @@ export class ElementsTreeOutline extends
     }
   }
 
+  async #removeTreeElementIssue(issue: IssuesManager.Issue.Issue): Promise<void> {
+    const elementIssueDetails = getElementIssueDetails(issue);
+    if (!elementIssueDetails) {
+      return;
+    }
+    const {nodeId} = elementIssueDetails;
+    if (!this.rootDOMNode || !nodeId) {
+      return;
+    }
+    const deferredDOMNode = new SDK.DOMModel.DeferredDOMNode(this.rootDOMNode.domModel().target(), nodeId);
+    const node = await deferredDOMNode.resolvePromise();
+
+    if (!node) {
+      return;
+    }
+
+    const treeElement = this.findTreeElement(node);
+    if (treeElement) {
+      treeElement.removeIssue(issue);
+    }
+  }
+
   deindentSingleNode(): void {
     const firstChild = this.firstChild();
     if (!firstChild || (firstChild && !firstChild.isExpandable())) {
@@ -818,6 +860,10 @@ export class ElementsTreeOutline extends
   }
 
   updateNodeElementToIssue(element: Element, issues: IssuesManager.Issue.Issue[]): void {
+    if (!issues || issues.length === 0) {
+      this.#nodeElementToIssues.delete(element);
+      return;
+    }
     this.#nodeElementToIssues.set(element, issues);
   }
 

package/front_end/panels/elements/LayersWidget.ts

@@ -73,7 +73,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLEl
                            .data=${data}></devtools-tree-outline>
   </div>
   `;
-  render(template, target);
+  render(template, target, {container: {attributes: {jslog: `${VisualLogging.pane('css-layers')}`}}});
 };
 
 let layersWidgetInstance: LayersWidget;
@@ -84,7 +84,7 @@ export class LayersWidget extends UI.Widget.Widget {
   #layerToReveal: string|null = null;
 
   constructor(view: View = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('css-layers')}`});
+    super();
     this.#view = view;
   }
 

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -53,7 +53,7 @@ interface ViewInput {
   onStartEditing: (target: Element, box: string, styleProperty: string, computedStyle: Map<string, string>) => void;
 }
 
-type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+type View = (input: ViewInput, output: undefined, target: HTMLElement|DocumentFragment) => void;
 
 const DEFAULT_VIEW: View = (input, output, target) => {
   const {style, highlightedMode, node, contentWidth, contentHeight, onHighlightNode, onStartEditing} = input;
@@ -177,11 +177,12 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     <div class="metrics ${!node ? 'collapsed' : ''}" @mouseover=${(e: Event) => { e.consume(); onHighlightNode(true, 'all'); }}
         @mouseleave=${(e: Event) => { e.consume(); onHighlightNode(false, 'all'); }}>
       ${previousBox}
-    </div>`, target);
+    </div>`,
+      target, {container: {classes: ['flex-none'], attributes: {jslog: `${VisualLogging.section('styles-metrics')}`}}});
   // clang-format on
 };
 
-export class MetricsSidebarPane extends ElementsSidebarPane {
+export class MetricsSidebarPane extends ElementsSidebarPane<ShadowRoot> {
   originalPropertyData: SDK.CSSProperty.CSSProperty|null;
   previousPropertyDataCandidate: SDK.CSSProperty.CSSProperty|null;
   private inlineStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration|null;
@@ -191,7 +192,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   private view: View;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, view = DEFAULT_VIEW) {
-    super(computedStyleModel, {jslog: `${VisualLogging.pane('styles-metrics')}`});
+    super(computedStyleModel, {useShadowDom: 'pure'});
     this.registerRequiredCSS(metricsSidebarPaneStyles);
 
     this.originalPropertyData = null;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -1181,7 +1181,7 @@ export class StylePropertiesSection {
 
     const containerElement = new ElementsComponents.QueryContainer.QueryContainer();
     containerElement.data = {
-      container: ElementsComponents.Helper.legacyNodeToElementsComponentsNode(container.containerNode),
+      container: container.containerNode,
       queryName: containerQuery.name,
       onContainerLinkClick: event => {
         event.preventDefault();

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3655,15 +3655,20 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     this.#clearGhostTextInValue();
-    this.valueElement.createChild('span', 'ghost-value-prediction').textContent = text;
+    if (this.value) {
+      // If there is an existing value, and user is editing the name field
+      // which leads to a new value suggestion, then the previous value should no
+      // longer be valid.
+      this.listItemElement.classList.add('not-parsed-ok', 'invalid-property-value');
+    }
+    const ghostTextElement = document.createElement('span');
+    ghostTextElement.classList.add('ghost-value-prediction');
+    ghostTextElement.textContent = text;
+    this.valueElement.insertAdjacentElement('afterend', ghostTextElement);
   }
 
   #clearGhostTextInValue(): void {
-    if (!this.valueElement) {
-      return;
-    }
-    const ghostElement = this.valueElement.querySelector('.ghost-value-prediction');
-    ghostElement?.remove();
+    this.listItemElement.querySelector('.ghost-value-prediction')?.remove();
   }
 }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -224,7 +224,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #aiCodeCompletionSummaryToolbar?: PanelsCommon.AiCodeCompletionSummaryToolbar;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
-    super(computedStyleModel, {delegatesFocus: true});
+    super(computedStyleModel, {delegatesFocus: true, useShadowDom: true, classes: ['flex-none']});
     this.setMinimumSize(96, 26);
     this.registerRequiredCSS(stylesSidebarPaneStyles);
     Common.Settings.Settings.instance().moduleSetting('text-editor-indent').addChangeListener(this.requestUpdate, this);
@@ -2261,6 +2261,9 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       return;
     }
 
+    if (!this.queryRange) {
+      this.queryRange = new TextUtils.TextRange.TextRange(0, 0, 0, this.text().length);
+    }
     this.treeElement.section().activeAiSuggestion = {
       text: args.text,
       properties: this.#getAiSuggestedProperties(args.text),

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -7,7 +7,7 @@ import '../../../ui/kit/kit.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -15,7 +15,6 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import elementsBreadcrumbsStyles from './elementsBreadcrumbs.css.js';
 import {crumbsToRender, type UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
-import type {DOMNode} from './Helper.js';
 
 const {html} = Lit;
 
@@ -39,25 +38,25 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class NodeSelectedEvent extends Event {
   static readonly eventName = 'breadcrumbsnodeselected';
-  legacyDomNode: SDK.DOMModel.DOMNode;
+  node: SDK.DOMModel.DOMNode;
 
-  constructor(node: DOMNode) {
+  constructor(node: SDK.DOMModel.DOMNode) {
     super(NodeSelectedEvent.eventName, {});
-    this.legacyDomNode = node.legacyDomNode;
+    this.node = node;
   }
 }
 
 export interface ElementsBreadcrumbsData {
-  selectedNode: DOMNode|null;
-  crumbs: DOMNode[];
+  selectedNode: SDK.DOMModel.DOMNode|null;
+  crumbs: SDK.DOMModel.DOMNode[];
 }
 
 export class ElementsBreadcrumbs extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #resizeObserver = new ResizeObserver(() => this.#checkForOverflowOnResize());
 
-  #crumbsData: readonly DOMNode[] = [];
-  #selectedDOMNode: Readonly<DOMNode>|null = null;
+  #crumbsData: readonly SDK.DOMModel.DOMNode[] = [];
+  #selectedDOMNode: SDK.DOMModel.DOMNode|null = null;
   #overflowing = false;
   #userScrollPosition: UserScrollPosition = 'start';
   #isObservingResize = false;
@@ -75,7 +74,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
     this.#resizeObserver.disconnect();
   }
 
-  #onCrumbClick(node: DOMNode): (event: Event) => void {
+  #onCrumbClick(node: SDK.DOMModel.DOMNode): (event: Event) => void {
     return (event: Event): void => {
       event.preventDefault();
       this.dispatchEvent(new NodeSelectedEvent(node));
@@ -121,20 +120,20 @@ export class ElementsBreadcrumbs extends HTMLElement {
     void this.#updateScrollState(crumbWindow);
   }
 
-  #onCrumbMouseMove(node: DOMNode): () => void {
-    return (): void => node.highlightNode();
+  #onCrumbMouseMove(node: SDK.DOMModel.DOMNode): () => void {
+    return (): void => node.highlight();
   }
 
-  #onCrumbMouseLeave(node: DOMNode): () => void {
-    return (): void => node.clearHighlight();
+  #onCrumbMouseLeave(): void {
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
   }
 
-  #onCrumbFocus(node: DOMNode): () => void {
-    return (): void => node.highlightNode();
+  #onCrumbFocus(node: SDK.DOMModel.DOMNode): () => void {
+    return (): void => node.highlight();
   }
 
-  #onCrumbBlur(node: DOMNode): () => void {
-    return (): void => node.clearHighlight();
+  #onCrumbBlur(): void {
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
   }
 
   #engageResizeObserver(): void {
@@ -306,9 +305,9 @@ export class ElementsBreadcrumbs extends HTMLElement {
                     jslog=${VisualLogging.item().track({click:true, resize:true})}
                     @click=${this.#onCrumbClick(crumb.node)}
                     @mousemove=${this.#onCrumbMouseMove(crumb.node)}
-                    @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
+                    @mouseleave=${this.#onCrumbMouseLeave}
                     @focus=${this.#onCrumbFocus(crumb.node)}
-                    @blur=${this.#onCrumbBlur(crumb.node)}
+                    @blur=${this.#onCrumbBlur}
                   >
                     <devtools-node-text data-node-title=${crumb.title.main} .data=${{
                       nodeTitle: crumb.title.main,

package/front_end/panels/elements/components/ElementsBreadcrumbsUtils.ts

@@ -3,8 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-
-import type {DOMNode} from './Helper.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
 
 const UIStrings = {
   /**
@@ -21,8 +20,7 @@ export type UserScrollPosition = 'start'|'middle'|'end';
 export interface Crumb {
   title: CrumbTitle;
   selected: boolean;
-  node: DOMNode;
-  originalNode: unknown;
+  node: SDK.DOMModel.DOMNode;
 }
 
 export interface CrumbTitle {
@@ -30,25 +28,25 @@ export interface CrumbTitle {
   extras: {id?: string, classes?: string[]};
 }
 
-export const crumbsToRender = (crumbs: readonly DOMNode[], selectedNode: Readonly<DOMNode>|null): Crumb[] => {
-  if (!selectedNode) {
-    return [];
-  }
+export const crumbsToRender =
+    (crumbs: readonly SDK.DOMModel.DOMNode[], selectedNode: SDK.DOMModel.DOMNode|null): Crumb[] => {
+      if (!selectedNode) {
+        return [];
+      }
 
-  return crumbs
-      .filter(crumb => {
-        return crumb.nodeType !== Node.DOCUMENT_NODE;
-      })
-      .map(crumb => {
-        return {
-          title: determineElementTitle(crumb),
-          selected: crumb.id === selectedNode.id,
-          node: crumb,
-          originalNode: crumb.legacyDomNode,
-        };
-      })
-      .reverse();
-};
+      return crumbs
+          .filter(crumb => {
+            return crumb.nodeType() !== Node.DOCUMENT_NODE;
+          })
+          .map(crumb => {
+            return {
+              title: determineElementTitle(crumb),
+              selected: crumb.id === selectedNode.id,
+              node: crumb,
+            };
+          })
+          .reverse();
+    };
 
 const makeCrumbTitle = (main: string, extras = {}): CrumbTitle => {
   return {
@@ -57,13 +55,15 @@ const makeCrumbTitle = (main: string, extras = {}): CrumbTitle => {
   };
 };
 
-export const determineElementTitle = (domNode: DOMNode): CrumbTitle => {
-  switch (domNode.nodeType) {
+export const determineElementTitle = (domNode: SDK.DOMModel.DOMNode): CrumbTitle => {
+  const nodeType = domNode.nodeType();
+  switch (nodeType) {
     case Node.ELEMENT_NODE: {
-      if (domNode.pseudoType) {
-        return makeCrumbTitle('::' + domNode.pseudoType);
+      const pseudoType = domNode.pseudoType();
+      if (pseudoType) {
+        return makeCrumbTitle('::' + pseudoType);
       }
-      const crumbTitle = makeCrumbTitle(domNode.nodeNameNicelyCased);
+      const crumbTitle = makeCrumbTitle(domNode.nodeNameInCorrectCase());
 
       const id = domNode.getAttribute('id');
       if (id) {
@@ -86,8 +86,8 @@ export const determineElementTitle = (domNode: DOMNode): CrumbTitle => {
     case Node.DOCUMENT_TYPE_NODE:
       return makeCrumbTitle('<!doctype>');
     case Node.DOCUMENT_FRAGMENT_NODE:
-      return makeCrumbTitle(domNode.shadowRootType ? '#shadow-root' : domNode.nodeNameNicelyCased);
+      return makeCrumbTitle(domNode.shadowRootType() ? '#shadow-root' : domNode.nodeNameInCorrectCase());
     default:
-      return makeCrumbTitle(domNode.nodeNameNicelyCased);
+      return makeCrumbTitle(domNode.nodeNameInCorrectCase());
   }
 };