Reactor backgrounds

- Make reactor backgrounds respect the theme
- Change the reactor infrastructure to overwrite the canvas with 255,255,255,0
  (transparent), rather than 255,255,255,1 (WHITE), pixels, to make reactor
  images and values look the same as they would at the REPL

Author: jpolitz

src/web/css/editor.css

@@ -480,6 +480,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket-region {
   cursor: pointer;
 }
 
+div.repl-animation {
+  background-color: var(--background) !important;
+}
+
 div.trace {
   overflow-x: auto;
   padding-top: 1px;

src/web/js/repl-ui.js

@@ -342,7 +342,7 @@
         });
       var currentZIndex = 15000;
       runtime.setParam("current-animation-port", function(dom, title, closeCallback) {
-          var animationDiv = $("<div>").css({"z-index": currentZIndex + 1});
+          var animationDiv = $("<div class='repl-animation'>").css({"z-index": currentZIndex + 1});
           animationDivs.push(animationDiv);
           output.append(animationDiv);
           function onClose() {

src/web/js/trove/world.js

@@ -532,7 +532,7 @@
               }
               var ctx = reusableCanvas.getContext("2d");
               ctx.save();
-              ctx.fillStyle = "rgba(255,255,255,1)";
+              ctx.fillStyle = "rgba(255,255,255,0)";
               ctx.fillRect(0, 0, width, height);
               ctx.restore();
               theImage.render(ctx, 0, 0);