chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -75,7 +75,7 @@ import {
   PreloadingSummaryTreeElement,
 } from './PreloadingTreeElement.js';
 import {ReportingApiTreeElement} from './ReportingApiTreeElement.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import resourcesSidebarStyles from './resourcesSidebar.css.js';
 import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js';
 import {ServiceWorkersView} from './ServiceWorkersView.js';
@@ -111,6 +111,22 @@ const UIStrings = {
    *@description Text in Application Panel Sidebar of the Application panel
    */
   extensionStorage: 'Extension storage',
+  /**
+   *@description Text for extension session storage in Application panel
+   */
+  extensionSessionStorage: 'Session',
+  /**
+   *@description Text for extension local storage in Application panel
+   */
+  extensionLocalStorage: 'Local',
+  /**
+   *@description Text for extension sync storage in Application panel
+   */
+  extensionSyncStorage: 'Sync',
+  /**
+   *@description Text for extension managed storage in Application panel
+   */
+  extensionManagedStorage: 'Managed',
   /**
    *@description Text for web cookies
    */
@@ -229,6 +245,21 @@ function assertNotMainTarget(targetId: Protocol.Target.TargetID|'main'): asserts
   }
 }
 
+function nameForExtensionStorageArea(storageArea: Protocol.Extensions.StorageArea): string {
+  switch (storageArea) {
+    case Protocol.Extensions.StorageArea.Session:
+      return i18nString(UIStrings.extensionSessionStorage);
+    case Protocol.Extensions.StorageArea.Local:
+      return i18nString(UIStrings.extensionLocalStorage);
+    case Protocol.Extensions.StorageArea.Sync:
+      return i18nString(UIStrings.extensionSyncStorage);
+    case Protocol.Extensions.StorageArea.Managed:
+      return i18nString(UIStrings.extensionManagedStorage);
+    default:
+      throw new Error(`Unrecognized storage type: ${storageArea}`);
+  }
+}
+
 export namespace SharedStorageTreeElementDispatcher {
   export const enum Events {
     SHARED_STORAGE_TREE_ELEMENT_ADDED = 'SharedStorageTreeElementAdded',
@@ -270,7 +301,9 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   preloadingSummaryTreeElement: PreloadingSummaryTreeElement|undefined;
   private readonly resourcesSection: ResourcesSection;
   private domStorageTreeElements: Map<DOMStorage, DOMStorageTreeElement>;
-  private extensionStorageTreeElements: Map<ExtensionStorage, ExtensionStorageTreeElement>;
+  private extensionIdToStorageTreeParentElement: Map<string, ExtensionStorageTreeParentElement>;
+  private extensionStorageModels: ExtensionStorageModel[];
+  private extensionStorageTreeElements: Map<string, ExtensionStorageTreeElement>;
   private sharedStorageTreeElements: Map<string, SharedStorageTreeElement>;
   private domains: {
     [x: string]: boolean,
@@ -413,7 +446,9 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.resourcesSection = new ResourcesSection(panel, resourcesTreeElement);
 
     this.domStorageTreeElements = new Map();
+    this.extensionIdToStorageTreeParentElement = new Map();
     this.extensionStorageTreeElements = new Map();
+    this.extensionStorageModels = [];
     this.sharedStorageTreeElements = new Map();
     this.domains = {};
 
@@ -584,6 +619,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   }
 
   private extensionStorageModelAdded(model: ExtensionStorageModel): void {
+    this.extensionStorageModels.push(model);
     model.enable();
     model.storages().forEach(this.addExtensionStorage.bind(this));
     model.addEventListener(ExtensionStorageModelEvents.EXTENSION_STORAGE_ADDED, this.extensionStorageAdded, this);
@@ -591,6 +627,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   }
 
   private extensionStorageModelRemoved(model: ExtensionStorageModel): void {
+    console.assert(this.extensionStorageModels.includes(model));
+    this.extensionStorageModels.splice(this.extensionStorageModels.indexOf(model), 1);
     model.storages().forEach(this.removeExtensionStorage.bind(this));
     model.removeEventListener(ExtensionStorageModelEvents.EXTENSION_STORAGE_ADDED, this.extensionStorageAdded, this);
     model.removeEventListener(
@@ -770,18 +808,57 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.addExtensionStorage(extensionStorage);
   }
 
+  private useTreeViewForExtensionStorage(): boolean {
+    // For extension service workers, there is only one associated extension,
+    // so we show each storage area as a direct child. In a page context (where
+    // multiple extensions may be injected) use a tree view where storage areas
+    // are children of the extension they are associated with.
+    return Root.Runtime.getPathName() !== '/bundled/worker_app.html';
+  }
+
+  private getExtensionStorageAreaParent(extensionStorage: ExtensionStorage): ApplicationPanelTreeElement|undefined {
+    if (!this.useTreeViewForExtensionStorage()) {
+      return this.extensionStorageListTreeElement;
+    }
+
+    const existingParent = this.extensionIdToStorageTreeParentElement.get(extensionStorage.extensionId);
+    if (existingParent) {
+      return existingParent;
+    }
+
+    const parent =
+        new ExtensionStorageTreeParentElement(this.panel, extensionStorage.extensionId, extensionStorage.name);
+    this.extensionIdToStorageTreeParentElement.set(extensionStorage.extensionId, parent);
+    this.extensionStorageListTreeElement?.appendChild(parent);
+    return parent;
+  }
+
   private addExtensionStorage(extensionStorage: ExtensionStorage): void {
+    if (this.extensionStorageModels.find(
+            m => m !== extensionStorage.model &&
+                m.storageForIdAndArea(extensionStorage.extensionId, extensionStorage.storageArea))) {
+      // There's at least one model that already has this storage area, so no need
+      // to do anything.
+      return;
+    }
+
     console.assert(Boolean(this.extensionStorageListTreeElement));
-    console.assert(!this.extensionStorageTreeElements.get(extensionStorage));
+    console.assert(!this.extensionStorageTreeElements.get(extensionStorage.key));
 
     const extensionStorageTreeElement = new ExtensionStorageTreeElement(this.panel, extensionStorage);
-    this.extensionStorageTreeElements.set(extensionStorage, extensionStorageTreeElement);
-    this.extensionStorageListTreeElement?.appendChild(extensionStorageTreeElement, comparator);
+    this.extensionStorageTreeElements.set(extensionStorage.key, extensionStorageTreeElement);
+    this.getExtensionStorageAreaParent(extensionStorage)?.appendChild(extensionStorageTreeElement, comparator);
 
     function comparator(a: UI.TreeOutline.TreeElement, b: UI.TreeOutline.TreeElement): number {
-      const aTitle = a.titleAsText().toLocaleLowerCase();
-      const bTitle = b.titleAsText().toLocaleUpperCase();
-      return aTitle.localeCompare(bTitle);
+      const getStorageArea = (e: UI.TreeOutline.TreeElement): Protocol.Extensions.StorageArea =>
+          (e as ExtensionStorageTreeElement).storageArea;
+      const order = [
+        Protocol.Extensions.StorageArea.Session,
+        Protocol.Extensions.StorageArea.Local,
+        Protocol.Extensions.StorageArea.Sync,
+        Protocol.Extensions.StorageArea.Managed,
+      ];
+      return order.indexOf(getStorageArea(a)) - order.indexOf(getStorageArea(b));
     }
   }
 
@@ -791,7 +868,14 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   }
 
   private removeExtensionStorage(extensionStorage: ExtensionStorage): void {
-    const treeElement = this.extensionStorageTreeElements.get(extensionStorage);
+    if (this.extensionStorageModels.find(
+            (m => m.storageForIdAndArea(extensionStorage.extensionId, extensionStorage.storageArea)))) {
+      // There's at least one model that still has this storage area, so no need
+      // to do anything.
+      return;
+    }
+
+    const treeElement = this.extensionStorageTreeElements.get(extensionStorage.key);
     if (!treeElement) {
       return;
     }
@@ -799,11 +883,16 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     const parentListTreeElement = treeElement.parent;
     if (parentListTreeElement) {
       parentListTreeElement.removeChild(treeElement);
-      if (wasSelected) {
-        parentListTreeElement.select();
+      if (this.useTreeViewForExtensionStorage() && parentListTreeElement.childCount() === 0) {
+        this.extensionStorageListTreeElement?.removeChild(parentListTreeElement);
+        this.extensionIdToStorageTreeParentElement.delete(extensionStorage.extensionId);
+      } else {
+        if (wasSelected) {
+          parentListTreeElement.select();
+        }
       }
     }
-    this.extensionStorageTreeElements.delete(extensionStorage);
+    this.extensionStorageTreeElements.delete(extensionStorage.key);
   }
 
   private async sharedStorageAdded(event: Common.EventTarget.EventTargetEvent<SharedStorageForOrigin>): Promise<void> {
@@ -1663,25 +1752,25 @@ export class ExtensionStorageTreeElement extends ApplicationPanelTreeElement {
   private readonly extensionStorage: ExtensionStorage;
   constructor(storagePanel: ResourcesPanel, extensionStorage: ExtensionStorage) {
     super(
-        storagePanel, extensionStorage.name + ` (${extensionStorage.storageArea})`, false,
-        'extension-storage-for-domain');
+        storagePanel, nameForExtensionStorageArea(extensionStorage.storageArea), false, 'extension-storage-for-domain');
     this.extensionStorage = extensionStorage;
     const icon = IconButton.Icon.create('table');
     this.setLeadingIcons([icon]);
   }
 
+  get storageArea(): Protocol.Extensions.StorageArea {
+    return this.extensionStorage.storageArea;
+  }
+
   override get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'storage://' + this.extensionStorage.extensionId + '/' + this.extensionStorage.storageArea as
+    return 'extension-storage://' + this.extensionStorage.extensionId + '/' + this.extensionStorage.storageArea as
         Platform.DevToolsPath.UrlString;
   }
 
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
-    Host.userMetrics.panelShown('dom-storage');
-
-    // TODO(crbug.com/40963428): Call this.resourcesPanel to show extension
-    // storage view
-
+    this.resourcesPanel.showExtensionStorage(this.extensionStorage);
+    Host.userMetrics.panelShown('extension-storage');
     return false;
   }
 
@@ -1698,6 +1787,20 @@ export class ExtensionStorageTreeElement extends ApplicationPanelTreeElement {
   }
 }
 
+export class ExtensionStorageTreeParentElement extends ApplicationPanelTreeElement {
+  private readonly extensionId: string;
+  constructor(storagePanel: ResourcesPanel, extensionId: string, extensionName: string) {
+    super(storagePanel, extensionName, true, 'extension-storage-for-domain');
+    this.extensionId = extensionId;
+    const icon = IconButton.Icon.create('table');
+    this.setLeadingIcons([icon]);
+  }
+
+  override get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'extension-storage://' + this.extensionId as Platform.DevToolsPath.UrlString;
+  }
+}
+
 export class CookieTreeElement extends ApplicationPanelTreeElement {
   private readonly target: SDK.Target.Target;
   private readonly cookieDomainInternal: string;

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 
 export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   protected readonly resourcesPanel: ResourcesPanel;

package/front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -11,7 +11,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/application/BounceTrackingMitigationsTreeElement.ts

@@ -11,7 +11,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -92,8 +92,10 @@ export class DOMStorageItemsView extends StorageItemsView {
     this.grid = new DataGrid.DataGridWithPreview.DataGridWithPreview(
         'dom-storage', this.element, columns, {
           refreshItems: this.refreshItems.bind(this),
-          removeItem: key => this.domStorage?.removeItem(key),
-          setItem: (key, value) => this.domStorage?.setItem(key, value),
+          edit: {
+            removeItem: key => this.domStorage?.removeItem(key),
+            setItem: (key, value) => this.domStorage?.setItem(key, value),
+          },
           createPreview: this.createPreview.bind(this),
           setCanDeleteSelected: this.setCanDeleteSelected.bind(this),
         },

package/front_end/panels/application/ExtensionStorageItemsView.test.ts

@@ -0,0 +1,89 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../../core/common/common.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {
+  describeWithMockConnection,
+} from '../../testing/MockConnection.js';
+import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+
+import * as Resources from './application.js';
+
+import View = Resources.ExtensionStorageItemsView;
+
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+class ExtensionStorageItemsListener {
+  #dispatcher: Common.ObjectWrapper.ObjectWrapper<View.ExtensionStorageItemsDispatcher.EventTypes>;
+  #refreshed: boolean = false;
+
+  constructor(dispatcher: Common.ObjectWrapper.ObjectWrapper<View.ExtensionStorageItemsDispatcher.EventTypes>) {
+    this.#dispatcher = dispatcher;
+    this.#dispatcher.addEventListener(
+        View.ExtensionStorageItemsDispatcher.Events.ITEMS_REFRESHED, this.#itemsRefreshed, this);
+  }
+
+  dispose(): void {
+    this.#dispatcher.removeEventListener(
+        View.ExtensionStorageItemsDispatcher.Events.ITEMS_REFRESHED, this.#itemsRefreshed, this);
+  }
+
+  resetRefreshed(): void {
+    this.#refreshed = false;
+  }
+
+  #itemsRefreshed(): void {
+    this.#refreshed = true;
+  }
+
+  async waitForItemsRefreshed(): Promise<void> {
+    if (!this.#refreshed) {
+      await this.#dispatcher.once(View.ExtensionStorageItemsDispatcher.Events.ITEMS_REFRESHED);
+    }
+    this.#refreshed = true;
+  }
+}
+
+describeWithMockConnection('ExtensionStorageItemsView', function() {
+  let target: SDK.Target.Target;
+  let extensionStorageModel: Resources.ExtensionStorageModel.ExtensionStorageModel|null;
+  let extensionStorage: Resources.ExtensionStorageModel.ExtensionStorage;
+
+  const TEST_EXTENSION_ID = 'abc';
+  const TEST_EXTENSION_NAME = 'Hello World';
+
+  const EXAMPLE_DATA: {[key: string]: string} = {a: 'foo', b: 'bar'};
+
+  beforeEach(() => {
+    target = createTarget();
+    extensionStorageModel = target.model(Resources.ExtensionStorageModel.ExtensionStorageModel);
+    assert.exists(extensionStorageModel);
+    extensionStorage = new Resources.ExtensionStorageModel.ExtensionStorage(
+        extensionStorageModel, TEST_EXTENSION_ID, TEST_EXTENSION_NAME, Protocol.Extensions.StorageArea.Local);
+  });
+
+  it('displays items', async () => {
+    assert.exists(extensionStorageModel);
+    sinon.stub(extensionStorageModel.agent, 'invoke_getStorageItems')
+        .withArgs({id: TEST_EXTENSION_ID, storageArea: Protocol.Extensions.StorageArea.Local})
+        .resolves({
+          data: EXAMPLE_DATA,
+          getError: () => undefined,
+        });
+
+    const view = new View.ExtensionStorageItemsView(extensionStorage);
+
+    const itemsListener = new ExtensionStorageItemsListener(view.extensionStorageItemsDispatcher);
+    await itemsListener.waitForItemsRefreshed();
+
+    assert.deepEqual(
+        view.getEntriesForTesting(), Object.keys(EXAMPLE_DATA).map(key => ({key, value: EXAMPLE_DATA[key]})));
+
+    await coordinator.done();
+    view.detach();
+  });
+});

package/front_end/panels/application/ExtensionStorageItemsView.ts

@@ -0,0 +1,219 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/*
+ * Copyright (C) 2008 Nokia Inc.  All rights reserved.
+ * Copyright (C) 2013 Samsung Electronics. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+import * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
+import * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import type * as UI from '../../ui/legacy/legacy.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import type {ExtensionStorage} from './ExtensionStorageModel.js';
+import {StorageItemsView} from './StorageItemsView.js';
+
+const UIStrings = {
+  /**
+   *@description Text in ExtensionStorage Items View of the Application panel
+   */
+  extensionStorage: 'Extension Storage',
+  /**
+   *@description Text in ExtensionStorage Items View of the Application panel
+   */
+  key: 'Key',
+  /**
+   *@description Text for the value of something
+   */
+  value: 'Value',
+  /**
+   *@description Name for the "Extension Storage Items" table that shows the content of the extension Storage.
+   */
+  extensionStorageItems: 'Extension Storage Items',
+  /**
+   *@description Text for announcing that the "Extension Storage Items" table was cleared, that is, all
+   * entries were deleted.
+   */
+  extensionStorageItemsCleared: 'Extension Storage Items cleared',
+  /**
+   *@description Text for announcing a Extension Storage key/value item has been deleted
+   */
+  extensionStorageItemDeleted: 'The storage item was deleted.',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/ExtensionStorageItemsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export namespace ExtensionStorageItemsDispatcher {
+  export const enum Events {
+    ITEMS_REFRESHED = 'ItemsRefreshed',
+  }
+
+  export type EventTypes = {
+    [Events.ITEMS_REFRESHED]: void,
+  };
+}
+
+export class ExtensionStorageItemsView extends StorageItemsView {
+  #extensionStorage: ExtensionStorage;
+  #grid: DataGrid.DataGridWithPreview.DataGridWithPreview;
+  readonly extensionStorageItemsDispatcher:
+      Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>;
+
+  constructor(extensionStorage: ExtensionStorage) {
+    super(i18nString(UIStrings.extensionStorage), 'extensionStoragePanel');
+
+    this.#extensionStorage = extensionStorage;
+    this.element.setAttribute('jslog', `${VisualLogging.pane().context('extension-storage-data')}`);
+    this.element.classList.add('storage-view', 'table');
+
+    this.extensionStorageItemsDispatcher =
+        new Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>();
+
+    this.#grid = this.#createGrid();
+    this.refreshItems();
+  }
+
+  get #isEditable(): boolean {
+    // The managed storage area is always read only, since it exposes values
+    // set by enterprise policy.
+    return this.#extensionStorage.storageArea !== Protocol.Extensions.StorageArea.Managed;
+  }
+
+  #createGrid(): DataGrid.DataGridWithPreview.DataGridWithPreview {
+    const columns = ([
+      {id: 'key', title: i18nString(UIStrings.key), sortable: true, editable: true, longText: true, weight: 50},
+      {id: 'value', title: i18nString(UIStrings.value), sortable: false, editable: true, longText: true, weight: 50},
+    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+
+    const grid = new DataGrid.DataGridWithPreview.DataGridWithPreview(
+        'extension-storage', this.element, columns, {
+          refreshItems: this.refreshItems.bind(this),
+          edit: this.#isEditable ? {
+            removeItem: async key => {
+              await this.#extensionStorage.removeItem(key);
+              this.refreshItems();
+            },
+            setItem: async (key, value) => {
+              await this.#extensionStorage.setItem(key, value);
+              this.refreshItems();
+            },
+          } :
+                                   undefined,
+          createPreview: this.#createPreview.bind(this),
+          setCanDeleteSelected: canSelect => {
+            if (!this.#isEditable) {
+              return;
+            }
+            this.setCanDeleteSelected(canSelect);
+          },
+        },
+        {
+          title: i18nString(UIStrings.extensionStorageItems),
+          itemDeleted: i18nString(UIStrings.extensionStorageItemDeleted),
+          itemsCleared: i18nString(UIStrings.extensionStorageItemsCleared),
+        });
+    grid.showPreview(null, null);
+
+    return grid;
+  }
+
+  #createPreview(key: string, value: string): Promise<UI.Widget.Widget|null> {
+    const url = 'extension-storage://' + this.#extensionStorage.extensionId + '/' + this.#extensionStorage.storageArea +
+            '/preview/' + key as Platform.DevToolsPath.UrlString;
+    const provider = TextUtils.StaticContentProvider.StaticContentProvider.fromString(
+        url,
+        Common.ResourceType.resourceTypes.XHR,
+        value as string,
+    );
+    return SourceFrame.PreviewFactory.PreviewFactory.createPreview(
+        provider,
+        'text/plain',
+    );
+  }
+
+  setStorage(extensionStorage: ExtensionStorage): void {
+    this.#extensionStorage = extensionStorage;
+
+    // When changing storage area, recreate the grid. This is needed as
+    // DataGridImpl does not currently changing from editable to non-editable
+    // after creation.
+    this.#grid.detach();
+    this.#grid = this.#createGrid();
+
+    this.refreshItems();
+  }
+
+  #extensionStorageItemsCleared(): void {
+    if (!this.isShowing()) {
+      return;
+    }
+
+    this.#grid.clearItems();
+  }
+
+  override deleteSelectedItem(): void {
+    if (!this.#isEditable) {
+      return;
+    }
+    this.#grid.deleteSelectedItem();
+  }
+
+  override refreshItems(): void {
+    const filteredItems = (item: string[]): string => `${item[0]} ${item[1]}`;
+    void this.#extensionStorage.getItems().then(items => {
+      const itemsArray =
+          Object.entries(items).map(([key, value]) => [key, typeof value === 'string' ? value : JSON.stringify(value)]);
+      items && this.#grid.showItems(this.filter(itemsArray, filteredItems));
+      this.extensionStorageItemsDispatcher.dispatchEventToListeners(
+          ExtensionStorageItemsDispatcher.Events.ITEMS_REFRESHED);
+    });
+  }
+
+  override deleteAllItems(): void {
+    if (!this.#isEditable) {
+      return;
+    }
+    this.#extensionStorage.clear().then(
+        () => {
+          this.#extensionStorageItemsCleared();
+        },
+        () => {
+          throw new Error('Unable to clear storage.');
+        });
+  }
+
+  getEntriesForTesting(): Array<{key: string, value: string}> {
+    return this.#grid.dataGridForTesting.rootNode().children.filter(node => node.data.key).map(node => (node.data as {
+                                                                                                 key: string,
+                                                                                                 value: string,
+                                                                                               }));
+  }
+}

