chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/accessibility/SourceOrderView.ts

@@ -14,21 +14,21 @@ import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 
 const UIStrings = {
   /**
-   * @description Name of a tool which allows the developer to view the contents of the page in the
-   * 'source order' (the order in which the HTML elements show up in the source code). In the
-   * Accessibility panel.
+   * @description Name of a feature that allows the developer to view the contents of the page in the
+   * 'source order' (the order in which the HTML elements show up in the source code) under the
+   * Accessibility tab in the Elements panel.
    */
-  sourceOrderViewer: 'Source Order Viewer',
+  sourceOrderViewer: 'Source order viewer',
   /**
-   * @description Text in Source Order Viewer of the Accessibility panel shown when the selected node has no child elements
+   * @description Text in the source order viewer under the Accessibility tab of the Elements panel shown when the selected node has no child elements.
    */
   noSourceOrderInformation: 'No source order information available',
   /**
-   * @description Text in Source Order Viewer of the Accessibility panel shown when the selected node has many child elements
+   * @description Text in the source order viewer under the Accessibility tab of the Elements panel shown when the selected node has many child elements.
    */
   thereMayBeADelayInDisplaying: 'There may be a delay in displaying source order for elements with many children',
   /**
-   * @description Checkbox label in Source Order Viewer of the Accessibility panel. Source order
+   * @description Checkbox label in the source order viewer under the Accessibility tab of the Elements panel. Source order
    * means the order in which the HTML elements show up in the source code.
    */
   showSourceOrder: 'Show source order',

package/front_end/panels/accessibility/accessibility-meta.ts

@@ -11,11 +11,11 @@ let loadedAccessibilityModule: (typeof Accessibility|undefined);
 
 const UIStrings = {
   /**
-   * @description Text for accessibility of the web page
+   * @description Title of the Accessibility tab in the Elements panel.
    */
   accessibility: 'Accessibility',
   /**
-   * @description Command for showing the 'Accessibility' tool
+   * @description Command for showing the Accessibility tab in the Elements panel.
    */
   shoAccessibility: 'Show Accessibility',
 } as const;

package/front_end/panels/accessibility/accessibility.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as AccessibilityAnnouncementRecordingView from './AccessibilityAnnouncementRecordingView.js';
 import * as AccessibilityNodeView from './AccessibilityNodeView.js';
 import * as AccessibilitySidebarView from './AccessibilitySidebarView.js';
 import * as AccessibilityStrings from './AccessibilityStrings.js';
@@ -10,6 +11,7 @@ import * as ARIAAttributesView from './ARIAAttributesView.js';
 import * as ARIAMetadata from './ARIAMetadata.js';
 
 export {
+  AccessibilityAnnouncementRecordingView,
   AccessibilityNodeView,
   AccessibilitySidebarView,
   AccessibilityStrings,

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -543,12 +543,12 @@ function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentF
   return new AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext(focus);
 }
 
-function createStorageContext(item: AiAssistanceModel.StorageItem.StorageItem|null):
-    AiAssistanceModel.StorageAgent.StorageContext|null {
+function createStorageContext(item: AiAssistanceModel.StorageItem.StorageItem|
+                              null): AiAssistanceModel.StorageContext.StorageContext|null {
   if (!item) {
     return null;
   }
-  return new AiAssistanceModel.StorageAgent.StorageContext(item);
+  return new AiAssistanceModel.StorageContext.StorageContext(item);
 }
 
 /**
@@ -606,7 +606,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedRequest: AiAssistanceModel.RequestContext.RequestContext|null = null;
 
   #selectedAccessibility: AiAssistanceModel.AccessibilityContext.AccessibilityContext|null = null;
-  #selectedStorage: AiAssistanceModel.StorageAgent.StorageContext|null = null;
+  #selectedStorage: AiAssistanceModel.StorageContext.StorageContext|null = null;
 
   // Messages displayed in the `ChatView` component.
 
@@ -1640,7 +1640,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     } else if (data instanceof AiAssistanceModel.AccessibilityContext.AccessibilityContext) {
       this.#selectedAccessibility = data;
-    } else if (data instanceof AiAssistanceModel.StorageAgent.StorageContext) {
+    } else if (data instanceof AiAssistanceModel.StorageContext.StorageContext) {
       this.#selectedStorage = data;
     }
 

package/front_end/panels/ai_assistance/components/AIv2MarkdownRenderer.ts

@@ -110,9 +110,8 @@ export class AIv2MarkdownRenderer extends MarkdownView.MarkdownView.MarkdownInsi
       return html`${fallbackText}`;
     }
     if (href.startsWith('#file-')) {
-      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
-          file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
-              Number(href.substring(6)));
+      const file = AiAssistanceModel.ListSources.ListSourcesTool.getUISourceCodes().find(
+          file => AiAssistanceModel.ListSources.ListSourcesTool.uiSourceCodeId.get(file) === Number(href.substring(6)));
 
       if (file) {
         return this.#revealableLink(file, file.name());

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -194,7 +194,7 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
   if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
     return lockedString(UIStringsNotTranslate.removeContextPerfInsight);
   }
-  if (context instanceof AiAssistanceModel.StorageAgent.StorageContext) {
+  if (context instanceof AiAssistanceModel.StorageContext.StorageContext) {
     return lockedString(UIStringsNotTranslate.removeContextStorage);
   }
   return lockedString(UIStringsNotTranslate.removeContext);
@@ -371,7 +371,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :
                             input.context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
-                            input.context instanceof AiAssistanceModel.StorageAgent.StorageContext ?
+                            input.context instanceof AiAssistanceModel.StorageContext.StorageContext ?
                             html`<devtools-icon class="icon" name="table" title="Storage"></devtools-icon>` :
                             Lit.nothing}
                             <span

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -15,8 +15,9 @@ import type * as Protocol from '../../../generated/protocol.js';
 import type {
   AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LighthouseReportAiWidget,
   NetworkRequestGeneralHeadersAiWidget, NetworkRequestsListAiWidget, NetworkTrackAiWidget, PerfInsightAiWidget,
-  PerformanceTraceAiWidget, SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget,
-  TimelineEventSummaryAiWidget, TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+  PerformanceTraceAiWidget, SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StorageBreakdownAiWidget,
+  StylePropertiesAiWidget, TimelineEventSummaryAiWidget,
+  TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Formatter from '../../../models/formatter/formatter.js';
@@ -31,9 +32,11 @@ import type * as MarkdownView from '../../../ui/components/markdown_view/markdow
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../../ui/helpers/helpers.js';
+import type * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as Application from '../../application/application.js';
 import * as Elements from '../../elements/elements.js';
 import * as Lighthouse from '../../lighthouse/lighthouse.js';
 import * as NetworkForward from '../../network/forward/forward.js';
@@ -421,6 +424,14 @@ const UIStringsNotTranslate = {
    * @description Title for the source files list widget.
    */
   inspectedFileNames: 'Inspected file names',
+  /**
+   * @description Title for the storage breakdown widget.
+   */
+  storageBreakdown: 'Storage breakdown',
+  /**
+   * @description Accessible label for the reveal button in the storage breakdown widget.
+   */
+  revealStorageBreakdown: 'Reveal storage breakdown in Application panel',
 } as const;
 
 /**
@@ -1006,6 +1017,51 @@ async function resolveNode(backendNodeId: Protocol.DOM.BackendNodeId): Promise<S
   return resolved;
 }
 
+async function makeStorageBreakdownWidget(widgetData: StorageBreakdownAiWidget): Promise<WidgetMakerResponse|null> {
+  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+  if (!target) {
+    return null;
+  }
+
+  const breakdown = widgetData.data.usageBreakdown;
+  const total = breakdown.reduce((sum, item) => sum + item.bytes, 0);
+
+  const slices = breakdown.map(item => {
+    const color = Application.StorageView.storagePieColors.get(item.storageType as Protocol.Storage.StorageType) ||
+        'rgb(180, 180, 180)';
+    const title = Application.StorageView.StorageView.getStorageTypeNameForWidget(item.storageType);
+
+    return {
+      value: item.bytes,
+      color,
+      title,
+    };
+  });
+
+  const chartData: PerfUI.PieChart.PieChartData = {
+    chartName: lockedString(UIStringsNotTranslate.storageBreakdown),
+    size: 110,
+    formatter: val => AiAssistanceModel.UnitFormatters.bytes(val),
+    showLegend: true,
+    total,
+    slices,
+  };
+
+  const renderedWidget = html`
+    <div class="storage-breakdown-widget">
+      <devtools-perf-piechart .data=${chartData}></devtools-perf-piechart>
+    </div>
+  `;
+
+  return {
+    renderedWidget,
+    title: lockedString(UIStringsNotTranslate.storageBreakdown),
+    revealable: new Application.StorageView.StorageRevealable(target),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealStorageBreakdown),
+    jslogContext: 'storage-breakdown-widget',
+  };
+}
+
 async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
   const domNodeForId = await resolveNode(widgetData.data.backendNodeId);
   if (!domNodeForId) {
@@ -1678,6 +1734,9 @@ export function getWidgetSignature(widget: AiWidget): string {
       return `${widget.name}:${widget.data.url}:${widget.data.line ?? ''}:${widget.data.column ?? ''}`;
     case 'NETWORK_REQUESTS_LIST':
       return `${widget.name}:${widget.data.requests.map(r => r.requestId()).join(',')}`;
+    case 'STORAGE_BREAKDOWN':
+      return `${widget.name}:${widget.data.totalUsageBytes}:${
+          widget.data.usageBreakdown.map(e => `${e.storageType}_${e.bytes}`).join(',')}`;
     default:
       Platform.assertNever(widget, 'Unknown AiWidget name');
   }
@@ -1785,17 +1844,27 @@ async function renderWidgets(
       case 'SOURCE_CODE':
         response = await makeSourceCodeWidget(widgetData);
         break;
+      case 'STORAGE_BREAKDOWN':
+        response = await makeStorageBreakdownWidget(widgetData);
+        break;
       default:
         Platform.assertNever(widgetData, 'Unknown AiWidget name');
     }
     return renderWidgetResponse(response);
   }));
 
+  // Omit the wrapper element entirely if every widget maker resolved to Lit.nothing
+  // so empty container elements do not occupy vertical layout space in the chat stream.
+  const renderedItems = ui.filter(item => item !== Lit.nothing);
+  if (renderedItems.length === 0) {
+    return Lit.nothing;
+  }
+
   if (options.wrapperClass) {
-    return html`<div class=${options.wrapperClass}>${ui}</div>`;
+    return html`<div class=${options.wrapperClass}>${renderedItems}</div>`;
   }
 
-  return html`${ui}`;
+  return html`${renderedItems}`;
 }
 
 function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
@@ -2334,19 +2403,30 @@ async function makeNetworkTrackWidget(widgetData: NetworkTrackAiWidget): Promise
 }
 
 async function makeLighthouseReportWidget(widgetData: LighthouseReportAiWidget): Promise<WidgetMakerResponse|null> {
-  const reportEl =
-      Lighthouse.LighthouseReportRenderer.LighthouseReportRenderer.renderLighthouseScores(widgetData.data.report);
-  if (!reportEl) {
-    return null;
+  let reportEl: HTMLElement|null = null;
+  try {
+    // Snapshot mode audits only collect individual audit results and do not generate
+    // top-level category score gauges.
+    reportEl =
+        Lighthouse.LighthouseReportRenderer.LighthouseReportRenderer.renderLighthouseScores(widgetData.data.report);
+  } catch {
+    reportEl = null;
   }
-
   const snapshotReport = widgetData.data.snapshotReport;
+  const revealLighthouseLabel = lockedString(UIStringsNotTranslate.revealLighthouse);
+
+  // When score gauges are rendered, the widget header displays the title "Lighthouse report"
+  // and the header button defaults to "Reveal". When score gauges are absent (snapshot mode),
+  // no header is rendered, so customRevealTitle labels the standalone button ("Reveal Lighthouse report").
+  const title = reportEl ? lockedString(UIStringsNotTranslate.lighthouseReport) : null;
+  const customRevealTitle = reportEl ? undefined : revealLighthouseLabel;
 
   return {
-    renderedWidget: html`<div class="lighthouse-report-widget">${reportEl}</div>`,
+    renderedWidget: reportEl ? html`<div class="lighthouse-report-widget">${reportEl}</div>` : null,
     revealable: new Lighthouse.LighthousePanel.ActiveLighthouseReport(widgetData.data.report),
-    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealLighthouse),
-    title: lockedString(UIStringsNotTranslate.lighthouseReport),
+    accessibleRevealLabel: revealLighthouseLabel,
+    customRevealTitle,
+    title,
     jslogContext: snapshotReport ? 'lighthouse-snapshot-report-widget' : 'lighthouse-report-widget',
   };
 }

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -612,4 +612,10 @@
     flex-direction: column;
     gap: var(--sys-size-4);
   }
+
+  .storage-breakdown-widget {
+    display: flex;
+    justify-content: center;
+    padding: var(--sys-size-4);
+  }
 }

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -339,6 +339,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   reportingApiTreeElement: ReportingApiTreeElement;
   webMcpTreeElement?: WebMCPTreeElement;
   adsTreeElement?: ApplicationPanelTreeElement;
+  storageTreeElement?: StorageTreeElement;
   deviceBoundSessionsRootTreeElement: DeviceBoundSessionsRootTreeElement|undefined;
   deviceBoundSessionsModel: DeviceBoundSessionsModel|undefined;
   preloadingSummaryTreeElement: PreloadingSummaryTreeElement|undefined;
@@ -378,8 +379,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     manifestTreeElement.generateChildren();
     this.serviceWorkersTreeElement = new ServiceWorkersTreeElement(panel);
     this.applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
-    const clearStorageTreeElement = new ClearStorageTreeElement(panel);
-    this.applicationTreeElement.appendChild(clearStorageTreeElement);
+    this.storageTreeElement = new StorageTreeElement(panel);
+    this.applicationTreeElement.appendChild(this.storageTreeElement);
     if (Root.Runtime.hostConfig.devToolsWebMCPSupport?.enabled) {
       this.webMcpTreeElement = new WebMCPTreeElement(panel);
       this.applicationTreeElement.appendChild(this.webMcpTreeElement);
@@ -937,6 +938,11 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     }
   }
 
+  // Selects the Storage tree element in the sidebar (which opens the StorageView component for the main Storage tab).
+  showStorage(): void {
+    this.storageTreeElement?.select();
+  }
+
   private onmousemove(event: MouseEvent): void {
     const nodeUnderMouse = (event.target as Node);
     if (!nodeUnderMouse) {
@@ -1140,7 +1146,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
   }
 }
 
-export class ClearStorageTreeElement extends ApplicationPanelTreeElement {
+export class StorageTreeElement extends ApplicationPanelTreeElement {
   private view?: StorageView;
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.storage), false, 'storage');
@@ -1149,7 +1155,7 @@ export class ClearStorageTreeElement extends ApplicationPanelTreeElement {
   }
 
   override get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'clear-storage://' as Platform.DevToolsPath.UrlString;
+    return 'storage://' as Platform.DevToolsPath.UrlString;
   }
 
   override onselect(selectedByUser?: boolean): boolean {

package/front_end/panels/application/IndexedDBViews.ts

@@ -254,7 +254,6 @@ export interface IndexedDBDataViewInput {
   onKeyFilterChange: (value: string) => void;
   onRowSelected: (rowNumber: number) => void;
   deleteEntry: (entry: Entry) => Promise<void>;
-  populateContextMenu: (e: CustomEvent<UI.ContextMenu.ContextMenu>, entry: Entry) => void;
 }
 
 const renderKeyPathString = (keyPathString: string): LitTemplate => {
@@ -272,6 +271,21 @@ const renderKeyColumnHeader = (prefix: string, keyPath: string|string[]|null|und
           renderKeyPathString(keyPath)})`;
 };
 
+const populateContextMenu = (e: CustomEvent<UI.ContextMenu.ContextMenu>): void => {
+  const row = e.currentTarget as HTMLElement;
+  const widgetElement = row.querySelector('.value-column devtools-widget');
+  const widget = widgetElement ? UI.Widget.Widget.get(widgetElement) as ObjectPropertiesSectionWidget : null;
+  if (widget?.objectTree) {
+    const contextMenu = e.detail;
+    contextMenu.revealSection().appendItem(i18nString(UIStrings.expandRecursively), () => {
+      void widget.expandRecursively();
+    }, {jslogContext: 'expand-recursively'});
+    contextMenu.revealSection().appendItem(i18nString(UIStrings.collapse), () => {
+      widget.expanded = false;
+    }, {jslogContext: 'collapse'});
+  }
+};
+
 const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
   const keyPath = input.isIndex && input.index ? input.index.keyPath : input.objectStore.keyPath;
   // clang-format off
@@ -284,17 +298,20 @@ const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
         ${input.isIndex ? html`<th id="primary-key">${renderKeyColumnHeader(i18nString(UIStrings.primaryKey), input.objectStore.keyPath)}</th>` : nothing}
         <th id="value">${i18nString(UIStrings.valueString)}</th>
       </tr>
-      ${repeat(input.entries, (_entry, index) => index, (entry, index) => html`
-        <tr ?selected=${index + input.skipCount === input.selectedRowNumber}
-            @select=${() => input.onRowSelected(index + input.skipCount)}
-            @delete=${() => input.deleteEntry(entry)}
-            @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => input.populateContextMenu(e, entry)}>
-          <td>${index + input.skipCount}</td>
-          <td>${widget(ObjectPropertiesSectionWidget, {value: entry.key})}</td>
-          ${input.isIndex ? html`<td>${widget(ObjectPropertiesSectionWidget, {value: entry.primaryKey})}</td>` : nothing}
-          <td class="value-column">${widget(ObjectPropertiesSectionWidget, {value: entry.value})}</td>
-        </tr>`,
-      )}
+      ${repeat(input.entries, (_entry, index) => index, (entry, index) => {
+        return html`
+          <tr ?selected=${index + input.skipCount === input.selectedRowNumber}
+              class="data-grid-data-row"
+              @select=${() => input.onRowSelected(index + input.skipCount)}
+              @delete=${() => input.deleteEntry(entry)}
+              @contextmenu=${populateContextMenu}>
+            <td>${index + input.skipCount}</td>
+            <td>${widget(ObjectPropertiesSectionWidget, {value: entry.key})}</td>
+            ${input.isIndex ? html`<td>${widget(ObjectPropertiesSectionWidget, {value: entry.primaryKey})}</td>`
+                            : nothing}
+            <td class="value-column">${widget(ObjectPropertiesSectionWidget, {value: entry.value})}</td>
+          </tr>`;
+      })}
     </table>`}>
   </devtools-data-grid>`;
   // clang-format on
@@ -467,31 +484,6 @@ export class IDBDataView extends UI.View.SimpleView {
     this.updateData(false);
   }
 
-  private populateContextMenu(e: CustomEvent<UI.ContextMenu.ContextMenu>, {value}: Entry): void {
-    const contextMenu = e.detail;
-    if (value && value.hasChildren) {
-      const tr = e.currentTarget as HTMLElement;
-      const valueTd = tr.querySelector('.value-column');
-      if (valueTd) {
-        const widgetEl = valueTd.querySelector('devtools-widget');
-        if (widgetEl) {
-          const widget = UI.Widget.Widget.get(widgetEl);
-          if (widget instanceof ObjectPropertiesSectionWidget) {
-            const objectUi = widget.objectPropertiesSection;
-            if (objectUi) {
-              contextMenu.revealSection().appendItem(i18nString(UIStrings.expandRecursively), () => {
-                void objectUi.objectTreeElement().expandRecursively();
-              }, {jslogContext: 'expand-recursively'});
-              contextMenu.revealSection().appendItem(i18nString(UIStrings.collapse), () => {
-                objectUi.objectTreeElement().collapse();
-              }, {jslogContext: 'collapse'});
-            }
-          }
-        }
-      }
-    }
-  }
-
   refreshData(): void {
     this.updateData(true);
   }
@@ -683,43 +675,33 @@ export class IDBDataView extends UI.View.SimpleView {
       },
       onRowSelected: this.onRowSelected.bind(this),
       deleteEntry: this.deleteEntry.bind(this),
-      populateContextMenu: this.populateContextMenu.bind(this),
     },
                undefined, this.element);
   }
 }
 
 interface ObjectPropertiesSectionWidgetInput {
-  value: SDK.RemoteObject.RemoteObject|null;
-}
-
-interface ObjectPropertiesSectionWidgetOutput {
-  objectPropSection: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection|null;
+  objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null;
 }
 
 type ObjectPropertiesSectionWidgetView = (
     input: ObjectPropertiesSectionWidgetInput,
-    output: ObjectPropertiesSectionWidgetOutput,
+    output: void,
     target: HTMLElement,
     ) => void;
 
 const OBJECT_PROPERTIES_SECTION_WIDGET_DEFAULT_VIEW: ObjectPropertiesSectionWidgetView = (input, output, target) => {
-  if (!input.value) {
-    output.objectPropSection = null;
+  if (!input.objectTree) {
     render(nothing, target);
     return;
   }
-  const objectPropSection = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.defaultObjectPropertiesSection(
-      input.value, undefined /* linkifier */, true /* skipProto */, true /* readOnly */);
-  output.objectPropSection = objectPropSection;
-
-  const element = input.value.hasChildren ? objectPropSection.element : objectPropSection.titleElement;
-  render(html`${element}`, target);
+  render(ObjectUI.ObjectPropertiesSection.defaultObjectPresentation(input.objectTree, undefined /* linkifier */,
+                                                                    true /* skipProto */, true /* readOnly */),
+         target);
 };
 
