Bug 1529018 - Use table DOM elements instead of div. r=Honza
authorAlexandre Poirot <poirot.alex@gmail.com>
Thu, 28 Feb 2019 09:26:26 +0000
changeset 519811 91d3c9e78ce7d6f4cc7f91617290933c060f7c21
parent 519810 6b23faa481d9029dd0f9164b51dedaaca60424ce
child 519812 635dd2d69386b9f98b5d23b8feb54de32616e2d4
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1529018
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1529018 - Use table DOM elements instead of div. r=Honza Depends on D20383 Differential Revision: https://phabricator.services.mozilla.com/D20699
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/components/RequestListColumnCause.js
devtools/client/netmonitor/src/components/RequestListColumnContentSize.js
devtools/client/netmonitor/src/components/RequestListColumnCookies.js
devtools/client/netmonitor/src/components/RequestListColumnDomain.js
devtools/client/netmonitor/src/components/RequestListColumnFile.js
devtools/client/netmonitor/src/components/RequestListColumnMethod.js
devtools/client/netmonitor/src/components/RequestListColumnProtocol.js
devtools/client/netmonitor/src/components/RequestListColumnRemoteIP.js
devtools/client/netmonitor/src/components/RequestListColumnResponseHeader.js
devtools/client/netmonitor/src/components/RequestListColumnScheme.js
devtools/client/netmonitor/src/components/RequestListColumnSetCookies.js
devtools/client/netmonitor/src/components/RequestListColumnStatus.js
devtools/client/netmonitor/src/components/RequestListColumnTime.js
devtools/client/netmonitor/src/components/RequestListColumnTransferredSize.js
devtools/client/netmonitor/src/components/RequestListColumnType.js
devtools/client/netmonitor/src/components/RequestListColumnWaterfall.js
devtools/client/netmonitor/src/components/RequestListContent.js
devtools/client/netmonitor/src/components/RequestListHeader.js
devtools/client/netmonitor/src/components/RequestListItem.js
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -52,52 +52,51 @@
 }
 
 .requests-list-scroll {
   overflow-x: hidden;
   overflow-y: auto;
 }
 
 .requests-list-table {
-  display: table;
-}
-
-.requests-list-row-group {
-  display: table-row-group;
+  /* Reset default browser style of <table> */
+  border-spacing: 0;
 }
 
 .requests-list-column {
-  display: table-cell;
   cursor: default;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
   max-width: 50px;
   min-width: 50px;
+
+  /* Reset default browser style of <td> */
+  padding: 0;
 }
 
 .requests-list-column > * {
   display: inline-block;
 }
 
 /* Requests list headers */
 
 .requests-list-headers-group {
+  /* Avoid .devtools-toolbar to override <thead> display type */
   display: table-header-group;
 
   position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1;
 }
 
 .requests-list-headers {
-  display: table-row;
   height: 24px;
   padding: 0;
 }
 
 .requests-list-headers .requests-list-column:first-child .requests-list-header-button {
   border-width: 0;
 }
 
@@ -562,17 +561,16 @@
 
 .requests-list-timings-total:dir(rtl) {
   transform-origin: right center;
 }
 
 /* Request list item */
 
 .request-list-item {
-  display: table-row;
   height: 24px;
   line-height: 24px;
 }
 
 .request-list-item.selected {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
--- a/devtools/client/netmonitor/src/components/RequestListColumnCause.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnCause.js
@@ -33,17 +33,17 @@ class RequestListColumnCause extends Com
 
     if (cause) {
       // Legacy server might send a numeric value. Display it as "unknown"
       causeType = typeof cause.type === "string" ? cause.type : "unknown";
       causeHasStack = cause.stacktrace && cause.stacktrace.length > 0;
     }
 
     return (
-      div({ className: "requests-list-column requests-list-cause", title: causeType },
+      dom.td({ className: "requests-list-column requests-list-cause", title: causeType },
         causeHasStack && div({
           className: "requests-list-cause-stack",
           onMouseDown: onCauseBadgeMouseDown,
         }, "JS"),
         causeType
       )
     );
   }
--- a/devtools/client/netmonitor/src/components/RequestListColumnContentSize.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnContentSize.js
@@ -4,31 +4,29 @@
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getFormattedSize } = require("../utils/format-utils");
 
-const { div } = dom;
-
 class RequestListColumnContentSize extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
     };
   }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.contentSize !== nextProps.item.contentSize;
   }
 
   render() {
     const { contentSize } = this.props.item;
     const size = typeof contentSize === "number" ? getFormattedSize(contentSize) : null;
     return (
-      div({ className: "requests-list-column requests-list-size", title: size }, size)
+      dom.td({ className: "requests-list-column requests-list-size", title: size }, size)
     );
   }
 }
 
 module.exports = RequestListColumnContentSize;
