chrome-devtools-frontend 1.0.1656291 → 1.0.1657110

package/front_end/panels/elements/ElementsPanel.ts

@@ -214,13 +214,25 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private cssStyleTrackerByCSSModel: Map<SDK.CSSModel.CSSModel, SDK.CSSModel.CSSPropertyTracker>;
   #domTreeWidget: DOMTreeWidget;
   #computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
+  readonly #targetManager: SDK.TargetManager.TargetManager;
+  readonly #settings: Common.Settings.Settings;
+
+  get settings(): Common.Settings.Settings {
+    return this.#settings;
+  }
+
+  get targetManager(): SDK.TargetManager.TargetManager {
+    return this.#targetManager;
+  }
 
   getTreeOutlineForTesting(): ElementsTreeOutline|undefined {
     return this.#domTreeWidget.getTreeOutlineForTesting();
   }
 
-  constructor() {
+  constructor(targetManager?: SDK.TargetManager.TargetManager, settings?: Common.Settings.Settings) {
     super('elements');
+    this.#targetManager = targetManager ?? SDK.TargetManager.TargetManager.instance();
+    this.#settings = settings ?? Common.Settings.Settings.instance();
     this.registerRequiredCSS(elementsPanelStyles);
 
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'elements-panel-split-view-state', 325, 325);
@@ -251,12 +263,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.domTreeContainer.id = 'elements-content';
     this.domTreeContainer.tabIndex = -1;
     // FIXME: crbug.com/425984
-    if (Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get()) {
+    if (this.#settings.moduleSetting('dom-word-wrap').get()) {
       this.domTreeContainer.classList.add('elements-wrap');
     }
-    Common.Settings.Settings.instance()
-        .moduleSetting('dom-word-wrap')
-        .addChangeListener(this.domWordWrapSettingChanged.bind(this));
+    this.#settings.moduleSetting('dom-word-wrap').addChangeListener(this.domWordWrapSettingChanged.bind(this));
 
     crumbsContainer.id = 'elements-crumbs';
     this.accessibilityTreeView = new AccessibilityTreeView(new TreeOutline.TreeOutline.TreeOutline<AXTreeNodeData>());
@@ -286,9 +296,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('sidebar-position')
-        .addChangeListener(this.updateSidebarPosition.bind(this));
+    this.#settings.moduleSetting('sidebar-position').addChangeListener(this.updateSidebarPosition.bind(this));
     this.updateSidebarPosition();
 
     this.cssStyleTrackerByCSSModel = new Map();
@@ -296,8 +304,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.pendingNodeReveal = false;
 
-    this.adornerManager = new ElementsComponents.AdornerManager.AdornerManager(
-        Common.Settings.Settings.instance().moduleSetting('adorner-settings'));
+    this.adornerManager =
+        new ElementsComponents.AdornerManager.AdornerManager(this.#settings.moduleSetting('adorner-settings'));
     this.adornersByName = new Map();
 
     this.#domTreeWidget = new DOMTreeWidget();
@@ -306,14 +314,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.onSelectedNodeChanged = this.selectedNodeChanged.bind(this);
     this.#domTreeWidget.onElementsTreeUpdated = this.updateBreadcrumbIfNeeded.bind(this);
     this.#domTreeWidget.onDocumentUpdated = this.documentUpdated.bind(this);
-    this.#domTreeWidget.setWordWrap(Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get());
-
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addEventListener(
-        SDK.TargetManager.Events.NAME_CHANGED, event => this.targetNameChanged(event.data));
-    Common.Settings.Settings.instance()
-        .moduleSetting('show-ua-shadow-dom')
-        .addChangeListener(this.showUAShadowDOMChanged.bind(this));
+    this.#domTreeWidget.setWordWrap(this.#settings.moduleSetting('dom-word-wrap').get());
+
+    this.#targetManager.observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
+    this.#targetManager.addEventListener(SDK.TargetManager.Events.NAME_CHANGED,
+                                         event => this.targetNameChanged(event.data));
+    this.#settings.moduleSetting('show-ua-shadow-dom').addChangeListener(this.showUAShadowDOMChanged.bind(this));
     PanelCommon.ExtensionServer.ExtensionServer.instance().addEventListener(
         PanelCommon.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
   }
@@ -378,10 +384,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   static instance(opts: {
     forceNew: boolean|null,
+    targetManager?: SDK.TargetManager.TargetManager,
+    settings?: Common.Settings.Settings,
   }|undefined = {forceNew: null}): ElementsPanel {
-    const {forceNew} = opts;
+    const {forceNew, targetManager, settings} = opts || {};
     if (!elementsPanelInstance || forceNew) {
-      elementsPanelInstance = new ElementsPanel();
+      elementsPanelInstance = new ElementsPanel(targetManager, settings);
     }
 
     return elementsPanelInstance;
@@ -734,7 +742,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.currentSearchResultIndex = -1;
     delete this.searchResults;
 
-    SDK.DOMModel.DOMModel.cancelSearch();
+    SDK.DOMModel.DOMModel.cancelSearch(this.#targetManager);
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
@@ -753,8 +761,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.searchConfig = searchConfig;
 
-    const showUAShadowDOM = Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom').get();
-    const domModels = SDK.TargetManager.TargetManager.instance().models(SDK.DOMModel.DOMModel, {scoped: true});
+    const showUAShadowDOM = this.#settings.moduleSetting('show-ua-shadow-dom').get();
+    const domModels = this.#targetManager.models(SDK.DOMModel.DOMModel, {scoped: true});
     const promises = domModels.map(domModel => domModel.performSearch(whitespaceTrimmedQuery, showUAShadowDOM));
     void Promise.all(promises).then(resultCounts => {
       this.searchResults = [];
@@ -952,9 +960,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     const {showPanel = true, focusNode = false, highlightInOverlay = true} = opts ?? {};
     this.omitDefaultSelection = true;
 
-    const node = Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom').get() ?
-        nodeToReveal :
-        this.leaveUserAgentShadowDOM(nodeToReveal);
+    const node = this.#settings.moduleSetting('show-ua-shadow-dom').get() ? nodeToReveal :
+                                                                            this.leaveUserAgentShadowDOM(nodeToReveal);
     if (highlightInOverlay) {
       node.highlightForTwoSeconds();
     }
@@ -1167,7 +1174,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       return;
     }  // We can't reparent extension iframes.
 
-    const position = Common.Settings.Settings.instance().moduleSetting('sidebar-position').get();
+    const position = this.#settings.moduleSetting('sidebar-position').get();
     let splitMode = SplitMode.HORIZONTAL;
     if (position === 'right' || (position === 'auto' && this.splitWidget.element.offsetWidth > 680)) {
       splitMode = SplitMode.VERTICAL;
@@ -1508,7 +1515,7 @@ export class ElementsActionDelegate implements UI.ActionRegistration.ActionDeleg
         ElementsPanel.instance().toggleAccessibilityTree();
         return true;
       case 'elements.toggle-word-wrap': {
-        const setting = Common.Settings.Settings.instance().moduleSetting<boolean>('dom-word-wrap');
+        const setting = ElementsPanel.instance().settings.moduleSetting<boolean>('dom-word-wrap');
         setting.set(!setting.get());
         return true;
       }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -45,6 +45,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../models/badges/badges.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Elements from '../../models/elements/elements.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -302,6 +303,11 @@ const UIStrings = {
    * @description Label of an adorner next to the html node in the Elements panel.
    */
   viewSourceCode: 'View source code',
+  /**
+   * @description Label of an adorner in the Elements panel. When clicked, it reveals
+   * the definition of the custom element in the Sources panel.
+   */
+  showCustomElementDefinition: 'Show custom element definition',
   /**
    * @description Context menu item in Elements panel to assess visibility of an element via AI.
    */
@@ -444,6 +450,8 @@ export interface ViewInput {
   onViewSourceAdornerClick: () => void;
   onSlotAdornerClick: (e: Event) => void;
   showSlotAdorner: boolean;
+  showCustomElementAdorner: boolean;
+  onCustomElementAdornerClick: (e: Event) => void;
   slotName?: string;
   showStartingStyleAdorner: boolean;
   startingStyleAdornerActive: boolean;
@@ -961,7 +969,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   const hasAdorners = !!input.adProvenance || input.showContainerAdorner || input.showFlexAdorner ||
       input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner || input.showPopoverAdorner ||
       input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner ||
-      input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner;
+      input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner ||
+      input.showCustomElementAdorner;
   const gutterContainerClasses = {
     'has-decorations': input.decorations.length || input.descendantDecorations.length,
     'gutter-container': true,
@@ -1004,6 +1013,18 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${adornerRef()}>
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}</span>
         </devtools-adorner>` : nothing}
+        ${input.showCustomElementAdorner ? html`<devtools-adorner
+          class="custom-element clickable"
+          role=button
+          tabindex=0
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT).track({ click: true })}
+          aria-label=${i18nString(UIStrings.showCustomElementDefinition)}
+          @click=${input.onCustomElementAdornerClick}
+          @keydown=${handleAdornerKeydown(input.onCustomElementAdornerClick)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT}</span>
+        </devtools-adorner>` : nothing}
         ${input.showContainerAdorner ? html`<devtools-adorner
           class=clickable
           role=button
@@ -1333,50 +1354,53 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     const output: ViewOutput = {};
-    DEFAULT_VIEW(
-        {
-          node: !clearNode ? this.nodeInternal : null,
-          isClosingTag: this.isClosingTag(),
-          expanded: this.expanded,
-          isExpandable: this.isExpandable(),
-          isXMLMimeType: Boolean(this.treeOutline?.isXMLMimeType),
-          updateRecord: this.#updateRecord,
-          onHighlightSearchResults: () => this.#highlightSearchResults(),
-          onExpand: () => this.expand(),
-
-          containerAdornerActive: this.#containerAdornerActive,
-          adProvenance: this.nodeInternal.adProvenance(),
-          adTooltipId: this.#adTooltipId,
-          target: this.nodeInternal.domModel().target(),
-          showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
-          containerType: this.#layout?.containerType,
-          showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
-          flexAdornerActive: this.#flexAdornerActive,
-          showGridAdorner: Boolean(this.#layout?.isGrid) && !this.isClosingTag(),
-          showGridLanesAdorner: Boolean(this.#layout?.isGridLanes) && !this.isClosingTag(),
-          showMediaAdorner: this.node().isMediaNode() && !this.isClosingTag(),
-          showPopoverAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) &&
-              Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
-          showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !this.isClosingTag(),
-          gridAdornerActive: this.#gridAdornerActive,
-          popoverAdornerActive: this.#popoverAdornerActive,
-          isSubgrid: Boolean(this.#layout?.isSubgrid),
-          showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
-          showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
-                              (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
-              !this.isClosingTag(),
-          decorations: this.#decorations,
-          descendantDecorations: this.expanded ? [] : this.#descendantDecorations,
-          decorationsTooltip: this.#decorationsTooltip,
-          indent: this.computeLeftIndent(),
-          showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !this.isClosingTag(),
-          scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
-          showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
-          showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !this.isClosingTag(),
-          startingStyleAdornerActive: this.#startingStyleAdornerActive,
-          onStartingStyleAdornerClick:
-              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onStartingStyleAdornerClick(event),
-          onSlotAdornerClick: () => {
+    DEFAULT_VIEW({
+      node: !clearNode ? this.nodeInternal : null,
+      isClosingTag: this.isClosingTag(),
+      expanded: this.expanded,
+      isExpandable: this.isExpandable(),
+      isXMLMimeType: Boolean(this.treeOutline?.isXMLMimeType),
+      updateRecord: this.#updateRecord,
+      onHighlightSearchResults: () => this.#highlightSearchResults(),
+      onExpand: () => this.expand(),
+
+      containerAdornerActive: this.#containerAdornerActive,
+      adProvenance: this.nodeInternal.adProvenance(),
+      adTooltipId: this.#adTooltipId,
+      target: this.nodeInternal.domModel().target(),
+      showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
+      containerType: this.#layout?.containerType,
+      showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
+      flexAdornerActive: this.#flexAdornerActive,
+      showGridAdorner: Boolean(this.#layout?.isGrid) && !this.isClosingTag(),
+      showGridLanesAdorner: Boolean(this.#layout?.isGridLanes) && !this.isClosingTag(),
+      showMediaAdorner: this.node().isMediaNode() && !this.isClosingTag(),
+      showPopoverAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) &&
+          Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
+      showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !this.isClosingTag(),
+      gridAdornerActive: this.#gridAdornerActive,
+      popoverAdornerActive: this.#popoverAdornerActive,
+      isSubgrid: Boolean(this.#layout?.isSubgrid),
+      showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
+      showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
+                          (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
+          !this.isClosingTag(),
+      decorations: this.#decorations,
+      descendantDecorations: this.expanded ? [] : this.#descendantDecorations,
+      decorationsTooltip: this.#decorationsTooltip,
+      indent: this.computeLeftIndent(),
+      showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !this.isClosingTag(),
+      scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
+      showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
+      showCustomElementAdorner: this.node().isCustomElement() && !this.isClosingTag(),
+      onCustomElementAdornerClick:
+          this.treeOutline?.disableEdits ? () => {} : (event: Event) => void this.#onCustomElementAdornerClick(event),
+      showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !this.isClosingTag(),
+      startingStyleAdornerActive: this.#startingStyleAdornerActive,
+      onStartingStyleAdornerClick:
+          this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onStartingStyleAdornerClick(event),
+      onSlotAdornerClick:
+          () => {
             if (this.nodeInternal.assignedSlot) {
               const deferredNode = this.nodeInternal.assignedSlot.deferredNode;
               deferredNode.resolve(node => {
@@ -1384,47 +1408,45 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
               });
             }
           },
-          topLayerIndex: this.node().topLayerIndex(),
-          onViewSourceAdornerClick: this.treeOutline?.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
-          onGutterClick: this.showContextMenu.bind(this),
-          onContainerAdornerClick:
-              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onContainerAdornerClick(event),
-          onFlexAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                               (event: Event) => this.#onFlexAdornerClick(event),
-          onGridAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                               (event: Event) => this.#onGridAdornerClick(event),
-          onMediaAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                                (event: Event) => this.#onMediaAdornerClick(event),
-          onPopoverAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                                  (event: Event) => this.#onPopoverAdornerClick(event),
-          onScrollSnapAdornerClick:
-              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onScrollSnapAdornerClick(event),
-          onTopLayerAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                                   () => {
-                                                                     if (!this.treeOutline) {
-                                                                       return;
-                                                                     }
-                                                                     this.treeOutline.revealInTopLayer(this.node());
-                                                                   },
-          isHovered: this.#hovered,
-          isSelected: this.selected,
-          showAiButton: Boolean(this.#hovered || this.selected) && this.node().nodeType() === Node.ELEMENT_NODE &&
-              this.isAiButtonEnabled() && (this.treeOutline as ElementsTreeOutline)?.showAIButton,
-          aiButtonTitle: this.isAiButtonEnabled() ?
-              UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
-              undefined,
-          onAiButtonClick: (ev: Event) => {
-            ev.stopPropagation();
-            this.select(true, false);
-            const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
-            if (action) {
-              void action.execute();
-            }
-          },
-          editorState: this.#editorState,
-          editorWidth: this.#editorWidth,
-        },
-        output, this.listItemElement);
+      topLayerIndex: this.node().topLayerIndex(),
+      onViewSourceAdornerClick: this.treeOutline?.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
+      onGutterClick: this.showContextMenu.bind(this),
+      onContainerAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                                (event: Event) => this.#onContainerAdornerClick(event),
+      onFlexAdornerClick: this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onFlexAdornerClick(event),
+      onGridAdornerClick: this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onGridAdornerClick(event),
+      onMediaAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                            (event: Event) => this.#onMediaAdornerClick(event),
+      onPopoverAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                              (event: Event) => this.#onPopoverAdornerClick(event),
+      onScrollSnapAdornerClick:
+          this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onScrollSnapAdornerClick(event),
+      onTopLayerAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                               () => {
+                                                                 if (!this.treeOutline) {
+                                                                   return;
+                                                                 }
+                                                                 this.treeOutline.revealInTopLayer(this.node());
+                                                               },
+      isHovered: this.#hovered,
+      isSelected: this.selected,
+      showAiButton: Boolean(this.#hovered || this.selected) && this.node().nodeType() === Node.ELEMENT_NODE &&
+          this.isAiButtonEnabled() && (this.treeOutline as ElementsTreeOutline)?.showAIButton,
+      aiButtonTitle: this.isAiButtonEnabled() ?
+          UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
+          undefined,
+      onAiButtonClick: (ev: Event) => {
+        ev.stopPropagation();
+        this.select(true, false);
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
+        if (action) {
+          void action.execute();
+        }
+      },
+      editorState: this.#editorState,
+      editorWidth: this.#editorWidth,
+    },
+                 output, this.listItemElement);
 
     this.#contentElement = output.contentElement;
     this.#editorRef = output.editorRef;
@@ -1527,6 +1549,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return !isOpeningTag(this.tagTypeContext);
   }
 
+  isDisplayContents(): boolean {
+    return Boolean(this.#layout?.isContents);
+  }
+
   node(): SDK.DOMModel.DOMNode {
     return this.nodeInternal;
   }
@@ -1732,63 +1758,64 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // ElementsPanel.
     // We do not change the ElementsTreeElement state in case the
     // element is bound again.
-    DEFAULT_VIEW(
-        {
-          node: null,
-          isClosingTag: false,
-          expanded: false,
-          isExpandable: false,
-          isXMLMimeType: false,
-          updateRecord: null,
-          onHighlightSearchResults: () => {},
-          onExpand: () => {},
-          containerAdornerActive: false,
-          adProvenance: undefined,
-          target: undefined,
-          adTooltipId: '',
-          showContainerAdorner: false,
-          containerType: this.#layout?.containerType,
-          showFlexAdorner: false,
-          flexAdornerActive: false,
-          showGridAdorner: false,
-          showGridLanesAdorner: false,
-          showMediaAdorner: false,
-          showPopoverAdorner: false,
-          showTopLayerAdorner: false,
-          gridAdornerActive: false,
-          popoverAdornerActive: false,
-          isSubgrid: false,
-          showViewSourceAdorner: false,
-          showScrollAdorner: false,
-          showScrollSnapAdorner: false,
-          scrollSnapAdornerActive: false,
-          showSlotAdorner: false,
-          showStartingStyleAdorner: false,
-          startingStyleAdornerActive: false,
-          onStartingStyleAdornerClick: () => {},
-          onSlotAdornerClick: () => {},
-          topLayerIndex: -1,
-          onViewSourceAdornerClick: () => {},
-          onGutterClick: () => {},
-          onContainerAdornerClick: () => {},
-          onFlexAdornerClick: () => {},
-          onGridAdornerClick: () => {},
-          onMediaAdornerClick: () => {},
-          onPopoverAdornerClick: () => {},
-          onScrollSnapAdornerClick: () => {},
-          onTopLayerAdornerClick: () => {},
-          isHovered: false,
-          isSelected: false,
-          showAiButton: false,
-          onAiButtonClick: () => {},
-          decorations: [],
-          descendantDecorations: [],
-          decorationsTooltip: '',
-          indent: 0,
-          editorState: null,
-          editorWidth: null,
-        },
-        {}, this.listItemElement);
+    DEFAULT_VIEW({
+      node: null,
+      isClosingTag: false,
+      expanded: false,
+      isExpandable: false,
+      isXMLMimeType: false,
+      updateRecord: null,
+      onHighlightSearchResults: () => {},
+      onExpand: () => {},
+      containerAdornerActive: false,
+      adProvenance: undefined,
+      target: undefined,
+      adTooltipId: '',
+      showContainerAdorner: false,
+      containerType: this.#layout?.containerType,
+      showFlexAdorner: false,
+      flexAdornerActive: false,
+      showGridAdorner: false,
+      showGridLanesAdorner: false,
+      showMediaAdorner: false,
+      showPopoverAdorner: false,
+      showTopLayerAdorner: false,
+      gridAdornerActive: false,
+      popoverAdornerActive: false,
+      isSubgrid: false,
+      showViewSourceAdorner: false,
+      showScrollAdorner: false,
+      showScrollSnapAdorner: false,
+      scrollSnapAdornerActive: false,
+      showSlotAdorner: false,
+      showCustomElementAdorner: false,
+      showStartingStyleAdorner: false,
+      startingStyleAdornerActive: false,
+      onStartingStyleAdornerClick: () => {},
+      onSlotAdornerClick: () => {},
+      onCustomElementAdornerClick: () => {},
+      topLayerIndex: -1,
+      onViewSourceAdornerClick: () => {},
+      onGutterClick: () => {},
+      onContainerAdornerClick: () => {},
+      onFlexAdornerClick: () => {},
+      onGridAdornerClick: () => {},
+      onMediaAdornerClick: () => {},
+      onPopoverAdornerClick: () => {},
+      onScrollSnapAdornerClick: () => {},
+      onTopLayerAdornerClick: () => {},
+      isHovered: false,
+      isSelected: false,
+      showAiButton: false,
+      onAiButtonClick: () => {},
+      decorations: [],
+      descendantDecorations: [],
+      decorationsTooltip: '',
+      indent: 0,
+      editorState: null,
+      editorWidth: null,
+    },
+                 {}, this.listItemElement);
   }
 
   override onunbind(): void {
@@ -3211,6 +3238,44 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#startingStyleAdornerActive = !this.#startingStyleAdornerActive;
     this.performUpdate();
   }
+
+  async #onCustomElementAdornerClick(event: Event): Promise<void> {
+    event.stopPropagation();
+    const node = this.node();
+    const object = await node.resolveToObject('');
+    if (!object) {
+      return;
+    }
+    let constructorObject: SDK.RemoteObject.RemoteObject|null = null;
+    try {
+      const result = await object.callFunction(function(this: Element): unknown {
+        const selector = this.getAttribute('is') || this.tagName.toLowerCase();
+        return (typeof customElements !== 'undefined' && customElements.get(selector)) || this.constructor;
+      });
+      constructorObject = result.object;
+    } finally {
+      object.release();
+    }
+    if (!constructorObject) {
+      return;
+    }
+    try {
+      if (constructorObject.type === 'function') {
+        const functionDetails =
+            await SDK.RemoteObject.RemoteFunction.objectAsFunction(constructorObject).targetFunctionDetails();
+        if (functionDetails?.location) {
+          const uiLocation =
+              await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
+                  functionDetails.location);
+          if (uiLocation) {
+            void Common.Revealer.reveal(uiLocation);
+          }
+        }
+      }
+    } finally {
+      constructorObject.release();
+    }
+  }
 }
 
 export const InitialChildrenLimit = 500;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1387,8 +1387,9 @@ export class ElementsTreeOutline extends
 
   private highlightTreeElement(element: UI.TreeOutline.TreeElement, showInfo: boolean): void {
     if (element instanceof ElementsTreeElement) {
-      element.node().domModel().overlayModel().highlightInOverlay(
-          {node: element.node(), selectorList: undefined}, 'all', showInfo);
+      const selectorList = element.isDisplayContents() ? '*' : undefined;
+      element.node().domModel().overlayModel().highlightInOverlay({node: element.node(), selectorList}, 'all',
+                                                                  showInfo);
       return;
     }
 

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

@@ -12,6 +12,7 @@ type AdornerSettingsMap = Map<string, boolean>;
 export enum RegisteredAdorners {
   AD = 'ad',
   CONTAINER = 'container',
+  CUSTOM_ELEMENT = 'custom-element',
   FLEX = 'flex',
   GRID = 'grid',
   GRID_LANES = 'grid-lanes',

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

@@ -186,9 +186,10 @@ UI.ViewManager.registerViewExtension({
   order: 10,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   hasToolbar: false,
-  async loadView() {
+  async loadView(universe) {
     const Elements = await loadElementsModule();
-    return Elements.ElementsPanel.ElementsPanel.instance();
+    const {targetManager, settings} = universe;
+    return Elements.ElementsPanel.ElementsPanel.instance({forceNew: null, targetManager, settings});
   },
 });