From 28e80a05cdd05682bd45ef0d5101292b3f7b267e Mon Sep 17 00:00:00 2001
From: Robert Kaiser <kairo@kairo.at>
Date: Sat, 21 Mar 2015 18:44:19 +0100
Subject: [PATCH] fourth part of syncing LCARStrek with Firefox 36 windows
 theme changes

---
 LCARStrek/browser/devtools/dark-theme.css     |  18 +--
 LCARStrek/browser/devtools/ruleview.css       |   6 +-
 LCARStrek/browser/devtools/shadereditor.css   |  15 +-
 LCARStrek/browser/devtools/splitview.css      |   4 +-
 LCARStrek/browser/devtools/styleeditor.css    | 150 ++++++++++++------
 LCARStrek/browser/devtools/webaudioeditor.css |  18 +--
 LCARStrek/browser/devtools/webconsole.css     |  14 +-
 LCARStrek/browser/devtools/widgets.css        |  84 +++++-----
 8 files changed, 175 insertions(+), 134 deletions(-)

diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css
index 7193fc78..b9c7f60b 100644
--- a/LCARStrek/browser/devtools/dark-theme.css
+++ b/LCARStrek/browser/devtools/dark-theme.css
@@ -437,7 +437,7 @@ div.CodeMirror span.eval-text {
 
 .devtools-toolbar checkbox {
   /* LCARStrek checkbox colors don't work well against toolbar background */
-  background-color: #000000;
+  background-color: var(--theme-toolbar-background);
   padding: 2px;
 }
 .devtools-toolbar checkbox .checkbox-check {
@@ -455,7 +455,7 @@ div.CodeMirror span.eval-text {
 
 .devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted #008484;
+  outline: 1px dotted var(--theme-selection-color);
 }
 
 .devtools-toolbarbutton[standalone] {
@@ -537,7 +537,7 @@ div.CodeMirror span.eval-text {
 .devtools-toolbarbutton[checked=true],
 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
 /*  background: rgba(29, 79, 115, .7); / Select highlight blue /
-  color: #f5f7fa;*/
+  color: var(--theme-selection-color); */
 }
 
 .devtools-menulist[open=true],
@@ -548,7 +548,7 @@ div.CodeMirror span.eval-text {
 .devtools-toolbarbutton[checked=true]:hover,
 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
 /*  background: rgba(29, 79, 115, .8); / Select highlight blue /
-  color: #f5f7fa; */
+  color: var(--theme-selection-color); */
 }
 
 .devtools-toolbarbutton[checked=true]:hover {
@@ -620,7 +620,7 @@ div.CodeMirror span.eval-text {
 }
 
 .devtools-no-search-result {
-  border-color: #FF0000 !important;
+  border-color: var(--theme-highlight-red) !important;
 }
 
 /* Close button */
@@ -906,13 +906,13 @@ div.CodeMirror span.eval-text {
 
 .devtools-tab:hover,
 .devtools-tab:hover:active {
-  background-color: #FFCF00;
-  color: #000000;
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
 }
 
 .devtools-tab[selected] {
-  background-color: #008484;
-  color: #000000;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .devtools-tab > spacer {
diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css
index 9bda6bb0..ff7b22a3 100644
--- a/LCARStrek/browser/devtools/ruleview.css
+++ b/LCARStrek/browser/devtools/ruleview.css
@@ -45,7 +45,7 @@
 
 /* User agent styles are not editable, display them differently */
 .ruleview-rule[uneditable=true] {
-  background: #282425; /* Tab Toolbar */
+  background: var(--theme-toolbar-background);
 }
 
 .ruleview-rule[uneditable=true] :focus {
@@ -53,7 +53,7 @@
 }
 
 .ruleview-rule[uneditable=true] .theme-link {
-  color: #336699; /* Blue - Grey */
+  color: var(--theme-text-blue);
 }
 
 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
@@ -199,7 +199,7 @@
 }
 
 .ruleview-property[dirty] {
-  border-left-color: #9C9CFF; /* Green */
+  border-left-color: var(--theme-highlight-green);
 }
 
 .ruleview-namecontainer > .ruleview-propertyname,
diff --git a/LCARStrek/browser/devtools/shadereditor.css b/LCARStrek/browser/devtools/shadereditor.css
index c03bea59..9e034b06 100644
--- a/LCARStrek/browser/devtools/shadereditor.css
+++ b/LCARStrek/browser/devtools/shadereditor.css
@@ -12,9 +12,8 @@ window {
 
 .notice-container {
   margin-top: -50vh;
-
-  background-color: #000000;
-  color: #FF9F00;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
 }
 
 #reload-notice {
@@ -84,18 +83,18 @@ window {
 /* Shader source editors */
 
 #editors-splitter {
-  border-color: #000000;
+  border-color: var(--theme-contrastsidebar-bordercolor);
 }
 
 .editor-label {
-  background-color: #A09090;
   padding: 1px 12px;
-  color: #000000;
+  background: var(--theme-contrastsidebar-background);
+  color: var(--theme-contrastsidebar-color);
 }
 
 .editor-label[selected] {
-  background-color: #008484;
-  color: #FFCF00;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 /* Responsive sidebar */
diff --git a/LCARStrek/browser/devtools/splitview.css b/LCARStrek/browser/devtools/splitview.css
index f41403b9..38963094 100644
--- a/LCARStrek/browser/devtools/splitview.css
+++ b/LCARStrek/browser/devtools/splitview.css
@@ -4,8 +4,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .splitview-nav-container {
-  background-color: #000000;
-  color: #FF9F00;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
 }
 
 .loading .splitview-nav-container {
diff --git a/LCARStrek/browser/devtools/styleeditor.css b/LCARStrek/browser/devtools/styleeditor.css
index 6c142455..ff98fd00 100644
--- a/LCARStrek/browser/devtools/styleeditor.css
+++ b/LCARStrek/browser/devtools/styleeditor.css
@@ -13,54 +13,10 @@ window:not([windowtype]) {
   background-color: #000000;
 }
 
-.csscoverage-report {
-  background: #A09090; /* Toolbars */
-}
-
-.csscoverage-report-container {
-  height: 100vh;
-  padding: 10px;
-}
-
-.csscoverage-report-content {
-  font-size: 13px;
-  margin: 0 auto;
-  max-width: 600px;
-  padding: 0 10px;
-}
-
-.csscoverage-report h1,
-.csscoverage-report h2,
-.csscoverage-report h3 {
-  font-weight: bold;
-}
-
-.csscoverage-report textarea {
-  width: 100%;
-  height: 100px;
-}
-
-.csscoverage-report > .csscoverage-toolbar {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-.csscoverage-report > .csscoverage-toolbarbutton {
-  min-width: 4em;
-  min-height: 100vh;
-  margin: 0;
-  padding: 0;
-  border-radius: 0;
-  border-top: none;
-  border-bottom: none;
-  -moz-border-start: none;
-}
-
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
-  color: #9C9CFF;
+  color: var(--theme-highlight-blue);
 }
 
 .stylesheet-name {
@@ -70,7 +26,7 @@ window:not([windowtype]) {
 .stylesheet-rule-count,
 .stylesheet-linked-file,
 .stylesheet-saveButton {
-  color: #FF9F00;
+  color: var(--theme-body-color);
 }
 
 .stylesheet-saveButton {
@@ -80,13 +36,13 @@ window:not([windowtype]) {
 
 .splitview-active .stylesheet-title,
 .splitview-active .stylesheet-name {
-  color: #FFCF00;
+  color: var(--theme-highlight-lightorange);
 }
 
 .splitview-active .stylesheet-rule-count,
 .splitview-active .stylesheet-linked-file,
 .splitview-active .stylesheet-saveButton {
-  color: #E7ADE7;
+  color: var(--theme-highlight-pink);
 }
 
 .splitview-nav:focus {
@@ -179,10 +135,6 @@ li.linked-file-error .stylesheet-linked-file:after {
   font-size: 11px;
 }
 
-.placeholder {
-  color: white;
-}
-
 .placeholder a {
   text-decoration: underline;
 }
@@ -230,3 +182,97 @@ h3 {
     width: 180px;
   }
 }
+
+.csscoverage-report {
+  background-color: var(--theme-contrastsidebar-background);
+}
+
+.csscoverage-report-container {
+  height: 100vh;
+  padding: 10px;
+}
+
+.csscoverage-report-content {
+  margin: 20px auto;
+  -moz-column-width: 300px;
+  font-size: 13px;
+}
+
+.csscoverage-report h1 {
+  font-size: 120%;
+}
+
+.csscoverage-report h2 {
+  font-size: 110%;
+}
+
+.csscoverage-report h1,
+.csscoverage-report h2,
+.csscoverage-report h3 {
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.csscoverage-list:after {
+  content: ', ';
+}
+
+.csscoverage-list:last-child:after {
+  display: none;
+}
+
+.csscoverage-report textarea {
+  width: 100%;
+  height: 100px;
+}
+
+.csscoverage-report a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.csscoverage-report > .csscoverage-toolbar {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.csscoverage-report > .csscoverage-toolbarbutton {
+  min-width: 4em;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+  -moz-border-start: none;
+}
+
+.chart-colored-blob[name="Used Preload"] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);;
+}
+
+.chart-colored-blob[name=Used] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
+}
+
+.chart-colored-blob[name=Unused] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
+}
+
+/* Undo 'largest' customization */
+.pie-chart-slice[largest] {
+  stroke-width: 1px;
+  stroke: rgba(0,0,0,0.2);
+}
+
+.csscoverage-report .pie-chart-slice {
+  cursor: default;
+}
+
+.csscoverage-report-chart {
+  margin: 0 50px;
+}
diff --git a/LCARStrek/browser/devtools/webaudioeditor.css b/LCARStrek/browser/devtools/webaudioeditor.css
index 18b1d08d..d4710420 100644
--- a/LCARStrek/browser/devtools/webaudioeditor.css
+++ b/LCARStrek/browser/devtools/webaudioeditor.css
@@ -8,8 +8,8 @@
 }
 
 .notice-container {
-  background-color: #000000; /* Toolbars */
-  color: #A09090; /* Light foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
 }
 
 #reload-notice {
@@ -56,10 +56,10 @@ g.edgePath.param-connection {
  * the main background so there's whitespace around the label, on top of the
  * dotted lines. */
 g.edgeLabel rect {
-  fill: #000000;
+  fill: var(--theme-body-background);
 }
 g.edgeLabel tspan {
-  fill: #9C9CFF; /* Grey foreground text */
+  fill: var(--theme-Highlight-color-blue);
 }
 
 /* Audio Nodes */
@@ -69,12 +69,12 @@ g.edgeLabel tspan {
 }
 
 .nodes rect {
-  stroke: #9C9CFF; /* Tab toolbar */
-  fill: #000000; /* Toolbars */
+  stroke: var(--theme-splitter-color);
+  fill: var(--theme-toolbar-background);
 }
 
 .nodes g.selected rect {
-  fill: #008484; /* Select Highlight Blue */
+  fill: var(--theme-selection-background);
 }
 
 /* Text in nodes and edges */
@@ -86,10 +86,10 @@ text {
 }
 
 text {
-  fill: #A09090; /* Grey foreground text */
+  fill: var(--theme-body-color-alt);
 }
 g.selected text {
-/*  fill: #f0f1f2; / Toolbars */
+/*  fill: var(--theme-toolbar-background); */
 }
 
 .nodes text {
diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css
index a0540c99..b10d94cd 100644
--- a/LCARStrek/browser/devtools/webconsole.css
+++ b/LCARStrek/browser/devtools/webconsole.css
@@ -182,7 +182,7 @@ a {
 }
 
 #output-container.hideTimestamps > .message > .indent {
-  background-color: #000000; /* .theme-body */
+  background-color: var(--theme-body-background);
 }
 
 .filtered-by-type,
@@ -238,7 +238,7 @@ a {
 }
 
 .console-string {
-  color: #FF9F00;
+  color: var(--theme-highlight-orange);
 }
 
 .message[severity=error] .console-string {
@@ -515,20 +515,20 @@ a {
 
 /* Replace these values with CSS variables as available */
 .jsterm-input-container {
-  background-color: #000000; /* tabToolbarBackgroundColor */
-  border-color: #9C9CFF; /* mainBackgroundColor */
+  background-color: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
 }
 
 .jsterm-input-node {
-  color: #E7ADE7; /* textColor */
+  color: var(--theme-highlight-pink);
 }
 
 .jsterm-complete-node {
-  color: #A09090; /* commentColor */
+  color: var(--theme-comment);
 }
 
 .navigation-marker .url {
-  background: #000000; /* mainBackgroundColor */
+  background: var(--theme-body-background);
 }
 
 .inlined-variables-view iframe {
diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css
index 4c0826dc..0d6110bd 100644
--- a/LCARStrek/browser/devtools/widgets.css
+++ b/LCARStrek/browser/devtools/widgets.css
@@ -120,14 +120,14 @@
 .scrollbutton-down:-moz-locale-dir(rtl) {
   border-right: solid 1px rgba(255, 255, 255, .1);
   border-left: solid 1px transparent;
-  box-shadow: 3px 0px 3px -3px #181d20;
+  box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
 }
 
 .scrollbutton-down:-moz-locale-dir(ltr),
 .scrollbutton-up:-moz-locale-dir(rtl) {
   border-right: solid 1px transparent;
   border-left: solid 1px rgba(255, 255, 255, .1);
-  box-shadow: -3px 0px 3px -3px #181d20;
+  box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
 }
 
 .scrollbutton-up[disabled],
@@ -162,12 +162,12 @@
 
 #breadcrumb-separator-before,
 #breadcrumb-separator-after:after {
-  background: #008484; /* Select Highlight Blue */
+  background: var(--theme-selection-background);
 }
 
 #breadcrumb-separator-after,
 #breadcrumb-separator-before:after {
-  background: #000000; /* Toolbars */
+  background: var(--theme-toolbar-background);
 }
 
 /* This chevron arrow cannot be replicated easily in CSS, so we are using
@@ -191,7 +191,7 @@
 }
 
 .breadcrumbs-widget-item {
-  background-color: #000000;
+  background-color: var(--theme-toolbar-background);
   min-height: 24px;
   min-width: 65px;
   margin: 0;
@@ -199,17 +199,17 @@
   border: none;
   border-radius: 0;
   outline: none;
-  color: #FF9F00;
+  color: var(--theme-content-color1);
 }
 
 .breadcrumbs-widget-item:hover {
-  background-color: #FFCF00;
-  color: #000000;
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
 }
 
 .breadcrumbs-widget-item[checked]:not(:hover) {
-  background-color: #008484;
-  color: #000000;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .breadcrumbs-widget-item[siblings-menu-open],
@@ -274,30 +274,30 @@
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
-  color: #FF9F00; /* Foreground (Text) - Light */
+  color: var(--theme-highlight-lightorange);
 }
 
 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
-  color: #000000 !important;
+  color: var(--theme-hover-color) !important;
 }
 
 .breadcrumbs-widget-item {
-  color: #FFCF00; /* Foreground (Text) - Light */
+  color: var(--theme-highlight-lightorange);
 }
 
 .breadcrumbs-widget-item-id {
-  color: #A09090; /* Foreground (Text) - Grey */
+  color: var(--theme-body-color-alt);
 }
 
 .breadcrumbs-widget-item-classes {
-  color: #FF9F00; /* Content (Text) - Light */
+  color: var(--theme-content-color1);
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
-  color: #FFCF00; /* Light Orange */
+  color: var(--theme-highlight-lightorange);
 }
 
 /* SimpleListWidget */
@@ -308,18 +308,18 @@
 }
 
 .simple-list-widget-item.selected {
-  background-color: #008484; /* Select Highlight Blue */
-  color: #FFCF00; /* Light foreground text */
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .simple-list-widget-item:not(.selected):hover {
-  background-color: #FFCF00;
-  color: #FFCF00;
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
 }
 
 .simple-list-widget-perma-text,
 .simple-list-widget-empty-text {
-  color: #8050B0;
+  color: var(--theme-body-color-alt);
   padding: 4px 8px;
 }
 
@@ -334,7 +334,7 @@
 .fast-list-widget-empty-text {
   padding: 12px;
   font-weight: 600;
-  color: #8050B0;
+  color: var(--theme-body-color-alt);
 }
 
 /* SideMenuWidget */
@@ -344,9 +344,6 @@
 .side-menu-widget-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
-
-  background-color: #000000;
-  color: #FF9F00;
 }
 
 .side-menu-widget-container:-moz-locale-dir(ltr),
@@ -371,9 +368,8 @@
 
 .side-menu-widget-group-title {
   padding: 4px;
-
-  background-color: #A09090;
-  color: #000000;
+  background-color: var(--theme-contrastsidebar-background);
+  color: var(--theme-contrastsidebar-color);
 }
 
 /* SideMenuWidget items */
@@ -391,8 +387,8 @@
 }
 
 .side-menu-widget-item.selected {
-  background-color: #008484 !important;
-  color: #000000;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .side-menu-widget-item-arrow {
@@ -438,13 +434,12 @@
   /* To compensate for the .side-menu-widget-item-contents padding. */
   -moz-margin-start: -4px;
   -moz-margin-end: -8px;
-
-  background-color: #000000;
+  color: var(--theme-selection-color);
 }
 
 .side-menu-widget-item-other.selected {
-  background-color: #008484;
-  color: #000000;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .side-menu-widget-item-other:first-of-type {
@@ -475,12 +470,13 @@
 
 /* SideMenuWidget misc */
 
+.theme-dark .side-menu-widget-container,
+.theme-dark .side-menu-widget-empty-text {
+  background-color: var(--theme-toolbar-background);
+}
+
 .side-menu-widget-empty-text {
   padding: 12px;
-
-  background-color: #000000;
-  font-weight: 600;
-  color: #A09090;
 }
 
 /* VariablesView */
@@ -491,14 +487,14 @@
 }
 
 .variables-view-empty-notice {
-  color: #A09090;
+  color: var(--theme-body-color-alt);
   padding: 2px;
 }
 
 .variables-view-scope:focus > .title,
 .theme-dark .variable-or-property:focus > .title {
-  background-color: #008484; /* Selection colors */
-  color: #FFCF00;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .variables-view-scope > .title {
@@ -981,12 +977,12 @@
 }
 
 .generic-chart-container {
-  color: #A09090; /* Light foreground text */
+  color: var(--theme-body-color-alt);
 }
 
 .chart-colored-blob {
-  fill: #9C9CFF; /* Light content text */
-  background: #9C9CFF;
+  fill: var(--theme-highlight-blue);
+  background: var(--theme-highlight-blue);
 }
 
 /* Charts: Pie */
-- 
2.43.0