chrome-devtools-frontend 1.0.1661063 → 1.0.1662965

package/front_end/models/trace/handlers/AuctionWorkletsHandler.ts

@@ -1,183 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Helpers from '../helpers/helpers.js';
-import * as Types from '../types/types.js';
-
-/**
- * There are two metadata events that we care about.
- * => AuctionWorkletRunningInProcess tells us which process the Auction Worklet
- *    has taken to run in.
- * => AuctionWorkletDoneWithProcess tells us when the worklet is done with that
- *    process. This is less useful - but in the future we might want to surface
- *    this information so we still parse and return the event.
- *
- * It is important to note that the top level PID on these events is NOT the
- * PID that the worklet is running on; instead we have to look at its
- * args.data.pid property, which is the PID of the process that it is running
- * on.
- *
- * For any given RunningInProcess event, we would typically expect to see a
- * DoneWithProcess event, however this is not guaranteed, especially as users
- * can record any chunk of time in DevTools.
- *
- * Similarly, it is also possible to see a DoneWithProcess event without a
- * RunningInProcess event, if the user started recording after the auction
- * worklets started. Therefore we are happy to create
- * SyntheticAuctionWorklets as long as we see just one of these events.
- *
- * If we do get two events and need to pair them, we can use the
- * args.data.target property, which is a string ID shared by both
- * events.
- */
-let runningInProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletRunningInProcess>();
-let doneWithProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletDoneWithProcess>();
-
-// Keyed by the PID defined in  `args.data.pid` on AuctionWorklet trace events..
-let createdSyntheticEvents = new Map<Types.Events.ProcessID, Types.Events.SyntheticAuctionWorklet>();
-
-// Each AuctonWorklet takes over a process and has 2 threads (that we care
-// about and want to show as tracks):
-// 1. A CrUtilityMain thread which is known as the "control process".
-// 2. A AuctionV8HelperThread which is the actual auction worklet and will be
-//    either a "Seller" or a "Bidder"
-// To detect these we look for the metadata thread_name events. We key these by
-// PID so that we can easily look them up later without having to loop through.
-let utilityThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
-let v8HelperThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
-
-export function reset(): void {
-  runningInProcessEvents = new Map();
-  doneWithProcessEvents = new Map();
-  createdSyntheticEvents = new Map();
-  utilityThreads = new Map();
-  v8HelperThreads = new Map();
-}
-
-export function handleEvent(event: Types.Events.Event): void {
-  if (Types.Events.isAuctionWorkletRunningInProcess(event)) {
-    runningInProcessEvents.set(event.args.data.pid, event);
-    return;
-  }
-
-  if (Types.Events.isAuctionWorkletDoneWithProcess(event)) {
-    doneWithProcessEvents.set(event.args.data.pid, event);
-    return;
-  }
-
-  if (Types.Events.isThreadName(event)) {
-    if (event.args.name === 'auction_worklet.CrUtilityMain') {
-      utilityThreads.set(event.pid, event);
-      return;
-    }
-    if (event.args.name === 'AuctionV8HelperThread') {
-      v8HelperThreads.set(event.pid, event);
-    }
-  }
-}
-
-function workletType(input: string): Types.Events.AuctionWorkletType {
-  switch (input) {
-    case 'seller':
-      return Types.Events.AuctionWorkletType.SELLER;
-    case 'bidder':
-      return Types.Events.AuctionWorkletType.BIDDER;
-    default:
-      return Types.Events.AuctionWorkletType.UNKNOWN;
-  }
-}
-
-/**
- * We cannot make the full event without knowing the type of event, but we can
- * create everything other than the `args` field, as those are identical
- * regardless of the type of event.
- */
-function makeSyntheticEventBase(
-    event: Types.Events.AuctionWorkletDoneWithProcess|
-    Types.Events.AuctionWorkletRunningInProcess): Omit<Types.Events.SyntheticAuctionWorklet, 'args'> {
-  return Helpers.SyntheticEvents.SyntheticEventsManager
-      .registerSyntheticEvent<Omit<Types.Events.SyntheticAuctionWorklet, 'args'>>({
-        rawSourceEvent: event,
-        name: 'SyntheticAuctionWorklet',
-        s: Types.Events.Scope.THREAD,
-        cat: event.cat,
-        tid: event.tid,
-        ts: event.ts,
-        ph: Types.Events.Phase.INSTANT,
-        pid: event.args.data.pid,
-        host: event.args.data.host,
-        target: event.args.data.target,
-        type: workletType(event.args.data.type),
-      });
-}
-
-export async function finalize(): Promise<void> {
-  // Loop through the utility threads we found to create the worklet events. We
-  // expect each worklet to have a utility thread, so we can use them as the
-  // root of our list of worklets.
-  for (const [pid, utilityThreadNameEvent] of utilityThreads) {
-    const v8HelperEvent = v8HelperThreads.get(pid);
-    if (!v8HelperEvent) {
-      // Bad trace data - AuctionWorklets are expected to always have both threads.
-      continue;
-    }
-
-    const runningEvent = runningInProcessEvents.get(pid);
-    const doneWithEvent = doneWithProcessEvents.get(pid);
-
-    // We can create a worklet from either the runningEvent or doneWithEvent -
-    // we do not need both. We cannot express that to TypeScript with an early
-    // return here, so instead we set the event initially to null, and then
-    // create it from either the running event or the doneWith event. If it is
-    // still null after this, that means neither event was found, and we drop
-    // the worklet as we do not have enough information to create the synthetic
-    // event.
-
-    let syntheticEvent: Types.Events.SyntheticAuctionWorklet|null = null;
-
-    if (runningEvent) {
-      syntheticEvent = {
-        ...makeSyntheticEventBase(runningEvent),
-        args: {
-          data: {
-            runningInProcessEvent: runningEvent,
-            utilityThread: utilityThreadNameEvent,
-            v8HelperThread: v8HelperEvent,
-          },
-        },
-      };
-      if (doneWithEvent) {
-        syntheticEvent.args.data.doneWithProcessEvent = doneWithEvent;
-      }
-    } else if (doneWithEvent) {
-      syntheticEvent = {
-        ...makeSyntheticEventBase(doneWithEvent),
-        args: {
-          data: {
-            doneWithProcessEvent: doneWithEvent,
-            utilityThread: utilityThreadNameEvent,
-            v8HelperThread: v8HelperEvent,
-          },
-        },
-      };
-      if (runningEvent) {
-        syntheticEvent.args.data.runningInProcessEvent = runningEvent;
-      }
-    }
-    if (syntheticEvent === null) {
-      continue;
-    }
-    createdSyntheticEvents.set(pid, syntheticEvent);
-  }
-}
-
-export interface AuctionWorkletsData {
-  worklets: Map<Types.Events.ProcessID, Types.Events.SyntheticAuctionWorklet>;
-}
-
-export function data(): AuctionWorkletsData {
-  return {
-    worklets: createdSyntheticEvents,
-  };
-}

