Merge remote-tracking branch 'upstream/master' into renderer_before_open

src/browser/ColorManager.ts

@@ -5,7 +5,7 @@
 
 import { IColorManager, IColorSet, IColorContrastCache } from 'browser/Types';
 import { ITheme } from 'common/services/Services';
-import { channels, color, css } from 'common/Color';
+import { channels, color, css, NULL_COLOR } from 'common/Color';
 import { ColorContrastCache } from 'browser/ColorContrastCache';
 import { ColorIndex, IColor } from 'common/Types';
 
@@ -124,12 +124,8 @@ export class ColorManager implements IColorManager {
     this.colors.selectionBackgroundOpaque = color.blend(this.colors.background, this.colors.selectionBackgroundTransparent);
     this.colors.selectionInactiveBackgroundTransparent = this._parseColor(theme.selectionInactiveBackground, this.colors.selectionBackgroundTransparent);
     this.colors.selectionInactiveBackgroundOpaque = color.blend(this.colors.background, this.colors.selectionInactiveBackgroundTransparent);
-    const nullColor: IColor = {
-      css: '',
-      rgba: 0
-    };
-    this.colors.selectionForeground = theme.selectionForeground ? this._parseColor(theme.selectionForeground, nullColor) : undefined;
-    if (this.colors.selectionForeground === nullColor) {
+    this.colors.selectionForeground = theme.selectionForeground ? this._parseColor(theme.selectionForeground, NULL_COLOR) : undefined;
+    if (this.colors.selectionForeground === NULL_COLOR) {
       this.colors.selectionForeground = undefined;
     }
 

src/browser/Linkifier2.ts

@@ -26,10 +26,10 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
   private _activeProviderReplies: Map<Number, ILinkWithState[] | undefined> | undefined;
   private _activeLine: number = -1;
 
-  private _onShowLinkUnderline = this.register(new EventEmitter<ILinkifierEvent>());
-  public get onShowLinkUnderline(): IEvent<ILinkifierEvent> { return this._onShowLinkUnderline.event; }
-  private _onHideLinkUnderline = this.register(new EventEmitter<ILinkifierEvent>());
-  public get onHideLinkUnderline(): IEvent<ILinkifierEvent> { return this._onHideLinkUnderline.event; }
+  private readonly _onShowLinkUnderline = this.register(new EventEmitter<ILinkifierEvent>());
+  public readonly onShowLinkUnderline = this._onShowLinkUnderline.event;
+  private readonly _onHideLinkUnderline = this.register(new EventEmitter<ILinkifierEvent>());
+  public readonly onHideLinkUnderline = this._onHideLinkUnderline.event;
 
   constructor(
     @IBufferService private readonly _bufferService: IBufferService

src/browser/Terminal.ts

@@ -22,7 +22,7 @@
  */
 
 import { ICompositionHelper, ITerminal, IBrowser, CustomKeyEventHandler, IViewport, ILinkifier2, CharacterJoinerHandler, IBufferRange } from 'browser/Types';
-import { IRenderer } from 'browser/renderer/Types';
+import { IRenderer } from 'browser/renderer/shared/Types';
 import { CompositionHelper } from 'browser/input/CompositionHelper';
 import { Viewport } from 'browser/Viewport';
 import { rightClickHandler, moveTextAreaUnderMouseCursor, handlePasteEvent, copyHandler, paste } from 'browser/Clipboard';
@@ -122,18 +122,18 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _colorManager: ColorManager | undefined;
   private _theme: ITheme | undefined;
 
-  private _onCursorMove = new EventEmitter<void>();
-  public get onCursorMove(): IEvent<void> { return this._onCursorMove.event; }
-  private _onKey = new EventEmitter<{ key: string, domEvent: KeyboardEvent }>();
-  public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._onKey.event; }
-  private _onRender = new EventEmitter<{ start: number, end: number }>();
-  public get onRender(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
-  private _onSelectionChange = new EventEmitter<void>();
-  public get onSelectionChange(): IEvent<void> { return this._onSelectionChange.event; }
-  private _onTitleChange = new EventEmitter<string>();
-  public get onTitleChange(): IEvent<string> { return this._onTitleChange.event; }
-  private _onBell = new EventEmitter<void>();
-  public get onBell(): IEvent<void> { return this._onBell.event; }
+  private readonly _onCursorMove = new EventEmitter<void>();
+  public readonly onCursorMove = this._onCursorMove.event;
+  private readonly _onKey = new EventEmitter<{ key: string, domEvent: KeyboardEvent }>();
+  public readonly onKey = this._onKey.event;
+  private readonly _onRender = new EventEmitter<{ start: number, end: number }>();
+  public readonly onRender = this._onRender.event;
+  private readonly _onSelectionChange = new EventEmitter<void>();
+  public readonly onSelectionChange = this._onSelectionChange.event;
+  private readonly _onTitleChange = new EventEmitter<string>();
+  public readonly onTitleChange = this._onTitleChange.event;
+  private readonly _onBell = new EventEmitter<void>();
+  public readonly onBell = this._onBell.event;
 
   private _onFocus = new EventEmitter<void>();
   public get onFocus(): IEvent<void> { return this._onFocus.event; }
@@ -146,7 +146,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _onWillOpen = new EventEmitter<HTMLElement>();
   public get onWillOpen(): IEvent<HTMLElement> { return this._onWillOpen.event; }
 
-
   /**
    * Creates a new `Terminal` object.
    *

src/browser/TestUtils.test.ts

@@ -6,7 +6,7 @@
 import { IDisposable, IMarker, ILinkProvider, IDecorationOptions, IDecoration } from 'xterm';
 import { IEvent, EventEmitter } from 'common/EventEmitter';
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services';
-import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
 import { IColorSet, ITerminal, ILinkifier2, IBrowser, IViewport, IColorManager, ICompositionHelper, CharacterJoinerHandler, IBufferRange } from 'browser/Types';
 import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types';
 import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, ICharset, ITerminalOptions } from 'common/Types';

src/browser/Viewport.ts

@@ -9,7 +9,7 @@ import { IColorSet, IViewport } from 'browser/Types';
 import { ICharSizeService, ICoreBrowserService, IRenderService } from 'browser/services/Services';
 import { IBufferService, IOptionsService } from 'common/services/Services';
 import { IBuffer } from 'common/buffer/Types';
-import { IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 
 const FALLBACK_SCROLL_BAR_WIDTH = 15;
 

src/browser/renderer/Types.d.ts

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { IDisposable } from 'common/Types';
-import { IColorSet } from 'browser/Types';
-import { IEvent } from 'common/EventEmitter';
-
-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;
-}
-
-export interface IRequestRedrawEvent {
-  start: number;
-  end: number;
-}
-
-/**
- * Note that IRenderer implementations should emit the refresh event after
- * rendering rows to the screen.
- */
-export interface IRenderer extends IDisposable {
-  readonly dimensions: IRenderDimensions;
-
-  /**
-   * Fires when the renderer is requesting to be redrawn on the next animation
-   * frame but is _not_ a result of content changing (eg. selection changes).
-   */
-  readonly onRequestRedraw: 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;
-  clear(): void;
-  renderRows(start: number, end: number): void;
-  clearTextureAtlas?(): void;
-}

src/browser/renderer/dom/DomRenderer.ts

@@ -3,9 +3,9 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
+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/Constants';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifierEvent, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
@@ -40,7 +40,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   public dimensions: IRenderDimensions;
 
-  public get onRequestRedraw(): IEvent<IRequestRedrawEvent> { return new EventEmitter<IRequestRedrawEvent>().event; }
+  public readonly onRequestRedraw = new EventEmitter<IRequestRedrawEvent>().event;
 
   constructor(
     private _colors: IColorSet,
@@ -231,11 +231,11 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` background-color: ${this._colors.selectionInactiveBackgroundOpaque.css};` +
       `}`;
     // Colors
-    this._colors.ansi.forEach((c, i) => {
+    for (const [i, c] of this._colors.ansi.entries()) {
       styles +=
         `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
         `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
-    });
+    }
     styles +=
       `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${color.opaque(this._colors.background).css}; }` +
       `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -4,7 +4,7 @@
  */
 
 import { IBufferLine, ICellData, IColor } from 'common/Types';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { NULL_CELL_CODE, WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
 import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
@@ -12,7 +12,7 @@ import { color, rgba } from 'common/Color';
 import { IColorSet } from 'browser/Types';
 import { ICharacterJoinerService, ICoreBrowserService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
-import { excludeFromContrastRatioDemands } from 'browser/renderer/RendererUtils';
+import { excludeFromContrastRatioDemands } from 'browser/renderer/shared/RendererUtils';
 import { AttributeData } from 'common/buffer/AttributeData';
 
 export const BOLD_CLASS = 'xterm-bold';
@@ -166,7 +166,7 @@ export class DomRendererRowFactory {
       if (cell.isUnderline()) {
         charElement.classList.add(`${UNDERLINE_CLASS}-${cell.extended.underlineStyle}`);
         if (charElement.textContent === ' ') {
-          charElement.innerHTML = ' ';
+          charElement.textContent = '\xa0'; // =  
         }
         if (!cell.isUnderlineColorDefault()) {
           if (cell.isUnderlineColorRGB()) {

src/browser/renderer/shared/CellColorResolver.ts

@@ -0,0 +1,136 @@
+import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
+import { ICoreBrowserService } from 'browser/services/Services';
+import { IColorSet } from 'browser/Types';
+import { Attributes, BgFlags, FgFlags } from 'common/buffer/Constants';
+import { IDecorationService } from 'common/services/Services';
+import { ICellData } from 'common/Types';
+import { Terminal } from 'xterm';
+
+// Work variables to avoid garbage collection
+let $fg = 0;
+let $bg = 0;
+let $hasFg = false;
+let $hasBg = false;
+let $isSelected = false;
+
+export class CellColorResolver {
+  /**
+   * The shared result of the {@link resolve} call. This is only safe to use immediately after as
+   * any other calls will share object.
+   */
+  public readonly result: { fg: number, bg: number, ext: number } = {
+    fg: 0,
+    bg: 0,
+    ext: 0
+  };
+
+  constructor(
+    private readonly _terminal: Terminal,
+    private _colors: IColorSet,
+    private readonly _selectionRenderModel: ISelectionRenderModel,
+    private readonly _decorationService: IDecorationService,
+    private readonly _coreBrowserService: ICoreBrowserService
+  ) {
+  }
+
+  public setColors(colors: IColorSet): void {
+    this._colors = colors;
+  }
+
+  /**
+   * Resolves colors for the cell, putting the result into the shared {@link result}. This resolves
+   * overrides, inverse and selection for the cell which can then be used to feed into the renderer.
+   */
+  public resolve(cell: ICellData, x: number, y: number): void {
+    this.result.bg = cell.bg;
+    this.result.fg = cell.fg;
+    this.result.ext = cell.bg & BgFlags.HAS_EXTENDED ? cell.extended.ext : 0;
+    // Get any foreground/background overrides, this happens on the model to avoid spreading
+    // override logic throughout the different sub-renderers
+
+    // Reset overrides work variables
+    $bg = 0;
+    $fg = 0;
+    $hasBg = false;
+    $hasFg = false;
+    $isSelected = false;
+
+    // Apply decorations on the bottom layer
+    this._decorationService.forEachDecorationAtCell(x, y, 'bottom', d => {
+      if (d.backgroundColorRGB) {
+        $bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $hasBg = true;
+      }
+      if (d.foregroundColorRGB) {
+        $fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $hasFg = true;
+      }
+    });
+
+    // Apply the selection color if needed
+    $isSelected = this._selectionRenderModel.isCellSelected(this._terminal, x, y);
+    if ($isSelected) {
+      $bg = (this._coreBrowserService.isFocused ? this._colors.selectionBackgroundOpaque : this._colors.selectionInactiveBackgroundOpaque).rgba >> 8 & 0xFFFFFF;
+      $hasBg = true;
+      if (this._colors.selectionForeground) {
+        $fg = this._colors.selectionForeground.rgba >> 8 & 0xFFFFFF;
+        $hasFg = true;
+      }
+    }
+
+    // Apply decorations on the top layer
+    this._decorationService.forEachDecorationAtCell(x, y, 'top', d => {
+      if (d.backgroundColorRGB) {
+        $bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $hasBg = true;
+      }
+      if (d.foregroundColorRGB) {
+        $fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $hasFg = true;
+      }
+    });
+
+    // Convert any overrides from rgba to the fg/bg packed format. This resolves the inverse flag
+    // ahead of time in order to use the correct cache key
+    if ($hasBg) {
+      if ($isSelected) {
+        // Non-RGB attributes from model + force non-dim + override + force RGB color mode
+        $bg = (cell.bg & ~Attributes.RGB_MASK & ~BgFlags.DIM) | $bg | Attributes.CM_RGB;
+      } else {
+        // Non-RGB attributes from model + override + force RGB color mode
+        $bg = (cell.bg & ~Attributes.RGB_MASK) | $bg | Attributes.CM_RGB;
+      }
+    }
+    if ($hasFg) {
+      // Non-RGB attributes from model + force disable inverse + override + force RGB color mode
+      $fg = (cell.fg & ~Attributes.RGB_MASK & ~FgFlags.INVERSE) | $fg | Attributes.CM_RGB;
+    }
+
+    // Handle case where inverse was specified by only one of bg override or fg override was set,
+    // resolving the other inverse color and setting the inverse flag if needed.
+    if (this.result.fg & FgFlags.INVERSE) {
+      if ($hasBg && !$hasFg) {
+        // Resolve bg color type (default color has a different meaning in fg vs bg)
+        if ((this.result.bg & Attributes.CM_MASK) === Attributes.CM_DEFAULT) {
+          $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | ((this._colors.background.rgba >> 8 & 0xFFFFFF) & Attributes.RGB_MASK) | Attributes.CM_RGB;
+        } else {
+          $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | this.result.bg & (Attributes.RGB_MASK | Attributes.CM_MASK);
+        }
+        $hasFg = true;
+      }
+      if (!$hasBg && $hasFg) {
+        // Resolve bg color type (default color has a different meaning in fg vs bg)
+        if ((this.result.fg & Attributes.CM_MASK) === Attributes.CM_DEFAULT) {
+          $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | ((this._colors.foreground.rgba >> 8 & 0xFFFFFF) & Attributes.RGB_MASK) | Attributes.CM_RGB;
+        } else {
+          $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | this.result.fg & (Attributes.RGB_MASK | Attributes.CM_MASK);
+        }
+        $hasBg = true;
+      }
+    }
+
+    // Use the override if it exists
+    this.result.bg = $hasBg ? $bg : this.result.bg;
+    this.result.fg = $hasFg ? $fg : this.result.fg;
+  }
+}

src/browser/renderer/shared/CharAtlasCache.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
+import { Terminal } from 'xterm';
+import { IColorSet, ITerminal } from 'browser/Types';
+import { ICharAtlasConfig, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { generateConfig, configEquals } from 'browser/renderer/shared/CharAtlasUtils';
+
+interface ITextureAtlasCacheEntry {
+  atlas: ITextureAtlas;
+  config: ICharAtlasConfig;
+  // N.B. This implementation potentially holds onto copies of the terminal forever, so
+  // this may cause memory leaks.
+  ownedBy: Terminal[];
+}
+
+const charAtlasCache: ITextureAtlasCacheEntry[] = [];
+
+/**
+ * Acquires a char atlas, either generating a new one or returning an existing
+ * one that is in use by another terminal.
+ * @param terminal The terminal.
+ * @param colors The colors to use.
+ */
+export function acquireTextureAtlas(
+  terminal: Terminal,
+  colors: IColorSet,
+  scaledCellWidth: number,
+  scaledCellHeight: number,
+  scaledCharWidth: number,
+  scaledCharHeight: number,
+  devicePixelRatio: number
+): ITextureAtlas {
+  const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, colors, devicePixelRatio);
+
+  // Check to see if the terminal already owns this config
+  for (let i = 0; i < charAtlasCache.length; i++) {
+    const entry = charAtlasCache[i];
+    const ownedByIndex = entry.ownedBy.indexOf(terminal);
+    if (ownedByIndex >= 0) {
+      if (configEquals(entry.config, newConfig)) {
+        return entry.atlas;
+      }
+      // The configs differ, release the terminal 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 terminal to the cache entry and return
+      entry.ownedBy.push(terminal);
+      return entry.atlas;
+    }
+  }
+
+  const core: ITerminal = (terminal as any)._core;
+  const newEntry: ITextureAtlasCacheEntry = {
+    atlas: new TextureAtlas(document, newConfig, core.unicodeService),
+    config: newConfig,
+    ownedBy: [terminal]
+  };
+  charAtlasCache.push(newEntry);
+  return newEntry.atlas;
+}
+
+/**
+ * Removes a terminal reference from the cache, allowing its memory to be freed.
+ * @param terminal The terminal to remove.
+ */
+export function removeTerminalFromCache(terminal: Terminal): void {
+  for (let i = 0; i < charAtlasCache.length; i++) {
+    const index = charAtlasCache[i].ownedBy.indexOf(terminal);
+    if (index !== -1) {
+      if (charAtlasCache[i].ownedBy.length === 1) {
+        // Remove the cache entry if it's the only terminal
+        charAtlasCache[i].atlas.dispose();
+        charAtlasCache.splice(i, 1);
+      } else {
+        // Remove the reference from the cache entry
+        charAtlasCache[i].ownedBy.splice(index, 1);
+      }
+      break;
+    }
+  }
+}

src/browser/renderer/shared/CharAtlasUtils.ts

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICharAtlasConfig } from './Types';
+import { Attributes } from 'common/buffer/Constants';
+import { Terminal } from 'xterm';
+import { IColorSet } from 'browser/Types';
+import { NULL_COLOR } from 'common/Color';
+
+export function generateConfig(scaledCellWidth: number, scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet, devicePixelRatio: number): ICharAtlasConfig {
+  // null out some fields that don't matter
+  const clonedColors: IColorSet = {
+    foreground: colors.foreground,
+    background: colors.background,
+    cursor: NULL_COLOR,
+    cursorAccent: NULL_COLOR,
+    selectionForeground: NULL_COLOR,
+    selectionBackgroundTransparent: NULL_COLOR,
+    selectionBackgroundOpaque: NULL_COLOR,
+    selectionInactiveBackgroundTransparent: NULL_COLOR,
+    selectionInactiveBackgroundOpaque: NULL_COLOR,
+    // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
+    // dynamic character atlas.
+    ansi: colors.ansi.slice(),
+    contrastCache: colors.contrastCache
+  };
+  return {
+    customGlyphs: terminal.options.customGlyphs,
+    devicePixelRatio,
+    letterSpacing: terminal.options.letterSpacing,
+    lineHeight: terminal.options.lineHeight,
+    scaledCellWidth,
+    scaledCellHeight,
+    scaledCharWidth,
+    scaledCharHeight,
+    fontFamily: terminal.options.fontFamily,
+    fontSize: terminal.options.fontSize,
+    fontWeight: terminal.options.fontWeight,
+    fontWeightBold: terminal.options.fontWeightBold,
+    allowTransparency: terminal.options.allowTransparency,
+    drawBoldTextInBrightColors: terminal.options.drawBoldTextInBrightColors,
+    minimumContrastRatio: terminal.options.minimumContrastRatio,
+    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.customGlyphs === b.customGlyphs &&
+      a.lineHeight === b.lineHeight &&
+      a.letterSpacing === b.letterSpacing &&
+      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.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors &&
+      a.minimumContrastRatio === b.minimumContrastRatio &&
+      a.colors.foreground.rgba === b.colors.foreground.rgba &&
+      a.colors.background.rgba === b.colors.background.rgba;
+}
+
+export function is256Color(colorCode: number): boolean {
+  return (colorCode & Attributes.CM_MASK) === Attributes.CM_P16 || (colorCode & Attributes.CM_MASK) === Attributes.CM_P256;
+}

src/browser/renderer/shared/CustomGlyphs.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { throwIfFalsy } from 'browser/renderer/RendererUtils';
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 
 interface IBlockVector {
   x: number;

src/browser/renderer/shared/README.md

@@ -0,0 +1 @@
+This folder contains files that are shared between the renderer addons, but not necessarily bundled into the `xterm` module.

src/browser/renderer/shared/SelectionRenderModel.ts

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
+import { Terminal } from 'xterm';
+
+class SelectionRenderModel implements ISelectionRenderModel {
+  public hasSelection!: boolean;
+  public columnSelectMode!: boolean;
+  public viewportStartRow!: number;
+  public viewportEndRow!: number;
+  public viewportCappedStartRow!: number;
+  public viewportCappedEndRow!: number;
+  public startCol!: number;
+  public endCol!: number;
+  public selectionStart: [number, number] | undefined;
+  public selectionEnd: [number, number] | undefined;
+
+  constructor() {
+    this.clear();
+  }
+
+  public clear(): void {
+    this.hasSelection = false;
+    this.columnSelectMode = false;
+    this.viewportStartRow = 0;
+    this.viewportEndRow = 0;
+    this.viewportCappedStartRow = 0;
+    this.viewportCappedEndRow = 0;
+    this.startCol = 0;
+    this.endCol = 0;
+    this.selectionStart = undefined;
+    this.selectionEnd = undefined;
+  }
+
+  public update(terminal: Terminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
+    this.selectionStart = start;
+    this.selectionEnd = end;
+    // Selection does not exist
+    if (!start || !end || (start[0] === end[0] && start[1] === end[1])) {
+      this.clear();
+      return;
+    }
+
+    // Translate from buffer position to viewport position
+    const viewportStartRow = start[1] - terminal.buffer.active.viewportY;
+    const viewportEndRow = end[1] - terminal.buffer.active.viewportY;
+    const viewportCappedStartRow = Math.max(viewportStartRow, 0);
+    const viewportCappedEndRow = Math.min(viewportEndRow, terminal.rows - 1);
+
+    // No need to draw the selection
+    if (viewportCappedStartRow >= terminal.rows || viewportCappedEndRow < 0) {
+      this.clear();
+      return;
+    }
+
+    this.hasSelection = true;
+    this.columnSelectMode = columnSelectMode;
+    this.viewportStartRow = viewportStartRow;
+    this.viewportEndRow = viewportEndRow;
+    this.viewportCappedStartRow = viewportCappedStartRow;
+    this.viewportCappedEndRow = viewportCappedEndRow;
+    this.startCol = start[0];
+    this.endCol = end[0];
+  }
+
+  public isCellSelected(terminal: Terminal, x: number, y: number): boolean {
+    if (!this.hasSelection) {
+      return false;
+    }
+    y -= terminal.buffer.active.viewportY;
+    if (this.columnSelectMode) {
+      if (this.startCol <= this.endCol) {
+        return x >= this.startCol && y >= this.viewportCappedStartRow &&
+          x < this.endCol && y <= this.viewportCappedEndRow;
+      }
+      return x < this.startCol && y >= this.viewportCappedStartRow &&
+        x >= this.endCol && y <= this.viewportCappedEndRow;
+    }
+    return (y > this.viewportStartRow && y < this.viewportEndRow) ||
+      (this.viewportStartRow === this.viewportEndRow && y === this.viewportStartRow && x >= this.startCol && x < this.endCol) ||
+      (this.viewportStartRow < this.viewportEndRow && y === this.viewportEndRow && x < this.endCol) ||
+      (this.viewportStartRow < this.viewportEndRow && y === this.viewportStartRow && x >= this.startCol);
+  }
+}
+
+export function createSelectionRenderModel(): ISelectionRenderModel {
+  return new SelectionRenderModel();
+}

src/browser/renderer/shared/TextureAtlas.ts

@@ -0,0 +1,842 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { DIM_OPACITY, TEXT_BASELINE } from 'browser/renderer/shared/Constants';
+import { DEFAULT_COLOR, Attributes, DEFAULT_EXT, UnderlineStyle } from 'common/buffer/Constants';
+import { IColor } from 'common/Types';
+import { AttributeData } from 'common/buffer/AttributeData';
+import { color, NULL_COLOR, rgba } from 'common/Color';
+import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
+import { excludeFromContrastRatioDemands, isPowerlineGlyph, isRestrictedPowerlineGlyph, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+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';
+
+// 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 },
+  texturePosition: { x: 0, y: 0 },
+  texturePositionClipSpace: { x: 0, y: 0 },
+  size: { x: 0, y: 0 },
+  sizeClipSpace: { x: 0, y: 0 }
+};
+
+const TMP_CANVAS_GLYPH_PADDING = 2;
+
+interface ICharAtlasActiveRow {
+  x: number;
+  y: number;
+  height: number;
+}
+
+// Work variables to avoid garbage collection
+let $glyph = undefined;
+
+export class TextureAtlas implements ITextureAtlas {
+  private _didWarmUp: boolean = false;
+
+  private _cacheMap: FourKeyMap<number, number, number, number, IRasterizedGlyph> = new FourKeyMap();
+  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 _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();
+
+  constructor(
+    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._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', {
+      alpha: this._config.allowTransparency,
+      willReadFrequently: true
+    }));
+  }
+
+  public dispose(): void {
+    if (this.cacheCanvas.parentElement) {
+      this.cacheCanvas.parentElement.removeChild(this.cacheCanvas);
+    }
+  }
+
+  public warmUp(): void {
+    if (!this._didWarmUp) {
+      this._doWarmUp();
+      this._didWarmUp = true;
+    }
+  }
+
+  private _doWarmUp(): void {
+    // Pre-fill with ASCII 33-126, this is not urgent and done in idle callbacks
+    const queue = new IdleTaskQueue();
+    for (let i = 33; i < 126; i++) {
+      queue.enqueue(() => {
+        if (!this._cacheMap.get(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT)) {
+          const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT);
+          this._cacheMap.set(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, rasterizedGlyph);
+        }
+      });
+    }
+  }
+
+  public beginFrame(): boolean {
+    if (this._currentRow.y > TEXTURE_CAPACITY) {
+      this.clearTexture();
+      this.warmUp();
+      return true;
+    }
+    return false;
+  }
+
+  public clearTexture(): void {
+    if (this._currentRow.x === 0 && this._currentRow.y === 0) {
+      return;
+    }
+    this._cacheCtx.clearRect(0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT);
+    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;
+  }
+
+  public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number): IRasterizedGlyph {
+    return this._getFromCacheMap(this._cacheMapCombined, chars, bg, fg, ext);
+  }
+
+  public getRasterizedGlyph(code: number, bg: number, fg: number, ext: number): IRasterizedGlyph {
+    return this._getFromCacheMap(this._cacheMap, code, bg, fg, ext);
+  }
+
+  /**
+   * Gets the glyphs texture coords, drawing the texture if it's not already
+   */
+  private _getFromCacheMap(
+    cacheMap: FourKeyMap<string | number, number, number, number, IRasterizedGlyph>,
+    key: string | number,
+    bg: number,
+    fg: number,
+    ext: number
+  ): IRasterizedGlyph {
+    $glyph = cacheMap.get(key, bg, fg, ext);
+    if (!$glyph) {
+      $glyph = this._drawToCache(key, bg, fg, ext);
+      cacheMap.set(key, bg, fg, ext, $glyph);
+    }
+    return $glyph;
+  }
+
+  private _getColorFromAnsiIndex(idx: number): IColor {
+    if (idx >= this._config.colors.ansi.length) {
+      throw new Error('No color found for idx ' + idx);
+    }
+    return this._config.colors.ansi[idx];
+  }
+
+  private _getBackgroundColor(bgColorMode: number, bgColor: number, inverse: boolean, dim: boolean): 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 NULL_COLOR;
+    }
+
+    let result: IColor;
+    switch (bgColorMode) {
+      case Attributes.CM_P16:
+      case Attributes.CM_P256:
+        result = this._getColorFromAnsiIndex(bgColor);
+        break;
+      case Attributes.CM_RGB:
+        const arr = AttributeData.toColorRGB(bgColor);
+        // TODO: This object creation is slow
+        result = rgba.toColor(arr[0], arr[1], arr[2]);
+        break;
+      case Attributes.CM_DEFAULT:
+      default:
+        if (inverse) {
+          result = this._config.colors.foreground;
+        } else {
+          result = this._config.colors.background;
+        }
+        break;
+    }
+
+    if (dim) {
+      // Blend here instead of using opacity because transparent colors mess with clipping the
+      // glyph's bounding box
+      result = color.blend(this._config.colors.background, color.multiplyOpacity(result, DIM_OPACITY));
+    }
+
+    return result;
+  }
+
+  private _getForegroundColor(bg: number, bgColorMode: number, bgColor: number, fg: number, fgColorMode: number, fgColor: number, inverse: boolean, dim: boolean, bold: boolean, excludeFromContrastRatioDemands: boolean): IColor {
+    // TODO: Pass dim along to get min contrast?
+    const minimumContrastColor = this._getMinimumContrastColor(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, false, bold, excludeFromContrastRatioDemands);
+    if (minimumContrastColor) {
+      return minimumContrastColor;
+    }
+
+    let result: IColor;
+    switch (fgColorMode) {
+      case Attributes.CM_P16:
+      case Attributes.CM_P256:
+        if (this._config.drawBoldTextInBrightColors && bold && fgColor < 8) {
+          fgColor += 8;
+        }
+        result = this._getColorFromAnsiIndex(fgColor);
+        break;
+      case Attributes.CM_RGB:
+        const arr = AttributeData.toColorRGB(fgColor);
+        result = rgba.toColor(arr[0], arr[1], arr[2]);
+        break;
+      case Attributes.CM_DEFAULT:
+      default:
+        if (inverse) {
+          result = this._config.colors.background;
+        } else {
+          result = this._config.colors.foreground;
+        }
+    }
+
+    // Always use an opaque color regardless of allowTransparency
+    if (this._config.allowTransparency) {
+      result = color.opaque(result);
+    }
+
+    // Apply dim to the color, opacity is fine to use for the foreground color
+    if (dim) {
+      result = color.multiplyOpacity(result, DIM_OPACITY);
+    }
+
+    return result;
+  }
+
+  private _resolveBackgroundRgba(bgColorMode: number, bgColor: number, inverse: boolean): number {
+    switch (bgColorMode) {
+      case Attributes.CM_P16:
+      case Attributes.CM_P256:
+        return this._getColorFromAnsiIndex(bgColor).rgba;
+      case Attributes.CM_RGB:
+        return bgColor << 8;
+      case Attributes.CM_DEFAULT:
+      default:
+        if (inverse) {
+          return this._config.colors.foreground.rgba;
+        }
+        return this._config.colors.background.rgba;
+    }
+  }
+
+  private _resolveForegroundRgba(fgColorMode: number, fgColor: number, inverse: boolean, bold: boolean): number {
+    switch (fgColorMode) {
+      case Attributes.CM_P16:
+      case Attributes.CM_P256:
+        if (this._config.drawBoldTextInBrightColors && bold && fgColor < 8) {
+          fgColor += 8;
+        }
+        return this._getColorFromAnsiIndex(fgColor).rgba;
+      case Attributes.CM_RGB:
+        return fgColor << 8;
+      case Attributes.CM_DEFAULT:
+      default:
+        if (inverse) {
+          return this._config.colors.background.rgba;
+        }
+        return this._config.colors.foreground.rgba;
+    }
+  }
+
+  private _getMinimumContrastColor(bg: number, bgColorMode: number, bgColor: number, fg: number, fgColorMode: number, fgColor: number, inverse: boolean, bold: boolean, excludeFromContrastRatioDemands: boolean): IColor | undefined {
+    if (this._config.minimumContrastRatio === 1 || excludeFromContrastRatioDemands) {
+      return undefined;
+    }
+
+    // Try get from cache first
+    const adjustedColor = this._config.colors.contrastCache.getColor(bg, fg);
+    if (adjustedColor !== undefined) {
+      return adjustedColor || undefined;
+    }
+
+    const bgRgba = this._resolveBackgroundRgba(bgColorMode, bgColor, inverse);
+    const fgRgba = this._resolveForegroundRgba(fgColorMode, fgColor, inverse, bold);
+    const result = rgba.ensureContrastRatio(bgRgba, fgRgba, this._config.minimumContrastRatio);
+
+    if (!result) {
+      this._config.colors.contrastCache.setColor(bg, fg, null);
+      return undefined;
+    }
+
+    const color = rgba.toColor(
+      (result >> 24) & 0xFF,
+      (result >> 16) & 0xFF,
+      (result >> 8) & 0xFF
+    );
+    this._config.colors.contrastCache.setColor(bg, fg, color);
+
+    return color;
+  }
+
+  private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number): IRasterizedGlyph {
+    const chars = typeof codeOrChars === 'number' ? String.fromCharCode(codeOrChars) : codeOrChars;
+
+    // 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;
+    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;
+    if (this._tmpCanvas.height < allowedHeight) {
+      this._tmpCanvas.height = allowedHeight;
+    }
+    this._tmpCtx.save();
+
+    this._workAttributeData.fg = fg;
+    this._workAttributeData.bg = bg;
+    this._workAttributeData.extended.ext = ext;
+
+    const invisible = !!this._workAttributeData.isInvisible();
+    if (invisible) {
+      return NULL_RASTERIZED_GLYPH;
+    }
+
+    const bold = !!this._workAttributeData.isBold();
+    const inverse = !!this._workAttributeData.isInverse();
+    const dim = !!this._workAttributeData.isDim();
+    const italic = !!this._workAttributeData.isItalic();
+    const underline = !!this._workAttributeData.isUnderline();
+    const strikethrough = !!this._workAttributeData.isStrikethrough();
+    let fgColor = this._workAttributeData.getFgColor();
+    let fgColorMode = this._workAttributeData.getFgColorMode();
+    let bgColor = this._workAttributeData.getBgColor();
+    let bgColorMode = this._workAttributeData.getBgColorMode();
+    if (inverse) {
+      const temp = fgColor;
+      fgColor = bgColor;
+      bgColor = temp;
+      const temp2 = fgColorMode;
+      fgColorMode = bgColorMode;
+      bgColorMode = temp2;
+    }
+
+    // draw the background
+    const backgroundColor = this._getBackgroundColor(bgColorMode, bgColor, inverse, dim);
+    // 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._tmpCanvas.width, this._tmpCanvas.height);
+    this._tmpCtx.globalCompositeOperation = 'source-over';
+
+    // draw the foreground/glyph
+    const fontWeight = bold ? this._config.fontWeightBold : this._config.fontWeight;
+    const fontStyle = italic ? 'italic' : '';
+    this._tmpCtx.font =
+      `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
+    this._tmpCtx.textBaseline = TEXT_BASELINE;
+
+    const powerlineGlyph = chars.length === 1 && isPowerlineGlyph(chars.charCodeAt(0));
+    const restrictedPowerlineGlyph = chars.length === 1 && isRestrictedPowerlineGlyph(chars.charCodeAt(0));
+    const foregroundColor = this._getForegroundColor(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, inverse, dim, bold, excludeFromContrastRatioDemands(chars.charCodeAt(0)));
+    this._tmpCtx.fillStyle = foregroundColor.css;
+
+    // For powerline glyphs left/top padding is excluded (https://github.com/microsoft/vscode/issues/120129)
+    const padding = restrictedPowerlineGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING * 2;
+
+    // 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);
+    }
+
+    // Whether to clear pixels based on a threshold difference between the glyph color and the
+    // background color. This should be disabled when the glyph contains multiple colors such as
+    // underline colors to prevent important colors could get cleared.
+    let enableClearThresholdCheck = !powerlineGlyph;
+
+    let chWidth: number;
+    if (typeof codeOrChars === 'number') {
+      chWidth = this._unicodeService.wcwidth(codeOrChars);
+    } else {
+      chWidth = this._unicodeService.getStringCellWidth(codeOrChars);
+    }
+
+    // Draw underline
+    if (underline) {
+      this._tmpCtx.save();
+      const lineWidth = Math.max(1, Math.floor(this._config.fontSize * this._config.devicePixelRatio / 15));
+      // When the line width is odd, draw at a 0.5 position
+      const yOffset = lineWidth % 2 === 1 ? 0.5 : 0;
+      this._tmpCtx.lineWidth = lineWidth;
+
+      // Underline color
+      if (this._workAttributeData.isUnderlineColorDefault()) {
+        this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle;
+      } else if (this._workAttributeData.isUnderlineColorRGB()) {
+        enableClearThresholdCheck = false;
+        this._tmpCtx.strokeStyle = `rgb(${AttributeData.toColorRGB(this._workAttributeData.getUnderlineColor()).join(',')})`;
+      } else {
+        enableClearThresholdCheck = false;
+        let fg = this._workAttributeData.getUnderlineColor();
+        if (this._config.drawBoldTextInBrightColors && this._workAttributeData.isBold() && fg < 8) {
+          fg += 8;
+        }
+        this._tmpCtx.strokeStyle = this._getColorFromAnsiIndex(fg).css;
+      }
+
+      // 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;
+
+      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;
+        switch (this._workAttributeData.extended.underlineStyle) {
+          case UnderlineStyle.DOUBLE:
+            this._tmpCtx.moveTo(xChLeft, yTop);
+            this._tmpCtx.lineTo(xChRight, yTop);
+            this._tmpCtx.moveTo(xChLeft, yBot);
+            this._tmpCtx.lineTo(xChRight, yBot);
+            break;
+          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;
+            // 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);
+            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.bezierCurveTo(
+              xChLeft - this._config.scaledCellWidth / 2, yCurlyTop,
+              xChLeft, yCurlyTop,
+              xChLeft, yMid
+            );
+            this._tmpCtx.bezierCurveTo(
+              xChLeft, yCurlyBot,
+              xChMid, yCurlyBot,
+              xChMid, yMid
+            );
+            this._tmpCtx.bezierCurveTo(
+              xChMid, yCurlyTop,
+              xChRight, yCurlyTop,
+              xChRight, yMid
+            );
+            this._tmpCtx.bezierCurveTo(
+              xChRight, yCurlyBot,
+              xChRight + this._config.scaledCellWidth / 2, yCurlyBot,
+              xChRight + this._config.scaledCellWidth / 2, yMid
+            );
+            break;
+          case UnderlineStyle.DOTTED:
+            this._tmpCtx.setLineDash([this._config.devicePixelRatio * 2, this._config.devicePixelRatio]);
+            this._tmpCtx.moveTo(xChLeft, yTop);
+            this._tmpCtx.lineTo(xChRight, yTop);
+            break;
+          case UnderlineStyle.DASHED:
+            this._tmpCtx.setLineDash([this._config.devicePixelRatio * 4, this._config.devicePixelRatio * 3]);
+            this._tmpCtx.moveTo(xChLeft, yTop);
+            this._tmpCtx.lineTo(xChRight, yTop);
+            break;
+          case UnderlineStyle.SINGLE:
+          default:
+            this._tmpCtx.moveTo(xChLeft, yTop);
+            this._tmpCtx.lineTo(xChRight, yTop);
+            break;
+        }
+        this._tmpCtx.stroke();
+        this._tmpCtx.restore();
+      }
+      this._tmpCtx.restore();
+
+      // Draw stroke in the background color for non custom characters in order to give an outline
+      // between the text and the underline. Only do this when font size is >= 12 as the underline
+      // looks odd when the font size is too small
+      if (!customGlyph && this._config.fontSize >= 12) {
+        // This only works when transparency is disabled because it's not clear how to clear stroked
+        // text
+        if (!this._config.allowTransparency && chars !== ' ') {
+          // Measure the text, only draw the stroke if there is a descent beyond an alphabetic text
+          // baseline
+          this._tmpCtx.save();
+          this._tmpCtx.textBaseline = 'alphabetic';
+          const metrics = this._tmpCtx.measureText(chars);
+          this._tmpCtx.restore();
+          if ('actualBoundingBoxDescent' in metrics && metrics.actualBoundingBoxDescent > 0) {
+            // This translates to 1/2 the line width in either direction
+            this._tmpCtx.save();
+            // Clip the region to only draw in valid pixels near the underline to avoid a slight
+            // 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));
+            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.restore();
+          }
+        }
+      }
+    }
+
+    // Draw the character
+    if (!customGlyph) {
+      this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
+    }
+
+    // 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);
+      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);
+          if (!isBeyondCellBounds) {
+            break;
+          }
+        }
+      }
+    }
+
+    // Draw strokethrough
+    if (strikethrough) {
+      const lineWidth = Math.max(1, Math.floor(this._config.fontSize * this._config.devicePixelRatio / 10));
+      const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position
+      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.stroke();
+    }
+
+    this._tmpCtx.restore();
+
+    // clear the background from the character to avoid issues with drawing over the previous
+    // character if it extends past it's bounds
+    const imageData = this._tmpCtx.getImageData(
+      0, 0, this._tmpCanvas.width, this._tmpCanvas.height
+    );
+
+    // Clear out the background color and determine if the glyph is empty.
+    let isEmpty: boolean;
+    if (!this._config.allowTransparency) {
+      isEmpty = clearColor(imageData, backgroundColor, foregroundColor, enableClearThresholdCheck);
+    } else {
+      isEmpty = checkCompletelyTransparent(imageData);
+    }
+
+    // Handle empty glyphs
+    if (isEmpty) {
+      return NULL_RASTERIZED_GLYPH;
+    }
+
+    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 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) {
+        break;
+      }
+
+      // If there is enough room in the current row, finish it and try again
+      if (activeRow === this._currentRow) {
+        activeRow.x = 0;
+        activeRow.y += activeRow.height;
+        activeRow.height = 0;
+      } else {
+        this._fixedRows.splice(this._fixedRows.indexOf(activeRow), 1);
+      }
+    }
+
+    // Record texture position
+    rasterizedGlyph.texturePosition.x = activeRow.x;
+    rasterizedGlyph.texturePosition.y = activeRow.y;
+    rasterizedGlyph.texturePositionClipSpace.x = activeRow.x / TEXTURE_WIDTH;
+    rasterizedGlyph.texturePositionClipSpace.y = activeRow.y / TEXTURE_HEIGHT;
+
+    // Update atlas current row, for fixed rows the glyph height will never be larger than the row
+    // height
+    activeRow.height = Math.max(activeRow.height, rasterizedGlyph.size.y);
+    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);
+
+    return rasterizedGlyph;
+  }
+
+  /**
+   * Given an ImageData object, find the bounding box of the non-transparent
+   * portion of the texture and return an IRasterizedGlyph with these
+   * dimensions.
+   * @param imageData The image data to read.
+   * @param boundingBox An IBoundingBox to put the clipped bounding box values.
+   */
+  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;
+    let found = false;
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
+        if (imageData.data[alphaOffset] !== 0) {
+          boundingBox.top = y;
+          found = true;
+          break;
+        }
+      }
+      if (found) {
+        break;
+      }
+    }
+    boundingBox.left = 0;
+    found = false;
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
+        const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
+        if (imageData.data[alphaOffset] !== 0) {
+          boundingBox.left = x;
+          found = true;
+          break;
+        }
+      }
+      if (found) {
+        break;
+      }
+    }
+    boundingBox.right = width;
+    found = false;
+    for (let x = width - 1; x >= 0; x--) {
+      for (let y = 0; y < height; y++) {
+        const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
+        if (imageData.data[alphaOffset] !== 0) {
+          boundingBox.right = x;
+          found = true;
+          break;
+        }
+      }
+      if (found) {
+        break;
+      }
+    }
+    boundingBox.bottom = height;
+    found = false;
+    for (let y = height - 1; y >= 0; y--) {
+      for (let x = 0; x < width; x++) {
+        const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
+        if (imageData.data[alphaOffset] !== 0) {
+          boundingBox.bottom = y;
+          found = true;
+          break;
+        }
+      }
+      if (found) {
+        break;
+      }
+    }
+    return {
+      texturePosition: { x: 0, y: 0 },
+      texturePositionClipSpace: { x: 0, y: 0 },
+      size: {
+        x: boundingBox.right - boundingBox.left + 1,
+        y: boundingBox.bottom - boundingBox.top + 1
+      },
+      sizeClipSpace: {
+        x: (boundingBox.right - boundingBox.left + 1) / TEXTURE_WIDTH,
+        y: (boundingBox.bottom - boundingBox.top + 1) / TEXTURE_HEIGHT
+      },
+      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)
+      }
+    };
+  }
+
+  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];
+      }
+    }
+    return new ImageData(clippedData, width, height);
+  }
+}
+
+/**
+ * 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, bg: IColor, fg: IColor, enableThresholdCheck: boolean): boolean {
+  // Get color channels
+  const r = bg.rgba >>> 24;
+  const g = bg.rgba >>> 16 & 0xFF;
+  const b = bg.rgba >>> 8 & 0xFF;
+  const fgR = fg.rgba >>> 24;
+  const fgG = fg.rgba >>> 16 & 0xFF;
+  const fgB = fg.rgba >>> 8 & 0xFF;
+
+  // Calculate a threshold that when below a color will be treated as transpart when the sum of
+  // channel value differs. This helps improve rendering when glyphs overlap with others. This
+  // threshold is calculated relative to the difference between the background and foreground to
+  // ensure important details of the glyph are always shown, even when the contrast ratio is low.
+  // The number 12 is largely arbitrary to ensure the pixels that escape the cell in the test case
+  // were covered (fg=#8ae234, bg=#c4a000).
+  const threshold = Math.floor((Math.abs(r - fgR) + Math.abs(g - fgG) + Math.abs(b - fgB)) / 12);
+
+  // Set alpha channel of relevent pixels to 0
+  let isEmpty = true;
+  for (let offset = 0; offset < imageData.data.length; offset += 4) {
+    // Check exact match
+    if (imageData.data[offset] === r &&
+        imageData.data[offset + 1] === g &&
+        imageData.data[offset + 2] === b) {
+      imageData.data[offset + 3] = 0;
+    } else {
+      // Check the threshold based difference
+      if (enableThresholdCheck &&
+          (Math.abs(imageData.data[offset] - r) +
+          Math.abs(imageData.data[offset + 1] - g) +
+          Math.abs(imageData.data[offset + 2] - b)) < threshold) {
+        imageData.data[offset + 3] = 0;
+      } else {
+        isEmpty = false;
+      }
+    }
+  }
+
+  return isEmpty;
+}
+
+function checkCompletelyTransparent(imageData: ImageData): boolean {
+  for (let offset = 0; offset < imageData.data.length; offset += 4) {
+    if (imageData.data[offset + 3] > 0) {
+      return false;
+    }
+  }
+  return true;
+}

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

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { FontWeight, Terminal } from 'xterm';
+import { IColorSet } from 'browser/Types';
+import { IDisposable } from 'common/Types';
+import { IEvent } from 'common/EventEmitter';
+
+export interface ICharAtlasConfig {
+  customGlyphs: boolean;
+  devicePixelRatio: number;
+  letterSpacing: number;
+  lineHeight: number;
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: FontWeight;
+  fontWeightBold: FontWeight;
+  scaledCellWidth: number;
+  scaledCellHeight: number;
+  scaledCharWidth: number;
+  scaledCharHeight: number;
+  allowTransparency: boolean;
+  drawBoldTextInBrightColors: boolean;
+  minimumContrastRatio: number;
+  colors: IColorSet;
+}
+
+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;
+}
+
+export interface IRequestRedrawEvent {
+  start: number;
+  end: number;
+}
+
+/**
+ * Note that IRenderer implementations should emit the refresh event after
+ * rendering rows to the screen.
+ */
+export interface IRenderer extends IDisposable {
+  readonly dimensions: IRenderDimensions;
+
+  /**
+   * Fires when the renderer is requesting to be redrawn on the next animation
+   * frame but is _not_ a result of content changing (eg. selection changes).
+   */
+  readonly onRequestRedraw: 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;
+  clear(): void;
+  renderRows(start: number, end: number): void;
+  clearTextureAtlas?(): void;
+}
+
+export interface ITextureAtlas extends IDisposable {
+  readonly cacheCanvas: HTMLCanvasElement;
+  hasCanvasChanged: boolean;
+
+  /**
+   * Warm up the texture atlas, adding common glyphs to avoid slowing early frame.
+   */
+  warmUp(): void;
+
+  /**
+   * Call when a frame is being drawn, this will return true if the atlas was cleared to make room
+   * for a new set of glyphs.
+   */
+  beginFrame(): boolean;
+
+  /**
+   * Clear all glyphs from the texture atlas.
+   */
+  clearTexture(): void;
+  getRasterizedGlyph(code: number, bg: number, fg: number, ext: number): IRasterizedGlyph;
+  getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number): IRasterizedGlyph;
+}
+
+/**
+ * Represents a rasterized glyph within a texture atlas. Some numbers are
+ * tracked in CSS pixels as well in order to reduce calculations during the
+ * render loop.
+ */
+export interface IRasterizedGlyph {
+  /**
+   * The x and y offset between the glyph's top/left and the top/left of a cell
+   * in pixels.
+   */
+  offset: IVector;
+  /**
+   * the x and y position of the glyph in the texture in pixels.
+   */
+  texturePosition: IVector;
+  /**
+   * the x and y position of the glyph in the texture in clip space coordinates.
+   */
+  texturePositionClipSpace: IVector;
+  /**
+   * The width and height of the glyph in the texture in pixels.
+   */
+  size: IVector;
+  /**
+   * The width and height of the glyph in the texture in clip space coordinates.
+   */
+  sizeClipSpace: IVector;
+}
+
+export interface IVector {
+  x: number;
+  y: number;
+}
+
+export interface IBoundingBox {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+}
+
+export interface ISelectionRenderModel {
+  readonly hasSelection: boolean;
+  readonly columnSelectMode: boolean;
+  readonly viewportStartRow: number;
+  readonly viewportEndRow: number;
+  readonly viewportCappedStartRow: number;
+  readonly viewportCappedEndRow: number;
+  readonly startCol: number;
+  readonly endCol: number;
+  readonly selectionStart: [number, number] | undefined;
+  readonly selectionEnd: [number, number] | undefined;
+  clear(): void;
+  update(terminal: Terminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode?: boolean): void;
+  isCellSelected(terminal: Terminal, x: number, y: number): boolean;
+}

