Move cache utils to core shared/ folder

Part of #4065

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

@@ -20,6 +20,7 @@ import { excludeFromContrastRatioDemands, throwIfFalsy } from 'browser/renderer/
 import { channels, color, rgba } from 'common/Color';
 import { removeElementFromParent } from 'browser/Dom';
 import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs';
+import { Terminal } from 'xterm';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -53,12 +54,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   public get canvas(): HTMLCanvasElement { return this._canvas; }
 
   constructor(
+    private readonly _terminal: Terminal,
     private _container: HTMLElement,
     id: string,
     zIndex: number,
     private _alpha: boolean,
     protected _colors: IColorSet,
-    private _rendererId: number,
     protected readonly _bufferService: IBufferService,
     protected readonly _optionsService: IOptionsService,
     protected readonly _decorationService: IDecorationService,
@@ -127,7 +128,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireCharAtlas(this._optionsService.rawOptions, this._rendererId, colorSet, this._scaledCharWidth, this._scaledCharHeight, this._coreBrowserService.dpr);
+    this._charAtlas = acquireCharAtlas(this._terminal, colorSet, this._scaledCellWidth, this._scaledCellHeight, this._scaledCharWidth, this._scaledCharHeight, this._coreBrowserService.dpr);
     this._charAtlas.warmUp();
   }
 

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

@@ -29,7 +29,7 @@ export class CanvasAddon implements ITerminalAddon {
     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);
+    this._renderer = new CanvasRenderer(terminal, colors, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService);
     renderService.setRenderer(this._renderer);
     renderService.onResize(bufferService.cols, bufferService.rows);
   }

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

@@ -16,6 +16,7 @@ import { IBufferService, IOptionsService, IDecorationService, ICoreService } fro
 import { removeTerminalFromCache } from './atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { observeDevicePixelDimensions } from 'browser/renderer/DevicePixelObserver';
+import { Terminal } from 'xterm';
 
 let nextRendererId = 1;
 
@@ -31,6 +32,7 @@ export class CanvasRenderer extends Disposable implements IRenderer {
   public readonly onRequestRedraw = this._onRequestRedraw.event;
 
   constructor(
+    private readonly _terminal: Terminal,
     private _colors: IColorSet,
     private readonly _screenElement: HTMLElement,
     linkifier2: ILinkifier2,
@@ -45,10 +47,10 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     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, this._colors, allowTransparency, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService),
+      new SelectionRenderLayer(this._terminal, this._screenElement, 1, this._colors, this._bufferService, this._coreBrowserService, decorationService, this._optionsService),
+      new LinkRenderLayer(this._terminal, this._screenElement, 2, this._colors, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService),
+      new CursorRenderLayer(this._terminal, this._screenElement, 3, this._colors, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -77,7 +79,7 @@ export class CanvasRenderer extends Disposable implements IRenderer {
       l.dispose();
     }
     super.dispose();
-    removeTerminalFromCache(this._id);
+    removeTerminalFromCache(this._terminal);
   }
 
   public onDevicePixelRatioChange(): void {

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

@@ -11,6 +11,7 @@ import { IColorSet } from 'browser/Types';
 import { IBufferService, IOptionsService, ICoreService, IDecorationService } from 'common/services/Services';
 import { IEventEmitter } from 'common/EventEmitter';
 import { ICoreBrowserService } from 'browser/services/Services';
+import { Terminal } from 'xterm';
 
 interface ICursorState {
   x: number;
@@ -32,10 +33,10 @@ 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,
@@ -43,7 +44,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService
   ) {
-    super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'cursor', zIndex, true, colors, bufferService, optionsService, decorationService, coreBrowserService);
     this._state = {
       x: 0,
       y: 0,

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

@@ -7,25 +7,26 @@ import { IRenderDimensions } from 'browser/renderer/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 { 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
   ) {
-    super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'link', zIndex, true, colors, bufferService, optionsService, decorationService, coreBrowserService);
 
     linkifier2.onShowLinkUnderline(e => this._onShowLinkUnderline(e));
     linkifier2.onHideLinkUnderline(e => this._onHideLinkUnderline(e));

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

@@ -8,6 +8,7 @@ import { BaseRenderLayer } from './BaseRenderLayer';
 import { IColorSet } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { ICoreBrowserService } 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
   ) {
-    super(container, 'selection', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'selection', zIndex, true, colors, bufferService, optionsService, decorationService, coreBrowserService);
     this._clearState();
   }
 

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

@@ -15,6 +15,7 @@ import { IOptionsService, IBufferService, IDecorationService } from 'common/serv
 import { ICharacterJoinerService, ICoreBrowserService } 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,18 +32,18 @@ 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
   ) {
-    super(container, 'text', zIndex, alpha, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'text', zIndex, alpha, colors, bufferService, optionsService, decorationService, coreBrowserService);
     this._state = new GridCache<CharData>();
   }
 

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