package/front_end/panels/application/InterestGroupStorageModel.ts

@@ -1,81 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
-import type * as Protocol from '../../generated/protocol.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.INTEREST_GROUP_ACCESS, event);
-  }
-
-  indexedDBListUpdated(_event: Protocol.Storage.IndexedDBListUpdatedEvent): void {
-  }
-
-  indexedDBContentUpdated(_event: Protocol.Storage.IndexedDBContentUpdatedEvent): void {
-  }
-
-  interestGroupAuctionEventOccurred(_event: Protocol.Storage.InterestGroupAuctionEventOccurredEvent): void {
-  }
-
-  interestGroupAuctionNetworkRequestCreated(_event: Protocol.Storage.InterestGroupAuctionNetworkRequestCreatedEvent):
-      void {
-  }
-
-  cacheStorageListUpdated(_event: Protocol.Storage.CacheStorageListUpdatedEvent): void {
-  }
-
-  cacheStorageContentUpdated(_event: Protocol.Storage.CacheStorageContentUpdatedEvent): void {
-  }
-
-  sharedStorageAccessed(_event: Protocol.Storage.SharedStorageAccessedEvent): void {
-  }
-
-  sharedStorageWorkletOperationExecutionFinished(
-      _event: Protocol.Storage.SharedStorageWorkletOperationExecutionFinishedEvent): void {
-  }
-
-  storageBucketCreatedOrUpdated(_event: Protocol.Storage.StorageBucketCreatedOrUpdatedEvent): void {
-  }
-
-  storageBucketDeleted(_event: Protocol.Storage.StorageBucketDeletedEvent): void {
-  }
-}
-
-SDK.SDKModel.SDKModel.register(
-    InterestGroupStorageModel, {capabilities: SDK.Target.Capability.STORAGE, autostart: false});
-
-export const enum Events {
-  INTEREST_GROUP_ACCESS = 'InterestGroupAccess',
-}
-
-export interface EventTypes {
-  [Events.INTEREST_GROUP_ACCESS]: Protocol.Storage.InterestGroupAccessedEvent;
-}

package/front_end/panels/application/InterestGroupStorageView.ts

