chrome-devtools-frontend 1.0.1521880 → 1.0.1522145

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

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -273,7 +272,7 @@ export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput,
       </div>
     </form>
     ` : Lit.nothing}
-  `, target, {host: target});
+  `, target);
   // clang-format on
 };
 

package/front_end/panels/application/IndexedDBViews.ts

@@ -146,6 +146,7 @@ export class IDBDatabaseView extends ApplicationComponents.StorageMetadataView.S
     super();
 
     this.model = model;
+    this.setShowOnlyBucket(false);
     if (database) {
       this.update(database);
     }

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -8,7 +8,6 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import * as ApplicationComponents from './components/components.js';
 import {ReportingApiView} from './ReportingApiView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
@@ -37,7 +36,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = new ReportingApiView(new ApplicationComponents.EndpointsGrid.EndpointsGrid());
+      this.view = new ReportingApiView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('reporting-api');

package/front_end/panels/application/ReportingApiView.ts

@@ -50,11 +50,10 @@ const REPORTING_API_EXPLANATION_URL =
 interface ViewInput {
   hasReports: boolean;
   hasEndpoints: boolean;
-  // TODO (crbug.com/407940329): port EndpointsGrid to a UI Widget and instantiate it in the view
-  endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid;
-  // TODO (crbug.com/407940381): port ReportsGrid to a UI Widget and instantiate it in the view
-  reportsGrid: ApplicationComponents.ReportsGrid.ReportsGrid;
+  endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
+  reports: Protocol.Network.ReportingApiReport[];
   focusedReport?: Protocol.Network.ReportingApiReport;
+  onReportSelected: (id: string) => void;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -68,7 +67,9 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         ${input.hasReports ? html`
           <devtools-split-view slot="main" sidebar-position="second" sidebar-initial-size="150">
             <div slot="main">
-              ${input.reportsGrid}
+              <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
+                reports: input.reports, onReportSelected: input.onReportSelected,
+              })}></devtools-widget>
             </div>
             <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
               ${input.focusedReport ? html`
@@ -85,11 +86,15 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </devtools-split-view>
         ` : html`
           <div slot="main">
-            ${input.reportsGrid}
+            <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
+                reports: input.reports, onReportSelected: input.onReportSelected,
+              })}></devtools-widget>
           </div>
         `}
         <div slot="sidebar">
