Add download notification, progress indicator.

guacamole/src/main/webapp/scripts/client-ui.js

@@ -775,16 +775,20 @@ GuacUI.Client.attach = function(guac) {
 
     guac.onblob = function(blob) {
 
+        var download = new GuacUI.Download(blob.name);
+        download.updateProgress("0");
+
+        document.body.appendChild(download.getElement());
+
+        // Update progress as data is received
+        blob.ondata = function() {
+            download.updateProgress(blob.getLength());
+        };
+
         // When complete, prompt for download
         blob.oncomplete = function() {
-
             var url = window.URL || window.webkitURL;
-            var a = document.createElement("a");
-            a.href = url.createObjectURL(blob.getBlob());
-            a.download = blob.name;
-            a.type = blob.mimetype;
-            a.click();
-
+            download.complete(blob.mimetype, url.createObjectURL(blob.getBlob()));
         };
 
     };

guacamole/src/main/webapp/scripts/guac-ui.js

@@ -690,3 +690,40 @@ GuacUI.Pager = function(container) {
 
 };
 
+
+GuacUI.Download = function(filename) {
+
+    var element = GuacUI.createElement("div", "download notification");
+    GuacUI.createChildElement(element, "div", "caption").textContent =
+        filename + " ";
+
+    var progress = GuacUI.createChildElement(element, "div", "progress");
+
+    this.updateProgress = function(text) {
+        progress.textContent = text;
+    };
+
+    this.complete = function(mimetype, url) {
+
+        element.removeChild(progress);
+        GuacUI.addClass(element, "complete");
+
+        var link = GuacUI.createChildElement(
+                    GuacUI.createChildElement(element, "div", "download"),
+                    "a");
+
+        link.href = url;
+        link.download = filename;
+        link.type = mimetype;
+        link.textContent = "Download";
+
+    };
+
+    /**
+     * Returns the element representing this notification.
+     */
+    this.getElement = function() {
+        return element;
+    };
+
+};

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

@@ -286,3 +286,58 @@ p.hint {
     box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.75);
     
 }
+
+.download.notification {
+
+    font-size: 0.9em;
+    
+    position: fixed;
+    right: 0.5em;
+    bottom: 0.5em;
+
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    background: black;
+    opacity: 0.9;
+
+    color: white;
+
+    padding: 0.5em;
+    margin: 1em;
+
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.75);
+ 
+}
+
+.download.notification div {
+    display: inline-block;
+}
+
+.download.notification .caption {
+    color: silver;
+}
+
+.download.notification .progress {
+    margin-left: 0.75em;
+    padding: 0.25em;
+    min-width: 5em;
+    border: 1px solid gray;
+    background: #444;
+    border-radius: 0.2em;
+    text-align: center;
+}
+
+.download.notification .download {
+    margin-left: 0.75em;
+    padding: 0.25em;
+    min-width: 5em;
+    border: 1px solid gray;
+    background: rgb(16, 87, 153);
+    border-radius: 0.2em;
+    text-align: center;
+}
+
+.download.notification .download a[href] {
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+}