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

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

Author: danilsomsikov

front_end/panels/network/components/BUILD.gn

@@ -52,6 +52,7 @@ devtools_module("components") {
     "../../../ui/components/legacy_wrapper:bundle",
     "../../../ui/components/report_view:bundle",
     "../../../ui/legacy:bundle",
+    "../../../ui/legacy/components/data_grid:bundle",
     "../../../ui/lit-html:bundle",
     "../forward:bundle",
   ]

front_end/panels/network/components/WebBundleInfoView.css

@@ -5,6 +5,10 @@
  */
 :host {
   --icon-padding: 4px;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .header {
@@ -17,3 +21,7 @@
 .icon {
   margin: 0 var(--icon-padding);
 }
+
+devtools-new-data-grid {
+  height: 100%;
+}

front_end/panels/network/components/WebBundleInfoView.ts

@@ -2,14 +2,13 @@
 // 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 '../../../ui/components/icon_button/icon_button.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import {PanelUtils} from '../../../panels/utils/utils.js';
-import type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -18,6 +17,10 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import webBundleInfoViewStyles from './WebBundleInfoView.css.js';
 
 const {render, html} = LitHtml;
+const {mimeFromURL, fromMimeTypeOverride, fromMimeType} = Common.ResourceType.ResourceType;
+const {iconDataForResourceType} = PanelUtils;
+
+type IconData = IconButton.Icon.IconData;
 
 const UIStrings = {
   /**
@@ -49,63 +52,40 @@ export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComp
   }
 
   override async render(): Promise<void> {
-    const rows = this.#webBundleInfo.resourceUrls?.map(url => {
-      const mimeType = Common.ResourceType.ResourceType.mimeFromURL(url) || null;
-      const resourceType = Common.ResourceType.ResourceType.fromMimeTypeOverride(mimeType) ||
-          Common.ResourceType.ResourceType.fromMimeType(mimeType);
-      const iconData = PanelUtils.iconDataForResourceType(resourceType);
-      return {
-        cells: [
-          {
-            columnId: 'url',
-            value: null,
-            renderer(): LitHtml.TemplateResult {
-              return html`
-                <div style="display: flex;">
-                  <devtools-icon class="icon"
-                    .data=${{...iconData, width: '20px'} as IconButton.Icon.IconData}>
-                  </devtools-icon>
-                  <span>${url}</span>
-                </div>`;
-            },
-          },
-        ],
-      };
-    });
-    render(
-        html`
+    // clang-format off
+    render(html`
       <div class="header">
         <devtools-icon class="icon"
-          .data=${{color: 'var(--icon-default)', iconName: 'bundle', width: '20px'} as IconButton.Icon.IconData}>
+          .data=${{color: 'var(--icon-default)', iconName: 'bundle', width: '20px'} as IconData}>
         </devtools-icon>
         <span>${this.#webBundleName}</span>
         <x-link href="https://web.dev/web-bundles/#explaining-web-bundles"
           jslog=${VisualLogging.link('webbundle-explainer').track({
           click: true,
         })}>
           <devtools-icon class="icon"
-            .data=${{color: 'var(--icon-default)', iconName: 'help', width: '16px'} as IconButton.Icon.IconData}>
+            .data=${{color: 'var(--icon-default)', iconName: 'help', width: '16px'} as IconData}>
           </devtools-icon>
         </x-link>
       </div>
-      <div>
-        <devtools-data-grid
-          .data=${{
-          columns: [
-            {
-              id: 'url',
-              title: i18nString(UIStrings.bundledResource),
-              widthWeighting: 1,
-              visible: true,
-              hideable: false,
-            },
-          ],
-          rows,
-          activeSort: null,
-        } as DataGrid.DataGrid.DataGridData}>
-        </devtools-data-grid>
-      </div>`,
+      <devtools-new-data-grid>
+        <table>
+          <tr><th id="url">${i18nString(UIStrings.bundledResource)}</th></tr>
+          ${this.#webBundleInfo.resourceUrls?.map(url => {
+            const mimeType = mimeFromURL(url) || null;
+            const resourceType = fromMimeTypeOverride(mimeType) || fromMimeType(mimeType);
+            const iconData = iconDataForResourceType(resourceType);
+            return html`<tr><td>
+                <div style="display: flex;">
+                  <devtools-icon class="icon" .data=${{...iconData, width: '20px'} as IconData}>
+                  </devtools-icon>
+                  <span>${url}</span>
+                </div></td></tr>`;
+        })}
+        </table>
+      </devtools-new-data-grid>`,
         this.#shadow, {host: this});
+    // clang-format on
   }
 }