@xterm/xterm 5.6.0-beta.5 → 5.6.0-beta.50

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@xterm/xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "5.6.0-beta.5",
+  "version": "5.6.0-beta.50",
   "main": "lib/xterm.js",
+  "module": "lib/xterm.mjs",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js",
@@ -23,44 +24,50 @@
     "xterm"
   ],
   "scripts": {
-    "prepackage": "npm run build",
-    "package": "webpack",
-    "package-headless": "webpack --config ./webpack.config.headless.js",
-    "postpackage-headless": "node ./bin/package_headless.js",
+    "setup": "npm run build",
+    "presetup": "npm run install-addons",
+    "install-addons": "node ./bin/install-addons.js",
     "start": "node demo/start",
-    "start-server-only": "node demo/start-server-only",
-    "build-demo": "webpack --config ./demo/webpack.config.js",
-    "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
-    "lint-api": "eslint --no-eslintrc -c .eslintrc.json.typings --max-warnings 0 --no-ignore --ext .d.ts typings/",
+    "build": "npm run tsc",
+    "watch": "npm run tsc-watch",
+    "tsc": "tsc -b ./tsconfig.all.json",
+    "tsc-watch": "tsc -b -w ./tsconfig.all.json --preserveWatchOutput",
+    "esbuild": "node bin/esbuild_all.mjs",
+    "esbuild-watch": "node bin/esbuild_all.mjs --watch",
+    "esbuild-package": "node bin/esbuild_all.mjs --prod",
+    "esbuild-package-watch": "node bin/esbuild_all.mjs --prod --watch",
+    "esbuild-package-headless-only": "node bin/esbuild.mjs --prod --headless",
+    "esbuild-demo": "node bin/esbuild.mjs --demo-client",
+    "esbuild-demo-watch": "node bin/esbuild.mjs --demo-client --watch",
     "test": "npm run test-unit",
     "posttest": "npm run lint",
-    "test-api": "npm run test-api-chromium",
-    "test-api-chromium": "node ./bin/test_api.js --browser=chromium --timeout=20000",
-    "test-api-firefox": "node ./bin/test_api.js --browser=firefox --timeout=20000",
-    "test-api-webkit": "node ./bin/test_api.js --browser=webkit --timeout=20000",
-    "test-playwright": "node ./bin/test_playwright.js --workers=75%",
-    "test-playwright-chromium": "node ./bin/test_playwright.js --workers=75% \"--project=Chrome Stable\"",
-    "test-playwright-firefox": "node ./bin/test_playwright.js --workers=75% \"--project=Firefox Stable\"",
-    "test-playwright-webkit": "node ./bin/test_playwright.js --workers=75% \"--project=WebKit\"",
-    "test-playwright-debug": "node ./bin/test_playwright.js  --workers=1 --headed --timeout=30000",
-    "test-unit": "node ./bin/test.js",
-    "test-unit-coverage": "node ./bin/test.js --coverage",
+    "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
+    "lint-api": "eslint --no-eslintrc -c .eslintrc.json.typings --max-warnings 0 --no-ignore --ext .d.ts typings/",
+    "test-unit": "node ./bin/test_unit.js",
+    "test-unit-coverage": "node ./bin/test_unit.js --coverage",
     "test-unit-dev": "cross-env NODE_PATH='./out' mocha",
-    "build": "tsc -b ./tsconfig.all.json",
-    "install-addons": "node ./bin/install-addons.js",
-    "presetup": "npm run install-addons",
-    "setup": "npm run build",
-    "prepublishOnly": "npm run package",
-    "watch": "tsc -b -w ./tsconfig.all.json --preserveWatchOutput",
+    "test-integration": "node ./bin/test_integration.js --workers=75%",
+    "test-integration-chromium": "node ./bin/test_integration.js --workers=75% \"--project=ChromeStable\"",
+    "test-integration-firefox": "node ./bin/test_integration.js --workers=75% \"--project=FirefoxStable\"",
+    "test-integration-webkit": "node ./bin/test_integration.js --workers=75% \"--project=WebKit\"",
+    "test-integration-debug": "node ./bin/test_integration.js  --workers=1 --headed --timeout=30000",
     "benchmark": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json",
-    "benchmark-baseline": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --baseline out-test/benchmark/test/benchmark/*benchmark.js",
-    "benchmark-eval": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --eval out-test/benchmark/test/benchmark/*benchmark.js",
+    "benchmark-baseline": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --baseline out-test/benchmark/*benchmark.js",
+    "benchmark-eval": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --eval out-test/benchmark/*benchmark.js",
     "clean": "rm -rf lib out addons/*/lib addons/*/out",
-    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
+    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts",
+    "prepackage": "npm run build",
+    "package": "webpack",
+    "postpackage": "npm run esbuild-package",
+    "prepackage-headless": "npm run esbuild-package-headless-only",
+    "package-headless": "webpack --config ./webpack.config.headless.js",
+    "postpackage-headless": "node ./bin/package_headless.js",
+    "prepublishOnly": "npm run package"
   },
   "devDependencies": {
     "@lunapaint/png-codec": "^0.2.0",
     "@playwright/test": "^1.37.1",
+    "@stylistic/eslint-plugin": "^2.3.0",
     "@types/chai": "^4.2.22",
     "@types/debug": "^4.1.7",
     "@types/deep-equal": "^1.0.1",
@@ -70,6 +77,7 @@
     "@types/jsdom": "^16.2.13",
     "@types/mocha": "^9.0.0",
     "@types/node": "^18.16.0",
+    "@types/trusted-types": "^1.0.6",
     "@types/utf8": "^3.0.0",
     "@types/webpack": "^5.28.0",
     "@types/ws": "^8.2.0",
@@ -78,9 +86,10 @@
     "chai": "^4.3.4",
     "cross-env": "^7.0.3",
     "deep-equal": "^2.0.5",
+    "esbuild": "^0.23.0",
     "eslint": "^8.56.0",
     "eslint-plugin-jsdoc": "^46.9.1",
-    "express": "^4.17.1",
+    "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "glob": "^7.2.0",
     "jsdom": "^18.0.1",
@@ -91,7 +100,7 @@
     "source-map-loader": "^3.0.0",
     "source-map-support": "^0.5.20",
     "ts-loader": "^9.3.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.5",
     "utf8": "^3.0.0",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.1",

package/src/browser/AccessibilityManager.ts

@@ -58,10 +58,11 @@ export class AccessibilityManager extends Disposable {
     @IRenderService private readonly _renderService: IRenderService
   ) {
     super();
-    this._accessibilityContainer = this._coreBrowserService.mainDocument.createElement('div');
+    const doc = this._coreBrowserService.mainDocument;
+    this._accessibilityContainer = doc.createElement('div');
     this._accessibilityContainer.classList.add('xterm-accessibility');
 
-    this._rowContainer = this._coreBrowserService.mainDocument.createElement('div');
+    this._rowContainer = doc.createElement('div');
     this._rowContainer.setAttribute('role', 'list');
     this._rowContainer.classList.add('xterm-accessibility-tree');
     this._rowElements = [];
@@ -75,10 +76,9 @@ export class AccessibilityManager extends Disposable {
     this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
     this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
 
-    this._refreshRowsDimensions();
     this._accessibilityContainer.appendChild(this._rowContainer);
 
-    this._liveRegion = this._coreBrowserService.mainDocument.createElement('div');
+    this._liveRegion = doc.createElement('div');
     this._liveRegion.classList.add('live-region');
     this._liveRegion.setAttribute('aria-live', 'assertive');
     this._accessibilityContainer.appendChild(this._liveRegion);
@@ -93,12 +93,12 @@ export class AccessibilityManager extends Disposable {
       this._rowContainer.classList.add('debug');
 
       // Use a `<div class="xterm">` container so that the css will still apply.
-      this._debugRootContainer = document.createElement('div');
+      this._debugRootContainer = doc.createElement('div');
       this._debugRootContainer.classList.add('xterm');
 
-      this._debugRootContainer.appendChild(document.createTextNode('------start a11y------'));
+      this._debugRootContainer.appendChild(doc.createTextNode('------start a11y------'));
       this._debugRootContainer.appendChild(this._accessibilityContainer);
-      this._debugRootContainer.appendChild(document.createTextNode('------end a11y------'));
+      this._debugRootContainer.appendChild(doc.createTextNode('------end a11y------'));
 
       this._terminal.element.insertAdjacentElement('afterend', this._debugRootContainer);
     } else {
@@ -115,9 +115,10 @@ export class AccessibilityManager extends Disposable {
     this.register(this._terminal.onKey(e => this._handleKey(e.key)));
     this.register(this._terminal.onBlur(() => this._clearLiveRegion()));
     this.register(this._renderService.onDimensionsChange(() => this._refreshRowsDimensions()));
-    this.register(addDisposableDomListener(document, 'selectionchange', () => this._handleSelectionChange()));
+    this.register(addDisposableDomListener(doc, 'selectionchange', () => this._handleSelectionChange()));
     this.register(this._coreBrowserService.onDprChange(() => this._refreshRowsDimensions()));
 
+    this._refreshRowsDimensions();
     this._refreshRows();
     this.register(toDisposable(() => {
       if (DEBUG) {
@@ -150,7 +151,7 @@ export class AccessibilityManager extends Disposable {
       if (char === '\n') {
         this._liveRegionLineCount++;
         if (this._liveRegionLineCount === MAX_ROWS_TO_READ + 1) {
-          this._liveRegion.textContent += Strings.tooMuchOutput;
+          this._liveRegion.textContent += Strings.tooMuchOutput.get();
         }
       }
     }
@@ -192,6 +193,7 @@ export class AccessibilityManager extends Disposable {
         }
         element.setAttribute('aria-posinset', posInSet);
         element.setAttribute('aria-setsize', setSize);
+        this._alignRowWidth(element);
       }
     }
     this._announceCharacters();
@@ -270,7 +272,7 @@ export class AccessibilityManager extends Disposable {
       return;
     }
 
-    const selection = document.getSelection();
+    const selection = this._coreBrowserService.mainDocument.getSelection();
     if (!selection) {
       return;
     }
@@ -389,19 +391,45 @@ export class AccessibilityManager extends Disposable {
     this._refreshRowDimensions(element);
     return element;
   }
+
   private _refreshRowsDimensions(): void {
     if (!this._renderService.dimensions.css.cell.height) {
       return;
     }
-    this._accessibilityContainer.style.width = `${this._renderService.dimensions.css.canvas.width}px`;
+    Object.assign(this._accessibilityContainer.style, {
+      width: `${this._renderService.dimensions.css.canvas.width}px`,
+      fontSize: `${this._terminal.options.fontSize}px`
+    });
     if (this._rowElements.length !== this._terminal.rows) {
       this._handleResize(this._terminal.rows);
     }
     for (let i = 0; i < this._terminal.rows; i++) {
       this._refreshRowDimensions(this._rowElements[i]);
+      this._alignRowWidth(this._rowElements[i]);
     }
   }
+
   private _refreshRowDimensions(element: HTMLElement): void {
     element.style.height = `${this._renderService.dimensions.css.cell.height}px`;
   }
+
+  /**
+   * Scale the width of a row so that each of the character is (mostly) aligned
+   * with the actual rendering. This will allow the screen reader to draw
+   * selection outline at the correct position.
+   *
+   * On top of using the "monospace" font and correct font size, the scaling
+   * here is necessary to handle characters that are not covered by the font
+   * (e.g. CJK).
+   */
+  private _alignRowWidth(element: HTMLElement): void {
+    element.style.transform = '';
+    const width = element.getBoundingClientRect().width;
+    const lastColumn = this._rowColumns.get(element)?.slice(-1)?.[0];
+    if (!lastColumn) {
+      return;
+    }
+    const targetWidth = lastColumn * this._renderService.dimensions.css.cell.width;
+    element.style.transform = `scaleX(${targetWidth / width})`;
+  }
 }

