chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

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

@@ -142,7 +142,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/ObjectPropertiesSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const EXPANDABLE_MAX_DEPTH = 100;
+export const EXPANDABLE_MAX_DEPTH = 100;
 
 const objectPropertiesSectionMap = new WeakMap<Element, ObjectPropertiesSection>();
 
@@ -406,7 +406,10 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     } else {
       this.options.expansionTracker?.collapse(this);
     }
-    this.#expanded = val;
+    if (this.#expanded !== val) {
+      this.#expanded = val;
+      this.dispatchEventToListeners(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, val);
+    }
   }
 
   get readOnly(): boolean {
@@ -425,6 +428,10 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     this.setFilter({includeNullOrUndefinedValues: value, regex: this.filter?.regex ?? null});
   }
 
+  get canExpandRecursively(): boolean {
+    return true;
+  }
+
   get sortPropertiesAlphabetically(): boolean {
     if (this.isWasm) {
       return false;
@@ -440,14 +447,16 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     setting.set(value);
     this.removeChildren();
   }
-
   // Performs a pre-order tree traversal over the populated children. If any children need to be populated, callers must
   // do that while walking (pre-order visitation enables that).
-  * #walk(maxDepth = -1): Generator<ObjectTreeNodeBase> {
+  * #walk(maxDepth = -1, filter?: (node: ObjectTreeNodeBase) => boolean): Generator<ObjectTreeNodeBase> {
+    if (filter && !filter(this)) {
+      return;
+    }
     function* walkChildren(children: ObjectTreeNodeBase[]|undefined): Generator<ObjectTreeNodeBase> {
       if (children) {
         for (const child of children) {
-          yield* child.#walk(Math.max(-1, maxDepth - 1));
+          yield* child.#walk(Math.max(-1, maxDepth - 1), filter);
         }
       }
     }
@@ -460,7 +469,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
   }
 
   async expandRecursively(maxDepth: number): Promise<void> {
-    for (const node of this.#walk(maxDepth)) {
+    for (const node of this.#walk(maxDepth, n => n.canExpandRecursively)) {
       await node.populateChildrenIfNeeded();
       node.expanded = true;
     }
@@ -655,11 +664,13 @@ export namespace ObjectTreeNodeBase {
     VALUE_CHANGED = 'value-changed',
     CHILDREN_CHANGED = 'children-changed',
     FILTER_CHANGED = 'filter-changed',
+    EXPANDED_CHANGED = 'expanded-changed',
   }
   export interface EventTypes {
     [Events.VALUE_CHANGED]: void;
     [Events.CHILDREN_CHANGED]: void;
     [Events.FILTER_CHANGED]: void;
+    [Events.EXPANDED_CHANGED]: boolean;
   }
 }
 
@@ -758,6 +769,10 @@ export class ObjectTreeNode extends ObjectTreeNodeBase {
     return Boolean(this.filter && !this.property.match(this.filter));
   }
 
+  override get canExpandRecursively(): boolean {
+    return this.property.name !== '[[Prototype]]';
+  }
+
   get name(): string {
     return this.property.name;
   }
@@ -1664,6 +1679,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.property.addEventListener(ObjectTreeNodeBase.Events.VALUE_CHANGED, this.#updateValue, this);
     this.property.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.#updateChildren, this);
     this.property.addEventListener(ObjectTreeNodeBase.Events.FILTER_CHANGED, this.#updateFilter, this);
+    this.property.addEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.#onExpandedChanged, this);
     this.toggleOnClick = true;
     this.linkifier = linkifier;
     this.maxNumPropertiesToShow = InitialVisibleChildrenLimit;
@@ -1684,12 +1700,51 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       linkifier?: Components.Linkifier.Linkifier,
       emptyPlaceholder?: string|null,
       ): Promise<void> {
-    const properties = await value.populateChildrenIfNeeded();
+    await ObjectPropertyTreeElement.populateChildrenIfNeeded(value);
+    ObjectPropertyTreeElement.populateImpl(treeElement, value, skipProto, skipGettersAndSetters, linkifier,
+                                           emptyPlaceholder);
+  }
+
+  static async populateChildrenIfNeeded(value: ObjectTreeNodeBase): Promise<void> {
+    const children = await value.populateChildrenIfNeeded();
+    await ArrayGroupingTreeElement.populateChildrenIfNeeded(children);
+  }
+
+  static populateImpl(
+      treeElement: UI.TreeOutline.TreeElement,
+      value: ObjectTreeNodeBase,
+      skipProto: boolean,
+      skipGettersAndSetters: boolean,
+      linkifier?: Components.Linkifier.Linkifier,
+      emptyPlaceholder?: string|null,
+      ): void {
+    for (const childNode of ObjectPropertyTreeElement.createNodes(
+             value, skipProto, skipGettersAndSetters, linkifier, emptyPlaceholder,
+             property => treeElement instanceof ObjectPropertyTreeElement &&
+                 !ObjectPropertiesSection.isDisplayableProperty(property, treeElement.property?.property))) {
+      treeElement.appendChild(childNode);
+    }
+  }
+
+  static *
+      createNodes(
+          value: ObjectTreeNodeBase,
+          skipProto: boolean,
+          skipGettersAndSetters: boolean,
+          linkifier?: Components.Linkifier.Linkifier,
+          emptyPlaceholder?: string|null,
+          isNotDisplayablePropertyCallback?: (property: SDK.RemoteObject.RemoteObjectProperty) => boolean,
+          ): Generator<UI.TreeOutline.TreeElement> {
+    const properties = value.children;
+    if (!properties) {
+      return;
+    }
     if (properties.arrayRanges) {
-      await ArrayGroupingTreeElement.populate(treeElement, properties, linkifier);
+      yield* ArrayGroupingTreeElement.createNodes(properties, linkifier, isNotDisplayablePropertyCallback);
     } else {
-      ObjectPropertyTreeElement.populateWithProperties(
-          treeElement, properties, skipProto, skipGettersAndSetters, linkifier, emptyPlaceholder);
+      yield*
+          ObjectPropertyTreeElement.createPropertyNodes(properties, skipProto, skipGettersAndSetters, linkifier,
+                                                        emptyPlaceholder, isNotDisplayablePropertyCallback);
     }
   }
 
@@ -1869,6 +1924,15 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.hidden = this.property.isFiltered;
   }
 
+  #onExpandedChanged(event: Common.EventTarget.EventTargetEvent<boolean>): void {
+    const expanded = event.data;
+    if (expanded) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+  }
+
   getContextMenu(event: Event): UI.ContextMenu.ContextMenu {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(this);
@@ -2082,6 +2146,7 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
     super(Platform.StringUtilities.sprintf('[%d … %d]', child.range.fromIndex, child.range.toIndex), true);
     this.#child = child;
     this.#child.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.onpopulate, this);
+    this.#child.addEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.#onExpandedChanged, this);
     this.toggleOnClick = true;
     this.linkifier = linkifier;
     if (child.expanded) {
@@ -2089,25 +2154,53 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  static async populate(
-      treeNode: UI.TreeOutline.TreeElement, children: NodeChildren,
-      linkifier?: Components.Linkifier.Linkifier): Promise<void> {
+  #onExpandedChanged(event: Common.EventTarget.EventTargetEvent<boolean>): void {
+    const expanded = event.data;
+    if (expanded) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+  }
+
+  static *
+      createNodes(children: NodeChildren, linkifier?: Components.Linkifier.Linkifier,
+                  isNotDisplayablePropertyCallback?: (property: SDK.RemoteObject.RemoteObjectProperty) => boolean):
+          Generator<UI.TreeOutline.TreeElement> {
     if (!children.arrayRanges) {
       return;
     }
     if (children.arrayRanges.length === 1) {
-      await ObjectPropertyTreeElement.populate(treeNode, children.arrayRanges[0], false, false, linkifier);
+      yield*
+          ObjectPropertyTreeElement.createNodes(children.arrayRanges[0], false, false, linkifier, null,
+                                                isNotDisplayablePropertyCallback);
     } else {
       for (const child of children.arrayRanges) {
         if (child.singular) {
-          await ObjectPropertyTreeElement.populate(treeNode, child, false, false, linkifier);
+          yield*
+              ObjectPropertyTreeElement.createNodes(child, false, false, linkifier, null,
+                                                    isNotDisplayablePropertyCallback);
         } else {
-          treeNode.appendChild(new ArrayGroupingTreeElement(child, linkifier));
+          yield new ArrayGroupingTreeElement(child, linkifier);
         }
       }
     }
 
-    ObjectPropertyTreeElement.populateWithProperties(treeNode, children, false, false, linkifier);
+    yield*
+        ObjectPropertyTreeElement.createPropertyNodes(children, false, false, linkifier, null,
+                                                      isNotDisplayablePropertyCallback);
+  }
+
+  static async populateChildrenIfNeeded(children: NodeChildren): Promise<void> {
+    if (!children.arrayRanges) {
+      return;
+    }
+    if (children.arrayRanges.length === 1) {
+      await ObjectPropertyTreeElement.populateChildrenIfNeeded(children.arrayRanges[0]);
+    } else {
+      await Promise.all(children.arrayRanges.filter(child => child.singular)
+                            .map(child => ObjectPropertyTreeElement.populateChildrenIfNeeded(child)));
+    }
   }
 
   override onexpand(): void {

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -947,7 +947,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       mouseX = coordinate?.x ? coordinate.x - canvasViewportOffsetX : mouseX;
       mouseY = coordinate?.y ? coordinate.y - canvasViewportOffsetY : mouseY;
     }
-    // The parent dimensions are the maximum the popover can use.
     const parentWidth = this.popoverElement.parentElement ? this.popoverElement.parentElement.clientWidth : 0;
     const parentHeight = this.popoverElement.parentElement ? this.popoverElement.parentElement.clientHeight : 0;
     const infoWidth = this.popoverElement.clientWidth;
@@ -957,40 +956,18 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const offsetX = 10;
     // Incorporate any network flamechart height into dynamic positioning
     const offsetY = 6 + this.#tooltipPopoverYAdjustment;
-    let x;
-    let y;
 
-    /**
-     * Fancy positioning algorithm. It optimizes for consistent positioning, not obstructing any of the popover, and not positioning atop the mouse cursor.
-     *
-     * Take the mouse cursor position (mouseX/mouseY) and split up the area into four quadrants
-     *     0: bottom-right. 1: top-right. 2: bottom-left. 3: top-left.
-     *
-     * We attempt this in two passes, first is for keeping the whole popover visible, the second is slightly relaxed.
-     *   If we hit the second pass, its because the tooltip size is close to the size of the available (parent*) space.
-     * In each pass, we loop through the quadrants
-     *   If the tooltip can fit (after some adjustments) within a quadrant, we `break` and that x,y is used.
-     */
-    for (let pass = 0; pass < 2; ++pass) {
-      for (let quadrant = 0; quadrant < 4; ++quadrant) {
-        // The bitwise AND operator is used to generate the 4 unique combinations of two booleans. (true+false, true+true, etc)
-        const dx = quadrant & 2 ? -offsetX - infoWidth : offsetX;
-        const dy = quadrant & 1 ? -offsetY - infoHeight : offsetY;
-        // mouseX+dx is ideal, but clamp against the available space (It will be adapted to fit)
-        x = Platform.NumberUtilities.clamp(mouseX + dx, 0, parentWidth - infoWidth);
-        y = Platform.NumberUtilities.clamp(mouseY + dy, 0, parentHeight - infoHeight);
-
-        const popoverFits = pass === 0 ?
-            // Will the whole popover be visible?
-            (x >= mouseX || mouseX >= x + infoWidth) && (y >= mouseY || mouseY >= y + infoHeight) :
-            // Will the popover fit well in 1 dimension? (Though we typically see it fit in both, here. Shrug.)
-            x >= mouseX || mouseX >= x + infoWidth || y >= mouseY || mouseY >= y + infoHeight;
-
-        if (popoverFits) {
-          break;
-        }
-      }
-    }
+    const {x, y} = calculatePopoverOffset({
+      mouseX,
+      mouseY,
+      parentWidth,
+      parentHeight,
+      infoWidth,
+      infoHeight,
+      offsetX,
+      offsetY,
+    });
+
     this.popoverElement.style.left = x + 'px';
     this.popoverElement.style.top = y + 'px';
   }
@@ -1187,6 +1164,10 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.expandGroup(groupIndex, !this.rawTimelineData.groups[groupIndex].expanded /* setExpanded */);
   }
 
