Bug 1435232 - Apply new status code design to details panel. r=Honza
authorLucas Luna Souza <lucas.lunasouza@mail.utoronto.ca>
Wed, 04 Apr 2018 09:03:54 -0400
changeset 412346 da1badd944ab
parent 412345 ba89b2464447
child 412347 674460420e04
push id101899
push userryanvm@gmail.com
push dateMon, 09 Apr 2018 12:29:58 +0000
treeherdermozilla-inbound@da1badd944ab [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1435232
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1435232 - Apply new status code design to details panel. r=Honza
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/netmonitor/src/components/HeadersPanel.js
devtools/client/netmonitor/src/components/RequestListColumnStatus.js
devtools/client/netmonitor/src/components/StatusCode.js
devtools/client/netmonitor/src/components/moz.build
devtools/client/netmonitor/test/browser_net_brotli.js
devtools/client/netmonitor/test/browser_net_cached-status.js
devtools/client/netmonitor/test/browser_net_content-type.js
devtools/client/netmonitor/test/browser_net_cyrillic-01.js
devtools/client/netmonitor/test/browser_net_cyrillic-02.js
devtools/client/netmonitor/test/browser_net_filter-01.js
devtools/client/netmonitor/test/browser_net_filter-02.js
devtools/client/netmonitor/test/browser_net_filter-flags.js
devtools/client/netmonitor/test/browser_net_json-long.js
devtools/client/netmonitor/test/browser_net_json-malformed.js
devtools/client/netmonitor/test/browser_net_json_custom_mime.js
devtools/client/netmonitor/test/browser_net_json_text_mime.js
devtools/client/netmonitor/test/browser_net_jsonp.js
devtools/client/netmonitor/test/browser_net_large-response.js
devtools/client/netmonitor/test/browser_net_post-data-01.js
devtools/client/netmonitor/test/browser_net_req-resp-bodies.js
devtools/client/netmonitor/test/browser_net_service-worker-status.js
devtools/client/netmonitor/test/browser_net_simple-request-data.js
devtools/client/netmonitor/test/browser_net_sort-01.js
devtools/client/netmonitor/test/browser_net_sort-02.js
devtools/client/netmonitor/test/browser_net_status-codes.js
devtools/client/netmonitor/test/browser_net_streaming-response.js
devtools/client/netmonitor/test/head.js
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -205,20 +205,16 @@
   display: flex;
   align-items: center;
 }
 
 .network-monitor .headers-summary .devtools-button {
   margin-inline-end: 6px;
 }
 
-.network-monitor .headers-summary .requests-list-status-icon {
-  min-width: 10px;
-}
-
 .network-monitor .headers-summary .raw-headers-container {
   display: flex;
   width: 100%;
 }
 
 .network-monitor .headers-summary .raw-headers {
   width: 50%;
   padding: 0 4px;
--- a/devtools/client/netmonitor/src/components/HeadersPanel.js
+++ b/devtools/client/netmonitor/src/components/HeadersPanel.js
@@ -22,21 +22,21 @@ const {
 } = require("../utils/request-utils");
 const {
   HeadersProvider,
   HeaderList,
 } = require("../utils/headers-provider");
 
 // Components
 const PropertiesView = createFactory(require("./PropertiesView"));
+const StatusCode = createFactory(require("./StatusCode"));
 
 loader.lazyGetter(this, "MDNLink", function() {
   return createFactory(require("./MdnLink"));
 });
-
 loader.lazyGetter(this, "Rep", function() {
   return require("devtools/client/shared/components/reps/reps").REPS.Rep;
 });
 loader.lazyGetter(this, "MODE", function() {
   return require("devtools/client/shared/components/reps/reps").MODE;
 });
 
 const { button, div, input, textarea, span } = dom;
@@ -175,16 +175,17 @@ class HeadersPanel extends Component {
         requestHeaders,
         requestHeadersFromUploadStream: uploadHeaders,
         responseHeaders,
         status,
         statusText,
         urlDetails,
       },
     } = this.props;
+    let item = { fromCache, fromServiceWorker, status, statusText };
 
     if ((!requestHeaders || !requestHeaders.headers.length) &&
         (!uploadHeaders || !uploadHeaders.headers.length) &&
         (!responseHeaders || !responseHeaders.headers.length)) {
       return div({ className: "empty-notice" },
         HEADERS_EMPTY_TEXT
       );
     }
