ISSUE-1609: Create communication mechanism between windows, implement dark theme for sticks window using it. Small fix for Tip popup window.

src/js/tabs/receiver_msp.js

@@ -1,10 +1,15 @@
 "use strict";
 
+let css_dark = [
+    '/css/main-dark.css'
+  ];
+
+
 var
     CHANNEL_MIN_VALUE = 1000,
     CHANNEL_MID_VALUE = 1500,
     CHANNEL_MAX_VALUE = 2000,
-    
+
     // What's the index of each channel in the MSP channel list?
     channelMSPIndexes = {
         Roll: 0,
@@ -16,7 +21,7 @@ var
         Aux3: 6,
         Aux4: 7,
     },
-    
+
     // Set reasonable initial stick positions (Mode 2)
     stickValues = {
         Throttle: CHANNEL_MIN_VALUE,
@@ -28,21 +33,31 @@ var
         Aux3: CHANNEL_MIN_VALUE,
         Aux4: CHANNEL_MIN_VALUE
     },
-    
+
     // First the vertical axis, then the horizontal:
     gimbals = [
         ["Throttle", "Yaw"],
         ["Pitch", "Roll"],
     ],
-    
+
     gimbalElems,
     sliderElems,
-    
+
     enableTX = false;
 
 // This is a hack to get the i18n var of the parent, but the localizePage not works
 const i18n = opener.i18n;
 
+let watchers = {
+    darkTheme: (val) => {
+        if (val) {
+            applyDarkTheme();
+        } else {
+            applyNormalTheme();
+        }
+    }
+};
+
 $(document).ready(function () {
     $('[i18n]:not(.i18n-replaced)').each(function() {
         var element = $(this);
@@ -50,20 +65,22 @@ $(document).ready(function () {
         element.html(i18n.getMessage(element.attr('i18n')));
         element.addClass('i18n-replaced');
     });
-})
+
+    windowWatcherUtil.bindWatchers(window, watchers);
+});
 
 function transmitChannels() {
-    var 
+    var
         channelValues = [0, 0, 0, 0, 0, 0, 0, 0];
 
     if (!enableTX) {
         return;
     }
-    
+
     for (var stickName in stickValues) {
         channelValues[channelMSPIndexes[stickName]] = stickValues[stickName];
     }
-    
+
     // Callback given to us by the window creator so we can have it send data over MSP for us:
     if (!window.setRawRx(channelValues)) {
         // MSP connection has gone away
@@ -73,7 +90,7 @@ function transmitChannels() {
 
 function stickPortionToChannelValue(portion) {
     portion = Math.min(Math.max(portion, 0.0), 1.0);
-    
+
     return Math.round(portion * (CHANNEL_MAX_VALUE - CHANNEL_MIN_VALUE) + CHANNEL_MIN_VALUE);
 }
 
@@ -85,15 +102,15 @@ function updateControlPositions() {
     for (var stickName in stickValues) {
         var
             stickValue = stickValues[stickName];
-        
+
         // Look for the gimbal which corresponds to this stick name
         for (var gimbalIndex in gimbals) {
-            var 
+            var
                 gimbal = gimbals[gimbalIndex],
                 gimbalElem = gimbalElems.get(gimbalIndex),
                 gimbalSize = $(gimbalElem).width(),
                 stickElem = $(".control-stick", gimbalElem);
-            
+
             if (gimbal[0] == stickName) {
                 stickElem.css('top', (1.0 - channelValueToStickPortion(stickValue)) * gimbalSize + "px");
                 break;
@@ -106,62 +123,70 @@ function updateControlPositions() {
 }
 
 function handleGimbalMouseDrag(e) {
-    var 
+    var
         gimbal = $(gimbalElems.get(e.data.gimbalIndex)),
         gimbalOffset = gimbal.offset(),
         gimbalSize = gimbal.width();
-    
+
     stickValues[gimbals[e.data.gimbalIndex][0]] = stickPortionToChannelValue(1.0 - (e.pageY - gimbalOffset.top) / gimbalSize);
     stickValues[gimbals[e.data.gimbalIndex][1]] = stickPortionToChannelValue((e.pageX - gimbalOffset.left) / gimbalSize);
-    
+
     updateControlPositions();
 }
 
 function localizeAxisNames() {
     for (var gimbalIndex in gimbals) {
-        var 
+        var
             gimbal = gimbalElems.get(gimbalIndex);
-        
+
         $(".gimbal-label-vert", gimbal).text(i18n.getMessage("controlAxis" + gimbals[gimbalIndex][0]));
         $(".gimbal-label-horz", gimbal).text(i18n.getMessage("controlAxis" + gimbals[gimbalIndex][1]));
     }
-    
+
     for (var sliderIndex = 0; sliderIndex < 4; sliderIndex++) {
         $(".slider-label", sliderElems.get(sliderIndex)).text(i18n.getMessage("controlAxisAux" + (sliderIndex + 1)));
     }
 }
 
+function applyDarkTheme() {
+    css_dark.forEach((el) => $('link[href="' + el + '"]').prop('disabled', false));
+};
+
+function applyNormalTheme() {
+    css_dark.forEach((el) => $('link[href="' + el + '"]').prop('disabled', true));
+};
+
 $(document).ready(function() {
     $(".button-enable .btn").click(function() {
         var
             shrinkHeight = $(".warning").height();
-        
+
         $(".warning").slideUp("short", function() {
             chrome.app.window.current().innerBounds.minHeight -= shrinkHeight;
             chrome.app.window.current().innerBounds.height -= shrinkHeight;
             chrome.app.window.current().innerBounds.maxHeight -= shrinkHeight;
         });
-        
+
         enableTX = true;
     });
-    
+
     gimbalElems = $(".control-gimbal");
     sliderElems = $(".control-slider");
-    
+
     gimbalElems.each(function(gimbalIndex) {
         $(this).on('mousedown', {gimbalIndex: gimbalIndex}, function(e) {
             if (e.which == 1) { // Only move sticks on left mouse button
                 handleGimbalMouseDrag(e);
-                
+
                 $(window).on('mousemove', {gimbalIndex: gimbalIndex}, handleGimbalMouseDrag);
             }
         });
     });
-    
+
     $(".slider", sliderElems).each(function(sliderIndex) {
-        var 
+        var
             initialValue = stickValues["Aux" + (sliderIndex + 1)];
-        
+
         $(this)
             .noUiSlider({
                 start: initialValue,
@@ -171,27 +196,27 @@ $(document).ready(function() {
                 }
             }).on('slide change set', function(e, value) {
                 value = Math.round(parseFloat(value));
-                
+
                 stickValues["Aux" + (sliderIndex + 1)] = value;
-                
+
                 $(".tooltip", this).text(value);
             });
-        
+
         $(this).append('<div class="tooltip"></div>');
-        
+
         $(".tooltip", this).text(initialValue);
     });
-    
-    /* 
+
+    /*
      * Mouseup handler needs to be bound to the window in order to receive mouseup if mouse leaves window.
      */
     $(window).mouseup(function(e) {
         $(this).off('mousemove', handleGimbalMouseDrag);
     });
-    
+
     localizeAxisNames();
-    
+
     updateControlPositions();
-    
+
     setInterval(transmitChannels, 50);
-});
+});