package/src/browser/{Terminal.ts → CoreBrowserTerminal.ts}

@@ -21,12 +21,12 @@
  *   http://linux.die.net/man/7/urxvt
  */
 
+import { IDecoration, IDecorationOptions, IDisposable, ILinkProvider, IMarker } from '@xterm/xterm';
 import { copyHandler, handlePasteEvent, moveTextAreaUnderMouseCursor, paste, rightClickHandler } from 'browser/Clipboard';
 import { addDisposableDomListener } from 'browser/Lifecycle';
-import { Linkifier } from './Linkifier';
 import * as Strings from 'browser/LocalizableStrings';
 import { OscLinkProvider } from 'browser/OscLinkProvider';
-import { CharacterJoinerHandler, CustomKeyEventHandler, CustomWheelEventHandler, IBrowser, IBufferRange, ICompositionHelper, ILinkifier2, ITerminal, IViewport } from 'browser/Types';
+import { CharacterJoinerHandler, CustomKeyEventHandler, CustomWheelEventHandler, IBrowser, IBufferRange, ICompositionHelper, ILinkifier2, ITerminal } from 'browser/Types';
 import { Viewport } from 'browser/Viewport';
 import { BufferDecorationRenderer } from 'browser/decorations/BufferDecorationRenderer';
 import { OverviewRulerRenderer } from 'browser/decorations/OverviewRulerRenderer';
