Bug 1165576 - Netmonitor theme refresh. r=bgrins,vporof
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 02 Jun 2015 00:29:08 -0700
changeset 246650 3d27abe9852b2808b0634d45391b51844d6c3fdd
parent 246649 686032b3566e5e6384eccad87fbe0c6c7ece16e5
child 246651 c32e6f44cc4d6d0965262a0c13449ff219922bf8
push id28838
push userkwierso@gmail.com
push dateWed, 03 Jun 2015 01:12:22 +0000
treeherdermozilla-central@535ab0825603 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, vporof
bugs1165576
milestone41.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 1165576 - Netmonitor theme refresh. r=bgrins,vporof
browser/themes/shared/devtools/netmonitor.inc.css
--- a/browser/themes/shared/devtools/netmonitor.inc.css
+++ b/browser/themes/shared/devtools/netmonitor.inc.css
@@ -1,13 +1,22 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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-splitter-color: rgba(255,255,255,0.15);
+  --table-zebra-background: rgba(255,255,255,0.05);
+}
+:root.theme-light {
+  --table-splitter-color: rgba(0,0,0,0.15);
+  --table-zebra-background: rgba(0,0,0,0.05);
+}
+
 #requests-menu-empty-notice {
   margin: 0;
   padding: 12px;
   font-size: 120%;
 }
 
 #notice-perf-message {
   margin-top: 2px;
@@ -24,57 +33,34 @@
   display: none;
 }
 
 #requests-menu-reload-notice-button {
   min-height: 26px;
   margin: 0;
 }
 
-%filter substitution
-%define table_itemDarkStartBorder rgba(0,0,0,0.2)
-%define table_itemDarkEndBorder rgba(128,128,128,0.15)
-%define table_itemLightStartBorder rgba(128,128,128,0.25)
-%define table_itemLightEndBorder transparent
-
 /* Network requests table */
 
 #requests-menu-toolbar {
   padding: 0;
 }
 
 .requests-menu-header:first-child,
 .requests-menu-subitem:first-child {
   -moz-padding-start: 6px;
 }
 
 .requests-menu-subitem {
   padding: 3px;
 }
 
