chrome-devtools-frontend 1.0.1675430 → 1.0.1676824

package/front_end/panels/screencast/ScreencastView.ts

@@ -214,7 +214,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             if (el instanceof HTMLCanvasElement) {
               output.focusCanvas = (): void => el.focus();
               canvasElement = el;
-              ScreencastView.repaintScreencastCanvas(el, input);
+              repaintScreencastCanvas(el, input);
             }
           })}></canvas>
         <div
@@ -225,7 +225,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           })}
           ${ref(el => {
             if (el instanceof HTMLElement && canvasElement && input.elementTitleData?.visible && !el.classList.contains('hidden')) {
-              ScreencastView.clampTooltipPosition(canvasElement, el, input.highlightModel);
+              clampTooltipPosition(canvasElement, el, input.highlightModel);
             }
         })}>
           <span class="screencast-tag-name">${input.elementTitleData?.tagName ?? nothing}</span>
@@ -239,6 +239,141 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   // clang-format on
 };
 
+function repaintScreencastCanvas(el: HTMLCanvasElement, input: CanvasRenderingInput): void {
+  const context = el.getContext('2d');
+  if (!context) {
+    return;
+  }
+
+  const model = input.highlightModel;
+  const config = input.highlightConfig;
+
+  const canvasWidth = el.getBoundingClientRect().width;
+  const canvasHeight = el.getBoundingClientRect().height;
+  el.width = window.devicePixelRatio * canvasWidth;
+  el.height = window.devicePixelRatio * canvasHeight;
+
+  context.save();
+  context.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+  if (model && config) {
+    context.save();
+    const quads = [];
+    const isTransparent = (color: Protocol.DOM.RGBA): boolean => Boolean(color.a && color.a === 0);
+    if (model.content && config.contentColor && !isTransparent(config.contentColor)) {
+      quads.push({quad: model.content, color: config.contentColor});
+    }
+    if (model.padding && config.paddingColor && !isTransparent(config.paddingColor)) {
+      quads.push({quad: model.padding, color: config.paddingColor});
+    }
+    if (model.border && config.borderColor && !isTransparent(config.borderColor)) {
+      quads.push({quad: model.border, color: config.borderColor});
+    }
+    if (model.margin && config.marginColor && !isTransparent(config.marginColor)) {
+      quads.push({quad: model.margin, color: config.marginColor});
+    }
+
+    for (let i = quads.length - 1; i > 0; --i) {
+      drawOutlinedQuadWithClip(context, quads[i].quad, quads[i - 1].quad, quads[i].color);
+    }
+    if (quads.length > 0) {
+      drawOutlinedQuad(context, quads[0].quad, quads[0].color);
+    }
+    context.globalCompositeOperation = 'destination-over';
+  }
+
+  if (input.screencastImage) {
+    context.drawImage(input.screencastImage, 0, input.screenOffsetTop * input.screenZoom,
+                      input.screencastImage.naturalWidth * input.imageZoom,
+                      input.screencastImage.naturalHeight * input.imageZoom);
+  }
+  context.restore();
+}
+
+function cssColor(color: Protocol.DOM.RGBA): string {
+  if (!color) {
+    return 'transparent';
+  }
+  return Common.Color.Legacy.fromRGBA([color.r, color.g, color.b, color.a !== undefined ? color.a : 1])
+             .asString(Common.Color.Format.RGBA) ||
+      '';
+}
+
+function quadToPath(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad): CanvasRenderingContext2D {
+  context.beginPath();
+  context.moveTo(quad[0], quad[1]);
+  context.lineTo(quad[2], quad[3]);
+  context.lineTo(quad[4], quad[5]);
+  context.lineTo(quad[6], quad[7]);
+  context.closePath();
+  return context;
+}
+
+function drawOutlinedQuad(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad,
+                          fillColor: Protocol.DOM.RGBA): void {
+  context.save();
+  context.lineWidth = 2;
+  quadToPath(context, quad).clip();
+  context.fillStyle = cssColor(fillColor);
+  context.fill();
+  context.restore();
+}
+
+function drawOutlinedQuadWithClip(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad,
+                                  clipQuad: Protocol.DOM.Quad, fillColor: Protocol.DOM.RGBA): void {
+  context.fillStyle = cssColor(fillColor);
+  context.save();
+  context.lineWidth = 0;
+  quadToPath(context, quad).fill();
+  context.globalCompositeOperation = 'destination-out';
+  context.fillStyle = 'red';
+  quadToPath(context, clipQuad).fill();
+  context.restore();
+}
+
+function clampTooltipPosition(canvas: HTMLCanvasElement, titleElement: HTMLElement,
+                              model?: Protocol.DOM.BoxModel|null): void {
+  if (!model) {
+    return;
+  }
+  const canvasWidth = canvas.getBoundingClientRect().width;
+  const canvasHeight = canvas.getBoundingClientRect().height;
+  const titleWidth = titleElement.offsetWidth;
+  const titleHeight = titleElement.offsetHeight;
+
+  const anchorTop = model.margin[1];
+  const anchorBottom = model.margin[7];
+
+  const arrowHeight = 7;
+  let arrowDirection: 'up'|'down'|undefined;
+
+  let boxX = Math.max(2, model.margin[0]);
+  if (boxX + titleWidth > canvasWidth) {
+    boxX = canvasWidth - titleWidth - 2;
+  }
+
+  let boxY;
+  if (anchorTop > canvasHeight) {
+    boxY = canvasHeight - titleHeight - arrowHeight;
+    arrowDirection = 'down';
+  } else if (anchorBottom < 0) {
+    boxY = arrowHeight;
+    arrowDirection = 'up';
+  } else if (anchorBottom + titleHeight + arrowHeight < canvasHeight) {
+    boxY = anchorBottom + arrowHeight - 4;
+    arrowDirection = 'up';
+  } else if (anchorTop - titleHeight - arrowHeight > 0) {
+    boxY = anchorTop - titleHeight - arrowHeight + 3;
+    arrowDirection = 'down';
+  } else {
+    boxY = arrowHeight;
+  }
+
+  titleElement.style.top = `${boxY}px`;
+  titleElement.style.left = `${boxX}px`;
+  titleElement.classList.toggle('arrow-up', arrowDirection === 'up');
+  titleElement.classList.toggle('arrow-down', arrowDirection === 'down');
+}
 export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel.Highlighter {
   readonly #view: View;
   #viewOutput: ViewOutput;
@@ -373,6 +508,8 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
                                                  this.requestNavigationHistoryEvent, this);
       this.resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.CachedResourcesLoaded,
                                                  this.requestNavigationHistoryEvent, this);
