Merge branch 'master' into ansiheadless

.eslintrc.json

@@ -39,7 +39,8 @@
     "**/*.js"
   ],
   "plugins": [
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "jsdoc"
   ],
   "rules": {
     "no-extra-semi": "error",
@@ -141,6 +142,9 @@
       "warn",
       "always"
     ],
+    "jsdoc/check-alignment": 1,
+    "jsdoc/check-param-names": 1,
+    "jsdoc/no-multi-asterisks": 1,
     "keyword-spacing": "warn",
     "new-parens": "warn",
     "no-duplicate-imports": "warn",

README.md

@@ -186,7 +186,7 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**DockerStacks**](https://docker-stacks.com/): Local LAMP/LEMP development studio
 - [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash.
 - [**Laravel Ssh Web Client**](https://github.com/roke22/Laravel-ssh-client): Laravel server inventory with ssh web client to connect at server using xterm.js
-- [**Repl.it**](https://repl.it): Collaborative browser based IDE with support for 50+ different languages.
+- [**Replit**](https://replit.com): Collaborative browser based IDE with support for 50+ different languages.
 - [**TeleType**](https://github.com/akshaykmr/TeleType): cli tool that allows you to share your terminal online conveniently. Show off mad cli-fu, help a colleague, teach, or troubleshoot.
 - [**Intervue**](https://www.intervue.io): Pair programming for interviews. Multiple programming languages are supported, with results displayed by xterm.js.
 - [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP, and Database services.

addons/xterm-addon-attach/src/AttachAddon.ts

@@ -47,16 +47,14 @@ export class AttachAddon implements ITerminalAddon {
   }
 
   private _sendData(data: string): void {
-    // TODO: do something better than just swallowing
-    // the data if the socket is not in a working condition
-    if (this._socket.readyState !== 1) {
+    if (!this._checkOpenSocket()) {
       return;
     }
     this._socket.send(data);
   }
 
   private _sendBinary(data: string): void {
-    if (this._socket.readyState !== 1) {
+    if (!this._checkOpenSocket()) {
       return;
     }
     const buffer = new Uint8Array(data.length);
@@ -65,6 +63,22 @@ export class AttachAddon implements ITerminalAddon {
     }
     this._socket.send(buffer);
   }
+
+  private _checkOpenSocket(): boolean {
+    switch (this._socket.readyState) {
+      case WebSocket.OPEN:
+        return true;
+      case WebSocket.CONNECTING:
+        throw new Error('Attach addon was loaded before socket was open');
+      case WebSocket.CLOSING:
+        console.warn('Attach addon socket is closing');
+        return false;
+      case WebSocket.CLOSED:
+        throw new Error('Attach addon socket is closed');
+      default:
+        throw new Error('Unexpected socket state');
+    }
+  }
 }
 
 function addSocketListener<K extends keyof WebSocketEventMap>(socket: WebSocket, type: K, handler: (this: WebSocket, ev: WebSocketEventMap[K]) => any): IDisposable {

addons/xterm-addon-canvas/src/BaseRenderLayer.ts

@@ -11,34 +11,40 @@ import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { IRasterizedGlyph, IRenderDimensions, ISelectionRenderModel, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { ReadonlyColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { ICellData } from 'common/Types';
+import { ICellData, IDisposable } from 'common/Types';
 import { Terminal } from 'xterm';
 import { IRenderLayer } from './Types';
 import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
 import { Disposable, toDisposable } from 'common/Lifecycle';
+import { isSafari } from 'common/Platform';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 
 export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
   protected _ctx!: CanvasRenderingContext2D;
-  private _scaledCharWidth: number = 0;
-  private _scaledCharHeight: number = 0;
-  private _scaledCellWidth: number = 0;
-  private _scaledCellHeight: number = 0;
-  private _scaledCharLeft: number = 0;
-  private _scaledCharTop: number = 0;
+  private _deviceCharWidth: number = 0;
+  private _deviceCharHeight: number = 0;
+  private _deviceCellWidth: number = 0;
+  private _deviceCellHeight: number = 0;
+  private _deviceCharLeft: number = 0;
+  private _deviceCharTop: number = 0;
 
   protected _selectionModel: ISelectionRenderModel = createSelectionRenderModel();
   private _cellColorResolver: CellColorResolver;
-  private _bitmapGenerator?: BitmapGenerator;
+  private _bitmapGenerator: (BitmapGenerator | undefined)[] = [];
 
   protected _charAtlas!: ITextureAtlas;
+  private _charAtlasDisposable?: IDisposable;
 
   public get canvas(): HTMLCanvasElement { return this._canvas; }
-  public get cacheCanvas(): HTMLCanvasElement { return this._charAtlas?.cacheCanvas!; }
+  public get cacheCanvas(): HTMLCanvasElement { return this._charAtlas?.pages[0].canvas!; }
+
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
 
   constructor(
     private readonly _terminal: Terminal,
@@ -79,7 +85,6 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     }
   }
 
-  public handleOptionsChanged(): void {}
   public handleBlur(): void {}
   public handleFocus(): void {}
   public handleCursorMove(): void {}
@@ -113,25 +118,29 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    * @param colorSet The color set to use for the char atlas.
    */
   private _refreshCharAtlas(colorSet: ReadonlyColorSet): void {
-    if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
+    if (this._deviceCharWidth <= 0 && this._deviceCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireTextureAtlas(this._terminal, colorSet, this._scaledCellWidth, this._scaledCellHeight, this._scaledCharWidth, this._scaledCharHeight, this._coreBrowserService.dpr);
+    this._charAtlasDisposable?.dispose();
+    this._charAtlas = acquireTextureAtlas(this._terminal, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
+    this._charAtlasDisposable = forwardEvent(this._charAtlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);
     this._charAtlas.warmUp();
-    this._bitmapGenerator = new BitmapGenerator(this._charAtlas.cacheCanvas);
+    for (let i = 0; i < this._charAtlas.pages.length; i++) {
+      this._bitmapGenerator[i] = new BitmapGenerator(this._charAtlas.pages[i].canvas);
+    }
   }
 
   public resize(dim: IRenderDimensions): void {
-    this._scaledCellWidth = dim.scaledCellWidth;
-    this._scaledCellHeight = dim.scaledCellHeight;
-    this._scaledCharWidth = dim.scaledCharWidth;
-    this._scaledCharHeight = dim.scaledCharHeight;
-    this._scaledCharLeft = dim.scaledCharLeft;
-    this._scaledCharTop = dim.scaledCharTop;
-    this._canvas.width = dim.scaledCanvasWidth;
-    this._canvas.height = dim.scaledCanvasHeight;
-    this._canvas.style.width = `${dim.canvasWidth}px`;
-    this._canvas.style.height = `${dim.canvasHeight}px`;
+    this._deviceCellWidth = dim.device.cell.width;
+    this._deviceCellHeight = dim.device.cell.height;
+    this._deviceCharWidth = dim.device.char.width;
+    this._deviceCharHeight = dim.device.char.height;
+    this._deviceCharLeft = dim.device.char.left;
+    this._deviceCharTop = dim.device.char.top;
+    this._canvas.width = dim.device.canvas.width;
+    this._canvas.height = dim.device.canvas.height;
+    this._canvas.style.width = `${dim.css.canvas.width}px`;
+    this._canvas.style.height = `${dim.css.canvas.height}px`;
 
     // Draw the background if this is an opaque layer
     if (!this._alpha) {
@@ -156,24 +165,24 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _fillCells(x: number, y: number, width: number, height: number): void {
     this._ctx.fillRect(
-      x * this._scaledCellWidth,
-      y * this._scaledCellHeight,
-      width * this._scaledCellWidth,
-      height * this._scaledCellHeight);
+      x * this._deviceCellWidth,
+      y * this._deviceCellHeight,
+      width * this._deviceCellWidth,
+      height * this._deviceCellHeight);
   }
 
   /**
-     * Fills a 1px line (2px on HDPI) at the middle of the cell. This uses the
-     * existing fillStyle on the context.
-     * @param x The column to fill.
-     * @param y The row to fill.
-     */
+   * Fills a 1px line (2px on HDPI) at the middle of the cell. This uses the
+   * existing fillStyle on the context.
+   * @param x The column to fill.
+   * @param y The row to fill.
+   */
   protected _fillMiddleLineAtCells(x: number, y: number, width: number = 1): void {
-    const cellOffset = Math.ceil(this._scaledCellHeight * 0.5);
+    const cellOffset = Math.ceil(this._deviceCellHeight * 0.5);
     this._ctx.fillRect(
-      x * this._scaledCellWidth,
-      (y + 1) * this._scaledCellHeight - cellOffset - this._coreBrowserService.dpr,
-      width * this._scaledCellWidth,
+      x * this._deviceCellWidth,
+      (y + 1) * this._deviceCellHeight - cellOffset - this._coreBrowserService.dpr,
+      width * this._deviceCellWidth,
       this._coreBrowserService.dpr);
   }
 
@@ -185,9 +194,9 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _fillBottomLineAtCells(x: number, y: number, width: number = 1, pixelOffset: number = 0): void {
     this._ctx.fillRect(
-      x * this._scaledCellWidth,
-      (y + 1) * this._scaledCellHeight + pixelOffset - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
-      width * this._scaledCellWidth,
+      x * this._deviceCellWidth,
+      (y + 1) * this._deviceCellHeight + pixelOffset - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
+      width * this._deviceCellWidth,
       this._coreBrowserService.dpr);
   }
 
@@ -198,10 +207,10 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     const lineWidth = this._coreBrowserService.dpr;
     this._ctx.lineWidth = lineWidth;
     for (let xOffset = 0; xOffset < width; xOffset++) {
-      const xLeft = (x + xOffset) * this._scaledCellWidth;
-      const xMid = (x + xOffset + 0.5) * this._scaledCellWidth;
-      const xRight = (x + xOffset + 1) * this._scaledCellWidth;
-      const yMid = (y + 1) * this._scaledCellHeight - lineWidth - 1;
+      const xLeft = (x + xOffset) * this._deviceCellWidth;
+      const xMid = (x + xOffset + 0.5) * this._deviceCellWidth;
+      const xRight = (x + xOffset + 1) * this._deviceCellWidth;
+      const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
       const yMidBot = yMid - lineWidth;
       const yMidTop = yMid + lineWidth;
       this._ctx.moveTo(xLeft, yMid);
@@ -227,12 +236,12 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     const lineWidth = this._coreBrowserService.dpr;
     this._ctx.lineWidth = lineWidth;
     this._ctx.setLineDash([lineWidth * 2, lineWidth]);
-    const xLeft = x * this._scaledCellWidth;
-    const yMid = (y + 1) * this._scaledCellHeight - lineWidth - 1;
+    const xLeft = x * this._deviceCellWidth;
+    const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
     this._ctx.moveTo(xLeft, yMid);
     for (let xOffset = 0; xOffset < width; xOffset++) {
-      // const xLeft = x * this._scaledCellWidth;
-      const xRight = (x + width + xOffset) * this._scaledCellWidth;
+      // const xLeft = x * this._deviceCellWidth;
+      const xRight = (x + width + xOffset) * this._deviceCellWidth;
       this._ctx.lineTo(xRight, yMid);
     }
     this._ctx.stroke();
@@ -247,9 +256,9 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     const lineWidth = this._coreBrowserService.dpr;
     this._ctx.lineWidth = lineWidth;
     this._ctx.setLineDash([lineWidth * 4, lineWidth * 3]);
-    const xLeft = x * this._scaledCellWidth;
-    const xRight = (x + width) * this._scaledCellWidth;
-    const yMid = (y + 1) * this._scaledCellHeight - lineWidth - 1;
+    const xLeft = x * this._deviceCellWidth;
+    const xRight = (x + width) * this._deviceCellWidth;
+    const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
     this._ctx.moveTo(xLeft, yMid);
     this._ctx.lineTo(xRight, yMid);
     this._ctx.stroke();
@@ -265,10 +274,10 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
     this._ctx.fillRect(
-      x * this._scaledCellWidth,
-      y * this._scaledCellHeight,
+      x * this._deviceCellWidth,
+      y * this._deviceCellHeight,
       this._coreBrowserService.dpr * width,
-      this._scaledCellHeight);
+      this._deviceCellHeight);
   }
 
   /**
@@ -281,10 +290,10 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     const lineWidth = this._coreBrowserService.dpr;
     this._ctx.lineWidth = lineWidth;
     this._ctx.strokeRect(
-      x * this._scaledCellWidth + lineWidth / 2,
-      y * this._scaledCellHeight + (lineWidth / 2),
-      width * this._scaledCellWidth - lineWidth,
-      (height * this._scaledCellHeight) - lineWidth);
+      x * this._deviceCellWidth + lineWidth / 2,
+      y * this._deviceCellHeight + (lineWidth / 2),
+      width * this._deviceCellWidth - lineWidth,
+      (height * this._deviceCellHeight) - lineWidth);
   }
 
   /**
@@ -309,17 +318,17 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
   protected _clearCells(x: number, y: number, width: number, height: number): void {
     if (this._alpha) {
       this._ctx.clearRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        width * this._scaledCellWidth,
-        height * this._scaledCellHeight);
+        x * this._deviceCellWidth,
+        y * this._deviceCellHeight,
+        width * this._deviceCellWidth,
+        height * this._deviceCellHeight);
     } else {
       this._ctx.fillStyle = this._themeService.colors.background.css;
       this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        width * this._scaledCellWidth,
-        height * this._scaledCellHeight);
+        x * this._deviceCellWidth,
+        y * this._deviceCellHeight,
+        width * this._deviceCellWidth,
+        height * this._deviceCellHeight);
     }
   }
 
@@ -330,7 +339,6 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    * @param cell The cell data for the character to draw.
    * @param x The column to draw at.
    * @param y The row to draw at.
-   * @param color The color of the character.
    */
   protected _fillCharTrueColor(cell: CellData, x: number, y: number): void {
     this._ctx.font = this._getFont(false, false);
@@ -340,15 +348,15 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     // Draw custom characters if applicable
     let drawSuccess = false;
     if (this._optionsService.rawOptions.customGlyphs !== false) {
-      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight, this._optionsService.rawOptions.fontSize, this._coreBrowserService.dpr);
+      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._deviceCellWidth, y * this._deviceCellHeight, this._deviceCellWidth, this._deviceCellHeight, this._optionsService.rawOptions.fontSize, this._coreBrowserService.dpr);
     }
 
     // Draw the character
     if (!drawSuccess) {
       this._ctx.fillText(
         cell.getChars(),
-        x * this._scaledCellWidth + this._scaledCharLeft,
-        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+        x * this._deviceCellWidth + this._deviceCharLeft,
+        y * this._deviceCellHeight + this._deviceCharTop + this._deviceCharHeight);
     }
   }
 
@@ -358,7 +366,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _drawChars(cell: ICellData, x: number, y: number): void {
     const chars = cell.getChars();
-    this._cellColorResolver.resolve(cell, x, y);
+    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y);
     let glyph: IRasterizedGlyph;
     if (chars && chars.length > 1) {
       glyph = this._charAtlas.getRasterizedGlyphCombinedChar(chars, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext);
@@ -368,18 +376,21 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     this._ctx.save();
     this._clipRow(y);
     // Draw the image, use the bitmap if it's available
-    if (this._charAtlas.hasCanvasChanged) {
-      this._bitmapGenerator?.refresh();
-      this._charAtlas.hasCanvasChanged = false;
+    if (this._charAtlas.pages[glyph.texturePage].hasCanvasChanged) {
+      if (!this._bitmapGenerator[glyph.texturePage]) {
+        this._bitmapGenerator[glyph.texturePage] = new BitmapGenerator(this._charAtlas.pages[glyph.texturePage].canvas);
+      }
+      this._bitmapGenerator[glyph.texturePage]?.refresh();
+      this._charAtlas.pages[glyph.texturePage].hasCanvasChanged = false;
     }
     this._ctx.drawImage(
-      this._bitmapGenerator?.bitmap || this._charAtlas!.cacheCanvas,
+      this._bitmapGenerator[glyph.texturePage]?.bitmap || this._charAtlas!.pages[glyph.texturePage].canvas,
       glyph.texturePosition.x,
       glyph.texturePosition.y,
       glyph.size.x,
       glyph.size.y,
-      x * this._scaledCellWidth - glyph.offset.x,
-      y * this._scaledCellHeight - glyph.offset.y,
+      x * this._deviceCellWidth - glyph.offset.x,
+      y * this._deviceCellHeight - glyph.offset.y,
       glyph.size.x,
       glyph.size.y
     );
@@ -394,9 +405,9 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     this._ctx.beginPath();
     this._ctx.rect(
       0,
-      y * this._scaledCellHeight,
-      this._bufferService.cols * this._scaledCellWidth,
-      this._scaledCellHeight);
+      y * this._deviceCellHeight,
+      this._bufferService.cols * this._deviceCellWidth,
+      this._deviceCellHeight);
     this._ctx.clip();
   }
 
@@ -436,6 +447,10 @@ class BitmapGenerator {
   public refresh(): void {
     // Clear the bitmap immediately as it's stale
     this._bitmap = undefined;
+    // Disable ImageBitmaps on Safari because of https://bugs.webkit.org/show_bug.cgi?id=149990
+    if (isSafari) {
+      return;
+    }
     if (this._commitTimeout === undefined) {
       this._commitTimeout = window.setTimeout(() => this._generate(), GLYPH_BITMAP_COMMIT_DELAY);
     }

addons/xterm-addon-canvas/src/CanvasAddon.ts

@@ -4,7 +4,7 @@
  */
 
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ITerminal } from 'browser/Types';
 import { CanvasRenderer } from './CanvasRenderer';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { ITerminalAddon, Terminal } from 'xterm';
@@ -17,33 +17,38 @@ export class CanvasAddon extends Disposable implements ITerminalAddon {
 
   private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
   public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
 
   public get textureAtlas(): HTMLCanvasElement | undefined {
     return this._renderer?.textureAtlas;
   }
 
   public activate(terminal: Terminal): void {
-    const core = (terminal as any)._core;
+    const core = (terminal as any)._core as ITerminal;
     if (!terminal.element) {
       this.register(core.onWillOpen(() => this.activate(terminal)));
       return;
     }
 
     this._terminal = terminal;
-    const bufferService: IBufferService = core._bufferService;
-    const renderService: IRenderService = core._renderService;
-    const characterJoinerService: ICharacterJoinerService = core._characterJoinerService;
-    const charSizeService: ICharSizeService = core._charSizeService;
-    const coreService: ICoreService = core.coreService;
-    const coreBrowserService: ICoreBrowserService = core._coreBrowserService;
-    const decorationService: IDecorationService = core._decorationService;
-    const optionsService: IOptionsService = core.optionsService;
-    const themeService: IThemeService = core._themeService;
-    const screenElement: HTMLElement = core.screenElement;
+    const coreService = core.coreService;
+    const optionsService = core.optionsService;
+    const screenElement = core.screenElement!;
     const linkifier = core.linkifier2;
 
+    const unsafeCore = core as any;
+    const bufferService: IBufferService = unsafeCore._bufferService;
+    const renderService: IRenderService = unsafeCore._renderService;
+    const characterJoinerService: ICharacterJoinerService = unsafeCore._characterJoinerService;
+    const charSizeService: ICharSizeService = unsafeCore._charSizeService;
+    const coreBrowserService: ICoreBrowserService = unsafeCore._coreBrowserService;
+    const decorationService: IDecorationService = unsafeCore._decorationService;
+    const themeService: IThemeService = unsafeCore._themeService;
+
     this._renderer = new CanvasRenderer(terminal, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService, themeService);
     this.register(forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
+    this.register(forwardEvent(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
     renderService.setRenderer(this._renderer);
     renderService.handleResize(bufferService.cols, bufferService.rows);
 

addons/xterm-addon-canvas/src/CanvasRenderer.ts

@@ -5,10 +5,11 @@
 
 import { removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
 import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
+import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { IColorSet, ILinkifier2, ReadonlyColorSet } from 'browser/Types';
-import { EventEmitter } from 'common/EventEmitter';
+import { ILinkifier2 } from 'browser/Types';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { Terminal } from 'xterm';
@@ -28,6 +29,8 @@ export class CanvasRenderer extends Disposable implements IRenderer {
   public readonly onRequestRedraw = this._onRequestRedraw.event;
   private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
   public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
 
   constructor(
     private readonly _terminal: Terminal,
@@ -50,27 +53,14 @@ export class CanvasRenderer extends Disposable implements IRenderer {
       new LinkRenderLayer(this._terminal, this._screenElement, 2, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService, _themeService),
       new CursorRenderLayer(this._terminal, this._screenElement, 3, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService, _themeService)
     ];
-    this.dimensions = {
-      scaledCharWidth: 0,
-      scaledCharHeight: 0,
-      scaledCellWidth: 0,
-      scaledCellHeight: 0,
-      scaledCharLeft: 0,
-      scaledCharTop: 0,
-      scaledCanvasWidth: 0,
-      scaledCanvasHeight: 0,
-      canvasWidth: 0,
-      canvasHeight: 0,
-      actualCellWidth: 0,
-      actualCellHeight: 0
-    };
+    for (const layer of this._renderLayers) {
+      forwardEvent(layer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);
+    }
+    this.dimensions = createRenderDimensions();
     this._devicePixelRatio = this._coreBrowserService.dpr;
     this._updateDimensions();
 
     this.register(observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
-
-    this.handleOptionsChanged();
-
     this.register(toDisposable(() => {
       for (const l of this._renderLayers) {
         l.dispose();
@@ -102,8 +92,8 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     }
 
     // Resize the screen
-    this._screenElement.style.width = `${this.dimensions.canvasWidth}px`;
-    this._screenElement.style.height = `${this.dimensions.canvasHeight}px`;
+    this._screenElement.style.width = `${this.dimensions.css.canvas.width}px`;
+    this._screenElement.style.height = `${this.dimensions.css.canvas.height}px`;
   }
 
   public handleCharSizeChanged(): void {
@@ -130,10 +120,6 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     this._runOperation(l => l.handleCursorMove());
   }
 
-  public handleOptionsChanged(): void {
-    this._runOperation(l => l.handleOptionsChanged());
-  }
-
   public clear(): void {
     this._runOperation(l => l.reset());
   }
@@ -170,23 +156,23 @@ export class CanvasRenderer extends Disposable implements IRenderer {
 
     // See the WebGL renderer for an explanation of this section.
     const dpr = this._coreBrowserService.dpr;
-    this.dimensions.scaledCharWidth = Math.floor(this._charSizeService.width * dpr);
-    this.dimensions.scaledCharHeight = Math.ceil(this._charSizeService.height * dpr);
-    this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._optionsService.rawOptions.lineHeight);
-    this.dimensions.scaledCharTop = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledCellHeight - this.dimensions.scaledCharHeight) / 2);
-    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._optionsService.rawOptions.letterSpacing);
-    this.dimensions.scaledCharLeft = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
-    this.dimensions.scaledCanvasHeight = this._bufferService.rows * this.dimensions.scaledCellHeight;
-    this.dimensions.scaledCanvasWidth = this._bufferService.cols * this.dimensions.scaledCellWidth;
-    this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / dpr);
-    this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / dpr);
-    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._bufferService.rows;
-    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._bufferService.cols;
+    this.dimensions.device.char.width = Math.floor(this._charSizeService.width * dpr);
+    this.dimensions.device.char.height = Math.ceil(this._charSizeService.height * dpr);
+    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._optionsService.rawOptions.lineHeight);
+    this.dimensions.device.char.top = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
+    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._optionsService.rawOptions.letterSpacing);
+    this.dimensions.device.char.left = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
+    this.dimensions.device.canvas.height = this._bufferService.rows * this.dimensions.device.cell.height;
+    this.dimensions.device.canvas.width = this._bufferService.cols * this.dimensions.device.cell.width;
+    this.dimensions.css.canvas.height = Math.round(this.dimensions.device.canvas.height / dpr);
+    this.dimensions.css.canvas.width = Math.round(this.dimensions.device.canvas.width / dpr);
+    this.dimensions.css.cell.height = this.dimensions.css.canvas.height / this._bufferService.rows;
+    this.dimensions.css.cell.width = this.dimensions.css.canvas.width / this._bufferService.cols;
   }
 
   private _setCanvasDevicePixelDimensions(width: number, height: number): void {
-    this.dimensions.scaledCanvasHeight = height;
-    this.dimensions.scaledCanvasWidth = width;
+    this.dimensions.device.canvas.height = height;
+    this.dimensions.device.canvas.width = width;
     // Resize all render layers
     for (const l of this._renderLayers) {
       l.resize(this.dimensions);

addons/xterm-addon-canvas/src/CursorRenderLayer.ts

@@ -58,6 +58,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
       'block': this._renderBlockCursor.bind(this),
       'underline': this._renderUnderlineCursor.bind(this)
     };
+    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
     this.register(toDisposable(() => {
       this._cursorBlinkStateManager?.dispose();
       this._cursorBlinkStateManager = undefined;
@@ -79,7 +80,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   public reset(): void {
     this._clearCursor();
     this._cursorBlinkStateManager?.restartBlinkAnimation();
-    this.handleOptionsChanged();
+    this._handleOptionsChanged();
   }
 
   public handleBlur(): void {
@@ -92,7 +93,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
   }
 
-  public handleOptionsChanged(): void {
+  private _handleOptionsChanged(): void {
     if (this._optionsService.rawOptions.cursorBlink) {
       if (!this._cursorBlinkStateManager) {
         this._cursorBlinkStateManager = new CursorBlinkStateManager(this._coreBrowserService.isFocused, () => {

addons/xterm-addon-canvas/src/TextRenderLayer.ts

@@ -45,6 +45,7 @@ export class TextRenderLayer extends BaseRenderLayer {
   ) {
     super(terminal, container, 'text', zIndex, alpha, themeService, bufferService, optionsService, decorationService, coreBrowserService);
     this._state = new GridCache<CharData>();
+    this.register(optionsService.onSpecificOptionChange('allowTransparency', value => this._setTransparency(value)));
   }
 
   public resize(dim: IRenderDimensions): void {
@@ -52,8 +53,8 @@ export class TextRenderLayer extends BaseRenderLayer {
 
     // Clear the character width cache if the font or width has changed
     const terminalFont = this._getFont(false, false);
-    if (this._characterWidth !== dim.scaledCharWidth || this._characterFont !== terminalFont) {
-      this._characterWidth = dim.scaledCharWidth;
+    if (this._characterWidth !== dim.device.char.width || this._characterFont !== terminalFont) {
+      this._characterWidth = dim.device.char.width;
       this._characterFont = terminalFont;
       this._characterOverlapCache = {};
     }
@@ -251,10 +252,6 @@ export class TextRenderLayer extends BaseRenderLayer {
     this._drawForeground(firstRow, lastRow);
   }
 
-  public handleOptionsChanged(): void {
-    this._setTransparency(this._optionsService.rawOptions.allowTransparency);
-  }
-
   /**
    * Whether a character is overlapping to the next cell.
    */

addons/xterm-addon-canvas/src/Types.d.ts

@@ -4,24 +4,8 @@
  */
 
 import { IDisposable } from 'common/Types';
-import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IEvent } from 'common/EventEmitter';
-
-// TODO: Use core interfaces
-export interface IRenderDimensions {
-  scaledCharWidth: number;
-  scaledCharHeight: number;
-  scaledCellWidth: number;
-  scaledCellHeight: number;
-  scaledCharLeft: number;
-  scaledCharTop: number;
-  scaledCanvasWidth: number;
-  scaledCanvasHeight: number;
-  canvasWidth: number;
-  canvasHeight: number;
-  actualCellWidth: number;
-  actualCellHeight: number;
-}
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 
 export interface IRequestRedrawEvent {
   start: number;
@@ -58,13 +42,14 @@ export interface IRenderLayer extends IDisposable {
   readonly canvas: HTMLCanvasElement;
   readonly cacheCanvas: HTMLCanvasElement;
 
+  readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
   /**
    * Called when the terminal loses focus.
    */
   handleBlur(): void;
 
   /**
-   * * Called when the terminal gets focus.
+   * Called when the terminal gets focus.
    */
   handleFocus(): void;
 
@@ -73,11 +58,6 @@ export interface IRenderLayer extends IDisposable {
    */
   handleCursorMove(): void;
 
-  /**
-   * Called when options change.
-   */
-  handleOptionsChanged(): void;
-
   /**
    * Called when the data in the grid has changed (or needs to be rendered
    * again).

addons/xterm-addon-canvas/typings/xterm-addon-canvas.d.ts

@@ -17,6 +17,11 @@ declare module 'xterm-addon-canvas' {
      */
     public readonly onChangeTextureAtlas: IEvent<HTMLCanvasElement>;
 
+    /**
+     * An event that is fired when the a new page is added to the texture atlas.
+     */
+    public readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+
     constructor();
 
     /**

addons/xterm-addon-fit/src/FitAddon.ts

@@ -4,6 +4,7 @@
  */
 
 import { Terminal, ITerminalAddon } from 'xterm';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 
 interface ITerminalDimensions {
   /**
@@ -58,8 +59,9 @@ export class FitAddon implements ITerminalAddon {
 
     // TODO: Remove reliance on private API
     const core = (this._terminal as any)._core;
+    const dims: IRenderDimensions = core._renderService.dimensions;
 
-    if (core._renderService.dimensions.actualCellWidth === 0 || core._renderService.dimensions.actualCellHeight === 0) {
+    if (dims.css.cell.width === 0 || dims.css.cell.height === 0) {
       return undefined;
     }
 
@@ -81,8 +83,8 @@ export class FitAddon implements ITerminalAddon {
     const availableHeight = parentElementHeight - elementPaddingVer;
     const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth;
     const geometry = {
-      cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / core._renderService.dimensions.actualCellWidth)),
-      rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / core._renderService.dimensions.actualCellHeight))
+      cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
+      rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height))
     };
     return geometry;
   }

addons/xterm-addon-fit/src/tsconfig.json

@@ -13,10 +13,20 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ]
+    ],
+    "paths": {
+      "browser/*": [
+        "../../../src/browser/*"
+      ]
+    }
   },
   "include": [
     "./**/*",
     "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/browser"
+    }
   ]
 }

addons/xterm-addon-search/src/SearchAddon.ts

@@ -126,7 +126,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon {
    * doesn't exist, do nothing.
    * @param term The search term.
    * @param searchOptions Search options.
-   * @return Whether a result was found.
+   * @returns Whether a result was found.
    */
   public findNext(term: string, searchOptions?: ISearchOptions): boolean {
     if (!this._terminal) {
@@ -307,7 +307,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon {
    * doesn't exist, do nothing.
    * @param term The search term.
    * @param searchOptions Search options.
-   * @return Whether a result was found.
+   * @returns Whether a result was found.
    */
   public findPrevious(term: string, searchOptions?: ISearchOptions): boolean {
     if (!this._terminal) {
@@ -477,10 +477,10 @@ export class SearchAddon extends Disposable implements ITerminalAddon {
    * started on an earlier line then it is skipped since it will be properly searched when the terminal line that the
    * text starts on is searched.
    * @param term The search term.
-   * @param position The position to start the search.
+   * @param searchPosition The position to start the search.
    * @param searchOptions Search options.
    * @param isReverseSearch Whether the search should start from the right side of the terminal and search to the left.
-   * @return The search result if it was found.
+   * @returns The search result if it was found.
    */
   protected _findInLine(term: string, searchPosition: ISearchPosition, searchOptions: ISearchOptions = {}, isReverseSearch: boolean = false): ISearchResult | undefined {
     const terminal = this._terminal!;
@@ -627,7 +627,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon {
    * Wide characters will count as two columns in the resulting string. This
    * function is useful for getting the actual text underneath the raw selection
    * position.
-   * @param line The line being translated.
+   * @param lineIndex The index of the line being translated.
    * @param trimRight Whether to trim whitespace to the right.
    */
   private _translateBufferLineToStringWithWrap(lineIndex: number, trimRight: boolean): LineCacheEntry {
@@ -662,7 +662,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon {
   /**
    * Selects and scrolls to a result.
    * @param result The result to select.
-   * @return Whether a result was selected.
+   * @returns Whether a result was selected.
    */
   private _selectResult(result: ISearchResult | undefined, options?: ISearchDecorationOptions, noScroll?: boolean): boolean {
     const terminal = this._terminal!;
@@ -702,10 +702,10 @@ export class SearchAddon extends Disposable implements ITerminalAddon {
   }
 
   /**
-   * Applies styles to the decoration when it is rendered
-   * @param element the decoration's element
-   * @param backgroundColor the background color to apply
-   * @param borderColor the border color to apply
+   * Applies styles to the decoration when it is rendered.
+   * @param element The decoration's element.
+   * @param borderColor The border color to apply.
+   * @param isActiveResult Whether the element is part of the active search result.
    * @returns
    */
   private _applyStyles(element: HTMLElement, borderColor: string | undefined, isActiveResult: boolean): void {

addons/xterm-addon-unicode11/src/UnicodeV11.ts

@@ -4,7 +4,6 @@
  */
 
 import { IUnicodeVersionProvider } from 'xterm';
-import { fill } from 'common/TypedArrayUtils';
 
 type CharWidth = 0 | 1 | 2;
 
@@ -198,15 +197,15 @@ export class UnicodeV11 implements IUnicodeVersionProvider {
   constructor() {
     if (!table) {
       table = new Uint8Array(65536);
-      fill(table, 1);
+      table.fill(1);
       table[0] = 0;
-      fill(table, 0, 1, 32);
-      fill(table, 0, 0x7f, 0xa0);
+      table.fill(0, 1, 32);
+      table.fill(0, 0x7f, 0xa0);
       for (let r = 0; r < BMP_COMBINING.length; ++r) {
-        fill(table, 0, BMP_COMBINING[r][0], BMP_COMBINING[r][1] + 1);
+        table.fill(0, BMP_COMBINING[r][0], BMP_COMBINING[r][1] + 1);
       }
       for (let r = 0; r < BMP_WIDE.length; ++r) {
-        fill(table, 2, BMP_WIDE[r][0], BMP_WIDE[r][1] + 1);
+        table.fill(2, BMP_WIDE[r][0], BMP_WIDE[r][1] + 1);
       }
     }
   }

addons/xterm-addon-web-links/src/WebLinkProvider.ts

@@ -47,6 +47,12 @@ export class LinkComputer {
 
     const [line, startLineIndex] = LinkComputer._translateBufferLineToStringWithWrap(y - 1, false, terminal);
 
+    // Don't try if the wrapped line if excessively large as the regex matching will block the main
+    // thread.
+    if (line.length > 1024) {
+      return [];
+    }
+
     let match;
     let stringIndex = -1;
     const result: ILink[] = [];
@@ -105,9 +111,8 @@ export class LinkComputer {
 
   /**
    * Gets the entire line for the buffer line
-   * @param line The line being translated.
+   * @param lineIndex The index of the line being translated.
    * @param trimRight Whether to trim whitespace to the right.
-   * @param terminal The terminal
    */
   private static _translateBufferLineToStringWithWrap(lineIndex: number, trimRight: boolean, terminal: Terminal): [string, number] {
     let lineString = '';

addons/xterm-addon-webgl/src/GlyphRenderer.ts

@@ -5,13 +5,12 @@
 
 import { createProgram, PROJECTION_MATRIX } from './WebglUtils';
 import { IWebGL2RenderingContext, IWebGLVertexArrayObject, IRenderModel } from './Types';
-import { fill } from 'common/TypedArrayUtils';
 import { NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Terminal } from 'xterm';
-import { IColorSet } from 'browser/Types';
 import { IRasterizedGlyph, IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
 
 interface IVertices {
   attributes: Float32Array;
@@ -30,8 +29,9 @@ const enum VertexAttribLocations {
   CELL_POSITION = 1,
   OFFSET = 2,
   SIZE = 3,
-  TEXCOORD = 4,
-  TEXSIZE = 5
+  TEXPAGE = 4,
+  TEXCOORD = 5,
+  TEXSIZE = 6
 }
 
 const vertexShaderSource = `#version 300 es
@@ -39,6 +39,7 @@ layout (location = ${VertexAttribLocations.UNIT_QUAD}) in vec2 a_unitquad;
 layout (location = ${VertexAttribLocations.CELL_POSITION}) in vec2 a_cellpos;
 layout (location = ${VertexAttribLocations.OFFSET}) in vec2 a_offset;
 layout (location = ${VertexAttribLocations.SIZE}) in vec2 a_size;
+layout (location = ${VertexAttribLocations.TEXPAGE}) in float a_texpage;
 layout (location = ${VertexAttribLocations.TEXCOORD}) in vec2 a_texcoord;
 layout (location = ${VertexAttribLocations.TEXSIZE}) in vec2 a_texsize;
 
@@ -46,27 +47,38 @@ uniform mat4 u_projection;
 uniform vec2 u_resolution;
 
 out vec2 v_texcoord;
+flat out int v_texpage;
 
 void main() {
   vec2 zeroToOne = (a_offset / u_resolution) + a_cellpos + (a_unitquad * a_size);
   gl_Position = u_projection * vec4(zeroToOne, 0.0, 1.0);
+  v_texpage = int(a_texpage);
   v_texcoord = a_texcoord + a_unitquad * a_texsize;
 }`;
 
-const fragmentShaderSource = `#version 300 es
+function createFragmentShaderSource(maxFragmentShaderTextureUnits: number): string {
+  let textureConditionals = '';
+  for (let i = 1; i < maxFragmentShaderTextureUnits; i++) {
+    textureConditionals += ` else if (v_texpage == ${i}) { outColor = texture(u_texture[${i}], v_texcoord); }`;
+  }
+  return (`#version 300 es
 precision lowp float;
 
 in vec2 v_texcoord;
+flat in int v_texpage;
 
-uniform sampler2D u_texture;
+uniform sampler2D u_texture[${maxFragmentShaderTextureUnits}];
 
 out vec4 outColor;
 
 void main() {
-  outColor = texture(u_texture, v_texcoord);
-}`;
+  if (v_texpage == 0) {
+    outColor = texture(u_texture[0], v_texcoord);
+  } ${textureConditionals}
+}`);
+}
 
-const INDICES_PER_CELL = 10;
+const INDICES_PER_CELL = 11;
 const BYTES_PER_CELL = INDICES_PER_CELL * Float32Array.BYTES_PER_ELEMENT;
 const CELL_POSITION_INDICES = 2;
 
@@ -77,18 +89,17 @@ let $leftCellPadding = 0;
 let $clippedPixels = 0;
 
 export class GlyphRenderer extends Disposable {
+  private readonly _program: WebGLProgram;
+  private readonly _vertexArrayObject: IWebGLVertexArrayObject;
+  private readonly _projectionLocation: WebGLUniformLocation;
+  private readonly _resolutionLocation: WebGLUniformLocation;
+  private readonly _textureLocation: WebGLUniformLocation;
+  private readonly _atlasTextures: WebGLTexture[];
+  private readonly _attributesBuffer: WebGLBuffer;
+
   private _atlas: ITextureAtlas | undefined;
-
-  private _program: WebGLProgram;
-  private _vertexArrayObject: IWebGLVertexArrayObject;
-  private _projectionLocation: WebGLUniformLocation;
-  private _resolutionLocation: WebGLUniformLocation;
-  private _textureLocation: WebGLUniformLocation;
-  private _atlasTexture: WebGLTexture;
-  private _attributesBuffer: WebGLBuffer;
   private _activeBuffer: number = 0;
-
-  private _vertices: IVertices = {
+  private readonly _vertices: IVertices = {
     count: 0,
     attributes: new Float32Array(0),
     attributesBuffers: [
@@ -98,14 +109,22 @@ export class GlyphRenderer extends Disposable {
   };
 
   constructor(
-    private _terminal: Terminal,
-    private _gl: IWebGL2RenderingContext,
+    private readonly _terminal: Terminal,
+    private readonly _gl: IWebGL2RenderingContext,
     private _dimensions: IRenderDimensions
   ) {
     super();
 
     const gl = this._gl;
-    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource));
+
+    if (TextureAtlas.maxAtlasPages === undefined) {
+      // Typically 8 or 16
+      TextureAtlas.maxAtlasPages = throwIfFalsy(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS) as number | null);
+      // Almost all clients will support >= 4096
+      TextureAtlas.maxTextureSize = throwIfFalsy(gl.getParameter(gl.MAX_TEXTURE_SIZE) as number | null);
+    }
+
+    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, createFragmentShaderSource(TextureAtlas.maxAtlasPages)));
     this.register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
@@ -127,8 +146,9 @@ export class GlyphRenderer extends Disposable {
     gl.vertexAttribPointer(VertexAttribLocations.UNIT_QUAD, 2, this._gl.FLOAT, false, 0, 0);
 
     // Setup the unit quad element array buffer, this points to indices in
-    // unitQuadVertices to allow is to draw 2 triangles from the vertices
-    const unitQuadElementIndices = new Uint8Array([0, 1, 3, 0, 2, 3]);
+    // unitQuadVertices to allow is to draw 2 triangles from the vertices via a
+    // triangle strip
+    const unitQuadElementIndices = new Uint8Array([0, 1, 2, 3]);
     const elementIndicesBuffer = gl.createBuffer();
     this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementIndicesBuffer);
@@ -144,23 +164,41 @@ export class GlyphRenderer extends Disposable {
     gl.enableVertexAttribArray(VertexAttribLocations.SIZE);
     gl.vertexAttribPointer(VertexAttribLocations.SIZE, 2, gl.FLOAT, false, BYTES_PER_CELL, 2 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.SIZE, 1);
+    gl.enableVertexAttribArray(VertexAttribLocations.TEXPAGE);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXPAGE, 1, gl.FLOAT, false, BYTES_PER_CELL, 4 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribDivisor(VertexAttribLocations.TEXPAGE, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.TEXCOORD);
-    gl.vertexAttribPointer(VertexAttribLocations.TEXCOORD, 2, gl.FLOAT, false, BYTES_PER_CELL, 4 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXCOORD, 2, gl.FLOAT, false, BYTES_PER_CELL, 5 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.TEXCOORD, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.TEXSIZE);
-    gl.vertexAttribPointer(VertexAttribLocations.TEXSIZE, 2, gl.FLOAT, false, BYTES_PER_CELL, 6 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXSIZE, 2, gl.FLOAT, false, BYTES_PER_CELL, 7 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.TEXSIZE, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.CELL_POSITION);
-    gl.vertexAttribPointer(VertexAttribLocations.CELL_POSITION, 2, gl.FLOAT, false, BYTES_PER_CELL, 8 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.CELL_POSITION, 2, gl.FLOAT, false, BYTES_PER_CELL, 9 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.CELL_POSITION, 1);
 
-    // Setup empty texture atlas
-    this._atlasTexture = throwIfFalsy(gl.createTexture());
-    this.register(toDisposable(() => gl.deleteTexture(this._atlasTexture)));
-    gl.bindTexture(gl.TEXTURE_2D, this._atlasTexture);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255]));
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    // Setup static uniforms
+    gl.useProgram(this._program);
+    const textureUnits = new Int32Array(TextureAtlas.maxAtlasPages);
+    for (let i = 0; i < TextureAtlas.maxAtlasPages; i++) {
+      textureUnits[i] = i;
+    }
+    gl.uniform1iv(this._textureLocation, textureUnits);
+    gl.uniformMatrix4fv(this._projectionLocation, false, PROJECTION_MATRIX);
+
+    // Setup 1x1 red pixel textures for all potential atlas pages, if one of these invalid textures
+    // is ever drawn it will show characters as red rectangles.
+    this._atlasTextures = [];
+    for (let i = 0; i < TextureAtlas.maxAtlasPages; i++) {
+      const texture = throwIfFalsy(gl.createTexture());
+      this.register(toDisposable(() => gl.deleteTexture(texture)));
+      gl.activeTexture(gl.TEXTURE0 + i);
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255]));
+      this._atlasTextures[i] = texture;
+    }
 
     // Allow drawing of transparent texture
     gl.enable(gl.BLEND);
@@ -188,7 +226,7 @@ export class GlyphRenderer extends Disposable {
     // Exit early if this is a null character, allow space character to continue as it may have
     // underline/strikethrough styles
     if (code === NULL_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) {
-      fill(array, 0, $i, $i + INDICES_PER_CELL - 1 - CELL_POSITION_INDICES);
+      array.fill(0, $i, $i + INDICES_PER_CELL - 1 - CELL_POSITION_INDICES);
       return;
     }
 
@@ -203,34 +241,38 @@ export class GlyphRenderer extends Disposable {
       $glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext);
     }
 
-    $leftCellPadding = Math.floor((this._dimensions.scaledCellWidth - this._dimensions.scaledCharWidth) / 2);
+    $leftCellPadding = Math.floor((this._dimensions.device.cell.width - this._dimensions.device.char.width) / 2);
     if (bg !== lastBg && $glyph.offset.x > $leftCellPadding) {
       $clippedPixels = $glyph.offset.x - $leftCellPadding;
       // a_origin
-      array[$i    ] = -($glyph.offset.x - $clippedPixels) + this._dimensions.scaledCharLeft;
-      array[$i + 1] = -$glyph.offset.y + this._dimensions.scaledCharTop;
+      array[$i    ] = -($glyph.offset.x - $clippedPixels) + this._dimensions.device.char.left;
+      array[$i + 1] = -$glyph.offset.y + this._dimensions.device.char.top;
       // a_size
-      array[$i + 2] = ($glyph.size.x - $clippedPixels) / this._dimensions.scaledCanvasWidth;
-      array[$i + 3] = $glyph.size.y / this._dimensions.scaledCanvasHeight;
+      array[$i + 2] = ($glyph.size.x - $clippedPixels) / this._dimensions.device.canvas.width;
+      array[$i + 3] = $glyph.size.y / this._dimensions.device.canvas.height;
+      // a_texpage
+      array[$i + 4] = $glyph.texturePage;
       // a_texcoord
-      array[$i + 4] = $glyph.texturePositionClipSpace.x + $clippedPixels / this._atlas.cacheCanvas.width;
-      array[$i + 5] = $glyph.texturePositionClipSpace.y;
+      array[$i + 5] = $glyph.texturePositionClipSpace.x + $clippedPixels / this._atlas.pages[$glyph.texturePage].canvas.width;
+      array[$i + 6] = $glyph.texturePositionClipSpace.y;
       // a_texsize
-      array[$i + 6] = $glyph.sizeClipSpace.x - $clippedPixels / this._atlas.cacheCanvas.width;
-      array[$i + 7] = $glyph.sizeClipSpace.y;
+      array[$i + 7] = $glyph.sizeClipSpace.x - $clippedPixels / this._atlas.pages[$glyph.texturePage].canvas.width;
+      array[$i + 8] = $glyph.sizeClipSpace.y;
     } else {
       // a_origin
-      array[$i    ] = -$glyph.offset.x + this._dimensions.scaledCharLeft;
-      array[$i + 1] = -$glyph.offset.y + this._dimensions.scaledCharTop;
+      array[$i    ] = -$glyph.offset.x + this._dimensions.device.char.left;
+      array[$i + 1] = -$glyph.offset.y + this._dimensions.device.char.top;
       // a_size
-      array[$i + 2] = $glyph.size.x / this._dimensions.scaledCanvasWidth;
-      array[$i + 3] = $glyph.size.y / this._dimensions.scaledCanvasHeight;
+      array[$i + 2] = $glyph.size.x / this._dimensions.device.canvas.width;
+      array[$i + 3] = $glyph.size.y / this._dimensions.device.canvas.height;
+      // a_texpage
+      array[$i + 4] = $glyph.texturePage;
       // a_texcoord
-      array[$i + 4] = $glyph.texturePositionClipSpace.x;
-      array[$i + 5] = $glyph.texturePositionClipSpace.y;
+      array[$i + 5] = $glyph.texturePositionClipSpace.x;
+      array[$i + 6] = $glyph.texturePositionClipSpace.y;
       // a_texsize
-      array[$i + 6] = $glyph.sizeClipSpace.x;
-      array[$i + 7] = $glyph.sizeClipSpace.y;
+      array[$i + 7] = $glyph.sizeClipSpace.x;
+      array[$i + 8] = $glyph.sizeClipSpace.y;
     }
     // a_cellpos only changes on resize
   }
@@ -245,7 +287,8 @@ export class GlyphRenderer extends Disposable {
     } else {
       this._vertices.attributes.fill(0);
     }
-    for (let i = 0; i < this._vertices.attributesBuffers.length; i++) {
+    let i = 0;
+    for (; i < this._vertices.attributesBuffers.length; i++) {
       if (this._vertices.count !== newCount) {
         this._vertices.attributesBuffers[i] = new Float32Array(newCount);
       } else {
@@ -253,11 +296,11 @@ export class GlyphRenderer extends Disposable {
       }
     }
     this._vertices.count = newCount;
-    let i = 0;
+    i = 0;
     for (let y = 0; y < terminal.rows; y++) {
       for (let x = 0; x < terminal.cols; x++) {
-        this._vertices.attributes[i + 8] = x / terminal.cols;
-        this._vertices.attributes[i + 9] = y / terminal.rows;
+        this._vertices.attributes[i + 9] = x / terminal.cols;
+        this._vertices.attributes[i + 10] = y / terminal.rows;
         i += INDICES_PER_CELL;
       }
     }
@@ -266,6 +309,7 @@ export class GlyphRenderer extends Disposable {
   public handleResize(): void {
     const gl = this._gl;
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    gl.uniform2f(this._resolutionLocation, gl.canvas.width, gl.canvas.height);
     this.clear();
   }
 
@@ -302,30 +346,31 @@ export class GlyphRenderer extends Disposable {
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, activeBuffer.subarray(0, bufferLength), gl.STREAM_DRAW);
 
-    // Bind the texture atlas if it's changed
-    if (this._atlas.hasCanvasChanged) {
-      this._atlas.hasCanvasChanged = false;
-      gl.uniform1i(this._textureLocation, 0);
-      gl.activeTexture(gl.TEXTURE0 + 0);
-      gl.bindTexture(gl.TEXTURE_2D, this._atlasTexture);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._atlas.cacheCanvas);
-      gl.generateMipmap(gl.TEXTURE_2D);
+    // Bind the atlas page texture if they have changed
+    for (let i = 0; i < this._atlas.pages.length; i++) {
+      if (this._atlas.pages[i].hasCanvasChanged) {
+        this._atlas.pages[i].hasCanvasChanged = false;
+        this._bindAtlasPageTexture(gl, this._atlas, i);
+      }
     }
 
-    // Set uniforms
-    gl.uniformMatrix4fv(this._projectionLocation, false, PROJECTION_MATRIX);
-    gl.uniform2f(this._resolutionLocation, gl.canvas.width, gl.canvas.height);
-
     // Draw the viewport
-    gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_BYTE, 0, bufferLength / INDICES_PER_CELL);
+    gl.drawElementsInstanced(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_BYTE, 0, bufferLength / INDICES_PER_CELL);
   }
 
   public setAtlas(atlas: ITextureAtlas): void {
-    const gl = this._gl;
     this._atlas = atlas;
+    for (let i = 0; i < atlas.pages.length; i++) {
+      this._bindAtlasPageTexture(this._gl, atlas, i);
+    }
+  }
 
-    gl.bindTexture(gl.TEXTURE_2D, this._atlasTexture);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, atlas.cacheCanvas);
+  private _bindAtlasPageTexture(gl: IWebGL2RenderingContext, atlas: ITextureAtlas, i: number): void {
+    gl.activeTexture(gl.TEXTURE0 + i);
+    gl.bindTexture(gl.TEXTURE_2D, this._atlasTextures[i]);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, atlas.pages[i].canvas);
     gl.generateMipmap(gl.TEXTURE_2D);
   }
 

addons/xterm-addon-webgl/src/RectangleRenderer.ts

@@ -113,8 +113,9 @@ export class RectangleRenderer extends Disposable {
     gl.vertexAttribPointer(VertexAttribLocations.UNIT_QUAD, 2, this._gl.FLOAT, false, 0, 0);
 
     // Setup the unit quad element array buffer, this points to indices in
-    // unitQuadVertices to allow is to draw 2 triangles from the vertices
-    const unitQuadElementIndices = new Uint8Array([0, 1, 3, 0, 2, 3]);
+    // unitQuadVertices to allow is to draw 2 triangles from the vertices via a
+    // triangle strip
+    const unitQuadElementIndices = new Uint8Array([0, 1, 2, 3]);
     const elementIndicesBuffer = gl.createBuffer();
     this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementIndicesBuffer);
@@ -153,7 +154,7 @@ export class RectangleRenderer extends Disposable {
     // Bind attributes buffer and draw
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, this._vertices.attributes, gl.DYNAMIC_DRAW);
-    gl.drawElementsInstanced(this._gl.TRIANGLES, 6, gl.UNSIGNED_BYTE, 0, this._vertices.count);
+    gl.drawElementsInstanced(this._gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_BYTE, 0, this._vertices.count);
   }
 
   public handleResize(): void {
@@ -175,8 +176,8 @@ export class RectangleRenderer extends Disposable {
       0,
       0,
       0,
-      this._terminal.cols * this._dimensions.scaledCellWidth,
-      this._terminal.rows * this._dimensions.scaledCellHeight,
+      this._terminal.cols * this._dimensions.device.cell.width,
+      this._terminal.rows * this._dimensions.device.cell.height,
       this._bgFloat
     );
   }
@@ -264,21 +265,21 @@ export class RectangleRenderer extends Disposable {
     if (vertices.attributes.length < offset + 4) {
       vertices.attributes = expandFloat32Array(vertices.attributes, this._terminal.rows * this._terminal.cols * INDICES_PER_RECTANGLE);
     }
-    $x1 = startX * this._dimensions.scaledCellWidth;
-    $y1 = y * this._dimensions.scaledCellHeight;
+    $x1 = startX * this._dimensions.device.cell.width;
+    $y1 = y * this._dimensions.device.cell.height;
     $r = (($rgba >> 24) & 0xFF) / 255;
     $g = (($rgba >> 16) & 0xFF) / 255;
     $b = (($rgba >> 8 ) & 0xFF) / 255;
     $a = (!$isDefault && bg & BgFlags.DIM) ? DIM_OPACITY : 1;
 
-    this._addRectangle(vertices.attributes, offset, $x1, $y1, (endX - startX) * this._dimensions.scaledCellWidth, this._dimensions.scaledCellHeight, $r, $g, $b, $a);
+    this._addRectangle(vertices.attributes, offset, $x1, $y1, (endX - startX) * this._dimensions.device.cell.width, this._dimensions.device.cell.height, $r, $g, $b, $a);
   }
 
   private _addRectangle(array: Float32Array, offset: number, x1: number, y1: number, width: number, height: number, r: number, g: number, b: number, a: number): void {
-    array[offset    ] = x1 / this._dimensions.scaledCanvasWidth;
-    array[offset + 1] = y1 / this._dimensions.scaledCanvasHeight;
-    array[offset + 2] = width / this._dimensions.scaledCanvasWidth;
-    array[offset + 3] = height / this._dimensions.scaledCanvasHeight;
+    array[offset    ] = x1 / this._dimensions.device.canvas.width;
+    array[offset + 1] = y1 / this._dimensions.device.canvas.height;
+    array[offset + 2] = width / this._dimensions.device.canvas.width;
+    array[offset + 3] = height / this._dimensions.device.canvas.height;
     array[offset + 4] = r;
     array[offset + 5] = g;
     array[offset + 6] = b;
@@ -286,10 +287,10 @@ export class RectangleRenderer extends Disposable {
   }
 
   private _addRectangleFloat(array: Float32Array, offset: number, x1: number, y1: number, width: number, height: number, color: Float32Array): void {
-    array[offset    ] = x1 / this._dimensions.scaledCanvasWidth;
-    array[offset + 1] = y1 / this._dimensions.scaledCanvasHeight;
-    array[offset + 2] = width / this._dimensions.scaledCanvasWidth;
-    array[offset + 3] = height / this._dimensions.scaledCanvasHeight;
+    array[offset    ] = x1 / this._dimensions.device.canvas.width;
+    array[offset + 1] = y1 / this._dimensions.device.canvas.height;
+    array[offset + 2] = width / this._dimensions.device.canvas.width;
+    array[offset + 3] = height / this._dimensions.device.canvas.height;
     array[offset + 4] = color[0];
     array[offset + 5] = color[1];
     array[offset + 6] = color[2];

addons/xterm-addon-webgl/src/RenderModel.ts

@@ -4,7 +4,6 @@
  */
 
 import { IRenderModel } from './Types';
-import { fill } from 'common/TypedArrayUtils';
 import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
 import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
 
@@ -35,7 +34,7 @@ export class RenderModel implements IRenderModel {
   }
 
   public clear(): void {
-    fill(this.cells, 0, 0);
-    fill(this.lineLengths, 0, 0);
+    this.cells.fill(0, 0);
+    this.lineLengths.fill(0, 0);
   }
 }

addons/xterm-addon-webgl/src/WebglAddon.ts

@@ -3,21 +3,26 @@
  * @license MIT
  */
 
-import { Terminal, ITerminalAddon, IEvent } from 'xterm';
-import { WebglRenderer } from './WebglRenderer';
-import { ICharacterJoinerService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { IColorSet } from 'browser/Types';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { ITerminal } from 'browser/Types';
 import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { isSafari } from 'common/Platform';
-import { ICoreService, IDecorationService } from 'common/services/Services';
 import { Disposable, toDisposable } from 'common/Lifecycle';
+import { isSafari } from 'common/Platform';
+import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICoreTerminal } from 'common/Types';
+import { ITerminalAddon, Terminal } from 'xterm';
+import { WebglRenderer } from './WebglRenderer';
 
 export class WebglAddon extends Disposable implements ITerminalAddon {
   private _terminal?: Terminal;
   private _renderer?: WebglRenderer;
 
-  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLElement>());
+  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
   public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+  private readonly _onRemoveTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
   private readonly _onContextLoss = this.register(new EventEmitter<void>());
   public readonly onContextLoss = this._onContextLoss.event;
 
@@ -31,21 +36,40 @@ export class WebglAddon extends Disposable implements ITerminalAddon {
     if (isSafari) {
       throw new Error('Webgl is not currently supported on Safari');
     }
-    const core = (terminal as any)._core;
+
+    const core = (terminal as any)._core as ITerminal;
     if (!terminal.element) {
       this.register(core.onWillOpen(() => this.activate(terminal)));
       return;
     }
+
     this._terminal = terminal;
-    const renderService: IRenderService = core._renderService;
-    const characterJoinerService: ICharacterJoinerService = core._characterJoinerService;
-    const coreBrowserService: ICoreBrowserService = core._coreBrowserService;
     const coreService: ICoreService = core.coreService;
-    const decorationService: IDecorationService = core._decorationService;
-    const themeService: IThemeService = core._themeService;
-    this._renderer = this.register(new WebglRenderer(terminal, themeService, characterJoinerService, coreBrowserService, coreService, decorationService, this._preserveDrawingBuffer));
+    const optionsService: IOptionsService = core.optionsService;
+
+    const unsafeCore = core as any;
+    const renderService: IRenderService = unsafeCore._renderService;
+    const characterJoinerService: ICharacterJoinerService = unsafeCore._characterJoinerService;
+    const charSizeService: ICharSizeService = unsafeCore._charSizeService;
+    const coreBrowserService: ICoreBrowserService = unsafeCore._coreBrowserService;
+    const decorationService: IDecorationService = unsafeCore._decorationService;
+    const themeService: IThemeService = unsafeCore._themeService;
+
+    this._renderer = this.register(new WebglRenderer(
+      terminal,
+      characterJoinerService,
+      charSizeService,
+      coreBrowserService,
+      coreService,
+      decorationService,
+      optionsService,
+      themeService,
+      this._preserveDrawingBuffer
+    ));
     this.register(forwardEvent(this._renderer.onContextLoss, this._onContextLoss));
     this.register(forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
+    this.register(forwardEvent(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
+    this.register(forwardEvent(this._renderer.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas));
     renderService.setRenderer(this._renderer);
 
     this.register(toDisposable(() => {

addons/xterm-addon-webgl/src/WebglRenderer.ts

@@ -7,17 +7,19 @@ import { addDisposableDomListener } from 'browser/Lifecycle';
 import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
 import { acquireTextureAtlas, removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
 import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
+import { createRenderDimensions, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent, ITextureAtlas } from 'browser/renderer/shared/Types';
-import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { IColorSet, ITerminal, ReadonlyColorSet } from 'browser/Types';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { ITerminal } from 'browser/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { CellData } from 'common/buffer/CellData';
 import { Content, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable, toDisposable } from 'common/Lifecycle';
-import { ICoreService, IDecorationService } from 'common/services/Services';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
+import { Disposable, getDisposeArrayDisposable, toDisposable } from 'common/Lifecycle';
+import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { CharData, IBufferLine, ICellData } from 'common/Types';
-import { Terminal } from 'xterm';
+import { IDisposable, Terminal } from 'xterm';
 import { GlyphRenderer } from './GlyphRenderer';
 import { RectangleRenderer } from './RectangleRenderer';
 import { CursorRenderLayer } from './renderLayer/CursorRenderLayer';
@@ -28,6 +30,7 @@ import { IWebGL2RenderingContext } from './Types';
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
+  private _charAtlasDisposable: IDisposable | undefined;
   private _charAtlas: ITextureAtlas | undefined;
   private _devicePixelRatio: number;
 
@@ -40,7 +43,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
   private _rectangleRenderer!: RectangleRenderer;
   private _glyphRenderer!: GlyphRenderer;
 
-  public dimensions: IRenderDimensions;
+  public readonly dimensions: IRenderDimensions;
 
   private _core: ITerminal;
   private _isAttached: boolean;
@@ -48,6 +51,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
   public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+  private readonly _onRemoveTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
   private readonly _onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>());
   public readonly onRequestRedraw = this._onRequestRedraw.event;
   private readonly _onContextLoss = this.register(new EventEmitter<void>());
@@ -55,11 +62,13 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   constructor(
     private _terminal: Terminal,
-    private readonly _themeService: IThemeService,
     private readonly _characterJoinerService: ICharacterJoinerService,
+    private readonly _charSizeService: ICharSizeService,
     private readonly _coreBrowserService: ICoreBrowserService,
     coreService: ICoreService,
     private readonly _decorationService: IDecorationService,
+    optionsService: IOptionsService,
+    private readonly _themeService: IThemeService,
     preserveDrawingBuffer?: boolean
   ) {
     super();
@@ -72,24 +81,12 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     this._renderLayers = [
       new LinkRenderLayer(this._core.screenElement!, 2, this._terminal, this._core.linkifier2, this._coreBrowserService, this._themeService),
-      new CursorRenderLayer(_terminal, this._core.screenElement!, 3, this._onRequestRedraw, this._coreBrowserService, coreService, this._themeService)
+      new CursorRenderLayer(_terminal, this._core.screenElement!, 3, this._onRequestRedraw, this._coreBrowserService, coreService, this._themeService, optionsService)
     ];
-    this.dimensions = {
-      scaledCharWidth: 0,
-      scaledCharHeight: 0,
-      scaledCellWidth: 0,
-      scaledCellHeight: 0,
-      scaledCharLeft: 0,
-      scaledCharTop: 0,
-      scaledCanvasWidth: 0,
-      scaledCanvasHeight: 0,
-      canvasWidth: 0,
-      canvasHeight: 0,
-      actualCellWidth: 0,
-      actualCellHeight: 0
-    };
+    this.dimensions = createRenderDimensions();
     this._devicePixelRatio = this._coreBrowserService.dpr;
     this._updateDimensions();
+    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
 
     this._canvas = document.createElement('canvas');
 
@@ -144,7 +141,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
   }
 
   public get textureAtlas(): HTMLCanvasElement | undefined {
-    return this._charAtlas?.cacheCanvas;
+    return this._charAtlas?.pages[0].canvas;
   }
 
   private _handleColorChange(): void {
@@ -175,14 +172,14 @@ export class WebglRenderer extends Disposable implements IRenderer {
     }
 
     // Resize the canvas
-    this._canvas.width = this.dimensions.scaledCanvasWidth;
-    this._canvas.height = this.dimensions.scaledCanvasHeight;
-    this._canvas.style.width = `${this.dimensions.canvasWidth}px`;
-    this._canvas.style.height = `${this.dimensions.canvasHeight}px`;
+    this._canvas.width = this.dimensions.device.canvas.width;
+    this._canvas.height = this.dimensions.device.canvas.height;
+    this._canvas.style.width = `${this.dimensions.css.canvas.width}px`;
+    this._canvas.style.height = `${this.dimensions.css.canvas.height}px`;
 
     // Resize the screen
-    this._core.screenElement!.style.width = `${this.dimensions.canvasWidth}px`;
-    this._core.screenElement!.style.height = `${this.dimensions.canvasHeight}px`;
+    this._core.screenElement!.style.width = `${this.dimensions.css.canvas.width}px`;
+    this._core.screenElement!.style.height = `${this.dimensions.css.canvas.height}px`;
 
     this._rectangleRenderer.setDimensions(this.dimensions);
     this._rectangleRenderer.handleResize();
@@ -230,10 +227,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     }
   }
 
-  public handleOptionsChanged(): void {
-    for (const l of this._renderLayers) {
-      l.handleOptionsChanged(this._terminal);
-    }
+  private _handleOptionsChanged(): void {
     this._updateDimensions();
     this._refreshCharAtlas();
   }
@@ -255,19 +249,31 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   /**
    * Refreshes the char atlas, aquiring a new one if necessary.
-   * @param terminal The terminal.
-   * @param colorSet The color set to use for the char atlas.
    */
   private _refreshCharAtlas(): void {
-    if (this.dimensions.scaledCharWidth <= 0 && this.dimensions.scaledCharHeight <= 0) {
+    if (this.dimensions.device.char.width <= 0 && this.dimensions.device.char.height <= 0) {
       // Mark as not attached so char atlas gets refreshed on next render
       this._isAttached = false;
       return;
     }
 
-    const atlas = acquireTextureAtlas(this._terminal, this._themeService.colors, this.dimensions.scaledCellWidth, this.dimensions.scaledCellHeight, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight, this._coreBrowserService.dpr);
+    const atlas = acquireTextureAtlas(
+      this._terminal,
+      this._themeService.colors,
+      this.dimensions.device.cell.width,
+      this.dimensions.device.cell.height,
+      this.dimensions.device.char.width,
+      this.dimensions.device.char.height,
+      this._coreBrowserService.dpr
+    );
     if (this._charAtlas !== atlas) {
-      this._onChangeTextureAtlas.fire(atlas.cacheCanvas);
+
+      this._charAtlasDisposable?.dispose();
+      this._onChangeTextureAtlas.fire(atlas.pages[0].canvas);
+      this._charAtlasDisposable = getDisposeArrayDisposable([
+        forwardEvent(atlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas),
+        forwardEvent(atlas.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas)
+      ]);
     }
     this._charAtlas = atlas;
     this._charAtlas.warmUp();
@@ -309,7 +315,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   public renderRows(start: number, end: number): void {
     if (!this._isAttached) {
-      if (this._coreBrowserService.window.document.body.contains(this._core.screenElement!) && (this._core as any)._charSizeService.width && (this._core as any)._charSizeService.height) {
+      if (this._coreBrowserService.window.document.body.contains(this._core.screenElement!) && this._charSizeService.width && this._charSizeService.height) {
         this._updateDimensions();
         this._refreshCharAtlas();
         this._isAttached = true;
@@ -326,7 +332,6 @@ export class WebglRenderer extends Disposable implements IRenderer {
     // Tell renderer the frame is beginning
     if (this._glyphRenderer.beginFrame()) {
       this._clearModel(true);
-      this._model.selection.clear();
     }
 
     // Update model to reflect what's drawn
@@ -447,64 +452,62 @@ export class WebglRenderer extends Disposable implements IRenderer {
    * Recalculates the character and canvas dimensions.
    */
   private _updateDimensions(): void {
-    // TODO: Acquire CharSizeService properly
-
     // Perform a new measure if the CharMeasure dimensions are not yet available
-    if (!(this._core as any)._charSizeService.width || !(this._core as any)._charSizeService.height) {
+    if (!this._charSizeService.width || !this._charSizeService.height) {
       return;
     }
 
-    // Calculate the scaled character width. Width is floored as it must be drawn to an integer grid
+    // Calculate the device character width. Width is floored as it must be drawn to an integer grid
     // in order for the char atlas glyphs to not be blurry.
-    this.dimensions.scaledCharWidth = Math.floor((this._core as any)._charSizeService.width * this._devicePixelRatio);
+    this.dimensions.device.char.width = Math.floor(this._charSizeService.width * this._devicePixelRatio);
 
-    // Calculate the scaled character height. Height is ceiled in case devicePixelRatio is a
+    // Calculate the device character height. Height is ceiled in case devicePixelRatio is a
     // floating point number in order to ensure there is enough space to draw the character to the
     // cell.
-    this.dimensions.scaledCharHeight = Math.ceil((this._core as any)._charSizeService.height * this._devicePixelRatio);
+    this.dimensions.device.char.height = Math.ceil(this._charSizeService.height * this._devicePixelRatio);
 
-    // Calculate the scaled cell height, if lineHeight is _not_ 1, the resulting value will be
-    // floored since lineHeight can never be lower then 1, this guarentees the scaled cell height
-    // will always be larger than scaled char height.
-    this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._terminal.options.lineHeight);
+    // Calculate the device cell height, if lineHeight is _not_ 1, the resulting value will be
+    // floored since lineHeight can never be lower then 1, this guarentees the device cell height
+    // will always be larger than device char height.
+    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._terminal.options.lineHeight);
 
     // Calculate the y offset within a cell that glyph should draw at in order for it to be centered
     // correctly within the cell.
-    this.dimensions.scaledCharTop = this._terminal.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledCellHeight - this.dimensions.scaledCharHeight) / 2);
+    this.dimensions.device.char.top = this._terminal.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
 
-    // Calculate the scaled cell width, taking the letterSpacing into account.
-    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._terminal.options.letterSpacing);
+    // Calculate the device cell width, taking the letterSpacing into account.
+    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._terminal.options.letterSpacing);
 
     // Calculate the x offset with a cell that text should draw from in order for it to be centered
     // correctly within the cell.
-    this.dimensions.scaledCharLeft = Math.floor(this._terminal.options.letterSpacing / 2);
+    this.dimensions.device.char.left = Math.floor(this._terminal.options.letterSpacing / 2);
 
-    // Recalculate the canvas dimensions, the scaled dimensions define the actual number of pixel in
+    // Recalculate the canvas dimensions, the device dimensions define the actual number of pixel in
     // the canvas
-    this.dimensions.scaledCanvasHeight = this._terminal.rows * this.dimensions.scaledCellHeight;
-    this.dimensions.scaledCanvasWidth = this._terminal.cols * this.dimensions.scaledCellWidth;
+    this.dimensions.device.canvas.height = this._terminal.rows * this.dimensions.device.cell.height;
+    this.dimensions.device.canvas.width = this._terminal.cols * this.dimensions.device.cell.width;
 
     // The the size of the canvas on the page. It's important that this rounds to nearest integer
     // and not ceils as browsers often have floating point precision issues where
     // `window.devicePixelRatio` ends up being something like `1.100000023841858` for example, when
     // it's actually 1.1. Ceiling may causes blurriness as the backing canvas image is 1 pixel too
     // large for the canvas element size.
-    this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / this._devicePixelRatio);
-    this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / this._devicePixelRatio);
+    this.dimensions.css.canvas.height = Math.round(this.dimensions.device.canvas.height / this._devicePixelRatio);
+    this.dimensions.css.canvas.width = Math.round(this.dimensions.device.canvas.width / this._devicePixelRatio);
 
     // Get the CSS dimensions of an individual cell. This needs to be derived from the calculated
     // device pixel canvas value above. CharMeasure.width/height by itself is insufficient when the
     // page is not at 100% zoom level as CharMeasure is measured in CSS pixels, but the actual char
     // size on the canvas can differ.
-    this.dimensions.actualCellHeight = this.dimensions.scaledCellHeight / this._devicePixelRatio;
-    this.dimensions.actualCellWidth = this.dimensions.scaledCellWidth / this._devicePixelRatio;
+    this.dimensions.css.cell.height = this.dimensions.device.cell.height / this._devicePixelRatio;
+    this.dimensions.css.cell.width = this.dimensions.device.cell.width / this._devicePixelRatio;
   }
 
   private _setCanvasDevicePixelDimensions(width: number, height: number): void {
     if (this._canvas.width === width && this._canvas.height === height) {
       return;
     }
-    // While the actual canvas size has changed, keep scaledCanvasWidth/Height as the value before
+    // While the actual canvas size has changed, keep device canvas dimensions as the value before
     // the change as it's an exact multiple of the cell sizes.
     this._canvas.width = width;
     this._canvas.height = height;

addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts

@@ -17,12 +17,12 @@ import { Disposable, toDisposable } from 'common/Lifecycle';
 export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
   protected _ctx!: CanvasRenderingContext2D;
-  private _scaledCharWidth: number = 0;
-  private _scaledCharHeight: number = 0;
-  private _scaledCellWidth: number = 0;
-  private _scaledCellHeight: number = 0;
-  private _scaledCharLeft: number = 0;
-  private _scaledCharTop: number = 0;
+  private _deviceCharWidth: number = 0;
+  private _deviceCharHeight: number = 0;
+  private _deviceCellWidth: number = 0;
+  private _deviceCellHeight: number = 0;
+  private _deviceCharLeft: number = 0;
+  private _deviceCharTop: number = 0;
 
   protected _charAtlas: ITextureAtlas | undefined;
 
@@ -59,7 +59,6 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     }
   }
 
-  public handleOptionsChanged(terminal: Terminal): void {}
   public handleBlur(terminal: Terminal): void {}
   public handleFocus(terminal: Terminal): void {}
   public handleCursorMove(terminal: Terminal): void {}
@@ -91,24 +90,24 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    * @param colorSet The color set to use for the char atlas.
    */
   private _refreshCharAtlas(terminal: Terminal, colorSet: ReadonlyColorSet): void {
-    if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
+    if (this._deviceCharWidth <= 0 && this._deviceCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireTextureAtlas(terminal, colorSet, this._scaledCellWidth, this._scaledCellHeight, this._scaledCharWidth, this._scaledCharHeight, this._coreBrowserService.dpr);
+    this._charAtlas = acquireTextureAtlas(terminal, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
     this._charAtlas.warmUp();
   }
 
   public resize(terminal: Terminal, dim: IRenderDimensions): void {
-    this._scaledCellWidth = dim.scaledCellWidth;
-    this._scaledCellHeight = dim.scaledCellHeight;
-    this._scaledCharWidth = dim.scaledCharWidth;
-    this._scaledCharHeight = dim.scaledCharHeight;
-    this._scaledCharLeft = dim.scaledCharLeft;
-    this._scaledCharTop = dim.scaledCharTop;
-    this._canvas.width = dim.scaledCanvasWidth;
-    this._canvas.height = dim.scaledCanvasHeight;
-    this._canvas.style.width = `${dim.canvasWidth}px`;
-    this._canvas.style.height = `${dim.canvasHeight}px`;
+    this._deviceCellWidth = dim.device.cell.width;
+    this._deviceCellHeight = dim.device.cell.height;
+    this._deviceCharWidth = dim.device.char.width;
+    this._deviceCharHeight = dim.device.char.height;
+    this._deviceCharLeft = dim.device.char.left;
+    this._deviceCharTop = dim.device.char.top;
+    this._canvas.width = dim.device.canvas.width;
+    this._canvas.height = dim.device.canvas.height;
+    this._canvas.style.width = `${dim.css.canvas.width}px`;
+    this._canvas.style.height = `${dim.css.canvas.height}px`;
 
     // Draw the background if this is an opaque layer
     if (!this._alpha) {
@@ -129,10 +128,10 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _fillCells(x: number, y: number, width: number, height: number): void {
     this._ctx.fillRect(
-      x * this._scaledCellWidth,
-      y * this._scaledCellHeight,
-      width * this._scaledCellWidth,
-      height * this._scaledCellHeight);
+      x * this._deviceCellWidth,
+      y * this._deviceCellHeight,
+      width * this._deviceCellWidth,
+      height * this._deviceCellHeight);
   }
 
   /**
@@ -143,9 +142,9 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
     this._ctx.fillRect(
-      x * this._scaledCellWidth,
-      (y + 1) * this._scaledCellHeight - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
-      width * this._scaledCellWidth,
+      x * this._deviceCellWidth,
+      (y + 1) * this._deviceCellHeight - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
+      width * this._deviceCellWidth,
       this._coreBrowserService.dpr);
   }
 
@@ -157,10 +156,10 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
     this._ctx.fillRect(
-      x * this._scaledCellWidth,
-      y * this._scaledCellHeight,
+      x * this._deviceCellWidth,
+      y * this._deviceCellHeight,
       this._coreBrowserService.dpr * width,
-      this._scaledCellHeight);
+      this._deviceCellHeight);
   }
 
   /**
@@ -172,10 +171,10 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
   protected _strokeRectAtCell(x: number, y: number, width: number, height: number): void {
     this._ctx.lineWidth = this._coreBrowserService.dpr;
     this._ctx.strokeRect(
-      x * this._scaledCellWidth + this._coreBrowserService.dpr / 2,
-      y * this._scaledCellHeight + (this._coreBrowserService.dpr / 2),
-      width * this._scaledCellWidth - this._coreBrowserService.dpr,
-      (height * this._scaledCellHeight) - this._coreBrowserService.dpr);
+      x * this._deviceCellWidth + this._coreBrowserService.dpr / 2,
+      y * this._deviceCellHeight + (this._coreBrowserService.dpr / 2),
+      width * this._deviceCellWidth - this._coreBrowserService.dpr,
+      (height * this._deviceCellHeight) - this._coreBrowserService.dpr);
   }
 
   /**
@@ -200,17 +199,17 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
   protected _clearCells(x: number, y: number, width: number, height: number): void {
     if (this._alpha) {
       this._ctx.clearRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        width * this._scaledCellWidth,
-        height * this._scaledCellHeight);
+        x * this._deviceCellWidth,
+        y * this._deviceCellHeight,
+        width * this._deviceCellWidth,
+        height * this._deviceCellHeight);
     } else {
       this._ctx.fillStyle = this._themeService.colors.background.css;
       this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        width * this._scaledCellWidth,
-        height * this._scaledCellHeight);
+        x * this._deviceCellWidth,
+        y * this._deviceCellHeight,
+        width * this._deviceCellWidth,
+        height * this._deviceCellHeight);
     }
   }
 
@@ -222,7 +221,6 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    * @param cell The cell data for the character to draw.
    * @param x The column to draw at.
    * @param y The row to draw at.
-   * @param color The color of the character.
    */
   protected _fillCharTrueColor(terminal: Terminal, cell: CellData, x: number, y: number): void {
     this._ctx.font = this._getFont(terminal, false, false);
@@ -230,8 +228,8 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     this._clipCell(x, y, cell.getWidth());
     this._ctx.fillText(
       cell.getChars(),
-      x * this._scaledCellWidth + this._scaledCharLeft,
-      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+      x * this._deviceCellWidth + this._deviceCharLeft,
+      y * this._deviceCellHeight + this._deviceCharTop + this._deviceCharHeight);
   }
 
   /**
@@ -243,10 +241,10 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
   private _clipCell(x: number, y: number, width: number): void {
     this._ctx.beginPath();
     this._ctx.rect(
-      x * this._scaledCellWidth,
-      y * this._scaledCellHeight,
-      width * this._scaledCellWidth,
-      this._scaledCellHeight);
+      x * this._deviceCellWidth,
+      y * this._deviceCellHeight,
+      width * this._deviceCellWidth,
+      this._deviceCellHeight);
     this._ctx.clip();
   }
 

addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts

@@ -7,11 +7,10 @@ import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
-import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
 import { IEventEmitter } from 'common/EventEmitter';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { ICoreService } from 'common/services/Services';
+import { ICoreService, IOptionsService } from 'common/services/Services';
 import { toDisposable } from 'common/Lifecycle';
 
 interface ICursorState {
@@ -40,7 +39,8 @@ export class CursorRenderLayer extends BaseRenderLayer {
     private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRedrawEvent>,
     coreBrowserService: ICoreBrowserService,
     private readonly _coreService: ICoreService,
-    themeService: IThemeService
+    themeService: IThemeService,
+    optionsService: IOptionsService
   ) {
     super(terminal, container, 'cursor', zIndex, true, coreBrowserService, themeService);
     this._state = {
@@ -55,7 +55,8 @@ export class CursorRenderLayer extends BaseRenderLayer {
       'block': this._renderBlockCursor.bind(this),
       'underline': this._renderUnderlineCursor.bind(this)
     };
-    this.handleOptionsChanged(terminal);
+    this._handleOptionsChanged(terminal);
+    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged(terminal)));
     this.register(toDisposable(() => {
       this._cursorBlinkStateManager?.dispose();
       this._cursorBlinkStateManager = undefined;
@@ -77,7 +78,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   public reset(terminal: Terminal): void {
     this._clearCursor();
     this._cursorBlinkStateManager?.restartBlinkAnimation(terminal);
-    this.handleOptionsChanged(terminal);
+    this._handleOptionsChanged(terminal);
   }
 
   public handleBlur(terminal: Terminal): void {
@@ -90,7 +91,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.active.cursorY, end: terminal.buffer.active.cursorY });
   }
 
-  public handleOptionsChanged(terminal: Terminal): void {
+  private _handleOptionsChanged(terminal: Terminal): void {
     if (terminal.options.cursorBlink) {
       if (!this._cursorBlinkStateManager) {
         this._cursorBlinkStateManager = new CursorBlinkStateManager(() => {

addons/xterm-addon-webgl/src/renderLayer/LinkRenderLayer.ts

@@ -7,7 +7,7 @@ import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { ILinkifier2, ILinkifierEvent, ITerminal } from 'browser/Types';
+import { ILinkifier2, ILinkifierEvent } from 'browser/Types';
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 

addons/xterm-addon-webgl/src/renderLayer/Types.ts

@@ -4,7 +4,6 @@
  */
 
 import { IDisposable, Terminal } from 'xterm';
-import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 
 export interface IRenderLayer extends IDisposable {
@@ -14,7 +13,7 @@ export interface IRenderLayer extends IDisposable {
   handleBlur(terminal: Terminal): void;
 
   /**
-   * * Called when the terminal gets focus.
+   * Called when the terminal gets focus.
    */
   handleFocus(terminal: Terminal): void;
 
@@ -23,11 +22,6 @@ export interface IRenderLayer extends IDisposable {
    */
   handleCursorMove(terminal: Terminal): void;
 
-  /**
-   * Called when options change.
-   */
-  handleOptionsChanged(terminal: Terminal): void;
-
   /**
    * Called when the data in the grid has changed (or needs to be rendered
    * again).

addons/xterm-addon-webgl/test/WebglRenderer.api.ts

@@ -992,8 +992,8 @@ async function getCellColor(col: number, row: number): Promise<number[]> {
     window.result = new Uint8Array(4);
     window.d = window.term._core._renderService.dimensions;
     window.gl.readPixels(
-      Math.floor((${col - 0.5}) * window.d.scaledCellWidth),
-      Math.floor(window.gl.drawingBufferHeight - 1 - (${row - 0.5}) * window.d.scaledCellHeight),
+      Math.floor((${col - 0.5}) * window.d.device.cell.width),
+      Math.floor(window.gl.drawingBufferHeight - 1 - (${row - 0.5}) * window.d.device.cell.height),
       1, 1, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result
     );
   `);
@@ -1003,12 +1003,12 @@ async function getCellColor(col: number, row: number): Promise<number[]> {
 async function getCellPixels(col: number, row: number): Promise<number[]> {
   await page.evaluate(`
     window.gl = window.term._core._renderService._renderer._gl;
-    window.result = new Uint8Array(window.d.scaledCellWidth * window.d.scaledCellHeight * 4);
+    window.result = new Uint8Array(window.d.device.cell.width * window.d.device.cell.height * 4);
     window.d = window.term._core._renderService.dimensions;
     window.gl.readPixels(
-      Math.floor(${col - 1} * window.d.scaledCellWidth),
-      Math.floor(window.gl.drawingBufferHeight - ${row} * window.d.scaledCellHeight),
-      window.d.scaledCellWidth, window.d.scaledCellHeight, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result
+      Math.floor(${col - 1} * window.d.device.cell.width),
+      Math.floor(window.gl.drawingBufferHeight - ${row} * window.d.device.cell.height),
+      window.d.device.cell.width, window.d.device.cell.height, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result
     );
   `);
   return await page.evaluate(`Array.from(window.result)`);

addons/xterm-addon-webgl/typings/xterm-addon-webgl.d.ts

@@ -22,6 +22,11 @@ declare module 'xterm-addon-webgl' {
      */
     public readonly onChangeTextureAtlas: IEvent<HTMLCanvasElement>;
 
+    /**
+     * An event that is fired when the a new page is added to the texture atlas.
+     */
+    public readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+
     constructor(preserveDrawingBuffer?: boolean);
 
     /**

azure-pipelines.yml

@@ -9,7 +9,7 @@ trigger:
 jobs:
 - job: Linux
   pool:
-    vmImage: 'ubuntu-18.04'
+    vmImage: 'ubuntu-20.04'
   steps:
   - task: NodeTool@0
     inputs:

demo/client.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 /**
  * Copyright (c) 2018 The xterm.js authors. All rights reserved.
  * @license MIT
@@ -218,6 +219,8 @@ if (document.location.pathname === '/test') {
   document.getElementById('htmlserialize').addEventListener('click', htmlSerializeButtonHandler);
   document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler);
   document.getElementById('load-test').addEventListener('click', loadTest);
+  document.getElementById('print-cjk').addEventListener('click', addCjk);
+  document.getElementById('print-cjk-sgr').addEventListener('click', addCjkRandomSgr);
   document.getElementById('powerline-symbol-test').addEventListener('click', powerlineSymbolTest);
   document.getElementById('underline-test').addEventListener('click', underlineTest);
   document.getElementById('ansi-colors').addEventListener('click', ansiColorsTest);
@@ -248,8 +251,7 @@ function createTerminal(): void {
   addons.fit.instance = new FitAddon();
   addons.unicode11.instance = new Unicode11Addon();
   addons.webgl.instance = new WebglAddon();
-  // TODO: Remove arguments when link provider API is the default
-  addons['web-links'].instance = new WebLinksAddon(undefined, undefined, true);
+  addons['web-links'].instance = new WebLinksAddon();
   typedTerm.loadAddon(addons.fit.instance);
   typedTerm.loadAddon(addons.search.instance);
   typedTerm.loadAddon(addons.serialize.instance);
@@ -274,8 +276,10 @@ function createTerminal(): void {
   typedTerm.loadAddon(addons.webgl.instance);
   setTimeout(() => {
     if (addons.webgl.instance !== undefined) {
-      addTextureAtlas(addons.webgl.instance.textureAtlas);
-      addons.webgl.instance.onChangeTextureAtlas(e => addTextureAtlas(e));
+      setTextureAtlas(addons.webgl.instance.textureAtlas);
+      addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
+      addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
+      addons.webgl.instance.onRemoveTextureAtlasCanvas(e => removeTextureAtlas(e));
     }
   }, 0);
 
@@ -303,7 +307,7 @@ function createTerminal(): void {
   });
 
   // fit is called within a setTimeout, cols and rows need this.
-  setTimeout(() => {
+  setTimeout(async () => {
     initOptions(term);
     // TODO: Clean this up, opt-cols/rows doesn't exist anymore
     (document.getElementById(`opt-cols`) as HTMLInputElement).value = term.cols;
@@ -313,16 +317,14 @@ function createTerminal(): void {
     // Set terminal size again to set the specific dimensions on the demo
     updateTerminalSize();
 
-    fetch('/terminals?cols=' + term.cols + '&rows=' + term.rows, { method: 'POST' }).then((res) => {
-      res.text().then((processId) => {
-        pid = processId;
-        socketURL += processId;
-        socket = new WebSocket(socketURL);
-        socket.onopen = runRealTerminal;
-        socket.onclose = runFakeTerminal;
-        socket.onerror = runFakeTerminal;
-      });
-    });
+    const res = await fetch('/terminals?cols=' + term.cols + '&rows=' + term.rows, { method: 'POST' });
+    const processId = await res.text();
+    pid = processId;
+    socketURL += processId;
+    socket = new WebSocket(socketURL);
+    socket.onopen = runRealTerminal;
+    socket.onclose = runFakeTerminal;
+    socket.onerror = runFakeTerminal;
   }, 0);
 }
 
@@ -552,13 +554,15 @@ function initAddons(term: TerminalType): void {
           term.loadAddon(addon.instance);
           if (name === 'webgl') {
             setTimeout(() => {
-              addTextureAtlas(addons.webgl.instance.textureAtlas);
-              addons.webgl.instance.onChangeTextureAtlas(e => addTextureAtlas(e));
+              setTextureAtlas(addons.webgl.instance.textureAtlas);
+              addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
+              addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
             }, 0);
           } else if (name === 'canvas') {
             setTimeout(() => {
-              addTextureAtlas(addons.canvas.instance.textureAtlas);
-              addons.canvas.instance.onChangeTextureAtlas(e => addTextureAtlas(e));
+              setTextureAtlas(addons.canvas.instance.textureAtlas);
+              addons.canvas.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
+              addons.canvas.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
             }, 0);
           } else if (name === 'unicode11') {
             term.unicode.activeVersion = '11';
@@ -616,10 +620,8 @@ function addDomListener(element: HTMLElement, type: string, handler: (...args: a
 }
 
 function updateTerminalSize(): void {
-  const cols = parseInt((document.getElementById(`opt-cols`) as HTMLInputElement).value, 10);
-  const rows = parseInt((document.getElementById(`opt-rows`) as HTMLInputElement).value, 10);
-  const width = (cols * term._core._renderService.dimensions.actualCellWidth + term._core.viewport.scrollBarWidth).toString() + 'px';
-  const height = (rows * term._core._renderService.dimensions.actualCellHeight).toString() + 'px';
+  const width = (term._core._renderService.dimensions.css.canvas.width + term._core.viewport.scrollBarWidth).toString() + 'px';
+  const height = (term._core._renderService.dimensions.css.canvas.height).toString() + 'px';
   terminalContainer.style.width = width;
   terminalContainer.style.height = height;
   addons.fit.instance.fit();
@@ -651,9 +653,21 @@ function htmlSerializeButtonHandler(): void {
   document.getElementById('htmlserialize-output-result').innerText = 'Copied to clipboard';
 }
 
-function addTextureAtlas(e: HTMLCanvasElement): void {
+function setTextureAtlas(e: HTMLCanvasElement): void {
+  styleAtlasPage(e);
   document.querySelector('#texture-atlas').replaceChildren(e);
 }
+function appendTextureAtlas(e: HTMLCanvasElement): void {
+  styleAtlasPage(e);
+  document.querySelector('#texture-atlas').appendChild(e);
+}
+function removeTextureAtlas(e: HTMLCanvasElement): void {
+  e.remove();
+}
+function styleAtlasPage(e: HTMLCanvasElement): void {
+  e.style.width = `${e.width / window.devicePixelRatio}px`;
+  e.style.height = `${e.height / window.devicePixelRatio}px`;
+}
 
 function writeCustomGlyphHandler(): void {
   term.write('\n\r');
@@ -697,6 +711,7 @@ function writeCustomGlyphHandler(): void {
   term.write('  ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎\n\r');
   term.write('  ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏\n\r');
   term.write('  ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█\n\r');
+  term.write('\x1b[0m');
   window.scrollTo(0, 0);
 }
 
@@ -968,6 +983,35 @@ function addAnsiHyperlink(): void {
   term.write('\x1b[3A\x1b[1C\x1b]8;;https://xtermjs.org\x07xter\x1b[B\x1b[4Dm.js\x1b]8;;\x07\x1b[2B\x1b[5D');
 }
 
+/**
+ * Prints the 20977 characters from the CJK Unified Ideographs unicode block.
+ */
+function addCjk(): void {
+  term.write('\n\n\r');
+  for (let i = 0x4E00; i < 0x9FCC; i++) {
+    term.write(String.fromCharCode(i));
+  }
+}
+
+/**
+ * Prints the 20977 characters from the CJK Unified Ideographs unicode block with randomized styles.
+ */
+function addCjkRandomSgr(): void {
+  term.write('\n\n\r');
+  for (let i = 0x4E00; i < 0x9FCC; i++) {
+    term.write(`\x1b[${getRandomSgr()}m${String.fromCharCode(i)}\x1b[0m`);
+  }
+}
+const randomSgrAttributes = [
+  '1', '2', '3', '4', '5', '6', '7', '9',
+  '21', '22', '23', '24', '25', '26', '27', '28', '29',
+  '30', '31', '32', '33', '34', '35', '36', '37', '38', '39',
+  '40', '41', '42', '43', '44', '45', '46', '47', '48', '49'
+];
+function getRandomSgr(): string {
+  return randomSgrAttributes[Math.floor(Math.random() * randomSgrAttributes.length)];
+}
+
 function addDecoration(): void {
   term.options['overviewRulerWidth'] = 15;
   const marker = term.registerMarker(1);
@@ -995,3 +1039,33 @@ function addOverviewRuler(): void {
   term.registerDecoration({ marker: term.registerMarker(10), overviewRulerOptions: { color: '#ffffff80', position: 'full' } });
 }
 
+(console as any).image = (source: ImageData | HTMLCanvasElement, scale: number = 1) => {
+  function getBox(width: number, height: number): any {
+    return {
+      string: '+',
+      style: 'font-size: 1px; padding: ' + Math.floor(height/2) + 'px ' + Math.floor(width/2) + 'px; line-height: ' + height + 'px;'
+    };
+  }
+  if (source instanceof HTMLCanvasElement) {
+    source = source.getContext('2d')?.getImageData(0, 0, source.width, source.height)!;
+  }
+  const canvas = document.createElement('canvas');
+  canvas.width = source.width;
+  canvas.height = source.height;
+  const ctx = canvas.getContext('2d')!;
+  ctx.putImageData(source, 0, 0);
+
+  const sw = source.width * scale;
+  const sh = source.height * scale;
+  const dim = getBox(sw, sh);
+  console.log(
+    `Image: ${source.width} x ${source.height}\n%c${dim.string}`,
+    `${dim.style}background: url(${canvas.toDataURL()}); background-size: ${sw}px ${sh}px; background-repeat: no-repeat; color: transparent;`
+  );
+  console.groupCollapsed('Zoomed');
+  console.log(
+    `%c${dim.string}`,
+    `${getBox(sw * 10, sh * 10).style}background: url(${canvas.toDataURL()}); background-size: ${sw * 10}px ${sh * 10}px; background-repeat: no-repeat; color: transparent; image-rendering: pixelated;-ms-interpolation-mode: nearest-neighbor;`
+  );
+  console.groupEnd();
+};

demo/index.html

@@ -10,8 +10,6 @@
     <link rel="shortcut icon" type="image/png" href="/logo.png">
     <link rel="stylesheet" href="/xterm.css" />
     <link rel="stylesheet" href="/style.css" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js" integrity="sha384-kM3+BR0fKGmv8mDasMGLSHdqcbgWHUNWV1rAL+tkqnH578xS82vhlu9gR5BHhBai" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js" integrity="sha384-bR8my2pcqqtUkMMTomrgTyDVACSJz1M9D70XdkeK2BaYbCYxG3CfngYdSAOcPkUZ" crossorigin="anonymous"></script>
   </head>
   <body>
     <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
@@ -74,6 +72,8 @@
 
               <dt>Performance</dt>
               <dd><button id="load-test" title="Write several MB of data to simulate a lot of data coming from the process">Load test</button></dd>
+              <dd><button id="print-cjk" title="Prints the 20977 characters from the CJK Unified Ideographs unicode block">CJK Unified Ideographs</button></dd>
+              <dd><button id="print-cjk-sgr" title="Prints the 20977 characters from the CJK Unified Ideographs unicode block with randomized SGR attributes">CJK Unified Ideographs (random SGR)</button></dd>
 
               <dt>Styles</dt>
               <dd><button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button></dd>
@@ -91,6 +91,8 @@
         </div>
       </div>
     </div>
+    <input type="checkbox" id="texture-atlas-zoom"/>
+    <label for="texture-atlas-zoom">Zoom texture atlas</label>
     <div id="texture-atlas"></div>
       <script src="dist/client-bundle.js" defer ></script>
       <script>

demo/server.js

@@ -16,7 +16,9 @@ function startServer() {
   var app = express();
   expressWs(app);
 
-  var terminals = {};
+  var terminals = {},
+    unsentOutput = {},
+    temporaryDisposable = {};
 
   app.use('/xterm.css', express.static(__dirname + '/../css/xterm.css'));
   app.get('/logo.png', (req, res) => {
@@ -43,7 +45,7 @@ function startServer() {
     env['COLORTERM'] = 'truecolor';
     var cols = parseInt(req.query.cols),
       rows = parseInt(req.query.rows),
-      term = pty.spawn(process.platform === 'win32' ? 'cmd.exe' : 'bash', [], {
+      term = pty.spawn(process.platform === 'win32' ? 'pwsh.exe' : 'bash', [], {
         name: 'xterm-256color',
         cols: cols || 80,
         rows: rows || 24,
@@ -54,6 +56,10 @@ function startServer() {
 
     console.log('Created terminal with PID: ' + term.pid);
     terminals[term.pid] = term;
+    unsentOutput[term.pid] = '';
+    temporaryDisposable[term.pid] = term.onData(function(data) {
+      unsentOutput[term.pid] += data;
+    });
     res.send(term.pid.toString());
     res.end();
   });
@@ -72,6 +78,10 @@ function startServer() {
   app.ws('/terminals/:pid', function (ws, req) {
     var term = terminals[parseInt(req.params.pid)];
     console.log('Connected to terminal ' + term.pid);
+    temporaryDisposable[term.pid].dispose();
+    delete temporaryDisposable[term.pid];
+    ws.send(unsentOutput[term.pid]);
+    delete unsentOutput[term.pid];
 
     // unbuffered delivery after user input
     let userInput = false;
@@ -101,27 +111,30 @@ function startServer() {
     }
     // binary message buffering
     function bufferUtf8(socket, timeout, maxSize) {
-      let buffer = [];
+      const dataBuffer = new Uint8Array(maxSize);
       let sender = null;
       let length = 0;
       return (data) => {
-        buffer.push(data);
-        length += data.length;
-        if (length > maxSize || userInput) {
-          userInput = false;
-          socket.send(Buffer.concat(buffer, length));
-          buffer = [];
+        function flush() {
+          socket.send(Buffer.from(dataBuffer.buffer, 0, length));
           length = 0;
           if (sender) {
             clearTimeout(sender);
             sender = null;
           }
+        }
+        if (length + data.length > maxSize) {
+          flush();
+        }
+        dataBuffer.set(data, length);
+        length += data.length;
+        if (length > maxSize || userInput) {
+          userInput = false;
+          flush();
         } else if (!sender) {
           sender = setTimeout(() => {
-            socket.send(Buffer.concat(buffer, length));
-            buffer = [];
             sender = null;
-            length = 0;
+            flush();
           }, timeout);
         }
       };
@@ -131,8 +144,12 @@ function startServer() {
     // WARNING: This is a naive implementation that will not throttle the flow of data. This means
     // it could flood the communication channel and make the terminal unresponsive. Learn more about
     // the problem and how to implement flow control at https://xtermjs.org/docs/guides/flowcontrol/
-    term.on('data', function(data) {
-      send(data);
+    term.onData(function(data) {
+      try {
+        send(data);
+      } catch (ex) {
+        // The WebSocket is not open, ignore
+      }
     });
     ws.on('message', function(msg) {
       term.write(msg);

demo/style.css

@@ -90,16 +90,15 @@ pre {
     overflow-y: auto;
 }
 
+#texture-atlas-zoom:checked + label + #texture-atlas canvas {
+    /* Zoom atlas to the width of the container*/
+    width: 100% !important;
+    height: auto !important;
+}
 #texture-atlas {
     width: 100%;
-    height: 600px;
-    overflow: scroll;
 }
 #texture-atlas canvas {
     image-rendering: pixelated;
-}
-#texture-atlas canvas:hover {
-    /* zoom to 4x on hover */
-    width: 4096px;
-    height: 4096px;
+    border: 1px solid #ccc;
 }

package.json

@@ -68,6 +68,7 @@
     "cross-env": "^7.0.3",
     "deep-equal": "^2.0.5",
     "eslint": "^8.1.0",
+    "eslint-plugin-jsdoc": "^39.3.6",
     "express": "^4.17.1",
     "express-ws": "^5.0.2",
     "glob": "^7.2.0",

src/browser/AccessibilityManager.ts

@@ -274,7 +274,7 @@ export class AccessibilityManager extends Disposable {
   }
 
   private _refreshRowsDimensions(): void {
-    if (!this._renderService.dimensions.actualCellHeight) {
+    if (!this._renderService.dimensions.css.cell.height) {
       return;
     }
     if (this._rowElements.length !== this._terminal.rows) {
@@ -286,7 +286,7 @@ export class AccessibilityManager extends Disposable {
   }
 
   private _refreshRowDimensions(element: HTMLElement): void {
-    element.style.height = `${this._renderService.dimensions.actualCellHeight}px`;
+    element.style.height = `${this._renderService.dimensions.css.cell.height}px`;
   }
 
   private _announceCharacters(): void {

src/browser/Clipboard.ts

@@ -39,8 +39,6 @@ export function copyHandler(ev: ClipboardEvent, selectionService: ISelectionServ
 
 /**
  * Redirect the clipboard's data to the terminal's input handler.
- * @param ev The original paste event to be handled
- * @param term The terminal on which to apply the handled paste event
  */
 export function handlePasteEvent(ev: ClipboardEvent, textarea: HTMLTextAreaElement, coreService: ICoreService): void {
   ev.stopPropagation();
@@ -81,10 +79,6 @@ export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextA
 
 /**
  * Bind to right-click event and allow right-click copy and paste.
- * @param ev The original right click event to be handled.
- * @param textarea The terminal's textarea.
- * @param selectionService The terminal's selection manager.
- * @param shouldSelectWord If true and there is no selection the current word will be selected
  */
 export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, screenElement: HTMLElement, selectionService: ISelectionService, shouldSelectWord: boolean): void {
   moveTextAreaUnderMouseCursor(ev, textarea, screenElement);

src/browser/Lifecycle.ts

@@ -7,8 +7,11 @@ import { IDisposable } from 'common/Types';
 
 /**
  * Adds a disposable listener to a node in the DOM, returning the disposable.
+ * @param node The node to add a listener to.
  * @param type The event type.
  * @param handler The handler for the listener.
+ * @param options The boolean or options object to pass on to the event
+ * listener.
  */
 export function addDisposableDomListener(
   node: Element | Window | Document,

src/browser/Terminal.test.ts

@@ -9,6 +9,7 @@ import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { CellData } from 'common/buffer/CellData';
 import { MockUnicodeService } from 'common/TestUtils.test';
 import { IMarker } from 'common/Types';
+import { ICoreService } from 'common/services/Services';
 
 const INIT_COLS = 80;
 const INIT_ROWS = 24;
@@ -47,11 +48,10 @@ describe('Terminal', () => {
   });
 
   describe('events', () => {
-    // TODO: Add an onData test back
-    // it('should fire the onData evnet', (done) => {
-    //   term.onData(() => done());
-    //   term.handler('fake');
-    // });
+    it('should fire the onData evnet', (done) => {
+      term.onData(() => done());
+      term.coreService.triggerDataEvent('fake');
+    });
     it('should fire the onCursorMove event', () => {
       return new Promise<void>(async r => {
         term.onCursorMove(() => r());

src/browser/Terminal.ts

@@ -264,50 +264,14 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
   }
 
-  protected _updateOptions(key: string): void {
-    super._updateOptions(key);
-
-    // TODO: These listeners should be owned by individual components
-    switch (key) {
-      case 'fontFamily':
-      case 'fontSize':
-        // When the font changes the size of the cells may change which requires a renderer clear
-        this._renderService?.clear();
-        this._charSizeService?.measure();
-        break;
-      case 'cursorBlink':
-      case 'cursorStyle':
-        // The DOM renderer needs a row refresh to update the cursor styles
-        this.refresh(this.buffer.y, this.buffer.y);
-        break;
-      case 'customGlyphs':
-      case 'drawBoldTextInBrightColors':
-      case 'letterSpacing':
-      case 'lineHeight':
-      case 'fontWeight':
-      case 'fontWeightBold':
-      case 'minimumContrastRatio':
-        // When the font changes the size of the cells may change which requires a renderer clear
-        if (this._renderService) {
-          this._renderService.clear();
-          this._renderService.handleResize(this.cols, this.rows);
-          this.refresh(0, this.rows - 1);
-        }
-        break;
-      case 'scrollback':
-        this.viewport?.syncScrollArea();
-        break;
-      case 'screenReaderMode':
-        if (this.optionsService.rawOptions.screenReaderMode) {
-          if (!this._accessibilityManager && this._renderService) {
-            this._accessibilityManager = new AccessibilityManager(this, this._renderService);
-          }
-        } else {
-          this._accessibilityManager?.dispose();
-          this._accessibilityManager = undefined;
-        }
-        break;
-      case 'tabStopWidth': this.buffers.setupTabStops(); break;
+  private _handleScreenReaderModeOptionChange(value: boolean): void {
+    if (value) {
+      if (!this._accessibilityManager && this._renderService) {
+        this._accessibilityManager = new AccessibilityManager(this, this._renderService);
+      }
+    } else {
+      this._accessibilityManager?.dispose();
+      this._accessibilityManager = undefined;
     }
   }
 
@@ -357,11 +321,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
       return;
     }
     const cursorX = Math.min(this.buffer.x, this.cols - 1);
-    const cellHeight = this._renderService.dimensions.actualCellHeight;
+    const cellHeight = this._renderService.dimensions.css.cell.height;
     const width = bufferLine.getWidth(cursorX);
-    const cellWidth = this._renderService.dimensions.actualCellWidth * width;
-    const cursorTop = this.buffer.y * this._renderService.dimensions.actualCellHeight;
-    const cursorLeft = cursorX * this._renderService.dimensions.actualCellWidth;
+    const cellWidth = this._renderService.dimensions.css.cell.width * width;
+    const cursorTop = this.buffer.y * this._renderService.dimensions.css.cell.height;
+    const cursorLeft = cursorX * this._renderService.dimensions.css.cell.width;
 
     // Sync the textarea to the exact position of the composition view so the IME knows where the
     // text is.
@@ -583,12 +547,13 @@ export class Terminal extends CoreTerminal implements ITerminal {
       // ensure the correct order of the dprchange event
       this._accessibilityManager = new AccessibilityManager(this, this._renderService);
     }
+    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));
     }
-    this.optionsService.onOptionChange(() => {
-      if (!this._overviewRulerRenderer && this.options.overviewRulerWidth && this._viewportElement && this.screenElement) {
+    this.optionsService.onSpecificOptionChange('overviewRulerWidth', value => {
+      if (!this._overviewRulerRenderer && value && this._viewportElement && this.screenElement) {
         this._overviewRulerRenderer = this.register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
       }
     });
@@ -1014,10 +979,9 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   /**
-   * Handle a keydown event
-   * Key Resources:
-   *   - https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent
-   * @param ev The keydown event to be handled.
+   * Handle a keydown [KeyboardEvent].
+   *
+   * [KeyboardEvent]: https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent
    */
   protected _keyDown(event: KeyboardEvent): boolean | undefined {
     this._keyDownHandled = false;
@@ -1309,13 +1273,13 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     switch (type) {
       case WindowsOptionsReportType.GET_WIN_SIZE_PIXELS:
-        const canvasWidth = this._renderService.dimensions.canvasWidth.toFixed(0);
-        const canvasHeight = this._renderService.dimensions.canvasHeight.toFixed(0);
+        const canvasWidth = this._renderService.dimensions.css.canvas.width.toFixed(0);
+        const canvasHeight = this._renderService.dimensions.css.canvas.height.toFixed(0);
         this.coreService.triggerDataEvent(`${C0.ESC}[4;${canvasHeight};${canvasWidth}t`);
         break;
       case WindowsOptionsReportType.GET_CELL_SIZE_PIXELS:
-        const cellWidth = this._renderService.dimensions.actualCellWidth.toFixed(0);
-        const cellHeight = this._renderService.dimensions.actualCellHeight.toFixed(0);
+        const cellWidth = this._renderService.dimensions.css.cell.width.toFixed(0);
+        const cellHeight = this._renderService.dimensions.css.cell.height.toFixed(0);
         this.coreService.triggerDataEvent(`${C0.ESC}[6;${cellHeight};${cellWidth}t`);
         break;
     }

src/browser/TestUtils.test.ts

@@ -18,6 +18,7 @@ import { IFunctionIdentifier, IParams } from 'common/parser/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { ISelectionRedrawRequestEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { css } from 'common/Color';
+import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
 
 export class TestTerminal extends Terminal {
   public get curAttrData(): IAttributeData { return (this as any)._inputHandler._curAttrData; }
@@ -372,20 +373,7 @@ export class MockRenderService implements IRenderService {
   public onRenderedViewportChange: IEvent<{ start: number, end: number }, void> = new EventEmitter<{ start: number, end: number }>().event;
   public onRender: IEvent<{ start: number, end: number }, void> = new EventEmitter<{ start: number, end: number }>().event;
   public onRefreshRequest: IEvent<{ start: number, end: number}, void> = new EventEmitter<{ start: number, end: number }>().event;
-  public dimensions: IRenderDimensions = {
-    scaledCharWidth: 0,
-    scaledCharHeight: 0,
-    scaledCellWidth: 0,
-    scaledCellHeight: 0,
-    scaledCharLeft: 0,
-    scaledCharTop: 0,
-    scaledCanvasWidth: 0,
-    scaledCanvasHeight: 0,
-    canvasWidth: 0,
-    canvasHeight: 0,
-    actualCellWidth: 0,
-    actualCellHeight: 0
-  };
+  public dimensions: IRenderDimensions = createRenderDimensions();
   public refreshRows(start: number, end: number): void {
     throw new Error('Method not implemented.');
   }

src/browser/Viewport.ts

@@ -26,7 +26,7 @@ interface ISmoothScrollState {
 export class Viewport extends Disposable implements IViewport {
   public scrollBarWidth: number = 0;
   private _currentRowHeight: number = 0;
-  private _currentScaledCellHeight: number = 0;
+  private _currentDeviceCellHeight: number = 0;
   private _lastRecordedBufferLength: number = 0;
   private _lastRecordedViewportHeight: number = 0;
   private _lastRecordedBufferHeight: number = 0;
@@ -75,6 +75,7 @@ export class Viewport extends Disposable implements IViewport {
 
     this._handleThemeChange(themeService.colors);
     this.register(themeService.onChangeColors(e => this._handleThemeChange(e)));
+    this.register(this._optionsService.onSpecificOptionChange('scrollback', () => this.syncScrollArea()));
 
     // Perform this async to ensure the ICharSizeService is ready.
     setTimeout(() => this.syncScrollArea(), 0);
@@ -103,10 +104,10 @@ export class Viewport extends Disposable implements IViewport {
 
   private _innerRefresh(): void {
     if (this._charSizeService.height > 0) {
-      this._currentRowHeight = this._renderService.dimensions.scaledCellHeight / this._coreBrowserService.dpr;
-      this._currentScaledCellHeight = this._renderService.dimensions.scaledCellHeight;
+      this._currentRowHeight = this._renderService.dimensions.device.cell.height / this._coreBrowserService.dpr;
+      this._currentDeviceCellHeight = this._renderService.dimensions.device.cell.height;
       this._lastRecordedViewportHeight = this._viewportElement.offsetHeight;
-      const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._renderService.dimensions.canvasHeight);
+      const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._renderService.dimensions.css.canvas.height);
       if (this._lastRecordedBufferHeight !== newBufferHeight) {
         this._lastRecordedBufferHeight = newBufferHeight;
         this._scrollArea.style.height = this._lastRecordedBufferHeight + 'px';
@@ -137,7 +138,7 @@ export class Viewport extends Disposable implements IViewport {
     }
 
     // If viewport height changed
-    if (this._lastRecordedViewportHeight !== this._renderService.dimensions.canvasHeight) {
+    if (this._lastRecordedViewportHeight !== this._renderService.dimensions.css.canvas.height) {
       this._refresh(immediate);
       return;
     }
@@ -149,7 +150,7 @@ export class Viewport extends Disposable implements IViewport {
     }
 
     // If row height changed
-    if (this._renderDimensions.scaledCellHeight !== this._currentScaledCellHeight) {
+    if (this._renderDimensions.device.cell.height !== this._currentDeviceCellHeight) {
       this._refresh(immediate);
       return;
     }

src/browser/decorations/BufferDecorationRenderer.ts

@@ -28,7 +28,7 @@ export class BufferDecorationRenderer extends Disposable {
     this._container.classList.add('xterm-decoration-container');
     this._screenElement.appendChild(this._container);
 
-    this.register(this._renderService.onRenderedViewportChange(() => this._queueRefresh()));
+    this.register(this._renderService.onRenderedViewportChange(() => this._doRefreshDecorations()));
     this.register(this._renderService.onDimensionsChange(() => {
       this._dimensionsChanged = true;
       this._queueRefresh();
@@ -50,12 +50,12 @@ export class BufferDecorationRenderer extends Disposable {
       return;
     }
     this._animationFrame = this._renderService.addRefreshCallback(() => {
-      this.refreshDecorations();
+      this._doRefreshDecorations();
       this._animationFrame = undefined;
     });
   }
 
-  public refreshDecorations(): void {
+  private _doRefreshDecorations(): void {
     for (const decoration of this._decorationService.decorations) {
       this._renderDecoration(decoration);
     }
@@ -72,10 +72,10 @@ export class BufferDecorationRenderer extends Disposable {
   private _createElement(decoration: IInternalDecoration): HTMLElement {
     const element = document.createElement('div');
     element.classList.add('xterm-decoration');
-    element.style.width = `${Math.round((decoration.options.width || 1) * this._renderService.dimensions.actualCellWidth)}px`;
-    element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.actualCellHeight}px`;
-    element.style.top = `${(decoration.marker.line - this._bufferService.buffers.active.ydisp) * this._renderService.dimensions.actualCellHeight}px`;
-    element.style.lineHeight = `${this._renderService.dimensions.actualCellHeight}px`;
+    element.style.width = `${Math.round((decoration.options.width || 1) * this._renderService.dimensions.css.cell.width)}px`;
+    element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.css.cell.height}px`;
+    element.style.top = `${(decoration.marker.line - this._bufferService.buffers.active.ydisp) * this._renderService.dimensions.css.cell.height}px`;
+    element.style.lineHeight = `${this._renderService.dimensions.css.cell.height}px`;
 
     const x = decoration.options.x ?? 0;
     if (x && x > this._bufferService.cols) {
@@ -98,13 +98,12 @@ export class BufferDecorationRenderer extends Disposable {
     } else {
       let element = this._decorationElements.get(decoration);
       if (!element) {
-        decoration.onDispose(() => this._removeDecoration(decoration));
         element = this._createElement(decoration);
         decoration.element = element;
         this._decorationElements.set(decoration, element);
         this._container.appendChild(element);
       }
-      element.style.top = `${line * this._renderService.dimensions.actualCellHeight}px`;
+      element.style.top = `${line * this._renderService.dimensions.css.cell.height}px`;
       element.style.display = this._altBufferIsActive ? 'none' : 'block';
       decoration.onRenderEmitter.fire(element);
     }
@@ -116,14 +115,15 @@ export class BufferDecorationRenderer extends Disposable {
     }
     const x = decoration.options.x ?? 0;
     if ((decoration.options.anchor || 'left') === 'right') {
-      element.style.right = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
+      element.style.right = x ? `${x * this._renderService.dimensions.css.cell.width}px` : '';
     } else {
-      element.style.left = x ? `${x * this._renderService.dimensions.actualCellWidth}px` : '';
+      element.style.left = x ? `${x * this._renderService.dimensions.css.cell.width}px` : '';
     }
   }
 
   private _removeDecoration(decoration: IInternalDecoration): void {
     this._decorationElements.get(decoration)?.remove();
     this._decorationElements.delete(decoration);
+    decoration.dispose();
   }
 }

src/browser/decorations/OverviewRulerRenderer.ts

@@ -110,15 +110,9 @@ export class OverviewRulerRenderer extends Disposable {
       }
     }));
     // overview ruler width changed
-    this.register(this._optionsService.onOptionChange(o => {
-      if (o === 'overviewRulerWidth') {
-        this._queueRefresh(true);
-      }
-    }));
+    this.register(this._optionsService.onSpecificOptionChange('overviewRulerWidth', () => this._queueRefresh(true)));
     // device pixel ratio changed
-    this.register(addDisposableDomListener(this._coreBrowseService.window, 'resize', () => {
-      this._queueRefresh(true);
-    }));
+    this.register(addDisposableDomListener(this._coreBrowseService.window, 'resize', () => this._queueRefresh(true)));
     // set the canvas dimensions
     this._queueRefresh(true);
   }
@@ -196,8 +190,6 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _renderColorZone(zone: IColorZone): void {
-    // TODO: Is _decorationElements needed?
-
     this._ctx.fillStyle = zone.color;
     this._ctx.fillRect(
       /* x */ drawX[zone.position || 'full'],

src/browser/input/CompositionHelper.ts

@@ -89,7 +89,7 @@ export class CompositionHelper {
   /**
    * Handles the keydown event, routing any necessary events to the CompositionHelper functions.
    * @param ev The keydown event.
-   * @return Whether the Terminal should continue processing the keydown event.
+   * @returns Whether the Terminal should continue processing the keydown event.
    */
   public keydown(ev: KeyboardEvent): boolean {
     if (this._isComposing || this._isSendingComposition) {
@@ -218,9 +218,9 @@ export class CompositionHelper {
     if (this._bufferService.buffer.isCursorInViewport) {
       const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
 
-      const cellHeight = this._renderService.dimensions.actualCellHeight;
-      const cursorTop = this._bufferService.buffer.y * this._renderService.dimensions.actualCellHeight;
-      const cursorLeft = cursorX * this._renderService.dimensions.actualCellWidth;
+      const cellHeight = this._renderService.dimensions.css.cell.height;
+      const cursorTop = this._bufferService.buffer.y * this._renderService.dimensions.css.cell.height;
+      const cursorLeft = cursorX * this._renderService.dimensions.css.cell.width;
 
       this._compositionView.style.left = cursorLeft + 'px';
       this._compositionView.style.top = cursorTop + 'px';

src/browser/input/Mouse.ts

@@ -18,15 +18,19 @@ export function getCoordsRelativeToElement(window: Pick<Window, 'getComputedStyl
  * Gets coordinates within the terminal for a particular mouse event. The result
  * is returned as an array in the form [x, y] instead of an object as it's a
  * little faster and this function is used in some low level code.
+ * @param window The window object the element belongs to.
  * @param event The mouse event.
  * @param element The terminal's container element.
  * @param colCount The number of columns in the terminal.
  * @param rowCount The number of rows n the terminal.
+ * @param hasValidCharSize Whether there is a valid character size available.
+ * @param cssCellWidth The cell width device pixel render dimensions.
+ * @param cssCellHeight The cell height device pixel render dimensions.
  * @param isSelection Whether the request is for the selection or not. This will
  * apply an offset to the x value such that the left half of the cell will
  * select that cell and the right half will select the next cell.
  */
-export function getCoords(window: Pick<Window, 'getComputedStyle'>, event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, hasValidCharSize: boolean, actualCellWidth: number, actualCellHeight: number, isSelection?: boolean): [number, number] | undefined {
+export function getCoords(window: Pick<Window, 'getComputedStyle'>, event: Pick<MouseEvent, 'clientX' | 'clientY'>, element: HTMLElement, colCount: number, rowCount: number, hasValidCharSize: boolean, cssCellWidth: number, cssCellHeight: number, isSelection?: boolean): [number, number] | undefined {
   // Coordinates cannot be measured if there are no valid
   if (!hasValidCharSize) {
     return undefined;
@@ -37,8 +41,8 @@ export function getCoords(window: Pick<Window, 'getComputedStyle'>, event: {clie
     return undefined;
   }
 
-  coords[0] = Math.ceil((coords[0] + (isSelection ? actualCellWidth / 2 : 0)) / actualCellWidth);
-  coords[1] = Math.ceil(coords[1] / actualCellHeight);
+  coords[0] = Math.ceil((coords[0] + (isSelection ? cssCellWidth / 2 : 0)) / cssCellWidth);
+  coords[1] = Math.ceil(coords[1] / cssCellHeight);
 
   // Ensure coordinates are within the terminal viewport. Note that selections
   // need an addition point of precision to cover the end point (as characters

src/browser/input/MoveToCell.ts

@@ -68,7 +68,7 @@ function resetStartingRow(startX: number, startY: number, targetX: number, targe
   }
   return repeat(bufferLine(
     startX, startY, startX,
-    startY - wrappedRowsForRow(bufferService, startY), false, bufferService
+    startY - wrappedRowsForRow(startY, bufferService), false, bufferService
   ).length, sequence(Direction.LEFT, applicationCursor));
 }
 
@@ -77,8 +77,8 @@ function resetStartingRow(startX: number, startY: number, targetX: number, targe
  * ignoring wrapped rows
  */
 function moveToRequestedRow(startY: number, targetY: number, bufferService: IBufferService, applicationCursor: boolean): string {
-  const startRow = startY - wrappedRowsForRow(bufferService, startY);
-  const endRow = targetY - wrappedRowsForRow(bufferService, targetY);
+  const startRow = startY - wrappedRowsForRow(startY, bufferService);
+  const endRow = targetY - wrappedRowsForRow(targetY, bufferService);
 
   const rowsToMove = Math.abs(startRow - endRow) - wrappedRowsCount(startY, targetY, bufferService);
 
@@ -91,7 +91,7 @@ function moveToRequestedRow(startY: number, targetY: number, bufferService: IBuf
 function moveToRequestedCol(startX: number, startY: number, targetX: number, targetY: number, bufferService: IBufferService, applicationCursor: boolean): string {
   let startRow;
   if (moveToRequestedRow(startY, targetY, bufferService, applicationCursor).length > 0) {
-    startRow = targetY - wrappedRowsForRow(bufferService, targetY);
+    startRow = targetY - wrappedRowsForRow(targetY, bufferService);
   } else {
     startRow = startY;
   }
@@ -115,8 +115,8 @@ function moveToRequestedCol(startX: number, startY: number, targetX: number, tar
  */
 function wrappedRowsCount(startY: number, targetY: number, bufferService: IBufferService): number {
   let wrappedRows = 0;
-  const startRow = startY - wrappedRowsForRow(bufferService, startY);
-  const endRow = targetY - wrappedRowsForRow(bufferService, targetY);
+  const startRow = startY - wrappedRowsForRow(startY, bufferService);
+  const endRow = targetY - wrappedRowsForRow(targetY, bufferService);
 
   for (let i = 0; i < Math.abs(startRow - endRow); i++) {
     const direction = verticalDirection(startY, targetY) === Direction.UP ? -1 : 1;
@@ -133,7 +133,7 @@ function wrappedRowsCount(startY: number, targetY: number, bufferService: IBuffe
  * Calculates the number of wrapped rows that make up a given row.
  * @param currentRow The row to determine how many wrapped rows make it up
  */
-function wrappedRowsForRow(bufferService: IBufferService, currentRow: number): number {
+function wrappedRowsForRow(currentRow: number, bufferService: IBufferService): number {
   let rowCount = 0;
   let line = bufferService.buffer.lines.get(currentRow);
   let lineWraps = line?.isWrapped;
@@ -157,7 +157,7 @@ function wrappedRowsForRow(bufferService: IBufferService, currentRow: number): n
 function horizontalDirection(startX: number, startY: number, targetX: number, targetY: number, bufferService: IBufferService, applicationCursor: boolean): Direction {
   let startRow;
   if (moveToRequestedRow(targetX, targetY, bufferService, applicationCursor).length > 0) {
-    startRow = targetY - wrappedRowsForRow(bufferService, targetY);
+    startRow = targetY - wrappedRowsForRow(targetY, bufferService);
   } else {
     startRow = startY;
   }
@@ -237,7 +237,7 @@ function sequence(direction: Direction, applicationCursor: boolean): string {
  * Returns a string repeated a given number of times
  * Polyfill from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
  * @param count The number of times to repeat the string
- * @param string The string that is to be repeated
+ * @param str The string that is to be repeated
  */
 function repeat(count: number, str: string): string {
   count = Math.floor(count);

src/browser/public/Terminal.ts

@@ -78,7 +78,6 @@ export class Terminal implements ITerminalApi {
 
   public get element(): HTMLElement | undefined { return this._core.element; }
   public get parser(): IParser {
-    this._checkProposedApi();
     if (!this._parser) {
       this._parser = new ParserApi(this._core);
     }
@@ -92,7 +91,6 @@ export class Terminal implements ITerminalApi {
   public get rows(): number { return this._core.rows; }
   public get cols(): number { return this._core.cols; }
   public get buffer(): IBufferNamespaceApi {
-    this._checkProposedApi();
     if (!this._buffer) {
       this._buffer = new BufferNamespaceApi(this._core);
     }
@@ -148,7 +146,6 @@ export class Terminal implements ITerminalApi {
     this._core.attachCustomKeyEventHandler(customKeyEventHandler);
   }
   public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
-    this._checkProposedApi();
     return this._core.registerLinkProvider(linkProvider);
   }
   public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {

src/browser/renderer/dom/DomRenderer.ts

@@ -3,16 +3,17 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
-import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
-import { Disposable, toDisposable } from 'common/Lifecycle';
-import { IColorSet, ILinkifierEvent, ILinkifier2, ReadonlyColorSet } from 'browser/Types';
-import { ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { IOptionsService, IBufferService, IInstantiationService } from 'common/services/Services';
-import { EventEmitter, IEvent } from 'common/EventEmitter';
-import { color } from 'common/Color';
 import { removeElementFromParent } from 'browser/Dom';
+import { BOLD_CLASS, CURSOR_BLINK_CLASS, CURSOR_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory, ITALIC_CLASS } from 'browser/renderer/dom/DomRendererRowFactory';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
+import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
+import { ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { ILinkifier2, ILinkifierEvent, ReadonlyColorSet } from 'browser/Types';
+import { color } from 'common/Color';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IBufferService, IInstantiationService, IOptionsService } from 'common/services/Services';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -64,21 +65,9 @@ export class DomRenderer extends Disposable implements IRenderer {
     this._selectionContainer.classList.add(SELECTION_CLASS);
     this._selectionContainer.setAttribute('aria-hidden', 'true');
 
-    this.dimensions = {
-      scaledCharWidth: 0,
-      scaledCharHeight: 0,
-      scaledCellWidth: 0,
-      scaledCellHeight: 0,
-      scaledCharLeft: 0,
-      scaledCharTop: 0,
-      scaledCanvasWidth: 0,
-      scaledCanvasHeight: 0,
-      canvasWidth: 0,
-      canvasHeight: 0,
-      actualCellWidth: 0,
-      actualCellHeight: 0
-    };
+    this.dimensions = createRenderDimensions();
     this._updateDimensions();
+    this.register(this._optionsService.onOptionChange(() => this._handleOptionsChanged()));
 
     this.register(themeService.onChangeColors(e => this._injectCss(e)));
     this._injectCss(themeService.colors);
@@ -103,23 +92,23 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   private _updateDimensions(): void {
     const dpr = this._coreBrowserService.dpr;
-    this.dimensions.scaledCharWidth = this._charSizeService.width * dpr;
-    this.dimensions.scaledCharHeight = Math.ceil(this._charSizeService.height * dpr);
-    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._optionsService.rawOptions.letterSpacing);
-    this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._optionsService.rawOptions.lineHeight);
-    this.dimensions.scaledCharLeft = 0;
-    this.dimensions.scaledCharTop = 0;
-    this.dimensions.scaledCanvasWidth = this.dimensions.scaledCellWidth * this._bufferService.cols;
-    this.dimensions.scaledCanvasHeight = this.dimensions.scaledCellHeight * this._bufferService.rows;
-    this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / dpr);
-    this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / dpr);
-    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._bufferService.cols;
-    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._bufferService.rows;
+    this.dimensions.device.char.width = this._charSizeService.width * dpr;
+    this.dimensions.device.char.height = Math.ceil(this._charSizeService.height * dpr);
+    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._optionsService.rawOptions.letterSpacing);
+    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._optionsService.rawOptions.lineHeight);
+    this.dimensions.device.char.left = 0;
+    this.dimensions.device.char.top = 0;
+    this.dimensions.device.canvas.width = this.dimensions.device.cell.width * this._bufferService.cols;
+    this.dimensions.device.canvas.height = this.dimensions.device.cell.height * this._bufferService.rows;
+    this.dimensions.css.canvas.width = Math.round(this.dimensions.device.canvas.width / dpr);
+    this.dimensions.css.canvas.height = Math.round(this.dimensions.device.canvas.height / dpr);
+    this.dimensions.css.cell.width = this.dimensions.css.canvas.width / this._bufferService.cols;
+    this.dimensions.css.cell.height = this.dimensions.css.canvas.height / this._bufferService.rows;
 
     for (const element of this._rowElements) {
-      element.style.width = `${this.dimensions.canvasWidth}px`;
-      element.style.height = `${this.dimensions.actualCellHeight}px`;
-      element.style.lineHeight = `${this.dimensions.actualCellHeight}px`;
+      element.style.width = `${this.dimensions.css.canvas.width}px`;
+      element.style.height = `${this.dimensions.css.cell.height}px`;
+      element.style.lineHeight = `${this.dimensions.css.cell.height}px`;
       // Make sure rows don't overflow onto following row
       element.style.overflow = 'hidden';
     }
@@ -134,14 +123,14 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` display: inline-block;` +
       ` height: 100%;` +
       ` vertical-align: top;` +
-      ` width: ${this.dimensions.actualCellWidth}px` +
+      ` width: ${this.dimensions.css.cell.width}px` +
       `}`;
 
     this._dimensionsStyleElement.textContent = styles;
 
     this._selectionContainer.style.height = this._viewportElement.style.height;
-    this._screenElement.style.width = `${this.dimensions.canvasWidth}px`;
-    this._screenElement.style.height = `${this.dimensions.canvasHeight}px`;
+    this._screenElement.style.width = `${this.dimensions.css.canvas.width}px`;
+    this._screenElement.style.height = `${this.dimensions.css.canvas.height}px`;
   }
 
   private _injectCss(colors: ReadonlyColorSet): void {
@@ -331,10 +320,10 @@ export class DomRenderer extends Disposable implements IRenderer {
    */
   private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement {
     const element = document.createElement('div');
-    element.style.height = `${rowCount * this.dimensions.actualCellHeight}px`;
-    element.style.top = `${row * this.dimensions.actualCellHeight}px`;
-    element.style.left = `${colStart * this.dimensions.actualCellWidth}px`;
-    element.style.width = `${this.dimensions.actualCellWidth * (colEnd - colStart)}px`;
+    element.style.height = `${rowCount * this.dimensions.css.cell.height}px`;
+    element.style.top = `${row * this.dimensions.css.cell.height}px`;
+    element.style.left = `${colStart * this.dimensions.css.cell.width}px`;
+    element.style.width = `${this.dimensions.css.cell.width * (colEnd - colStart)}px`;
     return element;
   }
 
@@ -342,14 +331,21 @@ export class DomRenderer extends Disposable implements IRenderer {
     // No-op, the cursor is drawn when rows are drawn
   }
 
-  public handleOptionsChanged(): void {
+  private _handleOptionsChanged(): void {
     // Force a refresh
     this._updateDimensions();
   }
 
   public clear(): void {
     for (const e of this._rowElements) {
-      e.innerText = '';
+      /**
+       * NOTE: This used to be `e.innerText = '';` but that doesn't work when using `jsdom` and `@testing-library/react`
+       *
+       * references:
+       * - https://github.com/testing-library/react-testing-library/issues/1146
+       * - https://github.com/jsdom/jsdom/issues/1245
+       */
+      e.replaceChildren();
     }
   }
 
@@ -360,11 +356,10 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     for (let y = start; y <= end; y++) {
       const rowElement = this._rowElements[y];
-      rowElement.innerText = '';
       const row = y + this._bufferService.buffer.ydisp;
       const lineData = this._bufferService.buffer.lines.get(row);
       const cursorStyle = this._optionsService.rawOptions.cursorStyle;
-      rowElement.appendChild(this._rowFactory.createRow(lineData!, row, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, this._bufferService.cols));
+      rowElement.replaceChildren(this._rowFactory.createRow(lineData!, row, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.css.cell.width, this._bufferService.cols));
     }
   }
 

src/browser/renderer/shared/CharAtlasCache.ts

@@ -28,13 +28,13 @@ const charAtlasCache: ITextureAtlasCacheEntry[] = [];
 export function acquireTextureAtlas(
   terminal: Terminal,
   colors: ReadonlyColorSet,
-  scaledCellWidth: number,
-  scaledCellHeight: number,
-  scaledCharWidth: number,
-  scaledCharHeight: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
+  deviceCharWidth: number,
+  deviceCharHeight: number,
   devicePixelRatio: number
 ): ITextureAtlas {
-  const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, colors, devicePixelRatio);
+  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, terminal, colors, devicePixelRatio);
 
   // Check to see if the terminal already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

src/browser/renderer/shared/CharAtlasUtils.ts

@@ -9,7 +9,7 @@ import { Terminal } from 'xterm';
 import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { NULL_COLOR } from 'common/Color';
 
-export function generateConfig(scaledCellWidth: number, scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig {
+export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, terminal: Terminal, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IColorSet = {
     foreground: colors.foreground,
@@ -31,10 +31,10 @@ export function generateConfig(scaledCellWidth: number, scaledCellHeight: number
     devicePixelRatio,
     letterSpacing: terminal.options.letterSpacing,
     lineHeight: terminal.options.lineHeight,
-    scaledCellWidth,
-    scaledCellHeight,
-    scaledCharWidth,
-    scaledCharHeight,
+    deviceCellWidth: deviceCellWidth,
+    deviceCellHeight: deviceCellHeight,
+    deviceCharWidth: deviceCharWidth,
+    deviceCharHeight: deviceCharHeight,
     fontFamily: terminal.options.fontFamily,
     fontSize: terminal.options.fontSize,
     fontWeight: terminal.options.fontWeight,
@@ -61,8 +61,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
       a.fontWeight === b.fontWeight &&
       a.fontWeightBold === b.fontWeightBold &&
       a.allowTransparency === b.allowTransparency &&
-      a.scaledCharWidth === b.scaledCharWidth &&
-      a.scaledCharHeight === b.scaledCharHeight &&
+      a.deviceCharWidth === b.deviceCharWidth &&
+      a.deviceCharHeight === b.deviceCharHeight &&
       a.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors &&
       a.minimumContrastRatio === b.minimumContrastRatio &&
       a.colors.foreground.rgba === b.colors.foreground.rgba &&

src/browser/renderer/shared/CustomGlyphs.ts

@@ -381,32 +381,32 @@ export function tryDrawCustomChar(
   c: string,
   xOffset: number,
   yOffset: number,
-  scaledCellWidth: number,
-  scaledCellHeight: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
   fontSize: number,
   devicePixelRatio: number
 ): boolean {
   const blockElementDefinition = blockElementDefinitions[c];
   if (blockElementDefinition) {
-    drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
     return true;
   }
 
   const patternDefinition = patternCharacterDefinitions[c];
   if (patternDefinition) {
-    drawPatternChar(ctx, patternDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    drawPatternChar(ctx, patternDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
     return true;
   }
 
   const boxDrawingDefinition = boxDrawingDefinitions[c];
   if (boxDrawingDefinition) {
-    drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight, devicePixelRatio);
+    drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight, devicePixelRatio);
     return true;
   }
 
   const powerlineDefinition = powerlineDefinitions[c];
   if (powerlineDefinition) {
-    drawPowerlineChar(ctx, powerlineDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight, fontSize, devicePixelRatio);
+    drawPowerlineChar(ctx, powerlineDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight, fontSize, devicePixelRatio);
     return true;
   }
 
@@ -418,13 +418,13 @@ function drawBlockElementChar(
   charDefinition: IBlockVector[],
   xOffset: number,
   yOffset: number,
-  scaledCellWidth: number,
-  scaledCellHeight: number
+  deviceCellWidth: number,
+  deviceCellHeight: number
 ): void {
   for (let i = 0; i < charDefinition.length; i++) {
     const box = charDefinition[i];
-    const xEighth = scaledCellWidth / 8;
-    const yEighth = scaledCellHeight / 8;
+    const xEighth = deviceCellWidth / 8;
+    const yEighth = deviceCellHeight / 8;
     ctx.fillRect(
       xOffset + box.x * xEighth,
       yOffset + box.y * yEighth,
@@ -441,8 +441,8 @@ function drawPatternChar(
   charDefinition: number[][],
   xOffset: number,
   yOffset: number,
-  scaledCellWidth: number,
-  scaledCellHeight: number
+  deviceCellWidth: number,
+  deviceCellHeight: number
 ): void {
   let patternSet = cachedPatterns.get(charDefinition);
   if (!patternSet) {
@@ -492,7 +492,7 @@ function drawPatternChar(
     patternSet.set(fillStyle, pattern);
   }
   ctx.fillStyle = pattern;
-  ctx.fillRect(xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+  ctx.fillRect(xOffset, yOffset, deviceCellWidth, deviceCellHeight);
 }
 
 /**
@@ -540,8 +540,8 @@ function drawBoxDrawingChar(
   charDefinition: { [fontWeight: number]: string | ((xp: number, yp: number) => string) },
   xOffset: number,
   yOffset: number,
-  scaledCellWidth: number,
-  scaledCellHeight: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
   devicePixelRatio: number
 ): void {
   ctx.strokeStyle = ctx.fillStyle;
@@ -551,7 +551,7 @@ function drawBoxDrawingChar(
     let actualInstructions: string;
     if (typeof instructions === 'function') {
       const xp = .15;
-      const yp = .15 / scaledCellHeight * scaledCellWidth;
+      const yp = .15 / deviceCellHeight * deviceCellWidth;
       actualInstructions = instructions(xp, yp);
     } else {
       actualInstructions = instructions;
@@ -567,7 +567,7 @@ function drawBoxDrawingChar(
       if (!args[0] || !args[1]) {
         continue;
       }
-      f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset, true, devicePixelRatio));
+      f(ctx, translateArgs(args, deviceCellWidth, deviceCellHeight, xOffset, yOffset, true, devicePixelRatio));
     }
     ctx.stroke();
     ctx.closePath();
@@ -579,8 +579,8 @@ function drawPowerlineChar(
   charDefinition: IVectorShape,
   xOffset: number,
   yOffset: number,
-  scaledCellWidth: number,
-  scaledCellHeight: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
   fontSize: number,
   devicePixelRatio: number
 ): void {
@@ -601,8 +601,8 @@ function drawPowerlineChar(
     }
     f(ctx, translateArgs(
       args,
-      scaledCellWidth,
-      scaledCellHeight,
+      deviceCellWidth,
+      deviceCellHeight,
       xOffset,
       yOffset,
       false,

src/browser/renderer/shared/RendererUtils.ts

@@ -3,6 +3,8 @@
  * @license MIT
  */
 
+import { IDimensions, IOffset, IRenderDimensions } from 'browser/renderer/shared/Types';
+
 export function throwIfFalsy<T>(value: T | undefined | null): T {
   if (!value) {
     throw new Error('value must not be falsy');
@@ -28,3 +30,29 @@ function isBoxOrBlockGlyph(codepoint: number): boolean {
 export function excludeFromContrastRatioDemands(codepoint: number): boolean {
   return isPowerlineGlyph(codepoint) || isBoxOrBlockGlyph(codepoint);
 }
+
+export function createRenderDimensions(): IRenderDimensions {
+  return {
+    css: {
+      canvas: createDimension(),
+      cell: createDimension()
+    },
+    device: {
+      canvas: createDimension(),
+      cell: createDimension(),
+      char: {
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0
+      }
+    }
+  };
+}
+
+function createDimension(): IDimensions {
+  return {
+    width: 0,
+    height: 0
+  };
+}

src/browser/renderer/shared/TextureAtlas.ts

@@ -13,32 +13,37 @@ import { excludeFromContrastRatioDemands, isPowerlineGlyph, isRestrictedPowerlin
 import { IUnicodeService } from 'common/services/Services';
 import { FourKeyMap } from 'common/MultiKeyMap';
 import { IdleTaskQueue } from 'common/TaskQueue';
-import { IBoundingBox, ICharAtlasConfig, IRasterizedGlyph, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { IBoundingBox, ICharAtlasConfig, IRasterizedGlyph, IRequestRedrawEvent, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { EventEmitter } from 'common/EventEmitter';
 
-// For debugging purposes, it can be useful to set this to a really tiny value,
-// to verify that LRU eviction works.
-const TEXTURE_WIDTH = 1024;
-const TEXTURE_HEIGHT = 1024;
-
-/**
- * The amount of the texture to be filled before throwing it away and starting
- * again. Since the throw away and individual glyph draws don't cost too much,
- * this prevent juggling multiple textures in the GL context.
- */
-const TEXTURE_CAPACITY = Math.floor(TEXTURE_HEIGHT * 0.8);
 /**
  * A shared object which is used to draw nothing for a particular cell.
  */
 const NULL_RASTERIZED_GLYPH: IRasterizedGlyph = {
-  offset: { x: 0, y: 0 },
+  texturePage: 0,
   texturePosition: { x: 0, y: 0 },
   texturePositionClipSpace: { x: 0, y: 0 },
+  offset: { x: 0, y: 0 },
   size: { x: 0, y: 0 },
   sizeClipSpace: { x: 0, y: 0 }
 };
 
 const TMP_CANVAS_GLYPH_PADDING = 2;
 
+const enum Constants {
+  /**
+   * The amount of pixel padding to allow in each row. Setting this to zero would make the atlas
+   * page pack as tightly as possible, but more pages would end up being created as a result.
+   */
+  ROW_PIXEL_THRESHOLD = 2,
+  /**
+   * The maximum texture size regardless of what the actual hardware maximum turns out to be. This
+   * is enforced to ensure uploading the texture still finishes in a reasonable amount of time. A
+   * 4096 squared image takes up 16MB of GPU memory.
+   */
+  FORCED_MAX_TEXTURE_SIZE = 4096
+}
+
 interface ICharAtlasActiveRow {
   x: number;
   y: number;
@@ -55,51 +60,40 @@ export class TextureAtlas implements ITextureAtlas {
   private _cacheMapCombined: FourKeyMap<string, number, number, number, IRasterizedGlyph> = new FourKeyMap();
 
   // The texture that the atlas is drawn to
-  public cacheCanvas: HTMLCanvasElement;
-  private _cacheCtx: CanvasRenderingContext2D;
+  private _pages: AtlasPage[] = [];
+  public get pages(): { canvas: HTMLCanvasElement, hasCanvasChanged: boolean }[] { return this._pages; }
+
+  // The set of atlas pages that can be written to
+  private _activePages: AtlasPage[] = [];
 
   private _tmpCanvas: HTMLCanvasElement;
   // A temporary context that glyphs are drawn to before being transfered to the atlas.
   private _tmpCtx: CanvasRenderingContext2D;
 
-  // Texture atlas current positioning data. The texture packing strategy used is to fill from
-  // left-to-right and top-to-bottom. When the glyph being written is less than half of the current
-  // row's height, the following happens:
-  //
-  // - The current row becomes the fixed height row A
-  // - A new fixed height row B the exact size of the glyph is created below the current row
-  // - A new dynamic height current row is created below B
-  //
-  // This strategy does a good job preventing space being wasted for very short glyphs such as
-  // underscores, hyphens etc. or those with underlines rendered.
-  private _currentRow: ICharAtlasActiveRow = {
-    x: 0,
-    y: 0,
-    height: 0
-  };
-  private readonly _fixedRows: ICharAtlasActiveRow[] = [];
-
-  public hasCanvasChanged = false;
-
   private _workBoundingBox: IBoundingBox = { top: 0, left: 0, bottom: 0, right: 0 };
   private _workAttributeData: AttributeData = new AttributeData();
 
+  private _textureSize: number = 512;
+
+  public static maxAtlasPages: number | undefined;
+  public static maxTextureSize: number | undefined;
+
+  private readonly _onAddTextureAtlasCanvas = new EventEmitter<HTMLCanvasElement>();
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+  private readonly _onRemoveTextureAtlasCanvas = new EventEmitter<HTMLCanvasElement>();
+  public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
+
   constructor(
-    document: Document,
+    private readonly _document: Document,
     private readonly _config: ICharAtlasConfig,
     private readonly _unicodeService: IUnicodeService
   ) {
-    this.cacheCanvas = document.createElement('canvas');
-    this.cacheCanvas.width = TEXTURE_WIDTH;
-    this.cacheCanvas.height = TEXTURE_HEIGHT;
-    // The canvas needs alpha because we use clearColor to convert the background color to alpha.
-    // It might also contain some characters with transparent backgrounds if allowTransparency is
-    // set.
-    this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', { alpha: true }));
-
-    this._tmpCanvas = document.createElement('canvas');
-    this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2;
-    this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2;
+    this._createNewPage();
+    this._tmpCanvas = createCanvas(
+      _document,
+      this._config.deviceCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2,
+      this._config.deviceCellHeight + TMP_CANVAS_GLYPH_PADDING * 2
+    );
     this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', {
       alpha: this._config.allowTransparency,
       willReadFrequently: true
@@ -107,9 +101,10 @@ export class TextureAtlas implements ITextureAtlas {
   }
 
   public dispose(): void {
-    if (this.cacheCanvas.parentElement) {
-      this.cacheCanvas.parentElement.removeChild(this.cacheCanvas);
+    for (const page of this.pages) {
+      page.canvas.remove();
     }
+    this._onAddTextureAtlasCanvas.dispose();
   }
 
   public warmUp(): void {
@@ -132,28 +127,119 @@ export class TextureAtlas implements ITextureAtlas {
     }
   }
 
+  private _requestClearModel = false;
   public beginFrame(): boolean {
-    if (this._currentRow.y > TEXTURE_CAPACITY) {
-      this.clearTexture();
-      this.warmUp();
-      return true;
-    }
-    return false;
+    return this._requestClearModel;
   }
 
   public clearTexture(): void {
-    if (this._currentRow.x === 0 && this._currentRow.y === 0) {
+    if (this._pages[0].currentRow.x === 0 && this._pages[0].currentRow.y === 0) {
       return;
     }
-    this._cacheCtx.clearRect(0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT);
+    for (const page of this._pages) {
+      page.clear();
+    }
     this._cacheMap.clear();
     this._cacheMapCombined.clear();
-    this._currentRow.x = 0;
-    this._currentRow.y = 0;
-    this._currentRow.height = 0;
-    this._fixedRows.length = 0;
     this._didWarmUp = false;
-    this.hasCanvasChanged = true;
+  }
+
+  private _createNewPage(): AtlasPage {
+    // Try merge the set of the 4 most used pages of the largest size. This is is deferred to a
+    // microtask to ensure it does not interrupt textures that will be rendered in the current
+    // animation frame which would result in blank rendered areas. This is actually not that
+    // expensive relative to drawing the glyphs, so there is no need to wait for an idle callback.
+    if (TextureAtlas.maxAtlasPages && this._pages.length >= Math.max(4, TextureAtlas.maxAtlasPages / 2)) {
+      queueMicrotask(() => {
+        // Find the set of the largest 4 images, below the maximum size, with the highest
+        // percentages used
+        const pagesBySize = this._pages.filter(e => {
+          return e.canvas.width * 2 <= (TextureAtlas.maxTextureSize || Constants.FORCED_MAX_TEXTURE_SIZE);
+        }).sort((a, b) => {
+          if (b.canvas.width !== a.canvas.width) {
+            return b.canvas.width - a.canvas.width;
+          }
+          return b.percentageUsed - a.percentageUsed;
+        });
+        let sameSizeI = -1;
+        let size = 0;
+        for (let i = 0; i < pagesBySize.length; i++) {
+          if (pagesBySize[i].canvas.width !== size) {
+            sameSizeI = i;
+            size = pagesBySize[i].canvas.width;
+          } else if (i - sameSizeI === 3) {
+            break;
+          }
+        }
+
+        // Gather details of the merge
+        const mergingPages = pagesBySize.slice(sameSizeI, sameSizeI + 4);
+        const sortedMergingPagesIndexes = mergingPages.map(e => e.glyphs[0].texturePage).sort((a, b) => a > b ? 1 : -1);
+        const mergedPageIndex = sortedMergingPagesIndexes[0];
+
+        // Merge into the new page
+        const mergedPage = this._mergePages(mergingPages, mergedPageIndex);
+        mergedPage.hasCanvasChanged = true;
+
+        // Replace the first _merging_ page with the _merged_ page
+        this._pages[mergedPageIndex] = mergedPage;
+
+        // Delete the other 3 pages, shifting glyph texture pages as needed
+        for (let i = sortedMergingPagesIndexes.length - 1; i >= 1; i--) {
+          this._deletePage(sortedMergingPagesIndexes[i]);
+        }
+
+        // Request the model to be cleared to refresh all texture pages.
+        this._requestClearModel = true;
+        this._onAddTextureAtlasCanvas.fire(mergedPage.canvas);
+      });
+    }
+
+    // All new atlas pages are created small as they are highly dynamic
+    const newPage = new AtlasPage(this._document, this._textureSize);
+    this._pages.push(newPage);
+    this._activePages.push(newPage);
+    this._onAddTextureAtlasCanvas.fire(newPage.canvas);
+    return newPage;
+  }
+
+  private _mergePages(mergingPages: AtlasPage[], mergedPageIndex: number): AtlasPage {
+    const mergedSize = mergingPages[0].canvas.width * 2;
+    const mergedPage = new AtlasPage(this._document, mergedSize, mergingPages);
+    for (const [i, p] of mergingPages.entries()) {
+      const xOffset = i * p.canvas.width % mergedSize;
+      const yOffset = Math.floor(i / 2) * p.canvas.height;
+      mergedPage.ctx.drawImage(p.canvas, xOffset, yOffset);
+      for (const g of p.glyphs) {
+        g.texturePage = mergedPageIndex;
+        g.sizeClipSpace.x = g.size.x / mergedSize;
+        g.sizeClipSpace.y = g.size.y / mergedSize;
+        g.texturePosition.x += xOffset;
+        g.texturePosition.y += yOffset;
+        g.texturePositionClipSpace.x = g.texturePosition.x / mergedSize;
+        g.texturePositionClipSpace.y = g.texturePosition.y / mergedSize;
+      }
+
+      this._onRemoveTextureAtlasCanvas.fire(p.canvas);
+
+      // Remove the merging page from active pages if it was there
+      const index = this._activePages.indexOf(p);
+      if (index !== -1) {
+        this._activePages.splice(index, 1);
+      }
+    }
+    return mergedPage;
+  }
+
+  private _deletePage(pageIndex: number): void {
+    this._pages.splice(pageIndex, 1);
+    for (let j = pageIndex; j < this._pages.length; j++) {
+      const adjustingPage = this._pages[j];
+      for (const g of adjustingPage.glyphs) {
+        g.texturePage--;
+      }
+      adjustingPage.hasCanvasChanged = true;
+    }
   }
 
   public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number): IRasterizedGlyph {
@@ -340,17 +426,15 @@ export class TextureAtlas implements ITextureAtlas {
     // Uncomment for debugging
     // console.log(`draw to cache "${chars}"`, bg, fg, ext);
 
-    this.hasCanvasChanged = true;
-
     // Allow 1 cell width per character, with a minimum of 2 (CJK), plus some padding. This is used
     // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure
     // giant ligatures (eg. =====>) don't impact overall performance.
-    const allowedWidth = this._config.scaledCellWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2;
+    const allowedWidth = this._config.deviceCellWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2;
     if (this._tmpCanvas.width < allowedWidth) {
       this._tmpCanvas.width = allowedWidth;
     }
     // Include line height when drawing glyphs
-    const allowedHeight = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 4;
+    const allowedHeight = this._config.deviceCellHeight + TMP_CANVAS_GLYPH_PADDING * 4;
     if (this._tmpCanvas.height < allowedHeight) {
       this._tmpCanvas.height = allowedHeight;
     }
@@ -411,7 +495,7 @@ export class TextureAtlas implements ITextureAtlas {
     // Draw custom characters if applicable
     let customGlyph = false;
     if (this._config.customGlyphs !== false) {
-      customGlyph = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight, this._config.fontSize, this._config.devicePixelRatio);
+      customGlyph = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight, this._config.fontSize, this._config.devicePixelRatio);
     }
 
     // Whether to clear pixels based on a threshold difference between the glyph color and the
@@ -452,15 +536,15 @@ export class TextureAtlas implements ITextureAtlas {
       // Underline style/stroke
       this._tmpCtx.beginPath();
       const xLeft = padding;
-      const yTop = Math.ceil(padding + this._config.scaledCharHeight) - yOffset;
-      const yMid = padding + this._config.scaledCharHeight + lineWidth - yOffset;
-      const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth * 2) - yOffset;
+      const yTop = Math.ceil(padding + this._config.deviceCharHeight) - yOffset;
+      const yMid = padding + this._config.deviceCharHeight + lineWidth - yOffset;
+      const yBot = Math.ceil(padding + this._config.deviceCharHeight + lineWidth * 2) - yOffset;
 
       for (let i = 0; i < chWidth; i++) {
         this._tmpCtx.save();
-        const xChLeft = xLeft + i * this._config.scaledCellWidth;
-        const xChRight = xLeft + (i + 1) * this._config.scaledCellWidth;
-        const xChMid = xChLeft + this._config.scaledCellWidth / 2;
+        const xChLeft = xLeft + i * this._config.deviceCellWidth;
+        const xChRight = xLeft + (i + 1) * this._config.deviceCellWidth;
+        const xChMid = xChLeft + this._config.deviceCellWidth / 2;
         switch (this._workAttributeData.extended.underlineStyle) {
           case UnderlineStyle.DOUBLE:
             this._tmpCtx.moveTo(xChLeft, yTop);
@@ -471,18 +555,18 @@ export class TextureAtlas implements ITextureAtlas {
           case UnderlineStyle.CURLY:
             // Choose the bezier top and bottom based on the device pixel ratio, the curly line is
             // made taller when the line width is  as otherwise it's not very clear otherwise.
-            const yCurlyBot = lineWidth <= 1 ? yBot : Math.ceil(padding + this._config.scaledCharHeight - lineWidth / 2) - yOffset;
-            const yCurlyTop = lineWidth <= 1 ? yTop : Math.ceil(padding + this._config.scaledCharHeight + lineWidth / 2) - yOffset;
+            const yCurlyBot = lineWidth <= 1 ? yBot : Math.ceil(padding + this._config.deviceCharHeight - lineWidth / 2) - yOffset;
+            const yCurlyTop = lineWidth <= 1 ? yTop : Math.ceil(padding + this._config.deviceCharHeight + lineWidth / 2) - yOffset;
             // Clip the left and right edges of the underline such that it can be drawn just outside
             // the edge of the cell to ensure a continuous stroke when there are multiple underlined
             // glyphs adjacent to one another.
             const clipRegion = new Path2D();
-            clipRegion.rect(xChLeft, yTop, this._config.scaledCellWidth, yBot - yTop);
+            clipRegion.rect(xChLeft, yTop, this._config.deviceCellWidth, yBot - yTop);
             this._tmpCtx.clip(clipRegion);
             // Start 1/2 cell before and end 1/2 cells after to ensure a smooth curve with other cells
-            this._tmpCtx.moveTo(xChLeft - this._config.scaledCellWidth / 2, yMid);
+            this._tmpCtx.moveTo(xChLeft - this._config.deviceCellWidth / 2, yMid);
             this._tmpCtx.bezierCurveTo(
-              xChLeft - this._config.scaledCellWidth / 2, yCurlyTop,
+              xChLeft - this._config.deviceCellWidth / 2, yCurlyTop,
               xChLeft, yCurlyTop,
               xChLeft, yMid
             );
@@ -498,8 +582,8 @@ export class TextureAtlas implements ITextureAtlas {
             );
             this._tmpCtx.bezierCurveTo(
               xChRight, yCurlyBot,
-              xChRight + this._config.scaledCellWidth / 2, yCurlyBot,
-              xChRight + this._config.scaledCellWidth / 2, yMid
+              xChRight + this._config.deviceCellWidth / 2, yCurlyBot,
+              xChRight + this._config.deviceCellWidth / 2, yMid
             );
             break;
           case UnderlineStyle.DOTTED:
@@ -543,11 +627,11 @@ export class TextureAtlas implements ITextureAtlas {
             // outline around the whole glyph, as well as additional pixels in the glyph at the top
             // which would increase GPU memory demands
             const clipRegion = new Path2D();
-            clipRegion.rect(xLeft, yTop - Math.ceil(lineWidth / 2), this._config.scaledCellWidth, yBot - yTop + Math.ceil(lineWidth / 2));
+            clipRegion.rect(xLeft, yTop - Math.ceil(lineWidth / 2), this._config.deviceCellWidth, yBot - yTop + Math.ceil(lineWidth / 2));
             this._tmpCtx.clip(clipRegion);
             this._tmpCtx.lineWidth = this._config.devicePixelRatio * 3;
             this._tmpCtx.strokeStyle = backgroundColor.css;
-            this._tmpCtx.strokeText(chars, padding, padding + this._config.scaledCharHeight);
+            this._tmpCtx.strokeText(chars, padding, padding + this._config.deviceCharHeight);
             this._tmpCtx.restore();
           }
         }
@@ -556,21 +640,21 @@ export class TextureAtlas implements ITextureAtlas {
 
     // Draw the character
     if (!customGlyph) {
-      this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
+      this._tmpCtx.fillText(chars, padding, padding + this._config.deviceCharHeight);
     }
 
     // If this charcater is underscore and beyond the cell bounds, shift it up until it is visible
     // even on the bottom row, try for a maximum of 5 pixels.
     if (chars === '_' && !this._config.allowTransparency) {
-      let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor, foregroundColor, enableClearThresholdCheck);
+      let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight), backgroundColor, foregroundColor, enableClearThresholdCheck);
       if (isBeyondCellBounds) {
         for (let offset = 1; offset <= 5; offset++) {
           this._tmpCtx.save();
           this._tmpCtx.fillStyle = backgroundColor.css;
           this._tmpCtx.fillRect(0, 0, this._tmpCanvas.width, this._tmpCanvas.height);
           this._tmpCtx.restore();
-          this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight - offset);
-          isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor, foregroundColor, enableClearThresholdCheck);
+          this._tmpCtx.fillText(chars, padding, padding + this._config.deviceCharHeight - offset);
+          isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight), backgroundColor, foregroundColor, enableClearThresholdCheck);
           if (!isBeyondCellBounds) {
             break;
           }
@@ -585,8 +669,8 @@ export class TextureAtlas implements ITextureAtlas {
       this._tmpCtx.lineWidth = lineWidth;
       this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle;
       this._tmpCtx.beginPath();
-      this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);
-      this._tmpCtx.lineTo(padding + this._config.scaledCharWidth * chWidth, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);
+      this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.deviceCharHeight / 2) - yOffset);
+      this._tmpCtx.lineTo(padding + this._config.deviceCharWidth * chWidth, padding + Math.floor(this._config.deviceCharHeight / 2) - yOffset);
       this._tmpCtx.stroke();
     }
 
@@ -612,63 +696,119 @@ export class TextureAtlas implements ITextureAtlas {
     }
 
     const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, restrictedPowerlineGlyph, customGlyph, padding);
-    const clippedImageData = this._clipImageData(imageData, this._workBoundingBox);
 
     // Find the best atlas row to use
+    let activePage: AtlasPage;
     let activeRow: ICharAtlasActiveRow;
     while (true) {
-      // Select the ideal existing row, preferring fixed rows over the current row
-      activeRow = this._currentRow;
-      for (const row of this._fixedRows) {
-        if ((activeRow === this._currentRow || row.height < activeRow.height) && rasterizedGlyph.size.y <= row.height) {
-          activeRow = row;
-        }
-      }
-
-      // Create a new one if vertical space would be wasted, fixing the previously active row in the
-      // process as it now has a fixed height
-      if (activeRow.height > rasterizedGlyph.size.y * 2) {
-        // Fix the current row as the new row is being added below
-        if (this._currentRow.height > 0) {
-          this._fixedRows.push(this._currentRow);
-        }
-
-        // Create the new fixed height row
-        activeRow = {
-          x: 0,
-          y: this._currentRow.y + this._currentRow.height,
-          height: rasterizedGlyph.size.y
-        };
-        this._fixedRows.push(activeRow);
-
-        // Create the new current row below the new fixed height row
-        this._currentRow = {
-          x: 0,
-          y: activeRow.y + activeRow.height,
-          height: 0
-        };
-      }
-
-      // Exit the loop if there is enough room in the row
-      if (activeRow.x + rasterizedGlyph.size.x <= TEXTURE_WIDTH) {
+      // If there are no active pages (the last smallest 4 were merged), create a new one
+      if (this._activePages.length === 0) {
+        const newPage = this._createNewPage();
+        activePage = newPage;
+        activeRow = newPage.currentRow;
+        activeRow.height = rasterizedGlyph.size.y;
         break;
       }
 
-      // If there is enough room in the current row, finish it and try again
-      if (activeRow === this._currentRow) {
+      // Get the best current row from all active pages
+      activePage = this._activePages[this._activePages.length - 1];
+      activeRow = activePage.currentRow;
+      for (const p of this._activePages) {
+        if (rasterizedGlyph.size.y <= p.currentRow.height) {
+          activePage = p;
+          activeRow = p.currentRow;
+        }
+      }
+
+      // TODO: This algorithm could be simplified:
+      // - Search for the page with ROW_PIXEL_THRESHOLD in mind
+      // - Keep track of current/fixed rows in a Map
+
+      // Replace the best current row with a fixed row if there is one at least as good as the
+      // current row. Search in reverse to prioritize filling in older pages.
+      for (let i = this._activePages.length - 1; i >= 0; i--) {
+        for (const row of this._activePages[i].fixedRows) {
+          if (row.height <= activeRow.height && rasterizedGlyph.size.y <= row.height) {
+            activePage = this._activePages[i];
+            activeRow = row;
+          }
+        }
+      }
+
+      // Create a new one if too much vertical space would be wasted or there is not enough room
+      // left in the page. The previous active row will become fixed in the process as it now has a
+      // fixed height
+      if (activeRow.y + rasterizedGlyph.size.y >= activePage.canvas.height || activeRow.height > rasterizedGlyph.size.y + Constants.ROW_PIXEL_THRESHOLD) {
+        // Create the new fixed height row, creating a new page if there isn't enough room on the
+        // current page
+        let wasNewPageCreated = false;
+        if (activePage.currentRow.y + activePage.currentRow.height + rasterizedGlyph.size.y >= activePage.canvas.height) {
+          // Find the first page with room to create the new row on
+          let candidatePage: AtlasPage | undefined;
+          for (const p of this._activePages) {
+            if (p.currentRow.y + p.currentRow.height + rasterizedGlyph.size.y < p.canvas.height) {
+              candidatePage = p;
+              break;
+            }
+          }
+          if (candidatePage) {
+            activePage = candidatePage;
+          } else {
+            // Create a new page if there is no room
+            const newPage = this._createNewPage();
+            activePage = newPage;
+            activeRow = newPage.currentRow;
+            activeRow.height = rasterizedGlyph.size.y;
+            wasNewPageCreated = true;
+          }
+        }
+        if (!wasNewPageCreated) {
+          // Fix the current row as the new row is being added below
+          if (activePage.currentRow.height > 0) {
+            activePage.fixedRows.push(activePage.currentRow);
+          }
+          activeRow = {
+            x: 0,
+            y: activePage.currentRow.y + activePage.currentRow.height,
+            height: rasterizedGlyph.size.y
+          };
+          activePage.fixedRows.push(activeRow);
+
+          // Create the new current row below the new fixed height row
+          activePage.currentRow = {
+            x: 0,
+            y: activeRow.y + activeRow.height,
+            height: 0
+          };
+        }
+        // TODO: Remove pages from _activePages when all rows are filled
+      }
+
+      // Exit the loop if there is enough room in the row
+      if (activeRow.x + rasterizedGlyph.size.x <= activePage.canvas.width) {
+        break;
+      }
+
+      // If there is not enough room in the current row, finish it and try again
+      if (activeRow === activePage.currentRow) {
         activeRow.x = 0;
         activeRow.y += activeRow.height;
         activeRow.height = 0;
       } else {
-        this._fixedRows.splice(this._fixedRows.indexOf(activeRow), 1);
+        activePage.fixedRows.splice(activePage.fixedRows.indexOf(activeRow), 1);
       }
     }
 
     // Record texture position
+    rasterizedGlyph.texturePage = this._pages.indexOf(activePage);
     rasterizedGlyph.texturePosition.x = activeRow.x;
     rasterizedGlyph.texturePosition.y = activeRow.y;
-    rasterizedGlyph.texturePositionClipSpace.x = activeRow.x / TEXTURE_WIDTH;
-    rasterizedGlyph.texturePositionClipSpace.y = activeRow.y / TEXTURE_HEIGHT;
+    rasterizedGlyph.texturePositionClipSpace.x = activeRow.x / activePage.canvas.width;
+    rasterizedGlyph.texturePositionClipSpace.y = activeRow.y / activePage.canvas.height;
+
+    // Fix the clipspace position as pages may be of differing size
+    rasterizedGlyph.sizeClipSpace.x /= activePage.canvas.width;
+    rasterizedGlyph.sizeClipSpace.y /= activePage.canvas.height;
 
     // Update atlas current row, for fixed rows the glyph height will never be larger than the row
     // height
@@ -676,7 +816,17 @@ export class TextureAtlas implements ITextureAtlas {
     activeRow.x += rasterizedGlyph.size.x;
 
     // putImageData doesn't do any blending, so it will overwrite any existing cache entry for us
-    this._cacheCtx.putImageData(clippedImageData, rasterizedGlyph.texturePosition.x, rasterizedGlyph.texturePosition.y);
+    activePage.ctx.putImageData(
+      imageData,
+      rasterizedGlyph.texturePosition.x - this._workBoundingBox.left,
+      rasterizedGlyph.texturePosition.y - this._workBoundingBox.top,
+      this._workBoundingBox.left,
+      this._workBoundingBox.top,
+      rasterizedGlyph.size.x,
+      rasterizedGlyph.size.y
+    );
+    activePage.addGlyph(rasterizedGlyph);
+    activePage.hasCanvasChanged = true;
 
     return rasterizedGlyph;
   }
@@ -690,8 +840,8 @@ export class TextureAtlas implements ITextureAtlas {
    */
   private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean, customGlyph: boolean, padding: number): IRasterizedGlyph {
     boundingBox.top = 0;
-    const height = restrictedGlyph ? this._config.scaledCellHeight : this._tmpCanvas.height;
-    const width = restrictedGlyph ? this._config.scaledCellWidth : allowedWidth;
+    const height = restrictedGlyph ? this._config.deviceCellHeight : this._tmpCanvas.height;
+    const width = restrictedGlyph ? this._config.deviceCellWidth : allowedWidth;
     let found = false;
     for (let y = 0; y < height; y++) {
       for (let x = 0; x < width; x++) {
@@ -708,7 +858,7 @@ export class TextureAtlas implements ITextureAtlas {
     }
     boundingBox.left = 0;
     found = false;
-    for (let x = 0; x < width; x++) {
+    for (let x = 0; x < padding + width; x++) {
       for (let y = 0; y < height; y++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
@@ -723,7 +873,7 @@ export class TextureAtlas implements ITextureAtlas {
     }
     boundingBox.right = width;
     found = false;
-    for (let x = width - 1; x >= 0; x--) {
+    for (let x = padding + width - 1; x >= padding; x--) {
       for (let y = 0; y < height; y++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
@@ -752,6 +902,7 @@ export class TextureAtlas implements ITextureAtlas {
       }
     }
     return {
+      texturePage: 0,
       texturePosition: { x: 0, y: 0 },
       texturePositionClipSpace: { x: 0, y: 0 },
       size: {
@@ -759,31 +910,79 @@ export class TextureAtlas implements ITextureAtlas {
         y: boundingBox.bottom - boundingBox.top + 1
       },
       sizeClipSpace: {
-        x: (boundingBox.right - boundingBox.left + 1) / TEXTURE_WIDTH,
-        y: (boundingBox.bottom - boundingBox.top + 1) / TEXTURE_HEIGHT
+        x: (boundingBox.right - boundingBox.left + 1),
+        y: (boundingBox.bottom - boundingBox.top + 1)
       },
       offset: {
-        x: -boundingBox.left + padding + ((restrictedGlyph || customGlyph) ? Math.floor((this._config.scaledCellWidth - this._config.scaledCharWidth) / 2) : 0),
-        y: -boundingBox.top + padding + ((restrictedGlyph || customGlyph) ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.scaledCellHeight - this._config.scaledCharHeight) / 2) : 0)
+        x: -boundingBox.left + padding + ((restrictedGlyph || customGlyph) ? Math.floor((this._config.deviceCellWidth - this._config.deviceCharWidth) / 2) : 0),
+        y: -boundingBox.top + padding + ((restrictedGlyph || customGlyph) ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.deviceCellHeight - this._config.deviceCharHeight) / 2) : 0)
       }
     };
   }
+}
 
-  private _clipImageData(imageData: ImageData, boundingBox: IBoundingBox): ImageData {
-    const width = boundingBox.right - boundingBox.left + 1;
-    const height = boundingBox.bottom - boundingBox.top + 1;
-    const clippedData = new Uint8ClampedArray(width * height * 4);
-    for (let y = boundingBox.top; y <= boundingBox.bottom; y++) {
-      for (let x = boundingBox.left; x <= boundingBox.right; x++) {
-        const oldOffset = y * this._tmpCanvas.width * 4 + x * 4;
-        const newOffset = (y - boundingBox.top) * width * 4 + (x - boundingBox.left) * 4;
-        clippedData[newOffset] = imageData.data[oldOffset];
-        clippedData[newOffset + 1] = imageData.data[oldOffset + 1];
-        clippedData[newOffset + 2] = imageData.data[oldOffset + 2];
-        clippedData[newOffset + 3] = imageData.data[oldOffset + 3];
+class AtlasPage {
+  public readonly canvas: HTMLCanvasElement;
+  public readonly ctx: CanvasRenderingContext2D;
+
+  private _usedPixels: number = 0;
+  public get percentageUsed(): number { return this._usedPixels / (this.canvas.width * this.canvas.height); }
+
+  private readonly _glyphs: IRasterizedGlyph[] = [];
+  public get glyphs(): ReadonlyArray<IRasterizedGlyph> { return this._glyphs; }
+  public addGlyph(glyph: IRasterizedGlyph): void {
+    this._glyphs.push(glyph);
+    this._usedPixels += glyph.size.x * glyph.size.y;
+  }
+
+  /**
+   * Whether the canvas of the atlas page has changed, this is only set to true by the atlas, the
+   * user of the boolean is required to reset its value to false.
+   */
+  public hasCanvasChanged = false;
+
+  // Texture atlas current positioning data. The texture packing strategy used is to fill from
+  // left-to-right and top-to-bottom. When the glyph being written is less than half of the current
+  // row's height, the following happens:
+  //
+  // - The current row becomes the fixed height row A
+  // - A new fixed height row B the exact size of the glyph is created below the current row
+  // - A new dynamic height current row is created below B
+  //
+  // This strategy does a good job preventing space being wasted for very short glyphs such as
+  // underscores, hyphens etc. or those with underlines rendered.
+  public currentRow: ICharAtlasActiveRow = {
+    x: 0,
+    y: 0,
+    height: 0
+  };
+  public readonly fixedRows: ICharAtlasActiveRow[] = [];
+
+  constructor(
+    document: Document,
+    size: number,
+    sourcePages?: AtlasPage[]
+  ) {
+    if (sourcePages) {
+      for (const p of sourcePages) {
+        this._glyphs.push(...p.glyphs);
+        this._usedPixels += p._usedPixels;
       }
     }
-    return new ImageData(clippedData, width, height);
+    this.canvas = createCanvas(document, size, size);
+    // The canvas needs alpha because we use clearColor to convert the background color to alpha.
+    // It might also contain some characters with transparent backgrounds if allowTransparency is
+    // set.
+    this.ctx = throwIfFalsy(this.canvas.getContext('2d', { alpha: true }));
+  }
+
+  public clear(): void {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.currentRow.x = 0;
+    this.currentRow.y = 0;
+    this.currentRow.height = 0;
+    this.fixedRows.length = 0;
+    this.hasCanvasChanged = true;
   }
 }
 
@@ -841,3 +1040,10 @@ function checkCompletelyTransparent(imageData: ImageData): boolean {
   }
   return true;
 }
+
+function createCanvas(document: Document, width: number, height: number): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}

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

@@ -4,7 +4,7 @@
  */
 
 import { FontWeight, Terminal } from 'xterm';
-import { IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { IColorSet } from 'browser/Types';
 import { IDisposable } from 'common/Types';
 import { IEvent } from 'common/EventEmitter';
 
@@ -17,29 +17,42 @@ export interface ICharAtlasConfig {
   fontFamily: string;
   fontWeight: FontWeight;
   fontWeightBold: FontWeight;
-  scaledCellWidth: number;
-  scaledCellHeight: number;
-  scaledCharWidth: number;
-  scaledCharHeight: number;
+  deviceCellWidth: number;
+  deviceCellHeight: number;
+  deviceCharWidth: number;
+  deviceCharHeight: number;
   allowTransparency: boolean;
   drawBoldTextInBrightColors: boolean;
   minimumContrastRatio: number;
   colors: IColorSet;
 }
 
+export interface IDimensions {
+  width: number;
+  height: number;
+}
+
+export interface IOffset {
+  top: number;
+  left: number;
+}
+
 export interface IRenderDimensions {
-  scaledCharWidth: number;
-  scaledCharHeight: number;
-  scaledCellWidth: number;
-  scaledCellHeight: number;
-  scaledCharLeft: number;
-  scaledCharTop: number;
-  scaledCanvasWidth: number;
-  scaledCanvasHeight: number;
-  canvasWidth: number;
-  canvasHeight: number;
-  actualCellWidth: number;
-  actualCellHeight: number;
+  /**
+   * Dimensions measured in CSS pixels (ie. device pixels / device pixel ratio).
+   */
+  css: {
+    canvas: IDimensions;
+    cell: IDimensions;
+  };
+  /**
+   * Dimensions measured in actual pixels as rendered to the device.
+   */
+  device: {
+    canvas: IDimensions;
+    cell: IDimensions;
+    char: IDimensions & IOffset;
+  };
 }
 
 export interface IRequestRedrawEvent {
@@ -68,15 +81,16 @@ export interface IRenderer extends IDisposable {
   handleFocus(): void;
   handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
   handleCursorMove(): void;
-  handleOptionsChanged(): void;
   clear(): void;
   renderRows(start: number, end: number): void;
   clearTextureAtlas?(): void;
 }
 
 export interface ITextureAtlas extends IDisposable {
-  readonly cacheCanvas: HTMLCanvasElement;
-  hasCanvasChanged: boolean;
+  readonly pages: { canvas: HTMLCanvasElement, hasCanvasChanged: boolean }[];
+
+  onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+  onRemoveTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
 
   /**
    * Warm up the texture atlas, adding common glyphs to avoid slowing early frame.
@@ -108,6 +122,10 @@ export interface IRasterizedGlyph {
    * in pixels.
    */
   offset: IVector;
+  /**
+   * The index of the texture page that the glyph is on.
+   */
+  texturePage: number;
   /**
    * the x and y position of the glyph in the texture in pixels.
    */

src/browser/selection/SelectionModel.ts

@@ -118,7 +118,7 @@ export class SelectionModel {
   /**
    * Handle the buffer being trimmed, adjust the selection position.
    * @param amount The amount the buffer is being trimmed.
-   * @return Whether a refresh is necessary.
+   * @returns Whether a refresh is necessary.
    */
   public handleTrim(amount: number): boolean {
     // Adjust the selection position based on the trimmed amount.

src/browser/services/CharSizeService.ts

@@ -7,6 +7,7 @@ import { IOptionsService } from 'common/services/Services';
 import { EventEmitter } from 'common/EventEmitter';
 import { ICharSizeService } from 'browser/services/Services';
 import { Disposable } from 'common/Lifecycle';
+import { ITerminalOptions } from 'common/Types';
 
 export class CharSizeService extends Disposable implements ICharSizeService {
   public serviceBrand: undefined;
@@ -27,6 +28,7 @@ export class CharSizeService extends Disposable implements ICharSizeService {
   ) {
     super();
     this._measureStrategy = new DomMeasureStrategy(document, parentElement, this._optionsService);
+    this.register(this._optionsService.onMultipleOptionChange(['fontFamily', 'fontSize'], () => this.measure()));
   }
 
   public measure(): void {

src/browser/services/CoreBrowserService.ts

@@ -8,10 +8,15 @@ import { ICoreBrowserService } from './Services';
 export class CoreBrowserService implements ICoreBrowserService {
   public serviceBrand: undefined;
 
+  private _isFocused = false;
+  private _cachedIsFocused: boolean | undefined = undefined;
+
   constructor(
     private _textarea: HTMLTextAreaElement,
     public readonly window: Window & typeof globalThis
   ) {
+    this._textarea.addEventListener('focus', () => this._isFocused = true);
+    this._textarea.addEventListener('blur', () => this._isFocused = false);
   }
 
   public get dpr(): number {
@@ -19,7 +24,10 @@ export class CoreBrowserService implements ICoreBrowserService {
   }
 
   public get isFocused(): boolean {
-    const docOrShadowRoot = this._textarea.getRootNode ? this._textarea.getRootNode() as Document | ShadowRoot : this._textarea.ownerDocument;
-    return docOrShadowRoot.activeElement === this._textarea && this._textarea.ownerDocument.hasFocus();
+    if (this._cachedIsFocused === undefined) {
+      this._cachedIsFocused = this._isFocused && this._textarea.ownerDocument.hasFocus();
+      queueMicrotask(() => this._cachedIsFocused = undefined);
+    }
+    return this._cachedIsFocused;
   }
 }

src/browser/services/MouseService.ts

@@ -23,8 +23,8 @@ export class MouseService implements IMouseService {
       colCount,
       rowCount,
       this._charSizeService.hasValidSize,
-      this._renderService.dimensions.actualCellWidth,
-      this._renderService.dimensions.actualCellHeight,
+      this._renderService.dimensions.css.cell.width,
+      this._renderService.dimensions.css.cell.height,
       isSelection
     );
   }
@@ -37,14 +37,14 @@ export class MouseService implements IMouseService {
     if (!this._charSizeService.hasValidSize
       || coords[0] < 0
       || coords[1] < 0
-      || coords[0] >= this._renderService.dimensions.canvasWidth
-      || coords[1] >= this._renderService.dimensions.canvasHeight) {
+      || coords[0] >= this._renderService.dimensions.css.canvas.width
+      || coords[1] >= this._renderService.dimensions.css.canvas.height) {
       return undefined;
     }
 
     return {
-      col: Math.floor(coords[0] / this._renderService.dimensions.actualCellWidth),
-      row: Math.floor(coords[1] / this._renderService.dimensions.actualCellHeight),
+      col: Math.floor(coords[0] / this._renderService.dimensions.css.cell.width),
+      row: Math.floor(coords[1] / this._renderService.dimensions.css.cell.height),
       x: Math.floor(coords[0]),
       y: Math.floor(coords[1])
     };

src/browser/services/RenderService.ts

@@ -84,8 +84,28 @@ export class RenderService extends Disposable implements IRenderService {
     this.register(decorationService.onDecorationRegistered(() => this._fullRefresh()));
     this.register(decorationService.onDecorationRemoved(() => this._fullRefresh()));
 
-    // No need to register this as renderer is explicitly disposed in RenderService.dispose
-    // this._renderer.onRequestRedraw(e => this.refreshRows(e.start, e.end, true));
+    // Clear the renderer when the a change that could affect glyphs occurs
+    this.register(optionsService.onMultipleOptionChange([
+      'customGlyphs',
+      'drawBoldTextInBrightColors',
+      'letterSpacing',
+      'lineHeight',
+      'fontFamily',
+      'fontSize',
+      'fontWeight',
+      'fontWeightBold',
+      'minimumContrastRatio'
+    ], () => {
+      this.clear();
+      this.handleResize(bufferService.cols, bufferService.rows);
+      this._fullRefresh();
+    }));
+
+    // Refresh the cursor line when the cursor changes
+    this.register(optionsService.onMultipleOptionChange([
+      'cursorBlink',
+      'cursorStyle'
+    ], () => this.refreshRows(bufferService.buffer.y, bufferService.buffer.y, true)));
 
     // dprchange should handle this case, we need this as well for browsers that don't support the
     // matchMedia query.
@@ -157,7 +177,6 @@ export class RenderService extends Disposable implements IRenderService {
     if (!this._renderer) {
       return;
     }
-    this._renderer.handleOptionsChanged();
     this.refreshRows(0, this._rowCount - 1);
     this._fireOnCanvasResize();
   }
@@ -167,7 +186,7 @@ export class RenderService extends Disposable implements IRenderService {
       return;
     }
     // Don't fire the event if the dimensions haven't changed
-    if (this._renderer.dimensions.canvasWidth === this._canvasWidth && this._renderer.dimensions.canvasHeight === this._canvasHeight) {
+    if (this._renderer.dimensions.css.canvas.width === this._canvasWidth && this._renderer.dimensions.css.canvas.height === this._canvasHeight) {
       return;
     }
     this._onDimensionsChange.fire(this._renderer.dimensions);

src/browser/services/SelectionService.test.ts

@@ -49,8 +49,8 @@ describe('SelectionService', () => {
     bufferService = new MockBufferService(20, 20, optionsService);
     buffer = bufferService.buffer;
     const renderService = new MockRenderService();
-    renderService.dimensions.canvasHeight = 10 * 20;
-    renderService.dimensions.canvasWidth = 10 * 20;
+    renderService.dimensions.css.canvas.height = 10 * 20;
+    renderService.dimensions.css.canvas.width = 10 * 20;
     selectionService = new TestSelectionService(bufferService, optionsService, renderService);
   });
 

src/browser/services/SelectionService.ts

@@ -408,7 +408,7 @@ export class SelectionService extends Disposable implements ISelectionService {
    */
   private _getMouseEventScrollAmount(event: MouseEvent): number {
     let offset = getCoordsRelativeToElement(this._coreBrowserService.window, event, this._screenElement)[1];
-    const terminalHeight = this._renderService.dimensions.canvasHeight;
+    const terminalHeight = this._renderService.dimensions.css.canvas.height;
     if (offset >= 0 && offset <= terminalHeight) {
       return 0;
     }
@@ -757,19 +757,20 @@ export class SelectionService extends Disposable implements ISelectionService {
   }
 
   /**
-   * Converts a viewport column to the character index on the buffer line, the
-   * latter takes into account wide characters.
-   * @param coords The coordinates to find the 2 index for.
+   * Converts a viewport column (0 to cols - 1) to the character index on the
+   * buffer line, the latter takes into account wide and null characters.
+   * @param bufferLine The buffer line to use.
+   * @param x The x index in the buffer line to convert.
    */
-  private _convertViewportColToCharacterIndex(bufferLine: IBufferLine, coords: [number, number]): number {
-    let charIndex = coords[0];
-    for (let i = 0; coords[0] >= i; i++) {
+  private _convertViewportColToCharacterIndex(bufferLine: IBufferLine, x: number): number {
+    let charIndex = x;
+    for (let i = 0; x >= i; i++) {
       const length = bufferLine.loadCell(i, this._workCell).getChars().length;
       if (this._workCell.getWidth() === 0) {
         // Wide characters aren't included in the line string so decrement the
         // index so the index is back on the wide character.
         charIndex--;
-      } else if (length > 1 && coords[0] !== i) {
+      } else if (length > 1 && x !== i) {
         // Emojis take up multiple characters, so adjust accordingly. For these
         // we don't want ot include the character at the column as we're
         // returning the start index in the string, not the end index.
@@ -816,7 +817,7 @@ export class SelectionService extends Disposable implements ISelectionService {
     const line = buffer.translateBufferLineToString(coords[1], false);
 
     // Get actual index, taking into consideration wide characters
-    let startIndex = this._convertViewportColToCharacterIndex(bufferLine, coords);
+    let startIndex = this._convertViewportColToCharacterIndex(bufferLine, coords[0]);
     let endIndex = startIndex;
 
     // Record offset to be used later
@@ -1000,7 +1001,7 @@ export class SelectionService extends Disposable implements ISelectionService {
   /**
    * Gets whether the character is considered a word separator by the select
    * word logic.
-   * @param char The character to check.
+   * @param cell The cell to check.
    */
   private _isCharWordSeparator(cell: CellData): boolean {
     // Zero width characters are never separators as they are always to the

src/browser/services/ThemeService.ts

@@ -111,16 +111,8 @@ export class ThemeService extends Disposable implements IThemeService {
     this._updateRestoreColors();
     this._setTheme(this._optionsService.rawOptions.theme);
 
-    this.register(this._optionsService.onOptionChange(key => {
-      switch (key) {
-        case 'minimumContrastRatio':
-          this._contrastCache.clear();
-          break;
-        case 'theme':
-          this._setTheme(this._optionsService.rawOptions.theme);
-          break;
-      }
-    }));
+    this.register(this._optionsService.onSpecificOptionChange('minimumContrastRatio', () => this._contrastCache.clear()));
+    this.register(this._optionsService.onSpecificOptionChange('theme', () => this._setTheme(this._optionsService.rawOptions.theme)));
   }
 
   /**

src/common/CircularList.ts

@@ -82,7 +82,7 @@ export class CircularList<T> extends Disposable implements ICircularList<T> {
    * Note that for performance reasons there is no bounds checking here, the index reference is
    * circular so this should always return a value and never throw.
    * @param index The index of the value to get.
-   * @return The value corresponding to the index.
+   * @returns The value corresponding to the index.
    */
   public get(index: number): T | undefined {
     return this._array[this._getCyclicIndex(index)];
@@ -138,7 +138,7 @@ export class CircularList<T> extends Disposable implements ICircularList<T> {
 
   /**
    * Removes and returns the last value on the list.
-   * @return The popped value.
+   * @returns The popped value.
    */
   public pop(): T | undefined {
     return this._array[this._getCyclicIndex(this._length-- - 1)];

src/common/CoreTerminal.ts

@@ -130,7 +130,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this.register(forwardEvent(this.coreService.onData, this._onData));
     this.register(forwardEvent(this.coreService.onBinary, this._onBinary));
     this.register(this.coreService.onUserInput(() =>  this._writeBuffer.handleUserInput()));
-    this.register(this.optionsService.onOptionChange(key => this._updateOptions(key)));
+    this.register(this.optionsService.onSpecificOptionChange('windowsMode', e => this._handleWindowsModeOptionChange(e)));
     this.register(this._bufferService.onScroll(event => {
       this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL });
       this._inputHandler.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom);
@@ -184,6 +184,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
 
   /**
    * Scroll the terminal down 1 row, creating a blank line.
+   * @param eraseAttr The attribute data to use the for blank line.
    * @param isWrapped Whether the new line is wrapped from the previous line.
    */
   public scroll(eraseAttr: IAttributeData, isWrapped: boolean = false): void {
@@ -261,20 +262,12 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this.coreMouseService.reset();
   }
 
-  protected _updateOptions(key: string): void {
-    // TODO: These listeners should be owned by individual components
-    switch (key) {
-      case 'scrollback':
-        this.buffers.resize(this.cols, this.rows);
-        break;
-      case 'windowsMode':
-        if (this.optionsService.rawOptions.windowsMode) {
-          this._enableWindowsMode();
-        } else {
-          this._windowsMode?.dispose();
-          this._windowsMode = undefined;
-        }
-        break;
+  private _handleWindowsModeOptionChange(value: boolean): void {
+    if (value) {
+      this._enableWindowsMode();
+    } else {
+      this._windowsMode?.dispose();
+      this._windowsMode = undefined;
     }
   }
 

src/common/InputHandler.test.ts

@@ -8,8 +8,8 @@ import { InputHandler } from 'common/InputHandler';
 import { IBufferLine, IAttributeData, IColorEvent, ColorIndex, ColorRequestType } from 'common/Types';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { CellData } from 'common/buffer/CellData';
-import { Attributes, UnderlineStyle } from 'common/buffer/Constants';
-import { AttributeData } from 'common/buffer/AttributeData';
+import { Attributes, BgFlags, UnderlineStyle } from 'common/buffer/Constants';
+import { AttributeData, ExtendedAttrs } from 'common/buffer/AttributeData';
 import { Params } from 'common/parser/Params';
 import { MockCoreService, MockBufferService, MockOptionsService, MockLogService, MockCoreMouseService, MockCharsetService, MockUnicodeService, MockOscLinkService } from 'common/TestUtils.test';
 import { IBufferService, ICoreService } from 'common/services/Services';
@@ -1689,6 +1689,37 @@ describe('InputHandler', () => {
     });
   });
 
+  describe('reset text attributes (SGR 0)', () => {
+    it('resets all attributes if there is no url', async () => {
+      await inputHandler.parseP('\x1b[30m\x1b[40m\x1b[4m');
+      assert.notEqual(inputHandler.curAttrData.fg, 0);
+      assert.notEqual(inputHandler.curAttrData.bg, 0);
+      assert.isFalse(inputHandler.curAttrData.extended.isEmpty());
+
+      await inputHandler.parseP('\x1b[m');
+      assert.equal(inputHandler.curAttrData.fg, 0);
+      assert.equal(inputHandler.curAttrData.bg, 0);
+      assert.isTrue(inputHandler.curAttrData.extended.isEmpty());
+    });
+
+    it('resets all attributes except for the url', async () => {
+      await inputHandler.parseP('\x1b[30m\x1b[40m\x1b[4m');
+      await inputHandler.parseP('\x1b]8;;http://example.com\x1b\\');
+      assert.notEqual(inputHandler.curAttrData.fg, 0);
+      assert.notEqual(inputHandler.curAttrData.bg, 0);
+      assert.notEqual(inputHandler.curAttrData.extended.ext, 0);
+      const urlId = inputHandler.curAttrData.extended.urlId;
+      assert.notEqual(urlId, 0);
+
+      await inputHandler.parseP('\x1b[m');
+      assert.equal(inputHandler.curAttrData.fg, 0);
+      assert.equal(inputHandler.curAttrData.bg, BgFlags.HAS_EXTENDED);
+      const expectedExtended = new ExtendedAttrs();
+      expectedExtended.urlId = urlId;
+      assert.deepEqual(inputHandler.curAttrData.extended, expectedExtended);
+    });
+  });
+
   describe('extended underline style support (SGR 4)', () => {
     beforeEach(() => {
       bufferService.resize(10, 5);

src/common/InputHandler.ts

@@ -11,7 +11,7 @@ import { EscapeSequenceParser } from 'common/parser/EscapeSequenceParser';
 import { Disposable } from 'common/Lifecycle';
 import { StringToUtf32, stringFromCodePoint, Utf8ToUtf32 } from 'common/input/TextDecoder';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
-import { EventEmitter, IEvent } from 'common/EventEmitter';
+import { EventEmitter } from 'common/EventEmitter';
 import { IParsingState, IEscapeSequenceParser, IParams, IFunctionIdentifier } from 'common/parser/Types';
 import { NULL_CELL_CODE, NULL_CELL_WIDTH, Attributes, FgFlags, BgFlags, Content, UnderlineStyle } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
@@ -121,7 +121,6 @@ export class InputHandler extends Disposable implements IInputHandler {
   private _workCell: CellData = new CellData();
   private _windowTitle = '';
   private _iconName = '';
-  private _currentLinkId?: number;
   private _dirtyRowTracker: IDirtyRowTracker;
   protected _windowTitleStack: string[] = [];
   protected _iconNameStack: string[] = [];
@@ -406,6 +405,10 @@ export class InputHandler extends Disposable implements IInputHandler {
     }
   }
 
+  private _getCurrentLinkId(): number {
+    return this._curAttrData.extended.urlId;
+  }
+
   /**
    * Parse call with async handler support.
    *
@@ -533,8 +536,8 @@ export class InputHandler extends Disposable implements IInputHandler {
       if (screenReaderMode) {
         this._onA11yChar.fire(stringFromCodePoint(code));
       }
-      if (this._currentLinkId !== undefined) {
-        this._oscLinkService.addLineToLink(this._currentLinkId, this._activeBuffer.ybase + this._activeBuffer.y);
+      if (this._getCurrentLinkId()) {
+        this._oscLinkService.addLineToLink(this._getCurrentLinkId(), this._activeBuffer.ybase + this._activeBuffer.y);
       }
 
       // insert combining char at last cursor position
@@ -1116,10 +1119,11 @@ export class InputHandler extends Disposable implements IInputHandler {
   /**
    * Helper method to erase cells in a terminal row.
    * The cell gets replaced with the eraseChar of the terminal.
-   * @param y row index
-   * @param start first cell index to be erased
-   * @param end   end - 1 is last erased cell
-   * @param cleanWrap clear the isWrapped flag
+   * @param y The row index relative to the viewport.
+   * @param start The start x index of the range to be erased.
+   * @param end The end x index of the range to be erased (exclusive).
+   * @param clearWrap clear the isWrapped flag
+   * @param respectProtect Whether to respect the protection attribute (DECSCA).
    */
   private _eraseInBufferLine(y: number, start: number, end: number, clearWrap: boolean = false, respectProtect: boolean = false): void {
     const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!;
@@ -2352,6 +2356,17 @@ export class InputHandler extends Disposable implements IInputHandler {
     attr.updateExtended();
   }
 
+  private _processSGR0(attr: IAttributeData): void {
+    attr.fg = DEFAULT_ATTR_DATA.fg;
+    attr.bg = DEFAULT_ATTR_DATA.bg;
+    attr.extended = attr.extended.clone();
+    // Reset underline style and color. Note that we don't want to reset other
+    // fields such as the url id.
+    attr.extended.underlineStyle = UnderlineStyle.NONE;
+    attr.extended.underlineColor &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
+    attr.updateExtended();
+  }
+
   /**
    * CSI Pm m  Character Attributes (SGR).
    *
@@ -2437,8 +2452,7 @@ export class InputHandler extends Disposable implements IInputHandler {
   public charAttributes(params: IParams): boolean {
     // Optimize a single SGR0.
     if (params.length === 1 && params.params[0] === 0) {
-      this._curAttrData.fg = DEFAULT_ATTR_DATA.fg;
-      this._curAttrData.bg = DEFAULT_ATTR_DATA.bg;
+      this._processSGR0(this._curAttrData);
       return true;
     }
 
@@ -2466,8 +2480,7 @@ export class InputHandler extends Disposable implements IInputHandler {
         attr.bg |= Attributes.CM_P16 | (p - 100) | 8;
       } else if (p === 0) {
         // default
-        attr.fg = DEFAULT_ATTR_DATA.fg;
-        attr.bg = DEFAULT_ATTR_DATA.bg;
+        this._processSGR0(attr);
       } else if (p === 1) {
         // bold text
         attr.fg |= FgFlags.BOLD;
@@ -2934,7 +2947,7 @@ export class InputHandler extends Disposable implements IInputHandler {
 
   private _createHyperlink(params: string, uri: string): boolean {
     // It's legal to open a new hyperlink without explicitly finishing the previous one
-    if (this._currentLinkId !== undefined) {
+    if (this._getCurrentLinkId()) {
       this._finishHyperlink();
     }
     const parsedParams = params.split(':');
@@ -2944,8 +2957,7 @@ export class InputHandler extends Disposable implements IInputHandler {
       id = parsedParams[idParamIndex].slice(3) || undefined;
     }
     this._curAttrData.extended = this._curAttrData.extended.clone();
-    this._currentLinkId = this._oscLinkService.registerLink({ id, uri });
-    this._curAttrData.extended.urlId = this._currentLinkId;
+    this._curAttrData.extended.urlId = this._oscLinkService.registerLink({ id, uri });
     this._curAttrData.updateExtended();
     return true;
   }
@@ -2954,7 +2966,6 @@ export class InputHandler extends Disposable implements IInputHandler {
     this._curAttrData.extended = this._curAttrData.extended.clone();
     this._curAttrData.extended.urlId = 0;
     this._curAttrData.updateExtended();
-    this._currentLinkId = undefined;
     return true;
   }
 

src/common/Lifecycle.ts

@@ -17,18 +17,15 @@ export abstract class Disposable implements IDisposable {
   }
 
   /**
-   * Disposes the object, triggering the `dispose` method on all registered IDisposables. This is a
-   * readonly property instead of a method to prevent subclasses overriding it which is an easy
-   * mistake that can introduce memory leaks. If a class extends Disposable, all dispose calls
-   * should be done via {@link register}.
+   * Disposes the object, triggering the `dispose` method on all registered IDisposables.
    */
-  public readonly dispose = (): void => {
+  public dispose(): void {
     this._isDisposed = true;
     for (const d of this._disposables) {
       d.dispose();
     }
     this._disposables.length = 0;
-  };
+  }
 
   /**
    * Registers a disposable object.

src/common/TestUtils.test.ts

@@ -9,7 +9,7 @@ import { clone } from 'common/Clone';
 import { DEFAULT_OPTIONS } from 'common/services/OptionsService';
 import { IBufferSet, IBuffer } from 'common/buffer/Types';
 import { BufferSet } from 'common/buffer/BufferSet';
-import { IDecPrivateModes, ICoreMouseEvent, CoreMouseEventType, ICharset, IModes, IAttributeData, IOscLinkData } from 'common/Types';
+import { IDecPrivateModes, ICoreMouseEvent, CoreMouseEventType, ICharset, IModes, IAttributeData, IOscLinkData, IDisposable } from 'common/Types';
 import { UnicodeV6 } from 'common/input/UnicodeV6';
 import { IDecorationOptions, IDecoration } from 'xterm';
 
@@ -113,7 +113,7 @@ export class MockOptionsService implements IOptionsService {
   public serviceBrand: any;
   public readonly rawOptions: Required<ITerminalOptions> = clone(DEFAULT_OPTIONS);
   public options: Required<ITerminalOptions> = this.rawOptions;
-  public onOptionChange: IEvent<string> = new EventEmitter<string>().event;
+  public onOptionChange: IEvent<keyof ITerminalOptions> = new EventEmitter<keyof ITerminalOptions>().event;
   constructor(testOptions?: Partial<ITerminalOptions>) {
     if (testOptions) {
       for (const key of Object.keys(testOptions)) {
@@ -121,6 +121,22 @@ export class MockOptionsService implements IOptionsService {
       }
     }
   }
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  public onSpecificOptionChange<T extends keyof ITerminalOptions>(key: T, listener: (arg1: ITerminalOptions[T]) => any): IDisposable {
+    return this.onOptionChange(eventKey => {
+      if (eventKey === key) {
+        listener(this.rawOptions[key]);
+      }
+    });
+  }
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  public onMultipleOptionChange(keys: (keyof ITerminalOptions)[], listener: () => any): IDisposable {
+    return this.onOptionChange(eventKey => {
+      if (keys.indexOf(eventKey) !== -1) {
+        listener();
+      }
+    });
+  }
   public setOptions(options: ITerminalOptions): void {
     for (const key of Object.keys(options)) {
       this.options[key] = options[key];

src/common/TypedArrayUtils.test.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 import { assert } from 'chai';
-import { fillFallback, concat } from 'common/TypedArrayUtils';
+import { concat } from 'common/TypedArrayUtils';
 
 type TypedArray = Uint8Array | Uint16Array | Uint32Array | Uint8ClampedArray | Int8Array | Int16Array | Int32Array | Float32Array | Float64Array;
 
@@ -14,77 +14,6 @@ function deepEquals(a: TypedArray, b: TypedArray): void {
   }
 }
 
-describe('polyfill conformance tests', function(): void {
-  describe('TypedArray.fill', function(): void {
-    it('should work with all typed array types', function(): void {
-      const u81 = new Uint8Array(5);
-      const u82 = new Uint8Array(5);
-      deepEquals(fillFallback(u81, 2), u82.fill(2));
-      deepEquals(fillFallback(u81, -1), u82.fill(-1));
-      const u161 = new Uint16Array(5);
-      const u162 = new Uint16Array(5);
-      deepEquals(fillFallback(u161, 2), u162.fill(2));
-      deepEquals(fillFallback(u161, 65535), u162.fill(65535));
-      deepEquals(fillFallback(u161, -1), u162.fill(-1));
-      const u321 = new Uint32Array(5);
-      const u322 = new Uint32Array(5);
-      deepEquals(fillFallback(u321, 2), u322.fill(2));
-      deepEquals(fillFallback(u321, 65537), u322.fill(65537));
-      deepEquals(fillFallback(u321, -1), u322.fill(-1));
-      const i81 = new Int8Array(5);
-      const i82 = new Int8Array(5);
-      deepEquals(fillFallback(i81, 2), i82.fill(2));
-      deepEquals(fillFallback(i81, -1), i82.fill(-1));
-      const i161 = new Int16Array(5);
-      const i162 = new Int16Array(5);
-      deepEquals(fillFallback(i161, 2), i162.fill(2));
-      deepEquals(fillFallback(i161, 65535), i162.fill(65535));
-      deepEquals(fillFallback(i161, -1), i162.fill(-1));
-      const i321 = new Int32Array(5);
-      const i322 = new Int32Array(5);
-      deepEquals(fillFallback(i321, 2), i322.fill(2));
-      deepEquals(fillFallback(i321, 65537), i322.fill(65537));
-      deepEquals(fillFallback(i321, -1), i322.fill(-1));
-      const f321 = new Float32Array(5);
-      const f322 = new Float32Array(5);
-      deepEquals(fillFallback(f321, 1.2345), f322.fill(1.2345));
-      const f641 = new Float64Array(5);
-      const f642 = new Float64Array(5);
-      deepEquals(fillFallback(f641, 1.2345), f642.fill(1.2345));
-      const u8Clamped1 = new Uint8ClampedArray(5);
-      const u8Clamped2 = new Uint8ClampedArray(5);
-      deepEquals(fillFallback(u8Clamped1, 2), u8Clamped2.fill(2));
-      deepEquals(fillFallback(u8Clamped1, 257), u8Clamped2.fill(257));
-    });
-    it('start offset', function(): void {
-      for (let i = -2; i < 10; ++i) {
-        const u81 = new Uint8Array(5);
-        const u83 = new Uint8Array(5);
-        deepEquals(fillFallback(u81, 2, i), u83.fill(2, i));
-        deepEquals(fillFallback(u81, -1, i), u83.fill(-1, i));
-      }
-    });
-    it('end offset', function(): void {
-      for (let i = -2; i < 10; ++i) {
-        const u81 = new Uint8Array(5);
-        const u83 = new Uint8Array(5);
-        deepEquals(fillFallback(u81, 2, 0, i), u83.fill(2, 0, i));
-        deepEquals(fillFallback(u81, -1, 0, i), u83.fill(-1, 0, i));
-      }
-    });
-    it('start/end offset', function(): void {
-      for (let i = -2; i < 10; ++i) {
-        for (let j = -2; j < 10; ++j) {
-          const u81 = new Uint8Array(5);
-          const u83 = new Uint8Array(5);
-          deepEquals(fillFallback(u81, 2, i, j), u83.fill(2, i, j));
-          deepEquals(fillFallback(u81, -1, i, j), u83.fill(-1, i, j));
-        }
-      }
-    });
-  });
-});
-
 describe('typed array convenience functions', () => {
   it('concat', () => {
     const a = new Uint8Array([1, 2, 3, 4, 5]);

src/common/TypedArrayUtils.ts

@@ -5,39 +5,6 @@
 
 export type TypedArray = Uint8Array | Uint16Array | Uint32Array | Uint8ClampedArray | Int8Array | Int16Array | Int32Array | Float32Array | Float64Array;
 
-
-/**
- * polyfill for TypedArray.fill
- * This is needed to support .fill in all safari versions and IE 11.
- */
-export function fill<T extends TypedArray>(array: T, value: number, start?: number, end?: number): T {
-  // all modern engines that support .fill
-  if (array.fill) {
-    return array.fill(value, start, end) as T;
-  }
-  return fillFallback(array, value, start, end);
-}
-
-export function fillFallback<T extends TypedArray>(array: T, value: number, start: number = 0, end: number = array.length): T {
-  // safari and IE 11
-  // since IE 11 does not support Array.prototype.fill either
-  // we cannot use the suggested polyfill from MDN
-  // instead we simply fall back to looping
-  if (start >= array.length) {
-    return array;
-  }
-  start = (array.length + start) % array.length;
-  if (end >= array.length) {
-    end = array.length;
-  } else {
-    end = (array.length + end) % array.length;
-  }
-  for (let i = start; i < end; ++i) {
-    array[i] = value;
-  }
-  return array;
-}
-
 /**
  * Concat two typed arrays `a` and `b`.
  * Returns a new typed array.

src/common/buffer/Buffer.ts

@@ -32,8 +32,7 @@ export class Buffer implements IBuffer {
   public x: number = 0;
   public scrollBottom: number;
   public scrollTop: number;
-  // TODO: Type me
-  public tabs: any;
+  public tabs: { [column: number]: boolean | undefined } = {};
   public savedY: number = 0;
   public savedX: number = 0;
   public savedCurAttrData = DEFAULT_ATTR_DATA.clone();
@@ -486,7 +485,7 @@ export class Buffer implements IBuffer {
    * TODO: respect trim flag after fixing #1685
    * @param lineIndex line index the string was retrieved from
    * @param stringIndex index within the string
-   * @param startCol column offset the string was retrieved from
+   * @param trimRight Whether to trim whitespace to the right.
    */
   public stringIndexToBufferIndex(lineIndex: number, stringIndex: number, trimRight: boolean = false): BufferIndex {
     while (stringIndex) {
@@ -515,7 +514,7 @@ export class Buffer implements IBuffer {
    * Wide characters will count as two columns in the resulting string. This
    * function is useful for getting the actual text underneath the raw selection
    * position.
-   * @param line The line being translated.
+   * @param lineIndex The absolute index of the line being translated.
    * @param trimRight Whether to trim whitespace to the right.
    * @param startCol The column to start at.
    * @param endCol The column to end at.

src/common/buffer/BufferLine.ts

@@ -130,7 +130,7 @@ export class BufferLine implements IBufferLine {
    * Test whether contains any chars.
    * Basically an empty has no content, but other cells might differ in FG/BG
    * from real empty cells.
-   * */
+   */
   public hasContent(index: number): number {
     return this._data[index * CELL_SIZE + Cell.CONTENT] & Content.HAS_CONTENT_MASK;
   }

src/common/buffer/BufferReflow.ts

@@ -16,7 +16,10 @@ export interface INewLayoutResult {
  * Evaluates and returns indexes to be removed after a reflow larger occurs. Lines will be removed
  * when a wrapped line unwraps.
  * @param lines The buffer lines.
+ * @param oldCols The columns before resize
  * @param newCols The columns after resize.
+ * @param bufferAbsoluteY The absolute y position of the cursor (baseY + cursorY).
+ * @param nullCell The cell data to use when filling in empty cells.
  */
 export function reflowLargerGetLinesToRemove(lines: CircularList<IBufferLine>, oldCols: number, newCols: number, bufferAbsoluteY: number, nullCell: ICellData): number[] {
   // Gather all BufferLines that need to be removed from the Buffer here so that they can be

src/common/buffer/BufferSet.ts

@@ -24,7 +24,6 @@ export class BufferSet extends Disposable implements IBufferSet {
 
   /**
    * Create a new BufferSet for the given terminal.
-   * @param _terminal - The terminal the BufferSet will belong to
    */
   constructor(
     private readonly _optionsService: IOptionsService,
@@ -32,6 +31,8 @@ export class BufferSet extends Disposable implements IBufferSet {
   ) {
     super();
     this.reset();
+    this.register(this._optionsService.onSpecificOptionChange('scrollback', () => this.resize(this._bufferService.cols, this._bufferService.rows)));
+    this.register(this._optionsService.onSpecificOptionChange('tabStopWidth', () => this.setupTabStops()));
   }
 
   public reset(): void {
@@ -119,6 +120,7 @@ export class BufferSet extends Disposable implements IBufferSet {
   public resize(newCols: number, newRows: number): void {
     this._normal.resize(newCols, newRows);
     this._alt.resize(newCols, newRows);
+    this.setupTabStops(newCols);
   }
 
   /**

src/common/buffer/CellData.ts

@@ -47,7 +47,7 @@ export class CellData extends AttributeData implements ICellData {
    * Note this returns the UTF32 codepoint of single chars,
    * if content is a combined string it returns the codepoint
    * of the last char in string to be in line with code in CharData.
-   * */
+   */
   public getCode(): number {
     return (this.isCombined())
       ? this.combinedData.charCodeAt(this.combinedData.length - 1)

src/common/buffer/Constants.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-export const DEFAULT_COLOR = 256;
+export const DEFAULT_COLOR = 0;
 export const DEFAULT_ATTR = (0 << 18) | (DEFAULT_COLOR << 9) | (256 << 0);
 export const DEFAULT_EXT = 0;
 

src/common/input/UnicodeV6.ts

@@ -3,7 +3,6 @@
  * @license MIT
  */
 import { IUnicodeVersionProvider } from 'common/services/Services';
-import { fill } from 'common/TypedArrayUtils';
 
 type CharWidth = 0 | 1 | 2;
 
@@ -90,26 +89,26 @@ export class UnicodeV6 implements IUnicodeVersionProvider {
     // init lookup table once
     if (!table) {
       table = new Uint8Array(65536);
-      fill(table, 1);
+      table.fill(1);
       table[0] = 0;
       // control chars
-      fill(table, 0, 1, 32);
-      fill(table, 0, 0x7f, 0xa0);
+      table.fill(0, 1, 32);
+      table.fill(0, 0x7f, 0xa0);
 
       // apply wide char rules first
       // wide chars
-      fill(table, 2, 0x1100, 0x1160);
+      table.fill(2, 0x1100, 0x1160);
       table[0x2329] = 2;
       table[0x232a] = 2;
-      fill(table, 2, 0x2e80, 0xa4d0);
+      table.fill(2, 0x2e80, 0xa4d0);
       table[0x303f] = 1;  // wrongly in last line
 
-      fill(table, 2, 0xac00, 0xd7a4);
-      fill(table, 2, 0xf900, 0xfb00);
-      fill(table, 2, 0xfe10, 0xfe1a);
-      fill(table, 2, 0xfe30, 0xfe70);
-      fill(table, 2, 0xff00, 0xff61);
-      fill(table, 2, 0xffe0, 0xffe7);
+      table.fill(2, 0xac00, 0xd7a4);
+      table.fill(2, 0xf900, 0xfb00);
+      table.fill(2, 0xfe10, 0xfe1a);
+      table.fill(2, 0xfe30, 0xfe70);
+      table.fill(2, 0xff00, 0xff61);
+      table.fill(2, 0xffe0, 0xffe7);
 
       // apply combining last to ensure we overwrite
       // wrongly wide set chars:
@@ -117,7 +116,7 @@ export class UnicodeV6 implements IUnicodeVersionProvider {
       //    through to wide check so we simply do here the opposite
       // combining 0
       for (let r = 0; r < BMP_COMBINING.length; ++r) {
-        fill(table, 0, BMP_COMBINING[r][0], BMP_COMBINING[r][1] + 1);
+        table.fill(0, BMP_COMBINING[r][0], BMP_COMBINING[r][1] + 1);
       }
     }
   }

src/common/parser/Constants.ts

@@ -24,8 +24,8 @@ export const enum ParserState {
 }
 
 /**
-* Internal actions of EscapeSequenceParser.
-*/
+ * Internal actions of EscapeSequenceParser.
+ */
 export const enum ParserAction {
   IGNORE = 0,
   ERROR = 1,

src/common/parser/EscapeSequenceParser.ts

@@ -7,7 +7,6 @@ import { IParsingState, IDcsHandler, IEscapeSequenceParser, IParams, IOscHandler
 import { ParserState, ParserAction } from 'common/parser/Constants';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IDisposable } from 'common/Types';
-import { fill } from 'common/TypedArrayUtils';
 import { Params } from 'common/parser/Params';
 import { OscParser } from 'common/parser/OscParser';
 import { DcsParser } from 'common/parser/DcsParser';
@@ -39,7 +38,7 @@ export class TransitionTable {
    * @param next default next state
    */
   public setDefault(action: ParserAction, next: ParserState): void {
-    fill(this.table, action << TableAccess.TRANSITION_ACTION_SHIFT | next);
+    this.table.fill(action << TableAccess.TRANSITION_ACTION_SHIFT | next);
   }
 
   /**

src/common/parser/Types.d.ts

@@ -142,8 +142,8 @@ export type PrintFallbackHandlerType = PrintHandlerType;
 
 
 /**
-* EscapeSequenceParser interface.
-*/
+ * EscapeSequenceParser interface.
+ */
 export interface IEscapeSequenceParser extends IDisposable {
   /**
    * Preceding codepoint to get REP working correctly.

src/common/services/BufferService.ts

@@ -43,7 +43,7 @@ export class BufferService extends Disposable implements IBufferService {
     this.cols = cols;
     this.rows = rows;
     this.buffers.resize(cols, rows);
-    this.buffers.setupTabStops(this.cols);
+    // TODO: This doesn't fire when scrollback changes - add a resize event to BufferSet and forward event
     this._onResize.fire({ cols, rows });
   }
 
@@ -54,6 +54,7 @@ export class BufferService extends Disposable implements IBufferService {
 
   /**
    * Scroll the terminal down 1 row, creating a blank line.
+   * @param eraseAttr The attribute data to use the for blank line.
    * @param isWrapped Whether the new line is wrapped from the previous line.
    */
   public scroll(eraseAttr: IAttributeData, isWrapped: boolean = false): void {

src/common/services/DecorationService.ts

@@ -42,6 +42,7 @@ export class DecorationService extends Disposable implements IDecorationService
       this.reset();
     }));
   }
+
   public registerDecoration(options: IDecorationOptions): IDecoration | undefined {
     if (options.marker.isDisposed) {
       return undefined;
@@ -91,19 +92,25 @@ export class DecorationService extends Disposable implements IDecorationService
       }
     });
   }
+
+  public dispose(): void {
+    for (const d of this._decorations.values()) {
+      this._onDecorationRemoved.fire(d);
+    }
+    this.reset();
+  }
 }
 
 class Decoration extends Disposable implements IInternalDecoration {
   public readonly marker: IMarker;
   public element: HTMLElement | undefined;
+  public isDisposed: boolean = false;
 
   public readonly onRenderEmitter = this.register(new EventEmitter<HTMLElement>());
   public readonly onRender = this.onRenderEmitter.event;
   private readonly _onDispose = this.register(new EventEmitter<void>());
   public readonly onDispose = this._onDispose.event;
 
-  public get isDisposed(): boolean { return this._isDisposed; }
-
   private _cachedBg: IColor | undefined | null = null;
   public get backgroundColorRGB(): IColor | undefined {
     if (this._cachedBg === null) {
@@ -136,12 +143,10 @@ class Decoration extends Disposable implements IInternalDecoration {
     if (this.options.overviewRulerOptions && !this.options.overviewRulerOptions.position) {
       this.options.overviewRulerOptions.position = 'full';
     }
+  }
 
-    this.register(toDisposable(() => {
-      if (this._isDisposed) {
-        return;
-      }
-      this._onDispose.fire();
-    }));
+  public override dispose(): void {
+    this._onDispose.fire();
+    super.dispose();
   }
 }

src/common/services/LogService.ts

@@ -40,11 +40,7 @@ export class LogService extends Disposable implements ILogService {
   ) {
     super();
     this._updateLogLevel();
-    this.register(this._optionsService.onOptionChange(key => {
-      if (key === 'logLevel') {
-        this._updateLogLevel();
-      }
-    }));
+    this.register(this._optionsService.onSpecificOptionChange('logLevel', () => this._updateLogLevel()));
   }
 
   private _updateLogLevel(): void {

src/common/services/OptionsService.test.ts

@@ -5,6 +5,7 @@
 
 import { assert } from 'chai';
 import { OptionsService, DEFAULT_OPTIONS } from 'common/services/OptionsService';
+import { IDisposable } from 'common/Types';
 
 describe('OptionsService', () => {
   describe('constructor', () => {
@@ -71,4 +72,79 @@ describe('OptionsService', () => {
       assert.equal(service.options.fontWeight, DEFAULT_OPTIONS.fontWeight, 'Wrong string literals should be reset to default');
     });
   });
+  describe('onOptionChange', () => {
+    let service: OptionsService;
+    beforeEach(() => {
+      service = new OptionsService({});
+    });
+    it('should fire on any option change', async () => {
+      let disposable: IDisposable;
+      await new Promise<void>(r => {
+        disposable = service.onOptionChange(e => {
+          assert.strictEqual(e, 'cursorWidth');
+          r();
+        });
+        service.options.cursorWidth = 10;
+      });
+      disposable!.dispose();
+      await new Promise<void>(r => {
+        service.onOptionChange(e => {
+          assert.strictEqual(e, 'scrollback');
+          r();
+        });
+        service.options.scrollback = 20;
+      });
+    });
+  });
+  describe('onSpecificOptionChange', () => {
+    let service: OptionsService;
+    beforeEach(() => {
+      service = new OptionsService({});
+    });
+    it('should fire only on a specific option change', async () => {
+      await new Promise<void>(r => {
+        service.onSpecificOptionChange('scrollback', e => {
+          assert.strictEqual(e, 20);
+          r();
+        });
+        service.options.cursorWidth = 10;
+        service.options.scrollback = 20;
+      });
+    });
+  });
+  describe('onSpecificOptionChange', () => {
+    let service: OptionsService;
+    beforeEach(() => {
+      service = new OptionsService({});
+    });
+    it('should fire only on a specific option change', async () => {
+      await new Promise<void>(r => {
+        service.onSpecificOptionChange('scrollback', e => {
+          assert.strictEqual(e, 20);
+          r();
+        });
+        service.options.cursorWidth = 10;
+        service.options.scrollback = 20;
+      });
+    });
+  });
+  describe('onMultipleOptionChange', () => {
+    let service: OptionsService;
+    beforeEach(() => {
+      service = new OptionsService({});
+    });
+    it('should fire only for specific options', async () => {
+      await new Promise<void>(r => {
+        let called = false;
+        service.onMultipleOptionChange(['scrollback'], () => {
+          called = true;
+        });
+        service.options.cursorWidth = 10;
+        assert.notOk(called);
+        service.options.scrollback = 20;
+        assert.ok(called);
+        r();
+      });
+    });
+  });
 });

src/common/services/OptionsService.ts

@@ -6,7 +6,7 @@
 import { IOptionsService, ITerminalOptions, FontWeight } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { isMac } from 'common/Platform';
-import { CursorStyle } from 'common/Types';
+import { CursorStyle, IDisposable } from 'common/Types';
 import { Disposable } from 'common/Lifecycle';
 
 export const DEFAULT_OPTIONS: Readonly<Required<ITerminalOptions>> = {
@@ -58,7 +58,7 @@ export class OptionsService extends Disposable implements IOptionsService {
   public readonly rawOptions: Required<ITerminalOptions>;
   public options: Required<ITerminalOptions>;
 
-  private readonly _onOptionChange = this.register(new EventEmitter<string>());
+  private readonly _onOptionChange = this.register(new EventEmitter<keyof ITerminalOptions>());
   public readonly onOptionChange = this._onOptionChange.event;
 
   constructor(options: Partial<ITerminalOptions>) {
@@ -82,6 +82,24 @@ export class OptionsService extends Disposable implements IOptionsService {
     this._setupOptions();
   }
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  public onSpecificOptionChange<T extends keyof ITerminalOptions>(key: T, listener: (value: ITerminalOptions[T]) => any): IDisposable {
+    return this.onOptionChange(eventKey => {
+      if (eventKey === key) {
+        listener(this.rawOptions[key]);
+      }
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  public onMultipleOptionChange(keys: (keyof ITerminalOptions)[], listener: () => any): IDisposable {
+    return this.onOptionChange(eventKey => {
+      if (keys.indexOf(eventKey) !== -1) {
+        listener();
+      }
+    });
+  }
+
   private _setupOptions(): void {
     const getter = (propName: string): any => {
       if (!(propName in DEFAULT_OPTIONS)) {

src/common/services/Services.ts

@@ -182,9 +182,33 @@ export interface IOptionsService {
    * internally.
    */
   readonly rawOptions: Required<ITerminalOptions>;
+
+  /**
+   * Options as exposed through the public API, this property uses getters and setters with
+   * validation which makes it safer but slower. {@link rawOptions} should be used for pretty much
+   * all internal usage for performance reasons.
+   */
   readonly options: Required<ITerminalOptions>;
 
-  readonly onOptionChange: IEvent<string>;
+  /**
+   * Adds an event listener for when any option changes.
+   */
+  readonly onOptionChange: IEvent<keyof ITerminalOptions>;
+
+  /**
+   * Adds an event listener for when a specific option changes, this is a convenience method that is
+   * preferred over {@link onOptionChange} when only a single option is being listened to.
+   */
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  onSpecificOptionChange<T extends keyof ITerminalOptions>(key: T, listener: (arg1: Required<ITerminalOptions>[T]) => any): IDisposable;
+
+  /**
+   * Adds an event listener for when a set of specific options change, this is a convenience method
+   * that is preferred over {@link onOptionChange} when multiple options are being listened to and
+   * handled the same way.
+   */
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  onMultipleOptionChange(keys: (keyof ITerminalOptions)[], listener: () => any): IDisposable;
 }
 
 export type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | number;

src/headless/Terminal.ts

@@ -78,15 +78,6 @@ export class Terminal extends CoreTerminal {
     return this.buffers.active;
   }
 
-  protected _updateOptions(key: string): void {
-    super._updateOptions(key);
-
-    // TODO: These listeners should be owned by individual components
-    switch (key) {
-      case 'tabStopWidth': this.buffers.setupTabStops(); break;
-    }
-  }
-
   // TODO: Support paste here?
 
   public get markers(): IMarker[] {

src/headless/public/Terminal.test.ts

@@ -22,7 +22,7 @@ describe('Headless API Tests', function (): void {
 
   it('Proposed API check', async () => {
     term = new Terminal({ allowProposedApi: false });
-    throws(() => term.buffer, (error) => error.message === 'You must set the allowProposedApi option to true to use proposed API');
+    throws(() => term.markers, (error) => error.message === 'You must set the allowProposedApi option to true to use proposed API');
   });
 
   it('write', async () => {

test/api/InputHandler.api.ts

@@ -601,9 +601,9 @@ async function getCursor(): Promise<{ col: number, row: number }> {
 async function getDimensions(): Promise<any> {
   const dim: IRenderDimensions = await page.evaluate(`term._core._renderService.dimensions`);
   return {
-    cellWidth: dim.actualCellWidth.toFixed(0),
-    cellHeight: dim.actualCellHeight.toFixed(0),
-    width: dim.canvasWidth.toFixed(0),
-    height: dim.canvasHeight.toFixed(0)
+    cellWidth: dim.css.cell.width.toFixed(0),
+    cellHeight: dim.css.cell.height.toFixed(0),
+    width: dim.css.canvas.width.toFixed(0),
+    height: dim.css.canvas.height.toFixed(0)
   };
 }

test/api/MouseTracking.api.ts

@@ -48,7 +48,7 @@ async function cellPos(col: number, row: number): Promise<number[]> {
     (function() {
       const rect = window.term.element.getBoundingClientRect();
       const dim = term._core._renderService.dimensions;
-      return {left: rect.left, top: rect.top, bottom: rect.bottom, right: rect.right, width: dim.actualCellWidth, height: dim.actualCellHeight};
+      return {left: rect.left, top: rect.top, bottom: rect.bottom, right: rect.right, width: dim.css.cell.width, height: dim.css.cell.height};
     })();
   `);
   return [col * coords.width + coords.left + 2, row * coords.height + coords.top + 2];

test/api/Terminal.api.ts

@@ -7,6 +7,7 @@ import { assert } from 'chai';
 import { pollFor, timeout, writeSync, openTerminal, launchBrowser } from './TestUtils';
 import { Browser, Page } from 'playwright';
 import { fail } from 'assert';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 
 const APP = 'http://127.0.0.1:3001/test';
 
@@ -35,7 +36,7 @@ describe('API Integration Tests', function(): void {
     await openTerminal(page, { allowProposedApi: false });
     await page.evaluate(`
       try {
-        window.term.buffer;
+        window.term.markers;
       } catch (e) {
         window.throwMessage = e.message;
       }
@@ -720,7 +721,7 @@ describe('API Integration Tests', function(): void {
     await page.evaluate(`window.term = new Terminal()`);
     await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
     await page.evaluate(`document.querySelector('#terminal-container').style.display=''`);
-    await pollFor(page, `window.term._core._renderService.dimensions.actualCellWidth > 0`, true);
+    await pollFor(page, `window.term._core._renderService.dimensions.css.cell.width > 0`, true);
   });
 
   describe('registerDecoration', () => {
@@ -1032,21 +1033,6 @@ interface IDimensions {
   renderDimensions: IRenderDimensions;
 }
 
-interface IRenderDimensions {
-  scaledCharWidth: number;
-  scaledCharHeight: number;
-  scaledCellWidth: number;
-  scaledCellHeight: number;
-  scaledCharLeft: number;
-  scaledCharTop: number;
-  scaledCanvasWidth: number;
-  scaledCanvasHeight: number;
-  canvasWidth: number;
-  canvasHeight: number;
-  actualCellWidth: number;
-  actualCellHeight: number;
-}
-
 async function getDimensions(): Promise<IDimensions> {
   return await page.evaluate(`
     (function() {
@@ -1062,8 +1048,8 @@ async function getDimensions(): Promise<IDimensions> {
 
 async function getCellCoordinates(dimensions: IDimensions, col: number, row: number): Promise<{ x: number, y: number }> {
   return {
-    x: dimensions.left + dimensions.renderDimensions.scaledCellWidth * (col - 0.5),
-    y: dimensions.top + dimensions.renderDimensions.scaledCellHeight * (row - 0.5)
+    x: dimensions.left + dimensions.renderDimensions.device.cell.width * (col - 0.5),
+    y: dimensions.top + dimensions.renderDimensions.device.cell.height * (row - 0.5)
   };
 }
 

typings/xterm-headless.d.ts

@@ -1080,7 +1080,7 @@ declare module 'xterm-headless' {
      * Return true if the sequence was handled; false if we should try
      * a previous handler (set by addCsiHandler or setCsiHandler).
      * The most recently added handler is tried first.
-     * @return An IDisposable you can call to remove this handler.
+     * @returns An IDisposable you can call to remove this handler.
      */
     registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean): IDisposable;
 
@@ -1099,7 +1099,7 @@ declare module 'xterm-headless' {
      * Return true if the sequence was handled; false if we should try
      * a previous handler (set by addDcsHandler or setDcsHandler).
      * The most recently added handler is tried first.
-     * @return An IDisposable you can call to remove this handler.
+     * @returns An IDisposable you can call to remove this handler.
      */
     registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean): IDisposable;
 
@@ -1112,7 +1112,7 @@ declare module 'xterm-headless' {
      * Return true if the sequence was handled; false if we should try
      * a previous handler (set by addEscHandler or setEscHandler).
      * The most recently added handler is tried first.
-     * @return An IDisposable you can call to remove this handler.
+     * @returns An IDisposable you can call to remove this handler.
      */
     registerEscHandler(id: IFunctionIdentifier, handler: () => boolean): IDisposable;
 
@@ -1130,7 +1130,7 @@ declare module 'xterm-headless' {
      * Return true if the sequence was handled; false if we should try
      * a previous handler (set by addOscHandler or setOscHandler).
      * The most recently added handler is tried first.
-     * @return An IDisposable you can call to remove this handler.
+     * @returns An IDisposable you can call to remove this handler.
      */
     registerOscHandler(ident: number, callback: (data: string) => boolean): IDisposable;
   }

typings/xterm.d.ts

@@ -905,7 +905,7 @@ declare module 'xterm' {
      * with a string of text that is eligible for joining and returns an array
      * where each entry is an array containing the start (inclusive) and end
      * (exclusive) indexes of ranges that should be rendered as a single unit.
-     * @return The ID of the new joiner, this can be used to deregister
+     * @returns The ID of the new joiner, this can be used to deregister
      */
     registerCharacterJoiner(handler: (text: string) => [number, number][]): number;
 
@@ -1558,7 +1558,7 @@ declare module 'xterm' {
      * array will contain subarrays with their numercial values.
      * Return `true` if the sequence was handled, `false` if the parser should try
      * a previous handler. The most recently added handler is tried first.
-     * @return An IDisposable you can call to remove this handler.
+     * @returns An IDisposable you can call to remove this handler.
      */
     registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise<boolean>): IDisposable;
 
@@ -1576,7 +1576,7 @@ declare module 'xterm' {
      * The function gets the payload and numerical parameters as arguments.
      * Return `true` if the sequence was handled, `false` if the parser should try
      * a previous handler. The most recently added handler is tried first.
-     * @return An IDisposable you can call to remove this handler.
+     * @returns An IDisposable you can call to remove this handler.
      */
     registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise<boolean>): IDisposable;
 
@@ -1588,7 +1588,7 @@ declare module 'xterm' {
      * @param callback The function to handle the sequence.
      * Return `true` if the sequence was handled, `false` if the parser should try
      * a previous handler. The most recently added handler is tried first.
-     * @return An IDisposable you can call to remove this handler.
+     * @returns An IDisposable you can call to remove this handler.
      */
     registerEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise<boolean>): IDisposable;
 
@@ -1605,7 +1605,7 @@ declare module 'xterm' {
      * The callback is called with OSC data string.
      * Return `true` if the sequence was handled, `false` if the parser should try
      * a previous handler. The most recently added handler is tried first.
-     * @return An IDisposable you can call to remove this handler.
+     * @returns An IDisposable you can call to remove this handler.
      */
     registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
   }

yarn.lock

@@ -189,6 +189,15 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz#9283c9ce5b289a3c4f61c12757469e59377f81f3"
   integrity sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==
 
+"@es-joy/jsdoccomment@~0.31.0":
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.31.0.tgz#dbc342cc38eb6878c12727985e693eaef34302bc"
+  integrity sha512-tc1/iuQcnaiSIUVad72PBierDFpsxdUHtEF/OrfqvM1CBAsIoMP51j52jTMb3dXriwhieTo289InzZj72jL3EQ==
+  dependencies:
+    comment-parser "1.3.1"
+    esquery "^1.4.0"
+    jsdoc-type-pratt-parser "~3.1.0"
+
 "@eslint/eslintrc@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.3.tgz#41f08c597025605f672251dcc4e8be66b5ed7366"
@@ -1278,6 +1287,11 @@ commander@^7.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+comment-parser@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b"
+  integrity sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -1392,6 +1406,13 @@ debug@^4.3.2:
   dependencies:
     ms "2.1.2"
 
+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -1647,6 +1668,19 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-plugin-jsdoc@^39.3.6:
+  version "39.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.3.6.tgz#6ba29f32368d72a51335a3dc9ccd22ad0437665d"
+  integrity sha512-R6dZ4t83qPdMhIOGr7g2QII2pwCjYyKP+z0tPOfO1bbAbQyKC20Y2Rd6z1te86Lq3T7uM8bNo+VD9YFpE8HU/g==
+  dependencies:
+    "@es-joy/jsdoccomment" "~0.31.0"
+    comment-parser "1.3.1"
+    debug "^4.3.4"
+    escape-string-regexp "^4.0.0"
+    esquery "^1.4.0"
+    semver "^7.3.7"
+    spdx-expression-parse "^3.0.1"
+
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -2597,6 +2631,11 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+jsdoc-type-pratt-parser@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-3.1.0.tgz#a4a56bdc6e82e5865ffd9febc5b1a227ff28e67e"
+  integrity sha512-MgtD0ZiCDk9B+eI73BextfRrVQl0oyzRG8B2BjORts6jbunj4ScKPcyXGTbB6eXL4y9TzxCm6hyeLq/2ASzNdw==
+
 jsdom@^18.0.1:
   version "18.0.1"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-18.0.1.tgz#7317c91be425f31ff25814ad427eed8a2a310b61"
@@ -3434,6 +3473,13 @@ semver@^7.2.1, semver@^7.3.4, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.3.7:
+  version "7.3.8"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -3579,6 +3625,24 @@ spawn-wrap@^2.0.0:
     signal-exit "^3.0.2"
     which "^2.0.1"
 
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.12.tgz#69077835abe2710b65f03969898b6637b505a779"
+  integrity sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"