Show websocket connection error with overlay

html/css/app.css

@@ -1,21 +1,26 @@
 body, #terminal-container {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	margin: 0px;
-	font-size:15px;
-	font-variant-ligatures: none;
-	-webkit-font-smoothing: antialiased;
-	background-color: #101010;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-size:15px;
+    font-variant-ligatures: none;
+    -webkit-font-smoothing: antialiased;
+    background-color: #101010;
 }
 
 .terminal {
     background-color: #101010;
     color: #f0f0f0;
     font-family: "DejaVu Sans Mono","Everson Mono",FreeMono,Menlo,Terminal,monospace;
-    border: 0;
-    height: 100%;
-    width: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: auto;
+    height: auto;
 }
 
 .terminal .xterm-viewport {

html/js/app.js

@@ -4,12 +4,13 @@
         url = (httpsEnabled ? 'wss://' : 'ws://') + window.location.host + window.location.pathname + 'ws',
         protocols = ["tty"],
         autoReconnect = -1,
-        term, pingTimer;
+        term, pingTimer, wsError;
 
     var openWs = function() {
         var ws = new WebSocket(url, protocols);
 
         ws.onopen = function(event) {
+            wsError = false;
             if (typeof tty_auth_token !== 'undefined') {
                 ws.send(JSON.stringify({AuthToken: tty_auth_token}));
             }
@@ -76,7 +77,9 @@
             if (term) {
                 term.off('data');
                 term.off('resize');
-                term.showOverlay("Connection Closed", null);
+                if (!wsError) {
+                    term.showOverlay("Connection Closed", null);
+                }
             }
             clearInterval(pingTimer);
             if (autoReconnect > 0) {
@@ -85,19 +88,8 @@
         };
 
         ws.onerror = function(event) {
-            var errorNode = document.createElement('div');
-            errorNode.style.cssText = [
-                "color: red",
-                "background-color: white",
-                "font-size: x-large",
-                "opacity: 0.75",
-                "text-align: center",
-                "margin: 1em",
-                "padding: 0.2em",
-                "border: 0.1em dotted #ccc"
-            ].join(";");
-            errorNode.textContent = "Websocket handshake failed!";
-            terminalContainer.insertBefore(errorNode, terminalContainer.firstChild);
+            wsError = true;
+            term.showOverlay("Websocket handshake failed", null);
         };
     };
 
@@ -106,4 +98,4 @@
     };
 
     openWs();
-})()
+})();