Bug 1407561 - Lazy loading of tooltip text when user hovers the status column. r=gasolin

MozReview-Commit-ID: BXP8B10Q5LT

--HG--
extra : rebase_source : deb0d079fdc41c5d3a28cb1b28e448fa6dd3c2b4

devtools/client/netmonitor/src/components/RequestListColumnStatus.js

@@ -33,8 +33,9 @@ class RequestListColumnStatus extends Component {
   }
 
   render() {
-    let { fromCache, fromServiceWorker, status, statusText } = this.props.item;
-    let code, title;
+    let { item } = this.props;
+    let { fromCache, fromServiceWorker, status, statusText } = item;
+    let code;
 
     if (status) {
       if (fromCache) {
@@ -44,31 +45,41 @@ class RequestListColumnStatus extends Component {
       } else {
         code = status;
       }
-
-      if (statusText) {
-        if (fromCache && fromServiceWorker) {
-          title = L10N.getFormatStr("netmonitor.status.tooltip.cachedworker",
-            status, statusText);
-        } else if (fromCache) {
-          title = L10N.getFormatStr("netmonitor.status.tooltip.cached",
-            status, statusText);
-        } else if (fromServiceWorker) {
-          title = L10N.getFormatStr("netmonitor.status.tooltip.worker",
-            status, statusText);
-        } else {
-          title = L10N.getFormatStr("netmonitor.status.tooltip.simple",
-            status, statusText);
-        }
-      }
     }
 
     return (
-      div({ className: "requests-list-column requests-list-status", title },
-        div({ className: "requests-list-status-icon", "data-code": code }),
+      div({
+        className: "requests-list-column requests-list-status",
+        onMouseOver: function ({ target }) {
+          if (status && statusText && !target.title) {
+            target.title = getColumnTitle(item);
+          }
+        },
+      },
+      div({ className: "requests-list-status-icon", "data-code": code }),
         div({ className: "requests-list-status-code" }, status)
       )
     );
   }
 }
 
+function getColumnTitle(item) {
+  let { fromCache, fromServiceWorker, status, statusText } = item;
+  let title;
+  if (fromCache && fromServiceWorker) {
+    title = L10N.getFormatStr("netmonitor.status.tooltip.cachedworker",
+      status, statusText);
+  } else if (fromCache) {
+    title = L10N.getFormatStr("netmonitor.status.tooltip.cached",
+      status, statusText);
+  } else if (fromServiceWorker) {
+    title = L10N.getFormatStr("netmonitor.status.tooltip.worker",
+      status, statusText);
+  } else {
+    title = L10N.getFormatStr("netmonitor.status.tooltip.simple",
+      status, statusText);
+  }
+  return title;
+}
+
 module.exports = RequestListColumnStatus;

devtools/client/netmonitor/test/browser_net_brotli.js

@@ -31,6 +31,11 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItem = document.querySelector(".request-list-item");
+  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+  yield waitUntil(() => requestsListStatus.title);
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_cached-status.js

@@ -96,6 +96,12 @@ add_task(function* () {
 
   let index = 0;
   for (let request of REQUEST_DATA) {
+    let requestItem = document.querySelectorAll(".request-list-item")[index];
+    requestItem.scrollIntoView();
+    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+    yield waitUntil(() => requestsListStatus.title);
+
     info("Verifying request #" + index);
     yield verifyRequestItemTarget(
       document,

devtools/client/netmonitor/test/browser_net_content-type.js

@@ -27,6 +27,13 @@ add_task(function* () {
   });
   yield wait;
 
+  for (let requestItem of document.querySelectorAll(".request-list-item")) {
+    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    requestItem.scrollIntoView();
+    EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+    yield waitUntil(() => requestsListStatus.title);
+  }
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_cyrillic-01.js

@@ -26,6 +26,12 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItem = document.querySelectorAll(".request-list-item")[0];
+  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  requestItem.scrollIntoView();
+  EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+  yield waitUntil(() => requestsListStatus.title);
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_cyrillic-02.js

@@ -22,6 +22,12 @@ add_task(function* () {
   tab.linkedBrowser.reload();
   yield wait;
 
+  let requestItem = document.querySelectorAll(".request-list-item")[0];
+  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  requestItem.scrollIntoView();
+  EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+  yield waitUntil(() => requestsListStatus.title);
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_filter-01.js

@@ -163,12 +163,12 @@ add_task(function* () {
 
   // First test with single filters...
   testFilterButtons(monitor, "all");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-html-button"));
   testFilterButtons(monitor, "html");
-  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Reset filters
   EventUtils.sendMouseEvent({ type: "click" },
@@ -176,86 +176,86 @@ add_task(function* () {
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-css-button"));
   testFilterButtons(monitor, "css");
-  testContents([0, 1, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 1, 0, 0, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-js-button"));
   testFilterButtons(monitor, "js");
-  testContents([0, 0, 1, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 1, 0, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-xhr-button"));
   testFilterButtons(monitor, "xhr");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 0]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
      document.querySelector(".requests-list-filter-fonts-button"));
   testFilterButtons(monitor, "fonts");
-  testContents([0, 0, 0, 1, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 1, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-images-button"));
   testFilterButtons(monitor, "images");
-  testContents([0, 0, 0, 0, 1, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 1, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-media-button"));
   testFilterButtons(monitor, "media");
-  testContents([0, 0, 0, 0, 0, 1, 1, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 1, 1, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-flash-button"));
   testFilterButtons(monitor, "flash");
-  testContents([0, 0, 0, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 1, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-ws-button"));
   testFilterButtons(monitor, "ws");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 1]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 1]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
 
   testFilterButtons(monitor, "all");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   // Text in filter box that matches nothing should hide all.
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   setFreetextFilter("foobar");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Text in filter box that matches should filter out everything else.
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   setFreetextFilter("sample");
-  testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
+  yield testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
 
   // Text in filter box that matches should filter out everything else.
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   setFreetextFilter("SAMPLE");
-  testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
+  yield testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
 
   // Test negative filtering (only show unmatched items)
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   setFreetextFilter("-sample");
-  testContents([0, 0, 0, 1, 1, 1, 1, 1, 1]);
+  yield testContents([0, 0, 0, 1, 1, 1, 1, 1, 1]);
 
   // ...then combine multiple filters together.
 
@@ -266,18 +266,18 @@ add_task(function* () {
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-css-button"));
   testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
-  testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
 
   // Html and css filter enabled and text filter should show just the html and css match.
   // Should not show both the items matching the button plus the items matching the text.
   setFreetextFilter("sample");
-  testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-flash-button"));
   setFreetextFilter("");
   testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0]);
-  testContents([1, 1, 0, 0, 0, 0, 0, 1, 0]);
+  yield testContents([1, 1, 0, 0, 0, 0, 0, 1, 0]);
 
   // Disable some filters. Only one left active.
   EventUtils.sendMouseEvent({ type: "click" },
@@ -285,13 +285,13 @@ add_task(function* () {
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-flash-button"));
   testFilterButtons(monitor, "html");
-  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Disable last active filter. Should toggle to all.
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-html-button"));
   testFilterButtons(monitor, "all");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   // Enable few filters and click on all. Only "all" should be checked.
   EventUtils.sendMouseEvent({ type: "click" },
@@ -304,7 +304,7 @@ add_task(function* () {
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".requests-list-filter-all-button"));
   testFilterButtons(monitor, "all");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   yield teardown(monitor);
 
@@ -315,7 +315,15 @@ add_task(function* () {
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }
 
-  function testContents(visibility) {
+  function* testContents(visibility) {
+    let requestItems = document.querySelectorAll(".request-list-item");
+    for (let requestItem of requestItems) {
+      requestItem.scrollIntoView();
+      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+      yield waitUntil(() => requestsListStatus.title);
+    }
+
     isnot(getSelectedRequest(store.getState()), undefined,
       "There should still be a selected item after filtering.");
     is(getSelectedIndex(store.getState()), 0,

devtools/client/netmonitor/test/browser_net_filter-02.js

@@ -162,13 +162,13 @@ add_task(function* () {
     "The network details panel should be visible after toggle button was pressed.");
 
   testFilterButtons(monitor, "all");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield 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]);
+  yield testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 9);
@@ -177,7 +177,7 @@ add_task(function* () {
 
   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]);
+  yield 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);
@@ -186,15 +186,15 @@ add_task(function* () {
 
   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]);
+  yield 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]);
+  yield 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]);
 
   yield teardown(monitor);
 
@@ -205,7 +205,16 @@ add_task(function* () {
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }
 
-  function testContents(visibility) {
+  function* testContents(visibility) {
+    let requestItems = document.querySelectorAll(".request-list-item");
+    for (let requestItem of requestItems) {
+      requestItem.scrollIntoView();
+      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      EventUtils.synthesizeMouse(requestsListStatus, 0, 0, { type: "mousemove" },
+        monitor.panelWin);
+      yield waitUntil(() => requestsListStatus.title != null);
+    }
+
     isnot(getSelectedRequest(store.getState()), null,
       "There should still be a selected item after filtering.");
     is(getSelectedIndex(store.getState()), 0,

devtools/client/netmonitor/test/browser_net_filter-flags.js

@@ -158,190 +158,199 @@ add_task(function* () {
 
   // Test running flag once requests finish running
   setFreetextFilter("is:running");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test cached flag
   setFreetextFilter("is:from-cache");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);
 
   setFreetextFilter("is:cached");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);
 
   // Test negative cached flag
   setFreetextFilter("-is:from-cache");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 0]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 0]);
 
   setFreetextFilter("-is:cached");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 0]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 0]);
 
   // Test status-code flag
   setFreetextFilter("status-code:200");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 0]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 0]);
 
   // Test status-code negative flag
   setFreetextFilter("-status-code:200");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);
 
   // Test mime-type flag
   setFreetextFilter("mime-type:HtmL");
-  testContents([1, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([1, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test mime-type negative flag
   setFreetextFilter("-mime-type:HtmL");
-  testContents([0, 0, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([0, 0, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   // Test method flag
   setFreetextFilter("method:get");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   // Test unmatched method flag
   setFreetextFilter("method:post");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test scheme flag (all requests are http)
   setFreetextFilter("scheme:http");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   setFreetextFilter("scheme:https");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test regex filter
   setFreetextFilter("regexp:content.*?Sam");
-  testContents([1, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([1, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test set-cookie-name flag
   setFreetextFilter("set-cookie-name:name2");
-  testContents([0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   setFreetextFilter("set-cookie-name:not-existing");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test set-cookie-value flag
   setFreetextFilter("set-cookie-value:value2");
-  testContents([0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   setFreetextFilter("set-cookie-value:not-existing");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test set-cookie-domain flag
   setFreetextFilter("set-cookie-domain:.example.com");
-  testContents([0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   setFreetextFilter("set-cookie-domain:.foo.example.com");
-  testContents([0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   setFreetextFilter("set-cookie-domain:.not-existing.example.com");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test size
   setFreetextFilter("size:-1");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   setFreetextFilter("size:0");
-  testContents([0, 0, 0, 0, 1, 1, 1, 1, 0, 1]);
+  yield testContents([0, 0, 0, 0, 1, 1, 1, 1, 0, 1]);
 
   setFreetextFilter("size:34");
-  testContents([0, 0, 1, 1, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 1, 1, 0, 0, 0, 0, 0, 0]);
 
   // Testing the lower bound
   setFreetextFilter("size:9.659k");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
 
   // Testing the actual value
   setFreetextFilter("size:10989");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
 
   // Testing the upper bound
   setFreetextFilter("size:11.804k");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
 
   // Test transferred
   setFreetextFilter("transferred:200");
-  testContents([0, 0, 0, 0, 1, 1, 1, 1, 0, 0]);
+  yield testContents([0, 0, 0, 0, 1, 1, 1, 1, 0, 0]);
 
   setFreetextFilter("transferred:234");
-  testContents([1, 0, 1, 0, 0, 0, 0, 0, 0, 1]);
+  yield testContents([1, 0, 1, 0, 0, 0, 0, 0, 0, 1]);
 
   setFreetextFilter("transferred:248");
-  testContents([0, 0, 1, 1, 0, 0, 0, 0, 0, 1]);
+  yield testContents([0, 0, 1, 1, 0, 0, 0, 0, 0, 1]);
 
   // Test larger-than
   setFreetextFilter("larger-than:-1");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   setFreetextFilter("larger-than:0");
-  testContents([1, 1, 1, 1, 0, 0, 0, 0, 1, 0]);
+  yield testContents([1, 1, 1, 1, 0, 0, 0, 0, 1, 0]);
 
   setFreetextFilter("larger-than:33");
-  testContents([0, 0, 1, 1, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 0, 1, 1, 0, 0, 0, 0, 1, 0]);
 
   setFreetextFilter("larger-than:34");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
 
   setFreetextFilter("larger-than:10.73k");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 1, 0]);
 
   setFreetextFilter("larger-than:10.732k");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test transferred-larger-than
   setFreetextFilter("transferred-larger-than:-1");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   setFreetextFilter("transferred-larger-than:214");
-  testContents([1, 1, 1, 1, 0, 0, 0, 0, 1, 1]);
+  yield testContents([1, 1, 1, 1, 0, 0, 0, 0, 1, 1]);
 
   setFreetextFilter("transferred-larger-than:247");
-  testContents([0, 1, 1, 1, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 1, 1, 1, 0, 0, 0, 0, 1, 0]);
 
   setFreetextFilter("transferred-larger-than:248");
-  testContents([0, 1, 0, 1, 0, 0, 0, 0, 1, 0]);
+  yield testContents([0, 1, 0, 1, 0, 0, 0, 0, 1, 0]);
 
   setFreetextFilter("transferred-larger-than:10.73k");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test cause
   setFreetextFilter("cause:xhr");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   setFreetextFilter("cause:script");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test has-response-header
   setFreetextFilter("has-response-header:Content-Type");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   setFreetextFilter("has-response-header:Last-Modified");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test remote-ip
   setFreetextFilter("remote-ip:127.0.0.1");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   setFreetextFilter("remote-ip:192.168.1.2");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test domain
   setFreetextFilter("domain:example.com");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   setFreetextFilter("domain:wrongexample.com");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test protocol
   setFreetextFilter("protocol:http/1");
-  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+  yield testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   setFreetextFilter("protocol:http/2");
-  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  yield testContents([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Test mixing flags
   setFreetextFilter("-mime-type:HtmL status-code:200");
-  testContents([0, 0, 1, 1, 1, 1, 1, 1, 1, 0]);
+  yield testContents([0, 0, 1, 1, 1, 1, 1, 1, 1, 0]);
 
   yield teardown(monitor);
 
-  function testContents(visibility) {
+  function* testContents(visibility) {
+    let requestItems = document.querySelectorAll(".request-list-item");
+    for (let requestItem of requestItems) {
+      requestItem.scrollIntoView();
+      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      EventUtils.synthesizeMouse(requestsListStatus, 0, 0, { type: "mousemove" },
+        monitor.panelWin);
+      yield waitUntil(() => requestsListStatus.title);
+    }
+
     const items = getSortedRequests(store.getState());
     const visibleItems = getDisplayedRequests(store.getState());
 

devtools/client/netmonitor/test/browser_net_json-long.js

@@ -32,6 +32,11 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItem = document.querySelector(".request-list-item");
+  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+  yield waitUntil(() => requestsListStatus.title);
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_json-malformed.js

@@ -27,6 +27,11 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItem = document.querySelector(".request-list-item");
+  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+  yield waitUntil(() => requestsListStatus.title);
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_json_custom_mime.js

@@ -27,6 +27,11 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItem = document.querySelector(".request-list-item");
+  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+  yield waitUntil(() => requestsListStatus.title);
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_json_text_mime.js

@@ -28,6 +28,11 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItem = document.querySelector(".request-list-item");
+  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+  yield waitUntil(() => requestsListStatus.title);
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_jsonp.js

@@ -28,6 +28,14 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItems = document.querySelectorAll(".request-list-item");
+  for (let requestItem of requestItems) {
+    requestItem.scrollIntoView();
+    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+    yield waitUntil(() => requestsListStatus.title);
+  }
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_large-response.js

@@ -32,6 +32,12 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItem = document.querySelector(".request-list-item");
+  requestItem.scrollIntoView();
+  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+  yield waitUntil(() => requestsListStatus.title);
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_post-data-01.js

@@ -31,6 +31,14 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItems = document.querySelectorAll(".request-list-item");
+  for (let requestItem of requestItems) {
+    requestItem.scrollIntoView();
+    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+    yield waitUntil(() => requestsListStatus.title);
+  }
+
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_req-resp-bodies.js

@@ -29,7 +29,7 @@ add_task(function* () {
   });
   yield wait;
 
-  verifyRequest(0);
+  yield verifyRequest(0);
 
   // Switch to the webconsole.
   let onWebConsole = monitor.toolbox.once("webconsole-selected");
@@ -53,11 +53,18 @@ add_task(function* () {
   });
   yield wait;
 
-  verifyRequest(1);
+  yield verifyRequest(1);
 
   return teardown(monitor);
 
-  function verifyRequest(index) {
+  function* verifyRequest(index) {
+    let requestItems = document.querySelectorAll(".request-list-item");
+    for (let requestItem of requestItems) {
+      requestItem.scrollIntoView();
+      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+      yield waitUntil(() => requestsListStatus.title);
+    }
     verifyRequestItemTarget(
       document,
       getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_service-worker-status.js

@@ -52,6 +52,14 @@ add_task(function* () {
   });
   yield wait;
 
+  let requestItems = document.querySelectorAll(".request-list-item");
+  for (let requestItem of requestItems) {
+    requestItem.scrollIntoView();
+    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+    yield waitUntil(() => requestsListStatus.title);
+  }
+
   let index = 0;
   for (let request of REQUEST_DATA) {
     let item = getSortedRequests(store.getState()).get(index);

devtools/client/netmonitor/test/browser_net_simple-request-data.js

@@ -231,6 +231,12 @@ function test() {
       is(requestItem.headersSize, 330,
         "The headersSize data has an incorrect value.");
 
+      let requestListItem = document.querySelector(".request-list-item");
+      requestListItem.scrollIntoView();
+      let requestsListStatus = requestListItem.querySelector(".requests-list-status");
+      EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+      await waitUntil(() => requestsListStatus.title);
+
       verifyRequestItemTarget(
         document,
         getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_sort-01.js

@@ -62,13 +62,13 @@ add_task(function* () {
     "The network details panel should be visible after toggle button was pressed.");
 
   testHeaders();
-  testContents([0, 2, 4, 3, 1], 0);
+  yield testContents([0, 2, 4, 3, 1], 0);
 
   info("Testing status sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-status-button"));
   testHeaders("status", "ascending");
-  testContents([0, 1, 2, 3, 4], 0);
+  yield testContents([0, 1, 2, 3, 4], 0);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 5);
@@ -77,13 +77,13 @@ add_task(function* () {
 
   info("Testing status sort again, ascending.");
   testHeaders("status", "ascending");
-  testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0);
+  yield 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"));
   testHeaders("status", "descending");
-  testContents([9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 9);
+  yield testContents([9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 9);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 5);
@@ -92,19 +92,19 @@ add_task(function* () {
 
   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);
+  yield 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"));
   testHeaders("status", "ascending");
-  testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 0);
+  yield 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"));
   testHeaders("status", "descending");
-  testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
+  yield testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
 
   return teardown(monitor);
 
@@ -141,7 +141,7 @@ add_task(function* () {
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }
 
-  function testContents(order, selection) {
+  function* testContents(order, selection) {
     isnot(getSelectedRequest(store.getState()), undefined,
       "There should still be a selected item after sorting.");
     is(getSelectedIndex(store.getState()), selection,
@@ -156,6 +156,14 @@ add_task(function* () {
     is(document.querySelectorAll(".request-list-item").length, order.length,
       "The visible items in the requests menu are, in fact, visible!");
 
+    let requestItems = document.querySelectorAll(".request-list-item");
+    for (let requestItem of requestItems) {
+      requestItem.scrollIntoView();
+      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+      yield waitUntil(() => requestsListStatus.title);
+    }
+
     for (let i = 0, len = order.length / 5; i < len; i++) {
       verifyRequestItemTarget(
         document,

devtools/client/netmonitor/test/browser_net_sort-02.js

@@ -62,133 +62,133 @@ add_task(function* () {
     "The network details panel should be visible after toggle button was pressed.");
 
   testHeaders();
-  testContents([0, 2, 4, 3, 1]);
+  yield testContents([0, 2, 4, 3, 1]);
 
   info("Testing status sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-status-button"));
   testHeaders("status", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing status sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-status-button"));
   testHeaders("status", "descending");
-  testContents([4, 3, 2, 1, 0]);
+  yield 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"));
   testHeaders("status", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing method sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-method-button"));
   testHeaders("method", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing method sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-method-button"));
   testHeaders("method", "descending");
-  testContents([4, 3, 2, 1, 0]);
+  yield 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"));
   testHeaders("method", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing file sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-file-button"));
   testHeaders("file", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing file sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-file-button"));
   testHeaders("file", "descending");
-  testContents([4, 3, 2, 1, 0]);
+  yield 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"));
   testHeaders("file", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing type sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-type-button"));
   testHeaders("type", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing type sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-type-button"));
   testHeaders("type", "descending");
-  testContents([4, 3, 2, 1, 0]);
+  yield 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"));
   testHeaders("type", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing transferred sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-transferred-button"));
   testHeaders("transferred", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing transferred sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-transferred-button"));
   testHeaders("transferred", "descending");
-  testContents([4, 3, 2, 1, 0]);
+  yield 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"));
   testHeaders("transferred", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing size sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-contentSize-button"));
   testHeaders("contentSize", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing size sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-contentSize-button"));
   testHeaders("contentSize", "descending");
-  testContents([4, 3, 2, 1, 0]);
+  yield testContents([4, 3, 2, 1, 0]);
 
   info("Testing size sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-contentSize-button"));
   testHeaders("contentSize", "ascending");
-  testContents([0, 1, 2, 3, 4]);
+  yield testContents([0, 1, 2, 3, 4]);
 
   info("Testing waterfall sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-waterfall-button"));
   testHeaders("waterfall", "ascending");
-  testContents([0, 2, 4, 3, 1]);
+  yield testContents([0, 2, 4, 3, 1]);
 
   info("Testing waterfall sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#requests-list-waterfall-button"));
   testHeaders("waterfall", "descending");
-  testContents([4, 2, 0, 1, 3]);
+  yield 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"));
   testHeaders("waterfall", "ascending");
-  testContents([0, 2, 4, 3, 1]);
+  yield testContents([0, 2, 4, 3, 1]);
 
   return teardown(monitor);
 
@@ -225,7 +225,7 @@ add_task(function* () {
     }
   }
 
-  function testContents([a, b, c, d, e]) {
+  function* testContents([a, b, c, d, e]) {
     isnot(getSelectedRequest(store.getState()), undefined,
       "There should still be a selected item after sorting.");
     is(getSelectedIndex(store.getState()), a,
@@ -240,6 +240,14 @@ add_task(function* () {
     is(document.querySelectorAll(".request-list-item").length, 5,
       "The visible items in the requests menu are, in fact, visible!");
 
+    let requestItems = document.querySelectorAll(".request-list-item");
+    for (let requestItem of requestItems) {
+      requestItem.scrollIntoView();
+      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+      yield waitUntil(() => requestsListStatus.title);
+    }
+
     verifyRequestItemTarget(
       document,
       getDisplayedRequests(store.getState()),

devtools/client/netmonitor/test/browser_net_status-codes.js

@@ -111,6 +111,14 @@ add_task(function* () {
    * request list items to requestItems array.
    */
   function* verifyRequests() {
+    let requestListItems = document.querySelectorAll(".request-list-item");
+    for (let requestItem of requestListItems) {
+      requestItem.scrollIntoView();
+      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+      yield waitUntil(() => requestsListStatus.title);
+    }
+
     info("Verifying requests contain correct information.");
     let index = 0;
     for (let request of REQUEST_DATA) {

devtools/client/netmonitor/test/browser_net_streaming-response.js

@@ -35,6 +35,14 @@ add_task(function* () {
   }
   yield wait;
 
+  let requestItems = document.querySelectorAll(".request-list-item");
+  for (let requestItem of requestItems) {
+    requestItem.scrollIntoView();
+    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
+    yield waitUntil(() => requestsListStatus.title);
+  }
+
   REQUESTS.forEach(([ fmt ], i) => {
     verifyRequestItemTarget(
       document,