chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

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

@@ -64,8 +64,8 @@ export interface ObjectPropertySearchResult extends UI.TreeOutline.TreeSearchRes
   matchType: 'name'|'value';
   range: TextUtils.TextRange.SourceRange;
 }
-const {widget} = UI.Widget;
-const {ref, repeat, ifDefined, classMap, until} = Directives;
+const {widget, widgetRef} = UI.Widget;
+const {ref, repeat, ifDefined, classMap} = Directives;
 const UIStrings = {
   /**
    * @description Text in Object Properties Section
@@ -167,6 +167,7 @@ const objectPropertiesSectionMap = new WeakMap<Element, ObjectPropertiesSection>
 // the legacy TreeOutline/TreeElement dependencies are removed.
 const topLevelNodesCache = new WeakMap<ObjectTreeNodeBase, {
   nodes: UI.TreeOutline.TreeElement[],
+  listener: () => void,
   linkifier?: Components.Linkifier.Linkifier,
 }>();
 
@@ -416,6 +417,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
   get isWasm(): boolean {
     return isWasmObject(this.object);
   }
+
   get expanded(): boolean {
     return this.#expanded;
   }
@@ -443,6 +445,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
   get search(): UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>|undefined {
     return this.options.search;
   }
+
   get includeNullOrUndefinedValues(): boolean {
     return this.filter?.includeNullOrUndefinedValues ?? true;
   }
@@ -488,7 +491,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
         yield* child.#walk(Math.max(-1, maxDepth - 1), filter);
       }
     }
-    }
+  }
 
   async expandRecursively(maxDepth: number): Promise<void> {
     for (const node of this.#walk(maxDepth, n => n.canExpandRecursively)) {
@@ -968,33 +971,6 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     this.rootElement().childrenListElement.classList.add('source-code', 'object-properties-section');
   }
 
-  static defaultObjectPresentation(object: SDK.RemoteObject.RemoteObject, linkifier?: Components.Linkifier.Linkifier,
-                                   skipProto?: boolean, readOnly?: boolean): Element {
-    const objectPropertiesSection =
-        ObjectPropertiesSection.defaultObjectPropertiesSection(object, linkifier, skipProto, readOnly);
-    if (!object.hasChildren) {
-      return objectPropertiesSection.titleElement;
-    }
-    return objectPropertiesSection.element;
-  }
-
-  static defaultObjectPropertiesSection(object: SDK.RemoteObject.RemoteObject,
-                                        linkifier?: Components.Linkifier.Linkifier, skipProto?: boolean,
-                                        readOnly?: boolean): ObjectPropertiesSection {
-    const titleElement = document.createElement('span');
-    titleElement.classList.add('source-code');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(titleElement, {cssFile: objectValueStyles});
-    const propertyValue =
-        ObjectPropertiesSection.createPropertyValue(object, /* wasThrown */ false, /* showPreview */ true);
-    shadowRoot.appendChild(propertyValue);
-    const objectPropertiesSection = new ObjectPropertiesSection(object, titleElement, linkifier, undefined, !readOnly);
-    if (skipProto) {
-      objectPropertiesSection.skipProto();
-    }
-
-    return objectPropertiesSection;
-  }
-
   // The RemoteObjectProperty overload is kept for web test compatibility for now.
   static compareProperties(propertyA: ObjectTreeNode|SDK.RemoteObject.RemoteObjectProperty,
                            propertyB: ObjectTreeNode|SDK.RemoteObject.RemoteObjectProperty,
@@ -1144,19 +1120,6 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     }
   }
 
