Bug 1421208 - Add color-sheme background to HTTP status code in Netmonitor. r=nchevobbe

MozReview-Commit-ID: Kec4qq3ZTw6

--HG--
extra : rebase_source : aa72786a100dcec3e4ef40addf2deeec8922c378

devtools/client/netmonitor/src/assets/styles/RequestList.css

@@ -228,7 +228,33 @@
 
 .requests-list-status-code {
   margin-inline-start: 3px;
-  width: 3em;
+  padding: 0 2px;
+  border-radius: 3px;
+  font-family: var(--monospace-font-family);
+}
+
+.status-code[data-code^="1"] {
+  background-color: var(--status-code-color-1xx);
+}
+
+.status-code[data-code^="2"] {
+  background-color: var(--status-code-color-2xx);
+}
+
+.status-code[data-code^="3"] {
+  background-color: var(--status-code-color-3xx);
+}
+
+.status-code[data-code^="4"] {
+  background-color: var(--status-code-color-4xx);
+}
+
+.status-code[data-code^="5"] {
+  background-color: var(--status-code-color-5xx);
+}
+
+.status-code:not([data-code^="3"]) {
+  color: var(--theme-body-background);
 }
 
 .requests-list-status-icon {

devtools/client/netmonitor/src/assets/styles/httpi.css

@@ -17,23 +17,3 @@
 @import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/MdnLink.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsPanel.css";
-
-.status-code[data-code^="1"] {
-  background-color: var(--status-code-color-1xx);
-}
-
-.status-code[data-code^="2"] {
-  background-color: var(--status-code-color-2xx);
-}
-
-.status-code[data-code^="3"] {
-  background-color: var(--status-code-color-3xx);
-}
-
-.status-code[data-code^="4"] {
-  background-color: var(--status-code-color-4xx);
-}
-
-.status-code[data-code^="5"] {
-  background-color: var(--status-code-color-5xx);
-}

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

@@ -54,10 +54,20 @@ class RequestListColumnStatus extends Component {
           }
         },
       },
-      div({ className: "requests-list-status-icon", "data-code": code }),
-        div({ className: "requests-list-status-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"
+      */
+      div({
+        className: "requests-list-status-code status-code",
+        "data-status-code": code,
+        "data-code": status,
+      }, status)
+    ));
   }
 }
 

devtools/client/netmonitor/test/head.js

@@ -488,8 +488,8 @@ function* verifyRequestItemTarget(document, requestList, requestItem, method,
     latency, "The tooltip latency is correct.");
 
   if (status !== undefined) {
-    let value = target.querySelector(".requests-list-status-icon")
-                      .getAttribute("data-code");
+    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");
     info("Displayed status: " + value);

devtools/client/themes/webconsole.css

@@ -1020,6 +1020,25 @@ a.learn-more-link.webconsole-learn-more-link {
   color: var(--theme-body-background);
 }
 
+.status-code[data-code^="1"] {
+  background-color: var(--status-code-color-1xx);
+}
+
+.status-code[data-code^="2"] {
+  background-color: var(--status-code-color-2xx);
+}
+
+.status-code[data-code^="3"] {
+  background-color: var(--status-code-color-3xx);
+}
+
+.status-code[data-code^="4"] {
+  background-color: var(--status-code-color-4xx);
+}
+
+.status-code[data-code^="5"] {
+  background-color: var(--status-code-color-5xx);
+}
 
 .network.message .network-info {
   display: none;