Bug 1165576 - Netmonitor theme refresh. r=bgrins,vporof
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 02 Jun 2015 00:29:08 -0700
changeset 246543 3d27abe9852b2808b0634d45391b51844d6c3fdd
parent 246542 686032b3566e5e6384eccad87fbe0c6c7ece16e5
child 246544 c32e6f44cc4d6d0965262a0c13449ff219922bf8
push id13292
push usermozilla@noorenberghe.ca
push dateTue, 02 Jun 2015 07:31:47 +0000
treeherderfx-team@3d27abe9852b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, vporof
bugs1165576
milestone41.0a1
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 {