chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/application/IndexedDBModel.ts

@@ -34,28 +34,26 @@ import * as Protocol from '../../generated/protocol.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 
 export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements ProtocolProxyApi.StorageDispatcher {
-  private readonly securityOriginManager: SDK.SecurityOriginManager.SecurityOriginManager|null;
+  private readonly storageKeyManager: SDK.StorageKeyManager.StorageKeyManager|null;
   private readonly indexedDBAgent: ProtocolProxyApi.IndexedDBApi;
   private readonly storageAgent: ProtocolProxyApi.StorageApi;
   private readonly databasesInternal: Map<DatabaseId, Database>;
-  private databaseNamesBySecurityOrigin: {
-    [x: string]: string[],
-  };
-  private readonly originsUpdated: Set<string>;
+  private databaseNamesByStorageKey: Map<string, Set<string>>;
+  private readonly updatedStorageKeys: Set<string>;
   private readonly throttler: Common.Throttler.Throttler;
   private enabled?: boolean;
 
   constructor(target: SDK.Target.Target) {
     super(target);
     target.registerStorageDispatcher(this);
-    this.securityOriginManager = target.model(SDK.SecurityOriginManager.SecurityOriginManager);
+    this.storageKeyManager = target.model(SDK.StorageKeyManager.StorageKeyManager);
     this.indexedDBAgent = target.indexedDBAgent();
     this.storageAgent = target.storageAgent();
 
     this.databasesInternal = new Map();
-    this.databaseNamesBySecurityOrigin = {};
+    this.databaseNamesByStorageKey = new Map();
 
-    this.originsUpdated = new Set();
+    this.updatedStorageKeys = new Set();
     this.throttler = new Common.Throttler.Throttler(1000);
   }
 
@@ -149,43 +147,38 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     }
 
     void this.indexedDBAgent.invoke_enable();
