Bug 1508241 - Change variable colors and set a new one for approved Zebra Colors for Network Tab in DevTools r=Honza
authorMellina Yonashiro <yonashiro.mellina@gmail.com>
Thu, 07 Mar 2019 16:04:09 +0000
changeset 462916 a7c18fe7a05098c880d776c281cfd5c656f3ebdc
parent 462915 85797ddca8546f5b5248545973e03631f4a1f34e
child 462917 dbf02da1d1bf4dc09640bf02b6a15a1ef2e825fd
push id79916
push userjodvarko@mozilla.com
push dateThu, 07 Mar 2019 16:04:57 +0000
treeherderautoland@a7c18fe7a050 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1508241
milestone67.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 1508241 - Change variable colors and set a new one for approved Zebra Colors for Network Tab in DevTools r=Honza This changes the colors of the odd table cells and the hover state in rows in the Network tab in DevTools. I have updated the //--table-zebra-background// in **variables.css** and inserted a new one, which is //--table-selection-background-hover//. I have created the new variable, in order to prevent it affecting other table colors. Differential Revision: https://phabricator.services.mozilla.com/D21777
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/assets/styles/variables.css
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -557,17 +557,17 @@
   color: var(--theme-selection-color);
 }
 
 .request-list-item:not(.selected).odd {
   background-color: var(--table-zebra-background);
 }
 
 .request-list-item:not(.selected):hover {
-  background-color: var(--theme-selection-background-hover);
+  background-color: var(--table-selection-background-hover);
 }
 
 .request-list-item:not(.selected).fromCache > .requests-list-column:not(.requests-list-waterfall) {
   opacity: 0.7;
 }
 
 /* Responsive web design support */
 
--- a/devtools/client/netmonitor/src/assets/styles/variables.css
+++ b/devtools/client/netmonitor/src/assets/styles/variables.css
@@ -1,32 +1,34 @@
 /* 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/. */
 
 :root.theme-dark {
   --table-text-color: var(--grey-40);
   --table-splitter-color: rgba(255,255,255,0.15);
   --table-zebra-background: rgba(255,255,255,0.05);
+  --table-selection-background-hover: rgba(53, 59, 72, 1);
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
   --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
   --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
   --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
 }
 
 :root.theme-light {
   --theme-body-color: var(--grey-70);
 
   --table-text-color: var(--grey-70);
   --table-splitter-color: rgba(0,0,0,0.15);
-  --table-zebra-background: rgba(0,0,0,0.05);
+  --table-zebra-background: rgba(247, 247, 247, 0.8);
+  --table-selection-background-hover: rgba(209, 232, 255, 0.8);
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
   --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */
   --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */
   --timing-receive-color: rgba(44, 187, 15, 0.8); /* green */