Bump version to 3.4.1

Signed-off-by: Paris Kasidiaris <paris@sourcelair.com>
Save and restore correctly when drawing from static cache
2018-05-21 16:29:57 +00:00 · 2018-05-21 09:22:34 -07:00 · 2018-05-19 08:31:27 +00:00 · 2018-05-17 22:59:03 -07:00 · 2018-05-17 22:42:52 -07:00 · 2018-05-15 11:03:22 -07:00
48 changed files with 1327 additions and 16180 deletions
@@ -15,6 +15,7 @@ build/
 .vscode/
 .DS_Store
 fixtures/typings-test/*.js
+package-lock.json

 # Directories needed for code coverage
 /coverage/
@@ -1,16 +1,48 @@
-node_modules/
-*.swp
-.lock-wscript
-lib/*.test.js
-lib/*.test.js.map
+# Blacklist - exclude everything except npm defaults such as LICENSE, etc
+*
+!*/
+
+# Whitelist - entries to be included must be negated with "!"
+!*.js
+!*.json
+
+# Whitelist - dist/
+!dist/**/*.js
+!dist/**/*.js.map
+
+!dist/**/*.css
+
+# Whitelist - lib/
+!lib/**/*.d.ts
+
+!lib/**/*.js
+!lib/**/*.js.map
+
+!lib/**/*.css
+
+# Whitelist - src/
+!src/**/*.ts
+!src/**/*.d.ts
+
+!src/**/*.js
+!src/**/*.js.map
+
+!src/**/*.css
+
+# Whitelist - typings/
+!typings/*.d.ts
+
+# Blacklist - (normal behavior) these will override any whitelist
+*.test.ts
+*.test.d.ts
+*.test.js
+*.test.js.map
 lib/test/
-Makefile.gyp
-*.Makefile
-*.target.gyp.mk
-*.node
-example/*.log
+
 docs/
-npm-debug.log
 /.idea/
-.env
+.vscode/
 build/
+fixtures/
+coverage/
+demo/
@@ -0,0 +1 @@
+package-lock=false
@@ -17,4 +17,3 @@ env:
 notifications:
  email: false
 script: npm run $NPM_COMMAND
-after_success: npm run coveralls
@@ -23,6 +23,7 @@ Benjamin Woodruff <github@benjam.info>
 Bill Church <billchurch@users.noreply.github.com>
 Bob Reid <bobreid@Bobs-MacBook-Pro.local>
 bottleofwater <nison.mael+bottleofwater@gmail.com>
+Brandon Bayer <b@bayer.ws>
 Brian Mock <brian@mockbrian.com>
 Bruno Ribeiro <b.m.fernandes.ribeiro@gmail.com>
 Bruno Ribeito <b.m.fernandes.ribeiro@gmail.com>
@@ -62,12 +63,16 @@ Jianhui Zhao <jianhuizhao329@gmail.com>
 Joao Moreno <jomo@microsoft.com>
 Joao Moreno <mail@joaomoreno.com>
 Johannes Zellner <johannes@nebulon.de>
+Jon Austin <jon.i.austin@gmail.com>
 Jon Masters <jon.masters@sky.com>
 Jörg Breitbart <jerch@rockborn.de>
+jpoth <poth.john@gmail.com>
 Justin Luk <jluk@users.noreply.github.com>
 Justin Mecham <justin@mecham.me>
 Kirill Merkushev <lanwen@yandex.ru>
 Krasimir Tsonev <krasimir@outset.ws>
+Ledion Bitincka <lbitincka@gmail.com>
+Linus Unnebäck <linus@folkdatorn.se>
 Luca <LucaT1@users.noreply.github.com>
 Lucian Buzzo <lucian.buzzo@gmail.com>
 Lukas Drgon <lukas.drgon@gmail.com>
@@ -88,8 +93,11 @@ npezza93 <npezza93@gmail.com>
 Oleksandr Andriienko <oandriie@redhat.com>
 Paris Kasidiaris <pariskasidiaris@gmail.com>
 Paris Kasidiaris <paris@sourcelair.com>
+Peng Xiao <pengxiao@outlook.com>
 Peter Baumgarten <me@peterbaumgarten.com>
 Philip Olson <philip.olson@protonmail.ch>
+pro-src <34285059+pro-src@users.noreply.github.com>
+pro-src <rodneyd.teal@gmail.com>
 Rick Baker <rick@ricktbaker.com>
 runarberg <runar@greenqloud.com>
 Saad Malik <simfox3@gmail.com>
@@ -1,6 +1,6 @@
 # [![xterm.js logo](logo-full.png)](https://xtermjs.org)

-[![xterm.js build status](https://api.travis-ci.org/xtermjs/xterm.js.svg)](https://travis-ci.org/xtermjs/xterm.js) [![Coverage Status](https://coveralls.io/repos/github/sourcelair/xterm.js/badge.svg)](https://coveralls.io/github/sourcelair/xterm.js) [![Gitter](https://badges.gitter.im/sourcelair/xterm.js.svg)](https://gitter.im/sourcelair/xterm.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/xterm/badge?style=rounded)](https://www.jsdelivr.com/package/npm/xterm)
+[![xterm.js build status](https://api.travis-ci.org/xtermjs/xterm.js.svg)](https://travis-ci.org/xtermjs/xterm.js) [![Coverage Status](https://coveralls.io/repos/github/xtermjs/xterm.js/badge.svg?branch=master)](https://coveralls.io/github/xtermjs/xterm.js?branch=master) [![Gitter](https://badges.gitter.im/sourcelair/xterm.js.svg)](https://gitter.im/sourcelair/xterm.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/xterm/badge?style=rounded)](https://www.jsdelivr.com/package/npm/xterm)

 Xterm.js is a terminal front-end component written in JavaScript that works in the browser.

@@ -41,7 +41,7 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
      <script>
      	var term = new Terminal();
        term.open(document.getElementById('terminal'));
-        term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
+        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
      </script>
    </body>
  </html>
@@ -57,8 +57,6 @@ The proposed way to load xterm.js is via the ES6 module syntax.
 import { Terminal } from 'xterm';
 ```

-*Note: There are currently no typings for addons so you will need to upcast if using TypeScript, eg. `(<any>xterm).fit()`.*
-
 ### Addons

 Addons are JavaScript modules that extend the `Terminal` prototype with new methods and attributes to provide additional functionality. There are a handful available in the main repository in the `src/addons` directory and you can even write your own, by using xterm.js' public API.
@@ -76,6 +74,27 @@ var xterm = new Terminal();  // Instantiate the terminal
 xterm.fit();                 // Use the `fit` method, provided by the `fit` addon
 ```

+#### Importing Addons in TypeScript
+
+There are currently no typings for addons if they are accessed via extending Terminal prototype, so you will need to upcast if using TypeScript, eg. `(<any>xterm).fit()`.
+
+Alternatively, you can import addon function and enhance the terminal on demand. This would have better typing support and is friendly to treeshaking. E.g.:
+
+```typescript
+import { Terminal } from 'xterm';
+import { fit } from 'xterm/lib/addons/fit/fit';
+const xterm = new Terminal();
+
+// Fit the terminal when necessary:
+fit(xterm);
+```
+
+#### Third party addons
+
+There are also the following third party addons available:
+
+- [xterm-webfont](https://www.npmjs.com/package/xterm-webfont)
+
 ## Browser Support

 Since xterm.js is typically implemented as a developer tool, only modern browsers are supported officially. Here is a list of the versions we aim to support:
@@ -128,6 +147,8 @@ computational environment for Jupyter, supporting interactive data science and s
 - [**Microsoft SQL Operations Studio**](https://github.com/Microsoft/sqlopsstudio): A data management tool that enables working with SQL Server, Azure SQL DB and SQL DW from Windows, macOS and Linux
 - [**FreeMAN**](https://github.com/matthew-matvei/freeman): A free, cross-platform file manager for power users
 - [**Fluent Terminal**](https://github.com/felixse/FluentTerminal): A terminal emulator based on UWP and web technologies.
+- [**Hyper**](https://hyper.is): A terminal built on web technologies
+- [**Diag**](https://diag.ai): A better way to troubleshoot problems faster. Capture, share and reapply troubleshooting knowledge so you can focus on solving problems that matter.

 Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it in our list.

@@ -9,7 +9,7 @@
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
    </head>
    <body>
-        <h1>xterm.js: xterm, in the browser</h1>
+        <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
        <div id="terminal-container"></div>
        <div>
          <h2>Actions</h2>
@@ -26,6 +26,9 @@
          <p>
            <label><input type="checkbox" id="option-mac-option-is-meta"> macOptionIsMeta</label>
          </p>
+          <p>
+            <label><input type="checkbox" id="option-transparency"> transparency</label>
+          </p>
          <p>
            <label>
              cursorStyle
@@ -53,6 +56,16 @@
          <p>
            <label>tabStopWidth <input type="number" id="option-tabstopwidth" value="8" /></label>
          </p>
+          <p>
+            <label>
+              experimentalCharAtlas
+              <select id="option-experimental-char-atlas">
+                <option value="static" selected>static</option>
+                <option value="dynamic">dynamic</option>
+                <option value="none">none</option>
+              </select>
+            </label>
+          </p>
          <div>
          	<h3>Size</h3>
            <div>
@@ -31,7 +31,9 @@ var terminalContainer = document.getElementById('terminal-container'),
      cursorStyle: document.querySelector('#option-cursor-style'),
      macOptionIsMeta: document.querySelector('#option-mac-option-is-meta'),
      scrollback: document.querySelector('#option-scrollback'),
+      transparency: document.querySelector('#option-transparency'),
      tabstopwidth: document.querySelector('#option-tabstopwidth'),
+      experimentalCharAtlas: document.querySelector('#option-experimental-char-atlas'),
      bellStyle: document.querySelector('#option-bell-style'),
      screenReaderMode: document.querySelector('#option-screen-reader-mode')
    },
@@ -74,21 +76,29 @@ actionElements.findPrevious.addEventListener('keypress', function (e) {
 optionElements.cursorBlink.addEventListener('change', function () {
  term.setOption('cursorBlink', optionElements.cursorBlink.checked);
 });
+optionElements.macOptionIsMeta.addEventListener('change', function () {
+  term.setOption('macOptionIsMeta', optionElements.macOptionIsMeta.checked);
+});
+optionElements.transparency.addEventListener('change', function () {
+  var checked = optionElements.transparency.checked;
+  term.setOption('allowTransparency', checked);
+  term.setOption('theme', checked ? {background: 'rgba(0, 0, 0, .5)'} : {});
+});
 optionElements.cursorStyle.addEventListener('change', function () {
  term.setOption('cursorStyle', optionElements.cursorStyle.value);
 });
 optionElements.bellStyle.addEventListener('change', function () {
  term.setOption('bellStyle', optionElements.bellStyle.value);
 });
-optionElements.macOptionIsMeta.addEventListener('change', function () {
-  term.setOption('macOptionIsMeta', optionElements.macOptionIsMeta.checked);
-});
 optionElements.scrollback.addEventListener('change', function () {
  term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
 });
 optionElements.tabstopwidth.addEventListener('change', function () {
  term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value, 10));
 });
+optionElements.experimentalCharAtlas.addEventListener('change', function () {
+  term.setOption('experimentalCharAtlas', optionElements.experimentalCharAtlas.value);
+});
 optionElements.screenReaderMode.addEventListener('change', function () {
  term.setOption('screenReaderMode', optionElements.screenReaderMode.checked);
 });
@@ -7,16 +7,16 @@ var pty = require('node-pty');
 var terminals = {},
    logs = {};

-app.use('/build', express.static(__dirname + '/../../../../build'));
-app.use('/demo', express.static(__dirname + '/../../../../demo'));
-app.use('/zmodemjs', express.static(__dirname + '/../../../../node_modules/zmodem.js/dist'));
+app.use('/build', express.static(__dirname + '/../../build'));
+app.use('/demo', express.static(__dirname + '/../../demo'));
+app.use('/zmodemjs', express.static(__dirname + '/../../node_modules/zmodem.js/dist'));

 app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
 });

 app.get('/style.css', function(req, res){
-  res.sendFile(__dirname + '/style.css');
+  res.sendFile(__dirname + '../style.css');
 });

 app.get('/main.js', function(req, res){
@@ -6,6 +6,11 @@ var term,
    socket,
    pid;

+Terminal.applyAddon(fit);
+Terminal.applyAddon(attach);
+Terminal.applyAddon(zmodem);
+Terminal.applyAddon(search);
+
 var terminalContainer = document.getElementById('terminal-container'),
    actionElements = {
      findNext: document.querySelector('#find-next'),
@@ -1,26 +0,0 @@
-{
-  "source": {
-    "include": [
-      "src/"
-    ],
-    "exclude": [
-      "src/test/"
-    ],
-    "excludePattern": "src/.+\\.test\\.(js|ts)$"
-  },
-  "opts": {
-    "readme": "README.md",
-    "template": "node_modules/docdash",
-    "encoding": "utf8",
-    "destination": "docs/",
-    "recurse": true,
-    "verbose": true
-  },
-  "plugins": [
-    "plugins/markdown"
-  ],
-  "templates": {
-    "cleverLinks": false,
-    "monospaceLinks": false
-  }
-}
@@ -1,52 +1,19 @@
 {
  "name": "xterm",
  "description": "Full xterm terminal, in your browser",
-  "version": "3.3.0",
-  "ignore": [
-    "demo",
-    "test",
-    ".gitignore"
-  ],
+  "version": "3.4.1",
  "main": "lib/Terminal.js",
  "types": "typings/xterm.d.ts",
  "repository": "https://github.com/xtermjs/xterm.js",
  "license": "MIT",
-  "files": [
-    "*.js",
-    "*.json",
-    "dist/*.css",
-    "dist/**/*.css",
-    "dist/*.js",
-    "dist/*.js.map",
-    "dist/**/*.js",
-    "dist/**/*.js.map",
-    "lib/*.css",
-    "lib/**/*.css",
-    "lib/*.d.ts",
-    "lib/*.js",
-    "lib/*.js.map",
-    "lib/**/*.d.ts",
-    "lib/**/*.js",
-    "lib/**/*.js.map",
-    "src/*.css",
-    "src/**/*.css",
-    "src/*.js",
-    "src/*.js.map",
-    "src/*.ts",
-    "src/**/*.js",
-    "src/**/*.js.map",
-    "src/**/*.ts",
-    "typings/*.d.ts"
-  ],
  "devDependencies": {
    "@types/chai": "^3.4.34",
    "@types/jsdom": "^11.0.1",
    "@types/mocha": "^2.2.33",
-    "@types/node": "^6.0.41",
+    "@types/node": "6.0.108",
    "@types/text-encoding": "0.0.32",
    "browserify": "^13.3.0",
    "chai": "3.5.0",
-    "docdash": "0.4.0",
    "express": "4.13.4",
    "express-ws": "2.0.0-rc.1",
    "fs-extra": "^1.0.0",
@@ -65,8 +32,10 @@
    "merge-stream": "^1.0.1",
    "node-pty": "^0.7.2",
    "nodemon": "1.10.2",
+    "npm-run-all": "^4.1.2",
    "sorcery": "^0.10.0",
    "tslint": "^5.9.1",
+    "tslint-consistent-codestyle": "^1.13.0",
    "typescript": "~2.7.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
@@ -76,10 +45,10 @@
  },
  "scripts": {
    "start": "node demo/app",
-    "prestart-zmodem": "npm run build",
-    "start-zmodem": "node build/addons/zmodem/demo/app",
-    "lint": "tslint src/*.ts src/**/*.ts",
-    "test": "gulp test",
+    "start-zmodem": "node demo/zmodem/app",
+    "lint": "tslint 'src/**/*.ts'",
+    "test": "npm-run-all mocha lint",
+    "mocha": "gulp test",
    "build:docs": "jsdoc -c jsdoc.json",
    "tsc": "tsc",
    "build": "gulp build",
@@ -87,6 +56,5 @@
    "coveralls": "gulp coveralls",
    "webpack": "gulp webpack",
    "watch": "gulp watch"
-  },
-  "dependencies": {}
+  }
 }
