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

src/css/main-dark.css

@@ -11,6 +11,8 @@
     --paper: url(../../images/paper-dark.jpg);
     --ledAccent: #6e6e6e;
     --ledBackground: #424242;
+    --gimbalBackground: var(--subtleAccent);
+    --gimbalCrosshair: var(--mutedText);
     --switcherysecond: #858585;
 }
 
@@ -149,7 +151,7 @@ button {
 }
 
 .noUi-pips {
-    color: #dbdbdb;
+    color: var(--mutedText);
 }
 
 .jBox-container {
@@ -164,3 +166,7 @@ button {
     text-shadow: 0 1px 1px #ffffff;
     color: white;
 }
+
+.jBox-pointer:after {
+    background: #393b3a;
+}

src/css/main.css

@@ -13,6 +13,8 @@
     --paper: url(../../images/paper.jpg);
     --ledAccent: #adadad;
     --ledBackground: #e9e9e9;
+    --gimbalBackground: #eee;
+    --gimbalCrosshair: var(--subtleAccent);
     --switcherysecond: #c4c4c4;
 }
 
@@ -2141,3 +2143,33 @@ input {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+/*
+   noUi slider stylings
+*/
+
+.noUi-target {
+    background: var(--alternativeBackground);
+    border-color: var(--subtleAccent);
+    box-shadow: none;
+}
+
+.noUi-handle {
+    background: var(--sideBackground);
+    border-color: var(--subtleAccent);
+    box-shadow: none;
+}
+
+.noUi-handle:before,
+.noUi-handle:after {
+    background-color: var(--subtleAccent);
+}
+
+.noUi-background {
+    background: var(--alternativeBackground);
+    box-shadow: none;
+}
+
+.noUi-connect {
+    box-shadow: none;
+}

src/css/tabs-dark/adjustments-dark.css

@@ -15,7 +15,3 @@
     background-color: #3a3a3a;
     color: white;
 }
-
-.tab-adjustments .noUi-background {
-    background-color: #858585;
-}

src/css/tabs/adjustments.css

@@ -4,18 +4,10 @@
 
 .tab-adjustments .range .marker, .tab-adjustments .channel-slider .noUi-connect {
     background: var(--accent);
-    box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.6);
 }
 
 .noUi-target {
     border-radius: 4px;
-    border: 1px solid #D3D3D3;
-    box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.6);
-}
-
-.noUi-background {
-    box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.6);
-    background: #D2D2D2;
 }
 
 .tab-adjustments .adjustments {

src/css/tabs/receiver_msp.css

@@ -21,7 +21,7 @@ body {
     position: relative;
     width: 120px;
     height: 120px;
-    background-color: #eee;
+    background-color: var(--gimbalBackground);
     margin-left: 1em;
     margin-right: 1em;
     margin-bottom: 2em;
@@ -33,7 +33,7 @@ body {
 .crosshair {
     display: block;
     position: absolute;
-    background-color: var(--subtleAccent);
+    background-color: var(--gimbalCrosshair);
 }
 
 .crosshair-vert {

src/js/DarkTheme.js

@@ -29,27 +29,28 @@ var css_dark = [
 var DarkTheme = {
     configEnabled: undefined,
 };
-
-DarkTheme.setConfig = function(result) {
+DarkTheme.isDarkThemeEnabled = function (val) {
+    return val === 0 || val === 2 && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+DarkTheme.setConfig = function (result) {
     if (this.configEnabled != result) {
         this.configEnabled = result;
 
-        if (this.configEnabled === 0 || this.configEnabled === 2 && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        if (this.isDarkThemeEnabled(this.configEnabled)) {
             this.applyDark();
         } else {
             this.applyNormal();
         }
+
+        windowWatcherUtil.passValue(chrome.app.window.get("receiver_msp"), 'darkTheme', this.isDarkThemeEnabled(this.configEnabled));
+
     }
 };
 
-DarkTheme.applyDark = function() {
-    for (var i = 0; i < css_dark.length; i++) {
-        $('link[href="' + css_dark[i] + '"]').prop('disabled', false);
-    }
+DarkTheme.applyDark = function () {
+    css_dark.forEach((el) => $('link[href="' + el + '"]').prop('disabled', false));
 };
 
-DarkTheme.applyNormal = function() {
-    for (var i = 0; i < css_dark.length; i++) {
-        $('link[href="' + css_dark[i] + '"]').prop('disabled', true);
-    }
+DarkTheme.applyNormal = function () {
+    css_dark.forEach((el) => $('link[href="' + el + '"]').prop('disabled', true));
 };

src/js/tabs/receiver.js

@@ -319,6 +319,9 @@ TABS.receiver.initialize = function (callback) {
                         return false;
                     }
                 }
+
+                windowWatcherUtil.passValue(createdWindow, 'darkTheme', DarkTheme.isDarkThemeEnabled(DarkTheme.configEnabled));
+
             });
         });
 

src/js/tabs/receiver_msp.js

@@ -1,5 +1,10 @@
 "use strict";
 
+let css_dark = [
+    '/css/main-dark.css'
+  ];
+
+
 var
     CHANNEL_MIN_VALUE = 1000,
     CHANNEL_MID_VALUE = 1500,
@@ -43,6 +48,16 @@ var
 // 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,7 +65,9 @@ $(document).ready(function () {
         element.html(i18n.getMessage(element.attr('i18n')));
         element.addClass('i18n-replaced');
     });
-})
+
+    windowWatcherUtil.bindWatchers(window, watchers);
+});
 
 function transmitChannels() {
     var
@@ -131,6 +148,14 @@ function localizeAxisNames() {
     }
 }
 