+  blurCanvasForTesting(): void {
+    this.canvas.blur();
+  }
+
   bulkExpandGroups(indexes: number[]): void {
     if (indexes.length === 0) {
       return;
@@ -2136,12 +2117,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
         if (y >= this.groupOffsets[groupIndex] && y < this.groupOffsets[nextIndex]) {
           // This section is used to calculate the position of current group's header
           // If we are in edit mode, the track label is pushed right to make room for the icons.
-          const context = this.context;
-          context.save();
-          context.font = this.#font;
           const headerRight = HEADER_LEFT_PADDING + (this.#inTrackConfigEditMode ? EDIT_MODE_TOTAL_ICON_WIDTH : 0) +
-              this.labelWidthForGroup(context, groups[groupIndex]);
-          context.restore();
+              this.labelWidthForGroup(this.context, groups[groupIndex]);
 
           const mouseInHeaderRow =
               y >= this.groupOffsets[groupIndex] && y < this.groupOffsets[groupIndex] + groups[groupIndex].style.height;
@@ -3143,8 +3120,12 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
    * @returns the width of the label of the group.
    */
   labelWidthForGroup(context: CanvasRenderingContext2D, group: Group): number {
-    return EXPANSION_ARROW_INDENT * (group.style.nestingLevel + 1) + ARROW_SIDE / 2 + HEADER_LABEL_X_PADDING +
+    context.save();
+    context.font = this.#font;
+    const width = EXPANSION_ARROW_INDENT * (group.style.nestingLevel + 1) + ARROW_SIDE / 2 + HEADER_LABEL_X_PADDING +
         UI.UIUtils.measureTextWidth(context, group.name) + HEADER_LABEL_X_PADDING - HEADER_LEFT_PADDING;
+    context.restore();
+    return width;
   }
 
   private drawCollapsedOverviewForGroup(group: Group, y: number, endLevel: number): void {
@@ -4502,3 +4483,71 @@ export interface PersistedGroupConfig {
   originalIndex: number;
   visualIndex: number;
 }
+
+export interface PopoverOffsetOptions {
+  /** The horizontal offset of the mouse relative to the flame chart. */
+  mouseX: number;
+  /** The vertical offset of the mouse relative to the flame chart. */
+  mouseY: number;
+  /** The width of the parent container holding the popover. */
+  parentWidth: number;
+  /** The height of the parent container holding the popover. */
+  parentHeight: number;
+  /** The measured width of the popover element itself. */
+  infoWidth: number;
+  /** The measured height of the popover element itself. */
+  infoHeight: number;
+  /** The horizontal offset spacing to keep between the popover and the mouse position. */
+  offsetX: number;
+  /** The vertical offset spacing to keep between the popover and the mouse position. */
+  offsetY: number;
+}
+
+/**
+ * Calculates the positioning coordinates (x, y) for a popover window relative to the mouse.
+ *
+ * It uses a two-pass quadrant placement algorithm:
+ * - Pass 0: Tries to find a quadrant where the popover fits fully on screen without overlapping the mouse.
+ * - Pass 1: Relaxed fit; allows overlapping the mouse if the popover is too large for the available space,
+ *   clamping it strictly to remain within the parent bounds [0, parentWidth - infoWidth].
+ *
+ * Quadrants:
+ * 0: bottom-right (x + offsetX, y + offsetY)
+ * 1: top-right (x + offsetX, y - offsetY - height)
+ * 2: bottom-left (x - offsetX - width, y + offsetY)
+ * 3: top-left (x - offsetX - width, y - offsetY - height)
+ */
+export function calculatePopoverOffset(options: PopoverOffsetOptions): {x: number, y: number} {
+  const {mouseX, mouseY, parentWidth, parentHeight, infoWidth, infoHeight, offsetX, offsetY} = options;
+
+  const quadrants = [
+    {left: false, top: false},  // 0: Bottom-Right
+    {left: false, top: true},   // 1: Top-Right
+    {left: true, top: false},   // 2: Bottom-Left
+    {left: true, top: true},    // 3: Top-Left
+  ];
+
+  let x = 0;
+  let y = 0;
+
+  for (let pass = 0; pass < 2; ++pass) {
+    for (const {left, top} of quadrants) {
+      const dx = left ? -offsetX - infoWidth : offsetX;
+      const dy = top ? -offsetY - infoHeight : offsetY;
+
+      // Ensure upper bound of clamp is never negative (minimum of 0) to avoid errors when infoWidth/infoHeight > parent container bounds
+      x = Platform.NumberUtilities.clamp(mouseX + dx, 0, Math.max(0, parentWidth - infoWidth));
+      y = Platform.NumberUtilities.clamp(mouseY + dy, 0, Math.max(0, parentHeight - infoHeight));
+
+      const mouseOverlapsX = mouseX > x && mouseX < x + infoWidth;
+      const mouseOverlapsY = mouseY > y && mouseY < y + infoHeight;
+
+      const popoverFits = pass === 0 ? (!mouseOverlapsX && !mouseOverlapsY) : !(mouseOverlapsX && mouseOverlapsY);
+
+      if (popoverFits) {
+        return {x, y};
+      }
+    }
+  }
+  return {x, y};
+}

package/front_end/ui/legacy/treeoutline.css

@@ -98,7 +98,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
     color: currentcolor;
   }
 
-  & *:not(devtools-icon) {
+  & *:not(devtools-icon, .new-badge) {
     color: inherit;
   }
 }

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1031,13 +1031,16 @@ export const knownContextValues = new Set([
   'copy-all-declarations',
   'copy-all-urls',
   'copy-as-base',
+  'copy-as-csv',
   'copy-as-curl',
   'copy-as-curl-bash',
   'copy-as-curl-cmd',
   'copy-as-fetch',
   'copy-as-hex',
+  'copy-as-markdown',
   'copy-as-nodejs-fetch',
   'copy-as-powershell',
+  'copy-as-preload',
   'copy-as-utf',
   'copy-color',
   'copy-console',

package/package.json

@@ -30,7 +30,8 @@
     "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",
-    "test": "vpython3 third_party/node/node.py --output scripts/run_on_target.mjs gen/test/run.js"
+    "test": "vpython3 third_party/node/node.py --output scripts/run_on_target.mjs gen/test/run.js",
+    "test-health": "node scripts/test_health.ts"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "16.0.3",
@@ -75,7 +76,7 @@
     "mocha": "11.7.5",
     "ora": "9.0.0",
     "postcss": "8.5.15",
-    "puppeteer-core": "25.0.4",
+    "puppeteer-core": "25.2.0",
     "rollup": "4.60.4",
     "rollup-plugin-sourcemaps2": "0.5.4",
     "sinon": "22.0.0",
@@ -91,5 +92,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1652307"
+  "version": "1.0.1656291"
 }