Improve data grid updates detection and tests

Bug: 394287937
Change-Id: I0ffc3a7d31ed3f81fb2dbeaf5ff4b5bd2335058a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6235027
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

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

@@ -50,14 +50,19 @@ describeWithEnvironment('DataGrid', () => {
   });
 
   async function renderDataGrid(template: Lit.TemplateResult): Promise<HTMLElement> {
-    container.style.display = 'flex';
-    container.style.width = '640px';
-    container.style.height = '480px';
     render(template, container, {host: {}});
     await RenderCoordinator.done({waitForWork: true});
     return container.querySelector('devtools-data-grid') as HTMLElement;
   }
 
+  async function renderDataGridContent(template: Lit.TemplateResult): Promise<HTMLElement> {
+    return renderDataGrid(html`<devtools-data-grid striped name="Display Name">${template}</devtools-data-grid>`);
+  }
+
+  async function renderDataGridWithData(columns: Lit.TemplateResult, rows: Lit.TemplateResult): Promise<HTMLElement> {
+    return renderDataGridContent(html`<table>${columns}${rows}</table>`);
+  }
+
   it('can be configured from template', async () => {
     const element = await renderDataGrid(html`
         <devtools-data-grid .striped=${true} .displayName=${'Display Name'}>
@@ -84,26 +89,26 @@ describeWithEnvironment('DataGrid', () => {
   });
 
   it('can update data from template', async () => {
-    await renderDataGrid(html`
-        <devtools-data-grid striped name=${'Display Name'}>
-          <table>
+    await renderDataGridWithData(
+        html`
             <tr>
               <th id="column-1">Column 1</th>
               <th id="column-2">Column 2</th>
-            </tr>
+            </tr>`,
+        html`
             <tr>
               <td>Value 1</td>
               <td>Value 2</td>
             </tr>
           </table>
         </devtools-data-grid>`);
-    const element = await renderDataGrid(html`
-        <devtools-data-grid striped name=${'Display Name'}>
-          <table>
+    const element = await renderDataGridWithData(
+        html`
             <tr>
               <th id="column-3">Column 3</th>
               <th id="column-4">Column 4</th>
-            </tr>
+            </tr>`,
+        html`
             <tr>
               <td>Value 3</td>
               <td>Value 4</td>

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

@@ -205,7 +205,10 @@ class DataGridElement extends HTMLElement {
   #needUpdateColumns(mutationList: MutationRecord[]): boolean {
     for (const mutation of mutationList) {
       for (const element of [...mutation.removedNodes, ...mutation.addedNodes]) {
-        if (element.nodeName === 'TH') {
+        if (!(element instanceof HTMLElement)) {
+          continue;
+        }
+        if (element.nodeName === 'TH' || element.querySelector('th')) {
           return true;
         }
       }
@@ -216,8 +219,25 @@ class DataGridElement extends HTMLElement {
     return false;
   }
 
+  #getDataRows(nodes: NodeList): HTMLElement[] {
+    return [...nodes]
+        .flatMap(node => {
+          if (node instanceof HTMLTableRowElement) {
+            return [node];
+          }
+          if (node instanceof HTMLElement) {
+            return [...node.querySelectorAll('tr')];
+          }
+          return [] as HTMLElement[];
+        })
+        .filter(node => node.querySelector('td'));
+  }
+
   #addNodes(nodes: NodeList): void {
-    for (const element of nodes) {
+    for (const element of this.#getDataRows(nodes)) {
+      if (!element.querySelector('td')) {
+        continue;
+      }
       if (element instanceof HTMLTableRowElement && element.querySelector('td')) {
         const parentNode = this.#dataGrid.rootNode();  // TODO(dsv): support nested nodes
         const nextNode = element.nextElementSibling ? DataGridElementNode.get(element.nextElementSibling) : null;
@@ -232,7 +252,10 @@ class DataGridElement extends HTMLElement {
   }
 
   #removeNodes(nodes: NodeList): void {
-    for (const element of nodes) {
+    for (const element of this.#getDataRows(nodes)) {
+      if (!element.querySelector('td')) {
+        continue;
+      }
       if (element instanceof HTMLTableRowElement && element.querySelector('td')) {
         const node = DataGridElementNode.get(element);
         if (node) {