chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

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[];
@@ -431,7 +442,6 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
   get canExpandRecursively(): boolean {
     return true;
   }
-
   get sortPropertiesAlphabetically(): boolean {
     if (this.isWasm) {
       return false;
@@ -447,6 +457,7 @@ 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, filter?: (node: ObjectTreeNodeBase) => boolean): Generator<ObjectTreeNodeBase> {
@@ -772,7 +783,6 @@ export class ObjectTreeNode extends ObjectTreeNodeBase {
   override get canExpandRecursively(): boolean {
     return this.property.name !== '[[Prototype]]';
   }
-
   get name(): string {
     return this.property.name;
   }
@@ -1164,7 +1174,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,6 +1308,77 @@ export const enum ObjectPropertiesMode {
   OWN_AND_INTERNAL_AND_INHERITED = 1,  // Own, internal, and inherited properties
 }
 
+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' ? 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>`);
+}
 export class RootElement extends UI.TreeOutline.TreeElement {
   private readonly object: ObjectTree;
   private readonly linkifier: Components.Linkifier.Linkifier|undefined;
@@ -1341,35 +1423,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 +1739,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 +1960,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;
@@ -1932,7 +1997,6 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.collapse();
     }
   }
-
   getContextMenu(event: Event): UI.ContextMenu.ContextMenu {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(this);
@@ -1978,7 +2042,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

@@ -31,6 +31,10 @@ const UIStrings = {
    * @description Text when something is loading
    */
   loading: 'Loading…',
+  /**
+   * @description Text when a file is currently being pretty printed/formatted in the editor
+   */
+  formatting: 'Formatting…',
   /**
    * @description Shown at the bottom of the Sources panel when the user has made multiple
    * simultaneous text selections in the text editor.
@@ -387,6 +391,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (this.prettyInternal) {
       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);
       this.formattedMap = formatInfo.formattedMapping;
       await this.setContent(formatInfo.formattedContent);

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/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',
@@ -3568,6 +3570,7 @@ export const knownContextValues = new Set([
   'seeked',
   'seeking',
   'select',
+  'select-all',
   'select-element',
   'select-folder',
   'select-next',
@@ -4495,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.1657110"
+  "version": "1.0.1660788"
 }