Upgrade xterm.js to 3.1.0

bower.json

@@ -24,6 +24,8 @@
     "requirejs-plugins": "~1.0.3",
     "text-encoding": "~0.1",
     "underscore": "components/underscore#~1.8.3",
-    "xterm.js": "sourcelair/xterm.js#~2.9.2"
+    "xterm.js": "https://unpkg.com/xterm@~3.1.0/dist/xterm.js",
+    "xterm.js-css": "https://unpkg.com/xterm@~3.1.0/dist/xterm.css",
+    "xterm.js-fit": "https://unpkg.com/xterm@~3.1.0/dist/addons/fit/fit.js"
   }
 }

notebook/static/terminal/js/main.js

@@ -29,13 +29,9 @@ requirejs([
     var common_config = new configmod.ConfigSection('common', common_options);
     common_config.load();
 
+    // This makes the 'logout' button in the top right work.
     var login_widget = new loginwidget.LoginWidget('span#login_widget', common_options);
 
-    // Test size: 25x80
-    var termRowHeight = function(){ return 1.00 * $("#dummy-screen")[0].offsetHeight / 25;};
-        // 1.02 here arrived at by trial and error to make the spacing look right
-    var termColWidth =  function() { return 1.02 * $("#dummy-screen-rows")[0].offsetWidth / 80;};
-
     var base_url = utils.get_body_data('baseUrl').replace(/\/?$/, '/');
     var ws_path = utils.get_body_data('wsPath');
     var ws_url = utils.get_body_data('wsUrl');
@@ -45,31 +41,19 @@ requirejs([
     }
     ws_url = ws_url + base_url + ws_path;
 
-    var header = $("#header")[0];
-
-    function calculate_size() {
-        var height = $(window).height() - header.offsetHeight;
-        var width = $('#terminado-container').width();
-        var rows = Math.min(1000, Math.max(20, Math.floor(height/termRowHeight())-1));
-        var cols = Math.min(1000, Math.max(40, Math.floor(width/termColWidth())-1));
-        console.log("resize to :", rows , 'rows by ', cols, 'columns');
-        return {rows: rows, cols: cols};
-    }
-
     page.show_header();
 
-    var size = calculate_size();
-    var terminal = terminado.make_terminal($("#terminado-container")[0], size, ws_url);
+    var terminal = terminado.make_terminal($("#terminado-container")[0], ws_url);
 
     page.show_site();
 
     utils.load_extensions_from_config(config);
     utils.load_extensions_from_config(common_config);
 
-    window.onresize = function() { 
-      var geom = calculate_size();
-      terminal.term.resize(geom.cols, geom.rows);
-      terminal.socket.send(JSON.stringify(["set_size", geom.rows, geom.cols,
+    window.onresize = function() {
+      terminal.term.fit();
+      // send the new size to the server so that it can trigger a resize in the running process.
+      terminal.socket.send(JSON.stringify(["set_size", terminal.term.rows, terminal.term.cols,
                                     $(window).height(), $(window).width()]));
     };
 

notebook/static/terminal/js/terminado.js

@@ -1,14 +1,10 @@
-define (["xterm"], function(Terminal) {
+define (["xterm", "xtermjs-fit"], function(Terminal, fit) {
     "use strict";
-    function make_terminal(element, size, ws_url) {
+    function make_terminal(element, ws_url) {
         var ws = new WebSocket(ws_url);
-        var term = new Terminal({
-          cols: size.cols,
-          rows: size.rows
-        });
+        Terminal.applyAddon(fit);
+        var term = new Terminal();
         ws.onopen = function(event) {
-            ws.send(JSON.stringify(["set_size", size.rows, size.cols,
-                                        window.innerHeight, window.innerWidth]));
             term.on('data', function(data) {
                 ws.send(JSON.stringify(['stdin', data]));
             });
@@ -18,7 +14,11 @@ define (["xterm"], function(Terminal) {
             });
 
             term.open(element);
-
+            term.fit();
+            // send the terminal size to the server.
+            ws.send(JSON.stringify(["set_size", term.rows, term.cols,
+                                        window.innerHeight, window.innerWidth]));
+
             ws.onmessage = function(event) {
                 var json_msg = JSON.parse(event.data);
                 switch(json_msg[0]) {

notebook/static/terminal/less/terminal.less

@@ -15,12 +15,9 @@
     padding: @code_padding;
     border-radius: @border-radius-base;
     .box-shadow(@global-shadow-dark);
+    line-height: 1em;
+    font-size: @notebook_font_size;
 
-    &, dummy-screen {
-      line-height: 1em;
-      font-size: @notebook_font_size;
-    }
-
     .xterm-rows {
       padding: 10px;
     }
@@ -31,7 +28,12 @@
     background: white;
   }
 
+  .terminado-container-container {
+    padding-top: @page-header-padding;
+    height: 100%;
+  }
+
   #terminado-container {
-    margin-top: @page-header-padding;
+    height: 100%;
   }
 }

notebook/templates/page.html

@@ -42,7 +42,7 @@
             'jquery-ui': 'components/jquery-ui/ui/minified/jquery-ui.min',
             moment: 'components/moment/min/moment-with-locales',
             codemirror: 'components/codemirror',
-            termjs: 'components/xterm.js/dist/xterm',
+            termjs: 'components/xterm.js/xterm',
             typeahead: 'components/jquery-typeahead/dist/jquery.typeahead.min',
           },
           map: { // for backward compatibility

notebook/templates/terminal.html

@@ -15,52 +15,21 @@
 {% block stylesheet %}
 {{super()}}
 <link rel="stylesheet" href="{{ static_url("terminal/css/override.css") }}" type="text/css" />
-<link rel="stylesheet" href="{{static_url("components/xterm.js/dist/xterm.css") }}" type="text/css" />
+<link rel="stylesheet" href="{{static_url("components/xterm.js-css/index.css") }}" type="text/css" />
 {% endblock %}
 
 {% block headercontainer %}
 <span id="save_widget" class="save_widget"></span>
 {% endblock headercontainer %}
 
 {% block site %}
-<div id="terminado-container" class="container"></div>
+<div class="terminado-container-container">
+  <div id="terminado-container" class="container"></div>
+</div>
 {% endblock %}
 
 {% block script %}
 
-<!-- Hack: this needs to be outside the display:none block, so we can measure
-     its size in JS in setting up the page. It is still invisible. Putting in
-     the script block gets it outside the initially undisplayed region. -->
-<!-- test size: 25x80 -->
-<div style='position:absolute; left:-1000em'>
-<pre id="dummy-screen" style="border: solid 5px white;" class="terminal">0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-0
-1
-2
-3
-<span id="dummy-screen-rows" style="">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
-</pre>
-</div>
-
     {{super()}}
 
 <script src="{{ static_url("terminal/js/main.min.js") }}" type="text/javascript" charset="utf-8"></script>

setupbase.py

@@ -157,8 +157,9 @@ def find_package_data():
         pjoin(components, "underscore", "underscore-min.js"),
         pjoin(components, "moment", "moment.js"),
         pjoin(components, "moment", "min", "*.js"),
-        pjoin(components, "xterm.js", "dist", "xterm.js"),
-        pjoin(components, "xterm.js", "dist", "xterm.css"),
+        pjoin(components, "xterm.js", "index.js"),
+        pjoin(components, "xterm.js-css", "index.css"),
+        pjoin(components, "xterm.js-fit", "index.js"),
         pjoin(components, "text-encoding", "lib", "encoding.js"),
     ])
 

tools/build-main.js

@@ -24,7 +24,8 @@ var rjs_config = {
     "jquery-ui": 'components/jquery-ui/ui/minified/jquery-ui.min',
     moment: 'components/moment/min/moment-with-locales',
     codemirror: 'components/codemirror',
-    xterm: 'components/xterm.js/dist/xterm',
+    xterm: 'components/xterm.js/index',
+    'xtermjs-fit': 'components/xterm.js-fit/index',
     typeahead: 'components/jquery-typeahead/dist/jquery.typeahead',
     contents: 'empty:',
     custom: 'empty:',