Use <devtools-new-data-grid> in the InterestGroupAccessGrid

Bug: 390346490
Change-Id: Id523796fc92d369e2f3c2b1e07a46aaaa4788e8a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6195172
Commit-Queue: Danil Somsikov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: danilsomsikov

front_end/panels/application/InterestGroupStorageView.test.ts

@@ -6,7 +6,6 @@ import * as Protocol from '../../generated/protocol.js';
 import {raf} from '../../testing/DOMHelpers.js';
 import {expectCall} from '../../testing/ExpectStubCall.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
-import * as DataGrid from '../../ui/components/data_grid/data_grid.js';
 
 import * as Resources from './application.js';
 
@@ -84,16 +83,9 @@ describeWithMockConnection('InterestGroupStorageView', () => {
           view.addEvent(event);
         });
         const grid = view.getInterestGroupGridForTesting();
-        const cells = [
-          {columnId: 'event-time', value: 0},
-          {columnId: 'event-type', value: Protocol.Storage.InterestGroupAccessType.Join},
-          {columnId: 'event-group-owner', value: 'https://owner1.com'},
-          {columnId: 'event-group-name', value: 'cars'},
-        ];
         const spy = sinon.spy(view, 'setSidebarWidget');
         assert.isTrue(spy.notCalled);
-        grid.dispatchEvent(
-            new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'event-time', value: '0'}, {cells}));
+        grid.dispatchEvent(new CustomEvent('select', {detail: events[0]}));
         await raf();
         assert.isTrue(spy.calledOnce);
         assert.deepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');
@@ -113,17 +105,10 @@ describeWithMockConnection('InterestGroupStorageView', () => {
         view.addEvent(event);
       });
       const grid = view.getInterestGroupGridForTesting();
-      const cells = [
-        {columnId: 'event-time', value: 0},
-        {columnId: 'event-type', value: eventType},
-        {columnId: 'event-group-owner', value: 'https://owner1.com'},
-        {columnId: 'event-group-name', value: 'cars'},
-      ];
       const sideBarUpdateDone = expectCall(sinon.stub(view, 'sidebarUpdatedForTesting'));
       const spy = sinon.spy(view, 'setSidebarWidget');
       assert.isTrue(spy.notCalled);
-      grid.dispatchEvent(
-          new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'event-time', value: '0'}, {cells}));
+      grid.dispatchEvent(new CustomEvent('select', {detail: {...events[0], type: eventType}}));
       await sideBarUpdateDone;
       assert.isTrue(spy.calledOnce);
       assert.notDeepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');
@@ -144,16 +129,9 @@ describeWithMockConnection('InterestGroupStorageView', () => {
           view.addEvent(event);
         });
         const grid = view.getInterestGroupGridForTesting();
-        const cells = [
-          {columnId: 'event-time', value: 0},
-          {columnId: 'event-type', value: Protocol.Storage.InterestGroupAccessType.Join},
-          {columnId: 'event-group-owner', value: 'https://owner1.com'},
-          {columnId: 'event-group-name', value: 'cars'},
-        ];
         const spy = sinon.spy(view, 'setSidebarWidget');
         assert.isTrue(spy.notCalled);
-        grid.dispatchEvent(
-            new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'event-time', value: '0'}, {cells}));
+        grid.dispatchEvent(new CustomEvent('select', {detail: events[0]}));
         await raf();
         assert.isTrue(spy.calledOnce);
         assert.notDeepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');
@@ -171,15 +149,9 @@ describeWithMockConnection('InterestGroupStorageView', () => {
       view.addEvent(event);
     });
     const grid = view.getInterestGroupGridForTesting();
-    const cells = [
-      {columnId: 'event-time', value: 0},
-      {columnId: 'event-type', value: Protocol.Storage.InterestGroupAccessType.Join},
-      {columnId: 'event-group-owner', value: 'https://owner1.com'},
-      {columnId: 'event-group-name', value: 'cars'},
-    ];
     const spy = sinon.spy(view, 'setSidebarWidget');
     assert.isTrue(spy.notCalled);