-          ${input.endpointsGrid}
+          <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.EndpointsGrid.EndpointsGrid, {
+            endpoints: input.endpoints,
+          })}></devtools-widget>
         </div>
       </devtools-split-view>
     `, target);
@@ -109,20 +114,16 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 
 export class ReportingApiView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager> {
-  readonly #endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid;
   #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
   #view: View;
   #networkManager?: SDK.NetworkManager.NetworkManager;
-  #reportsGrid = new ApplicationComponents.ReportsGrid.ReportsGrid();
   #reports: Protocol.Network.ReportingApiReport[] = [];
   #focusedReport?: Protocol.Network.ReportingApiReport;
 
-  constructor(endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid, view = DEFAULT_VIEW) {
+  constructor(view = DEFAULT_VIEW) {
     super();
     this.#view = view;
-    this.#endpointsGrid = endpointsGrid;
     this.#endpoints = new Map();
-    this.#reportsGrid.addEventListener('select', this.#onFocus.bind(this));
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.NetworkManager.NetworkManager, this);
     this.requestUpdate();
   }
@@ -158,35 +159,32 @@ export class ReportingApiView extends UI.Widget.VBox implements
     const viewInput = {
       hasReports: this.#reports.length > 0,
       hasEndpoints: this.#endpoints.size > 0,
-      endpointsGrid: this.#endpointsGrid,
-      reportsGrid: this.#reportsGrid,
+      endpoints: this.#endpoints,
+      reports: this.#reports,
       focusedReport: this.#focusedReport,
+      onReportSelected: this.#onReportSelected.bind(this),
     };
     this.#view(viewInput, {}, this.element);
   }
 
   #onEndpointsChangedForOrigin({data}: {data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent}): void {
     this.#endpoints.set(data.origin, data.endpoints);
-    this.#endpointsGrid.data = {endpoints: this.#endpoints};
     this.requestUpdate();
   }
 
   #onReportAdded({data: report}: {data: Protocol.Network.ReportingApiReport}): void {
     this.#reports.push(report);
-    this.#reportsGrid.data = {reports: this.#reports};
     this.requestUpdate();
   }
 
   #onReportUpdated({data: report}: {data: Protocol.Network.ReportingApiReport}): void {
     const index = this.#reports.findIndex(oldReport => oldReport.id === report.id);
     this.#reports[index] = report;
-    this.#reportsGrid.data = {reports: this.#reports};
     this.requestUpdate();
   }
 
-  async #onFocus(event: Event): Promise<void> {
-    const selectEvent = event as CustomEvent<string>;
-    const report = this.#reports.find(report => report.id === selectEvent.detail);
+  #onReportSelected(id: string): void {
+    const report = this.#reports.find(report => report.id === id);
     if (report) {
       this.#focusedReport = report;
       this.requestUpdate();

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -134,6 +134,9 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     const bucketInfo = this.model.target()
                            .model(SDK.StorageBucketsModel.StorageBucketsModel)
                            ?.getBucketByName(cache.storageBucket.storageKey, cache.storageBucket.name);
+
+    this.metadataView.setShowOnlyBucket(false);
+
     if (bucketInfo) {
       this.metadataView.setStorageBucket(bucketInfo);
     } else if (cache.storageKey) {

package/front_end/panels/application/components/EndpointsGrid.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/legacy/components/data_grid/data_grid.js';
 
@@ -11,7 +10,7 @@ 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 reportingApiGridStyles from './reportingApiGrid.css.js';
+import endpointsGridStyles from './endpointsGrid.css.js';
 
 const UIStrings = {
   /**
@@ -23,76 +22,69 @@ const UIStrings = {
    * @description Placeholder text when there are no Reporting API endpoints.
    *(https://developers.google.com/web/updates/2018/09/reportingapi#tldr)
    */
-  endpointsDescription: 'Here you will find the list of endpoints that receive the reports'
+  endpointsDescription: 'Here you will find the list of endpoints that receive the reports',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/EndpointsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = Lit;
 
-export interface EndpointsGridData {
+export interface ViewInput {
   endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
 }
 
-export class EndpointsGrid extends HTMLElement {
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${endpointsGridStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <div class="endpoints-container" jslog=${VisualLogging.section('endpoints')}>
+      <div class="endpoints-header">${i18n.i18n.lockedString('Endpoints')}</div>
+      ${input.endpoints.size > 0 ? html`
+        <devtools-data-grid striped>
+         <table>
+          <tr>
+            <th id="origin" weight="30">${i18n.i18n.lockedString('Origin')}</th>
+            <th id="name" weight="20">${i18n.i18n.lockedString('Name')}</th>
+            <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
+          </tr>
+          ${Array.from(input.endpoints).map(([origin, endpointArray]) =>
+              endpointArray.map(endpoint => html`<tr>
+                <td>${origin}</td>
+                <td>${endpoint.groupName}</td>
+                <td>${endpoint.url}</td>
+              </tr>`))
+              .flat()}
+          </table>
+        </devtools-data-grid>
+      ` : html`
+        <div class="empty-state">
+          <span class="empty-state-header">${i18nString(UIStrings.noEndpointsToDisplay)}</span>
+          <span class="empty-state-description">${i18nString(UIStrings.endpointsDescription)}</span>
+        </div>
+      `}
+    </div>
+  `, target);
+  // clang-format on
+};
 
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #endpoints = new Map<string, Protocol.Network.ReportingApiEndpoint[]>();
+type View = typeof DEFAULT_VIEW;
 
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  set data(data: EndpointsGridData) {
-    this.#endpoints = data.endpoints;
-    this.#render();
-  }
+export class EndpointsGrid extends UI.Widget.Widget {
+  endpoints = new Map<string, Protocol.Network.ReportingApiEndpoint[]>();
+  #view: View;
 
-  get data(): EndpointsGridData {
-    return {endpoints: this.#endpoints};
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+    this.requestUpdate();
   }
 
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${reportingApiGridStyles}</style>
-      <style>${UI.inspectorCommonStyles}</style>
-      <div class="reporting-container" jslog=${VisualLogging.section('endpoints')}>
-        <div class="reporting-header">${i18n.i18n.lockedString('Endpoints')}</div>
-        ${this.#endpoints.size > 0 ? html`
-          <devtools-data-grid striped>
-           <table>
-            <tr>
-              <th id="origin" weight="30">${i18n.i18n.lockedString('Origin')}</th>
-              <th id="name" weight="20">${i18n.i18n.lockedString('Name')}</th>
-              <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
-            </tr>
-            ${Array.from(this.#endpoints).map(([origin, endpointArray]) =>
-                endpointArray.map(endpoint => html`<tr>
-                  <td>${origin}</td>
-                  <td>${endpoint.groupName}</td>
-                  <td>${endpoint.url}</td>
-                </tr>`))
-                .flat()}
-            </table>
-          </devtools-data-grid>
-        ` : html`
-          <div class="empty-state">
-            <span class="empty-state-header">${i18nString(UIStrings.noEndpointsToDisplay)}</span>
-            <span class="empty-state-description">${i18nString(UIStrings.endpointsDescription)}</span>
-          </div>
-        `}
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-resources-endpoints-grid', EndpointsGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-endpoints-grid': EndpointsGrid;
+  override performUpdate(): void {
+    this.#view(
+        {
+          endpoints: this.endpoints,
+        },
+        undefined, this.contentElement);
   }
 }

package/front_end/panels/application/components/ReportsGrid.ts

@@ -1,23 +1,17 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/legacy/components/data_grid/data_grid.js';
-import '../../../ui/components/icon_button/icon_button.js';
-import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type * as Protocol from '../../../generated/protocol.js';
-// inspectorCommonStyles is imported for the empty state styling that is used for the start view
-// eslint-disable-next-line rulesdir/es-modules-import
-import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.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 reportingApiGridStyles from './reportingApiGrid.css.js';
+import reportsGridStyles from './reportsGrid.css.js';
 
 const UIStrings = {
   /**
@@ -48,7 +42,7 @@ const UIStrings = {
    * @description Column header for a table displaying Reporting API reports.
    *The column contains the timestamp of when a report was generated.
    */
-  generatedAt: 'Generated at'
+  generatedAt: 'Generated at',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -57,115 +51,100 @@ const {render, html} = Lit;
 
 const REPORTING_API_EXPLANATION_URL = 'https://developer.chrome.com/docs/capabilities/web-apis/reporting-api';
 
-export class ReportsGridStatusHeader extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${reportingApiGridStyles}</style>
-      <span class="status-header">${i18nString(UIStrings.status)}</span>
-      <x-link href="https://web.dev/reporting-api/#report-status"
-      jslog=${VisualLogging.link('report-status').track({click: true})}>
-        <devtools-icon class="inline-icon medium" name="help" style="color: var(--icon-link);"></devtools-icon>
-      </x-link>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
 export interface ReportsGridData {
   reports: Protocol.Network.ReportingApiReport[];
 }
 
-export class ReportsGrid extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #reports: Protocol.Network.ReportingApiReport[] = [];
-  #protocolMonitorExperimentEnabled = false;
+export interface ViewInput {
+  reports: Protocol.Network.ReportingApiReport[];
+  protocolMonitorExperimentEnabled: boolean;
+  onSelect: (e: CustomEvent<HTMLElement|null>) => void;
+}
 
-  connectedCallback(): void {
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
-    this.#render();
-  }
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${reportsGridStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
+      <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
+      ${input.reports.length > 0 ? html`
+        <devtools-data-grid striped @select=${input.onSelect}>
+          <table>
+            <tr>
+              ${input.protocolMonitorExperimentEnabled ? html`
+                <th id="id" weight="30">${i18n.i18n.lockedString('ID')}</th>
+              ` : ''}
+              <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
+              <th id="type" weight="20">${i18n.i18n.lockedString('Type')}</th>
+              <th id="status" weight="20">
+                <style>${reportsGridStyles}</style>
+                <span class="status-header">${i18nString(UIStrings.status)}</span>
+                <x-link href="https://web.dev/reporting-api/#report-status"
+                jslog=${VisualLogging.link('report-status').track({click: true})}>
+                  <devtools-icon class="inline-icon medium" name="help" style="color: var(--icon-link);"
+                  ></devtools-icon>
+                </x-link>
+              </th>
+              <th id="destination" weight="20">${i18nString(UIStrings.destination)}</th>
+              <th id="timestamp" weight="20">${i18nString(UIStrings.generatedAt)}</th>
+              <th id="body" weight="20">${i18n.i18n.lockedString('Body')}</th>
+            </tr>
+            ${input.reports.map(report => html`
+              <tr data-id=${report.id}>
+                ${input.protocolMonitorExperimentEnabled ? html`<td>${report.id}</td>` : ''}
+                <td>${report.initiatorUrl}</td>
+                <td>${report.type}</td>
+                <td>${report.status}</td>
+                <td>${report.destination}</td>
+                <td>${new Date(report.timestamp * 1000).toLocaleString()}</td>
+                <td>${JSON.stringify(report.body)}</td>
+              </tr>
+            `)}
+          </table>
+        </devtools-data-grid>
+      ` : html`
+        <div class="empty-state">
+          <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
+          <div class="empty-state-description">
+            <span>${i18nString(UIStrings.reportingApiDescription)}</span>
+            ${UI.XLink.XLink.create(REPORTING_API_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined,
+              undefined, 'learn-more')}
+          </div>
+        </div>
+      `}
+    </div>
+  `, target);
+  // clang-format on
+};
 
-  set data(data: ReportsGridData) {
-    this.#reports = data.reports;
-    this.#render();
-  }
+type View = typeof DEFAULT_VIEW;
 
-  get data(): ReportsGridData {
-    return {reports: this.#reports};
-  }
+export class ReportsGrid extends UI.Widget.Widget {
+  reports: Protocol.Network.ReportingApiReport[] = [];
+  #protocolMonitorExperimentEnabled = false;
+  #view: View;
+  onReportSelected: (id: string) => void = () => {};
 
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${reportingApiGridStyles}</style>
-      <style>${inspectorCommonStyles}</style>
-      <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
-        <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
-        ${this.#reports.length > 0 ? html`
-          <devtools-data-grid striped @select=${this.#onSelect}>
-            <table>
-              <tr>
-                ${this.#protocolMonitorExperimentEnabled ? html`
-                  <th id="id" weight="30">${i18n.i18n.lockedString('ID')}</th>
-                ` : ''}
-                <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
-                <th id="type" weight="20">${i18n.i18n.lockedString('Type')}</th>
-                <th id="status" weight="20">
-                    <devtools-resources-reports-grid-status-header></devtools-resources-reports-grid-status-header>
-                </th>
-                <th id="destination" weight="20">${i18nString(UIStrings.destination)}</th>
-                <th id="timestamp" weight="20">${i18nString(UIStrings.generatedAt)}</th>
-                <th id="body" weight="20">${i18n.i18n.lockedString('Body')}</th>
-              </tr>
-              ${this.#reports.map(report => html`
-                <tr data-id=${report.id}>
-                  ${this.#protocolMonitorExperimentEnabled ? html`<td>${report.id}</td>` : ''}
-                  <td>${report.initiatorUrl}</td>
-                  <td>${report.type}</td>
-                  <td>${report.status}</td>
-                  <td>${report.destination}</td>
-                  <td>${new Date(report.timestamp * 1000).toLocaleString()}</td>
-                  <td>${JSON.stringify(report.body)}</td>
-                </tr>
-              `)}
-            </table>
-          </devtools-data-grid>
-        ` : html`
-          <div class="empty-state">
-            <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
-            <div class="empty-state-description">
-              <span>${i18nString(UIStrings.reportingApiDescription)}</span>
-              ${UI.XLink.XLink.create(REPORTING_API_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more')}
-            </div>
-          </div>
-        `}
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.requestUpdate();
   }
 
-  #onSelect(e: CustomEvent<HTMLElement|null>): void {
-    if (e.detail) {
-      this.dispatchEvent(new CustomEvent('select', {detail: e.detail.dataset.id}));
+  #onSelect = (e: CustomEvent<HTMLElement|null>): void => {
+    if (e.detail?.dataset.id) {
+      this.onReportSelected(e.detail.dataset.id);
     }
-  }
-}
-
-customElements.define('devtools-resources-reports-grid-status-header', ReportsGridStatusHeader);
-customElements.define('devtools-resources-reports-grid', ReportsGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-reports-grid-status-header': ReportsGridStatusHeader;
-    'devtools-resources-reports-grid': ReportsGrid;
+  };
+
+  override performUpdate(): void {
+    const viewInput = {
+      reports: this.reports,
+      protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
+      onSelect: this.#onSelect,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/application/components/StorageMetadataView.ts

@@ -14,6 +14,8 @@ import * as RenderCoordinator from '../../../ui/components/render_coordinator/re
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
+import storageMetadataViewStyle from './storageMetadataView.css.js';
+
 const {html} = Lit;
 
 const UIStrings = {
@@ -21,7 +23,7 @@ const UIStrings = {
    * @description The origin of a URL (https://web.dev/same-site-same-origin/#origin).
    *(for a lot of languages this does not need to be translated, please translate only where necessary)
    */
-  origin: 'Origin',
+  origin: 'Frame origin',
   /**
    * @description Site (https://web.dev/same-site-same-origin/#site) for the URL the user sees in the omnibox.
    */
@@ -118,6 +120,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
   #storageBucketsModel?: SDK.StorageBucketsModel.StorageBucketsModel;
   #storageKey: SDK.StorageKeyManager.StorageKey|null = null;
   #storageBucket: Protocol.Storage.StorageBucketInfo|null = null;
+  #showOnlyBucket = true;
 
   setStorageKey(storageKey: string): void {
     this.#storageKey = SDK.StorageKeyManager.parseStorageKey(storageKey);
@@ -129,6 +132,10 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     this.setStorageKey(storageBucket.bucket.storageKey);
   }
 
+  setShowOnlyBucket(show: boolean): void {
+    this.#showOnlyBucket = show;
+  }
+
   enableStorageBucketControls(model: SDK.StorageBucketsModel.StorageBucketsModel): void {
     this.#storageBucketsModel = model;
     if (this.#storageKey) {
@@ -141,6 +148,9 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       Lit.render(html`
+        <style>
+          ${storageMetadataViewStyle}
+        </style>
         <devtools-report .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)}}>
           ${await this.renderReportContent()}
         </devtools-report>`, this.#shadow, {host: this});
@@ -181,11 +191,16 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
         topLevelSiteIsOpaque                           ? i18nString(UIStrings.yesBecauseTopLevelIsOpaque) :
         (topLevelSite && origin !== topLevelSite)      ? i18nString(UIStrings.yesBecauseOriginNotInTopLevelSite) :
                                                          null;
+
+    const isIframeOrEmbedded = topLevelSite && origin !== topLevelSite;
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-        ${this.key(i18nString(UIStrings.origin))}
-        ${this.value(html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}
+        ${(isIframeOrEmbedded) ?
+          html`${this.key(i18nString(UIStrings.origin))}
+            ${this.value(html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}`
+          : Lit.nothing}
         ${(topLevelSite || topLevelSiteIsOpaque) ? this.key(i18nString(UIStrings.topLevelSite)) : Lit.nothing}
         ${topLevelSite ? this.value(topLevelSite) : Lit.nothing}
         ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : Lit.nothing}
@@ -205,11 +220,22 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       throw new Error('Should not call #renderStorageBucketInfo if #bucket is null.');
     }
     const {bucket: {name}, persistent, durability, quota} = this.#storageBucket;
+    const isDefault = !name;
 
+    if (!this.#showOnlyBucket) {
+      if (isDefault) {
+        return html`
+          ${this.key(i18nString(UIStrings.bucketName))}
+          ${this.value(html`<span class="default-bucket">default</span>`)}`;
+      }
+      return html`
+        ${this.key(i18nString(UIStrings.bucketName))}
+        ${this.value(name)}`;
+    }
     // clang-format off
     return html`
       ${this.key(i18nString(UIStrings.bucketName))}
-      ${this.value(name || 'default')}
+      ${this.value(name || html`<span class="default-bucket">default</span>`)}
       ${this.key(i18nString(UIStrings.persistent))}
       ${this.value(persistent ? i18nString(UIStrings.yes) : i18nString(UIStrings.no))}
       ${this.key(i18nString(UIStrings.durability))}

package/front_end/panels/application/components/endpointsGrid.css

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    overflow: auto;
+    height: 100%;
+  }
+
+  .endpoints-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .endpoints-header {
+    font-size: 15px;
+    background-color: var(--sys-color-surface2);
+    padding: 1px 4px;
+    flex-shrink: 0;
+  }
+
+  devtools-data-grid {
+    flex: auto;
+  }
+}