Add auto-fit setting, update property before calling onchange.

guacamole/src/main/webapp/index.xhtml

@@ -90,6 +90,23 @@
                 <textarea rows="10" cols="40" id="clipboard"></textarea>
             </div>
 
+            <h2>Settings</h2>
+            <div id="settings">
+                <dl>
+                    <dt>
+                        <input type="checkbox" id="auto-fit"/>
+                        Auto-fit display to browser window.
+                    </dt>
+                    <dd>
+                        If checked, remote displays are automatically
+                        scaled to exactly fit within the browser window. If
+                        unchecked, remote displays are always shown at their
+                        natural resolution, even if doing so causes the display
+                        to extend beyond the bounds of the window.
+                    </dd>
+                </dl>
+            </div>
+
         </div>
 
         <div id="version-dialog">
@@ -103,8 +120,13 @@
         <script type="text/javascript"> /* <![CDATA[ */
 
             var state = new GuacamoleSessionState();
+            var auto_fit = document.getElementById("auto-fit");
             var clipboard = document.getElementById("clipboard");
 
+            auto_fit.onchange = auto_fit.onclick = function() {
+                state.setProperty("auto-fit", auto_fit.checked);
+            };
+
             clipboard.onchange = function() {
                 state.setProperty("clipboard", clipboard.value);
             };
@@ -112,12 +134,21 @@
             state.onchange = function(old_state, new_state, name) {
                 if (name == "clipboard")
                     clipboard.value = new_state[name];
+                else if (name == "auto-fit")
+                    auto_fit.checked = new_state[name];
             };
 
             // Update clipboard with current data
             if (state.getProperty("clipboard"))
                 clipboard.value = state.getProperty("clipboard");
 
+            // Default to true if auto-fit not specified
+            if (state.getProperty("auto-fit") === undefined)
+                state.setProperty("auto-fit", true);
+
+            // Update auto-fit setting in UI
+            auto_fit.checked = state.getProperty("auto-fit");
+
             // Constructs the URL for a client which connects to the connection
             // with the given id.
             function getClientURL(id) {

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

@@ -367,18 +367,34 @@ GuacamoleUI.attach = function(guac) {
     // Enable keyboard by default
     enableKeyboard();
 
+    function updateDisplayScale() {
+
+        console.log(state.getProperty("auto-fit"));
+
+        // If auto-fit is enabled, scale display
+        if (state.getProperty("auto-fit")) {
+
+            // Calculate scale to fit screen
+            var fit_scale = Math.min(
+                window.innerWidth / guac.getWidth(),
+                window.innerHeight / guac.getHeight()
+            );
+              
+            // Scale client
+            if (fit_scale != guac.getScale())
+                guac.scale(fit_scale);
+
+        }
+
+        // Otherwise, scale to 100%
+        else if (guac.getScale() != 1.0)
+            guac.scale(1.0);
+
+    }
+
     // Handle resize
     guac.onresize = function(width, height) {
-
+        updateDisplayScale();
-        // Calculate scale to fit screen
-        var fit_scale = Math.min(
-            window.innerWidth / width,
-            window.innerHeight / height
-        );
-          
-        // Scale client
-        guac.scale(fit_scale);
-
     }
 
     // Handle client state change
@@ -472,15 +488,7 @@ GuacamoleUI.attach = function(guac) {
     window.onresize = function() {
 
         guac.sendSize(window.innerWidth, window.innerHeight);
-
+        updateDisplayScale();
-        // Calculate scale to fit screen
-        var fit_scale = Math.min(
-            window.innerWidth / guac.getWidth(),
-            window.innerHeight / guac.getHeight()
-        );
-          
-        // Scale client
-        guac.scale(fit_scale);
 
     };
 
@@ -492,6 +500,9 @@ GuacamoleUI.attach = function(guac) {
     state.onchange = function(old_state, new_state, name) {
         if (name == "clipboard")
             guac.setClipboard(new_state[name]);
+        else if (name == "auto-fit")
+            updateDisplayScale();
+
     };
 
 };

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

@@ -44,11 +44,15 @@ function GuacamoleSessionState() {
         // Pull current state
         var new_state = JSON.parse(localStorage.getItem("GUACAMOLE_STATE") || "{}");
         
-        // Check if value is different
+        // Assign new state
+        var old_state = state;
+        state = new_state;
+
+        // Check if any values are different
         for (var name in new_state) {
 
             // If value changed, call handler
-            var old = state[name];
+            var old = old_state[name];
             if (old != new_state[name]) {
 
                 // Call change handler
@@ -59,9 +63,6 @@ function GuacamoleSessionState() {
 
         }
 
-        // Assign new state
-        state = new_state;
-
     };
 
     /**
@@ -100,6 +101,9 @@ function GuacamoleSessionState() {
     // Reload properties every second
     window.setInterval(guac_state.reload, 1000);
 
+    // Reload properties when focus is gained
+    window.addEventListener("focus", guac_state.reload);
+    
     // Initial load
     guac_state.reload();
 

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

@@ -184,16 +184,6 @@ div#connection-list-ui h1 {
 
 }
 
-div#connection-list-ui img {
-    vertical-align: middle;
-}
-
-div#logout-panel {
-    padding: 0.45em;
-    text-align: right;
-    float: right;
-}
-
 div#connection-list-ui h2 {
 
     padding: 0.5em;
@@ -209,13 +199,29 @@ div#connection-list-ui h2 {
     
 }
 
+div#connection-list-ui img {
+    vertical-align: middle;
+}
+
+div#logout-panel {
+    padding: 0.45em;
+    text-align: right;
+    float: right;
+}
+
 .history-unavailable div#recent-connections {
     display: none;
 }
 
+div#recent-connections,
+div#clipboardDiv,
+div#settings,
+div#other-connections {
+    margin: 0;
+    padding: 1em;
+}
+
 div#recent-connections {
-    margin: 1em;
-    margin-top: 0;
     text-align: center;
 }
 
@@ -263,11 +269,6 @@ div#recent-connections div.connection {
     max-width: 75%;
 }
 
-div#other-connections {
-    margin: 0;
-    padding: 1em;
-}
-
 div#other-connections .connection {
     display: block;
     text-align: left;
@@ -316,10 +317,17 @@ div#recent-connections .protocol {
     margin-left: 0.25em;
 }
 
-#clipboardDiv {
-    padding: 1em;
-}
-
 #clipboardDiv textarea {
     width: 100%;
+}
+
+#settings dt {
+    border-bottom: 1px dotted #AAA;
+    padding-bottom: 0.25em;
+}
+
+#settings dd {
+    margin: 1.5em;
+    margin-left: 2.5em;
+    font-size: 0.75em;
 }