--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -3,17 +3,16 @@ tags = devtools
 subsuite = devtools
 support-files =
   dropmarker.svg
   head.js
   html_cause-test-page.html
   html_content-type-test-page.html
   html_content-type-without-cache-test-page.html
   html_brotli-test-page.html
-  html_image-tooltip-test-page.html
   html_cors-test-page.html
   html_custom-get-page.html
   html_cyrillic-test-page.html
   html_frame-test-page.html
   html_frame-subdocument.html
   html_filter-test-page.html
   html_infinite-get-page.html
   html_json-b64.html
@@ -102,18 +101,16 @@ skip-if = (os == 'linux' && bits == 32 &
 skip-if = (os == 'linux' && debug && bits == 32) # Bug 1321434
 [browser_net_filter-01.js]
 skip-if = (os == 'linux' && debug && bits == 32) # Bug 1303439
 [browser_net_filter-02.js]
 [browser_net_filter-03.js]
 [browser_net_filter-04.js]
 [browser_net_footer-summary.js]
 [browser_net_html-preview.js]
-[browser_net_icon-preview.js]
-[browser_net_image-tooltip.js]
 [browser_net_json-b64.js]
 [browser_net_json-null.js]
 [browser_net_json-long.js]
 [browser_net_json-malformed.js]
 [browser_net_json_custom_mime.js]
 [browser_net_json_text_mime.js]
 [browser_net_jsonp.js]
 [browser_net_large-response.js]

--- a/devtools/client/netmonitor/test/browser_net_accessibility-01.js
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-01.js
@@ -18,66 +18,65 @@ add_task(function* () {
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
   gStore.dispatch(Actions.batchEnable(false));
 
   let count = 0;
   function check(selectedIndex, panelVisibility) {
     info("Performing check " + (count++) + ".");
 
-    let requestItems = Array.from(document.querySelectorAll(".request-list-item"));
-    is(requestItems.findIndex((item) => item.matches(".selected")), selectedIndex,
+    is(document.querySelector(".request-list-item.selected .requests-list-url")
+      .textContent,
+      "request_" + selectedIndex,
       "The selected item in the requests menu was incorrect.");
     is(!!document.querySelector(".network-details-panel"), panelVisibility,
       "The network details panel should render correctly.");
   }
 
   let wait = waitForNetworkEvents(monitor, 2);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests(2);
   });
   yield wait;
 
-  check(-1, false);
-
   gStore.dispatch(Actions.selectDelta(+Infinity));
   check(1, true);
   gStore.dispatch(Actions.selectDelta(-Infinity));
   check(0, true);
 
   gStore.dispatch(Actions.selectDelta(+1));
   check(1, true);
   gStore.dispatch(Actions.selectDelta(-1));
   check(0, true);
 
   gStore.dispatch(Actions.selectDelta(+10));
   check(1, true);
   gStore.dispatch(Actions.selectDelta(-10));
   check(0, true);
 
-  wait = waitForNetworkEvents(monitor, 18);
+  wait = waitForNetworkEvents(monitor, 8);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
-    content.wrappedJSObject.performRequests(18);
+    content.wrappedJSObject.performRequests(8);
   });
   yield wait;
 
   gStore.dispatch(Actions.selectDelta(+Infinity));
-  check(19, true);
+  check(9, true);
   gStore.dispatch(Actions.selectDelta(-Infinity));
   check(0, true);
 
   gStore.dispatch(Actions.selectDelta(+1));
   check(1, true);
   gStore.dispatch(Actions.selectDelta(-1));
   check(0, true);
 
-  gStore.dispatch(Actions.selectDelta(+10));
-  check(10, true);
-  gStore.dispatch(Actions.selectDelta(-10));
+  gStore.dispatch(Actions.selectDelta(+5));
+  check(5, true);
+  gStore.dispatch(Actions.selectDelta(-5));
   check(0, true);
 
   gStore.dispatch(Actions.selectDelta(+100));
