Merge branch 'master' into buffer_optimizations

.eslintrc.json

@@ -7,6 +7,7 @@
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": [
+      "demo/tsconfig.json",
       "src/browser/tsconfig.json",
       "src/common/tsconfig.json",
       "src/headless/tsconfig.json",
@@ -95,7 +96,19 @@
       { "selector": "enumMember", "format": ["UPPER_CASE"] },
       // memberLike - Allow enum-like objects to use UPPER_CASE
       { "selector": "property", "modifiers": ["public"], "format": ["camelCase", "UPPER_CASE"] },
-      { "selector": "method", "modifiers": ["public"], "format": ["camelCase", "UPPER_CASE"] },
+      // restrict on* naming for events only
+      { "selector": "method", "modifiers": ["public"], "format": ["camelCase", "UPPER_CASE"], "custom": {
+        "regex": "^on[A-Z].+",
+        "match": false
+      } },
+      { "selector": "method", "modifiers": ["private"], "format": ["camelCase"], "leadingUnderscore": "require", "custom": {
+        "regex": "^on[A-Z].+",
+        "match": false
+      } },
+      { "selector": "method", "modifiers": ["protected"], "format": ["camelCase"], "leadingUnderscore": "require", "custom": {
+        "regex": "^on[A-Z].+",
+        "match": false
+      } },
       // typeLike
       { "selector": "typeLike", "format": ["PascalCase"] },
       { "selector": "interface", "format": ["PascalCase"], "prefix": ["I"] }

README.md

