chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/elements/ElementsPanel.ts

@@ -53,9 +53,8 @@ import * as ElementsComponents from './components/components.js';
 import {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
 import elementsPanelStyles from './elementsPanel.css.js';
-import type {ElementsTreeElement} from './ElementsTreeElement.js';
-import {ElementsTreeElementHighlighter} from './ElementsTreeElementHighlighter.js';
-import {ElementsTreeOutline} from './ElementsTreeOutline.js';
+import {DOMTreeWidget, type ElementsTreeOutline} from './ElementsTreeOutline.js';
+import {LayoutPane} from './LayoutPane.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
 import {
@@ -165,6 +164,18 @@ export const enum SidebarPaneTabId {
   STYLES = 'styles',
 }
 
+type RevealAndSelectNodeOptsSelectionAndFocus = {
+  showPanel?: false,
+  focusNode?: never,
+}|{
+  showPanel: true,
+  focusNode?: boolean,
+};
+
+type RevealAndSelectNodeOpts = RevealAndSelectNodeOptsSelectionAndFocus&{
+  highlightInOverlay?: boolean,
+};
+
 const createAccessibilityTreeToggleButton = (isActive: boolean): HTMLElement => {
   const button = new Buttons.Button.Button();
   const title =
@@ -199,7 +210,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   stylesWidget: StylesSidebarPane;
   private readonly computedStyleWidget: ComputedStyleWidget;
   private readonly metricsWidget: MetricsSidebarPane;
-  private treeOutlines = new Set<ElementsTreeOutline>();
   private searchResults!: Array<{
     domModel: SDK.DOMModel.DOMModel,
     index: number,
@@ -227,6 +237,11 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   };
 
   private cssStyleTrackerByCSSModel: Map<SDK.CSSModel.CSSModel, SDK.CSSModel.CSSPropertyTracker>;
+  #domTreeWidget: DOMTreeWidget;
+
+  getTreeOutlineForTesting(): ElementsTreeOutline|undefined {
+    return this.#domTreeWidget.getTreeOutlineForTesting();
+  }
 
   constructor() {
     super('elements');
@@ -293,6 +308,22 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.updateSidebarPosition();
 
     this.cssStyleTrackerByCSSModel = new Map();
+    this.currentSearchResultIndex = -1;  // -1 represents the initial invalid state
+
+    this.pendingNodeReveal = false;
+
+    this.adornerManager = new ElementsComponents.AdornerManager.AdornerManager(
+        Common.Settings.Settings.instance().moduleSetting('adorner-settings'));
+    this.adornersByName = new Map();
+
+    this.#domTreeWidget = new DOMTreeWidget();
+    this.#domTreeWidget.omitRootDOMNode = true;
+    this.#domTreeWidget.selectEnabled = true;
+    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));
@@ -301,13 +332,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         .addChangeListener(this.showUAShadowDOMChanged.bind(this));
     Extensions.ExtensionServer.ExtensionServer.instance().addEventListener(
         Extensions.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
-    this.currentSearchResultIndex = -1;  // -1 represents the initial invalid state
-
-    this.pendingNodeReveal = false;
-
-    this.adornerManager = new ElementsComponents.AdornerManager.AdornerManager(
-        Common.Settings.Settings.instance().moduleSetting('adorner-settings'));
-    this.adornersByName = new Map();
   }
 
   private initializeFullAccessibilityTreeView(): void {
@@ -332,11 +356,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (!selectedNode) {
       return;
     }
-    const treeElement = this.treeElementForNode(selectedNode);
-    if (!treeElement) {
-      return;
-    }
-    treeElement.select();
+    this.#domTreeWidget.selectDOMNodeWithoutReveal(selectedNode);
   }
 
   toggleAccessibilityTree(): void {
@@ -381,32 +401,31 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   modelAdded(domModel: SDK.DOMModel.DOMModel): void {
-    const parentModel = domModel.parentModel();
-
-    let treeOutline: ElementsTreeOutline|null = parentModel ? ElementsTreeOutline.forDOMModel(parentModel) : null;
-    if (!treeOutline) {
-      treeOutline = new ElementsTreeOutline(true, true);
-      treeOutline.setWordWrap(Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get());
-      treeOutline.addEventListener(ElementsTreeOutline.Events.SelectedNodeChanged, this.selectedNodeChanged, this);
-      treeOutline.addEventListener(ElementsTreeOutline.Events.ElementsTreeUpdated, this.updateBreadcrumbIfNeeded, this);
-      new ElementsTreeElementHighlighter(treeOutline, new Common.Throttler.Throttler(100));
-      this.treeOutlines.add(treeOutline);
-    }
-    treeOutline.wireToDOMModel(domModel);
-
     this.setupStyleTracking(domModel.cssModel());
-
+    this.#domTreeWidget.modelAdded(domModel);
     // Perform attach if necessary.
     if (this.isShowing()) {
       this.wasShown();
     }
     if (this.domTreeContainer.hasFocus()) {
-      treeOutline.focus();
+      this.#domTreeWidget.focus();
     }
     domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdatedEvent, this);
     domModel.addEventListener(SDK.DOMModel.Events.NodeInserted, this.handleNodeInserted, this);
   }
 
+  modelRemoved(domModel: SDK.DOMModel.DOMModel): void {
+    domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdatedEvent, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.NodeInserted, this.handleNodeInserted, this);
+
+    this.#domTreeWidget.modelRemoved(domModel);
+    if (!domModel.parentModel()) {
+      this.#domTreeWidget.detach();
+    }
+
+    this.removeStyleTracking(domModel.cssModel());
+  }
+
   private handleNodeInserted(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
     // Queue the task for the case when all the view transitions are added
     // around the same time. Otherwise there is a race condition on
@@ -434,55 +453,26 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     });
   }
 
