commit fe956997e97406bf079ca1b6f80d9009fb62454f
author Jack Franklin <jacktfranklin@chromium.org> Wed Nov 11 11:49:37 2020
committer Commit Bot <commit-bot@chromium.org> Wed Nov 11 14:48:23 2020
tree cf686f821cd5a557e2a6204e26cd81a4b03d01d5
parent 6ab69321115274a38a03ee9ae3c91409e0574029

Fix new data-grid empty state.

Before + after: https://imgur.com/a/w42MESX

Bug: 1125968
Change-Id: Ibe75e6fcc4c7f747879cb035c915442dc80a60ce
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2532241
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

front_end/component_docs/data_grid/basic.html

diff --git a/front_end/component_docs/data_grid/basic.html b/front_end/component_docs/data_grid/basic.html
index f86c22f..32a0080 100644
--- a/front_end/component_docs/data_grid/basic.html
+++ b/front_end/component_docs/data_grid/basic.html
@@ -14,6 +14,7 @@
         width: 80%;
         border: 1px solid black;
         padding: 20px;
+        height: 300px;
       }
 
     </style>

front_end/ui/components/DataGrid.ts

diff --git a/front_end/ui/components/DataGrid.ts b/front_end/ui/components/DataGrid.ts
index 36280f9..91fbc44 100644
--- a/front_end/ui/components/DataGrid.ts
+++ b/front_end/ui/components/DataGrid.ts
@@ -203,9 +203,21 @@
     return undefined;
   }
 
+  private renderEmptyRow() {
+    const visibleColumns = this.columns.filter(col => !col.hidden);
+    const emptyCells = visibleColumns.map((col, colIndex) => {
+      const emptyCellClasses = LitHtml.Directives.classMap({
+        firstVisibleColumn: colIndex === 0,
+      });
+      return LitHtml.html`<td class=${emptyCellClasses}></td>`;
+    });
+    return LitHtml.html`<tr>${emptyCells}</tr>`;
+  }
+
   private render() {
     const indexOfFirstVisibleColumn = this.columns.findIndex(col => !col.hidden);
     const anyColumnsSortable = this.columns.some(col => col.sortable === true);
+    const visibleRowsCount = this.rows.filter(row => !row.hidden).length;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
@@ -231,6 +243,7 @@
       table {
         border-spacing: 0;
         width: 100%;
+        height: 100%;
         /* To make sure that we properly hide overflowing text
            when horizontal space is too narrow. */
         table-layout: fixed;
@@ -342,7 +355,7 @@
           </tr>
         </thead>
         <tbody>
-          ${this.rows.map((row, rowIndex) => {
+          ${visibleRowsCount === 0 ? this.renderEmptyRow() : this.rows.map((row, rowIndex) => {
             const focusableCell = this.getCurrentlyFocusableCell();
             const [,focusableCellRowIndex] = this.focusableCell;