Bug 1258718 - Simplify highlighters.css adding CSS variables; r=pbro
authorMatteo Ferretti <mferretti@mozilla.com>
Thu, 02 Jun 2016 13:38:37 +0200
changeset 339082 a92a2888973b566c4d4630df3a22869f80ff5587
parent 339081 e74192b1a9c82ebcb431e5b4c28775a8111c8864
child 339083 d17d00cb45e0e6ee052dd97f6f0a70ad047a734e
push id6249
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 13:59:36 +0000
treeherdermozilla-beta@bad9d4f5bf7e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1258718
milestone49.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 1258718 - Simplify highlighters.css adding CSS variables; r=pbro MozReview-Commit-ID: GyHXNfCxb9f
devtools/server/actors/highlighters.css
--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -9,16 +9,24 @@
   This stylesheet is loaded as a ua stylesheet via the addon sdk, so having this
   pseudo-class is important.
   Having bug 1086532 fixed would make it possible to load this stylesheet in a
   <style scoped> node instead, directly in the native anonymous container
   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%;
   height: 100%;
   /* The container for all highlighters doesn't react to pointer-events by
      default. This is because most highlighters cover the whole viewport but
      don't contain UIs that need to be accessed.
      If your highlighter has UI that needs to be interacted with, add
      'pointer-events:auto;' on its container element. */
@@ -41,17 +49,17 @@
 
 /* Box model regions can be faded (see the onlyRegionArea option in
    highlighters.js) in order to only display certain regions. */
 :-moz-native-anonymous .box-model-regions [faded] {
   display: none;
 }
 
 :-moz-native-anonymous .box-model-content {
-  fill: #87ceeb;
+  fill: var(--highlighter-content-color);
 }
 
 :-moz-native-anonymous .box-model-padding {
   fill: #6a5acd;
 }
 
 :-moz-native-anonymous .box-model-border {
   fill: #444444;
@@ -67,17 +75,17 @@
 :-moz-native-anonymous .box-model-margin {
   stroke: none;
 }
 
 :-moz-native-anonymous .box-model-guide-top,
 :-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;
 }
 
 /* Highlighter - Node Infobar */
 
 :-moz-native-anonymous .box-model-nodeinfobar-container {
   position: absolute;
@@ -92,38 +100,38 @@
 
   /* Centering the nodeinfobar in the container */
   left: -50%;
 
   padding: 5px;
   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 {
   margin: 7px 0;
 }
 
 /* Arrows */
 
 :-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,
 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:after {
   content: "";
   display: none;
   position: absolute;
   height: 0;
@@ -152,94 +160,94 @@
   overflow: hidden;
   white-space: nowrap;
   direction: ltr;
   text-align: center;
   padding-bottom: 1px;
 }
 
 :-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;
 }
 
 /* Css transform highlighter */
 
 :-moz-native-anonymous .css-transform-transformed {
-  fill: #80d4ff;
+  fill: var(--highlighter-content-color);
   opacity: 0.8;
 }
 
 :-moz-native-anonymous .css-transform-untransformed {
   fill: #66cc52;
   opacity: 0.8;
 }
 
 :-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;
 }
 
 /* Rect highlighter */
 
 :-moz-native-anonymous .highlighted-rect {
   position: absolute;
-  background: #80d4ff;
+  background: var(--highlighter-content-color);
   opacity: 0.8;
 }
 
 /* Element geometry highlighter */
 
 :-moz-native-anonymous .geometry-editor-root {
   /* The geometry editor can be interacted with, so it needs to react to
      pointer events */
   pointer-events: auto;
   -moz-user-select: none;
 }
 
 :-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,
 :-moz-native-anonymous .geometry-editor-handler-bottom {
   cursor: ns-resize;
 }
 
 :-moz-native-anonymous .geometry-editor-handler-right,
@@ -253,26 +261,26 @@
 :-moz-native-anonymous [dragging] .geometry-editor-handler-left {
   cursor: grabbing;
 }
 
 :-moz-native-anonymous .geometry-editor-handler-top.dragging,
 :-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;
   dominant-baseline: middle;
 }
 
 /* Rules highlighter */
 
@@ -326,23 +334,23 @@
   left: 0;
   pointer-events: auto;
   cursor: crosshair;
 }
 
 :-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;
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-label-size,
 :-moz-native-anonymous .measuring-tool-highlighter-label-position {
   position: absolute;
   top: 0;
   left: 0;
@@ -358,21 +366,22 @@
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-label-position {
   color: #fff;
   background: hsla(214, 13%, 24%, 0.8);
 }
 
 :-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;
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-guide-top,
 :-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;
 }