Make control bar transparent when idle

app/styles/base.css

@@ -142,9 +142,14 @@ input[type=button]:active, select:active {
   position: fixed;
   z-index: 2;
 
+  transition: 0.5s ease-in-out;
+
   /* Edge misrenders animations wihthout this */
   transform: translateX(0);
 }
+:root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
+  opacity: 0.8;
+}
 
 #noVNC_control_bar {
   position: relative;

app/ui.js

@@ -41,6 +41,7 @@ var UI;
         resizeTimeout: null,
         statusTimeout: null,
         hideKeyboardTimeout: null,
+        controlbarTimeout: null,
 
         keyboardVisible: false,
 
@@ -188,6 +189,15 @@ var UI;
         },
 
         addControlbarHandlers: function() {
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mousemove', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mouseup', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mousedown', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('keypress', UI.activateControlbar);
+
             document.getElementById("noVNC_view_drag_button")
                 .addEventListener('click', UI.toggleViewDrag);
             document.getElementById("noVNC_send_ctrl_alt_del_button")
@@ -213,6 +223,15 @@ var UI;
             document.getElementById("noVNC_keyboardinput")
                 .addEventListener('submit', function () { return false; });
 
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchstart', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchmove', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchend', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('input', UI.activateControlbar);
+
             window.addEventListener('load', UI.keyboardinputReset);
         },
 
@@ -441,6 +460,20 @@ var UI;
             document.getElementById('noVNC_status').classList.remove("noVNC_open");
         },
 
+        activateControlbar: function() {
+            clearTimeout(UI.controlbarTimeout);
+            // We manipulate the anchor instead of the actual control
+            // bar in order to avoid creating new a stacking group
+            document.getElementById('noVNC_control_bar_anchor')
+                .classList.remove("noVNC_idle");
+            UI.controlbarTimeout = window.setTimeout(UI.idleControlbar, 2000);
+        },
+
+        idleControlbar: function() {
+            document.getElementById('noVNC_control_bar_anchor')
+                .classList.add("noVNC_idle");
+        },
+
 /* ------^-------
  *    /VISUAL
  * ==============