@xterm/xterm 5.6.0-beta.14 → 5.6.0-beta.141

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

@@ -21,12 +21,11 @@
  *   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 +35,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 +43,8 @@ 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 +52,27 @@ 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';
+import { addDisposableListener } from 'vs/base/browser/dom';
+import { MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
 
-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 readonly _linkifier: MutableDisposable<ILinkifier2> = this._register(new MutableDisposable());
+  public get linkifier(): ILinkifier2 | undefined { return this._linkifier.value; }
   private _overviewRulerRenderer: OverviewRulerRenderer | undefined;
+  private _viewport: Viewport | undefined;
 
   public browser: IBrowser = Browser as any;
 
@@ -118,33 +119,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 _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> = {}
@@ -160,21 +160,21 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._linkProviderService.registerLinkProvider(this._instantiationService.createInstance(OscLinkProvider));
 
     // 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.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(this._inputHandler.onRequestBell(() => this._onBell.fire()));
+    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(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)));
+    this._register(this._bufferService.onResize(e => this._afterResize(e.cols, e.rows)));
 
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
       this._customKeyEventHandler = undefined;
       this.element?.parentNode?.removeChild(this.element);
     }));
@@ -331,7 +331,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._bindKeys();
 
     // Bind clipboard functionality
-    this.register(addDisposableDomListener(this.element!, 'copy', (event: ClipboardEvent) => {
+    this._register(addDisposableListener(this.element!, 'copy', (event: ClipboardEvent) => {
       // If mouse events are active it means the selection manager is disabled and
       // copy should be handled by the host program.
       if (!this.hasSelection()) {
@@ -340,19 +340,19 @@ export class Terminal extends CoreTerminal implements ITerminal {
       copyHandler(event, this._selectionService!);
     }));
     const pasteHandlerWrapper = (event: ClipboardEvent): void => handlePasteEvent(event, this.textarea!, this.coreService, this.optionsService);
-    this.register(addDisposableDomListener(this.textarea!, 'paste', pasteHandlerWrapper));
-    this.register(addDisposableDomListener(this.element!, 'paste', pasteHandlerWrapper));
+    this._register(addDisposableListener(this.textarea!, 'paste', pasteHandlerWrapper));
+    this._register(addDisposableListener(this.element!, 'paste', pasteHandlerWrapper));
 
     // Handle right click context menus
     if (Browser.isFirefox) {
       // Firefox doesn't appear to fire the contextmenu event on right click
-      this.register(addDisposableDomListener(this.element!, 'mousedown', (event: MouseEvent) => {
+      this._register(addDisposableListener(this.element!, 'mousedown', (event: MouseEvent) => {
         if (event.button === 2) {
           rightClickHandler(event, this.textarea!, this.screenElement!, this._selectionService!, this.options.rightClickSelectsWord);
         }
       }));
     } else {
-      this.register(addDisposableDomListener(this.element!, 'contextmenu', (event: MouseEvent) => {
+      this._register(addDisposableListener(this.element!, 'contextmenu', (event: MouseEvent) => {
         rightClickHandler(event, this.textarea!, this.screenElement!, this._selectionService!, this.options.rightClickSelectsWord);
       }));
     }
@@ -363,7 +363,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     if (Browser.isLinux) {
       // Use auxclick event over mousedown the latter doesn't seem to work. Note
       // that the regular click event doesn't fire for the middle mouse button.
-      this.register(addDisposableDomListener(this.element!, 'auxclick', (event: MouseEvent) => {
+      this._register(addDisposableListener(this.element!, 'auxclick', (event: MouseEvent) => {
         if (event.button === 1) {
           moveTextAreaUnderMouseCursor(event, this.textarea!, this.screenElement!);
         }
@@ -375,14 +375,14 @@ export class Terminal extends CoreTerminal implements ITerminal {
    * Apply key handling to the terminal
    */
   private _bindKeys(): void {
-    this.register(addDisposableDomListener(this.textarea!, 'keyup', (ev: KeyboardEvent) => this._keyUp(ev), true));
-    this.register(addDisposableDomListener(this.textarea!, 'keydown', (ev: KeyboardEvent) => this._keyDown(ev), true));
-    this.register(addDisposableDomListener(this.textarea!, 'keypress', (ev: KeyboardEvent) => this._keyPress(ev), true));
-    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(addDisposableListener(this.textarea!, 'keyup', (ev: KeyboardEvent) => this._keyUp(ev), true));
+    this._register(addDisposableListener(this.textarea!, 'keydown', (ev: KeyboardEvent) => this._keyDown(ev), true));
+    this._register(addDisposableListener(this.textarea!, 'keypress', (ev: KeyboardEvent) => this._keyPress(ev), true));
+    this._register(addDisposableListener(this.textarea!, 'compositionstart', () => this._compositionHelper!.compositionstart()));
+    this._register(addDisposableListener(this.textarea!, 'compositionupdate', (e: CompositionEvent) => this._compositionHelper!.compositionupdate(e)));
+    this._register(addDisposableListener(this.textarea!, 'compositionend', () => this._compositionHelper!.compositionend()));
+    this._register(addDisposableListener(this.textarea!, 'input', (ev: InputEvent) => this._inputEvent(ev), true));
+    this._register(this.onRender(() => this._compositionHelper!.updateCompositionElements()));
   }
 
   /**
@@ -427,13 +427,9 @@ 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)));
+    this._register(addDisposableListener(this.screenElement, 'mousemove', (ev: MouseEvent) => this.updateCursorStyle(ev)));
     // Create the container that will hold helpers like the textarea for
     // capturing DOM Events. Then produce the helpers.
     this._helperContainer = this._document.createElement('div');
@@ -441,9 +437,9 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.screenElement.appendChild(this._helperContainer);
     fragment.appendChild(this.screenElement);
 
-    this.textarea = this._document.createElement('textarea');
+    const textarea = 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
@@ -453,10 +449,12 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.textarea.setAttribute('autocapitalize', 'off');
     this.textarea.setAttribute('spellcheck', 'false');
     this.textarea.tabIndex = 0;
+    this._register(this.optionsService.onSpecificOptionChange('disableStdin', () => textarea.readOnly = this.optionsService.rawOptions.disableStdin));
+    this.textarea.readOnly = this.optionsService.rawOptions.disableStdin;
 
     // Register the core browser service before the generic textarea handlers are registered so it
     // handles them first. Otherwise the renderers may use the wrong focus state.
-    this._coreBrowserService = this.register(this._instantiationService.createInstance(CoreBrowserService,
+    this._coreBrowserService = this._register(this._instantiationService.createInstance(CoreBrowserService,
       this.textarea,
       parent.ownerDocument.defaultView ?? window,
       // Force unsafe null in node.js environment for tests
@@ -464,8 +462,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
     ));
     this._instantiationService.setService(ICoreBrowserService, this._coreBrowserService);
 
-    this.register(addDisposableDomListener(this.textarea, 'focus', (ev: FocusEvent) => this._handleTextAreaFocus(ev)));
-    this.register(addDisposableDomListener(this.textarea, 'blur', () => this._handleTextAreaBlur()));
+    this._register(addDisposableListener(this.textarea, 'focus', (ev: FocusEvent) => this._handleTextAreaFocus(ev)));
+    this._register(addDisposableListener(this.textarea, 'blur', () => this._handleTextAreaBlur()));
     this._helperContainer.appendChild(this.textarea);
 
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
@@ -477,9 +475,9 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._characterJoinerService = this._instantiationService.createInstance(CharacterJoinerService);
     this._instantiationService.setService(ICharacterJoinerService, this._characterJoinerService);
 
-    this._renderService = this.register(this._instantiationService.createInstance(RenderService, this.rows, this.screenElement));
+    this._renderService = this._register(this._instantiationService.createInstance(RenderService, this.rows, this.screenElement));
     this._instantiationService.setService(IRenderService, this._renderService);
-    this.register(this._renderService.onRenderedViewportChange(e => this._onRender.fire(e)));
+    this._register(this._renderService.onRenderedViewportChange(e => this._onRender.fire(e)));
     this.onResize(e => this._renderService!.resize(e.cols, e.rows));
 
     this._compositionView = this._document.createElement('div');
@@ -490,7 +488,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._mouseService = this._instantiationService.createInstance(MouseService);
     this._instantiationService.setService(IMouseService, this._mouseService);
 
-    this.linkifier = this.register(this._instantiationService.createInstance(Linkifier, this.screenElement));
+    const linkifier = this._linkifier.value = this._register(this._instantiationService.createInstance(Linkifier, this.screenElement));
 
     // Performance: Add viewport and helper elements from the fragment
     this.element.appendChild(fragment);
@@ -503,30 +501,30 @@ 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._register(this.onCursorMove(() => {
       this._renderService!.handleCursorMove();
       this._syncTextArea();
     }));
-    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._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._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._selectionService = this._register(this._instantiationService.createInstance(SelectionService,
       this.element,
       this.screenElement,
-      this.linkifier
+      linkifier
     ));
     this._instantiationService.setService(ISelectionService, this._selectionService);
-    this.register(this._selectionService.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent)));
-    this.register(this._selectionService.onSelectionChange(() => this._onSelectionChange.fire()));
-    this.register(this._selectionService.onRequestRedraw(e => this._renderService!.handleSelectionChanged(e.start, e.end, e.columnSelectMode)));
-    this.register(this._selectionService.onLinuxMouseSelection(text => {
+    this._register(this._selectionService.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent)));
+    this._register(this._selectionService.onSelectionChange(() => this._onSelectionChange.fire()));
+    this._register(this._selectionService.onRequestRedraw(e => this._renderService!.handleSelectionChanged(e.start, e.end, e.columnSelectMode)));
+    this._register(this._selectionService.onLinuxMouseSelection(text => {
       // If there's a new selection, put it into the textarea, focus and select it
       // in order to register it as a selection on the OS. This event is fired
       // only on Linux to enable middle click to paste selection.
@@ -534,14 +532,16 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this.textarea!.focus();
       this.textarea!.select();
     }));
-    this.register(this._onScroll.event(ev => {
-      this.viewport!.syncScrollArea();
+    this._register(Event.any(
+      this._onScroll.event,
+      this._inputHandler.onScroll
+    )(() => {
       this._selectionService!.refresh();
+      this._viewport?.queueSync();
     }));
-    this.register(addDisposableDomListener(this._viewportElement, 'scroll', () => this._selectionService!.refresh()));
 
-    this.register(this._instantiationService.createInstance(BufferDecorationRenderer, this.screenElement));
-    this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.handleMouseDown(e)));
+    this._register(this._instantiationService.createInstance(BufferDecorationRenderer, this.screenElement));
+    this._register(addDisposableListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.handleMouseDown(e)));
 
     // apply mouse event classes set by escape codes before terminal was attached
     if (this.coreMouseService.areMouseEventsActive) {
@@ -556,14 +556,14 @@ export class Terminal extends CoreTerminal implements ITerminal {
       // ensure the correct order of the dprchange event
       this._accessibilityManager.value = this._instantiationService.createInstance(AccessibilityManager, this);
     }
-    this.register(this.optionsService.onSpecificOptionChange('screenReaderMode', e => this._handleScreenReaderModeOptionChange(e)));
+    this._register(this.optionsService.onSpecificOptionChange('screenReaderMode', e => this._handleScreenReaderModeOptionChange(e)));
 
-    if (this.options.overviewRulerWidth) {
-      this._overviewRulerRenderer = this.register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
+    if (this.options.overviewRuler.width) {
+      this._overviewRulerRenderer = this._register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
     }
-    this.optionsService.onSpecificOptionChange('overviewRulerWidth', value => {
+    this.optionsService.onSpecificOptionChange('overviewRuler', value => {
       if (!this._overviewRulerRenderer && value && this._viewportElement && this.screenElement) {
-        this._overviewRulerRenderer = this.register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
+        this._overviewRulerRenderer = this._register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
       }
     });
     // Measure the character size
@@ -642,13 +642,19 @@ 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;
+          const lines = self.coreMouseService.consumeWheelEvent(
+            ev as WheelEvent,
+            self._renderService?.dimensions?.device?.cell?.height,
+            self._coreBrowserService?.dpr
+          );
+          if (lines === 0) {
+            return false;
+          }
+          action = deltaY < 0 ? CoreMouseAction.UP : CoreMouseAction.DOWN;
           but = CoreMouseButton.WHEEL;
           break;
         default:
@@ -683,7 +689,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,
@@ -718,7 +724,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
         }
       }
     };
-    this.register(this.coreMouseService.onProtocolChange(events => {
+    this._register(this.coreMouseService.onProtocolChange(events => {
       // apply global changes on events
       if (events) {
         if (this.optionsService.rawOptions.logLevel === 'debug') {
@@ -770,7 +776,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     /**
      * "Always on" event listeners.
      */
-    this.register(addDisposableDomListener(el, 'mousedown', (ev: MouseEvent) => {
+    this._register(addDisposableListener(el, 'mousedown', (ev: MouseEvent) => {
       ev.preventDefault();
       this.focus();
 
@@ -797,7 +803,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       return this.cancel(ev);
     }));
 
-    this.register(addDisposableDomListener(el, 'wheel', (ev: WheelEvent) => {
+    this._register(addDisposableListener(el, 'wheel', (ev: WheelEvent) => {
       // do nothing, if app side handles wheel itself
       if (requestedEvents.wheel) return;
 
@@ -807,42 +813,32 @@ 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;
+        }
+
+        const lines = self.coreMouseService.consumeWheelEvent(
+          ev as WheelEvent,
+          self._renderService?.dimensions?.device?.cell?.height,
+          self._coreBrowserService?.dpr
+        );
+        if (lines === 0) {
+          return this.cancel(ev, true);
         }
 
         // 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 +874,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 +1031,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 +1232,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 +1253,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 +1278,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 +1318,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;
     }