chrome-devtools-frontend 1.0.1543472 → 1.0.1545096

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

@@ -37,9 +37,8 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
-import {Directives, html, render} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 import type * as Components from '../utils/utils.js';
@@ -50,7 +49,7 @@ import objectPropertiesSectionStyles from './objectPropertiesSection.css.js';
 import objectValueStyles from './objectValue.css.js';
 import {RemoteObjectPreviewFormatter, renderNodeTitle} from './RemoteObjectPreviewFormatter.js';
 
-const {repeat, ifDefined} = Directives;
+const {ref, repeat, ifDefined, classMap} = Directives;
 const UIStrings = {
   /**
    * @description Text in Object Properties Section
@@ -504,86 +503,82 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return UI.Fragment.html`<span class="name">${name}</span>`;
   }
 
-  static valueElementForFunctionDescription(description?: string, includePreview?: boolean, defaultName?: string):
-      HTMLElement {
-    const valueElement = document.createElement('span');
-    valueElement.classList.add('object-value-function');
-    description = description || '';
-    const text = description.replace(/^function [gs]et /, 'function ')
-                     .replace(/^function [gs]et\(/, 'function\(')
-                     .replace(/^[gs]et /, '');
-    defaultName = defaultName || '';
-
-    // This set of best-effort regular expressions captures common function descriptions.
-    // Ideally, some parser would provide prefix, arguments, function body text separately.
-    const asyncMatch = text.match(/^(async\s+function)/);
-    const isGenerator = text.startsWith('function*');
-    const isGeneratorShorthand = text.startsWith('*');
-    const isBasic = !isGenerator && text.startsWith('function');
-    const isClass = text.startsWith('class ') || text.startsWith('class{');
-    const firstArrowIndex = text.indexOf('=>');
-    const isArrow = !asyncMatch && !isGenerator && !isBasic && !isClass && firstArrowIndex > 0;
-
-    let textAfterPrefix;
-    if (isClass) {
-      textAfterPrefix = text.substring('class'.length);
-      const classNameMatch = /^[^{\s]+/.exec(textAfterPrefix.trim());
-      let className: string = defaultName;
-      if (classNameMatch) {
-        className = classNameMatch[0].trim() || defaultName;
-      }
-      addElements('class', textAfterPrefix, className);
-    } else if (asyncMatch) {
-      textAfterPrefix = text.substring(asyncMatch[1].length);
-      addElements('async \u0192', textAfterPrefix, nameAndArguments(textAfterPrefix));
-    } else if (isGenerator) {
-      textAfterPrefix = text.substring('function*'.length);
-      addElements('\u0192*', textAfterPrefix, nameAndArguments(textAfterPrefix));
-    } else if (isGeneratorShorthand) {
-      textAfterPrefix = text.substring('*'.length);
-      addElements('\u0192*', textAfterPrefix, nameAndArguments(textAfterPrefix));
-    } else if (isBasic) {
-      textAfterPrefix = text.substring('function'.length);
-      addElements('\u0192', textAfterPrefix, nameAndArguments(textAfterPrefix));
-    } else if (isArrow) {
-      const maxArrowFunctionCharacterLength = 60;
-      let abbreviation: string = text;
-      if (defaultName) {
-        abbreviation = defaultName + '()';
-      } else if (text.length > maxArrowFunctionCharacterLength) {
-        abbreviation = text.substring(0, firstArrowIndex + 2) + ' {…}';
-      }
-      addElements('', text, abbreviation);
-    } else {
-      addElements('\u0192', text, nameAndArguments(text));
-    }
-    UI.Tooltip.Tooltip.install(valueElement, Platform.StringUtilities.trimEndWithMaxLength(description, 500));
-    return valueElement;
+  static valueElementForFunctionDescription(
+      description?: string, includePreview?: boolean, defaultName?: string, className?: string): LitTemplate {
+    const contents =
+        (description: string, defaultName: string): {prefix: string, abbreviation: string, body: string} => {
+          const text = description.replace(/^function [gs]et /, 'function ')
+                           .replace(/^function [gs]et\(/, 'function\(')
+                           .replace(/^[gs]et /, '');
+
+          // This set of best-effort regular expressions captures common function descriptions.
+          // Ideally, some parser would provide prefix, arguments, function body text separately.
+          const asyncMatch = text.match(/^(async\s+function)/);
+          const isGenerator = text.startsWith('function*');
+          const isGeneratorShorthand = text.startsWith('*');
+          const isBasic = !isGenerator && text.startsWith('function');
+          const isClass = text.startsWith('class ') || text.startsWith('class{');
+          const firstArrowIndex = text.indexOf('=>');
+          const isArrow = !asyncMatch && !isGenerator && !isBasic && !isClass && firstArrowIndex > 0;
+
+          if (isClass) {
+            const body = text.substring('class'.length);
+            const classNameMatch = /^[^{\s]+/.exec(body.trim());
+            let className: string = defaultName;
+            if (classNameMatch) {
+              className = classNameMatch[0].trim() || defaultName;
+            }
+            return {prefix: 'class', body, abbreviation: className};
+          }
+          if (asyncMatch) {
+            const body = text.substring(asyncMatch[1].length);
+            return {prefix: 'async \u0192', body, abbreviation: nameAndArguments(body)};
+          }
+          if (isGenerator) {
+            const body = text.substring('function*'.length);
+            return {prefix: '\u0192*', body, abbreviation: nameAndArguments(body)};
+          }
+          if (isGeneratorShorthand) {
+            const body = text.substring('*'.length);
+            return {prefix: '\u0192*', body, abbreviation: nameAndArguments(body)};
+          }
+          if (isBasic) {
+            const body = text.substring('function'.length);
+            return {prefix: '\u0192', body, abbreviation: nameAndArguments(body)};
+          }
+          if (isArrow) {
+            const maxArrowFunctionCharacterLength = 60;
+            let abbreviation: string = text;
+            if (defaultName) {
+              abbreviation = defaultName + '()';
+            } else if (text.length > maxArrowFunctionCharacterLength) {
+              abbreviation = text.substring(0, firstArrowIndex + 2) + ' {…}';
+            }
+            return {prefix: '', body: text, abbreviation};
+          }
+          return {prefix: '\u0192', body: text, abbreviation: nameAndArguments(text)};
+        };
+
+    const {prefix, body, abbreviation} = contents(description ?? '', defaultName ?? '');
+    const maxFunctionBodyLength = 200;
+    return html`<span
+      class="object-value-function ${className ?? ''}"
+      title=${Platform.StringUtilities.trimEndWithMaxLength(description ?? '', 500)}>${
+        prefix && html`<span class=object-value-function-prefix>${prefix} </span>`}${
+        includePreview ? Platform.StringUtilities.trimEndWithMaxLength(body.trim(), maxFunctionBodyLength) :
+                         abbreviation.replace(/\n/g, ' ')}</span>`;
 
     function nameAndArguments(contents: string): string {
       const startOfArgumentsIndex = contents.indexOf('(');
       const endOfArgumentsMatch = contents.match(/\)\s*{/);
       if (startOfArgumentsIndex !== -1 && endOfArgumentsMatch?.index !== undefined &&
           endOfArgumentsMatch.index > startOfArgumentsIndex) {
-        const name = contents.substring(0, startOfArgumentsIndex).trim() || defaultName;
+        const name = contents.substring(0, startOfArgumentsIndex).trim() || (defaultName ?? '');
         const args = contents.substring(startOfArgumentsIndex, endOfArgumentsMatch.index + 1);
         return name + args;
       }
       return defaultName + '()';
     }
-
-    function addElements(prefix: string, body: string, abbreviation: string): void {
-      const maxFunctionBodyLength = 200;
-      if (prefix.length) {
-        valueElement.createChild('span', 'object-value-function-prefix').textContent = prefix + ' ';
-      }
-      if (includePreview) {
-        UI.UIUtils.createTextChild(
-            valueElement, Platform.StringUtilities.trimEndWithMaxLength(body.trim(), maxFunctionBodyLength));
-      } else {
-        UI.UIUtils.createTextChild(valueElement, abbreviation.replace(/\n/g, ' '));
-      }
-    }
   }
 
   static createPropertyValueWithCustomSupport(
@@ -598,141 +593,100 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         value, wasThrown, showPreview, linkifier, isSyntheticProperty, variableName);
   }
 
-  static appendMemoryIcon(element: Element, object: SDK.RemoteObject.RemoteObject, expression?: string): void {
-    if (!object.isLinearMemoryInspectable()) {
-      return;
-    }
-
-    const memoryIcon = new IconButton.Icon.Icon();
-    memoryIcon.name = 'memory';
-    memoryIcon.style.width = 'var(--sys-size-8)';
-    memoryIcon.style.height = '13px';
-    memoryIcon.addEventListener('click', event => {
-      event.consume();
-      void Common.Revealer.reveal(new SDK.RemoteObject.LinearMemoryInspectable(object, expression));
-    });
-    memoryIcon.setAttribute('jslog', `${VisualLogging.action('open-memory-inspector').track({click: true})}`);
-
-    const revealText = i18nString(UIStrings.openInMemoryInpector);
-    UI.Tooltip.Tooltip.install(memoryIcon, revealText);
-    UI.ARIAUtils.setLabel(memoryIcon, revealText);
-
-    // Directly set property on memory icon, so that the memory icon is also
+  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.
-    memoryIcon.style.setProperty('vertical-align', 'sub');
-    memoryIcon.style.setProperty('cursor', 'pointer');
+    // clang-format off
+    return !object.isLinearMemoryInspectable() ? nothing : html`<devtools-icon
+      name=memory
+      style="width: var(--sys-size-8); height: 13px; vertical-align: sub; cursor: pointer;"
+      @click=${(event: Event) => {
+        event.consume();
+        void Common.Revealer.reveal(new SDK.RemoteObject.LinearMemoryInspectable(object, expression));
+      }}
+      jslog=${VisualLogging.action('open-memory-inspector').track({click: true})}
+      title=${i18nString(UIStrings.openInMemoryInpector)}
+      aria-label=${i18nString(UIStrings.openInMemoryInpector)}></devtools-icon>`;
+    // clang-format on
+  }
 
-    element.appendChild(memoryIcon);
+  static appendMemoryIcon(element: Element, object: SDK.RemoteObject.RemoteObject, expression?: string): void {
+    const fragment = document.createDocumentFragment();
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(ObjectPropertiesSection.getMemoryIcon(object, expression), fragment);
+    element.appendChild(fragment);
   }
 
   static createPropertyValue(
       value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
       linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty = false, variableName?: string): HTMLElement {
-    let propertyValue: HTMLElement;
+    const propertyValue = document.createDocumentFragment();
     const type = value.type;
     const subtype = value.subtype;
     const description = value.description || '';
     const className = value.className;
-    if (type === 'object' && subtype === 'internal#location') {
-      const rawLocation = value.debuggerModel().createRawLocationByScriptId(
-          value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
-      if (rawLocation && linkifier) {
-        return linkifier.linkifyRawLocation(rawLocation, Platform.DevToolsPath.EmptyUrlString);
+
+    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')}`;
+        }
+        return html`<span class=value title=${description}>${'<' + i18nString(UIStrings.unknown) + '>'}</span>`;
       }
-      propertyValue = createUnknownInternalLocationElement();
-    } else if (type === 'string' && typeof description === 'string') {
-      propertyValue = createStringElement();
-    } else if (type === 'object' && subtype === 'trustedtype') {
-      propertyValue = createTrustedTypeElement();
-    } else if (type === 'function') {
-      propertyValue = ObjectPropertiesSection.valueElementForFunctionDescription(description);
-    } else if (type === 'object' && subtype === 'node' && description) {
-      propertyValue = createNodeElement();
-    } else {
-      const valueElement = document.createElement('span');
-      valueElement.classList.add('object-value-' + (subtype || type));
-      if (value.preview && showPreview) {
-        const previewFormatter = new RemoteObjectPreviewFormatter();
-        /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
-        render(previewFormatter.renderObjectPreview(value.preview), valueElement);
-        propertyValue = valueElement;
-        UI.Tooltip.Tooltip.install(propertyValue as HTMLElement, description || '');
-      } else if (description.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, description, EXPANDABLE_MAX_LENGTH).element;
-      } else {
-        propertyValue = valueElement;
-        propertyValue.textContent = description;
-        UI.Tooltip.Tooltip.install(propertyValue as HTMLElement, description);
+      if (type === 'string' && typeof description === 'string') {
+        const text = JSON.stringify(description);
+        const tooLong = description.length > maxRenderableStringLength;
+        return html`<span class="value object-value-string" title=${ifDefined(tooLong ? undefined : description)}>${
+            tooLong ? new ExpandableTextPropertyValue(text, EXPANDABLE_MAX_LENGTH).element : text}</span>`;
       }
-      if (!isSyntheticProperty) {
-        this.appendMemoryIcon(valueElement, value, variableName);
+      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 ? new ExpandableTextPropertyValue(text, EXPANDABLE_MAX_LENGTH).element :
+                      html`${className} <span class=object-value-string title=${description}>${
+                          JSON.stringify(description)}</span>`}</span>`;
       }
-    }
-
-    if (wasThrown) {
-      const wrapperElement = document.createElement('span');
-      wrapperElement.classList.add('error');
-      wrapperElement.classList.add('value');
-      wrapperElement.appendChild(uiI18n.getFormatLocalizedString(str_, UIStrings.exceptionS, {PH1: propertyValue}));
-      propertyValue = wrapperElement;
-    }
-    propertyValue.classList.add('value');
-    return propertyValue;
-
-    function createUnknownInternalLocationElement(): HTMLElement {
-      const valueElement = document.createElement('span');
-      valueElement.textContent = '<' + i18nString(UIStrings.unknown) + '>';
-      UI.Tooltip.Tooltip.install(valueElement, description || '');
-      return valueElement;
-    }
-
-    function createStringElement(): HTMLElement {
-      const valueElement = document.createElement('span');
-      valueElement.classList.add('object-value-string');
-      const text = JSON.stringify(description);
-      let propertyValue: HTMLElement;
-      if (description.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, text, EXPANDABLE_MAX_LENGTH).element;
-      } else {
-        UI.UIUtils.createTextChild(valueElement, text);
-        propertyValue = valueElement;
-        UI.Tooltip.Tooltip.install(valueElement, description);
+      if (type === 'function') {
+        return ObjectPropertiesSection.valueElementForFunctionDescription(description, undefined, undefined, 'value');
       }
-      return propertyValue;
-    }
-
-    function createTrustedTypeElement(): HTMLElement {
-      const valueElement = document.createElement('span');
-      valueElement.classList.add('object-value-trustedtype');
-      const text = `${className} "${description}"`;
-      let propertyValue;
-      if (text.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, text, EXPANDABLE_MAX_LENGTH).element;
-      } else {
-        const contentString = createStringElement();
-        UI.UIUtils.createTextChild(valueElement, `${className} `);
-        valueElement.appendChild(contentString);
-        propertyValue = valueElement;
-        UI.Tooltip.Tooltip.install(valueElement, text);
+      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()}
+          >${renderNodeTitle(description)}</span>`;
       }
+      if (description.length > maxRenderableStringLength) {
+        return html`<span class="value object-value-${subtype || type}" title=${description}>${
+            new ExpandableTextPropertyValue(description, EXPANDABLE_MAX_LENGTH).element}</span>`;
+      }
+      const hasPreview = value.preview && showPreview;
+      return html`<span class="value object-value-${subtype || type}" title=${description}>${
+          hasPreview ? new RemoteObjectPreviewFormatter().renderObjectPreview(value.preview) :
+                       description}${isSyntheticProperty ? nothing : this.getMemoryIcon(value, variableName)}</span>`;
+    };
 
-      return propertyValue;
+    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);
     }
-
-    function createNodeElement(): HTMLElement {
-      const valueElement = document.createElement('span');
-      valueElement.classList.add('object-value-node');
-      /* eslint-disable-next-line @devtools/no-lit-render-outside-of-view */
-      render(renderNodeTitle(description), valueElement);
-      valueElement.addEventListener('click', event => {
-        void Common.Revealer.reveal(value);
-        event.consume(true);
-      }, false);
-      valueElement.addEventListener(
-          'mousemove', () => SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(value), false);
-      valueElement.addEventListener('mouseleave', () => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(), false);
-      return valueElement;
+    const child = propertyValue.firstElementChild;
+    if (!(child instanceof HTMLElement)) {
+      throw new Error('Expected an HTML element');
     }
+    return child;
   }
 
   static formatObjectAsFunction(
@@ -754,8 +708,11 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       if (response?.functionName) {
         defaultName = response.functionName;
       }
-      const valueElement =
-          ObjectPropertiesSection.valueElementForFunctionDescription(func.description, includePreview, defaultName);
+      const valueElement = document.createDocumentFragment();
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(
+          ObjectPropertiesSection.valueElementForFunctionDescription(func.description, includePreview, defaultName),
+          valueElement);
       element.appendChild(valueElement);
     }
   }
