chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/application/ExtensionStorageModel.ts

@@ -22,6 +22,10 @@ export class ExtensionStorage extends Common.ObjectWrapper.ObjectWrapper<{}> {
     this.#storageAreaInternal = storageArea;
   }
 
+  get model(): ExtensionStorageModel {
+    return this.#model;
+  }
+
   get extensionId(): string {
     return this.#extensionIdInternal;
   }
@@ -30,13 +34,26 @@ export class ExtensionStorage extends Common.ObjectWrapper.ObjectWrapper<{}> {
     return this.#nameInternal;
   }
 
+  // Returns a key that uniquely identifies this extension ID and storage area,
+  // but which is not unique across targets, so we can identify two identical
+  // storage areas across frames.
+  get key(): string {
+    return `${this.extensionId}-${this.storageArea}`;
+  }
+
   get storageArea(): Protocol.Extensions.StorageArea {
     return this.#storageAreaInternal;
   }
 
-  async getItems(): Promise<{[key: string]: unknown}> {
-    const response = await this.#model.agent.invoke_getStorageItems(
-        {id: this.#extensionIdInternal, storageArea: this.#storageAreaInternal});
+  async getItems(keys?: string[]): Promise<{[key: string]: unknown}> {
+    const params: Protocol.Extensions.GetStorageItemsRequest = {
+      id: this.#extensionIdInternal,
+      storageArea: this.#storageAreaInternal,
+    };
+    if (keys) {
+      params.keys = keys;
+    }
+    const response = await this.#model.agent.invoke_getStorageItems(params);
     if (response.getError()) {
       throw new Error(response.getError());
     }
@@ -98,21 +115,45 @@ export class ExtensionStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
     this.#enabled = true;
   }
 
+  #getStoragesForExtension(id: string): Map<Protocol.Extensions.StorageArea, ExtensionStorage> {
+    const existingStorages = this.#storagesInternal.get(id);
+
+    if (existingStorages) {
+      return existingStorages;
+    }
+
+    const newStorages = new Map();
+    this.#storagesInternal.set(id, newStorages);
+    return newStorages;
+  }
+
   #addExtension(id: string, name: string): void {
     for (const storageArea
              of [Protocol.Extensions.StorageArea.Session, Protocol.Extensions.StorageArea.Local,
                  Protocol.Extensions.StorageArea.Sync, Protocol.Extensions.StorageArea.Managed]) {
-      const storages = this.#storagesInternal.get(id);
+      const storages = this.#getStoragesForExtension(id);
       const storage = new ExtensionStorage(this, id, name, storageArea);
 
-      if (!storages) {
-        this.#storagesInternal.set(id, new Map([[storageArea, storage]]));
-      } else {
-        console.assert(!storages.get(storageArea));
-        storages.set(storageArea, storage);
-      }
-
-      this.dispatchEventToListeners(Events.EXTENSION_STORAGE_ADDED, storage);
+      console.assert(!storages.get(storageArea));
+
+      storage.getItems([])
+          .then(() => {
+            // The extension may have been removed in the meantime.
+            if (this.#storagesInternal.get(id) !== storages) {
+              return;
+            }
+            // The storage area may have been added in the meantime.
+            if (storages.get(storageArea)) {
+              return;
+            }
+            storages.set(storageArea, storage);
+            this.dispatchEventToListeners(Events.EXTENSION_STORAGE_ADDED, storage);
+          })
+          .catch(
+              () => {
+                  // Storage area is inaccessible (extension may have restricted access
+                  // or not enabled the API).
+              });
     }
   }
 
@@ -124,8 +165,10 @@ export class ExtensionStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
     }
 
     for (const [key, storage] of storages) {
-      this.dispatchEventToListeners(Events.EXTENSION_STORAGE_REMOVED, storage);
+      // Delete this before firing the event, since this matches the behavior
+      // of other models and meets expectations for a removed event.
       storages.delete(key);
+      this.dispatchEventToListeners(Events.EXTENSION_STORAGE_REMOVED, storage);
     }
 
     this.#storagesInternal.delete(id);

package/front_end/panels/application/IndexedDBViews.ts

@@ -28,10 +28,11 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/components/report_view/report_view.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as ReportView from '../../ui/components/report_view/report_view.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -39,17 +40,12 @@ import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ApplicationComponents from './components/components.js';
-import {
-  type Database,
-  type DatabaseId,
-  type Entry,
-  type Index,
-  type IndexedDBModel,
-  type ObjectStore,
-  type ObjectStoreMetadata,
-} from './IndexedDBModel.js';
+import type {
+  Database, DatabaseId, Entry, Index, IndexedDBModel, ObjectStore, ObjectStoreMetadata} from './IndexedDBModel.js';
 import indexedDBViewsStyles from './indexedDBViews.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text in Indexed DBViews of the Application panel
@@ -170,16 +166,15 @@ export class IDBDatabaseView extends ApplicationComponents.StorageMetadataView.S
     if (!this.database) {
       return LitHtml.nothing;
     }
-    return LitHtml.html`
+    return html`
       ${await super.renderReportContent()}
       ${this.key(i18nString(UIStrings.version))}
       ${this.value(this.database.version.toString())}
       ${this.key(i18nString(UIStrings.objectStores))}
       ${this.value(this.database.objectStores.size.toString())}
-      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-        ReportView.ReportView.ReportSectionDivider.litTagName}>
-      <${ReportView.ReportView.ReportSection.litTagName}>
-      <${Buttons.Button.Button.litTagName}
+      <devtools-report-divider></devtools-report-divider>
+      <devtools-report-section>
+      <devtools-button
           aria-label=${i18nString(UIStrings.deleteDatabase)}
           .variant=${Buttons.Button.Variant.OUTLINED}
           @click=${this.deleteDatabase}
