chrome-devtools-frontend 1.0.1543082 → 1.0.1544076

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';
@@ -48,9 +47,9 @@ import {CustomPreviewComponent} from './CustomPreviewComponent.js';
 import {JavaScriptREPL} from './JavaScriptREPL.js';
 import objectPropertiesSectionStyles from './objectPropertiesSection.css.js';
 import objectValueStyles from './objectValue.css.js';
-import {createSpansForNodeTitle, RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
+import {RemoteObjectPreviewFormatter, renderNodeTitle} from './RemoteObjectPreviewFormatter.js';
 
-const {ifDefined} = Directives;
+const {repeat, ifDefined} = 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,139 +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();
-        previewFormatter.appendObjectPreview(valueElement, value.preview, false /* isEntry */);
-        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');
-      createSpansForNodeTitle(valueElement, (description));
-      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(
@@ -752,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);
     }
   }
@@ -914,6 +873,47 @@ export class RootElement extends UI.TreeOutline.TreeElement {
  **/
 export const InitialVisibleChildrenLimit = 200;
 
+export interface TreeElementViewInput {
+  onAutoComplete(expression: string, filter: string, force: boolean): unknown;
+  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;
+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
+  }
+};
 export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   property: ObjectTreeNode;
   override toggleOnClick: boolean;
@@ -922,16 +922,18 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   private readonly maxNumPropertiesToShow: number;
   nameElement!: HTMLElement;
   valueElement!: HTMLElement;
-  private rowContainer!: HTMLElement;
   readOnly!: boolean;
   private prompt!: ObjectPropertyPrompt|undefined;
   private editableDiv!: HTMLElement;
-  propertyValue?: HTMLElement;
-  expandedValueElement?: Element|null;
-  constructor(property: ObjectTreeNode, linkifier?: Components.Linkifier.Linkifier) {
+  expandedValueElement?: HTMLElement;
+  #editing = false;
+  readonly #view: TreeElementView;
+  #completions: string[] = [];
+  constructor(property: ObjectTreeNode, linkifier?: Components.Linkifier.Linkifier, view = TREE_ELEMENT_DEFAULT_VIEW) {
     // Pass an empty title, the title gets made later in onattach.
     super();
 
+    this.#view = view;
     this.property = property;
     this.toggleOnClick = true;
     this.highlightChanges = [];
@@ -1168,29 +1170,19 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onexpand(): void {
-    this.showExpandedValueElement(true);
+    this.performUpdate();
   }
 
   override oncollapse(): void {
-    this.showExpandedValueElement(false);
+    this.performUpdate();
   }
 
-  private showExpandedValueElement(value: boolean): void {
-    if (!this.expandedValueElement) {
-      return;
-    }
-    if (value) {
-      this.rowContainer.replaceChild(this.expandedValueElement, this.valueElement);
-    } else {
-      this.rowContainer.replaceChild(this.valueElement, this.expandedValueElement);
-    }
-  }
-
-  private createExpandedValueElement(value: SDK.RemoteObject.RemoteObject, isSyntheticProperty: boolean): Element|null {
+  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 null;
+      return undefined;
     }
 
     const valueElement = document.createElement('span');
@@ -1228,10 +1220,9 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.valueElement.classList.add('value');
     } else if (this.property.object) {
       const showPreview = this.property.name !== '[[Prototype]]';
-      this.propertyValue = ObjectPropertiesSection.createPropertyValueWithCustomSupport(
+      this.valueElement = 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');
@@ -1264,24 +1255,29 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.expandedValueElement =
           this.createExpandedValueElement(this.property.object, this.property.property.synthetic);
     }
+    this.performUpdate();
+  }
 
-    const adorner: Element|string = '';
-    let container: Element;
-
-    if (isInternalEntries) {
-      container = UI.Fragment.html`
-        <span class='name-and-value'>${adorner}${this.nameElement}</span>
-      `;
-    } else {
-      container = UI.Fragment.html`
-        <span class='name-and-value'>${adorner}${this.nameElement}<span class='separator'>: </span>${
-          this.valueElement}</span>
-      `;
-    }
+  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);
+    this.performUpdate();
+  }
 
