chrome-devtools-frontend 1.0.1596535 → 1.0.1597448

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/lighthouse/LighthousePanel.ts

@@ -63,6 +63,11 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let lighthousePanelInstace: LighthousePanel;
 type Nullable<T> = T|null;
 
+export class ActiveLighthouseReport {
+  constructor(public report: LighthouseModel.ReporterTypes.ReportJSON) {
+  }
+}
+
 export class LighthousePanel extends UI.Panel.Panel {
   private readonly controller: LighthouseController;
   private readonly startView: StartView;
@@ -108,6 +113,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.renderStartView();
 
     this.controller.recomputePageAuditability();
+    UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, null);
   }
 
   static instance(opts?: {forceNew: boolean, protocolService: ProtocolService, controller: LighthouseController}):
@@ -154,9 +160,11 @@ export class LighthousePanel extends UI.Panel.Panel {
       this.renderStatusView();
       const {lhr, artifacts} = await this.controller.collectLighthouseResults();
       this.buildReportUI(lhr, artifacts);
+      UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, new ActiveLighthouseReport(lhr));
       return {report: lhr};
     } catch (err) {
       this.handleError(err);
+      UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, null);
       return {report: null};
     }
   }

package/front_end/panels/settings/SettingsScreen.ts

@@ -636,7 +636,7 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
               <span>${i18nString(UIStrings.greenDevUnstable)}</span>
              </div>
              <div class="settings-experiments-block">
-               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'copyToGemini', 'breakpointDebuggerAgent'])}
+               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'copyToGemini', 'breakpointDebuggerAgent', 'emulationCapabilities'])}
              </div>
            </devtools-card>
          </div>
@@ -647,7 +647,8 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
 const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string> = {
   aiAnnotations: 'AI auto-annotations',
   copyToGemini: 'Copy changes to AI Prompt',
-  breakpointDebuggerAgent: 'Breakpoint Debugger Agent'
+  breakpointDebuggerAgent: 'Breakpoint Debugger Agent',
+  emulationCapabilities: 'Emulation Capabilities',
 };
 
 function renderPrototypeCheckboxes(

package/front_end/ui/legacy/UIUtils.ts

@@ -2094,10 +2094,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     const patchingWrapper = <Args extends any[], R>(fn: (...args: Args) => R): ((...args: Args) => R) => {
       return function(this: unknown, ...args: Args): R {
         const result = fn.apply(this, args);
-        if (isLitTemplate(result)) {
-          HTMLElementWithLightDOMTemplate.patchLitTemplate(result);
-        }
-        return result;
+        return patchValue(result) as R;
       };
     };
     if (template === Lit.nothing) {
@@ -2117,7 +2114,10 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function isCallable(value: unknown): value is(...args: any[]) => any {
-      return typeof value === 'function';
+      // Native class constructors cannot be invoked without 'new', and we shouldn't attempt to wrap them.
+      // Differentiate them from regular functions by checking their 'prototype' descriptor:
+      // class constructors have a non-writable prototype, whereas regular functions have a writable prototype.
+      return typeof value === 'function' && Object.getOwnPropertyDescriptor(value, 'prototype')?.writable !== false;
     }
 
     function patchValue(value: unknown): unknown {

package/front_end/ui/legacy/Widget.ts

@@ -38,6 +38,8 @@ import * as Lit from '../../ui/lit/lit.js';
 import {appendStyle, deepActiveElement} from './DOMUtilities.js';
 import {cloneCustomElement, createShadowRootWithCoreStyles} from './UIUtils.js';
 
+const {html} = Lit;
+
 // Remember the original DOM mutation methods here, since we
 // will override them below to sanity check the Widget system.
 const originalAppendChild = Element.prototype.appendChild;
@@ -223,7 +225,7 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
   }
 
   override removeChild<T extends Node>(child: T): T {
-    const childWidget = Widget.get(child as unknown as HTMLElement);
+    const childWidget = Widget.get(child);
     if (childWidget) {
       childWidget.detach();
       return child;
@@ -233,7 +235,7 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
 
   override removeChildren(): void {
     for (const child of this.children) {
-      const childWidget = Widget.get(child as unknown as HTMLElement);
+      const childWidget = Widget.get(child);
       if (childWidget) {
         childWidget.detach();
       }
@@ -263,6 +265,35 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
 
 customElements.define('devtools-widget', WidgetElement);
 
+export class WidgetDirective extends Lit.Directive.Directive {
+  constructor(partInfo: Lit.Directive.PartInfo) {
+    super(partInfo);
+    if (partInfo.type !== Lit.Directive.PartType.CHILD) {
+      throw new Error('Widget directive must be used as a child directive.');
+    }
+  }
+
+  render<F extends WidgetFactory<Widget>, ParamKeys extends keyof InferWidgetTFromFactory<F>>(
+      widgetClass: F,
+      widgetParams?: Pick<InferWidgetTFromFactory<F>, ParamKeys>&Partial<InferWidgetTFromFactory<F>>): unknown {
+    // We use `repeat` to force Lit to recreate the `<devtools-widget>` DOM node when the `widgetClass` changes.
+    // If we didn't use `repeat` and used `html` directly, Lit would reuse the same `<devtools-widget>` instance
+    // even if `widgetClass` changed (for example, in a ternary operator `condition ? widget(A) : widget(B)`).
+    // This is because the template string is the same, so Lit reuses the DOM node and only updates `.widgetConfig`,
+    // which does not properly recreate the widget instance.
+    return Lit.Directives.repeat(
+        [widgetClass], () => widgetClass,
+        () => html`<devtools-widget .widgetConfig=${
+            widgetConfig(widgetClass, widgetParams as never)}></devtools-widget>`);
+  }
+}
+
+export const widget = Lit.Directive.directive(WidgetDirective) as
+    <F extends WidgetFactory<Widget>, ParamKeys extends keyof InferWidgetTFromFactory<F>>(
+                          widgetClass: F,
+                          widgetParams?: Pick<InferWidgetTFromFactory<F>, ParamKeys>&
+                          Partial<InferWidgetTFromFactory<F>>) => Lit.Directive.DirectiveResult<typeof WidgetDirective>;
+
 export function widgetRef<T extends Widget, Args extends unknown[]>(
     type: Platform.Constructor.Constructor<T, Args>, callback: (_: T) => void): ReturnType<typeof Lit.Directives.ref> {
   return Lit.Directives.ref((e?: Element) => {

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1808,6 +1808,7 @@ export const knownContextValues = new Set([
   'greendev-artifact-viewer-enabled',
   'greendev-breakpoint-debugger-agent-enabled',
   'greendev-copy-to-gemini-enabled',
+  'greendev-emulation-capabilities-enabled',
   'greendev-in-devtools-floaty-enabled',
   'greendev-inline-widgets-enabled',
   'greendev-prototypes',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1596535"
+  "version": "1.0.1597448"
 }