Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade xterm.js to 3.1.0 #3189

Merged
merged 15 commits into from
Feb 13, 2018
Merged

Upgrade xterm.js to 3.1.0 #3189

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ad23737
Upgrade xterm.js to 3.0.1
cancan101 Jan 8, 2018
85cd514
Add dummy css package for xterm
cancan101 Jan 8, 2018
538a89f
update paths
cancan101 Jan 9, 2018
94f6382
fix path
cancan101 Jan 9, 2018
131502d
fix path
cancan101 Jan 9, 2018
4616250
Bump version pin to 3.1.0
cancan101 Feb 9, 2018
e5d393a
use fit addon
cancan101 Feb 9, 2018
c5fcd74
remove dummy
cancan101 Feb 10, 2018
a770f83
cleanup old
cancan101 Feb 10, 2018
bb7dd0a
calc height
cancan101 Feb 10, 2018
2d5cd35
dead code
cancan101 Feb 10, 2018
dab784f
fix
cancan101 Feb 10, 2018
2424f97
more dead
cancan101 Feb 10, 2018
2baa5d3
revert deletion and add comments
cancan101 Feb 12, 2018
91794ec
dont rely on css calc
cancan101 Feb 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
28 changes: 3 additions & 25 deletions notebook/static/terminal/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,6 @@ requirejs([
var common_config = new configmod.ConfigSection('common', common_options);
common_config.load();

var login_widget = new loginwidget.LoginWidget('span#login_widget', common_options);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please leave this in place - it makes the 'logout' button in the top right work.


// 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');
Expand All @@ -45,32 +38,17 @@ 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).height(), $(window).width()]));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We still need to send the new size to the server so that it can trigger a resize in the running process. Try running a full-screen program like vim or aptitude, and resize the terminal while it's running.

window.onresize = function() {
terminal.term.fit();
};

// Expose terminal for fiddling with in the browser
Expand Down
15 changes: 6 additions & 9 deletions notebook/static/terminal/js/terminado.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll still need to send this as well, so it knows how big the initial window is.

term.on('data', function(data) {
ws.send(JSON.stringify(['stdin', data]));
});
Expand All @@ -18,7 +14,8 @@ define (["xterm"], function(Terminal) {
});

term.open(element);

term.fit();

ws.onmessage = function(event) {
var json_msg = JSON.parse(event.data);
switch(json_msg[0]) {
Expand Down
10 changes: 4 additions & 6 deletions notebook/static/terminal/less/terminal.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -32,6 +29,7 @@
}

#terminado-container {
margin-top: @page-header-padding;
padding-top: @page-header-padding;
height: ~"calc(100% - @{page-header-padding})";
}
}
2 changes: 1 addition & 1 deletion notebook/templates/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
35 changes: 1 addition & 34 deletions notebook/templates/terminal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
{% 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 %}
Expand All @@ -28,39 +28,6 @@

{% 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>
Expand Down
5 changes: 3 additions & 2 deletions setupbase.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
])

Expand Down
3 changes: 2 additions & 1 deletion tools/build-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:',
Expand Down