second part of syncing LCARStrek with Firefox 45-48 devtools theme changes

[themes.git] / LCARStrek / devtools / canvasdebugger.css

diff --git a/LCARStrek/devtools/canvasdebugger.css b/LCARStrek/devtools/canvasdebugger.css
index a532f1004e78f5b9fa7ee0b6326ffd03b8f3c8cf..b57b929f21605146bb4e0a7d96bfe3d932c715d7 100644 (file)
--- a/LCARStrek/devtools/canvasdebugger.css
+++ b/LCARStrek/devtools/canvasdebugger.css
@@ -2,6 +2,13 @@
  * 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/. */
 
+: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 {
@@ -14,7 +21,7 @@
   min-width: 30px;
   min-height: 28px;
   margin: 0;
-  list-style-image: url("profiler-stopwatch.svg");
+  list-style-image: url("images/profiler-stopwatch.svg");
 }
 
 #empty-notice > button .button-text {
@@ -38,19 +45,7 @@
 }
 
 #record-snapshot {
-  list-style-image: url("chrome://devtools/skin/profiler-stopwatch-tbutton.svg");
-}
-
-#record-snapshot:hover {
-  list-style-image: url("chrome://devtools/skin/profiler-stopwatch.svg");
-}
-
-#record-snapshot[checked] {
-  list-style-image: url("chrome://devtools/skin/profiler-stopwatch-checked-tbutton.svg");
-}
-
-#record-snapshot[checked]:hover {
-  list-style-image: url("chrome://devtools/skin/profiler-stopwatch-checked.svg");
+  list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch-tbutton.svg");
 }
 
 /* Snapshots items */
@@ -116,55 +111,40 @@
 
 /* Debugging pane controls */
 
-#debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-}
-
 #resume {
-  list-style-image: url("debugger-play.png");
-  -moz-image-region: rect(0px,32px,16px,16px);
+  list-style-image: url("images/debugger-play.png");
 }
 
 #step-over {
-  list-style-image: url("debugger-step-over.png");
+  list-style-image: url("images/debugger-step-over.png");
 }
 
 #step-in {
-  list-style-image: url("debugger-step-in.png");
+  list-style-image: url("images/debugger-step-in.png");
 }
 
 #step-out {
-  list-style-image: url("debugger-step-out.png");
+  list-style-image: url("images/debugger-step-out.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   #resume {
-    list-style-image: url(debugger-play@2x.png);
-    -moz-image-region: rect(0px,64px,32px,32px);
+    list-style-image: url(images/debugger-play@2x.png);
   }
 
   #step-over {
-    list-style-image: url(debugger-step-over@2x.png);
+    list-style-image: url(images/debugger-step-over@2x.png);
   }
 
   #step-in {
-    list-style-image: url(debugger-step-in@2x.png);
+    list-style-image: url(images/debugger-step-in@2x.png);
   }
 
   #step-out {
-    list-style-image: url(debugger-step-out@2x.png);
+    list-style-image: url(images/debugger-step-out@2x.png);
   }
 }
 
-#debugging-controls > toolbarbutton {
-  transition: opacity 0.15s ease-in-out;
-}
-
-#debugging-controls > toolbarbutton[disabled=true] {
-  opacity: 0.5;
-}
-
 #calls-slider {
   -moz-padding-end: 24px;
 }
@@ -210,25 +190,25 @@
 }
 
 .call-item-gutter {
-  width: calc(3em + 22px);
-  -moz-padding-start: 22px;
-  -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;
-  -moz-margin-end: 6px;
+  border-inline-end: 1px solid var(--theme-splitter-color);
+  margin-inline-end: 6px;
+  background-color: var(--theme-sidebar-background);
+  color: var(--theme-content-color3);
 }
 
 .selected .call-item-gutter {
-  background-image: url("editor-debug-location.png");
-  background-repeat: no-repeat;
-  background-position: 6px center;
-  background-size: 12px;
+  background-color: #008484;
+  color: #000000;
 }
 
 @media (min-resolution: 1.1dppx) {
   .selected .call-item-gutter {
-    background-image: url("editor-debug-location@2x.png");
+    background-image: url("images/editor-debug-location@2x.png");
   }
 }