@@ -917,43 +874,116 @@ export class RootElement extends UI.TreeOutline.TreeElement {
 export const InitialVisibleChildrenLimit = 200;
 
 export interface TreeElementViewInput {
+  startEditing(): unknown;
+  invokeGetter(getter: SDK.RemoteObject.RemoteObject): unknown;
   onAutoComplete(expression: string, filter: string, force: boolean): unknown;
+  linkifier: Components.Linkifier.Linkifier|undefined;
   completions: string[];
-  expandedValueElement: HTMLElement|undefined;
   expanded: boolean;
   editing: boolean;
   editingEnded(): unknown;
   editingCommitted(detail: string): unknown;
   node: ObjectTreeNode;
-  nameElement: HTMLElement;
-  valueElement: HTMLElement;
 }
-type TreeElementView = (input: TreeElementViewInput, output: object, target: HTMLElement) => void;
+interface TreeElementViewOutput {
+  valueElement: Element|undefined;
+  nameElement: Element|undefined;
+}
+type TreeElementView = (input: TreeElementViewInput, output: TreeElementViewOutput, target: HTMLElement) => void;
 export const TREE_ELEMENT_DEFAULT_VIEW: TreeElementView = (input, output, target) => {
-  const isInternalEntries = input.node.property.synthetic && input.node.name === '[[Entries]]';
-  if (isInternalEntries) {
-    render(html`<span class=name-and-value>${input.nameElement}</span>`, target);
-  } else {
-    const completionsId = `completions-${input.node.parent?.object?.objectId?.replaceAll('.', '-')}-${input.node.name}`;
-    const onAutoComplete = async(e: UI.TextPrompt.TextPromptElement.BeforeAutoCompleteEvent): Promise<void> => {
-      if (!(e.target instanceof UI.TextPrompt.TextPromptElement)) {
-        return;
-      }
-      input.onAutoComplete(e.detail.expression, e.detail.filter, e.detail.force);
-    };
-    // clang-format off
-      render(html`<span class=name-and-value>${input.nameElement}<span class='separator'>: </span><devtools-prompt
-             @commit=${(e: UI.TextPrompt.TextPromptElement.CommitEvent) => input.editingCommitted(e.detail)}
-             @cancel=${() => input.editingEnded()}
-             @beforeautocomplete=${onAutoComplete}
-             completions=${completionsId}
-             placeholder=${i18nString(UIStrings.stringIsTooLargeToEdit)}
-             ?editing=${input.editing}>
-               ${input.expanded && input.expandedValueElement || input.valueElement}
-               <datalist id=${completionsId}>${repeat(input.completions, c => html`<option>${c}</option>`)}</datalist>
-             </devtools-prompt></span><span>`, target);
-    // clang-format on
-  }
+  const {property} = input.node;
+  const isInternalEntries = property.synthetic && input.node.name === '[[Entries]]';
+  const completionsId = `completions-${input.node.parent?.object?.objectId?.replaceAll('.', '-')}-${input.node.name}`;
+  const onAutoComplete = async(e: UI.TextPrompt.TextPromptElement.BeforeAutoCompleteEvent): Promise<void> => {
+    if (!(e.target instanceof UI.TextPrompt.TextPromptElement)) {
+      return;
+    }
+    input.onAutoComplete(e.detail.expression, e.detail.filter, e.detail.force);
+  };
+  const nameClasses = classMap({
+    name: true,
+    'object-properties-section-dimmed': !property.enumerable,
+    'own-property': property.isOwn,
+    'synthetic-property': property.synthetic,
+  });
+  const quotedName =
+      /^\s|\s$|^$|\n/.test(property.name) ? `"${property.name.replace(/\n/g, '\u21B5')}"` : property.name;
+  const isExpandable = !isInternalEntries && property.value && !property.wasThrown && property.value.hasChildren &&
+      !property.value.customPreview() && property.value.subtype !== 'node' && property.value.type !== 'function' &&
+      (property.value.type !== 'object' || property.value.preview);
+
+  const value = (): LitTemplate|HTMLElement => {
+    const valueRef = ref(e => {
+      output.valueElement = e;
+    });
+    if (isInternalEntries) {
+      return html`<span ${valueRef} class=value></span>`;
+    }
+    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 */);
+      output.valueElement = value;
+      return value;
+    }
+    if (property.getter) {
+      const getter = property.getter;
+      const invokeGetter = (event: Event): void => {
+        event.consume();
+        input.invokeGetter(getter);
+      };
+      return html`<span ${valueRef}><span
+        class=object-value-calculate-value-button
+        title=${i18nString(UIStrings.invokePropertyGetter)}
+        @click=${invokeGetter}
+        >${i18nString(UIStrings.dots)}</span></span>`;
+    }
+    return html`<span ${valueRef}
+        class=object-value-unavailable
+        title=${i18nString(UIStrings.valueNotAccessibleToTheDebugger)}>${
+        i18nString(UIStrings.valueUnavailable)}</span>`;
+  };
+
+  const onDblClick = (event: Event): void => {
+    event.consume(true);
+    if (property.value && !property.value.customPreview() && (property.writable || property.setter)) {
+      input.startEditing();
+    }
+  };
+
+  // clang-format off
+  render(
+        html`<span class=name-and-value><span
+          ${ref(e => { output.nameElement = e; })}
+          class=${nameClasses}
+          title=${input.node.path}>${property.private ?
+            html`<span class="private-property-hash">${property.name[0]}</span>${
+            property.name.substring(1)}</span>` : quotedName}</span>${
+              isInternalEntries ? nothing :
+              html`<span class='separator'>: </span><devtools-prompt
+                @commit=${(e: UI.TextPrompt.TextPromptElement.CommitEvent) => input.editingCommitted(e.detail)}
+                @cancel=${() => input.editingEnded()}
+                @beforeautocomplete=${onAutoComplete}
+                @dblclick=${onDblClick}
+                completions=${completionsId}
+                placeholder=${i18nString(UIStrings.stringIsTooLargeToEdit)}
+                ?editing=${input.editing}>
+                  ${input.expanded && isExpandable && property.value ?
+                    html`<span
+                      class="value object-value-${property.value.subtype || property.value.type}"
+                      title=${ifDefined(property.value.description)}>${
+                        property.value.description === 'Object' ? '' :
+                          Platform.StringUtilities.trimMiddle(property.value.description ?? '',
+                                                              maxRenderableStringLength)}${
+                      property.synthetic ? nothing :
+                        ObjectPropertiesSection.getMemoryIcon(property.value)}</span>` :
+                    value()
+                  }
+                  <datalist id=${completionsId}>${repeat(input.completions, c => html`<option>${c}</option>`)}</datalist>
+                </devtools-prompt></span>`}</span>`,
+          target);
+  // clang-format on
 };
 export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   property: ObjectTreeNode;
