xterm.js: 3.0.1

html/css/app.css

@@ -9,70 +9,10 @@ html, body {
     width: auto;
     height: 100%;
     margin: 0 auto;
-    padding: 0 5px;
+    padding: 0;
     background-color: #101010;
 }
 
-.xterm {
-    background-color: #101010;
-    color: #f0f0f0;
-    font-size: 13px;
-    font-family: "Menlo for Powerline", Menlo, Consolas, "Liberation Mono", Courier, monospace;
-    font-variant-ligatures: none;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-}
-
-.xterm .xterm-viewport {
-    background-color: rgba(121, 121, 121, 0);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    transition: background-color 800ms linear;
-    overflow-y: auto;
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar {
-    width: 10px;
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar-track {
-    opacity: 0;
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar-thumb {
-    background-color: rgba(121, 121, 121, 0.4);
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
-    transition: opacity 0ms linear;
-    background-color: rgba(100, 100, 100, .7);
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar-thumb:window-inactive {
-    background-color: inherit;
-}
-
-.xterm .terminal-cursor {
-    background-color: #f0f0f0;
-    color: #101010;
-    opacity: .7;
-}
-
-.xterm:not(.focus) .terminal-cursor {
-    outline: 1px solid #f0f0f0;
-}
-
-@keyframes blink-cursor {
-    0% {
-        background-color: #f0f0f0;
-        color: #101010;
-    }
-    50% {
-        background-color: transparent;
-        color: #f0f0f0;
-    }
-}
-
 #modal strong {
     color: #268bd2;
 }

html/js/app.js

@@ -1,8 +1,12 @@
 var Zmodem = require('zmodem.js/src/zmodem_browser');
 var Terminal = require('xterm').Terminal;
+var fit = require('xterm/lib/addons/fit');
+var winptyCompat = require('xterm/lib/addons/winptyCompat');
+var overlay = require('./overlay');
 
-require('xterm/lib/addons/fit');
-require('./overlay');
+Terminal.applyAddon(fit);
+Terminal.applyAddon(winptyCompat);
+Terminal.applyAddon(overlay);
 
 function showReceiveModal(xfer) {
     resetModal('Receiving files');
@@ -206,7 +210,30 @@ var openWs = function() {
 
         term = new Terminal({
             fontSize: 13,
-            fontFamily: '"Menlo for Powerline", Menlo, Consolas, "Liberation Mono", Courier, monospace'
+            fontFamily: '"Menlo for Powerline", Menlo, Consolas, "Liberation Mono", Courier, monospace',
+            theme: {
+                foreground: '#f0f0f0',
+                background: '#101010',
+                cursor: '#f0f0f033',
+                cursorAccent: "#101010",
+                selection: '#c1deff33',
+                black: '#1a1a1a',
+                red: '#d81e00',
+                green: '#5ea702',
+                yellow: '#cfae00',
+                blue: '#427ab3',
+                magenta: '#89658e',
+                cyan: '#00a7aa',
+                white: '#dbded8',
+                brightBlack: '#686a66',
+                brightRed: '#f54235',
+                brightGreen: '#99e343',
+                brightYellow: '#fdeb61',
+                brightBlue: '#84b0d8',
+                brightMagenta: '#bc94b7',
+                brightCyan: '#37e6e8',
+                brightWhite: '#f1f1f0'
+            }
         });
 
         term.on('resize', function(size) {
@@ -224,8 +251,6 @@ var openWs = function() {
             terminalContainer.removeChild(terminalContainer.firstChild);
         }
 
-        term.open(terminalContainer, true);
-
         // https://stackoverflow.com/a/27923937/1727928
         window.addEventListener('resize', function() {
             clearTimeout(window.resizedFinished);
@@ -234,7 +259,11 @@ var openWs = function() {
             }, 250);
         });
         window.addEventListener('beforeunload', unloadCallback);
+
+        term.open(terminalContainer, true);
+        term.winptyCompatInit();
         term.fit();
+        term.focus();
     };
 
     ws.onmessage = function(event) {

html/js/overlay.js

@@ -1,17 +1,14 @@
 // ported from hterm.Terminal.prototype.showOverlay
 // https://chromium.googlesource.com/apps/libapps/+/master/hterm/js/hterm_terminal.js
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 
-(function (overlay) {
-    module.exports = overlay(require('xterm').Terminal);
-})(function (Terminal) {
-    var exports = {};
-
-    exports.showOverlay = function(msg, timeout) {
-        if (!this.overlayNode_) {
-            if (!this.element)
+function showOverlay(term, msg, timeout) {
+    if (!term.overlayNode_) {
+        if (!term.element)
             return;
-            this.overlayNode_ = document.createElement('div');
-            this.overlayNode_.style.cssText = (
+        term.overlayNode_ = document.createElement('div');
+        term.overlayNode_.style.cssText = (
             'border-radius: 15px;' +
             'font-size: xx-large;' +
             'opacity: 0.75;' +
@@ -22,47 +19,48 @@
             '-moz-user-select: none;' +
             '-moz-transition: opacity 180ms ease-in;');
 
-            this.overlayNode_.addEventListener('mousedown', function(e) {
+        term.overlayNode_.addEventListener('mousedown', function(e) {
             e.preventDefault();
             e.stopPropagation();
         }, true);
     }
-        this.overlayNode_.style.color = "#101010";
-        this.overlayNode_.style.backgroundColor = "#f0f0f0";
+    term.overlayNode_.style.color = "#101010";
+    term.overlayNode_.style.backgroundColor = "#f0f0f0";
 
-        this.overlayNode_.textContent = msg;
-        this.overlayNode_.style.opacity = '0.75';
+    term.overlayNode_.textContent = msg;
+    term.overlayNode_.style.opacity = '0.75';
 
-        if (!this.overlayNode_.parentNode)
-            this.element.appendChild(this.overlayNode_);
+    if (!term.overlayNode_.parentNode)
+        term.element.appendChild(term.overlayNode_);
 
-        var divSize = this.element.getBoundingClientRect();
-        var overlaySize = this.overlayNode_.getBoundingClientRect();
+    var divSize = term.element.getBoundingClientRect();
+    var overlaySize = term.overlayNode_.getBoundingClientRect();
 
-        this.overlayNode_.style.top =
+    term.overlayNode_.style.top =
         (divSize.height - overlaySize.height) / 2 + 'px';
-        this.overlayNode_.style.left = (divSize.width - overlaySize.width) / 2 + 'px';
+    term.overlayNode_.style.left = (divSize.width - overlaySize.width) / 2 + 'px';
 
-        var self = this;
-
-        if (this.overlayTimeout_)
-            clearTimeout(this.overlayTimeout_);
+    if (term.overlayTimeout_)
+        clearTimeout(term.overlayTimeout_);
 
     if (timeout === null)
         return;
 
-        this.overlayTimeout_ = setTimeout(function() {
-            self.overlayNode_.style.opacity = '0';
-            self.overlayTimeout_ = setTimeout(function() {
-                if (self.overlayNode_.parentNode)
-                    self.overlayNode_.parentNode.removeChild(self.overlayNode_);
-                self.overlayTimeout_ = null;
-                self.overlayNode_.style.opacity = '0.75';
+    term.overlayTimeout_ = setTimeout(function() {
+        term.overlayNode_.style.opacity = '0';
+        term.overlayTimeout_ = setTimeout(function() {
+            if (term.overlayNode_.parentNode)
+                term.overlayNode_.parentNode.removeChild(term.overlayNode_);
+            term.overlayTimeout_ = null;
+            term.overlayNode_.style.opacity = '0.75';
         }, 200);
     }, timeout || 1500);
+}
+exports.showOverlay = showOverlay;
+
+function apply(terminalConstructor) {
+    terminalConstructor.prototype.showOverlay = function (msg, timeout) {
+        return showOverlay(this, msg, timeout);
     };
-
-    Terminal.prototype.showOverlay = exports.showOverlay;
-
-    return exports;
-});
+}
+exports.apply = apply;

html/package.json

@@ -20,7 +20,7 @@
     "bulma": "^0.6.1",
     "gulp": "^3.9.1",
     "gulp-inline-source": "^3.0.0",
-    "xterm": "Tyriar/xterm.js#vscode-release/1.19",
+    "xterm": "^3.0.1",
     "zmodem.js": "^0.1.5"
   }
 }