--- a/devtools/client/netmonitor/src/components/RequestListColumnCookies.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnCookies.js
@@ -4,18 +4,16 @@
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
-const { div } = dom;
-
 class RequestListColumnCookies extends Component {
   static get propTypes() {
     return {
       connector: PropTypes.object.isRequired,
       item: PropTypes.object.isRequired,
     };
   }
 
@@ -37,17 +35,17 @@ class RequestListColumnCookies extends C
     return currRequestCookies !== nextRequestCookies;
   }
 
   render() {
     let { requestCookies = { cookies: [] } } = this.props.item;
     requestCookies = requestCookies.cookies || requestCookies;
     const requestCookiesLength = requestCookies.length > 0 ? requestCookies.length : "";
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-cookies",
         title: requestCookiesLength,
       }, requestCookiesLength)
     );
   }
 }
 
 module.exports = RequestListColumnCookies;
--- a/devtools/client/netmonitor/src/components/RequestListColumnDomain.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnDomain.js
@@ -44,17 +44,17 @@ class RequestListColumnDomain extends Co
       iconClassList.push("security-state-local");
       iconTitle = L10N.getStr("netmonitor.security.state.secure");
     } else if (securityState) {
       iconClassList.push(`security-state-${securityState}`);
       iconTitle = L10N.getStr(`netmonitor.security.state.${securityState}`);
     }
 
     return (
-      div({ className: "requests-list-column requests-list-domain", title },
+      dom.td({ className: "requests-list-column requests-list-domain", title },
         div({
           className: iconClassList.join(" "),
           onMouseDown: onSecurityIconMouseDown,
           title: iconTitle,
         }),
         item.isThirdPartyTrackingResource && div({
           className: "tracking-resource",
           title: L10N.getStr("netmonitor.trackingResource.tooltip"),
--- a/devtools/client/netmonitor/src/components/RequestListColumnFile.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnFile.js
@@ -37,17 +37,17 @@ class RequestListColumnFile extends Comp
         cause.type.includes("image") ||
         cause.type.includes("beacon"))) {
       iconClassList.push("file-type-image");
     } else {
       iconClassList.push("file-type-general");
     }
 
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-file",
         title: urlDetails.unicodeUrl,
       },
         div({
           className: iconClassList.join(" "),
           title: getFileName(urlDetails.baseNameWithQuery) || urlDetails.unicodeUrl,
         }),
         urlDetails.baseNameWithQuery
--- a/devtools/client/netmonitor/src/components/RequestListColumnMethod.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnMethod.js
@@ -3,28 +3,26 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
-const { div } = dom;
-
 class RequestListColumnMethod extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
     };
   }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.method !== nextProps.item.method;
   }
 
   render() {
     const { method } = this.props.item;
-    return div({ className: "requests-list-column requests-list-method" }, method);
+    return dom.td({ className: "requests-list-column requests-list-method" }, method);
   }
 }
 
 module.exports = RequestListColumnMethod;
--- a/devtools/client/netmonitor/src/components/RequestListColumnProtocol.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnProtocol.js
@@ -4,35 +4,33 @@
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getFormattedProtocol } = require("../utils/request-utils");
 
-const { div } = dom;
-
 class RequestListColumnProtocol extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
     };
   }
 
   shouldComponentUpdate(nextProps) {
     return getFormattedProtocol(this.props.item) !==
       getFormattedProtocol(nextProps.item);
   }
 
   render() {
     const protocol = getFormattedProtocol(this.props.item);
 
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-protocol",
         title: protocol,
       },
         protocol
       )
     );
   }
 }
--- a/devtools/client/netmonitor/src/components/RequestListColumnRemoteIP.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnRemoteIP.js
@@ -4,18 +4,16 @@
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getFormattedIPAndPort } = require("../utils/format-utils");
 
-const { div } = dom;
-
 class RequestListColumnRemoteIP extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
     };
   }
 
   shouldComponentUpdate(nextProps) {
@@ -23,16 +21,19 @@ class RequestListColumnRemoteIP extends 
   }
 
   render() {
     const { remoteAddress, remotePort } = this.props.item;
     const remoteIP = remoteAddress ?
       getFormattedIPAndPort(remoteAddress, remotePort) : "unknown";
 
     return (
-      div({ className: "requests-list-column requests-list-remoteip", title: remoteIP },
+      dom.td({
+        className: "requests-list-column requests-list-remoteip",
+        title: remoteIP,
+      },
         remoteIP
       )
     );
   }
 }
 
 module.exports = RequestListColumnRemoteIP;
--- a/devtools/client/netmonitor/src/components/RequestListColumnResponseHeader.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnResponseHeader.js
@@ -7,18 +7,16 @@
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const {
   getResponseHeader,
   fetchNetworkUpdatePacket,
 } = require("../utils/request-utils");
 