-  modelRemoved(domModel: SDK.DOMModel.DOMModel): void {
-    domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdatedEvent, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.NodeInserted, this.handleNodeInserted, this);
-    const treeOutline = ElementsTreeOutline.forDOMModel(domModel);
-    if (!treeOutline) {
-      return;
-    }
-
-    treeOutline.unwireFromDOMModel(domModel);
-    if (domModel.parentModel()) {
-      return;
-    }
-    this.treeOutlines.delete(treeOutline);
-    treeOutline.element.remove();
-
-    this.removeStyleTracking(domModel.cssModel());
-  }
-
   private targetNameChanged(target: SDK.Target.Target): void {
     const domModel = target.model(SDK.DOMModel.DOMModel);
     if (!domModel) {
       return;
     }
-    const treeOutline = ElementsTreeOutline.forDOMModel(domModel);
-    if (!treeOutline) {
-      return;
-    }
   }
 
   private updateTreeOutlineVisibleWidth(): void {
-    if (!this.treeOutlines.size) {
-      return;
-    }
-
     let width = this.splitWidget.element.offsetWidth;
     if (this.splitWidget.isVertical()) {
       width -= this.splitWidget.sidebarSize();
     }
-    for (const treeOutline of this.treeOutlines) {
-      treeOutline.setVisibleWidth(width);
-    }
+    this.#domTreeWidget.visibleWidth = width;
   }
 
   override focus(): void {
-    const firstTreeOutline = this.treeOutlines.values().next();
-    if (firstTreeOutline.done) {
+    if (this.#domTreeWidget.empty()) {
       this.domTreeContainer.focus();
     } else {
-      firstTreeOutline.value.focus();
+      this.#domTreeWidget.focus();
     }
   }
 
@@ -493,43 +483,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   override wasShown(): void {
     super.wasShown();
     UI.Context.Context.instance().setFlavor(ElementsPanel, this);
-
-    for (const treeOutline of this.treeOutlines) {
-      // Attach heavy component lazily
-      if (treeOutline.element.parentElement !== this.domTreeContainer) {
-        this.domTreeContainer.appendChild(treeOutline.element);
-      }
-    }
-
-    const domModels = SDK.TargetManager.TargetManager.instance().models(SDK.DOMModel.DOMModel, {scoped: true});
-    for (const domModel of domModels) {
-      if (domModel.parentModel()) {
-        continue;
-      }
-      const treeOutline = ElementsTreeOutline.forDOMModel(domModel);
-      if (!treeOutline) {
-        continue;
-      }
-      treeOutline.setVisible(true);
-
-      if (!treeOutline.rootDOMNode) {
-        if (domModel.existingDocument()) {
-          treeOutline.rootDOMNode = domModel.existingDocument();
-          this.documentUpdated(domModel);
-        } else {
-          void domModel.requestDocument();
-        }
-      }
-    }
+    this.#domTreeWidget.show(this.domTreeContainer);
   }
 
   override willHide(): void {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
-    for (const treeOutline of this.treeOutlines) {
-      treeOutline.setVisible(false);
-      // Detach heavy component on hide
-      this.domTreeContainer.removeChild(treeOutline.element);
-    }
+    this.#domTreeWidget.detach();
     super.willHide();
     UI.Context.Context.instance().setFlavor(ElementsPanel, null);
   }
@@ -548,10 +507,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       selectedNode = null;
     }
     const {focus} = event.data;