@@ -36,6 +36,7 @@ import { IRenderer } from 'browser/renderer/shared/Types';
 import { CharSizeService } from 'browser/services/CharSizeService';
 import { CharacterJoinerService } from 'browser/services/CharacterJoinerService';
 import { CoreBrowserService } from 'browser/services/CoreBrowserService';
+import { LinkProviderService } from 'browser/services/LinkProviderService';
 import { MouseService } from 'browser/services/MouseService';
 import { RenderService } from 'browser/services/RenderService';
 import { SelectionService } from 'browser/services/SelectionService';
@@ -43,10 +44,9 @@ import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, ILinkPr
 import { ThemeService } from 'browser/services/ThemeService';
 import { channels, color } from 'common/Color';
 import { CoreTerminal } from 'common/CoreTerminal';
-import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { MutableDisposable, toDisposable } from 'common/Lifecycle';
 import * as Browser from 'common/Platform';
-import { ColorRequestType, CoreMouseAction, CoreMouseButton, CoreMouseEventType, IColorEvent, ITerminalOptions, KeyboardResultType, ScrollSource, SpecialColorIndex } from 'common/Types';
+import { ColorRequestType, CoreMouseAction, CoreMouseButton, CoreMouseEventType, IColorEvent, ITerminalOptions, KeyboardResultType, SpecialColorIndex } from 'common/Types';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { IBuffer } from 'common/buffer/Types';
 import { C0, C1_ESCAPED } from 'common/data/EscapeSequences';
