chrome-devtools-frontend 1.0.964440 → 1.0.966086

package/front_end/legacy_test_runner/console_test_runner/console_test_runner.js

@@ -50,6 +50,7 @@ ConsoleTestRunner.dumpConsoleMessagesIntoArray = async function(printOriginating
     const element = uiMessage.element();
     // Retrieving the message element triggered rendering, now wait for
     // the live location within to be resolved initially.
+    await uiMessage.formatErrorStackPromiseForTest();
     await TestRunner.waitForPendingLiveLocationUpdates();
 
     let classNames;
@@ -220,9 +221,14 @@ ConsoleTestRunner.evaluateInConsole = function(code, callback, dontForceMainCont
     const element = commandResult.toMessageElement();
     // Only call the callback once the live location within the
     // message element is resolved initially.
-    TestRunner.waitForPendingLiveLocationUpdates().then(() => {
-      callback(element.deepTextContent());
-    });
+    Promise
+        .all([
+          commandResult.formatErrorStackPromiseForTest(),
+          TestRunner.waitForPendingLiveLocationUpdates(),
+        ])
+        .then(() => {
+          callback(element.deepTextContent());
+        });
   });
 };
 

package/front_end/legacy_test_runner/heap_profiler_test_runner/heap_profiler_test_runner.js

@@ -624,14 +624,13 @@ HeapProfilerTestRunner.takeAndOpenSnapshot = async function(generator, callback)
   const snapshot = generator();
   const profileType = Profiler.ProfileTypeRegistry.instance.heapSnapshotProfileType;
 
