Support editing in the data grid web component

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

Author: danilsomsikov

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

@@ -131,8 +131,8 @@ const elementToIndexMap = new WeakMap<Element, number>();
 export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTypes<T>> {
   element: HTMLDivElement;
   displayName: string;
-  private editCallback: ((arg0: any, arg1: string, arg2: any, arg3: any) => void)|undefined;
-  private readonly deleteCallback: ((arg0: any) => void)|undefined;
+  editCallback: ((arg0: any, arg1: string, arg2: any, arg3: any) => void)|undefined;
+  deleteCallback: ((arg0: any) => void)|undefined;
   private readonly refreshCallback: (() => void)|undefined;
   private dataTableHeaders: {
     [x: string]: Element,
@@ -204,9 +204,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     // FIXME: Add a createCallback which is different from editCallback and has different
     // behavior when creating a new node.
-    if (editCallback) {
-      this.dataTable.addEventListener('dblclick', this.ondblclick.bind(this), false);
-    }
+    this.dataTable.addEventListener('dblclick', this.ondblclick.bind(this), false);
     this.dataTable.addEventListener('mousedown', this.mouseDownInDataTable.bind(this));
     this.dataTable.addEventListener('click', this.clickInDataTable.bind(this), true);
 
@@ -565,7 +563,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private ondblclick(event: Event): void {
-    if (this.editing || this.editingNode) {
+    if (!this.editCallback || this.editing || this.editingNode) {
       return;
     }
 

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

@@ -157,4 +157,31 @@ describeWithEnvironment('DataGrid', () => {
     sendKeydown(element, 'ArrowDown');
     assert.strictEqual(getAccessibleText(element), 'Display Name Row  Column 1: Value 3, Column 2: Value 4');
   });
+
+  it('supports editable columns', async () => {
+    const editCallback = sinon.stub();
+    const element = await renderDataGrid(html`
+        <devtools-data-grid striped name=${'Display Name'} @edit=${editCallback as Function}>
+          <table>
+            <tr>
+              <th id="column-1" editable>Column 1</th>
+              <th id="column-2">Column 2</th>
+            </tr>
+            <tr>
+              <td>Value 1</td>
+              <td>Value 2</td>
+            </tr>
+          </table>
+        </devtools-data-grid>`);
+    sendKeydown(element, 'ArrowDown');
+    sendKeydown(element, 'Enter');
+    getFocusedElement()!.textContent = 'New Value';
+    sendKeydown(element, 'Enter');
+    assert.isTrue(editCallback.calledOnce);
+    assert.isTrue(editCallback.firstCall.args[0].detail.node.textContent.includes('Value 1'));
+    assert.isTrue(editCallback.firstCall.args[0].detail.node.textContent.includes('Value 2'));
+    assert.strictEqual(editCallback.firstCall.args[0].detail.columnId, 'column-1');
+    assert.strictEqual(editCallback.firstCall.args[0].detail.valueBeforeEditing, 'Value 1');
+    assert.strictEqual(editCallback.firstCall.args[0].detail.newText, 'New Value');
+  });
 });

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

@@ -152,6 +152,7 @@ class DataGridElement extends HTMLElement {
     }
     this.#hideableColumns.clear();
     this.#columnsOrder = [];
+    let hasEditableColumn = false;
     for (const column of this.querySelectorAll('th[id]') || []) {
       const id = column.id as Lowercase<string>;
       this.#columnsOrder.push(id);
@@ -172,6 +173,10 @@ class DataGridElement extends HTMLElement {
         align = undefined;
       }
       const weight = parseFloat(column.getAttribute('weight') || '') ?? undefined;
+      const editable = column.hasAttribute('editable');
+      if (editable) {
+        hasEditableColumn = true;
+      }
       this.#dataGrid.addColumn({
         id,
         title: title as Platform.UIString.LocalizedString,
@@ -180,7 +185,8 @@ class DataGridElement extends HTMLElement {
         fixedWidth,
         width,
         align,
-        weight
+        weight,
+        editable
       });
       if (column.hasAttribute('hideable')) {
         this.#hideableColumns.add(id);
@@ -190,6 +196,8 @@ class DataGridElement extends HTMLElement {
     if (visibleColumns.size) {
       this.#dataGrid.setColumnsVisibility(visibleColumns);
     }
+    this.#dataGrid.editCallback = hasEditableColumn ? this.#editCallback.bind(this) : undefined;
+    this.#dataGrid.deleteCallback = hasEditableColumn ? this.#deleteCallback.bind(this) : undefined;
   }
 
   #needUpdateColumns(mutationList: MutationRecord[]): boolean {
@@ -251,6 +259,15 @@ class DataGridElement extends HTMLElement {
       this.#updateNode(mutation.target);
     }
   }
+
+  #editCallback(node: DataGridElementNode, columnId: string, valueBeforeEditing: string, newText: string): void {
+    this.dispatchEvent(
+        new CustomEvent('edit', {detail: {node: node.configElement, columnId, valueBeforeEditing, newText}}));
+  }
+
+  #deleteCallback(node: DataGridElementNode): void {
+    this.dispatchEvent(new CustomEvent('delete', {detail: node.configElement}));
+  }
 }
 
 class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {