Improve styling, add disable sound setting.

guacamole/src/main/webapp/index.xhtml

@@ -92,19 +92,45 @@
 
             <h2>Settings</h2>
             <div id="settings">
+
+                <!-- Auto-fit display -->
                 <dl>
                     <dt>
                         <input type="checkbox" id="auto-fit"/>
-                        Auto-fit display to browser window.
+                        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.
+                        <p>
+                            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.
+                        </p>
                     </dd>
                 </dl>
+
+                <!-- Enable/disable sound -->
+                <dl>
+                    <dt>
+                        <input type="checkbox" id="disable-sound"/>
+                        Disable sound
+                    </dt>
+                    <dd>
+                        <p>
+                            If on a device or network where bandwidth usage must
+                            be kept to a minimum, you may wish to check this box
+                            and disable sound. This can also be necessary if a
+                            device doesn't actually support sound, but claims
+                            to, resulting in wasted bandwidth.
+                        </p>
+                        <p>
+                            <strong>Changing this setting will only affect
+                            future connections.</strong>
+                        </p>
+                    </dd>
+                </dl>
+
             </div>
 
         </div>
@@ -121,12 +147,17 @@
 
             var state = new GuacamoleSessionState();
             var auto_fit = document.getElementById("auto-fit");
+            var disable_sound = document.getElementById("disable-sound");
             var clipboard = document.getElementById("clipboard");
 
             auto_fit.onchange = auto_fit.onclick = function() {
                 state.setProperty("auto-fit", auto_fit.checked);
             };
 
+            disable_sound.onchange = disable_sound.onclick = function() {
+                state.setProperty("disable-sound", disable_sound.checked);
+            };
+
             clipboard.onchange = function() {
                 state.setProperty("clipboard", clipboard.value);
             };
@@ -136,6 +167,8 @@
                     clipboard.value = new_state[name];
                 else if (name == "auto-fit")
                     auto_fit.checked = new_state[name];
+                else if (name == "disable-sound")
+                    disable_sound.checked = new_state[name];
             };
 
             // Update clipboard with current data
@@ -149,6 +182,9 @@
             // Update auto-fit setting in UI
             auto_fit.checked = state.getProperty("auto-fit");
 
+            // Update disable-sound setting in UI
+            disable_sound.checked = state.getProperty("disable-sound");
+
             // 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

@@ -35,7 +35,8 @@ var GuacamoleUI = {
     },
     
     "state"          : document.getElementById("statusText"),
-    "client"         : null
+    "client"         : null,
+    "sessionState"   : new GuacamoleSessionState()
 
 };
 
@@ -145,38 +146,39 @@ GuacamoleUI.supportedVideo = [];
     };
 
     // Query audio support
-    (function () {
-        var probably_supported = [];
-        var maybe_supported = [];
+    if (!GuacamoleUI.sessionState.getProperty("disable-sound"))
+        (function () {
+            var probably_supported = [];
+            var maybe_supported = [];
 
-        // Build array of supported audio formats
-        [
-            'audio/ogg; codecs="vorbis"',
-            'audio/mp4; codecs="mp4a.40.5"',
-            'audio/mpeg; codecs="mp3"',
-            'audio/webm; codecs="vorbis"',
-            'audio/wav; codecs=1'
-        ].forEach(function(mimetype) {
+            // Build array of supported audio formats
+            [
+                'audio/ogg; codecs="vorbis"',
+                'audio/mp4; codecs="mp4a.40.5"',
+                'audio/mpeg; codecs="mp3"',
+                'audio/webm; codecs="vorbis"',
+                'audio/wav; codecs=1'
+            ].forEach(function(mimetype) {
 
-            var audio = new Audio();
-            var support_level = audio.canPlayType(mimetype);
+                var audio = new Audio();
+                var support_level = audio.canPlayType(mimetype);
 
-            // Trim semicolon and trailer
-            var semicolon = mimetype.indexOf(";");
-            if (semicolon != -1)
-                mimetype = mimetype.substring(0, semicolon);
+                // Trim semicolon and trailer
+                var semicolon = mimetype.indexOf(";");
+                if (semicolon != -1)
+                    mimetype = mimetype.substring(0, semicolon);
 
-            // Partition by probably/maybe
-            if (support_level == "probably")
-                probably_supported.push(mimetype);
-            else if (support_level == "maybe")
-                maybe_supported.push(mimetype);
+                // Partition by probably/maybe
+                if (support_level == "probably")
+                    probably_supported.push(mimetype);
+                else if (support_level == "maybe")
+                    maybe_supported.push(mimetype);
 
-        });
+            });
 
-        Array.prototype.push.apply(GuacamoleUI.supportedAudio, probably_supported);
-        Array.prototype.push.apply(GuacamoleUI.supportedAudio, maybe_supported);
-    })();
+            Array.prototype.push.apply(GuacamoleUI.supportedAudio, probably_supported);
+            Array.prototype.push.apply(GuacamoleUI.supportedAudio, maybe_supported);
+        })();
 
     // Query video support
     (function () {
@@ -222,8 +224,6 @@ GuacamoleUI.attach = function(guac) {
     
     var guac_display = guac.getDisplay();
 
-    var state = new GuacamoleSessionState();
-
     // Set document title appropriately, based on prefix and connection name
     function updateTitle() {
 
@@ -370,7 +370,7 @@ GuacamoleUI.attach = function(guac) {
     function updateDisplayScale() {
 
         // If auto-fit is enabled, scale display
-        if (state.getProperty("auto-fit")) {
+        if (GuacamoleUI.sessionState.getProperty("auto-fit")) {
 
             // Calculate scale to fit screen
             var fit_scale = Math.min(
@@ -425,8 +425,8 @@ GuacamoleUI.attach = function(guac) {
                 title_prefix = null;
 
                 // Update clipboard with current data
-                if (state.getProperty("clipboard"))
-                    guac.setClipboard(state.getProperty("clipboard"));
+                if (GuacamoleUI.sessionState.getProperty("clipboard"))
+                    guac.setClipboard(GuacamoleUI.sessionState.getProperty("clipboard"));
 
                 // Regularly update screenshot if storage available
                 if (localStorage)
@@ -492,10 +492,10 @@ GuacamoleUI.attach = function(guac) {
 
     // Server copy handler
     guac.onclipboard = function(data) {
-        state.setProperty("clipboard", data);
+        GuacamoleUI.sessionState.setProperty("clipboard", data);
     };
 
-    state.onchange = function(old_state, new_state, name) {
+    GuacamoleUI.sessionState.onchange = function(old_state, new_state, name) {
         if (name == "clipboard")
             guac.setClipboard(new_state[name]);
         else if (name == "auto-fit")

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

@@ -319,6 +319,8 @@ div#recent-connections .protocol {
 
 #clipboardDiv textarea {
     width: 100%;
+    border: 1px solid #AAA;
+    border-radius: 0.25em;
 }
 
 #settings dt {