Use <devtools-new-data-grid> in EndpointsGrid.

Bug: 390346490
Change-Id: I5772e9131c65739102ab382c714c2690c3e7e8c3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6179488
Reviewed-by: Wolfgang Beyer <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/application/components/BUILD.gn

@@ -70,6 +70,7 @@ devtools_module("components") {
     "../../../ui/components/text_prompt:bundle",
     "../../../ui/components/tree_outline:bundle",
     "../../../ui/legacy:bundle",
+    "../../../ui/legacy/components/data_grid:bundle",
     "../../../ui/legacy/components/source_frame:bundle",
     "../../../ui/legacy/components/utils:bundle",
   ]

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

@@ -2,33 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {getHeaderCells, 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';
 
 const renderEndpointsGrid = async (data?: ApplicationComponents.EndpointsGrid.EndpointsGridData|null) => {
   const component = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
+  component.style.display = 'block';
+  component.style.width = '640px';
+  component.style.height = '480px';
   if (data) {
     component.data = data;
   }
   renderElementIntoDOM(component);
   assert.isNotNull(component.shadowRoot);
-  await RenderCoordinator.done();
+  await RenderCoordinator.done({waitForWork: true});
   if (!data) {
     return component;
   }
 
-  const controller = getElementWithinComponent(
-      component, 'devtools-data-grid-controller', DataGrid.DataGridController.DataGridController);
-  assert.isNotNull(controller.shadowRoot);
-  const datagrid = getElementWithinComponent(controller, 'devtools-data-grid', DataGrid.DataGrid.DataGrid);
+  const datagrid = component.shadowRoot.querySelector('devtools-new-data-grid')!;
   assert.isNotNull(datagrid.shadowRoot);
   return datagrid;
 };
@@ -64,10 +61,13 @@ describeWithLocale('EndpointsGrid', () => {
     const dataGrid = await renderEndpointsGrid(data);
     assert.isNotNull(dataGrid.shadowRoot);
 
-    const header = getHeaderCells(dataGrid.shadowRoot).map(({textContent}) => textContent!.trim());
+    const header = [...dataGrid.shadowRoot!.querySelectorAll('th[jslog]')].map(({textContent}) => textContent!.trim());
     assert.deepEqual(header, ['Origin', 'Name', 'URL']);
 
-    const rowValues = getValuesOfAllBodyRows(dataGrid.shadowRoot);
+    const rowValues = [...dataGrid.shadowRoot!.querySelectorAll('tbody tr[jslog]')].map(row => {
+      const cells = [...row.querySelectorAll('td[jslog]')];
+      return cells.map(cell => cell.textContent!.trim());
+    });
     assert.lengthOf(rowValues, 3);
     assert.strictEqual(rowValues[0][0], 'https://www.my-page.com', 'Endpoint origin does not match');
     assert.strictEqual(rowValues[0][1], 'main-endpoint', 'Endpoint name does not match');

front_end/panels/application/components/EndpointsGrid.ts

@@ -2,11 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/data_grid/data_grid.js';
+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 type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -44,41 +43,28 @@ export class EndpointsGrid extends HTMLElement {
   }
 
   #render(): void {
-    const endpointsGridData: DataGrid.DataGridController.DataGridControllerData = {
-      columns: [
-        {
-          id: 'origin',
-          title: i18n.i18n.lockedString('Origin'),
-          widthWeighting: 30,
-          hideable: false,
-          visible: true,
-        },
-        {
-          id: 'name',
-          title: i18n.i18n.lockedString('Name'),
-          widthWeighting: 20,
-          hideable: false,
-          visible: true,
-        },
-        {
-          id: 'url',
-          title: i18n.i18n.lockedString('URL'),
-          widthWeighting: 30,
-          hideable: false,
-          visible: true,
-        },
-      ],
-      rows: this.#buildReportRows(),
-    };
-
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
       <div class="reporting-container" jslog=${VisualLogging.section('endpoints')}>
         <div class="reporting-header">${i18n.i18n.lockedString('Endpoints')}</div>
         ${this.#endpoints.size > 0 ? html`
-          <devtools-data-grid-controller .data=${endpointsGridData}>
-          </devtools-data-grid-controller>
+          <devtools-new-data-grid striped>
+           <table>
+            <tr>
+              <th id="origin" weight="30">${i18n.i18n.lockedString('Origin')}</th>
+              <th id="name" weight="20">${i18n.i18n.lockedString('Name')}</th>
+              <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
+            </tr>
+            ${Array.from(this.#endpoints).map(([origin, endpointArray]) =>
+                endpointArray.map(endpoint => html`<tr>
+                  <td>${origin}</td>
+                  <td>${endpoint.groupName}</td>
+                  <td>${endpoint.url}</td>
+                </tr>`))
+                .flat()}
+            </table>
+          </devtools-new-data-grid>
         ` : html`
           <div class="reporting-placeholder">
             <div>${i18nString(UIStrings.noEndpointsToDisplay)}</div>
@@ -88,20 +74,6 @@ export class EndpointsGrid extends HTMLElement {
     `, this.#shadow, {host: this});
     // clang-format on
   }
-
-  #buildReportRows(): DataGrid.DataGridUtils.Row[] {
-    return Array.from(this.#endpoints)
-        .map(([origin, endpointArray]) => endpointArray.map(endpoint => {
-          return {
-            cells: [
-              {columnId: 'origin', value: origin},
-              {columnId: 'name', value: endpoint.groupName},
-              {columnId: 'url', value: endpoint.url},
-            ],
-          };
-        }))
-        .flat();
-  }
 }
 
 customElements.define('devtools-resources-endpoints-grid', EndpointsGrid);

front_end/panels/application/components/reportingApiGrid.css

@@ -32,8 +32,8 @@
   text-align: center;
 }
 
-devtools-data-grid-controller {
-  border: 1px solid var(--sys-color-divider);
+devtools-new-data-grid {
+  flex: auto;
 }
 
 .inline-icon {

test/e2e/application/reporting-api_test.ts

@@ -60,8 +60,7 @@ describe('The Reporting API Page', () => {
     if (!endpointsGrid) {
       assert.fail('Could not find data-grid');
     }
-    const dataGrid = await getDataGrid(endpointsGrid);
-    const innerText = await getInnerTextOfDataGridCells(dataGrid, 2, true);
+    const innerText = await getInnerTextOfDataGridCells(endpointsGrid, 2, true);
     assert.strictEqual(innerText[0][0], `https://localhost:${getTestServerPort()}`);
     assert.strictEqual(innerText[0][1], 'default');
     assert.strictEqual(innerText[0][2], 'https://reports.example/default');

test/e2e/helpers/datagrid-helpers.ts

@@ -14,17 +14,17 @@ export async function getDataGridRows(
   const handlers = await (async () => {
     if (matchExactNumberOfRows) {
       return await waitForFunction(async () => {
-        const rows = await $$('tbody > tr:not(.padding-row):not(.hidden)', dataGrid);
+        const rows = await $$('tbody > tr[jslog]:not(.hidden)', dataGrid);
         return rows.length === expectedNumberOfRows ? rows : undefined;
       });
     }
     return await waitForFunction(async () => {
-      const rows = await $$('tbody > tr:not(.padding-row):not(.hidden)', dataGrid);
+      const rows = await $$('tbody > tr[jslog]:not(.hidden)', dataGrid);
       return rows.length >= expectedNumberOfRows ? rows : undefined;
     });
   })();
 
-  return Promise.all(handlers.map(handler => $$<HTMLTableCellElement>('td[data-row-index]:not(.hidden)', handler)));
+  return Promise.all(handlers.map(handler => $$<HTMLTableCellElement>('td[jslog]:not(.hidden)', handler)));
 }
 
 export async function getDataGrid(root?: ElementHandle) {