chrome-devtools-frontend 1.0.1651641 → 1.0.1654411

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/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

@@ -1038,6 +1038,7 @@ export const knownContextValues = new Set([
   'copy-as-hex',
   '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.1651641"
+  "version": "1.0.1654411"
 }