@@ -961,16 +991,13 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   private highlightChanges: UI.UIUtils.HighlightChange[];
   private linkifier: Components.Linkifier.Linkifier|undefined;
   private readonly maxNumPropertiesToShow: number;
-  nameElement!: HTMLElement;
-  valueElement!: HTMLElement;
   readOnly!: boolean;
   private prompt!: ObjectPropertyPrompt|undefined;
-  private editableDiv!: HTMLElement;
-  propertyValue?: HTMLElement;
-  expandedValueElement?: HTMLElement;
   #editing = false;
   readonly #view: TreeElementView;
   #completions: string[] = [];
+  #nameElement: Element|undefined;
+  #valueElement: Element|undefined;
   constructor(property: ObjectTreeNode, linkifier?: Components.Linkifier.Linkifier, view = TREE_ELEMENT_DEFAULT_VIEW) {
     // Pass an empty title, the title gets made later in onattach.
     super();
@@ -1113,6 +1140,10 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     return rootElement;
   }
 
+  get nameElement(): Element|undefined {
+    return this.#nameElement;
+  }
+
   setSearchRegex(regex: RegExp, additionalCssClassName?: string): boolean {
     let cssClasses = UI.UIUtils.highlightedSearchResultClassName;
     if (additionalCssClassName) {
@@ -1120,11 +1151,13 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     this.revertHighlightChanges();
 
-    this.applySearch(regex, this.nameElement, cssClasses);
+    if (this.#nameElement) {
+      this.applySearch(regex, this.#nameElement, cssClasses);
+    }
     if (this.property.object) {
       const valueType = this.property.object.type;
-      if (valueType !== 'object') {
-        this.applySearch(regex, this.valueElement, cssClasses);
+      if (valueType !== 'object' && this.#valueElement) {
+        this.applySearch(regex, this.#valueElement, cssClasses);
       }
     }
 
@@ -1186,17 +1219,6 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  override ondblclick(event: Event): boolean {
-    const target = (event.target as HTMLElement);
-    const inEditableElement = target.isSelfOrDescendant(this.valueElement) ||
-        (this.expandedValueElement && target.isSelfOrDescendant(this.expandedValueElement));
-    if (this.property.object && !this.property.object.customPreview() && inEditableElement &&
-        (this.property.property.writable || this.property.property.setter)) {
-      this.startEditing();
-    }
-    return false;
-  }
-
   override onenter(): boolean {
     if (this.property.object && !this.property.object.customPreview() &&
         (this.property.property.writable || this.property.property.setter)) {
@@ -1207,7 +1229,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onattach(): void {
-    this.update();
+    this.performUpdate();
     this.updateExpandable();
   }
 
@@ -1219,88 +1241,6 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.performUpdate();
   }
 
-  private createExpandedValueElement(value: SDK.RemoteObject.RemoteObject, isSyntheticProperty: boolean): HTMLElement
-      |undefined {
-    const needsAlternateValue = value.hasChildren && !value.customPreview() && value.subtype !== 'node' &&
-        value.type !== 'function' && (value.type !== 'object' || value.preview);
-    if (!needsAlternateValue) {
-      return undefined;
-    }
-
-    const valueElement = document.createElement('span');
-    valueElement.classList.add('value');
-    if (value.description === 'Object') {
-      valueElement.textContent = '';
-    } else {
-      valueElement.setTextContentTruncatedIfNeeded(value.description || '');
-    }
-    valueElement.classList.add('object-value-' + (value.subtype || value.type));
-    UI.Tooltip.Tooltip.install(valueElement, value.description || '');
-    if (!isSyntheticProperty) {
-      ObjectPropertiesSection.appendMemoryIcon(valueElement, value);
-    }
-    return valueElement;
-  }
-
-  update(): void {
-    this.nameElement =
-        (ObjectPropertiesSection.createNameElement(this.property.name, this.property.property.private) as HTMLElement);
-    if (!this.property.property.enumerable) {
-      this.nameElement.classList.add('object-properties-section-dimmed');
-    }
-    if (this.property.property.isOwn) {
-      this.nameElement.classList.add('own-property');
-    }
-    if (this.property.property.synthetic) {
-      this.nameElement.classList.add('synthetic-property');
-    }
-    this.nameElement.title = this.property.path;
-
-    const isInternalEntries = this.property.property.synthetic && this.property.name === '[[Entries]]';
-    if (isInternalEntries) {
-      this.valueElement = document.createElement('span');
-      this.valueElement.classList.add('value');
-    } else if (this.property.object) {
-      const showPreview = this.property.name !== '[[Prototype]]';
-      this.propertyValue = ObjectPropertiesSection.createPropertyValueWithCustomSupport(
-          this.property.object, this.property.property.wasThrown, showPreview, this.linkifier,
-          this.property.property.synthetic, this.property.path /* variableName */);
-      this.valueElement = this.propertyValue;
-    } else if (this.property.property.getter) {
-      this.valueElement = document.createElement('span');
-      const element = this.valueElement.createChild('span');
-      element.textContent = i18nString(UIStrings.dots);
-      element.classList.add('object-value-calculate-value-button');
-      UI.Tooltip.Tooltip.install(element, i18nString(UIStrings.invokePropertyGetter));
-      const getter = this.property.property.getter;
-      element.addEventListener('click', (event: Event) => {
-        event.consume();
-        const invokeGetter = `
-          function invokeGetter(getter) {
-            return Reflect.apply(getter, this, []);
-          }`;
-        // Also passing a string instead of a Function to avoid coverage implementation messing with it.
-        void this.property.parent
-            ?.object
-            // @ts-expect-error No way to teach TypeScript to preserve the Function-ness of `getter`.
-            ?.callFunction(invokeGetter, [SDK.RemoteObject.RemoteObject.toCallArgument(getter)])
-            .then(this.onInvokeGetterClick.bind(this));
-      }, false);
-    } else {
-      this.valueElement = document.createElement('span');
-      this.valueElement.classList.add('object-value-unavailable');
-      this.valueElement.textContent = i18nString(UIStrings.valueUnavailable);
-      UI.Tooltip.Tooltip.install(this.valueElement, i18nString(UIStrings.valueNotAccessibleToTheDebugger));
-    }
-
-    const valueText = this.valueElement.textContent;
-    if (this.property.object && valueText && !this.property.property.wasThrown) {
-      this.expandedValueElement =
-          this.createExpandedValueElement(this.property.object, this.property.property.synthetic);
-    }
-    this.performUpdate();
-  }
-
   async #updateCompletions(expression: string, filter: string, force: boolean): Promise<void> {
     const suggestions = await TextEditor.JavaScript.completeInContext(expression, filter, force);
     this.#completions = suggestions.map(v => v.text);
@@ -1309,18 +1249,27 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
 
   performUpdate(): void {
     const input: TreeElementViewInput = {
-      expandedValueElement: this.expandedValueElement,
       expanded: this.expanded,
       editing: this.#editing,
       editingEnded: this.editingEnded.bind(this),
       editingCommitted: this.editingCommitted.bind(this),
       node: this.property,
-      nameElement: this.nameElement,
-      valueElement: this.valueElement,
+      linkifier: this.linkifier,
       completions: this.#editing ? this.#completions : [],
       onAutoComplete: this.#updateCompletions.bind(this),
+      invokeGetter: this.onInvokeGetterClick.bind(this),
+      startEditing: this.startEditing.bind(this),
     };
-    this.#view(input, {}, this.listItemElement);
+    const that = this;
+    const output: TreeElementViewOutput = {
+      set nameElement(e: Element|undefined) {
+        that.#nameElement = e;
+      },
+      set valueElement(e: Element|undefined) {
+        that.#valueElement = e;
+      },
+    };
+    this.#view(input, output, this.listItemElement);
   }
 
   getContextMenu(event: Event): UI.ContextMenu.ContextMenu {
@@ -1342,9 +1291,9 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
             i18nString(UIStrings.copyValue), copyValueHandler, {jslogContext: 'copy-value'});
       }
     }
-    if (!this.property.property.synthetic && this.nameElement?.title) {
+    if (!this.property.property.synthetic && this.property.path) {
       const copyPathHandler = Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText.bind(
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance, this.nameElement.title);
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance, this.property.path);
       contextMenu.clipboardSection().appendItem(
           i18nString(UIStrings.copyPropertyPath), copyPathHandler, {jslogContext: 'copy-property-path'});
     }
@@ -1418,7 +1367,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
           void parent.onpopulate();
         }
       } else {
-        this.update();
+        this.performUpdate();
       }
       return;
     }
@@ -1428,7 +1377,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
         expression ? parentObject.setPropertyValue(property, expression) : parentObject.deleteProperty(property);
     const error = await errorPromise;
     if (error) {
-      this.update();
+      this.performUpdate();
       return;
     }
 
@@ -1452,14 +1401,23 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.property.removeChildren();
   }
 