+      this.resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.FrameNavigatedWithinDocument,
+                                                 this.onFrameNavigated, this);
     }
   }
 
@@ -653,98 +790,6 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
     return model;
   }
 
-  static repaintScreencastCanvas(el: HTMLCanvasElement, input: CanvasRenderingInput): void {
-    const context = el.getContext('2d');
-    if (!context) {
-      return;
-    }
-
-    const model = input.highlightModel;
-    const config = input.highlightConfig;
-
-    const canvasWidth = el.getBoundingClientRect().width;
-    const canvasHeight = el.getBoundingClientRect().height;
-    el.width = window.devicePixelRatio * canvasWidth;
-    el.height = window.devicePixelRatio * canvasHeight;
-
-    context.save();
-    context.scale(window.devicePixelRatio, window.devicePixelRatio);
-
-    if (model && config) {
-      context.save();
-      const quads = [];
-      const isTransparent = (color: Protocol.DOM.RGBA): boolean => Boolean(color.a && color.a === 0);
-      if (model.content && config.contentColor && !isTransparent(config.contentColor)) {
-        quads.push({quad: model.content, color: config.contentColor});
-      }
-      if (model.padding && config.paddingColor && !isTransparent(config.paddingColor)) {
-        quads.push({quad: model.padding, color: config.paddingColor});
-      }
-      if (model.border && config.borderColor && !isTransparent(config.borderColor)) {
-        quads.push({quad: model.border, color: config.borderColor});
-      }
-      if (model.margin && config.marginColor && !isTransparent(config.marginColor)) {
-        quads.push({quad: model.margin, color: config.marginColor});
-      }
-
-      for (let i = quads.length - 1; i > 0; --i) {
-        ScreencastView.drawOutlinedQuadWithClip(context, quads[i].quad, quads[i - 1].quad, quads[i].color);
-      }
-      if (quads.length > 0) {
-        ScreencastView.drawOutlinedQuad(context, quads[0].quad, quads[0].color);
-      }
-      context.globalCompositeOperation = 'destination-over';
-    }
-
-    if (input.screencastImage) {
-      context.drawImage(input.screencastImage, 0, input.screenOffsetTop * input.screenZoom,
-                        input.screencastImage.naturalWidth * input.imageZoom,
-                        input.screencastImage.naturalHeight * input.imageZoom);
-    }
-    context.restore();
-  }
-
-  private static cssColor(color: Protocol.DOM.RGBA): string {
-    if (!color) {
-      return 'transparent';
-    }
-    return Common.Color.Legacy.fromRGBA([color.r, color.g, color.b, color.a !== undefined ? color.a : 1])
-               .asString(Common.Color.Format.RGBA) ||
-        '';
-  }
-
-  private static quadToPath(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad): CanvasRenderingContext2D {
-    context.beginPath();
-    context.moveTo(quad[0], quad[1]);
-    context.lineTo(quad[2], quad[3]);
-    context.lineTo(quad[4], quad[5]);
-    context.lineTo(quad[6], quad[7]);
-    context.closePath();
-    return context;
-  }
-
-  private static drawOutlinedQuad(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad,
-                                  fillColor: Protocol.DOM.RGBA): void {
-    context.save();
-    context.lineWidth = 2;
-    ScreencastView.quadToPath(context, quad).clip();
-    context.fillStyle = ScreencastView.cssColor(fillColor);
-    context.fill();
-    context.restore();
-  }
-
-  private static drawOutlinedQuadWithClip(context: CanvasRenderingContext2D, quad: Protocol.DOM.Quad,
-                                          clipQuad: Protocol.DOM.Quad, fillColor: Protocol.DOM.RGBA): void {
-    context.fillStyle = ScreencastView.cssColor(fillColor);
-    context.save();
-    context.lineWidth = 0;
-    ScreencastView.quadToPath(context, quad).fill();
-    context.globalCompositeOperation = 'destination-out';
-    context.fillStyle = 'red';
-    ScreencastView.quadToPath(context, clipQuad).fill();
-    context.restore();
-  }
-
   private drawElementTitle(): void {
     if (!this.node) {
       if (this.#elementTitleData.visible) {
@@ -773,50 +818,6 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
     }
   }
 
-  static clampTooltipPosition(canvas: HTMLCanvasElement, titleElement: HTMLElement,
-                              model?: Protocol.DOM.BoxModel|null): void {
-    if (!model) {
-      return;
-    }
-    const canvasWidth = canvas.getBoundingClientRect().width;
-    const canvasHeight = canvas.getBoundingClientRect().height;
-    const titleWidth = titleElement.offsetWidth;
-    const titleHeight = titleElement.offsetHeight;
-
-    const anchorTop = model.margin[1];
-    const anchorBottom = model.margin[7];
-
-    const arrowHeight = 7;
-    let arrowDirection: 'up'|'down'|undefined;
-
-    let boxX = Math.max(2, model.margin[0]);
-    if (boxX + titleWidth > canvasWidth) {
-      boxX = canvasWidth - titleWidth - 2;
-    }
-
-    let boxY;
-    if (anchorTop > canvasHeight) {
-      boxY = canvasHeight - titleHeight - arrowHeight;
-      arrowDirection = 'down';
-    } else if (anchorBottom < 0) {
-      boxY = arrowHeight;
-      arrowDirection = 'up';
-    } else if (anchorBottom + titleHeight + arrowHeight < canvasHeight) {
-      boxY = anchorBottom + arrowHeight - 4;
-      arrowDirection = 'up';
-    } else if (anchorTop - titleHeight - arrowHeight > 0) {
-      boxY = anchorTop - titleHeight - arrowHeight + 3;
-      arrowDirection = 'down';
-    } else {
-      boxY = arrowHeight;
-    }
-
-    titleElement.style.top = `${boxY}px`;
-    titleElement.style.left = `${boxX}px`;
-    titleElement.classList.toggle('arrow-up', arrowDirection === 'up');
-    titleElement.classList.toggle('arrow-down', arrowDirection === 'down');
-  }
-
   private viewportDimensions(): {width: number, height: number} {
     const gutterSize = 30;
     const bordersSize = BORDERS_SIZE;
@@ -848,6 +849,8 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
                                               this.requestNavigationHistoryEvent, this);
       this.resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.CachedResourcesLoaded,
                                               this.requestNavigationHistoryEvent, this);
