From 393a8b3a864c933b28ae6458639ba5ebef20f233 Mon Sep 17 00:00:00 2001 From: tisilent Date: Fri, 8 Sep 2023 18:08:14 +0800 Subject: [PATCH 1/7] When DomRenderer blue,perform rendering. --- demo/client.ts | 16 ++++++++++++++++ demo/index.html | 8 ++++++++ src/browser/renderer/dom/DomRenderer.ts | 1 + 3 files changed, 25 insertions(+) diff --git a/demo/client.ts b/demo/client.ts index bde5ca72..85a1104e 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -119,6 +119,8 @@ const actionElements = { findResults: document.querySelector('#find-results') }; const paddingElement = document.getElementById('padding') as HTMLInputElement; +const selectionBackgroundElement = document.getElementById('selectionBackground') as HTMLInputElement; +const selectionInactiveBackgroundElement = document.getElementById('selectionInactiveBackground') as HTMLInputElement; const xtermjsTheme = { foreground: '#F8F8F8', @@ -146,6 +148,18 @@ function setPadding(): void { addons.fit.instance.fit(); } +function setSelectionInactiveBackground(): void { + const theme = { ...term.options.theme }; + theme.selectionInactiveBackground = selectionInactiveBackgroundElement.value; + term.options.theme = theme; +} + +function setSelectionBackground(): void { + const theme = { ...term.options.theme }; + theme.selectionBackground = selectionBackgroundElement.value; + term.options.theme = theme; +} + function getSearchOptions(): ISearchOptions { return { regex: (document.getElementById('regex') as HTMLInputElement).checked, @@ -333,6 +347,8 @@ function createTerminal(): void { resizeObserver.observe(terminalContainer); addDomListener(paddingElement, 'change', setPadding); + addDomListener(selectionInactiveBackgroundElement, 'change', setSelectionInactiveBackground); + addDomListener(selectionBackgroundElement, 'change', setSelectionBackground); addDomListener(actionElements.findNext, 'keydown', (e) => { if (e.key === 'Enter') { diff --git a/demo/index.html b/demo/index.html index 6d9be706..594f0ee7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -75,6 +75,14 @@ +
+ + +
+
+ + +

Test

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index 7413776c..98213e08 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -299,6 +299,7 @@ export class DomRenderer extends Disposable implements IRenderer { public handleBlur(): void { this._rowContainer.classList.remove(FOCUS_CLASS); + this.renderRows(0, this._bufferService.rows - 1); } public handleFocus(): void { From 2f233f2389ae05758aa1afd43e1111d963978165 Mon Sep 17 00:00:00 2001 From: tisilent Date: Fri, 8 Sep 2023 18:52:11 +0800 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=92=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/index.html b/demo/index.html index 594f0ee7..f56af820 100644 --- a/demo/index.html +++ b/demo/index.html @@ -76,7 +76,7 @@
- +
From 9f5ff468e1ae010cc1d9e6b421a6e5d15e3df09d Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 8 Sep 2023 19:55:10 -0700 Subject: [PATCH 3/7] Remove selection color test buttons There's too many theme colors, we'll leave it to the console --- demo/client.ts | 16 ---------------- demo/index.html | 10 +--------- 2 files changed, 1 insertion(+), 25 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index 8cc266aa..7ade385e 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -120,8 +120,6 @@ const actionElements = { findResults: document.querySelector('#find-results') }; const paddingElement = document.getElementById('padding') as HTMLInputElement; -const selectionBackgroundElement = document.getElementById('selectionBackground') as HTMLInputElement; -const selectionInactiveBackgroundElement = document.getElementById('selectionInactiveBackground') as HTMLInputElement; const xtermjsTheme = { foreground: '#F8F8F8', @@ -149,18 +147,6 @@ function setPadding(): void { addons.fit.instance.fit(); } -function setSelectionInactiveBackground(): void { - const theme = { ...term.options.theme }; - theme.selectionInactiveBackground = selectionInactiveBackgroundElement.value; - term.options.theme = theme; -} - -function setSelectionBackground(): void { - const theme = { ...term.options.theme }; - theme.selectionBackground = selectionBackgroundElement.value; - term.options.theme = theme; -} - function getSearchOptions(): ISearchOptions { return { regex: (document.getElementById('regex') as HTMLInputElement).checked, @@ -349,8 +335,6 @@ function createTerminal(): void { resizeObserver.observe(terminalContainer); addDomListener(paddingElement, 'change', setPadding); - addDomListener(selectionInactiveBackgroundElement, 'change', setSelectionInactiveBackground); - addDomListener(selectionBackgroundElement, 'change', setSelectionBackground); addDomListener(actionElements.findNext, 'keydown', (e) => { if (e.key === 'Enter') { diff --git a/demo/index.html b/demo/index.html index f56af820..7d7329a7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -75,14 +75,6 @@
-
- - -
-
- - -

Test

@@ -112,7 +104,7 @@
Weblinks Addon
- +
Image Test
From f159a862e412b4db0bb61e1cf9b1a854c5fcc4b9 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 8 Sep 2023 19:57:17 -0700 Subject: [PATCH 4/7] Add default xterm.js theme inactive selection bg --- demo/client.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/demo/client.ts b/demo/client.ts index 7ade385e..fbe87195 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -125,6 +125,7 @@ const xtermjsTheme = { foreground: '#F8F8F8', background: '#2D2E2C', selectionBackground: '#5DA5D533', + selectionInactiveBackground: '#444444', black: '#1E1E1D', brightBlack: '#262625', red: '#CE5C5C', From fa168bd4c040a28266eefd90e70bda6454b26523 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 8 Sep 2023 20:21:58 -0700 Subject: [PATCH 5/7] Add a test which fails without the change --- demo/client.ts | 2 +- test/playwright/SharedRendererTests.ts | 26 ++++++++++++++++++++++++++ test/playwright/TestUtils.ts | 4 ++-- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index fbe87195..06949a8a 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -125,7 +125,7 @@ const xtermjsTheme = { foreground: '#F8F8F8', background: '#2D2E2C', selectionBackground: '#5DA5D533', - selectionInactiveBackground: '#444444', + selectionInactiveBackground: '#555555AA', black: '#1E1E1D', brightBlack: '#262625', red: '#CE5C5C', diff --git a/test/playwright/SharedRendererTests.ts b/test/playwright/SharedRendererTests.ts index f8d70cc9..a943cd69 100644 --- a/test/playwright/SharedRendererTests.ts +++ b/test/playwright/SharedRendererTests.ts @@ -960,6 +960,32 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void }); }); + (ctx.skipCanvasExceptions ? test.describe.skip : test.describe)('selectionInactiveBackground', async () => { + test.only('should render the the inactive selection when not focused', async () => { + const theme: ITheme = { + selectionBackground: '#FF000080', + selectionInactiveBackground: '#0000FF80' + }; + await ctx.value.page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`); + await ctx.value.proxy.focus(); + // Check both the cursor line and another line + await ctx.value.proxy.writeln('_'); + await ctx.value.proxy.write('_'); + await ctx.value.page.evaluate(`window.term.selectAll()`); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [128, 0, 0, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [128, 0, 0, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 2), [128, 0, 0, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 2), [128, 0, 0, 255]); + await ctx.value.page.evaluate(`document.activeElement.blur()`); + frameDetails = undefined; + // Selection only cell needs to be first to ensure renderer has kicked in + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [0, 0, 128, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [0, 0, 128, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 2), [0, 0, 128, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 2), [0, 0, 128, 255]); + }); + }); + test.describe('allowTransparency', async () => { test.beforeEach(() => ctx.value.page.evaluate(`term.options.allowTransparency = true`)); diff --git a/test/playwright/TestUtils.ts b/test/playwright/TestUtils.ts index 6bf3eb8f..02a08907 100644 --- a/test/playwright/TestUtils.ts +++ b/test/playwright/TestUtils.ts @@ -400,8 +400,8 @@ export async function pollFor(page: playwright.Page, evalOrFn: string | (() = deepStrictEqual(result, val, ([ `pollFor max duration exceeded.`, (`Last comparison: ` + - `${typeof result === 'object' ? JSON.stringify(result) : result} !== ` + - `${typeof val === 'object' ? JSON.stringify(val) : val}`), + `${typeof result === 'object' ? JSON.stringify(result) : result} (actual) !== ` + + `${typeof val === 'object' ? JSON.stringify(val) : val} (expected)`), `Stack: ${stack}` ].join('\n'))); } From 5126481de2aafa8256b47d0254fc0c80d1d7371c Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Sat, 9 Sep 2023 04:55:56 -0700 Subject: [PATCH 6/7] Remove only --- test/playwright/SharedRendererTests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/playwright/SharedRendererTests.ts b/test/playwright/SharedRendererTests.ts index a943cd69..5e245c14 100644 --- a/test/playwright/SharedRendererTests.ts +++ b/test/playwright/SharedRendererTests.ts @@ -961,7 +961,7 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void }); (ctx.skipCanvasExceptions ? test.describe.skip : test.describe)('selectionInactiveBackground', async () => { - test.only('should render the the inactive selection when not focused', async () => { + test('should render the the inactive selection when not focused', async () => { const theme: ITheme = { selectionBackground: '#FF000080', selectionInactiveBackground: '#0000FF80' From a10113543b073619696dc3b7cdaf49cb7e15faa7 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Sat, 9 Sep 2023 06:21:37 -0700 Subject: [PATCH 7/7] Check add empty cells that are being asserted on --- test/playwright/SharedRendererTests.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/playwright/SharedRendererTests.ts b/test/playwright/SharedRendererTests.ts index 4dcf590b..a2e79286 100644 --- a/test/playwright/SharedRendererTests.ts +++ b/test/playwright/SharedRendererTests.ts @@ -970,8 +970,8 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void await ctx.value.page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`); await ctx.value.proxy.focus(); // Check both the cursor line and another line - await ctx.value.proxy.writeln('_'); - await ctx.value.proxy.write('_'); + await ctx.value.proxy.writeln('_ '); + await ctx.value.proxy.write('_ '); await ctx.value.page.evaluate(`window.term.selectAll()`); await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [128, 0, 0, 255]); await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [128, 0, 0, 255]);