From b3e946522dec8c472ede5206163258283d0099f2 Mon Sep 17 00:00:00 2001
From: Tim Nguyen <ntim.bugs@gmail.com>
Date: Mon, 19 Oct 2015 22:28:54 +0200
Subject: [PATCH] Bug 1211190 - Convert hardcoded colors to CSS variables in
 devtools. r=bgrins, jsantell

---
 devtools/client/jar.mn                    |  4 +-
 devtools/client/themes/canvasdebugger.css | 79 ++++++----------------
 devtools/client/themes/scratchpad.css     |  2 -
 devtools/client/themes/styleeditor.css    |  9 +--
 devtools/client/themes/toolbars.inc.css   | 42 +++---------
 devtools/client/themes/webaudioeditor.css | 27 +++-----
 devtools/client/themes/webconsole.css     | 80 ++++++++---------------
 7 files changed, 68 insertions(+), 175 deletions(-)

diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index ad0610a8fb7a..a163b137a601 100644
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -224,14 +224,14 @@ devtools.jar:
     skin/themes/images/breadcrumbs-scrollbutton@2x.png (themes/images/breadcrumbs-scrollbutton@2x.png)
     skin/themes/animationinspector.css (themes/animationinspector.css)
     skin/themes/eyedropper.css (themes/eyedropper.css)
-*   skin/themes/canvasdebugger.css (themes/canvasdebugger.css)
+    skin/themes/canvasdebugger.css (themes/canvasdebugger.css)
     skin/themes/debugger.css (themes/debugger.css)
 *   skin/themes/netmonitor.css (themes/netmonitor.css)
     skin/themes/performance.css (themes/performance.css)
     skin/themes/memory.css (themes/memory.css)
     skin/themes/promisedebugger.css (themes/promisedebugger.css)
     skin/themes/images/timeline-filter.svg (themes/images/timeline-filter.svg)
-*   skin/themes/scratchpad.css (themes/scratchpad.css)
+    skin/themes/scratchpad.css (themes/scratchpad.css)
     skin/themes/shadereditor.css (themes/shadereditor.css)
     skin/themes/storage.css (themes/storage.css)
 *   skin/themes/splitview.css (themes/splitview.css)
diff --git a/devtools/client/themes/canvasdebugger.css b/devtools/client/themes/canvasdebugger.css
index 32bf8a1ccc32..23b47807adbe 100644
--- a/devtools/client/themes/canvasdebugger.css
+++ b/devtools/client/themes/canvasdebugger.css
@@ -2,14 +2,12 @@
  * 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/. */
 
-%filter substitution
-%define darkCheckerboardBackground #000
-%define lightCheckerboardBackground #fff
-%define checkerboardCell rgba(128,128,128,0.2)
-%define checkerboardPattern linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@), linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@)
-%define gutterWidth 3em
-%define gutterPaddingStart 22px
-
+:root {
+  --gutter-width: 3em;
+  --gutter-padding-start: 22px;
+  --checkerboard-pattern: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)),
+                          linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2));
+}
 /* Reload and waiting notices */
 
 .notice-container {
@@ -35,22 +33,9 @@
 
 /* Snapshots pane */
 
-#snapshots-pane > tabs {
-  -moz-border-end: 1px solid;
-}
-
+#snapshots-pane > tabs,
 #snapshots-pane .devtools-toolbar {
-  -moz-border-end: 1px solid;
-}
-
-.theme-dark #snapshots-pane > tabs,
-.theme-dark #snapshots-pane .devtools-toolbar {
-  -moz-border-end-color: black; /* Match the splitter color. */
-}
-
-.theme-light #snapshots-pane > tabs,
-.theme-light #snapshots-pane .devtools-toolbar {
-  -moz-border-end-color: #aaa; /* Match the splitter color. */
+  -moz-border-end: 1px solid var(--theme-splitter-color);
 }
 
 #record-snapshot {
@@ -65,7 +50,7 @@
 
 .snapshot-item-thumbnail {
   image-rendering: -moz-crisp-edges;
-  background-image: @checkerboardPattern@;
+  background-image: var(--checkerboard-pattern);
   background-size: 12px 12px, 12px 12px;
   background-position: 0px 0px, 6px 6px;
   background-repeat: repeat, repeat;
@@ -75,12 +60,8 @@
   transform: scaleY(-1);
 }
 
