Merge branch 'master' into patch-1

2026-08-05 13:43:48 -07:00 · 2020-01-02 11:58:34 -08:00
parent 5f25f40db9 2a9e16bb8e
commit 5d3629173f
60 changed files with 2343 additions and 765 deletions
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Question
+    url:  https://stackoverflow.com/questions/tagged/xtermjs
+    about: Please ask and answer questions here.
@@ -1,8 +0,0 @@
---
-name: Question
-about: The issue tracker is not for questions. Please ask questions on https://stackoverflow.com/questions/tagged/xtermjs
---
-
-🛑 The issue tracker is not for questions 🛑
-
-If you have a question, please ask it on https://stackoverflow.com/questions/tagged/xtermjs.
@@ -10,7 +10,7 @@ Xterm.js is a front-end component written in TypeScript that lets applications b
 - **Performant**: Xterm.js is *really* fast, it even includes a GPU-accelerated renderer.
 - **Rich unicode support**: Supports CJK, emojis and IMEs.
 - **Self-contained**: Requires zero dependencies to work.
- **Accessible**: Screen reader support can be turned on using the `screenReaderMode` option.
+- **Accessible**: Screen reader and minimum contrast ratio support can be turned on
 - **And much more**: Links, theming, addons, well documented API, etc.

 ## What xterm.js is not