@@ -1,151 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Protocol from '../../generated/protocol.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-
-import * as ApplicationComponents from './components/components.js';
-import interestGroupStorageViewStyles from './interestGroupStorageView.css.js';
-
-const UIStrings = {
-  /**
-   * @description Placeholder text shown when nothing has been selected for display
-   *details.
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  noValueSelected: 'No interest group selected',
-  /**
-   * @description Placeholder text instructing the user how to display interest group
-   *details.
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  clickToDisplayBody: 'Select any interest group event to display the group\'s current state',
-  /**
-   * @description Placeholder text telling the user no details are available for
-   *the selected interest group.
-   */
-  noDataAvailable: 'No details available',
-  /**
-   * @description Placeholder text explaining to the user a potential reason for not having details on
-   * the interest groups.
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  noDataDescription: 'The browser may have left the group.',
-} as const;
-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<object|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;
-  private noDataView: UI.Widget.VBox;
-  private noDisplayView: UI.Widget.VBox;
-
-  constructor(detailsGetter: InterestGroupDetailsGetter) {
-    super(/* isVertical */ false, /* secondIsSidebar: */ true);
-    this.element.setAttribute('jslog', `${VisualLogging.pane('interest-groups')}`);
-    this.detailsGetter = detailsGetter;
-
-    const topPanel = new UI.Widget.VBox();
-    this.noDisplayView =
-        new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noValueSelected), i18nString(UIStrings.clickToDisplayBody));
-    this.noDataView =
-        new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noDataAvailable), i18nString(UIStrings.noDataDescription));
-
-    topPanel.setMinimumSize(0, 120);
-    this.setMainWidget(topPanel);
-    this.noDisplayView.setMinimumSize(0, 80);
-    this.setSidebarWidget(this.noDisplayView);
-    this.noDataView.setMinimumSize(0, 80);
-    this.noDisplayView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    this.noDataView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    this.hideSidebar();
-
-    topPanel.contentElement.appendChild(this.interestGroupGrid);
-    this.interestGroupGrid.addEventListener('select', this.onFocus.bind(this));
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    const mainWidget = this.mainWidget();
-    if (mainWidget) {
-      mainWidget.registerRequiredCSS(interestGroupStorageViewStyles);
-    }
-  }
-
-  addEvent(event: Protocol.Storage.InterestGroupAccessedEvent): void {
-    if (this.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
-      this.showBoth();
-    }
-    // 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;
-    this.setSidebarWidget(this.noDisplayView);
-    this.sidebarUpdatedForTesting();
-  }
-
-  private async onFocus(event: Event): Promise<void> {
-    const focusedEvent = event as CustomEvent<Protocol.Storage.InterestGroupAccessedEvent>;
-    const {ownerOrigin, name, type: eventType} = focusedEvent.detail;
-
-    let details = null;
-    // Details of additional bids can't be looked up like regular bids,
-    // they are ephemeral to the auction.
-    if (eventType !== Protocol.Storage.InterestGroupAccessType.AdditionalBid &&
-        eventType !== Protocol.Storage.InterestGroupAccessType.AdditionalBidWin &&
-        eventType !== Protocol.Storage.InterestGroupAccessType.TopLevelAdditionalBid) {
-      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) {
-        jsonView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-        this.setSidebarWidget(jsonView);
-      }
-    } else {
-      this.setSidebarWidget(this.noDataView);
-    }
-    this.sidebarUpdatedForTesting();
-  }
-
-  getEventsForTesting(): Protocol.Storage.InterestGroupAccessedEvent[] {
-    return this.events;
-  }
-
-  getInterestGroupGridForTesting(): ApplicationComponents.InterestGroupAccessGrid.InterestGroupAccessGrid {
-    return this.interestGroupGrid;
-  }
-
-  sidebarUpdatedForTesting(): void {
-  }
-}

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -1,65 +0,0 @@
-// Copyright 2022 The Chromium Authors
-// 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 type * as Platform from '../../core/platform/platform.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
-import {createIcon} from '../../ui/kit/kit.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {InterestGroupStorageView} from './InterestGroupStorageView.js';
-import type {ResourcesPanel} from './ResourcesPanel.js';
-
-const UIStrings = {
-  /**
-   * @description Label for an item in the Application Panel Sidebar of the Application panel
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction. (https://developer.chrome.com/blog/fledge-api/)
-   */
-  interestGroups: 'Interest groups',
-} as const;
-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, 'interest-groups');
-    const interestGroupIcon = createIcon('database');
-    this.setLeadingIcons([interestGroupIcon]);
-    this.view = new InterestGroupStorageView(this);
-  }
-
-  override get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'interest-groups://' as Platform.DevToolsPath.UrlString;
-  }
-
-  async getInterestGroupDetails(owner: string, name: string): Promise<object|null> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!mainTarget) {
-      return null;
-    }
-    const response = await mainTarget.storageAgent().invoke_getInterestGroupDetails({ownerOrigin: owner, name});
-    return response.details;
-  }
-
-  override onselect(selectedByUser?: boolean): boolean {
-    super.onselect(selectedByUser);
-    this.showView(this.view);
-    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('interest-groups');
-    return false;
-  }
-
-  addEvent(event: Protocol.Storage.InterestGroupAccessedEvent): void {
-    this.view.addEvent(event);
-  }
-
-  clearEvents(): void {
-    this.view.clearEvents();
-  }
-}

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

