Use <devtools-new-data-grid> in the prerendering RuleSetGrid

To make it work, call onResize to the data grid and forward click events to the config elements.

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

Author: danilsomsikov

front_end/panels/application/preloading/PreloadingView.test.ts

@@ -245,6 +245,10 @@ function createRuleSetView(target: SDK.Target.Target): Resources.PreloadingView.
   const view = new Resources.PreloadingView.PreloadingRuleSetView(model);
   const container = new UI.Widget.VBox();
   const div = document.createElement('div');
+  view.contentElement.style.display = 'block';
+  view.contentElement.style.width = '640px';
+  view.contentElement.style.height = '480px';
+
   renderElementIntoDOM(div);
   container.markAsRoot();
   container.show(div);
@@ -366,12 +370,7 @@ describeWithMockConnection('PreloadingRuleSetView', () => {
 
     );
 
-    const cells = [
-      {columnId: 'id', value: 'ruleSetId:0.2'},
-      {columnId: 'Validity', value: 'Invalid'},
-    ];
-    ruleSetGridComponent.dispatchEvent(
-        new DataGrid.DataGridEvents.BodyCellFocusedEvent({columnId: 'Validity', value: 'Invalid'}, {cells}));
+    ruleSetGridComponent.dispatchEvent(new CustomEvent('select', {detail: 'ruleSetId:0.2'}));
 
     await RenderCoordinator.done();
 

front_end/panels/application/preloading/PreloadingView.ts

@@ -220,7 +220,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     this.contentElement.insertBefore(this.warningsContainer, this.contentElement.firstChild);
     this.warningsView.show(this.warningsContainer);
 
-    this.ruleSetGrid.addEventListener('cellfocused', this.onRuleSetsGridCellFocused.bind(this));
+    this.ruleSetGrid.addEventListener('select', this.onRuleSetsGridCellFocused.bind(this));
 
     const onPrettyPrintToggle = (): void => {
       this.shouldPrettyPrint = !this.shouldPrettyPrint;
@@ -307,9 +307,8 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   }
 
   private onRuleSetsGridCellFocused(event: Event): void {
-    const focusedEvent = event as DataGrid.DataGridEvents.BodyCellFocusedEvent;
-    this.focusedRuleSetId =
-        focusedEvent.data.row.cells.find(cell => cell.columnId === 'id')?.value as Protocol.Preload.RuleSetId;
+    const focusedEvent = event as CustomEvent<Protocol.Preload.RuleSetId>;
+    this.focusedRuleSetId = focusedEvent.detail;
     this.render();
   }
 

front_end/panels/application/preloading/components/BUILD.gn

@@ -55,6 +55,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",
     "../helper:bundle",

front_end/panels/application/preloading/components/PreloadingGrid.test.ts

@@ -8,7 +8,6 @@ import * as Protocol from '../../../../generated/protocol.js';
 import {assertGridContents, getCellByIndexes} from '../../../../testing/DataGridHelpers.js';
 import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
-import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as PreloadingComponents from './components.js';
@@ -17,7 +16,7 @@ const {urlString} = Platform.DevToolsPath;
 
 async function assertRenderResult(
     rowsInput: PreloadingComponents.PreloadingGrid.PreloadingGridData, headerExpected: string[],
-    rowsExpected: string[][]): Promise<DataGrid.DataGrid.DataGrid> {
+    rowsExpected: string[][]): Promise<Element> {
   const component = new PreloadingComponents.PreloadingGrid.PreloadingGrid();
   component.update(rowsInput);
   renderElementIntoDOM(component);

front_end/panels/application/preloading/components/RuleSetGrid.test.ts

@@ -7,7 +7,6 @@ import * as Protocol from '../../../../generated/protocol.js';
 import {assertGridContents} from '../../../../testing/DataGridHelpers.js';
 import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
-import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as PreloadingComponents from './components.js';
@@ -16,8 +15,11 @@ const {urlString} = Platform.DevToolsPath;
 
 async function assertRenderResult(
     rowsInput: PreloadingComponents.RuleSetGrid.RuleSetGridData, headerExpected: string[],
-    rowsExpected: string[][]): Promise<DataGrid.DataGrid.DataGrid> {
+    rowsExpected: string[][]): Promise<Element> {
   const component = new PreloadingComponents.RuleSetGrid.RuleSetGrid();
+  component.style.display = 'block';
+  component.style.width = '640px';
+  component.style.height = '480px';
   component.update(rowsInput);
   renderElementIntoDOM(component);
   await RenderCoordinator.done();