-const { div } = dom;
-
 /**
  * Renders a response header column in the requests list.  The actual
  * header to show is passed as a prop.
  */
 class RequestListColumnResponseHeader extends Component {
   static get propTypes() {
     return {
       connector: PropTypes.object.isRequired,
@@ -41,17 +39,17 @@ class RequestListColumnResponseHeader ex
     const currHeader = getResponseHeader(this.props.item, this.props.header);
     const nextHeader = getResponseHeader(nextProps.item, nextProps.header);
     return currHeader !== nextHeader;
   }
 
   render() {
     const header = getResponseHeader(this.props.item, this.props.header);
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-response-header",
         title: header,
       },
         header
       )
     );
   }
 }
--- a/devtools/client/netmonitor/src/components/RequestListColumnScheme.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnScheme.js
@@ -3,33 +3,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
-const { div } = dom;
-
 class RequestListColumnScheme extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
     };
   }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.urlDetails.scheme !== nextProps.item.urlDetails.scheme;
   }
 
   render() {
     const { urlDetails } = this.props.item;
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-scheme",
         title: urlDetails.scheme,
       },
         urlDetails.scheme
       )
     );
   }
 }
--- a/devtools/client/netmonitor/src/components/RequestListColumnSetCookies.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnSetCookies.js
@@ -4,18 +4,16 @@
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
-const { div } = dom;
-
 class RequestListColumnSetCookies extends Component {
   static get propTypes() {
     return {
       connector: PropTypes.object.isRequired,
       item: PropTypes.object.isRequired,
     };
   }
 
@@ -39,17 +37,17 @@ class RequestListColumnSetCookies extend
 
   render() {
     let { responseCookies = { cookies: [] } } = this.props.item;
     responseCookies = responseCookies.cookies || responseCookies;
     const responseCookiesLength = responseCookies.length > 0
       ? responseCookies.length
       : "";
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-set-cookies",
         title: responseCookiesLength,
       }, responseCookiesLength)
     );
   }
 }
 
 module.exports = RequestListColumnSetCookies;
--- a/devtools/client/netmonitor/src/components/RequestListColumnStatus.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnStatus.js
@@ -7,30 +7,28 @@
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 // Components
 
 const StatusCode = createFactory(require("./StatusCode"));
 
-const { div } = dom;
-
 class RequestListColumnStatus extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
     };
   }
 
   render() {
     const { item } = this.props;
 
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-status",
       },
       StatusCode({ item }),
     ));
   }
 }
 
 module.exports = RequestListColumnStatus;