-class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
-  #value: SDK.RemoteObject.RemoteObject|null = null;
-  #objectPropSection: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection|null = null;
+export class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
+  #objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null = null;
   readonly #view: ObjectPropertiesSectionWidgetView;
 
   constructor(element?: HTMLElement, view = OBJECT_PROPERTIES_SECTION_WIDGET_DEFAULT_VIEW) {
@@ -728,20 +710,40 @@ class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
   }
 
   set value(value: SDK.RemoteObject.RemoteObject|null) {
-    if (this.#value === value) {
-      return;
+    if (value) {
+      this.#objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(value, {
+        readOnly: true,
+        propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+      });
+    } else {
+      this.#objectTree = null;
     }
-    this.#value = value;
     this.requestUpdate();
   }
 
-  get objectPropertiesSection(): ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection|null {
-    return this.#objectPropSection;
+  get objectTree(): ObjectUI.ObjectPropertiesSection.ObjectTree|null {
+    return this.#objectTree;
+  }
+
+  get expanded(): boolean {
+    return this.#objectTree?.expanded ?? false;
+  }
+
+  set expanded(expanded: boolean) {
+    if (this.#objectTree) {
+      this.#objectTree.expanded = expanded;
+      this.requestUpdate();
+    }
+  }
+
+  async expandRecursively(): Promise<void> {
+    if (this.#objectTree) {
+      await this.#objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
+      this.requestUpdate();
+    }
   }
 
   override performUpdate(): void {
-    const output: ObjectPropertiesSectionWidgetOutput = {objectPropSection: null};
-    this.#view({value: this.#value}, output, this.contentElement);
-    this.#objectPropSection = output.objectPropSection;
+    this.#view({objectTree: this.#objectTree}, undefined, this.contentElement);
   }
 }