Addon WebGL vs Canvas: Are there additional configurations to make selectionBackground transparent in webgl?

[isubasin]

Hello,

We are currently upgrading an application from xterm version 4.14.1 to 5.1.0 and we are unable to get the selectionBackground to display transparently similar to the canvas mode.

Application overview:
User selects colour for background, text and selection color before loading application terminal

In the older version the rendereType was by default Canvas. Since this is now an addon, with xterm-addon-canvas, the selection background shows properly, but some of the CHUI features were not working. i.e. in the screenshot below, the selection is as expected, however, below the cursor the user prompts should display the field for user to enter the data (it only appears as the user types)
xterm-addon-canvas rendering output:

We were able to fix this issue with xterm-addon-webgl, which according to texts was recommended as well.

However, with this the selectionBackground changes and is not the expected outcome.

xterm-addon-webgl rendering output:

selectionBackground and other colors are set with themes option after terminal.open.
terminal.options.theme = { background: detailsObj.termBgColor, foreground: detailsObj.termTextColor, selectionBackground: detailsObj.selectionTextColor};

Any specific options that needs to be set/changed in order for selectionBackground to display similar to the canvas addon?

Note: we can see there are similar issues reported in the past but marked as fixed with #2952
, so just wanted to check what we are missing and if we need to explicitly select it to be transparent .

Thank you in advance, looking forward for some good news..!

[Tyriar]

For the webgl renderer we use an opaque version of the background that's blended with the default background:

xterm.js/src/browser/services/ThemeService.ts

Lines 104 to 107 in 5b05d45

	selectionBackgroundTransparent: DEFAULT_SELECTION,
	selectionBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
	selectionInactiveBackgroundTransparent: DEFAULT_SELECTION,
	selectionInactiveBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),

It doesn't currently blend with the actual background and that's generally a good thing for accessibility reasons, by ensuring an opaque background color (and optionally foreground too) you can better control contrast.

[isubasin]

Hi @Tyriar ,

I apologize in advance if am stating something obvious and have not understood your answer. Hope you can help me clarify this a bit more.

So, looking into the code here, I can see that right after the colors set, it calls the setTheme with the rawOptions we set including the selectionBackground.
this._setTheme(this._optionsService.rawOptions.theme);

In the setTheme the mentioned Transparent/opaque is being set based on the selection

  private _setTheme(theme: ITheme = {}): void {
    :
    colors.selectionBackgroundTransparent = parseColor(theme.selectionBackground, DEFAULT_SELECTION);
    colors.selectionBackgroundOpaque = color.blend(colors.background, colors.selectionBackgroundTransparent);

According to the code it is setting the selectionBackgroundTransparent with the selectionBackground value and performing the blend to set the selectionBackgroundOpaque .

On our terminal, at runtime, selectionBackgroundOpaque seems the same value as the selectionBackground and then selectionBackgroundTransparent is having the added 4d in the end for transparency hexa - which i believe is due to the if (color.isOpaque(colors.selectionBackgroundTransparent)) { const opacity = 0.3; colors.selectionBackgroundTransparent = color.opacity(colors.selectionBackgroundTransparent, opacity); }

Do you mean to say this the expected behavior? or should the selectionBackgroundOpaque have a different blended value here instead of being same as the selectionBackground color value? Or should we / is there a way we can explicitly set/force the blend for selectionBackgroundOpaque ?

Thank you for your support!

[Tyriar]

@isubasin thats by design, the internal opaque and transparent values try use a best guess value depending on what the theme is. The values then may or may not be used depending on the renderer type.