-.theme-dark .snapshot-item-thumbnail {
-  background-color: @darkCheckerboardBackground@;
-}
-
-.theme-light .snapshot-item-thumbnail {
-  background-color: @lightCheckerboardBackground@;
+.snapshot-item-thumbnail {
+  background-color: var(--theme-body-background);
 }
 
 .snapshot-item-details {
@@ -234,9 +215,9 @@
 }
 
 .call-item-gutter {
-  width: calc(@gutterWidth@ + @gutterPaddingStart@);
-  -moz-padding-start: @gutterPaddingStart@;
-  -moz-padding-end: 4px;
+  width: calc(var(--gutter-width) + var(--gutter-padding-start));
+  padding-inline-start: var(--gutter-padding-start);
+  padding-inline-end: 4px;
   padding-top: 2px;
   padding-bottom: 2px;
   -moz-border-end: 1px solid;
@@ -300,7 +281,7 @@
 }
 
 .call-item-stack {
-  -moz-padding-start: calc(@gutterWidth@ + @gutterPaddingStart@);
+  -moz-padding-start: calc(var(--gutter-width) + var(--gutter-padding-start));
   padding-bottom: 10px;
 }
 
@@ -345,20 +326,13 @@
 /* Rendering preview */
 
 #screenshot-container {
-  background-image: @checkerboardPattern@;
+  background-color: var(--theme-body-background);
+  background-image: var(--checkerboard-pattern);
   background-size: 30px 30px, 30px 30px;
   background-position: 0px 0px, 15px 15px;
   background-repeat: repeat, repeat;
 }
 
-.theme-dark #screenshot-container {
-  background-color: @darkCheckerboardBackground@;
-}
-
-.theme-light #screenshot-container {
-  background-color: @lightCheckerboardBackground@;
-}
-
 @media (min-width: 701px) {
   #screenshot-container {
     width: 30vw;
@@ -403,22 +377,22 @@
 /* Snapshot filmstrip */
 
 #snapshot-filmstrip {
+  border-top: 1px solid var(--theme-splitter-color);
   overflow: hidden;
 }
 
 .theme-dark #snapshot-filmstrip {
-  border-top: 1px solid #000;
   color: var(--theme-selection-color);
 }
 
 .theme-light #snapshot-filmstrip {
-  border-top: 1px solid #aaa;
   color: var(--theme-body-color-alt);
 }
 
 .filmstrip-thumbnail {
   image-rendering: -moz-crisp-edges;
-  background-image: @checkerboardPattern@;
+  background-color: var(--theme-body-background);
+  background-image: var(--checkerboard-pattern);
   background-size: 12px 12px, 12px 12px;
   background-position: 0px -1px, 6px 5px;
   background-repeat: repeat, repeat;
@@ -426,6 +400,7 @@
   cursor: pointer;
   padding-top: 1px;
   padding-bottom: 1px;
+  border-inline-end: 1px solid var(--theme-splitter-color);
   transition: opacity 0.1s ease-in-out;
 }
 
@@ -433,18 +408,6 @@
   transform: scaleY(-1);
 }
 
-.theme-dark .filmstrip-thumbnail {
-  background-color: @darkCheckerboardBackground@;
-}
-
-.theme-light .filmstrip-thumbnail {
-  background-color: @lightCheckerboardBackground@;
-}
-
-.filmstrip-thumbnail {
-  -moz-border-end: 1px solid var(--theme-splitter-color)
-}
-
 #snapshot-filmstrip > .filmstrip-thumbnail:hover,
 #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
   border: 1px solid var(--theme-highlight-blue);
diff --git a/devtools/client/themes/scratchpad.css b/devtools/client/themes/scratchpad.css
index 4be2e1ad70a2..651d4efe9f23 100644
--- a/devtools/client/themes/scratchpad.css
+++ b/devtools/client/themes/scratchpad.css
@@ -1,8 +1,6 @@
-%if 0
 /* 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/. */
-%endif
 
 #scratchpad-sidebar > tabs {
   height: 0;
diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css
index 3820bfc0d1bc..92f67d4ca90a 100644
--- a/devtools/client/themes/styleeditor.css
+++ b/devtools/client/themes/styleeditor.css
@@ -67,14 +67,7 @@
 .stylesheet-sidebar {
   max-width: 400px;
   min-width: 100px;
-}
-
-.theme-light .stylesheet-sidebar {
-  border-color: #aaa; /* Splitters */
-}
-
-.theme-dark .stylesheet-sidebar {
-  border-color: #000;  /* Splitters */
+  border-color: var(--theme-splitter-color);
 }
 
 .theme-light .media-rule-label {
diff --git a/devtools/client/themes/toolbars.inc.css b/devtools/client/themes/toolbars.inc.css
index 28add311e628..57ad91dbf651 100644
--- a/devtools/client/themes/toolbars.inc.css
+++ b/devtools/client/themes/toolbars.inc.css
@@ -563,47 +563,21 @@
 }
 
 .devtools-sidebar-tabs tabs > tab:first-child {
-  -moz-border-start-width: 0;
+  border-inline-start-width: 0;
 }
 
-.theme-dark .devtools-sidebar-tabs tabs > tab:hover {
-  background: hsla(206,37%,4%,.2);
+.devtools-sidebar-tabs tabs > tab:hover {
+  background: rgba(0, 0, 0, 0.12);
 }
 
-.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active {
-  background: hsla(206,37%,4%,.4);
+.devtools-sidebar-tabs tabs > tab:hover:active {
+  background: rgba(0, 0, 0, 0.2);
 }
 
-.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
-  background: hsla(206,37%,4%,.2);
-}
-
-.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
-  background: hsla(206,37%,4%,.4);
-}
-
-.theme-dark .devtools-sidebar-tabs tabs > tab[selected],
-.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
+.devtools-sidebar-tabs tabs > tab[selected],
+.devtools-sidebar-tabs tabs > tab[selected]:hover:active {
   color: var(--theme-selection-color);
-  background: #1d4f73;
-}
-
-.theme-light .devtools-sidebar-tabs tabs > tab:hover {
-  background: #ddd;
-}
-
-.theme-light .devtools-sidebar-tabs tabs > tab:hover:active {
-  background: #ddd;
-}
-
-.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
-  background: #ddd;
-}
-
-.theme-light .devtools-sidebar-tabs tabs > tab[selected],
-.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
-  color: var(--theme-selection-color);
-  background: #4c9ed9;
+  background: var(--theme-selection-background);
 }
 
 /* Toolbox - moved from toolbox.css.
diff --git a/devtools/client/themes/webaudioeditor.css b/devtools/client/themes/webaudioeditor.css
index 63d70b33dc09..dfb178660a0a 100644
--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -30,10 +30,10 @@ svg {
 }
 
 .theme-dark .edgePath path {
-  stroke: #b6babf; /* Grey foreground text */
+  stroke: var(--theme-body-color-alt);
 }
 .theme-light .edgePath path {
-  stroke: #aaaaaa; /* Splitters */
+  stroke: var(--theme-splitter-color);
 }
 
 /* AudioParam connection edges */
@@ -42,27 +42,21 @@ g.edgePath.param-connection {
 }
 
 .theme-dark .edgePath.param-connection path {
-  stroke: #b6babf; /* Grey foreground text */
+  stroke: var(--theme-body-color-alt);
 }
 .theme-light .edgePath.param-connection path {
-  stroke: #aaaaaa; /* Splitters */
+  stroke: var(--theme-splitter-color);
 }
 
 /* Labels in AudioParam connection should have background that match
  * the main background so there's whitespace around the label, on top of the
  * dotted lines. */