@@ -12,9 +12,9 @@ import { IDisposable } from 'xterm';

 const MAX_ROWS_TO_READ = 20;

-enum BoundaryPosition {
-  Top,
-  Bottom
+const enum BoundaryPosition {
+  TOP,
+  BOTTOM
 }

 export class AccessibilityManager implements IDisposable {
@@ -54,8 +54,8 @@ export class AccessibilityManager implements IDisposable {
      this._rowContainer.appendChild(this._rowElements[i]);
    }

-    this._topBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.Top);
-    this._bottomBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.Bottom);
+    this._topBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.TOP);
+    this._bottomBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.BOTTOM);
    this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
    this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);

@@ -101,11 +101,11 @@ export class AccessibilityManager implements IDisposable {

  private _onBoundaryFocus(e: FocusEvent, position: BoundaryPosition): void {
    const boundaryElement = <HTMLElement>e.target;
-    const beforeBoundaryElement = this._rowElements[position === BoundaryPosition.Top ? 1 : this._rowElements.length - 2];
+    const beforeBoundaryElement = this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2];

    // Don't scroll if the buffer top has reached the end in that direction
    const posInSet = boundaryElement.getAttribute('aria-posinset');
-    const lastRowPos = position === BoundaryPosition.Top ? '1' : `${this._terminal.buffer.lines.length}`;
+    const lastRowPos = position === BoundaryPosition.TOP ? '1' : `${this._terminal.buffer.lines.length}`;
    if (posInSet === lastRowPos) {
      return;
    }
@@ -119,7 +119,7 @@ export class AccessibilityManager implements IDisposable {
    // Remove old boundary element from array
    let topBoundaryElement: HTMLElement;
    let bottomBoundaryElement: HTMLElement;
-    if (position === BoundaryPosition.Top) {
+    if (position === BoundaryPosition.TOP) {
      topBoundaryElement = boundaryElement;
      bottomBoundaryElement = this._rowElements.pop()!;
      this._rowContainer.removeChild(bottomBoundaryElement);
@@ -134,7 +134,7 @@ export class AccessibilityManager implements IDisposable {
    bottomBoundaryElement.removeEventListener('focus', this._bottomBoundaryFocusListener);

    // Add new element to array/DOM
-    if (position === BoundaryPosition.Top) {
+    if (position === BoundaryPosition.TOP) {
      const newElement = this._createAccessibilityTreeNode();
      this._rowElements.unshift(newElement);
      this._rowContainer.insertAdjacentElement('afterbegin', newElement);
@@ -149,10 +149,10 @@ export class AccessibilityManager implements IDisposable {
    this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);

    // Scroll up
-    this._terminal.scrollLines(position === BoundaryPosition.Top ? -1 : 1);
+    this._terminal.scrollLines(position === BoundaryPosition.TOP ? -1 : 1);

    // Focus new boundary before element
-    this._rowElements[position === BoundaryPosition.Top ? 1 : this._rowElements.length - 2].focus();
+    this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2].focus();

    // Prevent the standard behavior
    e.preventDefault();
@@ -22,8 +22,7 @@ export const MAX_BUFFER_SIZE = 4294967295; // 2^32 - 1
 *   - scroll position
 */
 export class Buffer implements IBuffer {
-  private _lines: CircularList<LineData>;
-
+  public lines: CircularList<LineData>;
  public ydisp: number;
  public ybase: number;
  public y: number;
@@ -48,10 +47,6 @@ export class Buffer implements IBuffer {
    this.clear();
  }

-  public get lines(): CircularList<LineData> {
-    return this._lines;
-  }
-
  public get hasScrollback(): boolean {
    return this._hasScrollback && this.lines.maxLength > this._terminal.rows;
  }
@@ -81,7 +76,7 @@ export class Buffer implements IBuffer {
   * Fills the buffer's viewport with blank lines.
   */
  public fillViewportRows(): void {
-    if (this._lines.length === 0) {
+    if (this.lines.length === 0) {
      let i = this._terminal.rows;
      while (i--) {
        this.lines.push(this._terminal.blankLine());
@@ -97,7 +92,7 @@ export class Buffer implements IBuffer {
    this.ybase = 0;
    this.y = 0;
    this.x = 0;
-    this._lines = new CircularList<LineData>(this._getCorrectBufferLength(this._terminal.rows));
+    this.lines = new CircularList<LineData>(this._getCorrectBufferLength(this._terminal.rows));
    this.scrollTop = 0;
    this.scrollBottom = this._terminal.rows - 1;
    this.setupTabStops();
@@ -112,19 +107,19 @@ export class Buffer implements IBuffer {
    // Increase max length if needed before adjustments to allow space to fill
    // as required.
    const newMaxLength = this._getCorrectBufferLength(newRows);
-    if (newMaxLength > this._lines.maxLength) {
-      this._lines.maxLength = newMaxLength;
+    if (newMaxLength > this.lines.maxLength) {
+      this.lines.maxLength = newMaxLength;
    }

    // The following adjustments should only happen if the buffer has been
    // initialized/filled.
-    if (this._lines.length > 0) {
+    if (this.lines.length > 0) {
      // Deal with columns increasing (we don't do anything when columns reduce)
      if (this._terminal.cols < newCols) {
        const ch: CharData = [this._terminal.defAttr, ' ', 1, 32]; // does xterm use the default attr?
-        for (let i = 0; i < this._lines.length; i++) {
-          while (this._lines.get(i).length < newCols) {
-            this._lines.get(i).push(ch);
+        for (let i = 0; i < this.lines.length; i++) {
+          while (this.lines.get(i).length < newCols) {
+            this.lines.get(i).push(ch);
          }
        }
      }
@@ -133,8 +128,8 @@ export class Buffer implements IBuffer {
      let addToY = 0;
      if (this._terminal.rows < newRows) {
        for (let y = this._terminal.rows; y < newRows; y++) {
-          if (this._lines.length < newRows + this.ybase) {
-            if (this.ybase > 0 && this._lines.length <= this.ybase + this.y + addToY + 1) {
+          if (this.lines.length < newRows + this.ybase) {
+            if (this.ybase > 0 && this.lines.length <= this.ybase + this.y + addToY + 1) {
              // There is room above the buffer and there are no empty elements below the line,
              // scroll up
              this.ybase--;
@@ -146,16 +141,16 @@ export class Buffer implements IBuffer {
            } else {
              // Add a blank line if there is no buffer left at the top to scroll to, or if there
              // are blank lines after the cursor
-              this._lines.push(this._terminal.blankLine(undefined, undefined, newCols));
+              this.lines.push(this._terminal.blankLine(undefined, undefined, newCols));
            }
          }
        }
      } else { // (this._terminal.rows >= newRows)
        for (let y = this._terminal.rows; y > newRows; y--) {
-          if (this._lines.length > newRows + this.ybase) {
-            if (this._lines.length > this.ybase + this.y + 1) {
+          if (this.lines.length > newRows + this.ybase) {
+            if (this.lines.length > this.ybase + this.y + 1) {
              // The line is a blank line below the cursor, remove it
-              this._lines.pop();
+              this.lines.pop();
            } else {
              // The line is the cursor, scroll down
              this.ybase++;
@@ -167,15 +162,15 @@ export class Buffer implements IBuffer {

      // Reduce max length if needed after adjustments, this is done after as it
      // would otherwise cut data from the bottom of the buffer.
-      if (newMaxLength < this._lines.maxLength) {
+      if (newMaxLength < this.lines.maxLength) {
        // Trim from the top of the buffer and adjust ybase and ydisp.
-        const amountToTrim = this._lines.length - newMaxLength;
+        const amountToTrim = this.lines.length - newMaxLength;
        if (amountToTrim > 0) {
-          this._lines.trimStart(amountToTrim);
+          this.lines.trimStart(amountToTrim);
          this.ybase = Math.max(this.ybase - amountToTrim, 0);
          this.ydisp = Math.max(this.ydisp - amountToTrim, 0);
        }
-        this._lines.maxLength = newMaxLength;
+        this.lines.maxLength = newMaxLength;
      }

      // Make sure that the cursor stays on screen
@@ -310,7 +305,7 @@ export class Buffer implements IBuffer {
  public addMarker(y: number): Marker {
    const marker = new Marker(y);
    this.markers.push(marker);
-    marker.disposables.push(this._lines.addDisposableListener('trim', amount => {
+    marker.disposables.push(this.lines.addDisposableListener('trim', amount => {
      marker.line -= amount;
      // The marker should be disposed when the line is trimmed from the buffer
      if (marker.line < 0) {
@@ -92,11 +92,10 @@ export class CompositionHelper {
      } else if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
        // Continue composing if the keyCode is a modifier key
        return false;
-      } else {
-        // Finish composition immediately. This is mainly here for the case where enter is
-        // pressed and the handler needs to be triggered before the command is executed.
-        this._finalizeComposition(false);
      }
+      // Finish composition immediately. This is mainly here for the case where enter is
+      // pressed and the handler needs to be triggered before the command is executed.
+      this._finalizeComposition(false);
    }

    if (ev.keyCode === 229) {
@@ -6,7 +6,7 @@
 import { XtermListener } from './Types';
 import { IEventEmitter, IDisposable } from 'xterm';

-export class EventEmitter implements IEventEmitter {
+export class EventEmitter implements IEventEmitter, IDisposable {
  private _events: {[type: string]: XtermListener[]};

  constructor() {
@@ -75,7 +75,7 @@ export class EventEmitter implements IEventEmitter {
    return this._events[type] || [];
  }

-  protected destroy(): void {
+  public dispose(): void {
    this._events = {};
  }
 }
@@ -23,6 +23,10 @@ export class InputHandler implements IInputHandler {

  public addChar(char: string, code: number): void {
    if (char >= ' ') {
+
+      // make buffer local for faster access
+      const buffer = this._terminal.buffer;
+
      // calculate print space
      // expensive call, therefore we save width in line buffer
      const chWidth = wcwidth(code);
@@ -35,42 +39,42 @@ export class InputHandler implements IInputHandler {
        this._terminal.emit('a11y.char', char);
      }

-      let row = this._terminal.buffer.y + this._terminal.buffer.ybase;
+      let row = buffer.y + buffer.ybase;

      // insert combining char in last cell
      // FIXME: needs handling after cursor jumps
-      if (!chWidth && this._terminal.buffer.x) {
+      if (!chWidth && buffer.x) {
        // dont overflow left
-        if (this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 1]) {
-          if (!this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 1][CHAR_DATA_WIDTH_INDEX]) {
+        if (buffer.lines.get(row)[buffer.x - 1]) {
+          if (!buffer.lines.get(row)[buffer.x - 1][CHAR_DATA_WIDTH_INDEX]) {
            // found empty cell after fullwidth, need to go 2 cells back
-            if (this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 2]) {
-              this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 2][CHAR_DATA_CHAR_INDEX] += char;
-              this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 2][3] = char.charCodeAt(0);
+            if (buffer.lines.get(row)[buffer.x - 2]) {
+              buffer.lines.get(row)[buffer.x - 2][CHAR_DATA_CHAR_INDEX] += char;
+              buffer.lines.get(row)[buffer.x - 2][3] = char.charCodeAt(0);
            }
          } else {
-            this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 1][CHAR_DATA_CHAR_INDEX] += char;
-            this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 1][3] = char.charCodeAt(0);
+            buffer.lines.get(row)[buffer.x - 1][CHAR_DATA_CHAR_INDEX] += char;
+            buffer.lines.get(row)[buffer.x - 1][3] = char.charCodeAt(0);
          }
-          this._terminal.updateRange(this._terminal.buffer.y);
+          this._terminal.updateRange(buffer.y);
        }
        return;
      }

      // goto next line if ch would overflow
      // TODO: needs a global min terminal width of 2
-      if (this._terminal.buffer.x + chWidth - 1 >= this._terminal.cols) {
+      if (buffer.x + chWidth - 1 >= this._terminal.cols) {
        // autowrap - DECAWM
        if (this._terminal.wraparoundMode) {
-          this._terminal.buffer.x = 0;
-          this._terminal.buffer.y++;
-          if (this._terminal.buffer.y > this._terminal.buffer.scrollBottom) {
-            this._terminal.buffer.y--;
+          buffer.x = 0;
+          buffer.y++;
+          if (buffer.y > buffer.scrollBottom) {
+            buffer.y--;
            this._terminal.scroll(true);
          } else {
            // The line already exists (eg. the initial viewport), mark it as a
            // wrapped line
-            (<any>this._terminal.buffer.lines.get(this._terminal.buffer.y)).isWrapped = true;
+            (<any>buffer.lines.get(buffer.y)).isWrapped = true;
          }
        } else {
          if (chWidth === 2) { // FIXME: check for xterm behavior
@@ -78,7 +82,7 @@ export class InputHandler implements IInputHandler {
          }
        }
      }
-      row = this._terminal.buffer.y + this._terminal.buffer.ybase;
+      row = buffer.y + buffer.ybase;

      // insert mode: move characters to right
      if (this._terminal.insertMode) {
@@ -86,26 +90,26 @@ export class InputHandler implements IInputHandler {
        for (let moves = 0; moves < chWidth; ++moves) {
          // remove last cell, if it's width is 0
          // we have to adjust the second last cell as well
-          const removed = this._terminal.buffer.lines.get(this._terminal.buffer.y + this._terminal.buffer.ybase).pop();
+          const removed = buffer.lines.get(buffer.y + buffer.ybase).pop();
          if (removed[CHAR_DATA_WIDTH_INDEX] === 0
-              && this._terminal.buffer.lines.get(row)[this._terminal.cols - 2]
-              && this._terminal.buffer.lines.get(row)[this._terminal.cols - 2][CHAR_DATA_WIDTH_INDEX] === 2) {
-            this._terminal.buffer.lines.get(row)[this._terminal.cols - 2] = [this._terminal.curAttr, ' ', 1, ' '.charCodeAt(0)];
+              && buffer.lines.get(row)[this._terminal.cols - 2]
+              && buffer.lines.get(row)[this._terminal.cols - 2][CHAR_DATA_WIDTH_INDEX] === 2) {
+            buffer.lines.get(row)[this._terminal.cols - 2] = [this._terminal.curAttr, ' ', 1, ' '.charCodeAt(0)];
          }

          // insert empty cell at cursor
-          this._terminal.buffer.lines.get(row).splice(this._terminal.buffer.x, 0, [this._terminal.curAttr, ' ', 1, ' '.charCodeAt(0)]);
+          buffer.lines.get(row).splice(buffer.x, 0, [this._terminal.curAttr, ' ', 1, ' '.charCodeAt(0)]);
        }
      }

-      this._terminal.buffer.lines.get(row)[this._terminal.buffer.x] = [this._terminal.curAttr, char, chWidth, char.charCodeAt(0)];
-      this._terminal.buffer.x++;
-      this._terminal.updateRange(this._terminal.buffer.y);
+      buffer.lines.get(row)[buffer.x] = [this._terminal.curAttr, char, chWidth, char.charCodeAt(0)];
+      buffer.x++;
+      this._terminal.updateRange(buffer.y);

      // fullwidth char - set next cell width to zero and advance cursor
      if (chWidth === 2) {
-        this._terminal.buffer.lines.get(row)[this._terminal.buffer.x] = [this._terminal.curAttr, '', 0, undefined];
-        this._terminal.buffer.x++;
+        buffer.lines.get(row)[buffer.x] = [this._terminal.curAttr, '', 0, undefined];
+        buffer.x++;
      }
    }
  }
@@ -123,17 +127,20 @@ export class InputHandler implements IInputHandler {
   * Line Feed or New Line (NL).  (LF  is Ctrl-J).
   */
  public lineFeed(): void {
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
    if (this._terminal.convertEol) {
-      this._terminal.buffer.x = 0;
+      buffer.x = 0;
    }
-    this._terminal.buffer.y++;
-    if (this._terminal.buffer.y > this._terminal.buffer.scrollBottom) {
-      this._terminal.buffer.y--;
+    buffer.y++;
+    if (buffer.y > buffer.scrollBottom) {
+      buffer.y--;
      this._terminal.scroll();
    }
    // If the end of the line is hit, prevent this action from wrapping around to the next line.
-    if (this._terminal.buffer.x >= this._terminal.cols) {
-      this._terminal.buffer.x--;
+    if (buffer.x >= this._terminal.cols) {
+      buffer.x--;
    }
    /**
     * This event is emitted whenever the terminal outputs a LF or NL.
@@ -199,13 +206,16 @@ export class InputHandler implements IInputHandler {
    let param = params[0];
    if (param < 1) param = 1;

-    const row = this._terminal.buffer.y + this._terminal.buffer.ybase;
-    let j = this._terminal.buffer.x;
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
+    const row = buffer.y + buffer.ybase;
+    let j = buffer.x;
    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1, 32]; // xterm

    while (param-- && j < this._terminal.cols) {
-      this._terminal.buffer.lines.get(row).splice(j++, 0, ch);
-      this._terminal.buffer.lines.get(row).pop();
+      buffer.lines.get(row).splice(j++, 0, ch);
+      buffer.lines.get(row).pop();
    }
  }

@@ -447,20 +457,24 @@ export class InputHandler implements IInputHandler {
    if (param < 1) {
      param = 1;
    }
-    let row: number = this._terminal.buffer.y + this._terminal.buffer.ybase;

-    let scrollBottomRowsOffset = this._terminal.rows - 1 - this._terminal.buffer.scrollBottom;
-    let scrollBottomAbsolute = this._terminal.rows - 1 + this._terminal.buffer.ybase - scrollBottomRowsOffset + 1;
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
+    let row: number = buffer.y + buffer.ybase;
+
+    let scrollBottomRowsOffset = this._terminal.rows - 1 - buffer.scrollBottom;
+    let scrollBottomAbsolute = this._terminal.rows - 1 + buffer.ybase - scrollBottomRowsOffset + 1;
    while (param--) {
      // test: echo -e '\e[44m\e[1L\e[0m'
      // blankLine(true) - xterm/linux behavior
-      this._terminal.buffer.lines.splice(scrollBottomAbsolute - 1, 1);
-      this._terminal.buffer.lines.splice(row, 0, this._terminal.blankLine(true));
+      buffer.lines.splice(scrollBottomAbsolute - 1, 1);
+      buffer.lines.splice(row, 0, this._terminal.blankLine(true));
    }

    // this.maxRange();
-    this._terminal.updateRange(this._terminal.buffer.y);
-    this._terminal.updateRange(this._terminal.buffer.scrollBottom);
+    this._terminal.updateRange(buffer.y);
+    this._terminal.updateRange(buffer.scrollBottom);
  }

  /**
@@ -472,21 +486,25 @@ export class InputHandler implements IInputHandler {
    if (param < 1) {
      param = 1;
    }
-    const row: number = this._terminal.buffer.y + this._terminal.buffer.ybase;
+
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
+    const row: number = buffer.y + buffer.ybase;

    let j: number;
-    j = this._terminal.rows - 1 - this._terminal.buffer.scrollBottom;
-    j = this._terminal.rows - 1 + this._terminal.buffer.ybase - j;
+    j = this._terminal.rows - 1 - buffer.scrollBottom;
+    j = this._terminal.rows - 1 + buffer.ybase - j;
    while (param--) {
      // test: echo -e '\e[44m\e[1M\e[0m'
      // blankLine(true) - xterm/linux behavior
-      this._terminal.buffer.lines.splice(row, 1);
-      this._terminal.buffer.lines.splice(j, 0, this._terminal.blankLine(true));
+      buffer.lines.splice(row, 1);
+      buffer.lines.splice(j, 0, this._terminal.blankLine(true));
    }

    // this.maxRange();
-    this._terminal.updateRange(this._terminal.buffer.y);
-    this._terminal.updateRange(this._terminal.buffer.scrollBottom);
+    this._terminal.updateRange(buffer.y);
+    this._terminal.updateRange(buffer.scrollBottom);
  }

  /**
@@ -499,14 +517,17 @@ export class InputHandler implements IInputHandler {
      param = 1;
    }

-    const row = this._terminal.buffer.y + this._terminal.buffer.ybase;
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
+    const row = buffer.y + buffer.ybase;
    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1, 32]; // xterm

    while (param--) {
-      this._terminal.buffer.lines.get(row).splice(this._terminal.buffer.x, 1);
-      this._terminal.buffer.lines.get(row).push(ch);
+      buffer.lines.get(row).splice(buffer.x, 1);
+      buffer.lines.get(row).push(ch);
    }
-    this._terminal.updateRange(this._terminal.buffer.y);
+    this._terminal.updateRange(buffer.y);
  }

  /**
@@ -514,13 +535,17 @@ export class InputHandler implements IInputHandler {
   */
  public scrollUp(params: number[]): void {
    let param = params[0] || 1;
+
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
    while (param--) {
-      this._terminal.buffer.lines.splice(this._terminal.buffer.ybase + this._terminal.buffer.scrollTop, 1);
-      this._terminal.buffer.lines.splice(this._terminal.buffer.ybase + this._terminal.buffer.scrollBottom, 0, this._terminal.blankLine());
+      buffer.lines.splice(buffer.ybase + buffer.scrollTop, 1);
+      buffer.lines.splice(buffer.ybase + buffer.scrollBottom, 0, this._terminal.blankLine());
    }
    // this.maxRange();
-    this._terminal.updateRange(this._terminal.buffer.scrollTop);
-    this._terminal.updateRange(this._terminal.buffer.scrollBottom);
+    this._terminal.updateRange(buffer.scrollTop);
+    this._terminal.updateRange(buffer.scrollBottom);
  }

  /**
@@ -528,13 +553,17 @@ export class InputHandler implements IInputHandler {
   */
  public scrollDown(params: number[]): void {
    let param = params[0] || 1;
+
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
    while (param--) {
-      this._terminal.buffer.lines.splice(this._terminal.buffer.ybase + this._terminal.buffer.scrollBottom, 1);
-      this._terminal.buffer.lines.splice(this._terminal.buffer.ybase + this._terminal.buffer.scrollTop, 0, this._terminal.blankLine());
+      buffer.lines.splice(buffer.ybase + buffer.scrollBottom, 1);
+      buffer.lines.splice(buffer.ybase + buffer.scrollTop, 0, this._terminal.blankLine());
    }
    // this.maxRange();
-    this._terminal.updateRange(this._terminal.buffer.scrollTop);
-    this._terminal.updateRange(this._terminal.buffer.scrollBottom);
+    this._terminal.updateRange(buffer.scrollTop);
+    this._terminal.updateRange(buffer.scrollBottom);
  }

  /**
@@ -547,12 +576,15 @@ export class InputHandler implements IInputHandler {
      param = 1;
    }

-    const row = this._terminal.buffer.y + this._terminal.buffer.ybase;
-    let j = this._terminal.buffer.x;
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
+    const row = buffer.y + buffer.ybase;
+    let j = buffer.x;
    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1, 32]; // xterm

    while (param-- && j < this._terminal.cols) {
-      this._terminal.buffer.lines.get(row)[j++] = ch;
+      buffer.lines.get(row)[j++] = ch;
    }
  }

@@ -561,8 +593,12 @@ export class InputHandler implements IInputHandler {
   */
  public cursorBackwardTab(params: number[]): void {
    let param = params[0] || 1;
+
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
    while (param--) {
-      this._terminal.buffer.x = this._terminal.buffer.prevStop();
+      buffer.x = buffer.prevStop();
    }
  }

@@ -602,11 +638,15 @@ export class InputHandler implements IInputHandler {
   */
  public repeatPrecedingCharacter(params: number[]): void {
    let param = params[0] || 1;
-    const line = this._terminal.buffer.lines.get(this._terminal.buffer.ybase + this._terminal.buffer.y);
-    const ch = line[this._terminal.buffer.x - 1] || [this._terminal.defAttr, ' ', 1, 32];
+
+    // make buffer local for faster access
+    const buffer = this._terminal.buffer;
+
+    const line = buffer.lines.get(buffer.ybase + buffer.y);
+    const ch = line[buffer.x - 1] || [this._terminal.defAttr, ' ', 1, 32];

    while (param--) {
-      line[this._terminal.buffer.x++] = ch;
+      line[buffer.x++] = ch;
    }
  }

@@ -1223,6 +1263,9 @@ export class InputHandler implements IInputHandler {
      } else if (p === 1) {
        // bold text
        flags |= FLAGS.BOLD;
+      } else if (p === 3) {
+        // italic text
+        flags |= FLAGS.ITALIC;
      } else if (p === 4) {
        // underlined text
        flags |= FLAGS.UNDERLINE;
@@ -40,7 +40,7 @@ describe('Linkifier', () => {
    terminal = new MockTerminal();
    terminal.cols = 100;
    terminal.buffer = new MockBuffer();
-    terminal.buffer.lines = new CircularList<LineData>(20);
+    (<MockBuffer>terminal.buffer).setLines(new CircularList<LineData>(20));
    terminal.buffer.ydisp = 0;
    linkifier = new TestLinkifier(terminal);
    mouseZoneManager = new TestMouseZoneManager();
@@ -150,7 +150,7 @@ csiStateHandler['s'] = (handler, params) => handler.saveCursor(params);
 csiStateHandler['u'] = (handler, params) => handler.restoreCursor(params);
 csiStateHandler[C0.CAN] = (handler, params, prefix, postfix, parser) => parser.setState(ParserState.NORMAL);

-export enum ParserState {
+export const enum ParserState {
  NORMAL = 0,
  ESCAPED = 1,
  CSI_PARAM = 2,
@@ -54,7 +54,7 @@ interface IWordPosition {
 /**
 * A selection mode, this drives how the selection behaves on mouse move.
 */
-enum SelectionMode {
+const enum SelectionMode {
  NORMAL,
  WORD,
  LINE
@@ -38,6 +38,7 @@ import { Linkifier } from './Linkifier';
 import { SelectionManager } from './SelectionManager';
 import { CharMeasure } from './utils/CharMeasure';
 import * as Browser from './shared/utils/Browser';
+import * as Dom from './utils/Dom';
 import * as Strings from './Strings';
 import { MouseHelper } from './utils/MouseHelper';
 import { clone } from './utils/Clone';
@@ -46,7 +47,8 @@ import { DEFAULT_ANSI_COLORS } from './renderer/ColorManager';
 import { MouseZoneManager } from './input/MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
 import { ScreenDprMonitor } from './utils/ScreenDprMonitor';
-import { ITheme, ILocalizableStrings, IMarker } from 'xterm';
+import { ITheme, ILocalizableStrings, IMarker, IDisposable } from 'xterm';
+import { removeTerminalFromCache } from './renderer/atlas/CharAtlasCache';

 // reg + shift key mappings for digits and special chars
 const KEYCODE_KEY_MAPPINGS = {
@@ -101,7 +103,9 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
  cursorStyle: 'block',
  bellSound: DEFAULT_BELL_SOUND,
  bellStyle: 'none',
+  drawBoldTextInBrightColors: true,
  enableBold: true,
+  experimentalCharAtlas: 'static',
  fontFamily: 'courier-new, courier, monospace',
  fontSize: 15,
  fontWeight: 'normal',
@@ -120,15 +124,15 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
  tabStopWidth: 8,
  theme: null,
  rightClickSelectsWord: Browser.isMac
-  // programFeatures: false,
-  // focusKeys: false,
 };

-export class Terminal extends EventEmitter implements ITerminal, IInputHandlingTerminal {
+export class Terminal extends EventEmitter implements ITerminal, IDisposable, IInputHandlingTerminal {
  public textarea: HTMLTextAreaElement;
  public element: HTMLElement;
  public screenElement: HTMLElement;

+  private _disposables: IDisposable[];
+
  /**
   * The HTMLElement that the terminal is created in, set by Terminal.open.
   */
@@ -250,7 +254,28 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    this._setup();
  }

+  public dispose(): void {
+    super.dispose();
+    this._disposables.forEach(d => d.dispose());
+    this._disposables.length = 0;
+    removeTerminalFromCache(this);
+    this.handler = () => {};
+    this.write = () => {};
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+
+  /**
+   * @deprecated Use dispose instead.
+   */
+  public destroy(): void {
+    this.dispose();
+  }
+
  private _setup(): void {
+    this._disposables = [];
+
    Object.keys(DEFAULT_OPTIONS).forEach((key) => {
      if (this.options[key] == null) {
        this.options[key] = DEFAULT_OPTIONS[key];
@@ -449,21 +474,28 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
      case 'fontFamily':
      case 'fontSize':
        // When the font changes the size of the cells may change which requires a renderer clear
-        this.renderer.clear();
-        this.charMeasure.measure(this.options);
+        if (this.renderer) {
+          this.renderer.clear();
+          this.charMeasure.measure(this.options);
+        }
        break;
+      case 'experimentalCharAtlas':
      case 'enableBold':
      case 'letterSpacing':
      case 'lineHeight':
      case 'fontWeight':
      case 'fontWeightBold':
        // When the font changes the size of the cells may change which requires a renderer clear
-        this.renderer.clear();
-        this.renderer.onResize(this.cols, this.rows);
-        this.refresh(0, this.rows - 1);
+        if (this.renderer) {
+          this.renderer.clear();
+          this.renderer.onResize(this.cols, this.rows);
+          this.refresh(0, this.rows - 1);
+        }
      case 'scrollback':
        this.buffers.resize(this.cols, this.rows);
-        this.viewport.syncScrollArea();
+        if (this.viewport) {
+          this.viewport.syncScrollArea();
+        }
        break;
      case 'screenReaderMode':
        if (value) {
@@ -686,7 +718,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    this.on('dprchange', () => this.renderer.onWindowResize(window.devicePixelRatio));
    // dprchange should handle this case, we need this as well for browsers that don't support the
    // matchMedia query.
-    window.addEventListener('resize', () => this.renderer.onWindowResize(window.devicePixelRatio));
+    this._disposables.push(Dom.addDisposableListener(window, 'resize', () => this.renderer.onWindowResize(window.devicePixelRatio)));
    this.charMeasure.on('charsizechanged', () => this.renderer.onResize(this.cols, this.rows));
    this.renderer.on('resize', (dimensions) => this.viewport.syncScrollArea());

@@ -1079,19 +1111,6 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    });
  }

-  /**
-   * Destroys the terminal.
-   */
-  public destroy(): void {
-    super.destroy();
-    this.handler = () => {};
-    this.write = () => {};
-    if (this.element && this.element.parentNode) {
-      this.element.parentNode.removeChild(this.element);
-    }
-    // this.emit('close');
-  }
-
  /**
   * Tells the renderer to refresh terminal content between two rows (inclusive) at the next
   * opportunity.
@@ -1927,7 +1946,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT

    if (x === this.cols && y === this.rows) {
      // Check if we still need to measure the char size (fixes #785).
-      if (!this.charMeasure.width || !this.charMeasure.height) {
+      if (this.charMeasure && (!this.charMeasure.width || !this.charMeasure.height)) {
        this.charMeasure.measure(this.options);
      }
      return;
@@ -17,7 +17,7 @@ export type LineData = CharData[];
 export type LinkMatcherHandler = (event: MouseEvent, uri: string) => void;
 export type LinkMatcherValidationCallback = (uri: string, callback: (isValid: boolean) => void) => void;

-export enum LinkHoverEventTypes {
+export const enum LinkHoverEventTypes {
  HOVER = 'linkhover',
  TOOLTIP = 'linktooltip',
  LEAVE = 'linkleave'
@@ -248,7 +248,7 @@ export interface ITerminalOptions extends IPublicTerminalOptions {
 }

 export interface IBuffer {
-  lines: ICircularList<LineData>;
+  readonly lines: ICircularList<LineData>;
  ydisp: number;
  ybase: number;
  y: number;
@@ -43,7 +43,7 @@ export function attach(term: Terminal, socket: WebSocket, bidirectional: boolean
  addonTerminal.__getMessage = function(ev: MessageEvent): void {
    let str;

-    if (typeof ev.data == 'object') {
+    if (typeof ev.data === 'object') {
      if (!myTextDecoder) {
        myTextDecoder = new TextDecoder();
      }
@@ -53,14 +53,14 @@ export function attach(term: Terminal, socket: WebSocket, bidirectional: boolean
      } else {
        let fileReader = new FileReader();

-        fileReader.addEventListener('load', function() {
+        fileReader.addEventListener('load', () => {
          str = myTextDecoder.decode(this.result);
          displayData(str);
        });
        fileReader.readAsArrayBuffer(ev.data);
      }
-    } else if (typeof ev.data == 'string') {
-      displayData(ev.data)
+    } else if (typeof ev.data === 'string') {
+      displayData(ev.data);
    } else {
      throw Error(`Cannot handle "${typeof ev.data}" websocket message.`);
    }
@@ -73,7 +73,7 @@ export function attach(term: Terminal, socket: WebSocket, bidirectional: boolean
  * @param str String decoded by FileReader.
  * @param data The data of the EventMessage.
  */
-  function displayData(str?: string, data?: string) {
+  function displayData(str?: string, data?: string): void {
    if (buffered) {
      addonTerminal.__pushToBuffer(str || data);
    } else {
@@ -38,11 +38,12 @@ import { Terminal } from 'xterm';

 let zmodem;

-export interface IZModemOptions {
+export interface IZmodemOptions {
  noTerminalWriteOutsideSession?: boolean;
 }

-export function zmodemAttach(term: Terminal, ws: WebSocket, opts: IZModemOptions = {}): void {
+function zmodemAttach(ws: WebSocket, opts: IZmodemOptions = {}): void {
+  const term = this;
  const senderFunc = (octets: ArrayLike<number>) => ws.send(new Uint8Array(octets));

  let zsentry;
@@ -85,8 +86,8 @@ export function zmodemAttach(term: Terminal, ws: WebSocket, opts: IZModemOptions
 }

 export function apply(terminalConstructor: typeof Terminal): void {
-  zmodem = (typeof window === 'object') ? (<any>window).ZModem : {Browser: null};  // Nullify browser for tests
+  zmodem = (typeof window === 'object') ? (<any>window).Zmodem : {Browser: null};  // Nullify browser for tests

-  (<any>terminalConstructor.prototype).zmodemAttach = zmodemAttach.bind(this, this);
+  (<any>terminalConstructor.prototype).zmodemAttach = zmodemAttach;
  (<any>terminalConstructor.prototype).zmodemBrowser = zmodem.Browser;
 }
@@ -6,11 +6,11 @@
 import { ITerminal, ICircularList, LineData } from '../Types';
 import { C0 } from '../EscapeSequences';

-enum Direction {
-  Up = 'A',
-  Down = 'B',
-  Right = 'C',
-  Left = 'D'
+const enum Direction {
+  UP = 'A',
+  DOWN = 'B',
+  RIGHT = 'C',
+  LEFT = 'D'
 }

 export class AltClickHandler {
@@ -28,7 +28,7 @@ export class AltClickHandler {
    this._startCol = this._terminal.buffer.x;
    this._startRow = this._terminal.buffer.y;

-    [this._endCol, this._endRow] = this._terminal.mouseHelper.getCoords(
+    let coordinates = this._terminal.mouseHelper.getCoords(
      this._mouseEvent,
      this._terminal.element,
      this._terminal.charMeasure,
@@ -36,16 +36,20 @@ export class AltClickHandler {
      this._terminal.cols,
      this._terminal.rows,
      false
-    ).map((coordinate: number) => {
-      return coordinate - 1;
-    });
+    );
+
+    if (coordinates) {
+      [this._endCol, this._endRow] = coordinates.map((coordinate: number) => {
+        return coordinate - 1;
+      });
+    }
  }

  /**
   * Writes the escape sequences of arrows to the terminal
   */
  public move(): void {
-    if (this._mouseEvent.altKey) {
+    if (this._mouseEvent.altKey && this._endCol !== undefined && this._endRow !== undefined) {
      this._terminal.send(this._arrowSequences());
    }
  }
@@ -73,12 +77,11 @@ export class AltClickHandler {
  private _resetStartingRow(): string {
    if (this._moveToRequestedRow().length === 0) {
      return '';
-    } else {
-      return repeat(this._bufferLine(
-        this._startCol, this._startRow, this._startCol,
-        this._startRow - this._wrappedRowsForRow(this._startRow), false
-      ).length, this._sequence(Direction.Left));
    }
+    return repeat(this._bufferLine(
+      this._startCol, this._startRow, this._startCol,
+      this._startRow - this._wrappedRowsForRow(this._startRow), false
+    ).length, this._sequence(Direction.LEFT));
  }

  /**
@@ -110,7 +113,7 @@ export class AltClickHandler {

    return repeat(this._bufferLine(
      this._startCol, startRow, this._endCol, endRow,
-      direction === Direction.Right
+      direction === Direction.RIGHT
    ).length, this._sequence(direction));
  }

@@ -133,7 +136,7 @@ export class AltClickHandler {
    let endRow = this._endRow - this._wrappedRowsForRow(this._endRow);

    for (let i = 0; i < Math.abs(startRow - endRow); i++) {
-      let direction = this._verticalDirection() === Direction.Up ? -1 : 1;
+      let direction = this._verticalDirection() === Direction.UP ? -1 : 1;

      if ((<any>this._lines.get(startRow + (direction * i))).isWrapped) {
        wrappedRows++;
@@ -179,10 +182,9 @@ export class AltClickHandler {
      startRow <= this._endRow) || // down/right or same y/right
      (this._startCol >= this._endCol &&
      startRow < this._endRow)) {  // down/left or same y/left
-      return Direction.Right;
-    } else {
-      return Direction.Left;
+      return Direction.RIGHT;
    }
+    return Direction.LEFT;
  }

  /**
@@ -190,10 +192,9 @@ export class AltClickHandler {
   */
  private _verticalDirection(): Direction {
    if (this._startRow > this._endRow) {
-      return Direction.Up;
-    } else {
-      return Direction.Down;
+      return Direction.UP;
    }
+    return Direction.DOWN;
  }

  /**
@@ -6,8 +6,8 @@
 import { IRenderLayer, IColorSet, IRenderDimensions } from './Types';
 import { CharData, ITerminal } from '../Types';
 import { DIM_OPACITY, INVERTED_DEFAULT_COLOR } from './atlas/Types';
-import { CHAR_ATLAS_CELL_SPACING } from '../shared/atlas/Types';
-import { acquireCharAtlas } from './atlas/CharAtlas';
+import BaseCharAtlas from './atlas/BaseCharAtlas';
+import { acquireCharAtlas } from './atlas/CharAtlasCache';
 import { CHAR_DATA_CHAR_INDEX } from '../Buffer';

 export abstract class BaseRenderLayer implements IRenderLayer {
@@ -20,7 +20,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
  private _scaledCharLeft: number = 0;
  private _scaledCharTop: number = 0;

-  private _charAtlas: HTMLCanvasElement | ImageBitmap;
+  protected _charAtlas: BaseCharAtlas;

  constructor(
    private _container: HTMLElement,
@@ -83,13 +83,8 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
      return;
    }
-    this._charAtlas = null;
-    const result = acquireCharAtlas(terminal, colorSet, this._scaledCharWidth, this._scaledCharHeight);
-    if (result instanceof HTMLCanvasElement) {
-      this._charAtlas = result;
-    } else {
-      result.then(bitmap => this._charAtlas = bitmap);
-    }
+    this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCharWidth, this._scaledCharHeight);
+    this._charAtlas.warmUp();
  }

  public resize(terminal: ITerminal, dim: IRenderDimensions): void {
@@ -219,7 +214,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   * @param color The color of the character.
   */
  protected fillCharTrueColor(terminal: ITerminal, charData: CharData, x: number, y: number): void {
-    this._ctx.font = this._getFont(terminal, false);
+    this._ctx.font = this._getFont(terminal, false, false);
    this._ctx.textBaseline = 'top';
    this._clipRow(terminal, y);
    this._ctx.fillText(
@@ -242,56 +237,19 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   * This is used to validate whether a cached image can be used.
   * @param bold Whether the text is bold.
   */
-  protected drawChar(terminal: ITerminal, char: string, code: number, width: number, x: number, y: number, fg: number, bg: number, bold: boolean, dim: boolean): void {
-    let colorIndex = 0;
-    if (fg < 256) {
-      colorIndex = fg + 2;
-    } else {
-      // If default color and bold
-      if (bold && terminal.options.enableBold) {
-        colorIndex = 1;
-      }
+  protected drawChar(terminal: ITerminal, char: string, code: number, width: number, x: number, y: number, fg: number, bg: number, bold: boolean, dim: boolean, italic: boolean): void {
+    const drawInBrightColor = terminal.options.drawBoldTextInBrightColors && bold && fg < 8;
+    fg += drawInBrightColor ? 8 : 0;
+    const atlasDidDraw = this._charAtlas && this._charAtlas.draw(
+      this._ctx,
+      {char, code, bg, fg, bold: bold && terminal.options.enableBold, dim, italic},
+      x * this._scaledCellWidth + this._scaledCharLeft,
+      y * this._scaledCellHeight + this._scaledCharTop
+    );
+
+    if (!atlasDidDraw) {
+      this._drawUncachedChar(terminal, char, width, fg, x, y, bold && terminal.options.enableBold, dim, italic);
    }
-    const isAscii = code < 256;
-    // A color is basic if it is one of the standard normal or bold weight
-    // colors of the characters held in the char atlas. Note that this excludes
-    // the normal weight _light_ color characters.
-    const isBasicColor = (colorIndex > 1 && fg < 16) && (fg < 8 || bold);
-    const isDefaultColor = fg >= 256;
-    const isDefaultBackground = bg >= 256;
-    if (this._charAtlas && isAscii && (isBasicColor || isDefaultColor) && isDefaultBackground) {
-      // ImageBitmap's draw about twice as fast as from a canvas
-      const charAtlasCellWidth = this._scaledCharWidth + CHAR_ATLAS_CELL_SPACING;
-      const charAtlasCellHeight = this._scaledCharHeight + CHAR_ATLAS_CELL_SPACING;
-
-      // Apply alpha to dim the character
-      if (dim) {
-        this._ctx.globalAlpha = DIM_OPACITY;
-      }
-
-      // Draw the non-bold version of the same color if bold is not enabled
-      if (bold && !terminal.options.enableBold) {
-        // Ignore default color as it's not touched above
-        if (colorIndex > 1) {
-          colorIndex -= 8;
-        }
-      }
-
-      this._ctx.drawImage(this._charAtlas,
-          code * charAtlasCellWidth,
-          colorIndex * charAtlasCellHeight,
-          charAtlasCellWidth,
-          this._scaledCharHeight,
-          x * this._scaledCellWidth + this._scaledCharLeft,
-          y * this._scaledCellHeight + this._scaledCharTop,
-          charAtlasCellWidth,
-          this._scaledCharHeight);
-    } else {
-      this._drawUncachedChar(terminal, char, width, fg, x, y, bold && terminal.options.enableBold, dim);
-    }
-    // This draws the atlas (for debugging purposes)
-    // this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-    // this._ctx.drawImage(this._charAtlas, 0, 0);
  }

  /**
@@ -305,9 +263,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   * @param x The column to draw at.
   * @param y The row to draw at.
   */
-  private _drawUncachedChar(terminal: ITerminal, char: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean): void {
+  private _drawUncachedChar(terminal: ITerminal, char: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean, italic: boolean): void {
    this._ctx.save();
-    this._ctx.font = this._getFont(terminal, bold);
+    this._ctx.font = this._getFont(terminal, bold, italic);
    this._ctx.textBaseline = 'top';

    if (fg === INVERTED_DEFAULT_COLOR) {
@@ -353,10 +311,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   * @param terminal The terminal.
   * @param isBold If we should use the bold fontWeight.
   */
-  protected _getFont(terminal: ITerminal, isBold: boolean): string {
+  protected _getFont(terminal: ITerminal, isBold: boolean, isItalic: boolean): string {
    const fontWeight = isBold ? terminal.options.fontWeightBold : terminal.options.fontWeight;
+    const fontStyle = isItalic ? 'italic' : '';

-    return `${fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
+    return `${fontStyle} ${fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
  }
 }

@@ -150,6 +150,7 @@ export class Renderer extends EventEmitter implements IRenderer {
  }

  public onOptionsChanged(): void {
+    this.colorManager.allowTransparency = this._terminal.options.allowTransparency;
    this._runOperation(l => l.onOptionsChanged(this._terminal));
  }

@@ -32,7 +32,7 @@ export class TextRenderLayer extends BaseRenderLayer {
    super.resize(terminal, dim);

    // Clear the character width cache if the font or width has changed
-    const terminalFont = this._getFont(terminal, false);
+    const terminalFont = this._getFont(terminal, false, false);
    if (this._characterWidth !== dim.scaledCharWidth || this._characterFont !== terminalFont) {
      this._characterWidth = dim.scaledCharWidth;
      this._characterFont = terminalFont;
@@ -48,21 +48,24 @@ export class TextRenderLayer extends BaseRenderLayer {
    this.clearAll();
  }

-  public onGridChanged(terminal: ITerminal, startRow: number, endRow: number): void {
-    // Resize has not been called yet
-    if (this._state.cache.length === 0) {
-      return;
-    }
-
-    for (let y = startRow; y <= endRow; y++) {
+  private _forEachCell(
+    terminal: ITerminal,
+    firstRow: number,
+    lastRow: number,
+    callback: (
+      code: number,
+      char: string,
+      width: number,
+      x: number,
+      y: number,
+      fg: number,
+      bg: number,
+      flags: number
+    ) => void
+  ): void {
+    for (let y = firstRow; y <= lastRow; y++) {
      const row = y + terminal.buffer.ydisp;
      const line = terminal.buffer.lines.get(row);
-
-      this.clearCells(0, y, terminal.cols, 1);
-      // for (let x = 0; x < terminal.cols; x++) {
-      //   this._state.cache[x][y] = null;
-      // }
-
      for (let x = 0; x < terminal.cols; x++) {
        const charData = line[x];
        const code: number = <number>charData[CHAR_DATA_CODE_INDEX];
@@ -73,51 +76,12 @@ export class TextRenderLayer extends BaseRenderLayer {
        // The character to the left is a wide character, drawing is owned by
        // the char at x-1
        if (width === 0) {
-          // this._state.cache[x][y] = null;
-          continue;
-        }
-
-        // If the character is a space and the character to the left is an
-        // overlapping character, skip the character and allow the overlapping
-        // char to take full control over this character's cell.
-        if (code === 32 /*' '*/) {
-          if (x > 0) {
-            const previousChar: CharData = line[x - 1];
-            if (this._isOverlapping(previousChar)) {
-              continue;
-            }
-          }
-        }
-
-        // Skip rendering if the character is identical
-        // const state = this._state.cache[x][y];
-        // if (state && state[CHAR_DATA_CHAR_INDEX] === char && state[CHAR_DATA_ATTR_INDEX] === attr) {
-        //   // Skip render, contents are identical
-        //   this._state.cache[x][y] = charData;
-        //   continue;
-        // }
-
-        // Clear the old character was not a space with the default background
-        // const wasInverted = !!(state && state[CHAR_DATA_ATTR_INDEX] && state[CHAR_DATA_ATTR_INDEX] >> 18 & FLAGS.INVERSE);
-        // if (state && !(state[CHAR_DATA_CODE_INDEX] === 32 /*' '*/ && (state[CHAR_DATA_ATTR_INDEX] & 0x1ff) >= 256 && !wasInverted)) {
-        //   this._clearChar(x, y);
-        // }
-        // this._state.cache[x][y] = charData;
-
-        const flags = attr >> 18;
-        let bg = attr & 0x1ff;
-
-        // Skip rendering if the character is invisible
-        const isDefaultBackground = bg >= 256;
-        const isInvisible = flags & FLAGS.INVISIBLE;
-        const isInverted = flags & FLAGS.INVERSE;
-        if (!code || (code === 32 /*' '*/ && isDefaultBackground && !isInverted) || isInvisible) {
          continue;
        }

        // If the character is an overlapping char and the character to the right is a
        // space, take ownership of the cell to the right.
-        if (width !== 0 && this._isOverlapping(charData)) {
+        if (this._isOverlapping(charData)) {
          // If the character is overlapping, we want to force a re-render on every
          // frame. This is specifically to work around the case where two
          // overlaping chars `a` and `b` are adjacent, the cursor is moved to b and a
@@ -135,10 +99,12 @@ export class TextRenderLayer extends BaseRenderLayer {
          }
        }

+        const flags = attr >> 18;
+        let bg = attr & 0x1ff;
        let fg = (attr >> 9) & 0x1ff;

        // If inverse flag is on, the foreground should become the background.
-        if (isInverted) {
+        if (flags & FLAGS.INVERSE) {
          const temp = bg;
          bg = fg;
          fg = temp;
@@ -150,47 +116,105 @@ export class TextRenderLayer extends BaseRenderLayer {
          }
        }

-        // Clear the cell next to this character if it's wide
-        if (width === 2) {
-          // this.clearCells(x + 1, y, 1, 1);
-        }
-
-        // Draw background
-        if (bg < 256) {
-          this._ctx.save();
-          this._ctx.fillStyle = (bg === INVERTED_DEFAULT_COLOR ? this._colors.foreground.css : this._colors.ansi[bg].css);
-          this.fillCells(x, y, width, 1);
-          this._ctx.restore();
-        }
-
-        this._ctx.save();
-        if (flags & FLAGS.BOLD) {
-          this._ctx.font = this._getFont(terminal, true);
-          // Convert the FG color to the bold variant
-          if (fg < 8) {
-            fg += 8;
-          }
-        }
-
-        if (flags & FLAGS.UNDERLINE) {
-          if (fg === INVERTED_DEFAULT_COLOR) {
-            this._ctx.fillStyle = this._colors.background.css;
-          } else if (fg < 256) {
-            // 256 color support
-            this._ctx.fillStyle = this._colors.ansi[fg].css;
-          } else {
-            this._ctx.fillStyle = this._colors.foreground.css;
-          }
-          this.fillBottomLineAtCells(x, y);
-        }
-
-        this.drawChar(terminal, char, code, width, x, y, fg, bg, !!(flags & FLAGS.BOLD), !!(flags & FLAGS.DIM));
-
-        this._ctx.restore();
+        callback(code, char, width, x, y, fg, bg, flags);
      }
    }
  }

+  /**
+   * Draws the background for a specified range of columns. Tries to batch adjacent cells of the
+   * same color together to reduce draw calls.
+   */
+  private _drawBackground(terminal: ITerminal, firstRow: number, lastRow: number): void {
+    const ctx = this._ctx;
+    const cols = terminal.cols;
+    let startX: number = 0;
+    let startY: number = 0;
+    let prevFillStyle: string | null = null;
+
+    ctx.save();
+
+    this._forEachCell(terminal, firstRow, lastRow, (code, char, width, x, y, fg, bg, flags) => {
+      // libvte and xterm both draw the background (but not foreground) of invisible characters,
+      // so we should too.
+      let nextFillStyle = null; // null represents default background color
+      if (bg === INVERTED_DEFAULT_COLOR) {
+        nextFillStyle = this._colors.foreground.css;
+      } else if (bg < 256) {
+        nextFillStyle = this._colors.ansi[bg].css;
+      }
+
+      if (prevFillStyle === null) {
+        // This is either the first iteration, or the default background was set. Either way, we
+        // don't need to draw anything.
+        startX = x;
+        startY = y;
+      } if (y !== startY) {
+        // our row changed, draw the previous row
+        ctx.fillStyle = prevFillStyle;
+        this.fillCells(startX, startY, cols - startX, 1);
+        startX = x;
+        startY = y;
+      } else if (prevFillStyle !== nextFillStyle) {
+        // our color changed, draw the previous characters in this row
+        ctx.fillStyle = prevFillStyle;
+        this.fillCells(startX, startY, x - startX, 1);
+        startX = x;
+        startY = y;
+      }
+
+      prevFillStyle = nextFillStyle;
+    });
+
+    // flush the last color we encountered
+    if (prevFillStyle !== null) {
+      ctx.fillStyle = prevFillStyle;
+      this.fillCells(startX, startY, cols - startX, 1);
+    }
+
+    ctx.restore();
+  }
+
+  private _drawForeground(terminal: ITerminal, firstRow: number, lastRow: number): void {
+    this._forEachCell(terminal, firstRow, lastRow, (code, char, width, x, y, fg, bg, flags) => {
+      if (flags & FLAGS.INVISIBLE) {
+        return;
+      }
+      if (flags & FLAGS.UNDERLINE) {
+        this._ctx.save();
+        if (fg === INVERTED_DEFAULT_COLOR) {
+          this._ctx.fillStyle = this._colors.background.css;
+        } else if (fg < 256) {
+          // 256 color support
+          this._ctx.fillStyle = this._colors.ansi[fg].css;
+        } else {
+          this._ctx.fillStyle = this._colors.foreground.css;
+        }
+        this.fillBottomLineAtCells(x, y);
+        this._ctx.restore();
+      }
+      this.drawChar(
+        terminal, char, code,
+        width, x, y,
+        fg, bg,
+        !!(flags & FLAGS.BOLD), !!(flags & FLAGS.DIM), !!(flags & FLAGS.ITALIC)
+      );
+    });
+  }
+
+  public onGridChanged(terminal: ITerminal, firstRow: number, lastRow: number): void {
+    // Resize has not been called yet
+    if (this._state.cache.length === 0) {
+      return;
+    }
+
+    this._charAtlas.beginFrame();
+
+    this.clearCells(0, firstRow, terminal.cols, lastRow - firstRow + 1);
+    this._drawBackground(terminal, firstRow, lastRow);
+    this._drawForeground(terminal, firstRow, lastRow);
+  }
+
  public onOptionsChanged(terminal: ITerminal): void {
    this.setTransparency(terminal, terminal.options.allowTransparency);
  }
@@ -10,13 +10,14 @@ import { IColorSet } from '../shared/Types';
 /**
 * Flags used to render terminal text properly.
 */
-export enum FLAGS {
+export const enum FLAGS {
  BOLD = 1,
  UNDERLINE = 2,
  BLINK = 4,
  INVERSE = 8,
  INVISIBLE = 16,
-  DIM = 32
+  DIM = 32,
+  ITALIC = 64
 }

 export interface IRenderer extends IEventEmitter {
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IGlyphIdentifier } from './Types';
+
+export default abstract class BaseCharAtlas {
+  private _didWarmUp: boolean = false;
+
+  /**
+   * Perform any work needed to warm the cache before it can be used. May be called multiple times.
+   * Implement _doWarmUp instead if you only want to get called once.
+   */
+  public warmUp(): void {
+    if (!this._didWarmUp) {
+      this._doWarmUp();
+      this._didWarmUp = true;
+    }
+  }
+
+  /**
+   * Perform any work needed to warm the cache before it can be used. Used by the default
+   * implementation of warmUp(), and will only be called once.
+   */
+  protected _doWarmUp(): void { }
+
+  /**
+   * Called when we start drawing a new frame.
+   *
+   * TODO: We rely on this getting called by TextRenderLayer. This should really be called by
+   * Renderer instead, but we need to make Renderer the source-of-truth for the char atlas, instead
+   * of BaseRenderLayer.
+   */
+  public beginFrame(): void { }
+
+  /**
+   * May be called before warmUp finishes, however it is okay for the implementation to
+   * do nothing and return false in that case.
+   *
+   * @param ctx Where to draw the character onto.
+   * @param glyph Information about what to draw
+   * @param x The position on the context to start drawing at
+   * @param y The position on the context to start drawing at
+   * @returns The success state. True if we drew the character.
+   */
+  public abstract draw(
+    ctx: CanvasRenderingContext2D,
+    glyph: IGlyphIdentifier,
+    x: number,
+    y: number
+  ): boolean;
+}
@@ -1,72 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { ITerminal } from '../../Types';
-import { IColorSet } from '../Types';
-import { ICharAtlasConfig } from '../../shared/atlas/Types';
-import { generateCharAtlas } from '../../shared/atlas/CharAtlasGenerator';
-import { generateConfig, configEquals } from './CharAtlasUtils';
-
-interface ICharAtlasCacheEntry {
-  bitmap: HTMLCanvasElement | Promise<ImageBitmap>;
-  config: ICharAtlasConfig;
-  ownedBy: ITerminal[];
-}
-
-let charAtlasCache: ICharAtlasCacheEntry[] = [];
-
-/**
- * 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 acquireCharAtlas(terminal: ITerminal, colors: IColorSet, scaledCharWidth: number, scaledCharHeight: number): HTMLCanvasElement | Promise<ImageBitmap> {
-  const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, terminal, colors);
-
-  // 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.bitmap;
-      } else {
-        // The configs differ, release the terminal from the entry
-        if (entry.ownedBy.length === 1) {
-          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.bitmap;
-    }
-  }
-
-  const canvasFactory = (width: number, height: number) => {
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    return canvas;
-  };
-
-  const newEntry: ICharAtlasCacheEntry = {
-    bitmap: generateCharAtlas(window, canvasFactory, newConfig),
-    config: newConfig,
-    ownedBy: [terminal]
-  };
-  charAtlasCache.push(newEntry);
-  return newEntry.bitmap;
-}
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ITerminal } from '../../Types';
+import { IColorSet } from '../Types';
+import { ICharAtlasConfig } from '../../shared/atlas/Types';
+import { generateConfig, configEquals } from './CharAtlasUtils';
+import BaseCharAtlas from './BaseCharAtlas';
+import DynamicCharAtlas from './DynamicCharAtlas';
+import NoneCharAtlas from './NoneCharAtlas';
+import StaticCharAtlas from './StaticCharAtlas';
+
+const charAtlasImplementations = {
+  'none': NoneCharAtlas,
+  'static': StaticCharAtlas,
+  'dynamic': DynamicCharAtlas
+};
+
+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: ITerminal[];
+}
+
+const charAtlasCache: ICharAtlasCacheEntry[] = [];
+
+/**
+ * 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 acquireCharAtlas(
+  terminal: ITerminal,
+  colors: IColorSet,
+  scaledCharWidth: number,
+  scaledCharHeight: number
+): BaseCharAtlas {
+  const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, terminal, colors);
+
+  // TODO: Currently if a terminal changes configs it will not free the entry reference (until it's disposed)
+
+  // 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) {
+        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 newEntry: ICharAtlasCacheEntry = {
+    atlas: new charAtlasImplementations[terminal.options.experimentalCharAtlas](
+      document,
+      newConfig
+    ),
+    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: ITerminal): 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.splice(i, 1);
+      } else {
+        // Remove the reference from the cache entry
+        charAtlasCache[i].ownedBy.splice(index, 1);
+      }
+      break;
+    }
+  }
+}
@@ -8,15 +8,19 @@ import { IColorSet } from '../Types';
 import { ICharAtlasConfig } from '../../shared/atlas/Types';

 export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, terminal: ITerminal, colors: IColorSet): ICharAtlasConfig {
+  // null out some fields that don't matter
  const clonedColors = {
    foreground: colors.foreground,
    background: colors.background,
    cursor: null,
    cursorAccent: null,
    selection: null,
+    // 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(0, 16)
  };
  return {
+    type: terminal.options.experimentalCharAtlas,
    devicePixelRatio: window.devicePixelRatio,
    scaledCharWidth,
    scaledCharHeight,
@@ -35,7 +39,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
      return false;
    }
  }
-  return a.devicePixelRatio === b.devicePixelRatio &&
+  return a.type === b.type &&
+      a.devicePixelRatio === b.devicePixelRatio &&
      a.fontFamily === b.fontFamily &&
      a.fontSize === b.fontSize &&
      a.fontWeight === b.fontWeight &&
@@ -0,0 +1,242 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { DIM_OPACITY, IGlyphIdentifier, INVERTED_DEFAULT_COLOR } from './Types';
+import { ICharAtlasConfig } from '../../shared/atlas/Types';
+import { IColor } from '../../shared/Types';
+import BaseCharAtlas from './BaseCharAtlas';
+import { DEFAULT_ANSI_COLORS } from '../ColorManager';
+import { clearColor } from '../../shared/atlas/CharAtlasGenerator';
+import LRUMap from './LRUMap';
+
+// In practice we're probably never going to exhaust a texture this large. For debugging purposes,
+// however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
+const TEXTURE_WIDTH = 1024;
+const TEXTURE_HEIGHT = 1024;
+
+const TRANSPARENT_COLOR = {
+  css: 'rgba(0, 0, 0, 0)',
+  rgba: 0
+};
+
+// Drawing to the cache is expensive: If we have to draw more than this number of glyphs to the
+// cache in a single frame, give up on trying to cache anything else, and try to finish the current
+// frame ASAP.
+//
+// This helps to limit the amount of damage a program can do when it would otherwise thrash the
+// cache.
+const FRAME_CACHE_DRAW_LIMIT = 100;
+
+interface IGlyphCacheValue {
+  index: number;
+  isEmpty: boolean;
+}
+
+function getGlyphCacheKey(glyph: IGlyphIdentifier): string {
+  const styleFlags = (glyph.bold ? 0 : 4) + (glyph.dim ? 0 : 2) + (glyph.italic ? 0 : 1);
+  return `${glyph.bg}_${glyph.fg}_${styleFlags}${glyph.char}`;
+}
+
+export default class DynamicCharAtlas extends BaseCharAtlas {
+  // An ordered map that we're using to keep track of where each glyph is in the atlas texture.
+  // It's ordered so that we can determine when to remove the old entries.
+  private _cacheMap: LRUMap<IGlyphCacheValue>;
+
+  // The texture that the atlas is drawn to
+  private _cacheCanvas: HTMLCanvasElement;
+  private _cacheCtx: CanvasRenderingContext2D;
+
+  // A temporary context that glyphs are drawn to before being transfered to the atlas.
+  private _tmpCtx: CanvasRenderingContext2D;
+
+  // The number of characters stored in the atlas by width/height
+  private _width: number;
+  private _height: number;
+
+  private _drawToCacheCount: number = 0;
+
+  constructor(document: Document, private _config: ICharAtlasConfig) {
+    super();
+    this._cacheCanvas = document.createElement('canvas');
+    this._cacheCanvas.width = TEXTURE_WIDTH;
+    this._cacheCanvas.height = TEXTURE_HEIGHT;
+    // The canvas needs alpha because we use clearColor to convert the background color to alpha.
+    // It might also contain some characters with transparent backgrounds if allowTransparency is
+    // set.
+    this._cacheCtx = this._cacheCanvas.getContext('2d', {alpha: true});
+
+    const tmpCanvas = document.createElement('canvas');
+    tmpCanvas.width = this._config.scaledCharWidth;
+    tmpCanvas.height = this._config.scaledCharHeight;
+    this._tmpCtx = tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency});
+
+    this._width = Math.floor(TEXTURE_WIDTH / this._config.scaledCharWidth);
+    this._height = Math.floor(TEXTURE_HEIGHT / this._config.scaledCharHeight);
+    const capacity = this._width * this._height;
+    this._cacheMap = new LRUMap(capacity);
+    this._cacheMap.prealloc(capacity);
+
+    // This is useful for debugging
+    // document.body.appendChild(this._cacheCanvas);
+  }
+
+  public beginFrame(): void {
+    this._drawToCacheCount = 0;
+  }
+
+  public draw(
+    ctx: CanvasRenderingContext2D,
+    glyph: IGlyphIdentifier,
+    x: number,
+    y: number
+  ): boolean {
+    const glyphKey = getGlyphCacheKey(glyph);
+    const cacheValue = this._cacheMap.get(glyphKey);
+    if (cacheValue != null) {
+      this._drawFromCache(ctx, cacheValue, x, y);
+      return true;
+    } else if (this._canCache(glyph) && this._drawToCacheCount < FRAME_CACHE_DRAW_LIMIT) {
+      let index;
+      if (this._cacheMap.size < this._cacheMap.capacity) {
+        index = this._cacheMap.size;
+      } else {
+        // we're out of space, so our call to set will delete this item
+        index = this._cacheMap.peek().index;
+      }
+      const cacheValue = this._drawToCache(glyph, index);
+      this._cacheMap.set(glyphKey, cacheValue);
+      this._drawFromCache(ctx, cacheValue, x, y);
+      return true;
+    }
+    return false;
+  }
+
+  private _canCache(glyph: IGlyphIdentifier): boolean {
+    // Only cache ascii and extended characters for now, to be safe. In the future, we could do
+    // something more complicated to determine the expected width of a character.
+    //
+    // If we switch the renderer over to webgl at some point, we may be able to use blending modes
+    // to draw overlapping glyphs from the atlas:
+    // https://github.com/servo/webrender/issues/464#issuecomment-255632875
+    // https://webglfundamentals.org/webgl/lessons/webgl-text-texture.html
+    return glyph.code < 256;
+  }
+
+  private _toCoordinates(index: number): [number, number] {
+    return [
+      (index % this._width) * this._config.scaledCharWidth,
+      Math.floor(index / this._width) * this._config.scaledCharHeight
+    ];
+  }
+
+  private _drawFromCache(
+    ctx: CanvasRenderingContext2D,
+    cacheValue: IGlyphCacheValue,
+    x: number,
+    y: number
+  ): void {
+    // We don't actually need to do anything if this is whitespace.
+    if (cacheValue.isEmpty) {
+      return;
+    }
+    const [cacheX, cacheY] = this._toCoordinates(cacheValue.index);
+    ctx.drawImage(
+      this._cacheCanvas,
+      cacheX,
+      cacheY,
+      this._config.scaledCharWidth,
+      this._config.scaledCharHeight,
+      x,
+      y,
+      this._config.scaledCharWidth,
+      this._config.scaledCharHeight
+    );
+  }
+
+  private _getColorFromAnsiIndex(idx: number): IColor {
+    if (idx < this._config.colors.ansi.length) {
+      return this._config.colors.ansi[idx];
+    }
+    return DEFAULT_ANSI_COLORS[idx];
+  }
+
+  private _getBackgroundColor(glyph: IGlyphIdentifier): IColor {
+    if (this._config.allowTransparency) {
+      // The background color might have some transparency, so we need to render it as fully
+      // transparent in the atlas. Otherwise we'd end up drawing the transparent background twice
+      // around the anti-aliased edges of the glyph, and it would look too dark.
+      return TRANSPARENT_COLOR;
+    } else if (glyph.bg === INVERTED_DEFAULT_COLOR) {
+      return this._config.colors.foreground;
+    } else if (glyph.bg < 256) {
+      return this._getColorFromAnsiIndex(glyph.bg);
+    }
+    return this._config.colors.background;
+  }
+
+  private _getForegroundColor(glyph: IGlyphIdentifier): IColor {
+    if (glyph.fg === INVERTED_DEFAULT_COLOR) {
+      return this._config.colors.background;
+    } else if (glyph.fg < 256) {
+      // 256 color support
+      return this._getColorFromAnsiIndex(glyph.fg);
+    }
+    return this._config.colors.foreground;
+  }
+
+  // TODO: We do this (or something similar) in multiple places. We should split this off
+  // into a shared function.
+  private _drawToCache(glyph: IGlyphIdentifier, index: number): IGlyphCacheValue {
+    this._drawToCacheCount++;
+
+    this._tmpCtx.save();
+
+    // draw the background
+    const backgroundColor = this._getBackgroundColor(glyph);
+    // Use a 'copy' composite operation to clear any existing glyph out of _tmpCtxWithAlpha, regardless of
+    // transparency in backgroundColor
+    this._tmpCtx.globalCompositeOperation = 'copy';
+    this._tmpCtx.fillStyle = backgroundColor.css;
+    this._tmpCtx.fillRect(0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight);
+    this._tmpCtx.globalCompositeOperation = 'source-over';
+
+    // draw the foreground/glyph
+    const fontWeight = glyph.bold ? this._config.fontWeightBold : this._config.fontWeight;
+    const fontStyle = glyph.italic ? 'italic' : '';
+    this._tmpCtx.font =
+      `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
+    this._tmpCtx.textBaseline = 'top';
+
+    this._tmpCtx.fillStyle = this._getForegroundColor(glyph).css;
+
+    // Apply alpha to dim the character
+    if (glyph.dim) {
+      this._tmpCtx.globalAlpha = DIM_OPACITY;
+    }
+    // Draw the character
+    this._tmpCtx.fillText(glyph.char, 0, 0);
+    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._config.scaledCharWidth, this._config.scaledCharHeight
+    );
+    let isEmpty = false;
+    if (!this._config.allowTransparency) {
+      isEmpty = clearColor(imageData, backgroundColor);
+    }
+
+    // copy the data from imageData to _cacheCanvas
+    const [x, y] = this._toCoordinates(index);
+    // putImageData doesn't do any blending, so it will overwrite any existing cache entry for us
+    this._cacheCtx.putImageData(imageData, x, y);
+
+    return {
+      index,
+      isEmpty
+    };
+  }
+}
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import LRUMap from './LRUMap';
+
+describe('LRUMap', () => {
+  it('can be used to store and retrieve values', () => {
+    const map = new LRUMap(10);
+    map.set('keya', 'valuea');
+    map.set('keyb', 'valueb');
+    map.set('keyc', 'valuec');
+    assert.strictEqual(map.get('keya'), 'valuea');
+    assert.strictEqual(map.get('keyb'), 'valueb');
+    assert.strictEqual(map.get('keyc'), 'valuec');
+  });
+
+  it('maintains a size from insertions', () => {
+    const map = new LRUMap(10);
+    assert.strictEqual(map.size, 0);
+    map.set('a', 'value');
+    assert.strictEqual(map.size, 1);
+    map.set('b', 'value');
+    assert.strictEqual(map.size, 2);
+  });
+
+  it('deletes the oldest entry when the capacity is exceeded', () => {
+    const map = new LRUMap(4);
+    map.set('a', 'value');
+    map.set('b', 'value');
+    map.set('c', 'value');
+    map.set('d', 'value');
+    map.set('e', 'value');
+    assert.isNull(map.get('a'));
+    assert.isNotNull(map.get('b'));
+    assert.isNotNull(map.get('c'));
+    assert.isNotNull(map.get('d'));
+    assert.isNotNull(map.get('e'));
+    assert.strictEqual(map.size, 4);
+  });
+
+  it('prevents a recently accessed entry from getting deleted', () => {
+    const map = new LRUMap(2);
+    map.set('a', 'value');
+    map.set('b', 'value');
+    map.get('a');
+    // a would normally get deleted here, except that we called get()
+    map.set('c', 'value');
+    assert.isNotNull(map.get('a'));
+    // b got deleted instead of a
+    assert.isNull(map.get('b'));
+    assert.isNotNull(map.get('c'));
+  });
+
+  it('supports mutation', () => {
+    const map = new LRUMap(10);
+    map.set('keya', 'oldvalue');
+    map.set('keya', 'newvalue');
+    // mutation doesn't change the size
+    assert.strictEqual(map.size, 1);
+    assert.strictEqual(map.get('keya'), 'newvalue');
+  });
+});
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+interface ILinkedListNode<T> {
+  prev: ILinkedListNode<T>;
+  next: ILinkedListNode<T>;
+  key: string;
+  value: T;
+}
+
+export default class LRUMap<T> {
+  private _map = {};
+  private _head: ILinkedListNode<T> = null;
+  private _tail: ILinkedListNode<T> = null;
+  private _nodePool: ILinkedListNode<T>[] = [];
+  public size: number = 0;
+
+  constructor(public capacity: number) { }
+
+  private _unlinkNode(node: ILinkedListNode<T>): void {
+    const prev = node.prev;
+    const next = node.next;
+    if (node === this._head) {
+      this._head = next;
+    }
+    if (node === this._tail) {
+      this._tail = prev;
+    }
+    if (prev !== null) {
+      prev.next = next;
+    }
+    if (next !== null) {
+      next.prev = prev;
+    }
+  }
+
+  private _appendNode(node: ILinkedListNode<T>): void {
+    const tail = this._tail;
+    if (tail !== null) {
+      tail.next = node;
+    }
+    node.prev = tail;
+    node.next = null;
+    this._tail = node;
+    if (this._head === null) {
+      this._head = node;
+    }
+  }
+
+  /**
+   * Preallocate a bunch of linked-list nodes. Allocating these nodes ahead of time means that
+   * they're more likely to live next to each other in memory, which seems to improve performance.
+   *
+   * Each empty object only consumes about 60 bytes of memory, so this is pretty cheap, even for
+   * large maps.
+   */
+  public prealloc(count: number): void {
+    const nodePool = this._nodePool;
+    for (let i = 0; i < count; i++) {
+      nodePool.push({
+        prev: null,
+        next: null,
+        key: null,
+        value: null
+      });
+    }
+  }
+
+  public get(key: string): T | null {
+    // This is unsafe: We're assuming our keyspace doesn't overlap with Object.prototype. However,
+    // it's faster than calling hasOwnProperty, and in our case, it would never overlap.
+    const node = this._map[key];
+    if (node !== undefined) {
+      this._unlinkNode(node);
+      this._appendNode(node);
+      return node.value;
+    }
+    return null;
+  }
+
+  public peek(): T | null {
+    const head = this._head;
+    return head === null ? null : head.value;
+  }
+
+  public set(key: string, value: T): void {
+    // This is unsafe: See note above.
+    let node = this._map[key];
+    if (node !== undefined) {
+      // already exists, we just need to mutate it and move it to the end of the list
+      node = this._map[key];
+      this._unlinkNode(node);
+      node.value = value;
+    } else if (this.size >= this.capacity) {
+      // we're out of space: recycle the head node, move it to the tail
+      node = this._head;
+      this._unlinkNode(node);
+      delete this._map[node.key];
+      node.key = key;
+      node.value = value;
+      this._map[key] = node;
+    } else {
+      // make a new element
+      const nodePool = this._nodePool;
+      if (nodePool.length > 0) {
+        // use a preallocated node if we can
+        node = nodePool.pop();
+        node.key = key;
+        node.value = value;
+      } else {
+        node = {
+          prev: null,
+          next: null,
+          key,
+          value
+        };
+      }
+      this._map[key] = node;
+      this.size++;
+    }
+    this._appendNode(node);
+  }
+}
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * A dummy CharAtlas implementation that always fails to draw characters.
+ */
+
+import { IGlyphIdentifier } from './Types';
+import { ICharAtlasConfig } from '../../shared/atlas/Types';
+import BaseCharAtlas from './BaseCharAtlas';
+
+export default class NoneCharAtlas extends BaseCharAtlas {
+  constructor(document: Document, config: ICharAtlasConfig) {
+    super();
+  }
+
+  public draw(
+    ctx: CanvasRenderingContext2D,
+    glyph: IGlyphIdentifier,
+    x: number,
+    y: number
+  ): boolean {
+    return false;
+  }
+}
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { DIM_OPACITY, IGlyphIdentifier } from './Types';
+import { CHAR_ATLAS_CELL_SPACING, ICharAtlasConfig } from '../../shared/atlas/Types';
+import { generateStaticCharAtlasTexture } from '../../shared/atlas/CharAtlasGenerator';
+import BaseCharAtlas from './BaseCharAtlas';
+
+export default class StaticCharAtlas extends BaseCharAtlas {
+  private _texture: HTMLCanvasElement | ImageBitmap;
+
+  constructor(private _document: Document, private _config: ICharAtlasConfig) {
+    super();
+  }
+
+  private _canvasFactory = (width: number, height: number) => {
+    const canvas = this._document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+
+    // This is useful for debugging
+    // document.body.appendChild(canvas);
+
+    return canvas;
+  }
+
+  public _doWarmUp(): void {
+    const result = generateStaticCharAtlasTexture(window, this._canvasFactory, this._config);
+    if (result instanceof HTMLCanvasElement) {
+      this._texture = result;
+    } else {
+      result.then(texture => {
+        this._texture = texture;
+      });
+    }
+  }
+
+  private _isCached(glyph: IGlyphIdentifier, colorIndex: number): boolean {
+    const isAscii = glyph.code < 256;
+    // A color is basic if it is one of the 4 bit ANSI colors.
+    const isBasicColor = glyph.fg < 16;
+    const isDefaultColor = glyph.fg >= 256;
+    const isDefaultBackground = glyph.bg >= 256;
+    return isAscii && (isBasicColor || isDefaultColor) && isDefaultBackground && !glyph.italic;
+  }
+
+  public draw(
+    ctx: CanvasRenderingContext2D,
+    glyph: IGlyphIdentifier,
+    x: number,
+    y: number
+  ): boolean {
+    // we're not warmed up yet
+    if (this._texture == null) {
+      return false;
+    }
+
+    let colorIndex = 0;
+    if (glyph.fg < 256) {
+      colorIndex = 2 + glyph.fg + (glyph.bold ? 16 : 0);
+    } else {
+      // If default color and bold
+      if (glyph.bold) {
+        colorIndex = 1;
+      }
+    }
+    if (!this._isCached(glyph, colorIndex)) {
+      return false;
+    }
+
+    ctx.save();
+
+    // ImageBitmap's draw about twice as fast as from a canvas
+    const charAtlasCellWidth = this._config.scaledCharWidth + CHAR_ATLAS_CELL_SPACING;
+    const charAtlasCellHeight = this._config.scaledCharHeight + CHAR_ATLAS_CELL_SPACING;
+
+    // Apply alpha to dim the character
+    if (glyph.dim) {
+      ctx.globalAlpha = DIM_OPACITY;
+    }
+
+    ctx.drawImage(
+      this._texture,
+      glyph.code * charAtlasCellWidth,
+      colorIndex * charAtlasCellHeight,
+      charAtlasCellWidth,
+      this._config.scaledCharHeight,
+      x,
+      y,
+      charAtlasCellWidth,
+      this._config.scaledCharHeight
+    );
+
+    ctx.restore();
+
+    return true;
+  }
+}
@@ -5,3 +5,13 @@

 export const INVERTED_DEFAULT_COLOR = -1;
 export const DIM_OPACITY = 0.5;
+
+export interface IGlyphIdentifier {
+  char: string;
+  code: number;
+  bg: number;
+  fg: number;
+  bold: boolean;
+  dim: boolean;
+  italic: boolean;
+}
@@ -5,6 +5,7 @@

 import { FontWeight } from 'xterm';
 import { CHAR_ATLAS_CELL_SPACING, ICharAtlasConfig } from './Types';
+import { IColor } from '../Types';
 import { isFirefox } from '../utils/Browser';

 declare const Promise: any;
@@ -20,14 +21,14 @@ export interface IOffscreenCanvas {
 * Generates a char atlas.
 * @param context The window or worker context.
 * @param canvasFactory A function to generate a canvas with a width or height.
- * @param request The config for the new char atlas.
+ * @param config The config for the new char atlas.
 */
-export function generateCharAtlas(context: Window, canvasFactory: (width: number, height: number) => HTMLCanvasElement | IOffscreenCanvas, config: ICharAtlasConfig): HTMLCanvasElement | Promise<ImageBitmap> {
+export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (width: number, height: number) => HTMLCanvasElement | IOffscreenCanvas, config: ICharAtlasConfig): HTMLCanvasElement | Promise<ImageBitmap> {
  const cellWidth = config.scaledCharWidth + CHAR_ATLAS_CELL_SPACING;
  const cellHeight = config.scaledCharHeight + CHAR_ATLAS_CELL_SPACING;
  const canvas = canvasFactory(
    /*255 ascii chars*/255 * cellWidth,
-    (/*default+default bold*/2 + /*0-15*/16) * cellHeight
+    (/*default+default bold*/2 + /*0-15*/16 + /*0-15 bold*/16) * cellHeight
  );
  const ctx = canvas.getContext('2d', {alpha: config.allowTransparency});

@@ -64,10 +65,6 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
  // Colors 0-15
  ctx.font = getFont(config.fontWeight, config);
  for (let colorIndex = 0; colorIndex < 16; colorIndex++) {
-    // colors 8-15 are bold
-    if (colorIndex === 8) {
-      ctx.font = getFont(config.fontWeightBold, config);
-    }
    const y = (colorIndex + 2) * cellHeight;
    // Draw ascii characters
    for (let i = 0; i < 256; i++) {
@@ -80,6 +77,22 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
      ctx.restore();
    }
  }
+
+  // Colors 0-15 bold
+  ctx.font = getFont(config.fontWeightBold, config);
+  for (let colorIndex = 0; colorIndex < 16; colorIndex++) {
+    const y = (colorIndex + 2 + 16) * cellHeight;
+    // Draw ascii characters
+    for (let i = 0; i < 256; i++) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(i * cellWidth, y, cellWidth, cellHeight);
+      ctx.clip();
+      ctx.fillStyle = config.colors.ansi[colorIndex].css;
+      ctx.fillText(String.fromCharCode(i), i * cellWidth, y);
+      ctx.restore();
+    }
+  }
  ctx.restore();

  // Support is patchy for createImageBitmap at the moment, pass a canvas back
@@ -91,34 +104,38 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number
    if (canvas instanceof HTMLCanvasElement) {
      // Just return the HTMLCanvas if it's a HTMLCanvasElement
      return canvas;
-    } else {
-      // Transfer to an ImageBitmap is this is an OffscreenCanvas
-      return new Promise(r => r(canvas.transferToImageBitmap()));
    }
+    // Transfer to an ImageBitmap is this is an OffscreenCanvas
+    return new Promise(r => r(canvas.transferToImageBitmap()));
  }

  const charAtlasImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  // Remove the background color from the image so characters may overlap
-  const r = config.colors.background.rgba >>> 24;
-  const g = config.colors.background.rgba >>> 16 & 0xFF;
-  const b = config.colors.background.rgba >>> 8 & 0xFF;
-  clearColor(charAtlasImageData, r, g, b);
+  clearColor(charAtlasImageData, config.colors.background);

  return context.createImageBitmap(charAtlasImageData);
 }

 /**
 * Makes a partiicular rgb color in an ImageData completely transparent.
+ * @returns True if the result is "empty", meaning all pixels are fully transparent.
 */
-function clearColor(imageData: ImageData, r: number, g: number, b: number): void {
+export function clearColor(imageData: ImageData, color: IColor): boolean {
+  let isEmpty = true;
+  const r = color.rgba >>> 24;
+  const g = color.rgba >>> 16 & 0xFF;
+  const b = color.rgba >>> 8 & 0xFF;
  for (let offset = 0; offset < imageData.data.length; offset += 4) {
    if (imageData.data[offset] === r &&
        imageData.data[offset + 1] === g &&
        imageData.data[offset + 2] === b) {
      imageData.data[offset + 3] = 0;
+    } else {
+      isEmpty = false;
    }
  }
+  return isEmpty;
 }

 function getFont(fontWeight: FontWeight, config: ICharAtlasConfig): string {
@@ -9,6 +9,7 @@ import { IColorSet } from '../Types';
 export const CHAR_ATLAS_CELL_SPACING = 1;

 export interface ICharAtlasConfig {
+  type: 'none' | 'static' | 'dynamic';
  devicePixelRatio: number;
  fontSize: number;
  fontFamily: string;
@@ -63,6 +63,9 @@ export class MockTerminal implements ITerminal {
  selectAll(): void {
    throw new Error('Method not implemented.');
  }
+  dispose(): void {
+    throw new Error('Method not implemented.');
+  }
  destroy(): void {
    throw new Error('Method not implemented.');
  }
@@ -306,6 +309,9 @@ export class MockBuffer implements IBuffer {
  prevStop(x?: number): number {
    throw new Error('Method not implemented.');
  }
+  setLines(lines: ICircularList<[number, string, number, number][]>): void {
+    this.lines = lines;
+  }
 }

 export class MockRenderer implements IRenderer {
@@ -126,13 +126,17 @@
    line-height: normal;
 }

+.xterm {
+    cursor: text;
+}
+
 .xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
 }

-.xterm:not(.enable-mouse-events) {
-    cursor: text;
+.xterm.xterm-cursor-pointer {
+    cursor: pointer;
 }

 .xterm .xterm-accessibility,
@@ -153,7 +157,3 @@
    height: 1px;
    overflow: hidden;
 }
-
-.xterm-cursor-pointer {
-    cursor: pointer;
-}
@@ -2,6 +2,12 @@
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
+    "lib": [
+      "DOM",
+      "ES5",
+      "ScriptHost",
+      "ES2015.Promise"
+    ],
    "rootDir": "src",
    "outDir": "lib",
    "sourceMap": true,
@@ -1,4 +1,7 @@
 {
+  "rulesDirectory": [
+    "tslint-consistent-codestyle"
+  ],
  "rules": {
    "array-type": [
      true,
@@ -86,6 +89,17 @@
      "check-type",
      "check-type-operator",
      "check-preblock"
+    ],
+
+    "naming-convention": [
+      true,
+      {"type": "property", "modifiers": ["public", "static", "const"], "format": "UPPER_CASE"}
+    ],
+    "no-else-after-return": {
+      "options": "allow-else-if"
+    },
+    "prefer-const-enum": [
+      true
    ]
  }
 }
@@ -54,6 +54,11 @@ declare module 'xterm' {
     */
    disableStdin?: boolean;

+    /**
+     * Whether to draw bold text in bright colors. The default is true.
+     */
+    drawBoldTextInBrightColors?: boolean;
+
    /**
     * Whether to enable the rendering of bold text.
     *
@@ -61,6 +66,24 @@ declare module 'xterm' {
     */
    enableBold?: boolean;

+    /**
+     * What character atlas implementation to use. The character atlas caches drawn characters,
+     * speeding up rendering significantly. However, it can introduce some minor rendering
+     * artifacts.
+     *
+     * - 'none': Don't use an atlas.
+     * - 'static': Generate an atlas when the terminal starts or is reconfigured. This atlas will
+     *   only contain ASCII characters in 16 colors.
+     * - 'dynamic': Generate an atlas using a LRU cache as characters are requested. Limited to
+     *   ASCII characters (for now), but supports 256 colors. For characters covered by the static
+     *   cache, it's slightly slower in comparison, since there's more overhead involved in
+     *   managing the cache.
+     *
+     * Currently defaults to 'static'. This option may be removed in the future. If it is, passed
+     * parameters will be ignored.
+     */
+    experimentalCharAtlas?: 'none' | 'static' | 'dynamic';
+
    /**
     * The font size used to render text.
     */
@@ -251,7 +274,7 @@ declare module 'xterm' {
  /**
   * The class that represents an xterm.js terminal.
   */
-  export class Terminal implements IEventEmitter {
+  export class Terminal implements IEventEmitter, IDisposable {
    /**
     * The element containing the terminal.
     */
@@ -451,8 +474,16 @@ declare module 'xterm' {
     */
    selectLines(start: number, end: number): void;

+    /*
+     * Disposes of the terminal, detaching it from the DOM and removing any
+     * active listeners.
+     */
+    dispose(): void;
+
    /**
     * Destroys the terminal and detaches it from the DOM.
+     *
+     * @deprecated Use dispose() instead.
     */
    destroy(): void;
Author	SHA1	Message	Date
Paris Kasidiaris	536425394c	Bump version to 3.4.1 Signed-off-by: Paris Kasidiaris <paris@sourcelair.com>	2018-05-21 16:29:57 +00:00
Daniel Imms	fe576b895c	Save and restore correctly when drawing from static cache Fixes #1424	2018-05-21 09:22:34 -07:00
Paris Kasidiaris	0ad1080133	Bump version to 3.4.0 Signed-off-by: Paris Kasidiaris <paris@sourcelair.com>	2018-05-19 08:31:27 +00:00
Benjamin Woodruff	4717619f76	Merge pull request #1327 from bgw/dynamic-char-atlas Modularize the character atlas system, add a LRU-cache based dynamic character atlas	2018-05-17 22:59:03 -07:00
Benjamin Woodruff	7f761b5b9e	Merge branch 'master' into dynamic-char-atlas I did a bunch of testing of various ansi escape codes (including italics) with all three char atlas implementations (none, static, dynamic), with and without `drawBoldTextInBrightColors`, and with and without `enableBold` to test all of the edge cases that I could.	2018-05-17 22:42:52 -07:00
Daniel Imms	7334e6ab19	Merge pull request #1452 from Tyriar/coveralls Update coveralls	2018-05-15 11:03:22 -07:00
Daniel Imms	137b499538	Merge pull request #1450 from Tyriar/tagline Update tagline	2018-05-15 11:03:08 -07:00
Daniel Imms	3acd1eaecc	Update coveralls This broke after we moved the organization Fixes #1451	2018-05-14 11:48:13 -07:00
Daniel Imms	435cf91ec7	Merge pull request #1433 from Tyriar/fix_lint Run tslint on all of src/ (for good this time)	2018-05-14 11:33:30 -07:00
Daniel Imms	6e451f58b8	Update tagline	2018-05-14 11:13:01 -07:00
Daniel Imms	7a9f291df9	Merge pull request #1446 from Tyriar/1437_fix_link_pointer Fix link cursor CSS	2018-05-12 07:45:20 -07:00
Daniel Imms	9dfce63e55	Simplify cursor styles	2018-05-12 07:44:30 -07:00
Daniel Imms	139a246436	Merge pull request #1401 from npezza93/alt-click-map-bug Handle if getCoords returns null in the AltClickHandler	2018-05-11 15:56:14 -07:00
Daniel Imms	343cc2b7b2	Merge branch 'master' into alt-click-map-bug	2018-05-11 15:50:40 -07:00
Daniel Imms	0375e0064b	Fix link cursor CSS Ensure pointer overrides the default mouse events mode cursor. Fixes #1437	2018-05-11 10:03:43 -07:00
Daniel Imms	57e35f836e	Merge pull request #1438 from diag/master Add diag.ai to list of real-world uses	2018-05-11 09:16:30 -07:00
Daniel Imms	685757b04b	Merge pull request #1417 from pro-src/packaging Stop publishing test files to npm - closes #1361	2018-05-11 07:51:46 -07:00
Daniel Imms	210a312fbf	Remove ignore key from package.json	2018-05-11 07:49:37 -07:00
Daniel Imms	c366ee20b8	Merge branch 'master' into packaging	2018-05-11 07:48:34 -07:00
Daniel Imms	b9baacac3a	Merge pull request #1444 from pengx17/patch-1 Update how to use addons with Typescript	2018-05-11 07:20:17 -07:00
Peng Xiao	45fea0e790	Merge branch 'master' into patch-1	2018-05-11 21:57:40 +08:00
Benjamin Woodruff	cded6f80f6	Merge pull request #1445 from pro-src/master Fix tsc	2018-05-10 23:57:24 -07:00
pro-src	9c1bee300d	Fix tsc	2018-05-11 01:51:49 -05:00
Peng Xiao	ef4cda2cc6	revise importing addons in ts	2018-05-11 11:20:02 +08:00
Peng Xiao	d315dd6684	Merge branch 'master' into patch-1	2018-05-11 11:12:02 +08:00
Benjamin Woodruff	8a5891ede2	Merge pull request #1442 from bgw/dim-save-restore Save and restore the ctx for cached characters	2018-05-10 09:38:46 -07:00
Peng Xiao	bce81f304e	Update how to use addons with Typescript	2018-05-10 16:11:25 +08:00
Benjamin Woodruff	3971fc9b4e	Save and restore the ctx for cached characters Drawing dim colors sets the globalAlpha to 0.5, so we need to save/restore the ctx state. Otherwise, every time we draw some dim content, our display will get progressively dimmer. I tested this by running `echo '\u001b[2mfoo'` a few times in zsh. Fixes #1424	2018-05-09 20:34:55 -07:00
npezza93	4edbd507e5	Check if endCol and endRow are present before handling an alt click	2018-05-09 19:35:02 -04:00
npezza93	b162582e66	Handle if getCoords returns null in the AltClickHandler Fixes #1397	2018-05-09 19:31:19 -04:00
Benjamin Woodruff	be32695e16	Merge pull request #1391 from LinusU/bright-vs-bold Separate bright and bold	2018-05-08 18:43:41 -07:00
Benjamin Woodruff	9893338020	Add drawBoldTextInBrightColors to DEFAULT_OPTIONS This lets term.setOption() work for drawBoldTextInBrightColors.	2018-05-08 18:34:23 -07:00
Ledion Bitincka	cfdec9ff90	add diag.ai	2018-05-08 16:27:54 -07:00
Linus Unnebäck	ce6139e604	Add drawBoldTextInBrightColors option	2018-05-07 22:23:04 +02:00
Linus Unnebäck	a23354f018	Fully use char atlas for bright & bold colors	2018-05-07 22:23:01 +02:00
Linus Unnebäck	41fd563144	Separate bright and bold	2018-05-07 22:19:01 +02:00
Daniel Imms	9bcecd4e2e	Run tslint on all of source (for good this time)	2018-05-04 10:20:09 -07:00
Daniel Imms	e48b15e859	Merge pull request #1422 from flybayer/italic Add support for italic rendering	2018-05-01 11:56:21 -07:00
Daniel Imms	a732952677	Rearrange italic/bold to get _ctx.font validating	2018-05-01 11:50:06 -07:00
Daniel Imms	b60ab119b2	Merge branch 'master' into italic	2018-05-01 11:30:03 -07:00
Benjamin Woodruff	381d3e1444	Merge pull request #1413 from bgw/batch-background Batch background draws together to reduce draws	2018-04-27 20:53:32 -07:00
Benjamin Woodruff	b97eaf2c52	Merge branch 'master' into batch-background	2018-04-27 20:49:03 -07:00
Benjamin Woodruff	513847fd80	Make BaseRenderLayer's _alpha private again This was accidentally left over from some earlier changes I was playing with.	2018-04-27 20:47:55 -07:00
Daniel Imms	7b2500bfd6	Merge pull request #1420 from pro-src/patch-1 Update README.md	2018-04-27 09:44:47 -07:00
pro-src	882d5a86d3	Update README.md - prefer hex escapes over octal	2018-04-27 02:19:48 -05:00
Brandon Bayer	235982362c	Add support for italic rendering	2018-04-26 17:34:01 -04:00
pro-src	30b88113a8	explicitly exclude demo	2018-04-26 12:09:21 -05:00
pro-src	994895af6d	Update README.md Replace the deprecated octal escapes with Unicode escapes. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal	2018-04-26 11:53:20 -05:00
pro-src	a61ba2e140	closes #1361	2018-04-26 09:18:18 -05:00
Benjamin Woodruff	a5a03c40f2	Batch background draws together to reduce draws Adjacent cells on the same row sharing the same background color will be drawn using the same `fillCells` call. This should make drawing an application with a solid or mostly solid background color (e.g. vim) faster. I set vim to draw the background color for a file, and started scrolling through it. Before, _drawBackground was taking around 6ms per frame. After this commit, it was taking around 0.5ms per frame. Based on prior experience, I'd expect these results to be more drastic for larger terminal windows. The demo's window is pretty small.	2018-04-24 23:52:13 -07:00
Daniel Imms	83fe87d012	Merge pull request #1407 from Tyriar/enum_names Enforce upper case for public const/enum members and const	2018-04-24 11:00:58 -07:00
Daniel Imms	3713d282d8	Fix conflicts	2018-04-24 10:55:53 -07:00
Daniel Imms	8aa65d06f5	Merge pull request #1404 from Tyriar/no_else_return Add no else return tslint rule	2018-04-24 10:50:27 -07:00
Daniel Imms	fd97fead60	Merge branch 'master' into no_else_return	2018-04-24 10:44:54 -07:00
Benjamin Woodruff	453da35f51	Merge branch 'master' into dynamic-char-atlas	2018-04-23 22:43:43 -07:00
Benjamin Woodruff	d254d69ee2	Fix fontWeight options with DynamicCharAtlas The atlas wasn't using these values when setting the font.	2018-04-23 22:15:45 -07:00
Benjamin Woodruff	ff19ba8e33	Merge pull request #1393 from bgw/text-render-layer Separate foreground & background rendering passes	2018-04-23 21:48:09 -07:00
Daniel Imms	fcde7be62a	Enforce const enums Fixes #1408	2018-04-23 17:35:41 -07:00
Daniel Imms	45b4429712	Merge branch 'master' into enum_names	2018-04-23 17:18:40 -07:00
Daniel Imms	9942dc384d	Enforce upper case for public const/enum members Fixes #1406	2018-04-23 17:17:21 -07:00
Daniel Imms	56f9d423fe	Merge branch 'master' into text-render-layer	2018-04-23 14:15:45 -07:00
Daniel Imms	716a8d5926	Merge pull request #1403 from jerch/performance_optimizations performance optimizations	2018-04-23 13:49:03 -07:00
Jörg Breitbart	9593cb0cc8	readonly lines; fix for MockBuffer	2018-04-23 22:40:24 +02:00
Jörg Breitbart	7ed7505ce4	change _lines to lines in Buffer	2018-04-23 22:18:05 +02:00
Jörg Breitbart	6ff4ae7194	revert to local const buffer	2018-04-23 22:06:24 +02:00
Daniel Imms	9e863d0377	Add no else return tslint rule	2018-04-23 11:52:42 -07:00
Jörg Breitbart	13d4ab6f8d	remove remnant	2018-04-23 18:32:32 +02:00
Jörg Breitbart	0d7ecd9129	prefetch row in addChar	2018-04-23 18:26:06 +02:00
Jörg Breitbart	dd096c2e8b	const buffer	2018-04-23 17:19:42 +02:00
Jörg Breitbart	0decd77253	map Buffer.lines directly to Buffer._lines	2018-04-23 16:59:55 +02:00
Jörg Breitbart	2bfe74490a	make .buffer local where appropriate	2018-04-23 16:29:19 +02:00
Benjamin Woodruff	0fe59df2e9	Rename startRow/endRow in TextRenderLayer Renaming these to firstRow/lastRow makes the inclusivity of the range clearer. Addresses this comment: https://github.com/xtermjs/xterm.js/pull/1393#discussion_r182471582	2018-04-18 20:22:55 -07:00
Daniel Imms	a3ce881897	Merge pull request #1372 from Tyriar/1341_memory_leak Remove terminal references on dispose	2018-04-18 08:10:20 -07:00
Daniel Imms	58c50f08db	Break when the terminal reference is removed	2018-04-18 08:10:05 -07:00
Daniel Imms	984e027c87	Merge branch 'master' into 1341_memory_leak	2018-04-18 08:02:55 -07:00
Benjamin Woodruff	b853aa4929	Separate foreground & background rendering passes I'm primarily interested in doing this because it'll allow me to optimize the background rendering in later diffs, but this may also make it possible to fix some minor rendering issues. Right now, if we draw a single-width character that overflows its cell's bounds, and the character to the right of it has a background, that background may cover up the first character's foreground. By drawing the background in a separate pass, we can avoid those cases. There's still some issues with how dirty regions are computed that makes rendering stuff like that flaky, but this at least gets us closer to "correct" rendering. Other terminal emulators (e.g. alacritty) render the foreground and background in separate passes: https://github.com/jwilm/alacritty/blob/1b7ffea/src/renderer/mod.rs#L766	2018-04-17 21:44:17 -07:00
Benjamin Woodruff	4fd630ec5c	Add code to IGlyphIdentifer, use it It turns out that `glyph.char.charCodeAt(0)` isn't equivalent to the character's actual code because of utf-16 garbage, so this adds `glyph.code` to the `glyph` object so that we can use the `code` value, and don't need to regenerate it.	2018-04-16 09:49:32 -07:00
Benjamin Woodruff	ec96c40fde	Re-add colors.ansi slicing in generateConfig - We need to make a clone of this array, because ColorManager mutates it. - We only want to compare the first 16 colors instead of all 256, since only the first 16 will ever change. In DynamicCharAtlas, we can pull the additional colors from DEFAULT_ANSI_COLORS. I tested this out by loading the demo and changing the theme a few times.	2018-04-16 09:41:00 -07:00
Daniel Imms	cf8fa10205	Merge pull request #1299 from jonaustin/patch-1 Add Hyper to list of apps	2018-04-16 09:40:07 -07:00
Daniel Imms	d8d9d904b5	Merge branch 'master' into patch-1	2018-04-16 09:39:02 -07:00
Benjamin Woodruff	4a13813941	Rename DRAW_TO_CACHE_LIMIT to FRAME_CACHE_DRAW_LIMIT	2018-04-16 08:56:54 -07:00
Daniel Imms	cd7911a3d4	Merge pull request #1390 from Tyriar/third_party_addons Add xterm-webfont addon to readme	2018-04-16 06:55:35 -07:00
Daniel Imms	3625a2278d	Merge pull request #1365 from Tyriar/1364_addon_lint Lint addon files	2018-04-16 06:46:42 -07:00
Daniel Imms	7d108999ff	Fix lint	2018-04-16 06:42:16 -07:00
Daniel Imms	e3dc36c123	Add xterm-webfont addon to readme	2018-04-16 06:28:45 -07:00
Daniel Imms	11541be4ae	Merge branch 'master' into 1364_addon_lint	2018-04-16 06:25:48 -07:00
Daniel Imms	ceffb35445	Merge pull request #1369 from Tyriar/897_dead_options Remove unused options	2018-04-16 06:25:18 -07:00
Daniel Imms	e1957ae6aa	Merge remote-tracking branch 'origin/master' into 1364_addon_lint	2018-04-16 06:24:37 -07:00
Benjamin Woodruff	5a05db727c	Add a per-frame limit on dynamic atlas writes This limits the amount of damage a pathological program can cause in thrashing the LRU cache. I ran the script described here: https://github.com/xtermjs/xterm.js/pull/1327#issuecomment-374003960 Without this patch, the entire output would get drawn in one frame that took about 140 ms to draw. With this patch, it takes about 60 ms. It's still nowhere as good as the static or none atlas implementations, but it's not terrible, like it was. This should have minimal impact on real-world applications: it'll just take a little longer for the atlas to warm up. The implementation is a little hacky, since it involves throwing some code into TextRenderLayer that violates the separation of concerns, but we can clean this up later.	2018-04-15 20:02:39 -07:00
Benjamin Woodruff	1f692ed047	Use a single tmpCtx, avoid parsing color values Pros: - The code is simpler. - AA rendering is consistent between cached and uncached characters. - No long requires parsing color values to determine the alpha, which means that we no longer depend on #rrggbbaa color value support. Cons: - We're drawing without SPAA in some cases where we could be. Addresses this comment: https://github.com/xtermjs/xterm.js/pull/1327#discussion_r176109332	2018-04-15 19:59:36 -07:00
Benjamin Woodruff	c3eea02855	Add a LRUMap test, fix a bug in LRUMap Bug: When appending a node, we weren't setting the tail's `next` value correctly.	2018-04-15 19:48:37 -07:00
Benjamin Woodruff	c6d66d7b0d	Fix subpixel antialising in DynamicCharAtlas Drawing to a ctx with `{alpha: true}` causes the canvas API (on chrome at least) to switch to grayscale AA, instead of RGB subpixel AA. This fixes it by drawing to a ctx that's using `{alpha: false}` when posisble, and switching to a ctx that's using `{alpha: true}` only when we have to.	2018-04-15 19:48:37 -07:00
Benjamin Woodruff	9c0ce1d742	Fix DynamicCharAtlas with transparency There were two bugs: - We need to clear the background of _tmpCtx instead of just drawing on top if the background color is transparent. - We should set the background to fully transparent if it's partially transparent, to avoid drawing the transparent background twice.	2018-04-15 19:43:23 -07:00
Benjamin Woodruff	ac7db87fd0	Remove use of Promises in {Base,Static}CharAtlas Nothing actually cares about the return value, so we can avoid depending on `Promise` by not returning a promise. This should make this work for IE11 (though I haven't tested that). I tried this in Chrome and Firefox to test both codepaths (ImageBitmap and HTMLCanvasElement).	2018-04-15 18:52:06 -07:00
Benjamin Woodruff	8b3b7535c6	Add a new LRUMap class, remove uses of Map LRUMap implements the parts of an ordered map that we need to efficiently implement DynamicCharAtlas. It's more code, but there's a few advantages of this approach: - Map isn't available on some older browsers, so this removes the need for a polyfill. - Moving an item to the end of the map's iteration order now only requires unlinking and linking a linked-list node, whereas before we had to delete and re-insert our value. - Peeking at the oldest entry in the map no longer requires allocating and destroying an iterator. - We can preallocate the linked-list nodes we want to improve cache locality. Similarly, we can recycle linked-list nodes to reduce allocations and the GC pauses those allocations may cause. - LRUMap seems to give slightly better results in Chrome's profiler than Map did. We now spend about 5% of our time on map operations instead of about 10%. - In my (limited) testing, it doesn't look like LRUMap is slowing down over time. Map appeared to get slightly slower the longer I ran the terminal for, either due to memory fragmentation or some sort of leak. I still need to write some tests for LRUMap, but I've been using this implementation for the last hour without problems.	2018-04-15 18:52:06 -07:00
Benjamin Woodruff	c8b500c182	Skip drawing whitespace from DynamicCharAtlas When we remove the background from a glyph, we can keep track of if we made all the pixels fully transparent. If we did, we can just skip future calls to _drawFromCache, since it would be a noop anyways.	2018-04-15 18:52:06 -07:00
Benjamin Woodruff	24feaabd9a	Add a basic dynamic character atlas implementation This adds a very minimal implementation of DynamicCharAtlas using a LRU cache. I've got some optimizations that I'll add on top of this, but this proves the concept.	2018-04-15 18:49:07 -07:00
Benjamin Woodruff	8c980bc30d	Add a dummy NoneCharAtlas implementation This adds the logic needed to switch between multiple char atlas implementations, and an example second implementation to test it out with. This also offers an escape hatch if something goes wrong with the char atlas implementation(s).	2018-04-15 18:03:55 -07:00
Benjamin Woodruff	6f21385cd8	Add BaseCharAtlas and implement StaticCharAtlas The API defined by BaseCharAtlas will let us support multiple char atlas implementations at once. I tested this by running the demo with Chrome's profiler, which shows that calls are going to StaticCharAtlas/drawImage instead of _drawUncachedChar. Applications using 256 colors also still work fine, via _drawUncachedChar.	2018-04-15 18:03:55 -07:00
Daniel Imms	83f9d59d91	Merge pull request #1384 from Tyriar/1383_setoption_exception Guard usages of DOM attached vars in setOption	2018-04-15 13:30:33 -07:00
Daniel Imms	2cee66909b	Merge pull request #1374 from Tyriar/1353_run_lint_with_tests Run lint with tests	2018-04-13 06:20:11 -07:00
Daniel Imms	da8151b1b5	Merge pull request #1375 from Tyriar/remove-package-lock Remove package-lock.json	2018-04-12 10:03:44 -07:00
Daniel Imms	a3cb34fbf1	Merge pull request #1385 from johnpoth/headless-mode Check if charMeasure is defined in headless mode	2018-04-12 07:29:48 -07:00
jpoth	9a1162d7f2	Check if charMeasure is defined in headless mode	2018-04-12 15:43:09 +02:00
Daniel Imms	591b09a62b	Merge pull request #1377 from Tyriar/remove_jsdoc Remove docdash	2018-04-11 09:39:12 -07:00
Daniel Imms	f6f3e78e2c	Merge pull request #1376 from Tyriar/1324_move_zmodem_demo Move zmodem demo to demo/	2018-04-11 09:38:56 -07:00
Daniel Imms	82897ed56c	Guard usages of DOM attached vars in setOption Fixes #1383	2018-04-10 19:54:49 -07:00
Daniel Imms	74d91a6bdd	Remove docdash	2018-04-07 11:42:36 -07:00
Daniel Imms	4a1ebbfb56	Add .npmrc	2018-04-07 11:40:54 -07:00
Felipe Gasper	86c9b3f92c	Fix zmodem demo.	2018-04-05 07:03:09 -07:00
Daniel Imms	4fbd1adaa9	Move zmodem demo to demo/ Fixes #1324	2018-04-04 14:31:25 -07:00
Daniel Imms	004ea61b83	Remove package-lock.json We don't have any dependencies so this isn't as important to us, it's also ugly to keep seeing these in PRs.	2018-04-04 14:11:46 -07:00
Daniel Imms	9be57f72f0	Run lint with tests Fixes #1353	2018-04-04 14:10:03 -07:00
Daniel Imms	e5ee76ded4	Remove terminal references on dispose Part of #1341 Fixes #1370	2018-04-04 11:51:50 -07:00
Daniel Imms	87f21f14a1	Remove unused options Fixes #897	2018-04-04 11:20:25 -07:00
Daniel Imms	ef16811268	Merge branch 'master' into 1364_addon_lint	2018-04-04 11:11:05 -07:00
Daniel Imms	768539a57c	Fix lint errors in attach	2018-04-02 08:17:44 -07:00
Daniel Imms	22c4197a1d	Lint addons	2018-04-02 08:16:39 -07:00
Jon Austin	07cf029497	Merge branch 'master' into patch-1	2018-02-24 13:12:30 -08:00
Jon Austin	f3a37a9522	Add Hyper to list of apps https://github.com/zeit/hyper/blob/82c7afbeecf5a0c455075868cd23585fce95cf68/package.json#L197	2018-02-24 10:14:51 -08:00