-  check(19, true);
+  check(9, true);
   gStore.dispatch(Actions.selectDelta(-100));
   check(0, true);
 
   return teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_accessibility-02.js
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-02.js
@@ -18,114 +18,109 @@ add_task(function* () {
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
   gStore.dispatch(Actions.batchEnable(false));
 
   let count = 0;
   function check(selectedIndex, panelVisibility) {
     info("Performing check " + (count++) + ".");
 
-    let requestItems = Array.from(document.querySelectorAll(".request-list-item"));
-    is(requestItems.findIndex((item) => item.matches(".selected")), selectedIndex,
+    is(document.querySelector(".request-list-item.selected .requests-list-url")
+      .textContent,
+      "request_" + selectedIndex,
       "The selected item in the requests menu was incorrect.");
     is(!!document.querySelector(".network-details-panel"), panelVisibility,
       "The network details panel should render correctly.");
   }
 
   let wait = waitForNetworkEvents(monitor, 2);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests(2);
   });
   yield wait;
 
-  document.querySelector(".requests-list-contents").focus();
-
-  check(-1, false);
+  document.querySelector(".ReactVirtualized__Table__Grid").focus();
 
   EventUtils.sendKey("DOWN", window);
   check(0, true);
   EventUtils.sendKey("UP", window);
   check(0, true);
 
   EventUtils.sendKey("PAGE_DOWN", window);
   check(1, true);
   EventUtils.sendKey("PAGE_UP", window);
   check(0, true);
 
   EventUtils.sendKey("END", window);
   check(1, true);
   EventUtils.sendKey("HOME", window);
   check(0, true);
 
-  wait = waitForNetworkEvents(monitor, 18);
+  wait = waitForNetworkEvents(monitor, 8);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
-    content.wrappedJSObject.performRequests(18);
+    content.wrappedJSObject.performRequests(8);
   });
   yield wait;
 
   EventUtils.sendKey("DOWN", window);
   check(1, true);
   EventUtils.sendKey("DOWN", window);
   check(2, true);
   EventUtils.sendKey("UP", window);
   check(1, true);
   EventUtils.sendKey("UP", window);
   check(0, true);
 
   EventUtils.sendKey("PAGE_DOWN", window);
-  check(4, true);
+  check(2, true);
   EventUtils.sendKey("PAGE_DOWN", window);
-  check(8, true);
+  check(4, true);
   EventUtils.sendKey("PAGE_UP", window);
-  check(4, true);
+  check(2, true);
   EventUtils.sendKey("PAGE_UP", window);
   check(0, true);
 
   EventUtils.sendKey("HOME", window);
   check(0, true);
   EventUtils.sendKey("HOME", window);
   check(0, true);
   EventUtils.sendKey("PAGE_UP", window);
   check(0, true);
   EventUtils.sendKey("HOME", window);
   check(0, true);
 
   EventUtils.sendKey("END", window);
-  check(19, true);
+  check(9, true);
   EventUtils.sendKey("END", window);
-  check(19, true);
+  check(9, true);
   EventUtils.sendKey("PAGE_DOWN", window);
-  check(19, true);
+  check(9, true);
   EventUtils.sendKey("END", window);
-  check(19, true);
+  check(9, true);
 
   EventUtils.sendKey("PAGE_UP", window);
-  check(15, true);
+  check(7, true);
   EventUtils.sendKey("PAGE_UP", window);
-  check(11, true);
+  check(5, true);
+  EventUtils.sendKey("UP", window);
+  check(4, true);
   EventUtils.sendKey("UP", window);
