Devtools: DataGrid Edits start on first column when using CtxMenuKey

This change builds off of
https://chromium-review.googlesource.com/c/chromium/src/+/1729554
to allow the context menu key press inside a datagrid to add an
'Edit "<colName>" option that starts at
the first editable column instead of the center column
that is shown when using the mouse to right click on a dataGrid cell.
This fixes the issue where the editing context menu would always show
"Edit <middle Column>" due to how the event would assume the target
is the visible center of the datagrid.

Before: https://imgur.com/QE7VAKf

After: https://imgur.com/a/iiKI2dk

Bug: 963183
Change-Id: I20468e895a5df0cba368ad7ff954e34de17ac0e3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1752769
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Reviewed-by: Jeff Fisher <jeffish@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#706604}

third_party/blink/renderer/devtools/front_end/data_grid/DataGrid.js

@@ -1135,6 +1135,16 @@ DataGrid.DataGrid = class extends Common.Object {
       if (this._editCallback) {
         if (gridNode === this.creationNode) {
           contextMenu.defaultSection().appendItem(Common.UIString('Add new'), this._startEditing.bind(this, target));
+        } else if (isContextMenuKey) {
+          const firstEditColumnIndex = this._nextEditableColumn(-1);
+          if (firstEditColumnIndex > -1) {
+            const firstColumn = this._visibleColumnsArray[firstEditColumnIndex];
+            if (firstColumn && firstColumn.editable) {
+              contextMenu.defaultSection().appendItem(
+                  ls`Edit "${firstColumn.title}"`,
+                  this._startEditingColumnOfDataGridNode.bind(this, gridNode, firstEditColumnIndex));
+            }
+          }
         } else {
           const columnId = this.columnIdFromNode(target);
           if (columnId && this._columns[columnId].editable) {