Xterm.js: Add an option to set the terminal padding

[mofux]

I would like to come up with a solution for the following issue:

Say you have a tab that renders the terminal, say it's 300x200. Now if we put the terminal into that tab, we can either make the terminal container to fill it 100%, but in that case the terminal text will touch the edges of the tab at the left, right, top and bottom, which might look weird in some situations. So an easy solution would be to add a 5px margin to the tab container, which does the job, but now you have the viewport scrollbar drawn at a weird position. I think this problem cannot be solved through css (correct me if I'm wrong) because the viewport has to be made aware of the margin to still work in sync. I would therefore propose to make the margin (or better call it padding) configurable through a config option, and then make xterm aware of it:

// 5px padding to all sides
term.setOption('padding', 5);

// individual paddings
term.setOption('padding', {
  top: 5, 
  left: 0,
  right: 10,
  bottom: 5
});

The problem in pictures

Fit the tab

5px margin to the tab, weird looking scrollbar

5px margin, but scrollbar matching the tab container

[Tyriar]

Cool idea:+1:. If you pull it off well I can do quite a bit of simplifying of how I lay out xterm in vscode, currently I'm absolutely positioning the viewport which I don't expect people less familiar with the code base than me to do :stuck_out_tongue:

[Tyriar]

Also, it looks like scroll bar width is:

var vp = document.querySelector('.xterm-viewport');
var sbWidth = vp.offsetWidth - vp.clientWidth;

Would be good to be exact here. We should only need to call it once (calling it may force a layout).

[blink1073]

Hi @mofux, friendly ping. There are two Jupyter projects that could benefit from this fix. Is there anything I can do to help?

[mofux]

@blink1073 I'll try to craft a new PR based on the previous work next week.

[blink1073]

Great! If push comes to shove, we'll wrap the terminal container div with another div that has padding, but I didn't want to add hacks to both projects if the "correct" solution was coming soon. Cheers!

[mofux]

I've created PR #1208 that implements this feature.