Skip to content

DomRenderer draw selection inactive background correctly when unfocused #4763

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tyriar merged 9 commits into from
Sep 9, 2023
Merged

DomRenderer draw selection inactive background correctly when unfocused #4763

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
393a8b3
When DomRenderer blue,perform rendering.
tisilent Sep 8, 2023
2f233f2
💄
tisilent Sep 8, 2023
65e07dc
Merge branch 'master' into fix-selection-background-domrenderer
Tyriar Sep 9, 2023
9f5ff46
Remove selection color test buttons
Tyriar Sep 9, 2023
f159a86
Add default xterm.js theme inactive selection bg
Tyriar Sep 9, 2023
fa168bd
Add a test which fails without the change
Tyriar Sep 9, 2023
5126481
Remove only
Tyriar Sep 9, 2023
5036971
Merge branch 'master' into fix-selection-background-domrenderer
Tyriar Sep 9, 2023
a101135
Check add empty cells that are being asserted on
Tyriar Sep 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ const xtermjsTheme = {
foreground: '#F8F8F8',
background: '#2D2E2C',
selectionBackground: '#5DA5D533',
selectionInactiveBackground: '#555555AA',
black: '#1E1E1D',
brightBlack: '#262625',
red: '#CE5C5C',
Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ <h3>Test</h3>

<dt>Weblinks Addon</dt>
<dd><button id="weblinks-test" title="Various url conditions from demo data, hover&click to test">Test URLs</button></dd>

<dt>Image Test</dt>
<dd><button id="image-demo1">snake (sixel)</button></dd>
<dd><button id="image-demo2">oranges (sixel)</button></dd>
Expand Down
1 change: 1 addition & 0 deletions src/browser/renderer/dom/DomRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
26 changes: 26 additions & 0 deletions test/playwright/SharedRendererTests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -961,6 +961,32 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void
});
});

(ctx.skipCanvasExceptions ? test.describe.skip : test.describe)('selectionInactiveBackground', async () => {
test('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`));

Expand Down
4 changes: 2 additions & 2 deletions test/playwright/TestUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,8 +400,8 @@ export async function pollFor<T>(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')));
}
Expand Down