+      this.resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigatedWithinDocument,
+                                              this.onFrameNavigated, this);
     }
   }
 
@@ -904,6 +907,13 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
     void this.requestNavigationHistory();
   }
 
+  private onFrameNavigated(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>): void {
+    const frame = event.data;
+    if (frame.isOutermostFrame()) {
+      this.requestNavigationHistoryEvent();
+    }
+  }
+
   private async requestNavigationHistory(): Promise<void> {
     const history = this.resourceTreeModel ? await this.resourceTreeModel.navigationHistory() : null;
     if (!history) {

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -20,7 +20,7 @@ const CITATIONS_TOOLTIP_ID = 'sources-ai-code-completion-citations-tooltip';
 
 export class AiCodeCompletionPlugin extends Plugin {
   #editor?: TextEditor.TextEditor.TextEditor;
-  #aiCodeCompletionDisclaimer?: PanelCommon.AiCodeCompletionDisclaimer;
+  #aiCodeCompletionDisclaimer?: TextEditor.AiCodeCompletionDisclaimer.AiCodeCompletionDisclaimer;
   #aiCodeCompletionDisclaimerContainer = document.createElement('div');
   #aiCodeCompletionDisclaimerToolbarItem = new UI.Toolbar.ToolbarItem(this.#aiCodeCompletionDisclaimerContainer);
   #aiCodeCompletionCitationsToolbar?: PanelCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
@@ -103,7 +103,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#aiCodeCompletionDisclaimer) {
       return;
     }
-    this.#aiCodeCompletionDisclaimer = new PanelCommon.AiCodeCompletionDisclaimer();
+    this.#aiCodeCompletionDisclaimer = new TextEditor.AiCodeCompletionDisclaimer.AiCodeCompletionDisclaimer();
     this.#aiCodeCompletionDisclaimer.disclaimerTooltipId = DISCLAIMER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.spinnerTooltipId = SPINNER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.disclaimerTextVariant = 'sources';

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -260,9 +260,6 @@ export class DebuggerPlugin extends Plugin {
 
     this.ignoreListInfobar = null;
     this.showIgnoreListInfobarIfNeeded();
-    for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
-      scriptFile.checkMapping();
-    }
   }
 
   override editorExtension(): CodeMirror.Extension {
@@ -586,26 +583,12 @@ export class DebuggerPlugin extends Plugin {
   }
 
   private workingCopyChanged(): void {
-    if (!this.scriptFileForDebuggerModel.size) {
-      this.setMuted(this.uiSourceCode.isDirty());
-    }
+    this.setMuted(this.uiSourceCode.isDirty());
   }
 
   private workingCopyCommitted(): void {
     this.scriptsPanel.updateLastModificationTime();
-    if (!this.scriptFileForDebuggerModel.size) {
-      this.setMuted(false);
-    }
-  }
-
-  private didMergeToVM(): void {
-    if (this.consistentScripts()) {
-      this.setMuted(false);
-    }
-  }
-
-  private didDivergeFromVM(): void {
-    this.setMuted(true);
+    this.setMuted(false);
   }
 
   private setMuted(value: boolean): void {
@@ -622,15 +605,6 @@ export class DebuggerPlugin extends Plugin {
     }
   }
 
-  private consistentScripts(): boolean {
-    for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
-      if (scriptFile.hasDivergedFromVM() || scriptFile.isMergingToVM()) {
-        return false;
-      }
-    }
-    return true;
-  }
-
   private isIdentifier(tokenType: string): boolean {
     return tokenType === 'VariableName' || tokenType === 'VariableDefinition' || tokenType === 'PropertyName' ||
         tokenType === 'PropertyDefinition';
@@ -1333,11 +1307,6 @@ export class DebuggerPlugin extends Plugin {
     if (uiLocation.uiSourceCode !== this.uiSourceCode || this.muted) {
       return;
     }
-    for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
-      if (scriptFile.isDivergingFromVM() || scriptFile.isMergingToVM()) {
-        return;
-      }
-    }
     // These tend to arrive in bursts, so debounce them
     window.clearTimeout(this.refreshBreakpointsTimeout);
     this.refreshBreakpointsTimeout = window.setTimeout(() => this.refreshBreakpoints(), 50);
@@ -1411,28 +1380,13 @@ export class DebuggerPlugin extends Plugin {
   }
 
   private updateScriptFile(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
-    const oldScriptFile = this.scriptFileForDebuggerModel.get(debuggerModel);
+    this.scriptFileForDebuggerModel.delete(debuggerModel);
     const newScriptFile = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().scriptFile(
         this.uiSourceCode, debuggerModel);
-    this.scriptFileForDebuggerModel.delete(debuggerModel);
-    if (oldScriptFile) {
-      oldScriptFile.removeEventListener(
-          Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_MERGE_TO_VM, this.didMergeToVM, this);
-      oldScriptFile.removeEventListener(
-          Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_DIVERGE_FROM_VM, this.didDivergeFromVM, this);
-      if (this.muted && !this.uiSourceCode.isDirty() && this.consistentScripts()) {
-        this.setMuted(false);
-      }
-    }
     if (!newScriptFile) {
       return;
     }
     this.scriptFileForDebuggerModel.set(debuggerModel, newScriptFile);
-    newScriptFile.addEventListener(
-        Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_MERGE_TO_VM, this.didMergeToVM, this);
-    newScriptFile.addEventListener(
-        Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_DIVERGE_FROM_VM, this.didDivergeFromVM, this);
-    newScriptFile.checkMapping();
 
     void newScriptFile.missingSymbolFiles().then(resources => {
       if (resources) {
@@ -1714,12 +1668,6 @@ export class DebuggerPlugin extends Plugin {
     if (this.sourceMapInfobar) {
       this.sourceMapInfobar.dispose();
     }
-    for (const script of this.scriptFileForDebuggerModel.values()) {
-      script.removeEventListener(
-          Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_MERGE_TO_VM, this.didMergeToVM, this);
-      script.removeEventListener(
-          Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_DIVERGE_FROM_VM, this.didDivergeFromVM, this);
-    }
     this.scriptFileForDebuggerModel.clear();
 
     this.popoverHelper?.hidePopover();
@@ -2024,9 +1972,12 @@ class ValueDecoration extends CodeMirror.WidgetType {
         /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
         render(formatter.renderObjectPreview(value.preview), nameValuePair.createChild('span'));
       } else {
-        const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
-            value, /* wasThrown */ false, /* showPreview */ false);
-        nameValuePair.appendChild(propertyValue);
+        const propertyValue =
+            ObjectUI.ObjectPropertiesSection.renderPropertyValue(value, /* wasThrown */ false, /* showPreview */ false);
+        const fragment = document.createDocumentFragment();
+        /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+        render(propertyValue, fragment);
+        nameValuePair.appendChild(fragment);
       }
     }
     return widget;

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -89,7 +89,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     scope: SDK.DebuggerModel.ScopeChainEntry,
     objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
   }): TemplateResult => {
-    let emptyPlaceholder: Common.UIString.LocalizedString|null = null;
+    let emptyPlaceholder: Common.UIString.LocalizedString|undefined;
     if (scope.type() === Protocol.Debugger.ScopeType.Local || scope.type() === Protocol.Debugger.ScopeType.Closure) {
       emptyPlaceholder = i18nString(UIStrings.noVariables);
     }

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -171,9 +171,8 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
     this.installMessageAndDecorationListeners();
     this.updateStyle();
     // Show pretty-print toggle if file type is formattable.
-    // For editable JavaScript files, the toggle is hidden because live edit fails on
-    // large whitespace changes. For non-JS files (JSON, CSS), the toggle can be shown
-    // because they don't have this issue (fixes issue 378870233).
+    // For editable JavaScript files, the toggle is hidden. For non-JS files (JSON, CSS), the toggle can be shown
+    // (fixes issue 378870233).
     const isFormattable = FormatterActions.FORMATTABLE_MEDIA_TYPES.includes(this.contentType);
     const isEditable = Persistence.Persistence.PersistenceImpl.instance().hasEditableContent(this.#uiSourceCode);
     // Check if the MIME type is JavaScript (not the resource type, which can be wrong for file system files)
@@ -231,11 +230,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
         Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().active()) {
       return true;
     }
-    // Because live edit fails on large whitespace changes, pretty printed scripts are not editable.
-    if (this.pretty && this.#uiSourceCode.contentType().hasScripts()) {
-      return false;
-    }
-    return this.#uiSourceCode.contentType() !== Common.ResourceType.resourceTypes.Document;
+    return this.#uiSourceCode.contentType().isStyleSheet();
   }
 
   private onNetworkPersistenceChanged(): void {

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -195,8 +195,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     class="watch-expression-error value"
                     title=${ifDefined(e.exceptionDetails?.exception?.description)}
                     >${i18nString(UIStrings.notAvailable)}</span>`
-                  : ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValueWithCustomSupport(
-                    e.result.object, Boolean(e.exceptionDetails), false /* showPreview */, input.linkifier)}
+                  : ObjectUI.ObjectPropertiesSection.renderPropertyValue(
+                    e.result.object, Boolean(e.exceptionDetails), false /* showPreview */, input.linkifier,
+                    false /* isSyntheticProperty */, undefined /* variableName */,
+                    undefined /* includeNullOrUndefined */, /* useCustomPreview */ true)}
             </div>
           </div>
         </devtools-prompt>