chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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

@@ -16,45 +16,45 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Hover text for an info icon in the Interest Group Event panel
+   * @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
+   * @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
+   * @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
+   * @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
+   * @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.
+   * @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.
+   * @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.
@@ -92,9 +92,8 @@ export class InterestGroupAccessGrid extends HTMLElement {
         html`
           <div>
             <span class="heading">Interest Groups</span>
-            <devtools-icon class="info-icon"
-                          title=${i18nString(UIStrings.allInterestGroupStorageEvents)}
-                          .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
+            <devtools-icon class="info-icon medium" name="info"
+                          title=${i18nString(UIStrings.allInterestGroupStorageEvents)}>
             </devtools-icon>
             ${this.#renderGrid()}
           </div>`}

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

@@ -10,7 +10,6 @@ import '../../../ui/components/tree_outline/tree_outline.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
@@ -22,53 +21,53 @@ const {html, Directives: {ifDefined}} = Lit;
 
 const UIStrings = {
   /**
-   *@description Label for the 'origin' field in a parsed Origin Trial Token.
+   * @description Label for the 'origin' field in a parsed Origin Trial Token.
    */
   origin: 'Origin',
   /**
-   *@description Label for `trialName` field in a parsed Origin Trial Token.
+   * @description Label for `trialName` field in a parsed Origin Trial Token.
    * This field is only shown when token has unknown trial name as the token
    * will be put into 'UNKNOWN' group.
    */
   trialName: 'Trial Name',
   /**
-   *@description Label for `expiryTime` field in a parsed Origin Trial Token.
+   * @description Label for `expiryTime` field in a parsed Origin Trial Token.
    */
   expiryTime: 'Expiry Time',
   /**
-   *@description Label for `usageRestriction` field in a parsed Origin Trial Token.
+   * @description Label for `usageRestriction` field in a parsed Origin Trial Token.
    */
   usageRestriction: 'Usage Restriction',
   /**
-   *@description Label for `isThirdParty` field in a parsed Origin Trial Token.
+   * @description Label for `isThirdParty` field in a parsed Origin Trial Token.
    */
   isThirdParty: 'Third Party',
   /**
-   *@description Label for a field containing info about an Origin Trial Token's `matchSubDomains` field.
+   * @description Label for a field containing info about an Origin Trial Token's `matchSubDomains` field.
    *An Origin Trial Token contains an origin URL. The `matchSubDomains` field describes whether the token
    *only applies to the origin URL or to all subdomains of the origin URL as well.
    *The field contains either 'true' or 'false'.
    */
   matchSubDomains: 'Subdomain Matching',
   /**
-   *@description Label for the raw(= encoded / not human-readable) Origin Trial Token.
+   * @description Label for the raw(= encoded / not human-readable) Origin Trial Token.
    */
   rawTokenText: 'Raw Token',
   /**
-   *@description Label for `status` field in an Origin Trial Token.
+   * @description Label for `status` field in an Origin Trial Token.
    */
   status: 'Token Status',
   /**
-   *@description Label for tokenWithStatus node.
+   * @description Label for tokenWithStatus node.
    */
   token: 'Token',
   /**
-   *@description Label for a badge showing the number of Origin Trial Tokens. This number is always greater than 1.
-   *@example {2} PH1
+   * @description Label for a badge showing the number of Origin Trial Tokens. This number is always greater than 1.
+   * @example {2} PH1
    */
   tokens: '{PH1} tokens',
   /**
-   *@description Label shown when there are no Origin Trial Tokens in the Frame view of the Application panel.
+   * @description Label shown when there are no Origin Trial Tokens in the Frame view of the Application panel.
    */
   noTrialTokens: 'No trial tokens',
 } as const;
