Bug 1495971 - fix network resource status code contrastby creating StatusCode.css file containing status code style rules and importing it in webconsole/index.html and netmonitor.css r=nchevobbe
authorZameer <haque864@gmail.com>
Tue, 23 Oct 2018 14:28:38 +0000
changeset 490933 6447311d0412b8c648376318e8791fcd72bc2787
parent 490932 3e89ff5068b74d316950337330b6c46cc7a50c5c
child 490934 999d001b268d988a86776befda2eadcae93fbfe3
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersnchevobbe
bugs1495971
milestone65.0a1
Bug 1495971 - fix network resource status code contrastby creating StatusCode.css file containing status code style rules and importing it in webconsole/index.html and netmonitor.css r=nchevobbe Fixes contrast issue of status code in webconsole by creating and importing StatusCode.css file into webconsole/index.html which contains the rules for styling the Status Code. Also imports the StatusCode.css file to netmonitor.css since status code styles are removed from RequestList.css. Differential Revision: https://phabricator.services.mozilla.com/D9353
devtools/client/jar.mn
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/assets/styles/StatusCode.css
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/themes/webconsole.css
devtools/client/webconsole/index.html
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -278,16 +278,17 @@ devtools.jar:
     content/netmonitor/src/assets/styles/RequestList.css (netmonitor/src/assets/styles/RequestList.css)
     content/netmonitor/src/assets/styles/StatisticsPanel.css (netmonitor/src/assets/styles/StatisticsPanel.css)
     content/netmonitor/src/assets/styles/StatusBar.css (netmonitor/src/assets/styles/StatusBar.css)
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
     content/netmonitor/src/assets/icons/shield.svg (netmonitor/src/assets/icons/shield.svg)
     content/netmonitor/index.html (netmonitor/index.html)
+    content/netmonitor/src/assets/styles/StatusCode.css (netmonitor/src/assets/styles/StatusCode.css)
 
     # Application panel
     content/application/index.html (application/index.html)
 
     # Devtools-components
     skin/images/devtools-components/arrow.svg (themes/images/devtools-components/arrow.svg)
     skin/images/devtools-components/checkbox.svg (themes/images/devtools-components/checkbox.svg)
 
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -175,49 +175,16 @@
 /* Status column */
 
 .requests-list-status {
   min-width: 70px;
    /* Don't ellipsize status codes */
   text-overflow: initial;
 }
 
-.requests-list-status-code {
-  margin-inline-start: 3px;
-  padding: 0 2px;
-  border-radius: 3px;
-  font-family: var(--monospace-font-family);
-  /* prevent status code from having full line height width from .request-list-item */
-  line-height: normal;
-}
-
-.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 {
   background: #fff;
   height: 10px;
   width: 10px;
   margin-inline-start: 5px;
   margin-inline-end: 5px;
   border-radius: 10px;
   transition: box-shadow 0.5s ease-in-out;
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
@@ -0,0 +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/. */
+
+.status-code {
+  margin-inline-start: 3px;
+  padding: 0 2px;
+  border-radius: 3px;
+  font-family: var(--monospace-font-family);
+  /* prevent status code from having full line height width from .request-list-item */
+  line-height: normal;
+}
+
+.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);
+}
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -15,16 +15,17 @@
 
 /* Network panel components & styles */
 @import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/Toolbar.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/StatusBar.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/RequestList.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsPanel.css";
 @import "chrome://devtools/content/netmonitor/src/assets/styles/StatisticsPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/StatusCode.css";
 
 /* General */
 
 * {
   box-sizing: border-box;
 }
 
 html,
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -713,47 +713,16 @@ a.learn-more-link.webconsole-learn-more-
   font-style: inherit;
 }
 
 .webconsole-output-wrapper .message.network .status {
   color: var(--theme-highlight-blue);
   font-style: inherit;
 }
 
-.webconsole-output-wrapper .message.network .status .status-info .status-code {
-  padding: 0 2px;
-  border-radius: 3px;
-  text-decoration: none;
-  font-style: normal;
-}
-
-.webconsole-output-wrapper .message.network .status .status-info .status-code:not([data-code^="3"]) {
-  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;
   margin-block-start: 6px;
   margin-block-end: 2px;
   border: solid 1px var(--theme-splitter-color);
 }
 
 .network.message.open .network-info {
--- a/devtools/client/webconsole/index.html
+++ b/devtools/client/webconsole/index.html
@@ -15,16 +15,17 @@
     <link rel="stylesheet" href="chrome://devtools/skin/webconsole.css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/components-frame.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/reps/reps.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/Tabs.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/TabBar.css"/>
     <link rel="stylesheet" href="resource://devtools/client/shared/components/NotificationBox.css"/>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/httpi.css"/>
     <link rel="stylesheet" href="resource://devtools/client/webconsole/components/ReverseSearchInput.css"/>
+    <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/StatusCode.css"/>
 
     <script src="chrome://devtools/content/shared/theme-switching.js"></script>
     <script type="application/javascript"
             src="resource://devtools/client/webconsole/main.js"></script>
   </head>
   <body class="theme-sidebar" role="application">
     <main id="app-wrapper" class="theme-body" role="document" aria-live="polite">
     </main>