Bug 1149626 - Performance timeline legends should be dark with light text in dark theme in LineGraphs, r=jsantell
authorVictor Porof <vporof@mozilla.com>
Tue, 19 May 2015 14:56:28 -0400
changeset 244745 24f5da1e10f0802b31e8d74eeba42c55818dfc58
parent 244744 ec09ecf7fc9fe2c85557278ed6828073c5567795
child 244746 74b94431552151d3c1ab976986a0ef2cff273f82
push id28787
push userkwierso@gmail.com
push dateThu, 21 May 2015 00:04:35 +0000
treeherdermozilla-central@74b944315521 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjsantell
bugs1149626
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 1149626 - Performance timeline legends should be dark with light text in dark theme in LineGraphs, r=jsantell
browser/themes/shared/devtools/widgets.inc.css
--- a/browser/themes/shared/devtools/widgets.inc.css
+++ b/browser/themes/shared/devtools/widgets.inc.css
@@ -875,23 +875,32 @@
 .graph-widget-canvas[input=dragging-selection-contents] {
   cursor: grabbing;
 }
 
 /* Line graph widget */
 
 .line-graph-widget-gutter {
   position: absolute;
-  background: rgba(255,255,255,0.75);
   width: 10px;
   height: 100%;
   top: 0;
   left: 0;
-  border-right: 1px solid rgba(255,255,255,0.25);
   pointer-events: none;
+  -moz-border-end: 1px solid;
+}
+
+.theme-light .line-graph-widget-gutter {
+  background: rgba(255,255,255,0.75);
+  -moz-border-end-color: rgba(255,255,255,0.25);
+}
+
+.theme-dark .line-graph-widget-gutter {
+  background: rgba(0,0,0,0.5);
+  -moz-border-end-color: rgba(0,0,0,0.25);
 }
 
 .line-graph-widget-gutter-line {
   position: absolute;
   width: 100%;
   border-top: 1px solid;
 }
 
@@ -904,88 +913,119 @@
 }
 
 .line-graph-widget-gutter-line[type=average] {
   border-color: #d97e00;
 }
 
 .line-graph-widget-tooltip {
   position: absolute;
-  background: rgba(255,255,255,0.9);
   border-radius: 2px;
   line-height: 15px;
   -moz-padding-start: 6px;
   -moz-padding-end: 6px;
   transform: translateY(-50%);
   font-size: 80%;
   z-index: 1;
   pointer-events: none;
 }
 
+.theme-light .line-graph-widget-tooltip {
+  background: rgba(255,255,255,0.75);
+}
+
+.theme-dark .line-graph-widget-tooltip {
+  background: rgba(0,0,0,0.5);
+}
+
 .line-graph-widget-tooltip[with-arrows=true]::before {
   content: "";
   position: absolute;
   border-top: 3px solid transparent;
   border-bottom: 3px solid transparent;
   top: calc(50% - 3px);
 }
 
 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
-  -moz-border-end: 3px solid rgba(255,255,255,0.75);
+  -moz-border-end: 3px solid;
   left: -3px;
 }
 
 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
-  -moz-border-start: 3px solid rgba(255,255,255,0.75);
+  -moz-border-start: 3px solid;
   right: -3px;
 }
 
+.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
+  -moz-border-end-color: rgba(255,255,255,0.75);
+}
+
+.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
+  -moz-border-end-color: rgba(0,0,0,0.5);
+}
+
+.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  -moz-border-start-color: rgba(255,255,255,0.75);
+}
+
+.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  -moz-border-start-color: rgba(0,0,0,0.5);
+}
+
 .line-graph-widget-tooltip[type=maximum] {
   left: 14px;
 }
 
 .line-graph-widget-tooltip[type=minimum] {
   left: 14px;
 }
 
 .line-graph-widget-tooltip[type=average] {
   right: 4px;
 }
 
 .line-graph-widget-tooltip > [text=info] {
-  color: #18191a;
+  color: var(--theme-content-color1);
 }
 
 .line-graph-widget-tooltip > [text=value] {
   -moz-margin-start: 3px;
 }
 
 .line-graph-widget-tooltip > [text=metric] {
   -moz-margin-start: 1px;
-  color: #667380;
+  color: var(--theme-content-color3);
 }
 
-.line-graph-widget-tooltip > [text=value],
-.line-graph-widget-tooltip > [text=metric] {
-  text-shadow: 1px  0px rgba(255,255,255,0.6),
-              -1px  0px rgba(255,255,255,0.6),
-               0px -1px rgba(255,255,255,0.6),
-               0px  1px rgba(255,255,255,0.6);
+.theme-light .line-graph-widget-tooltip > [text=value],
+.theme-light .line-graph-widget-tooltip > [text=metric] {
+  text-shadow: 1px  0px rgba(255,255,255,0.5),
+              -1px  0px rgba(255,255,255,0.5),
+               0px -1px rgba(255,255,255,0.5),
+               0px  1px rgba(255,255,255,0.5);
+}
+
+.theme-dark .line-graph-widget-tooltip > [text=value],
+.theme-dark .line-graph-widget-tooltip > [text=metric] {
+  text-shadow: 1px  0px rgba(0,0,0,0.5),
+              -1px  0px rgba(0,0,0,0.5),
+               0px -1px rgba(0,0,0,0.5),
+               0px  1px rgba(0,0,0,0.5);
 }
 
 .line-graph-widget-tooltip[type=maximum] > [text=value] {
-  color: #2cbb0f;
+  color: var(--theme-highlight-green);
 }
 
 .line-graph-widget-tooltip[type=minimum] > [text=value] {
-  color: #ed2655;
+  color: var(--theme-highlight-red);
 }
 
 .line-graph-widget-tooltip[type=average] > [text=value] {
-  color: #d97e00;
+  color: var(--theme-highlight-orange);
 }
 
 /* Bar graph widget */
 
 .bar-graph-widget-canvas {
   background: #f7f7f7;
 }