chrome-devtools-frontend 1.0.1654411 → 1.0.1656897

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

@@ -12,6 +12,8 @@ import dataGridStyles from './dataGrid.css.js';
 import {
   Align,
   type ColumnDescriptor,
+  DataGridImpl,
+  DataGridNode,
   DataType,
   Events as DataGridEvents,
   Order,
@@ -50,10 +52,15 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * @attribute striped If true, the data grid will have striped rows.
  * @attribute displayName
  */
+type DataGridElementNode = SortableNode|DynamicHeightNode;
+
+const elementToNode = new WeakMap<Element, DataGridElementNode>();
+
 export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
   static readonly observedAttributes = ['striped', 'name', 'inline', 'resize'];
 
-  #dataGrid = SortableDataGrid.create([DUMMY_COLUMN_ID], [], '') as SortableDataGrid<DataGridElementNode>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  #dataGrid!: DataGridImpl<any>;
   #resizeObserver = new ResizeObserver(() => {
     if (!this.inline) {
       this.#dataGrid.onResize();
@@ -69,6 +76,18 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     super();
     // TODO(dsv): Move this to the data_grid.css once all the data grid usage is migrated to this web component.
     this.style.display = 'flex';
+
+    const autoRowHeight = this.getAttribute('row-height') === 'auto';
+    if (autoRowHeight) {
+      this.#dataGrid = new DataGridImpl<DynamicHeightNode>({
+        displayName: this.getAttribute('name') ?? '',
+        columns: [],
+      });
+      this.#dataGrid.element.classList.add('auto-row-height');
+    } else {
+      this.#dataGrid = SortableDataGrid.create([DUMMY_COLUMN_ID], [], '') as SortableDataGrid<SortableNode>;
+    }
+
     this.#dataGrid.element.style.flex = 'auto';
 
     this.#shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(this, {delegatesFocus: true, cssFile: dataGridStyles});
@@ -77,8 +96,8 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     this.#dataGrid.addEventListener(
         DataGridEvents.SELECTED_NODE,
         e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('select')));
-    this.#dataGrid.addEventListener(
-        DataGridEvents.DESELECTED_NODE, () => this.dispatchEvent(new CustomEvent('deselect')));
+    this.#dataGrid.addEventListener(DataGridEvents.DESELECTED_NODE,
+                                    () => this.dispatchEvent(new CustomEvent('deselect')));
     this.#dataGrid.addEventListener(
         DataGridEvents.OPENED_NODE,
         e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('open')));
@@ -169,8 +188,12 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
   }
 
   set filters(filters: TextUtils.TextUtils.ParsedFilter[]) {
-    this.#dataGrid.setFilters(filters);
-    this.#dataGrid.element.setAttribute('aria-rowcount', String(this.#dataGrid.getNumberOfRows()));
+    if (this.#dataGrid instanceof SortableDataGrid) {
+      this.#dataGrid.setFilters(filters);
+      this.#dataGrid.element.setAttribute('aria-rowcount', String(this.#dataGrid.getNumberOfRows()));
+    } else {
+      this.#dataGrid.element.setAttribute('aria-rowcount', String(this.#dataGrid.rootNode().children.length));
+    }
   }
 
   get columns(): ColumnDescriptor[] {
@@ -239,9 +262,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       }
     }
     const visibleColumns = new Set(this.#columns.map(({id}) => id).filter(id => !this.#hiddenColumns.has(id)));
-    if (visibleColumns.size) {
-      this.#dataGrid.setColumnsVisibility(visibleColumns);
-    }
+    this.#dataGrid.setColumnsVisibility(visibleColumns);
     this.#dataGrid.setEditCallback(hasEditableColumn ? this.#editCallback.bind(this) : undefined, INTERNAL_TOKEN);
     this.#dataGrid.deleteCallback = hasEditableColumn ? this.#deleteCallback.bind(this) : undefined;
   }
@@ -306,7 +327,9 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       const parentNode = parentDataGridNode || this.#dataGrid.rootNode();
       const nextNode = this.#findNextExistingNode(element);
       const index = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