-    grid.dispatchEvent(new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'event-time', value: '0'}, {cells}));
+    grid.dispatchEvent(new CustomEvent('select', {detail: events[0]}));
     await raf();
     assert.isTrue(spy.calledOnce);
     assert.deepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');

front_end/panels/application/InterestGroupStorageView.ts

@@ -4,7 +4,6 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Protocol from '../../generated/protocol.js';
-import type * as DataGrid from '../../ui/components/data_grid/data_grid.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';
@@ -59,7 +58,7 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
     this.noDataView.setMinimumSize(0, 40);
 
     topPanel.contentElement.appendChild(this.interestGroupGrid);
-    this.interestGroupGrid.addEventListener('cellfocused', this.onFocus.bind(this));
+    this.interestGroupGrid.addEventListener('select', this.onFocus.bind(this));
 
     this.noDisplayView.contentElement.classList.add('placeholder');
     this.noDisplayView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
@@ -97,19 +96,8 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
   }
 
   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;
-    const eventType =
-        row.cells.find(cell => cell.columnId === 'event-type')?.value as Protocol.Storage.InterestGroupAccessType;
-    if (!ownerOrigin || !name) {
-      return;
-    }
+    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,

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

@@ -5,11 +5,9 @@
 import * as Protocol from '../../../generated/protocol.js';
 import {getValuesOfAllBodyRows} from '../../../testing/DataGridHelpers.js';
 import {
-  getElementWithinComponent,
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithLocale} from '../../../testing/EnvironmentHelpers.js';
-import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as ApplicationComponents from './components.js';
@@ -29,9 +27,7 @@ async function renderInterestGroupAccessGrid(events: Protocol.Storage.InterestGr
 
 function getInternalDataGridShadowRoot(
     component: ApplicationComponents.InterestGroupAccessGrid.InterestGroupAccessGrid): ShadowRoot {
-  const dataGridController = getElementWithinComponent(
-      component, 'devtools-data-grid-controller', DataGrid.DataGridController.DataGridController);
-  const dataGrid = getElementWithinComponent(dataGridController, 'devtools-data-grid', DataGrid.DataGrid.DataGrid);
+  const dataGrid = component.shadowRoot!.querySelector('devtools-new-data-grid')!;
   assert.isNotNull(dataGrid.shadowRoot);
   return dataGrid.shadowRoot;
 }
@@ -65,7 +61,7 @@ describeWithLocale('InterestGroupAccessGrid', () => {
   it('hides interest group event table when there are no events', async () => {
     const component = await renderInterestGroupAccessGrid([]);
 
-    const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid-controller');
+    const nullGridElement = component.shadowRoot!.querySelector('devtools-new-data-grid');
     assert.isNull(nullGridElement);
 
     const noEventsElement = component.shadowRoot!.querySelector('div.no-events-message');

front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -2,9 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+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 DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import interestGroupAccessGridStyles from './interestGroupAccessGrid.css.js';
@@ -85,71 +86,32 @@ export class InterestGroupAccessGrid extends HTMLElement {
       return html`<div class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;
     }
 
-    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 html`
-      <devtools-data-grid-controller .data=${gridData}></devtools-data-grid-controller>
+      <devtools-new-data-grid @select=${this.#onSelect}>
+        <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, index) => html`
+          <tr data-index=${index}>
+            <td>${new Date(1e3 * event.accessTime).toLocaleString()}</td>
+            <td>${event.type}</td>
+            <td>${event.ownerOrigin}</td>
+            <td>${event.name}</td>
+          </tr>
+        `)}
+        </table>
+      </devtools-new-data-grid>
     `;
   }
 
-  #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 html`${date.toLocaleString()}`;
+  #onSelect(event: CustomEvent<HTMLElement|null>): void {
+    if (event.detail) {
+      this.dispatchEvent(new CustomEvent('select', {detail: this.#datastores[Number(event.detail.dataset.index)]}));
+    }
   }
 }
 

front_end/panels/application/components/interestGroupAccessGrid.css

@@ -11,9 +11,9 @@
   font-size: 15px;
 }
 
-devtools-data-grid-controller {
-  border: 1px solid var(--sys-color-divider);
+devtools-new-data-grid {
   margin-top: 20px;
+  height: 200px;
 }
 
 .info-icon {