Merged the control-bar and the status-bar together.

Also added a popup with the status text.

include/base.css

@@ -66,6 +66,8 @@ html {
   float: left;
   padding-left:10px;
   padding-top:4px;
+  z-index: 1;
+  position: relative;
 }
 
 .noVNC-buttons-right {
@@ -73,17 +75,21 @@ html {
   right: 0px;
   padding-right:10px;
   padding-top:4px;
+  z-index: 1;
+  position: relative;
 }
 
 #noVNC_status_bar {
   margin-top: 0px;
   padding: 0px;
+  z-index: 0;
+  position: absolute;
+  width: 100%;
 }
 
 #noVNC_status_bar div {
   font-size: 12px;
   padding-top: 4px;
-  width:100%;
 }
 
 #noVNC_status {
@@ -105,13 +111,13 @@ html {
 }
 
 .noVNC_status_normal {
-  background: #eee;
+  background: transparent;
 }
 .noVNC_status_error {
-  background: #f44;
+  background: rgba(240,64,64,0.5);
 }
 .noVNC_status_warn {
-  background: #ff4;
+  background: rgba(240,240,64,0.5);
 }
 
 /* Do not set width/height for VNC_screen or VNC_canvas or incorrect
@@ -186,6 +192,26 @@ html {
   border-radius:10px;
 }
 
+#noVNC_popup_status_panel {
+  display:none;
+  position: fixed;
+
+  margin:15px;
+  margin-top:60px;
+  padding:15px;
+  width:auto;
+
+  text-align:center;
+  font-weight:bold;
+  word-wrap:break-word;
+  color:#fff;
+  background:rgba(0,0,0,0.65);
+
+  -webkit-border-radius:10px;
+  -moz-border-radius:10px;
+  border-radius:10px;
+}
+
 #noVNC_clipboard {
   display:none;
   margin-top:77px;

include/ui.js

 /*
  * noVNC: HTML5 VNC client
  * Copyright (C) 2012 Joel Martin
+ * Copyright (C) 2013 Samuel Mannehed for Cendio AB
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -20,6 +21,7 @@ var UI = {
 rfb_state : 'loaded',
 settingsOpen : false,
 connSettingsOpen : false,
+popupStatusOpen : false,
 clipboardOpen: false,
 keyboardVisible: false,
 
@@ -156,6 +158,8 @@ addMouseHandlers: function() {
     $D("keyboardinput").onblur = UI.keyInputBlur;
 
     $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel;
+    $D("noVNC_status_bar").onclick = UI.togglePopupStatusPanel;
+    $D("noVNC_popup_status_panel").onclick = UI.togglePopupStatusPanel;
     $D("clipboardButton").onclick = UI.toggleClipboardPanel;
     $D("settingsButton").onclick = UI.toggleSettingsPanel;
     $D("connectButton").onclick = UI.toggleConnectPanel;
@@ -257,20 +261,39 @@ forceSetting: function(name, val) {
 },
 
 
+// Show the popup status panel
+togglePopupStatusPanel: function() {
+    var psp = $D('noVNC_popup_status_panel');
+    if (UI.popupStatusOpen === true) {
+        psp.style.display = "none";
+        UI.popupStatusOpen = false;
+    } else {
+        psp.innerHTML = $D('noVNC_status').innerHTML;
+        psp.style.display = "block";
+        psp.style.left = window.innerWidth/2 - 
+            parseInt(window.getComputedStyle(psp, false).width)/2 -30 + "px";
+        UI.popupStatusOpen = true;
+    }
+},
+
 // Show the clipboard panel
 toggleClipboardPanel: function() {
     // Close the description panel
     $D('noVNC_description').style.display = "none";
-    //Close settings if open
+    // Close settings if open
     if (UI.settingsOpen === true) {
         UI.settingsApply();
         UI.closeSettingsMenu();
     }
-    //Close connection settings if open
+    // Close connection settings if open
     if (UI.connSettingsOpen === true) {
         UI.toggleConnectPanel();
     }
-    //Toggle Clipboard Panel
+    // Close popup status panel if open
+    if (UI.popupStatusOpen === true) {
+        UI.togglePopupStatusPanel();
+    }
+    // Toggle Clipboard Panel
     if (UI.clipboardOpen === true) {
         $D('noVNC_clipboard').style.display = "none";
         $D('clipboardButton').className = "noVNC_status_button";
@@ -286,17 +309,22 @@ toggleClipboardPanel: function() {
 toggleConnectPanel: function() {
     // Close the description panel
     $D('noVNC_description').style.display = "none";
-    //Close connection settings if open
+    // Close connection settings if open
     if (UI.settingsOpen === true) {
         UI.settingsApply();
         UI.closeSettingsMenu();
         $D('connectButton').className = "noVNC_status_button";
     }
+    // Close clipboard panel if open
     if (UI.clipboardOpen === true) {
         UI.toggleClipboardPanel();
     }
+    // Close popup status panel if open
+    if (UI.popupStatusOpen === true) {
+        UI.togglePopupStatusPanel();
+    }
 
-    //Toggle Connection Panel
+    // Toggle Connection Panel
     if (UI.connSettingsOpen === true) {
         $D('noVNC_controls').style.display = "none";
         $D('connectButton').className = "noVNC_status_button";
@@ -347,13 +375,18 @@ toggleSettingsPanel: function() {
 openSettingsMenu: function() {
     // Close the description panel
     $D('noVNC_description').style.display = "none";
+    // Close clipboard panel if open
     if (UI.clipboardOpen === true) {
         UI.toggleClipboardPanel();
     }
-    //Close connection settings if open
+    // Close connection settings if open
     if (UI.connSettingsOpen === true) {
         UI.toggleConnectPanel();
     }
+    // Close popup status panel if open
+    if (UI.popupStatusOpen === true) {
+        UI.togglePopupStatusPanel();
+    }
     $D('noVNC_settings').style.display = "block";
     $D('settingsButton').className = "noVNC_status_button_selected";
     UI.settingsOpen = true;

vnc.html

@@ -71,6 +71,10 @@
             </div>
         </div>
 
+        <div id="noVNC_status_bar" class="noVNC_status_bar">
+                <div id="noVNC_status">Loading</div>
+        </div>
+
         <!--noVNC Buttons-->
         <div class="noVNC-buttons-right">
             <input type="image" src="images/ctrlaltdel.png"
@@ -106,6 +110,10 @@
             <input id="descriptionButton" type="button" value="Close">
         </div>
 
+        <!-- Popup Status Panel -->
+        <div id="noVNC_popup_status_panel" class="">
+        </div>
+
         <!-- Clipboard Panel -->
         <div id="noVNC_clipboard" class="triangle-right top">
             <textarea id="noVNC_clipboard_text" rows=5>
@@ -163,10 +171,6 @@
     <div id="noVNC_screen">
         <div id="noVNC_screen_pad"></div>
 
-        <div id="noVNC_status_bar" class="noVNC_status_bar">
-                <div id="noVNC_status">Loading</div>
-        </div>
-
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
 
         <!-- HTML5 Canvas -->