chrome-devtools-frontend 1.0.1657855 → 1.0.1661063

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -66,6 +66,19 @@ export class ItemMouseOverEvent<TreeNodeDataType> extends Event {
   }
 }
 
+export class ItemContextMenuEvent<TreeNodeDataType> extends Event {
+  static readonly eventName = 'itemcontextmenu';
+  data: {
+    node: TreeNode<TreeNodeDataType>,
+    originalEvent: MouseEvent,
+  };
+
+  constructor(node: TreeNode<TreeNodeDataType>, originalEvent: MouseEvent) {
+    super(ItemContextMenuEvent.eventName, {bubbles: true, composed: true});
+    this.data = {node, originalEvent};
+  }
+}
+
 export class ItemMouseOutEvent<TreeNodeDataType> extends Event {
   static readonly eventName = 'itemmouseout';
   data: {
@@ -332,14 +345,27 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     void this.#focusTreeNode(domNode);
   }
 
+  #onContextMenu(event: MouseEvent, node: TreeNode<TreeNodeDataType>): void {
+    if (!node) {
+      return;
+    }
+    const innerEvent = new ItemContextMenuEvent(node, event);
+    this.dispatchEvent(innerEvent);
+    if (innerEvent.defaultPrevented) {
+      event.stopPropagation();
+      event.preventDefault();
+      void this.#focusTreeNode((event.currentTarget as HTMLElement)?.parentElement as HTMLLIElement);
+    }
+  }
+
   async #focusTreeNode(domNode: HTMLLIElement): Promise<void> {
     const treeNode = this.#domNodeToTreeNodeMap.get(domNode);
     if (!treeNode) {
       return;
     }
     this.#selectedTreeNode = treeNode;
-    await this.#render();
     this.dispatchEvent(new ItemSelectedEvent(treeNode));
+    await this.#render();
     void RenderCoordinator.write('DOMNode focus', () => {
       domNode.focus();
     });
@@ -496,6 +522,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         })}
       >
         <span class="arrow-and-key-wrapper"
