Support setting padding on the .xterm element

[mofux]

Fixes #946

This PR adds the ability to add a custom css padding to the .xterm element while still having the scrollbar filling the whole space.

In action:

[blink1073]

This is great, thanks @mofux!

[cancan101]

so what is left to get this merged?

[ficristo]

Will this work if I set only padding-left ?

[mofux]

@ficristo Yes, it will work with individual paddings for every side.

[mofux]

@Tyriar All checks are green now, please review if you find a moment 🧐

[Tyriar]

I resolved the conflicts introduced from #1222

[Tyriar]

Found a bug, having a non-zero padding breaks IMEs. This is happening because of the position of the xterm-helper and there was an assumption that there was no padding inside the terminal container.

The Clipboard.ts file also moves textarea under the cursor (moveTextAreaUnderMouseCursor) for middle click paste selection on Linux and the right click context menu. We'll want to make sure they still work with large padding values.

[Tyriar]

Let's pull 15 up to the top to a named constant, maybe FALLBACK_SCROLL_BAR_WIDTH?

[cancan101]

any updates on this PR?

[mofux]

@cancan101 I'll try to resolve the remaining issues this week.

[Tyriar]

@mofux I synced with master and resolved conflicts then made the following changes:

• Moved helperContainer inside screenElement, this fixes the issue above where the IME position is incorrect as the helperContainer will always be positioned with the screen elements.
• Removed screenElement from the public API, since no one has really asked for it let's not put it in. Consumers also know their own padding so it's fairly easy for them to know the rendered box position.
• Move 15 into named const FALLBACK_SCROLL_BAR_WIDTH

[KhizerRehan]

@mofux @Tyriar
I am using this version how to set padding?
"xterm": "4.18.0"

//  overriding padding does work in chrome devtool but when applied in file it fails to apply on terminal screen
.xterm-screen {
  padding: 10px !important;
}

any help?

[Tyriar]

@KhizerRehan I think you set it on .xterm

[ssh-randy]

love the change! unfortunately... one small snag.

the terminal now bleeds over. i tried setting padding-right, but no dice.

i used this:

.xterm-screen {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
}

any idea how to fix it?

edit: one more note, i'm using the fit AddOn

[ssh-randy]

ah nevermind. i should be adjusting the css on the container to address this 😄