+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

src/js/utils/window_watchers.js

@@ -0,0 +1,59 @@
+'use strict';
+
+/*
+  This utility is intended to communicate between chrome windows.
+  One window could watch passed values from another window and react to them.
+*/
+
+var windowWatcherUtil = {};
+
+windowWatcherUtil.invokeWatcher = function(bindingKey, bindingVal, watchersObject) {
+    if (watchersObject[bindingKey]) {
+        watchersObject[bindingKey](bindingVal);
+    }
+}
+
+windowWatcherUtil.iterateOverBindings = function(bindings, watchersObject) {
+    let entries = Object.entries(bindings);
+    for (const [key, val] of entries) {
+        this.invokeWatcher(key, val, watchersObject)
+    }
+}
+
+windowWatcherUtil.bindWatchers = function(windowObject, watchersObject) {
+    if (!windowObject.bindings) {
+        windowObject.bindings = {};
+    } else {
+        this.iterateOverBindings(windowObject.bindings, watchersObject);
+    }
+
+    windowObject.bindings = new Proxy(windowObject.bindings, {
+        set(target, prop, val, receiver) {
+            windowWatcherUtil.invokeWatcher(prop, val, watchersObject);
+            return Reflect.set(target, prop, val, receiver);
+        }
+    });
+}
+
+// 'Windows' here could be array or single window reference
+windowWatcherUtil.passValue = function(windows, key, val) {
+    let applyBinding = function(win, key, val) {
+    if (!win) {
+      return;
+    }
+
+        if (win.contentWindow.bindings) {
+            win.contentWindow.bindings[key] = val;
+        } else {
+            win.contentWindow.bindings = {
+                [key]: val
+            };
+        }
+    }
+
+    if (Array.isArray(windows)) {
+        windows.forEach((el) => applyBinding(el, key, val));
+    } else {
+        applyBinding(windows, key, val)
+    }
+}

src/main.html

@@ -85,6 +85,7 @@
     <script type="text/javascript" src="./js/libraries/jquery.ba-throttle-debounce.min.js"></script>
     <script type="text/javascript" src="./node_modules/inflection/inflection.min.js"></script>
     <script type="text/javascript" src="./js/libraries/analytics.js"></script>
+    <script type="text/javascript" src="./js/utils/window_watchers.js"></script>
     <script type="text/javascript" src="./js/injected_methods.js"></script>
     <script type="text/javascript" src="./js/ConfigStorage.js"></script>
     <script type="text/javascript" src="./js/data_storage.js"></script>

src/tabs/receiver_msp.html

@@ -5,6 +5,7 @@
 <script type="text/javascript" src="/node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
 <script type="text/javascript" src="/js/libraries/jquery.nouislider.all.min.js"></script>
 
+<script type="text/javascript" src="/js/utils/window_watchers.js"></script>
 <script type="text/javascript" src="/js/tabs/receiver_msp.js"></script>
 
 <link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.min.css">
@@ -12,6 +13,8 @@
 
 <link type="text/css" rel="stylesheet" href="/css/main.css" media="all" />
 <link type="text/css" rel="stylesheet" href="/css/tabs/receiver_msp.css" media="all" />
+
+<link type="text/css" rel="stylesheet" href="/css/main-dark.css" media="all" disabled/>
 </head>
 <body>
     <div class="control-gimbals">