-  static createPropertyValueWithCustomSupport(value: SDK.RemoteObject.RemoteObject, wasThrown: boolean,
-                                              showPreview: boolean, linkifier?: Components.Linkifier.Linkifier,
-                                              isSyntheticProperty?: boolean, variableName?: string,
-                                              includeNullOrUndefined?: boolean): HTMLElement {
-    if (value.customPreview()) {
-      const result = (new CustomPreviewComponent(value)).element;
-      result.classList.add('object-properties-section-custom-section');
-      return result;
-    }
-    return ObjectPropertiesSection.createPropertyValue(value, wasThrown, showPreview, linkifier, isSyntheticProperty,
-                                                       variableName, includeNullOrUndefined);
-  }
-
   static getMemoryIcon(object: SDK.RemoteObject.RemoteObject, expression?: string): LitTemplate {
     // Directly set styles on memory icon, so that the memory icon is also
     // styled within the context of code mirror.
@@ -1181,81 +1144,6 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     element.appendChild(fragment);
   }
 
-  static createPropertyValue(value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
-                             linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty = false,
-                             variableName?: string, includeNullOrUndefined?: boolean): HTMLElement {
-    const propertyValue = document.createDocumentFragment();
-    const type = value.type;
-    const subtype = value.subtype;
-    const description = value.description || '';
-    const className = value.className;
-
-    const contents = (): LitTemplate => {
-      if (type === 'object' && subtype === 'internal#location') {
-        const rawLocation = value.debuggerModel().createRawLocationByScriptId(
-            value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
-        if (rawLocation && linkifier) {
-          return html`${linkifier.linkifyRawLocation(rawLocation, Platform.DevToolsPath.EmptyUrlString, 'value')}`;
-        }
-        const title = description || undefined;
-        return html`<span class=value title=${ifDefined(title)}>${'<' + i18nString(UIStrings.unknown) + '>'}</span>`;
-      }
-      if (type === 'string' && typeof description === 'string') {
-        const text = Platform.StringUtilities.escapeUnicodeAsText(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>`;
-      }
-      if (type === 'object' && subtype === 'trustedtype') {
-        const text = `${className} "${description}"`;
-        const tooLong = text.length > maxRenderableStringLength;
-        return html`<span class="value object-value-trustedtype" title=${ifDefined(tooLong ? undefined : text)}>${
-            tooLong ? widget(ExpandableTextPropertyValue, {text}) : renderTrustedType(description, className)}</span>`;
-      }
-      if (type === 'function') {
-        return html`<span class="value">${
-            ObjectPropertiesSection.valueElementForFunctionDescription(description)}</span>`;
-      }
-      if (type === 'object' && subtype === 'node' && description) {
-        return html`<span class="value object-value-node"
-            @click=${(event: Event) => {
-          void Common.Revealer.reveal(value);
-          event.consume(true);
-        }}
-            @mousemove=${() => SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(value)}
-            @mouseleave=${
-            () => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance())}
-          >${renderNodeTitle(description)}</span>`;
-      }
-      if (description.length > maxRenderableStringLength) {
-        // clang-format off
-        return html`<span class="value object-value-${subtype || type}" title=${description}>
-          ${widget(ExpandableTextPropertyValue, {text: description})}
-        </span>`;
-        // clang-format on
-      }
-      const hasPreview = value.preview && showPreview;
-      return html`<span class="value object-value-${subtype || type}" title=${description}>${
-          hasPreview ? new RemoteObjectPreviewFormatter().renderObjectPreview(value.preview, includeNullOrUndefined) :
-                       description}${isSyntheticProperty ? nothing : this.getMemoryIcon(value, variableName)}</span>`;
-    };
-
-    if (wasThrown) {
-      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(html`<span class="error value">${
-                 uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.exceptionS, {PH1: contents()})}</span>`,
-             propertyValue);
-    } else {
-      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(contents(), propertyValue);
-    }
-    const child = propertyValue.firstElementChild;
-    if (!(child instanceof HTMLElement)) {
-      throw new Error('Expected an HTML element');
-    }
-    return child;
-  }
-
   static isDisplayableProperty(property: SDK.RemoteObject.RemoteObjectProperty,
                                parentProperty?: SDK.RemoteObject.RemoteObjectProperty): boolean {
     if (!parentProperty?.synthetic) {
@@ -1304,6 +1192,174 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   }
 }
 
+export class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
+  #root?: ObjectTree;
+  #title?: Element|TemplateResult;
+  #skipProto = false;
+  #linkifier?: Components.Linkifier.Linkifier;
+  #showOverflow = true;
+  #rootContextMenuEnabled = false;
+  readonly #view: ObjectPropertiesSectionView = OBJECT_PROPERTIES_SECTION_DEFAULT_VIEW;
+
+  constructor(element?: HTMLElement, view: ObjectPropertiesSectionView = OBJECT_PROPERTIES_SECTION_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  get root(): SDK.RemoteObject.RemoteObject|undefined {
+    return this.#root?.object;
+  }
+
+  set root(val: SDK.RemoteObject.RemoteObject) {
+    if (val === this.#root?.object) {
+      return;
+    }
+    this.objectTree = new ObjectTree(val, {
+      readOnly: false,
+      propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+    });
+  }
+
+  get objectTree(): ObjectTree|undefined {
+    return this.#root;
+  }
+
+  set objectTree(val: ObjectTree|undefined) {
+    if (val === this.#root) {
+      return;
+    }
+    this.#root?.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#root?.removeEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+    this.#root = val;
+    this.#root?.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#root?.addEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+    this.requestUpdate();
+  }
+
+  get title(): Element|TemplateResult|undefined {
+    return this.#title;
+  }
+
+  set title(val: Element|TemplateResult|undefined) {
+    if (val === this.#title) {
+      return;
+    }
+    this.#title = val;
+    this.requestUpdate();
+  }
+
+  get skipProto(): boolean {
+    return this.#skipProto;
+  }
+
+  set skipProto(val: boolean) {
+    if (val === this.#skipProto) {
+      return;
+    }
+    this.#skipProto = val;
+    this.requestUpdate();
+  }
+
+  get linkifier(): Components.Linkifier.Linkifier|undefined {
+    return this.#linkifier;
+  }
+
+  set linkifier(val: Components.Linkifier.Linkifier) {
+    if (val === this.#linkifier) {
+      return;
+    }
+    this.#linkifier = val;
+    this.requestUpdate();
+  }
+
+  get showOverflow(): boolean {
+    return this.#showOverflow;
+  }
+
+  set showOverflow(val: boolean) {
+    if (val === this.#showOverflow) {
+      return;
+    }
+    this.#showOverflow = val;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    if (!this.#root) {
+      return;
+    }
+    this.#view({
+      objectTree: this.#root,
+      title: this.#title,
+      linkifier: this.#linkifier,
+      skipProto: this.#skipProto,
+      showOverflow: this.#showOverflow,
+      onRootContextMenu: this.#rootContextMenuEnabled ? this.onRootContextMenu : undefined,
+      onRootItemContextMenu: this.onRootItemContextMenu,
+    },
+               {}, this.contentElement);
+  }
+
+  override onDetach(): void {
+    this.#root?.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#root?.removeEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#root?.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#root?.removeEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+    this.#root?.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#root?.addEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+  }
+
+  get rootContextMenuEnabled(): boolean {
+    return this.#rootContextMenuEnabled;
+  }
+
+  set rootContextMenuEnabled(val: boolean) {
+    if (this.#rootContextMenuEnabled === val) {
+      return;
+    }
+    this.#rootContextMenuEnabled = val;
+    this.requestUpdate();
+  }
+
+  private onRootContextMenu = (contextMenu: UI.ContextMenu.ContextMenu): void => {
+    if (!this.#root) {
+      return;
+    }
+    contextMenu.appendApplicableItems(this.#root);
+    if (this.#root.object instanceof SDK.RemoteObject.LocalJSONObject) {
+      contextMenu.viewSection().appendItem(i18nString(UIStrings.expandRecursively),
+                                           this.#root.expandRecursively.bind(this.#root, EXPANDABLE_MAX_DEPTH),
+                                           {jslogContext: 'expand-recursively'});
+      contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren),
+                                           this.#root.collapseRecursively.bind(this.#root),
+                                           {jslogContext: 'collapse-children'});
+    }
+  };
+
+  private onRootItemContextMenu = (contextMenu: UI.ContextMenu.ContextMenu): void => {
+    const root = this.#root;
+    if (!root) {
+      return;
+    }
+    populateObjectTreeContextMenu(
+        contextMenu,
+        root,
+        root.expandRecursively.bind(root, EXPANDABLE_MAX_DEPTH),
+        root.collapseRecursively.bind(root),
+        () => {
+          root.sortPropertiesAlphabetically = !root.sortPropertiesAlphabetically;
+        },
+        () => {
+          root.includeNullOrUndefinedValues = !root.includeNullOrUndefinedValues;
+        },
+    );
+  };
+}
+
 /** @constant */
 const ARRAY_LOAD_THRESHOLD = 100;
 
@@ -1366,71 +1422,227 @@ export function populateObjectTreeContextMenu(
       {checked: object.includeNullOrUndefinedValues, jslogContext: 'show-all'});
 }
 
-function renderObjectTreeInternal(
-    objectTree: ObjectTree,
-    linkifier?: Components.Linkifier.Linkifier,
-    emptyPlaceholder?: string|null,
-    classes: Record<string, boolean> = {},
-    ): LitTemplate|DirectiveResult {
-  const entry = topLevelNodesCache.get(objectTree);
-  if (entry && entry.linkifier === linkifier) {
-    return html`
-      <ul class=${classMap(classes)} 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});
+interface ObjectTreeViewInput {
+  renderAsSubtree: boolean;
+  objectTree?: ObjectTree;
+  linkifier?: Components.Linkifier.Linkifier;
+  emptyPlaceholder?: string;
+  skipProto: boolean;
+  onExpand: (expanded: boolean) => void;
+}
+type ObjectTreeView = (input: ObjectTreeViewInput, output: object, target: HTMLElement) => void;
+export const OBJECT_TREE_DEFAULT_VIEW: ObjectTreeView = (input, output, target) => {
+  const objectTree = input.objectTree;
+  if (!objectTree) {
+    render(nothing, target);
+    return;
+  }
+  const classes = input.renderAsSubtree ? ['source-code', 'object-properties-section'] : [];
+  let entry = topLevelNodesCache.get(objectTree);
+  if (!entry || entry.linkifier !== input.linkifier || (!entry.nodes.length && objectTree.children)) {
+    if (entry) {
+      objectTree.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, entry.listener);
+    }
+    const nodes = Array.from(ObjectPropertyTreeElement.createNodes(objectTree, input.skipProto, false, input.linkifier,
+                                                                   input.emptyPlaceholder));
     const listener = (): void => {
       topLevelNodesCache.delete(objectTree);
       objectTree.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, listener);
     };
+    entry = {linkifier: input.linkifier, nodes, listener};
+    topLevelNodesCache.set(objectTree, entry);
     objectTree.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, listener);