-  function pushGeneratedSnapshot(reportProgress) {
+  async function pushGeneratedSnapshot(reportProgress) {
     if (reportProgress) {
       profileType.reportHeapSnapshotProgress({data: {done: 50, total: 100, finished: false}});
       profileType.reportHeapSnapshotProgress({data: {done: 100, total: 100, finished: true}});
     }
     snapshot.snapshot.typeId = 'HEAP';
     profileType.addHeapSnapshotChunk({data: JSON.stringify(snapshot)});
-    return Promise.resolve();
   }
 
   HeapProfilerTestRunner.takeAndOpenSnapshotCallback = callback;

package/front_end/legacy_test_runner/sources_test_runner/DebuggerTestRunner.js

@@ -198,31 +198,31 @@ SourcesTestRunner.waitUntilPausedAndDumpStackAndResume = function(callback, opti
 };
 
 SourcesTestRunner.stepOver = function() {
-  Promise.resolve().then(function() {
+  queueMicrotask(function() {
     UI.panels.sources.stepOver();
   });
 };
 
 SourcesTestRunner.stepInto = function() {
-  Promise.resolve().then(function() {
+  queueMicrotask(function() {
     UI.panels.sources.stepInto();
   });
 };
 
 SourcesTestRunner.stepIntoAsync = function() {
-  Promise.resolve().then(function() {
+  queueMicrotask(function() {
     UI.panels.sources.stepIntoAsync();
   });
 };
 
 SourcesTestRunner.stepOut = function() {
-  Promise.resolve().then(function() {
+  queueMicrotask(function() {
     UI.panels.sources.stepOut();
   });
 };
 
 SourcesTestRunner.togglePause = function() {
-  Promise.resolve().then(function() {
+  queueMicrotask(function() {
     UI.panels.sources.togglePause();
   });
 };

package/front_end/models/bindings/ContentProviderBasedProject.ts

@@ -46,8 +46,7 @@ interface UISourceCodeData {
   metadata: Workspace.UISourceCode.UISourceCodeMetadata|null;
 }
 
-export class ContentProviderBasedProject extends Workspace.Workspace.ProjectStore implements
-    Workspace.Workspace.Project {
+export class ContentProviderBasedProject extends Workspace.Workspace.ProjectStore {
   readonly #contentProviders: Map<string, TextUtils.ContentProvider.ContentProvider>;
   readonly #isServiceProjectInternal: boolean;
   readonly #uiSourceCodeToData: WeakMap<Workspace.UISourceCode.UISourceCode, UISourceCodeData>;
@@ -199,7 +198,7 @@ export class ContentProviderBasedProject extends Workspace.Workspace.ProjectStor
   }
 
   indexContent(progress: Common.Progress.Progress): void {
-    void Promise.resolve().then(progress.done.bind(progress));
+    queueMicrotask(progress.done.bind(progress));
   }
 
   addUISourceCodeWithProvider(

package/front_end/models/persistence/FileSystemWorkspaceBinding.ts

@@ -153,7 +153,7 @@ export class FileSystemWorkspaceBinding {
   }
 }
 
-export class FileSystem extends Workspace.Workspace.ProjectStore implements Workspace.Workspace.Project {
+export class FileSystem extends Workspace.Workspace.ProjectStore {
   readonly fileSystemInternal: PlatformFileSystem;
   readonly fileSystemBaseURL: string;
   private readonly fileSystemParentURL: string;

package/front_end/models/persistence/IsolatedFileSystem.ts

@@ -98,12 +98,12 @@ export class IsolatedFileSystem extends PlatformFileSystem {
     this.fileLocks = new Map();
   }
 
-  static create(
+  static async create(
       manager: IsolatedFileSystemManager, path: string, embedderPath: string, type: string, name: string,
       rootURL: string): Promise<IsolatedFileSystem|null> {
     const domFileSystem = Host.InspectorFrontendHost.InspectorFrontendHostInstance.isolatedFileSystem(name, rootURL);
     if (!domFileSystem) {
-      return Promise.resolve(null as IsolatedFileSystem | null);
+      return null as IsolatedFileSystem | null;
     }
 
     const fileSystem = new IsolatedFileSystem(manager, path, embedderPath, domFileSystem, type);

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -383,8 +383,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
 
       return SDK.NetworkManager.MultitargetNetworkManager.instance().setInterceptionHandlerForPatterns(
           Array.from(patterns).map(
-              pattern =>
-                  ({urlPattern: pattern, interceptionStage: Protocol.Network.InterceptionStage.HeadersReceived})),
+              pattern => ({urlPattern: pattern, requestStage: Protocol.Fetch.RequestStage.Response})),
           this.interceptionHandlerBound);
     }
   }
@@ -467,8 +466,12 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
 
     let mimeType = '';
     if (interceptedRequest.responseHeaders) {
-      const responseHeaders = SDK.NetworkManager.NetworkManager.lowercaseHeaders(interceptedRequest.responseHeaders);
-      mimeType = responseHeaders['content-type'];
+      for (const header of interceptedRequest.responseHeaders) {
+        if (header.name.toLowerCase() === 'content-type') {
+          mimeType = header.value;
+          break;
+        }
+      }
     }
 
     if (!mimeType) {

package/front_end/models/workspace/WorkspaceImpl.ts

@@ -42,41 +42,36 @@ export interface ProjectSearchConfig {
   filePathMatchesFileQuery(filePath: string): boolean;
 }
 
-export abstract class Project {
-  abstract workspace(): WorkspaceImpl;
-  abstract id(): string;
-  abstract type(): string;
-  abstract isServiceProject(): boolean;
-  abstract displayName(): string;
-  abstract requestMetadata(uiSourceCode: UISourceCode): Promise<UISourceCodeMetadata|null>;
-  abstract requestFileContent(uiSourceCode: UISourceCode): Promise<TextUtils.ContentProvider.DeferredContent>;
-  abstract canSetFileContent(): boolean;
-  abstract setFileContent(uiSourceCode: UISourceCode, newContent: string, isBase64: boolean): Promise<void>;
-  abstract fullDisplayName(uiSourceCode: UISourceCode): string;
-  abstract mimeType(uiSourceCode: UISourceCode): string;
-  abstract canRename(): boolean;
+export interface Project {
+  workspace(): WorkspaceImpl;
+  id(): string;
+  type(): projectTypes;
+  isServiceProject(): boolean;
+  displayName(): string;
+  requestMetadata(uiSourceCode: UISourceCode): Promise<UISourceCodeMetadata|null>;
+  requestFileContent(uiSourceCode: UISourceCode): Promise<TextUtils.ContentProvider.DeferredContent>;
+  canSetFileContent(): boolean;
+  setFileContent(uiSourceCode: UISourceCode, newContent: string, isBase64: boolean): Promise<void>;
+  fullDisplayName(uiSourceCode: UISourceCode): string;
+  mimeType(uiSourceCode: UISourceCode): string;
+  canRename(): boolean;
   rename(
-      _uiSourceCode: UISourceCode, _newName: string,
-      _callback: (arg0: boolean, arg1?: string, arg2?: string, arg3?: Common.ResourceType.ResourceType) => void): void {
-  }
-  excludeFolder(_path: string): void {
-  }
-  abstract canExcludeFolder(path: string): boolean;
-  abstract createFile(path: string, name: string|null, content: string, isBase64?: boolean): Promise<UISourceCode|null>;
-  abstract canCreateFile(): boolean;
-  deleteFile(_uiSourceCode: UISourceCode): void {
-  }
-  remove(): void {
-  }
-  abstract searchInFileContent(uiSourceCode: UISourceCode, query: string, caseSensitive: boolean, isRegex: boolean):
+      uiSourceCode: UISourceCode, newName: string,
+      callback: (arg0: boolean, arg1?: string, arg2?: string, arg3?: Common.ResourceType.ResourceType) => void): void;
+  excludeFolder(path: string): void;
+  canExcludeFolder(path: string): boolean;
+  createFile(path: string, name: string|null, content: string, isBase64?: boolean): Promise<UISourceCode|null>;
+  canCreateFile(): boolean;
+  deleteFile(uiSourceCode: UISourceCode): void;
+  remove(): void;
+  searchInFileContent(uiSourceCode: UISourceCode, query: string, caseSensitive: boolean, isRegex: boolean):
       Promise<TextUtils.ContentProvider.SearchMatch[]>;
-  abstract findFilesMatchingSearchRequest(
+  findFilesMatchingSearchRequest(
       searchConfig: ProjectSearchConfig, filesMathingFileQuery: string[],
       progress: Common.Progress.Progress): Promise<string[]>;
-  indexContent(_progress: Common.Progress.Progress): void {
-  }
-  abstract uiSourceCodeForURL(url: string): UISourceCode|null;
-  abstract uiSourceCodes(): UISourceCode[];
+  indexContent(progress: Common.Progress.Progress): void;
+  uiSourceCodeForURL(url: string): UISourceCode|null;
+  uiSourceCodes(): UISourceCode[];
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again
@@ -90,7 +85,7 @@ export enum projectTypes {
   Service = 'service',
 }
 
-export class ProjectStore {
+export abstract class ProjectStore implements Project {
   private readonly workspaceInternal: WorkspaceImpl;
   private readonly idInternal: string;
   private readonly typeInternal: projectTypes;
@@ -100,7 +95,6 @@ export class ProjectStore {
     index: number,
   }>;
   private uiSourceCodesList: UISourceCode[];
-  private readonly project: Project;
 
   constructor(workspace: WorkspaceImpl, id: string, type: projectTypes, displayName: string) {
     this.workspaceInternal = workspace;
@@ -110,14 +104,13 @@ export class ProjectStore {
 
     this.uiSourceCodesMap = new Map();
     this.uiSourceCodesList = [];
-    this.project = (this as unknown as Project);
   }
 
   id(): string {
     return this.idInternal;
   }
 
-  type(): string {
+  type(): projectTypes {
     return this.typeInternal;
   }
 
@@ -130,7 +123,7 @@ export class ProjectStore {
   }
 
   createUISourceCode(url: string, contentType: Common.ResourceType.ResourceType): UISourceCode {
-    return new UISourceCode(this.project, url, contentType);
+    return new UISourceCode(this, url, contentType);
   }
 
   addUISourceCode(uiSourceCode: UISourceCode): boolean {
@@ -166,7 +159,7 @@ export class ProjectStore {
   }
 
   removeProject(): void {
-    this.workspaceInternal.removeProject(this.project);
+    this.workspaceInternal.removeProject(this);
     this.uiSourceCodesMap = new Map();
     this.uiSourceCodesList = [];
   }
@@ -190,6 +183,38 @@ export class ProjectStore {
     this.uiSourceCodesMap.set(newPath, value);
     this.uiSourceCodesMap.delete(oldPath);
   }
+
+  // No-op implementation for a handfull of interface methods.
+
+  rename(
+      _uiSourceCode: UISourceCode, _newName: string,
+      _callback: (arg0: boolean, arg1?: string, arg2?: string, arg3?: Common.ResourceType.ResourceType) => void): void {
+  }
+  excludeFolder(_path: string): void {
+  }
+  deleteFile(_uiSourceCode: UISourceCode): void {
+  }
+  remove(): void {
+  }
+  indexContent(_progress: Common.Progress.Progress): void {
+  }
+
+  abstract isServiceProject(): boolean;
+  abstract requestMetadata(uiSourceCode: UISourceCode): Promise<UISourceCodeMetadata|null>;
+  abstract requestFileContent(uiSourceCode: UISourceCode): Promise<TextUtils.ContentProvider.DeferredContent>;
+  abstract canSetFileContent(): boolean;
+  abstract setFileContent(uiSourceCode: UISourceCode, newContent: string, isBase64: boolean): Promise<void>;
+  abstract fullDisplayName(uiSourceCode: UISourceCode): string;
+  abstract mimeType(uiSourceCode: UISourceCode): string;
+  abstract canRename(): boolean;
+  abstract canExcludeFolder(path: string): boolean;
+  abstract createFile(path: string, name: string|null, content: string, isBase64?: boolean): Promise<UISourceCode|null>;
+  abstract canCreateFile(): boolean;
+  abstract searchInFileContent(uiSourceCode: UISourceCode, query: string, caseSensitive: boolean, isRegex: boolean):
+      Promise<TextUtils.ContentProvider.SearchMatch[]>;
+  abstract findFilesMatchingSearchRequest(
+      searchConfig: ProjectSearchConfig, filesMathingFileQuery: string[],
+      progress: Common.Progress.Progress): Promise<string[]>;
 }
 
 let workspaceInstance: WorkspaceImpl|undefined;

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -59,6 +59,8 @@ import {DOMStorageModel, Events as DOMStorageModelEvents} from './DOMStorageMode
 import type {Database as IndexedDBModelDatabase, DatabaseId, Index, ObjectStore} from './IndexedDBModel.js';
 import {Events as IndexedDBModelEvents, IndexedDBModel} from './IndexedDBModel.js';
 import {IDBDatabaseView, IDBDataView} from './IndexedDBViews.js';
+import {InterestGroupStorageModel, Events as InterestGroupModelEvents} from './InterestGroupStorageModel.js';
+import {InterestGroupTreeElement} from './InterestGroupTreeElement.js';
 import {OpenedWindowDetailsView, WorkerDetailsView} from './OpenedWindowDetailsView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 import {ServiceWorkersView} from './ServiceWorkersView.js';
@@ -186,6 +188,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   localStorageListTreeElement: ExpandableApplicationPanelTreeElement;
   sessionStorageListTreeElement: ExpandableApplicationPanelTreeElement;
   indexedDBListTreeElement: IndexedDBTreeElement;
+  interestGroupTreeElement: InterestGroupTreeElement;
   databasesListTreeElement: ExpandableApplicationPanelTreeElement;
   cookieListTreeElement: ExpandableApplicationPanelTreeElement;
   trustTokensTreeElement: TrustTokensTreeElement;
@@ -276,6 +279,9 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.trustTokensTreeElement = new TrustTokensTreeElement(panel);
     storageTreeElement.appendChild(this.trustTokensTreeElement);
 
+    this.interestGroupTreeElement = new InterestGroupTreeElement(panel);
+    storageTreeElement.appendChild(this.interestGroupTreeElement);
+
     const cacheSectionTitle = i18nString(UIStrings.cache);
     const cacheTreeElement = this.addSidebarSection(cacheSectionTitle);
     this.cacheStorageListTreeElement = new ServiceWorkerCacheTreeElement(panel);
@@ -349,7 +355,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
       modelAdded: (model: IndexedDBModel): void => model.enable(),
       modelRemoved: (model: IndexedDBModel): void => this.indexedDBListTreeElement.removeIndexedDBForModel(model),
     });
-
+    SDK.TargetManager.TargetManager.instance().observeModels(InterestGroupStorageModel, {
+      modelAdded: (model: InterestGroupStorageModel): void => this.interestGroupModelAdded(model),
+      modelRemoved: (model: InterestGroupStorageModel): void => this.interestGroupModelRemoved(model),
+    });
     // Work-around for crbug.com/1152713: Something is wrong with custom scrollbars and size containment.
     // @ts-ignore
     this.contentElement.style.contain = 'layout style';
@@ -376,6 +385,11 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
       this.databaseModel.addEventListener(DatabaseModelEvents.DatabasesRemoved, this.resetWebSQL, this);
     }
 
+    const interestGroupModel = target.model(InterestGroupStorageModel);
+    if (interestGroupModel) {
+      interestGroupModel.addEventListener(InterestGroupModelEvents.InterestGroupAccess, this.interestGroupAccess, this);
+    }
+
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     if (!resourceTreeModel) {
       return;
@@ -408,6 +422,12 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
       this.databaseModel = null;
     }
 
+    const interestGroupModel = target.model(InterestGroupStorageModel);
+    if (interestGroupModel) {
+      interestGroupModel.removeEventListener(
+          InterestGroupModelEvents.InterestGroupAccess, this.interestGroupAccess, this);
+    }
+
     this.resetWithFrames();
   }
 
@@ -422,6 +442,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     if (this.databaseModel) {
       this.databaseModel.enable();
     }
+    const interestGroupModel = this.target && this.target.model(InterestGroupStorageModel);
+    if (interestGroupModel) {
+      interestGroupModel.enable();
+    }
 
     const cacheStorageModel = this.target && this.target.model(SDK.ServiceWorkerCacheModel.ServiceWorkerCacheModel);
     if (cacheStorageModel) {
@@ -461,6 +485,16 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     model.removeEventListener(DOMStorageModelEvents.DOMStorageRemoved, this.domStorageRemoved, this);
   }
 
+  private interestGroupModelAdded(model: InterestGroupStorageModel): void {
+    model.enable();
+    model.addEventListener(InterestGroupModelEvents.InterestGroupAccess, this.interestGroupAccess, this);
+  }
+
+  private interestGroupModelRemoved(model: InterestGroupStorageModel): void {
+    model.disable();
+    model.removeEventListener(InterestGroupModelEvents.InterestGroupAccess, this.interestGroupAccess, this);
+  }
+
   private resetWithFrames(): void {
     this.resourcesSection.reset();
     this.reset();
@@ -516,6 +550,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.domains = {};
     this.resetWebSQL();
     this.cookieListTreeElement.removeChildren();
+    this.interestGroupTreeElement.clearEvents();
   }
 
   private frameNavigated(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>): void {
@@ -533,6 +568,11 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.databasesListTreeElement.appendChild(databaseTreeElement);
   }
 
+  private interestGroupAccess(event: Common.EventTarget.EventTargetEvent<Protocol.Storage.InterestGroupAccessedEvent>):
+      void {
+    this.interestGroupTreeElement.addEvent(event.data);
+  }
+
   private addCookieDocument(frame: SDK.ResourceTreeModel.ResourceTreeFrame): void {
     // In case the current frame was unreachable, show it's cookies
     // instead of the error interstitials because they might help to

package/front_end/panels/application/InterestGroupStorageModel.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2021 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * 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.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "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 THE COPYRIGHT
+ * OWNER 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 SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+
+export class InterestGroupStorageModel extends SDK.SDKModel.SDKModel<EventTypes> implements
+    ProtocolProxyApi.StorageDispatcher {
+  private readonly storageAgent: ProtocolProxyApi.StorageApi;
+  private enabled?: boolean;
+
+  constructor(target: SDK.Target.Target) {
+    super(target);
+    target.registerStorageDispatcher(this);
+    this.storageAgent = target.storageAgent();
+    this.enabled = false;
+  }
+
+  enable(): void {
+    if (this.enabled) {
+      return;
+    }
+    void this.storageAgent.invoke_setInterestGroupTracking({enable: true});
+  }
+
+  disable(): void {
+    if (!this.enabled) {
+      return;
+    }
+    void this.storageAgent.invoke_setInterestGroupTracking({enable: false});
+  }
+
+  interestGroupAccessed(event: Protocol.Storage.InterestGroupAccessedEvent): void {
+    this.dispatchEventToListeners(Events.InterestGroupAccess, event);
+  }
+
+  indexedDBListUpdated(_event: Protocol.Storage.IndexedDBListUpdatedEvent): void {
+  }
+
+  indexedDBContentUpdated(_event: Protocol.Storage.IndexedDBContentUpdatedEvent): void {
+  }
+
+  cacheStorageListUpdated(_event: Protocol.Storage.CacheStorageListUpdatedEvent): void {
+  }
+
+  cacheStorageContentUpdated(_event: Protocol.Storage.CacheStorageContentUpdatedEvent): void {
+  }
+}
+
+SDK.SDKModel.SDKModel.register(
+    InterestGroupStorageModel, {capabilities: SDK.Target.Capability.Storage, autostart: false});
+
+export const enum Events {
+  InterestGroupAccess = 'InterestGroupAccess',
+}
+
+export type EventTypes = {
+  [Events.InterestGroupAccess]: Protocol.Storage.InterestGroupAccessedEvent,
+};

package/front_end/panels/application/InterestGroupStorageView.ts

@@ -0,0 +1,112 @@
+// Copyright 2021 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 * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import type * as DataGrid from '../../ui/components/data_grid/data_grid.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import * as ApplicationComponents from './components/components.js';
+
+import interestGroupStorageViewStyles from './interestGroupStorageView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Placeholder text instructing the user how to display interest group
+  *details.
+  */
+  clickToDisplayBody: 'Click on any interest group event to display the group\'s current state',
+  /**
+  interestGroupStorageItems: 'InterestGroup Storage Items',
+  */
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/InterestGroupStorageView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface InterestGroupDetailsGetter {
+  getInterestGroupDetails: (owner: string, name: string) => Promise<Protocol.Storage.InterestGroupDetails|null>;
+}
+
+function eventEquals(
+    a: Protocol.Storage.InterestGroupAccessedEvent, b: Protocol.Storage.InterestGroupAccessedEvent): boolean {
+  return (a.accessTime === b.accessTime && a.type === b.type && a.ownerOrigin === b.ownerOrigin && a.name === b.name);
+}
+
+export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
+  private readonly interestGroupGrid = new ApplicationComponents.InterestGroupAccessGrid.InterestGroupAccessGrid();
+  private events: Protocol.Storage.InterestGroupAccessedEvent[] = [];
+  private detailsGetter: InterestGroupDetailsGetter;
+
+  constructor(detailsGetter: InterestGroupDetailsGetter) {
+    super(/* isVertical */ false, /* secondIsSidebar: */ true);
+    this.detailsGetter = detailsGetter;
+
+    const topPanel = new UI.Widget.VBox();
+    const bottomPanel = new UI.Widget.VBox();
+    topPanel.setMinimumSize(0, 80);
+    this.setMainWidget(topPanel);
+    bottomPanel.setMinimumSize(0, 40);
+    this.setSidebarWidget(bottomPanel);
+
+    topPanel.contentElement.appendChild(this.interestGroupGrid);
+    this.interestGroupGrid.addEventListener('cellfocused', this.onFocus.bind(this));
+
+    bottomPanel.contentElement.classList.add('placeholder');
+    const centered = bottomPanel.contentElement.createChild('div');
+    centered.textContent = i18nString(UIStrings.clickToDisplayBody);
+  }
+
+  wasShown(): void {
+    super.wasShown();
+    const sbw = this.sidebarWidget();
+    if (sbw) {
+      sbw.registerCSSFiles([interestGroupStorageViewStyles]);
+    }
+  }
+
+  addEvent(event: Protocol.Storage.InterestGroupAccessedEvent): void {
+    // Only add if not already present.
+    const foundEvent = this.events.find(t => eventEquals(t, event));
+    if (!foundEvent) {
+      this.events.push(event);
+      this.interestGroupGrid.data = this.events;
+    }
+  }
+
+  clearEvents(): void {
+    this.events = [];
+    this.interestGroupGrid.data = this.events;
+  }
+
+  private async onFocus(event: Event): Promise<void> {
+    const focusedEvent = event as DataGrid.DataGridEvents.BodyCellFocusedEvent;
+    const row = focusedEvent.data.row;
+    if (!row) {
+      return;
+    }
+
+    const ownerOrigin = row.cells.find(cell => cell.columnId === 'event-group-owner')?.value as string;
+    const name = row.cells.find(cell => cell.columnId === 'event-group-name')?.value as string;
+    if (!ownerOrigin || !name) {
+      return;
+    }
+
+    const details = await this.detailsGetter.getInterestGroupDetails(ownerOrigin, name);
+    if (details) {
+      const jsonView = await SourceFrame.JSONView.JSONView.createView(JSON.stringify(details));
+      jsonView?.setMinimumSize(0, 40);
+      if (jsonView) {
+        this.setSidebarWidget(jsonView);
+      }
+    }
+  }
+
+  getEventsForTesting(): Array<Protocol.Storage.InterestGroupAccessedEvent> {
+    return this.events;
+  }
+
+  getInterestGroupGridForTesting(): ApplicationComponents.InterestGroupAccessGrid.InterestGroupAccessGrid {
+    return this.interestGroupGrid;
+  }
+}