@@ -3,19 +3,19 @@
  * @license MIT
  */
 
-import { generateConfig, configEquals } from './CharAtlasUtils';
+import { generateConfig, configEquals } from 'browser/renderer/shared/CharAtlasUtils';
 import { BaseCharAtlas } from './BaseCharAtlas';
 import { DynamicCharAtlas } from './DynamicCharAtlas';
-import { ICharAtlasConfig } from './Types';
 import { IColorSet } from 'browser/Types';
-import { ITerminalOptions } from 'xterm';
+import { Terminal } from 'xterm';
+import { ICharAtlasConfig } from 'browser/renderer/shared/Types';
 
 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[];
+  ownedBy: Terminal[];
 }
 
 const charAtlasCache: ICharAtlasCacheEntry[] = [];
@@ -25,19 +25,20 @@ const charAtlasCache: ICharAtlasCacheEntry[] = [];
  * one that is in use by another terminal.
  */
 export function acquireCharAtlas(
-  options: Required<ITerminalOptions>,
-  rendererId: number,
+  terminal: Terminal,
   colors: IColorSet,
+  scaledCellWidth: number,
+  scaledCellHeight: number,
   scaledCharWidth: number,
   scaledCharHeight: number,
   devicePixelRatio: number
 ): BaseCharAtlas {
-  const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, options, colors, devicePixelRatio);
+  const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, 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);
+    const ownedByIndex = entry.ownedBy.indexOf(terminal);
     if (ownedByIndex >= 0) {
       if (configEquals(entry.config, newConfig)) {
         return entry.atlas;
@@ -58,7 +59,7 @@ export function acquireCharAtlas(
     const entry = charAtlasCache[i];
     if (configEquals(entry.config, newConfig)) {
       // Add the renderer to the cache entry and return
-      entry.ownedBy.push(rendererId);
+      entry.ownedBy.push(terminal);
       return entry.atlas;
     }
   }
@@ -69,7 +70,7 @@ export function acquireCharAtlas(
       newConfig
     ),
     config: newConfig,
-    ownedBy: [rendererId]
+    ownedBy: [terminal]
   };
   charAtlasCache.push(newEntry);
   return newEntry.atlas;
@@ -78,9 +79,9 @@ export function acquireCharAtlas(
 /**
  * Removes a terminal reference from the cache, allowing its memory to be freed.
  */
-export function removeTerminalFromCache(rendererId: number): void {
+export function removeTerminalFromCache(terminal: Terminal): void {
   for (let i = 0; i < charAtlasCache.length; i++) {
-    const index = charAtlasCache[i].ownedBy.indexOf(rendererId);
+    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 renderer

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

@@ -4,25 +4,21 @@
  */
 
 import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/Constants';
-import { IGlyphIdentifier, ICharAtlasConfig } from './Types';
+import { IGlyphIdentifier } 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';
+import { color, NULL_COLOR } from 'common/Color';
+import { ICharAtlasConfig } from 'browser/renderer/shared/Types';
 
 // 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.
@@ -223,7 +219,7 @@ export class DynamicCharAtlas extends BaseCharAtlas {
       // 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;
+      return NULL_COLOR;
     }
     let result: IColor;
     if (glyph.bg === INVERTED_DEFAULT_COLOR) {

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

@@ -15,15 +15,3 @@ export interface IGlyphIdentifier {
   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-webgl/src/atlas/CharAtlasCache.ts

@@ -3,11 +3,11 @@
  * @license MIT
  */
 
-import { generateConfig, configEquals } from './CharAtlasUtils';
 import { WebglCharAtlas } from './WebglCharAtlas';
-import { ICharAtlasConfig } from './Types';
 import { Terminal } from 'xterm';
 import { IColorSet, ITerminal } from 'browser/Types';
+import { ICharAtlasConfig } from 'browser/renderer/shared/Types';
+import { generateConfig, configEquals } from 'browser/renderer/shared/CharAtlasUtils';
 
 interface ICharAtlasCacheEntry {
   atlas: WebglCharAtlas;

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

@@ -3,9 +3,6 @@
  * @license MIT
  */
 
-import { FontWeight } from 'xterm';
-import { IColorSet } from 'browser/Types';
-
 export interface IGlyphIdentifier {
   chars: string;
   code: number;
@@ -15,22 +12,3 @@ export interface IGlyphIdentifier {
   dim: boolean;
   italic: boolean;
 }
-
-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;
-}

addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts

@@ -3,7 +3,6 @@
  * @license MIT
  */
 
-import { ICharAtlasConfig } from './Types';
 import { DIM_OPACITY, TEXT_BASELINE } from 'browser/renderer/Constants';
 import { IRasterizedGlyph, IBoundingBox } from '../Types';
 import { DEFAULT_COLOR, Attributes, DEFAULT_EXT, UnderlineStyle } from 'common/buffer/Constants';
@@ -11,12 +10,13 @@ import { throwIfFalsy } from '../WebglUtils';
 import { IColor } from 'common/Types';
 import { IDisposable } from 'xterm';
 import { AttributeData } from 'common/buffer/AttributeData';
-import { color, rgba } from 'common/Color';
+import { color, NULL_COLOR, rgba } from 'common/Color';
 import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs';
 import { excludeFromContrastRatioDemands, isPowerlineGlyph, isRestrictedPowerlineGlyph } from 'browser/renderer/RendererUtils';
 import { IUnicodeService } from 'common/services/Services';
 import { FourKeyMap } from 'common/MultiKeyMap';
 import { IdleTaskQueue } from 'common/TaskQueue';
+import { ICharAtlasConfig } 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.
@@ -29,12 +29,6 @@ const TEXTURE_HEIGHT = 1024;
  * this prevent juggling multiple textures in the GL context.
  */
 const TEXTURE_CAPACITY = Math.floor(TEXTURE_HEIGHT * 0.8);
-
-const TRANSPARENT_COLOR = {
-  css: 'rgba(0, 0, 0, 0)',
-  rgba: 0
-};
-
 /**
  * A shared object which is used to draw nothing for a particular cell.
  */
@@ -202,7 +196,7 @@ export class WebglCharAtlas implements IDisposable {
       // 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;
+      return NULL_COLOR;
     }
 
     let result: IColor;

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

@@ -6,10 +6,10 @@
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
-import { is256Color } from '../atlas/CharAtlasUtils';
 import { ITerminal, IColorSet, ILinkifierEvent } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { ICoreBrowserService } from 'browser/services/Services';
+import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
 
 export class LinkRenderLayer extends BaseRenderLayer {
   private _state: ILinkifierEvent | undefined;

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/renderer/shared/CharAtlasUtils.ts

@@ -5,14 +5,9 @@
 
 import { ICharAtlasConfig } from './Types';
 import { Attributes } from 'common/buffer/Constants';
-import { Terminal, FontWeight } from 'xterm';
+import { Terminal } from 'xterm';
 import { IColorSet } from 'browser/Types';
-import { IColor } from 'common/Types';
-
-const NULL_COLOR: IColor = {
-  css: '',
-  rgba: 0
-};
+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
@@ -70,8 +65,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
       a.scaledCharHeight === b.scaledCharHeight &&
       a.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors &&
       a.minimumContrastRatio === b.minimumContrastRatio &&
-      a.colors.foreground === b.colors.foreground &&
-      a.colors.background === b.colors.background;
+      a.colors.foreground.rgba === b.colors.foreground.rgba &&
+      a.colors.background.rgba === b.colors.background.rgba;
 }
 
 export function is256Color(colorCode: number): boolean {

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/Types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { FontWeight } from 'xterm';
+import { IColorSet } from 'browser/Types';
+
+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;
+}

src/common/Color.ts

@@ -11,6 +11,11 @@ let $g = 0;
 let $b = 0;
 let $a = 0;
 
+export const NULL_COLOR: IColor = {
+  css: '#00000000',
+  rgba: 0
+};
+
 /**
  * Helper functions where the source type is "channels" (individual color channels as numbers).
  */