diff --git a/addons/xterm-addon-attach/test/AttachAddon.api.ts b/addons/xterm-addon-attach/test/AttachAddon.api.ts index ef26cfd2..8335cf0f 100644 --- a/addons/xterm-addon-attach/test/AttachAddon.api.ts +++ b/addons/xterm-addon-attach/test/AttachAddon.api.ts @@ -4,7 +4,7 @@ */ import WebSocket = require('ws'); -import { openTerminal, pollFor, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, pollFor, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('AttachAddon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/addons/xterm-addon-fit/test/FitAddon.api.ts b/addons/xterm-addon-fit/test/FitAddon.api.ts index 8859b5a6..987092ad 100644 --- a/addons/xterm-addon-fit/test/FitAddon.api.ts +++ b/addons/xterm-addon-fit/test/FitAddon.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 768; describe('FitAddon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/addons/xterm-addon-search/test/SearchAddon.api.ts b/addons/xterm-addon-search/test/SearchAddon.api.ts index 3c94d416..8bdf61cf 100644 --- a/addons/xterm-addon-search/test/SearchAddon.api.ts +++ b/addons/xterm-addon-search/test/SearchAddon.api.ts @@ -6,7 +6,7 @@ import { assert } from 'chai'; import { readFile } from 'fs'; import { resolve } from 'path'; -import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -18,10 +18,7 @@ const height = 600; describe('Search Tests', function(): void { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/addons/xterm-addon-serialize/test/SerializeAddon.api.ts b/addons/xterm-addon-serialize/test/SerializeAddon.api.ts index 87f77f59..bb66f37b 100644 --- a/addons/xterm-addon-serialize/test/SerializeAddon.api.ts +++ b/addons/xterm-addon-serialize/test/SerializeAddon.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -38,10 +38,7 @@ async function testSerializeEquals(writeContent: string, expectedSerialized: str describe('SerializeAddon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts b/addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts index ba536e90..4c695b00 100644 --- a/addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts +++ b/addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('Unicode11Addon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/addons/xterm-addon-web-links/test/WebLinksAddon.api.ts b/addons/xterm-addon-web-links/test/WebLinksAddon.api.ts index 54650f1f..fe44dc31 100644 --- a/addons/xterm-addon-web-links/test/WebLinksAddon.api.ts +++ b/addons/xterm-addon-web-links/test/WebLinksAddon.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, pollFor, writeSync, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('WebLinksAddon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/addons/xterm-addon-webgl/test/WebglRenderer.api.ts b/addons/xterm-addon-webgl/test/WebglRenderer.api.ts index 793929e9..e6942d1c 100644 --- a/addons/xterm-addon-webgl/test/WebglRenderer.api.ts +++ b/addons/xterm-addon-webgl/test/WebglRenderer.api.ts @@ -6,7 +6,7 @@ import { assert } from 'chai'; import { Browser, Page } from 'playwright'; import { ITheme } from 'xterm'; -import { getBrowserType, openTerminal, pollFor, writeSync } from '../../../out-test/api/TestUtils'; +import { getBrowserType, launchBrowser, openTerminal, pollFor, writeSync } from '../../../out-test/api/TestUtils'; import { ITerminalOptions } from '../../../src/common/Types'; const APP = 'http://127.0.0.1:3001/test'; @@ -905,10 +905,7 @@ async function getCellPixels(col: number, row: number): Promise { } async function setupBrowser(options: ITerminalOptions = { rendererType: 'dom' }): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/bin/test_api.js b/bin/test_api.js index 9fe4659a..f173b417 100644 --- a/bin/test_api.js +++ b/bin/test_api.js @@ -59,6 +59,12 @@ server.stdout.on('data', (data) => { `${script}.cmd` : script)); } + server.kill(); + process.exit(run.status); } }); + +server.stderr.on('data', (data) => { + console.error(data.toString()); +}); diff --git a/demo/client.ts b/demo/client.ts index de1faa37..48b6d177 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -349,6 +349,9 @@ function initOptions(term: TerminalType): void { } else if (o === 'lineHeight' || o === 'scrollSensitivity') { term.setOption(o, parseFloat(input.value)); updateTerminalSize(); + } else if(o === 'scrollback') { + term.setOption(o, parseInt(input.value)); + setTimeout(() => updateTerminalSize(), 5); } else { term.setOption(o, parseInt(input.value)); } diff --git a/src/browser/Terminal.ts b/src/browser/Terminal.ts index fc725122..ebe755bc 100644 --- a/src/browser/Terminal.ts +++ b/src/browser/Terminal.ts @@ -94,6 +94,13 @@ export class Terminal extends CoreTerminal implements ITerminal { */ private _keyDownHandled: boolean = false; + /** + * Records whether the keypress event has already been handled and triggered a data event, if so + * the input event should not trigger a data event but should still print to the textarea so + * screen readers will announce it. + */ + private _keyPressHandled: boolean = false; + /** * Records whether there has been a keydown event for a dead key without a corresponding keydown * event for the composed/alternative character. If we cancel the keydown event for the dead key, @@ -390,6 +397,7 @@ export class Terminal extends CoreTerminal implements ITerminal { this.register(addDisposableDomListener(this.textarea!, 'compositionstart', () => this._compositionHelper!.compositionstart())); this.register(addDisposableDomListener(this.textarea!, 'compositionupdate', (e: CompositionEvent) => this._compositionHelper!.compositionupdate(e))); this.register(addDisposableDomListener(this.textarea!, 'compositionend', () => this._compositionHelper!.compositionend())); + this.register(addDisposableDomListener(this.textarea!, 'input', (ev: InputEvent) => this._inputEvent(ev), true)); this.register(this.onRender(() => this._compositionHelper!.updateCompositionElements())); this.register(this.onRender(e => this._queueLinkification(e.start, e.end))); } @@ -1032,7 +1040,7 @@ export class Terminal extends CoreTerminal implements ITerminal { return false; } - if (event.key === 'Dead') { + if (event.key === 'Dead' || event.key === 'AltGraph') { this._unprocessedDeadKey = true; } @@ -1114,6 +1122,7 @@ export class Terminal extends CoreTerminal implements ITerminal { } this.updateCursorStyle(ev); + this._keyPressHandled = false; } /** @@ -1125,6 +1134,8 @@ export class Terminal extends CoreTerminal implements ITerminal { protected _keyPress(ev: KeyboardEvent): boolean { let key; + this._keyPressHandled = false; + if (this._keyDownHandled) { return false; } @@ -1157,9 +1168,33 @@ export class Terminal extends CoreTerminal implements ITerminal { this._showCursor(); this.coreService.triggerDataEvent(key, true); + this._keyPressHandled = true; + return true; } + /** + * Handle an input event. + * Key Resources: + * - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent + * @param ev The input event to be handled. + */ + protected _inputEvent(ev: InputEvent): boolean { + if (ev.data && ev.inputType === 'insertText') { + if (this._keyPressHandled) { + return false; + } + + const text = ev.data; + this.coreService.triggerDataEvent(text, true); + + this.cancel(ev); + return true; + } + + return false; + } + /** * Ring the bell. * Note: We could do sweet things with webaudio here diff --git a/src/browser/Viewport.ts b/src/browser/Viewport.ts index 162ed174..9ce14daf 100644 --- a/src/browser/Viewport.ts +++ b/src/browser/Viewport.ts @@ -23,6 +23,7 @@ export class Viewport extends Disposable implements IViewport { private _lastRecordedBufferHeight: number = 0; private _lastTouchY: number = 0; private _lastScrollTop: number = 0; + private _lastHadScrollBar: boolean = false; // Stores a partial line amount when scrolling, this is used to keep track of how much of a line // is scrolled so we can "scroll" over partial lines and feel natural on touchpads. This is a @@ -47,6 +48,7 @@ export class Viewport extends Disposable implements IViewport { // Unfortunately the overlay scrollbar would be hidden underneath the screen element in that case, // therefore we account for a standard amount to make it visible this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH; + this._lastHadScrollBar = true; this.register(addDisposableDomListener(this._viewportElement, 'scroll', this._onScroll.bind(this))); // Perform this async to ensure the ICharSizeService is ready. @@ -94,8 +96,18 @@ export class Viewport extends Disposable implements IViewport { this._viewportElement.scrollTop = scrollTop; } + // Update scroll bar width + if (this._optionsService.options.scrollback === 0) { + this.scrollBarWidth = 0; + } else { + this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH; + } + this._lastHadScrollBar = this.scrollBarWidth > 0; + + this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth).toString() + 'px'; this._refreshAnimationFrame = null; } + /** * Updates dimensions and synchronizes the scroll area if necessary. */ @@ -131,6 +143,11 @@ export class Viewport extends Disposable implements IViewport { this._refresh(immediate); return; } + + // If the scroll bar visibility changed + if (this._lastHadScrollBar !== (this._optionsService.options.scrollback > 0)) { + this._refresh(immediate); + } } /** diff --git a/test/api/CharWidth.api.ts b/test/api/CharWidth.api.ts index d7cea109..83067149 100644 --- a/test/api/CharWidth.api.ts +++ b/test/api/CharWidth.api.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { pollFor, openTerminal, getBrowserType } from './TestUtils'; +import { pollFor, openTerminal, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -15,10 +15,7 @@ const height = 600; describe('CharWidth Integration Tests', function(): void { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/test/api/InputHandler.api.ts b/test/api/InputHandler.api.ts index a695abdc..54ee6957 100644 --- a/test/api/InputHandler.api.ts +++ b/test/api/InputHandler.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { pollFor, openTerminal, getBrowserType } from './TestUtils'; +import { pollFor, openTerminal, getBrowserType, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; import { IRenderDimensions } from 'browser/renderer/Types'; @@ -21,9 +21,7 @@ describe('InputHandler Integration Tests', function(): void { before(async function(): Promise { const browserType = getBrowserType(); isChromium = browserType.name() === 'chromium'; - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/test/api/MouseTracking.api.ts b/test/api/MouseTracking.api.ts index 3df21a90..ebeb680f 100644 --- a/test/api/MouseTracking.api.ts +++ b/test/api/MouseTracking.api.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { pollFor, writeSync, openTerminal, getBrowserType } from './TestUtils'; +import { pollFor, writeSync, openTerminal, getBrowserType, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -211,9 +211,7 @@ describe('Mouse Tracking Tests', async () => { const itMouse = isChromium ? it : it.skip; before(async function(): Promise { - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/test/api/Parser.api.ts b/test/api/Parser.api.ts index 0ef57cf1..ada28adf 100644 --- a/test/api/Parser.api.ts +++ b/test/api/Parser.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { writeSync, openTerminal, getBrowserType } from './TestUtils'; +import { writeSync, openTerminal, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('Parser Integration Tests', function (): void { before(async function (): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/test/api/Terminal.api.ts b/test/api/Terminal.api.ts index 1599f3a2..00598e47 100644 --- a/test/api/Terminal.api.ts +++ b/test/api/Terminal.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { pollFor, timeout, writeSync, openTerminal, getBrowserType } from './TestUtils'; +import { pollFor, timeout, writeSync, openTerminal, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('API Integration Tests', function(): void { before(async () => { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/test/api/TestUtils.ts b/test/api/TestUtils.ts index 2b1e8828..4fa98d43 100644 --- a/test/api/TestUtils.ts +++ b/test/api/TestUtils.ts @@ -67,3 +67,17 @@ export function getBrowserType(): playwright.BrowserType = { + headless: process.argv.includes('--headless'), + } + + const index = process.argv.indexOf('--executablePath'); + if(index > 0 && process.argv.length > index + 1 && typeof process.argv[index + 1] === 'string') { + options.executablePath = process.argv[index + 1]; + } + + return browserType.launch(options); +}