Bug 1399897 - Restrict the height of console table and add sticky headers; r=nchevobbe

Since table elements (th, tr) do not support sticky headers, the console table now
uses only sibling divs for the cells, with appropriate aria attributes and a CSS grid
to mimic an actual table.

MozReview-Commit-ID: J8hmy7H4GKL

--HG--
extra : rebase_source : 220368d50a36707f7114a4c69580614b79b955e9

devtools/client/themes/webconsole.css

@@ -1093,56 +1093,45 @@ a.learn-more-link.webconsole-learn-more-link {
 /* console.table() */
 .new-consoletable {
   width: 100%;
-  border-collapse: collapse;
   --consoletable-border: var(--theme-splitter-color);
   margin-block-end: var(--attachment-margin-block-end);
   color: var(--theme-body-color);
-}
-
-.new-consoletable thead {
+  display: grid;
+  max-height: 250px;
+  overflow-y: auto;
   border: 1px solid var(--consoletable-border);
+  /* border at the left side will be added by the inner divs [role=gridcell] */
+  border-left: none;
 }
 
-.new-consoletable tbody {
-  background-color: var(--theme-body-background);
-  border: 1px solid var(--consoletable-border);
-  border-block-start-width: 0;
+.new-consoletable > div {
+  border-left: 1px solid var(--consoletable-border);
 }
 
-.new-consoletable th {
+.new-consoletable-header {
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid var(--consoletable-border);
   background-color: var(--theme-toolbar-background);
   color: var(--theme-body-color);
   margin: 0;
-  padding: 5px 0 0;
+  padding: 5px 4px;
   font-weight: inherit;
+  z-index: 1;
 }
 
-.new-consoletable th:not(:last-of-type) {
-  border-inline-end: 1px solid var(--consoletable-border);
+.new-consoletable > [role=gridcell] {
+  background-color: var(--theme-body-background);
+  padding: 3px 4px;
+  min-width: 100px;
+  color: var(--theme-body-color);
 }
 
-.new-consoletable tr:nth-of-type(even) {
+.new-consoletable > [role=gridcell].even {
   background-color: var(--table-zebra-background);
 }
 
-.new-consoletable td {
-  padding: 3px 4px;
-  min-width: 100px;
-  -moz-user-focus: normal;
-  color: var(--theme-body-color);
-  height: 1.25em;
-  line-height: 1.25em;
-  /* Objects are expandable in cells, and if one gets tall,
-   * we still want other columns to stick to the top.
-   */
-  vertical-align: top;
-}
-
-.new-consoletable tr td:not(:last-of-type) {
-  border-inline-end: 1px solid var(--consoletable-border);
-}
 /* Layout */
-
 .webconsole-output {
   flex: 1;
   direction: ltr;

devtools/client/webconsole/new-console-output/components/ConsoleTable.js

@@ -50,7 +50,11 @@ class ConsoleTable extends Component {
 
   getHeaders(columns) {
     let headerItems = [];
-    columns.forEach((value, key) => headerItems.push(dom.th({}, value)));
+    columns.forEach((value, key) => headerItems.push(dom.div({
+      className: "new-consoletable-header",
+      role: "columnheader"
+    }, value))
+  );
     return headerItems;
   }
 
@@ -60,12 +64,15 @@ class ConsoleTable extends Component {
       serviceContainer,
     } = this.props;
 
-    return items.map(item => {
+    return items.map((item, index) => {
       let cells = [];
       columns.forEach((value, key) => {
         cells.push(
-          dom.td(
-            {},
+          dom.div(
+            {
+              role: "gridcell",
+              className: (index % 2) ? "odd" : "even"
+            },
             GripMessageBody({
               grip: item[key],
               mode: MODE.SHORT,
@@ -76,7 +83,7 @@ class ConsoleTable extends Component {
           )
         );
       });
-      return dom.tr({}, cells);
+      return cells;
     });
   }
 
@@ -97,9 +104,15 @@ class ConsoleTable extends Component {
     );
 
     return (
-      dom.table({className: "new-consoletable devtools-monospace"},
-        dom.thead({}, this.getHeaders(columns)),
-        dom.tbody({}, this.getRows(columns, items))
+      dom.div({
+        className: "new-consoletable",
+        role: "grid",
+        style: {
+          gridTemplateColumns: `repeat(${columns.size}, auto)`
+        }
+      },
+        this.getHeaders(columns),
+        this.getRows(columns, items)
       )
     );
   }