@@ -334,15 +333,7 @@ export class OriginTrialTreeView extends HTMLElement {
           html`
     <style>${originTrialTreeViewStyles}</style>
     <span class="status-badge">
-      <devtools-icon
-          .data=${{
-            iconName: 'clear',
-            color: 'var(--icon-default)',
-            width: '16px',
-            height: '16px',
-          } as IconButton.Icon.IconWithName}
-        >
-      </devtools-icon>
+      <devtools-icon class="medium" name="clear"></devtools-icon>
       <span>${i18nString(UIStrings.noTrialTokens)}</span>
     </span>`,
           this.#shadow, {host: this});

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

@@ -23,42 +23,42 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Label for a button. When clicked more details (for the content this button refers to) will be shown.
+   * @description Label for a button. When clicked more details (for the content this button refers to) will be shown.
    */
   showDetails: 'Show details',
   /**
-   *@description Label for a button. When clicked some details (for the content this button refers to) will be hidden.
+   * @description Label for a button. When clicked some details (for the content this button refers to) will be hidden.
    */
   hideDetails: 'Hide details',
   /**
-   *@description Label for a list of features which are allowed according to the current Permissions policy
+   * @description Label for a list of features which are allowed according to the current Permissions policy
    *(a mechanism that allows developers to enable/disable browser features and APIs (e.g. camera, geolocation, autoplay))
    */
   allowedFeatures: 'Allowed Features',
   /**
-   *@description Label for a list of features which are disabled according to the current Permissions policy
+   * @description Label for a list of features which are disabled according to the current Permissions policy
    *(a mechanism that allows developers to enable/disable browser features and APIs (e.g. camera, geolocation, autoplay))
    */
   disabledFeatures: 'Disabled Features',
   /**
-   *@description Tooltip text for a link to a specific request's headers in the Network panel.
+   * @description Tooltip text for a link to a specific request's headers in the Network panel.
    */
   clickToShowHeader: 'Click to reveal the request whose "`Permissions-Policy`" HTTP header disables this feature.',
   /**
-   *@description Tooltip text for a link to a specific iframe in the Elements panel (Iframes can be nested, the link goes
+   * @description Tooltip text for a link to a specific iframe in the Elements panel (Iframes can be nested, the link goes
    *  to the outer-most iframe which blocks a certain feature).
    */
   clickToShowIframe: 'Click to reveal the top-most iframe which does not allow this feature in the elements panel.',
   /**
-   *@description Text describing that a specific feature is blocked by not being included in the iframe's "allow" attribute.
+   * @description Text describing that a specific feature is blocked by not being included in the iframe's "allow" attribute.
    */
   disabledByIframe: 'missing in iframe "`allow`" attribute',
   /**
-   *@description Text describing that a specific feature is blocked by a Permissions Policy specified in a request header.
+   * @description Text describing that a specific feature is blocked by a Permissions Policy specified in a request header.
    */
   disabledByHeader: 'disabled by "`Permissions-Policy`" header',
   /**
-   *@description Text describing that a specific feature is blocked by virtue of being inside a fenced frame tree.
+   * @description Text describing that a specific feature is blocked by virtue of being inside a fenced frame tree.
    */
   disabledByFencedFrame: 'disabled inside a `fencedframe`',
 } as const;
