@xterm/xterm 6.1.0-beta.21 → 6.1.0-beta.210

package/src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -24,6 +24,7 @@ export const enum RowCss {
   UNDERLINE_CLASS = 'xterm-underline',
   OVERLINE_CLASS = 'xterm-overline',
   STRIKETHROUGH_CLASS = 'xterm-strikethrough',
+  BLINK_HIDDEN_CLASS = 'xterm-blink-hidden',
   CURSOR_CLASS = 'xterm-cursor',
   CURSOR_BLINK_CLASS = 'xterm-cursor-blink',
   CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block',
@@ -66,13 +67,18 @@ export class DomRendererRowFactory {
     cursorInactiveStyle: string | undefined,
     cursorX: number,
     cursorBlink: boolean,
+    blinkOn: boolean,
     cellWidth: number,
     widthCache: WidthCache,
     linkStart: number,
-    linkEnd: number
+    linkEnd: number,
+    rowInfo?: { hasBlinkingCells: boolean }
   ): HTMLSpanElement[] {
 
     const elements: HTMLSpanElement[] = [];
+    if (rowInfo) {
+      rowInfo.hasBlinkingCells = false;
+    }
     const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
     const colors = this._themeService.colors;
 
@@ -118,7 +124,7 @@ export class DomRendererRowFactory {
       // Process any joined character ranges as needed. Because of how the
       // ranges are produced, we know that they are valid for the characters
       // and attributes of our input.
-      let cell = this._workCell;
+      let cell: ICellData = this._workCell;
       if (joinedRanges.length > 0 && x === joinedRanges[0][0] && isValidJoinRange) {
         const range = joinedRanges.shift()!;
         // If the ligature's selection state is not consistent, don't join it. This helps the
@@ -153,6 +159,13 @@ export class DomRendererRowFactory {
       const isInSelection = this._isCellInSelection(x, row);
       const isCursorCell = isCursorRow && x === cursorX;
       const isLinkHover = hasHover && x >= linkStart && x <= linkEnd;
+      if (rowInfo && cell.isBlink()) {
+        rowInfo.hasBlinkingCells = true;
+      }
+      const isBlinkHidden = !blinkOn && cell.isBlink();
+      if (isBlinkHidden) {
+        classes.push(RowCss.BLINK_HIDDEN_CLASS);
+      }
 
       let isDecorated = false;
       this._decorationService.forEachDecorationAtCell(x, row, undefined, d => {
@@ -397,7 +410,7 @@ export class DomRendererRowFactory {
           break;
         case Attributes.CM_RGB:
           resolvedBg = channels.toColor(bg >> 16, bg >> 8 & 0xFF, bg & 0xFF);
-          this._addStyle(charElement, `background-color:#${padStart((bg >>> 0).toString(16), '0', 6)}`);
+          this._addStyle(charElement, `background-color:#${(bg >>> 0).toString(16).padStart(6, '0')}`);
           break;
         case Attributes.CM_DEFAULT:
         default:
@@ -434,7 +447,7 @@ export class DomRendererRowFactory {
             (fg      ) & 0xFF
           );
           if (!this._applyMinimumContrast(charElement, resolvedBg, color, cell, bgOverride, fgOverride)) {
-            this._addStyle(charElement, `color:#${padStart(fg.toString(16), '0', 6)}`);
+            this._addStyle(charElement, `color:#${fg.toString(16).padStart(6, '0')}`);
           }
           break;
         case Attributes.CM_DEFAULT:
@@ -494,8 +507,8 @@ export class DomRendererRowFactory {
       // Dim cells only require half the contrast, otherwise they wouldn't be distinguishable from
       // non-dim cells
       const ratio = this._optionsService.rawOptions.minimumContrastRatio / (cell.isDim() ? 2 : 1);
-      adjustedColor = color.ensureContrastRatio(bgOverride || bg, fgOverride || fg, ratio);
-      cache.setColor((bgOverride || bg).rgba, (fgOverride || fg).rgba, adjustedColor ?? null);
+      adjustedColor = color.ensureContrastRatio(bgOverride ?? bg, fgOverride ?? fg, ratio);
+      cache.setColor((bgOverride ?? bg).rgba, (fgOverride ?? fg).rgba, adjustedColor ?? null);
     }
 
     if (adjustedColor) {
@@ -537,10 +550,3 @@ export class DomRendererRowFactory {
         (start[1] < end[1] && y === start[1] && x >= start[0]);
   }
 }
-
-function padStart(text: string, padChar: string, length: number): string {
-  while (text.length < length) {
-    text = padChar + text;
-  }
-  return text;
-}

package/src/browser/renderer/dom/WidthCache.ts

@@ -3,6 +3,7 @@
  * @license MIT
  */
 
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { IDisposable } from 'common/Types';
 import { FontWeight } from 'common/services/Services';
 
@@ -24,6 +25,10 @@ const enum FontVariant {
   BOLD_ITALIC = 3
 }
 
+export interface IWidthCacheFontVariantCanvas {
+  setFont(fontFamily: string, fontSize: number, fontWeight: FontWeight, italic: boolean): void;
+  measure(c: string): number;
+}
 
 export class WidthCache implements IDisposable {
   // flat cache for regular variant up to CacheSettings.FLAT_SIZE
@@ -42,50 +47,24 @@ export class WidthCache implements IDisposable {
   private _fontSize = 0;
   private _weight: FontWeight = 'normal';
   private _weightBold: FontWeight = 'bold';
-  private _container: HTMLDivElement;
-  private _measureElements: HTMLSpanElement[] = [];
-
-  constructor(_document: Document, _helperContainer: HTMLElement) {
-    this._container = _document.createElement('div');
-    this._container.classList.add('xterm-width-cache-measure-container');
-    this._container.setAttribute('aria-hidden', 'true');
-    // SP should stack in spans
-    this._container.style.whiteSpace = 'pre';
-    // avoid undercuts in non-monospace fonts from kerning
-    this._container.style.fontKerning = 'none';
-
-    const regular = _document.createElement('span');
-    regular.classList.add('xterm-char-measure-element');
-
-    const bold = _document.createElement('span');
-    bold.classList.add('xterm-char-measure-element');
-    bold.style.fontWeight = 'bold';
-
-    const italic = _document.createElement('span');
-    italic.classList.add('xterm-char-measure-element');
-    italic.style.fontStyle = 'italic';
-
-    const boldItalic = _document.createElement('span');
-    boldItalic.classList.add('xterm-char-measure-element');
-    boldItalic.style.fontWeight = 'bold';
-    boldItalic.style.fontStyle = 'italic';
-
-    // NOTE: must be in order of FontVariant
-    this._measureElements = [regular, bold, italic, boldItalic];
-    this._container.appendChild(regular);
-    this._container.appendChild(bold);
-    this._container.appendChild(italic);
-    this._container.appendChild(boldItalic);
-
-    _helperContainer.appendChild(this._container);
+  private _canvasElements: IWidthCacheFontVariantCanvas[] = [];
+
+  constructor(
+    canvasFactory: () => IWidthCacheFontVariantCanvas = () => new WidthCacheFontVariantCanvas()
+  ) {
+    this._canvasElements = [
+      canvasFactory(),
+      canvasFactory(),
+      canvasFactory(),
+      canvasFactory()
+    ];
 
     this.clear();
   }
 
   public dispose(): void {
-    this._container.remove();           // remove elements from DOM
-    this._measureElements.length = 0;   // release element refs
-    this._holey = undefined;            // free cache memory via GC
+    this._canvasElements.length = 0;
+    this._holey = undefined; // free cache memory via GC
   }
 
   /**
@@ -104,10 +83,11 @@ export class WidthCache implements IDisposable {
    */
   public setFont(font: string, fontSize: number, weight: FontWeight, weightBold: FontWeight): void {
     // skip if nothing changed
-    if (font === this._font
-      && fontSize === this._fontSize
-      && weight === this._weight
-      && weightBold === this._weightBold
+    if (
+      font === this._font &&
+      fontSize === this._fontSize &&
+      weight === this._weight &&
+      weightBold === this._weightBold
     ) {
       return;
     }
@@ -117,12 +97,10 @@ export class WidthCache implements IDisposable {
     this._weight = weight;
     this._weightBold = weightBold;
 
-    this._container.style.fontFamily = this._font;
-    this._container.style.fontSize = `${this._fontSize}px`;
-    this._measureElements[FontVariant.REGULAR].style.fontWeight = `${weight}`;
-    this._measureElements[FontVariant.BOLD].style.fontWeight = `${weightBold}`;
-    this._measureElements[FontVariant.ITALIC].style.fontWeight = `${weight}`;
-    this._measureElements[FontVariant.BOLD_ITALIC].style.fontWeight = `${weightBold}`;
+    this._canvasElements[FontVariant.REGULAR].setFont(font, fontSize, weight, false);
+    this._canvasElements[FontVariant.BOLD].setFont(font, fontSize, weightBold, false);
+    this._canvasElements[FontVariant.ITALIC].setFont(font, fontSize, weight, true);
+    this._canvasElements[FontVariant.BOLD_ITALIC].setFont(font, fontSize, weightBold, true);
 
     this.clear();
   }
@@ -160,8 +138,32 @@ export class WidthCache implements IDisposable {
   }
 
   protected _measure(c: string, variant: FontVariant): number {
-    const el = this._measureElements[variant];
-    el.textContent = c.repeat(WidthCacheSettings.REPEAT);
-    return el.offsetWidth / WidthCacheSettings.REPEAT;
+    return this._canvasElements[variant].measure(c);
+  }
+}
+
+class WidthCacheFontVariantCanvas implements IWidthCacheFontVariantCanvas {
+  private _canvas: OffscreenCanvas | HTMLCanvasElement;
+  private _ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
+
+  constructor() {
+    if (typeof OffscreenCanvas !== 'undefined') {
+      this._canvas = new OffscreenCanvas(1, 1);
+      this._ctx = throwIfFalsy(this._canvas.getContext('2d'));
+    } else {
+      this._canvas = document.createElement('canvas');
+      this._canvas.width = 1;
+      this._canvas.height = 1;
+      this._ctx = throwIfFalsy(this._canvas.getContext('2d'));
+    }
+  }
+
+  public setFont(fontFamily: string, fontSize: number, fontWeight: FontWeight, italic: boolean): void {
+    const fontStyle = italic ? 'italic' : '';
+    this._ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`.trim();
+  }
+
+  public measure(c: string): number {
+    return this._ctx.measureText(c).width;
   }
 }

package/src/browser/renderer/shared/Constants.ts

@@ -4,3 +4,10 @@
  */
 
 export const INVERTED_DEFAULT_COLOR = 257;
+
+export const enum RendererConstants {
+  /**
+   * The idle time after which cursor blinking stops.
+   */
+  CURSOR_BLINK_IDLE_TIMEOUT = 5 * 60 * 1000
+}

package/src/browser/renderer/shared/TextBlinkStateManager.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2026 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICoreBrowserService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IOptionsService } from 'common/services/Services';
+
+export class TextBlinkStateManager extends Disposable {
+  private _intervalDuration: number = 0;
+  private _interval: number | undefined;
+  private _blinkOn: boolean = true;
+  private _needsBlinkInViewport: boolean = false;
+  private _isViewportVisible: boolean = true;
+
+  constructor(
+    private readonly _renderCallback: () => void,
+    private readonly _coreBrowserService: ICoreBrowserService,
+    private readonly _optionsService: IOptionsService
+  ) {
+    super();
+    this._register(this._optionsService.onSpecificOptionChange('blinkIntervalDuration', duration => {
+      this.setIntervalDuration(duration);
+    }));
+    this.setIntervalDuration(this._optionsService.rawOptions.blinkIntervalDuration);
+    this._register(toDisposable(() => this._clearInterval()));
+  }
+
+  public get isBlinkOn(): boolean {
+    return this._blinkOn;
+  }
+
+  public get isEnabled(): boolean {
+    return this._intervalDuration > 0;
+  }
+
+  public setNeedsBlinkInViewport(needsBlinkInViewport: boolean): void {
+    if (this._needsBlinkInViewport === needsBlinkInViewport) {
+      return;
+    }
+
+    this._needsBlinkInViewport = needsBlinkInViewport;
+    this._updateIntervalState();
+  }
+
+  public setViewportVisible(isVisible: boolean): void {
+    if (this._isViewportVisible === isVisible) {
+      return;
+    }
+
+    this._isViewportVisible = isVisible;
+    this._updateIntervalState();
+  }
+
+  public setIntervalDuration(duration: number): void {
+    if (duration === this._intervalDuration) {
+      return;
+    }
+
+    this._intervalDuration = duration;
+    this._clearInterval();
+    this._updateIntervalState();
+  }
+
+  private _updateIntervalState(): void {
+    const shouldBlink = this._intervalDuration > 0 && this._needsBlinkInViewport && this._isViewportVisible;
+    if (shouldBlink) {
+      if (this._interval !== undefined) {
+        return;
+      }
+      const wasBlinkOn = this._blinkOn;
+      this._blinkOn = true;
+      this._interval = this._coreBrowserService.window.setInterval(() => {
+        this._blinkOn = !this._blinkOn;
+        this._renderCallback();
+      }, this._intervalDuration);
+      if (!wasBlinkOn) {
+        this._renderCallback();
+      }
+      return;
+    }
+
+    this._clearInterval();
+    if (!this._blinkOn) {
+      this._blinkOn = true;
+      this._renderCallback();
+    }
+  }
+
+  private _clearInterval(): void {
+    if (this._interval !== undefined) {
+      this._coreBrowserService.window.clearInterval(this._interval);
+      this._interval = undefined;
+    }
+  }
+}

package/src/browser/renderer/shared/Types.ts

@@ -6,7 +6,7 @@
 import { Terminal } from '@xterm/xterm';
 import { ITerminal } from 'browser/Types';
 import { IDisposable } from 'common/Types';
-import type { Event } from 'vs/base/common/event';
+import type { IEvent } from 'common/Event';
 
 export interface IDimensions {
   width: number;
@@ -39,6 +39,11 @@ export interface IRenderDimensions {
 export interface IRequestRedrawEvent {
   start: number;
   end: number;
+  /**
+   * Whether the redraw should happen synchronously. This is used to avoid
+   * flicker when the canvas is resized.
+   */
+  sync?: boolean;
 }
 
 /**
@@ -52,7 +57,7 @@ export interface IRenderer extends IDisposable {
    * Fires when the renderer is requesting to be redrawn on the next animation
    * frame but is _not_ a result of content changing (eg. selection changes).
    */
-  readonly onRequestRedraw: Event<IRequestRedrawEvent>;
+  readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
 
   dispose(): void;
   handleDevicePixelRatioChange(): void;
@@ -60,6 +65,7 @@ export interface IRenderer extends IDisposable {
   handleCharSizeChanged(): void;
   handleBlur(): void;
   handleFocus(): void;
+  handleViewportVisibilityChange?(isVisible: boolean): void;
   handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
   handleCursorMove(): void;
   clear(): void;

package/src/browser/scrollable/abstractScrollbar.ts

@@ -0,0 +1,300 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as dom from '../Dom';
+import { FastDomNode } from './fastDomNode';
+import { GlobalPointerMoveMonitor } from './globalPointerMoveMonitor';
+import { StandardWheelEvent } from './mouseEvent';
+import { ScrollbarArrow, IScrollbarArrowOptions } from './scrollbarArrow';
+import { ScrollbarState } from './scrollbarState';
+import { ScrollbarVisibilityController } from './scrollbarVisibilityController';
+import { Widget } from './widget';
+import * as platform from 'common/Platform';
+import { INewScrollPosition, Scrollable, ScrollbarVisibility } from './scrollable';
+
+/**
+ * The orthogonal distance to the slider at which dragging "resets". This implements "snapping"
+ */
+const POINTER_DRAG_RESET_DISTANCE = 140;
+
+export interface ISimplifiedPointerEvent {
+  buttons: number;
+  pageX: number;
+  pageY: number;
+}
+
+export interface IScrollbarHost {
+  handleMouseWheel(mouseWheelEvent: StandardWheelEvent): void;
+  handleDragStart(): void;
+  handleDragEnd(): void;
+}
+
+interface IAbstractScrollbarOptions {
+  lazyRender: boolean;
+  host: IScrollbarHost;
+  scrollbarState: ScrollbarState;
+  visibility: ScrollbarVisibility;
+  extraScrollbarClassName: string;
+  scrollable: Scrollable;
+  scrollByPage: boolean;
+}
+
+export abstract class AbstractScrollbar extends Widget {
+
+  protected _host: IScrollbarHost;
+  protected _scrollable: Scrollable;
+  protected _scrollByPage: boolean;
+  private _lazyRender: boolean;
+  protected _scrollbarState: ScrollbarState;
+  protected _visibilityController: ScrollbarVisibilityController;
+  private _pointerMoveMonitor: GlobalPointerMoveMonitor;
+
+  public domNode: FastDomNode<HTMLElement>;
+  public slider!: FastDomNode<HTMLElement>;
+
+  protected _shouldRender: boolean;
+
+  constructor(opts: IAbstractScrollbarOptions) {
+    super();
+    this._lazyRender = opts.lazyRender;
+    this._host = opts.host;
+    this._scrollable = opts.scrollable;
+    this._scrollByPage = opts.scrollByPage;
+    this._scrollbarState = opts.scrollbarState;
+    this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'xterm-visible xterm-scrollbar ' + opts.extraScrollbarClassName, 'xterm-invisible xterm-scrollbar ' + opts.extraScrollbarClassName));
+    this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+    this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
+    this._shouldRender = true;
+    this.domNode = new FastDomNode(document.createElement('div'));
+    this.domNode.setAttribute('role', 'presentation');
+    this.domNode.setAttribute('aria-hidden', 'true');
+
+    this._visibilityController.setDomNode(this.domNode);
+    this.domNode.setPosition('absolute');
+
+    this._register(dom.addDisposableListener(this.domNode.domNode, dom.eventType.POINTER_DOWN, (e: PointerEvent) => this._domNodePointerDown(e)));
+  }
+
+  // ----------------- creation
+
+  /**
+   * Creates the dom node for an arrow & adds it to the container
+   */
+  protected _createArrow(opts: IScrollbarArrowOptions): ScrollbarArrow {
+    const arrow = this._register(new ScrollbarArrow(opts));
+    this.domNode.domNode.appendChild(arrow.bgDomNode);
+    this.domNode.domNode.appendChild(arrow.domNode);
+    return arrow;
+  }
+
+  /**
+   * Creates the slider dom node, adds it to the container & hooks up the events
+   */
+  protected _createSlider(top: number, left: number, width: number | undefined, height: number | undefined): void {
+    this.slider = new FastDomNode(document.createElement('div'));
+    this.slider.setClassName('xterm-slider');
+    this.slider.setPosition('absolute');
+    this.slider.setTop(top);
+    this.slider.setLeft(left);
+    if (typeof width === 'number') {
+      this.slider.setWidth(width);
+    }
+    if (typeof height === 'number') {
+      this.slider.setHeight(height);
+    }
+    this.slider.setLayerHinting(true);
+    this.slider.setContain('strict');
+
+    this.domNode.domNode.appendChild(this.slider.domNode);
+
+    this._register(dom.addDisposableListener(
+      this.slider.domNode,
+      dom.eventType.POINTER_DOWN,
+      (e: PointerEvent) => {
+        if (e.button === 0) {
+          e.preventDefault();
+          this._sliderPointerDown(e);
+        }
+      }
+    ));
+
+    this._onclick(this.slider.domNode, e => {
+      if (e.leftButton) {
+        e.stopPropagation();
+      }
+    });
+  }
+
+  // ----------------- Update state
+
+  protected _handleElementSize(visibleSize: number): boolean {
+    if (this._scrollbarState.setVisibleSize(visibleSize)) {
+      this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+      this._shouldRender = true;
+      if (!this._lazyRender) {
+        this.render();
+      }
+    }
+    return this._shouldRender;
+  }
+
+  protected _handleElementScrollSize(elementScrollSize: number): boolean {
+    if (this._scrollbarState.setScrollSize(elementScrollSize)) {
+      this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+      this._shouldRender = true;
+      if (!this._lazyRender) {
+        this.render();
+      }
+    }
+    return this._shouldRender;
+  }
+
+  protected _handleElementScrollPosition(elementScrollPosition: number): boolean {
+    if (this._scrollbarState.setScrollPosition(elementScrollPosition)) {
+      this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+      this._shouldRender = true;
+      if (!this._lazyRender) {
+        this.render();
+      }
+    }
+    return this._shouldRender;
+  }
+
+  // ----------------- rendering
+
+  public beginReveal(): void {
+    this._visibilityController.setShouldBeVisible(true);
+  }
+
+  public beginHide(): void {
+    this._visibilityController.setShouldBeVisible(false);
+  }
+
+  public render(): void {
+    if (!this._shouldRender) {
+      return;
+    }
+    this._shouldRender = false;
+
+    this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
+    this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
+  }
+  // ----------------- DOM events
+
+  private _domNodePointerDown(e: PointerEvent): void {
+    if (e.target !== this.domNode.domNode) {
+      return;
+    }
+    this._handlePointerDown(e);
+  }
+
+  public delegatePointerDown(e: PointerEvent): void {
+    const domTop = this.domNode.domNode.getClientRects()[0].top;
+    const sliderStart = domTop + this._scrollbarState.getSliderPosition();
+    const sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
+    const pointerPos = this._sliderPointerPosition(e);
+    if (sliderStart <= pointerPos && pointerPos <= sliderStop) {
+      if (e.button === 0) {
+        e.preventDefault();
+        this._sliderPointerDown(e);
+      }
+    } else {
+      this._handlePointerDown(e);
+    }
+  }
+
+  private _handlePointerDown(e: PointerEvent): void {
+    let offsetX: number;
+    let offsetY: number;
+    if (e.target === this.domNode.domNode && typeof e.offsetX === 'number' && typeof e.offsetY === 'number') {
+      offsetX = e.offsetX;
+      offsetY = e.offsetY;
+    } else {
+      const domNodePosition = dom.getDomNodePagePosition(this.domNode.domNode);
+      offsetX = e.pageX - domNodePosition.left;
+      offsetY = e.pageY - domNodePosition.top;
+    }
+
+    const offset = this._pointerDownRelativePosition(offsetX, offsetY);
+    this._setDesiredScrollPositionNow(
+      this._scrollByPage
+        ? this._scrollbarState.getDesiredScrollPositionFromOffsetPaged(offset)
+        : this._scrollbarState.getDesiredScrollPositionFromOffset(offset)
+    );
+
+    if (e.button === 0) {
+      e.preventDefault();
+      this._sliderPointerDown(e);
+    }
+  }
+
+  private _sliderPointerDown(e: PointerEvent): void {
+    if (!e.target || !(e.target instanceof Element)) {
+      return;
+    }
+    const initialPointerPosition = this._sliderPointerPosition(e);
+    const initialPointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(e);
+    const initialScrollbarState = this._scrollbarState.clone();
+    this.slider.toggleClassName('xterm-active', true);
+
+    this._pointerMoveMonitor.startMonitoring(
+      e.target,
+      e.pointerId,
+      e.buttons,
+      (pointerMoveData: PointerEvent) => {
+        const pointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(pointerMoveData);
+        const pointerOrthogonalDelta = Math.abs(pointerOrthogonalPosition - initialPointerOrthogonalPosition);
+
+        if (platform.isWindows && pointerOrthogonalDelta > POINTER_DRAG_RESET_DISTANCE) {
+          this._setDesiredScrollPositionNow(initialScrollbarState.getScrollPosition());
+          return;
+        }
+
+        const pointerPosition = this._sliderPointerPosition(pointerMoveData);
+        const pointerDelta = pointerPosition - initialPointerPosition;
+        this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(pointerDelta));
+      },
+      () => {
+        this.slider.toggleClassName('xterm-active', false);
+        this._host.handleDragEnd();
+      }
+    );
+
+    this._host.handleDragStart();
+  }
+
+  private _setDesiredScrollPositionNow(_desiredScrollPosition: number): void {
+
+    const desiredScrollPosition: INewScrollPosition = {};
+    this.writeScrollPosition(desiredScrollPosition, _desiredScrollPosition);
+
+    this._scrollable.setScrollPositionNow(desiredScrollPosition);
+  }
+
+  public updateScrollbarSize(scrollbarSize: number): void {
+    this._updateScrollbarSize(scrollbarSize);
+    this._scrollbarState.setScrollbarSize(scrollbarSize);
+    this._shouldRender = true;
+    if (!this._lazyRender) {
+      this.render();
+    }
+  }
+
+  public isNeeded(): boolean {
+    return this._scrollbarState.isNeeded();
+  }
+
+  // ----------------- Overwrite these
+
+  protected abstract _renderDomNode(largeSize: number, smallSize: number): void;
+  protected abstract _updateSlider(sliderSize: number, sliderPosition: number): void;
+
+  protected abstract _pointerDownRelativePosition(offsetX: number, offsetY: number): number;
+  protected abstract _sliderPointerPosition(e: ISimplifiedPointerEvent): number;
+  protected abstract _sliderOrthogonalPointerPosition(e: ISimplifiedPointerEvent): number;
+  protected abstract _updateScrollbarSize(size: number): void;
+
+  public abstract writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void;
+}