-.theme-dark g.edgeLabel rect {
-  fill: #14171a;
+g.edgeLabel rect {
+  fill: var(--theme-body-background);
 }
-.theme-light g.edgeLabel rect {
-  fill: #fcfcfc; /* Background - Editor */
-}
-.theme-dark g.edgeLabel tspan {
+g.edgeLabel tspan {
   fill: var(--theme-body-color-alt);
 }
-.theme-light g.edgeLabel tspan {
-  fill: #585959; /* Grey foreground text */
-}
 
 /* Audio Nodes */
 .nodes rect {
@@ -219,11 +213,8 @@ text {
   background-color: transparent;
 }
 
-.theme-dark #audio-node-toolbar toolbarbutton[checked] {
-  background-color: #1d4f73; /* Select Highlight Blue */
-}
-.theme-light #audio-node-toolbar toolbarbutton[checked] {
-  background-color: #4c9ed9; /* Select Highlight Blue */
+#audio-node-toolbar toolbarbutton[checked] {
+  background-color: var(--theme-selection-background);
 }
 
 /* don't invert checked buttons so we can have white icons on light theme */
diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css
index c1f935062029..51968759f183 100644
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -26,7 +26,7 @@ a {
 .message > .prefix,
 .message > .timestamp {
   flex: none;
-  color: GrayText;
+  color: var(--theme-comment);
   margin: 3px 6px 0 0;
 }
 
@@ -131,11 +131,6 @@ a {
   margin-top: 0;
 }
 
-.jsterm-input-container {
-  border-top-width: 1px;
-  border-top-style: solid;
-}
-
 #output-wrapper {
   direction: ltr;
   overflow: auto;
@@ -253,11 +248,11 @@ a {
 }
 
 .message[category=network].mixed-content .url {
-  color: #FF0000;
+  color: var(--theme-highlight-red);
 }
 
 .message .learn-more-link {
-  color: -moz-nativehyperlinktext;
+  color: var(--theme-highlight-blue);
   margin: 0 6px;
 }
 
@@ -360,6 +355,18 @@ a {
 }
 
 /* JSTerm Styles */
+.jsterm-input-container {
+  background-color: var(--theme-tab-toolbar-background);
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
+.theme-light .jsterm-input-container {
+  /* For light theme use a white background for the input - it looks better
+     than off-white */
+  background-color: #fff;
+  border-top-color: #e0e0e0;
+}
+
 .jsterm-input-node,
 .jsterm-complete-node {
   border: none;
@@ -368,10 +375,15 @@ a {
   background-color: transparent;
 }
 
+.jsterm-complete-node {
+  color: var(--theme-comment);
+}
+
 .jsterm-input-node {
   background-image: -moz-image-rect(url("chrome://devtools/skin/themes/images/commandline-icon.png"), 0, 32, 16, 16);
   background-repeat: no-repeat;
   background-size: 16px 16px;
+  color: var(--theme-content-color1);
 }
 
 @media (min-resolution: 1.1dppx) {
@@ -398,7 +410,7 @@ a {
   margin-top: 5px;
   margin-bottom: 15px;
   -moz-margin-end: 15px;
-  border: 1px solid rgba(128, 128, 128, .5);
+  border: 1px solid var(--theme-splitter-color);
   border-radius: 3px;
 }
 
@@ -442,6 +454,11 @@ a {
 .navigation-marker .url {
   -moz-padding-end: 9px;
   text-decoration: none;
+  background: var(--theme-body-background);
+}
+
+.theme-light .navigation-marker .url {
+  background: #fff;
 }
 
 .stacktrace {
@@ -451,7 +468,7 @@ a {
   margin: 5px 0 0 0;
   max-height: 10em;
   overflow-y: auto;
-  border: 1px solid rgb(200,200,200);
+  border: 1px solid var(--theme-splitter-color);
   border-radius: 3px;
 }
 
@@ -514,49 +531,6 @@ a {
   background-position: -16px 0;
 }
 
-.jsterm-input-container {
-  background-color: var(--theme-tab-toolbar-background);
-  border-color: var(--theme-body-background);
-}
-
-.jsterm-input-node {
-  color: var(--theme-content-color1);
-}
-
-.jsterm-complete-node {
-  color: var(--theme-comment);
-}
-
-.navigation-marker .url {
-  background: var(--theme-body-background);
-}
-
-.theme-dark .inlined-variables-view iframe {
-  border-color: #333;
-}
-
-.theme-dark .stacktrace {
-  border-color: #333;
-}
-
-.theme-light .jsterm-input-container {
-  /* For light theme use a white background for the input - it looks better
-     than off-white */
-  background-color: #fff;
-  border-color: ThreeDShadow;
-}
-.theme-light .navigation-marker .url {
-  background: #fff;
-}
-
-.theme-light .inlined-variables-view iframe {
-  border-color: #ccc;
-}
-
-.theme-light .stacktrace {
-  border-color: #ccc;
-}
-
 @media (max-width: 500px) {
   .message > .timestamp {
     display: none;