-    if (this.securityOriginManager) {
-      this.securityOriginManager.addEventListener(
-          SDK.SecurityOriginManager.Events.SecurityOriginAdded, this.securityOriginAdded, this);
-      this.securityOriginManager.addEventListener(
-          SDK.SecurityOriginManager.Events.SecurityOriginRemoved, this.securityOriginRemoved, this);
-
-      for (const securityOrigin of this.securityOriginManager.securityOrigins()) {
-        this.addOrigin(securityOrigin);
+    if (this.storageKeyManager) {
+      this.storageKeyManager.addEventListener(SDK.StorageKeyManager.Events.StorageKeyAdded, this.storageKeyAdded, this);
+      this.storageKeyManager.addEventListener(
+          SDK.StorageKeyManager.Events.StorageKeyRemoved, this.storageKeyRemoved, this);
+      for (const storageKey of this.storageKeyManager.storageKeys()) {
+        this.addStorageKey(storageKey);
       }
     }
 
     this.enabled = true;
   }
 
-  clearForOrigin(origin: string): void {
-    if (!this.enabled || !this.databaseNamesBySecurityOrigin[origin]) {
+  clearForStorageKey(storageKey: string): void {
+    if (!this.enabled || !this.databaseNamesByStorageKey.has(storageKey)) {
       return;
     }
 
-    this.removeOrigin(origin);
-    this.addOrigin(origin);
+    this.removeStorageKey(storageKey);
+    this.addStorageKey(storageKey);
   }
 
   async deleteDatabase(databaseId: DatabaseId): Promise<void> {
     if (!this.enabled) {
       return;
     }
-    if (databaseId.securityOrigin) {
-      await this.indexedDBAgent.invoke_deleteDatabase(
-          {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name});
-      void this.loadDatabaseNames(databaseId.securityOrigin);
-    }
+    await this.indexedDBAgent.invoke_deleteDatabase({storageKey: databaseId.storageKey, databaseName: databaseId.name});
+    void this.loadDatabaseNamesByStorageKey(databaseId.storageKey);
   }
 
   async refreshDatabaseNames(): Promise<void> {
-    for (const securityOrigin in this.databaseNamesBySecurityOrigin) {
-      await this.loadDatabaseNames(securityOrigin);
+    for (const storageKey of this.databaseNamesByStorageKey.keys()) {
+      await this.loadDatabaseNamesByStorageKey(storageKey);
     }
     this.dispatchEventToListeners(Events.DatabaseNamesRefreshed);
   }
@@ -195,116 +188,98 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
   }
 
   async clearObjectStore(databaseId: DatabaseId, objectStoreName: string): Promise<void> {
-    if (databaseId.securityOrigin) {
-      await this.indexedDBAgent.invoke_clearObjectStore(
-          {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name, objectStoreName});
-    }
+    await this.indexedDBAgent.invoke_clearObjectStore(
+        {storageKey: databaseId.storageKey, databaseName: databaseId.name, objectStoreName});
   }
 
   async deleteEntries(databaseId: DatabaseId, objectStoreName: string, idbKeyRange: IDBKeyRange): Promise<void> {
     const keyRange = IndexedDBModel.keyRangeFromIDBKeyRange(idbKeyRange);
-    if (databaseId.securityOrigin) {
-      await this.indexedDBAgent.invoke_deleteObjectStoreEntries(
-          {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name, objectStoreName, keyRange});
-    }
+    await this.indexedDBAgent.invoke_deleteObjectStoreEntries(
+        {storageKey: databaseId.storageKey, databaseName: databaseId.name, objectStoreName, keyRange});
   }
 
-  private securityOriginAdded(event: Common.EventTarget.EventTargetEvent<string>): void {
-    this.addOrigin(event.data);
+  private storageKeyAdded(event: Common.EventTarget.EventTargetEvent<string>): void {
+    this.addStorageKey(event.data);
   }
 
-  private securityOriginRemoved(event: Common.EventTarget.EventTargetEvent<string>): void {
-    this.removeOrigin(event.data);
+  private storageKeyRemoved(event: Common.EventTarget.EventTargetEvent<string>): void {
+    this.removeStorageKey(event.data);
   }
 
-  private addOrigin(securityOrigin: string): void {
-    console.assert(!this.databaseNamesBySecurityOrigin[securityOrigin]);
-    this.databaseNamesBySecurityOrigin[securityOrigin] = [];
-    void this.loadDatabaseNames(securityOrigin);
-    if (this.isValidSecurityOrigin(securityOrigin)) {
-      void this.storageAgent.invoke_trackIndexedDBForOrigin({origin: securityOrigin});
-    }
+  private addStorageKey(storageKey: string): void {
+    console.assert(!this.databaseNamesByStorageKey.has(storageKey));
+    this.databaseNamesByStorageKey.set(storageKey, new Set());
+    void this.loadDatabaseNamesByStorageKey(storageKey);
+    void this.storageAgent.invoke_trackIndexedDBForStorageKey({storageKey});
   }
 
-  private removeOrigin(securityOrigin: string): void {
-    console.assert(Boolean(this.databaseNamesBySecurityOrigin[securityOrigin]));
-    for (let i = 0; i < this.databaseNamesBySecurityOrigin[securityOrigin].length; ++i) {
-      this.databaseRemoved(securityOrigin, this.databaseNamesBySecurityOrigin[securityOrigin][i]);
+  private removeStorageKey(storageKey: string): void {
+    console.assert(this.databaseNamesByStorageKey.has(storageKey));
+    for (const name of this.databaseNamesByStorageKey.get(storageKey) || []) {
+      this.databaseRemovedForStorageKey(storageKey, name);
     }
-    delete this.databaseNamesBySecurityOrigin[securityOrigin];
-    if (this.isValidSecurityOrigin(securityOrigin)) {
-      void this.storageAgent.invoke_untrackIndexedDBForOrigin({origin: securityOrigin});
-    }
-  }
-
-  private isValidSecurityOrigin(securityOrigin: string): boolean {
-    const parsedURL = Common.ParsedURL.ParsedURL.fromString(securityOrigin);
-    return parsedURL !== null && parsedURL.scheme.startsWith('http');
+    this.databaseNamesByStorageKey.delete(storageKey);
+    void this.storageAgent.invoke_untrackIndexedDBForStorageKey({storageKey});
   }
 
-  private updateOriginDatabaseNames(securityOrigin: string, databaseNames: string[]): void {
-    const newDatabaseNames = new Set<string>(databaseNames);
-    const oldDatabaseNames = new Set<string>(this.databaseNamesBySecurityOrigin[securityOrigin]);
+  private updateStorageKeyDatabaseNames(storageKey: string, databaseNames: string[]): void {
+    const newDatabaseNames = new Set(databaseNames);
+    const oldDatabaseNames = new Set(this.databaseNamesByStorageKey.get(storageKey));
 
-    this.databaseNamesBySecurityOrigin[securityOrigin] = databaseNames;
+    this.databaseNamesByStorageKey.set(storageKey, newDatabaseNames);
 
     for (const databaseName of oldDatabaseNames) {
       if (!newDatabaseNames.has(databaseName)) {
-        this.databaseRemoved(securityOrigin, databaseName);
+        this.databaseRemovedForStorageKey(storageKey, databaseName);
       }
     }
     for (const databaseName of newDatabaseNames) {
       if (!oldDatabaseNames.has(databaseName)) {
-        this.databaseAdded(securityOrigin, databaseName);
+        this.databaseAddedForStorageKey(storageKey, databaseName);
       }
     }
   }
 
   databases(): DatabaseId[] {
     const result = [];
-    for (const securityOrigin in this.databaseNamesBySecurityOrigin) {
-      const databaseNames = this.databaseNamesBySecurityOrigin[securityOrigin];
-      for (let i = 0; i < databaseNames.length; ++i) {
-        result.push(new DatabaseId(securityOrigin, undefined, databaseNames[i]));
+    for (const [storageKey, databaseNames] of this.databaseNamesByStorageKey) {
+      for (const name of databaseNames) {
+        result.push(new DatabaseId(storageKey, name));
       }
     }
     return result;
   }
 
-  private databaseAdded(securityOrigin: string, databaseName: string): void {
-    const databaseId = new DatabaseId(securityOrigin, undefined, databaseName);
+  private databaseAddedForStorageKey(storageKey: string, databaseName: string): void {
+    const databaseId = new DatabaseId(storageKey, databaseName);
     this.dispatchEventToListeners(Events.DatabaseAdded, {model: this, databaseId: databaseId});
   }
 
-  private databaseRemoved(securityOrigin: string, databaseName: string): void {
-    const databaseId = new DatabaseId(securityOrigin, undefined, databaseName);
+  private databaseRemovedForStorageKey(storageKey: string, databaseName: string): void {
+    const databaseId = new DatabaseId(storageKey, databaseName);
     this.dispatchEventToListeners(Events.DatabaseRemoved, {model: this, databaseId: databaseId});
   }
 
-  private async loadDatabaseNames(securityOrigin: string): Promise<string[]> {
-    const {databaseNames} = await this.indexedDBAgent.invoke_requestDatabaseNames({securityOrigin});
+  private async loadDatabaseNamesByStorageKey(storageKey: string): Promise<string[]> {
+    const {databaseNames} = await this.indexedDBAgent.invoke_requestDatabaseNames({storageKey});
     if (!databaseNames) {
       return [];
     }
-    if (!this.databaseNamesBySecurityOrigin[securityOrigin]) {
+    if (!this.databaseNamesByStorageKey.has(storageKey)) {
       return [];
     }
-    this.updateOriginDatabaseNames(securityOrigin, databaseNames);
+    this.updateStorageKeyDatabaseNames(storageKey, databaseNames);
     return databaseNames;
   }
 
   private async loadDatabase(databaseId: DatabaseId, entriesUpdated: boolean): Promise<void> {
-    let databaseWithObjectStores: Protocol.IndexedDB.DatabaseWithObjectStores|null = null;
-    if (databaseId.securityOrigin) {
-      databaseWithObjectStores = (await this.indexedDBAgent.invoke_requestDatabase({
-                                   securityOrigin: databaseId.securityOrigin,
-                                   databaseName: databaseId.name,
-                                 })).databaseWithObjectStores;
-      if (!this.databaseNamesBySecurityOrigin[databaseId.securityOrigin]) {
-        return;
-      }
+    const databaseWithObjectStores = (await this.indexedDBAgent.invoke_requestDatabase({
+                                       storageKey: databaseId.storageKey,
+                                       databaseName: databaseId.name,
+                                     })).databaseWithObjectStores;
+    if (!this.databaseNamesByStorageKey.has(databaseId.storageKey)) {
+      return;
     }
-
     if (!databaseWithObjectStores) {
       return;
     }
@@ -346,24 +321,16 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
       callback: (arg0: Array<Entry>, arg1: boolean) => void): Promise<void> {
     const keyRange = idbKeyRange ? IndexedDBModel.keyRangeFromIDBKeyRange(idbKeyRange) : undefined;
     const runtimeModel = this.target().model(SDK.RuntimeModel.RuntimeModel);
-    let response: Protocol.IndexedDB.RequestDataResponse|null = null;
-
-    if (databaseId.securityOrigin) {
-      response = await this.indexedDBAgent.invoke_requestData({
-        securityOrigin: databaseId.securityOrigin,
-        databaseName,
-        objectStoreName,
-        indexName,
-        skipCount,
-        pageSize,
-        keyRange,
-      });
-      if (!runtimeModel || !this.databaseNamesBySecurityOrigin[databaseId.securityOrigin]) {
-        return;
-      }
-    }
-
-    if (!response) {
+    const response = await this.indexedDBAgent.invoke_requestData({
+      storageKey: databaseId.storageKey,
+      databaseName,
+      objectStoreName,
+      indexName,
+      skipCount,
+      pageSize,
+      keyRange,
+    });
+    if (!runtimeModel || !this.databaseNamesByStorageKey.has(databaseId.storageKey)) {
       return;
     }
     if (response.getError()) {
@@ -388,15 +355,9 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
   async getMetadata(databaseId: DatabaseId, objectStore: ObjectStore): Promise<ObjectStoreMetadata|null> {
     const databaseName = databaseId.name;
     const objectStoreName = objectStore.name;
-    let response: Protocol.IndexedDB.GetMetadataResponse|null = null;
-    if (databaseId.securityOrigin) {
-      response = await this.indexedDBAgent.invoke_getMetadata(
-          {securityOrigin: databaseId.securityOrigin, databaseName, objectStoreName});
-    }
+    const response = await this.indexedDBAgent.invoke_getMetadata(
+        {storageKey: databaseId.storageKey, databaseName, objectStoreName});
 
-    if (!response) {
-      return null;
-    }
     if (response.getError()) {
       console.error('IndexedDBAgent error: ' + response.getError());
       return null;
@@ -404,28 +365,29 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     return {entriesCount: response.entriesCount, keyGeneratorValue: response.keyGeneratorValue};
   }
 
-  private async refreshDatabaseList(securityOrigin: string): Promise<void> {
-    const databaseNames = await this.loadDatabaseNames(securityOrigin);
+  private async refreshDatabaseListForStorageKey(storageKey: string): Promise<void> {
+    const databaseNames = await this.loadDatabaseNamesByStorageKey(storageKey);
     for (const databaseName of databaseNames) {
-      void this.loadDatabase(new DatabaseId(securityOrigin, undefined, databaseName), false);
+      void this.loadDatabase(new DatabaseId(storageKey, databaseName), false);
     }
   }
 
-  indexedDBListUpdated({origin: securityOrigin}: Protocol.Storage.IndexedDBListUpdatedEvent): void {
-    this.originsUpdated.add(securityOrigin);
-
-    void this.throttler.schedule(() => {
-      const promises = Array.from(this.originsUpdated, securityOrigin => {
-        void this.refreshDatabaseList(securityOrigin);
+  indexedDBListUpdated({storageKey: storageKey}: Protocol.Storage.IndexedDBListUpdatedEvent): void {
+    if (storageKey) {
+      this.updatedStorageKeys.add(storageKey);
+      void this.throttler.schedule(() => {
+        const promises = Array.from(this.updatedStorageKeys, storageKey => {
+          void this.refreshDatabaseListForStorageKey(storageKey);
+        });
+        this.updatedStorageKeys.clear();
+        return Promise.all(promises);
       });
-      this.originsUpdated.clear();
-      return Promise.all(promises);
-    });
+    }
   }
 
-  indexedDBContentUpdated({origin: securityOrigin, databaseName, objectStoreName}:
-                              Protocol.Storage.IndexedDBContentUpdatedEvent): void {
-    const databaseId = new DatabaseId(securityOrigin, undefined, databaseName);
+  indexedDBContentUpdated({storageKey, databaseName, objectStoreName}: Protocol.Storage.IndexedDBContentUpdatedEvent):
+      void {
+    const databaseId = new DatabaseId(storageKey, databaseName);
     this.dispatchEventToListeners(
         Events.IndexedDBContentUpdated, {databaseId: databaseId, objectStoreName: objectStoreName, model: this});
   }
@@ -438,6 +400,9 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
 
   interestGroupAccessed(_event: Protocol.Storage.InterestGroupAccessedEvent): void {
   }
+
+  sharedStorageAccessed(_event: Protocol.Storage.SharedStorageAccessedEvent): void {
+  }
 }
 
 SDK.SDKModel.SDKModel.register(IndexedDBModel, {capabilities: SDK.Target.Capability.Storage, autostart: false});
@@ -475,17 +440,15 @@ export class Entry {
 }
 
 export class DatabaseId {
-  readonly securityOrigin?: string;
-  readonly storageKey?: string;
+  readonly storageKey: string;
   name: string;
-  constructor(securityOrigin: string|undefined, storageKey: string|undefined, name: string) {
-    securityOrigin ? this.securityOrigin = securityOrigin : (storageKey ? this.storageKey = storageKey : undefined);
+  constructor(storageKey: string, name: string) {
+    this.storageKey = storageKey;
     this.name = name;
   }
 
   equals(databaseId: DatabaseId): boolean {
-    return this.name === databaseId.name && this.securityOrigin === databaseId.securityOrigin &&
-        this.storageKey === databaseId.storageKey;
+    return this.name === databaseId.name && this.storageKey === databaseId.storageKey;
   }
 }
 

package/front_end/panels/application/IndexedDBViews.ts

@@ -198,9 +198,7 @@ export class IDBDatabaseView extends UI.Widget.VBox {
   }
 
   private refreshDatabase(): void {
-    if (this.database.databaseId.securityOrigin) {
-      this.securityOriginElement.textContent = this.database.databaseId.securityOrigin;
-    }
+    this.securityOriginElement.textContent = this.database.databaseId.storageKey;
     if (this.versionElement) {
       this.versionElement.textContent = this.database.version.toString();
     }

package/front_end/panels/application/InterestGroupStorageModel.ts

@@ -73,6 +73,9 @@ export class InterestGroupStorageModel extends SDK.SDKModel.SDKModel<EventTypes>
 
   cacheStorageContentUpdated(_event: Protocol.Storage.CacheStorageContentUpdatedEvent): void {
   }
+
+  sharedStorageAccessed(_event: Protocol.Storage.SharedStorageAccessedEvent): void {
+  }
 }
 
 SDK.SDKModel.SDKModel.register(

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -41,7 +41,7 @@ export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
   }
 
   async getInterestGroupDetails(owner: string, name: string): Promise<Protocol.Storage.InterestGroupDetails|null> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return null;
     }

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -5,6 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as ApplicationComponents from './components/components.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
@@ -36,7 +37,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = new ReportingApiView();
+      this.view = new ReportingApiView(new ApplicationComponents.EndpointsGrid.EndpointsGrid());
     }
     this.showView(this.view);
     Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.reporting_api]);

package/front_end/panels/application/ReportingApiView.ts

@@ -4,19 +4,20 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as ApplicationComponents from './components/components.js';
+import type * as ApplicationComponents from './components/components.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 import {ReportingApiReportsView} from './ReportingApiReportsView.js';
 
 export class ReportingApiView extends UI.SplitWidget.SplitWidget {
-  private readonly endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
+  private readonly endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid;
   private endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
 
-  constructor() {
+  constructor(endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid) {
     super(/* isVertical: */ false, /* secondIsSidebar: */ true);
+    this.endpointsGrid = endpointsGrid;
     this.endpoints = new Map();
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     const networkManager = mainTarget && mainTarget.model(SDK.NetworkManager.NetworkManager);
     if (networkManager) {
       networkManager.addEventListener(

package/front_end/panels/application/StorageView.ts

@@ -406,11 +406,11 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
 
     if (this.target) {
       const includeThirdPartyCookies = this.includeThirdPartyCookiesSetting.get();
-      // TODO(crbug.com/1313434) Prioritize storageKey once everything is ready
-      if (this.securityOrigin) {
+      if (this.storageKey) {
+        StorageView.clearByStorageKey(
+            this.target, this.storageKey, this.securityOrigin, selectedStorageTypes, includeThirdPartyCookies);
+      } else if (this.securityOrigin) {
         StorageView.clear(this.target, this.securityOrigin, selectedStorageTypes, includeThirdPartyCookies);
-      } else if (this.storageKey) {
-        StorageView.clearByStorageKey(this.target, this.storageKey, selectedStorageTypes);
       }
     }
 
@@ -439,15 +439,6 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       }
     }
 
-    if (set.has(Protocol.Storage.StorageType.Indexeddb) || hasAll) {
-      for (const target of SDK.TargetManager.TargetManager.instance().targets()) {
-        const indexedDBModel = target.model(IndexedDBModel);
-        if (indexedDBModel) {
-          indexedDBModel.clearForOrigin(securityOrigin);
-        }
-      }
-    }
-
     if (set.has(Protocol.Storage.StorageType.Local_storage) || hasAll) {
       const storageModel = target.model(DOMStorageModel);
       if (storageModel) {
@@ -472,7 +463,9 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
-  static clearByStorageKey(target: SDK.Target.Target, storageKey: string, selectedStorageTypes: string[]): void {
+  static clearByStorageKey(
+      target: SDK.Target.Target, storageKey: string, originForCookies: string|undefined, selectedStorageTypes: string[],
+      includeThirdPartyCookies: boolean): void {
     void target.storageAgent().invoke_clearDataForStorageKey(
         {storageKey, storageTypes: selectedStorageTypes.join(',')});
 
@@ -485,6 +478,24 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
         storageModel.clearForStorageKey(storageKey);
       }
     }
+
+    if (set.has(Protocol.Storage.StorageType.Indexeddb) || hasAll) {
+      for (const target of SDK.TargetManager.TargetManager.instance().targets()) {
+        const indexedDBModel = target.model(IndexedDBModel);
+        if (indexedDBModel) {
+          indexedDBModel.clearForStorageKey(storageKey);
+        }
+      }
+    }
+
+    if (originForCookies && (set.has(Protocol.Storage.StorageType.Cookies) || hasAll)) {
+      void target.storageAgent().invoke_clearDataForOrigin(
+          {origin: originForCookies, storageTypes: Protocol.Storage.StorageType.Cookies});
+      const cookieModel = target.model(SDK.CookieModel.CookieModel);
+      if (cookieModel) {
+        void cookieModel.clear(undefined, includeThirdPartyCookies ? undefined : originForCookies);
+      }
+    }
   }
 
   async doUpdate(): Promise<void> {
@@ -607,14 +618,6 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 
-  private async clear(target: SDK.Target.Target, resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel):
-      Promise<void> {
-    const storageKey = await resourceTreeModel.getMainStorageKey();
-    if (storageKey) {
-      StorageView.clearByStorageKey(target, storageKey, AllStorageTypes);
-    }
-  }
-
   private handleClear(includeThirdPartyCookies: boolean): boolean {
     const target = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!target) {
@@ -625,12 +628,13 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       return false;
     }
     const securityOrigin = resourceTreeModel.getMainSecurityOrigin();
-    // TODO(crbug.com/1313434) Prioritize storageKey functionality once everything is ready
-    if (securityOrigin) {
+    const storageKey = void resourceTreeModel.getMainStorageKey();
+    if (storageKey) {
+      StorageView.clearByStorageKey(
+          target, storageKey, securityOrigin ? securityOrigin : undefined, AllStorageTypes, includeThirdPartyCookies);
+    } else if (securityOrigin) {
       StorageView.clear(target, securityOrigin, AllStorageTypes, includeThirdPartyCookies);
-      return true;
     }
-    void this.clear(target, resourceTreeModel);
     return true;
   }
 }

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -40,7 +40,7 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = new TrustTokensViewWidgetWrapper();
+      this.view = new TrustTokensViewWidgetWrapper(new ApplicationComponents.TrustTokensView.TrustTokensView());
     }
     this.showView(this.view);
     Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.trust_tokens]);
@@ -49,16 +49,17 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
 }
 
 export class TrustTokensViewWidgetWrapper extends UI.ThrottledWidget.ThrottledWidget {
-  private readonly trustTokensView = new ApplicationComponents.TrustTokensView.TrustTokensView();
+  private readonly trustTokensView: ApplicationComponents.TrustTokensView.TrustTokensView;
 
-  constructor() {
+  constructor(trustTokensView: ApplicationComponents.TrustTokensView.TrustTokensView) {
     super(/* isWebComponent */ false, REFRESH_INTERVAL_MS);
+    this.trustTokensView = trustTokensView;
     this.contentElement.appendChild(this.trustTokensView);
     this.update();
   }
 
   protected async doUpdate(): Promise<void> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }

package/front_end/panels/application/application.ts

@@ -16,14 +16,17 @@ import * as IndexedDBModel from './IndexedDBModel.js';
 import * as IndexedDBViews from './IndexedDBViews.js';
 import * as InterestGroupStorageModel from './InterestGroupStorageModel.js';
 import * as InterestGroupStorageView from './InterestGroupStorageView.js';
+import * as InterestGroupTreeElement from './InterestGroupTreeElement.js';
 import * as OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
 import * as ReportingApiReportsView from './ReportingApiReportsView.js';
+import * as ReportingApiView from './ReportingApiView.js';
 import * as ResourcesPanel from './ResourcesPanel.js';
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
 import * as ServiceWorkersView from './ServiceWorkersView.js';
 import * as ServiceWorkerUpdateCycleView from './ServiceWorkerUpdateCycleView.js';
 import * as StorageItemsView from './StorageItemsView.js';
 import * as StorageView from './StorageView.js';
+import * as TrustTokensTreeElement from './TrustTokensTreeElement.js';
 
 export {
   ApplicationPanelSidebar,
@@ -40,12 +43,15 @@ export {
   IndexedDBViews,
   InterestGroupStorageModel,
   InterestGroupStorageView,
+  InterestGroupTreeElement,
   OpenedWindowDetailsView,
   ReportingApiReportsView,
+  ReportingApiView,
   ResourcesPanel,
   ServiceWorkerCacheViews,
   ServiceWorkersView,
   ServiceWorkerUpdateCycleView,
   StorageItemsView,
   StorageView,
+  TrustTokensTreeElement,
 };

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

@@ -507,9 +507,13 @@ const UIStrings = {
  */
   errorDocument: 'Back/forward cache is disabled due to a document error.',
   /**
- *  @description Description text for not restored reason ErrorDocument.
+ *  @description Description text for not restored reason FencedFramesEmbedder.
  */
   fencedFramesEmbedder: 'Pages using FencedFrames cannot be stored in bfcache.',
+  /**
+ *  @description Description text for not restored reason KeepaliveRequest.
+ */
+  keepaliveRequest: 'Back/forward cache is disabled due to a keepalive request.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheStrings.ts', UIStrings);
@@ -648,4 +652,5 @@ export const NotRestoredReasonDescription = {
       {name: i18nLazyString(UIStrings.embedderExtensionSentMessageToCachedFrame)},
   'ErrorDocument': {name: i18nLazyString(UIStrings.errorDocument)},
   'FencedFramesEmbedder': {name: i18nLazyString(UIStrings.fencedFramesEmbedder)},
+  'KeepaliveRequest': {name: i18nLazyString(UIStrings.keepaliveRequest)},
 };