Initial fixes for buggy menu hiding feature.

guacamole/src/main/webapp/client.xhtml

@@ -56,10 +56,14 @@
 
         <!-- Display -->
         <div id="display" class="guac-display guac-loading">
+            
+            <!-- Menu trigger -->
+            <div id="menuControl"></div>
+
             <!-- On-screen keyboard -->
             <div id="keyboardContainer"></div>
-        </div>
 
+        </div>
 
         <!-- Error Dialog-->
         <div id="errorDialog" class="errorDialogOuter">

guacamole/src/main/webapp/scripts/interface.js

@@ -2,8 +2,9 @@
 // UI Definition
 var GuacamoleUI = {
 
-    "display": document.getElementById("display"),
+    "display"     : document.getElementById("display"),
     "menu"        : document.getElementById("menu"),
+    "menuControl" : document.getElementById("menuControl"),
     "logo"        : document.getElementById("status-logo"),
     "state"       : document.getElementById("state"),
 
@@ -137,13 +138,84 @@ var GuacamoleUI = {
         window.location.href = "logout";
     };
 
-    GuacamoleUI.display.onmouseout = function() {
-        GuacamoleUI.showMenu();
-    };
+    var detectMenuOpenTimeout = null;
+    var detectMenuCloseTimeout = null;
 
-    GuacamoleUI.display.onmouseover = function() {
+    GuacamoleUI.menu.addEventListener('mouseover', function() {
+
+        // If we were waiting for menu close, we're not anymore
+        if (detectMenuCloseTimeout != null) {
+            window.clearTimeout(detectMenuCloseTimeout);
+            detectMenuCloseTimeout = null;
+        }
+
+    }, true);
+
+    GuacamoleUI.menu.addEventListener('mouseout', function(e) {
+        
+        // Get parent of the element the mouse pointer is leaving
+       	if (!e) e = window.event;
+        var target = e.relatedTarget || e.toElement;
+        
+        // Ensure target is not menu nor child of menu
+        var targetParent = target;
+        while (targetParent != null) {
+            if (targetParent == GuacamoleUI.menu) return;
+            targetParent = targetParent.parentNode;
+        }
+
+        // If not already waiting, start detection of mouse leave
+        if (detectMenuCloseTimeout == null) {
+            detectMenuCloseTimeout = window.setTimeout(function() {
                 GuacamoleUI.shadeMenu();
-    };
+                detectMenuCloseTimeout = null;
+            }, 750);
+        }
+ 
+    }, true);
+
+    // When mouse hovers over top of screen, start detection of mouse hover
+    GuacamoleUI.menuControl.addEventListener('mousemove', function() {
+
+        // If we were waiting for menu close, we're not anymore
+        if (detectMenuCloseTimeout != null) {
+            window.clearTimeout(detectMenuCloseTimeout);
+            detectMenuCloseTimeout = null;
+        }
+        
+        // Clear old timeout if mouse moved while we were waiting
+        if (detectMenuOpenTimeout != null) {
+            window.clearTimeout(detectMenuOpenTimeout);
+            detectMenuOpenTimeout = null;
+        }
+
+        // If not alread waiting, wait for 250ms before showing menu
+        detectMenuOpenTimeout = window.setTimeout(function() {
+            GuacamoleUI.showMenu();
+            detectMenuOpenTimeout = null;
+        }, 250);
+
+    }, true);
+
+    // When mouse leaves top of screen, cancel showing the menu
+    GuacamoleUI.menuControl.addEventListener('mouseout', function() {
+
+        // If we were waiting for menu open, we're not anymore
+        if (detectMenuOpenTimeout != null) {
+            window.clearTimeout(detectMenuOpenTimeout);
+            detectMenuCloseTimeout = null;
+        }
+
+        // If not already waiting, start detection of mouse leave
+        if (detectMenuCloseTimeout == null) {
+            detectMenuCloseTimeout = window.setTimeout(function() {
+                GuacamoleUI.shadeMenu();
+                detectMenuCloseTimeout = null;
+            }, 750);
+        }
+
+    }, true);
+
 
     // Reconnect button
     GuacamoleUI.buttons.reconnect.onclick = function() {
@@ -163,10 +235,6 @@ GuacamoleUI.attach = function(guac) {
     var mouse = new Guacamole.Mouse(GuacamoleUI.display);
     mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
         function(mouseState) {
-
-            if (mouseState.y <= 5)
-                GuacamoleUI.showMenu();
-
             guac.sendMouseState(mouseState);
         };
 

guacamole/src/main/webapp/styles/client.css

@@ -73,17 +73,14 @@ div.errorDialog p {
 
 
 #menu {
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 1em;
-    font-size: 0.8em;
-    background: #FEA;
-    border: 1px solid black;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
-    z-index: 1;
+    z-index: 4;
+    background: #FEA;
+    border-bottom: 1px solid black;
+    font-size: 0.8em;
 }
 
 #menu.error {
@@ -127,11 +124,7 @@ div#clipboardDiv {
     border: 1px solid black;
 
     width: 50em;
-    opacity: 0.5;
-}
-
-#menu:hover div#clipboardDiv {
-    opacity: 1;
+    z-index: 2;
 }
 
 div#clipboardDiv h2 {
@@ -161,3 +154,14 @@ div#clipboardDiv textarea {
     cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default;
 }
 
+div#menuControl {
+    position: fixed;
+    top: 0;
+    left: 0;
+    
+    width: 100%;
+    height: 1.5em;
+    background: none;
+
+    z-index: 3;
+}