-    for (const treeOutline of this.treeOutlines) {
-      if (!selectedNode || ElementsTreeOutline.forDOMModel(selectedNode.domModel()) !== treeOutline) {
-        treeOutline.selectDOMNode(null);
-      }
+    if (!selectedNode) {
+      this.#domTreeWidget.selectDOMNode(null);
     }
 
     if (selectedNode) {
@@ -652,14 +609,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (!node || this.hasNonDefaultSelectedNode || this.pendingNodeReveal) {
       return;
     }
-    const treeOutline = ElementsTreeOutline.forDOMModel(node.domModel());
-    if (!treeOutline) {
-      return;
-    }
     this.selectDOMNode(node);
-    if (treeOutline.selectedTreeElement) {
-      treeOutline.selectedTreeElement.expand();
-    }
+    this.#domTreeWidget.expand();
   }
 
   onSearchClosed(): void {
@@ -667,12 +618,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (!selectedNode) {
       return;
     }
-    const treeElement = this.treeElementForNode(selectedNode);
-    if (!treeElement) {
-      return;
-    }
-
-    treeElement.select();
+    this.#domTreeWidget.selectDOMNodeWithoutReveal(selectedNode);
   }
 
   onSearchCanceled(): void {
@@ -737,9 +683,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   private domWordWrapSettingChanged(event: Common.EventTarget.EventTargetEvent<boolean>): void {
     this.domTreeContainer.classList.toggle('elements-wrap', event.data);
-    for (const treeOutline of this.treeOutlines) {
-      treeOutline.setWordWrap(event.data);
-    }
+    this.#domTreeWidget.setWordWrap(event.data);
   }
 
   private jumpToSearchResult(index: number): void {
@@ -801,16 +745,9 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       return;
     }
 
-    const treeElement = this.treeElementForNode(searchResult.node);
     void searchResult.node.scrollIntoView();
-    if (treeElement) {
-      this.searchConfig && treeElement.highlightSearchResults(this.searchConfig.query);
-      treeElement.reveal();
-      const matches = treeElement.listItemElement.getElementsByClassName(UI.UIUtils.highlightedSearchResultClassName);
-      if (matches.length) {
-        matches[0].scrollIntoViewIfNeeded(false);
-      }
-      treeElement.select(/* omitFocus */ true);
+    if (searchResult.node) {
+      this.#domTreeWidget.highlightMatch(searchResult.node, this.searchConfig?.query);
     }
   }
 
@@ -822,30 +759,15 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (!searchResult.node) {
       return;
     }
-    const treeElement = this.treeElementForNode(searchResult.node);
-    if (treeElement) {
-      treeElement.hideSearchHighlights();
-    }
+    this.#domTreeWidget.hideMatchHighlights(searchResult.node);
   }
 
   selectedDOMNode(): SDK.DOMModel.DOMNode|null {
-    for (const treeOutline of this.treeOutlines) {
-      if (treeOutline.selectedDOMNode()) {
-        return treeOutline.selectedDOMNode();
-      }
-    }
-    return null;
+    return this.#domTreeWidget.selectedDOMNode();
   }
 
   selectDOMNode(node: SDK.DOMModel.DOMNode, focus?: boolean): void {
-    for (const treeOutline of this.treeOutlines) {
-      const outline = ElementsTreeOutline.forDOMModel(node.domModel());
-      if (outline === treeOutline) {
-        treeOutline.selectDOMNode(node, focus);
-      } else {
-        treeOutline.selectDOMNode(null);
-      }
-    }
+    this.#domTreeWidget.selectDOMNode(node, focus);
   }
 
   selectAndShowSidebarTab(tabId: SidebarPaneTabId): void {
@@ -908,21 +830,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.selectDOMNode(event.legacyDomNode, true);
   }
 
-  private treeOutlineForNode(node: SDK.DOMModel.DOMNode|null): ElementsTreeOutline|null {
-    if (!node) {
-      return null;
-    }
-    return ElementsTreeOutline.forDOMModel(node.domModel());
-  }
-
-  private treeElementForNode(node: SDK.DOMModel.DOMNode): ElementsTreeElement|null {
-    const treeOutline = this.treeOutlineForNode(node);
-    if (!treeOutline) {
-      return null;
-    }
-    return treeOutline.findTreeElement(node);
-  }
-
   private leaveUserAgentShadowDOM(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode {
     let userAgentShadowRoot;
     while ((userAgentShadowRoot = node.ancestorUserAgentShadowRoot()) && userAgentShadowRoot.parentNode) {
@@ -931,14 +838,14 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     return node;
   }
 
-  async revealAndSelectNode(nodeToReveal: SDK.DOMModel.DOMNode, focus: boolean, omitHighlight?: boolean):
-      Promise<void> {
+  async revealAndSelectNode(nodeToReveal: SDK.DOMModel.DOMNode, opts?: RevealAndSelectNodeOpts): Promise<void> {
+    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);
-    if (!omitHighlight) {
+    if (highlightInOverlay) {
       node.highlightForTwoSeconds();
     }
 
@@ -946,8 +853,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       void this.accessibilityTreeView.revealAndSelectNode(nodeToReveal);
     }
 
-    await UI.ViewManager.ViewManager.instance().showView('elements', false, !focus);
-    this.selectDOMNode(node, focus);
+    if (showPanel) {
+      await UI.ViewManager.ViewManager.instance().showView('elements', false, !focus);
+    }
+    this.selectDOMNode(node, focusNode);
     delete this.omitDefaultSelection;
     if (!this.notFirstInspectElement) {
       ElementsPanel.firstInspectElementNodeNameForTest = node.nodeName();
@@ -958,9 +867,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private showUAShadowDOMChanged(): void {
-    for (const treeOutline of this.treeOutlines) {
-      treeOutline.update();
-    }
+    this.#domTreeWidget.reload();
   }
 
   private setupTextSelectionHack(stylePaneWrapperElement: HTMLElement): void {
@@ -1092,14 +999,18 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     UI.ARIAUtils.markAsComplementary(contentElement);
     UI.ARIAUtils.setLabel(contentElement, i18nString(UIStrings.sidePanelContent));
 
-    const stylesView = new UI.View.SimpleView(
-        i18nString(UIStrings.styles), /* useShadowDom */ undefined, SidebarPaneTabId.STYLES as Lowercase<string>);
+    const stylesView = new UI.View.SimpleView({
+      title: i18nString(UIStrings.styles),
+      viewId: SidebarPaneTabId.STYLES as Lowercase<string>,
+    });
     this.sidebarPaneView.appendView(stylesView);
     stylesView.element.classList.add('flex-auto');
     stylesSplitWidget.show(stylesView.element);
 
-    const computedView = new UI.View.SimpleView(
-        i18nString(UIStrings.computed), /* useShadowDom */ undefined, SidebarPaneTabId.COMPUTED as Lowercase<string>);
+    const computedView = new UI.View.SimpleView({
+      title: i18nString(UIStrings.computed),
+      viewId: SidebarPaneTabId.COMPUTED as Lowercase<string>,
+    });
     computedView.element.classList.add('composite', 'fill');
 
     tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, tabSelected, this);
@@ -1122,8 +1033,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     const position = Common.Settings.Settings.instance().moduleSetting('sidebar-position').get();
     let splitMode = SplitMode.HORIZONTAL;
-    if (position === 'right' ||
-        (position === 'auto' && UI.InspectorView.InspectorView.instance().element.offsetWidth > 680)) {
+    if (position === 'right' || (position === 'auto' && this.splitWidget.element.offsetWidth > 680)) {
       splitMode = SplitMode.VERTICAL;
     }
     if (!this.sidebarPaneView) {
@@ -1187,13 +1097,9 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       if (!domNode) {
         continue;
       }
-      const treeElement = this.treeElementForNode(domNode);
-      if (treeElement) {
-        void treeElement.updateStyleAdorners();
-      }
-
-      void ElementsComponents.LayoutPane.LayoutPane.instance().render();
+      this.#domTreeWidget.updateNodeAdorners(domNode);
     }
+    LayoutPane.instance().requestUpdate();
   }
 
   populateAdornerSettingsContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
@@ -1239,6 +1145,22 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     adornerSet.delete(adorner);
   }
 
+  toggleHideElement(node: SDK.DOMModel.DOMNode): void {
+    this.#domTreeWidget.toggleHideElement(node);
+  }
+
+  toggleEditAsHTML(node: SDK.DOMModel.DOMNode): void {
+    this.#domTreeWidget.toggleEditAsHTML(node);
+  }
+
+  duplicateNode(node: SDK.DOMModel.DOMNode): void {
+    this.#domTreeWidget.duplicateNode(node);
+  }
+
+  copyStyles(node: SDK.DOMModel.DOMNode): void {
+    this.#domTreeWidget.copyStyles(node);
+  }
+
   protected static firstInspectElementCompletedForTest = function(): void {};
   protected static firstInspectElementNodeNameForTest = '';
 }
@@ -1359,7 +1281,7 @@ export class DOMNodeRevealer implements
         }
 
         if (resolvedNode) {
-          void panel.revealAndSelectNode(resolvedNode, !omitFocus).then(resolve);
+          void panel.revealAndSelectNode(resolvedNode, {showPanel: true, focusNode: !omitFocus}).then(resolve);
           return;
         }
         const msg = i18nString(UIStrings.nodeCannotBeFoundInTheCurrent);
@@ -1400,23 +1322,19 @@ export class ElementsActionDelegate implements UI.ActionRegistration.ActionDeleg
     if (!node) {
       return true;
     }
-    const treeOutline = ElementsTreeOutline.forDOMModel(node.domModel());
-    if (!treeOutline) {
-      return true;
-    }
 
     switch (actionId) {
       case 'elements.hide-element':
-        void treeOutline.toggleHideElement(node);
+        ElementsPanel.instance().toggleHideElement(node);
         return true;
       case 'elements.edit-as-html':
-        treeOutline.toggleEditAsHTML(node);
+        ElementsPanel.instance().toggleEditAsHTML(node);
         return true;
       case 'elements.duplicate-element':
-        treeOutline.duplicateNode(node);
+        ElementsPanel.instance().duplicateNode(node);
         return true;
       case 'elements.copy-styles':
-        void treeOutline.findTreeElement(node)?.copyStyles();
+        ElementsPanel.instance().copyStyles(node);
         return true;
       case 'elements.undo':
         void SDK.DOMModel.DOMModelUndoStack.instance().undo();

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -14,7 +14,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
   private readonly updateThrottler: Common.Throttler.Throttler;
   private updateWhenVisible: boolean;
   constructor(computedStyleModel: ComputedStyleModel, delegatesFocus?: boolean) {
-    super(true, delegatesFocus);
+    super({useShadowDom: true, delegatesFocus});
     this.element.classList.add('flex-none');
     this.computedStyleModelInternal = computedStyleModel;
     this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);