Updated web terminal

Author: meefik

app/src/main/assets/web/css/xterm.css

@@ -36,7 +36,6 @@
  */
 
 .xterm {
-    font-family: courier-new, courier, monospace;
     font-feature-settings: "liga" 0;
     position: relative;
     user-select: none;
@@ -56,7 +55,7 @@
      * The z-index of the helpers must be higher than the canvases in order for
      * IMEs to appear on top.
      */
-    z-index: 10;
+    z-index: 5;
 }
 
 .xterm .xterm-helper-textarea {
@@ -70,7 +69,7 @@
     top: 0;
     width: 0;
     height: 0;
-    z-index: -10;
+    z-index: -5;
     /** Prevent wrapping so the IME appears against the textarea at the correct position */
     white-space: nowrap;
     overflow: hidden;
@@ -139,7 +138,7 @@
     cursor: pointer;
 }
 
-.xterm.xterm-cursor-crosshair {
+.xterm.column-select.focus {
     /* Column selection mode */
     cursor: crosshair;
 }
@@ -151,7 +150,7 @@
     top: 0;
     bottom: 0;
     right: 0;
-    z-index: 100;
+    z-index: 10;
     color: transparent;
 }
 
@@ -162,3 +161,11 @@
     height: 1px;
     overflow: hidden;
 }
+
+.xterm-dim {
+    opacity: 0.5;
+}
+
+.xterm-underline {
+    text-decoration: underline;
+}

app/src/main/assets/web/js/fit.js

@@ -46,43 +46,45 @@ window.onload = function () {
   var socketURL = protocol + location.hostname + ((port) ? (':' + port) : '');
   var socket = new WebSocket(socketURL);
 
-  Terminal.applyAddon(fit);
-
-  var xterm = new Terminal({ cursorBlink: true, fontSize: getQueryParams('size') });
-  xterm.open(document.getElementById('terminal'));
-  xterm.fit();
+  var terminal = new Terminal({
+    cursorBlink: true,
+    fontSize: getQueryParams('size') || 16
+  });
+  var fitAddon = new FitAddon.FitAddon();
+  terminal.loadAddon(fitAddon);
+  terminal.open(document.getElementById('terminal'));
+  fitAddon.fit();
 
   socket.addEventListener('message', function (ev) {
     blobToText(ev.data, function (str) {
       if (!pty) {
         var match = str.match(/\/dev\/pts\/\d+/);
         if (match) {
           pty = match[0];
-          resizePty(pty, xterm.rows, xterm.cols);
+          resizePty(pty, terminal.rows, terminal.cols);
         }
       }
       str = str.replace(/([^\r])\n|\r$/g, '\r\n');
-      xterm.write(str);
+      terminal.write(str);
     });
   });
 
-  xterm.on('data', function (data) {
+  terminal.onData(function (data) {
     socket.send(textToBlob(data));
   });
 
-  xterm.on('resize', function (e) {
+  terminal.onResize(function (e) {
     resizePty(pty, e.rows, e.cols);
   });
 
   window.addEventListener('resize', function () {
-    xterm.fit();
+    fitAddon.fit();
   });
 
   // Hot key for resize: Ctrl + Alt + r
   window.addEventListener('keydown', function (e) {
     if (e.ctrlKey && e.altKey && e.keyCode == 82) {
-      resizePty(pty, xterm.rows, xterm.cols, true);
+      resizePty(pty, terminal.rows, terminal.cols, true);
     }
   });
 };
-