chrome-devtools-frontend 1.0.1679704 → 1.0.1681091

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -49,8 +49,8 @@ import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AdoptedStyleSheetSetTreeElement, AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
+import {showContextMenu} from './DOMTreeContextMenu.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
-import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit, isOpeningTag} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -63,10 +63,6 @@ const UIStrings = {
    * @description ARIA accessible name in Elements Tree Outline of the Elements panel
    */
   pageDom: 'Page DOM',
-  /**
-   * @description A context menu item to store a value as a global variable the Elements Panel
-   */
-  storeAsGlobalVariable: 'Store as global variable',
   /**
    * @description Tree element expand all button element button text content in Elements Tree Outline of the Elements panel
    * @example {3} PH1
@@ -117,10 +113,12 @@ interface ViewInput {
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void;
   onElementCollapsed: () => void;
   onElementExpanded: () => void;
+  onSaveNodeToTempVariable?: (node: SDK.DOMModel.DOMNode) => void;
 }
 
 interface ViewOutput {
   elementsTreeOutline?: ElementsTreeOutline;
+  imagePreviewPopover?: ImagePreviewPopover;
   highlightedTreeElement: ElementsTreeElement|null;
   isUpdatingHighlights: boolean;
   alreadyExpandedParentTreeElement: ElementsTreeElement|null;
@@ -131,27 +129,102 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     // FIXME: this is basically a ref to existing imperative
     // implementation. Once this is declarative the ref should not be
     // needed.
-    output.elementsTreeOutline = new ElementsTreeOutline(
-        input.omitRootDOMNode, input.selectEnabled, input.hideGutter, input.maxTreeDepth, input.enableContextMenu,
-        input.showComments, input.showAIButton, input.disableEdits, input.expandRoot);
-    output.elementsTreeOutline.addEventListener(
-        ElementsTreeOutline.Events.SelectedNodeChanged, input.onSelectedNodeChanged, this);
-    output.elementsTreeOutline.addEventListener(
-        ElementsTreeOutline.Events.ElementsTreeUpdated, input.onElementsTreeUpdated, this);
-    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, input.onElementExpanded, this);
-    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, input.onElementCollapsed, this);
-    output.elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.ShowAllRows, () => {
-      if (output.elementsTreeOutline?.maxRowsShown) {
+    const elementsTreeOutline = new ElementsTreeOutline(input.omitRootDOMNode, input.selectEnabled, input.hideGutter,
+                                                        input.maxTreeDepth, input.enableContextMenu, input.showComments,
+                                                        input.showAIButton, input.disableEdits, input.expandRoot);
+    output.elementsTreeOutline = elementsTreeOutline;
+    elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.SelectedNodeChanged, input.onSelectedNodeChanged,
+                                         this);
+    elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.ElementsTreeUpdated, input.onElementsTreeUpdated,
+                                         this);
+    elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, input.onElementExpanded, this);
+    elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, input.onElementCollapsed, this);
+    elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.ShowAllRows, () => {
+      if (elementsTreeOutline.maxRowsShown) {
         // Set max to undefined to show all rows
-        output.elementsTreeOutline.maxRowsShown = undefined;
+        elementsTreeOutline.maxRowsShown = undefined;
       }
     }, this);
-    target.appendChild(output.elementsTreeOutline.element);
+    elementsTreeOutline.elementInternal.addEventListener('contextmenu', (event: MouseEvent) => {
+      const treeElement = elementsTreeOutline.treeElementFromEventInternal(event);
+      if (treeElement instanceof ElementsTreeElement) {
+        output.elementsTreeOutline?.showContextMenu(treeElement, event);
+      }
+    }, false);
+    output.imagePreviewPopover = new ImagePreviewPopover(
+        elementsTreeOutline.contentElement,
+        event => {
+          let link: (Element|null) = (event.target as Element | null);
+          while (link && !ImagePreviewPopover.getImageURL(link)) {
+            link = link.parentElementOrShadowHost();
+          }
+          return link;
+        },
+        async link => {
+          const listItem = UI.UIUtils.enclosingNodeOrSelfWithNodeName(link, 'li');
+          if (!listItem) {
+            return undefined;
+          }
+
+          const treeElement =
+              (UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(listItem) as ElementsTreeElement | undefined);
+          return await UIComponentUtils.ImagePreview.loadPrecomputedFeatures(treeElement?.node());
+        });
+    // TODO(changhaohan): refactor the popover to use tooltip component.
+    const popupHelper = new UI.PopoverHelper.PopoverHelper(elementsTreeOutline.elementInternal, event => {
+      const hoveredNode = event.composedPath()[0];
+      if (!(hoveredNode instanceof Element) || !hoveredNode.matches('.violating-element')) {
+        return null;
+      }
+
+      const issues = elementsTreeOutline.issuesByNodeElement(hoveredNode);
+      if (!issues) {
+        return null;
+      }
+
+      return {
+        box: hoveredNode.boxInWindow(),
+        show: async (popover: UI.GlassPane.GlassPane) => {
+          popover.setIgnoreLeftMargin(true);
+          // clang-format off
+          render(html`
+            <div class="squiggles-content">
+              ${issues.map(issue => {
+            const elementIssueDetails = getElementIssueDetails(issue);
+            if (!elementIssueDetails) {
+              // This shouldn't happen, but add this if check to pass ts check.
+              return nothing;
+            }
+            const issueKindIconName = IssueCounter.IssueCounter.getIssueKindIconName(issue.getKind());
+            const openIssueEvent = (): Promise<void> => Common.Revealer.reveal(issue);
+            return html`
+                  <div class="squiggles-content-item">
+                  <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
+                  <devtools-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</devtools-link>
+                  <span>${elementIssueDetails.tooltip}</span>
+                  </div>`;
+          })}
+            </div>`, popover.contentElement);
+          // clang-format on
+          return true;
+        },
+      };
+    }, 'elements.issue');
+    popupHelper.setTimeout(300);
+    target.appendChild(elementsTreeOutline.element);
   }
 
   output.elementsTreeOutline.maxTreeDepth = input.maxTreeDepth;
   output.elementsTreeOutline.enableContextMenu = input.enableContextMenu ?? true;
-  output.elementsTreeOutline.showComments = input.showComments ?? true;
+  output.elementsTreeOutline.showContextMenu = (treeElement, event) => {
+    void showContextMenu(treeElement, event, input.onSaveNodeToTempVariable);
+  };
+  let needsUpdate = false;
+  const showComments = input.showComments ?? true;
+  if (output.elementsTreeOutline.showComments !== showComments) {
+    output.elementsTreeOutline.showComments = showComments;
+    needsUpdate = true;
+  }
   output.elementsTreeOutline.showAIButton = input.showAIButton ?? true;
   output.elementsTreeOutline.disableEdits = input.disableEdits ?? false;
   output.elementsTreeOutline.expandRoot = input.expandRoot ?? false;
@@ -161,6 +234,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   }
   if (input.visible !== undefined) {
     output.elementsTreeOutline.setVisible(input.visible);
+    if (!input.visible) {
+      output.imagePreviewPopover?.hide();
+    }
   }
   output.elementsTreeOutline.maxRowsShown = input.maxRowsShown;
   output.elementsTreeOutline.setWordWrap(input.wrap);
@@ -168,6 +244,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   if (input.deindentSingleNode) {
     output.elementsTreeOutline.deindentSingleNode();
   }
+  if (needsUpdate) {
+    output.elementsTreeOutline.update();
+  }
   // Node highlighting logic. FIXME: express as a lit template.
   const previousHighlightedNode = output.highlightedTreeElement?.node() ?? null;
   if (previousHighlightedNode !== input.currentHighlightedNode) {
@@ -238,7 +317,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   #maxTreeDepth?: number;
   #enableContextMenu = true;
-  #showComments = true;
+  #showHTMLCommentsSetting = Common.Settings.Settings.instance().moduleSetting('show-html-comments');
+  #showComments = this.#showHTMLCommentsSetting.get();
   #showAIButton = true;
   #disableEdits = false;
   #expandRoot = false;
@@ -346,6 +426,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       delegatesFocus: false,
     });
     this.#view = view ?? DEFAULT_VIEW;
+    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,
@@ -356,6 +437,15 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
   }
 
+  #onShowHTMLCommentsChange(): void {
+    this.#showComments = this.#showHTMLCommentsSetting.get();
+    const selectedNode = this.selectedDOMNode();
+    if (selectedNode && selectedNode.nodeType() === Node.COMMENT_NODE && !this.#showComments) {
+      this.selectDOMNode(selectedNode.parentNode);
+    }
+    this.performUpdate();
+  }
+
   #highlightNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
     void this.#highlightThrottler.schedule(() => {
       this.#currentHighlightedNode = event.data;
@@ -425,40 +515,42 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   override performUpdate(): void {
     const firstRender = !this.#viewOutput.elementsTreeOutline;
-    this.#view(
-        {
-          omitRootDOMNode: this.omitRootDOMNode,
-          selectEnabled: this.selectEnabled,
-          hideGutter: this.hideGutter,
-          maxTreeDepth: this.#maxTreeDepth,
-          enableContextMenu: this.#enableContextMenu,
-          showComments: this.#showComments,
-          showAIButton: this.#showAIButton,
-          disableEdits: this.#disableEdits,
-          expandRoot: this.#expandRoot,
-          visibleWidth: this.#visibleWidth,
-          visible: this.#visible,
-          wrap: this.#wrap,
-          maxRowsShown: this.#maxRows,
-          showSelectionOnKeyboardFocus: this.showSelectionOnKeyboardFocus,
-          preventTabOrder: this.preventTabOrder,
-          deindentSingleNode: this.deindentSingleNode,
-
-          currentHighlightedNode: this.#currentHighlightedNode,
-          selectedNode: this.selectedDOMNode(),
-          onElementsTreeUpdated: this.onElementsTreeUpdated.bind(this),
-          onSelectedNodeChanged: event => {
-            this.#clearHighlightedNode();
-            this.onSelectedNodeChanged(event);
-          },
-          onElementCollapsed: () => {
-            this.#clearHighlightedNode();
-          },
-          onElementExpanded: () => {
-            this.#clearHighlightedNode();
-          },
-        },
-        this.#viewOutput, this.contentElement);
+    this.#view({
+      omitRootDOMNode: this.omitRootDOMNode,
+      selectEnabled: this.selectEnabled,
+      hideGutter: this.hideGutter,
+      maxTreeDepth: this.#maxTreeDepth,
+      enableContextMenu: this.#enableContextMenu,
+      showComments: this.#showComments,
+      showAIButton: this.#showAIButton,
+      disableEdits: this.#disableEdits,
+      expandRoot: this.#expandRoot,
+      visibleWidth: this.#visibleWidth,
+      visible: this.#visible,
+      wrap: this.#wrap,
+      maxRowsShown: this.#maxRows,
+      showSelectionOnKeyboardFocus: this.showSelectionOnKeyboardFocus,
+      preventTabOrder: this.preventTabOrder,
+      deindentSingleNode: this.deindentSingleNode,
+
+      currentHighlightedNode: this.#currentHighlightedNode,
+      selectedNode: this.selectedDOMNode(),
+      onElementsTreeUpdated: this.onElementsTreeUpdated.bind(this),
+      onSelectedNodeChanged: event => {
+        this.#clearHighlightedNode();
+        this.onSelectedNodeChanged(event);
+      },
+      onElementCollapsed: () => {
+        this.#clearHighlightedNode();
+      },
+      onElementExpanded: () => {
+        this.#clearHighlightedNode();
+      },
+      onSaveNodeToTempVariable: node => {
+        void this.saveNodeToTempVariable(node);
+      },
+    },
+               this.#viewOutput, this.contentElement);
     if (firstRender && this.#viewOutput.elementsTreeOutline) {
       this.#viewOutput.elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.ShowAllRows, () => {
         this.maxRows = undefined;
@@ -529,7 +621,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   toggleHideElement(node: SDK.DOMModel.DOMNode): void {
-    void this.#viewOutput.elementsTreeOutline?.toggleHideElement(node);
+    void node.toggleHideElement();
+  }
+
+  isToggledToHidden(node: SDK.DOMModel.DOMNode): boolean {
+    return node.isToggledToHidden();
   }
 
   toggleEditAsHTML(node: SDK.DOMModel.DOMNode): void {
@@ -537,13 +633,17 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   duplicateNode(node: SDK.DOMModel.DOMNode): void {
-    this.#viewOutput.elementsTreeOutline?.duplicateNode(node);
+    node.duplicate();
   }
 
   copyStyles(node: SDK.DOMModel.DOMNode): void {
     void this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.copyStyles();
   }
 
+  async saveNodeToTempVariable(node: SDK.DOMModel.DOMNode): Promise<void> {
+    await this.#viewOutput.elementsTreeOutline?.saveNodeToTempVariable(node);
+  }
+
   /**
    * FIXME: used to determine focus state, probably we can have a better
    * way to do it.
@@ -563,9 +663,18 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
   }
 
+  override wasHidden(): void {
+    super.wasHidden();
+    this.#visible = false;
+    this.#viewOutput.imagePreviewPopover?.hide();
+    this.performUpdate();
+  }
+
   override detach(overrideHideOnDetach?: boolean): void {
     super.detach(overrideHideOnDetach);
     this.#visible = false;
+    this.#showHTMLCommentsSetting.removeChangeListener(this.#onShowHTMLCommentsChange, this);
+    this.#viewOutput.imagePreviewPopover?.hide();
     this.performUpdate();
   }
 
@@ -600,11 +709,9 @@ export class ElementsTreeOutline extends
   private rootDOMNodeInternal: SDK.DOMModel.DOMNode|null;
   selectedDOMNodeInternal: SDK.DOMModel.DOMNode|null;
   private visible: boolean;
-  private readonly imagePreviewPopover: ImagePreviewPopover;
   private updateRecords: Map<SDK.DOMModel.DOMNode, Elements.ElementUpdateRecord.ElementUpdateRecord>;
   private treeElementsBeingUpdated: Set<ElementsTreeElement>;
   decoratorExtensions: MarkerDecoratorRegistration[]|null;
-  private showHTMLCommentsSetting: Common.Settings.Setting<boolean>;
   private multilineEditing?: MultilineEditorController|null;
   private visibleWidthInternal?: number;
   private clipboardNodeData?: ClipboardData;
@@ -616,7 +723,6 @@ export class ElementsTreeOutline extends
   private updateModifiedNodesTimeout?: number;
   #topLayerContainerByDocument = new WeakMap<SDK.DOMModel.DOMDocument, TopLayerContainer>();
   #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
-  #popupHelper?: UI.PopoverHelper.PopoverHelper;
   #nodeElementToIssues = new Map<Element, IssuesManager.Issue.Issue[]>();
   maxTreeDepth?: number;
   enableContextMenu: boolean;
@@ -671,9 +777,6 @@ export class ElementsTreeOutline extends
       this.elementInternal.addEventListener('clipboard-cut', this.onCopyOrCut.bind(this, true), false);
       this.elementInternal.addEventListener('clipboard-paste', this.onPaste.bind(this), false);
     }
-    if (this.enableContextMenu) {
-      this.elementInternal.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);
-    }
 
     outlineDisclosureElement.appendChild(this.elementInternal);
     this.element = shadowContainer;
@@ -686,82 +789,11 @@ export class ElementsTreeOutline extends
 
     this.visible = false;
 
-    this.imagePreviewPopover = new ImagePreviewPopover(
-        this.contentElement,
-        event => {
-          let link: (Element|null) = (event.target as Element | null);
-          while (link && !ImagePreviewPopover.getImageURL(link)) {
-            link = link.parentElementOrShadowHost();
-          }
-          return link;
-        },
-        async link => {
-          const listItem = UI.UIUtils.enclosingNodeOrSelfWithNodeName(link, 'li');
-          if (!listItem) {
-            return undefined;
-          }
-
-          const treeElement =
-              (UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(listItem) as ElementsTreeElement | undefined);
-          return await UIComponentUtils.ImagePreview.loadPrecomputedFeatures(treeElement?.node());
-        });
-
     this.updateRecords = new Map();
     this.treeElementsBeingUpdated = new Set();
 
     this.decoratorExtensions = null;
-    if (this.showComments) {
-      this.showHTMLCommentsSetting = Common.Settings.Settings.instance().moduleSetting('show-html-comments');
-      this.showHTMLCommentsSetting.addChangeListener(this.onShowHTMLCommentsChange.bind(this));
-    } else {
-      this.showHTMLCommentsSetting = {
-        get: () => false,
-        addChangeListener: () => {},
-        removeChangeListener: () => {},
-      } as unknown as Common.Settings.Setting<boolean>;
-    }
     this.setUseLightSelectionColor(true);
-    // TODO(changhaohan): refactor the popover to use tooltip component.
-    this.#popupHelper = new UI.PopoverHelper.PopoverHelper(this.elementInternal, event => {
-      const hoveredNode = event.composedPath()[0] as Element;
-      if (!hoveredNode?.matches('.violating-element')) {
-        return null;
-      }
-
-      const issues = this.#nodeElementToIssues.get(hoveredNode);
-      if (!issues) {
-        return null;
-      }
-
-      return {
-        box: hoveredNode.boxInWindow(),
-        show: async (popover: UI.GlassPane.GlassPane) => {
-          popover.setIgnoreLeftMargin(true);
-          // clang-format off
-          render(html`
-            <div class="squiggles-content">
-              ${issues.map(issue => {
-            const elementIssueDetails = getElementIssueDetails(issue);
-            if (!elementIssueDetails) {
-              // This shouldn't happen, but add this if check to pass ts check.
-              return nothing;
-            }
-            const issueKindIconName = IssueCounter.IssueCounter.getIssueKindIconName(issue.getKind());
-            const openIssueEvent = (): Promise<void> => Common.Revealer.reveal(issue);
-            return html`
-                  <div class="squiggles-content-item">
-                  <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
-                  <devtools-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</devtools-link>
-                  <span>${elementIssueDetails.tooltip}</span>
-                  </div>`;
-          })}
-            </div>`, popover.contentElement);
-          // clang-format on
-          return true;
-        },
-      };
-    }, 'elements.issue');
-    this.#popupHelper.setTimeout(300);
   }
 
   static forDOMModel(domModel: SDK.DOMModel.DOMModel): ElementsTreeOutline|null {
@@ -863,12 +895,8 @@ export class ElementsTreeOutline extends
     this.#nodeElementToIssues.set(element, issues);
   }
 
-  private onShowHTMLCommentsChange(): void {
-    const selectedNode = this.selectedDOMNode();
-    if (selectedNode && selectedNode.nodeType() === Node.COMMENT_NODE && !this.showHTMLCommentsSetting.get()) {
-      this.selectDOMNode(selectedNode.parentNode);
-    }
-    this.update();
+  issuesByNodeElement(element: Element): IssuesManager.Issue.Issue[]|undefined {
+    return this.#nodeElementToIssues.get(element);
   }
 
   setWordWrap(wrap: boolean): void {
@@ -993,7 +1021,7 @@ export class ElementsTreeOutline extends
   }
 
   duplicateNode(targetNode: SDK.DOMModel.DOMNode): void {
-    this.performDuplicate(targetNode);
+    targetNode.duplicate();
   }
 
   private onPaste(event: Event): void {
@@ -1031,26 +1059,12 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private performDuplicate(targetNode: SDK.DOMModel.DOMNode): void {
-    if (targetNode.isInShadowTree()) {
-      return;
-    }
-
-    const parentNode = targetNode.parentNode ? targetNode.parentNode : targetNode;
-    if (parentNode.nodeName() === '#document') {
-      return;
-    }
-
-    targetNode.copyTo(parentNode, targetNode.nextSibling);
-  }
-
   setVisible(visible: boolean): void {
     if (visible === this.visible) {
       return;
     }
     this.visible = visible;
     if (!this.visible) {
-      this.imagePreviewPopover.hide();
       if (this.multilineEditing) {
         this.multilineEditing.cancel();
       }
@@ -1534,60 +1548,9 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private contextMenuEventFired(event: MouseEvent): void {
-    const treeElement = this.treeElementFromEventInternal(event);
-    if (treeElement instanceof ElementsTreeElement) {
-      void this.showContextMenu(treeElement, event);
-    }
-  }
-
-  async showContextMenu(treeElement: ElementsTreeElement, event: Event): Promise<void> {
-    if (UI.UIUtils.isEditing() || !this.enableContextMenu) {
-      return;
-    }
-
-    const node = (event.target as Node | null);
-    if (!node) {
-      return;
-    }
-
-    // The context menu construction may be async. In order to
-    // make sure that no other (default) context menu shows up, we need
-    // to stop propagating and prevent the default action.
-    event.stopPropagation();
-    event.preventDefault();
-
-    const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    const isPseudoElement = Boolean(treeElement.node().pseudoType());
-    const isTag = treeElement.node().nodeType() === Node.ELEMENT_NODE && !isPseudoElement;
-
-    let textNode: Element|null = node.enclosingNodeOrSelfWithClass('webkit-html-text-node');
-    if (textNode?.classList.contains('bogus')) {
-      textNode = null;
-    }
-    const commentNode = node.enclosingNodeOrSelfWithClass('webkit-html-comment');
-    contextMenu.saveSection().appendItem(
-        i18nString(UIStrings.storeAsGlobalVariable), this.saveNodeToTempVariable.bind(this, treeElement.node()),
-        {jslogContext: 'store-as-global-variable'});
-    if (textNode) {
-      await treeElement.populateTextContextMenu(contextMenu, textNode);
-    } else if (isTag) {
-      await treeElement.populateTagContextMenu(contextMenu, event);
-    } else if (commentNode) {
-      await treeElement.populateNodeContextMenu(contextMenu);
-    } else if (isPseudoElement) {
-      treeElement.populatePseudoElementContextMenu(contextMenu);
-    } else if (treeElement.node().nodeType() === Node.PROCESSING_INSTRUCTION_NODE) {
-      await treeElement.populateProcessingElementContextMenu(contextMenu);
-    }
-
-    ElementsPanel.instance().populateAdornerSettingsContextMenu(contextMenu);
+  showContextMenu: (treeElement: ElementsTreeElement, event: Event) => void = () => {};
 
-    contextMenu.appendApplicableItems(treeElement.node());
-    void contextMenu.show();
-  }
-
-  private async saveNodeToTempVariable(node: SDK.DOMModel.DOMNode): Promise<void> {
+  async saveNodeToTempVariable(node: SDK.DOMModel.DOMNode): Promise<void> {
     const remoteObjectForConsole = await node.resolveToObject();
     const consoleModel = remoteObjectForConsole?.runtimeModel().target()?.model(SDK.ConsoleModel.ConsoleModel);
     await consoleModel?.saveToTempVariable(
@@ -1701,94 +1664,17 @@ export class ElementsTreeOutline extends
     return newTreeItem;
   }
 
-  /**
-   * Runs a script on the node's remote object that toggles a class name on
-   * the node and injects a stylesheet into the head of the node's document
-   * containing a rule to set "visibility: hidden" on the class and all it's
-   * ancestors.
-   */
   async toggleHideElement(node: SDK.DOMModel.DOMNode): Promise<void> {
-    let pseudoElementName = node.pseudoType() ? node.nodeName() : null;
-    if (pseudoElementName && node.pseudoIdentifier()) {
-      pseudoElementName += `(${node.pseudoIdentifier()})`;
-    }
-
-    let effectiveNode: SDK.DOMModel.DOMNode|null = node;
-    while (effectiveNode?.pseudoType()) {
-      if (effectiveNode !== node && effectiveNode.pseudoType() === 'column') {
-        // Ideally we would select the specific column pseudo element, but
-        // we don't have a way to do that at the moment.
-        pseudoElementName = '::column' + pseudoElementName;
-      }
-      effectiveNode = effectiveNode.parentNode;
-    }
-    if (!effectiveNode) {
-      return;
-    }
-
-    const hidden = node.marker('hidden-marker');
-    const object = await effectiveNode.resolveToObject('');
-
-    if (!object) {
-      return;
-    }
-
-    await object.callFunction(
-        (toggleClassAndInjectStyleRule as (this: Object, ...arg1: unknown[]) => void),
-        [{value: pseudoElementName}, {value: !hidden}]);
-    object.release();
-    node.setMarker('hidden-marker', hidden ? null : true);
-
-    function toggleClassAndInjectStyleRule(this: Element, pseudoElementName: string|null, hidden: boolean): void {
-      const classNamePrefix = '__web-inspector-hide';
-      const classNameSuffix = '-shortcut__';
-      const styleTagId = '__web-inspector-hide-shortcut-style__';
-      const pseudoElementNameEscaped = pseudoElementName ? pseudoElementName.replace(/[\(\)\:]/g, '_') : '';
-      const className = classNamePrefix + pseudoElementNameEscaped + classNameSuffix;
-      this.classList.toggle(className, hidden);
-
-      let localRoot: Element|HTMLHeadElement = this;
-      while (localRoot.parentNode) {
-        localRoot = (localRoot.parentNode as Element);
-      }
-      if (localRoot.nodeType === Node.DOCUMENT_NODE) {
-        localRoot = document.head;
-      }
-
-      let style = localRoot.querySelector('style#' + styleTagId);
-      if (!style) {
-        const selectors = [];
-        selectors.push('.__web-inspector-hide-shortcut__');
-        selectors.push('.__web-inspector-hide-shortcut__ *');
-        const selector = selectors.join(', ');
-        const ruleBody = '    visibility: hidden !important;';
-        const rule = '\n' + selector + '\n{\n' + ruleBody + '\n}\n';
-
-        style = document.createElement('style');
-        style.id = styleTagId;
-        style.textContent = rule;
-
-        localRoot.appendChild(style);
-      }
-
-      // In addition to putting them on the element we want to hide, we will
-      // also add pseudo element classes to the style element to keep track of
-      // which pseudo elements we have style rules for.
-      if (pseudoElementName && !style.classList.contains(className)) {
-        style.classList.add(className);
-        style.textContent = `.${className}${pseudoElementName}, ${style.textContent}`;
-      }
-    }
+    await node.toggleHideElement();
   }
 
   isToggledToHidden(node: SDK.DOMModel.DOMNode): boolean {
-    return Boolean(node.marker('hidden-marker'));
+    return node.isToggledToHidden();
   }
 
   private reset(): void {
     this.rootDOMNode = null;
     this.selectDOMNode(null, false);
-    this.imagePreviewPopover.hide();
     delete this.clipboardNodeData;
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     this.updateRecords.clear();
@@ -2117,7 +2003,7 @@ export class ElementsTreeOutline extends
     if (node.childNodeCount()) {
       // Children may be stale when the outline is not wired to receive DOMModel updates.
       let children: SDK.DOMModel.DOMNode[] = node.children() || [];
-      if (!this.showHTMLCommentsSetting.get()) {
+      if (!this.showComments) {
         children = children.filter(n => n.nodeType() !== Node.COMMENT_NODE);
       }
       visibleChildren.push(...children);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1562,7 +1562,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private createRenderingShortcuts(): UI.Toolbar.ToolbarButton {
     const prefersColorSchemeSetting = Common.Settings.Settings.instance().resolve(
         SDK.SDKSettings.emulatedCSSMediaFeaturePrefersColorSchemeSettingDescriptor);
-    const autoDarkModeSetting = Common.Settings.Settings.instance().moduleSetting('emulate-auto-dark-mode');
+    const autoDarkModeSetting =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.emulateAutoDarkModeSettingDescriptor);
     const decorateStatus = (condition: boolean, title: string): string => `${condition ? '✓ ' : ''}${title}`;
 
     const button = new UI.Toolbar.ToolbarToggle(