+  }
+
+  render(entry.nodes.map(node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`), target, {
+    container: {
+      classes,
+      attributes: {role: 'group'},
+      interceptedListeners: {
+        expand: (e: Event) => input.onExpand((e as UI.TreeOutline.TreeViewElement.ExpandEvent).detail.expanded),
+      },
+    },
+  });
+};
+
+export class ObjectTreeWidget extends UI.Widget.Widget {
+  #objectTree: ObjectTree|undefined = undefined;
+  #linkifier: Components.Linkifier.Linkifier|undefined = undefined;
+  #emptyPlaceholder?: string;
+  #renderAsSubtree = false;
+  #skipProto = false;
+  readonly #view: ObjectTreeView;
+
+  constructor(element?: HTMLElement, view = OBJECT_TREE_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  onExpand = (expanded: boolean): void => {
+    if (this.#objectTree) {
+      this.#objectTree.expanded = expanded;
+    }
+  };
+
+  get skipProto(): boolean {
+    return this.#skipProto;
+  }
 
-    return html`
-      <ul class=${classMap(classes)} role="group">
-        ${nodes.map(node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
-      </ul>
-    `;
-  })();
+  set skipProto(val: boolean) {
+    this.#skipProto = val;
+    this.requestUpdate();
+  }
+
+  get objectTree(): ObjectTree|undefined {
+    return this.#objectTree;
+  }
 
-  return until(promise, html`<ul class=${classMap(classes)} role="group"></ul>`);
+  set objectTree(val: ObjectTree) {
+    if (val === this.#objectTree) {
+      return;
+    }
+    this.#objectTree?.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#objectTree?.removeEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+    this.#objectTree = val;
+    this.#objectTree?.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#objectTree?.addEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+    this.requestUpdate();
+  }
+
+  get linkifier(): Components.Linkifier.Linkifier|undefined {
+    return this.#linkifier;
+  }
+
+  set linkifier(val: Components.Linkifier.Linkifier) {
+    if (val === this.#linkifier) {
+      return;
+    }
+    this.#linkifier = val;
+    this.requestUpdate();
+  }
+
+  get emptyPlaceholder(): string|undefined {
+    return this.#emptyPlaceholder;
+  }
+
+  set emptyPlaceholder(val: string) {
+    if (val === this.#emptyPlaceholder) {
+      return;
+    }
+    this.#emptyPlaceholder = val;
+    this.requestUpdate();
+  }
+
+  get renderAsSubtree(): boolean {
+    return this.#renderAsSubtree;
+  }
+
+  set renderAsSubtree(val: boolean) {
+    if (val === this.#renderAsSubtree) {
+      return;
+    }
+    this.#renderAsSubtree = val;
+    this.requestUpdate();
+  }
+
+  override async performUpdate(): Promise<void> {
+    if (this.#objectTree?.expanded) {
+      await ObjectPropertyTreeElement.populateChildrenIfNeeded(this.#objectTree);
+    }
+    this.#view(this, {}, this.contentElement);
+  }
+
+  override onDetach(): void {
+    this.#objectTree?.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#objectTree?.removeEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#objectTree?.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#objectTree?.removeEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+    this.#objectTree?.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
+    this.#objectTree?.addEventListener(ObjectTreeNodeBase.Events.EXPANDED_CHANGED, this.requestUpdate, this);
+  }
 }
 
 export function renderObjectTree(
     objectTree: ObjectTree,
     linkifier?: Components.Linkifier.Linkifier,
-    emptyPlaceholder?: string|null,
+    emptyPlaceholder?: string,
     ): LitTemplate|DirectiveResult {
-  return renderObjectTreeInternal(objectTree, linkifier, emptyPlaceholder, {
-    'source-code': true,
-    'object-properties-section': true,
-  });
+  return html`<ul role="group" ${
+      widget(ObjectTreeWidget, {objectTree, linkifier, emptyPlaceholder, renderAsSubtree: true})} ${
+      /* The empty widgetRef forces the widget to be materialized in the template DOM */
+      widgetRef(ObjectTreeWidget, () => {})}></ul>`;
 }
 
-export function renderObjectPropertiesSection(
-    objectTree: ObjectTree,
-    title: LitTemplate,
-    linkifier?: Components.Linkifier.Linkifier,
-    ): LitTemplate {
-  const treeContent = renderObjectTreeInternal(objectTree, linkifier, undefined, {});
-
-  return html`<devtools-tree class="object-properties-section" show-selection-on-keyboard-focus .template=${html`
-    <ul role="tree" class="source-code object-properties-section">
-      <style>${objectValueStyles}</style>
-      <style>${objectPropertiesSectionStyles}</style>
-      <li role="treeitem" class="object-properties-section-root-element" ?open=${objectTree.expanded}>
-        ${title}
-        ${treeContent}
-      </li>
-    </ul>
-  `}></devtools-tree>`;
+export interface ObjectPropertiesSectionViewInput {
+  objectTree: ObjectTree;
+  title?: Element|TemplateResult;
+  linkifier?: Components.Linkifier.Linkifier;
+  skipProto: boolean;
+  showOverflow: boolean;
+  onRootContextMenu?: (menu: UI.ContextMenu.ContextMenu) => void;
+  onRootItemContextMenu: (menu: UI.ContextMenu.ContextMenu) => void;
 }
+
+export type ObjectPropertiesSectionView =
+    (input: ObjectPropertiesSectionViewInput, output: object, target: HTMLElement) => void;
+
+export const OBJECT_PROPERTIES_SECTION_DEFAULT_VIEW: ObjectPropertiesSectionView = (input, _output, target) => {
+  const contextMenuHandler = (event: Event): void => {
+    if (!input.onRootContextMenu) {
+      return;
+    }
+    event.consume(true);
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    input.onRootContextMenu(contextMenu);
+    void contextMenu.show();
+  };
+
+  const onRootItemContextMenuHandler = (event: Event): void => {
+    event.consume(true);
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    input.onRootItemContextMenu(contextMenu);
+    void contextMenu.show();
+  };
+
+  render(html`
+    <devtools-tree
+        class="object-properties-section"
+        ?hide-overflow=${!input.showOverflow}
+        show-selection-on-keyboard-focus
+        @contextmenu=${input.onRootContextMenu ? contextMenuHandler : undefined}
+        .template=${
+             input.title ?
+                 html`
+      <ul role="tree" class="source-code object-properties-section">
+        <style>${objectValueStyles}</style>
+        <style>${objectPropertiesSectionStyles}</style>
+        <li role="treeitem" class="object-properties-section-root-element" ?open=${
+                     input.objectTree.expanded} @contextmenu=${onRootItemContextMenuHandler}>
+          ${input.title}
+          <ul role="group" ${widget(ObjectTreeWidget, {
+                   objectTree: input.objectTree,
+                   linkifier: input.linkifier,
+                   skipProto: input.skipProto,
+                 })} ${widgetRef(ObjectTreeWidget, () => {})}></ul>
+        </li>
+      </ul>` :
+                 html`
+      <ul role="tree" class="source-code object-properties-section title-less-mode" open ${
+                     widget(ObjectTreeWidget,
+                            {objectTree: input.objectTree, linkifier: input.linkifier, skipProto: input.skipProto})} ${
+                     /* The empty widgetRef forces the widget to be materialized in the template DOM */
+                     widgetRef(ObjectTreeWidget, () => {})}>
+        <style>${objectValueStyles}</style>
+        <style>${objectPropertiesSectionStyles}</style>
+      </ul>`}>
+    </devtools-tree>`,
+         target);
+};
+
 class RootElement extends UI.TreeOutline.TreeElement {
   private readonly object: ObjectTree;
   private readonly linkifier: Components.Linkifier.Linkifier|undefined;
@@ -1525,6 +1737,123 @@ export async function formatObjectAsFunction(func: SDK.RemoteObject.RemoteObject
                                                                     details, linkify);
 }
 
+export function renderPropertyValue(value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
+                                    linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty = false,
+                                    variableName?: string, includeNullOrUndefined?: boolean, useCustomPreview = false,
+                                    valueRef?: (element: Element|undefined) => void): LitTemplate {
+  if (useCustomPreview && value.customPreview()) {
+    const result = (new CustomPreviewComponent(value)).element;
+    result.classList.add('object-properties-section-custom-section');
+    valueRef?.(result);
+    return html`${result}`;
+  }
+
+  const type = value.type;
+  const subtype = value.subtype;
+  const description = value.description || '';
+  const className = value.className;
+
+  const isInternalLocation = type === 'object' && subtype === 'internal#location';
+  const isString = type === 'string' && typeof description === 'string';
+  const isTrustedType = type === 'object' && subtype === 'trustedtype';
+  const isFunction = type === 'function';
+  const isNode = type === 'object' && subtype === 'node' && Boolean(description);
+  const isDefault = !isInternalLocation && !isString && !isTrustedType && !isFunction && !isNode;
+  const classes = classMap({
+    value: true,
+    [`object-value-${subtype || type}`]: isDefault,
+    'object-value-string': isString,
+    'object-value-trustedtype': isTrustedType,
+    'object-value-node': isNode,
+  });
+
+  const onNodeClick = (event: Event): void => {
+    void Common.Revealer.reveal(value);
+    event.consume(true);
+  };
+  const onNodeMouseMove = (): void => SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(value);
+  const onNodeMouseLeave = (): void =>
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
+
+  let title: string|undefined;
+  let content: LitTemplate|string|Element|DirectiveResult|null = description;
+  if (isNode) {
+    content = renderNodeTitle(description);
+  } else if (isInternalLocation) {
+    const rawLocation = value.debuggerModel().createRawLocationByScriptId(value.value.scriptId, value.value.lineNumber,
+                                                                          value.value.columnNumber);
+    const linkifiedLocation = rawLocation && linkifier ?
+        linkifier.linkifyRawLocation(rawLocation, Platform.DevToolsPath.EmptyUrlString, 'value') :
+        null;
+    if (linkifiedLocation) {
+      valueRef?.(linkifiedLocation);
+      return html`${linkifiedLocation}`;
+    }
+    title = description || undefined;
+    content = '<' + i18nString(UIStrings.unknown) + '>';
+  } else if (isString) {
+    const text = Platform.StringUtilities.escapeUnicodeAsText(JSON.stringify(description));
+    const tooLong = description.length > maxRenderableStringLength;
+    title = tooLong ? undefined : description;
+    content = tooLong ? widget(ExpandableTextPropertyValue, {text}) : text;
+  } else if (isTrustedType) {
+    const text = `${className} "${description}"`;
+    const tooLong = text.length > maxRenderableStringLength;
+    title = tooLong ? undefined : text;
+    content = tooLong ? widget(ExpandableTextPropertyValue, {text}) : renderTrustedType(description, className);
+  } else if (isFunction) {
+    content = ObjectPropertiesSection.valueElementForFunctionDescription(description);
+  } else if (description.length > maxRenderableStringLength) {
+    title = description;
+    content = widget(ExpandableTextPropertyValue, {text: description});
+  } else {
+    title = description;
+    const hasPreview = value.preview && showPreview;
+    const previewContent = hasPreview ?
+        new RemoteObjectPreviewFormatter().renderObjectPreview(value.preview, includeNullOrUndefined) :
+        description;
+    content = html`${previewContent}${
+        isSyntheticProperty ? nothing : ObjectPropertiesSection.getMemoryIcon(value, variableName)}`;
+  }
+
+  if (wasThrown) {
+    return html`<span ${valueRef ? ref(valueRef) : nothing} class="error value">${
+        uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.exceptionS, {
+          PH1: html`<span
+        class=${classes}
+        title=${ifDefined(title)}
+        @click=${isNode ? onNodeClick : nothing}
+        @mousemove=${isNode ? onNodeMouseMove : nothing}
+        @mouseleave=${isNode ? onNodeMouseLeave : nothing}>${content}</span>`,
+        })}</span>`;
+  }
+  return html`<span
+      ${valueRef ? ref(valueRef) : nothing}
+      class=${classes}
+      title=${ifDefined(title)}
+      @click=${isNode ? onNodeClick : nothing}
+      @mousemove=${isNode ? onNodeMouseMove : nothing}
+      @mouseleave=${isNode ? onNodeMouseLeave : nothing}>${content}</span>`;
+}
+
+export function defaultObjectPresentation(objectOrTree: SDK.RemoteObject.RemoteObject|ObjectTree,
+                                          linkifier?: Components.Linkifier.Linkifier, skipProto?: boolean,
+                                          readOnly?: boolean): LitTemplate {
+  const objectTree = objectOrTree instanceof ObjectTree ? objectOrTree : new ObjectTree(objectOrTree, {
+    readOnly: Boolean(readOnly),
+    propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+  });
+  const object = objectTree.object;
+  const title = html`<span class="source-code"><style>${objectValueStyles}</style>${
+      renderPropertyValue(object, /* wasThrown= */ false, /* showPreview= */ true)}</span>`;
+  if (!object.hasChildren) {
+    return title;
+  }
+  return html`${
+      widget(ObjectPropertiesSectionWidget,
+             {objectTree, title, linkifier, skipProto: !!skipProto, showOverflow: !readOnly})}`;
+}
+
 /**
  * Number of initially visible children in an ObjectPropertyTreeElement.
  * Remaining children are shown as soon as requested via a show more properties button.
@@ -1584,7 +1913,7 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
       (entries ?? []).filter(e => e !== currentMatch && e.matchType === 'name').map(e => e.range.cssValue()).join(' ');
   const valueRanges =
       (entries ?? []).filter(e => e !== currentMatch && e.matchType === 'value').map(e => e.range.cssValue()).join(' ');
-  const value = (): LitTemplate|HTMLElement => {
+  const value = (): LitTemplate => {
     const valueRef = ref(e => {
       output.valueElement = e;
     });
@@ -1593,11 +1922,11 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
     }
     if (property.value) {
       const showPreview = property.name !== '[[Prototype]]';
-      const value = ObjectPropertiesSection.createPropertyValueWithCustomSupport(
-          property.value, property.wasThrown, showPreview, input.linkifier, property.synthetic,
-          input.node.path /* variableName */, input.node.includeNullOrUndefinedValues);
-      output.valueElement = value;
-      return value;
+      return renderPropertyValue(property.value, property.wasThrown, showPreview, input.linkifier, property.synthetic,
+                                 input.node.path /* variableName */, input.node.includeNullOrUndefinedValues,
+                                 /* useCustomPreview */ true, e => {
+                                   output.valueElement = e;
+                                 });
     }
     if (property.getter) {
       const getter = property.getter;
@@ -1684,6 +2013,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
   get property(): ObjectTreeNode|undefined {
     return this.#property;
   }
+
   set property(property: ObjectTreeNode) {
     if (this.#property) {
       this.#property.removeEventListener(ObjectTreeNodeBase.Events.VALUE_CHANGED, this.requestUpdate, this);
@@ -1703,6 +2033,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
   get expanded(): boolean {
     return this.#expanded;
   }
+
   set expanded(expanded: boolean) {
     this.#expanded = expanded;
     this.requestUpdate();
@@ -1711,6 +2042,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
   get linkifier(): Components.Linkifier.Linkifier|undefined {
     return this.#linkifier;
   }
+
   set linkifier(linkifier: Components.Linkifier.Linkifier|undefined) {
     this.#linkifier = linkifier;
     this.requestUpdate();
@@ -1719,6 +2051,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
   get editable(): boolean {
     return this.#editable;
   }
+
   set editable(val: boolean) {
     this.#editable = val;
     this.requestUpdate();
@@ -2010,6 +2343,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   get editable(): boolean {
     return this.#widget.editable;
   }
+
   set editable(val: boolean) {
     this.#widget.editable = val;
   }
@@ -2388,42 +2722,6 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
   static sparseIterationThreshold = 250000;
 }
 
-let rendererInstance: Renderer;
-
-export class Renderer implements UI.UIUtils.Renderer {
-  static instance(opts: {forceNew: boolean} = {forceNew: false}): Renderer {
-    const {forceNew} = opts;
-    if (!rendererInstance || forceNew) {
-      rendererInstance = new Renderer();
-    }
-    return rendererInstance;
-  }
-
-  async render(object: Object, options?: UI.UIUtils.Options): Promise<UI.UIUtils.RenderedObject|null> {
-    if (!(object instanceof SDK.RemoteObject.RemoteObject)) {
-      throw new Error('Can\'t render ' + object);
-    }
-    const title = options?.title;
-    const section = new ObjectPropertiesSection(object, title, undefined, undefined, Boolean(options?.editable));
-    if (!title) {
-      section.titleLessMode();
-    }
-    if (options?.expand) {
-      section.firstChild()?.expand();
-    }
-    const dispatchDimensionChange = (): void => {
-      section.element.dispatchEvent(new CustomEvent('dimensionschanged'));
-    };
-    section.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
-    section.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
-    section.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
-    return {
-      element: section.element,
-      forceSelect: section.forceSelect.bind(section),
-    };
-  }
-}
-
 interface ExpandableTextViewInput {
   copyText: () => void;
   expandText: () => void;