Bug 1308441 - Fix test cases r?honza draft
authorRicky Chien <ricky060709@gmail.com>
Mon, 27 Feb 2017 11:00:56 +0800
changeset 489891 a62312e18beda5cbb0b3330891a2b6892682e8ef
parent 489890 52c2436447b93f01d59bec31b1ad1befe9f3dd91
child 547109 a292f2874dbb1ba410f10e78fd9614b50e631dea
push id46936
push userbmo:rchien@mozilla.com
push dateMon, 27 Feb 2017 03:01:38 +0000
reviewershonza
bugs1308441
milestone54.0a1
Bug 1308441 - Fix test cases r?honza MozReview-Commit-ID: FtJv3V9kPro
devtools/client/netmonitor/test/browser_net_accessibility-01.js
devtools/client/netmonitor/test/browser_net_accessibility-02.js
devtools/client/netmonitor/test/browser_net_autoscroll.js
devtools/client/netmonitor/test/browser_net_cause.js
devtools/client/netmonitor/test/browser_net_filter-02.js
devtools/client/netmonitor/test/browser_net_filter-03.js
devtools/client/netmonitor/test/browser_net_image-tooltip.js
devtools/client/netmonitor/test/browser_net_security-icon-click.js
devtools/client/netmonitor/test/browser_net_security-redirect.js
devtools/client/netmonitor/test/browser_net_simple-request-data.js
devtools/client/netmonitor/test/browser_net_simple-request.js
devtools/client/netmonitor/test/browser_net_sort-01.js
devtools/client/netmonitor/test/browser_net_sort-02.js
devtools/client/netmonitor/test/head.js
--- a/devtools/client/netmonitor/test/browser_net_accessibility-01.js
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-01.js
@@ -48,36 +48,36 @@ add_task(function* () {
   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
@@ -31,17 +31,17 @@ add_task(function* () {
   }
 
   let wait = waitForNetworkEvents(monitor, 2);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests(2);
   });
   yield wait;
 
-  document.querySelector(".requests-list-contents").focus();
+  document.querySelector(".ReactVirtualized__Table__Grid").focus();
 
   check(-1, false);
 
   EventUtils.sendKey("DOWN", window);
   check(0, true);
   EventUtils.sendKey("UP", window);
   check(0, true);
 
@@ -50,82 +50,82 @@ add_task(function* () {
   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);
+  check(9, true);
 
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelector(".request-list-item"));
   check(0, true);
 
   yield teardown(monitor);
 });
--- a/devtools/client/netmonitor/test/browser_net_autoscroll.js
+++ b/devtools/client/netmonitor/test/browser_net_autoscroll.js
@@ -11,29 +11,29 @@ 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();
+  requestsContainer.scrollTop = 0;
   yield waitSomeTime();
   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.");
 
@@ -52,26 +52,24 @@ add_task(function* () {
   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 scrolledToBottom(element) {
@@ -82,9 +80,9 @@ add_task(function* () {
     // 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));
   }
-});
+});
\ No newline at end of file
--- 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);
   }
