Bug 1107972 - Convert custom colors in profiler to CSS variables fix visual regression caused by specificity change from bug 1102369. r=vporof, a=sledru
authorBrian Grinstead <bgrinstead@mozilla.com>
Fri, 05 Dec 2014 11:05:00 +0100
changeset 242353 099b946a520f30b7314dff0b0d80911b2211879d
parent 242352 5ae0b9d63d6cb943b1450b5d6a5f178d0758c7bf
child 242354 f76e4729b7defda774de938aa5cabcc3757a8093
push id4311
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 19:37:41 +0000
treeherdermozilla-beta@150c9fed433b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof, sledru
bugs1107972, 1102369
milestone36.0a2
Bug 1107972 - Convert custom colors in profiler to CSS variables fix visual regression caused by specificity change from bug 1102369. r=vporof, a=sledru
browser/themes/shared/devtools/profiler.inc.css
--- a/browser/themes/shared/devtools/profiler.inc.css
+++ b/browser/themes/shared/devtools/profiler.inc.css
@@ -1,13 +1,28 @@
 /* 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/. */
 
+/* CSS Variables specific to this panel that aren't defined by the themes */
+.theme-dark {
+  --cell-border-color: rgba(255,255,255,0.15);
+  --focus-cell-border-color: rgba(0,0,0,0.3);
+  --row-alt-background-color: rgba(29,79,115,0.15);
+  --row-hover-background-color: rgba(29,79,115,0.25);
+}
+
+.theme-light {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --focus-cell-border-color: rgba(255,255,255,0.5);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+}
+
 /* Reload and waiting notices */
 
 .notice-container {
   margin-top: -50vh;
   font-size: 120%;
   background-color: var(--theme-toolbar-background);
   color: var(--theme-body-color-alt);
 }
@@ -240,79 +255,59 @@
   -moz-box-align: center;
   overflow: hidden;
   padding: 1px 4px;
   color: var(--theme-body-color);
 }
 
 .call-tree-header:not(:last-child),
 .call-tree-cell:not(:last-child) {
-  -moz-border-end: 1px solid;
+  -moz-border-end-width: 1px;
+  -moz-border-end-style: solid;
 }
 
-.theme-dark .call-tree-header,
-.theme-dark .call-tree-cell {
-  -moz-border-end-color: rgba(255,255,255,0.15);
-}
-
-.theme-light .call-tree-header,
-.theme-light .call-tree-cell {
-  -moz-border-end-color: rgba(0,0,0,0.15);
+.call-tree-header,
+.call-tree-cell {
+  -moz-border-end-color: var(--cell-border-color);
 }
 
 .call-tree-header:not(:last-child) {
   text-align: center;
 }
 
 .call-tree-cell:not(:last-child) {
   text-align: end;
 }
 
 .call-tree-header {
   background-color: var(--theme-tab-toolbar-background);
 }
 
-.theme-dark .call-tree-item:last-child:not(:focus) {
-  border-bottom: 1px solid rgba(255,255,255,0.15);
-}
-
-.theme-light .call-tree-item:last-child:not(:focus) {
-  border-bottom: 1px solid rgba(0,0,0,0.15);
+.call-tree-item:last-child:not(:focus) {
+  border-bottom: 1px solid var(--cell-border-color);
 }
 
-.theme-dark .call-tree-item:nth-child(2n) {
-  background-color: rgba(29,79,115,0.15);
+.call-tree-item:nth-child(2n) {
+  background-color: var(--row-alt-background-color);
 }
 
-.theme-light .call-tree-item:nth-child(2n) {
-  background-color: rgba(76,158,217,0.1);
-}
-
-.theme-dark .call-tree-item:hover {
-  background-color: rgba(29,79,115,0.25);
-}
-
-.theme-light .call-tree-item:hover {
-  background-color: rgba(76,158,217,0.2);
+.call-tree-item:hover {
+  background-color: var(--row-hover-background-color);
 }
 
 .call-tree-item:focus {
   background-color: var(--theme-selection-background);
 }
 
 .call-tree-item:focus label {
   color: var(--theme-selection-color) !important;
 }
 
-.theme-dark .call-tree-item:focus .call-tree-cell {
-  -moz-border-end-color: rgba(0,0,0,0.3);
-}
-
-.theme-light .call-tree-item:focus .call-tree-cell {
-  -moz-border-end-color: rgba(255,255,255,0.5);
+.call-tree-item:focus .call-tree-cell {
+  -moz-border-end-color: var(--focus-cell-border-color);
 }
 
 .call-tree-item:not([origin="content"]) .call-tree-name,
 .call-tree-item:not([origin="content"]) .call-tree-url,
 .call-tree-item:not([origin="content"]) .call-tree-line {
   /* Style chrome and non-JS nodes differently. */
   opacity: 0.6;
 }