-      const node = new DataGridElementNode(element, this);
+
+      const node = this.#dataGrid instanceof SortableDataGrid ? new SortableNode(element, this) :
+                                                                new DynamicHeightNode(element, this);
       this.#updateHasChildren(node, element);
       if ((parentRow || node.hasChildren()) && !this.#dataGrid.disclosureColumnId) {
         this.#dataGrid.disclosureColumnId = this.#columns[0].id;
@@ -382,7 +405,9 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       this.#dataGrid.creationNode = undefined;
     } else if (!getNode(placeholder)) {
       this.#dataGrid.creationNode?.remove();
-      const node = new DataGridElementNode(placeholder, this);
+
+      const node = this.#dataGrid instanceof SortableDataGrid ? new SortableNode(placeholder, this) :
+                                                                new DynamicHeightNode(placeholder, this);
       this.#dataGrid.creationNode = node;
       this.#dataGrid.rootNode().appendChild(node);
     }
@@ -404,9 +429,8 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     }
   }
 
-  #editCallback(
-      node: DataGridElementNode, columnId: string, valueBeforeEditing: string, newText: string,
-      moveDirection?: string): void {
+  #editCallback(node: DataGridElementNode, columnId: string, valueBeforeEditing: string, newText: string,
+                moveDirection?: string): void {
     if (node.isCreationNode) {
       this.#usedCreationNode = node;
       let hasNextEditableColumn = false;
@@ -432,9 +456,8 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
   override addEventListener<K extends keyof HTMLElementEventMap>(
       type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void,
       options?: boolean|AddEventListenerOptions|undefined): void;
-  override addEventListener(
-      type: string, listener: EventListenerOrEventListenerObject,
-      options?: boolean|AddEventListenerOptions|undefined): void;
+  override addEventListener(type: string, listener: EventListenerOrEventListenerObject,
+                            options?: boolean|AddEventListenerOptions|undefined): void;
   override addEventListener(...args: Parameters<HTMLElement['addEventListener']>): void {
     super.addEventListener(...args);
     if (args[0] === 'refresh') {
@@ -447,137 +470,163 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
   }
 }
 
-const elementToNode = new WeakMap<Element, DataGridElementNode>();
-
-class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
-  #configElement: Element;
-  #dataGridElement: DataGridElement;
-  #addedClasses = new Set<string>();
-  constructor(configElement: Element, dataGridElement: DataGridElement) {
-    super();
-    this.#configElement = configElement;
-    elementToNode.set(configElement, this);
-    this.#dataGridElement = dataGridElement;
-    this.#updateData();
-    this.isCreationNode = hasBooleanAttribute(this.#configElement, 'placeholder');
-  }
+type Constructor<T = object> = new (...args: any[]) => T;
 
-  get configElement(): Element {
-    return this.#configElement;
-  }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-function-return-type
+function nodeMixin<TBase extends Constructor<DataGridNode<any>>>(base: TBase) {
+  return class extends base {
+    #configElement!: Element;
+    #dataGridElement!: DataGridElement;
+    #addedClasses = new Set<string>();
 
-  #updateData(): void {
-    const cells = [...this.#configElement.children].filter(c => c.tagName === 'TD');
-    for (let i = 0; i < this.#dataGridElement.columns.length; ++i) {
-      const cell = cells[i] as HTMLElement;
-      if (!cell) {
-        continue;
-      }
-      const column = this.#dataGridElement.columns[i];
-      if (column.dataType === DataType.BOOLEAN) {
-        this.data[column.id] = hasBooleanAttribute(cell, 'data-value') || cell.textContent === 'true';
-      } else {
-        this.data[column.id] = cell.dataset.value ?? cell.textContent ?? '';
-      }
+    initElementNode(configElement: Element, dataGridElement: DataGridElement): void {
+      this.#configElement = configElement;
+      this.#dataGridElement = dataGridElement;
+      this.#updateData();
+      this.isCreationNode = hasBooleanAttribute(this.#configElement, 'placeholder');
     }
-  }
 
-  override createElement(): HTMLElement {
-    const element = super.createElement();
-    element.addEventListener('click', this.#onRowMouseEvent.bind(this));
-    element.addEventListener('mouseenter', this.#onRowMouseEvent.bind(this));
-    element.addEventListener('mouseleave', this.#onRowMouseEvent.bind(this));
-    if (this.#configElement.hasAttribute('style')) {
-      element.setAttribute('style', this.#configElement.getAttribute('style') || '');
-    }
-    for (const classToAdd of this.#configElement.classList) {
-      element.classList.add(classToAdd);
+    get configElement(): Element {
+      return this.#configElement;
     }
-    return element;
-  }
 
-  override refresh(): void {
-    this.#updateData();
-    super.refresh();
-    const existingElement = this.existingElement();
-    if (!existingElement) {
-      return;
-    }
-    if (this.#configElement.hasAttribute('style')) {
-      existingElement.setAttribute('style', this.#configElement.getAttribute('style') || '');
+    get dataGridElement(): DataGridElement {
+      return this.#dataGridElement;
     }
-    for (const addedClass of this.#addedClasses) {
-      existingElement.classList.remove(addedClass);
+
+    #updateData(): void {
+      const cells = [...this.#configElement.children].filter(c => c.tagName === 'TD');
+      for (let i = 0; i < this.#dataGridElement.columns.length; ++i) {
+        const cell = cells[i] as HTMLElement;
+        if (!cell) {
+          continue;
+        }
+        const column = this.#dataGridElement.columns[i];
+        if (column.dataType === DataType.BOOLEAN) {
+          this.data[column.id] = hasBooleanAttribute(cell, 'data-value') || cell.textContent === 'true';
+        } else {
+          this.data[column.id] = cell.dataset.value ?? cell.textContent ?? '';
+        }
+      }
     }
-    for (const classToAdd of this.#configElement.classList) {
-      existingElement.classList.add(classToAdd);
+
+    override createElement(): HTMLElement {
+      const element = super.createElement();
+      element.addEventListener('click', this.#onRowMouseEvent.bind(this));
+      element.addEventListener('mouseenter', this.#onRowMouseEvent.bind(this));
+      element.addEventListener('mouseleave', this.#onRowMouseEvent.bind(this));
+      if (this.#configElement.hasAttribute('style')) {
+        element.setAttribute('style', this.#configElement.getAttribute('style') || '');
+      }
+      for (const classToAdd of this.#configElement.classList) {
+        element.classList.add(classToAdd);
+      }
+      return element;
     }
-  }
 
-  #onRowMouseEvent(event: MouseEvent): void {
-    const targetInConfigRow = UI.UIUtils.HTMLElementWithLightDOMTemplate.findCorrespondingElement(
-        event.target as HTMLElement, event.currentTarget as HTMLElement, this.#configElement);
-    if (!targetInConfigRow) {
-      throw new Error('Cell click event target not found in the data grid');
+    override refresh(): void {
+      this.#updateData();
+      super.refresh();
+      const existingElement = this.existingElement();
+      if (!existingElement) {
+        return;
+      }
+      if (this.#configElement.hasAttribute('style')) {
+        existingElement.setAttribute('style', this.#configElement.getAttribute('style') || '');
+      }
+      for (const addedClass of this.#addedClasses) {
+        existingElement.classList.remove(addedClass);
+      }
+      for (const classToAdd of this.#configElement.classList) {
+        existingElement.classList.add(classToAdd);
+      }
     }
 
-    if (targetInConfigRow instanceof HTMLElement) {
-      targetInConfigRow?.dispatchEvent(new MouseEvent(event.type, {bubbles: true, composed: true}));
+    #onRowMouseEvent(event: MouseEvent): void {
+      const targetInConfigRow = UI.UIUtils.HTMLElementWithLightDOMTemplate.findCorrespondingElement(
+          event.target as HTMLElement, event.currentTarget as HTMLElement, this.#configElement);
+      if (!targetInConfigRow) {
+        throw new Error('Cell click event target not found in the data grid');
+      }
+
+      if (targetInConfigRow instanceof HTMLElement) {
+        targetInConfigRow?.dispatchEvent(new MouseEvent(event.type, {bubbles: true, composed: true}));
+      }
     }
-  }
 
-  override createCells(element: Element): void {
-    const configCells = [...this.#configElement.querySelectorAll('td')];
-    const hasCollspan = configCells.some(cell => cell.hasAttribute('colspan'));
-    if (!hasCollspan) {
-      super.createCells(element);
-    } else {
-      for (const cell of configCells) {
-        element.appendChild(cell.cloneNode(true));
+    override createCells(element: Element): void {
+      const configCells = [...this.#configElement.querySelectorAll('td')];
+      const hasCollspan = configCells.some(cell => cell.hasAttribute('colspan'));
+      if (!hasCollspan) {
+        super.createCells(element);
+      } else {
+        for (const cell of configCells) {
+          element.appendChild(cell.cloneNode(true));
+        }
       }
     }
-  }
 
-  override createCell(columnId: string): HTMLElement {
-    const index = this.#dataGridElement.columns.findIndex(({id}) => id === columnId);
-    if (this.#dataGridElement.columns[index].dataType === DataType.BOOLEAN) {
-      const cell = super.createCell(columnId);
+    override createCell(columnId: string): HTMLElement {
+      const index = this.#dataGridElement.columns.findIndex(({id}) => id === columnId);
+      if (this.#dataGridElement.columns[index].dataType === DataType.BOOLEAN) {
+        const cell = super.createCell(columnId);
+        cell.setAttribute('part', `${columnId}-column`);
+        return cell;
+      }
+      const cell = this.createTD(columnId);
       cell.setAttribute('part', `${columnId}-column`);
+      const configCells = [...this.#configElement.children].filter(c => c.tagName === 'TD') as HTMLTableCellElement[];
+      const configCell = configCells[index];
+      if (this.isCreationNode && !configCell) {
+        return cell;
+      }
+      if (!configCell) {
+        throw new Error(`Column ${columnId} not found in the data grid`);
+      }
+      for (const child of configCell.childNodes) {
+        cell.appendChild(child.cloneNode(true));
+      }
+      for (const cssClass of configCell.classList) {
+        cell.classList.add(cssClass);
+      }
+      cell.title = configCell.title;
+      if (configCell.hasAttribute('aria-label')) {
+        this.setCellAccessibleName(configCell.getAttribute('aria-label') || '', cell, columnId);
+      }
+      const style = configCell.getAttribute('style');
+      if (style !== null) {
+        cell.setAttribute('style', style);
+      }
+
       return cell;
     }
-    const cell = this.createTD(columnId);
-    cell.setAttribute('part', `${columnId}-column`);
-    const configCells = [...this.#configElement.children].filter(c => c.tagName === 'TD') as HTMLTableCellElement[];
-    const configCell = configCells[index];
-    if (this.isCreationNode && !configCell) {
-      return cell;
-    }
-    if (!configCell) {
-      throw new Error(`Column ${columnId} not found in the data grid`);
-    }
-    for (const child of configCell.childNodes) {
-      cell.appendChild(child.cloneNode(true));
-    }
-    for (const cssClass of configCell.classList) {
-      cell.classList.add(cssClass);
-    }
-    cell.title = configCell.title;
-    if (configCell.hasAttribute('aria-label')) {
-      this.setCellAccessibleName(configCell.getAttribute('aria-label') || '', cell, columnId);
-    }
-    const style = configCell.getAttribute('style');
-    if (style !== null) {
-      cell.setAttribute('style', style);
+
+    override deselect(): void {
+      super.deselect();
+      if (this.isCreationNode) {
+        this.#dataGridElement.dispatchEvent(new CustomEvent('create', {detail: this.data}));
+      }
     }
+  };
+}
 
-    return cell;
+// clang-format off
+class SortableNode extends nodeMixin(SortableDataGridNode<SortableNode>) {
+  // clang-format on
+  constructor(configElement: Element, dataGridElement: DataGridElement) {
+    super();
+    this.initElementNode(configElement, dataGridElement);
+    elementToNode.set(configElement, this);
   }
+}
 
-  override deselect(): void {
-    super.deselect();
-    if (this.isCreationNode) {
-      this.#dataGridElement.dispatchEvent(new CustomEvent('create', {detail: this.data}));
-    }
+// clang-format off
+class DynamicHeightNode extends nodeMixin(DataGridNode<DynamicHeightNode>) {
+  // clang-format on
+  constructor(configElement: Element, dataGridElement: DataGridElement) {
+    super();
+    this.initElementNode(configElement, dataGridElement);
+    elementToNode.set(configElement, this);
   }
 }
 

package/front_end/ui/legacy/components/data_grid/DataGridExporter.ts

@@ -0,0 +1,89 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type {DataGridImpl} from './DataGrid.js';
+
+/**
+ * Exports the visual contents of a DataGrid as a GitHub Flavored Markdown table.
+ */
+export function exportToMarkdown(dataGrid: DataGridImpl<unknown>): string {
+  const grid = serializeGrid(dataGrid, escapeMarkdown);
+  if (grid.length === 0) {
+    return '';
+  }
+  const header = '| ' + grid[0].join(' | ') + ' |';
+  const separator = '| ' + grid[0].map(() => '---').join(' | ') + ' |';
+  const body = grid.slice(1).map(row => '| ' + row.join(' | ') + ' |');
+  return [header, separator, ...body].join('\n');
+}
+
+export function exportToCSV(dataGrid: DataGridImpl<unknown>): string {
+  const grid = serializeGrid(dataGrid, escapeCSV);
+  return grid.map(row => row.join(',')).join('\n');
+}
+
+function serializeGrid(dataGrid: DataGridImpl<unknown>, cellEscaper: (val: string) => string): string[][] {
+  const columns = dataGrid.visibleColumnsArray;
+  if (columns.length === 0) {
+    return [];
+  }
+  const rows = dataGrid.rootNode().children;
+
+  const result: string[][] = [];
+  // Header
+  result.push(columns.map(col => cellEscaper(String(col.title || ''))));
+
+  // Body
+  for (const row of rows) {
+    result.push(columns.map(col => {
+      const cellValue = row.data[col.id];
+      const cellText = extractText(cellValue);
+      return cellEscaper(cellText);
+    }));
+  }
+
+  return result;
+}
+
+function extractText(value: unknown): string {
+  if (value instanceof Node) {
+    return value.textContent || '';
+  }
+  if (value === undefined || value === null) {
+    return '';
+  }
+  return String(value);
+}
+
+/**
+ * Escapes a string so it can be safely rendered within a Markdown table cell.
+ *
+ * It performs three operations:
+ * 1. HTML-escapes `<`, `>`, and `&` to prevent text from being parsed as raw HTML.
+ * 2. Backslash-escapes Markdown control characters (e.g., `*`, `_`, `[`) to avoid unexpected formatting.
+ * 3. Replaces newlines with `<br>` tags since Markdown tables do not support multiline cells.
+ */
+function escapeMarkdown(val: string): string {
+  return val.replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/([\\`*_{}[\]()#+\-.!|])/g, '\\$1')
+      .replace(/\r?\n/g, '<br>');
+}
+
+function escapeCSV(val: string): string {
+  let needQuotes = false;
+  let escaped = val;
+  if (escaped.includes('"')) {
+    escaped = escaped.replace(/"/g, '""');
+    needQuotes = true;
+  }
+  if (escaped.includes(',') || escaped.includes('\n') || escaped.includes('\r')) {
+    needQuotes = true;
+  }
+  if (needQuotes) {
+    return `"${escaped}"`;
+  }
+  return escaped;
+}

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -110,6 +110,16 @@
   padding: 1px 4px;
 }
 
+.data-grid.auto-row-height tbody tr {
+  height: auto;
+}
+
+.data-grid.auto-row-height td {
+  white-space: normal;
+  height: auto;
+}
+
+
 .data-grid td {
   vertical-align: top;
   user-select: text;

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

@@ -7,11 +7,13 @@ import './ViewportDataGrid.js';
 import './SortableDataGrid.js';
 import './ShowMoreDataGridNode.js';
 import './DataGridElement.js';
+import './DataGridExporter.js';
 
 import * as DataGrid from './DataGrid.js';
+import * as DataGridExporter from './DataGridExporter.js';
 import * as ShowMoreDataGridNode from './ShowMoreDataGridNode.js';
 import * as SortableDataGrid from './SortableDataGrid.js';
 import * as ViewportDataGrid from './ViewportDataGrid.js';
 
 export {ifExpanded} from './DataGridElement.js';
-export {DataGrid, ShowMoreDataGridNode, SortableDataGrid, ViewportDataGrid};
+export {DataGrid, DataGridExporter, ShowMoreDataGridNode, SortableDataGrid, ViewportDataGrid};