Merge pull request #5260 from Tyriar/5241

Blend cursor with background to support alpha in webgl

Author: Tyriar

demo/client.ts

@@ -16,7 +16,7 @@ if ('WebAssembly' in window) {
   ImageAddon = imageAddon.ImageAddon;
 }
 
-import { Terminal, ITerminalOptions, type IDisposable } from '@xterm/xterm';
+import { Terminal, ITerminalOptions, type IDisposable, type ITheme } from '@xterm/xterm';
 import { AttachAddon } from '@xterm/addon-attach';
 import { ClipboardAddon } from '@xterm/addon-clipboard';
 import { FitAddon } from '@xterm/addon-fit';
@@ -131,7 +131,7 @@ const xtermjsTheme = {
   brightCyan: '#72F0FF',
   white: '#F8F8F8',
   brightWhite: '#FFFFFF'
-};
+} satisfies ITheme;
 function setPadding(): void {
   term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
   addons.fit.instance.fit();

src/browser/services/ThemeService.ts

@@ -82,7 +82,7 @@ export class ThemeService extends Disposable implements IThemeService {
     const colors = this._colors;
     colors.foreground = parseColor(theme.foreground, DEFAULT_FOREGROUND);
     colors.background = parseColor(theme.background, DEFAULT_BACKGROUND);
-    colors.cursor = parseColor(theme.cursor, DEFAULT_CURSOR);
+    colors.cursor = color.blend(colors.background, parseColor(theme.cursor, DEFAULT_CURSOR));
     colors.cursorAccent = parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT);
     colors.selectionBackgroundTransparent = parseColor(theme.selectionBackground, DEFAULT_SELECTION);
     colors.selectionBackgroundOpaque = color.blend(colors.background, colors.selectionBackgroundTransparent);

test/playwright/SharedRendererTests.ts

@@ -1248,6 +1248,14 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void
       await ctx.value.proxy.scrollLines(-2);
       await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [0, 0, 0, 255]);
     });
+    test('#5241 cursor with alpha should blend color with background color', async () => {
+      const theme: ITheme = {
+        cursor: '#FF000080'
+      };
+      await ctx.value.page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`);
+      await ctx.value.proxy.focus();
+      await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [128, 0, 0, 255]);
+    });
   });
 }