-  check(10, true);
-  EventUtils.sendKey("UP", window);
+  check(3, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(5, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(7, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
   check(9, true);
   EventUtils.sendKey("PAGE_DOWN", window);
-  check(13, true);
-  EventUtils.sendKey("PAGE_DOWN", window);
-  check(17, true);
-  EventUtils.sendKey("PAGE_DOWN", window);
-  check(19, true);
-  EventUtils.sendKey("PAGE_DOWN", window);
-  check(19, true);
+  check(9, true);
 
   EventUtils.sendKey("HOME", window);
   check(0, true);
   EventUtils.sendKey("DOWN", window);
   check(1, true);
   EventUtils.sendKey("END", window);
-  check(19, true);
+  check(9, true);
   EventUtils.sendKey("DOWN", window);
-  check(19, true);
-
-  EventUtils.sendMouseEvent({ type: "mousedown" },
-    document.querySelector(".request-list-item"));
-  check(0, true);
+  check(9, true);
 
   yield teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_autoscroll.js
+++ b/devtools/client/netmonitor/test/browser_net_autoscroll.js
@@ -11,80 +11,96 @@ add_task(function* () {
 
   let { monitor } = yield initNetMonitor(INFINITE_GET_URL);
   let { document, gStore, windowRequire } = monitor.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
   // Wait until the first request makes the empty notice disappear
   yield waitForRequestListToAppear();
 
-  let requestsContainer = document.querySelector(".requests-list-contents");
+  let requestsContainer = document.querySelector(".ReactVirtualized__Table__Grid");
   ok(requestsContainer, "Container element exists as expected.");
 
   // (1) Check that the scroll position is maintained at the bottom
   // when the requests overflow the vertical size of the container.
   yield waitForRequestsToOverflowContainer();
+  yield waitForNetworkEvents(monitor, 8);
   yield waitForScroll();
   ok(true, "Scrolled to bottom on overflow.");
 
-  // (2) Now set the scroll position to the first item and check
+  // (2) Now set the scroll position to the top and check
   // that additional requests do not change the scroll position.
-  let firstNode = requestsContainer.firstChild;
-  firstNode.scrollIntoView();
-  yield waitSomeTime();
+  yield waitForScrollToTop();
+  yield waitForNetworkEvents(monitor, 3);
   ok(!scrolledToBottom(requestsContainer), "Not scrolled to bottom.");
   // save for comparison later
   let scrollTop = requestsContainer.scrollTop;
   yield waitForNetworkEvents(monitor, 8);
-  yield waitSomeTime();
   is(requestsContainer.scrollTop, scrollTop, "Did not scroll.");
 
   // (3) Now set the scroll position back at the bottom and check that
   // additional requests *do* cause the container to scroll down.
-  requestsContainer.scrollTop = requestsContainer.scrollHeight;
+  yield waitForScrollToBottom();
   ok(scrolledToBottom(requestsContainer), "Set scroll position to bottom.");
   yield waitForNetworkEvents(monitor, 8);
   yield waitForScroll();
   ok(true, "Still scrolled to bottom.");
 
   // (4) Now select an item in the list and check that additional requests
   // do not change the scroll position.
   gStore.dispatch(Actions.selectRequestByIndex(0));
   yield waitForNetworkEvents(monitor, 8);
-  yield waitSomeTime();
   is(requestsContainer.scrollTop, 0, "Did not scroll.");
 
   // Done: clean up.
   return teardown(monitor);
 
   function waitForRequestListToAppear() {
     info("Waiting until the empty notice disappears and is replaced with the list");
-    return waitUntil(() => !!document.querySelector(".requests-list-contents"));
+    return waitUntil(() =>
+      !!document.querySelector(".ReactVirtualized__Grid__innerScrollContainer"));
   }
 
   function* waitForRequestsToOverflowContainer() {
     info("Waiting for enough requests to overflow the container");
     while (true) {
       info("Waiting for one network request");
       yield waitForNetworkEvents(monitor, 1);
-      console.log(requestsContainer.scrollHeight);
-      console.log(requestsContainer.clientHeight);
       if (requestsContainer.scrollHeight > requestsContainer.clientHeight) {
         info("The list is long enough, returning");
         return;
       }
     }
   }
 
+  function* waitForScrollToTop() {
+    info("Waiting for the list to scroll to the top");
+    while (true) {
+      requestsContainer.scrollTop = 0;
+      yield wait(50);
+      if (requestsContainer.scrollTop === 0) {
+        info("The list has scrolled to the top");
+        return;
+      }
+    }
+  }
+
+  function* waitForScrollToBottom() {
+    info("Waiting for the list to scroll to the bottom");
+    while (true) {
+      requestsContainer.scrollTop = requestsContainer.scrollHeight;
+      yield wait(50);
+      if (scrolledToBottom(requestsContainer)) {
+        info("The list has scrolled to the bottom");
+        return;
+      }
+    }
+  }
+
   function scrolledToBottom(element) {
     return element.scrollTop + element.clientHeight >= element.scrollHeight;
   }
 
-  function waitSomeTime() {
-    // Wait to make sure no scrolls happen
-    return wait(50);
-  }
-
   function waitForScroll() {
     info("Waiting for the list to scroll to bottom");
     return waitUntil(() => scrolledToBottom(requestsContainer));
   }
 });

--- a/devtools/client/netmonitor/test/browser_net_cause.js
+++ b/devtools/client/netmonitor/test/browser_net_cause.js
@@ -140,17 +140,17 @@ add_task(function* () {
       }
     } else {
       is(stackLen, 0, `Request #${i} (${causeType}) has an empty stacktrace`);
     }
   });
 
   // Sort the requests by cause and check the order
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-cause-button"));
+    document.querySelector(".requests-list-cause"));
   let expectedOrder = EXPECTED_REQUESTS.map(r => r.causeType).sort();
   expectedOrder.forEach((expectedCause, i) => {
     const cause = getSortedRequests(gStore.getState()).get(i).cause.type;
     is(cause, expectedCause, `The request #${i} has the expected cause after sorting`);
   });
 
   yield teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_filter-02.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-02.js