@@ -54,24 +54,24 @@ import { evaluateKeyboardEvent } from 'common/input/Keyboard';
 import { toRgbString } from 'common/input/XParseColor';
 import { DecorationService } from 'common/services/DecorationService';
 import { IDecorationService } from 'common/services/Services';
-import { IDecoration, IDecorationOptions, IDisposable, ILinkProvider, IMarker } from '@xterm/xterm';
 import { WindowsOptionsReportType } from '../common/InputHandler';
 import { AccessibilityManager } from './AccessibilityManager';
-import { LinkProviderService } from 'browser/services/LinkProviderService';
+import { Linkifier } from './Linkifier';
+import { Emitter, Event } from 'vs/base/common/event';
 
-export class Terminal extends CoreTerminal implements ITerminal {
+export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
   public textarea: HTMLTextAreaElement | undefined;
   public element: HTMLElement | undefined;
   public screenElement: HTMLElement | undefined;
 
   private _document: Document | undefined;
-  private _viewportScrollArea: HTMLElement | undefined;
   private _viewportElement: HTMLElement | undefined;
   private _helperContainer: HTMLElement | undefined;
   private _compositionView: HTMLElement | undefined;
 
   public linkifier: ILinkifier2 | undefined;
   private _overviewRulerRenderer: OverviewRulerRenderer | undefined;
+  private _viewport: Viewport | undefined;
 
   public browser: IBrowser = Browser as any;
 
@@ -118,33 +118,32 @@ export class Terminal extends CoreTerminal implements ITerminal {
    */
   private _unprocessedDeadKey: boolean = false;
 
-  public viewport: IViewport | undefined;
   private _compositionHelper: ICompositionHelper | undefined;
   private _accessibilityManager: MutableDisposable<AccessibilityManager> = this.register(new MutableDisposable());
 
-  private readonly _onCursorMove = this.register(new EventEmitter<void>());
+  private readonly _onCursorMove = this.register(new Emitter<void>());
   public readonly onCursorMove = this._onCursorMove.event;
-  private readonly _onKey = this.register(new EventEmitter<{ key: string, domEvent: KeyboardEvent }>());
+  private readonly _onKey = this.register(new Emitter<{ key: string, domEvent: KeyboardEvent }>());
   public readonly onKey = this._onKey.event;
-  private readonly _onRender = this.register(new EventEmitter<{ start: number, end: number }>());
+  private readonly _onRender = this.register(new Emitter<{ start: number, end: number }>());
   public readonly onRender = this._onRender.event;
-  private readonly _onSelectionChange = this.register(new EventEmitter<void>());
+  private readonly _onSelectionChange = this.register(new Emitter<void>());
   public readonly onSelectionChange = this._onSelectionChange.event;
-  private readonly _onTitleChange = this.register(new EventEmitter<string>());
+  private readonly _onTitleChange = this.register(new Emitter<string>());
   public readonly onTitleChange = this._onTitleChange.event;
-  private readonly _onBell = this.register(new EventEmitter<void>());
+  private readonly _onBell = this.register(new Emitter<void>());
   public readonly onBell = this._onBell.event;
 
-  private _onFocus = this.register(new EventEmitter<void>());
-  public get onFocus(): IEvent<void> { return this._onFocus.event; }
-  private _onBlur = this.register(new EventEmitter<void>());
-  public get onBlur(): IEvent<void> { return this._onBlur.event; }
-  private _onA11yCharEmitter = this.register(new EventEmitter<string>());
-  public get onA11yChar(): IEvent<string> { return this._onA11yCharEmitter.event; }
-  private _onA11yTabEmitter = this.register(new EventEmitter<number>());
-  public get onA11yTab(): IEvent<number> { return this._onA11yTabEmitter.event; }
-  private _onWillOpen = this.register(new EventEmitter<HTMLElement>());
-  public get onWillOpen(): IEvent<HTMLElement> { return this._onWillOpen.event; }
+  private _onFocus = this.register(new Emitter<void>());
+  public get onFocus(): Event<void> { return this._onFocus.event; }
+  private _onBlur = this.register(new Emitter<void>());
+  public get onBlur(): Event<void> { return this._onBlur.event; }
+  private _onA11yCharEmitter = this.register(new Emitter<string>());
+  public get onA11yChar(): Event<string> { return this._onA11yCharEmitter.event; }
+  private _onA11yTabEmitter = this.register(new Emitter<number>());
+  public get onA11yTab(): Event<number> { return this._onA11yTabEmitter.event; }
+  private _onWillOpen = this.register(new Emitter<HTMLElement>());
+  public get onWillOpen(): Event<HTMLElement> { return this._onWillOpen.event; }
 
   constructor(
     options: Partial<ITerminalOptions> = {}
@@ -161,15 +160,15 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     // Setup InputHandler listeners
     this.register(this._inputHandler.onRequestBell(() => this._onBell.fire()));
-    this.register(this._inputHandler.onRequestRefreshRows((start, end) => this.refresh(start, end)));
+    this.register(this._inputHandler.onRequestRefreshRows((e) => this.refresh(e?.start ?? 0, e?.end ?? (this.rows - 1))));
     this.register(this._inputHandler.onRequestSendFocus(() => this._reportFocus()));
     this.register(this._inputHandler.onRequestReset(() => this.reset()));
     this.register(this._inputHandler.onRequestWindowsOptionsReport(type => this._reportWindowsOptions(type)));
     this.register(this._inputHandler.onColor((event) => this._handleColorEvent(event)));
-    this.register(forwardEvent(this._inputHandler.onCursorMove, this._onCursorMove));
-    this.register(forwardEvent(this._inputHandler.onTitleChange, this._onTitleChange));
-    this.register(forwardEvent(this._inputHandler.onA11yChar, this._onA11yCharEmitter));
-    this.register(forwardEvent(this._inputHandler.onA11yTab, this._onA11yTabEmitter));
+    this.register(Event.forward(this._inputHandler.onCursorMove, this._onCursorMove));
+    this.register(Event.forward(this._inputHandler.onTitleChange, this._onTitleChange));
+    this.register(Event.forward(this._inputHandler.onA11yChar, this._onA11yCharEmitter));
+    this.register(Event.forward(this._inputHandler.onA11yTab, this._onA11yTabEmitter));
 
     // Setup listeners
     this.register(this._bufferService.onResize(e => this._afterResize(e.cols, e.rows)));
@@ -427,10 +426,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._viewportElement.classList.add('xterm-viewport');
     fragment.appendChild(this._viewportElement);
 
-    this._viewportScrollArea = this._document.createElement('div');
-    this._viewportScrollArea.classList.add('xterm-scroll-area');
-    this._viewportElement.appendChild(this._viewportScrollArea);
-
     this.screenElement = this._document.createElement('div');
     this.screenElement.classList.add('xterm-screen');
     this.register(addDisposableDomListener(this.screenElement, 'mousemove', (ev: MouseEvent) => this.updateCursorStyle(ev)));
@@ -443,7 +438,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this.textarea = this._document.createElement('textarea');
     this.textarea.classList.add('xterm-helper-textarea');
-    this.textarea.setAttribute('aria-label', Strings.promptLabel);
+    this.textarea.setAttribute('aria-label', Strings.promptLabel.get());
     if (!Browser.isChromeOS) {
       // ChromeVox on ChromeOS does not like this. See
       // https://issuetracker.google.com/issues/260170397
@@ -503,11 +498,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this._renderService.setRenderer(this._createRenderer());
     }
 
-    this.viewport = this._instantiationService.createInstance(Viewport, this._viewportElement, this._viewportScrollArea);
-    this.viewport.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent, ScrollSource.VIEWPORT)),
-    this.register(this._inputHandler.onRequestSyncScrollBar(() => this.viewport!.syncScrollArea()));
-    this.register(this.viewport);
-
     this.register(this.onCursorMove(() => {
       this._renderService!.handleCursorMove();
       this._syncTextArea();
@@ -515,7 +505,12 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(this.onResize(() => this._renderService!.handleResize(this.cols, this.rows)));
     this.register(this.onBlur(() => this._renderService!.handleBlur()));
     this.register(this.onFocus(() => this._renderService!.handleFocus()));
-    this.register(this._renderService.onDimensionsChange(() => this.viewport!.syncScrollArea()));
+
+    this._viewport = this.register(this._instantiationService.createInstance(Viewport, this.element, this.screenElement));
+    this.register(this._viewport.onRequestScrollLines(e => {
+      super.scrollLines(e, false);
+      this.refresh(0, this.rows - 1);
+    }));
 
     this._selectionService = this.register(this._instantiationService.createInstance(SelectionService,
       this.element,
@@ -534,11 +529,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this.textarea!.focus();
       this.textarea!.select();
     }));
-    this.register(this._onScroll.event(ev => {
-      this.viewport!.syncScrollArea();
-      this._selectionService!.refresh();
-    }));
-    this.register(addDisposableDomListener(this._viewportElement, 'scroll', () => this._selectionService!.refresh()));
+    this.register(this._onScroll.event(() => this._selectionService!.refresh()));
 
     this.register(this._instantiationService.createInstance(BufferDecorationRenderer, this.screenElement));
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.handleMouseDown(e)));
@@ -558,11 +549,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
     this.register(this.optionsService.onSpecificOptionChange('screenReaderMode', e => this._handleScreenReaderModeOptionChange(e)));
 
-    if (this.options.overviewRulerWidth) {
+    if (this.options.overviewRuler.width) {
       this._overviewRulerRenderer = this.register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
     }
-    this.optionsService.onSpecificOptionChange('overviewRulerWidth', value => {
-      if (!this._overviewRulerRenderer && value && this._viewportElement && this.screenElement) {
+    this.optionsService.onSpecificOptionChange('overviewRuler', value => {
+      if (!this._overviewRulerRenderer && value.width && this._viewportElement && this.screenElement) {
         this._overviewRulerRenderer = this.register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
       }
     });
@@ -642,13 +633,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
           if (self._customWheelEventHandler && self._customWheelEventHandler(ev as WheelEvent) === false) {
             return false;
           }
-          const amount = self.viewport!.getLinesScrolled(ev as WheelEvent);
-
-          if (amount === 0) {
+          const deltaY = (ev as WheelEvent).deltaY;
+          if (deltaY === 0) {
             return false;
           }
-
-          action = (ev as WheelEvent).deltaY < 0 ? CoreMouseAction.UP : CoreMouseAction.DOWN;
+          action = deltaY < 0 ? CoreMouseAction.UP : CoreMouseAction.DOWN;
           but = CoreMouseButton.WHEEL;
           break;
         default:
@@ -683,7 +672,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
      * Note: 'mousedown' currently is "always on" and not managed
      * by onProtocolChange.
      */
-    const requestedEvents: { [key: string]: ((ev: Event) => void) | null } = {
+    const requestedEvents: { [key: string]: ((ev: MouseEvent | WheelEvent) => void) | null } = {
       mouseup: null,
       wheel: null,
       mousedrag: null,
@@ -807,42 +796,23 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
       if (!this.buffer.hasScrollback) {
         // Convert wheel events into up/down events when the buffer does not have scrollback, this
-        // enables scrolling in apps hosted in the alt buffer such as vim or tmux.
-        const amount = this.viewport!.getLinesScrolled(ev);
+        // enables scrolling in apps hosted in the alt buffer such as vim or tmux even when mouse
+        // events are not enabled.
+        // This used implementation used get the actual lines/partial lines scrolled from the
+        // viewport but since moving to the new viewport implementation has been simplified to
+        // simply send a single up or down sequence.
 
         // Do nothing if there's no vertical scroll
-        if (amount === 0) {
-          return;
+        const deltaY = (ev as WheelEvent).deltaY;
+        if (deltaY === 0) {
+          return false;
         }
 
         // Construct and send sequences
         const sequence = C0.ESC + (this.coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B');
-        let data = '';
-        for (let i = 0; i < Math.abs(amount); i++) {
-          data += sequence;
-        }
-        this.coreService.triggerDataEvent(data, true);
+        this.coreService.triggerDataEvent(sequence, true);
         return this.cancel(ev, true);
       }
-
-      // normal viewport scrolling
-      // conditionally stop event, if the viewport still had rows to scroll within
-      if (this.viewport!.handleWheel(ev)) {
-        return this.cancel(ev);
-      }
-    }, { passive: false }));
-
-    this.register(addDisposableDomListener(el, 'touchstart', (ev: TouchEvent) => {
-      if (this.coreMouseService.areMouseEventsActive) return;
-      this.viewport!.handleTouchStart(ev);
-      return this.cancel(ev);
-    }, { passive: true }));
-
-    this.register(addDisposableDomListener(el, 'touchmove', (ev: TouchEvent) => {
-      if (this.coreMouseService.areMouseEventsActive) return;
-      if (!this.viewport!.handleTouchMove(ev)) {
-        return this.cancel(ev);
-      }
     }, { passive: false }));
   }
 
@@ -878,12 +848,36 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
   }
 
-  public scrollLines(disp: number, suppressScrollEvent?: boolean, source = ScrollSource.TERMINAL): void {
-    if (source === ScrollSource.VIEWPORT) {
-      super.scrollLines(disp, suppressScrollEvent, source);
-      this.refresh(0, this.rows - 1);
+  public scrollLines(disp: number, suppressScrollEvent?: boolean): void {
+    // All scrollLines methods need to go via the viewport in order to support smooth scroll
+    if (this._viewport) {
+      this._viewport.scrollLines(disp);
     } else {
-      this.viewport?.scrollLines(disp);
+      super.scrollLines(disp, suppressScrollEvent);
+    }
+    this.refresh(0, this.rows - 1);
+  }
+
+  public scrollPages(pageCount: number): void {
+    this.scrollLines(pageCount * (this.rows - 1));
+  }
+
+  public scrollToTop(): void {
+    this.scrollLines(-this._bufferService.buffer.ydisp);
+  }
+
+  public scrollToBottom(disableSmoothScroll?: boolean): void {
+    if (disableSmoothScroll && this._viewport) {
+      this._viewport.scrollToLine(this.buffer.ybase, true);
+    } else {
+      this.scrollLines(this._bufferService.buffer.ybase - this._bufferService.buffer.ydisp);
+    }
+  }
+
+  public scrollToLine(line: number): void {
+    const scrollAmount = line - this._bufferService.buffer.ydisp;
+    if (scrollAmount !== 0) {
+      this.scrollLines(scrollAmount);
     }
   }
 
@@ -1011,7 +1005,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     if (!shouldIgnoreComposition && !this._compositionHelper!.keydown(event)) {
       if (this.options.scrollOnUserInput && this.buffer.ybase !== this.buffer.ydisp) {
-        this.scrollToBottom();
+        this.scrollToBottom(true);
       }
       return false;
     }
@@ -1212,10 +1206,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
   private _afterResize(x: number, y: number): void {
     this._charSizeService?.measure();
-
-    // Sync the scroll area to make sure scroll events don't fire and scroll the viewport to an
-    // invalid location
-    this.viewport?.syncScrollArea(true);
   }
 
   /**
@@ -1237,8 +1227,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
     // IMPORTANT: Fire scroll event before viewport is reset. This ensures embedders get the clear
     // scroll event and that the viewport's state will be valid for immediate writes.
-    this._onScroll.fire({ position: this.buffer.ydisp, source: ScrollSource.TERMINAL });
-    this.viewport?.reset();
+    this._onScroll.fire({ position: this.buffer.ydisp });
     this.refresh(0, this.rows - 1);
   }
 
@@ -1263,7 +1252,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     super.reset();
     this._selectionService?.reset();
     this._decorationService.reset();
-    this.viewport?.reset();
 
     // reattach
     this._customKeyEventHandler = customKeyEventHandler;
@@ -1304,7 +1292,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   // TODO: Remove cancel function and cancelEvents option
-  public cancel(ev: Event, force?: boolean): boolean | undefined {
+  public cancel(ev: MouseEvent | WheelEvent | KeyboardEvent | InputEvent, force?: boolean): boolean | undefined {
     if (!this.options.cancelEvents && !force) {
       return;
     }

package/src/browser/Linkifier.ts

@@ -5,11 +5,11 @@
 
 import { addDisposableDomListener } from 'browser/Lifecycle';
 import { IBufferCellPosition, ILink, ILinkDecorations, ILinkWithState, ILinkifier2, ILinkifierEvent } from 'browser/Types';
-import { EventEmitter } from 'common/EventEmitter';
 import { Disposable, disposeArray, getDisposeArrayDisposable, toDisposable } from 'common/Lifecycle';
 import { IDisposable } from 'common/Types';
 import { IBufferService } from 'common/services/Services';
 import { ILinkProviderService, IMouseService, IRenderService } from './services/Services';
+import { Emitter } from 'vs/base/common/event';
 
 export class Linkifier extends Disposable implements ILinkifier2 {
   public get currentLink(): ILinkWithState | undefined { return this._currentLink; }
@@ -23,9 +23,9 @@ export class Linkifier extends Disposable implements ILinkifier2 {
   private _activeProviderReplies: Map<Number, ILinkWithState[] | undefined> | undefined;
   private _activeLine: number = -1;
 
-  private readonly _onShowLinkUnderline = this.register(new EventEmitter<ILinkifierEvent>());
+  private readonly _onShowLinkUnderline = this.register(new Emitter<ILinkifierEvent>());
   public readonly onShowLinkUnderline = this._onShowLinkUnderline.event;
-  private readonly _onHideLinkUnderline = this.register(new EventEmitter<ILinkifierEvent>());
+  private readonly _onHideLinkUnderline = this.register(new Emitter<ILinkifierEvent>());
   public readonly onHideLinkUnderline = this._onHideLinkUnderline.event;
 
   constructor(