Terminal selection is drawn above foreground

[AndreasBackx]

Issue Type: Bug

When selecting text in the terminal, the text is behind the selection background. If the value for the selection background is opaque, then the text is invisible. I'd expect it to be behind the text like it is in the editor's color configuration.

With an opaque color:

With a more transparant color:

VS Code version: Code 1.22.1 (950b8b0, 2018-04-06T00:24:49.616Z)
OS version: Linux x64 4.15.14-1-ARCH

System Info

Item	Value
CPUs	AMD Ryzen 7 1700 Eight-Core Processor (16 x 2575)
Load (avg)	1, 1, 1
Memory (System)	15.68GB (4.89GB free)
Process Argv	/opt/visual-studio-code/code
Screen Reader	no
VM	0%

Extensions (3)

Extension	Author (truncated)	Version
project-manager	ale	0.25.0
python	ms-	2018.3.1
sublime-keybindings	ms-	3.0.3

[tweakimp]

Maybe it is supposed to be this way, just the tooltip that this color needs to be opaque is missing. Compare with editor.selectionHighlightBackground

[AndreasBackx]

@tweakimp editor.selectionHighlightBackground places the foreground above the background as expected.

[Tyriar]

Upstream issue: xtermjs/xterm.js#720

You need to use a transparent selection color currently which is less than ideal.

[GlenPerkins]

Yes, eventually this "background" really needs to be in the background, not painted on top of everything else. As it is, the best you can do with it is to use transparency to make it look as if you've put colored plastic tape over your selection, which dulls it and changes its foreground color.

[Luxcium]

is it possible to transition from selection: IColor; to selectionForeground?: IColor;and selectionBackground?: IColor;

export interface IColorSet {
  foreground: IColor;
  background: IColor;
  cursor: IColor;
  cursorAccent: IColor;
  selection: IColor; 
  selectionForeground?: IColor;
  selectionBackground?: IColor;
  ansi: IColor[];
}

I would be happy to work on that in xtermjs/xterm.js (issues/720) but need to know how it must be implemented...
maybe @Tyriar could tell me how it should be done so I can. work on it is it is possible (I don't want to mess anything that will prevent the end result to be merged) I have my idea (but I am not sure how to communicate it)

I was, in fact, trying to find a way to change the color of the selected text (and maybe the border) as stated in zeit/hyper -> Add a config option for selected text color setting (issues/2934)

[Tyriar]

@Luxcium we probably do want selection foreground eventually be customizable as well, that way the user can choose their preferred style as set fg/bg colors has some great accessibility benefits. But we probably shouldn't move on this issue until the canvas renderer is removed (and replaced with xtermjs/xterm.js#1790)

[tweakimp]

@Tyriar any news on this issue? The one you linked is merged, but this issue is still a problem.

[Tyriar]

@tweakimp we're not using the webgl renderer yet

[Tyriar]

This issue is blocked on the webgl renderer being stabilized, see the issue query: https://github.com/xtermjs/xterm.js/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Faddon%2Fwebgl

[marvingreenberg]

Just a note, this breaks any customization of terminal selection color, but maybe that's obvious.

Oh, I figured out how to type a transparent color, "#c000ff00"

[Tyriar]

@marvingreenberg see #84440