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>
+                        <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
+                            natural resolution, even if doing so causes the
-                        to extend beyond the bounds of the window.
+                            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,6 +146,7 @@ GuacamoleUI.supportedVideo = [];
     };
 
     // Query audio support
+    if (!GuacamoleUI.sessionState.getProperty("disable-sound"))
         (function () {
             var probably_supported = [];
             var maybe_supported = [];
@@ -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"))
+                if (GuacamoleUI.sessionState.getProperty("clipboard"))
-                    guac.setClipboard(state.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 {