Network: fix data-grid being focusable behind the empty state

[email protected]

Fixed: 409963787
Change-Id: I2fbabec1c6e1942b46fea22f67ef1c1c020591fd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6448979
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Andres Olivares <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>

Author: jackfranklin

front_end/panels/network/NetworkLogView.ts

@@ -1137,6 +1137,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   private setHidden(value: boolean): void {
     this.columnsInternal.setHidden(value);
+    this.dataGrid.setInert(value);
     UI.ARIAUtils.setHidden(this.summaryToolbarInternal, value);
   }
 

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

@@ -1308,6 +1308,20 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return (cellElement && nodeToColumnIdMap.get(cellElement)) || null;
   }
 
+  /**
+   * Mark the data-grid as inert, meaning that it will not capture any user interactions.
+   * Useful in some panels where the empty state is actually an absolutely
+   * positioned div put over the panel, and in that case we need to ensure the
+   * hidden, empty data grid, does not capture any user interaction - in particular if they tab through the UI.
+   */
+  setInert(isInert: boolean): void {
+    if (isInert) {
+      this.element.setAttribute('inert', 'inert');
+    } else {
+      this.element.removeAttribute('inert');
+    }
+  }
+
   private clickInHeaderCell(event: Event): void {
     const cell = UI.UIUtils.enclosingNodeOrSelfWithNodeName((event.target as Node), 'th');
     if (!cell) {