--- a/devtools/client/netmonitor/src/components/RequestListColumnTime.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnTime.js
@@ -10,18 +10,16 @@ const PropTypes = require("devtools/clie
 const { getFormattedTime } = require("../utils/format-utils");
 const {
   fetchNetworkUpdatePacket,
   getResponseTime,
   getStartTime,
   getEndTime,
 } = require("../utils/request-utils");
 
-const { div } = dom;
-
 /**
  * This component represents a column displaying selected
  * timing value. There are following possible values this
  * column can render:
  * - Start Time
  * - End Time
  * - Response Time
  * - Duration Time
@@ -80,17 +78,17 @@ class RequestListColumnTime extends Comp
     return 0;
   }
 
   render() {
     const { type } = this.props;
     const time = getFormattedTime(this.getTime(this.props));
 
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-" + type + "-time",
         title: time,
       },
         time
       )
     );
   }
 }
--- a/devtools/client/netmonitor/src/components/RequestListColumnTransferredSize.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnTransferredSize.js
@@ -6,17 +6,16 @@
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getFormattedSize } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const { propertiesEqual } = require("../utils/request-utils");
 
-const { div } = dom;
 const SIZE_CACHED = L10N.getStr("networkMenu.sizeCached");
 const SIZE_SERVICE_WORKER = L10N.getStr("networkMenu.sizeServiceWorker");
 const SIZE_UNAVAILABLE = L10N.getStr("networkMenu.sizeUnavailable");
 const SIZE_UNAVAILABLE_TITLE = L10N.getStr("networkMenu.sizeUnavailable.title");
 const UPDATED_TRANSFERRED_PROPS = [
   "transferredSize",
   "fromCache",
   "fromServiceWorker",
@@ -45,16 +44,19 @@ class RequestListColumnTransferredSize e
       text = getFormattedSize(transferredSize);
     } else if (transferredSize === null) {
       text = SIZE_UNAVAILABLE;
     }
 
     const title = text == SIZE_UNAVAILABLE ? SIZE_UNAVAILABLE_TITLE : text;
 
     return (
-      div({ className: "requests-list-column requests-list-transferred", title: title },
+      dom.td({
+        className: "requests-list-column requests-list-transferred",
+        title: title,
+      },
         text
       )
     );
   }
 }
 
 module.exports = RequestListColumnTransferredSize;
--- a/devtools/client/netmonitor/src/components/RequestListColumnType.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnType.js
@@ -4,18 +4,16 @@
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getAbbreviatedMimeType } = require("../utils/request-utils");
 
-const { div } = dom;
-
 class RequestListColumnType extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
     };
   }
 
   shouldComponentUpdate(nextProps) {
@@ -26,17 +24,17 @@ class RequestListColumnType extends Comp
     const { mimeType } = this.props.item;
     let abbrevType;
 
     if (mimeType) {
       abbrevType = getAbbreviatedMimeType(mimeType);
     }
 
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-type",
         title: mimeType,
       },
         abbrevType
       )
     );
   }
 }
--- a/devtools/client/netmonitor/src/components/RequestListColumnWaterfall.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnWaterfall.js
@@ -120,17 +120,17 @@ class RequestListColumnWaterfall extends
   render() {
     const {
       firstRequestStartedMillis,
       item,
       onWaterfallMouseDown,
     } = this.props;
 
     return (
-      div({
+      dom.td({
         className: "requests-list-column requests-list-waterfall",
         onMouseOver: ({ target }) => {
           if (!target.title) {
             target.title = this.timingTooltip();
           }
         },
       },
         div({
--- a/devtools/client/netmonitor/src/components/RequestListContent.js
+++ b/devtools/client/netmonitor/src/components/RequestListContent.js
@@ -271,21 +271,21 @@ class RequestListContent extends Compone
       selectedRequest,
     } = this.props;
 
     return (
       div({
         ref: "scrollEl",
         className: "requests-list-scroll",
       },
-        div({
+        dom.table({
           className: "requests-list-table",
         },
           RequestListHeader(),
-          div({
+          dom.tbody({
             ref: "rowGroupEl",
             className: "requests-list-row-group",
             tabIndex: 0,
             onKeyDown: this.onKeyDown,
             style: { "--timings-scale": scale, "--timings-rev-scale": 1 / scale },
           },
             displayedRequests.map((item, index) => RequestListItem({
               firstRequestStartedMillis,
--- a/devtools/client/netmonitor/src/components/RequestListHeader.js
+++ b/devtools/client/netmonitor/src/components/RequestListHeader.js
@@ -162,19 +162,19 @@ class RequestListHeader extends Componen
 
     return div({ className }, label);
   }
 
   render() {
     const { columns, scale, sort, sortBy, waterfallWidth } = this.props;
 
     return (
-      div({ className: "devtools-toolbar requests-list-headers-group" },
-        div({
-          className: "devtools-toolbar requests-list-headers",
+      dom.thead({ className: "devtools-toolbar requests-list-headers-group" },
+        dom.tr({
+          className: "requests-list-headers",
           onContextMenu: this.onContextMenu,
         },
           HEADERS.filter((header) => columns[header.name]).map((header) => {
             const name = header.name;
             const boxName = header.boxName || name;
             const label = header.noLocalization
               ? name : L10N.getStr(`netmonitor.toolbar.${header.label || name}`);
             let sorted, sortedTitle;
@@ -183,17 +183,17 @@ class RequestListHeader extends Componen
             if (active) {
               sorted = sort.ascending ? "ascending" : "descending";
               sortedTitle = L10N.getStr(sort.ascending
                 ? "networkMenu.sortedAsc"
                 : "networkMenu.sortedDesc");
             }
 
             return (
-              div({
+              dom.td({
                 id: `requests-list-${boxName}-header-box`,
                 className: `requests-list-column requests-list-${boxName}`,
                 key: name,
                 ref: `${name}Header`,
                 // Used to style the next column.
                 "data-active": active,
               },
                 button({
--- a/devtools/client/netmonitor/src/components/RequestListItem.js
+++ b/devtools/client/netmonitor/src/components/RequestListItem.js
@@ -1,17 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const { div } = dom;
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const {
   fetchNetworkUpdatePacket,
   propertiesEqual,
 } = require("../utils/request-utils");
 const { RESPONSE_HEADERS } = require("../constants");
 
 // Components
@@ -200,17 +199,17 @@ class RequestListItem extends Component 
       onWaterfallMouseDown,
     } = this.props;
 
     const classList = ["request-list-item", index % 2 ? "odd" : "even"];
     isSelected && classList.push("selected");
     fromCache && classList.push("fromCache");
 
     return (
-      div({
+      dom.tr({
         ref: "listItem",
         className: classList.join(" "),
         "data-id": item.id,
         tabIndex: 0,
         onContextMenu,
         onMouseDown,
       },
         columns.status && RequestListColumnStatus({ item }),