@@ -165,41 +165,21 @@ add_task(function* () {
   testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   info("Testing html filtering.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-html-button"));
   testFilterButtons(monitor, "html");
   testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
-  info("Performing more requests.");
-  wait = waitForNetworkEvents(monitor, 9);
-  yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
-  yield wait;
-
-  info("Testing html filtering again.");
-  testFilterButtons(monitor, "html");
-  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
-
-  info("Performing more requests.");
-  wait = waitForNetworkEvents(monitor, 9);
-  yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
-  yield wait;
-
-  info("Testing html filtering again.");
-  testFilterButtons(monitor, "html");
-  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,
-                0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
-
   info("Resetting filters.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   testFilterButtons(monitor, "all");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-                1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   yield teardown(monitor);
 
   function getSelectedIndex(state) {
     if (!state.requests.selectedId) {
       return -1;
     }
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);

--- a/devtools/client/netmonitor/test/browser_net_filter-03.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-03.js
@@ -59,17 +59,17 @@ add_task(function* () {
   is(!!document.querySelector(".network-details-panel"), true,
     "The network details panel should be visible after toggle button was pressed.");
 
   testFilterButtons(monitor, "all");
   testContents([0, 1, 2, 3, 4, 5, 6], 7, 0);
 
   info("Sorting by size, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-size-button"));
+    document.querySelector(".requests-list-size"));
   testFilterButtons(monitor, "all");
   testContents([6, 4, 5, 0, 1, 2, 3], 7, 6);
 
   info("Testing html filtering.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-html-button"));
   testFilterButtons(monitor, "html");
   testContents([6, 4, 5, 0, 1, 2, 3], 1, 6);
@@ -93,19 +93,19 @@ add_task(function* () {
   testFilterButtons(monitor, "html");
   testContents([12, 13, 20, 14, 16, 18, 15, 17, 19, 0, 4, 8, 1, 5, 9, 2, 6, 10, 3, 7, 11],
     3, 20);
 
   yield teardown(monitor);
 
   function resetSorting() {
     EventUtils.sendMouseEvent({ type: "click" },
-      document.querySelector("#requests-list-waterfall-button"));
+      document.querySelector(".requests-list-waterfall"));
     EventUtils.sendMouseEvent({ type: "click" },
-      document.querySelector("#requests-list-size-button"));
+      document.querySelector(".requests-list-size"));
   }
 
   function getSelectedIndex(state) {
     if (!state.requests.selectedId) {
       return -1;
     }
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }

deleted file mode 100644
--- a/devtools/client/netmonitor/test/browser_net_icon-preview.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-/**
- * Tests if image responses show a thumbnail in the requests menu.
- */
-
-add_task(function* () {
-  let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
-  info("Starting test... ");
-
-  let { document, gStore, windowRequire, NetMonitorController } =
-    monitor.panelWin;
-  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
-  let { ACTIVITY_TYPE, EVENTS } = windowRequire("devtools/client/netmonitor/constants");
-
-  gStore.dispatch(Actions.batchEnable(false));
-
-  let wait = waitForEvents();
-  yield performRequests();
-  yield wait;
-
-  info("Checking the image thumbnail when all items are shown.");
-  checkImageThumbnail();
-
-  gStore.dispatch(Actions.sortBy("size"));
-  info("Checking the image thumbnail when all items are sorted.");
-  checkImageThumbnail();
-
-  gStore.dispatch(Actions.toggleRequestFilterType("images"));
-  info("Checking the image thumbnail when only images are shown.");
-  checkImageThumbnail();
-
-  info("Reloading the debuggee and performing all requests again...");
-  wait = waitForEvents();
-  yield reloadAndPerformRequests();
-  yield wait;
-
-  info("Checking the image thumbnail after a reload.");
-  checkImageThumbnail();
-
-  yield teardown(monitor);
-
-  function waitForEvents() {
-    return promise.all([
-      waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS),
-      monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED)
-    ]);
-  }
-
-  function performRequests() {
-    return ContentTask.spawn(tab.linkedBrowser, {}, function* () {
-      content.wrappedJSObject.performRequests();
-    });
-  }
-
-  function* reloadAndPerformRequests() {
-    yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
-    yield performRequests();
-  }
-
-  function checkImageThumbnail() {
-    is(document.querySelectorAll(".requests-list-icon[data-type=thumbnail]").length, 1,
-      "There should be only one image request with a thumbnail displayed.");
-    is(document.querySelector(".requests-list-icon[data-type=thumbnail]").src,
-      TEST_IMAGE_DATA_URI,
-      "The image requests-list-icon thumbnail is displayed correctly.");
-    is(document.querySelector(".requests-list-icon[data-type=thumbnail]").hidden, false,
-      "The image requests-list-icon thumbnail should not be hidden.");
-  }
-});