-    this.listItemElement.removeChildren();
-    this.rowContainer = (container as HTMLElement);
-    this.listItemElement.appendChild(this.rowContainer);
+  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,
+      completions: this.#editing ? this.#completions : [],
+      onAutoComplete: this.#updateCompletions.bind(this),
+    };
+    this.#view(input, {}, this.listItemElement);
   }
 
   getContextMenu(event: Event): UI.ContextMenu.ContextMenu {
@@ -1325,69 +1321,28 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     void contextMenu.show();
   }
 
-  private startEditing(): void {
-    const treeOutline = (this.treeOutline as ObjectPropertiesSectionsTreeOutline | null);
-    if (this.prompt || !treeOutline || !treeOutline.editable || this.readOnly) {
-      return;
-    }
-    this.editableDiv = this.rowContainer.createChild('span', 'editable-div');
-
-    if (this.property.object) {
-      let text: string|(string | undefined) = this.property.object.description;
-      if (this.property.object.type === 'string' && typeof text === 'string') {
-        text = `"${text}"`;
-      }
-
-      this.editableDiv.setTextContentTruncatedIfNeeded(text, i18nString(UIStrings.stringIsTooLargeToEdit));
-    }
-
-    const originalContent = this.editableDiv.textContent || '';
-
-    // Lie about our children to prevent expanding on double click and to collapse subproperties.
-    this.setExpandable(false);
-    this.listItemElement.classList.add('editing-sub-part');
-    this.valueElement.classList.add('hidden');
-
-    this.prompt = new ObjectPropertyPrompt();
-
-    const proxyElement =
-        this.prompt.attachAndStartEditing(this.editableDiv, this.editingCommitted.bind(this, originalContent));
-    proxyElement.classList.add('property-prompt');
-
-    const selection = this.listItemElement.getComponentSelection();
+  get editing(): boolean {
+    return this.#editing;
+  }
 
-    if (selection) {
-      selection.selectAllChildren(this.editableDiv);
+  private startEditing(): void {
+    if (!this.readOnly) {
+      this.#editing = true;
+      this.performUpdate();
     }
-    proxyElement.addEventListener('keydown', this.promptKeyDown.bind(this, originalContent), false);
   }
 
   private editingEnded(): void {
-    if (this.prompt) {
-      this.prompt.detach();
-      delete this.prompt;
-    }
-    this.editableDiv.remove();
+    this.#completions = [];
+    this.#editing = false;
+    this.performUpdate();
     this.updateExpandable();
-    this.listItemElement.scrollLeft = 0;
-    this.listItemElement.classList.remove('editing-sub-part');
     this.select();
   }
 
-  private editingCancelled(): void {
-    this.valueElement.classList.remove('hidden');
-    this.editingEnded();
-  }
-
-  private async editingCommitted(originalContent: string): Promise<void> {
-    const userInput = this.prompt ? this.prompt.text() : '';
-    if (userInput === originalContent) {
-      this.editingCancelled();  // nothing changed, so cancel
-      return;
-    }
-
+  private async editingCommitted(newContent: string): Promise<void> {
     this.editingEnded();
-    await this.applyExpression(userInput);
+    await this.applyExpression(newContent);
   }
 
   private promptKeyDown(originalContent: string, event: Event): void {
@@ -1399,7 +1354,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     if (keyboardEvent.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
       keyboardEvent.consume();
-      this.editingCancelled();
+      this.editingEnded();
       return;
     }
   }
@@ -1790,10 +1745,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;
@@ -1801,7 +1756,7 @@ export class ExpandableTextPropertyValue {
     this.#render();
   }
 
-  get element(): HTMLElement {
+  get element(): DocumentFragment {
     return this.#element;
   }