Scribery / cockpit

Cockpit fork for work on Session Recording UI
http://www.cockpit-project.org/
GNU Lesser General Public License v2.1
6 stars 3 forks source link

Consider migrating to xterm.js #41

Open sabbaka opened 7 years ago

sabbaka commented 7 years ago

It might be a good time to switch to xterm.js, which is maintained and updated instead of deprecated term.js. This might be beneficial for cockpit also.

spbnick commented 7 years ago

We need to ask Cockpit team if and how we can do that.

sabbaka commented 7 years ago

We will need to deal with proper building of xterm.js with webpack - they are doing some efforts in this directions - https://github.com/xtermjs/xterm.js/issues/1018 Valuable feature is full screen, which is nice to have also, though I have tested it and it makes full screen only in terms of page, not actual full screen. Also, this is how xterm.js is looking inside Cockpit, some CSS is broken. screenshot from 2017-11-02 17-01-02 And this is how mc looks in xterm.js demo, still not very nice. screenshot from 2017-11-02 17-02-10

This is may be useful also: https://xtermjs.org/docs/api/addons/attach/

sabbaka commented 7 years ago

Okay, so I've moved back to work with term.js for now - and I've made a POC for this feature. It's POC, because I'm changing font-size in very inefficient way with jQuery.css() method, which hangs on playback, but works with step-by-step feature. For now, I've created a static list with cols amount and font-size, which is working fine - I've tested with different zoom level in Chromium, of course it's not covering all possible variations and that's why I have an idea to create a function to check if width is broken and if it's return smaller font-size value. Example of almost same function is already in term.js source code. Here are some example of how it's working now: https://youtu.be/K5g_AdZKRIY https://youtu.be/DSk-vxSBaEk https://youtu.be/bRWI9jUdw5M

sabbaka commented 7 years ago

Also, just a general notice - I really want to add full-screen feature ( like a real full screen on YouTube for example ) + I want to add buttons for adjusting font-size, maybe even with broken lines at the end, just to give this kind of flexibility for user ( like we can have in open source software in general as an example ) - or we can just hide part of terminal if it's going to break lines.

sabbaka commented 7 years ago

As for resizing of terminal div on page - it's right now under a question for me - if we should do it at all, but it will definitely possible to make such after I'll create this self-validation function for line width and font size correlation check.