-.theme-dark .requests-menu-header:not(:last-child),
-.theme-dark .requests-menu-subitem:not(:last-child) {
-  -moz-border-end: 1px solid @table_itemDarkStartBorder@;
-  box-shadow: 1px 0 0 @table_itemDarkEndBorder@;
-}
-
-.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
-.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
-  box-shadow: -1px 0 0 @table_itemDarkEndBorder@;
-}
-
-.theme-light .requests-menu-header:not(:last-child),
-.theme-light .requests-menu-subitem:not(:last-child) {
-  -moz-border-end: 1px solid @table_itemLightStartBorder@;
-  box-shadow: 1px 0 0 @table_itemLightEndBorder@;
-}
-
-.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
-.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
-  box-shadow: -1px 0 0 @table_itemLightEndBorder@;
+.requests-menu-header:not(:last-child),
+.requests-menu-subitem:not(:last-child) {
+  -moz-border-end: 1px solid var(--table-splitter-color);
 }
 
 .requests-menu-header-button {
   -moz-appearance: none;
   background: none;
   min-width: 1px;
   min-height: 24px;
   margin: 0;
@@ -134,22 +120,18 @@
 .requests-menu-icon {
   background: #fff;
   width: calc(1em + 4px);
   height: calc(1em + 4px);
   margin: -4px 0px;
   -moz-margin-end: 4px;
 }
 
-.theme-dark .requests-menu-icon {
-  outline: 1px solid @table_itemDarkStartBorder@;
-}
-
-.theme-light .requests-menu-icon {
-  outline: 1px solid @table_itemLightStartBorder@;
+.requests-menu-icon {
+  outline: 1px solid var(--table-splitter-color);
 }
 
 .requests-menu-file {
   text-align: start;
 }
 
 .requests-menu-security-and-domain {
   width: 14vw;
@@ -160,20 +142,16 @@
   -moz-margin-end: 4px;
   -moz-image-region:rect(0px, 16px, 16px, 0px);
 }
 
 .requests-security-state-icon:hover {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
 
-.requests-security-state-icon:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
 .security-state-insecure {
   list-style-image: url(chrome://browser/skin/identity-icons-generic.png);
 }
 
 .security-state-secure {
   cursor: pointer;
   list-style-image: url(chrome://browser/skin/identity-icons-https.png);
 }
@@ -215,90 +193,52 @@ box.requests-menu-status {
 }
 
 label.requests-menu-status-code {
   -moz-margin-start: 3px !important;
   width: 3em;
   -moz-margin-end: -3em !important;
 }
 
-.theme-dark box.requests-menu-status:not([code]) {
-  background-color: rgba(95, 115, 135, 1); /* dark grey */
+box.requests-menu-status:not([code]) {
+  background-color: var(--theme-content-color2);
 }
 
-.theme-light box.requests-menu-status:not([code]) {
-  background-color: rgba(143, 161, 178, 1); /* grey */
-}
-
-.theme-dark box.requests-menu-status[code="cached"] {
-  border: 2px solid rgba(95, 115, 135, 1); /* dark grey */
+box.requests-menu-status[code="cached"] {
+  border: 2px solid var(--theme-content-color2);
   background-color: transparent;  
 }
 
-.theme-light box.requests-menu-status[code="cached"] {
-  border: 2px solid rgba(143, 161, 178, 1); /* grey */
-  background-color: transparent;
-}
-
-.theme-dark box.requests-menu-status[code^="1"] {
-  background-color: rgba(70, 175, 227, 1); /* light blue */
+box.requests-menu-status[code^="1"] {
+  background-color: var(---theme-highlight-blue);
 }
 
-.theme-light box.requests-menu-status[code^="1"] {
-  background-color: rgba(0, 136, 204, 1); /* light blue */
-}
-
-.theme-dark box.requests-menu-status[code^="2"] {
-  background-color: rgba(112, 191, 83, 1); /* green */
-}
-
-.theme-light box.requests-menu-status[code^="2"] {
-  background-color: rgba(44, 187, 15, 1); /* green */
+box.requests-menu-status[code^="2"] {
+  background-color: var(--theme-highlight-green);
 }
 
 /* 3xx are triangles */
-.theme-dark box.requests-menu-status[code^="3"] {
+box.requests-menu-status[code^="3"] {
   background-color: transparent;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */
-  border-radius: 0;
-}
-
-.theme-light box.requests-menu-status[code^="3"] {
-  background-color: transparent;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */
+  border-bottom: 10px solid var(--theme-highlight-lightorange);
   border-radius: 0;
 }
 
 /* 4xx and 5xx are squares - error codes */
-.theme-dark box.requests-menu-status[code^="4"] {
-  background-color: rgba(235, 83, 104, 1); /* red */
+box.requests-menu-status[code^="4"] {
+  background-color: var(--theme-highlight-red);
   border-radius: 0; /* squares */
 }
 
-.theme-light box.requests-menu-status[code^="4"] {
-  background-color: rgba(237, 38, 85, 1); /* red */
-  border-radius: 0; /* squares */
-}
-
-.theme-dark box.requests-menu-status[code^="5"] {
-  background-color: rgba(223, 128, 255, 1); /* pink? */
-  border-radius: 0;
-  transform: rotate(45deg);
-}
-
-.theme-light box.requests-menu-status[code^="5"] {
-  background-color: rgba(184, 46, 229, 1); /* pink! */
+box.requests-menu-status[code^="5"] {
+  background-color: var(--theme-highlight-pink);
   border-radius: 0;
   transform: rotate(45deg);
 }
 
 /* Network requests table: waterfall header */
 
 #requests-menu-waterfall-label {
   -moz-padding-start: 8px;
@@ -429,27 +369,36 @@ label.requests-menu-status-code {
   background-color: rgba(112, 191, 83, 0.8); /* green */
 }
 
 .theme-light .requests-menu-timings-box.receive {
   background-color: rgba(44, 187, 15, 0.8); /* green */
 }
 
 /* SideMenuWidget */
+#network-table .side-menu-widget-empty-text,
+#network-table .side-menu-widget-container {
+  background-color: var(--theme-body-background);
+}
+
+#network-table .side-menu-widget-item {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
 
 .side-menu-widget-item-contents {
   padding: 0px;
 }
 
-.theme-dark .side-menu-widget-item:not(.selected)[odd] {
-  background: rgba(255,255,255,0.05);
+.side-menu-widget-item:not(.selected)[odd] {
+  background-color: var(--table-zebra-background);
 }
 
-.theme-light .side-menu-widget-item:not(.selected)[odd] {
-  background: rgba(128,128,128,0.05);
+.side-menu-widget-item:not(.selected):hover {
+  background-color: var(--theme-selection-background-semitransparent);
 }
 
 /* Network request details */
 
 #details-pane-toggle {
   background: none;
   box-shadow: none;
   border-color: transparent;
@@ -482,19 +431,26 @@ label.requests-menu-status-code {
 
   #details-pane-toggle:active {
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
 /* Network request details tabpanels */
 
+.tabpanel-content {
+  background-color: var(--theme-sidebar-background);
+}
+
 .theme-dark .tabpanel-content {
+  color: var(--theme-selection-color);
+}
+
+#headers-tabpanel {
   background-color: var(--theme-toolbar-background);
-  color: var(--theme-selection-color);
 }
 
 /* Summary tabpanel */
 
 .tabpanel-summary-container {
   padding: 1px;
 }
 
@@ -624,26 +580,19 @@ label.requests-menu-status-code {
 }
 
 #custom-method-value {
   width: 4.5em;
 }
 
 /* Footer */
 
-.theme-dark #requests-menu-footer {
-  border-top: 1px solid @table_itemDarkStartBorder@;
-  box-shadow: 0 1px 0 @table_itemDarkEndBorder@ inset;
+#requests-menu-footer {
   background-color: var(--theme-toolbar-background);
-}
-
-.theme-light #requests-menu-footer {
-  border-top: 1px solid @table_itemLightStartBorder@;
-  box-shadow: 0 1px 0 @table_itemLightEndBorder@ inset;
-  background-color: var(--theme-toolbar-background);
+  border-top: 1px solid var(--table-splitter-color);
 }
 
 .requests-menu-footer-button,
 .requests-menu-footer-label {
   min-width: 1em;
   margin: 0;
   border: none;
   padding: 2px 1vw;
@@ -660,51 +609,40 @@ label.requests-menu-status-code {
 }
 
 .requests-menu-footer-spacer {
   min-width: 2px;
 }
 
 .theme-dark .requests-menu-footer-spacer:not(:first-child),
 .theme-dark .requests-menu-footer-button:not(:first-child) {
-  -moz-border-start: 1px solid @table_itemDarkEndBorder@;
-  box-shadow: -1px 0 0 @table_itemDarkStartBorder@;
+  -moz-border-start: 1px solid var(--table-splitter-color);
 }
 
 .theme-light .requests-menu-footer-spacer:not(:first-child),
 .theme-light .requests-menu-footer-button:not(:first-child) {
-  -moz-border-start: 1px solid @table_itemLightEndBorder@;
-  box-shadow: -1px 0 0 @table_itemLightStartBorder@;
+  -moz-border-start: 1px solid var(--table-splitter-color);
 }
 
 .requests-menu-footer-button {
   -moz-appearance: none;
   background: rgba(0,0,0,0.025);
 }
 
 .requests-menu-footer-button:hover {
   background: rgba(0,0,0,0.10);
 }
 
-.theme-dark .requests-menu-footer-button:hover:active {
-  background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */
-}
-
-.theme-light .requests-menu-footer-button:hover:active {
-  background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */
+.requests-menu-footer-button:hover:active {
+  background-color: var(--theme-selection-background-semitransparent);
 }
 
-.theme-dark .requests-menu-footer-button:not(:active)[checked] {
-  background-color: rgba(29,79,115,1); /* Select Highlight Blue */
-  color: rgba(245,247,250,1); /* Light foreground text */
-}
-
-.theme-light .requests-menu-footer-button:not(:active)[checked] {
-  background-color: rgba(76,158,217,1); /* Select Highlight Blue */
-  color: rgba(245,247,250,1); /* Light foreground text */
+.requests-menu-footer-button:not(:active)[checked] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .requests-menu-footer-label {
   padding-top: 3px;
   font-weight: 600;
 }
 
 #requests-menu-filter-freetext-text {
@@ -774,17 +712,17 @@ label.requests-menu-status-code {
   pointer-events: none;
 }
 
 #network-statistics-charts {
   min-height: 1px;
 }
 
 #network-statistics-charts {
-  background-color: var(--theme-toolbar-background);
+  background-color: var(--theme-sidebar-background);
 }
 
 #network-statistics-charts .pie-chart-container {
   -moz-margin-start: 3vw;
   -moz-margin-end: 1vw;
 }
 
 #network-statistics-charts .table-chart-container {