Bug 1258718 - Simplify highlighters.css adding CSS variables; r=pbro

MozReview-Commit-ID: GyHXNfCxb9f

devtools/server/actors/highlighters.css

@@ -13,6 +13,14 @@
   element.
 */
 
+:-moz-native-anonymous .highlighter-container {
+  --highlighter-guide-color: #08c;
+  --highlighter-content-color: #87ceeb;
+  --highlighter-bubble-text-color: hsl(216, 33%, 97%);
+  --highlighter-bubble-background-color: hsl(214, 13%, 24%);
+  --highlighter-bubble-border-color: rgba(255, 255, 255, 0.2);
+}
+
 :-moz-native-anonymous .highlighter-container {
   position: fixed;
   width: 100%;
@@ -46,7 +54,7 @@
 }
 
 :-moz-native-anonymous .box-model-content {
-  fill: #87ceeb;
+  fill: var(--highlighter-content-color);
 }
 
 :-moz-native-anonymous .box-model-padding {
@@ -72,7 +80,7 @@
 :-moz-native-anonymous .box-model-guide-right,
 :-moz-native-anonymous .box-model-guide-bottom,
 :-moz-native-anonymous .box-model-guide-left {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   stroke-dasharray: 5 3;
   shape-rendering: crispEdges;
 }
@@ -97,12 +105,12 @@
   min-width: 75px;
 
   border-radius: 3px;
-  background: hsl(214,13%,24%) no-repeat padding-box;
+  background: var(--highlighter-bubble-background-color) no-repeat padding-box;
 
-  color: hsl(216,33%,97%);
+  color: var(--highlighter-bubble-text-color);
   text-shadow: none;
 
-  border: 1px solid rgba(255,255,255,0.2);
+  border: 1px solid var(--highlighter-bubble-border-color);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-container[hide-arrow] > .box-model-nodeinfobar {
@@ -113,12 +121,12 @@
 
 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before {
   left: calc(50% - 8px);
-  border: 8px solid rgba(255,255,255,0.2);
+  border: 8px solid var(--highlighter-bubble-border-color);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:after {
   left: calc(50% - 7px);
-  border: 7px solid hsl(214,13%,24%);
+  border: 7px solid var(--highlighter-bubble-background-color);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before,
@@ -157,20 +165,20 @@
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-tagname {
-  color: hsl(285,100%,75%);
+  color: hsl(285,100%, 75%);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-id {
-  color: hsl(103,46%,54%);
+  color: hsl(103, 46%, 54%);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-classes,
 :-moz-native-anonymous .box-model-nodeinfobar-pseudo-classes {
-  color: hsl(200,74%,57%);
+  color: hsl(200, 74%, 57%);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-dimensions {
-  color: hsl(210,30%,85%);
+  color: hsl(210, 30%, 85%);
   border-inline-start: 1px solid #5a6169;
   margin-inline-start: 6px;
   padding-inline-start: 6px;
@@ -179,7 +187,7 @@
 /* Css transform highlighter */
 
 :-moz-native-anonymous .css-transform-transformed {
-  fill: #80d4ff;
+  fill: var(--highlighter-content-color);
   opacity: 0.8;
 }
 
@@ -191,7 +199,7 @@
 :-moz-native-anonymous .css-transform-transformed,
 :-moz-native-anonymous .css-transform-untransformed,
 :-moz-native-anonymous .css-transform-line {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   stroke-dasharray: 5 3;
   stroke-width: 2;
 }
@@ -200,7 +208,7 @@
 
 :-moz-native-anonymous .highlighted-rect {
   position: absolute;
-  background: #80d4ff;
+  background: var(--highlighter-content-color);
   opacity: 0.8;
 }
 
@@ -214,27 +222,27 @@
 }
 
 :-moz-native-anonymous .geometry-editor-offset-parent {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   shape-rendering: crispEdges;
   stroke-dasharray: 5 3;
   fill: transparent;
 }
 
 :-moz-native-anonymous .geometry-editor-current-node {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
+  fill: var(--highlighter-content-color);
   shape-rendering: crispEdges;
-  fill: #87ceeb;
   opacity: 0.6;
 }
 
 :-moz-native-anonymous .geometry-editor-arrow {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   shape-rendering: crispEdges;
 }
 
 :-moz-native-anonymous .geometry-editor-root circle {
-  stroke: #08c;
-  fill: #87ceeb;
+  stroke: var(--highlighter-guide-color);
+  fill: var(--highlighter-content-color);
 }
 
 :-moz-native-anonymous .geometry-editor-handler-top,
@@ -258,16 +266,16 @@
 :-moz-native-anonymous .geometry-editor-handler-right.dragging,
 :-moz-native-anonymous .geometry-editor-handler-bottom.dragging,
 :-moz-native-anonymous .geometry-editor-handler-left.dragging {
-  fill: #08c;
+  fill: var(--highlighter-guide-color);
 }
 
 :-moz-native-anonymous .geometry-editor-label-bubble {
-  fill: hsl(214,13%,24%);
+  fill: var(--highlighter-bubble-background-color);
   shape-rendering: crispEdges;
 }
 
 :-moz-native-anonymous .geometry-editor-label-text {
-  fill: hsl(216,33%,97%);
+  fill: var(--highlighter-bubble-text-color);
   font: message-box;
   font-size: 10px;
   text-anchor: middle;
@@ -331,13 +339,13 @@
 :-moz-native-anonymous .measuring-tool-highlighter-root path {
   shape-rendering: crispEdges;
   fill: rgba(135, 206, 235, 0.6);
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   pointer-events: none;
 }
 
 :-moz-native-anonymous .dragging path {
   fill: rgba(135, 206, 235, 0.6);
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   opacity: 0.45;
 }
 
@@ -363,8 +371,9 @@
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-label-size {
-  color: hsl(216, 33%, 97%);
-  background: hsl(214, 13%, 24%);
+  color: var(--highlighter-bubble-text-color);
+  background: var(--highlighter-bubble-background-color);
+  border: 1px solid var(--highlighter-bubble-border-color);
   line-height: 1.5em;
 }
 
@@ -372,7 +381,7 @@
 :-moz-native-anonymous .measuring-tool-highlighter-guide-right,
 :-moz-native-anonymous .measuring-tool-highlighter-guide-bottom,
 :-moz-native-anonymous .measuring-tool-highlighter-guide-left {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   stroke-dasharray: 5 3;
   shape-rendering: crispEdges;
 }