From a1894549a2fbf39043556e5907f3468dbb092770 Mon Sep 17 00:00:00 2001
From: Michael Jumper <zhangmaike@users.sourceforge.net>
Date: Sat, 3 Nov 2012 19:24:30 -0700
Subject: [PATCH] Improve styling and handling of missing history.

---
 guacamole/src/main/webapp/index.xhtml         | 39 ++++++-----
 .../src/main/webapp/scripts/interface.js      | 66 ++++++++++---------
 guacamole/src/main/webapp/styles/login.css    | 15 ++++-
 3 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/guacamole/src/main/webapp/index.xhtml b/guacamole/src/main/webapp/index.xhtml
index 87d14ce0a..5474cd775 100644
--- a/guacamole/src/main/webapp/index.xhtml
+++ b/guacamole/src/main/webapp/index.xhtml
@@ -74,6 +74,7 @@
            
             <h2>Recent Connections</h2>
             <div id="recent-connections">
+                <p id="no-recent">No recent connections.</p>
             </div>
 
             <h2>Other Connections</h2>
@@ -133,16 +134,20 @@
                 // Remove all rows from connections list
                 var recent_connections = document.getElementById("recent-connections");
                 var other_connections = document.getElementById("other-connections");
+                var no_recent_connections = document.getElementById("no-recent");
                 
                 // Get thumbnail set from local storage
-                var thumbnails = {};
-                try {
-                    thumbnails = JSON.parse(localStorage.getItem("GUAC_THUMBNAILS"));
+                if (localStorage) {
+                    var thumbnails = {};
+                    try {
+                        var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
+                        if (thumbnail_json)
+                            thumbnails = JSON.parse(thumbnail_json);
+                    }
+                    catch (e) {}
                 }
-                catch (e) {
-                }
-                for (var test in thumbnails)
-                    console.log(test);
+                else
+                    document.body.className += " history-unavailable";
 
                 // Add connection icons
                 for (var i=0; i<configs.length; i++) {
@@ -166,15 +171,18 @@
                     var thumbnail = document.createElement("div");
                     thumbnail.className = "thumbnail";
 
-                    // Create link to client
-                    var url = getClientURL(configs[i].id)
-                    var clientLink = document.createElement("a");
-                    clientLink.setAttribute("href", url);
-
-                    connection.onclick = function() {
-                        window.location = url;
-                    };
+                    function redirect(url) {
+                        return function() {
+                            window.location = url;
+                        };
+                    }
                     
+                    // Create link to client
+                    var clientLink = document.createElement("a");
+                    var url = getClientURL(configs[i].id)
+                    clientLink.setAttribute("href", url);
+                    connection.onclick = redirect(url);
+
                     protocol.appendChild(protocolIcon);
 
                     clientLink.textContent = configs[i].id;
@@ -197,6 +205,7 @@
                         thumbnail.appendChild(img);
 
                         recent_connections.appendChild(connection);
+                        no_recent_connections.style.display = "none";
                     }
                     else
                         other_connections.appendChild(connection);
diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js
index e499eaf72..bea35fb30 100644
--- a/guacamole/src/main/webapp/scripts/interface.js
+++ b/guacamole/src/main/webapp/scripts/interface.js
@@ -781,45 +781,47 @@ GuacamoleUI.attach = function(guac) {
                 GuacamoleUI.hideStatus();
                 title_prefix = null;
 
-                window.setTimeout(function() {
+                if (localStorage) {
+                    window.setTimeout(function() {
 
-                    // Get screenshot
-                    var canvas = guac.flatten();
+                        // Get screenshot
+                        var canvas = guac.flatten();
 
-                    // Calculate scale of thumbnail (max 320x240, max zoom 100%)
-                    var scale = Math.min(
-                        320 / canvas.width,
-                        240 / canvas.height,
-                        1
-                    );
+                        // Calculate scale of thumbnail (max 320x240, max zoom 100%)
+                        var scale = Math.min(
+                            320 / canvas.width,
+                            240 / canvas.height,
+                            1
+                        );
 
-                    // Create thumbnail canvas
-                    var thumbnail = document.createElement("canvas");
-                    thumbnail.width  = canvas.width*scale;
-                    thumbnail.height = canvas.height*scale;
+                        // Create thumbnail canvas
+                        var thumbnail = document.createElement("canvas");
+                        thumbnail.width  = canvas.width*scale;
+                        thumbnail.height = canvas.height*scale;
 
-                    // Scale screenshot to thumbnail
-                    var context = thumbnail.getContext("2d");
-                    context.drawImage(canvas,
-                        0, 0, canvas.width, canvas.height,
-                        0, 0, thumbnail.width, thumbnail.height
-                    );
+                        // Scale screenshot to thumbnail
+                        var context = thumbnail.getContext("2d");
+                        context.drawImage(canvas,
+                            0, 0, canvas.width, canvas.height,
+                            0, 0, thumbnail.width, thumbnail.height
+                        );
 
-                    // Get thumbnail set from local storage
-                    var thumbnails = {};
-                    try {
-                        thumbnails = JSON.parse(localStorage.getItem("GUAC_THUMBNAILS"));
-                    }
-                    catch (e) {
-                    }
+                        // Get thumbnail set from local storage
+                        var thumbnails = {};
+                        try {
+                            var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
+                            if (thumbnail_json)
+                                thumbnails = JSON.parse(thumbnail_json);
+                        }
+                        catch (e) {}
 
-                    // Save thumbnail to local storage
-                    var id = decodeURIComponent(window.location.search.substring(4));
-                    thumbnails[id] = thumbnail.toDataURL();
-                    localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails));
-
-                }, 5000);
+                        // Save thumbnail to local storage
+                        var id = decodeURIComponent(window.location.search.substring(4));
+                        thumbnails[id] = thumbnail.toDataURL();
+                        localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails));
 
+                    }, 5000);
+                }
                 break;
 
             // Disconnecting
diff --git a/guacamole/src/main/webapp/styles/login.css b/guacamole/src/main/webapp/styles/login.css
index 3afcc66ad..029522ed0 100644
--- a/guacamole/src/main/webapp/styles/login.css
+++ b/guacamole/src/main/webapp/styles/login.css
@@ -225,11 +225,24 @@ div#connection-list-ui h2 {
     
 }
 
+.history-unavailable div#recent-connections {
+    display: none;
+}
+
 div#recent-connections {
     margin: 1em;
     margin-top: 0;
     text-align: center;
-    min-height: 240px;
+}
+
+#no-recent {
+
+    color: black;
+    text-shadow: 1px 1px white;
+    opacity: 0.5;
+    
+    font-size: 2em;
+    font-weight: bolder;
 }
 
 div#recent-connections div.connection {