Use <devtools-new-data-grid> in TimelineSelectorStats

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

Author: danilsomsikov

config/gni/devtools_grd_files.gni

@@ -1912,6 +1912,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/timelineMiniMap.css.js",
   "front_end/panels/timeline/timelinePaintProfiler.css.js",
   "front_end/panels/timeline/timelinePanel.css.js",
+  "front_end/panels/timeline/timelineSelectorStatsView.css.js",
   "front_end/panels/timeline/timelineStatusDialog.css.js",
   "front_end/panels/timeline/utils/AICallTree.js",
   "front_end/panels/timeline/utils/EntityMapper.js",

front_end/panels/timeline/BUILD.gn

@@ -45,6 +45,7 @@ generate_css("css_files") {
     "timelineMiniMap.css",
     "timelinePaintProfiler.css",
     "timelinePanel.css",
+    "timelineSelectorStatsView.css",
     "timelineStatusDialog.css",
   ]
 }

front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -2,7 +2,6 @@
 // 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 './OriginMap.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';

front_end/panels/timeline/components/FieldSettingsDialog.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+devtools-new-data-grid {
+  flex: auto;
+}

front_end/panels/timeline/timelineSelectorStatsView.css

@@ -31,7 +31,6 @@ export class LinkifierClick extends Event {
 }
 
 export class Linkifier extends HTMLElement {
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #url: Platform.DevToolsPath.UrlString = Platform.DevToolsPath.EmptyUrlString;
   #lineNumber?: number;
@@ -53,6 +52,18 @@ export class Linkifier extends HTMLElement {
     void this.#render();
   }
 
+  override cloneNode(deep?: boolean): Node {
+    const node = super.cloneNode(deep) as Linkifier;
+    node.data = {
+      url: this.#url,
+      lineNumber: this.#lineNumber,
+      columnNumber: this.#columnNumber,
+      linkText: this.#linkText,
+      title: this.#title
+    };
+    return node;
+  }
+
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [linkifierImplStyles];
   }

front_end/ui/components/linkifier/LinkifierImpl.ts

@@ -171,7 +171,7 @@ class DataGridElement extends HTMLElement {
       if (align !== Align.CENTER && align !== Align.RIGHT) {
         align = undefined;
       }
-      const weight = parseInt(column.getAttribute('weight') || '', 10) ?? undefined;
+      const weight = parseFloat(column.getAttribute('weight') || '') ?? undefined;
       this.#dataGrid.addColumn({
         id,
         title: title as Platform.UIString.LocalizedString,

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

@@ -1237,9 +1237,8 @@ export const knownContextValues = new Set([
   'edit-title',
   'editor',
   'el',
-  'elapsed (us)',
-  'elapsed(us)',
   'elapsed-time',
+  'elapsed-us',
   'element-class',
   'element-properties',
   'element-states',
@@ -2256,10 +2255,10 @@ export const knownContextValues = new Set([
   'masonry-track',
   'masonry-track-end',
   'masonry-track-start',
+  'match-attempts',
   'match-case',
+  'match-count',
   'match-whole-word',
-  'match_attempts',
-  'match_count',
   'matched-address-item',
   'math',
   'math-depth',
@@ -2770,7 +2769,7 @@ export const knownContextValues = new Set([
   'refresh-watch-expressions',
   'regular-breakpoint',
   'regular-expression',
-  'reject_percentage',
+  'reject-percentage',
   'release-note',
   'release-notes',
   'reload-required',
@@ -3312,7 +3311,7 @@ export const knownContextValues = new Set([
   'style-attribute',
   'style-properties',
   'style-sheet-header',
-  'style_sheet_id',
+  'style-sheet-id',
   'styles',
   'styles-metrics',
   'styles-pane-css-changes',

front_end/ui/visual_logging/KnownContextValues.ts

@@ -289,13 +289,13 @@ export async function navigateToSelectorStatsTab() {
         veImpression(
             'Pane', 'selector-stats',
             [
-              veImpression('TableHeader', 'elapsed(us)'),
-              veImpression('TableHeader', 'match_attempts'),
-              veImpression('TableHeader', 'match_count'),
-              veImpression('TableHeader', 'reject_percentage'),
+              veImpression('TableHeader', 'elapsed-us'),
+              veImpression('TableHeader', 'match-attempts'),
+              veImpression('TableHeader', 'match-count'),
+              veImpression('TableHeader', 'reject-percentage'),
               veImpression('TableHeader', 'selector'),
-              veImpression('TableHeader', 'style_sheet_id'),
-              veImpression('TableRow', undefined, [veImpression('TableCell')]),
+              veImpression('TableHeader', 'style-sheet-id'),
+              veImpression('TableRow', undefined, [veImpression('TableCell', 'elapsed-us')]),
             ]),
       ],
       'Panel: timeline > Section: timeline.flame-chart-view');