@@ -204,48 +205,27 @@ class HeadersPanel extends Component {
 
     let summaryAddress = remoteAddress ?
       this.renderSummary(SUMMARY_ADDRESS,
         getFormattedIPAndPort(remoteAddress, remotePort)) : null;
 
     let summaryStatus;
 
     if (status) {
-      let code;
-      if (fromCache) {
-        code = "cached";
-      } else if (fromServiceWorker) {
-        code = "service worker";
-      } else {
-        code = status;
-      }
-
       let statusCodeDocURL = getHTTPStatusCodeURL(status.toString());
-      let inputWidth = status.toString().length + statusText.length + 1;
       let toggleRawHeadersClassList = ["devtools-button", "raw-headers-button"];
       if (this.state.rawHeadersOpened) {
         toggleRawHeadersClassList.push("checked");
       }
-
       summaryStatus = (
         div({ className: "tabpanel-summary-container headers-summary" },
           div({
             className: "tabpanel-summary-label headers-summary-label",
           }, SUMMARY_STATUS),
-          div({
-            className: "requests-list-status-icon",
-            "data-code": code,
-          }),
-          input({
-            className: "tabpanel-summary-value textbox-input devtools-monospace"
-              + " status-text",
-            readOnly: true,
-            value: `${status} ${statusText}`,
-            size: `${inputWidth}`,
-          }),
+          StatusCode({ item }),
           statusCodeDocURL ? MDNLink({
             url: statusCodeDocURL,
           }) : span({
             className: "headers-summary learn-more-link",
           }),
           button({
             className: "devtools-button edit-and-resend-button",
             onClick: cloneSelectedRequest,
--- a/devtools/client/netmonitor/src/components/RequestListColumnStatus.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnStatus.js
@@ -1,93 +1,36 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { Component } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { L10N } = require("../utils/l10n");
-const { propertiesEqual } = require("../utils/request-utils");
+
+// Components
+
+const StatusCode = createFactory(require("./StatusCode"));
 
 const { div } = dom;
 
-const UPDATED_STATUS_PROPS = [
-  "fromCache",
-  "fromServiceWorker",
-  "status",
-  "statusText",
-];
-
 class RequestListColumnStatus extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
     };
   }
 
-  shouldComponentUpdate(nextProps) {
-    return !propertiesEqual(UPDATED_STATUS_PROPS, this.props.item, nextProps.item);
-  }
-
   render() {
     let { item } = this.props;
-    let { fromCache, fromServiceWorker, status, statusText } = item;
-    let code;
-
-    if (status) {
-      if (fromCache) {
-        code = "cached";
-      } else if (fromServiceWorker) {
-        code = "service worker";
-      } else {
-        code = status;
-      }
-    }
 
     return (
       div({
         className: "requests-list-column requests-list-status",
-        onMouseOver: function({ target }) {
-          if (status && statusText && !target.title) {
-            target.title = getColumnTitle(item);
-          }
-        },
       },
-
-      /*
-        `data-code` refers to the status-code
-        `data-status-code` can be one of "cached", "service worker"
-        or the status-code itself
-        For example - if a resource is cached, `data-code` would be 200
-        and the `data-status-code` would be "cached"
-      */
-      div({
-        className: "requests-list-status-code status-code",
-        "data-status-code": code,
-        "data-code": status,
-      }, status)
+      StatusCode({ item }),
     ));
   }
 }
 
-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;
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/StatusCode.js
@@ -0,0 +1,92 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Component } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { L10N } = require("../utils/l10n");
+const { propertiesEqual } = require("../utils/request-utils");
+
+const { div } = dom;
+
+const UPDATED_STATUS_PROPS = [
+  "fromCache",
+  "fromServiceWorker",
+  "status",
+  "statusText",
+];
+
+/**
+ * Status code component
+ * Displays HTTP status code icon
+ * Used in RequestListColumnStatus and HeadersPanel
+ */
+class StatusCode extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !propertiesEqual(UPDATED_STATUS_PROPS, this.props.item, nextProps.item);
+  }
+
+  render() {
+    let { item } = this.props;
+    let { fromCache, fromServiceWorker, status, statusText } = item;
+    let code;
+
+    if (status) {
+      if (fromCache) {
+        code = "cached";
+      } else if (fromServiceWorker) {
+        code = "service worker";
+      } else {
+        code = status;
+      }
+    }
+
+    // `data-code` refers to the status-code
+    // `data-status-code` can be one of "cached", "service worker"
+    // or the status-code itself
+    // For example - if a resource is cached, `data-code` would be 200
+    // and the `data-status-code` would be "cached"
+    return (
+      div({
+        className: "requests-list-status-code status-code",
+        onMouseOver: function({ target }) {
+          if (status && statusText && !target.title) {
+            target.title = getStatusTooltip(item);
+          }
+        },
+        "data-status-code": code,
+        "data-code": status,
+      }, status)
+    );
+  }
+}
+
+function getStatusTooltip(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 = StatusCode;
--- a/devtools/client/netmonitor/src/components/moz.build
+++ b/devtools/client/netmonitor/src/components/moz.build
@@ -36,12 +36,13 @@ DevToolsModules(
     'RequestListHeader.js',
     'RequestListItem.js',
     'ResponsePanel.js',
     'SecurityPanel.js',
     'SourceEditor.js',
     'StackTracePanel.js',
     'StatisticsPanel.js',
     'StatusBar.js',
+    'StatusCode.js',
     'TabboxPanel.js',
     'TimingsPanel.js',
     'Toolbar.js',
 )
--- a/devtools/client/netmonitor/test/browser_net_brotli.js
+++ b/devtools/client/netmonitor/test/browser_net_brotli.js
@@ -24,17 +24,17 @@ add_task(async function() {
   } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, BROTLI_REQUESTS);
 
   let requestItem = document.querySelector(".request-list-item");
-  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  let requestsListStatus = requestItem.querySelector(".status-code");
   EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
   await waitUntil(() => requestsListStatus.title);
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
     "GET", HTTPS_CONTENT_TYPE_SJS + "?fmt=br", {
--- a/devtools/client/netmonitor/test/browser_net_cached-status.js
+++ b/devtools/client/netmonitor/test/browser_net_cached-status.js
@@ -93,17 +93,17 @@ add_task(async function() {
 
   info("Performing requests #2...");
   await performRequestsAndWait();
 
   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");
+    let requestsListStatus = requestItem.querySelector(".status-code");
     EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
     await waitUntil(() => requestsListStatus.title);
 
     info("Verifying request #" + index);
     await verifyRequestItemTarget(
       document,
       getDisplayedRequests(store.getState()),
       getSortedRequests(store.getState()).get(index),
--- a/devtools/client/netmonitor/test/browser_net_content-type.js
+++ b/devtools/client/netmonitor/test/browser_net_content-type.js
@@ -20,17 +20,17 @@ add_task(async function() {
   } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
 
   for (let requestItem of document.querySelectorAll(".request-list-item")) {
-    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    let requestsListStatus = requestItem.querySelector(".status-code");
     requestItem.scrollIntoView();
     EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
     await waitUntil(() => requestsListStatus.title);
   }
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
--- a/devtools/client/netmonitor/test/browser_net_cyrillic-01.js
+++ b/devtools/client/netmonitor/test/browser_net_cyrillic-01.js
@@ -19,17 +19,17 @@ add_task(async function() {
   } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, 1);
 
   let requestItem = document.querySelectorAll(".request-list-item")[0];
-  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  let requestsListStatus = requestItem.querySelector(".status-code");
   requestItem.scrollIntoView();
   EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
   await waitUntil(() => requestsListStatus.title);
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
--- a/devtools/client/netmonitor/test/browser_net_cyrillic-02.js
+++ b/devtools/client/netmonitor/test/browser_net_cyrillic-02.js
@@ -18,17 +18,17 @@ add_task(async function() {
     getSortedRequests,
   } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   let wait = waitForNetworkEvents(monitor, 1);
   tab.linkedBrowser.reload();
   await wait;
 
   let requestItem = document.querySelectorAll(".request-list-item")[0];
-  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  let requestsListStatus = requestItem.querySelector(".status-code");
   requestItem.scrollIntoView();
   EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
   await waitUntil(() => requestsListStatus.title);
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
--- a/devtools/client/netmonitor/test/browser_net_filter-01.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-01.js
@@ -302,17 +302,17 @@ add_task(async function() {
     }
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }
 
   async function testContents(visibility) {
     let requestItems = document.querySelectorAll(".request-list-item");
     for (let requestItem of requestItems) {
       requestItem.scrollIntoView();
-      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      let requestsListStatus = requestItem.querySelector(".status-code");
       EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
       await waitUntil(() => requestsListStatus.title);
     }
 
     let items = getSortedRequests(store.getState());
     let visibleItems;
 
     // Filter results will be updated asynchronously, so we should wait until
--- a/devtools/client/netmonitor/test/browser_net_filter-02.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-02.js
@@ -204,17 +204,17 @@ add_task(async function() {
     }
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }
 
   async function testContents(visibility) {
     let requestItems = document.querySelectorAll(".request-list-item");
     for (let requestItem of requestItems) {
       requestItem.scrollIntoView();
-      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      let requestsListStatus = requestItem.querySelector(".status-code");
       EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
       await waitUntil(() => requestsListStatus.title);
     }
 
     isnot(getSelectedRequest(store.getState()), null,
       "There should still be a selected item after filtering.");
     is(getSelectedIndex(store.getState()), 0,
       "The first item should be still selected after filtering.");
--- a/devtools/client/netmonitor/test/browser_net_filter-flags.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-flags.js
@@ -387,17 +387,17 @@ add_task(async function() {
       is(isThere, shouldBeVisible,
         `The item at index ${i} has visibility=${shouldBeVisible}`);
     }
 
     // Fake mouse over the status column only after the list is fully updated
     let requestItems = document.querySelectorAll(".request-list-item");
     for (let requestItem of requestItems) {
       requestItem.scrollIntoView();
-      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      let requestsListStatus = requestItem.querySelector(".status-code");
       EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
       await waitUntil(() => requestsListStatus.title);
     }
 
     for (let i = 0; i < visibility.length; i++) {
       let shouldBeVisible = !!visibility[i];
 
       if (shouldBeVisible) {
--- a/devtools/client/netmonitor/test/browser_net_json-long.js
+++ b/devtools/client/netmonitor/test/browser_net_json-long.js
@@ -25,17 +25,17 @@ add_task(async function() {
   } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, 1);
 
   let requestItem = document.querySelector(".request-list-item");
-  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  let requestsListStatus = requestItem.querySelector(".status-code");
   EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
   await waitUntil(() => requestsListStatus.title);
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
     "GET",
--- a/devtools/client/netmonitor/test/browser_net_json-malformed.js
+++ b/devtools/client/netmonitor/test/browser_net_json-malformed.js
@@ -20,17 +20,17 @@ add_task(async function() {
   } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, 1);
 
   let requestItem = document.querySelector(".request-list-item");
-  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  let requestsListStatus = requestItem.querySelector(".status-code");
   EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
   await waitUntil(() => requestsListStatus.title);
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
     "GET",
--- a/devtools/client/netmonitor/test/browser_net_json_custom_mime.js
+++ b/devtools/client/netmonitor/test/browser_net_json_custom_mime.js
@@ -20,17 +20,17 @@ add_task(async function() {
   } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, 1);
 
   let requestItem = document.querySelector(".request-list-item");
-  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  let requestsListStatus = requestItem.querySelector(".status-code");
   EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
   await waitUntil(() => requestsListStatus.title);
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
     "GET",
--- a/devtools/client/netmonitor/test/browser_net_json_text_mime.js
+++ b/devtools/client/netmonitor/test/browser_net_json_text_mime.js
@@ -21,17 +21,17 @@ add_task(async function() {
   } = windowRequire("devtools/client/netmonitor/src/selectors/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, 1);
 
   let requestItem = document.querySelector(".request-list-item");
-  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  let requestsListStatus = requestItem.querySelector(".status-code");
   EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
   await waitUntil(() => requestsListStatus.title);
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
     "GET",
--- a/devtools/client/netmonitor/test/browser_net_jsonp.js
+++ b/devtools/client/netmonitor/test/browser_net_jsonp.js
@@ -23,17 +23,17 @@ add_task(async function() {
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, 2);
 
   let requestItems = document.querySelectorAll(".request-list-item");
   for (let requestItem of requestItems) {
     requestItem.scrollIntoView();
-    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    let requestsListStatus = requestItem.querySelector(".status-code");
     EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
     await waitUntil(() => requestsListStatus.title);
   }
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
--- a/devtools/client/netmonitor/test/browser_net_large-response.js
+++ b/devtools/client/netmonitor/test/browser_net_large-response.js
@@ -29,17 +29,17 @@ add_task(async function() {
   let wait = waitForNetworkEvents(monitor, 1);
   await ContentTask.spawn(tab.linkedBrowser, HTML_LONG_URL, async function(url) {
     content.wrappedJSObject.performRequests(1, url);
   });
   await wait;
 
   let requestItem = document.querySelector(".request-list-item");
   requestItem.scrollIntoView();
-  let requestsListStatus = requestItem.querySelector(".requests-list-status");
+  let requestsListStatus = requestItem.querySelector(".status-code");
   EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
   await waitUntil(() => requestsListStatus.title);
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
     "GET",
--- a/devtools/client/netmonitor/test/browser_net_post-data-01.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-01.js
@@ -26,17 +26,17 @@ add_task(async function() {
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, 2);
 
   let requestItems = document.querySelectorAll(".request-list-item");
   for (let requestItem of requestItems) {
     requestItem.scrollIntoView();
-    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    let requestsListStatus = requestItem.querySelector(".status-code");
     EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
     await waitUntil(() => requestsListStatus.title);
   }
 
   verifyRequestItemTarget(
     document,
     getDisplayedRequests(store.getState()),
     getSortedRequests(store.getState()).get(0),
--- a/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js
+++ b/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js
@@ -48,17 +48,17 @@ add_task(async function() {
   await verifyRequest(1);
 
   return teardown(monitor);
 
   async function verifyRequest(index) {
     let requestItems = document.querySelectorAll(".request-list-item");
     for (let requestItem of requestItems) {
       requestItem.scrollIntoView();
-      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      let requestsListStatus = requestItem.querySelector(".status-code");
       EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
       await waitUntil(() => requestsListStatus.title);
     }
     verifyRequestItemTarget(
       document,
       getDisplayedRequests(store.getState()),
       getSortedRequests(store.getState()).get(index),
       "GET",
--- a/devtools/client/netmonitor/test/browser_net_service-worker-status.js
+++ b/devtools/client/netmonitor/test/browser_net_service-worker-status.js
@@ -53,17 +53,17 @@ add_task(async function() {
   // all packets are received.
   let requests = getSortedRequests(store.getState());
   await Promise.all(requests.map(requestItem =>
     connector.requestData(requestItem.id, "stackTrace")));
 
   let requestItems = document.querySelectorAll(".request-list-item");
   for (let requestItem of requestItems) {
     requestItem.scrollIntoView();
-    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    let requestsListStatus = requestItem.querySelector(".status-code");
     EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
     await waitUntil(() => requestsListStatus.title);
   }
 
   let index = 0;
   for (let request of REQUEST_DATA) {
     let item = getSortedRequests(store.getState()).get(index);
 
--- a/devtools/client/netmonitor/test/browser_net_simple-request-data.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request-data.js
@@ -219,17 +219,17 @@ function test() {
         "The status data has an incorrect value.");
       is(requestItem.statusText, "Och Aye",
         "The statusText data has an incorrect value.");
       is(requestItem.headersSize, 335,
         "The headersSize data has an incorrect value.");
 
       let requestListItem = document.querySelector(".request-list-item");
       requestListItem.scrollIntoView();
-      let requestsListStatus = requestListItem.querySelector(".requests-list-status");
+      let requestsListStatus = requestListItem.querySelector(".status-code");
       EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
       await waitUntil(() => requestsListStatus.title);
 
       verifyRequestItemTarget(
         document,
         getDisplayedRequests(store.getState()),
         requestItem,
         "GET",
--- a/devtools/client/netmonitor/test/browser_net_sort-01.js
+++ b/devtools/client/netmonitor/test/browser_net_sort-01.js
@@ -154,17 +154,17 @@ add_task(async function() {
     is(getDisplayedRequests(store.getState()).length, order.length,
       "There should be a specific number of visbile items in the requests menu.");
     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");
+      let requestsListStatus = requestItem.querySelector(".status-code");
       EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
       await waitUntil(() => requestsListStatus.title);
     }
 
     for (let i = 0, len = order.length / 5; i < len; i++) {
       verifyRequestItemTarget(
         document,
         getDisplayedRequests(store.getState()),
--- a/devtools/client/netmonitor/test/browser_net_sort-02.js
+++ b/devtools/client/netmonitor/test/browser_net_sort-02.js
@@ -238,17 +238,17 @@ add_task(async function() {
     is(getDisplayedRequests(store.getState()).length, 5,
       "There should be a total of 5 visible items in the requests menu.");
     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");
+      let requestsListStatus = requestItem.querySelector(".status-code");
       EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
       await waitUntil(() => requestsListStatus.title);
     }
 
     verifyRequestItemTarget(
       document,
       getDisplayedRequests(store.getState()),
       getSortedRequests(store.getState()).get(a),
--- a/devtools/client/netmonitor/test/browser_net_status-codes.js
+++ b/devtools/client/netmonitor/test/browser_net_status-codes.js
@@ -111,17 +111,17 @@ add_task(async function() {
   /**
    * A helper that verifies all requests show the correct information and caches
    * request list items to requestItems array.
    */
   async function verifyRequests() {
     let requestListItems = document.querySelectorAll(".request-list-item");
     for (let requestItem of requestListItems) {
       requestItem.scrollIntoView();
-      let requestsListStatus = requestItem.querySelector(".requests-list-status");
+      let requestsListStatus = requestItem.querySelector(".status-code");
       EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
       await waitUntil(() => requestsListStatus.title);
     }
 
     info("Verifying requests contain correct information.");
     let index = 0;
     for (let request of REQUEST_DATA) {
       let item = getSortedRequests(store.getState()).get(index);
@@ -170,23 +170,26 @@ add_task(async function() {
       document.querySelectorAll(".request-list-item")[index]);
 
     await waitUntil(() => document.querySelector(
       "#headers-panel .tabpanel-summary-value.textbox-input"));
 
     let panel = document.querySelector("#headers-panel");
     let summaryValues = panel.querySelectorAll(".tabpanel-summary-value.textbox-input");
     let { method, correctUri, details: { status, statusText } } = data;
+    let statusCode = panel.querySelector(".status-code");
+    EventUtils.sendMouseEvent({ type: "mouseover" }, statusCode);
+    await waitUntil(() => statusCode.title);
 
     is(summaryValues[0].value, correctUri,
       "The url summary value is incorrect.");
     is(summaryValues[1].value, method, "The method summary value is incorrect.");
-    is(panel.querySelector(".requests-list-status-icon").dataset.code, status,
+    is(statusCode.dataset.code, status,
       "The status summary code is incorrect.");
-    is(summaryValues[3].value, status + " " + statusText,
+    is(statusCode.getAttribute("title"), status + " " + statusText,
       "The status summary value is incorrect.");
   }
 
   /**
    * A function that tests "Params" panel contains correct information.
    */
   function testParams(data, index) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
--- a/devtools/client/netmonitor/test/browser_net_streaming-response.js
+++ b/devtools/client/netmonitor/test/browser_net_streaming-response.js
@@ -33,17 +33,17 @@ add_task(async function() {
       content.wrappedJSObject.performRequests(1, args.url);
     });
   }
   await wait;
 
   let requestItems = document.querySelectorAll(".request-list-item");
   for (let requestItem of requestItems) {
     requestItem.scrollIntoView();
-    let requestsListStatus = requestItem.querySelector(".requests-list-status");
+    let requestsListStatus = requestItem.querySelector(".status-code");
     EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
     await waitUntil(() => requestsListStatus.title);
   }
 
   REQUESTS.forEach(([ fmt ], i) => {
     verifyRequestItemTarget(
       document,
       getDisplayedRequests(store.getState()),
--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -488,17 +488,18 @@ function verifyRequestItemTarget(documen
 
   is(target.querySelector(".requests-list-latency-time").getAttribute("title"),
     latency, "The tooltip latency is correct.");
 
   if (status !== undefined) {
     let value = target.querySelector(".requests-list-status-code")
                       .getAttribute("data-status-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-code")
+                        .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.");
   }