chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -7,13 +7,15 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as AiCodeGeneration from '../../../models/ai_code_generation/ai_code_generation.js';
-import * as PanelCommon from '../../../panels/common/common.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import {AccessiblePlaceholder} from './AccessiblePlaceholder.js';
+import type {DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
 import {AiCodeGenerationParser} from './AiCodeGenerationParser.js';
+import {AiCodeGenerationTeaser, AiCodeGenerationTeaserDisplayState, PROMOTION_ID} from './AiCodeGenerationTeaser.js';
+import {AiCodeGenerationUpgradeDialog} from './AiCodeGenerationUpgradeDialog.js';
 import {
   acceptAiAutoCompleteSuggestion,
   aiAutoCompleteSuggestion,
@@ -47,7 +49,7 @@ export interface AiCodeGenerationConfig {
   onRequestTriggered: () => void;
   onResponseReceived: () => void;
   disclaimerTooltipId: string;
-  disclaimerTextVariant: PanelCommon.DisclaimerTextVariant;
+  disclaimerTextVariant: DisclaimerTextVariant;
 }
 
 export class AiCodeGenerationProvider {
@@ -60,7 +62,7 @@ export class AiCodeGenerationProvider {
       Common.Settings.Settings.instance().createSetting('ai-code-generation-onboarding-completed', false);
   #aiCodeGenerationUsedSetting = Common.Settings.Settings.instance().createSetting('ai-code-generation-used', false);
   #generationTeaserCompartment = new CodeMirror.Compartment();
-  #generationTeaser: PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser;
+  #generationTeaser: AiCodeGenerationTeaser;
   #editor?: TextEditor;
   #aiCodeGenerationConfig: AiCodeGenerationConfig;
   #aiCodeGeneration?: AiCodeGeneration.AiCodeGeneration.AiCodeGeneration;
@@ -83,7 +85,7 @@ export class AiCodeGenerationProvider {
     if (!AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationAvailable()) {
       throw new Error('AI code generation feature is not available.');
     }
-    this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser();
+    this.#generationTeaser = new AiCodeGenerationTeaser();
     this.#generationTeaser.disclaimerTooltipId = aiCodeGenerationConfig.disclaimerTooltipId;
     this.#generationTeaser.disclaimerTextVariant = aiCodeGenerationConfig.disclaimerTextVariant;
     this.#aiCodeGenerationConfig = aiCodeGenerationConfig;
@@ -186,8 +188,8 @@ export class AiCodeGenerationProvider {
             this.#dismissTeaserAndSuggestion();
             return true;
           }
-          const generationTeaserIsLoading = this.#generationTeaser.displayState ===
-              PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+          const generationTeaserIsLoading =
+              this.#generationTeaser.displayState === AiCodeGenerationTeaserDisplayState.LOADING;
           if (this.#generationTeaser.isShowing() && generationTeaserIsLoading) {
             this.#controller.abort();
             this.#controller = new AbortController();
@@ -248,13 +250,13 @@ export class AiCodeGenerationProvider {
 
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
-    const resolved = await PanelCommon.AiCodeGenerationUpgradeDialog.show({noLogging});
+    const resolved = await AiCodeGenerationUpgradeDialog.show({noLogging});
     this.#aiCodeGenerationOnboardingCompletedSetting.set(resolved);
     return resolved;
   }
 
   #dismissTeaserAndSuggestion(): void {
-    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
+    this.#generationTeaser.displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
     this.#editor?.dispatch({
       effects: [
         setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED),
@@ -305,18 +307,15 @@ export class AiCodeGenerationProvider {
     if (currentTeaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
       return;
     }
-    if (this.#generationTeaser.displayState ===
-        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING) {
+    if (this.#generationTeaser.displayState === AiCodeGenerationTeaserDisplayState.LOADING) {
       this.#controller.abort();
       this.#controller = new AbortController();
       this.#dismissTeaserAndSuggestion();
       return;
     }
-    if (this.#generationTeaser.displayState ===
-        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED) {
+    if (this.#generationTeaser.displayState === AiCodeGenerationTeaserDisplayState.GENERATED) {
       update.view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
-      this.#generationTeaser.displayState =
-          PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.DISCOVERY;
+      this.#generationTeaser.displayState = AiCodeGenerationTeaserDisplayState.DISCOVERY;
       return;
     }
   }
@@ -342,7 +341,7 @@ export class AiCodeGenerationProvider {
       return;
     }
 
-    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+    this.#generationTeaser.displayState = AiCodeGenerationTeaserDisplayState.LOADING;
     try {
       const startTime = performance.now();
       this.#aiCodeGenerationConfig.onRequestTriggered();
@@ -386,8 +385,7 @@ export class AiCodeGenerationProvider {
           setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE),
         ],
       });
-      this.#generationTeaser.displayState =
-          PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED;
+      this.#generationTeaser.displayState = AiCodeGenerationTeaserDisplayState.GENERATED;
 
       AiCodeGeneration.debugLog('Suggestion dispatched to the editor', suggestionText);
       const citations = topSample.attributionMetadata?.citations ?? [];
@@ -409,8 +407,7 @@ export class AiCodeGenerationProvider {
   }
 }
 
-function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser):
-    CodeMirror.Extension {
+function aiCodeGenerationTeaserExtension(teaser: AiCodeGenerationTeaser): CodeMirror.Extension {
   return CodeMirror.ViewPlugin.fromClass(class {
     #view: CodeMirror.EditorView;
 
@@ -436,8 +433,7 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
       const line = this.#view.state.doc.lineAt(cursorPosition);
 
       const isEmptyLine = line.length === 0;
-      const canShowDiscoveryState =
-          UI.UIUtils.PromotionManager.instance().canShowPromotion(PanelCommon.AiCodeGenerationTeaser.PROMOTION_ID);
+      const canShowDiscoveryState = UI.UIUtils.PromotionManager.instance().canShowPromotion(PROMOTION_ID);
 
       if ((isEmptyLine && canShowDiscoveryState)) {
         return CodeMirror.Decoration.set([
@@ -461,17 +457,17 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
     #updateTeaserState(state: CodeMirror.EditorState): void {
       // Only handle non loading and non generated states, as updates during and after generation are handled by
       // #abortOrDismissGenerationDuringUpdate in AiCodeGenerationProvider
-      if (teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING ||
-          teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED) {
+      if (teaser.displayState === AiCodeGenerationTeaserDisplayState.LOADING ||
+          teaser.displayState === AiCodeGenerationTeaserDisplayState.GENERATED) {
         return;
       }
       const cursorPosition = state.selection.main.head;
       const line = state.doc.lineAt(cursorPosition);
       const isEmptyLine = line.length === 0;
       if (isEmptyLine) {
-        teaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.DISCOVERY;
+        teaser.displayState = AiCodeGenerationTeaserDisplayState.DISCOVERY;
       } else {
-        teaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
+        teaser.displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
       }
     }
   }, {
@@ -497,7 +493,7 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
       },
       keydown(event: KeyboardEvent): boolean {
         if (!UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) ||
-            teaser.displayState !== PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER) {
+            teaser.displayState !== AiCodeGenerationTeaserDisplayState.TRIGGER) {
           return false;
         }
         if (event.key === '.') {

package/front_end/{panels/common → ui/components/text_editor}/AiCodeGenerationTeaser.ts

@@ -1,16 +1,16 @@
 // Copyright 2025 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import '../../ui/components/tooltips/tooltips.js';
-
-import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import '../tooltips/tooltips.js';
+
+import * as Common from '../../../core/common/common.js';
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Root from '../../../core/root/root.js';
+import * as UI from '../../legacy/legacy.js';
+import {Directives, html, nothing, render} from '../../lit/lit.js';
+import * as VisualLogging from '../../visual_logging/visual_logging.js';
+import * as Buttons from '../buttons/buttons.js';
 
 import type {DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
 import styles from './aiCodeGenerationTeaser.css.js';

package/front_end/{panels/common → ui/components/text_editor}/AiCodeGenerationUpgradeDialog.ts

@@ -3,11 +3,11 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as UI from '../../legacy/legacy.js';
+import * as Lit from '../../lit/lit.js';
+import * as Buttons from '../buttons/buttons.js';
 
 import styles from './aiCodeGenerationUpgradeDialog.css.js';
 

package/front_end/ui/components/text_editor/text_editor.ts

@@ -3,9 +3,13 @@
 // found in the LICENSE file.
 
 export * as AccessiblePlaceholder from './AccessiblePlaceholder.js';
+export * as AiCodeCompletionDisclaimer from './AiCodeCompletionDisclaimer.js';
 export * as AiCodeCompletionProvider from './AiCodeCompletionProvider.js';
+export * as AiCodeCompletionTeaser from './AiCodeCompletionTeaser.js';
 export * as AiCodeGenerationParser from './AiCodeGenerationParser.js';
 export * as AiCodeGenerationProvider from './AiCodeGenerationProvider.js';
+export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
+export * as AiCodeGenerationUpgradeDialog from './AiCodeGenerationUpgradeDialog.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';
 export * as ExecutionPositionHighlighter from './ExecutionPositionHighlighter.js';

package/front_end/ui/legacy/Toolbar.ts

@@ -1431,7 +1431,7 @@ export class ToolbarSettingCheckbox extends ToolbarCheckbox {
       setting: Common.Settings.Setting<boolean>, tooltip?: Common.UIString.LocalizedString,
       alternateTitle?: Common.UIString.LocalizedString) {
     const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(setting.descriptor());
-    const title = alternateTitle || uiDescriptor?.title?.() || setting.title();
+    const title = alternateTitle ?? uiDescriptor?.title ?? ('' as Common.UIString.LocalizedString);
     super(title, tooltip, undefined, setting.name);
     bindCheckbox(this.element as CheckboxLabel, setting);
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -1643,27 +1643,6 @@ export class ConfirmDialog {
   }
 }
 
-export interface RenderedObject {
-  element: HTMLElement;
-  forceSelect(): void;
-}
-
-export abstract class Renderer {
-  abstract render(object: Object, options?: Options): Promise<RenderedObject|null>;
-
-  static async render(object: Object, options?: Options): Promise<RenderedObject|null> {
-    if (!object) {
-      throw new Error('Can\'t render ' + object);
-    }
-    const extension = getApplicableRegisteredRenderers(object)[0];
-    if (!extension) {
-      return null;
-    }
-    const renderer = await extension.loadRenderer();
-    return await renderer.render(object, options);
-  }
-}
-
 export function formatTimestamp(timestamp: number, full: boolean): string {
   const date = new Date(timestamp);
   const yymmdd = date.getFullYear() + '-' + leadZero(date.getMonth() + 1, 2) + '-' + leadZero(date.getDate(), 2);
@@ -1677,15 +1656,6 @@ export function formatTimestamp(timestamp: number, full: boolean): string {
   }
 }
 
-export interface Options {
-  title?: string|Element;
-  editable?: boolean;
-  /**
-   * Should the resulting object be expanded.
-   */
-  expand?: boolean;
-}
-
 export const isScrolledToBottom = (element: Element): boolean => {
   // This code works only for 0-width border.
   // The scrollTop, clientHeight and scrollHeight are computed in double values internally.
@@ -1749,32 +1719,6 @@ export const deepElementFromEvent = (ev: Event): Node|null => {
   return root ? deepElementFromPoint((root as Document | ShadowRoot), event.pageX, event.pageY) : null;
 };
 
-const registeredRenderers: RendererRegistration[] = [];
-
-export function registerRenderer(registration: RendererRegistration): void {
-  registeredRenderers.push(registration);
-}
-export function getApplicableRegisteredRenderers(object: Object): RendererRegistration[] {
-  return registeredRenderers.filter(isRendererApplicableToContextTypes);
-
-  function isRendererApplicableToContextTypes(rendererRegistration: RendererRegistration): boolean {
-    if (!rendererRegistration.contextTypes) {
-      return true;
-    }
-    for (const contextType of rendererRegistration.contextTypes()) {
-      if (object instanceof contextType) {
-        return true;
-      }
-    }
-    return false;
-  }
-}
-
-export interface RendererRegistration {
-  loadRenderer: () => Promise<Renderer>;
-  contextTypes: () => Array<Platform.Constructor.ConstructorOrAbstract<unknown>>;
-}
-
 export interface ConfirmDialogOptions {
   okButtonLabel?: string;
   cancelButtonLabel?: string;

package/front_end/ui/legacy/View.ts

@@ -61,10 +61,16 @@ export class SimpleView<ContentTypeT extends HTMLElement|DocumentFragment = HTML
    * @param options the settings for the resulting view.
    * @throws TypeError - if `options.viewId` is not in extended kebab case.
    */
-  constructor(options: SimpleViewOptions<ContentTypeT>) {
-    super(options);
-    this.#title = options.title;
-    this.#viewId = options.viewId;
+  constructor(options: SimpleViewOptions<ContentTypeT>);
+  constructor(element: HTMLElement, options: SimpleViewOptions<ContentTypeT>);
+  constructor(elementOrOptions: HTMLElement|SimpleViewOptions<ContentTypeT>,
+              options?: SimpleViewOptions<ContentTypeT>) {
+    // @ts-expect-error
+    super(elementOrOptions, options);
+    const optionsObj =
+        (elementOrOptions instanceof HTMLElement ? options : elementOrOptions) as SimpleViewOptions<ContentTypeT>;
+    this.#title = optionsObj.title;
+    this.#viewId = optionsObj.viewId;
     if (!Platform.StringUtilities.isExtendedKebabCase(this.#viewId)) {
       throw new TypeError(`Invalid view ID '${this.#viewId}'`);
     }

package/front_end/ui/legacy/Widget.ts

@@ -378,6 +378,8 @@ customElements.define('devtools-widget', WidgetElement);
 
 export class WidgetDirective extends Lit.Directive.Directive {
   #partType: Lit.Directive.PartType;
+  #lastWidgetClass?: unknown;
+  #lastKey?: unknown;
 
   constructor(partInfo: Lit.Directive.PartInfo) {
     super(partInfo);
@@ -420,13 +422,20 @@ export class WidgetDirective extends Lit.Directive.Directive {
     if (this.#partType === Lit.Directive.PartType.ELEMENT) {
       return Lit.nothing;
     }
+    if (this.#lastWidgetClass !== widgetClass) {
+      this.#lastWidgetClass = widgetClass;
+      this.#lastKey = Widget.isPrototypeOf(widgetClass) ? widgetClass : widgetClass.toString();
+    }
     // We use `repeat` to force Lit to recreate the `<devtools-widget>` DOM node when the `widgetClass` changes.
     // If we didn't use `repeat` and used `html` directly, Lit would reuse the same `<devtools-widget>` instance
     // even if `widgetClass` changed (for example, in a ternary operator `condition ? widget(A) : widget(B)`).
     // This is because the template string is the same, so Lit reuses the DOM node and only updates `.widgetConfig`,
     // which does not properly recreate the widget instance.
+    // We use `#lastKey` (and stringify factory functions) instead of just using `widgetClass` as the key
+    // so that we intentionally ignore reference changes for identical inline factories. This prevents accidental
+    // recreation of the DOM node on every render when an anonymous inline arrow function is passed.
     return Lit.Directives.repeat(
-        [widgetClass], () => widgetClass,
+        [widgetClass], () => this.#lastKey,
         () => html`<devtools-widget ${widget<F, ParamKeys>(widgetClass, widgetParams)}></devtools-widget>`);
   }
 }

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -9,6 +9,7 @@ import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
 import {createIcon, Icon} from '../../../../ui/kit/kit.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
 import * as UI from '../../legacy.js';
@@ -241,7 +242,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.setVisible(true);
     this.hideNoContrastInfoAvailableMessage();
 
-    const isAPCAEnabled = Common.Settings.Settings.instance().moduleSetting('apca').get();
+    const isAPCAEnabled = Common.Settings.Settings.instance().resolve(SDK.SDKSettings.apcaSettingDescriptor).get();
 
     const fgColor = this.contrastInfo.color();
     const bgColor = this.contrastInfo.bgColor();

package/front_end/ui/legacy/components/color_picker/ContrastOverlay.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../../core/common/common.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 
 import {type ContrastInfo, Events} from './ContrastInfo.js';
@@ -24,7 +25,7 @@ export class ContrastOverlay {
 
     this.contrastRatioSVG = UI.UIUtils.createSVGChild(colorElement, 'svg', 'spectrum-contrast-container fill');
     this.contrastRatioLines = new Map();
-    if (Common.Settings.Settings.instance().moduleSetting('apca').get()) {
+    if (Common.Settings.Settings.instance().resolve(SDK.SDKSettings.apcaSettingDescriptor).get()) {
       this.contrastRatioLines.set(
           'APCA', UI.UIUtils.createSVGChild(this.contrastRatioSVG, 'path', 'spectrum-contrast-line'));
     } else {
@@ -49,7 +50,7 @@ export class ContrastOverlay {
     if (!this.visible || this.contrastInfo.isNull()) {
       return;
     }
-    if (Common.Settings.Settings.instance().moduleSetting('apca').get() &&
+    if (Common.Settings.Settings.instance().resolve(SDK.SDKSettings.apcaSettingDescriptor).get() &&
         this.contrastInfo.contrastRatioAPCA() === null) {
       return;
     }
@@ -90,7 +91,7 @@ export class ContrastRatioLineBuilder {
   }
 
   drawContrastRatioLine(width: number, height: number, level: string): string|null {
-    const isAPCA = Common.Settings.Settings.instance().moduleSetting('apca').get();
+    const isAPCA = Common.Settings.Settings.instance().resolve(SDK.SDKSettings.apcaSettingDescriptor).get();
     const requiredContrast =
         isAPCA ? this.contrastInfo.contrastRatioAPCAThreshold() : this.contrastInfo.contrastRatioThreshold(level);
     if (!width || !height || requiredContrast === null) {
@@ -139,7 +140,7 @@ export class ContrastRatioLineBuilder {
               Common.ColorUtils.blendColors(Common.Color.Legacy.fromHSVA(candidateHSVA).rgba(), bgRGBA));
         };
 
-    if (Common.Settings.Settings.instance().moduleSetting('apca').get()) {
+    if (Common.Settings.Settings.instance().resolve(SDK.SDKSettings.apcaSettingDescriptor).get()) {
       candidateLuminance = (candidateHSVA: Common.ColorUtils.Color4D) => {
         return Common.ColorUtils.luminanceAPCA(
             Common.ColorUtils.blendColors(Common.Color.Legacy.fromHSVA(candidateHSVA).rgba(), bgRGBA));

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

@@ -8,13 +8,14 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import {createIcon, type Icon} from '../../../kit/kit.js';
+import {render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {sanitizeStyle} from './CSSStyleSanitizer.js';
 import customPreviewComponentStyles from './customPreviewComponent.css.js';
 import {
+  defaultObjectPresentation as defaultObjectPresentationTemplate,
   ObjectPropertiesMode,
-  ObjectPropertiesSection,
   ObjectPropertiesSectionsTreeOutline,
   ObjectPropertyTreeElement,
   ObjectTree,
@@ -129,7 +130,7 @@ export class CustomPreviewSection {
       return (new CustomPreviewSection(remoteObject)).element();
     }
 
-    const sectionElement = ObjectPropertiesSection.defaultObjectPresentation(remoteObject);
+    const sectionElement = defaultObjectPresentation(remoteObject);
     sectionElement.classList.toggle('custom-expandable-section-standard-section', remoteObject.hasChildren);
     return sectionElement;
   }
@@ -239,7 +240,14 @@ export class CustomPreviewComponent {
     if (this.element.shadowRoot) {
       this.element.shadowRoot.textContent = '';
       this.customPreviewSection = null;
-      this.element.shadowRoot.appendChild(ObjectPropertiesSection.defaultObjectPresentation(this.object));
+      this.element.shadowRoot.appendChild(defaultObjectPresentation(this.object));
     }
   }
 }
+
+function defaultObjectPresentation(object: SDK.RemoteObject.RemoteObject): Element {
+  const element = document.createElement('span');
+  // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+  render(defaultObjectPresentationTemplate(object), element);
+  return element;
+}