@@ -175,12 +175,7 @@ export class PermissionsPolicySection extends HTMLElement {
       return html`
         <div class="permissions-row">
           <div>
-            <devtools-icon class="allowed-icon"
-              .data=${{
-                color: 'var(--icon-error)',
-                iconName: 'cross-circle',
-                width: '20px', height: '20px',
-              }}>
+            <devtools-icon class="allowed-icon extra-large" name="cross-circle">
             </devtools-icon>
           </div>
           <div class="feature-name text-ellipsis">
@@ -203,7 +198,7 @@ export class PermissionsPolicySection extends HTMLElement {
           </div>
         </div>
       `;
-              // clang-format on
+      // clang-format on
     }));
 
     return html`

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

@@ -21,32 +21,32 @@ const {html} = Lit;
 const PROTOCOL_DOCUMENT_URL = 'https://web.dev/url-protocol-handler/';
 const UIStrings = {
   /**
-   *@description Status message for when protocol handlers are detected in the manifest
-   *@example {protocolhandler/manifest.json} PH1
+   * @description Status message for when protocol handlers are detected in the manifest
+   * @example {protocolhandler/manifest.json} PH1
    */
   protocolDetected:
       'Found valid protocol handler registration in the {PH1}. With the app installed, test the registered protocols.',
   /**
-   *@description Status message for when protocol handlers are not detected in the manifest
-   *@example {protocolhandler/manifest.json} PH1
+   * @description Status message for when protocol handlers are not detected in the manifest
+   * @example {protocolhandler/manifest.json} PH1
    */
   protocolNotDetected:
       'Define protocol handlers in the {PH1} to register your app as a handler for custom protocols when your app is installed.',
   /**
-   *@description Text wrapping a link pointing to more information on handling protocol handlers
-   *@example {https://example.com/} PH1
+   * @description Text wrapping a link pointing to more information on handling protocol handlers
+   * @example {https://example.com/} PH1
    */
   needHelpReadOur: 'Need help? Read {PH1}.',
   /**
-   *@description Link text for more information on URL protocol handler registrations for PWAs
+   * @description Link text for more information on URL protocol handler registrations for PWAs
    */
   protocolHandlerRegistrations: 'URL protocol handler registration for PWAs',
   /**
-   *@description In text hyperlink to the PWA manifest
+   * @description In text hyperlink to the PWA manifest
    */
   manifest: 'manifest',
   /**
-   *@description Text for test protocol button
+   * @description Text for test protocol button
    */
   testProtocol: 'Test protocol',
   /**
@@ -114,7 +114,7 @@ export class ProtocolHandlersView extends HTMLElement {
     return html`
     <div class="protocol-handlers-row status">
             <devtools-icon class="inline-icon"