deleted file mode 100644
--- a/devtools/client/netmonitor/test/browser_net_image-tooltip.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-const IMAGE_TOOLTIP_URL = EXAMPLE_URL + "html_image-tooltip-test-page.html";
-const IMAGE_TOOLTIP_REQUESTS = 1;
-
-/**
- * Tests if image responses show a popup in the requests menu when hovered.
- */
-add_task(function* test() {
-  let { tab, monitor } = yield initNetMonitor(IMAGE_TOOLTIP_URL);
-  info("Starting test... ");
-
-  let { document, gStore, windowRequire, NetMonitorController } = monitor.panelWin;
-  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
-  let { ACTIVITY_TYPE, EVENTS } = windowRequire("devtools/client/netmonitor/constants");
-  let toolboxDoc = monitor.panelWin.parent.document;
-
-  gStore.dispatch(Actions.batchEnable(false));
-
-  let onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS);
-  let onThumbnail = monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
-  yield performRequests();
-  yield onEvents;
-  yield onThumbnail;
-
-  info("Checking the image thumbnail after a few requests were made...");
-  yield showTooltipAndVerify(document.querySelectorAll(".request-list-item")[0]);
-
-  // Hide tooltip before next test, to avoid the situation that tooltip covers
-  // the icon for the request of the next test.
-  info("Checking the image thumbnail gets hidden...");
-  yield hideTooltipAndVerify(document.querySelectorAll(".request-list-item")[0]);
-
-  // +1 extra document reload
-  onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS + 1);
-  onThumbnail = monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
-
-  info("Reloading the debuggee and performing all requests again...");
-  yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
-  yield performRequests();
-  yield onEvents;
-  yield onThumbnail;
-
-  info("Checking the image thumbnail after a reload.");
-  yield showTooltipAndVerify(document.querySelectorAll(".request-list-item")[1]);
-
-  info("Checking if the image thumbnail is hidden when mouse leaves the menu widget");
-  let requestsListContents = document.querySelector(".requests-list-contents");
-  EventUtils.synthesizeMouse(requestsListContents, 0, 0, { type: "mouseout" },
-                             monitor.panelWin);
-  yield waitUntil(() => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible"));
-
-  yield teardown(monitor);
-
-  function performRequests() {
-    return ContentTask.spawn(tab.linkedBrowser, {}, function* () {
-      content.wrappedJSObject.performRequests();
-    });
-  }
-
-  /**
-   * Show a tooltip on the {target} and verify that it was displayed
-   * with the expected content.
-   */
-  function* showTooltipAndVerify(target) {
-    let anchor = target.querySelector(".requests-list-file");
-    yield showTooltipOn(anchor);
-
-    info("Tooltip was successfully opened for the image request.");
-    is(toolboxDoc.querySelector(".tooltip-panel img").src, TEST_IMAGE_DATA_URI,
-      "The tooltip's image content is displayed correctly.");
-  }
-
-  /**
-   * Trigger a tooltip over an element by sending mousemove event.
-   * @return a promise that resolves when the tooltip is shown
-   */
-  function* showTooltipOn(element) {
-    let win = element.ownerDocument.defaultView;
-    EventUtils.synthesizeMouseAtCenter(element, { type: "mousemove" }, win);
-    yield waitUntil(() => toolboxDoc.querySelector(".tooltip-panel img"));
-  }
-
-  /**
-   * Hide a tooltip on the {target} and verify that it was closed.
-   */
-  function* hideTooltipAndVerify(target) {
-    // Hovering over the "method" column hides the tooltip.
-    let anchor = target.querySelector(".requests-list-method");
-    let win = anchor.ownerDocument.defaultView;
-    EventUtils.synthesizeMouseAtCenter(anchor, { type: "mousemove" }, win);
-
-    yield waitUntil(
-      () => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible"));
-    info("Tooltip was successfully closed.");
-  }
-});

--- a/devtools/client/netmonitor/test/browser_net_security-icon-click.js
+++ b/devtools/client/netmonitor/test/browser_net_security-icon-click.js
@@ -23,34 +23,34 @@ add_task(function* () {
   yield clickAndTestSecurityIcon();
 
   info("Selecting headers panel again.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#headers-tab"));
 
   info("Sorting the items by filename.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-file-button"));
+    document.querySelector(".requests-list-file"));
 
   info("Testing that security icon can be clicked after the items were sorted.");
 
   yield clickAndTestSecurityIcon();
 
   return teardown(monitor);
 
   function* performRequestAndWait(url) {
     let wait = waitForNetworkEvents(monitor, 1);
     yield ContentTask.spawn(tab.linkedBrowser, { url }, function* (args) {
       content.wrappedJSObject.performRequests(1, args.url);
     });
     return wait;
   }
 
   function* clickAndTestSecurityIcon() {
-    let icon = document.querySelector(".requests-security-state-icon");
+    let icon = document.querySelector(".requests-list-domain-icon");
 
     info("Clicking security icon of the first request and waiting for panel update.");
     EventUtils.synthesizeMouseAtCenter(icon, {}, monitor.panelWin);
 
     ok(document.querySelector("#security-tab[aria-selected=true]"),
        "Security tab is selected.");
   }
 });