@@ -221,6 +221,6 @@ Do you use xterm.js in your application as well? Please [open a Pull Request](ht
 
 If you contribute code to this project, you implicitly allow your code to be distributed under the MIT license. You are also implicitly verifying that all code is your original work.
 
-Copyright (c) 2017-2019, [The xterm.js authors](https://github.com/xtermjs/xterm.js/graphs/contributors) (MIT License)<br>
+Copyright (c) 2017-2022, [The xterm.js authors](https://github.com/xtermjs/xterm.js/graphs/contributors) (MIT License)<br>
 Copyright (c) 2014-2017, SourceLair, Private Company ([www.sourcelair.com](https://www.sourcelair.com/home)) (MIT License)<br>
 Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)

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

@@ -3,45 +3,57 @@
  * @license MIT
  */
 
-import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService } from 'browser/services/Services';
-import { IColorSet } from 'browser/Types';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { IColorSet, ITerminal } from 'browser/Types';
 import { CanvasRenderer } from './CanvasRenderer';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { ITerminalAddon, Terminal } from 'xterm';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 
-export class CanvasAddon implements ITerminalAddon {
+export class CanvasAddon extends Disposable implements ITerminalAddon {
   private _terminal?: Terminal;
   private _renderer?: CanvasRenderer;
 
-  public activate(terminal: Terminal): void {
-    if (!terminal.element) {
-      throw new Error('Cannot activate CanvasAddon before Terminal.open');
-    }
-    this._terminal = terminal;
-    const bufferService: IBufferService = (terminal as any)._core._bufferService;
-    const renderService: IRenderService = (terminal as any)._core._renderService;
-    const characterJoinerService: ICharacterJoinerService = (terminal as any)._core._characterJoinerService;
-    const charSizeService: ICharSizeService = (terminal as any)._core._charSizeService;
-    const coreService: ICoreService = (terminal as any)._core.coreService;
-    const coreBrowserService: ICoreBrowserService = (terminal as any)._core._coreBrowserService;
-    const decorationService: IDecorationService = (terminal as any)._core._decorationService;
-    const optionsService: IOptionsService = (terminal as any)._core.optionsService;
-    const colors: IColorSet = (terminal as any)._core._colorManager.colors;
-    const screenElement: HTMLElement = (terminal as any)._core.screenElement;
-    const linkifier = (terminal as any)._core.linkifier2;
-    this._renderer = new CanvasRenderer(colors, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService);
-    renderService.setRenderer(this._renderer);
-    renderService.onResize(bufferService.cols, bufferService.rows);
+  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderer?.textureAtlas;
   }
 
-  public dispose(): void {
-    if (!this._terminal) {
-      throw new Error('Cannot dispose CanvasAddon because it is activated');
+  public activate(terminal: Terminal): void {
+    const core = (terminal as any)._core as ITerminal;
+    if (!terminal.element) {
+      this.register(core.onWillOpen(() => this.activate(terminal)));
+      return;
     }
-    const renderService: IRenderService = (this._terminal as any)._core._renderService;
-    renderService.setRenderer((this._terminal as any)._core._createRenderer());
-    renderService.onResize(this._terminal.cols, this._terminal.rows);
-    this._renderer?.dispose();
-    this._renderer = undefined;
+
+    this._terminal = terminal;
+    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));
+    renderService.setRenderer(this._renderer);
+    renderService.handleResize(bufferService.cols, bufferService.rows);
+
+    this.register(toDisposable(() => {
+      renderService.setRenderer((this._terminal as any)._core._createRenderer());
+      renderService.handleResize(terminal.cols, terminal.rows);
+      this._renderer?.dispose();
+      this._renderer = undefined;
+    }));
   }
 }

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

@@ -3,35 +3,34 @@
  * @license MIT
  */
 
-import { TextRenderLayer } from './TextRenderLayer';
-import { SelectionRenderLayer } from './SelectionRenderLayer';
+import { removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
+import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
+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 { Disposable, toDisposable } from 'common/Lifecycle';
+import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { Terminal } from 'xterm';
 import { CursorRenderLayer } from './CursorRenderLayer';
-import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
-import { IRenderLayer } from './Types';
 import { LinkRenderLayer } from './LinkRenderLayer';
-import { Disposable } from 'common/Lifecycle';
-import { IColorSet, ILinkifier2 } from 'browser/Types';
-import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
-import { IBufferService, IOptionsService, IDecorationService, ICoreService } from 'common/services/Services';
-import { removeTerminalFromCache } from './atlas/CharAtlasCache';
-import { EventEmitter, IEvent } from 'common/EventEmitter';
-import { observeDevicePixelDimensions } from 'browser/renderer/DevicePixelObserver';
-
-let nextRendererId = 1;
+import { SelectionRenderLayer } from './SelectionRenderLayer';
+import { TextRenderLayer } from './TextRenderLayer';
+import { IRenderLayer } from './Types';
 
 export class CanvasRenderer extends Disposable implements IRenderer {
-  private _id = nextRendererId++;
-
   private _renderLayers: IRenderLayer[];
   private _devicePixelRatio: number;
 
   public dimensions: IRenderDimensions;
 
-  private _onRequestRedraw = new EventEmitter<IRequestRedrawEvent>();
-  public get onRequestRedraw(): IEvent<IRequestRedrawEvent> { return this._onRequestRedraw.event; }
+  private readonly _onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>());
+  public readonly onRequestRedraw = this._onRequestRedraw.event;
+  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
 
   constructor(
-    private _colors: IColorSet,
+    private readonly _terminal: Terminal,
     private readonly _screenElement: HTMLElement,
     linkifier2: ILinkifier2,
     private readonly _bufferService: IBufferService,
@@ -40,15 +39,16 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     characterJoinerService: ICharacterJoinerService,
     coreService: ICoreService,
     private readonly _coreBrowserService: ICoreBrowserService,
-    decorationService: IDecorationService
+    decorationService: IDecorationService,
+    private readonly _themeService: IThemeService
   ) {
     super();
     const allowTransparency = this._optionsService.rawOptions.allowTransparency;
     this._renderLayers = [
-      new TextRenderLayer(this._screenElement, 0, this._colors, allowTransparency, this._id, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService),
-      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, this._coreBrowserService, decorationService, this._optionsService),
-      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService),
-      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService)
+      new TextRenderLayer(this._terminal, this._screenElement, 0, allowTransparency, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService, _themeService),
+      new SelectionRenderLayer(this._terminal, this._screenElement, 1, this._bufferService, this._coreBrowserService, decorationService, this._optionsService, _themeService),
+      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,
@@ -68,37 +68,28 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     this._updateDimensions();
 
     this.register(observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
-
-    this.onOptionsChanged();
+    this.register(toDisposable(() => {
+      for (const l of this._renderLayers) {
+        l.dispose();
+      }
+      removeTerminalFromCache(this._terminal);
+    }));
   }
 
-  public dispose(): void {
-    for (const l of this._renderLayers) {
-      l.dispose();
-    }
-    super.dispose();
-    removeTerminalFromCache(this._id);
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderLayers[0].cacheCanvas;
   }
 
-  public onDevicePixelRatioChange(): void {
+  public handleDevicePixelRatioChange(): void {
     // If the device pixel ratio changed, the char atlas needs to be regenerated
     // and the terminal needs to refreshed
     if (this._devicePixelRatio !== this._coreBrowserService.dpr) {
       this._devicePixelRatio = this._coreBrowserService.dpr;
-      this.onResize(this._bufferService.cols, this._bufferService.rows);
+      this.handleResize(this._bufferService.cols, this._bufferService.rows);
     }
   }
 
-  public setColors(colors: IColorSet): void {
-    this._colors = colors;
-    // Clear layers and force a full render
-    for (const l of this._renderLayers) {
-      l.setColors(this._colors);
-      l.reset();
-    }
-  }
-
-  public onResize(cols: number, rows: number): void {
+  public handleResize(cols: number, rows: number): void {
     // Update character and canvas dimensions
     this._updateDimensions();
 
@@ -112,32 +103,28 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     this._screenElement.style.height = `${this.dimensions.canvasHeight}px`;
   }
 
-  public onCharSizeChanged(): void {
-    this.onResize(this._bufferService.cols, this._bufferService.rows);
+  public handleCharSizeChanged(): void {
+    this.handleResize(this._bufferService.cols, this._bufferService.rows);
   }
 
-  public onBlur(): void {
-    this._runOperation(l => l.onBlur());
+  public handleBlur(): void {
+    this._runOperation(l => l.handleBlur());
   }
 
-  public onFocus(): void {
-    this._runOperation(l => l.onFocus());
+  public handleFocus(): void {
+    this._runOperation(l => l.handleFocus());
   }
 
-  public onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
-    this._runOperation(l => l.onSelectionChanged(start, end, columnSelectMode));
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
+    this._runOperation(l => l.handleSelectionChanged(start, end, columnSelectMode));
     // Selection foreground requires a full re-render
-    if (this._colors.selectionForeground) {
+    if (this._themeService.colors.selectionForeground) {
       this._onRequestRedraw.fire({ start: 0, end: this._bufferService.rows - 1 });
     }
   }
 
-  public onCursorMove(): void {
-    this._runOperation(l => l.onCursorMove());
-  }
-
-  public onOptionsChanged(): void {
-    this._runOperation(l => l.onOptionsChanged());
+  public handleCursorMove(): void {
+    this._runOperation(l => l.handleCursorMove());
   }
 
   public clear(): void {
@@ -156,7 +143,7 @@ export class CanvasRenderer extends Disposable implements IRenderer {
    */
   public renderRows(start: number, end: number): void {
     for (const l of this._renderLayers) {
-      l.onGridChanged(start, end);
+      l.handleGridChanged(start, end);
     }
   }
 

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

@@ -3,14 +3,16 @@
  * @license MIT
  */
 
-import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IBufferService, IOptionsService, ICoreService, IDecorationService } from 'common/services/Services';
 import { IEventEmitter } from 'common/EventEmitter';
-import { ICoreBrowserService } from 'browser/services/Services';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { Terminal } from 'xterm';
+import { toDisposable } from 'common/Lifecycle';
 
 interface ICursorState {
   x: number;
@@ -32,18 +34,18 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _cell: ICellData = new CellData();
 
   constructor(
+    terminal: Terminal,
     container: HTMLElement,
     zIndex: number,
-    colors: IColorSet,
-    rendererId: number,
     private readonly _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
     bufferService: IBufferService,
     optionsService: IOptionsService,
     private readonly _coreService: ICoreService,
     coreBrowserService: ICoreBrowserService,
-    decorationService: IDecorationService
+    decorationService: IDecorationService,
+    themeService: IThemeService
   ) {
-    super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'cursor', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
     this._state = {
       x: 0,
       y: 0,
@@ -56,14 +58,11 @@ export class CursorRenderLayer extends BaseRenderLayer {
       'block': this._renderBlockCursor.bind(this),
       'underline': this._renderUnderlineCursor.bind(this)
     };
-  }
-
-  public dispose(): void {
-    if (this._cursorBlinkStateManager) {
-      this._cursorBlinkStateManager.dispose();
+    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this.register(toDisposable(() => {
+      this._cursorBlinkStateManager?.dispose();
       this._cursorBlinkStateManager = undefined;
-    }
-    super.dispose();
+    }));
   }
 
   public resize(dim: IRenderDimensions): void {
@@ -81,20 +80,20 @@ export class CursorRenderLayer extends BaseRenderLayer {
   public reset(): void {
     this._clearCursor();
     this._cursorBlinkStateManager?.restartBlinkAnimation();
-    this.onOptionsChanged();
+    this._handleOptionsChanged();
   }
 
-  public onBlur(): void {
+  public handleBlur(): void {
     this._cursorBlinkStateManager?.pause();
     this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
   }
 
-  public onFocus(): void {
+  public handleFocus(): void {
     this._cursorBlinkStateManager?.resume();
     this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
   }
 
-  public onOptionsChanged(): void {
+  private _handleOptionsChanged(): void {
     if (this._optionsService.rawOptions.cursorBlink) {
       if (!this._cursorBlinkStateManager) {
         this._cursorBlinkStateManager = new CursorBlinkStateManager(this._coreBrowserService.isFocused, () => {
@@ -110,11 +109,11 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
   }
 
-  public onCursorMove(): void {
+  public handleCursorMove(): void {
     this._cursorBlinkStateManager?.restartBlinkAnimation();
   }
 
-  public onGridChanged(startRow: number, endRow: number): void {
+  public handleGridChanged(startRow: number, endRow: number): void {
     if (!this._cursorBlinkStateManager || this._cursorBlinkStateManager.isPaused) {
       this._render(false);
     } else {
@@ -148,7 +147,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     if (!this._coreBrowserService.isFocused) {
       this._clearCursor();
       this._ctx.save();
-      this._ctx.fillStyle = this._colors.cursor.css;
+      this._ctx.fillStyle = this._themeService.colors.cursor.css;
       const cursorStyle = this._optionsService.rawOptions.cursorStyle;
       if (cursorStyle && cursorStyle !== 'block') {
         this._cursorRenderers[cursorStyle](cursorX, viewportRelativeCursorY, this._cell);
@@ -213,30 +212,30 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
   private _renderBarCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
-    this._ctx.fillStyle = this._colors.cursor.css;
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
     this._fillLeftLineAtCell(x, y, this._optionsService.rawOptions.cursorWidth);
     this._ctx.restore();
   }
 
   private _renderBlockCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
-    this._ctx.fillStyle = this._colors.cursor.css;
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
     this._fillCells(x, y, cell.getWidth(), 1);
-    this._ctx.fillStyle = this._colors.cursorAccent.css;
+    this._ctx.fillStyle = this._themeService.colors.cursorAccent.css;
     this._fillCharTrueColor(cell, x, y);
     this._ctx.restore();
   }
 
   private _renderUnderlineCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
-    this._ctx.fillStyle = this._colors.cursor.css;
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
     this._fillBottomLineAtCells(x, y);
     this._ctx.restore();
   }
 
   private _renderBlurCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
-    this._ctx.strokeStyle = this._colors.cursor.css;
+    this._ctx.strokeStyle = this._themeService.colors.cursor.css;
     this._strokeRectAtCell(x, y, cell.getWidth(), 1);
     this._ctx.restore();
   }

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

@@ -3,32 +3,33 @@
  * @license MIT
  */
 
-import { IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
-import { ICoreBrowserService } from 'browser/services/Services';
-import { is256Color } from './atlas/CharAtlasUtils';
-import { IColorSet, ILinkifierEvent, ILinkifier2 } from 'browser/Types';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { IColorSet, ILinkifierEvent, ILinkifier2, ReadonlyColorSet } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
+import { Terminal } from 'xterm';
 
 export class LinkRenderLayer extends BaseRenderLayer {
   private _state: ILinkifierEvent | undefined;
 
   constructor(
+    terminal: Terminal,
     container: HTMLElement,
     zIndex: number,
-    colors: IColorSet,
-    rendererId: number,
     linkifier2: ILinkifier2,
     bufferService: IBufferService,
     optionsService: IOptionsService,
     decorationService: IDecorationService,
-    coreBrowserService: ICoreBrowserService
+    coreBrowserService: ICoreBrowserService,
+    themeService: IThemeService
   ) {
-    super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'link', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
 
-    linkifier2.onShowLinkUnderline(e => this._onShowLinkUnderline(e));
-    linkifier2.onHideLinkUnderline(e => this._onHideLinkUnderline(e));
+    this.register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
+    this.register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));
   }
 
   public resize(dim: IRenderDimensions): void {
@@ -53,14 +54,14 @@ export class LinkRenderLayer extends BaseRenderLayer {
     }
   }
 
-  private _onShowLinkUnderline(e: ILinkifierEvent): void {
+  private _handleShowLinkUnderline(e: ILinkifierEvent): void {
     if (e.fg === INVERTED_DEFAULT_COLOR) {
-      this._ctx.fillStyle = this._colors.background.css;
+      this._ctx.fillStyle = this._themeService.colors.background.css;
     } else if (e.fg && is256Color(e.fg)) {
       // 256 color support
-      this._ctx.fillStyle = this._colors.ansi[e.fg].css;
+      this._ctx.fillStyle = this._themeService.colors.ansi[e.fg].css;
     } else {
-      this._ctx.fillStyle = this._colors.foreground.css;
+      this._ctx.fillStyle = this._themeService.colors.foreground.css;
     }
 
     if (e.y1 === e.y2) {
@@ -77,7 +78,7 @@ export class LinkRenderLayer extends BaseRenderLayer {
     this._state = e;
   }
 
-  private _onHideLinkUnderline(e: ILinkifierEvent): void {
+  private _handleHideLinkUnderline(e: ILinkifierEvent): void {
     this._clearCurrentLink();
   }
 }

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

@@ -3,11 +3,12 @@
  * @license MIT
  */
 
-import { IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { ICoreBrowserService } from 'browser/services/Services';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { Terminal } from 'xterm';
 
 interface ISelectionState {
   start?: [number, number];
@@ -20,16 +21,16 @@ export class SelectionRenderLayer extends BaseRenderLayer {
   private _state!: ISelectionState;
 
   constructor(
+    terminal: Terminal,
     container: HTMLElement,
     zIndex: number,
-    colors: IColorSet,
-    rendererId: number,
     bufferService: IBufferService,
     coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService,
-    optionsService: IOptionsService
+    optionsService: IOptionsService,
+    themeService: IThemeService
   ) {
-    super(container, 'selection', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'selection', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
     this._clearState();
   }
 
@@ -46,8 +47,8 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     super.resize(dim);
     // On resize use the base render layer's cached selection values since resize clears _state
     // inside reset.
-    if (this._selectionStart && this._selectionEnd) {
-      this._redrawSelection(this._selectionStart, this._selectionEnd, this._columnSelectMode);
+    if (this._selectionModel.selectionStart && this._selectionModel.selectionEnd) {
+      this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
     }
   }
 
@@ -58,18 +59,18 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     }
   }
 
-  public onBlur(): void {
+  public handleBlur(): void {
     this.reset();
-    this._redrawSelection(this._selectionStart, this._selectionEnd, this._columnSelectMode);
+    this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
   }
 
-  public onFocus(): void {
+  public handleFocus(): void {
     this.reset();
-    this._redrawSelection(this._selectionStart, this._selectionEnd, this._columnSelectMode);
+    this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
   }
 
-  public onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
-    super.onSelectionChanged(start, end, columnSelectMode);
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    super.handleSelectionChanged(start, end, columnSelectMode);
     this._redrawSelection(start, end, columnSelectMode);
   }
 
@@ -101,8 +102,8 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     }
 
     this._ctx.fillStyle = (this._coreBrowserService.isFocused
-      ? this._colors.selectionBackgroundTransparent
-      : this._colors.selectionInactiveBackgroundTransparent).css;
+      ? this._themeService.colors.selectionBackgroundTransparent
+      : this._themeService.colors.selectionInactiveBackgroundTransparent).css;
 
     if (columnSelectMode) {
       const startCol = start[0];

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

@@ -3,18 +3,19 @@
  * @license MIT
  */
 
-import { IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { CharData, ICellData } from 'common/Types';
 import { GridCache } from './GridCache';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { NULL_CELL_CODE, Content, UnderlineStyle } from 'common/buffer/Constants';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IOptionsService, IBufferService, IDecorationService } from 'common/services/Services';
-import { ICharacterJoinerService, ICoreBrowserService } from 'browser/services/Services';
+import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 import { color, css } from 'common/Color';
+import { Terminal } from 'xterm';
 
 /**
  * This CharData looks like a null character, which will forc a clear and render
@@ -31,19 +32,20 @@ export class TextRenderLayer extends BaseRenderLayer {
   private _workCell = new CellData();
 
   constructor(
+    terminal: Terminal,
     container: HTMLElement,
     zIndex: number,
-    colors: IColorSet,
     alpha: boolean,
-    rendererId: number,
     bufferService: IBufferService,
     optionsService: IOptionsService,
     private readonly _characterJoinerService: ICharacterJoinerService,
     decorationService: IDecorationService,
-    coreBrowserService: ICoreBrowserService
+    coreBrowserService: ICoreBrowserService,
+    themeService: IThemeService
   ) {
-    super(container, 'text', zIndex, alpha, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
+    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 {
@@ -167,16 +169,16 @@ export class TextRenderLayer extends BaseRenderLayer {
 
       if (cell.isInverse()) {
         if (cell.isFgDefault()) {
-          nextFillStyle = this._colors.foreground.css;
+          nextFillStyle = this._themeService.colors.foreground.css;
         } else if (cell.isFgRGB()) {
           nextFillStyle = `rgb(${AttributeData.toColorRGB(cell.getFgColor()).join(',')})`;
         } else {
-          nextFillStyle = this._colors.ansi[cell.getFgColor()].css;
+          nextFillStyle = this._themeService.colors.ansi[cell.getFgColor()].css;
         }
       } else if (cell.isBgRGB()) {
         nextFillStyle = `rgb(${AttributeData.toColorRGB(cell.getBgColor()).join(',')})`;
       } else if (cell.isBgPalette()) {
-        nextFillStyle = this._colors.ansi[cell.getBgColor()].css;
+        nextFillStyle = this._themeService.colors.ansi[cell.getBgColor()].css;
       }
 
       // Apply dim to the background, this is relatively slow as the CSS is re-parsed but dim is
@@ -232,81 +234,10 @@ export class TextRenderLayer extends BaseRenderLayer {
   }
 
   private _drawForeground(firstRow: number, lastRow: number): void {
-    this._forEachCell(firstRow, lastRow, (cell, x, y) => {
-      if (cell.isInvisible()) {
-        return;
-      }
-      this._drawChars(cell, x, y);
-      if (cell.isUnderline() || cell.isStrikethrough()) {
-        this._ctx.save();
-
-        if (cell.isInverse()) {
-          if (cell.isBgDefault()) {
-            this._ctx.fillStyle = this._colors.background.css;
-          } else if (cell.isBgRGB()) {
-            this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getBgColor()).join(',')})`;
-          } else {
-            let bg = cell.getBgColor();
-            if (this._optionsService.rawOptions.drawBoldTextInBrightColors && cell.isBold() && bg < 8) {
-              bg += 8;
-            }
-            this._ctx.fillStyle = this._colors.ansi[bg].css;
-          }
-        } else {
-          if (cell.isFgDefault()) {
-            this._ctx.fillStyle = this._colors.foreground.css;
-          } else if (cell.isFgRGB()) {
-            this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getFgColor()).join(',')})`;
-          } else {
-            let fg = cell.getFgColor();
-            if (this._optionsService.rawOptions.drawBoldTextInBrightColors && cell.isBold() && fg < 8) {
-              fg += 8;
-            }
-            this._ctx.fillStyle = this._colors.ansi[fg].css;
-          }
-        }
-
-        if (cell.isStrikethrough()) {
-          this._fillMiddleLineAtCells(x, y, cell.getWidth());
-        }
-        if (cell.isUnderline()) {
-          if (!cell.isUnderlineColorDefault()) {
-            if (cell.isUnderlineColorRGB()) {
-              this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getUnderlineColor()).join(',')})`;
-            } else {
-              let fg = cell.getUnderlineColor();
-              if (this._optionsService.rawOptions.drawBoldTextInBrightColors && cell.isBold() && fg < 8) {
-                fg += 8;
-              }
-              this._ctx.fillStyle = this._colors.ansi[fg].css;
-            }
-          }
-          switch (cell.extended.underlineStyle) {
-            case UnderlineStyle.DOUBLE:
-              this._fillBottomLineAtCells(x, y, cell.getWidth(), -this._coreBrowserService.dpr);
-              this._fillBottomLineAtCells(x, y, cell.getWidth(), this._coreBrowserService.dpr);
-              break;
-            case UnderlineStyle.CURLY:
-              this._curlyUnderlineAtCell(x, y, cell.getWidth());
-              break;
-            case UnderlineStyle.DOTTED:
-              this._dottedUnderlineAtCell(x, y, cell.getWidth());
-              break;
-            case UnderlineStyle.DASHED:
-              this._dashedUnderlineAtCell(x, y, cell.getWidth());
-              break;
-            case UnderlineStyle.SINGLE:
-            default:
-              this._fillBottomLineAtCells(x, y, cell.getWidth());
-              break;
-          }
-        }
-        this._ctx.restore();
-      }
-    });
+    this._forEachCell(firstRow, lastRow, (cell, x, y) => this._drawChars(cell, x, y));
   }
 
-  public onGridChanged(firstRow: number, lastRow: number): void {
+  public handleGridChanged(firstRow: number, lastRow: number): void {
     // Resize has not been called yet
     if (this._state.cache.length === 0) {
       return;
@@ -321,10 +252,6 @@ export class TextRenderLayer extends BaseRenderLayer {
     this._drawForeground(firstRow, lastRow);
   }
 
-  public onOptionsChanged(): void {
-    this._setTransparency(this._optionsService.rawOptions.allowTransparency);
-  }
-
   /**
    * Whether a character is overlapping to the next cell.
    */
@@ -363,19 +290,4 @@ export class TextRenderLayer extends BaseRenderLayer {
     this._characterOverlapCache[chars] = overlaps;
     return overlaps;
   }
-
-  /**
-   * Clear the charcater at the cell specified.
-   * @param x The column of the char.
-   * @param y The row of the char.
-   */
-  // private _clearChar(x: number, y: number): void {
-  //   let colsToClear = 1;
-  //   // Clear the adjacent character if it was wide
-  //   const state = this._state.cache[x][y];
-  //   if (state && state[CHAR_DATA_WIDTH_INDEX] === 2) {
-  //     colsToClear = 2;
-  //   }
-  //   this.clearCells(x, y, colsToClear, 1);
-  // }
 }

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

@@ -4,7 +4,7 @@
  */
 
 import { IDisposable } from 'common/Types';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IEvent } from 'common/EventEmitter';
 
 // TODO: Use core interfaces
@@ -41,16 +41,14 @@ export interface IRenderer extends IDisposable {
    */
   readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
 
-  dispose(): void;
-  setColors(colors: IColorSet): void;
-  onDevicePixelRatioChange(): void;
-  onResize(cols: number, rows: number): void;
-  onCharSizeChanged(): void;
-  onBlur(): void;
-  onFocus(): void;
-  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
-  onCursorMove(): void;
-  onOptionsChanged(): void;
+  handleDevicePixelRatioChange(): void;
+  handleResize(cols: number, rows: number): void;
+  handleCharSizeChanged(): void;
+  handleBlur(): void;
+  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;
@@ -58,42 +56,33 @@ export interface IRenderer extends IDisposable {
 
 export interface IRenderLayer extends IDisposable {
   readonly canvas: HTMLCanvasElement;
+  readonly cacheCanvas: HTMLCanvasElement;
 
   /**
    * Called when the terminal loses focus.
    */
-  onBlur(): void;
+  handleBlur(): void;
 
   /**
    * * Called when the terminal gets focus.
    */
-  onFocus(): void;
+  handleFocus(): void;
 
   /**
    * Called when the cursor is moved.
    */
-  onCursorMove(): void;
-
-  /**
-   * Called when options change.
-   */
-  onOptionsChanged(): void;
-
-  /**
-   * Called when the theme changes.
-   */
-  setColors(colorSet: IColorSet): void;
+  handleCursorMove(): void;
 
   /**
    * Called when the data in the grid has changed (or needs to be rendered
    * again).
    */
-  onGridChanged(startRow: number, endRow: number): void;
+  handleGridChanged(startRow: number, endRow: number): void;
 
   /**
    * Calls when the selection changes.
    */
-  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
 
   /**
    * Resize the render layer.

addons/xterm-addon-canvas/src/atlas/BaseCharAtlas.ts

@@ -1,58 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { IGlyphIdentifier } from './Types';
-import { IDisposable } from 'common/Types';
-
-export abstract class BaseCharAtlas implements IDisposable {
-  private _didWarmUp: boolean = false;
-
-  public dispose(): void { }
-
-  /**
-   * Perform any work needed to warm the cache before it can be used. May be called multiple times.
-   * Implement _doWarmUp instead if you only want to get called once.
-   */
-  public warmUp(): void {
-    if (!this._didWarmUp) {
-      this._doWarmUp();
-      this._didWarmUp = true;
-    }
-  }
-
-  /**
-   * Perform any work needed to warm the cache before it can be used. Used by the default
-   * implementation of warmUp(), and will only be called once.
-   */
-  private _doWarmUp(): void { }
-
-  public clear(): void { }
-
-  /**
-   * Called when we start drawing a new frame.
-   *
-   * TODO: We rely on this getting called by TextRenderLayer. This should really be called by
-   * Renderer instead, but we need to make Renderer the source-of-truth for the char atlas, instead
-   * of BaseRenderLayer.
-   */
-  public beginFrame(): void { }
-
-  /**
-   * May be called before warmUp finishes, however it is okay for the implementation to
-   * do nothing and return false in that case.
-   *
-   * @param ctx Where to draw the character onto.
-   * @param glyph Information about what to draw
-   * @param x The position on the context to start drawing at
-   * @param y The position on the context to start drawing at
-   * @returns The success state. True if we drew the character.
-   */
-  public abstract draw(
-    ctx: CanvasRenderingContext2D,
-    glyph: IGlyphIdentifier,
-    x: number,
-    y: number
-  ): boolean;
-}

addons/xterm-addon-canvas/src/atlas/CharAtlasCache.ts

@@ -1,96 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { generateConfig, configEquals } from './CharAtlasUtils';
-import { BaseCharAtlas } from './BaseCharAtlas';
-import { DynamicCharAtlas } from './DynamicCharAtlas';
-import { ICharAtlasConfig } from './Types';
-import { IColorSet } from 'browser/Types';
-import { ITerminalOptions } from 'xterm';
-
-interface ICharAtlasCacheEntry {
-  atlas: BaseCharAtlas;
-  config: ICharAtlasConfig;
-  // N.B. This implementation potentially holds onto copies of the terminal forever, so
-  // this may cause memory leaks.
-  ownedBy: number[];
-}
-
-const charAtlasCache: ICharAtlasCacheEntry[] = [];
-
-/**
- * Acquires a char atlas, either generating a new one or returning an existing
- * one that is in use by another terminal.
- */
-export function acquireCharAtlas(
-  options: Required<ITerminalOptions>,
-  rendererId: number,
-  colors: IColorSet,
-  scaledCharWidth: number,
-  scaledCharHeight: number,
-  devicePixelRatio: number
-): BaseCharAtlas {
-  const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, options, colors, devicePixelRatio);
-
-  // Check to see if the renderer already owns this config
-  for (let i = 0; i < charAtlasCache.length; i++) {
-    const entry = charAtlasCache[i];
-    const ownedByIndex = entry.ownedBy.indexOf(rendererId);
-    if (ownedByIndex >= 0) {
-      if (configEquals(entry.config, newConfig)) {
-        return entry.atlas;
-      }
-      // The configs differ, release the renderer from the entry
-      if (entry.ownedBy.length === 1) {
-        entry.atlas.dispose();
-        charAtlasCache.splice(i, 1);
-      } else {
-        entry.ownedBy.splice(ownedByIndex, 1);
-      }
-      break;
-    }
-  }
-
-  // Try match a char atlas from the cache
-  for (let i = 0; i < charAtlasCache.length; i++) {
-    const entry = charAtlasCache[i];
-    if (configEquals(entry.config, newConfig)) {
-      // Add the renderer to the cache entry and return
-      entry.ownedBy.push(rendererId);
-      return entry.atlas;
-    }
-  }
-
-  const newEntry: ICharAtlasCacheEntry = {
-    atlas: new DynamicCharAtlas(
-      document,
-      newConfig
-    ),
-    config: newConfig,
-    ownedBy: [rendererId]
-  };
-  charAtlasCache.push(newEntry);
-  return newEntry.atlas;
-}
-
-/**
- * Removes a terminal reference from the cache, allowing its memory to be freed.
- */
-export function removeTerminalFromCache(rendererId: number): void {
-  for (let i = 0; i < charAtlasCache.length; i++) {
-    const index = charAtlasCache[i].ownedBy.indexOf(rendererId);
-    if (index !== -1) {
-      if (charAtlasCache[i].ownedBy.length === 1) {
-        // Remove the cache entry if it's the only renderer
-        charAtlasCache[i].atlas.dispose();
-        charAtlasCache.splice(i, 1);
-      } else {
-        // Remove the reference from the cache entry
-        charAtlasCache[i].ownedBy.splice(index, 1);
-      }
-      break;
-    }
-  }
-}

addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts

@@ -1,54 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { ICharAtlasConfig } from './Types';
-import { DEFAULT_COLOR } from 'common/buffer/Constants';
-import { IColorSet, IPartialColorSet } from 'browser/Types';
-import { ITerminalOptions } from 'xterm';
-
-export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, options: Required<ITerminalOptions>, colors: IColorSet, devicePixelRatio: number): ICharAtlasConfig {
-  // null out some fields that don't matter
-  const clonedColors: IPartialColorSet = {
-    foreground: colors.foreground,
-    background: colors.background,
-    cursor: undefined,
-    cursorAccent: undefined,
-    selectionBackground: undefined,
-    ansi: colors.ansi.slice()
-  };
-  return {
-    devicePixelRatio,
-    scaledCharWidth,
-    scaledCharHeight,
-    fontFamily: options.fontFamily,
-    fontSize: options.fontSize,
-    fontWeight: options.fontWeight,
-    fontWeightBold: options.fontWeightBold,
-    allowTransparency: options.allowTransparency,
-    colors: clonedColors
-  };
-}
-
-export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean {
-  for (let i = 0; i < a.colors.ansi.length; i++) {
-    if (a.colors.ansi[i].rgba !== b.colors.ansi[i].rgba) {
-      return false;
-    }
-  }
-  return a.devicePixelRatio === b.devicePixelRatio &&
-      a.fontFamily === b.fontFamily &&
-      a.fontSize === b.fontSize &&
-      a.fontWeight === b.fontWeight &&
-      a.fontWeightBold === b.fontWeightBold &&
-      a.allowTransparency === b.allowTransparency &&
-      a.scaledCharWidth === b.scaledCharWidth &&
-      a.scaledCharHeight === b.scaledCharHeight &&
-      a.colors.foreground === b.colors.foreground &&
-      a.colors.background === b.colors.background;
-}
-
-export function is256Color(colorCode: number): boolean {
-  return colorCode < DEFAULT_COLOR;
-}

addons/xterm-addon-canvas/src/atlas/DynamicCharAtlas.ts

@@ -1,411 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/Constants';
-import { IGlyphIdentifier, ICharAtlasConfig } from './Types';
-import { BaseCharAtlas } from './BaseCharAtlas';
-import { DEFAULT_ANSI_COLORS } from 'browser/ColorManager';
-import { LRUMap } from './LRUMap';
-import { isFirefox, isSafari } from 'common/Platform';
-import { IColor } from 'common/Types';
-import { throwIfFalsy } from 'browser/renderer/RendererUtils';
-import { color } from 'common/Color';
-
-// In practice we're probably never going to exhaust a texture this large. For debugging purposes,
-// however, 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;
-
-const TRANSPARENT_COLOR = {
-  css: 'rgba(0, 0, 0, 0)',
-  rgba: 0
-};
-
-// Drawing to the cache is expensive: If we have to draw more than this number of glyphs to the
-// cache in a single frame, give up on trying to cache anything else, and try to finish the current
-// frame ASAP.
-//
-// This helps to limit the amount of damage a program can do when it would otherwise thrash the
-// cache.
-const FRAME_CACHE_DRAW_LIMIT = 100;
-
-/**
- * The number of milliseconds to wait before generating the ImageBitmap, this is to debounce/batch
- * the operation as window.createImageBitmap is asynchronous.
- */
-const GLYPH_BITMAP_COMMIT_DELAY = 100;
-
-interface IGlyphCacheValue {
-  index: number;
-  isEmpty: boolean;
-  inBitmap: boolean;
-}
-
-export function getGlyphCacheKey(glyph: IGlyphIdentifier): number {
-  // Note that this only returns a valid key when code < 256
-  // Layout:
-  // 0b00000000000000000000000000000001: italic (1)
-  // 0b00000000000000000000000000000010: dim (1)
-  // 0b00000000000000000000000000000100: bold (1)
-  // 0b00000000000000000000111111111000: fg (9)
-  // 0b00000000000111111111000000000000: bg (9)
-  // 0b00011111111000000000000000000000: code (8)
-  // 0b11100000000000000000000000000000: unused (3)
-  return glyph.code << 21 | glyph.bg << 12 | glyph.fg << 3 | (glyph.bold ? 0 : 4) + (glyph.dim ? 0 : 2) + (glyph.italic ? 0 : 1);
-}
-
-export class DynamicCharAtlas extends BaseCharAtlas {
-  // An ordered map that we're using to keep track of where each glyph is in the atlas texture.
-  // It's ordered so that we can determine when to remove the old entries.
-  private _cacheMap: LRUMap<IGlyphCacheValue>;
-
-  // The texture that the atlas is drawn to
-  private _cacheCanvas: HTMLCanvasElement;
-  private _cacheCtx: CanvasRenderingContext2D;
-
-  // A temporary context that glyphs are drawn to before being transfered to the atlas.
-  private _tmpCtx: CanvasRenderingContext2D;
-
-  // The number of characters stored in the atlas by width/height
-  private _width: number;
-  private _height: number;
-
-  private _drawToCacheCount: number = 0;
-
-  // An array of glyph keys that are waiting on the bitmap to be generated.
-  private _glyphsWaitingOnBitmap: IGlyphCacheValue[] = [];
-
-  // The timeout that is used to batch bitmap generation so it's not requested for every new glyph.
-  private _bitmapCommitTimeout: number | null = null;
-
-  // The bitmap to draw from, this is much faster on other browsers than others.
-  private _bitmap: ImageBitmap | null = null;
-
-  constructor(document: Document, private _config: ICharAtlasConfig) {
-    super();
-    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 }));
-
-    const tmpCanvas = document.createElement('canvas');
-    tmpCanvas.width = this._config.scaledCharWidth;
-    tmpCanvas.height = this._config.scaledCharHeight;
-    this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
-
-    this._width = Math.floor(TEXTURE_WIDTH / this._config.scaledCharWidth);
-    this._height = Math.floor(TEXTURE_HEIGHT / this._config.scaledCharHeight);
-    const capacity = this._width * this._height;
-    this._cacheMap = new LRUMap(capacity);
-    this._cacheMap.prealloc(capacity);
-
-    // This is useful for debugging
-    // document.body.appendChild(this._cacheCanvas);
-  }
-
-  public dispose(): void {
-    if (this._bitmapCommitTimeout !== null) {
-      window.clearTimeout(this._bitmapCommitTimeout);
-      this._bitmapCommitTimeout = null;
-    }
-  }
-
-  public beginFrame(): void {
-    this._drawToCacheCount = 0;
-  }
-
-  public clear(): void {
-    if (this._cacheMap.size > 0) {
-      const capacity = this._width * this._height;
-      this._cacheMap = new LRUMap(capacity);
-      this._cacheMap.prealloc(capacity);
-    }
-    this._cacheCtx.clearRect(0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT);
-    this._tmpCtx.clearRect(0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight);
-  }
-
-  public draw(
-    ctx: CanvasRenderingContext2D,
-    glyph: IGlyphIdentifier,
-    x: number,
-    y: number
-  ): boolean {
-    // Space is always an empty cell, special case this as it's so common
-    if (glyph.code === 32) {
-      return true;
-    }
-
-    // Exit early for uncachable glyphs
-    if (!this._canCache(glyph)) {
-      return false;
-    }
-
-    const glyphKey = getGlyphCacheKey(glyph);
-    const cacheValue = this._cacheMap.get(glyphKey);
-    if (cacheValue !== null && cacheValue !== undefined) {
-      this._drawFromCache(ctx, cacheValue, x, y);
-      return true;
-    }
-    if (this._drawToCacheCount < FRAME_CACHE_DRAW_LIMIT) {
-      let index;
-      if (this._cacheMap.size < this._cacheMap.capacity) {
-        index = this._cacheMap.size;
-      } else {
-        // we're out of space, so our call to set will delete this item
-        index = this._cacheMap.peek()!.index;
-      }
-      const cacheValue = this._drawToCache(glyph, index);
-      this._cacheMap.set(glyphKey, cacheValue);
-      this._drawFromCache(ctx, cacheValue, x, y);
-      return true;
-    }
-    return false;
-  }
-
-  private _canCache(glyph: IGlyphIdentifier): boolean {
-    // Only cache ascii and extended characters for now, to be safe. In the future, we could do
-    // something more complicated to determine the expected width of a character.
-    //
-    // If we switch the renderer over to webgl at some point, we may be able to use blending modes
-    // to draw overlapping glyphs from the atlas:
-    // https://github.com/servo/webrender/issues/464#issuecomment-255632875
-    // https://webglfundamentals.org/webgl/lessons/webgl-text-texture.html
-    return glyph.code < 256;
-  }
-
-  private _toCoordinateX(index: number): number {
-    return (index % this._width) * this._config.scaledCharWidth;
-  }
-
-  private _toCoordinateY(index: number): number {
-    return Math.floor(index / this._width) * this._config.scaledCharHeight;
-  }
-
-  private _drawFromCache(
-    ctx: CanvasRenderingContext2D,
-    cacheValue: IGlyphCacheValue,
-    x: number,
-    y: number
-  ): void {
-    // We don't actually need to do anything if this is whitespace.
-    if (cacheValue.isEmpty) {
-      return;
-    }
-    const cacheX = this._toCoordinateX(cacheValue.index);
-    const cacheY = this._toCoordinateY(cacheValue.index);
-    ctx.drawImage(
-      cacheValue.inBitmap ? this._bitmap! : this._cacheCanvas,
-      cacheX,
-      cacheY,
-      this._config.scaledCharWidth,
-      this._config.scaledCharHeight,
-      x,
-      y,
-      this._config.scaledCharWidth,
-      this._config.scaledCharHeight
-    );
-  }
-
-  private _getColorFromAnsiIndex(idx: number): IColor {
-    if (idx < this._config.colors.ansi.length) {
-      return this._config.colors.ansi[idx];
-    }
-    return DEFAULT_ANSI_COLORS[idx];
-  }
-
-  private _getBackgroundColor(glyph: IGlyphIdentifier): IColor {
-    if (this._config.allowTransparency) {
-      // The background color might have some transparency, so we need to render it as fully
-      // transparent in the atlas. Otherwise we'd end up drawing the transparent background twice
-      // around the anti-aliased edges of the glyph, and it would look too dark.
-      return TRANSPARENT_COLOR;
-    }
-    let result: IColor;
-    if (glyph.bg === INVERTED_DEFAULT_COLOR) {
-      result = this._config.colors.foreground;
-    } else if (glyph.bg < 256) {
-      result = this._getColorFromAnsiIndex(glyph.bg);
-    } else {
-      result = this._config.colors.background;
-    }
-    if (glyph.dim) {
-      result = color.blend(this._config.colors.background, color.multiplyOpacity(result, 0.5));
-    }
-    return result;
-  }
-
-  private _getForegroundColor(glyph: IGlyphIdentifier): IColor {
-    if (glyph.fg === INVERTED_DEFAULT_COLOR) {
-      return color.opaque(this._config.colors.background);
-    }
-    if (glyph.fg < 256) {
-      // 256 color support
-      return this._getColorFromAnsiIndex(glyph.fg);
-    }
-    return this._config.colors.foreground;
-  }
-
-  // TODO: We do this (or something similar) in multiple places. We should split this off
-  // into a shared function.
-  private _drawToCache(glyph: IGlyphIdentifier, index: number): IGlyphCacheValue {
-    this._drawToCacheCount++;
-
-    this._tmpCtx.save();
-
-    // draw the background
-    const backgroundColor = this._getBackgroundColor(glyph);
-    // Use a 'copy' composite operation to clear any existing glyph out of _tmpCtxWithAlpha, regardless of
-    // transparency in backgroundColor
-    this._tmpCtx.globalCompositeOperation = 'copy';
-    this._tmpCtx.fillStyle = backgroundColor.css;
-    this._tmpCtx.fillRect(0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight);
-    this._tmpCtx.globalCompositeOperation = 'source-over';
-
-    // draw the foreground/glyph
-    const fontWeight = glyph.bold ? this._config.fontWeightBold : this._config.fontWeight;
-    const fontStyle = glyph.italic ? 'italic' : '';
-    this._tmpCtx.font =
-      `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
-    this._tmpCtx.textBaseline = TEXT_BASELINE;
-
-    this._tmpCtx.fillStyle = this._getForegroundColor(glyph).css;
-
-    // Apply alpha to dim the character
-    if (glyph.dim) {
-      this._tmpCtx.globalAlpha = DIM_OPACITY;
-    }
-
-    // Draw the character
-    this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight);
-
-    // clear the background from the character to avoid issues with drawing over the previous
-    // character if it extends past it's bounds
-    let imageData = this._tmpCtx.getImageData(
-      0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
-    );
-    let isEmpty = false;
-    if (!this._config.allowTransparency) {
-      isEmpty = clearColor(imageData, backgroundColor);
-    }
-
-    // If this charcater is underscore and empty, shift it up until it is visible, try for a maximum
-    // of 5 pixels.
-    if (isEmpty && glyph.chars === '_' && !this._config.allowTransparency) {
-      for (let offset = 1; offset <= 5; offset++) {
-        // Draw the character
-        this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight - offset);
-
-        // clear the background from the character to avoid issues with drawing over the previous
-        // character if it extends past it's bounds
-        imageData = this._tmpCtx.getImageData(
-          0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
-        );
-        isEmpty = clearColor(imageData, backgroundColor);
-        if (!isEmpty) {
-          break;
-        }
-      }
-    }
-
-    this._tmpCtx.restore();
-
-    // copy the data from imageData to _cacheCanvas
-    const x = this._toCoordinateX(index);
-    const y = this._toCoordinateY(index);
-    // putImageData doesn't do any blending, so it will overwrite any existing cache entry for us
-    this._cacheCtx.putImageData(imageData, x, y);
-
-    // Add the glyph and queue it to the bitmap (if the browser supports it)
-    const cacheValue = {
-      index,
-      isEmpty,
-      inBitmap: false
-    };
-    this._addGlyphToBitmap(cacheValue);
-
-    return cacheValue;
-  }
-
-  private _addGlyphToBitmap(cacheValue: IGlyphCacheValue): void {
-    // Support is patchy for createImageBitmap at the moment, pass a canvas back
-    // if support is lacking as drawImage works there too. Firefox is also
-    // included here as ImageBitmap appears both buggy and has horrible
-    // performance (tested on v55).
-    if (!('createImageBitmap' in window) || isFirefox || isSafari) {
-      return;
-    }
-
-    // Add the glyph to the queue
-    this._glyphsWaitingOnBitmap.push(cacheValue);
-
-    // Check if bitmap generation timeout already exists
-    if (this._bitmapCommitTimeout !== null) {
-      return;
-    }
-
-    this._bitmapCommitTimeout = window.setTimeout(() => this._generateBitmap(), GLYPH_BITMAP_COMMIT_DELAY);
-  }
-
-  private _generateBitmap(): void {
-    const glyphsMovingToBitmap = this._glyphsWaitingOnBitmap;
-    this._glyphsWaitingOnBitmap = [];
-    window.createImageBitmap(this._cacheCanvas).then(bitmap => {
-      // Set bitmap
-      this._bitmap = bitmap;
-
-      // Mark all new glyphs as in bitmap, excluding glyphs that came in after
-      // the bitmap was requested
-      for (let i = 0; i < glyphsMovingToBitmap.length; i++) {
-        const value = glyphsMovingToBitmap[i];
-        // It doesn't matter if the value was already evicted, it will be
-        // released from memory after this block if so.
-        value.inBitmap = true;
-      }
-    });
-    this._bitmapCommitTimeout = null;
-  }
-}
-
-// This is used for debugging the renderer, just swap out `new DynamicCharAtlas` with
-// `new NoneCharAtlas`.
-export class NoneCharAtlas extends BaseCharAtlas {
-  constructor(document: Document, config: ICharAtlasConfig) {
-    super();
-  }
-
-  public draw(
-    ctx: CanvasRenderingContext2D,
-    glyph: IGlyphIdentifier,
-    x: number,
-    y: number
-  ): boolean {
-    return false;
-  }
-}
-
-/**
- * Makes a particular rgb color and colors that are nearly the same in an ImageData completely
- * transparent.
- * @returns True if the result is "empty", meaning all pixels are fully transparent.
- */
-function clearColor(imageData: ImageData, color: IColor): boolean {
-  let isEmpty = true;
-  const r = color.rgba >>> 24;
-  const g = color.rgba >>> 16 & 0xFF;
-  const b = color.rgba >>> 8 & 0xFF;
-  for (let offset = 0; offset < imageData.data.length; offset += 4) {
-    if (Math.abs(imageData.data[offset] - r) +
-        Math.abs(imageData.data[offset + 1] - g) +
-        Math.abs(imageData.data[offset + 2] - b) < 35) {
-      imageData.data[offset + 3] = 0;
-    } else {
-      isEmpty = false;
-    }
-  }
-  return isEmpty;
-}

addons/xterm-addon-canvas/src/atlas/LRUMap.test.ts

@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { LRUMap } from './LRUMap';
-
-describe('LRUMap', () => {
-  it('can be used to store and retrieve values', () => {
-    const map = new LRUMap(10);
-    map.set(1, 'valuea');
-    map.set(2, 'valueb');
-    map.set(3, 'valuec');
-    assert.strictEqual(map.get(1), 'valuea');
-    assert.strictEqual(map.get(2), 'valueb');
-    assert.strictEqual(map.get(3), 'valuec');
-  });
-
-  it('maintains a size from insertions', () => {
-    const map = new LRUMap(10);
-    assert.strictEqual(map.size, 0);
-    map.set(1, 'value');
-    assert.strictEqual(map.size, 1);
-    map.set(2, 'value');
-    assert.strictEqual(map.size, 2);
-  });
-
-  it('deletes the oldest entry when the capacity is exceeded', () => {
-    const map = new LRUMap(4);
-    map.set(1, 'value');
-    map.set(2, 'value');
-    map.set(3, 'value');
-    map.set(4, 'value');
-    map.set(5, 'value');
-    assert.isNull(map.get(1));
-    assert.isNotNull(map.get(2));
-    assert.isNotNull(map.get(3));
-    assert.isNotNull(map.get(4));
-    assert.isNotNull(map.get(5));
-    assert.strictEqual(map.size, 4);
-  });
-
-  it('prevents a recently accessed entry from getting deleted', () => {
-    const map = new LRUMap(2);
-    map.set(1, 'value');
-    map.set(2, 'value');
-    map.get(1);
-    // a would normally get deleted here, except that we called get()
-    map.set(3, 'value');
-    assert.isNotNull(map.get(1));
-    // b got deleted instead of a
-    assert.isNull(map.get(2));
-    assert.isNotNull(map.get(3));
-  });
-
-  it('supports mutation', () => {
-    const map = new LRUMap(10);
-    map.set(1, 'oldvalue');
-    map.set(1, 'newvalue');
-    // mutation doesn't change the size
-    assert.strictEqual(map.size, 1);
-    assert.strictEqual(map.get(1), 'newvalue');
-  });
-});

addons/xterm-addon-canvas/src/atlas/LRUMap.ts

@@ -1,136 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-interface ILinkedListNode<T> {
-  prev: ILinkedListNode<T> | null;
-  next: ILinkedListNode<T> | null;
-  key: number | null;
-  value: T | null;
-}
-
-export class LRUMap<T> {
-  private _map: { [key: number]: ILinkedListNode<T> } = {};
-  private _head: ILinkedListNode<T> | null = null;
-  private _tail: ILinkedListNode<T> | null = null;
-  private _nodePool: ILinkedListNode<T>[] = [];
-  public size: number = 0;
-
-  constructor(public capacity: number) { }
-
-  private _unlinkNode(node: ILinkedListNode<T>): void {
-    const prev = node.prev;
-    const next = node.next;
-    if (node === this._head) {
-      this._head = next;
-    }
-    if (node === this._tail) {
-      this._tail = prev;
-    }
-    if (prev !== null) {
-      prev.next = next;
-    }
-    if (next !== null) {
-      next.prev = prev;
-    }
-  }
-
-  private _appendNode(node: ILinkedListNode<T>): void {
-    const tail = this._tail;
-    if (tail !== null) {
-      tail.next = node;
-    }
-    node.prev = tail;
-    node.next = null;
-    this._tail = node;
-    if (this._head === null) {
-      this._head = node;
-    }
-  }
-
-  /**
-   * Preallocate a bunch of linked-list nodes. Allocating these nodes ahead of time means that
-   * they're more likely to live next to each other in memory, which seems to improve performance.
-   *
-   * Each empty object only consumes about 60 bytes of memory, so this is pretty cheap, even for
-   * large maps.
-   */
-  public prealloc(count: number): void {
-    const nodePool = this._nodePool;
-    for (let i = 0; i < count; i++) {
-      nodePool.push({
-        prev: null,
-        next: null,
-        key: null,
-        value: null
-      });
-    }
-  }
-
-  public get(key: number): T | null {
-    // This is unsafe: We're assuming our keyspace doesn't overlap with Object.prototype. However,
-    // it's faster than calling hasOwnProperty, and in our case, it would never overlap.
-    const node = this._map[key];
-    if (node !== undefined) {
-      this._unlinkNode(node);
-      this._appendNode(node);
-      return node.value;
-    }
-    return null;
-  }
-
-  /**
-   * Gets a value from a key without marking it as the most recently used item.
-   */
-  public peekValue(key: number): T | null {
-    const node = this._map[key];
-    if (node !== undefined) {
-      return node.value;
-    }
-    return null;
-  }
-
-  public peek(): T | null {
-    const head = this._head;
-    return head === null ? null : head.value;
-  }
-
-  public set(key: number, value: T): void {
-    // This is unsafe: See note above.
-    let node = this._map[key];
-    if (node !== undefined) {
-      // already exists, we just need to mutate it and move it to the end of the list
-      node = this._map[key];
-      this._unlinkNode(node);
-      node.value = value;
-    } else if (this.size >= this.capacity) {
-      // we're out of space: recycle the head node, move it to the tail
-      node = this._head!;
-      this._unlinkNode(node);
-      delete this._map[node.key!];
-      node.key = key;
-      node.value = value;
-      this._map[key] = node;
-    } else {
-      // make a new element
-      const nodePool = this._nodePool;
-      if (nodePool.length > 0) {
-        // use a preallocated node if we can
-        node = nodePool.pop()!;
-        node.key = key;
-        node.value = value;
-      } else {
-        node = {
-          prev: null,
-          next: null,
-          key,
-          value
-        };
-      }
-      this._map[key] = node;
-      this.size++;
-    }
-    this._appendNode(node);
-  }
-}

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

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { FontWeight } from 'common/services/Services';
-import { IPartialColorSet } from 'browser/Types';
-
-export interface IGlyphIdentifier {
-  chars: string;
-  code: number;
-  bg: number;
-  fg: number;
-  bold: boolean;
-  dim: boolean;
-  italic: boolean;
-}
-
-export interface ICharAtlasConfig {
-  devicePixelRatio: number;
-  fontSize: number;
-  fontFamily: string;
-  fontWeight: FontWeight;
-  fontWeightBold: FontWeight;
-  scaledCharWidth: number;
-  scaledCharHeight: number;
-  allowTransparency: boolean;
-  colors: IPartialColorSet;
-}

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

@@ -12,6 +12,11 @@ declare module 'xterm-addon-canvas' {
   export class CanvasAddon implements ITerminalAddon {
     public textureAtlas?: HTMLCanvasElement;
 
+    /**
+     * An event that is fired when the texture atlas of the renderer changes.
+     */
+    public readonly onChangeTextureAtlas: IEvent<HTMLCanvasElement>;
+
     constructor();
 
     /**

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

@@ -5,6 +5,7 @@
 
 import { Terminal, IDisposable, ITerminalAddon, IBufferRange, IDecoration } from 'xterm';
 import { EventEmitter } from 'common/EventEmitter';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 
 export interface ISearchOptions {
   regex?: boolean;
@@ -50,7 +51,7 @@ type LineCacheEntry = [
 const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\\;:"\',./<>?';
 const LINES_CACHE_TIME_TO_LIVE = 15 * 1000; // 15 secs
 
-export class SearchAddon implements ITerminalAddon {
+export class SearchAddon extends Disposable implements ITerminalAddon {
   private _terminal: Terminal | undefined;
   private _cachedSearchTerm: string | undefined;
   private _selectedDecoration: IDecoration | undefined;
@@ -72,13 +73,18 @@ export class SearchAddon implements ITerminalAddon {
 
   private _resultIndex: number | undefined;
 
-  private readonly _onDidChangeResults = new EventEmitter<{ resultIndex: number, resultCount: number } | undefined>();
+  private readonly _onDidChangeResults = this.register(new EventEmitter<{ resultIndex: number, resultCount: number } | undefined>());
   public readonly onDidChangeResults = this._onDidChangeResults.event;
 
   public activate(terminal: Terminal): void {
     this._terminal = terminal;
-    this._onDataDisposable = this._terminal.onWriteParsed(() => this._updateMatches());
-    this._onResizeDisposable = this._terminal.onResize(() => this._updateMatches());
+    this._onDataDisposable = this.register(this._terminal.onWriteParsed(() => this._updateMatches()));
+    this._onResizeDisposable = this.register(this._terminal.onResize(() => this._updateMatches()));
+    this.register(toDisposable(() => {
+      this.clearDecorations();
+      this._onDataDisposable?.dispose();
+      this._onResizeDisposable?.dispose();
+    }));
   }
 
   private _updateMatches(): void {
@@ -94,12 +100,6 @@ export class SearchAddon implements ITerminalAddon {
     }
   }
 
-  public dispose(): void {
-    this.clearDecorations();
-    this._onDataDisposable?.dispose();
-    this._onResizeDisposable?.dispose();
-  }
-
   public clearDecorations(retainCachedSearchTerm?: boolean): void {
     this._selectedDecoration?.dispose();
     this._searchResults?.clear();

addons/xterm-addon-serialize/src/SerializeAddon.test.ts

@@ -7,9 +7,10 @@ import jsdom = require('jsdom');
 import { assert } from 'chai';
 import { SerializeAddon } from './SerializeAddon';
 import { Terminal } from 'browser/public/Terminal';
-import { ColorManager } from 'browser/ColorManager';
 import { SelectionModel } from 'browser/selection/SelectionModel';
 import { IBufferService } from 'common/services/Services';
+import { OptionsService } from 'common/services/OptionsService';
+import { ThemeService } from 'browser/services/ThemeService';
 
 function sgr(...seq: string[]): string {
   return `\x1b[${seq.join(';')}m`;
@@ -44,14 +45,11 @@ class TestSelectionService {
 }
 
 describe('xterm-addon-serialize', () => {
-  let cm: ColorManager;
   let dom: jsdom.JSDOM;
-  let document: Document;
   let window: jsdom.DOMWindow;
 
   let serializeAddon: SerializeAddon;
   let terminal: Terminal;
-  let selectionService: any;
 
   before(() => {
     serializeAddon = new SerializeAddon();
@@ -60,7 +58,6 @@ describe('xterm-addon-serialize', () => {
   beforeEach(() => {
     dom = new jsdom.JSDOM('');
     window = dom.window;
-    document = window.document;
 
     (window as any).HTMLCanvasElement.prototype.getContext = () => ({
       createLinearGradient(): any {
@@ -77,10 +74,8 @@ describe('xterm-addon-serialize', () => {
     terminal = new Terminal({ cols: 10, rows: 2, allowProposedApi: true });
     terminal.loadAddon(serializeAddon);
 
-    selectionService = new TestSelectionService((terminal as any)._core._bufferService);
-    cm = new ColorManager();
-    (terminal as any)._core._colorManager = cm;
-    (terminal as any)._core._selectionService = selectionService;
+    (terminal as any)._core._themeService = new ThemeService(new OptionsService({}));
+    (terminal as any)._core._selectionService = new TestSelectionService((terminal as any)._core._bufferService);
   });
 
   describe('text', () => {