@@ -187,8 +182,8 @@ export class IDBDatabaseView extends ApplicationComponents.StorageMetadataView.S
       click: true,
     })}>
         ${i18nString(UIStrings.deleteDatabase)}
-      </${Buttons.Button.Button.litTagName}>&nbsp;
-      <${Buttons.Button.Button.litTagName}
+      </devtools-button>&nbsp;
+      <devtools-button
           aria-label=${i18nString(UIStrings.refreshDatabase)}
           .variant=${Buttons.Button.Variant.OUTLINED}
           @click=${this.refreshDatabaseButtonClicked}
@@ -196,8 +191,8 @@ export class IDBDatabaseView extends ApplicationComponents.StorageMetadataView.S
       click: true,
     })}>
         ${i18nString(UIStrings.refreshDatabase)}
-      </${Buttons.Button.Button.litTagName}>
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-button>
+      </devtools-report-section>
       `;
   }
 

package/front_end/panels/application/InterestGroupTreeElement.ts

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

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -10,7 +10,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import type * as PreloadingHelper from './preloading/helper/helper.js';
 import {PreloadingAttemptView, PreloadingRuleSetView, PreloadingSummaryView} from './preloading/PreloadingView.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -10,7 +10,7 @@ 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';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/application/ResourcesPanel.ts

@@ -12,7 +12,9 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {ApplicationPanelSidebar, StorageCategoryView} from './ApplicationPanelSidebar.js';
 import {CookieItemsView} from './CookieItemsView.js';
 import {DOMStorageItemsView} from './DOMStorageItemsView.js';
-import {type DOMStorage} from './DOMStorageModel.js';
+import type {DOMStorage} from './DOMStorageModel.js';
+import {ExtensionStorageItemsView} from './ExtensionStorageItemsView.js';
+import type {ExtensionStorage} from './ExtensionStorageModel.js';
 import type * as PreloadingHelper from './preloading/helper/helper.js';
 import resourcesPanelStyles from './resourcesPanel.css.js';
 import {StorageItemsView} from './StorageItemsView.js';
@@ -27,6 +29,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   storageViews: HTMLElement;
   private readonly storageViewToolbar: UI.Toolbar.Toolbar;
   private domStorageView: DOMStorageItemsView|null;
+  private extensionStorageView: ExtensionStorageItemsView|null;
   private cookieView: CookieItemsView|null;
   private readonly emptyWidget: UI.EmptyWidget.EmptyWidget|null;
   private readonly sidebar: ApplicationPanelSidebar;
@@ -50,6 +53,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.splitWidget().setMainWidget(mainContainer);
 
     this.domStorageView = null;
+    this.extensionStorageView = null;
 
     this.cookieView = null;
 
@@ -162,6 +166,19 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.showView(this.domStorageView);
   }
 
+  showExtensionStorage(extensionStorage: ExtensionStorage): void {
+    if (!extensionStorage) {
+      return;
+    }
+
+    if (!this.extensionStorageView) {
+      this.extensionStorageView = new ExtensionStorageItemsView(extensionStorage);
+    } else {
+      this.extensionStorageView.setStorage(extensionStorage);
+    }
+    this.showView(this.extensionStorageView);
+  }
+
   showCookies(cookieFrameTarget: SDK.Target.Target, cookieDomain: string): void {
     const model = cookieFrameTarget.model(SDK.CookieModel.CookieModel);
     if (!model) {

package/front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -12,7 +12,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import {ServiceWorkerCacheView} from './ServiceWorkerCacheViews.js';
 
 const UIStrings = {

package/front_end/panels/application/SharedStorageListTreeElement.ts

@@ -9,7 +9,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import {SharedStorageEventsView} from './SharedStorageEventsView.js';
 
 const UIStrings = {

package/front_end/panels/application/SharedStorageTreeElement.ts

@@ -6,9 +6,9 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import {SharedStorageItemsView} from './SharedStorageItemsView.js';
-import {type SharedStorageForOrigin} from './SharedStorageModel.js';
+import type {SharedStorageForOrigin} from './SharedStorageModel.js';
 
 export class SharedStorageTreeElement extends ApplicationPanelTreeElement {
   view!: SharedStorageItemsView;

package/front_end/panels/application/StorageBucketsTreeElement.ts

@@ -14,7 +14,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {IndexedDBTreeElement} from './ApplicationPanelSidebar.js';
 import {ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {StorageMetadataView} from './components/components.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js';
 
 const UIStrings = {

package/front_end/panels/application/TrustTokensTreeElement.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/application.ts

@@ -10,6 +10,7 @@ import * as BounceTrackingMitigationsTreeElement from './BounceTrackingMitigatio
 import * as CookieItemsView from './CookieItemsView.js';
 import * as DOMStorageItemsView from './DOMStorageItemsView.js';
 import * as DOMStorageModel from './DOMStorageModel.js';
+import * as ExtensionStorageItemsView from './ExtensionStorageItemsView.js';
 import * as ExtensionStorageModel from './ExtensionStorageModel.js';
 import * as IndexedDBModel from './IndexedDBModel.js';
 import * as IndexedDBViews from './IndexedDBViews.js';
@@ -44,6 +45,7 @@ export {
   CookieItemsView,
   DOMStorageItemsView,
   DOMStorageModel,
+  ExtensionStorageItemsView,
   ExtensionStorageModel,
   IndexedDBModel,
   IndexedDBViews,