@@ -110,7 +110,7 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**WebSSH2**](https://github.com/billchurch/WebSSH2): A web based SSH2 client using xterm.js, socket.io, and ssh2.
 - [**Spyder Terminal**](https://github.com/spyder-ide/spyder-terminal): A full fledged system terminal embedded on Spyder IDE.
 - [**Cloud Commander**](https://cloudcmd.io "Cloud Commander"): Orthodox web file manager with console and editor.
- [**Codevolve**](https://www.codevolve.com "Codevolve"): Online platform for interactive coding and web development courses. Live container-backed terminal uses xterm.js.
+- [**Next Tech**](https://next.tech "Next Tech"): Online platform for interactive coding and web development courses. Live container-backed terminal uses xterm.js.
 - [**RStudio**](https://www.rstudio.com/products/RStudio "RStudio"): RStudio is an integrated development environment (IDE) for R.
 - [**Terminal for Atom**](https://github.com/jsmecham/atom-terminal-tab): A simple terminal for the Atom text editor.
 - [**Eclipse Orion**](https://orionhub.org): A modern, open source software development environment that runs in the cloud. Code, deploy and run in the cloud.
@@ -156,6 +156,8 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**tty-share**](https://tty-share.com): Extremely simple terminal sharing over the Internet.
 - [**Ten Hands**](https://github.com/saisandeepvaddi/ten-hands): One place to run your command-line tasks.
 - [**WebAssembly.sh**](https://webassembly.sh): A WebAssembly WASI browser terminal
+- [**Gus**](https://gus.jp): A shared coding pad where you can run Python with xterm.js
+- [**Linode**](https://linode.com): Linode uses xterm.js to provide users a web console for their Linode instances.
 - [**FluffOS**](https://www.fluffos.info): Active maintained LPMUD driver with websocket support.

 [And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
@@ -1,6 +1,6 @@
 {
  "name": "xterm-addon-attach",
-  "version": "0.3.0",
+  "version": "0.4.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -33,6 +33,7 @@ export class AttachAddon implements ITerminalAddon {

    if (this._bidirectional) {
      this._disposables.push(terminal.onData(data => this._sendData(data)));
+      this._disposables.push(terminal.onBinary(data => this._sendBinary(data)));
    }

    this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()));
@@ -51,6 +52,17 @@ export class AttachAddon implements ITerminalAddon {
    }
    this._socket.send(data);
  }
+
+  private _sendBinary(data: string): void {
+    if (this._socket.readyState !== 1) {
+      return;
+    }
+    const buffer = new Uint8Array(data.length);
+    for (let i = 0; i < data.length; ++i) {
+      buffer[i] = data.charCodeAt(i) & 255;
+    }
+    this._socket.send(buffer);
+  }
 }

 function addSocketListener<K extends keyof WebSocketEventMap>(socket: WebSocket, type: K, handler: (this: WebSocket, ev: WebSocketEventMap[K]) => any): IDisposable {
@@ -1,7 +1,7 @@
 {
  "compilerOptions": {
    "module": "commonjs",
-    "target": "es2015",
+    "target": "es5",
    "lib": [
      "dom",
      "es2015"
@@ -1,6 +1,6 @@
 {
  "name": "xterm-addon-search",
-  "version": "0.3.0",
+  "version": "0.4.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -1,6 +1,6 @@
 {
  "name": "xterm-addon-webgl",
-  "version": "0.3.0",
+  "version": "0.4.1",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -6,13 +6,14 @@
 import { createProgram, PROJECTION_MATRIX, throwIfFalsy } from './WebglUtils';
 import { WebglCharAtlas } from './atlas/WebglCharAtlas';
 import { IWebGL2RenderingContext, IWebGLVertexArrayObject, IRenderModel, IRasterizedGlyph } from './Types';
-import { COMBINED_CHAR_BIT_MASK, RENDER_MODEL_INDICIES_PER_CELL, RENDER_MODEL_FG_OFFSET } from './RenderModel';
+import { COMBINED_CHAR_BIT_MASK, RENDER_MODEL_INDICIES_PER_CELL, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_BG_OFFSET } from './RenderModel';
 import { fill } from 'common/TypedArrayUtils';
 import { slice } from './TypedArray';
-import { NULL_CELL_CODE, WHITESPACE_CELL_CODE, Attributes } from 'common/buffer/Constants';
+import { NULL_CELL_CODE, WHITESPACE_CELL_CODE, Attributes, FgFlags } from 'common/buffer/Constants';
 import { Terminal, IBufferLine } from 'xterm';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, IColor } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
+import { AttributeData } from 'common/buffer/AttributeData';

 interface IVertices {
  attributes: Float32Array;
@@ -101,7 +102,6 @@ export class GlyphRenderer {
    private _dimensions: IRenderDimensions
  ) {
    const gl = this._gl;
-
    const program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource));
    this._program = program;

@@ -184,7 +184,7 @@ export class GlyphRenderer {

    let rasterizedGlyph: IRasterizedGlyph;
    if (!this._atlas) {
-      throw new Error('atlas must be set before updating cell');
+      return;
    }
    if (chars && chars.length > 1) {
      rasterizedGlyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg);
@@ -255,18 +255,49 @@ export class GlyphRenderer {
    for (let x = startCol; x < endCol; x++) {
      const offset = (y * this._terminal.cols + x) * RENDER_MODEL_INDICIES_PER_CELL;
      const code = model.cells[offset];
+      let fg = model.cells[offset + RENDER_MODEL_FG_OFFSET];
+      if (fg & FgFlags.INVERSE) {
+        const workCell = new AttributeData();
+        workCell.fg = fg;
+        workCell.bg = model.cells[offset + RENDER_MODEL_BG_OFFSET];
+        // Get attributes from fg (excluding inverse) and resolve inverse by pullibng rgb colors
+        // from bg. This is needed since the inverse fg color should be based on the original bg
+        // color, not on the selection color
+        fg = (fg & ~(Attributes.CM_MASK | Attributes.RGB_MASK | FgFlags.INVERSE));
+        switch (workCell.getBgColorMode()) {
+          case Attributes.CM_P16:
+          case Attributes.CM_P256:
+            const c = this._getColorFromAnsiIndex(workCell.getBgColor()).rgba;
+            fg |= (c >> 8) & Attributes.RED_MASK | (c >> 8) & Attributes.GREEN_MASK | (c >> 8) & Attributes.BLUE_MASK;
+          case Attributes.CM_RGB:
+            const arr = AttributeData.toColorRGB(workCell.getBgColor());
+            fg |= arr[0] << Attributes.RED_SHIFT | arr[1] << Attributes.GREEN_SHIFT | arr[2] << Attributes.BLUE_SHIFT;
+          case Attributes.CM_DEFAULT:
+          default:
+            const c2 = this._colors.background.rgba;
+            fg |= (c2 >> 8) & Attributes.RED_MASK | (c2 >> 8) & Attributes.GREEN_MASK | (c2 >> 8) & Attributes.BLUE_MASK;
+        }
+        fg |= Attributes.CM_RGB;
+      }
      if (code & COMBINED_CHAR_BIT_MASK) {
        if (!line) {
          line = terminal.buffer.getLine(row);
        }
        const chars = line!.getCell(x)!.char;
-        this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, model.cells[offset + RENDER_MODEL_FG_OFFSET], chars);
+        this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, fg, chars);
      } else {
-        this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, model.cells[offset + RENDER_MODEL_FG_OFFSET]);
+        this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, fg);
      }
    }
  }

+  private _getColorFromAnsiIndex(idx: number): IColor {
+    if (idx >= this._colors.ansi.length) {
+      throw new Error('No color found for idx ' + idx);
+    }
+    return this._colors.ansi[idx];
+  }
+
  public onResize(): void {
    const terminal = this._terminal;
    const gl = this._gl;
@@ -22,13 +22,13 @@ const enum VertexAttribLocations {
 const vertexShaderSource = `#version 300 es
 layout (location = ${VertexAttribLocations.POSITION}) in vec2 a_position;
 layout (location = ${VertexAttribLocations.SIZE}) in vec2 a_size;
-layout (location = ${VertexAttribLocations.COLOR}) in vec3 a_color;
+layout (location = ${VertexAttribLocations.COLOR}) in vec4 a_color;
 layout (location = ${VertexAttribLocations.UNIT_QUAD}) in vec2 a_unitquad;

 uniform mat4 u_projection;
 uniform vec2 u_resolution;

-out vec3 v_color;
+out vec4 v_color;

 void main() {
  vec2 zeroToOne = (a_position + (a_unitquad * a_size)) / u_resolution;
@@ -39,12 +39,12 @@ void main() {
 const fragmentShaderSource = `#version 300 es
 precision lowp float;

-in vec3 v_color;
+in vec4 v_color;

 out vec4 outColor;

 void main() {
-  outColor = vec4(v_color, 1);
+  outColor = v_color;
 }`;

 interface IVertices {
@@ -248,23 +248,26 @@ export class RectangleRenderer {
      let currentStartX = -1;
      let currentBg = 0;
      let currentFg = 0;
+      let currentInverse = false;
      for (let x = 0; x < terminal.cols; x++) {
        const modelIndex = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
        const bg = model.cells[modelIndex + RENDER_MODEL_BG_OFFSET];
        const fg = model.cells[modelIndex + RENDER_MODEL_FG_OFFSET];
-        if (bg !== currentBg) {
+        const inverse = !!(fg & FgFlags.INVERSE);
+        if (bg !== currentBg || (fg !== currentFg && (currentInverse || inverse))) {
          // A rectangle needs to be drawn if going from non-default to another color
-          if (currentBg !== 0) {
+          if (currentBg !== 0 || (currentInverse && currentFg !== 0)) {
            const offset = rectangleCount++ * INDICES_PER_RECTANGLE;
            this._updateRectangle(vertices, offset, currentFg, currentBg, currentStartX, x, y);
          }
          currentStartX = x;
          currentBg = bg;
          currentFg = fg;
+          currentInverse = inverse;
        }
      }
      // Finish rectangle if it's still going
-      if (currentBg !== 0) {
+      if (currentBg !== 0 || (currentInverse && currentFg !== 0)) {
        const offset = rectangleCount++ * INDICES_PER_RECTANGLE;
        this._updateRectangle(vertices, offset, currentFg, currentBg, currentStartX, terminal.cols, y);
      }
@@ -274,12 +277,21 @@ export class RectangleRenderer {

  private _updateRectangle(vertices: IVertices, offset: number, fg: number, bg: number, startX: number, endX: number, y: number): void {
    let rgba: number | undefined;
-    const colorMode = bg & Attributes.CM_MASK;
    if (fg & FgFlags.INVERSE) {
-      // Inverted color
-      rgba = this._colors.foreground.rgba;
+      switch (fg & Attributes.CM_MASK) {
+        case Attributes.CM_P16:
+        case Attributes.CM_P256:
+          rgba = this._colors.ansi[fg & Attributes.PCOLOR_MASK].rgba;
+          break;
+        case Attributes.CM_RGB:
+          rgba = (fg & Attributes.RGB_MASK) << 8;
+          break;
+        case Attributes.CM_DEFAULT:
+        default:
+          rgba = this._colors.foreground.rgba;
+      }
    } else {
-      switch (colorMode) {
+      switch (bg & Attributes.CM_MASK) {
        case Attributes.CM_P16:
        case Attributes.CM_P256:
          rgba = this._colors.ansi[bg & Attributes.PCOLOR_MASK].rgba;
@@ -10,6 +10,7 @@ import { IColorSet } from 'browser/Types';

 export class WebglAddon implements ITerminalAddon {
  private _terminal?: Terminal;
+  private _renderer?: WebglRenderer;

  constructor(
    private _preserveDrawingBuffer?: boolean
@@ -22,7 +23,8 @@ export class WebglAddon implements ITerminalAddon {
    this._terminal = terminal;
    const renderService: IRenderService =  (<any>terminal)._core._renderService;
    const colors: IColorSet = (<any>terminal)._core._colorManager.colors;
-    renderService.setRenderer(new WebglRenderer(terminal, colors, this._preserveDrawingBuffer));
+    this._renderer = new WebglRenderer(terminal, colors, this._preserveDrawingBuffer);
+    renderService.setRenderer(this._renderer);
  }

  public dispose(): void {
@@ -32,5 +34,10 @@ export class WebglAddon implements ITerminalAddon {
    const renderService: IRenderService = (<any>this._terminal)._core._renderService;
    renderService.setRenderer((<any>this._terminal)._core._createRenderer());
    renderService.onResize(this._terminal.cols, this._terminal.rows);
+    this._renderer = undefined;
+  }
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderer?.textureAtlas;
  }
 }
@@ -11,10 +11,9 @@ import { acquireCharAtlas } from './atlas/CharAtlasCache';
 import { WebglCharAtlas } from './atlas/WebglCharAtlas';
 import { RectangleRenderer } from './RectangleRenderer';
 import { IWebGL2RenderingContext } from './Types';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { RenderModel, COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
 import { Disposable } from 'common/Lifecycle';
-import { DEFAULT_COLOR, NULL_CELL_CODE, FgFlags } from 'common/buffer/Constants';
+import { NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Terminal, IEvent } from 'xterm';
 import { IRenderLayer } from './renderLayer/Types';
 import { IRenderDimensions, IRenderer, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
@@ -38,6 +37,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
  public dimensions: IRenderDimensions;

  private _core: ITerminal;
+  private _isAttached: boolean;

  private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
  public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
@@ -90,6 +90,8 @@ export class WebglRenderer extends Disposable implements IRenderer {

    // Update dimensions and acquire char atlas
    this.onCharSizeChanged();
+
+    this._isAttached = document.body.contains(this._core.screenElement);
  }

  public dispose(): void {
@@ -98,9 +100,12 @@ export class WebglRenderer extends Disposable implements IRenderer {
    super.dispose();
  }

+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._charAtlas?.cacheCanvas;
+  }
+
  public setColors(colors: IColorSet): void {
    this._colors = colors;
-
    // Clear layers and force a full render
    this._renderLayers.forEach(l => {
      l.setColors(this._terminal, this._colors);
@@ -193,6 +198,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
   */
  private _refreshCharAtlas(): void {
    if (this.dimensions.scaledCharWidth <= 0 && this.dimensions.scaledCharHeight <= 0) {
+      // Mark as not attached so char atlas gets refreshed on next render
+      this._isAttached = false;
      return;
    }

@@ -218,6 +225,16 @@ export class WebglRenderer extends Disposable implements IRenderer {
  }

  public renderRows(start: number, end: number): void {
+    if (!this._isAttached) {
+      if (document.body.contains(this._core.screenElement) && (<any>this._core)._charSizeService.width && (<any>this._core)._charSizeService.height) {
+        this._updateDimensions();
+        this._refreshCharAtlas();
+        this._isAttached = true;
+      } else {
+        return;
+      }
+    }
+
    // Update render layers
    this._renderLayers.forEach(l => l.onGridChanged(this._terminal, start, end));

@@ -252,35 +269,13 @@ export class WebglRenderer extends Disposable implements IRenderer {
          this._model.lineLengths[y] = x + 1;
        }

-        // Resolve bg and fg
-        let bg = this._workCell.bg;
-        let fg = this._workCell.fg;
-
        // Nothing has changed, no updates needed
        if (this._model.cells[i] === code &&
-            this._model.cells[i + RENDER_MODEL_BG_OFFSET] === bg &&
-            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === fg) {
+            this._model.cells[i + RENDER_MODEL_BG_OFFSET] === this._workCell.bg &&
+            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === this._workCell.fg) {
          continue;
        }

-        // If inverse flag is on, the foreground should become the background.
-        if (this._workCell.isInverse()) {
-          const temp = bg;
-          bg = fg;
-          fg = temp;
-          if (fg === DEFAULT_COLOR) {
-            fg = INVERTED_DEFAULT_COLOR;
-          }
-          if (bg === DEFAULT_COLOR) {
-            bg = INVERTED_DEFAULT_COLOR;
-          }
-        }
-
-        // Apply drawBoldTextInBrightColors
-        if (terminal.options.drawBoldTextInBrightColors && this._workCell.isBold() && fg & FgFlags.BOLD && this._workCell.getFgColor() < 8) {
-          fg += 8;
-        }
-
        // Flag combined chars with a bit mask so they're easily identifiable
        if (chars.length > 1) {
          code = code | COMBINED_CHAR_BIT_MASK;
@@ -288,10 +283,10 @@ export class WebglRenderer extends Disposable implements IRenderer {

        // Cache the results in the model
        this._model.cells[i] = code;
-        this._model.cells[i + RENDER_MODEL_BG_OFFSET] = bg;
-        this._model.cells[i + RENDER_MODEL_FG_OFFSET] = fg;
+        this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._workCell.bg;
+        this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._workCell.fg;

-        this._glyphRenderer.updateCell(x, y, code, bg, fg, chars);
+        this._glyphRenderer.updateCell(x, y, code, this._workCell.bg, this._workCell.fg, chars);
      }
    }
    this._rectangleRenderer.updateBackgrounds(this._model);
@@ -24,7 +24,8 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
    selectionOpaque: 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()
+    ansi: colors.ansi.slice(),
+    contrastCache: colors.contrastCache
  };
  return {
    devicePixelRatio: window.devicePixelRatio,
@@ -35,6 +36,8 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
    fontWeight: terminal.getOption('fontWeight') as FontWeight,
    fontWeightBold: terminal.getOption('fontWeightBold') as FontWeight,
    allowTransparency: terminal.getOption('allowTransparency'),
+    drawBoldTextInBrightColors: terminal.getOption('drawBoldTextInBrightColors'),
+    minimumContrastRatio: terminal.getOption('minimumContrastRatio'),
    colors: clonedColors
  };
 }
@@ -53,6 +56,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
      a.allowTransparency === b.allowTransparency &&
      a.scaledCharWidth === b.scaledCharWidth &&
      a.scaledCharHeight === b.scaledCharHeight &&
+      a.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors &&
+      a.minimumContrastRatio === b.minimumContrastRatio &&
      a.colors.foreground === b.colors.foreground &&
      a.colors.background === b.colors.background;
 }
@@ -25,5 +25,7 @@ export interface ICharAtlasConfig {
  scaledCharWidth: number;
  scaledCharHeight: number;
  allowTransparency: boolean;
+  drawBoldTextInBrightColors: boolean;
+  minimumContrastRatio: number;
  colors: IColorSet;
 }
@@ -6,11 +6,12 @@
 import { ICharAtlasConfig } from './Types';
 import { DIM_OPACITY } from 'browser/renderer/atlas/Constants';
 import { IRasterizedGlyph, IBoundingBox, IRasterizedGlyphSet } from '../Types';
-import { DEFAULT_COLOR, FgFlags, Attributes, BgFlags } from 'common/buffer/Constants';
+import { DEFAULT_COLOR, Attributes } from 'common/buffer/Constants';
 import { throwIfFalsy } from '../WebglUtils';
 import { IColor } from 'browser/Types';
 import { IDisposable } from 'xterm';
 import { AttributeData } from 'common/buffer/AttributeData';
+import { channels, rgba } from 'browser/Color';

 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -67,8 +68,12 @@ export class WebglCharAtlas implements IDisposable {
  public hasCanvasChanged = false;

  private _workBoundingBox: IBoundingBox = { top: 0, left: 0, bottom: 0, right: 0 };
+  private _workAttributeData: AttributeData = new AttributeData();

-  constructor(document: Document, private _config: ICharAtlasConfig) {
+  constructor(
+    document: Document,
+    private _config: ICharAtlasConfig
+  ) {
    this.cacheCanvas = document.createElement('canvas');
    this.cacheCanvas.width = TEXTURE_WIDTH;
    this.cacheCanvas.height = TEXTURE_HEIGHT;
@@ -81,9 +86,6 @@ export class WebglCharAtlas implements IDisposable {
    this._tmpCanvas.width = this._config.scaledCharWidth * 2 + TMP_CANVAS_GLYPH_PADDING * 2;
    this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2;
    this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency}));
-
-    // This is useful for debugging
-    document.body.appendChild(this.cacheCanvas);
  }

  public dispose(): void {
@@ -176,55 +178,129 @@ export class WebglCharAtlas implements IDisposable {
    return this._config.colors.ansi[idx];
  }

-  private _getBackgroundColor(bg: number, fg: number): IColor {
+  private _getBackgroundColor(bgColorMode: number, bgColor: number, inverse: 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 TRANSPARENT_COLOR;
-    } else if (fg & FgFlags.INVERSE) {
-      return this._config.colors.foreground;
    }

-    const colorMode = bg & Attributes.CM_MASK;
-    switch (colorMode) {
+    switch (bgColorMode) {
      case Attributes.CM_P16:
      case Attributes.CM_P256:
-        return this._getColorFromAnsiIndex(bg & Attributes.PCOLOR_MASK);
+        return this._getColorFromAnsiIndex(bgColor);
      case Attributes.CM_RGB:
-        const rgb = bg & Attributes.RGB_MASK;
-        const arr = AttributeData.toColorRGB(rgb);
+        const arr = AttributeData.toColorRGB(bgColor);
        // TODO: This object creation is slow
        return {
-          rgba: rgb << 8,
+          rgba: bgColor << 8,
          css: `#${toPaddedHex(arr[0])}${toPaddedHex(arr[1])}${toPaddedHex(arr[2])}`
        };
      case Attributes.CM_DEFAULT:
      default:
+        if (inverse) {
+          return this._config.colors.foreground;
+        }
        return this._config.colors.background;
    }
  }

-  private _getForegroundCss(fg: number): string {
-    if (fg & FgFlags.INVERSE) {
-      return this._config.colors.background.css;
+  private _getForegroundCss(bg: number, bgColorMode: number, bgColor: number, fg: number, fgColorMode: number, fgColor: number, inverse: boolean, bold: boolean): string {
+    const minimumContrastCss = this._getMinimumContrastCss(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, inverse, bold);
+    if (minimumContrastCss) {
+      return minimumContrastCss;
    }

-    const colorMode = fg & Attributes.CM_MASK;
-    switch (colorMode) {
+    switch (fgColorMode) {
      case Attributes.CM_P16:
      case Attributes.CM_P256:
-        return this._getColorFromAnsiIndex(fg & Attributes.PCOLOR_MASK).css;
+        if (this._config.drawBoldTextInBrightColors && bold && fgColor < 8) {
+          fgColor += 8;
+        }
+        return this._getColorFromAnsiIndex(fgColor).css;
      case Attributes.CM_RGB:
-        const rgb = fg & Attributes.RGB_MASK;
-        const arr = AttributeData.toColorRGB(rgb);
-        return `#${toPaddedHex(arr[0])}${toPaddedHex(arr[1])}${toPaddedHex(arr[2])}`;
+        const arr = AttributeData.toColorRGB(fgColor);
+        return channels.toCss(arr[0], arr[1], arr[2]);
      case Attributes.CM_DEFAULT:
      default:
+        if (inverse) {
+          const bg = this._config.colors.background.css;
+          if (bg.length === 9) {
+            // Remove bg alpha channel if present
+            return bg.substr(0, 7);
+          }
+          return bg;
+        }
        return this._config.colors.foreground.css;
    }
  }

+  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 _getMinimumContrastCss(bg: number, bgColorMode: number, bgColor: number, fg: number, fgColorMode: number, fgColor: number, inverse: boolean, bold: boolean): string | undefined {
+    if (this._config.minimumContrastRatio === 1) {
+      return undefined;
+    }
+
+    // Try get from cache first
+    const adjustedColor = this._config.colors.contrastCache.getCss(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.setCss(bg, fg, null);
+      return undefined;
+    }
+
+    const css = channels.toCss(
+      (result >> 24) & 0xFF,
+      (result >> 16) & 0xFF,
+      (result >> 8) & 0xFF
+    );
+    this._config.colors.contrastCache.setCss(bg, fg, css);
+
+    return css;
+  }
+
  private _drawToCache(code: number, bg: number, fg: number): IRasterizedGlyph;
  private _drawToCache(chars: string, bg: number, fg: number): IRasterizedGlyph;
  private _drawToCache(codeOrChars: number | string, bg: number, fg: number): IRasterizedGlyph {
@@ -232,14 +308,35 @@ export class WebglCharAtlas implements IDisposable {

    this.hasCanvasChanged = true;

-    const bold = !!(fg & FgFlags.BOLD);
-    const dim = !!(bg & BgFlags.DIM);
-    const italic = !!(bg & BgFlags.ITALIC);
-
    this._tmpCtx.save();

+    this._workAttributeData.fg = fg;
+    this._workAttributeData.bg = bg;
+
+    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();
+    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(bg, fg);
+    const backgroundColor = this._getBackgroundColor(bgColorMode, bgColor, inverse);
    // Use a 'copy' composite operation to clear any existing glyph out of _tmpCtxWithAlpha, regardless of
    // transparency in backgroundColor
    this._tmpCtx.globalCompositeOperation = 'copy';
@@ -254,7 +351,7 @@ export class WebglCharAtlas implements IDisposable {
      `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
    this._tmpCtx.textBaseline = 'top';

-    this._tmpCtx.fillStyle = this._getForegroundCss(fg);
+    this._tmpCtx.fillStyle = this._getForegroundCss(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, inverse, bold);

    // Apply alpha to dim the character
    if (dim) {
@@ -440,4 +537,3 @@ function toPaddedHex(c: number): string {
  const s = c.toString(16);
  return s.length < 2 ? '0' + s : s;
 }
-
@@ -153,11 +153,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   * @param x The column to fill.
   * @param y The row to fill.
   */
-  protected _fillLeftLineAtCell(x: number, y: number): void {
+  protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
    this._ctx.fillRect(
        x * this._scaledCellWidth,
        y * this._scaledCellHeight,
-        window.devicePixelRatio,
+        window.devicePixelRatio * width,
        this._scaledCellHeight);
  }

@@ -204,7 +204,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
  private _renderBarCursor(terminal: Terminal, x: number, y: number, cell: ICellData): void {
    this._ctx.save();
    this._ctx.fillStyle = this._colors.cursor.css;
-    this._fillLeftLineAtCell(x, y);
+    this._fillLeftLineAtCell(x, y, terminal.getOption('cursorWidth'));
    this._ctx.restore();
  }

@@ -10,6 +10,8 @@ declare module 'xterm-addon-webgl' {
   * An xterm.js addon that provides search functionality.
   */
  export class WebglAddon implements ITerminalAddon {
+    public textureAtlas?: HTMLCanvasElement;
+
    constructor(preserveDrawingBuffer?: boolean);

    /**
@@ -127,6 +127,8 @@ jobs:
  condition: and(succeeded(), or(eq(variables['Build.SourceBranch'], 'refs/heads/master'), eq(variables['FORCE_RELEASE'], 'true')))
  pool:
    vmImage: 'ubuntu-16.04'
+  variables:
+    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
  steps:
  - task: NodeTool@0
    inputs:
@@ -140,6 +142,7 @@ jobs:
    inputs:
      key: yarn2 | $(Agent.OS) | yarn.lock
      path: node_modules
+    displayName: Cache node modules
  - script: yarn --frozen-lockfile
    displayName: 'Install dependencies and build'
  - script: NPM_AUTH_TOKEN="$(NPM_AUTH_TOKEN)" node ./bin/publish.js
--- a/Show More
+++ b/Show More