-  private onInvokeGetterClick(result: SDK.RemoteObject.CallFunctionResult): void {
-    if (!result.object) {
+  async onInvokeGetterClick(getter: SDK.RemoteObject.RemoteObject): Promise<void> {
+    const invokeGetter = `
+          function invokeGetter(getter) {
+            return Reflect.apply(getter, this, []);
+          }`;
+    // Also passing a string instead of a Function to avoid coverage implementation messing with it.
+    const result = await this.property.parent
+                       ?.object
+                       // @ts-expect-error No way to teach TypeScript to preserve the Function-ness of `getter`.
+                       ?.callFunction(invokeGetter, [SDK.RemoteObject.RemoteObject.toCallArgument(getter)]);
+    if (!result?.object) {
       return;
     }
     this.property.property.value = result.object;
     this.property.property.wasThrown = result.wasThrown || false;
 
-    this.update();
+    this.performUpdate();
     this.invalidateChildren();
     this.updateExpandable();
   }
@@ -1475,7 +1433,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   path(): string {
-    return this.nameElement.title;
+    return this.property.path;
   }
 }
 
@@ -1788,10 +1746,10 @@ export class ExpandableTextPropertyValue {
   private readonly maxDisplayableTextLength: number;
   readonly #byteCount: number;
   #expanded = false;
-  #element: HTMLElement;
+  #element: DocumentFragment;
 
-  constructor(element: HTMLElement, text: string, maxLength: number) {
-    this.#element = element;
+  constructor(text: string, maxLength: number) {
+    this.#element = document.createDocumentFragment();
     this.text = text;
     this.maxLength = maxLength;
     this.maxDisplayableTextLength = 10000000;
@@ -1799,7 +1757,7 @@ export class ExpandableTextPropertyValue {
     this.#render();
   }
 
-  get element(): HTMLElement {
+  get element(): DocumentFragment {
     return this.#element;
   }