@@ -1,135 +0,0 @@
-// Copyright 2022 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
-import '../../../ui/legacy/components/data_grid/data_grid.js';
-
-import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Protocol from '../../../generated/protocol.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-
-import interestGroupAccessGridStyles from './interestGroupAccessGrid.css.js';
-
-const {html} = Lit;
-
-const UIStrings = {
-  /**
-   * @description Hover text for an info icon in the Interest Group Event panel
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  allInterestGroupStorageEvents: 'All interest group storage events.',
-  /**
-   * @description Text in InterestGroupStorage Items View of the Application panel
-   * Date and time of an Interest Group storage event in a locale-
-   * dependent format.
-   */
-  eventTime: 'Event Time',
-  /**
-   * @description Text in InterestGroupStorage Items View of the Application panel
-   * Type of interest group event such as 'join', 'bid', 'win', or 'leave'.
-   */
-  eventType: 'Access Type',
-  /**
-   * @description Text in InterestGroupStorage Items View of the Application panel
-   * Owner of the interest group. The origin that controls the
-   * content of information associated with the interest group such as which
-   * ads get displayed.
-   */
-  groupOwner: 'Owner',
-  /**
-   * @description Text in InterestGroupStorage Items View of the Application panel
-   * Name of the interest group. The name is unique per-owner and identifies the
-   * interest group.
-   */
-  groupName: 'Name',
-  /**
-   * @description Text shown when no interest groups are detected.
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  noEvents: 'No interest group events detected',
-  /**
-   * @description Text shown when no interest groups are detected and explains what this page is about.
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  interestGroupDescription: 'On this page you can inspect and analyze interest groups',
-} as const;
-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 {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #datastores: Protocol.Storage.InterestGroupAccessedEvent[] = [];
-
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  // eslint-disable-next-line @devtools/set-data-type-reference
-  set data(data: Protocol.Storage.InterestGroupAccessedEvent[]) {
-    this.#datastores = data;
-    this.#render();
-  }
-
-  #render(): void {
-    // clang-format off
-    Lit.render(html`
-      <style>${interestGroupAccessGridStyles}</style>
-      <style>${UI.inspectorCommonStyles}</style>
-      ${this.#datastores.length === 0 ?
-        html`
-          <div class="empty-state">
-            <span class="empty-state-header">${i18nString(UIStrings.noEvents)}</span>
-            <span class="empty-state-description">${i18nString(UIStrings.interestGroupDescription)}</span>
-          </div>`:
-        html`
-          <div>
-            <span class="heading">Interest Groups</span>
-            <devtools-icon class="info-icon medium" name="info"
-                          title=${i18nString(UIStrings.allInterestGroupStorageEvents)}>
-            </devtools-icon>
-            ${this.#renderGrid()}
-          </div>`}
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-
-  #renderGrid(): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <devtools-data-grid striped inline>
-        <table>
-          <tr>
-            <th id="event-time" sortable weight="10">${i18nString(UIStrings.eventTime)}</td>
-            <th id="event-type" sortable weight="5">${i18nString(UIStrings.eventType)}</td>
-            <th id="event-group-owner" sortable weight="10">${i18nString(UIStrings.groupOwner)}</td>
-            <th id="event-group-name" sortable weight="10">${i18nString(UIStrings.groupName)}</td>
-          </tr>
-          ${this.#datastores.map(event => html`
-          <tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: event}))}>
-            <td>${new Date(1e3 * event.accessTime).toLocaleString()}</td>
-            <td>${event.type}</td>
-            <td>${event.ownerOrigin}</td>
-            <td>${event.name}</td>
-          </tr>
-        `)}
-        </table>
-      </devtools-data-grid>`;
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-interest-group-access-grid', InterestGroupAccessGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-interest-group-access-grid': InterestGroupAccessGrid;
-  }
-}

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

@@ -1,27 +0,0 @@
-/*
- * Copyright 2021 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-:host {
-  display: flex;
-  padding: 20px;
-  height: 100%;
-}
-
-.heading {
-  font-size: 15px;
-}
-
-devtools-data-grid {
-  margin-top: 20px;
-}
-
-.info-icon {
-  vertical-align: text-bottom;
-  height: 14px;
-}
-
-.no-events-message {
-  margin-top: 20px;
-}

package/front_end/panels/application/interestGroupStorageView.css

@@ -1,9 +0,0 @@
-/*
- * Copyright 2021 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-devtools-interest-group-access-grid {
-  overflow: auto;
-}