chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/animation/AnimationUI.ts

@@ -11,7 +11,6 @@ import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_e
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type AnimationImpl, type KeyframeStyle} from './AnimationModel.js';
 import {type AnimationTimeline, StepTimingFunction} from './AnimationTimeline.js';
 
 const UIStrings = {
@@ -40,9 +39,9 @@ type CachedElement = {
 };
 
 export class AnimationUI {
-  #animationInternal: AnimationImpl;
+  #animationInternal: SDK.AnimationModel.AnimationImpl;
   #timeline: AnimationTimeline;
-  #keyframes?: KeyframeStyle[];
+  #keyframes?: SDK.AnimationModel.KeyframeStyle[];
   #nameElement: HTMLElement;
   readonly #svg: Element;
   #activeIntervalGroup: Element;
@@ -58,7 +57,7 @@ export class AnimationUI {
   #keyframeMoved?: number|null;
   #downMouseX?: number;
 
-  constructor(animation: AnimationImpl, timeline: AnimationTimeline, parentElement: Element) {
+  constructor(animation: SDK.AnimationModel.AnimationImpl, timeline: AnimationTimeline, parentElement: Element) {
     this.#animationInternal = animation;
     this.#timeline = timeline;
 
@@ -94,7 +93,7 @@ export class AnimationUI {
     this.#color = AnimationUI.colorForAnimation(this.#animationInternal);
   }
 
-  static colorForAnimation(animation: AnimationImpl): string {
+  static colorForAnimation(animation: SDK.AnimationModel.AnimationImpl): string {
     const names = Array.from(Colors.keys());
     const hashCode = Platform.StringUtilities.hashCode(animation.name() || animation.id());
     const cappedHashCode = hashCode % names.length;
@@ -110,7 +109,7 @@ export class AnimationUI {
     element.addEventListener('keydown', elementDrag, false);
   }
 
-  animation(): AnimationImpl {
+  animation(): SDK.AnimationModel.AnimationImpl {
     return this.#animationInternal;
   }
 

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

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Animation from './animation.js';
@@ -41,3 +43,16 @@ UI.ViewManager.registerViewExtension({
     return Animation.AnimationTimeline.AnimationTimeline.instance();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [
+      SDK.AnimationModel.AnimationGroup,
+    ];
+  },
+  destination: Common.Revealer.RevealerDestination.SOURCES_PANEL,
+  async loadRevealer() {
+    const Animation = await loadAnimationModule();
+    return new Animation.AnimationTimeline.AnimationGroupRevealer();
+  },
+});

package/front_end/panels/animation/animation.ts

@@ -2,17 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as AnimationDOMNode from './AnimationDOMNode.js';
 import * as AnimationGroupPreviewUI from './AnimationGroupPreviewUI.js';
-import * as AnimationModel from './AnimationModel.js';
 import * as AnimationScreenshotPopover from './AnimationScreenshotPopover.js';
 import * as AnimationTimeline from './AnimationTimeline.js';
 import * as AnimationUI from './AnimationUI.js';
 
 export {
-  AnimationDOMNode,
   AnimationGroupPreviewUI,
-  AnimationModel,
   AnimationScreenshotPopover,
   AnimationTimeline,
   AnimationUI,

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

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
@@ -59,6 +60,8 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   const TEST_ORIGIN_B = 'http://www.example.org/';
   const TEST_ORIGIN_C = 'http://www.example.net/';
 
+  const TEST_EXTENSION_NAME = 'Test Extension';
+
   const ID = 'AA' as Protocol.Page.FrameId;
 
   const EVENTS = [
@@ -192,6 +195,93 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     assert.deepEqual(sidebar.sharedStorageListTreeElement.view.getEventsForTesting(), EVENTS);
   });
 
+  it('shows extension storage based on added models', async () => {
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
+
+    for (const useTreeView of [false, true]) {
+      Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
+      const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
+
+      // Cast to any allows overriding private method.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      sinon.stub(sidebar, 'useTreeViewForExtensionStorage' as any).returns(useTreeView);
+
+      const extensionStorageModel = target.model(Application.ExtensionStorageModel.ExtensionStorageModel);
+      assert.exists(extensionStorageModel);
+
+      const makeFakeExtensionStorage = (storageArea: Protocol.Extensions.StorageArea) =>
+          new Application.ExtensionStorageModel.ExtensionStorage(
+              extensionStorageModel, '', TEST_EXTENSION_NAME, storageArea);
+
+      const fakeModelLocal = makeFakeExtensionStorage(Protocol.Extensions.StorageArea.Local);
+      const fakeModelSession = makeFakeExtensionStorage(Protocol.Extensions.StorageArea.Session);
+
+      extensionStorageModel.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_ADDED, fakeModelLocal);
+      extensionStorageModel.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_ADDED, fakeModelSession);
+
+      if (useTreeView) {
+        assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 1);
+        assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].title, TEST_EXTENSION_NAME);
+        assert.deepStrictEqual(
+            sidebar.extensionStorageListTreeElement!.children()[0].children().map(e => e.title), ['Session', 'Local']);
+      } else {
+        assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 2);
+        assert.deepStrictEqual(
+            sidebar.extensionStorageListTreeElement!.children().map(e => e.title), ['Session', 'Local']);
+      }
+
+      extensionStorageModel.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_REMOVED, fakeModelLocal);
+      extensionStorageModel.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_REMOVED, fakeModelSession);
+      assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 0);
+    }
+  });
+
+  it('does not add extension storage if already added by another model', async () => {
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
+
+    Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
+    const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
+
+    // Fakes adding an ExtensionStorage to the ExtensionStorageModel for
+    // `target`. Returns a function that can be used to trigger a removal.
+    const addFakeExtensionStorage = (target: SDK.Target.Target): () => void => {
+      const model = target.model(Application.ExtensionStorageModel.ExtensionStorageModel);
+      assert.exists(model);
+
+      const extensionStorage = new Application.ExtensionStorageModel.ExtensionStorage(
+          model, '', TEST_EXTENSION_NAME, Protocol.Extensions.StorageArea.Local);
+
+      const stub = sinon.stub(model, 'storageForIdAndArea').returns(extensionStorage);
+      model.dispatchEventToListeners(
+          Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_ADDED, extensionStorage);
+
+      return () => {
+        stub.restore();
+        model.dispatchEventToListeners(
+            Application.ExtensionStorageModel.Events.EXTENSION_STORAGE_REMOVED, extensionStorage);
+      };
+    };
+
+    // Add a fake extension storage to the main target. The UI should be updated.
+    addFakeExtensionStorage(target);
+    assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].childCount(), 1);
+
+    // Add a fake extension storage using a non-main target (e.g, an iframe).
+    // Make sure we don't add a second entry to the UI.
+    const removeFrameStorage =
+        addFakeExtensionStorage(createTarget({type: SDK.Target.Type.FRAME, parentTarget: target}));
+    assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].childCount(), 1);
+
+    // Removing the frame also shouldn't do anything, since the main frame
+    // still exists.
+    removeFrameStorage();
+    assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].childCount(), 1);
+  });
+
   async function getExpectedCall(expectedCall: string): Promise<sinon.SinonSpy> {
     Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
@@ -294,6 +384,22 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   it('adds indexed db after scope change',
      testUiUpdateOnScopeChange(
          Application.IndexedDBModel.IndexedDBModel, 'databases', 'indexedDBListTreeElement.appendChild'));
+
+  it('uses extension name when available for tree element title', () => {
+    const panel = Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
+    const extensionName = 'Test Extension';
+    assert.strictEqual(
+        new Application.ApplicationPanelSidebar.ExtensionStorageTreeParentElement(panel, 'id', extensionName).title,
+        extensionName);
+  });
+
+  it('uses extension id as fallback for tree element title', () => {
+    const panel = Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
+    const extensionId = 'id';
+    assert.strictEqual(
+        new Application.ApplicationPanelSidebar.ExtensionStorageTreeParentElement(panel, extensionId, '').title,
+        extensionId);
+  });
 });
 
 describeWithMockConnection('IDBDatabaseTreeElement', () => {

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,60 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.addExtensionStorage(extensionStorage);
   }
 
+  private useTreeViewForExtensionStorage(extensionStorage: ExtensionStorage): boolean {
+    // If the origin the storage is associated with matches the top-level
+    // target (e.g, an extension service worker or top-level
+    // chrome-extension:// page), there is likely only one extension in the
+    // context we are inspecting and we can show the storage as a direct child.
+    // In other contexts (where multiple extensions may be injected) use a tree
+    // view where storage areas are children of the extension they are
+    // associated with.
+    return !extensionStorage.matchesTarget(this.target);
+  }
+
+  private getExtensionStorageAreaParent(extensionStorage: ExtensionStorage): ApplicationPanelTreeElement|undefined {
+    if (!this.useTreeViewForExtensionStorage(extensionStorage)) {
+      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 +871,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 +886,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(extensionStorage) && 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 +1755,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 +1790,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 || extensionId, 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;
@@ -1774,6 +1880,7 @@ export class StorageCategoryView extends UI.Widget.VBox {
     }
     if (link && this.linkElement) {
       this.linkElement.setAttribute('href', link);
+      this.linkElement.setAttribute('title', link);
       this.linkElement.classList.remove('hidden');
     }
   }

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),
         },