--- a/devtools/client/netmonitor/test/browser_net_image-tooltip.js
+++ b/devtools/client/netmonitor/test/browser_net_image-tooltip.js
@@ -15,91 +15,89 @@ add_task(function* 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 {
     getDisplayedRequests,
     getSortedRequests,
   } = windowRequire("devtools/client/netmonitor/selectors/index");
-  let toolboxDoc = monitor.toolbox.doc;
 
   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(toolboxDoc,
-    document.querySelectorAll(".request-list-item")[0]);
+  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(monitor.toolbox.doc,
-    document.querySelectorAll(".request-list-item")[0]);
+  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(toolboxDoc,
-    document.querySelectorAll(".request-list-item")[1]);
+  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");
+  let requestsListContents = document.querySelector(".request-list-container");
   EventUtils.synthesizeMouse(requestsListContents, 0, 0, { type: "mouseout" }, monitor.panelWin);
-  yield waitUntil(() => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible"));
+  yield waitUntil(() => !document.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(toolboxDoc, target) {
+  function* showTooltipAndVerify(target) {
     let anchor = target.querySelector(".requests-list-file");
-    yield showTooltipOn(toolboxDoc, anchor);
+    yield showTooltipOn(anchor);
 
     info("Tooltip was successfully opened for the image request.");
-    is(toolboxDoc.querySelector(".tooltip-panel img").src, TEST_IMAGE_DATA_URI,
+    is(document.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(toolboxDoc, element) {
+  function* showTooltipOn(element) {
     let win = element.ownerDocument.defaultView;
     EventUtils.synthesizeMouseAtCenter(element, { type: "mousemove" }, win);
-    yield waitUntil(() => toolboxDoc.querySelector(".tooltip-panel img"));
+    console.log(123)
+    yield waitUntil(() => document.querySelector(".tooltip-panel img"));
+    console.log(123)
   }
 
   /**
    * Hide a tooltip on the {target} and verify that it was closed.
    */
-  function* hideTooltipAndVerify(toolboxDoc, target) {
+  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"));
+    yield waitUntil(() => !document.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
@@ -27,33 +27,33 @@ 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-subitem .requests-domain");
 
     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
@@ -25,18 +25,18 @@ add_task(function* () {
   });
   yield wait;
 
   is(gStore.getState().requests.requests.size, 2, "There were two requests due to redirect.");
 
   let initial = getSortedRequests(gStore.getState()).get(0);
   let redirect = getSortedRequests(gStore.getState()).get(1);
 
-  let initialSecurityIcon = document.querySelectorAll(".requests-security-state-icon")[0];
-  let redirectSecurityIcon = document.querySelectorAll(".requests-security-state-icon")[1];
+  let initialSecurityIcon = document.querySelectorAll(".requests-domain")[0];
+  let redirectSecurityIcon = document.querySelectorAll(".requests-domain")[1];
 
   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_simple-request.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request.js
@@ -24,53 +24,53 @@ add_task(function* () {
     getSortedRequests,
   } = windowRequire("devtools/client/netmonitor/selectors/index");
 
   gStore.dispatch(Actions.batchEnable(false));
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     true,
     "The pane toggle button should be disabled when the frontend is opened.");
-  ok(document.querySelector(".requests-list-empty-notice"),
+  ok(document.querySelector(".request-list-empty-notice"),
     "An empty notice should be displayed when the frontend is opened.");
   is(gStore.getState().requests.requests.size, 0,
     "The requests menu should be empty when the frontend is opened.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should be hidden when the frontend is opened.");
 
   yield reloadAndWait();
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     false,
     "The pane toggle button should be enabled after the first request.");
-  ok(!document.querySelector(".requests-list-empty-notice"),
+  ok(!document.querySelector(".request-list-empty-notice"),
     "The empty notice should be hidden after the first request.");
   is(gStore.getState().requests.requests.size, 1,
     "The requests menu should not be empty after the first request.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should still be hidden after the first request.");
 
   yield reloadAndWait();
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     false,
     "The pane toggle button should be still be enabled after a reload.");
-  ok(!document.querySelector(".requests-list-empty-notice"),
+  ok(!document.querySelector(".request-list-empty-notice"),
     "The empty notice should be still hidden after a reload.");
   is(gStore.getState().requests.requests.size, 1,
     "The requests menu should not be empty after a reload.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should still be hidden after a reload.");
 
   gStore.dispatch(Actions.clearRequests());
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     true,
     "The pane toggle button should be disabled when after clear.");
-  ok(document.querySelector(".requests-list-empty-notice"),
+  ok(document.querySelector(".request-list-empty-notice"),
     "An empty notice should be displayed again after clear.");
   is(gStore.getState().requests.requests.size, 0,
     "The requests menu should be empty after clear.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should still be hidden after clear.");
 
   return teardown(monitor);
 
--- 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
@@ -274,25 +274,25 @@ function verifyRequestItemTarget(documen
     is(requestItem.method, aMethod, "The attached method is correct.");
     is(requestItem.url, aUrl, "The attached url is correct.");
   }
 
   is(target.querySelector(".requests-list-method").textContent,
     aMethod, "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"),
     domainTooltip, "The tooltip domain is correct.");
@@ -382,17 +382,17 @@ function waitFor(subject, eventName) {
  *
  * @param string filterType
  *        The type of the filter that should be the only one checked.
  */
 function testFilterButtons(monitor, filterType) {
   let doc = monitor.panelWin.document;
   let target = doc.querySelector(".requests-list-filter-" + filterType + "-button");
   ok(target, `Filter button '${filterType}' was found`);
-  let buttons = [...doc.querySelectorAll("#requests-list-filter-buttons button")];
+  let buttons = [...doc.querySelectorAll(".requests-list-filter-buttons button")];
   ok(buttons.length > 0, "More than zero filter buttons were found");
 
   // Only target should be checked.
   let checkStatus = buttons.map(button => button == target ? 1 : 0);
   testFilterButtonsCustom(monitor, checkStatus);
 }
 
 /**
@@ -400,17 +400,17 @@ function testFilterButtons(monitor, filt
  *
  * @param array aIsChecked
  *        An array specifying if a button at given index should have a
  *        'checked' attribute. For example, if the third item of the array
  *        evaluates to true, the third button should be checked.
  */
 function testFilterButtonsCustom(aMonitor, aIsChecked) {
   let doc = aMonitor.panelWin.document;
-  let buttons = doc.querySelectorAll("#requests-list-filter-buttons button");
+  let buttons = doc.querySelectorAll(".requests-list-filter-buttons button");
   for (let i = 0; i < aIsChecked.length; i++) {
     let button = buttons[i];
     if (aIsChecked[i]) {
       is(button.classList.contains("checked"), true,
         "The " + button.id + " button should have a 'checked' class.");
       is(button.getAttribute("aria-pressed"), "true",
         "The " + button.id + " button should set 'aria-pressed' = true.");
     } else {