Allow legacy data grid instantiation from lit-html template

Similar to the split widget changes: https://crrev.com/c/5898679

Bug: 301364727
Change-Id: I9fadad2d9288f1fd90c25b0f9f6db1b9663ae990
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5960859
Reviewed-by: Philip Pfaffe <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Joshua Thomas <[email protected]>

Author: masnoble

front_end/BUILD.gn

@@ -238,6 +238,7 @@ group("unittests") {
     "ui/legacy:copy_stylesheets_for_server",
     "ui/legacy:unittests",
     "ui/legacy/components/color_picker:unittests",
+    "ui/legacy/components/data_grid:unittests",
     "ui/legacy/components/inline_editor:unittests",
     "ui/legacy/components/object_ui:unittests",
     "ui/legacy/components/perf_ui:unittests",

front_end/ui/legacy/components/data_grid/BUILD.gn

@@ -53,3 +53,14 @@ devtools_entrypoint("bundle") {
 
   visibility += devtools_ui_legacy_visibility
 }
+
+ts_library("unittests") {
+  testonly = true
+
+  sources = [ "DataGrid.test.ts" ]
+
+  deps = [
+    ":bundle",
+    "../../../../testing",
+  ]
+}

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

@@ -0,0 +1,51 @@
+// Copyright 2024 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.
+
+import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as UI from '../../legacy.js';
+
+import * as DataGrid from './data_grid.js';
+
+const {render, html} = LitHtml;
+const widgetRef = UI.Widget.widgetRef;
+
+describeWithEnvironment('DataGrid', () => {
+  it('can be instantiated from template', async () => {
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+
+    let widget!: DataGrid.DataGrid.DataGridWidget<unknown>;
+
+    const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<unknown> = {
+      implParams: {
+        displayName: 'testGrid',
+        columns: [{
+          id: 'test',
+          sortable: false,
+        }],
+      },
+      nodes: [new DataGrid.DataGrid.DataGridNode({test: 'testNode'})],
+      markAsRoot: true,
+    };
+
+    // clang-format off
+        render(
+            html`
+        <devtools-data-grid-widget
+            .options=${dataGridOptions}
+            ${widgetRef(DataGrid.DataGrid.DataGridWidget, e => { widget = e; })}
+        ></devtools-data-grid-widget>
+        `,
+        container, {host: this});
+    // clang-format on
+
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    assert.exists(widget);
+    // There is a single test row
+    assert.strictEqual(widget.dataGrid.rootNode().children.length, 1);
+  });
+});

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

@@ -228,7 +228,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.editing = false;
     this.selectedNode = null;
     this.expandNodesWhenArrowing = false;
-    this.setRootNode((new DataGridNode() as DataGridNode<T>));
+    this.setRootNode(new DataGridNode<T>());
 
     this.setHasSelection(false);
 
@@ -1549,9 +1549,9 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return 0;
   }
 
-  asWidget(): DataGridWidget<T> {
+  asWidget(element?: HTMLElement): DataGridWidget<T> {
     if (!this.dataGridWidget) {
-      this.dataGridWidget = new DataGridWidget(this);
+      this.dataGridWidget = new DataGridWidget(this, element);
     }
     return this.dataGridWidget;
   }
@@ -2441,9 +2441,9 @@ export class CreationDataGridNode<T> extends DataGridNode<T> {
 }
 
 export class DataGridWidget<T> extends UI.Widget.VBox {
-  private readonly dataGrid: DataGridImpl<T>;
-  constructor(dataGrid: DataGridImpl<T>) {
-    super();
+  readonly dataGrid: DataGridImpl<T>;
+  constructor(dataGrid: DataGridImpl<T>, element?: HTMLElement) {
+    super(undefined, undefined, element);
     this.dataGrid = dataGrid;
     this.element.appendChild(dataGrid.element);
     this.setDefaultFocusedElement(dataGrid.element);
@@ -2466,6 +2466,92 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
     return [this.dataGrid.scrollContainer];
   }
 }
+
+export interface DataGridWidgetOptions<T> {
+  implParams: Parameters;
+  dataGridImpl?: DataGridImpl<T>;
+  markAsRoot?: boolean;
+  nodes: DataGridNode<T>[];
+}
+
+export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWidget<T>> {
+  #options: DataGridWidgetOptions<T>;
+
+  constructor() {
+    super();
+    // default values for options
+    this.#options = {
+      implParams: {
+        displayName: 'dataGrid',
+        columns: [],
+      },
+      nodes: [],
+    };
+  }
+
+  set options(options: DataGridWidgetOptions<T>) {
+    this.#options = options;
+  }
+
+  override createWidget(): DataGridWidget<T> {
+    const {
+      implParams,
+      markAsRoot,
+      nodes,
+    } = this.#options;
+
+    if (!this.#options.dataGridImpl) {
+      this.#options.dataGridImpl = new DataGridImpl<T>(implParams);
+    }
+
+    this.#options.dataGridImpl.rootNode().removeChildren();
+    for (const node of nodes) {
+      this.#options.dataGridImpl.rootNode().appendChild(node);
+    }
+
+    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    this.#options.dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
+    const widget = this.#options.dataGridImpl.asWidget(this);
+
+    if (markAsRoot) {
+      widget.markAsRoot();
+    }
+    return widget;
+  }
+
+  #selectedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {
+    const domEvent = new CustomEvent('selectedNode', {detail: event.data});
+    this.dispatchEvent(domEvent);
+  }
+
+  #deselectedNode(): void {
+    const domEvent = new CustomEvent('deselectedNode');
+    this.dispatchEvent(domEvent);
+  }
+
+  #openedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {
+    const domEvent = new CustomEvent('openedNode', {detail: event.data});
+    this.dispatchEvent(domEvent);
+  }
+
+  #sortingChanged(): void {
+    const domEvent = new CustomEvent('sortingChanged');
+    this.dispatchEvent(domEvent);
+  }
+
+  #paddingChanged(): void {
+    const domEvent = new CustomEvent('paddingChanged');
+    this.dispatchEvent(domEvent);
+  }
+}
+
+customElements.define('devtools-data-grid-widget', DataGridWidgetElement);
+
 export interface Parameters {
   displayName: string;
   columns: ColumnDescriptor[];