-                                                name=${this.#protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
+                           name=${this.#protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
             </devtools-icon>
             ${i18n.i18n.getFormatLocalizedString(str_, statusString, {
       PH1: manifestInTextLink,

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

@@ -21,12 +21,12 @@ import reportingApiGridStyles from './reportingApiGrid.css.js';
 
 const UIStrings = {
   /**
-   *@description Placeholder text when there are no Reporting API reports.
+   * @description Placeholder text when there are no Reporting API reports.
    *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
    */
   noReportsToDisplay: 'No reports to display',
   /**
-   *@description Placeholder text that explains Reporting API reports.
+   * @description Placeholder text that explains Reporting API reports.
    *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
    */
   reportingApiDescription: 'Here you will find reporting api reports that are generated by the page.',
@@ -35,17 +35,17 @@ const UIStrings = {
    */
   learnMore: 'Learn more',
   /**
-   *@description Column header for a table displaying Reporting API reports.
+   * @description Column header for a table displaying Reporting API reports.
    *Status is one of 'Queued', 'Pending', 'MarkedForRemoval' or 'Success'.
    */
   status: 'Status',
   /**
-   *@description Column header for a table displaying Reporting API reports.
+   * @description Column header for a table displaying Reporting API reports.
    *Destination is the name of the endpoint the report is being sent to.
    */
   destination: 'Destination',
   /**
-   *@description Column header for a table displaying Reporting API reports.
+   * @description Column header for a table displaying Reporting API reports.
    *The column contains the timestamp of when a report was generated.
    */
   generatedAt: 'Generated at'
@@ -72,12 +72,7 @@ export class ReportsGridStatusHeader extends HTMLElement {
       <span class="status-header">${i18nString(UIStrings.status)}</span>
       <x-link href="https://web.dev/reporting-api/#report-status"
       jslog=${VisualLogging.link('report-status').track({click: true})}>
-        <devtools-icon class="inline-icon" .data=${{
-          iconName: 'help',
-          color: 'var(--icon-link)',
-          width: '16px',
-          height: '16px',
-          }}></devtools-icon>
+        <devtools-icon class="inline-icon medium" name="help" style="color: var(--icon-link);"></devtools-icon>
       </x-link>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -103,6 +98,10 @@ export class ReportsGrid extends HTMLElement {
     this.#render();
   }
 
+  get data(): ReportsGridData {
+    return {reports: this.#reports};
+  }
+
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off

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

@@ -14,7 +14,7 @@ async function renderSharedStorageAccessGrid(events: Protocol.Storage.SharedStor
     Promise<ApplicationComponents.SharedStorageAccessGrid.SharedStorageAccessGrid> {
   const component = new ApplicationComponents.SharedStorageAccessGrid.SharedStorageAccessGrid();
   renderElementIntoDOM(component);
-  component.data = events;
+  component.events = events;
 
   // The data-grid's renderer is scheduled, so we need to wait until the coordinator
   // is done before we can test against it.
@@ -25,7 +25,7 @@ async function renderSharedStorageAccessGrid(events: Protocol.Storage.SharedStor
 
 function getInternalDataGridShadowRoot(
     component: ApplicationComponents.SharedStorageAccessGrid.SharedStorageAccessGrid): ShadowRoot {
-  const dataGrid = component.shadowRoot!.querySelector('devtools-data-grid')!;
+  const dataGrid = component.contentElement.querySelector('devtools-data-grid')!;
   assert.isNotNull(dataGrid.shadowRoot);
   return dataGrid.shadowRoot;
 }
@@ -75,10 +75,10 @@ describeWithLocale('SharedStorageAccessGrid', () => {
   it('hides shared storage event table when there are no events', async () => {
     const component = await renderSharedStorageAccessGrid([]);
 
-    const nullGridElement = component.shadowRoot!.querySelector('devtools-new-data');
+    const nullGridElement = component.contentElement.querySelector('devtools-new-data');
     assert.isNull(nullGridElement);
 
-    const noEventsElement = component.shadowRoot!.querySelector('.empty-state');
+    const noEventsElement = component.contentElement.querySelector('.empty-state');
     assert.instanceOf(noEventsElement, HTMLDivElement);
   });
 });

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

@@ -1,7 +1,6 @@
 // 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.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/legacy/components/data_grid/data_grid.js';
 
@@ -20,54 +19,54 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Text in Shared Storage Events View of the Application panel
+   * @description Text in Shared Storage Events View of the Application panel
    */
   sharedStorage: 'Shared storage',
   /**
-   *@description Hover text for an info icon in the Shared Storage Events panel
+   * @description Hover text for an info icon in the Shared Storage Events panel
    */
   allSharedStorageEvents: 'All shared storage events for this page.',
   /**
-   *@description Text in Shared Storage Events View of the Application panel
+   * @description Text in Shared Storage Events View of the Application panel
    * Date and time of an Shared Storage event in a locale-
    * dependent format.
    */
   eventTime: 'Event Time',
   /**
-   *@description Text in Shared Storage Events View of the Application panel
+   * @description Text in Shared Storage Events View of the Application panel
    * Scope of shared storage event such as 'window', 'sharedStorageWorklet',
    * 'protectedAudienceWorklet', or 'header'.
    */
   eventScope: 'Access Scope',
   /**
-   *@description Text in Shared Storage Events View of the Application panel
+   * @description Text in Shared Storage Events View of the Application panel
    * Method of shared storage event such as 'addModule', 'run', 'set', 'delete',
    * or 'get'.
    */
   eventMethod: 'Access Method',
   /**
-   *@description Text in Shared Storage Events View of the Application panel
+   * @description Text in Shared Storage Events View of the Application panel
    * Owner origin of the shared storage for this access event.
    */
   ownerOrigin: 'Owner Origin',
   /**
-   *@description Text in Shared Storage Events View of the Application panel
+   * @description Text in Shared Storage Events View of the Application panel
    * Owner site of the shared storage for this access event.
    */
   ownerSite: 'Owner Site',
   /**
-   *@description Text in Shared Storage Events View of the Application panel
+   * @description Text in Shared Storage Events View of the Application panel
    * Event parameters whose presence/absence depend on the access type.
    */
   eventParams: 'Optional Event Params',
   /**
-   *@description Text shown when no shared storage event is shown.
+   * @description Text shown when no shared storage event is shown.
    * Shared storage allows to store and access data that can be shared across different sites.
    * A shared storage event is for example an access from a site to that storage.
    */
   noEvents: 'No shared storage events detected',
   /**
-   *@description Text shown when no shared storage event is shown. It explains the shared storage event page.
+   * @description Text shown when no shared storage event is shown. It explains the shared storage event page.
    * Shared storage allows to store and access data that can be shared across different sites.
    * A shared storage event is for example an access from a site to that storage.
    */
@@ -83,32 +82,17 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/SharedStorageAccessGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SharedStorageAccessGrid extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #datastores: Protocol.Storage.SharedStorageAccessedEvent[] = [];
-
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  // eslint-disable-next-line rulesdir/set-data-type-reference
-  set data(data: Protocol.Storage.SharedStorageAccessedEvent[]) {
-    this.#datastores = data.sort((a, b) => a.accessTime - b.accessTime);
-    this.#render();
-  }
-
-  #render(): void {
-    // clang-format off
-    render(html`
-      <style>${sharedStorageAccessGridStyles}</style>
-      <style>${UI.inspectorCommonStyles}</style>
-      ${this.#renderGridOrNoDataMessage()}`, this.#shadow, {host: this});
-    // clang-format on
-  }
-
-  #renderGridOrNoDataMessage(): Lit.TemplateResult {
-    if (this.#datastores.length === 0) {
-      return html`
+export interface ViewInput {
+  events: Protocol.Storage.SharedStorageAccessedEvent[];
+  onSelect: (event: CustomEvent<HTMLElement>) => void;
+}
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${sharedStorageAccessGridStyles}</style>
+    ${input.events.length === 0
+      ? html`
         <div class="empty-state" jslog=${VisualLogging.section().context('empty-view')}>
           <div class="empty-state-header">${i18nString(UIStrings.noEvents)}</div>
           <div class="empty-state-description">
@@ -117,74 +101,96 @@ export class SharedStorageAccessGrid extends HTMLElement {
           UI.XLink.XLink.create(
               SHARED_STORAGE_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
           </div>
-        </div>
-      `;
-    }
-    // clang-format off
-    return html`
-      <div>
-        <span class="heading">${i18nString(UIStrings.sharedStorage)}</span>
-        <devtools-icon class="info-icon"
-                        title=${i18nString(UIStrings.allSharedStorageEvents)}
-                        .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
-        </devtools-icon>
-        <devtools-data-grid striped inline @select=${this.#onSelect}>
-          <table>
-            <tr>
-              <th id="event-time" weight="10" sortable>
-                ${i18nString(UIStrings.eventTime)}
-              </th>
-              <th id="event-scope" weight="10" sortable>
-                ${i18nString(UIStrings.eventScope)}
-              </th>
-              <th id="event-method" weight="10" sortable>
-                ${i18nString(UIStrings.eventMethod)}
-              </th>
-              <th id="event-owner-origin" weight="10" sortable>
-                ${i18nString(UIStrings.ownerOrigin)}
-              </th>
-              <th id="event-owner-site" weight="10" sortable>
-                ${i18nString(UIStrings.ownerSite)}
-              </th>
-              <th id="event-params" weight="10" sortable>
-                ${i18nString(UIStrings.eventParams)}
-              </th>
-            </tr>
-            ${
-        this.#datastores.map((event, index) => html`
-              <tr data-index=${index}>
-                <td data-value=${event.accessTime}>
-                  ${
-            new Date(1e3 * event.accessTime)
-                .toLocaleString()}
-                </td>
-                <td>${event.scope}</td>
-                <td>${event.method}</td>
-                <td>${event.ownerOrigin}</td>
-                <td>${event.ownerSite}</td>
-                <td>${JSON.stringify(event.params)}</td>
-              </tr>
-            `)}
-          </table>
-        </devtools-data-grid>
-      </div>
-    `;
-    // clang-format on
+        </div>`
+      : html`
+        <div jslog=${VisualLogging.section('events-table')}>
+          <span class="heading">${i18nString(UIStrings.sharedStorage)}</span>
+          <devtools-icon class="info-icon medium" name="info"
+                          title=${i18nString(UIStrings.allSharedStorageEvents)}>
+          </devtools-icon>
+          <devtools-data-grid striped inline @select=${input.onSelect}>
+            <table>
+              <thead>
+                <tr>
+                  <th id="event-time" weight="10" sortable>
+                    ${i18nString(UIStrings.eventTime)}
+                  </th>
+                  <th id="event-scope" weight="10" sortable>
+                    ${i18nString(UIStrings.eventScope)}
+                  </th>
+                  <th id="event-method" weight="10" sortable>
+                    ${i18nString(UIStrings.eventMethod)}
+                  </th>
+                  <th id="event-owner-origin" weight="10" sortable>
+                    ${i18nString(UIStrings.ownerOrigin)}
+                  </th>
+                  <th id="event-owner-site" weight="10" sortable>
+                    ${i18nString(UIStrings.ownerSite)}
+                  </th>
+                  <th id="event-params" weight="10" sortable>
+                    ${i18nString(UIStrings.eventParams)}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                ${input.events.map((event, index) => html`
+                  <tr data-index=${index}>
+                    <td data-value=${event.accessTime}>
+                      ${new Date(1e3 * event.accessTime).toLocaleString()}
+                    </td>
+                    <td>${event.scope}</td>
+                    <td>${event.method}</td>
+                    <td>${event.ownerOrigin}</td>
+                    <td>${event.ownerSite}</td>
+                    <td>${JSON.stringify(event.params)}</td>
+                  </tr>
+                `)}
+              </tbody>
+            </table>
+          </devtools-data-grid>
+        </div>`}`, target);
+  // clang-format on
+};
+
+export class SharedStorageAccessGrid extends UI.Widget.Widget {
+  readonly #view: View;
+  #events: Protocol.Storage.SharedStorageAccessedEvent[] = [];
+  #onSelect: (event: Protocol.Storage.SharedStorageAccessedEvent) => void = () => {};
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+    this.performUpdate();
   }
 
-  #onSelect(event: CustomEvent<HTMLElement>): void {
-    const index = parseInt(event.detail.dataset.index || '', 10);
-    const datastore = isNaN(index) ? undefined : this.#datastores[index];
-    if (datastore) {
-      this.dispatchEvent(new CustomEvent('select', {detail: datastore}));
-    }
+  set events(events: Protocol.Storage.SharedStorageAccessedEvent[]) {
+    this.#events = events;
+    this.performUpdate();
+  }
+
+  set onSelect(onSelect: (event: Protocol.Storage.SharedStorageAccessedEvent) => unknown) {
+    this.#onSelect = onSelect;
+    this.performUpdate();
   }
-}
 
-customElements.define('devtools-shared-storage-access-grid', SharedStorageAccessGrid);
+  get onSelect(): (event: Protocol.Storage.SharedStorageAccessedEvent) => unknown {
+    return this.#onSelect;
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          events: this.#events,
+          onSelect: this.#onSelectEvent.bind(this),
+        },
+        {}, this.contentElement);
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-shared-storage-access-grid': SharedStorageAccessGrid;
+  #onSelectEvent(event: CustomEvent<HTMLElement>): void {
+    const index = parseInt(event.detail?.dataset.index || '', 10);
+    const datastore = isNaN(index) ? undefined : this.#events[index];
+    if (datastore) {
+      this.#onSelect(datastore);
+    }
   }
 }