chrome-devtools-frontend 1.0.1675430 → 1.0.1676824

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,
 }>();
 
@@ -488,7 +489,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 +969,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 +1118,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 +1142,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) {
@@ -1366,70 +1252,177 @@ 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);
+  }
 
-    return html`
-      <ul class=${classMap(classes)} role="group">
-        ${nodes.map(node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
-      </ul>
-    `;
-  })();
+  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;
+  }
 
-  return until(promise, html`<ul class=${classMap(classes)} role="group"></ul>`);
+  onExpand = (expanded: boolean): void => {
+    if (this.#objectTree) {
+      this.#objectTree.expanded = expanded;
+    }
+  };
+
+  get skipProto(): boolean {
+    return this.#skipProto;
+  }
+  set skipProto(val: boolean) {
+    this.#skipProto = val;
+    this.requestUpdate();
+  }
+  get objectTree(): ObjectTree|undefined {
+    return this.#objectTree;
+  }
+  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,
+    skipProto = false,
+    showOverflow = true,
     ): LitTemplate {
-  const treeContent = renderObjectTreeInternal(objectTree, linkifier, undefined, {});
-
-  return html`<devtools-tree class="object-properties-section" show-selection-on-keyboard-focus .template=${html`
+  // clang-format off
+  return html`<devtools-tree
+      class="object-properties-section"
+      ?hide-overflow=${!showOverflow}
+      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}
+        <ul role="group" ${widget(ObjectTreeWidget, {objectTree, linkifier, skipProto})} ${
+      /* The empty widgetRef forces the widget to be materialized in the template DOM */
+      widgetRef(ObjectTreeWidget, () => {})}></ul>
       </li>
-    </ul>
-  `}></devtools-tree>`;
+    </ul>`}></devtools-tree>`;
+  // clang-format on
 }
 class RootElement extends UI.TreeOutline.TreeElement {
   private readonly object: ObjectTree;
@@ -1525,6 +1518,121 @@ 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 renderObjectPropertiesSection(objectTree, title, linkifier, skipProto, !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 +1692,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 +1701,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;

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -8,8 +8,13 @@
   opacity: 60%;
 }
 
+:host {
+  display: block;
+}
+
 .object-properties-section {
   padding: 0;
+  margin: 0;
   color: var(--sys-color-on-surface);
   display: flex;
   flex-direction: column;

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -89,14 +89,14 @@ export class CommandMenu {
   }
 
   static createSettingCommand<V>(setting: Common.Settings.Setting<V>, title: Common.UIString.LocalizedString, value: V,
-                                 settingUIDescriptor?: SettingsUI.SettingUIRegistration.SettingUIDescriptor): Command {
-    const uiDescriptor = settingUIDescriptor ?? SettingsUI.SettingUIRegistration.maybeResolve(setting.descriptor());
-    const category = uiDescriptor?.category ?? setting.category();
-    if (!category) {
+                                 settingUI?: SettingsUI.SettingUIRegistration.SettingUI): Command {
+    const ui = settingUI ?? SettingsUI.SettingUIRegistration.maybeResolve(setting.descriptor());
+    const category = ui?.category;
+    if (!category || !ui) {
       throw new Error(`Creating '${title}' setting command failed. Setting has no category.`);
     }
-    const tags = uiDescriptor?.tags?.map(tag => tag()).join('\0') ?? setting.tags() ?? '';
-    const reloadRequired = Boolean(uiDescriptor?.reloadRequired ?? setting.reloadRequired());
+    const tags = ui.tags;
+    const reloadRequired = ui.reloadRequired;
 
     return CommandMenu.createCommand({
       category: Common.Settings.getLocalizedSettingsCategory(category),
@@ -116,12 +116,8 @@ export class CommandMenu {
               i18nString(UIStrings.settingsChangedReloadDevTools));
         }
       },
-      availableHandler,
+      availableHandler: () => setting.get() !== value,
     });
-
-    function availableHandler(): boolean {
-      return setting.get() !== value;
-    }
   }
 
   static createActionCommand(options: ActionCommandOptions): Command {
@@ -212,8 +208,8 @@ export class CommandMenu {
     // Populate allowlisted settings.
     const settingsRegistrations = SettingsUI.SettingUIRegistration.getRegisteredSettings();
     for (const registeredSettingUI of settingsRegistrations) {
-      const options = registeredSettingUI.uiDescriptor.options;
-      if (!options || !registeredSettingUI.uiDescriptor.category) {
+      const settingUI = SettingsUI.SettingUIRegistration.resolve(registeredSettingUI.descriptor);
+      if (!settingUI.options.length || !settingUI.category) {
         continue;
       }
       let setting: Common.Settings.Setting<unknown>;
@@ -227,9 +223,8 @@ export class CommandMenu {
       } else {
         setting = Common.Settings.Settings.instance().resolve(registeredSettingUI.descriptor);
       }
-      for (const pair of options) {
-        this.#commands.push(
-            CommandMenu.createSettingCommand(setting, pair.title(), pair.value, registeredSettingUI.uiDescriptor));
+      for (const option of settingUI.options) {
+        this.#commands.push(CommandMenu.createSettingCommand(setting, option.title, option.value, settingUI));
       }
     }
   }

package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts

@@ -44,16 +44,10 @@ export function createSettingCheckbox(
 
 export function renderSettingSelect(setting: Common.Settings.Setting<unknown>, subtitle?: string,
                                     disabled?: boolean): TemplateResult {
-  const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(setting.descriptor());
-  const name = uiDescriptor?.title?.() ?? setting.title();
-  const options = uiDescriptor?.options?.map(opt => ({
-                                               value: opt.value,
-                                               title: opt.title(),
-                                               text: typeof opt.text === 'function' ? opt.text() : opt.text,
-                                               raw: opt.raw,
-                                             })) ??
-      setting.options();
-  const requiresReload = Boolean(uiDescriptor?.reloadRequired ?? setting.reloadRequired());
+  const uiDescriptor = SettingUIRegistration.SettingUIRegistration.resolve(setting.descriptor());
+  const name = uiDescriptor.title;
+  const options = uiDescriptor.options;
+  const requiresReload = uiDescriptor.reloadRequired;
   const controlId = UI.ARIAUtils.nextId('labelledControl');
   const reloadWarningRef = createRef<HTMLParagraphElement>();
 
@@ -115,8 +109,7 @@ export const renderControlForSetting = function(setting: Common.Settings.Setting
     case Common.Settings.SettingType.BOOLEAN: {
       const onchange = (): void => {
         const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(setting.descriptor());
-        const requiresReload = Boolean(uiDescriptor?.reloadRequired ?? setting.reloadRequired());
-        if (requiresReload) {
+        if (uiDescriptor?.reloadRequired) {
           UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
               i18nString(UIStrings.settingsChangedReloadDevTools));
         }

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

@@ -94,6 +94,8 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     if (this.objectTree) {
       this.objectTree.removeEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED,
                                           this.#onChildrenChanged, this);
+      this.objectTree.removeEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.EXPANDED_CHANGED,
+                                          this.#onChildrenChanged, this);
     }
     this.#parsedJSON = parsedJSON;
     this.objectTree = null;
@@ -187,6 +189,8 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     }
     this.objectTree.addEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED,
                                      this.#onChildrenChanged, this);
+    this.objectTree.addEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.EXPANDED_CHANGED,
+                                     this.#onChildrenChanged, this);
   }
 
   #onChildrenChanged(): void {
@@ -222,7 +226,8 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     }
   }
 
-  performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
+  async performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean,
+                      jumpBackwards?: boolean): Promise<void> {
     this.initialize();
     this.onSearchCanceled();
     const searchRegex = searchConfig.toSearchRegex(true).regex;
@@ -230,6 +235,8 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
       return;
     }
 
+    await this.objectTree.populateChildrenIfNeeded();
+
     this.search.search(this.objectTree, jumpBackwards ?? false, (node, closeTag) => {
       if (closeTag || !searchRegex) {
         return [];