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.

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

Conversation

Projects
None yet
5 participants
@cancan101
Copy link
Contributor

cancan101 commented Jan 8, 2018

Closes #2850

@blink1073

This comment has been minimized.

Copy link
Member

blink1073 commented Jan 8, 2018

I'm not very familiar with bower, but we would need to get https://unpkg.com/xterm@~3.0.1/dist/xterm.css as well.

@taion

This comment has been minimized.

Copy link

taion commented Jan 8, 2018

You may be able to get away with inventing a fake "xtermjs-css" package and using that.

cancan101 added some commits Jan 8, 2018

@blink1073

This comment has been minimized.

Copy link
Member

blink1073 commented Jan 9, 2018

This suffers from the same problem that is holding up JupyterLab: we can't specify the padding yet. You could work around it here by adding an extra wrapper div so that the terminal host div is already inset from the wrapper.

cf jupyterlab/jupyterlab#3553, xtermjs/xterm.js#946

image

@blink1073

This comment has been minimized.

Copy link
Member

blink1073 commented Jan 9, 2018

For reference, on master:

image

@Tyriar

This comment has been minimized.

Copy link

Tyriar commented Jan 9, 2018

@blink1073 couldn't you just wrap the element you open xterm in inside a container with some padding? Does this not work? <div style="padding: 10px"><div id="term"></div></div>

@blink1073

This comment has been minimized.

Copy link
Member

blink1073 commented Jan 9, 2018

Yep, that's what I recommended above 😉. We didn't do that in JupyterLab because we were about to have a major release and there were a few other things that were not quite working yet in the changeover.

@Tyriar

This comment has been minimized.

Copy link

Tyriar commented Jan 9, 2018

@blink1073 oh ok, I thought that was a blocker for you

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Jan 10, 2018

Ok, so what to do about this PR?

@blink1073

This comment has been minimized.

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Jan 10, 2018

I'm not sure that fix works. Maybe we have to wait for xtermjs/xterm.js#1123?

@blink1073

This comment has been minimized.

Copy link
Member

blink1073 commented Jan 11, 2018

@cancan101, why wouldn't wrapping the div work? It might also take updating some CSS/LESS.

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Jan 12, 2018

image

@blink1073

This comment has been minimized.

Copy link
Member

blink1073 commented Jan 12, 2018

Ah, I see what you mean. It is more invasive than I'd hoped. Yeah, I think we should wait for the upstream fix.

@takluyver

This comment has been minimized.

Copy link
Member

takluyver commented Feb 8, 2018

xtermjs/xterm.js#1208 has been merged, so I guess we're just waiting for xtermjs 3.1.0 to be released.

@cancan101 cancan101 changed the title Upgrade xterm.js to 3.0.1 Upgrade xterm.js to 3.1.0 Feb 9, 2018

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Feb 9, 2018

I bumped the version pin. Now I just need to set the padding.

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Feb 9, 2018

Just pulling in 3.1.0 but without making any CSS changes, I get:
image

The left / top look okay, but something is overflowing on the right.

EDIT
The height of the container also appears to be to large. It looks like the calculated number of rows does not match what actually fits.

Is this and this really the best way to calculate the number of columns / rows: (CC @Tyriar )?

e.g. this is the hack fix I am using:

diff --git a/notebook/static/terminal/js/main.js b/notebook/static/terminal/js/main.js
index 92b160753..4dbc3f55f 100644
--- a/notebook/static/terminal/js/main.js
+++ b/notebook/static/terminal/js/main.js
@@ -50,8 +50,8 @@ requirejs([
     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));
+        var rows = Math.min(1000, Math.max(20, Math.floor(height/termRowHeight())-1))-7;
+        var cols = Math.min(1000, Math.max(40, Math.floor(width/termColWidth())-1))-7;
         console.log("resize to :", rows , 'rows by ', cols, 'columns');
         return {rows: rows, cols: cols};
     }

EDIT2
Okay, I think the above approach to calculate the number of rows / columns will no longer work due to the "New Canvas-based Rendering Engine" (ie no longer using dom elements).

EDIT3
This looks quite relevant: https://xtermjs.org/docs/api/addons/fit/ ;-)

@Tyriar

This comment has been minimized.

Copy link

Tyriar commented Feb 9, 2018

Yes resizing is a little more involved now, please report if the fit addon doesn't meet your needs.

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Feb 10, 2018

Ok, I think it's working now:
image

cancan101 added some commits Feb 10, 2018

fix
@@ -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);

This comment has been minimized.

@takluyver

takluyver Feb 12, 2018

Member

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

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()]));

This comment has been minimized.

@takluyver

takluyver Feb 12, 2018

Member

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.

ws.onopen = function(event) {
ws.send(JSON.stringify(["set_size", size.rows, size.cols,
window.innerHeight, window.innerWidth]));

This comment has been minimized.

@takluyver

takluyver Feb 12, 2018

Member

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

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Feb 12, 2018

@takluyver ok reverted those and added some comments.

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Feb 12, 2018

@Tyriar ran into this issue: xtermjs/xterm.js#1283 . worked around it for the time being.

@cancan101

This comment has been minimized.

Copy link
Contributor Author

cancan101 commented Feb 12, 2018

Looks like tests failed since "PhantomJS has crashed".

@takluyver

This comment has been minimized.

Copy link
Member

takluyver commented Feb 13, 2018

Thanks! The tests passed after I restarted the relevant job, and I've tried it manually.

@takluyver takluyver merged commit 4285574 into jupyter:master Feb 13, 2018

4 checks passed

codecov/patch Coverage not affected when comparing 27c00bf...91794ec
Details
codecov/project 78.77% (+0.03%) compared to 27c00bf
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@cancan101 cancan101 deleted the cancan101:patch-2 branch Feb 13, 2018

@cancan101 cancan101 referenced this pull request Feb 15, 2018

Merged

Upgrade to xterm 3.0 #3553

@takluyver takluyver added this to the 5.5 milestone Apr 24, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.