chrome-devtools-frontend 1.0.964440 → 1.0.964938

package/config/gni/devtools_grd_files.gni

@@ -785,6 +785,9 @@ grd_files_debug_sources = [
   "front_end/panels/application/DatabaseTableView.js",
   "front_end/panels/application/IndexedDBModel.js",
   "front_end/panels/application/IndexedDBViews.js",
+  "front_end/panels/application/InterestGroupStorageModel.js",
+  "front_end/panels/application/InterestGroupStorageView.js",
+  "front_end/panels/application/InterestGroupTreeElement.js",
   "front_end/panels/application/OpenedWindowDetailsView.js",
   "front_end/panels/application/ReportingApiReportsView.js",
   "front_end/panels/application/ReportingApiTreeElement.js",
@@ -802,6 +805,7 @@ grd_files_debug_sources = [
   "front_end/panels/application/components/BackForwardCacheView.js",
   "front_end/panels/application/components/EndpointsGrid.js",
   "front_end/panels/application/components/FrameDetailsView.js",
+  "front_end/panels/application/components/InterestGroupAccessGrid.js",
   "front_end/panels/application/components/OriginTrialTreeView.js",
   "front_end/panels/application/components/PermissionsPolicySection.js",
   "front_end/panels/application/components/ReportsGrid.js",
@@ -810,6 +814,7 @@ grd_files_debug_sources = [
   "front_end/panels/application/components/backForwardCacheView.css.js",
   "front_end/panels/application/components/badge.css.js",
   "front_end/panels/application/components/frameDetailsReportView.css.js",
+  "front_end/panels/application/components/interestGroupAccessGrid.css.js",
   "front_end/panels/application/components/originTrialTokenRows.css.js",
   "front_end/panels/application/components/originTrialTreeView.css.js",
   "front_end/panels/application/components/permissionsPolicySection.css.js",
@@ -821,6 +826,7 @@ grd_files_debug_sources = [
   "front_end/panels/application/cookieItemsView.css.js",
   "front_end/panels/application/frameDetailsReportView.css.js",
   "front_end/panels/application/indexedDBViews.css.js",
+  "front_end/panels/application/interestGroupStorageView.css.js",
   "front_end/panels/application/reportingApiReportsView.css.js",
   "front_end/panels/application/resourcesPanel.css.js",
   "front_end/panels/application/resourcesSidebar.css.js",

package/front_end/core/i18n/locales/en-US.json

@@ -2951,6 +2951,21 @@
   "panels/application/components/FrameDetailsView.ts | yes": {
     "message": "Yes"
   },
+  "panels/application/components/InterestGroupAccessGrid.ts | allInterestGroupStorageEvents": {
+    "message": "All interest group storage events."
+  },
+  "panels/application/components/InterestGroupAccessGrid.ts | eventTime": {
+    "message": "Event Time"
+  },
+  "panels/application/components/InterestGroupAccessGrid.ts | eventType": {
+    "message": "Access Type"
+  },
+  "panels/application/components/InterestGroupAccessGrid.ts | groupName": {
+    "message": "Name"
+  },
+  "panels/application/components/InterestGroupAccessGrid.ts | groupOwner": {
+    "message": "Owner"
+  },
   "panels/application/components/OriginTrialTreeView.ts | expiryTime": {
     "message": "Expiry Time"
   },
@@ -3179,6 +3194,12 @@
   "panels/application/IndexedDBViews.ts | version": {
     "message": "Version"
   },
+  "panels/application/InterestGroupStorageView.ts | clickToDisplayBody": {
+    "message": "Click on any interest group event to display the group's current state"
+  },
+  "panels/application/InterestGroupTreeElement.ts | interestGroups": {
+    "message": "Interest Groups"
+  },
   "panels/application/OpenedWindowDetailsView.ts | accessToOpener": {
     "message": "Access to opener"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -2951,6 +2951,21 @@
   "panels/application/components/FrameDetailsView.ts | yes": {
     "message": "Ŷéŝ"
   },
+  "panels/application/components/InterestGroupAccessGrid.ts | allInterestGroupStorageEvents": {
+    "message": "Âĺl̂ ín̂t́êŕêśt̂ ǵr̂óûṕ ŝt́ôŕâǵê év̂én̂t́ŝ."
+  },
+  "panels/application/components/InterestGroupAccessGrid.ts | eventTime": {
+    "message": "Êv́êńt̂ T́îḿê"
+  },
+  "panels/application/components/InterestGroupAccessGrid.ts | eventType": {
+    "message": "Âćĉéŝś T̂ýp̂é"
+  },
+  "panels/application/components/InterestGroupAccessGrid.ts | groupName": {
+    "message": "N̂ám̂é"
+  },
+  "panels/application/components/InterestGroupAccessGrid.ts | groupOwner": {
+    "message": "Ôẃn̂ér̂"
+  },
   "panels/application/components/OriginTrialTreeView.ts | expiryTime": {
     "message": "Êx́p̂ír̂ý T̂ím̂é"
   },
@@ -3179,6 +3194,12 @@
   "panels/application/IndexedDBViews.ts | version": {
     "message": "V̂ér̂śîón̂"
   },
+  "panels/application/InterestGroupStorageView.ts | clickToDisplayBody": {
+    "message": "Ĉĺîćk̂ ón̂ án̂ý îńt̂ér̂éŝt́ ĝŕôúp̂ év̂én̂t́ t̂ó d̂íŝṕl̂áŷ t́ĥé ĝŕôúp̂'ś ĉúr̂ŕêńt̂ śt̂át̂é"
+  },
+  "panels/application/InterestGroupTreeElement.ts | interestGroups": {
+    "message": "Îńt̂ér̂éŝt́ Ĝŕôúp̂ś"
+  },
   "panels/application/OpenedWindowDetailsView.ts | accessToOpener": {
     "message": "Âćĉéŝś t̂ó ôṕêńêŕ"
   },

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;
+  }
+}

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -0,0 +1,61 @@
+// Copyright 2022 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 SDK from '../../core/sdk/sdk.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import type * as Protocol from '../../generated/protocol.js';
+
+import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
+import {InterestGroupStorageView} from './InterestGroupStorageView.js';
+
+const UIStrings = {
+  /**
+  *@description Label for an item in the Application Panel Sidebar of the Application panel
+  */
+  interestGroups: 'Interest Groups',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/InterestGroupTreeElement.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
+  private view: InterestGroupStorageView;
+
+  constructor(storagePanel: ResourcesPanel) {
+    super(storagePanel, i18nString(UIStrings.interestGroups), false);
+    const interestGroupIcon = UI.Icon.Icon.create('mediumicon-database', 'resource-tree-item');
+    this.setLeadingIcons([interestGroupIcon]);
+    this.view = new InterestGroupStorageView(this);
+  }
+
+  get itemURL(): string {
+    return 'interest-groups://';
+  }
+
+  async getInterestGroupDetails(owner: string, name: string): Promise<Protocol.Storage.InterestGroupDetails|null> {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    if (!mainTarget) {
+      return null;
+    }
+    const response =
+        await mainTarget.storageAgent().invoke_getInterestGroupDetails({'ownerOrigin': owner, 'name': name});
+    return response.details;
+  }
+
+  onselect(selectedByUser?: boolean): boolean {
+    super.onselect(selectedByUser);
+    this.showView(this.view);
+    return false;
+  }
+
+  addEvent(event: Protocol.Storage.InterestGroupAccessedEvent): void {
+    this.view.addEvent(event);
+  }
+
+  clearEvents(): void {
+    this.view.clearEvents();
+  }
+}

package/front_end/panels/application/application.ts

@@ -14,6 +14,8 @@ import * as DOMStorageItemsView from './DOMStorageItemsView.js';
 import * as DOMStorageModel from './DOMStorageModel.js';
 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 OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
 import * as ReportingApiReportsView from './ReportingApiReportsView.js';
 import * as ResourcesPanel from './ResourcesPanel.js';
@@ -36,6 +38,8 @@ export {
   DOMStorageModel,
   IndexedDBModel,
   IndexedDBViews,
+  InterestGroupStorageModel,
+  InterestGroupStorageView,
   OpenedWindowDetailsView,
   ReportingApiReportsView,
   ResourcesPanel,

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

@@ -0,0 +1,149 @@
+// Copyright 2022 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 DataGrid from '../../../ui/components/data_grid/data_grid.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../../generated/protocol.js';
+
+import interestGroupAccessGridStyles from './interestGroupAccessGrid.css.js';
+
+const UIStrings = {
+  /**
+  *@description Hover text for an info icon in the Interest Group Event panel
+  */
+  allInterestGroupStorageEvents: 'All interest group storage events.',
+  /**
+    *@description Text in InterestGroupStorage Items View of the Application panel
+    */
+  eventTime: 'Event Time',
+  /**
+  *@description Text in InterestGroupStorage Items View of the Application panel
+  */
+  eventType: 'Access Type',
+  /**
+   *@description Text in InterestGroupStorage Items View of the Application panel
+  */
+  groupOwner: 'Owner',
+  /**
+   *@description Text in InterestGroupStorage Items View of the Application panel
+  */
+  groupName: 'Name',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/InterestGroupAccessGrid.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class InterestGroupAccessGrid extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-interest-group-access-grid`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #datastores: Array<Protocol.Storage.InterestGroupAccessedEvent> = [];
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [interestGroupAccessGridStyles];
+    this.#render();
+  }
+
+  set data(data: Array<Protocol.Storage.InterestGroupAccessedEvent>) {
+    this.#datastores = data;
+    this.#render();
+  }
+
+  #render(): void {
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div>
+        <span class="heading">Interest Groups</span>
+        <${IconButton.Icon.Icon.litTagName} class="info-icon" title=${
+            i18nString(UIStrings.allInterestGroupStorageEvents)}
+          .data=${
+            {iconName: 'ic_info_black_18dp', color: 'var(--color-link)', width: '14px'} as
+            IconButton.Icon.IconWithName}>
+        </${IconButton.Icon.Icon.litTagName}>
+        ${this.#renderGrid()}
+      </div>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+
+  #renderGrid(): LitHtml.TemplateResult {
+    const gridData: DataGrid.DataGridController.DataGridControllerData = {
+      columns: [
+        {
+          id: 'event-time',
+          title: i18nString(UIStrings.eventTime),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-type',
+          title: i18nString(UIStrings.eventType),
+          widthWeighting: 5,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-group-owner',
+          title: i18nString(UIStrings.groupOwner),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-group-name',
+          title: i18nString(UIStrings.groupName),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+      ],
+      rows: this.#buildRows(),
+      initialSort: {
+        columnId: 'event-time',
+        direction: DataGrid.DataGridUtils.SortDirection.ASC,
+      },
+    };
+
+    return LitHtml.html`
+      <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+        gridData as DataGrid.DataGridController.DataGridControllerData}></${
+        DataGrid.DataGridController.DataGridController.litTagName}>
+    `;
+  }
+
+  #buildRows(): DataGrid.DataGridUtils.Row[] {
+    return this.#datastores.map(event => ({
+                                  cells: [
+                                    {
+                                      columnId: 'event-time',
+                                      value: event.accessTime,
+                                      renderer: this.#renderDateForDataGridCell.bind(this),
+                                    },
+                                    {columnId: 'event-type', value: event.type},
+                                    {columnId: 'event-group-owner', value: event.ownerOrigin},
+                                    {columnId: 'event-group-name', value: event.name},
+                                  ],
+                                }));
+  }
+
+  #renderDateForDataGridCell(value: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
+    const date = new Date(1e3 * (value as number));
+    return LitHtml.html`${date.toLocaleString()}`;
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-interest-group-access-grid', InterestGroupAccessGrid);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-interest-group-access-grid': InterestGroupAccessGrid;
+  }
+}

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

@@ -5,6 +5,7 @@
 import * as BackForwardCacheView from './BackForwardCacheView.js';
 import * as EndpointsGrid from './EndpointsGrid.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
+import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
 import * as ReportsGrid from './ReportsGrid.js';
 import * as StackTrace from './StackTrace.js';
@@ -14,6 +15,7 @@ export {
   BackForwardCacheView,
   EndpointsGrid,
   FrameDetailsView,
+  InterestGroupAccessGrid,
   OriginTrialTreeView,
   ReportsGrid,
   StackTrace,

package/front_end/panels/application/components/interestGroupAccessGrid.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 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.
+ */
+:host {
+  padding: 20px;
+}
+
+.heading {
+  font-size: 15px;
+}
+
+devtools-data-grid-controller {
+  border: 1px solid var(--color-details-hairline);
+  margin-top: 20px;
+}
+
+.info-icon {
+  vertical-align: text-bottom;
+  height: 14px;
+}
+
+.no-tt-message {
+  margin-top: 20px;
+}

package/front_end/panels/application/interestGroupStorageView.css

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -364,9 +364,16 @@ export class UISourceCodeFrame extends
     this.unloadUISourceCode();
     this.persistenceBinding = binding;
     this.initializeUISourceCode();
+    this.reloadMessages();
     this.reloadPlugins();
   }
 
+  private reloadMessages(): void {
+    const messages = [...this.allMessages()];
+    const {editor} = this.textEditor;
+    editor.dispatch({effects: setRowMessages.of(RowMessages.create(messages))});
+  }
+
   private updateStyle(): void {
     this.setEditable(this.canEditSourceInternal());
   }

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.964440"
+  "version": "1.0.964938"
 }