--- a/devtools/client/netmonitor/test/browser_net_security-redirect.js
+++ b/devtools/client/netmonitor/test/browser_net_security-redirect.js
@@ -22,17 +22,17 @@ add_task(function* () {
   yield wait;
 
   is(gStore.getState().requests.requests.size, 2,
      "There were two requests due to redirect.");
 
   let [
     initialSecurityIcon,
     redirectSecurityIcon,
-  ] = document.querySelectorAll(".requests-security-state-icon");
+  ] = document.querySelectorAll(".requests-list-domain-icon");
 
   ok(initialSecurityIcon.classList.contains("security-state-insecure"),
      "Initial request was marked insecure.");
 
   ok(redirectSecurityIcon.classList.contains("security-state-secure"),
      "Redirected request was marked secure.");
 
   yield teardown(monitor);

--- a/devtools/client/netmonitor/test/browser_net_simple-request-data.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request-data.js
@@ -111,17 +111,17 @@ function test() {
       );
     });
 
     monitor.panelWin.once(EVENTS.RECEIVED_REQUEST_COOKIES, () => {
       let requestItem = getSortedRequests(gStore.getState()).get(0);
 
       ok(requestItem.requestCookies,
         "There should be a requestCookies data available.");
-      is(requestItem.requestCookies.cookies.length, 2,
+      is(requestItem.requestCookies.length, 2,
         "The requestCookies data has an incorrect |cookies| property.");
 
       verifyRequestItemTarget(
         document,
         getDisplayedRequests(gStore.getState()),
         requestItem,
         "GET",
         SIMPLE_SJS
@@ -151,17 +151,17 @@ function test() {
       );
     });
 
     monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_COOKIES, () => {
       let requestItem = getSortedRequests(gStore.getState()).get(0);
 
       ok(requestItem.responseCookies,
         "There should be a responseCookies data available.");
-      is(requestItem.responseCookies.cookies.length, 2,
+      is(requestItem.responseCookies.length, 2,
         "The responseCookies data has an incorrect |cookies| property.");
 
       verifyRequestItemTarget(
         document,
         getDisplayedRequests(gStore.getState()),
         requestItem,
         "GET",
         SIMPLE_SJS

--- a/devtools/client/netmonitor/test/browser_net_sort-01.js
+++ b/devtools/client/netmonitor/test/browser_net_sort-01.js
@@ -61,65 +61,65 @@ add_task(function* () {
   is(!!document.querySelector(".network-details-panel"), true,
     "The network details panel should be visible after toggle button was pressed.");
 
   testHeaders();
   testContents([0, 2, 4, 3, 1], 0);
 
   info("Testing status sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector(".requests-list-status"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4], 0);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 5);
   yield performRequestsInContent(requests);
   yield wait;
 
   info("Testing status sort again, ascending.");
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0);
 
   info("Testing status sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector(".requests-list-status"));
   testHeaders("status", "descending");
   testContents([9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 9);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 5);
   yield performRequestsInContent(requests);
   yield wait;
 
   info("Testing status sort again, descending.");
   testHeaders("status", "descending");
   testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
 
   info("Testing status sort yet again, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector(".requests-list-status"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 0);
 
   info("Testing status sort yet again, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector(".requests-list-status"));
   testHeaders("status", "descending");
   testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
 
   return teardown(monitor);
 
   function testHeaders(sortType, direction) {
     let doc = monitor.panelWin.document;
-    let target = doc.querySelector("#requests-list-" + sortType + "-button");
-    let headers = doc.querySelectorAll(".requests-list-header-button");
+    let target = doc.querySelector(".requests-list-" + sortType);
+    let headers = doc.querySelectorAll(".requests-list-header");
 
     for (let header of headers) {
-      if (header != target) {
+      if (header !== target) {
         ok(!header.hasAttribute("data-sorted"),
           "The " + header.id + " header does not have a 'data-sorted' attribute.");
         ok(!header.getAttribute("title"),
           "The " + header.id + " header does not have a 'title' attribute.");
       } else {
         is(header.getAttribute("data-sorted"), direction,
           "The " + header.id + " header has a correct 'data-sorted' attribute.");
         is(header.getAttribute("title"), direction == "ascending"

--- a/devtools/client/netmonitor/test/browser_net_sort-02.js
+++ b/devtools/client/netmonitor/test/browser_net_sort-02.js
@@ -61,164 +61,164 @@ add_task(function* () {
   is(!!document.querySelector(".network-details-panel"), true,
     "The network details panel should be visible after toggle button was pressed.");
 
   testHeaders();
   testContents([0, 2, 4, 3, 1]);
 
   info("Testing status sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector(".requests-list-status"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing status sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector(".requests-list-status"));
   testHeaders("status", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing status sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector(".requests-list-status"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing method sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-method-button"));
+    document.querySelector(".requests-list-method"));
   testHeaders("method", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing method sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-method-button"));
+    document.querySelector(".requests-list-method"));
   testHeaders("method", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing method sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-method-button"));
+    document.querySelector(".requests-list-method"));
   testHeaders("method", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing file sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-file-button"));
+    document.querySelector(".requests-list-file"));
   testHeaders("file", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing file sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-file-button"));
+    document.querySelector(".requests-list-file"));
   testHeaders("file", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing file sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-file-button"));
+    document.querySelector(".requests-list-file"));
   testHeaders("file", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing type sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-type-button"));
+    document.querySelector(".requests-list-type"));
   testHeaders("type", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing type sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-type-button"));
+    document.querySelector(".requests-list-type"));
   testHeaders("type", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing type sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-type-button"));
+    document.querySelector(".requests-list-type"));
   testHeaders("type", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing transferred sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-transferred-button"));
+    document.querySelector(".requests-list-transferred"));
   testHeaders("transferred", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing transferred sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-transferred-button"));
+    document.querySelector(".requests-list-transferred"));
   testHeaders("transferred", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing transferred sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-transferred-button"));
+    document.querySelector(".requests-list-transferred"));
   testHeaders("transferred", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing size sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-size-button"));
+    document.querySelector(".requests-list-size"));
   testHeaders("size", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing size sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-size-button"));
+    document.querySelector(".requests-list-size"));
   testHeaders("size", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing size sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-size-button"));
+    document.querySelector(".requests-list-size"));
   testHeaders("size", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing waterfall sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-waterfall-button"));
+    document.querySelector(".requests-list-waterfall"));
   testHeaders("waterfall", "ascending");
   testContents([0, 2, 4, 3, 1]);
 
   info("Testing waterfall sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-waterfall-button"));
+    document.querySelector(".requests-list-waterfall"));
   testHeaders("waterfall", "descending");
   testContents([4, 2, 0, 1, 3]);
 
   info("Testing waterfall sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-waterfall-button"));
+    document.querySelector(".requests-list-waterfall"));
   testHeaders("waterfall", "ascending");
   testContents([0, 2, 4, 3, 1]);
 
   return teardown(monitor);
 
   function getSelectedIndex(state) {
     if (!state.requests.selectedId) {
       return -1;
     }
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }
 
   function testHeaders(sortType, direction) {
     let doc = monitor.panelWin.document;
-    let target = doc.querySelector("#requests-list-" + sortType + "-button");
-    let headers = doc.querySelectorAll(".requests-list-header-button");
+    let target = doc.querySelector(".requests-list-" + sortType);
+    let headers = doc.querySelectorAll(".requests-list-header");
 
     for (let header of headers) {
-      if (header != target) {
+      if (header !== target) {
         ok(!header.hasAttribute("data-sorted"),
           "The " + header.id + " header does not have a 'data-sorted' attribute.");
         ok(!header.getAttribute("title"),
           "The " + header.id + " header does not have a 'title' attribute.");
       } else {
         is(header.getAttribute("data-sorted"), direction,
           "The " + header.id + " header has a correct 'data-sorted' attribute.");
-        is(header.getAttribute("title"), direction == "ascending"
+        is(header.getAttribute("title"), direction === "ascending"
           ? L10N.getStr("networkMenu.sortedAsc")
           : L10N.getStr("networkMenu.sortedDesc"),
           "The " + header.id + " header has a correct 'title' attribute.");
       }
     }
   }
 
   function testContents([a, b, c, d, e]) {

--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -282,76 +282,75 @@ function verifyRequestItemTarget(documen
     is(requestItem.method, method, "The attached method is correct.");
     is(requestItem.url, url, "The attached url is correct.");
   }
 
   is(target.querySelector(".requests-list-method").textContent,
     method, "The displayed method is correct.");
 
   if (fuzzyUrl) {
-    ok(target.querySelector(".requests-list-file").textContent.startsWith(
-      name + (query ? "?" + query : "")), "The displayed file is correct.");
-    ok(target.querySelector(".requests-list-file").getAttribute("title")
-                                                  .startsWith(unicodeUrl),
-      "The tooltip file is correct.");
+    ok(target.querySelector(".requests-list-url").textContent.startsWith(
+      name + (query ? "?" + query : "")), "The displayed url is correct.");
+    ok(target.querySelector(".requests-list-url").getAttribute("title")
+      .startsWith(unicodeUrl), "The tooltip url is correct.");
   } else {
-    is(target.querySelector(".requests-list-file").textContent,
-      name + (query ? "?" + query : ""), "The displayed file is correct.");
-    is(target.querySelector(".requests-list-file").getAttribute("title"),
-      unicodeUrl, "The tooltip file is correct.");
+    is(target.querySelector(".requests-list-url").textContent,
+      name + (query ? "?" + query : ""), "The displayed url is correct.");
+    is(target.querySelector(".requests-list-url").getAttribute("title"),
+      unicodeUrl, "The tooltip url is correct.");
   }
 
   is(target.querySelector(".requests-list-domain").textContent,
     hostPort, "The displayed domain is correct.");
 
   let domainTooltip = hostPort + (remoteAddress ? " (" + remoteAddress + ")" : "");
-  is(target.querySelector(".requests-list-domain").getAttribute("title"),
+  is(target.querySelector(".requests-list-domain-url").getAttribute("title"),
     domainTooltip, "The tooltip domain is correct.");
 
   if (status !== undefined) {
     let value = target.querySelector(".requests-list-status-icon")
                       .getAttribute("data-code");
     let codeValue = target.querySelector(".requests-list-status-code").textContent;
-    let tooltip = target.querySelector(".requests-list-status").getAttribute("title");
+    let tooltip = target.querySelector(".requests-list-status div").getAttribute("title");
     info("Displayed status: " + value);
     info("Displayed code: " + codeValue);
     info("Tooltip status: " + tooltip);
     is(value, displayedStatus ? displayedStatus : status,
       "The displayed status is correct.");
     is(codeValue, status, "The displayed status code is correct.");
     is(tooltip, status + " " + statusText, "The tooltip status is correct.");
   }
   if (cause !== undefined) {
-    let value = target.querySelector(".requests-list-cause > .subitem-label").textContent;
-    let tooltip = target.querySelector(".requests-list-cause").getAttribute("title");
+    let value = target.querySelector(".requests-list-cause .subitem-label").textContent;
+    let tooltip = target.querySelector(".requests-list-cause div").getAttribute("title");
     info("Displayed cause: " + value);
     info("Tooltip cause: " + tooltip);
     is(value, cause.type, "The displayed cause is correct.");
     is(tooltip, cause.loadingDocumentUri, "The tooltip cause is correct.");
   }
   if (type !== undefined) {
     let value = target.querySelector(".requests-list-type").textContent;
-    let tooltip = target.querySelector(".requests-list-type").getAttribute("title");
+    let tooltip = target.querySelector(".requests-list-type div").getAttribute("title");
     info("Displayed type: " + value);
     info("Tooltip type: " + tooltip);
     is(value, type, "The displayed type is correct.");
     is(tooltip, fullMimeType, "The tooltip type is correct.");
   }
   if (transferred !== undefined) {
     let value = target.querySelector(".requests-list-transferred").textContent;
-    let tooltip = target.querySelector(".requests-list-transferred")
+    let tooltip = target.querySelector(".requests-list-transferred div")
                         .getAttribute("title");
     info("Displayed transferred size: " + value);
     info("Tooltip transferred size: " + tooltip);
     is(value, transferred, "The displayed transferred size is correct.");
     is(tooltip, transferred, "The tooltip transferred size is correct.");
   }
   if (size !== undefined) {
-    let value = target.querySelector(".requests-list-size").textContent;
-    let tooltip = target.querySelector(".requests-list-size").getAttribute("title");
+    let value = target.querySelector(".requests-list-size div").textContent;
+    let tooltip = target.querySelector(".requests-list-size div").getAttribute("title");
     info("Displayed size: " + value);
     info("Tooltip size: " + tooltip);
     is(value, size, "The displayed size is correct.");
     is(tooltip, size, "The tooltip size is correct.");
   }
   if (time !== undefined) {
     let value = target.querySelector(".requests-list-timings-total").textContent;
     let tooltip = target.querySelector(".requests-list-timings-total")

deleted file mode 100644
--- a/devtools/client/netmonitor/test/html_image-tooltip-test-page.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/ -->
-<!doctype html>
-
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-    <meta http-equiv="Pragma" content="no-cache" />
-    <meta http-equiv="Expires" content="0" />
-    <title>Network Monitor test page</title>
-  </head>
-
-  <body>
-    <p>tooltip test</p>
-
-    <script type="text/javascript">
-      /* exported performRequests */
-      "use strict";
-
-      function performRequests() {
-        let xhr = new XMLHttpRequest();
-        xhr.open("GET", "test-image.png?v=" + Math.random(), true);
-        xhr.send(null);
-      }
-    </script>
-  </body>
-
-</html>