Merge pull request kevoreilly#2959 from wmetcalf/fix/guac-vnc-scale-to-fit

Scale guacamole VNC display to fit browser window

Author: kevoreilly

web/static/css/guac-main.css

@@ -1,12 +1,25 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+.guaconsole {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
 #container {
     position: relative;
-    width: 100%;
-    height: 20em;
+    flex: 1;
+    overflow: hidden;
 }
 
 #terminal {
     height: 100%;
-    width: 100%
+    width: 100%;
 }
 
 .dialog,

web/static/js/guac-main.js

@@ -27,6 +27,37 @@ function GuacMe(element, guest_ip, vncport, session_id, recording_name) {
         /* Show the terminal.  */
         $('#terminal').append(terminal_element);
 
+        /* Scale display to fit the browser window. */
+        var scaleDisplay = function() {
+            var display = terminal_client.getDisplay();
+            var displayWidth = display.getWidth();
+            var displayHeight = display.getHeight();
+            if (!displayWidth || !displayHeight) return;
+
+            var container = document.getElementById('container');
+            var containerWidth = container.offsetWidth;
+            var containerHeight = container.offsetHeight;
+            if (!containerWidth || !containerHeight) return;
+
+            var scale = Math.min(
+                containerWidth / displayWidth,
+                containerHeight / displayHeight
+            );
+            display.scale(scale);
+        };
+
+        /* Re-scale when the display size changes (initial connect). */
+        terminal_client.getDisplay().onresize = function() {
+            scaleDisplay();
+        };
+
+        /* Re-scale on browser window resize (debounced). */
+        var resizeTimeout;
+        window.addEventListener('resize', function() {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(scaleDisplay, 100);
+        });
+
         /* Disconnect on tab close. */
         window.onunload = function() {
             terminal_client.disconnect();
@@ -38,7 +69,7 @@ function GuacMe(element, guest_ip, vncport, session_id, recording_name) {
         mouse.onmousedown =
         mouse.onmouseup   =
         mouse.onmousemove = function(mouseState) {
-            terminal_client.sendMouseState(mouseState);
+            terminal_client.sendMouseState(mouseState, true);
         };
 
         /* Keyboard handling.  */