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

To make it work properly add an `inline` attribute and use it here and in other inline data grids.

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

Author: danilsomsikov

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

@@ -5,22 +5,23 @@
 import {getValuesOfAllBodyRows} from '../../../testing/DataGridHelpers.js';
 import {
   dispatchClickEvent,
-  getElementWithinComponent,
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {createTarget} from '../../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
   setMockConnectionResponseHandler,
 } from '../../../testing/MockConnection.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';
 
 async function renderBounceTrackingMitigationsView():
     Promise<ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView> {
   const component = new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView();
+  component.style.display = 'block';
+  component.style.width = '640px';
+  component.style.height = '480px';
   renderElementIntoDOM(component);
 
   // The data-grid's renderer is scheduled, so we need to wait until the coordinator
@@ -32,9 +33,7 @@ async function renderBounceTrackingMitigationsView():
 
 function getInternalDataGridShadowRoot(
     component: ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView): 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;
 }
@@ -48,7 +47,7 @@ describeWithMockConnection('BounceTrackingMitigationsView', () => {
     const component = await renderBounceTrackingMitigationsView();
     await RenderCoordinator.done();
 
-    const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid-controller');
+    const nullGridElement = component.shadowRoot!.querySelector('devtools-new-data-grid');
     assert.isNull(nullGridElement);
 
     const sections = component.shadowRoot!.querySelectorAll('devtools-report-section');
@@ -68,7 +67,7 @@ describeWithMockConnection('BounceTrackingMitigationsView', () => {
     const component = await renderBounceTrackingMitigationsView();
     await RenderCoordinator.done();
 
-    const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid-controller');
+    const nullGridElement = component.shadowRoot!.querySelector('devtools-new-data-grid');
     assert.isNull(nullGridElement);
 
     const sections = component.shadowRoot!.querySelectorAll('devtools-report-section');
@@ -100,7 +99,7 @@ describeWithMockConnection('BounceTrackingMitigationsView', () => {
 
     await RenderCoordinator.done();
 
-    const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid-controller');
+    const nullGridElement = component.shadowRoot!.querySelector('devtools-new-data-grid');
     assert.isNull(nullGridElement);
 
     const sections = component.shadowRoot!.querySelectorAll('devtools-report-section');

front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -3,13 +3,13 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/report_view/report_view.js';
+import '../../../ui/legacy/components/data_grid/data_grid.js';
 
 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 * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
-import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -124,7 +124,7 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
       <devtools-report-section>
         ${this.#renderForceRunButton()}
       </devtools-report-section>
-        ${this.#renderDeletedSitesOrNoSitesMessage()}
+      ${this.#renderDeletedSitesOrNoSitesMessage()}
       <devtools-report-divider>
       </devtools-report-divider>
       <devtools-report-section>
@@ -176,29 +176,20 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
       // clang-format on
     }
 
-    const gridData: DataGrid.DataGridController.DataGridControllerData = {
-      columns: [
-        {
-          id: 'sites',
-          title: i18nString(UIStrings.stateDeletedFor),
-          widthWeighting: 10,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-      ],
-      rows: this.#buildRowsFromDeletedSites(),
-      initialSort: {
-        columnId: 'sites',
-        direction: DataGrid.DataGridUtils.SortDirection.ASC,
-      },
-    };
-
     // clang-format off
     return html`
       <devtools-report-section>
-        <devtools-data-grid-controller .data=${gridData}>
-        </devtools-data-grid-controller>
+        <devtools-new-data-grid striped inline>
+          <table>
+            <tr>
+              <th id="sites" weight="10" sortable>
+                ${i18nString(UIStrings.stateDeletedFor)}
+              </th>
+            </tr>
+            ${this.#trackingSites.map(site => html`
+              <tr><td>${site}</td></tr>`)}
+          </table>
+        </devtools-new-data-grid>
       </devtools-report-section>
     `;
     // clang-format on
@@ -229,15 +220,6 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     void this.#render();
   }
 
-  #buildRowsFromDeletedSites(): DataGrid.DataGridUtils.Row[] {
-    const trackingSites = this.#trackingSites;
-    return trackingSites.map(site => ({
-                               cells: [
-                                 {columnId: 'sites', value: site},
-                               ],
-                             }));
-  }
-
   async #checkFeatureState(): Promise<void> {
     this.#checkedFeature = true;
 

front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -87,7 +87,7 @@ export class InterestGroupAccessGrid extends HTMLElement {
     }
 
     return html`
-      <devtools-new-data-grid @select=${this.#onSelect} striped>
+      <devtools-new-data-grid @select=${this.#onSelect} striped inline>
         <table>
           <tr>
             <th id="event-time" sortable weight="10">${i18nString(UIStrings.eventTime)}</td>

front_end/panels/application/components/TrustTokensView.ts

@@ -102,7 +102,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     // clang-format off
     return html`
-      <devtools-new-data-grid striped>
+      <devtools-new-data-grid striped inline>
         <table>
           <tr>
             <th id="issuer" weight="10" sortable>${i18nString(UIStrings.issuer)}</th>

front_end/panels/application/components/bounceTrackingMitigationsView.css

@@ -3,8 +3,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-devtools-data-grid-controller {
-  border: 1px solid var(--sys-color-divider);
+devtools-new-data-grid {
   margin-top: 0;
 }
 

front_end/panels/application/components/interestGroupAccessGrid.css

@@ -13,7 +13,6 @@
 
 devtools-new-data-grid {
   margin-top: 20px;
-  height: 200px;
 }
 
 .info-icon {

front_end/panels/application/components/trustTokensView.css

@@ -14,7 +14,6 @@
 
 devtools-new-data-grid {
   margin-top: 20px;
-  height: 240px;
 
   & devtools-button {
     width: 14px;

front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -40,11 +40,15 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * @prop filters
  */
 class DataGridElement extends HTMLElement {
-  static readonly observedAttributes = ['striped', 'name'];
+  static readonly observedAttributes = ['striped', 'name', 'inline'];
 
   #dataGrid = SortableDataGrid.create([DUMMY_COLUMN_ID], [], '') as SortableDataGrid<DataGridElementNode>;
   #mutationObserver = new MutationObserver(this.#onChange.bind(this));
-  #resizeObserver = new ResizeObserver(() => this.#dataGrid.onResize());
+  #resizeObserver = new ResizeObserver(() => {
+    if (!this.inline) {
+      this.#dataGrid.onResize();
+    }
+  });
   #shadowRoot: ShadowRoot;
   #columnsOrder: string[] = [];
   #hideableColumns = new Set<string>();
@@ -103,6 +107,9 @@ class DataGridElement extends HTMLElement {
       case 'name':
         this.#dataGrid.displayName = newValue ?? '';
         break;
+      case 'inline':
+        this.#dataGrid.renderInline();
+        break;
     }
   }
 
@@ -114,6 +121,14 @@ class DataGridElement extends HTMLElement {
     return this.hasAttribute('striped');
   }
 
+  set inline(striped: boolean) {
+    this.toggleAttribute('inline', striped);
+  }
+
+  get inline(): boolean {
+    return this.hasAttribute('inline');
+  }
+
   set displayName(displayName: string) {
     this.setAttribute('name', displayName);
   }