package/front_end/panels/application/ExtensionStorageModel.test.ts

@@ -128,6 +128,10 @@ describeWithMockConnection('ExtensionStorageModel', () => {
   });
 
   it('adds/removes ExtensionStorage on Runtime events', async () => {
+    sinon.stub(extensionStorageModel.agent, 'invoke_getStorageItems').resolves({
+      data: {},
+      getError: () => undefined,
+    });
     extensionStorageModel.enable();
 
     assert.isEmpty(extensionStorageModel.storages());
@@ -166,6 +170,10 @@ describeWithMockConnection('ExtensionStorageModel', () => {
   });
 
   it('does not add ExtensionStorage if origin already added', async () => {
+    sinon.stub(extensionStorageModel.agent, 'invoke_getStorageItems').resolves({
+      data: {},
+      getError: () => undefined,
+    });
     extensionStorageModel.enable();
 
     assert.isEmpty(extensionStorageModel.storages());
@@ -189,6 +197,10 @@ describeWithMockConnection('ExtensionStorageModel', () => {
   });
 
   it('removes ExtensionStorage when last ExecutionContext is removed', async () => {
+    sinon.stub(extensionStorageModel.agent, 'invoke_getStorageItems').resolves({
+      data: {},
+      getError: () => undefined,
+    });
     extensionStorageModel.enable();
 
     assert.isEmpty(extensionStorageModel.storages());