Clean up notification, add animated progress indicator.

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

@@ -773,16 +773,32 @@ GuacUI.Client.attach = function(guac) {
      * Prompt to download file when file received.
      */
 
+    function getSizeString(bytes) {
+
+        if (bytes > 1000000000)
+            return Math.round(bytes / 100000000)/10 + " GB";
+
+        else if (bytes > 1000000)
+            return Math.round(bytes / 100000)/10 + " MB";
+
+        else if (bytes > 1000)
+            return Math.round(bytes / 100)/10 + " KB";
+
+        else
+            return bytes + " B";
+
+    }
+
     guac.onblob = function(blob) {
 
         var download = new GuacUI.Download(blob.name);
-        download.updateProgress("0");
+        download.updateProgress(getSizeString(0));
 
         document.body.appendChild(download.getElement());
 
         // Update progress as data is received
         blob.ondata = function() {
-            download.updateProgress(blob.getLength());
+            download.updateProgress(getSizeString(blob.getLength()));
         };
 
         // When complete, prompt for download

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

@@ -316,14 +316,41 @@ p.hint {
     color: silver;
 }
 
+@keyframes progress {
+    from {background-position-x: 0px;}
+    to   {background-position-x: 64px;}
+}
+
+@-webkit-keyframes progress {
+    from {background-position-x: 0px;}
+    to   {background-position-x: 64px;}
+}
+
 .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;
+
+    background: #444 url('../images/progress.png');
+    background-size: 16px 16px;
+    -moz-background-size: 16px 16px;
+    -webkit-background-size: 16px 16px;
+    -khtml-background-size: 16px 16px;
+
+    animation-name: progress;
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+
+    -webkit-animation-name: progress;
+    -webkit-animation-duration: 2s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+
 }
 
 .download.notification .download {