chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -284,8 +284,8 @@ const UIStrings = {
    */
   startAChat: 'Start a chat',
   /**
-   * @description Label of an adorner next to the html node in the Elements panel.
-   */
+   * @description Label of an adorner next to the html node in the Elements panel.
+   */
   viewSourceCode: 'View source code',
   /**
    * @description Context menu item in Elements panel to assess visibility of an element via AI.
@@ -436,7 +436,6 @@ export interface ViewInput {
   showAiButton: boolean;
   aiButtonTitle?: string;
   onAiButtonClick: (e: Event) => void;
-
   decorations: Decoration[];
   descendantDecorations: Decoration[];
   decorationsTooltip: string;
@@ -806,16 +805,13 @@ function renderAttribute(
 
   // clang-format off
   return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name"
-      ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${
-      relationRefDirective}>${name}</span>${
-      hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${
-                    animateOn(
-                        Boolean(updateRecord?.isAttributeModified(name) && hasText),
-                        DOM_UPDATE_ANIMATION_CLASS_NAME)} ${valueRelationRefDirective} ${withEntitiesRef}>
+      ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${relationRefDirective}>${name}</span>${hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${animateOn(
+    Boolean(updateRecord?.isAttributeModified(name) && hasText),
+    DOM_UPDATE_ANIMATION_CLASS_NAME)} ${valueRelationRefDirective} ${withEntitiesRef}>
                         ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
                         ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
                 </span>"` :
-                nothing}</span>`;
+      nothing}</span>`;
   // clang-format on
 }
 
@@ -868,15 +864,15 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
       ${input.node ? html`<span class="highlight">${renderTitle(
-          input.node,
-          input.isClosingTag,
-          input.expanded,
-          input.isExpandable,
-          input.isXMLMimeType,
-          input.updateRecord,
-          input.onHighlightSearchResults,
-          input.onExpand,
-      )}</span>` : nothing}
+    input.node,
+    input.isClosingTag,
+    input.expanded,
+    input.isExpandable,
+    input.isXMLMimeType,
+    input.updateRecord,
+    input.onHighlightSearchResults,
+    input.onExpand,
+  )}</span>` : nothing}
       ${input.isHovered || input.isSelected ? html`
         <div class="selection fill" style=${`margin-left: ${-input.indent}px`}></div>
       ` : nothing}
@@ -913,7 +909,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER).track({ click: true })}
           active=${input.containerAdornerActive}
           aria-label=${input.containerAdornerActive ? i18nString(UIStrings.enableContainer) : i18nString(UIStrings.disableContainer)}
           @click=${input.onContainerAdornerClick}
@@ -930,7 +926,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.FLEX}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX).track({ click: true })}
           active=${input.flexAdornerActive}
           aria-label=${input.flexAdornerActive ? i18nString(UIStrings.disableFlexMode) : i18nString(UIStrings.enableFlexMode)}
           @click=${input.onFlexAdornerClick}
@@ -944,7 +940,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID}
-          jslog=${VisualLogging.adorner(input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID).track({click: true})}
+          jslog=${VisualLogging.adorner(input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID).track({ click: true })}
           active=${input.gridAdornerActive}
           aria-label=${input.gridAdornerActive ? i18nString(UIStrings.disableGridMode) : i18nString(UIStrings.enableGridMode)}
           @click=${input.onGridAdornerClick}
@@ -958,7 +954,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES).track({ click: true })}
           active=${input.gridAdornerActive}
           aria-label=${input.gridAdornerActive ? i18nString(UIStrings.disableGridLanesMode) : i18nString(UIStrings.enableGridLanesMode)}
           @click=${input.onGridAdornerClick}
@@ -971,7 +967,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           role=button
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA).track({ click: true })}
           aria-label=${i18nString(UIStrings.openMediaPanel)}
           @click=${input.onMediaAdornerClick}
           @keydown=${handleAdornerKeydown(input.onMediaAdornerClick)}
@@ -986,7 +982,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER).track({ click: true })}
           active=${input.popoverAdornerActive}
           aria-label=${input.popoverAdornerActive ? i18nString(UIStrings.stopForceOpenPopover) : i18nString(UIStrings.forceOpenPopover)}
           @click=${input.onPopoverAdornerClick}
@@ -999,7 +995,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           role=button
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER).track({ click: true })}
           aria-label=${i18nString(UIStrings.reveal)}
           @click=${input.onTopLayerAdornerClick}
           @keydown=${handleAdornerKeydown(input.onTopLayerAdornerClick)}
@@ -1011,7 +1007,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${input.showStartingStyleAdorner ? html`<devtools-adorner
           class="starting-style"
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE).track({ click: true })}
           active=${input.startingStyleAdornerActive}
           toggleable=true
           aria-label=${input.startingStyleAdornerActive ? i18nString(UIStrings.disableStartingStyle) : i18nString(UIStrings.enableStartingStyle)}
@@ -1023,7 +1019,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${input.showScrollAdorner ? html`<devtools-adorner
           class="scroll"
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL).track({ click: true })}
           aria-label=${i18nString(UIStrings.elementHasScrollableOverflow)}
           ${adornerRef()}>
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL}</span>
@@ -1033,7 +1029,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           role=button
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SLOT}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SLOT).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SLOT).track({ click: true })}
           @click=${input.onSlotAdornerClick}
           @mousedown=${(e: Event) => e.stopPropagation()}
           ${adornerRef()}>
@@ -1045,7 +1041,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${input.showScrollSnapAdorner ? html`<devtools-adorner
           class="scroll-snap"
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP).track({ click: true })}
           active=${input.scrollSnapAdornerActive}
           toggleable=true
           aria-label=${input.scrollSnapAdornerActive ? i18nString(UIStrings.disableScrollSnap) : i18nString(UIStrings.enableScrollSnap)}
@@ -1056,7 +1052,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         </devtools-adorner>` : nothing}
       </div>`: nothing}
       ${input.isSelected ? html`
-        <span class="selected-hint" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: '$0'})} aria-hidden="true"></span>
+        <span class="selected-hint" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, { PH1: '$0' })} aria-hidden="true"></span>
       ` : nothing}
       ${input.showAiButton ? html`
         <span class="ai-button-container">
@@ -1261,7 +1257,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
           showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !this.isClosingTag(),
           startingStyleAdornerActive: this.#startingStyleAdornerActive,
-          onStartingStyleAdornerClick: (event: Event) => this.#onStartingStyleAdornerClick(event),
+          onStartingStyleAdornerClick:
+              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onStartingStyleAdornerClick(event),
           onSlotAdornerClick: () => {
             if (this.nodeInternal.assignedSlot) {
               const deferredNode = this.nodeInternal.assignedSlot.deferredNode;
@@ -1271,25 +1268,32 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
             }
           },
           topLayerIndex: this.node().topLayerIndex(),
-          onViewSourceAdornerClick: this.revealHTMLInSources.bind(this),
+          onViewSourceAdornerClick: this.treeOutline?.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
           onGutterClick: this.showContextMenu.bind(this),
-          onContainerAdornerClick: (event: Event) => this.#onContainerAdornerClick(event),
-          onFlexAdornerClick: (event: Event) => this.#onFlexAdornerClick(event),
-          onGridAdornerClick: (event: Event) => this.#onGridAdornerClick(event),
-          onMediaAdornerClick: (event: Event) => this.#onMediaAdornerClick(event),
-          onPopoverAdornerClick: (event: Event) => this.#onPopoverAdornerClick(event),
-          onScrollSnapAdornerClick: (event: Event) => this.#onScrollSnapAdornerClick(event),
-          onTopLayerAdornerClick: () => {
-            if (!this.treeOutline) {
-              return;
-            }
-            this.treeOutline.revealInTopLayer(this.node());
-          },
+          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 &&
-              UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button'),
-          aiButtonTitle: UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button') ?
+              this.isAiButtonEnabled() && (this.treeOutline as ElementsTreeOutline)?.showAIButton,
+          aiButtonTitle: this.isAiButtonEnabled() ?
               UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
               undefined,
           onAiButtonClick: (ev: Event) => {
@@ -1893,6 +1897,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         {jslogContext: 'scroll-into-view'});
   }
 
+  private isAiButtonEnabled(): boolean {
+    return UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button');
+  }
+
   async populateTextContextMenu(contextMenu: UI.ContextMenu.ContextMenu, textNode: Element): Promise<void> {
     if (!this.editing) {
       contextMenu.editSection().appendItem(

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -90,6 +90,12 @@ interface ViewInput {
   omitRootDOMNode: boolean;
   selectEnabled: boolean;
   hideGutter: boolean;
+  maxTreeDepth?: number;
+  enableContextMenu?: boolean;
+  showComments?: boolean;
+  showAIButton?: boolean;
+  disableEdits?: boolean;
+  expandRoot?: boolean;
   visibleWidth?: number;
   visible?: boolean;
   wrap: boolean;
@@ -119,7 +125,9 @@ 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);
+    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(
@@ -128,6 +136,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, input.onElementCollapsed, this);
     target.appendChild(output.elementsTreeOutline.element);
   }
+
   if (input.visibleWidth !== undefined) {
     output.elementsTreeOutline.setVisibleWidth(input.visibleWidth);
   }
@@ -209,6 +218,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   onElementExpanded: () => void = () => {};
   onElementCollapsed: () => void = () => {};
 
+  #maxTreeDepth?: number;
+  #enableContextMenu = true;
+  #showComments = true;
+  #showAIButton = true;
+  #disableEdits = false;
   #visible = false;
   #visibleWidth?: number;
   #wrap = false;
@@ -232,6 +246,51 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return this.#viewOutput.elementsTreeOutline?.rootDOMNode ?? null;
   }
 
+  get maxTreeDepth(): number|undefined {
+    return this.#maxTreeDepth;
+  }
+
+  set maxTreeDepth(maxTreeDepth: number|undefined) {
+    this.#maxTreeDepth = maxTreeDepth;
+    this.performUpdate();
+  }
+
+  get enableContextMenu(): boolean {
+    return this.#enableContextMenu;
+  }
+
+  set enableContextMenu(enableContextMenu: boolean) {
+    this.#enableContextMenu = enableContextMenu;
+    this.performUpdate();
+  }
+
+  get showComments(): boolean {
+    return this.#showComments;
+  }
+
+  set showComments(showComments: boolean) {
+    this.#showComments = showComments;
+    this.performUpdate();
+  }
+
+  get showAIButton(): boolean {
+    return this.#showAIButton;
+  }
+
+  set showAIButton(showAIButton: boolean) {
+    this.#showAIButton = showAIButton;
+    this.performUpdate();
+  }
+
+  get disableEdits(): boolean {
+    return this.#disableEdits;
+  }
+
+  set disableEdits(disableEdits: boolean) {
+    this.#disableEdits = disableEdits;
+    this.performUpdate();
+  }
+
   #currentHighlightedNode: SDK.DOMModel.DOMNode|null = null;
 
   #view: View;
@@ -323,6 +382,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           omitRootDOMNode: this.omitRootDOMNode,
           selectEnabled: this.selectEnabled,
           hideGutter: this.hideGutter,
+          maxTreeDepth: this.#maxTreeDepth,
+          enableContextMenu: this.#enableContextMenu,
+          showComments: this.#showComments,
+          showAIButton: this.#showAIButton,
+          disableEdits: this.#disableEdits,
           visibleWidth: this.#visibleWidth,
           visible: this.#visible,
           wrap: this.#wrap,
@@ -501,8 +565,17 @@ export class ElementsTreeOutline extends
   #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
   #popupHelper?: UI.PopoverHelper.PopoverHelper;
   #nodeElementToIssues = new Map<Element, IssuesManager.Issue.Issue[]>();
-
-  constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean) {
+  readonly maxTreeDepth?: number;
+  readonly enableContextMenu: boolean;
+  readonly showComments: boolean;
+  readonly showAIButton: boolean;
+  readonly disableEdits: boolean;
+  readonly expandRoot: boolean;
+
+  constructor(
+      omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean, maxTreeDepth?: number,
+      enableContextMenu?: boolean, showComments?: boolean, showAIButton?: boolean, disableEdits?: boolean,
+      expandRoot?: boolean) {
     super();
 
     this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
@@ -516,26 +589,35 @@ export class ElementsTreeOutline extends
 
     this.elementInternal = this.element;
     this.elementInternal.classList.add('elements-tree-outline', 'source-code');
-    if (hideGutter) {
-      this.elementInternal.classList.add('elements-hide-gutter');
-    }
+    this.maxTreeDepth = maxTreeDepth;
+    this.enableContextMenu = enableContextMenu ?? true;
+    this.showComments = showComments ?? true;
+    this.showAIButton = showAIButton ?? true;
+    this.disableEdits = disableEdits ?? false;
+    this.expandRoot = expandRoot ?? false;
+    this.elementInternal.classList.toggle('elements-hide-gutter', hideGutter);
     UI.ARIAUtils.setLabel(this.elementInternal, i18nString(UIStrings.pageDom));
     this.elementInternal.addEventListener('focusout', this.onfocusout.bind(this), false);
     this.elementInternal.addEventListener('mousedown', this.onmousedown.bind(this), false);
     this.elementInternal.addEventListener('mousemove', this.onmousemove.bind(this), false);
     this.elementInternal.addEventListener('mouseleave', this.onmouseleave.bind(this), false);
-    this.elementInternal.addEventListener('dragstart', this.ondragstart.bind(this), false);
-    this.elementInternal.addEventListener('dragover', this.ondragover.bind(this), false);
-    this.elementInternal.addEventListener('dragleave', this.ondragleave.bind(this), false);
-    this.elementInternal.addEventListener('drop', this.ondrop.bind(this), false);
-    this.elementInternal.addEventListener('dragend', this.ondragend.bind(this), false);
-    this.elementInternal.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);
-    this.elementInternal.addEventListener('clipboard-beforecopy', this.onBeforeCopy.bind(this), false);
-    this.elementInternal.addEventListener('clipboard-copy', this.onCopyOrCut.bind(this, false), false);
-    this.elementInternal.addEventListener('clipboard-cut', this.onCopyOrCut.bind(this, true), false);
-    this.elementInternal.addEventListener('clipboard-paste', this.onPaste.bind(this), false);
     this.elementInternal.addEventListener('keydown', this.onKeyDown.bind(this), false);
 
+    if (!this.disableEdits) {
+      this.elementInternal.addEventListener('dragstart', this.ondragstart.bind(this), false);
+      this.elementInternal.addEventListener('dragover', this.ondragover.bind(this), false);
+      this.elementInternal.addEventListener('dragleave', this.ondragleave.bind(this), false);
+      this.elementInternal.addEventListener('drop', this.ondrop.bind(this), false);
+      this.elementInternal.addEventListener('dragend', this.ondragend.bind(this), false);
+      this.elementInternal.addEventListener('clipboard-beforecopy', this.onBeforeCopy.bind(this), false);
+      this.elementInternal.addEventListener('clipboard-copy', this.onCopyOrCut.bind(this, false), false);
+      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;
     this.contentElement.setAttribute('jslog', `${VisualLogging.tree('elements')}`);
@@ -571,9 +653,16 @@ export class ElementsTreeOutline extends
     this.treeElementsBeingUpdated = new Set();
 
     this.decoratorExtensions = null;
-
-    this.showHTMLCommentsSetting = Common.Settings.Settings.instance().moduleSetting('show-html-comments');
-    this.showHTMLCommentsSetting.addChangeListener(this.onShowHTMLCommentsChange.bind(this));
+    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 => {
@@ -595,19 +684,20 @@ export class ElementsTreeOutline extends
           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`
+            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>`;
+          })}
             </div>`, popover.contentElement);
           // clang-format on
           return true;
@@ -958,6 +1048,9 @@ export class ElementsTreeOutline extends
     if (this.includeRootDOMNode) {
       const treeElement = this.createElementTreeElement(this.rootDOMNode);
       this.appendChild(treeElement);
+      if (this.expandRoot) {
+        treeElement.expand();
+      }
     } else {
       // FIXME: this could use findTreeElement to reuse a tree element if it already exists
       const children = this.visibleChildren(this.rootDOMNode);
@@ -1774,6 +1867,31 @@ export class ElementsTreeOutline extends
     }
   }
 
+  private isMaxDepthReached(node: SDK.DOMModel.DOMNode): boolean {
+    if (this.maxTreeDepth === undefined || this.maxTreeDepth === Infinity) {
+      return false;
+    }
+    // Allow ShadowRoots and Documents to expand one more level.
+    if (node.nodeType() === Node.DOCUMENT_NODE || node.isShadowRoot()) {
+      return false;
+    }
+    const maxDepth = this.maxTreeDepth;
+    let depth = 0;
+    let current: SDK.DOMModel.DOMNode|null = node;
+    const rootNode = this.rootDOMNode;
+    while (current && current !== rootNode) {
+      depth++;
+      current = current.parentNode;
+    }
+    if (this.includeRootDOMNode) {
+      depth++;
+    }
+    if (depth >= maxDepth) {
+      return true;
+    }
+    return false;
+  }
+
   private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], isClosingTag?: boolean):
       UI.TreeOutline.TreeElement {
     if (node instanceof Array) {
@@ -1870,6 +1988,9 @@ export class ElementsTreeOutline extends
   }
 
   private hasVisibleChildren(node: SDK.DOMModel.DOMNode): boolean {
+    if (this.isMaxDepthReached(node)) {
+      return false;
+    }
     if (node.isIframe()) {
       return true;
     }

package/front_end/panels/elements/EventListenersWidget.ts

@@ -77,6 +77,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/EventListenersWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 let eventListenersWidgetInstance: EventListenersWidget;
 
 interface ViewInput {
@@ -123,11 +124,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           ${i18nString(UIStrings.frameworkListeners)}
         </devtools-checkbox>
       </devtools-toolbar>
-      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(EventListeners.EventListenersView.EventListenersView, {
+      ${widget(EventListeners.EventListenersView.EventListenersView, {
         changeCallback: input.onEventListenersViewChange,
         objects: input.eventListenerObjects,
         filter: input.filter,
-      })}></devtools-widget>
+      })}
     </div>`, target);
   // clang-format on
 };

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -63,6 +63,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
   #computedStyleModelInternal = new ComputedStyle.ComputedStyleModel.ComputedStyleModel();
   #view: View;
+  #filter: RegExp|null = null;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
@@ -84,6 +85,8 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       return;
     }
 
+    this.node()?.domModel().cssModel().discardCachedMatchedCascade();
+    await this.#updateSections();
     this.requestUpdate();
   }
 
@@ -127,17 +130,15 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       this.sectionByElement.set(section.element, section);
     }
     this.#sections = newSections;
+    this.#updateFilter();
     this.swatchPopoverHelper().reposition();
   }
 
   override async performUpdate(): Promise<void> {
     this.hideAllPopovers();
-    this.node()?.domModel().cssModel().discardCachedMatchedCascade();
-
-    await this.#updateSections();
 
     const viewInput: ViewInput = {
-      sections: this.#sections,
+      sections: this.#sections.filter(section => !section.isHidden()),
     };
     this.#view(viewInput, undefined, this.contentElement);
     this.#onUpdateFinished();
@@ -147,6 +148,12 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     this.dispatchEventToListeners(Events.STYLES_UPDATE_COMPLETED);
   }
 
+  #updateFilter(): void {
+    for (const section of this.#sections) {
+      section.updateFilter();
+    }
+  }
+
   swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
     return this.#swatchPopoverHelper;
   }
@@ -157,6 +164,11 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       return;
     }
     this.#computedStyleModelInternal.node = node;
+  }
+
+  set filter(regex: RegExp|null) {
+    this.#filter = regex;
+    this.#updateFilter();
     this.requestUpdate();
   }
 
@@ -195,7 +207,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   }
 
   filterRegex(): RegExp|null {
-    return null;
+    return this.#filter;
   }
 
   setEditingStyle(editing: boolean): void {
@@ -207,7 +219,10 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   }
 
   forceUpdate(): void {
-    this.requestUpdate();
+    this.node()?.domModel().cssModel().discardCachedMatchedCascade();
+    void this.#updateSections().then(() => {
+      this.requestUpdate();
+    });
   }
 
   hideAllPopovers(): void {