+          @contextmenu=${(event: MouseEvent) => this.#onContextMenu(event, node)}
           @mouseover=${() => {
             this.dispatchEvent(new ItemMouseOverEvent(node));
           }}
@@ -573,6 +600,12 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
 customElements.define('devtools-tree-outline', TreeOutline);
 
 declare global {
+  interface HTMLElementEventMap {
+    [ItemSelectedEvent.eventName]: ItemSelectedEvent<unknown>;
+    [ItemMouseOverEvent.eventName]: ItemMouseOverEvent<unknown>;
+    [ItemMouseOutEvent.eventName]: ItemMouseOutEvent<unknown>;
+    [ItemContextMenuEvent.eventName]: ItemContextMenuEvent<unknown>;
+  }
   interface HTMLElementTagNameMap {
     'devtools-tree-outline': TreeOutline<unknown>;
   }

package/front_end/ui/legacy/ReportView.ts

@@ -142,6 +142,11 @@ export class Section extends VBox {
   getFieldElement(): HTMLElement {
     return this.fieldList;
   }
+
+  getHeaderElement(): HTMLElement {
+    return this.headerElement;
+  }
+
   appendFieldWithCustomView(customElement: HTMLElement): void {
     this.fieldList.append(customElement);
   }

package/front_end/ui/legacy/Treeoutline.ts

@@ -1895,6 +1895,9 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
           removeNode(treeElement);
         }
         parent.treeElement.insertChild(treeElement, index);
+        if (parent.treeElement instanceof TreeViewTreeElement) {
+          parent.treeElement.updateExpansionFromAttribute();
+        }
         if (hasBooleanAttribute(node, 'selected')) {
           treeElement.revealAndSelect(true);
         }
@@ -2034,6 +2037,9 @@ export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
 export class TreeElementWrapper extends HTMLElement {
   #treeElement?: TreeElement;
   set treeElement(treeElement: TreeElement) {
+    if (this.#treeElement === treeElement) {
+      return;
+    }
     if (this.#treeElement?.parent) {
       const parent = this.#treeElement.parent;
       const index = parent.indexOfChild(this.#treeElement);

package/front_end/ui/legacy/View.ts

@@ -86,7 +86,7 @@ export class SimpleView<ContentTypeT extends HTMLElement|DocumentFragment = HTML
     return false;
   }
 
-  toolbarItems(): Promise<ToolbarItem[]> {
+  toolbarItems(): Promise<ToolbarItem[]|TemplateResult> {
     return Promise.resolve([]);
   }
 

package/front_end/ui/legacy/Widget.ts

@@ -84,7 +84,8 @@ function enqueueIntoNextUpdateQueue(widget: AnyWidget): Promise<void> {
   nextUpdateQueue.delete(widget);
   nextUpdateQueue.set(widget, scheduledUpdate);
   if (pendingAnimationFrame === null) {
-    pendingAnimationFrame = requestAnimationFrame(runNextUpdate);
+    const widgetWindow = widget.contentElement.window() || window;
+    pendingAnimationFrame = widgetWindow.requestAnimationFrame(runNextUpdate);
   }
   return scheduledUpdate.promise;
 }
@@ -155,7 +156,8 @@ function runNextUpdate(): void {
         if (nextUpdate) {
           void nextUpdate.promise.then(resolve);
           if (pendingAnimationFrame === null) {
-            pendingAnimationFrame = requestAnimationFrame(runNextUpdate);
+            const widgetWindow = widget.contentElement.window() || window;
+            pendingAnimationFrame = widgetWindow.requestAnimationFrame(runNextUpdate);
           }
         } else {
           resolve();
@@ -182,16 +184,16 @@ function runNextUpdate(): void {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const widgetConfigs = new WeakMap<HTMLElement, WidgetConfig<any>>();
 
-export function registerWidgetConfig<WidgetT extends AnyWidget>(
-    element: HTMLElement, config: WidgetConfig<WidgetT>): void {
+export function registerWidgetConfig<WidgetT extends AnyWidget>(element: HTMLElement,
+                                                                config: WidgetConfig<WidgetT>): void {
   if (!widgetConfigs.has(element)) {
     setUpLifecycleTracking(element);
   }
   widgetConfigs.set(element, config);
 }
 
-function instantiateWidget<WidgetT extends AnyWidget>(
-    element: HTMLElement, widgetConfig: WidgetConfig<WidgetT>): WidgetT {
+function instantiateWidget<WidgetT extends AnyWidget>(element: HTMLElement,
+                                                      widgetConfig: WidgetConfig<WidgetT>): WidgetT {
   if (!widgetConfig.widgetClass) {
     throw new Error('No widgetClass defined');
   }
@@ -794,9 +796,8 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
     if (this.#isRoot) {
       assert(!currentParent, 'Attempt to show root widget under another widget');
     } else {
-      assert(
-          currentParent && widgetMap.get(currentParent) === this.#parentWidget,
-          'Attempt to show under node belonging to alien widget');
+      assert(currentParent && widgetMap.get(currentParent) === this.#parentWidget,
+             'Attempt to show under node belonging to alien widget');
     }
 
     const wasVisible = this.#visible;
@@ -1031,9 +1032,8 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
   getDefaultFocusedElement(): HTMLElement|null {
     const elements = this.getDefaultFocusedElements();
     if (elements.length > 1) {
-      console.error(
-          'Multiple autofocus elements found', this.constructor.name,
-          ...elements.map(e => Platform.StringUtilities.trimMiddle(e.outerHTML, 250)));
+      console.error('Multiple autofocus elements found', this.constructor.name,
+                    ...elements.map(e => Platform.StringUtilities.trimMiddle(e.outerHTML, 250)));
     }
     return elements[0] || null;
   }
@@ -1110,9 +1110,8 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
 
   private hasNonZeroConstraints(): boolean {
     const constraints = this.constraints();
-    return Boolean(
-        constraints.minimum.width || constraints.minimum.height || constraints.preferred.width ||
-        constraints.preferred.height);
+    return Boolean(constraints.minimum.width || constraints.minimum.height || constraints.preferred.width ||
+                   constraints.preferred.height);
   }
 
   suspendInvalidations(): void {

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -36,6 +36,8 @@ import * as UI from '../../legacy.js';
 import dataGridStyles from './dataGrid.css.js';
 import type {DataGridInternalToken} from './DataGridElement.js';
 
+export {dataGridStyles};
+
 const UIStrings = {
   /**
    * @description Accessible text label for expandible nodes in datagrids

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -221,10 +221,15 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       const titleDOMFragment = column.firstElementChild ? document.createDocumentFragment() : undefined;
       if (titleDOMFragment) {
         title = '';
-        for (const child of column.children) {
+        for (const child of column.childNodes) {
           titleDOMFragment.appendChild(child.cloneNode(true));
-          title += child.shadowRoot ? child.shadowRoot.textContent : child.textContent;
+          if (child instanceof Element && child.shadowRoot) {
+            title += child.shadowRoot.textContent;
+          } else if (child.nodeType !== Node.COMMENT_NODE) {
+            title += child.textContent ?? '';
+          }
         }
+        title = title.trim();
       }
       const sortable = hasBooleanAttribute(column, 'sortable');
       const width = column.getAttribute('width') ?? undefined;
@@ -264,7 +269,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     const visibleColumns = new Set(this.#columns.map(({id}) => id).filter(id => !this.#hiddenColumns.has(id)));
     this.#dataGrid.setColumnsVisibility(visibleColumns);
     this.#dataGrid.setEditCallback(hasEditableColumn ? this.#editCallback.bind(this) : undefined, INTERNAL_TOKEN);
-    this.#dataGrid.deleteCallback = hasEditableColumn ? this.#deleteCallback.bind(this) : undefined;
+    this.#dataGrid.deleteCallback = this.#deleteCallback.bind(this);
   }
 
   #needUpdateColumns(mutationList: MutationRecord[]): boolean {

package/front_end/ui/legacy/components/data_grid/data_grid.ts

@@ -15,5 +15,6 @@ import * as ShowMoreDataGridNode from './ShowMoreDataGridNode.js';
 import * as SortableDataGrid from './SortableDataGrid.js';
 import * as ViewportDataGrid from './ViewportDataGrid.js';
 
+export {dataGridStyles} from './DataGrid.js';
 export {ifExpanded} from './DataGridElement.js';
 export {DataGrid, DataGridExporter, ShowMoreDataGridNode, SortableDataGrid, ViewportDataGrid};

package/front_end/ui/legacy/components/object_ui/ObjectPopoverHelper.ts

@@ -37,7 +37,7 @@ export class ObjectPopoverHelper {
 
   dispose(): void {
     if (this.resultHighlightedAsDOM) {
-      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     }
     if (this.linkifier) {
       this.linkifier.dispose();

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -52,7 +52,7 @@ import {RemoteObjectPreviewFormatter, renderNodeTitle} from './RemoteObjectPrevi
 
 export {objectPropertiesSectionStyles, objectValueStyles};
 const {widget} = UI.Widget;
-const {ref, repeat, ifDefined, classMap} = Directives;
+const {ref, repeat, ifDefined, classMap, until} = Directives;
 const UIStrings = {
   /**
    * @description Text in Object Properties Section
@@ -92,6 +92,10 @@ const UIStrings = {
    * @example {50} PH1
    */
   showAllD: 'Show all {PH1}',
+  /**
+   * @description Show all properties including those with null or undefined values
+   */
+  showAll: 'Show all',
   /**
    * @description Value element text content in Object Properties Section. Shown when the developer is
    * viewing a variable in the Scope view, whose value is not available (i.e. because it was optimized
@@ -145,6 +149,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export const EXPANDABLE_MAX_DEPTH = 100;
 
 const objectPropertiesSectionMap = new WeakMap<Element, ObjectPropertiesSection>();
+// TODO(crbug.com/457388389): This cache is a temporary workaround for the <devtools-tree> migration.
+// It can be removed once the entire ObjectPropertiesSection is fully migrated to Lit and
+// the legacy TreeOutline/TreeElement dependencies are removed.
+const topLevelNodesCache = new WeakMap<ObjectTreeNodeBase, {
+  nodes: UI.TreeOutline.TreeElement[],
+  linkifier?: Components.Linkifier.Linkifier,
+}>();
 
 interface NodeChildren {
   properties?: ObjectTreeNode[];
@@ -796,7 +807,7 @@ export class ObjectTreeNode extends ObjectTreeNodeBase {
       } else if (isInteger.test(this.name)) {
         this.#path = `${parentPath}[${this.name}]`;
       } else {
-        this.#path = `${parentPath}[${JSON.stringify(this.name)}]`;
+        this.#path = `${parentPath}[${Platform.StringUtilities.formatAsJSLiteral(this.name)}]`;
       }
     }
     return this.#path;
@@ -1141,7 +1152,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         return html`<span class=value title=${description}>${'<' + i18nString(UIStrings.unknown) + '>'}</span>`;
       }
       if (type === 'string' && typeof description === 'string') {
-        const text = JSON.stringify(description);
+        const text = Platform.StringUtilities.escapeUnicode(JSON.stringify(description));
         const tooLong = description.length > maxRenderableStringLength;
         return html`<span class="value object-value-string" title=${ifDefined(tooLong ? undefined : description)}>${
             tooLong ? widget(ExpandableTextPropertyValue, {text}) : text}</span>`;
@@ -1152,7 +1163,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         return html`<span class="value object-value-trustedtype" title=${ifDefined(tooLong ? undefined : text)}>${
             tooLong ? widget(ExpandableTextPropertyValue, {text}) :
                       html`${className} <span class=object-value-string title=${description}>${
-                          JSON.stringify(description)}</span>`}</span>`;
+                          Platform.StringUtilities.escapeUnicode(JSON.stringify(description))}</span>`}</span>`;
       }
       if (type === 'function') {
         return ObjectPropertiesSection.valueElementForFunctionDescription(description, undefined, undefined, 'value');
@@ -1164,7 +1175,8 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
           event.consume(true);
         }}
             @mousemove=${() => SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(value)}
-            @mouseleave=${() => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}
+            @mouseleave=${
+            () => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance())}
           >${renderNodeTitle(description)}</span>`;
       }
       if (description.length > maxRenderableStringLength) {
@@ -1297,7 +1309,79 @@ export const enum ObjectPropertiesMode {
   OWN_AND_INTERNAL_AND_INHERITED = 1,  // Own, internal, and inherited properties
 }
 
-export class RootElement extends UI.TreeOutline.TreeElement {
+export function populateObjectTreeContextMenu(
+    contextMenu: UI.ContextMenu.ContextMenu,
+    object: ObjectTree,
+    expandRecursively: () => void,
+    collapseChildren: () => void,
+    sortPropertiesAlphabetically: () => void,
+    onShowAllToggled: () => void,
+    ): void {
+  contextMenu.appendApplicableItems(object.object);
+
+  if (object.object instanceof SDK.RemoteObject.LocalJSONObject) {
+    const {value} = object.object;
+    const propertyValue =
+        typeof value === 'object' ? Platform.StringUtilities.escapeUnicode(JSON.stringify(value, null, 2)) : value;
+    const copyValueHandler = (): void => {
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText((propertyValue as string | undefined));
+    };
+    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyValue), copyValueHandler,
+                                              {jslogContext: 'copy-value'});
+  }
+
+  contextMenu.viewSection().appendItem(i18nString(UIStrings.expandRecursively), expandRecursively,
+                                       {jslogContext: 'expand-recursively'});
+  contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren), collapseChildren,
+                                       {jslogContext: 'collapse-children'});
+  if (!object.isWasm) {
+    contextMenu.viewSection().appendCheckboxItem(i18nString(UIStrings.sortPropertiesAlphabetically),
+                                                 sortPropertiesAlphabetically, {
+                                                   checked: object.sortPropertiesAlphabetically,
+                                                   jslogContext: 'sort-properties-alphabetically',
+                                                 });
+  }
+  contextMenu.viewSection().appendCheckboxItem(
+      i18nString(UIStrings.showAll), onShowAllToggled,
+      {checked: object.includeNullOrUndefinedValues, jslogContext: 'show-all'});
+}
+
+export function renderObjectTree(
+    objectTree: ObjectTree,
+    linkifier?: Components.Linkifier.Linkifier,
+    emptyPlaceholder?: string|null,
+    ): unknown {
+  const entry = topLevelNodesCache.get(objectTree);
+  if (entry && entry.linkifier === linkifier) {
+    return html`
+      <ul class="source-code object-properties-section" role="group">
+        ${entry.nodes.map(node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
+      </ul>
+    `;
+  }
+
+  const promise = (async () => {
+    await ObjectPropertyTreeElement.populateChildrenIfNeeded(objectTree);
+    const nodes = Array.from(ObjectPropertyTreeElement.createNodes(
+        objectTree, /* skipProto= */ false, /* skipGettersAndSetters= */ false, linkifier, emptyPlaceholder));
+    topLevelNodesCache.set(objectTree, {linkifier, nodes});
+    const listener = (): void => {
+      topLevelNodesCache.delete(objectTree);
+      objectTree.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, listener);
+    };
+    objectTree.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, listener);
+
+    return html`
+      <ul class="source-code object-properties-section" role="group">
+        ${nodes.map(node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
+      </ul>
+    `;
+  })();
+
+  return until(promise, html`<ul class="source-code object-properties-section" role="group"></ul>`);
+}
+class RootElement extends UI.TreeOutline.TreeElement {
   private readonly object: ObjectTree;
   private readonly linkifier: Components.Linkifier.Linkifier|undefined;
   private readonly emptyPlaceholder: string|null|undefined;
@@ -1341,35 +1425,18 @@ export class RootElement extends UI.TreeOutline.TreeElement {
 
   private onContextMenu(event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    contextMenu.appendApplicableItems(this.object.object);
-
-    if (this.object instanceof SDK.RemoteObject.LocalJSONObject) {
-      const {value} = this.object;
-      const propertyValue = typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
-      const copyValueHandler = (): void => {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText((propertyValue as string | undefined));
-      };
-      contextMenu.clipboardSection().appendItem(
-          i18nString(UIStrings.copyValue), copyValueHandler, {jslogContext: 'copy-value'});
-    }
-
-    contextMenu.viewSection().appendItem(
-        i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this, EXPANDABLE_MAX_DEPTH),
-        {jslogContext: 'expand-recursively'});
-    contextMenu.viewSection().appendItem(
-        i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this), {jslogContext: 'collapse-children'});
-    if (!this.object.isWasm) {
-      contextMenu.viewSection().appendCheckboxItem(i18nString(UIStrings.sortPropertiesAlphabetically), () => {
-        this.object.sortPropertiesAlphabetically = !this.object.sortPropertiesAlphabetically;
-      }, {
-        checked: this.object.sortPropertiesAlphabetically,
-        jslogContext: 'sort-properties-alphabetically',
-      });
-    }
-    contextMenu.viewSection().appendCheckboxItem(i18n.i18n.lockedString('Show all'), () => {
-      this.object.includeNullOrUndefinedValues = !this.object.includeNullOrUndefinedValues;
-    }, {checked: this.object.includeNullOrUndefinedValues, jslogContext: 'show-all'});
+    populateObjectTreeContextMenu(
+        contextMenu,
+        this.object,
+        this.expandRecursively.bind(this, EXPANDABLE_MAX_DEPTH),
+        this.collapseChildren.bind(this),
+        () => {
+          this.object.sortPropertiesAlphabetically = !this.object.sortPropertiesAlphabetically;
+        },
+        () => {
+          this.object.includeNullOrUndefinedValues = !this.object.includeNullOrUndefinedValues;
+        },
+    );
     void contextMenu.show();
   }
 
@@ -1674,6 +1741,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     super();
 
     this.#widget = new ObjectPropertyWidget();
+    this.#widget.markAsRoot();
     this.property = property;
     this.hidden = property.isFiltered;
     this.property.addEventListener(ObjectTreeNodeBase.Events.VALUE_CHANGED, this.#updateValue, this);
@@ -1894,7 +1962,6 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
 
   override onattach(): void {
     this.updateExpandable();
-    this.#widget.markAsRoot();
     this.#widget.show(this.listItemElement);
     this.#widget.property = this.property;
     this.#widget.linkifier = this.linkifier;
@@ -1943,7 +2010,8 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       contextMenu.appendApplicableItems(this.property.object);
       if (this.property.parent?.object instanceof SDK.RemoteObject.LocalJSONObject) {
         const {object: {value}} = this.property;
-        const propertyValue = typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
+        const propertyValue =
+            typeof value === 'object' ? Platform.StringUtilities.escapeUnicode(JSON.stringify(value, null, 2)) : value;
         const copyValueHandler = (): void => {
           Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText((propertyValue as string | undefined));
@@ -1978,7 +2046,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
         jslogContext: 'sort-properties-alphabetically',
       });
     }
-    contextMenu.viewSection().appendCheckboxItem(i18n.i18n.lockedString('Show all'), () => {
+    contextMenu.viewSection().appendCheckboxItem(i18nString(UIStrings.showAll), () => {
       root.includeNullOrUndefinedValues = !root.includeNullOrUndefinedValues;
     }, {checked: root.includeNullOrUndefinedValues, jslogContext: 'show-all'});
     return contextMenu;

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts

@@ -38,6 +38,7 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as FormatterActions from '../../../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import {render} from '../../../../ui/lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import resourceSourceFrameStyles from './resourceSourceFrame.css.js';
@@ -118,7 +119,12 @@ export class SearchableContainer extends UI.Widget.VBox {
 
     const toolbar = this.contentElement.createChild('devtools-toolbar', 'toolbar');
     void sourceFrame.toolbarItems().then(items => {
-      items.map(item => toolbar.appendToolbarItem(item));
+      if (Array.isArray(items)) {
+        items.map(item => toolbar.appendToolbarItem(item));
+      } else {
+        // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+        render(items, toolbar);
+      }
     });
   }
 

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -392,7 +392,8 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       const content =
           this.rawContent instanceof CodeMirror.Text ? this.rawContent.sliceString(0) : this.rawContent || '';
       this.textEditor.state = this.placeholderEditorState(i18nString(UIStrings.formatting));
-      const formatInfo = await Formatter.ScriptFormatter.formatScriptContent(this.contentType, content);
+      const formatInfo = await Formatter.ScriptFormatter.formatScriptContent(Common.Settings.Settings.instance(),
+                                                                             this.contentType, content);
       this.formattedMap = formatInfo.formattedMapping;
       await this.setContent(formatInfo.formattedContent);
       this.prettyBaseDoc = textEditor.state.doc;

package/front_end/ui/legacy/components/utils/ImagePreview.ts

@@ -84,11 +84,13 @@ export class ImagePreview {
       ): Promise<HTMLDivElement|null> {
     const {precomputedFeatures, imageAltText, align} = options;
 
-    let resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(originalImageURL);
+    let resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(SDK.TargetManager.TargetManager.instance(),
+                                                                          originalImageURL);
     let imageURL = originalImageURL;
     if (!isImageResource(resource) && precomputedFeatures?.currentSrc) {
       imageURL = precomputedFeatures.currentSrc;
-      resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(imageURL);
+      resource =
+          SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(SDK.TargetManager.TargetManager.instance(), imageURL);
     }
     if (!resource || !isImageResource(resource)) {
       return null;

package/front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -268,9 +268,16 @@ export class StackTracePreviewContent extends UI.Widget.Widget<ShadowRoot> {
     if (Root.DevToolsContext.globalInstance().has(Workspace.IgnoreListManager.IgnoreListManager)) {
       Workspace.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.#updateHasNonIgnoredLinks);
     }
+    if (this.#stackTrace) {
+      this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
+    }
+    this.requestUpdate();
   }
 
   override willHide(): void {
+    if (this.#stackTrace) {
+      this.#stackTrace.removeEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
+    }
     if (Root.DevToolsContext.globalInstance().has(Workspace.IgnoreListManager.IgnoreListManager)) {
       Workspace.IgnoreListManager.IgnoreListManager.instance().removeChangeListener(this.#updateHasNonIgnoredLinks);
     }
@@ -291,7 +298,9 @@ export class StackTracePreviewContent extends UI.Widget.Widget<ShadowRoot> {
       this.#stackTrace.removeEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
     }
     this.#stackTrace = stackTrace;
-    this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
+    if (this.#stackTrace && this.isShowing()) {
+      this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
+    }
     this.requestUpdate();
   }
 

package/front_end/ui/legacy/inspectorCommon.css

@@ -743,6 +743,11 @@ devtools-toolbar {
     }
   }
 
+  & > devtools-link,
+  & > .devtools-link {
+    cursor: pointer;
+  }
+
   .status-buttons {
     padding: 0 var(--sys-size-2);
     gap: var(--sys-size-2);

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1633,6 +1633,7 @@ export const knownContextValues = new Set([
   'evolved-cls',
   'exclude-folder',
   'exclude-folder-confirmation',
+  'execution-context',
   'expand',
   'expand-recursively',
   'experimental-item',
@@ -2128,6 +2129,7 @@ export const knownContextValues = new Set([
   'is-ad-related',
   'is-landscape',
   'is-mobile',
+  'is-preloaded',
   'is-resident-credential',
   'is-u',
   'is-user-active-false-is-screen-unlocked-false',
@@ -4496,6 +4498,7 @@ export const knownContextValues = new Set([
   'window',
   'window-controls',
   'window-controls-overlay',
+  'window-drag',
   'windows',
   'word-break',
   'word-spacing',

package/mcp/mcp.ts

@@ -7,6 +7,8 @@
 // just import relevant meta files (as long as they don't contain any UI related code)
 import '../front_end/core/sdk/sdk-meta.js';
 import '../front_end/models/workspace/workspace-meta.js';
+import '../front_end/models/persistence/persistence-meta.js';
+import '../front_end/models/logs/logs-meta.js';
 
 /**
  * IMPORTANT! Make sure that any class that is exported here has related unit

package/package.json

@@ -27,6 +27,7 @@
     "lint": "vpython3 third_party/node/node.py --output scripts/test/run_lint_check.mjs",
     "prebuild": "gn gen out/Default",
     "rdb": "rdb stream -new -realm chromium:public --",
+    "rdb-exonerate": "npm run rdb -- vpython3 third_party/node/node.py --output scripts/run_on_target.mjs gen/test/exonerate.js",
     "start": "vpython3 third_party/node/node.py --output scripts/run_start.mjs",
     "webtest": "vpython3 third_party/node/node.py --output scripts/npm_test.js",
     "watch": "npm run build -- --watch",
@@ -68,7 +69,6 @@
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-mocha": "2.0.1",
-    "karma-mocha-reporter": "2.2.5",
     "karma-sourcemap-loader": "0.4.0",
     "karma-spec-reporter": "0.0.36",
     "license-checker": "25.0.1",
@@ -76,7 +76,7 @@
     "mocha": "11.7.5",
     "ora": "9.0.0",
     "postcss": "8.5.15",
-    "puppeteer-core": "25.2.0",
+    "puppeteer-core": "25.3.0",
     "rollup": "4.60.4",
     "rollup-plugin-sourcemaps2": "0.5.4",
     "sinon": "22.0.0",
@@ -84,7 +84,7 @@
     "stylelint": "16.25.0",
     "stylelint-config-standard": "39.0.1",
     "svgo": "3.3.3",
-    "terser": "5.44.1",
+    "terser": "5.48.0",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.2",
     "typescript-eslint": "8.58.0",
@@ -92,5 +92,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1657855"
+  "version": "1.0.1661063"
 }