Add an option to set the terminal padding

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]

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).

[mofux]

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