src/browser/services/CharSizeService.ts

@@ -16,8 +16,8 @@ export class CharSizeService implements ICharSizeService {
 
   public get hasValidSize(): boolean { return this.width > 0 && this.height > 0; }
 
-  private _onCharSizeChange = new EventEmitter<void>();
-  public get onCharSizeChange(): IEvent<void> { return this._onCharSizeChange.event; }
+  private readonly _onCharSizeChange = new EventEmitter<void>();
+  public readonly onCharSizeChange = this._onCharSizeChange.event;
 
   constructor(
     document: Document,

src/browser/services/RenderService.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderer, IRenderDimensions } from 'browser/renderer/shared/Types';
 import { RenderDebouncer } from 'browser/RenderDebouncer';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { Disposable } from 'common/Lifecycle';
@@ -12,7 +12,7 @@ import { addDisposableDomListener } from 'browser/Lifecycle';
 import { IColorSet, IRenderDebouncerWithCallback } from 'browser/Types';
 import { IOptionsService, IBufferService, IDecorationService } from 'common/services/Services';
 import { ICharSizeService, ICoreBrowserService, IRenderService } from 'browser/services/Services';
-import { DebouncedIdleTask } from 'common/Idle';
+import { DebouncedIdleTask } from 'common/TaskQueue';
 
 interface ISelectionState {
   start: [number, number] | undefined;
@@ -40,14 +40,14 @@ export class RenderService extends Disposable implements IRenderService {
     columnSelectMode: false
   };
 
-  private _onDimensionsChange = new EventEmitter<IRenderDimensions>();
-  public get onDimensionsChange(): IEvent<IRenderDimensions> { return this._onDimensionsChange.event; }
-  private _onRenderedViewportChange = new EventEmitter<{ start: number, end: number }>();
-  public get onRenderedViewportChange(): IEvent<{ start: number, end: number }> { return this._onRenderedViewportChange.event; }
-  private _onRender = new EventEmitter<{ start: number, end: number }>();
-  public get onRender(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
-  private _onRefreshRequest = new EventEmitter<{ start: number, end: number }>();
-  public get onRefreshRequest(): IEvent<{ start: number, end: number }> { return this._onRefreshRequest.event; }
+  private readonly _onDimensionsChange = new EventEmitter<IRenderDimensions>();
+  public readonly onDimensionsChange =  this._onDimensionsChange.event;
+  private readonly _onRenderedViewportChange = new EventEmitter<{ start: number, end: number }>();
+  public readonly onRenderedViewportChange = this._onRenderedViewportChange.event;
+  private readonly _onRender = new EventEmitter<{ start: number, end: number }>();
+  public readonly onRender = this._onRender.event;
+  private readonly _onRefreshRequest = new EventEmitter<{ start: number, end: number }>();
+  public readonly onRefreshRequest = this._onRefreshRequest.event;
 
   public get dimensions(): IRenderDimensions { return this._renderer!.dimensions; }
 

src/browser/services/SelectionService.ts

@@ -111,14 +111,14 @@ export class SelectionService extends Disposable implements ISelectionService {
   private _oldSelectionStart: [number, number] | undefined = undefined;
   private _oldSelectionEnd: [number, number] | undefined = undefined;
 
-  private _onLinuxMouseSelection = this.register(new EventEmitter<string>());
-  public get onLinuxMouseSelection(): IEvent<string> { return this._onLinuxMouseSelection.event; }
-  private _onRedrawRequest = this.register(new EventEmitter<ISelectionRedrawRequestEvent>());
-  public get onRequestRedraw(): IEvent<ISelectionRedrawRequestEvent> { return this._onRedrawRequest.event; }
-  private _onSelectionChange = this.register(new EventEmitter<void>());
-  public get onSelectionChange(): IEvent<void> { return this._onSelectionChange.event; }
-  private _onRequestScrollLines = this.register(new EventEmitter<ISelectionRequestScrollLinesEvent>());
-  public get onRequestScrollLines(): IEvent<ISelectionRequestScrollLinesEvent> { return this._onRequestScrollLines.event; }
+  private readonly _onLinuxMouseSelection = this.register(new EventEmitter<string>());
+  public readonly onLinuxMouseSelection = this._onLinuxMouseSelection.event;
+  private readonly _onRedrawRequest = this.register(new EventEmitter<ISelectionRedrawRequestEvent>());
+  public readonly onRequestRedraw = this._onRedrawRequest.event;
+  private readonly _onSelectionChange = this.register(new EventEmitter<void>());
+  public readonly onSelectionChange = this._onSelectionChange.event;
+  private readonly _onRequestScrollLines = this.register(new EventEmitter<ISelectionRequestScrollLinesEvent>());
+  public readonly onRequestScrollLines = this._onRequestScrollLines.event;
 
   constructor(
     private readonly _element: HTMLElement,

src/browser/services/Services.ts

@@ -4,7 +4,7 @@
  */
 
 import { IEvent } from 'common/EventEmitter';
-import { IRenderDimensions, IRenderer } from 'browser/renderer/Types';
+import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
 import { IColorSet } from 'browser/Types';
 import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { createDecorator } from 'common/services/ServiceRegistry';