Merge pull request #2828 from Tyriar/release45

v4.5.0

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
   "dockerFile": "Dockerfile",
   "appPort": 3000,
   "extensions": [
-    "editorconfig.editorconfig",
-    "ms-vscode.vscode-typescript-tslint-plugin"
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig"
   ]
 }

.eslintrc.json

@@ -0,0 +1,150 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": [
+      "src/browser/tsconfig.json",
+      "src/common/tsconfig.json",
+      "src/tsconfig.json",
+      "test/api/tsconfig.json",
+      "test/benchmark/tsconfig.json",
+      "addons/xterm-addon-attach/src/tsconfig.json",
+      "addons/xterm-addon-fit/src/tsconfig.json",
+      "addons/xterm-addon-search/src/tsconfig.json",
+      "addons/xterm-addon-unicode11/src/tsconfig.json",
+      "addons/xterm-addon-web-links/src/tsconfig.json",
+      "addons/xterm-addon-webgl/src/tsconfig.json",
+      "addons/xterm-addon-serialize/src/tsconfig.json",
+      "addons/xterm-addon-serialize/benchmark/tsconfig.json"
+    ],
+    "sourceType": "module"
+  },
+  "ignorePatterns": [
+    "**/typings/*.d.ts"
+  ],
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "@typescript-eslint/array-type": [
+      "error",
+      {
+        "default": "array-simple",
+        "readonly": "generic"
+      }
+    ],
+    "@typescript-eslint/class-name-casing": "error",
+    "@typescript-eslint/consistent-type-definitions": "error",
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true
+      }
+    ],
+    "@typescript-eslint/indent": [
+      "error",
+      2
+    ],
+    "@typescript-eslint/interface-name-prefix": [
+      "error",
+      "always"
+    ],
+    "@typescript-eslint/member-delimiter-style": [
+      "error",
+      {
+        "multiline": {
+          "delimiter": "semi",
+          "requireLast": true
+        },
+        "singleline": {
+          "delimiter": "comma",
+          "requireLast": false
+        }
+      }
+    ],
+    "@typescript-eslint/naming-convention": [
+      "error",
+      { "selector": "default", "format": ["camelCase"] },
+      // variableLike
+      { "selector": "variable", "format": ["camelCase", "UPPER_CASE"] },
+      { "selector": "variable", "filter": "^I.+Service$", "format": ["PascalCase"], "prefix": ["I"] },
+      // memberLike
+      { "selector": "memberLike", "modifiers": ["private"], "format": ["camelCase"], "leadingUnderscore": "require" },
+      { "selector": "memberLike", "modifiers": ["protected"], "format": ["camelCase"], "leadingUnderscore": "require" },
+      { "selector": "enumMember", "format": ["UPPER_CASE"] },
+      // memberLike - Allow enum-like objects to use UPPER_CASE
+      { "selector": "property", "modifiers": ["public"], "format": ["camelCase", "UPPER_CASE"] },
+      { "selector": "method", "modifiers": ["public"], "format": ["camelCase", "UPPER_CASE"] },
+      // typeLike
+      { "selector": "typeLike", "format": ["PascalCase"] },
+      { "selector": "interface", "format": ["PascalCase"], "prefix": ["I"] }
+    ],
+    "@typescript-eslint/prefer-namespace-keyword": "error",
+    "@typescript-eslint/type-annotation-spacing": "error",
+    "@typescript-eslint/quotes": [
+      "error",
+      "single",
+      { "allowTemplateLiterals": true }
+    ],
+    "@typescript-eslint/semi": [
+      "error",
+      "always"
+    ],
+    "comma-dangle": [
+      "error",
+      {
+        "objects": "never",
+        "arrays": "never",
+        "functions": "never"
+      }
+    ],
+    "curly": [
+      "error",
+      "multi-line"
+    ],
+    "eol-last": "error",
+    "eqeqeq": [
+      "error",
+      "always"
+    ],
+    "keyword-spacing": "error",
+    "new-parens": "error",
+    "no-duplicate-imports": "error",
+    "no-else-return": [
+      "error",
+      {
+        "allowElseIf": false
+      }
+    ],
+    "no-eval": "error",
+    "no-irregular-whitespace": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          ".*\\/out\\/.*"
+        ]
+      }
+    ],
+    "no-trailing-spaces": "error",
+    "no-unsafe-finally": "error",
+    "no-var": "error",
+    "one-var": [
+      "error",
+      "never"
+    ],
+    "prefer-const": "error",
+    "spaced-comment": [
+      "error",
+      "always",
+      {
+        "markers": ["/"],
+        "exceptions": ["-"]
+      }
+    ]
+  }
+}

.npmignore

@@ -42,7 +42,6 @@
 *.test.js
 *.test.js.map
 lib/test/
-tslint.json
 webpack.config.js
 
 docs/

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "typescript.preferences.quoteStyle": "single",
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+    "typescript.preferences.importModuleSpecifier": "non-relative",
+    "typescript.preferences.quoteStyle": "single"
 }

README.md

@@ -156,6 +156,11 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**tty-share**](https://tty-share.com): Extremely simple terminal sharing over the Internet.
 - [**Ten Hands**](https://github.com/saisandeepvaddi/ten-hands): One place to run your command-line tasks.
 - [**WebAssembly.sh**](https://webassembly.sh): A WebAssembly WASI browser terminal
+- [**Gus**](https://gus.jp): A shared coding pad where you can run Python with xterm.js
+- [**Linode**](https://linode.com): Linode uses xterm.js to provide users a web console for their Linode instances.
+- [**FluffOS**](https://www.fluffos.info): Active maintained LPMUD driver with websocket support.
+- [**x-terminal**](https://atom.io/packages/x-terminal): Atom plugin for providing terminals inside your Atom workspace.
+- [**CoCalc**](https://cocalc.com/): Lots of free software pre-installed, to chat, collaborate, develop, program, publish, research, share, teach, in C++, HTML, Julia, Jupyter, LaTeX, Markdown, Python, R, SageMath, Scala, ...
 
 [And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
 

addons/xterm-addon-attach/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-attach",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-attach/src/AttachAddon.api.ts

@@ -3,77 +3,51 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
-import { assert } from 'chai';
-import { ITerminalOptions } from 'xterm';
 import WebSocket = require('ws');
+import { openTerminal, pollFor, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
 describe('AttachAddon', () => {
   before(async function(): Promise<any> {
-    this.timeout(20000);
-    browser = await puppeteer.launch({
-      headless: process.argv.indexOf('--headless') !== -1,
-      args: [`--window-size=${width},${height}`, `--no-sandbox`]
+    const browserType = getBrowserType();
+    browser = await browserType.launch({ dumpio: true,
+      headless: process.argv.indexOf('--headless') !== -1
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
   });
 
   after(async () => {
     await browser.close();
   });
 
-  beforeEach(async function(): Promise<any> {
-    this.timeout(20000);
-    await page.goto(APP);
-  });
+  beforeEach(async () => await page.goto(APP));
 
   it('string', async function(): Promise<any> {
-    this.timeout(20000);
-    await openTerminal({ rendererType: 'dom' });
+    await openTerminal(page, { rendererType: 'dom' });
     const port = 8080;
     const server = new WebSocket.Server({ port });
     server.on('connection', socket => socket.send('foo'));
     await page.evaluate(`window.term.loadAddon(new window.AttachAddon(new WebSocket('ws://localhost:${port}')))`);
-    await pollFor(page, `window.term.buffer.getLine(0).translateToString(true)`, 'foo');
+    await pollFor(page, `window.term.buffer.active.getLine(0).translateToString(true)`, 'foo');
     server.close();
   });
 
   it('utf8', async function(): Promise<any> {
-    this.timeout(20000);
-    await openTerminal({ rendererType: 'dom' });
+    await openTerminal(page, { rendererType: 'dom' });
     const port = 8080;
     const server = new WebSocket.Server({ port });
     const data = new Uint8Array([102, 111, 111]);
     server.on('connection', socket => socket.send(data));
     await page.evaluate(`window.term.loadAddon(new window.AttachAddon(new WebSocket('ws://localhost:${port}')))`);
-    await pollFor(page, `window.term.buffer.getLine(0).translateToString(true)`, 'foo');
+    await pollFor(page, `window.term.buffer.active.getLine(0).translateToString(true)`, 'foo');
     server.close();
   });
 });
-
-async function openTerminal(options: ITerminalOptions = {}): Promise<void> {
-  await page.evaluate(`window.term = new Terminal(${JSON.stringify(options)})`);
-  await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
-  if (options.rendererType === 'dom') {
-    await page.waitForSelector('.xterm-rows');
-  } else {
-    await page.waitForSelector('.xterm-text-layer');
-  }
-}
-
-async function pollFor(page: puppeteer.Page, fn: string, val: any): Promise<void> {
-  const result = await page.evaluate(fn);
-  if (result !== val) {
-    return new Promise<void>(r => {
-      setTimeout(() => r(pollFor(page, fn, val)), 10);
-    });
-  }
-}

addons/xterm-addon-attach/src/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2015",
+    "target": "es5",
     "lib": [
       "dom",
       "es2015"
@@ -10,7 +10,11 @@
     "outDir": "../out",
     "sourceMap": true,
     "removeComments": true,
-    "strict": true
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../out-test/api/TestUtils"
+    ]
   },
   "include": [
     "./**/*",

addons/xterm-addon-fit/src/FitAddon.api.ts

@@ -3,28 +3,27 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { assert } from 'chai';
-import { ITerminalOptions } from 'xterm';
+import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 1024;
 const height = 768;
 
 describe('FitAddon', () => {
   before(async function(): Promise<any> {
-    this.timeout(20000);
-    browser = await puppeteer.launch({
-      headless: process.argv.indexOf('--headless') !== -1,
-      args: [`--window-size=${width},${height}`, `--no-sandbox`]
+    const browserType = getBrowserType();
+    browser = await browserType.launch({ dumpio: true,
+      headless: process.argv.indexOf('--headless') !== -1
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
     await page.goto(APP);
-    await openTerminal();
+    await openTerminal(page);
   });
 
   after(async () => {
@@ -43,18 +42,18 @@ describe('FitAddon', () => {
 
     it('default', async function(): Promise<any> {
       await loadFit();
-      assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
-        cols: 87,
-        rows: 26
-      });
+      const dimensions: {cols: number, rows: number} = await page.evaluate(`window.fit.proposeDimensions()`);
+      assert.equal(dimensions.cols, 87);
+      assert.isAbove(dimensions.rows, 24);
+      assert.isBelow(dimensions.rows, 29);
     });
 
     it('width', async function(): Promise<any> {
       await loadFit(1008);
-      assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
-        cols: 110,
-        rows: 26
-      });
+      const dimensions: {cols: number, rows: number} = await page.evaluate(`window.fit.proposeDimensions()`);
+      assert.equal(dimensions.cols, 110);
+      assert.isAbove(dimensions.rows, 24);
+      assert.isBelow(dimensions.rows, 29);
     });
 
     it('small', async function(): Promise<any> {
@@ -74,15 +73,21 @@ describe('FitAddon', () => {
     it('default', async function(): Promise<any> {
       await loadFit();
       await page.evaluate(`window.fit.fit()`);
-      assert.equal(await page.evaluate(`window.term.cols`), 87);
-      assert.equal(await page.evaluate(`window.term.rows`), 26);
+      const cols: number = await page.evaluate(`window.term.cols`);
+      const rows: number = await page.evaluate(`window.term.rows`);
+      assert.equal(cols, 87);
+      assert.isAbove(rows, 24);
+      assert.isBelow(rows, 29);
     });
 
     it('width', async function(): Promise<any> {
       await loadFit(1008);
       await page.evaluate(`window.fit.fit()`);
-      assert.equal(await page.evaluate(`window.term.cols`), 110);
-      assert.equal(await page.evaluate(`window.term.rows`), 26);
+      const cols: number = await page.evaluate(`window.term.cols`);
+      const rows: number = await page.evaluate(`window.term.rows`);
+      assert.equal(cols, 110);
+      assert.isAbove(rows, 24);
+      assert.isBelow(rows, 29);
     });
 
     it('small', async function(): Promise<any> {
@@ -106,13 +111,3 @@ async function loadFit(width: number = 800, height: number = 450): Promise<void>
 async function unloadFit(): Promise<void> {
   await page.evaluate(`window.fit.dispose();`);
 }
-
-async function openTerminal(options: ITerminalOptions = {}): Promise<void> {
-  await page.evaluate(`window.term = new Terminal(${JSON.stringify(options)})`);
-  await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
-  if (options.rendererType === 'dom') {
-    await page.waitForSelector('.xterm-rows');
-  } else {
-    await page.waitForSelector('.xterm-text-layer');
-  }
-}

addons/xterm-addon-fit/src/FitAddon.ts

@@ -38,7 +38,7 @@ export class FitAddon implements ITerminalAddon {
     }
 
     // TODO: Remove reliance on private API
-    const core = (<any>this._terminal)._core;
+    const core = (this._terminal as any)._core;
 
     // Force a full render
     if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) {
@@ -57,7 +57,7 @@ export class FitAddon implements ITerminalAddon {
     }
 
     // TODO: Remove reliance on private API
-    const core = (<any>this._terminal)._core;
+    const core = (this._terminal as any)._core;
 
     const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
     const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));

addons/xterm-addon-fit/src/tsconfig.json

@@ -10,7 +10,11 @@
     "outDir": "../out",
     "sourceMap": true,
     "removeComments": true,
-    "strict": true
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../out-test/api/TestUtils"
+    ]
   },
   "include": [
     "./**/*",

addons/xterm-addon-search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-search",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

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

@@ -3,31 +3,29 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { assert } from 'chai';
-import { ITerminalOptions } from 'xterm';
 import { readFile } from 'fs';
 import { resolve } from 'path';
+import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
-describe('Search Tests', function (): void {
-  this.timeout(20000);
-
-  before(async function (): Promise<any> {
-    browser = await puppeteer.launch({
-      headless: process.argv.indexOf('--headless') !== -1,
-      args: [`--window-size=${width},${height}`, `--no-sandbox`]
+describe('Search Tests', function(): void {
+  before(async function(): Promise<any> {
+    const browserType = getBrowserType();
+    browser = await browserType.launch({ dumpio: true,
+      headless: process.argv.indexOf('--headless') !== -1
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
     await page.goto(APP);
-    await openTerminal();
+    await openTerminal(page);
     await page.evaluate(`window.search = new SearchAddon();`);
     await page.evaluate(`window.term.loadAddon(window.search);`);
   });
@@ -41,7 +39,7 @@ describe('Search Tests', function (): void {
   });
 
   it('Simple Search', async () => {
-    await writeSync('dafhdjfldshafhldsahfkjhldhjkftestlhfdsakjfhdjhlfdsjkafhjdlk');
+    await writeSync(page, 'dafhdjfldshafhldsahfkjhldhjkftestlhfdsakjfhdjhlfdsjkafhjdlk');
     assert.deepEqual(await page.evaluate(`window.search.findNext('test')`), true);
     assert.deepEqual(await page.evaluate(`window.term.getSelection()`), 'test');
   });
@@ -54,16 +52,16 @@ describe('Search Tests', function (): void {
       }
       dataString += makeData(50);
     }
-    await writeSync(dataString);
+    await writeSync(page, dataString);
     assert.deepEqual(await page.evaluate(`window.search.findNext('$^1_3{}test$#')`), true);
     assert.deepEqual(await page.evaluate(`window.term.getSelection()`), '$^1_3{}test$#');
   });
-  it ('Incremental Find Previous', async () => {
+  it('Incremental Find Previous', async () => {
     await page.evaluate(`window.term.writeln('package.jsonc\\n')`);
-    await writeSync('package.json pack package.lock');
+    await writeSync(page, 'package.json pack package.lock');
     await page.evaluate(`window.search.findPrevious('pack', {incremental: true})`);
-    let line: string = await page.evaluate(`window.term.buffer.getLine(window.term.getSelectionPosition().startRow).translateToString()`);
-    let selectionPosition: {startColumn: number, startRow: number, endColumn: number, endRow: number} = await page.evaluate(`window.term.getSelectionPosition()`);
+    let line: string = await page.evaluate(`window.term.buffer.active.getLine(window.term.getSelectionPosition().startRow).translateToString()`);
+    let selectionPosition: { startColumn: number, startRow: number, endColumn: number, endRow: number } = await page.evaluate(`window.term.getSelectionPosition()`);
     // We look further ahead in the line to ensure that pack was selected from package.lock
     assert.deepEqual(line.substring(selectionPosition.startColumn, selectionPosition.endColumn + 8), 'package.lock');
     await page.evaluate(`window.search.findPrevious('package.j', {incremental: true})`);
@@ -71,16 +69,16 @@ describe('Search Tests', function (): void {
     assert.deepEqual(line.substring(selectionPosition.startColumn, selectionPosition.endColumn + 3), 'package.json');
     await page.evaluate(`window.search.findPrevious('package.jsonc', {incremental: true})`);
     // We have to reevaluate line because it should have switched starting rows at this point
-    line = await page.evaluate(`window.term.buffer.getLine(window.term.getSelectionPosition().startRow).translateToString()`);
+    line = await page.evaluate(`window.term.buffer.active.getLine(window.term.getSelectionPosition().startRow).translateToString()`);
     selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
     assert.deepEqual(line.substring(selectionPosition.startColumn, selectionPosition.endColumn), 'package.jsonc');
   });
-  it ('Incremental Find Next', async () => {
+  it('Incremental Find Next', async () => {
     await page.evaluate(`window.term.writeln('package.lock pack package.json package.ups\\n')`);
-    await writeSync('package.jsonc');
+    await writeSync(page, 'package.jsonc');
     await page.evaluate(`window.search.findNext('pack', {incremental: true})`);
-    let line: string = await page.evaluate(`window.term.buffer.getLine(window.term.getSelectionPosition().startRow).translateToString()`);
-    let selectionPosition: {startColumn: number, startRow: number, endColumn: number, endRow: number} = await page.evaluate(`window.term.getSelectionPosition()`);
+    let line: string = await page.evaluate(`window.term.buffer.active.getLine(window.term.getSelectionPosition().startRow).translateToString()`);
+    let selectionPosition: { startColumn: number, startRow: number, endColumn: number, endRow: number } = await page.evaluate(`window.term.getSelectionPosition()`);
     // We look further ahead in the line to ensure that pack was selected from package.lock
     assert.deepEqual(line.substring(selectionPosition.startColumn, selectionPosition.endColumn + 8), 'package.lock');
     await page.evaluate(`window.search.findNext('package.j', {incremental: true})`);
@@ -88,12 +86,12 @@ describe('Search Tests', function (): void {
     assert.deepEqual(line.substring(selectionPosition.startColumn, selectionPosition.endColumn + 3), 'package.json');
     await page.evaluate(`window.search.findNext('package.jsonc', {incremental: true})`);
     // We have to reevaluate line because it should have switched starting rows at this point
-    line = await page.evaluate(`window.term.buffer.getLine(window.term.getSelectionPosition().startRow).translateToString()`);
+    line = await page.evaluate(`window.term.buffer.active.getLine(window.term.getSelectionPosition().startRow).translateToString()`);
     selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
     assert.deepEqual(line.substring(selectionPosition.startColumn, selectionPosition.endColumn), 'package.jsonc');
   });
   it('Simple Regex', async () => {
-    await writeSync('abc123defABCD');
+    await writeSync(page, 'abc123defABCD');
     await page.evaluate(`window.search.findNext('[a-z]+', {regex: true})`);
     assert.deepEqual(await page.evaluate(`window.term.getSelection()`), 'abc');
     await page.evaluate(`window.search.findNext('[A-Z]+', {regex: true, caseSensitive: true})`);
@@ -101,7 +99,7 @@ describe('Search Tests', function (): void {
   });
 
   it('Search for single result twice should not unselect it', async () => {
-    await writeSync('abc def');
+    await writeSync(page, 'abc def');
     assert.deepEqual(await page.evaluate(`window.search.findNext('abc')`), true);
     assert.deepEqual(await page.evaluate(`window.term.getSelection()`), 'abc');
     assert.deepEqual(await page.evaluate(`window.search.findNext('abc')`), true);
@@ -118,7 +116,7 @@ describe('Search Tests', function (): void {
           .replace(/'/g, '\\\'');
       });
       it('should find all occurrences using findNext', async () => {
-        await writeSync(fixture);
+        await writeSync(page, fixture);
         assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
         let selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
         assert.deepEqual(selectionPosition, { startColumn: 24, startRow: 53, endColumn: 30, endRow: 53 });
@@ -152,7 +150,7 @@ describe('Search Tests', function (): void {
         assert.deepEqual(selectionPosition, { startColumn: 24, startRow: 53, endColumn: 30, endRow: 53 });
       });
       it('should find all occurrences using findPrevious', async () => {
-        await writeSync(fixture);
+        await writeSync(page, fixture);
         assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
         let selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
         assert.deepEqual(selectionPosition, { startColumn: 11, startRow: 136, endColumn: 17, endRow: 136 });
@@ -189,20 +187,6 @@ describe('Search Tests', function (): void {
   });
 });
 
-async function openTerminal(options: ITerminalOptions = {}): Promise<void> {
-  await page.evaluate(`window.term = new Terminal(${JSON.stringify(options)})`);
-  await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
-  if (options.rendererType === 'dom') {
-    await page.waitForSelector('.xterm-rows');
-  } else {
-    await page.waitForSelector('.xterm-text-layer');
-  }
-}
-
-async function writeSync(data: string): Promise<void> {
-  return page.evaluate(`new Promise(resolve => window.term.write('${data}', resolve))`);
-}
-
 function makeData(length: number): string {
   let result = '';
   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

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

@@ -87,7 +87,7 @@ export class SearchAddon implements ITerminalAddon {
     // Search from startRow + 1 to end
     if (!result) {
 
-      for (let y = startRow + 1; y < this._terminal.buffer.baseY + this._terminal.rows; y++) {
+      for (let y = startRow + 1; y < this._terminal.buffer.active.baseY + this._terminal.rows; y++) {
         searchPosition.startRow = y;
         searchPosition.startCol = 0;
         // If the current line is wrapped line, increase index of column to ignore the previous scan
@@ -135,7 +135,7 @@ export class SearchAddon implements ITerminalAddon {
     }
 
     const isReverseSearch = true;
-    let startRow = this._terminal.buffer.baseY + this._terminal.rows;
+    let startRow = this._terminal.buffer.active.baseY + this._terminal.rows;
     let startCol = this._terminal.cols;
     let result: ISearchResult | undefined;
     const incremental = searchOptions ? searchOptions.incremental : false;
@@ -174,8 +174,8 @@ export class SearchAddon implements ITerminalAddon {
       }
     }
     // If we hit the top and didn't search from the very bottom wrap back down
-    if (!result && startRow !== (this._terminal.buffer.baseY + this._terminal.rows)) {
-      for (let y = (this._terminal.buffer.baseY + this._terminal.rows); y > startRow; y--) {
+    if (!result && startRow !== (this._terminal.buffer.active.baseY + this._terminal.rows)) {
+      for (let y = (this._terminal.buffer.active.baseY + this._terminal.rows); y > startRow; y--) {
         searchPosition.startRow = y;
         result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
         if (result) {
@@ -197,7 +197,7 @@ export class SearchAddon implements ITerminalAddon {
   private _initLinesCache(): void {
     const terminal = this._terminal!;
     if (!this._linesCache) {
-      this._linesCache = new Array(terminal.buffer.length);
+      this._linesCache = new Array(terminal.buffer.active.length);
       this._cursorMoveListener = terminal.onCursorMove(() => this._destroyLinesCache());
       this._resizeListener = terminal.onResize(() => this._destroyLinesCache());
     }
@@ -249,7 +249,7 @@ export class SearchAddon implements ITerminalAddon {
     const col = searchPosition.startCol;
 
     // Ignore wrapped lines, only consider on unwrapped line (first row of command string).
-    const firstLine = terminal.buffer.getLine(row);
+    const firstLine = terminal.buffer.active.getLine(row);
     if (firstLine && firstLine.isWrapped) {
       if (isReverseSearch) {
         searchPosition.startCol += terminal.cols;
@@ -311,7 +311,7 @@ export class SearchAddon implements ITerminalAddon {
         return;
       }
 
-      const line = terminal.buffer.getLine(row);
+      const line = terminal.buffer.active.getLine(row);
 
       if (line) {
         for (let i = 0; i < resultIndex; i++) {
@@ -320,13 +320,13 @@ export class SearchAddon implements ITerminalAddon {
             break;
           }
           // Adjust the searchIndex to normalize emoji into single chars
-          const char = cell.char;
+          const char = cell.getChars();
           if (char.length > 1) {
             resultIndex -= char.length - 1;
           }
           // Adjust the searchIndex for empty characters following wide unicode
           // chars (eg. CJK)
-          const charWidth = cell.width;
+          const charWidth = cell.getWidth();
           if (charWidth === 0) {
             resultIndex++;
           }
@@ -354,9 +354,9 @@ export class SearchAddon implements ITerminalAddon {
     let lineWrapsToNext: boolean;
 
     do {
-      const nextLine = terminal.buffer.getLine(lineIndex + 1);
+      const nextLine = terminal.buffer.active.getLine(lineIndex + 1);
       lineWrapsToNext = nextLine ? nextLine.isWrapped : false;
-      const line = terminal.buffer.getLine(lineIndex);
+      const line = terminal.buffer.active.getLine(lineIndex);
       if (!line) {
         break;
       }
@@ -380,8 +380,8 @@ export class SearchAddon implements ITerminalAddon {
     }
     terminal.select(result.col, result.row, result.term.length);
     // If it is not in the viewport then we scroll else it just gets selected
-    if (result.row >= (terminal.buffer.viewportY + terminal.rows) || result.row < terminal.buffer.viewportY) {
-      let scroll = result.row - terminal.buffer.viewportY;
+    if (result.row >= (terminal.buffer.active.viewportY + terminal.rows) || result.row < terminal.buffer.active.viewportY) {
+      let scroll = result.row - terminal.buffer.active.viewportY;
       scroll = scroll - Math.floor(terminal.rows / 2);
       terminal.scrollLines(scroll);
     }

addons/xterm-addon-search/src/tsconfig.json

@@ -10,7 +10,11 @@
     "outDir": "../out",
     "sourceMap": true,
     "removeComments": true,
-    "strict": true
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../out-test/api/TestUtils"
+    ]
   },
   "include": [
     "./**/*",

addons/xterm-addon-serialize/.gitignore

@@ -0,0 +1,3 @@
+lib
+node_modules
+out-benchmark

addons/xterm-addon-serialize/.npmignore

@@ -0,0 +1,5 @@
+**/*.api.js
+**/*.api.ts
+tsconfig.json
+.yarnrc
+webpack.config.js

addons/xterm-addon-serialize/README.md

@@ -0,0 +1,42 @@
+## xterm-addon-serialize
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables xterm.js to serialize a terminal framebuffer into string or html. This addon requires xterm.js v4+.
+
+⚠️ This is an experimental addon that is still under construction ⚠️
+
+### Install
+
+```bash
+npm install --save xterm-addon-serialize
+```
+
+### Usage
+
+```ts
+import { Terminal } from "xterm";
+import { SerializeAddon } from "xterm-addon-serialize";
+
+const terminal = new Terminal();
+const serializeAddon = new SerializeAddon();
+terminal.loadAddon(serializeAddon);
+
+terminal.write("something...", () => {
+  console.log(serializeAddon.serialize());
+});
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts) for more advanced usage.
+
+### Benchmark
+
+⚠️ Ensure you have `lolcat`, `hexdump` programs installed in your computer
+
+```shell
+$ git clone https://github.com/xtermjs/xterm.js.git
+$ cd xterm.js
+$ yarn
+$ cd addons/xterm-addon-serialize
+$ yarn benchmark && yarn benchmark-baseline
+$ # change some code in `xterm-addon-serialize`
+$ yarn benchmark-eval
+```

addons/xterm-addon-serialize/benchmark/SerializeAddon.benchmark.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { perfContext, before, ThroughputRuntimeCase } from 'xterm-benchmark';
+
+import { spawn } from 'node-pty';
+import { Utf8ToUtf32, stringFromCodePoint } from 'common/input/TextDecoder';
+import { Terminal } from 'public/Terminal';
+import { SerializeAddon } from 'SerializeAddon';
+
+class TestTerminal extends Terminal {
+  writeSync(data: string): void {
+    (this as any)._core.writeSync(data);
+  }
+}
+
+perfContext('Terminal: sh -c "dd if=/dev/random count=40 bs=1k | hexdump | lolcat -f"', () => {
+  let content = '';
+  let contentUtf8: Uint8Array;
+
+  before(async () => {
+    const p = spawn('sh', ['-c', 'dd if=/dev/random count=40 bs=1k | hexdump | lolcat -f'], {
+      name: 'xterm-256color',
+      cols: 80,
+      rows: 25,
+      cwd: process.env.HOME,
+      env: process.env,
+      encoding: (null as unknown as string) // needs to be fixed in node-pty
+    });
+    const chunks: Buffer[] = [];
+    let length = 0;
+    p.on('data', data => {
+      chunks.push(data as unknown as Buffer);
+      length += data.length;
+    });
+    await new Promise(resolve => p.on('exit', () => resolve()));
+    contentUtf8 = Buffer.concat(chunks, length);
+    // translate to content string
+    const buffer = new Uint32Array(contentUtf8.length);
+    const decoder = new Utf8ToUtf32();
+    const codepoints = decoder.decode(contentUtf8, buffer);
+    for (let i = 0; i < codepoints; ++i) {
+      content += stringFromCodePoint(buffer[i]);
+      // peek into content to force flat repr in v8
+      if (!(i % 10000000)) {
+        content[i];
+      }
+    }
+  });
+
+  perfContext('serialize', () => {
+    let terminal: TestTerminal;
+    const serializeAddon = new SerializeAddon();
+    before(() => {
+      terminal = new TestTerminal({ cols: 80, rows: 25, scrollback: 5000 });
+      serializeAddon.activate(terminal);
+      terminal.writeSync(content);
+    });
+    new ThroughputRuntimeCase('', () => {
+      return { payloadSize: serializeAddon.serialize().length };
+    }, { fork: false }).showAverageThroughput();
+  });
+});

addons/xterm-addon-serialize/benchmark/benchmark.json

@@ -0,0 +1,19 @@
+{
+  "APP_PATH": ".benchmark",
+  "evalConfig": {
+    "tolerance": {
+      "*": [0.75, 1.5],
+      "*.dev": [0.01, 1.5],
+      "*.cv": [0.01, 1.5],
+      "EscapeSequenceParser.benchmark.js.*.averageThroughput.mean": [0.9, 5]
+    },
+    "skip": [
+      "*.median",
+      "*.runs",
+      "*.dev",
+      "*.cv",
+      "EscapeSequenceParser.benchmark.js.*.averageRuntime",
+      "Terminal.benchmark.js.*.averageRuntime"
+    ]
+  } 
+}

addons/xterm-addon-serialize/benchmark/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "es6"],
+    "outDir": "../out-benchmark",
+    "types": ["../../../node_modules/@types/node"],
+    "moduleResolution": "node",
+    "strict": false,
+    "target": "es2015",
+    "module": "commonjs",
+    "baseUrl": ".",
+    "paths": {
+      "common/*": ["../../../src/common/*"],
+      "browser/*": ["../../../src/browser/*"],
+      "public/*": ["../../../src/public/*"],
+      "Terminal": ["../../../src/Terminal"],
+      "SerializeAddon": ["../src/SerializeAddon"]
+    }
+  },
+  "include": ["../**/*", "../../../typings/xterm.d.ts", "../../../out/**/*"],
+  "exclude": ["../../../**/*test.ts", "../../**/*api.ts"],
+  "references": [
+    { "path": "../../../src/common" },
+    { "path": "../../../src/browser" }
+  ]
+}

addons/xterm-addon-serialize/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "xterm-addon-serialize",
+  "version": "0.2.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/xterm-addon-serialize.js",
+  "types": "typings/xterm-addon-serialize.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p src",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package",
+    "benchmark": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json",
+    "benchmark-baseline": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json --baseline out-benchmark/addons/xterm-addon-serialize/benchmark/*benchmark.js",
+    "benchmark-eval": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json --eval out-benchmark/addons/xterm-addon-serialize/benchmark/*benchmark.js"
+  },
+  "peerDependencies": {
+    "xterm": "^4.0.0"
+  }
+}

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

@@ -0,0 +1,340 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
+
+const APP = 'http://127.0.0.1:3000/test';
+
+let browser: Browser;
+let page: Page;
+const width = 800;
+const height = 600;
+
+describe('SerializeAddon', () => {
+  before(async function(): Promise<any> {
+    const browserType = getBrowserType();
+    browser = await browserType.launch({ dumpio: true,
+      headless: process.argv.indexOf('--headless') !== -1
+    });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
+    await page.goto(APP);
+    await openTerminal(page, { rows: 10, cols: 10, rendererType: 'dom' });
+    await page.evaluate(`
+      window.serializeAddon = new SerializeAddon();
+      window.term.loadAddon(window.serializeAddon);
+    `);
+  });
+
+  after(async () => await browser.close());
+  beforeEach(async () => await page.evaluate(`window.term.reset()`));
+
+  it('empty content', async function(): Promise<any> {
+    const rows = 10;
+    const cols = 10;
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), '');
+  });
+
+  it('trim last empty lines', async function(): Promise<any> {
+    const cols = 10;
+    const lines = [
+      '',
+      '',
+      digitsString(cols),
+      digitsString(cols),
+      '',
+      '',
+      digitsString(cols),
+      digitsString(cols),
+      '',
+      '',
+      ''
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.slice(0, 8).join('\r\n'));
+  });
+
+  it('digits content', async function(): Promise<any> {
+    const rows = 10;
+    const cols = 10;
+    const digitsLine = digitsString(cols);
+    const lines = newArray<string>(digitsLine, rows);
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize half rows of content', async function(): Promise<any> {
+    const rows = 10;
+    const halfRows = rows >> 1;
+    const cols = 10;
+    const lines = newArray<string>((index: number) => digitsString(cols, index), rows);
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize(${halfRows});`), lines.slice(halfRows, 2 * halfRows).join('\r\n'));
+  });
+
+  it('serialize 0 rows of content', async function(): Promise<any> {
+    const rows = 10;
+    const cols = 10;
+    const lines = newArray<string>((index: number) => digitsString(cols, index), rows);
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize(0);`), '');
+  });
+
+  it('serialize all rows of content with color16', async function(): Promise<any> {
+    const cols = 10;
+    const color16 = [
+      30, 31, 32, 33, 34, 35, 36, 37, // Set foreground color
+      90, 91, 92, 93, 94, 95, 96, 97,
+      40, 41, 42, 43, 44, 45, 46, 47, // Set background color
+      100, 101, 103, 104, 105, 106, 107
+    ];
+    const rows = color16.length;
+    const lines = newArray<string>(
+      (index: number) => digitsString(cols, index, `\x1b[${color16[index % color16.length]}m`),
+      rows
+    );
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize all rows of content with fg/bg flags', async function(): Promise<any> {
+    const cols = 10;
+    const line = '+'.repeat(cols);
+    const lines: string[] = [
+      mkSGR(FG_P16_GREEN) + line,  // Workaround: If we clear all flags a the end, serialize will use \x1b[0m to clear instead of the sepcific disable sequence
+      mkSGR(INVERSE) + line,
+      mkSGR(BOLD) + line,
+      mkSGR(UNDERLINED) + line,
+      mkSGR(BLINK) + line,
+      mkSGR(INVISIBLE) + line,
+      mkSGR(NO_INVERSE) + line,
+      mkSGR(NO_BOLD) + line,
+      mkSGR(NO_UNDERLINED) + line,
+      mkSGR(NO_BLINK) + line,
+      mkSGR(NO_INVISIBLE) + line
+    ];
+    const rows = lines.length;
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize all rows of content with color256', async function(): Promise<any> {
+    const rows = 32;
+    const cols = 10;
+    const lines = newArray<string>(
+      (index: number) => digitsString(cols, index, `\x1b[38;5;${16 + index}m`),
+      rows
+    );
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize all rows of content with color16 and style separately', async function(): Promise<any> {
+    const cols = 10;
+    const line = '+'.repeat(cols);
+    const lines: string[] = [
+      mkSGR(FG_P16_RED) + line,     // fg Red,
+      mkSGR(UNDERLINED) + line,     // fg Red, Underlined
+      mkSGR(FG_P16_GREEN) + line,   // fg Green, Underlined
+      mkSGR(INVERSE) + line,        // fg Green, Underlined, Inverse
+      mkSGR(NO_INVERSE) + line,     // fg Green, Underlined
+      mkSGR(INVERSE) + line,        // fg Green, Underlined, Inverse
+      mkSGR(BG_P16_YELLOW) + line,  // fg Green, bg Yellow, Underlined, Inverse
+      mkSGR(FG_RESET) + line,       // bg Yellow, Underlined, Inverse
+      mkSGR(BG_RESET) + line,       // Underlined, Inverse
+      mkSGR(NORMAL) + line          // Back to normal
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize all rows of content with color16 and style together', async function(): Promise<any> {
+    const cols = 10;
+    const line = '+'.repeat(cols);
+    const lines: string[] = [
+      mkSGR(FG_P16_RED) + line,                   // fg Red
+      mkSGR(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
+      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
+      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
+      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
+      mkSGR(BG_RESET) + line,                     // Italic
+      mkSGR(NORMAL) + line,                       // Back to normal
+      mkSGR(FG_P16_RED) + line,                   // fg Red
+      mkSGR(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
+      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
+      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
+      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
+      mkSGR(BG_RESET) + line                      // Italic
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize all rows of content with color256 and style separately', async function(): Promise<any> {
+    const cols = 10;
+    const line = '+'.repeat(cols);
+    const lines: string[] = [
+      mkSGR(FG_P256_RED) + line,    // fg Red 256,
+      mkSGR(UNDERLINED) + line,     // fg Red 256, Underlined
+      mkSGR(FG_P256_GREEN) + line,  // fg Green 256, Underlined
+      mkSGR(INVERSE) + line,        // fg Green 256, Underlined, Inverse
+      mkSGR(NO_INVERSE) + line,     // fg Green 256, Underlined
+      mkSGR(INVERSE) + line,        // fg Green 256, Underlined, Inverse
+      mkSGR(BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256, Underlined, Inverse
+      mkSGR(FG_RESET) + line,       // bg Yellow 256, Underlined, Inverse
+      mkSGR(BG_RESET) + line,       // Underlined, Inverse
+      mkSGR(NORMAL) + line          // Back to normal
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize all rows of content with color256 and style together', async function(): Promise<any> {
+    const cols = 10;
+    const line = '+'.repeat(cols);
+    const lines: string[] = [
+      mkSGR(FG_P256_RED) + line,                    // fg Red 256
+      mkSGR(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
+      mkSGR(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
+      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
+      mkSGR(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
+      mkSGR(BG_RESET) + line,                       // Italic
+      mkSGR(NORMAL) + line,                         // Back to normal
+      mkSGR(FG_P256_RED) + line,                    // fg Red 256
+      mkSGR(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
+      mkSGR(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
+      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
+      mkSGR(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
+      mkSGR(BG_RESET) + line                        // Italic
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize all rows of content with colorRGB and style separately', async function(): Promise<any> {
+    const cols = 10;
+    const line = '+'.repeat(cols);
+    const lines: string[] = [
+      mkSGR(FG_RGB_RED) + line,     // fg Red RGB,
+      mkSGR(UNDERLINED) + line,     // fg Red RGB, Underlined
+      mkSGR(FG_RGB_GREEN) + line,   // fg Green RGB, Underlined
+      mkSGR(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
+      mkSGR(NO_INVERSE) + line,     // fg Green RGB, Underlined
+      mkSGR(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
+      mkSGR(BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB, Underlined, Inverse
+      mkSGR(FG_RESET) + line,       // bg Yellow RGB, Underlined, Inverse
+      mkSGR(BG_RESET) + line,       // Underlined, Inverse
+      mkSGR(NORMAL) + line          // Back to normal
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize all rows of content with colorRGB and style together', async function(): Promise<any> {
+    const cols = 10;
+    const line = '+'.repeat(cols);
+    const lines: string[] = [
+      mkSGR(FG_RGB_RED) + line,                   // fg Red RGB
+      mkSGR(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
+      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
+      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
+      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
+      mkSGR(BG_RESET) + line,                     // Italic
+      mkSGR(NORMAL) + line,                       // Back to normal
+      mkSGR(FG_RGB_RED) + line,                   // fg Red RGB
+      mkSGR(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
+      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
+      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
+      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
+      mkSGR(BG_RESET) + line                      // Italic
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize tabs correctly', async () => {
+    const lines = [
+      'a\tb',
+      'aa\tc',
+      'aaa\td'
+    ];
+    const expected = [
+      'a\x1b[7Cb',
+      'aa\x1b[6Cc',
+      'aaa\x1b[5Cd'
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), expected.join('\r\n'));
+  });
+});
+
+function newArray<T>(initial: T | ((index: number) => T), count: number): T[] {
+  const array: T[] = new Array<T>(count);
+  for (let i = 0; i < array.length; i++) {
+    if (typeof initial === 'function') {
+      array[i] = (<(index: number) => T>initial)(i);
+    } else {
+      array[i] = <T>initial;
+    }
+  }
+  return array;
+}
+
+function digitsString(length: number, from: number = 0, sgr: string = ''): string {
+  let s = sgr;
+  for (let i = 0; i < length; i++) {
+    s += `${(from++) % 10}`;
+  }
+  return s;
+}
+
+function mkSGR(...seq: string[]): string {
+  return `\x1b[${seq.join(';')}m`;
+}
+
+const NORMAL = '0';
+
+const FG_P16_RED = '31';
+const FG_P16_GREEN = '32';
+const FG_P16_YELLOW = '33';
+const FG_P256_RED = '38;5;196';
+const FG_P256_GREEN = '38;5;46';
+const FG_P256_YELLOW = '38;5;226';
+const FG_RGB_RED = '38;2;255;0;0';
+const FG_RGB_GREEN = '38;2;0;255;0';
+const FG_RGB_YELLOW = '38;2;255;255;0';
+const FG_RESET = '39';
+
+
+const BG_P16_RED = '41';
+const BG_P16_GREEN = '42';
+const BG_P16_YELLOW = '43';
+const BG_P256_RED = '48;5;196';
+const BG_P256_GREEN = '48;5;46';
+const BG_P256_YELLOW = '48;5;226';
+const BG_RGB_RED = '48;2;255;0;0';
+const BG_RGB_GREEN = '48;2;0;255;0';
+const BG_RGB_YELLOW = '48;2;255;255;0';
+const BG_RESET = '49';
+
+const INVERSE = '7';
+const BOLD = '1';
+const UNDERLINED = '4';
+const BLINK = '5';
+const INVISIBLE = '8';
+
+const NO_INVERSE = '27';
+const NO_BOLD = '22';
+const NO_UNDERLINED = '24';
+const NO_BLINK = '25';
+const NO_INVISIBLE = '28';
+
+const ITALIC = '3';
+const DIM = '2';
+
+const NO_ITALIC = '23';
+const NO_DIM = '22';

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

@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * (EXPERIMENTAL) This Addon is still under development
+ */
+
+import { Terminal, ITerminalAddon, IBuffer, IBufferCell } from 'xterm';
+
+function constrain(value: number, low: number, high: number): number {
+  return Math.max(low, Math.min(value, high));
+}
+
+// TODO: Refine this template class later
+abstract class BaseSerializeHandler {
+  constructor(private _buffer: IBuffer) { }
+
+  serialize(startRow: number, endRow: number): string {
+    // we need two of them to flip between old and new cell
+    const cell1 = this._buffer.getNullCell();
+    const cell2 = this._buffer.getNullCell();
+    let oldCell = cell1;
+
+    this._beforeSerialize(endRow - startRow);
+
+    for (let row = startRow; row < endRow; row++) {
+      const line = this._buffer.getLine(row);
+      if (line) {
+        for (let col = 0; col < line.length; col++) {
+          const c = line.getCell(col, oldCell === cell1 ? cell2 : cell1);
+          if (!c) {
+            console.warn(`Can't get cell at row=${row}, col=${col}`);
+            continue;
+          }
+          this._nextCell(c, oldCell, row, col);
+          oldCell = c;
+        }
+      }
+      this._rowEnd(row);
+    }
+
+    this._afterSerialize();
+
+    return this._serializeString();
+  }
+
+  protected _nextCell(cell: IBufferCell, oldCell: IBufferCell, row: number, col: number): void { }
+  protected _rowEnd(row: number): void { }
+  protected _beforeSerialize(rows: number): void { }
+  protected _afterSerialize(): void { }
+  protected _serializeString(): string { return ''; }
+}
+
+function equalFg(cell1: IBufferCell, cell2: IBufferCell): boolean {
+  return cell1.getFgColorMode() === cell2.getFgColorMode()
+    && cell1.getFgColor() === cell2.getFgColor();
+}
+
+function equalBg(cell1: IBufferCell, cell2: IBufferCell): boolean {
+  return cell1.getBgColorMode() === cell2.getBgColorMode()
+    && cell1.getBgColor() === cell2.getBgColor();
+}
+
+function equalFlags(cell1: IBufferCell, cell2: IBufferCell): boolean {
+  return cell1.isInverse() === cell2.isInverse()
+    && cell1.isBold() === cell2.isBold()
+    && cell1.isUnderline() === cell2.isUnderline()
+    && cell1.isBlink() === cell2.isBlink()
+    && cell1.isInvisible() === cell2.isInvisible()
+    && cell1.isItalic() === cell2.isItalic()
+    && cell1.isDim() === cell2.isDim();
+}
+
+class StringSerializeHandler extends BaseSerializeHandler {
+  private _rowIndex: number = 0;
+  private _allRows: string[] = new Array<string>();
+  private _currentRow: string = '';
+  private _nullCellCount: number = 0;
+
+  constructor(buffer: IBuffer) {
+    super(buffer);
+  }
+
+  protected _beforeSerialize(rows: number): void {
+    this._allRows = new Array<string>(rows);
+  }
+
+  protected _rowEnd(row: number): void {
+    this._allRows[this._rowIndex++] = this._currentRow;
+    this._currentRow = '';
+    this._nullCellCount = 0;
+  }
+
+  protected _nextCell(cell: IBufferCell, oldCell: IBufferCell, row: number, col: number): void {
+    const sgrSeq: number[] = [];
+    const fgChanged = !equalFg(cell, oldCell);
+    const bgChanged = !equalBg(cell, oldCell);
+    const flagsChanged = !equalFlags(cell, oldCell);
+
+    if (fgChanged || bgChanged || flagsChanged) {
+      if (cell.isAttributeDefault()) {
+        this._currentRow += '\x1b[0m';
+      } else {
+        if (fgChanged) {
+          const color = cell.getFgColor();
+          if (cell.isFgRGB()) { sgrSeq.push(38, 2, (color >>> 16) & 0xFF, (color >>> 8) & 0xFF, color & 0xFF); }
+          else if (cell.isFgPalette()) {
+            if (color >= 16) { sgrSeq.push(38, 5, color); }
+            else { sgrSeq.push(color & 8 ? 90 + (color & 7) : 30 + (color & 7)); }
+          }
+          else { sgrSeq.push(39); }
+        }
+        if (bgChanged) {
+          const color = cell.getBgColor();
+          if (cell.isBgRGB()) { sgrSeq.push(48, 2, (color >>> 16) & 0xFF, (color >>> 8) & 0xFF, color & 0xFF); }
+          else if (cell.isBgPalette()) {
+            if (color >= 16) { sgrSeq.push(48, 5, color); }
+            else { sgrSeq.push(color & 8 ? 100 + (color & 7) : 40 + (color & 7)); }
+          }
+          else { sgrSeq.push(49); }
+        }
+        if (flagsChanged) {
+          if (cell.isInverse() !== oldCell.isInverse()) { sgrSeq.push(cell.isInverse() ? 7 : 27); }
+          if (cell.isBold() !== oldCell.isBold()) { sgrSeq.push(cell.isBold() ? 1 : 22); }
+          if (cell.isUnderline() !== oldCell.isUnderline()) { sgrSeq.push(cell.isUnderline() ? 4 : 24); }
+          if (cell.isBlink() !== oldCell.isBlink()) { sgrSeq.push(cell.isBlink() ? 5 : 25); }
+          if (cell.isInvisible() !== oldCell.isInvisible()) { sgrSeq.push(cell.isInvisible() ? 8 : 28); }
+          if (cell.isItalic() !== oldCell.isItalic()) { sgrSeq.push(cell.isItalic() ? 3 : 23); }
+          if (cell.isDim() !== oldCell.isDim()) { sgrSeq.push(cell.isDim() ? 2 : 22); }
+        }
+      }
+    }
+
+    if (sgrSeq.length) {
+      this._currentRow += `\x1b[${sgrSeq.join(';')}m`;
+    }
+
+    // Count number of null cells encountered after the last non-null cell and move the cursor
+    // if a non-null cell is found (eg. \t or cursor move)
+    if (cell.getChars() === '') {
+      this._nullCellCount++;
+    } else if (this._nullCellCount > 0) {
+      this._currentRow += `\x1b[${this._nullCellCount}C`;
+      this._nullCellCount = 0;
+    }
+
+    this._currentRow += cell.getChars();
+  }
+
+  protected _serializeString(): string {
+    let rowEnd = this._allRows.length;
+    for (; rowEnd > 0; rowEnd--) {
+      if (this._allRows[rowEnd - 1]) {
+        break;
+      }
+    }
+    return this._allRows.slice(0, rowEnd).join('\r\n');
+  }
+}
+
+export class SerializeAddon implements ITerminalAddon {
+  private _terminal: Terminal | undefined;
+
+  constructor() { }
+
+  public activate(terminal: Terminal): void {
+    this._terminal = terminal;
+  }
+
+  public serialize(rows?: number): string {
+    // TODO: Add re-position cursor support
+    // TODO: Add word wrap mode support
+    // TODO: Add combinedData support
+    if (!this._terminal) {
+      throw new Error('Cannot use addon until it has been loaded');
+    }
+
+    const maxRows = this._terminal.buffer.active.length;
+    const handler = new StringSerializeHandler(this._terminal.buffer.active);
+
+    rows = (rows === undefined) ? maxRows : constrain(rows, 0, maxRows);
+
+    return handler.serialize(maxRows - rows, maxRows);
+  }
+
+  public dispose(): void { }
+}

addons/xterm-addon-serialize/src/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "rootDir": ".",
+    "outDir": "../out",
+    "sourceMap": true,
+    "removeComments": true,
+    "baseUrl": ".",
+    "paths": {
+      "common/*": [
+        "../../../src/common/*"
+      ]
+    },
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/common"
+    }
+  ]
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+
+import { Terminal, ITerminalAddon } from 'xterm';
+
+declare module 'xterm-addon-serialize' {
+  /**
+   * An xterm.js addon that enables web links.
+   */
+  export class SerializeAddon implements ITerminalAddon {
+
+    constructor();
+
+    /**
+     * Activates the addon
+     * @param terminal The terminal the addon is being loaded in.
+     */
+    public activate(terminal: Terminal): void;
+
+    /**
+     * Serializes terminal rows into a string that can be written back to the terminal
+     * to restore the state. The cursor will also be positioned to the correct cell.
+     * When restoring a terminal it is best to do before `Terminal.open` is called
+     * to avoid wasting CPU cycles rendering incomplete frames.
+     * @param rows The number of rows to serialize, starting from the bottom of the
+     * terminal. This defaults to the number of rows in the viewport.
+     */
+    public serialize(rows?: number): string;
+
+    /**
+     * Disposes the addon.
+     */
+    public dispose(): void;
+  }
+}

addons/xterm-addon-serialize/webpack.config.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const path = require('path');
+
+const addonName = 'SerializeAddon';
+const mainFile = 'xterm-addon-serialize.js';
+
+module.exports = {
+  entry: `./out/${addonName}.js`,
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: ["source-map-loader"],
+        enforce: "pre",
+        exclude: /node_modules/
+      }
+    ]
+  },
+  output: {
+    filename: mainFile,
+    path: path.resolve('./lib'),
+    library: addonName,
+    libraryTarget: 'umd'
+  },
+  mode: 'production'
+};

addons/xterm-addon-unicode11/.gitignore

@@ -0,0 +1,2 @@
+lib
+node_modules

addons/xterm-addon-unicode11/.npmignore

@@ -0,0 +1,5 @@
+**/*.api.js
+**/*.api.ts
+tsconfig.json
+.yarnrc
+webpack.config.js

addons/xterm-addon-unicode11/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2019, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

addons/xterm-addon-unicode11/README.md

@@ -0,0 +1,23 @@
+## xterm-addon-unicode11
+
+An addon providing Unicode version 11 rules for xterm.js.
+
+### Install
+
+```bash
+npm install --save xterm-addon-unicode11
+```
+
+### Usage
+
+```ts
+import { Terminal } from 'xterm';
+import { Unicode11Addon } from 'xterm-addon-unicode11';
+
+const terminal = new Terminal();
+const unicode11Addon = new Unicode11Addon();
+terminal.loadAddon(unicode11Addon);
+
+// activate the new version
+terminal.unicode.activeVersion = '11';
+```

addons/xterm-addon-unicode11/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "xterm-addon-unicode11",
+  "version": "0.1.1",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/xterm-addon-unicode11.js",
+  "types": "typings/xterm-addon-unicode11.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p src",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package"
+  },
+  "peerDependencies": {
+    "xterm": "^4.0.0"
+  }
+}

addons/xterm-addon-unicode11/src/Unicode11Addon.api.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
+
+const APP = 'http://127.0.0.1:3000/test';
+
+let browser: Browser;
+let page: Page;
+const width = 800;
+const height = 600;
+
+describe('Unicode11Addon', () => {
+  before(async function(): Promise<any> {
+    const browserType = getBrowserType();
+    browser = await browserType.launch({ dumpio: true,
+      headless: process.argv.indexOf('--headless') !== -1
+    });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
+  });
+
+  after(async () => {
+    await browser.close();
+  });
+
+  beforeEach(async function(): Promise<any> {
+    await page.goto(APP);
+    await openTerminal(page);
+  });
+
+  it('wcwidth V11 emoji test', async () => {
+    await page.evaluate(`
+      window.unicode11 = new Unicode11Addon();
+      window.term.loadAddon(window.unicode11);
+    `);
+    // should have loaded '11'
+    assert.deepEqual(await page.evaluate(`window.term.unicode.versions`), ['6', '11']);
+    // switch should not throw
+    await page.evaluate(`window.term.unicode.activeVersion = '11';`);
+    assert.deepEqual(await page.evaluate(`window.term.unicode.activeVersion`), '11');
+    // v6: 10, V11: 20
+    assert.deepEqual(await page.evaluate(`window.term._core.unicodeService.getStringCellWidth('🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣')`), 20);
+  });
+});

addons/xterm-addon-unicode11/src/Unicode11Addon.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * UnicodeVersionProvider for V11.
+ */
+
+import { Terminal, ITerminalAddon } from 'xterm';
+import { UnicodeV11 } from './UnicodeV11';
+
+export class Unicode11Addon implements ITerminalAddon {
+  public activate(terminal: Terminal): void {
+    terminal.unicode.register(new UnicodeV11());
+  }
+  public dispose(): void { }
+}

addons/xterm-addon-unicode11/src/UnicodeV11.ts

@@ -0,0 +1,222 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IUnicodeVersionProvider } from 'xterm';
+import { fill } from 'common/TypedArrayUtils';
+
+type CharWidth = 0 | 1 | 2;
+
+const BMP_COMBINING = [
+  [0x0300, 0x036F], [0x0483, 0x0489], [0x0591, 0x05BD],
+  [0x05BF, 0x05BF], [0x05C1, 0x05C2], [0x05C4, 0x05C5],
+  [0x05C7, 0x05C7], [0x0600, 0x0605], [0x0610, 0x061A],
+  [0x061C, 0x061C], [0x064B, 0x065F], [0x0670, 0x0670],
+  [0x06D6, 0x06DD], [0x06DF, 0x06E4], [0x06E7, 0x06E8],
+  [0x06EA, 0x06ED], [0x070F, 0x070F], [0x0711, 0x0711],
+  [0x0730, 0x074A], [0x07A6, 0x07B0], [0x07EB, 0x07F3],
+  [0x07FD, 0x07FD], [0x0816, 0x0819], [0x081B, 0x0823],
+  [0x0825, 0x0827], [0x0829, 0x082D], [0x0859, 0x085B],
+  [0x08D3, 0x0902], [0x093A, 0x093A], [0x093C, 0x093C],
+  [0x0941, 0x0948], [0x094D, 0x094D], [0x0951, 0x0957],
+  [0x0962, 0x0963], [0x0981, 0x0981], [0x09BC, 0x09BC],
+  [0x09C1, 0x09C4], [0x09CD, 0x09CD], [0x09E2, 0x09E3],
+  [0x09FE, 0x09FE], [0x0A01, 0x0A02], [0x0A3C, 0x0A3C],
+  [0x0A41, 0x0A42], [0x0A47, 0x0A48], [0x0A4B, 0x0A4D],
+  [0x0A51, 0x0A51], [0x0A70, 0x0A71], [0x0A75, 0x0A75],
+  [0x0A81, 0x0A82], [0x0ABC, 0x0ABC], [0x0AC1, 0x0AC5],
+  [0x0AC7, 0x0AC8], [0x0ACD, 0x0ACD], [0x0AE2, 0x0AE3],
+  [0x0AFA, 0x0AFF], [0x0B01, 0x0B01], [0x0B3C, 0x0B3C],
+  [0x0B3F, 0x0B3F], [0x0B41, 0x0B44], [0x0B4D, 0x0B4D],
+  [0x0B56, 0x0B56], [0x0B62, 0x0B63], [0x0B82, 0x0B82],
+  [0x0BC0, 0x0BC0], [0x0BCD, 0x0BCD], [0x0C00, 0x0C00],
+  [0x0C04, 0x0C04], [0x0C3E, 0x0C40], [0x0C46, 0x0C48],
+  [0x0C4A, 0x0C4D], [0x0C55, 0x0C56], [0x0C62, 0x0C63],
+  [0x0C81, 0x0C81], [0x0CBC, 0x0CBC], [0x0CBF, 0x0CBF],
+  [0x0CC6, 0x0CC6], [0x0CCC, 0x0CCD], [0x0CE2, 0x0CE3],
+  [0x0D00, 0x0D01], [0x0D3B, 0x0D3C], [0x0D41, 0x0D44],
+  [0x0D4D, 0x0D4D], [0x0D62, 0x0D63], [0x0DCA, 0x0DCA],
+  [0x0DD2, 0x0DD4], [0x0DD6, 0x0DD6], [0x0E31, 0x0E31],
+  [0x0E34, 0x0E3A], [0x0E47, 0x0E4E], [0x0EB1, 0x0EB1],
+  [0x0EB4, 0x0EBC], [0x0EC8, 0x0ECD], [0x0F18, 0x0F19],
+  [0x0F35, 0x0F35], [0x0F37, 0x0F37], [0x0F39, 0x0F39],
+  [0x0F71, 0x0F7E], [0x0F80, 0x0F84], [0x0F86, 0x0F87],
+  [0x0F8D, 0x0F97], [0x0F99, 0x0FBC], [0x0FC6, 0x0FC6],
+  [0x102D, 0x1030], [0x1032, 0x1037], [0x1039, 0x103A],
+  [0x103D, 0x103E], [0x1058, 0x1059], [0x105E, 0x1060],
+  [0x1071, 0x1074], [0x1082, 0x1082], [0x1085, 0x1086],
+  [0x108D, 0x108D], [0x109D, 0x109D], [0x1160, 0x11FF],
+  [0x135D, 0x135F], [0x1712, 0x1714], [0x1732, 0x1734],
+  [0x1752, 0x1753], [0x1772, 0x1773], [0x17B4, 0x17B5],
+  [0x17B7, 0x17BD], [0x17C6, 0x17C6], [0x17C9, 0x17D3],
+  [0x17DD, 0x17DD], [0x180B, 0x180E], [0x1885, 0x1886],
+  [0x18A9, 0x18A9], [0x1920, 0x1922], [0x1927, 0x1928],
+  [0x1932, 0x1932], [0x1939, 0x193B], [0x1A17, 0x1A18],
+  [0x1A1B, 0x1A1B], [0x1A56, 0x1A56], [0x1A58, 0x1A5E],
+  [0x1A60, 0x1A60], [0x1A62, 0x1A62], [0x1A65, 0x1A6C],
+  [0x1A73, 0x1A7C], [0x1A7F, 0x1A7F], [0x1AB0, 0x1ABE],
+  [0x1B00, 0x1B03], [0x1B34, 0x1B34], [0x1B36, 0x1B3A],
+  [0x1B3C, 0x1B3C], [0x1B42, 0x1B42], [0x1B6B, 0x1B73],
+  [0x1B80, 0x1B81], [0x1BA2, 0x1BA5], [0x1BA8, 0x1BA9],
+  [0x1BAB, 0x1BAD], [0x1BE6, 0x1BE6], [0x1BE8, 0x1BE9],
+  [0x1BED, 0x1BED], [0x1BEF, 0x1BF1], [0x1C2C, 0x1C33],
+  [0x1C36, 0x1C37], [0x1CD0, 0x1CD2], [0x1CD4, 0x1CE0],
+  [0x1CE2, 0x1CE8], [0x1CED, 0x1CED], [0x1CF4, 0x1CF4],
+  [0x1CF8, 0x1CF9], [0x1DC0, 0x1DF9], [0x1DFB, 0x1DFF],
+  [0x200B, 0x200F], [0x202A, 0x202E], [0x2060, 0x2064],
+  [0x2066, 0x206F], [0x20D0, 0x20F0], [0x2CEF, 0x2CF1],
+  [0x2D7F, 0x2D7F], [0x2DE0, 0x2DFF], [0x302A, 0x302D],
+  [0x3099, 0x309A], [0xA66F, 0xA672], [0xA674, 0xA67D],
+  [0xA69E, 0xA69F], [0xA6F0, 0xA6F1], [0xA802, 0xA802],
+  [0xA806, 0xA806], [0xA80B, 0xA80B], [0xA825, 0xA826],
+  [0xA8C4, 0xA8C5], [0xA8E0, 0xA8F1], [0xA8FF, 0xA8FF],
+  [0xA926, 0xA92D], [0xA947, 0xA951], [0xA980, 0xA982],
+  [0xA9B3, 0xA9B3], [0xA9B6, 0xA9B9], [0xA9BC, 0xA9BD],
+  [0xA9E5, 0xA9E5], [0xAA29, 0xAA2E], [0xAA31, 0xAA32],
+  [0xAA35, 0xAA36], [0xAA43, 0xAA43], [0xAA4C, 0xAA4C],
+  [0xAA7C, 0xAA7C], [0xAAB0, 0xAAB0], [0xAAB2, 0xAAB4],
+  [0xAAB7, 0xAAB8], [0xAABE, 0xAABF], [0xAAC1, 0xAAC1],
+  [0xAAEC, 0xAAED], [0xAAF6, 0xAAF6], [0xABE5, 0xABE5],
+  [0xABE8, 0xABE8], [0xABED, 0xABED], [0xFB1E, 0xFB1E],
+  [0xFE00, 0xFE0F], [0xFE20, 0xFE2F], [0xFEFF, 0xFEFF],
+  [0xFFF9, 0xFFFB]
+];
+const HIGH_COMBINING = [
+  [0x101FD, 0x101FD], [0x102E0, 0x102E0],
+  [0x10376, 0x1037A], [0x10A01, 0x10A03], [0x10A05, 0x10A06],
+  [0x10A0C, 0x10A0F], [0x10A38, 0x10A3A], [0x10A3F, 0x10A3F],
+  [0x10AE5, 0x10AE6], [0x10D24, 0x10D27], [0x10F46, 0x10F50],
+  [0x11001, 0x11001], [0x11038, 0x11046], [0x1107F, 0x11081],
+  [0x110B3, 0x110B6], [0x110B9, 0x110BA], [0x110BD, 0x110BD],
+  [0x110CD, 0x110CD], [0x11100, 0x11102], [0x11127, 0x1112B],
+  [0x1112D, 0x11134], [0x11173, 0x11173], [0x11180, 0x11181],
+  [0x111B6, 0x111BE], [0x111C9, 0x111CC], [0x1122F, 0x11231],
+  [0x11234, 0x11234], [0x11236, 0x11237], [0x1123E, 0x1123E],
+  [0x112DF, 0x112DF], [0x112E3, 0x112EA], [0x11300, 0x11301],
+  [0x1133B, 0x1133C], [0x11340, 0x11340], [0x11366, 0x1136C],
+  [0x11370, 0x11374], [0x11438, 0x1143F], [0x11442, 0x11444],
+  [0x11446, 0x11446], [0x1145E, 0x1145E], [0x114B3, 0x114B8],
+  [0x114BA, 0x114BA], [0x114BF, 0x114C0], [0x114C2, 0x114C3],
+  [0x115B2, 0x115B5], [0x115BC, 0x115BD], [0x115BF, 0x115C0],
+  [0x115DC, 0x115DD], [0x11633, 0x1163A], [0x1163D, 0x1163D],
+  [0x1163F, 0x11640], [0x116AB, 0x116AB], [0x116AD, 0x116AD],
+  [0x116B0, 0x116B5], [0x116B7, 0x116B7], [0x1171D, 0x1171F],
+  [0x11722, 0x11725], [0x11727, 0x1172B], [0x1182F, 0x11837],
+  [0x11839, 0x1183A], [0x119D4, 0x119D7], [0x119DA, 0x119DB],
+  [0x119E0, 0x119E0], [0x11A01, 0x11A0A], [0x11A33, 0x11A38],
+  [0x11A3B, 0x11A3E], [0x11A47, 0x11A47], [0x11A51, 0x11A56],
+  [0x11A59, 0x11A5B], [0x11A8A, 0x11A96], [0x11A98, 0x11A99],
+  [0x11C30, 0x11C36], [0x11C38, 0x11C3D], [0x11C3F, 0x11C3F],
+  [0x11C92, 0x11CA7], [0x11CAA, 0x11CB0], [0x11CB2, 0x11CB3],
+  [0x11CB5, 0x11CB6], [0x11D31, 0x11D36], [0x11D3A, 0x11D3A],
+  [0x11D3C, 0x11D3D], [0x11D3F, 0x11D45], [0x11D47, 0x11D47],
+  [0x11D90, 0x11D91], [0x11D95, 0x11D95], [0x11D97, 0x11D97],
+  [0x11EF3, 0x11EF4], [0x13430, 0x13438], [0x16AF0, 0x16AF4],
+  [0x16B30, 0x16B36], [0x16F4F, 0x16F4F], [0x16F8F, 0x16F92],
+  [0x1BC9D, 0x1BC9E], [0x1BCA0, 0x1BCA3], [0x1D167, 0x1D169],
+  [0x1D173, 0x1D182], [0x1D185, 0x1D18B], [0x1D1AA, 0x1D1AD],
+  [0x1D242, 0x1D244], [0x1DA00, 0x1DA36], [0x1DA3B, 0x1DA6C],
+  [0x1DA75, 0x1DA75], [0x1DA84, 0x1DA84], [0x1DA9B, 0x1DA9F],
+  [0x1DAA1, 0x1DAAF], [0x1E000, 0x1E006], [0x1E008, 0x1E018],
+  [0x1E01B, 0x1E021], [0x1E023, 0x1E024], [0x1E026, 0x1E02A],
+  [0x1E130, 0x1E136], [0x1E2EC, 0x1E2EF], [0x1E8D0, 0x1E8D6],
+  [0x1E944, 0x1E94A], [0xE0001, 0xE0001], [0xE0020, 0xE007F],
+  [0xE0100, 0xE01EF]
+];
+const BMP_WIDE = [
+  [0x1100, 0x115F], [0x231A, 0x231B], [0x2329, 0x232A],
+  [0x23E9, 0x23EC], [0x23F0, 0x23F0], [0x23F3, 0x23F3],
+  [0x25FD, 0x25FE], [0x2614, 0x2615], [0x2648, 0x2653],
+  [0x267F, 0x267F], [0x2693, 0x2693], [0x26A1, 0x26A1],
+  [0x26AA, 0x26AB], [0x26BD, 0x26BE], [0x26C4, 0x26C5],
+  [0x26CE, 0x26CE], [0x26D4, 0x26D4], [0x26EA, 0x26EA],
+  [0x26F2, 0x26F3], [0x26F5, 0x26F5], [0x26FA, 0x26FA],
+  [0x26FD, 0x26FD], [0x2705, 0x2705], [0x270A, 0x270B],
+  [0x2728, 0x2728], [0x274C, 0x274C], [0x274E, 0x274E],
+  [0x2753, 0x2755], [0x2757, 0x2757], [0x2795, 0x2797],
+  [0x27B0, 0x27B0], [0x27BF, 0x27BF], [0x2B1B, 0x2B1C],
+  [0x2B50, 0x2B50], [0x2B55, 0x2B55], [0x2E80, 0x2E99],
+  [0x2E9B, 0x2EF3], [0x2F00, 0x2FD5], [0x2FF0, 0x2FFB],
+  [0x3000, 0x3029], [0x302E, 0x303E], [0x3041, 0x3096],
+  [0x309B, 0x30FF], [0x3105, 0x312F], [0x3131, 0x318E],
+  [0x3190, 0x31BA], [0x31C0, 0x31E3], [0x31F0, 0x321E],
+  [0x3220, 0x3247], [0x3250, 0x4DBF], [0x4E00, 0xA48C],
+  [0xA490, 0xA4C6], [0xA960, 0xA97C], [0xAC00, 0xD7A3],
+  [0xF900, 0xFAFF], [0xFE10, 0xFE19], [0xFE30, 0xFE52],
+  [0xFE54, 0xFE66], [0xFE68, 0xFE6B], [0xFF01, 0xFF60],
+  [0xFFE0, 0xFFE6]
+];
+const HIGH_WIDE = [
+  [0x16FE0, 0x16FE3], [0x17000, 0x187F7],
+  [0x18800, 0x18AF2], [0x1B000, 0x1B11E], [0x1B150, 0x1B152],
+  [0x1B164, 0x1B167], [0x1B170, 0x1B2FB], [0x1F004, 0x1F004],
+  [0x1F0CF, 0x1F0CF], [0x1F18E, 0x1F18E], [0x1F191, 0x1F19A],
+  [0x1F200, 0x1F202], [0x1F210, 0x1F23B], [0x1F240, 0x1F248],
+  [0x1F250, 0x1F251], [0x1F260, 0x1F265], [0x1F300, 0x1F320],
+  [0x1F32D, 0x1F335], [0x1F337, 0x1F37C], [0x1F37E, 0x1F393],
+  [0x1F3A0, 0x1F3CA], [0x1F3CF, 0x1F3D3], [0x1F3E0, 0x1F3F0],
+  [0x1F3F4, 0x1F3F4], [0x1F3F8, 0x1F43E], [0x1F440, 0x1F440],
+  [0x1F442, 0x1F4FC], [0x1F4FF, 0x1F53D], [0x1F54B, 0x1F54E],
+  [0x1F550, 0x1F567], [0x1F57A, 0x1F57A], [0x1F595, 0x1F596],
+  [0x1F5A4, 0x1F5A4], [0x1F5FB, 0x1F64F], [0x1F680, 0x1F6C5],
+  [0x1F6CC, 0x1F6CC], [0x1F6D0, 0x1F6D2], [0x1F6D5, 0x1F6D5],
+  [0x1F6EB, 0x1F6EC], [0x1F6F4, 0x1F6FA], [0x1F7E0, 0x1F7EB],
+  [0x1F90D, 0x1F971], [0x1F973, 0x1F976], [0x1F97A, 0x1F9A2],
+  [0x1F9A5, 0x1F9AA], [0x1F9AE, 0x1F9CA], [0x1F9CD, 0x1F9FF],
+  [0x1FA70, 0x1FA73], [0x1FA78, 0x1FA7A], [0x1FA80, 0x1FA82],
+  [0x1FA90, 0x1FA95], [0x20000, 0x2FFFD], [0x30000, 0x3FFFD]
+];
+
+// BMP lookup table, lazy initialized during first addon loading
+let table: Uint8Array;
+
+function bisearch(ucs: number, data: number[][]): boolean {
+  let min = 0;
+  let max = data.length - 1;
+  let mid;
+  if (ucs < data[0][0] || ucs > data[max][1]) {
+    return false;
+  }
+  while (max >= min) {
+    mid = (min + max) >> 1;
+    if (ucs > data[mid][1]) {
+      min = mid + 1;
+    } else if (ucs < data[mid][0]) {
+      max = mid - 1;
+    } else {
+      return true;
+    }
+  }
+  return false;
+}
+
+
+export class UnicodeV11 implements IUnicodeVersionProvider {
+  public readonly version = '11';
+
+  constructor() {
+    if (!table) {
+      table = new Uint8Array(65536);
+      fill(table, 1);
+      table[0] = 0;
+      fill(table, 0, 1, 32);
+      fill(table, 0, 0x7f, 0xa0);
+      for (let r = 0; r < BMP_COMBINING.length; ++r) {
+        fill(table, 0, BMP_COMBINING[r][0], BMP_COMBINING[r][1] + 1);
+      }
+      for (let r = 0; r < BMP_WIDE.length; ++r) {
+        fill(table, 2, BMP_WIDE[r][0], BMP_WIDE[r][1] + 1);
+      }
+    }
+  }
+
+  public wcwidth(num: number): CharWidth {
+    if (num < 32) return 0;
+    if (num < 127) return 1;
+    if (num < 65536) return table[num] as CharWidth;
+    if (bisearch(num, HIGH_COMBINING)) return 0;
+    if (bisearch(num, HIGH_WIDE)) return 2;
+    return 1;
+  }
+}

addons/xterm-addon-unicode11/src/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2015",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "rootDir": ".",
+    "outDir": "../out",
+    "sourceMap": true,
+    "removeComments": true,
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "common/*": [
+        "../../../src/common/*"
+      ]
+    },
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/common"
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal, ITerminalAddon } from 'xterm';
+
+declare module 'xterm-addon-unicode11' {
+  export class Unicode11Addon implements ITerminalAddon {
+    constructor();
+    public activate(terminal: Terminal): void;
+    public dispose(): void;
+  }
+}

addons/xterm-addon-unicode11/webpack.config.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const path = require('path');
+
+const addonName = 'Unicode11Addon';
+const mainFile = 'xterm-addon-unicode11.js';
+
+module.exports = {
+  entry: `./out/${addonName}.js`,
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: ["source-map-loader"],
+        enforce: "pre",
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    modules: ['./node_modules'],
+    extensions: [ '.js' ],
+    alias: {
+      common: path.resolve('../../out/common')
+    }
+  },
+  output: {
+    filename: mainFile,
+    path: path.resolve('./lib'),
+    library: addonName,
+    libraryTarget: 'umd'
+  },
+  mode: 'production'
+};

addons/xterm-addon-web-links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-web-links",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-web-links/src/WebLinkProvider.ts

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ILinkProvider, IBufferCellPosition, ILink, Terminal, IBuffer } from 'xterm';
+
+export class WebLinkProvider implements ILinkProvider {
+
+  constructor(
+    private readonly _terminal: Terminal,
+    private readonly _regex: RegExp,
+    private readonly _handler: (event: MouseEvent, uri: string) => void
+  ) {
+
+  }
+
+  provideLink(position: IBufferCellPosition, callback: (link: ILink | undefined) => void): void {
+    callback(LinkComputer.computeLink(position, this._regex, this._terminal, this._handler));
+  }
+}
+
+export class LinkComputer {
+  public static computeLink(position: IBufferCellPosition, regex: RegExp, terminal: Terminal, handler: (event: MouseEvent, uri: string) => void): ILink | undefined {
+    const rex = new RegExp(regex.source, (regex.flags || '') + 'g');
+
+    const [line, startLineIndex] = LinkComputer._translateBufferLineToStringWithWrap(position.y - 1, false, terminal);
+
+    let match;
+    let stringIndex = -1;
+
+    while ((match = rex.exec(line)) !== null) {
+      const text = match[1];
+      if (!text) {
+        // something matched but does not comply with the given matchIndex
+        // since this is most likely a bug the regex itself we simply do nothing here
+        console.log('match found without corresponding matchIndex');
+        break;
+      }
+
+      // Get index, match.index is for the outer match which includes negated chars
+      // therefore we cannot use match.index directly, instead we search the position
+      // of the match group in text again
+      // also correct regex and string search offsets for the next loop run
+      stringIndex = line.indexOf(text, stringIndex + 1);
+      rex.lastIndex = stringIndex + text.length;
+      if (stringIndex < 0) {
+        // invalid stringIndex (should not have happened)
+        break;
+      }
+
+      let endX = stringIndex + text.length;
+      let endY = startLineIndex + 1;
+
+      while (endX > terminal.cols) {
+        endX -= terminal.cols;
+        endY++;
+      }
+
+      const range = {
+        start: {
+          x: stringIndex + 1,
+          y: startLineIndex + 1
+        },
+        end: {
+          x: endX,
+          y: endY
+        }
+      };
+
+      return { range, text, activate: handler };
+    }
+  }
+
+  /**
+   * Gets the entire line for the buffer line
+   * @param line The line being translated.
+   * @param trimRight Whether to trim whitespace to the right.
+   * @param terminal The terminal
+   */
+  private static _translateBufferLineToStringWithWrap(lineIndex: number, trimRight: boolean, terminal: Terminal): [string, number] {
+    let lineString = '';
+    let lineWrapsToNext: boolean;
+    let prevLinesToWrap: boolean;
+
+    do {
+      const line = terminal.buffer.active.getLine(lineIndex);
+      if (!line) {
+        break;
+      }
+
+      if (line.isWrapped) {
+        lineIndex--;
+      }
+
+      prevLinesToWrap = line.isWrapped;
+    } while (prevLinesToWrap);
+
+    const startLineIndex = lineIndex;
+
+    do {
+      const nextLine = terminal.buffer.active.getLine(lineIndex + 1);
+      lineWrapsToNext = nextLine ? nextLine.isWrapped : false;
+      const line = terminal.buffer.active.getLine(lineIndex);
+      if (!line) {
+        break;
+      }
+      lineString += line.translateToString(!lineWrapsToNext && trimRight).substring(0, terminal.cols);
+      lineIndex++;
+    } while (lineWrapsToNext);
+
+    return [lineString, startLineIndex];
+  }
+}

addons/xterm-addon-web-links/src/WebLinksAddon.api.ts

@@ -3,55 +3,45 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { assert } from 'chai';
-import { ITerminalOptions } from 'xterm';
+import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
 describe('WebLinksAddon', () => {
   before(async function(): Promise<any> {
-    this.timeout(10000);
-    browser = await puppeteer.launch({
-      headless: process.argv.indexOf('--headless') !== -1,
-      args: [`--window-size=${width},${height}`, `--no-sandbox`]
+    const browserType = getBrowserType();
+    browser = await browserType.launch({ dumpio: true,
+      headless: process.argv.indexOf('--headless') !== -1
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
   });
 
-  after(async () => {
-    await browser.close();
-  });
-
-  beforeEach(async function(): Promise<any> {
-    this.timeout(5000);
-    await page.goto(APP);
-  });
+  after(async () => await browser.close());
+  beforeEach(async () => await page.goto(APP));
 
   it('.com', async function(): Promise<any> {
-    this.timeout(20000);
     await testHostName('foo.com');
   });
 
   it('.com.au', async function(): Promise<any> {
-    this.timeout(20000);
     await testHostName('foo.com.au');
   });
 
   it('.io', async function(): Promise<any> {
-    this.timeout(20000);
     await testHostName('foo.io');
   });
 });
 
 async function testHostName(hostname: string): Promise<void> {
-  await openTerminal({ rendererType: 'dom' });
+  await openTerminal(page, { rendererType: 'dom', cols: 40 });
   await page.evaluate(`window.term.loadAddon(new window.WebLinksAddon())`);
   const data = `  http://${hostname}  \\r\\n` +
     `  http://${hostname}/a~b#c~d?e~f  \\r\\n` +
@@ -70,16 +60,6 @@ async function testHostName(hostname: string): Promise<void> {
   await pollForLinkAtCell(1, 7, `http://${hostname}/subpath/+/id`);
 }
 
-async function openTerminal(options: ITerminalOptions = {}): Promise<void> {
-  await page.evaluate(`window.term = new Terminal(${JSON.stringify(options)})`);
-  await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
-  if (options.rendererType === 'dom') {
-    await page.waitForSelector('.xterm-rows');
-  } else {
-    await page.waitForSelector('.xterm-text-layer');
-  }
-}
-
 async function pollForLinkAtCell(col: number, row: number, value: string): Promise<void> {
   const rowSelector = `.xterm-rows > :nth-child(${row})`;
   // Ensure the hover element exists before trying to hover it
@@ -87,23 +67,3 @@ async function pollForLinkAtCell(col: number, row: number, value: string): Promi
   await pollFor(page, `document.querySelectorAll('${rowSelector} > span[style]').length >= ${value.length}`, true, async () => page.hover(`${rowSelector} > :nth-child(${col})`));
   assert.equal(await page.evaluate(`Array.prototype.reduce.call(document.querySelectorAll('${rowSelector} > span[style]'), (a, b) => a + b.textContent, '');`), value);
 }
-
-async function pollFor(page: puppeteer.Page, fn: string, val: any, preFn?: () => Promise<void>): Promise<void> {
-  if (preFn) {
-    await preFn();
-  }
-  const result = await page.evaluate(fn);
-  if (result !== val) {
-    return new Promise<void>(r => {
-      setTimeout(() => r(pollFor(page, fn, val, preFn)), 10);
-    });
-  }
-}
-
-async function writeSync(page: puppeteer.Page, data: string): Promise<void> {
-  await page.evaluate(`
-    window.ready = false;
-    window.term.write('${data}', () => window.ready = true);
-  `);
-  await pollFor(page, 'window.ready', true);
-}

addons/xterm-addon-web-links/src/WebLinksAddon.ts

@@ -1,9 +1,10 @@
 /**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
-import { Terminal, ILinkMatcherOptions, ITerminalAddon } from 'xterm';
+import { Terminal, ILinkMatcherOptions, ITerminalAddon, ILinkProvider, IDisposable } from 'xterm';
+import { WebLinkProvider } from './WebLinkProvider';
 
 const protocolClause = '(https?:\\/\\/)';
 const domainCharacterSet = '[\\da-z\\.-]+';
@@ -26,28 +27,44 @@ const end = ')($|' + negatedPathCharacterSet + ')';
 const strictUrlRegex = new RegExp(start + protocolClause + bodyClause + end);
 
 function handleLink(event: MouseEvent, uri: string): void {
-  window.open(uri, '_blank');
+  const newWindow = window.open();
+  if (newWindow) {
+    newWindow.opener = null;
+    newWindow.location.href = uri;
+  } else {
+    console.warn('Opening link blocked as opener could not be cleared');
+  }
 }
 
 export class WebLinksAddon implements ITerminalAddon {
   private _linkMatcherId: number | undefined;
   private _terminal: Terminal | undefined;
+  private _linkProvider: IDisposable | undefined;
 
   constructor(
     private _handler: (event: MouseEvent, uri: string) => void = handleLink,
-    private _options: ILinkMatcherOptions = {}
+    private _options: ILinkMatcherOptions = {},
+    private _useLinkProvider: boolean = false
   ) {
     this._options.matchIndex = 1;
   }
 
   public activate(terminal: Terminal): void {
     this._terminal = terminal;
-    this._linkMatcherId = this._terminal.registerLinkMatcher(strictUrlRegex, this._handler, this._options);
+
+    if (this._useLinkProvider && 'registerLinkProvider' in this._terminal) {
+      this._linkProvider = this._terminal.registerLinkProvider(new WebLinkProvider(this._terminal, strictUrlRegex, this._handler));
+    } else {
+      // TODO: This should be removed eventually
+      this._linkMatcherId = (this._terminal as Terminal).registerLinkMatcher(strictUrlRegex, this._handler, this._options);
+    }
   }
 
   public dispose(): void {
     if (this._linkMatcherId !== undefined && this._terminal !== undefined) {
       this._terminal.deregisterLinkMatcher(this._linkMatcherId);
     }
+
+    this._linkProvider?.dispose();
   }
 }

addons/xterm-addon-web-links/src/tsconfig.json

@@ -10,7 +10,11 @@
     "outDir": "../out",
     "sourceMap": true,
     "removeComments": true,
-    "strict": true
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../out-test/api/TestUtils"
+    ]
   },
   "include": [
     "./**/*",

addons/xterm-addon-web-links/typings/xterm-addon-web-links.d.ts

@@ -15,8 +15,12 @@ declare module 'xterm-addon-web-links' {
      * Creates a new web links addon.
      * @param handler The callback when the link is called.
      * @param options Options for the link matcher.
+     * @param useLinkProvider Whether to use the new link provider API to create
+     * the links. This is an option because use of both link matcher (old) and
+     * link provider (new) may cause issues. Link provider will eventually be
+     * the default and only option.
      */
-    constructor(handler?: (event: MouseEvent, uri: string) => void, options?: ILinkMatcherOptions);
+    constructor(handler?: (event: MouseEvent, uri: string) => void, options?: ILinkMatcherOptions, useLinkProvider?: boolean);
 
     /**
      * Activates the addon

addons/xterm-addon-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-webgl",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-webgl/src/GlyphRenderer.ts

@@ -6,13 +6,14 @@
 import { createProgram, PROJECTION_MATRIX, throwIfFalsy } from './WebglUtils';
 import { WebglCharAtlas } from './atlas/WebglCharAtlas';
 import { IWebGL2RenderingContext, IWebGLVertexArrayObject, IRenderModel, IRasterizedGlyph } from './Types';
-import { COMBINED_CHAR_BIT_MASK, RENDER_MODEL_INDICIES_PER_CELL, RENDER_MODEL_FG_OFFSET } from './RenderModel';
+import { COMBINED_CHAR_BIT_MASK, RENDER_MODEL_INDICIES_PER_CELL, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_BG_OFFSET } from './RenderModel';
 import { fill } from 'common/TypedArrayUtils';
 import { slice } from './TypedArray';
-import { NULL_CELL_CODE, WHITESPACE_CELL_CODE, Attributes } from 'common/buffer/Constants';
+import { NULL_CELL_CODE, WHITESPACE_CELL_CODE, Attributes, FgFlags } from 'common/buffer/Constants';
 import { Terminal, IBufferLine } from 'xterm';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, IColor } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
+import { AttributeData } from 'common/buffer/AttributeData';
 
 interface IVertices {
   attributes: Float32Array;
@@ -249,23 +250,54 @@ export class GlyphRenderer {
 
   private _updateSelectionRange(startCol: number, endCol: number, y: number, model: IRenderModel, bg: number): void {
     const terminal = this._terminal;
-    const row = y + terminal.buffer.viewportY;
+    const row = y + terminal.buffer.active.viewportY;
     let line: IBufferLine | undefined;
     for (let x = startCol; x < endCol; x++) {
       const offset = (y * this._terminal.cols + x) * RENDER_MODEL_INDICIES_PER_CELL;
       const code = model.cells[offset];
+      let fg = model.cells[offset + RENDER_MODEL_FG_OFFSET];
+      if (fg & FgFlags.INVERSE) {
+        const workCell = new AttributeData();
+        workCell.fg = fg;
+        workCell.bg = model.cells[offset + RENDER_MODEL_BG_OFFSET];
+        // Get attributes from fg (excluding inverse) and resolve inverse by pullibng rgb colors
+        // from bg. This is needed since the inverse fg color should be based on the original bg
+        // color, not on the selection color
+        fg = (fg & ~(Attributes.CM_MASK | Attributes.RGB_MASK | FgFlags.INVERSE));
+        switch (workCell.getBgColorMode()) {
+          case Attributes.CM_P16:
+          case Attributes.CM_P256:
+            const c = this._getColorFromAnsiIndex(workCell.getBgColor()).rgba;
+            fg |= (c >> 8) & Attributes.RED_MASK | (c >> 8) & Attributes.GREEN_MASK | (c >> 8) & Attributes.BLUE_MASK;
+          case Attributes.CM_RGB:
+            const arr = AttributeData.toColorRGB(workCell.getBgColor());
+            fg |= arr[0] << Attributes.RED_SHIFT | arr[1] << Attributes.GREEN_SHIFT | arr[2] << Attributes.BLUE_SHIFT;
+          case Attributes.CM_DEFAULT:
+          default:
+            const c2 = this._colors.background.rgba;
+            fg |= (c2 >> 8) & Attributes.RED_MASK | (c2 >> 8) & Attributes.GREEN_MASK | (c2 >> 8) & Attributes.BLUE_MASK;
+        }
+        fg |= Attributes.CM_RGB;
+      }
       if (code & COMBINED_CHAR_BIT_MASK) {
         if (!line) {
-          line = terminal.buffer.getLine(row);
+          line = terminal.buffer.active.getLine(row);
         }
-        const chars = line!.getCell(x)!.char;
-        this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, model.cells[offset + RENDER_MODEL_FG_OFFSET], chars);
+        const chars = line!.getCell(x)!.getChars();
+        this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, fg, chars);
       } else {
-        this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, model.cells[offset + RENDER_MODEL_FG_OFFSET]);
+        this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, fg);
       }
     }
   }
 
+  private _getColorFromAnsiIndex(idx: number): IColor {
+    if (idx >= this._colors.ansi.length) {
+      throw new Error('No color found for idx ' + idx);
+    }
+    return this._colors.ansi[idx];
+  }
+
   public onResize(): void {
     const terminal = this._terminal;
     const gl = this._gl;

addons/xterm-addon-webgl/src/TypedArray.test.ts

@@ -5,9 +5,7 @@
 import { assert } from 'chai';
 import { sliceFallback } from './TypedArray';
 
-type TypedArray = Uint8Array | Uint16Array | Uint32Array | Uint8ClampedArray
-  | Int8Array | Int16Array | Int32Array
-  | Float32Array | Float64Array;
+type TypedArray = Uint8Array | Uint16Array | Uint32Array | Uint8ClampedArray | Int8Array | Int16Array | Int32Array | Float32Array | Float64Array;
 
 function deepEquals(a: TypedArray, b: TypedArray): void {
   assert.equal(a.length, b.length);
@@ -40,19 +38,19 @@ describe('polyfill conformance tests', function(): void {
         deepEquals(sliceFallback(u321, -1), u322.slice(-1));
       });
       it('Int8Array', () => {
-          const i81 = new Int8Array(5);
-          const i82 = new Int8Array(5);
-          deepEquals(sliceFallback(i81, 2), i82.slice(2));
-          deepEquals(sliceFallback(i81, 65537), i82.slice(65537));
-          deepEquals(sliceFallback(i81, -1), i82.slice(-1));
-        });
+        const i81 = new Int8Array(5);
+        const i82 = new Int8Array(5);
+        deepEquals(sliceFallback(i81, 2), i82.slice(2));
+        deepEquals(sliceFallback(i81, 65537), i82.slice(65537));
+        deepEquals(sliceFallback(i81, -1), i82.slice(-1));
+      });
       it('Int16Array', () => {
-          const i161 = new Int16Array(5);
-          const i162 = new Int16Array(5);
-          deepEquals(sliceFallback(i161, 2), i162.slice(2));
-          deepEquals(sliceFallback(i161, 65535), i162.slice(65535));
-          deepEquals(sliceFallback(i161, -1), i162.slice(-1));
-        });
+        const i161 = new Int16Array(5);
+        const i162 = new Int16Array(5);
+        deepEquals(sliceFallback(i161, 2), i162.slice(2));
+        deepEquals(sliceFallback(i161, 65535), i162.slice(65535));
+        deepEquals(sliceFallback(i161, -1), i162.slice(-1));
+      });
       it('Int32Array', () => {
         const i321 = new Int32Array(5);
         const i322 = new Int32Array(5);

addons/xterm-addon-webgl/src/TypedArray.ts

@@ -3,9 +3,7 @@
  * @license MIT
  */
 
-export type TypedArray = Uint8Array | Uint16Array | Uint32Array | Uint8ClampedArray
-  | Int8Array | Int16Array | Int32Array
-  | Float32Array | Float64Array;
+export type TypedArray = Uint8Array | Uint16Array | Uint32Array | Uint8ClampedArray | Int8Array | Int16Array | Int32Array | Float32Array | Float64Array;
 
 export function slice<T extends TypedArray>(array: T, start?: number, end?: number): T {
   // all modern engines that support .slice

addons/xterm-addon-webgl/src/WebglAddon.ts

@@ -10,6 +10,7 @@ import { IColorSet } from 'browser/Types';
 
 export class WebglAddon implements ITerminalAddon {
   private _terminal?: Terminal;
+  private _renderer?: WebglRenderer;
 
   constructor(
     private _preserveDrawingBuffer?: boolean
@@ -20,17 +21,23 @@ export class WebglAddon implements ITerminalAddon {
       throw new Error('Cannot activate WebglAddon before Terminal.open');
     }
     this._terminal = terminal;
-    const renderService: IRenderService =  (<any>terminal)._core._renderService;
+    const renderService: IRenderService = (<any>terminal)._core._renderService;
     const colors: IColorSet = (<any>terminal)._core._colorManager.colors;
-    renderService.setRenderer(new WebglRenderer(terminal, colors, this._preserveDrawingBuffer));
+    this._renderer = new WebglRenderer(terminal, colors, this._preserveDrawingBuffer);
+    renderService.setRenderer(this._renderer);
   }
 
   public dispose(): void {
     if (!this._terminal) {
       throw new Error('Cannot dispose WebglAddon because it is activated');
     }
-    const renderService: IRenderService = (<any>this._terminal)._core._renderService;
-    renderService.setRenderer((<any>this._terminal)._core._createRenderer());
+    const renderService: IRenderService = (this._terminal as any)._core._renderService;
+    renderService.setRenderer((this._terminal as any)._core._createRenderer());
     renderService.onResize(this._terminal.cols, this._terminal.rows);
+    this._renderer = undefined;
+  }
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderer?.textureAtlas;
   }
 }

addons/xterm-addon-webgl/src/WebglRenderer.api.ts

@@ -3,21 +3,29 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { ITerminalOptions } from '../../../src/Types';
 import { ITheme } from 'xterm';
 import { assert } from 'chai';
-import deepEqual = require('deep-equal');
+import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
-describe('WebGL Renderer Integration Tests', function(): void {
-  it('dispose removes renderer canvases', async () => {
+let itWebgl: (expectation: string, callback?: (this: Mocha.ITestCallbackContext, done: MochaDone) => any) => Mocha.ITest | void;
+
+describe('WebGL Renderer Integration Tests', async () => {
+  const browserType = getBrowserType();
+  const isHeadless = process.argv.indexOf('--headless') !== -1;
+  // Firefox works only in non-headless mode https://github.com/microsoft/playwright/issues/1032
+  const areTestsEnabled = browserType.name() === 'chromium' || (browserType.name() === 'firefox' && !isHeadless);
+  itWebgl = areTestsEnabled ? it : it.skip;
+
+  itWebgl('dispose removes renderer canvases', async function(): Promise<void> {
     await setupBrowser();
     assert.equal(await page.evaluate(`document.querySelectorAll('.xterm canvas').length`), 3);
     await page.evaluate(`addon.dispose()`);
@@ -26,11 +34,13 @@ describe('WebGL Renderer Integration Tests', function(): void {
   });
 
   describe('colors', () => {
-    before(async () => setupBrowser());
-    after(async () => browser.close());
-    beforeEach(async () => page.evaluate(`window.term.reset()`));
+    if (areTestsEnabled) {
+      before(async () => setupBrowser());
+      after(async () => browser.close());
+      beforeEach(async () => page.evaluate(`window.term.reset()`));
+    }
 
-    it('foreground 0-15', async () => {
+    itWebgl('foreground 0-15', async () => {
       const theme: ITheme = {
         black: '#010203',
         red: '#040506',
@@ -42,7 +52,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         white: '#161718'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
-      await writeSync(`\\x1b[30m█\\x1b[31m█\\x1b[32m█\\x1b[33m█\\x1b[34m█\\x1b[35m█\\x1b[36m█\\x1b[37m█`);
+      await writeSync(page, `\\x1b[30m█\\x1b[31m█\\x1b[32m█\\x1b[33m█\\x1b[34m█\\x1b[35m█\\x1b[36m█\\x1b[37m█`);
       await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
       await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
       await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
@@ -53,7 +63,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
-    it('foreground 0-7 drawBoldTextInBrightColors', async () => {
+    itWebgl('foreground 0-7 drawBoldTextInBrightColors', async () => {
       const theme: ITheme = {
         brightBlack: '#010203',
         brightRed: '#040506',
@@ -68,7 +78,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         window.term.setOption('theme', ${JSON.stringify(theme)});
         window.term.setOption('drawBoldTextInBrightColors', true);
       `);
-      await writeSync(`\\x1b[1;30m█\\x1b[1;31m█\\x1b[1;32m█\\x1b[1;33m█\\x1b[1;34m█\\x1b[1;35m█\\x1b[1;36m█\\x1b[1;37m█`);
+      await writeSync(page, `\\x1b[1;30m█\\x1b[1;31m█\\x1b[1;32m█\\x1b[1;33m█\\x1b[1;34m█\\x1b[1;35m█\\x1b[1;36m█\\x1b[1;37m█`);
       await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
       await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
       await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
@@ -79,7 +89,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
-    it('background 0-15', async () => {
+    itWebgl('background 0-15', async () => {
       const theme: ITheme = {
         black: '#010203',
         red: '#040506',
@@ -91,7 +101,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         white: '#161718'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
-      await writeSync(`\\x1b[40m \\x1b[41m \\x1b[42m \\x1b[43m \\x1b[44m \\x1b[45m \\x1b[46m \\x1b[47m `);
+      await writeSync(page, `\\x1b[40m \\x1b[41m \\x1b[42m \\x1b[43m \\x1b[44m \\x1b[45m \\x1b[46m \\x1b[47m `);
       await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
       await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
       await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
@@ -102,7 +112,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
-    it('foreground 0-15 inverse', async () => {
+    itWebgl('foreground 0-15 inverse', async () => {
       const theme: ITheme = {
         black: '#010203',
         red: '#040506',
@@ -114,7 +124,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         white: '#161718'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
-      await writeSync(`\\x1b[7;30m \\x1b[7;31m \\x1b[7;32m \\x1b[7;33m \\x1b[7;34m \\x1b[7;35m \\x1b[7;36m \\x1b[7;37m `);
+      await writeSync(page, `\\x1b[7;30m \\x1b[7;31m \\x1b[7;32m \\x1b[7;33m \\x1b[7;34m \\x1b[7;35m \\x1b[7;36m \\x1b[7;37m `);
       await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
       await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
       await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
@@ -125,7 +135,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
-    it('background 0-15 inverse', async () => {
+    itWebgl('background 0-15 inverse', async () => {
       const theme: ITheme = {
         black: '#010203',
         red: '#040506',
@@ -137,7 +147,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         white: '#161718'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
-      await writeSync(`\\x1b[7;40m█\\x1b[7;41m█\\x1b[7;42m█\\x1b[7;43m█\\x1b[7;44m█\\x1b[7;45m█\\x1b[7;46m█\\x1b[7;47m█`);
+      await writeSync(page, `\\x1b[7;40m█\\x1b[7;41m█\\x1b[7;42m█\\x1b[7;43m█\\x1b[7;44m█\\x1b[7;45m█\\x1b[7;46m█\\x1b[7;47m█`);
       await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
       await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
       await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
@@ -148,7 +158,53 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
-    it('foreground 0-15 bright', async () => {
+    itWebgl('foreground 0-15 inivisible', async () => {
+      const theme: ITheme = {
+        black: '#010203',
+        red: '#040506',
+        green: '#070809',
+        yellow: '#0a0b0c',
+        blue: '#0d0e0f',
+        magenta: '#101112',
+        cyan: '#131415',
+        white: '#161718'
+      };
+      await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
+      await writeSync(page, `\\x1b[8;30m \\x1b[8;31m \\x1b[8;32m \\x1b[8;33m \\x1b[8;34m \\x1b[8;35m \\x1b[8;36m \\x1b[8;37m `);
+      await pollFor(page, () => getCellColor(1, 1), [0, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(2, 1), [0, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(3, 1), [0, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(4, 1), [0, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(5, 1), [0, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(6, 1), [0, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(7, 1), [0, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(8, 1), [0, 0, 0, 255]);
+    });
+
+    itWebgl('background 0-15 inivisible', async () => {
+      const theme: ITheme = {
+        black: '#010203',
+        red: '#040506',
+        green: '#070809',
+        yellow: '#0a0b0c',
+        blue: '#0d0e0f',
+        magenta: '#101112',
+        cyan: '#131415',
+        white: '#161718'
+      };
+      await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
+      await writeSync(page, `\\x1b[8;40m█\\x1b[8;41m█\\x1b[8;42m█\\x1b[8;43m█\\x1b[8;44m█\\x1b[8;45m█\\x1b[8;46m█\\x1b[8;47m█`);
+      await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
+      await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
+      await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
+      await pollFor(page, () => getCellColor(4, 1), [10, 11, 12, 255]);
+      await pollFor(page, () => getCellColor(5, 1), [13, 14, 15, 255]);
+      await pollFor(page, () => getCellColor(6, 1), [16, 17, 18, 255]);
+      await pollFor(page, () => getCellColor(7, 1), [19, 20, 21, 255]);
+      await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
+    });
+
+    itWebgl('foreground 0-15 bright', async () => {
       const theme: ITheme = {
         brightBlack: '#010203',
         brightRed: '#040506',
@@ -160,7 +216,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         brightWhite: '#161718'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
-      await writeSync(`\\x1b[90m█\\x1b[91m█\\x1b[92m█\\x1b[93m█\\x1b[94m█\\x1b[95m█\\x1b[96m█\\x1b[97m█`);
+      await writeSync(page, `\\x1b[90m█\\x1b[91m█\\x1b[92m█\\x1b[93m█\\x1b[94m█\\x1b[95m█\\x1b[96m█\\x1b[97m█`);
       await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
       await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
       await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
@@ -171,7 +227,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
-    it('background 0-15 bright', async () => {
+    itWebgl('background 0-15 bright', async () => {
       const theme: ITheme = {
         brightBlack: '#010203',
         brightRed: '#040506',
@@ -183,7 +239,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         brightWhite: '#161718'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
-      await writeSync(`\\x1b[100m \\x1b[101m \\x1b[102m \\x1b[103m \\x1b[104m \\x1b[105m \\x1b[106m \\x1b[107m `);
+      await writeSync(page, `\\x1b[100m \\x1b[101m \\x1b[102m \\x1b[103m \\x1b[104m \\x1b[105m \\x1b[106m \\x1b[107m `);
       await pollFor(page, () => getCellColor(1, 1), [1, 2, 3, 255]);
       await pollFor(page, () => getCellColor(2, 1), [4, 5, 6, 255]);
       await pollFor(page, () => getCellColor(3, 1), [7, 8, 9, 255]);
@@ -194,7 +250,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
-    it('foreground 16-255', async () => {
+    itWebgl('foreground 16-255', async () => {
       let data = '';
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -202,7 +258,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
           const cssColor = COLORS_16_TO_255[y * 16 + x];
@@ -214,7 +270,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background 16-255', async () => {
+    itWebgl('background 16-255', async () => {
       let data = '';
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -222,7 +278,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
           const cssColor = COLORS_16_TO_255[y * 16 + x];
@@ -234,7 +290,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground 16-255 inverse', async () => {
+    itWebgl('foreground 16-255 inverse', async () => {
       let data = '';
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -242,7 +298,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
           const cssColor = COLORS_16_TO_255[y * 16 + x];
@@ -254,7 +310,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background 16-255 inverse', async () => {
+    itWebgl('background 16-255 inverse', async () => {
       let data = '';
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -262,7 +318,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
           const cssColor = COLORS_16_TO_255[y * 16 + x];
@@ -274,7 +330,47 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color red', async () => {
+    itWebgl('foreground 16-255 invisible', async () => {
+      let data = '';
+      for (let y = 0; y < 240 / 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          data += `\\x1b[8;38;5;${16 + y * 16 + x}m \x1b[0m`;
+        }
+        data += '\\r\\n';
+      }
+      await writeSync(page, data);
+      for (let y = 0; y < 240 / 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          const cssColor = COLORS_16_TO_255[y * 16 + x];
+          const r = parseInt(cssColor.substr(1, 2), 16);
+          const g = parseInt(cssColor.substr(3, 2), 16);
+          const b = parseInt(cssColor.substr(5, 2), 16);
+          await pollFor(page, () => getCellColor(x + 1, y + 1), [0, 0, 0, 255]);
+        }
+      }
+    });
+
+    itWebgl('background 16-255 invisible', async () => {
+      let data = '';
+      for (let y = 0; y < 240 / 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          data += `\\x1b[8;48;5;${16 + y * 16 + x}m█\x1b[0m`;
+        }
+        data += '\\r\\n';
+      }
+      await writeSync(page, data);
+      for (let y = 0; y < 240 / 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          const cssColor = COLORS_16_TO_255[y * 16 + x];
+          const r = parseInt(cssColor.substr(1, 2), 16);
+          const g = parseInt(cssColor.substr(3, 2), 16);
+          const b = parseInt(cssColor.substr(5, 2), 16);
+          await pollFor(page, () => getCellColor(x + 1, y + 1), [r, g, b, 255]);
+        }
+      }
+    });
+
+    itWebgl('foreground true color red', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -283,7 +379,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -292,7 +388,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background true color red', async () => {
+    itWebgl('background true color red', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -301,7 +397,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -310,7 +406,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color green', async () => {
+    itWebgl('foreground true color green', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -319,7 +415,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -328,7 +424,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background true color green', async () => {
+    itWebgl('background true color green', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -337,7 +433,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -346,7 +442,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color blue', async () => {
+    itWebgl('foreground true color blue', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -355,7 +451,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -364,7 +460,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background true color blue', async () => {
+    itWebgl('background true color blue', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -373,7 +469,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -382,7 +478,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color grey', async () => {
+    itWebgl('foreground true color grey', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -391,7 +487,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -400,7 +496,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background true color grey', async () => {
+    itWebgl('background true color grey', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -409,7 +505,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -418,7 +514,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color red inverse', async function(): Promise<void> {
+    itWebgl('foreground true color red inverse', async function(): Promise<void> {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -427,7 +523,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -436,7 +532,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background true color red inverse', async function(): Promise<void> {
+    itWebgl('background true color red inverse', async function(): Promise<void> {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -445,7 +541,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -454,7 +550,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color green inverse', async () => {
+    itWebgl('foreground true color green inverse', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -463,7 +559,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -472,7 +568,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background true color green inverse', async () => {
+    itWebgl('background true color green inverse', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -481,7 +577,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -490,7 +586,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color blue inverse', async () => {
+    itWebgl('foreground true color blue inverse', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -499,7 +595,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -508,7 +604,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background true color blue inverse', async () => {
+    itWebgl('background true color blue inverse', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -517,7 +613,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -526,7 +622,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color grey inverse', async () => {
+    itWebgl('foreground true color grey inverse', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -535,7 +631,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -544,7 +640,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('background true color grey inverse', async () => {
+    itWebgl('background true color grey inverse', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -553,7 +649,43 @@ describe('WebGL Renderer Integration Tests', function(): void {
         }
         data += '\\r\\n';
       }
-      await writeSync(data);
+      await writeSync(page, data);
+      for (let y = 0; y < 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          const i = y * 16 + x;
+          await pollFor(page, () => getCellColor(x + 1, y + 1), [i, i, i, 255]);
+        }
+      }
+    });
+
+    itWebgl('foreground true color grey invisible', async () => {
+      let data = '';
+      for (let y = 0; y < 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          const i = y * 16 + x;
+          data += `\\x1b[8;38;2;${i};${i};${i}m \x1b[0m`;
+        }
+        data += '\\r\\n';
+      }
+      await writeSync(page, data);
+      for (let y = 0; y < 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          const i = y * 16 + x;
+          await pollFor(page, () => getCellColor(x + 1, y + 1), [0, 0, 0, 255]);
+        }
+      }
+    });
+
+    itWebgl('background true color grey invisible', async () => {
+      let data = '';
+      for (let y = 0; y < 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          const i = y * 16 + x;
+          data += `\\x1b[8;48;2;${i};${i};${i}m█\x1b[0m`;
+        }
+        data += '\\r\\n';
+      }
+      await writeSync(page, data);
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
           const i = y * 16 + x;
@@ -564,11 +696,13 @@ describe('WebGL Renderer Integration Tests', function(): void {
   });
 
   describe('minimumContrastRatio', async () => {
-    before(async () => setupBrowser());
-    after(async () => browser.close());
-    beforeEach(async () => page.evaluate(`window.term.reset()`));
+    if (areTestsEnabled) {
+      before(async () => setupBrowser());
+      after(async () => browser.close());
+      beforeEach(async () => page.evaluate(`window.term.reset()`));
+    }
 
-    it('should adjust 0-15 colors on black background', async () => {
+    itWebgl('should adjust 0-15 colors on black background', async () => {
       const theme: ITheme = {
         black: '#2e3436',
         red: '#cc0000',
@@ -591,7 +725,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         window.term.setOption('theme', ${JSON.stringify(theme)});
         window.term.setOption('minimumContrastRatio', 1);
       `);
-      await writeSync(
+      await writeSync(page,
         `\\x1b[30m█\\x1b[31m█\\x1b[32m█\\x1b[33m█\\x1b[34m█\\x1b[35m█\\x1b[36m█\\x1b[37m█\\r\\n` +
         `\\x1b[90m█\\x1b[91m█\\x1b[92m█\\x1b[93m█\\x1b[94m█\\x1b[95m█\\x1b[96m█\\x1b[97m█`
       );
@@ -635,7 +769,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 2), [0xee, 0xee, 0xec, 255]);
     });
 
-    it('should adjust 0-15 colors on white background', async () => {
+    itWebgl('should adjust 0-15 colors on white background', async () => {
       const theme: ITheme = {
         background: '#ffffff',
         black: '#2e3436',
@@ -659,7 +793,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         window.term.setOption('theme', ${JSON.stringify(theme)});
         window.term.setOption('minimumContrastRatio', 1);
       `);
-      await writeSync(
+      await writeSync(page,
         `\\x1b[30m█\\x1b[31m█\\x1b[32m█\\x1b[33m█\\x1b[34m█\\x1b[35m█\\x1b[36m█\\x1b[37m█\\r\\n` +
         `\\x1b[90m█\\x1b[91m█\\x1b[92m█\\x1b[93m█\\x1b[94m█\\x1b[95m█\\x1b[96m█\\x1b[97m█`
       );
@@ -703,37 +837,52 @@ describe('WebGL Renderer Integration Tests', function(): void {
     });
   });
 
+  describe('selection', async () => {
+    if (areTestsEnabled) {
+      before(async () => setupBrowser());
+      after(async () => browser.close());
+      beforeEach(async () => page.evaluate(`window.term.reset()`));
+    }
+
+    itWebgl('should resolve the inverse foreground color based on the original background color, not the selection', async () => {
+      const theme: ITheme = {
+        foreground: '#FF0000',
+        background: '#00FF00',
+        selection: '#0000FF'
+      };
+      await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
+      await writeSync(page, ` █\\x1b[7m█\\x1b[0m`);
+      await pollFor(page, () => getCellColor(1, 1), [0, 255, 0, 255]);
+      await pollFor(page, () => getCellColor(2, 1), [255, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(3, 1), [0, 255, 0, 255]);
+      await page.evaluate(`window.term.selectAll()`);
+      // Selection only cell needs to be first to ensure renderer has kicked in
+      await pollFor(page, () => getCellColor(1, 1), [0, 0, 255, 255]);
+      await pollFor(page, () => getCellColor(2, 1), [255, 0, 0, 255]);
+      await pollFor(page, () => getCellColor(3, 1), [0, 255, 0, 255]);
+    });
+  });
+
   describe('allowTransparency', async () => {
-    before(async () => setupBrowser({ rendererType: 'dom', allowTransparency: true}));
-    after(async () => browser.close());
-    beforeEach(async () => page.evaluate(`window.term.reset()`));
-    it('transparent background inverse', async () => {
+    if (areTestsEnabled) {
+      before(async () => setupBrowser({ rendererType: 'dom', allowTransparency: true }));
+      after(async () => browser.close());
+      beforeEach(async () => page.evaluate(`window.term.reset()`));
+    }
+
+    itWebgl('transparent background inverse', async () => {
       const theme: ITheme = {
         background: '#ff000080'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
       const data = `\\x1b[7m█\x1b[0m`;
-      await writeSync(data);
+      await writeSync(page, data);
       // Inverse background should be opaque
       await pollFor(page, () => getCellColor(1, 1), [255, 0, 0, 255]);
     });
   });
 });
 
-async function openTerminal(options: ITerminalOptions = {}): Promise<void> {
-  await page.evaluate(`window.term = new Terminal(${JSON.stringify(options)})`);
-  await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
-  if (options.rendererType === 'dom') {
-    await page.waitForSelector('.xterm-rows');
-  } else {
-    await page.waitForSelector('.xterm-text-layer');
-  }
-}
-
-async function writeSync(data: string): Promise<void> {
-  return page.evaluate(`new Promise(resolve => window.term.write('${data}', resolve))`);
-}
-
 async function getCellColor(col: number, row: number): Promise<number[]> {
   await page.evaluate(`
     window.gl = window.term._core._renderService._renderer._gl;
@@ -749,32 +898,20 @@ async function getCellColor(col: number, row: number): Promise<number[]> {
 }
 
 async function setupBrowser(options: ITerminalOptions = { rendererType: 'dom' }): Promise<void> {
-  browser = await puppeteer.launch({
-    headless: process.argv.indexOf('--headless') !== -1,
-    args: [`--window-size=${width},${height}`, `--no-sandbox`]
+  const browserType = getBrowserType();
+  browser = await browserType.launch({ dumpio: true,
+    headless: process.argv.indexOf('--headless') !== -1
   });
-  page = (await browser.pages())[0];
-  await page.setViewport({ width, height });
+  page = await (await browser.newContext()).newPage();
+  await page.setViewportSize({ width, height });
   await page.goto(APP);
-  await openTerminal(options);
+  await openTerminal(page, options);
   await page.evaluate(`
     window.addon = new WebglAddon(true);
     window.term.loadAddon(window.addon);
   `);
 }
 
-export async function pollFor<T>(page: puppeteer.Page, evalOrFn: string | (() => Promise<T>), val: T, preFn?: () => Promise<void>): Promise<void> {
-  if (preFn) {
-    await preFn();
-  }
-  const result = typeof evalOrFn === 'string' ? await page.evaluate(evalOrFn) : await evalOrFn();
-  if (!deepEqual(result, val)) {
-    return new Promise<void>(r => {
-      setTimeout(() => r(pollFor(page, evalOrFn, val, preFn)), 1);
-    });
-  }
-}
-
 const COLORS_16_TO_255 = [
   '#000000', '#00005f', '#000087', '#0000af', '#0000d7', '#0000ff', '#005f00', '#005f5f', '#005f87', '#005faf', '#005fd7', '#005fff', '#008700', '#00875f', '#008787', '#0087af',
   '#0087d7', '#0087ff', '#00af00', '#00af5f', '#00af87', '#00afaf', '#00afd7', '#00afff', '#00d700', '#00d75f', '#00d787', '#00d7af', '#00d7d7', '#00d7ff', '#00ff00', '#00ff5f',

addons/xterm-addon-webgl/src/WebglRenderer.ts

@@ -49,7 +49,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
   ) {
     super();
 
-    this._core = (<any>this._terminal)._core;
+    this._core = (this._terminal as any)._core;
 
     this._renderLayers = [
       new LinkRenderLayer(this._core.screenElement, 2, this._colors, this._core),
@@ -81,7 +81,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     };
     this._gl = this._canvas.getContext('webgl2', contextAttributes) as IWebGL2RenderingContext;
     if (!this._gl) {
-        throw new Error('WebGL2 not supported');
+      throw new Error('WebGL2 not supported ' + this._gl);
     }
     this._core.screenElement.appendChild(this._canvas);
 
@@ -100,6 +100,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
     super.dispose();
   }
 
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._charAtlas?.cacheCanvas;
+  }
+
   public setColors(colors: IColorSet): void {
     this._colors = colors;
     // Clear layers and force a full render
@@ -222,7 +226,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   public renderRows(start: number, end: number): void {
     if (!this._isAttached) {
-      if (document.body.contains(this._core.screenElement) && (<any>this._core)._charSizeService.width && (<any>this._core)._charSizeService.height) {
+      if (document.body.contains(this._core.screenElement) && (this._core as any)._charSizeService.width && (this._core as any)._charSizeService.height) {
         this._updateDimensions();
         this._refreshCharAtlas();
         this._isAttached = true;
@@ -298,8 +302,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
     }
 
     // Translate from buffer position to viewport position
-    const viewportStartRow = start[1] - terminal.buffer.viewportY;
-    const viewportEndRow = end[1] - terminal.buffer.viewportY;
+    const viewportStartRow = start[1] - terminal.buffer.active.viewportY;
+    const viewportEndRow = end[1] - terminal.buffer.active.viewportY;
     const viewportCappedStartRow = Math.max(viewportStartRow, 0);
     const viewportCappedEndRow = Math.min(viewportEndRow, terminal.rows - 1);
 
@@ -325,7 +329,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     // TODO: Acquire CharSizeService properly
 
     // Perform a new measure if the CharMeasure dimensions are not yet available
-    if (!(<any>this._core)._charSizeService.width || !(<any>this._core)._charSizeService.height) {
+    if (!(this._core as any)._charSizeService.width || !(this._core as any)._charSizeService.height) {
       return;
     }
 
@@ -336,12 +340,12 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     // NOTE: ceil fixes sometime, floor does others :s
 
-    this.dimensions.scaledCharWidth = Math.floor((<any>this._core)._charSizeService.width * this._devicePixelRatio);
+    this.dimensions.scaledCharWidth = Math.floor((this._core as any)._charSizeService.width * this._devicePixelRatio);
 
     // Calculate the scaled character height. Height is ceiled in case
     // devicePixelRatio is a floating point number in order to ensure there is
     // enough space to draw the character to the cell.
-    this.dimensions.scaledCharHeight = Math.ceil((<any>this._core)._charSizeService.height * this._devicePixelRatio);
+    this.dimensions.scaledCharHeight = Math.ceil((this._core as any)._charSizeService.height * this._devicePixelRatio);
 
     // Calculate the scaled cell height, if lineHeight is not 1 then the value
     // will be floored because since lineHeight can never be lower then 1, there

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

@@ -11,7 +11,7 @@ import { throwIfFalsy } from '../WebglUtils';
 import { IColor } from 'browser/Types';
 import { IDisposable } from 'xterm';
 import { AttributeData } from 'common/buffer/AttributeData';
-import { toCss, ensureContrastRatioRgba } from 'browser/Color';
+import { channels, rgba } from 'browser/Color';
 
 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -86,9 +86,6 @@ export class WebglCharAtlas implements IDisposable {
     this._tmpCanvas.width = this._config.scaledCharWidth * 2 + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency}));
-
-    // This is useful for debugging
-    document.body.appendChild(this.cacheCanvas);
   }
 
   public dispose(): void {
@@ -224,7 +221,7 @@ export class WebglCharAtlas implements IDisposable {
         return this._getColorFromAnsiIndex(fgColor).css;
       case Attributes.CM_RGB:
         const arr = AttributeData.toColorRGB(fgColor);
-        return toCss(arr[0], arr[1], arr[2]);
+        return channels.toCss(arr[0], arr[1], arr[2]);
       case Attributes.CM_DEFAULT:
       default:
         if (inverse) {
@@ -287,14 +284,14 @@ export class WebglCharAtlas implements IDisposable {
 
     const bgRgba = this._resolveBackgroundRgba(bgColorMode, bgColor, inverse);
     const fgRgba = this._resolveForegroundRgba(fgColorMode, fgColor, inverse, bold);
-    const result = ensureContrastRatioRgba(bgRgba, fgRgba, this._config.minimumContrastRatio);
+    const result = rgba.ensureContrastRatio(bgRgba, fgRgba, this._config.minimumContrastRatio);
 
     if (!result) {
       this._config.colors.contrastCache.setCss(bg, fg, null);
       return undefined;
     }
 
-    const css = toCss(
+    const css = channels.toCss(
       (result >> 24) & 0xFF,
       (result >> 16) & 0xFF,
       (result >> 8) & 0xFF
@@ -316,6 +313,11 @@ export class WebglCharAtlas implements IDisposable {
     this._workAttributeData.fg = fg;
     this._workAttributeData.bg = bg;
 
+    const invisible = !!this._workAttributeData.isInvisible();
+    if (invisible) {
+      return NULL_RASTERIZED_GLYPH;
+    }
+
     const bold = !!this._workAttributeData.isBold();
     const inverse = !!this._workAttributeData.isInverse();
     const dim = !!this._workAttributeData.isDim();

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

@@ -74,7 +74,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     const oldCanvas = this._canvas;
     this._alpha = alpha;
     // Cloning preserves properties
-    this._canvas = <HTMLCanvasElement>this._canvas.cloneNode();
+    this._canvas = this._canvas.cloneNode() as HTMLCanvasElement;
     this._initCanvas();
     this._container.replaceChild(this._canvas, oldCanvas);
 
@@ -127,10 +127,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected _fillCells(x: number, y: number, width: number, height: number): void {
     this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        width * this._scaledCellWidth,
-        height * this._scaledCellHeight);
+      x * this._scaledCellWidth,
+      y * this._scaledCellHeight,
+      width * this._scaledCellWidth,
+      height * this._scaledCellHeight);
   }
 
   /**
@@ -141,10 +141,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected _fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
     this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
-        width * this._scaledCellWidth,
-        window.devicePixelRatio);
+      x * this._scaledCellWidth,
+      (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
+      width * this._scaledCellWidth,
+      window.devicePixelRatio);
   }
 
   /**
@@ -153,12 +153,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to fill.
    * @param y The row to fill.
    */
-  protected _fillLeftLineAtCell(x: number, y: number): void {
+  protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
     this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        window.devicePixelRatio,
-        this._scaledCellHeight);
+      x * this._scaledCellWidth,
+      y * this._scaledCellHeight,
+      window.devicePixelRatio * width,
+      this._scaledCellHeight);
   }
 
   /**
@@ -170,10 +170,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   protected _strokeRectAtCell(x: number, y: number, width: number, height: number): void {
     this._ctx.lineWidth = window.devicePixelRatio;
     this._ctx.strokeRect(
-        x * this._scaledCellWidth + window.devicePixelRatio / 2,
-        y * this._scaledCellHeight + (window.devicePixelRatio / 2),
-        width * this._scaledCellWidth - window.devicePixelRatio,
-        (height * this._scaledCellHeight) - window.devicePixelRatio);
+      x * this._scaledCellWidth + window.devicePixelRatio / 2,
+      y * this._scaledCellHeight + (window.devicePixelRatio / 2),
+      width * this._scaledCellWidth - window.devicePixelRatio,
+      (height * this._scaledCellHeight) - window.devicePixelRatio);
   }
 
   /**
@@ -198,17 +198,17 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   protected _clearCells(x: number, y: number, width: number, height: number): void {
     if (this._alpha) {
       this._ctx.clearRect(
-          x * this._scaledCellWidth,
-          y * this._scaledCellHeight,
-          width * this._scaledCellWidth,
-          height * this._scaledCellHeight);
+        x * this._scaledCellWidth,
+        y * this._scaledCellHeight,
+        width * this._scaledCellWidth,
+        height * this._scaledCellHeight);
     } else {
       this._ctx.fillStyle = this._colors.background.css;
       this._ctx.fillRect(
-          x * this._scaledCellWidth,
-          y * this._scaledCellHeight,
-          width * this._scaledCellWidth,
-          height * this._scaledCellHeight);
+        x * this._scaledCellWidth,
+        y * this._scaledCellHeight,
+        width * this._scaledCellWidth,
+        height * this._scaledCellHeight);
     }
   }
 
@@ -227,9 +227,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.textBaseline = 'middle';
     this._clipRow(terminal, y);
     this._ctx.fillText(
-        cell.getChars(),
-        x * this._scaledCellWidth + this._scaledCharLeft,
-        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
+      cell.getChars(),
+      x * this._scaledCellWidth + this._scaledCharLeft,
+      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
   }
 
   /**
@@ -240,10 +240,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   private _clipRow(terminal: Terminal, y: number): void {
     this._ctx.beginPath();
     this._ctx.rect(
-        0,
-        y * this._scaledCellHeight,
-        terminal.cols * this._scaledCellWidth,
-        this._scaledCellHeight);
+      0,
+      y * this._scaledCellHeight,
+      terminal.cols * this._scaledCellWidth,
+      this._scaledCellHeight);
     this._ctx.clip();
   }
 

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

@@ -76,14 +76,14 @@ export class CursorRenderLayer extends BaseRenderLayer {
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.pause();
     }
-    this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.cursorY, end: terminal.buffer.cursorY });
+    this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.active.cursorY, end: terminal.buffer.active.cursorY });
   }
 
   public onFocus(terminal: Terminal): void {
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.resume(terminal);
     } else {
-      this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.cursorY, end: terminal.buffer.cursorY });
+      this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.active.cursorY, end: terminal.buffer.active.cursorY });
     }
   }
 
@@ -100,7 +100,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     }
     // Request a refresh from the terminal as management of rendering is being
     // moved back to the terminal
-    this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.cursorY, end: terminal.buffer.cursorY });
+    this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.active.cursorY, end: terminal.buffer.active.cursorY });
   }
 
   public onCursorMove(terminal: Terminal): void {
@@ -125,8 +125,11 @@ export class CursorRenderLayer extends BaseRenderLayer {
       return;
     }
 
-    const cursorY = terminal.buffer.baseY + terminal.buffer.cursorY;
-    const viewportRelativeCursorY = cursorY - terminal.buffer.viewportY;
+    const cursorY = terminal.buffer.active.baseY + terminal.buffer.active.cursorY;
+    const viewportRelativeCursorY = cursorY - terminal.buffer.active.viewportY;
+
+    // in case cursor.x == cols adjust visual cursor to cols - 1
+    const cursorX = Math.min(terminal.buffer.active.cursorX, terminal.cols - 1);
 
     // Don't draw the cursor if it's off-screen
     if (viewportRelativeCursorY < 0 || viewportRelativeCursorY >= terminal.rows) {
@@ -135,7 +138,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     }
 
     // TODO: Need fast buffer API for loading cell
-    (terminal as any)._core.buffer.lines.get(cursorY).loadCell(terminal.buffer.cursorX, this._cell);
+    (terminal as any)._core.buffer.lines.get(cursorY).loadCell(cursorX, this._cell);
     if (this._cell.content === undefined) {
       return;
     }
@@ -146,12 +149,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
       this._ctx.fillStyle = this._colors.cursor.css;
       const cursorStyle = terminal.getOption('cursorStyle');
       if (cursorStyle && cursorStyle !== 'block') {
-        this._cursorRenderers[cursorStyle](terminal, terminal.buffer.cursorX, viewportRelativeCursorY, this._cell);
+        this._cursorRenderers[cursorStyle](terminal, cursorX, viewportRelativeCursorY, this._cell);
       } else {
-        this._renderBlurCursor(terminal, terminal.buffer.cursorX, viewportRelativeCursorY, this._cell);
+        this._renderBlurCursor(terminal, cursorX, viewportRelativeCursorY, this._cell);
       }
       this._ctx.restore();
-      this._state.x = terminal.buffer.cursorX;
+      this._state.x = cursorX;
       this._state.y = viewportRelativeCursorY;
       this._state.isFocused = false;
       this._state.style = cursorStyle;
@@ -167,7 +170,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
     if (this._state) {
       // The cursor is already in the correct spot, don't redraw
-      if (this._state.x === terminal.buffer.cursorX &&
+      if (this._state.x === cursorX &&
           this._state.y === viewportRelativeCursorY &&
           this._state.isFocused === isTerminalFocused(terminal) &&
           this._state.style === terminal.getOption('cursorStyle') &&
@@ -178,10 +181,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     }
 
     this._ctx.save();
-    this._cursorRenderers[terminal.getOption('cursorStyle') || 'block'](terminal, terminal.buffer.cursorX, viewportRelativeCursorY, this._cell);
+    this._cursorRenderers[terminal.getOption('cursorStyle') || 'block'](terminal, cursorX, viewportRelativeCursorY, this._cell);
     this._ctx.restore();
 
-    this._state.x = terminal.buffer.cursorX;
+    this._state.x = cursorX;
     this._state.y = viewportRelativeCursorY;
     this._state.isFocused = false;
     this._state.style = terminal.getOption('cursorStyle');
@@ -204,7 +207,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _renderBarCursor(terminal: Terminal, x: number, y: number, cell: ICellData): void {
     this._ctx.save();
     this._ctx.fillStyle = this._colors.cursor.css;
-    this._fillLeftLineAtCell(x, y);
+    this._fillLeftLineAtCell(x, y, terminal.getOption('cursorWidth'));
     this._ctx.restore();
   }
 
@@ -299,7 +302,7 @@ class CursorBlinkStateManager {
     // the regular interval is setup in order to support restarting the blink
     // animation in a lightweight way (without thrashing clearInterval and
     // setInterval).
-    this._blinkStartTimeout = <number><any>setTimeout(() => {
+    this._blinkStartTimeout = window.setTimeout(() => {
       // Check if another animation restart was requested while this was being
       // started
       if (this._animationTimeRestarted) {
@@ -319,7 +322,7 @@ class CursorBlinkStateManager {
       });
 
       // Setup the blink interval
-      this._blinkInterval = <number><any>setInterval(() => {
+      this._blinkInterval = window.setInterval(() => {
         // Adjust the animation time if it was restarted
         if (this._animationTimeRestarted) {
           // calc time diff
@@ -357,6 +360,9 @@ class CursorBlinkStateManager {
   }
 
   public resume(terminal: Terminal): void {
+    // Clear out any existing timers just in case
+    this.pause();
+
     this._animationTimeRestarted = undefined;
     this._restartInterval();
     this.restartBlinkAnimation(terminal);

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

@@ -18,6 +18,9 @@ export class LinkRenderLayer extends BaseRenderLayer {
     super(container, 'link', zIndex, true, colors);
     terminal.linkifier.onLinkHover(e => this._onLinkHover(e));
     terminal.linkifier.onLinkLeave(e => this._onLinkLeave(e));
+
+    terminal.linkifier2.onLinkHover(e => this._onLinkHover(e));
+    terminal.linkifier2.onLinkLeave(e => this._onLinkLeave(e));
   }
 
   public resize(terminal: Terminal, dim: IRenderDimensions): void {

addons/xterm-addon-webgl/src/tsconfig.json

@@ -12,17 +12,29 @@
     "removeComments": true,
     "baseUrl": ".",
     "paths": {
-      "common/*": [ "../../../src/common/*" ],
-      "browser/*": [ "../../../src/browser/*" ]
+      "common/*": [
+        "../../../src/common/*"
+      ],
+      "browser/*": [
+        "../../../src/browser/*"
+      ]
     },
-    "strict": true
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../out-test/api/TestUtils"
+    ]
   },
   "include": [
     "./**/*",
     "../../../typings/xterm.d.ts"
   ],
   "references": [
-    { "path": "../../../src/common" },
-    { "path": "../../../src/browser" }
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    }
   ]
 }

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

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

azure-pipelines.yml

@@ -6,13 +6,11 @@
 jobs:
 - job: Linux
   pool:
-    vmImage: 'ubuntu-16.04'
-  variables:
-    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+    vmImage: 'ubuntu-18.04'
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '8.x'
+      versionSpec: '10.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -27,7 +25,9 @@ jobs:
     displayName: 'Install dependencies and build'
   - script: |
       yarn test-unit-coverage --forbid-only
+      EXIT_CODE=$?
       ./node_modules/.bin/nyc report --reporter=cobertura
+      exit $EXIT_CODE
     displayName: 'Unit tests'
   - script: yarn lint
     displayName: 'Lint'
@@ -39,13 +39,11 @@ jobs:
 
 - job: macOS
   pool:
-    vmImage: 'xcode9-macos10.13'
-  variables:
-    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+    vmImage: 'macOS-10.15'
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '8.x'
+      versionSpec: '10.x'
     displayName: 'Install Node.js'
   - task: CacheBeta@1
     inputs:
@@ -62,12 +60,10 @@ jobs:
 - job: Windows
   pool:
     vmImage: 'vs2017-win2016'
-  variables:
-    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '8.x'
+      versionSpec: '10.x'
     displayName: 'Install Node.js'
   - task: CacheBeta@1
     inputs:
@@ -83,39 +79,66 @@ jobs:
 
 - job: Linux_IntegrationTests
   pool:
-    vmImage: 'ubuntu-16.04'
+    vmImage: 'ubuntu-18.04'
   steps:
+  - script: |
+      # source: https://github.com/microsoft/playwright/issues/1041
+      sudo apt update
+      sudo apt install libwoff1 libopus0 libwebp6 libwebpdemux2 libenchant1c2a libgudev-1.0-0 libsecret-1-0 libhyphen0 libgdk-pixbuf2.0-0 libegl1 libnotify4 libxslt1.1 libevent-2.1-6 libgles2 libgl1 libegl1 libvpx5
+      # for chromium
+      sudo apt install libnss3 libxss1 libasound2
+      # for firefox
+      sudo apt install libdbus-glib-1-2 libxt6
+    displayName: Install required packages
   - task: NodeTool@0
     inputs:
-      versionSpec: '8.x'
+      versionSpec: '10.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
       versionSpec: '1.x'
     displayName: 'Install Yarn'
+  - task: CacheBeta@1
+    inputs:
+      key: yarn2 | $(Agent.OS) | yarn.lock
+      path: node_modules
+    displayName: Cache node modules
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
   - script: |
       yarn start &
       sleep 10
-      yarn test-api --headless --forbid-only
-    displayName: 'Linux Integration tests'
+    displayName: 'Start test server'
+  - script: yarn test-api-chromium --headless --forbid-only
+    displayName: 'Integration tests (Chromium)'
+  - script: xvfb-run --auto-servernum -- bash -c "yarn test-api-firefox --headless --forbid-only"
+    displayName: 'Integration tests (Firefox)'
 
 - job: macOS_IntegrationTests
   pool:
-    vmImage: 'xcode9-macos10.13'
+    vmImage: 'macOS-10.15'
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '8.x'
+      versionSpec: '10.x'
     displayName: 'Install Node.js'
+  - task: CacheBeta@1
+    inputs:
+      key: yarn2 | $(Agent.OS) | yarn.lock
+      path: node_modules
+    displayName: Cache node modules
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
   - script: |
       yarn start &
       sleep 10
-      yarn test-api --headless --forbid-only
-    displayName: 'MacOS Integration tests'
+    displayName: 'Start test server'
+  - script: yarn test-api-chromium --headless --forbid-only
+    displayName: 'Integration tests (Chromium)'
+  - script: yarn test-api-firefox --headless --forbid-only
+    displayName: 'Integration tests (Firefox)'
+  - script: yarn test-api-webkit --headless --forbid-only
+    displayName: 'Integration tests (Webkit)'
 
 - job: Release
   dependsOn:
@@ -127,12 +150,10 @@ jobs:
   condition: and(succeeded(), or(eq(variables['Build.SourceBranch'], 'refs/heads/master'), eq(variables['FORCE_RELEASE'], 'true')))
   pool:
     vmImage: 'ubuntu-16.04'
-  variables:
-    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '8.x'
+      versionSpec: '10.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:

bin/download_browser.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2020 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const playwright = require('playwright-core');
+const fs = require('fs');
+
+// Default to chromium
+let browserType = playwright['chromium'];
+const index = process.argv.indexOf('--browser');
+if (index !== -1 && process.argv.length > index + 1 && typeof process.argv[index + 1] === 'string') {
+  const string = process.argv[index + 1];
+  if (string === 'firefox' || string === 'webkit') {
+    browserType = playwright[string];
+  }
+}
+
+const exists = fs.existsSync(browserType.executablePath());
+if (!exists) {
+  console.log(`Downloading ${browserType.name()}`);
+  browserType.downloadBrowserIfNeeded().then(() => process.exit(0));
+}

bin/extract_vtfeatures.js

@@ -0,0 +1,509 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ * 
+ * Script to extract vt features documented in docstrings.
+ */
+const fs = require('fs');
+const Mustache = require('mustache');
+
+/**
+ * regexp to fetch all comments
+ * Fetches all multiline comments and single lines containing '// @vt:'.
+ */
+const REX_COMMENTS = /^\s*?[/][*][*]([\s\S]*?)[*][/]|^\s*?\/\/ ([@]vt[:].*?)$/mug;
+
+/**
+ * regexp to parse the @vt line
+ * expected data - "@vt: <status> <kind> <mnemonic> "<name>" "<sequence>" "<short description>"
+ */
+const REX_VT_LINE = /^[@]vt\:\s*(\w+|#\w+|#\w+\[.*?\])\s*(\w+)\s*(\w+)\s*"(.*?)"\s*"(.*?)"\s*"(.*?)".*$/;
+
+// known vt command types
+const TYPES = [
+  'C0',
+  'C1',
+  'ESC',
+  'CSI',
+  'DCS',
+  'OSC',
+  'APC',
+  'PM',
+  'SOS'
+];
+
+const MARKDOWN_TMPL = `---
+title: Supported Terminal Sequences
+category: API
+---
+
+{::options parse_block_html="true" /}
+
+# Supported Terminal Sequences
+
+xterm.js version: {{version}}
+
+## Table of Contents
+
+<nav>
+
+- [General notes](#general-notes)
+{{#C0.length}}
+- [C0](#c0)
+{{/C0.length}}
+{{#C1.length}}
+- [C1](#c1)
+{{/C1.length}}
+{{#CSI.length}}
+- [CSI](#csi)
+{{/CSI.length}}
+{{#DCS.length}}
+- [DCS](#dcs)
+{{/DCS.length}}
+{{#ESC.length}}
+- [ESC](#esc)
+{{/ESC.length}}
+{{#OSC.length}}
+- [OSC](#osc)
+{{/OSC.length}}
+
+</nav>
+
+
+## General notes
+
+This document lists xterm.js' support of terminal sequences. The sequences are grouped by their sequence type:
+
+- C0: single byte command (7bit control codes, byte range \`\\x00\` .. \`\\x1F\`, \`\\x7F\`)
+- C1: single byte command (8bit control codes, byte range \`\\x80\` .. \`\\x9F\`)
+- ESC: sequence starting with \`ESC\` (\`\\x1B\`)
+- CSI - Control Sequence Introducer: sequence starting with \`ESC [\` (7bit) or CSI (\`\\x9B\`, 8bit)
+- DCS - Device Control String: sequence starting with \`ESC P\` (7bit) or DCS (\`\\x90\`, 8bit)
+- OSC - Operating System Command: sequence starting with \`ESC ]\` (7bit) or OSC (\`\\x9D\`, 8bit)
+
+Application Program Command (APC), Privacy Message (PM) and Start of String (SOS) are recognized but not supported,
+any sequence of these types will be ignored. They are also not hookable by the API.
+
+Note that the list only contains sequences implemented in xterm.js' core codebase. Missing sequences are either
+not supported or unstable/experimental. Furthermore addons or integrations can provide additional custom sequences.
+
+To denote the sequences the tables use the same abbreviations as xterm does:
+- \`Ps\`: A single (usually optional) numeric parameter, composed of one or more decimal digits.
+- \`Pm\`: A multiple numeric parameter composed of any number of single numeric parameters, separated by ; character(s),
+  e.g. \` Ps ; Ps ; ... \`.
+- \`Pt\`: A text parameter composed of printable characters. Note that for most commands with \`Pt\` only
+  ASCII printables are specified to work. Additionally the parser will let pass any codepoint greater than C1 as printable.
+
+
+
+{{#C0.length}}
+## C0
+
+| Mnemonic | Name | Sequence | Short Description | Support |
+| -------- | ---- | -------- | ----------------- | ------- |
+{{#C0}}
+| {{mnemonic}} | {{name}} | \`{{sequence}}\` | {{{shortDescription}}} {{#longDescription.length}}_[more](#{{longTarget}}){: .link-details}_{{/longDescription.length}} | {{{status}}} |
+{{/C0}}
+
+{{#C0.hasLongDescriptions}}
+{{#C0}}
+{{#longDescription.length}}
+<section class="sequence-details">
+
+### {{name}}
+{{#longDescription}}
+{{{.}}}
+{{/longDescription}}
+
+</section>
+{{/longDescription.length}}
+{{/C0}}
+{{/C0.hasLongDescriptions}}
+
+{{/C0.length}}
+
+
+{{#C1.length}}
+## C1
+
+| Mnemonic | Name | Sequence | Short Description | Support |
+| -------- | ---- | -------- | ----------------- | ------- |
+{{#C1}}
+| {{mnemonic}} | {{name}} | \`{{sequence}}\` | {{{shortDescription}}} {{#longDescription.length}}_[more](#{{longTarget}}){: .link-details}_{{/longDescription.length}} | {{{status}}} |
+{{/C1}}
+
+{{#C1.hasLongDescriptions}}
+{{#C1}}
+{{#longDescription.length}}
+<section class="sequence-details">
+
+### {{name}}
+{{#longDescription}}
+{{{.}}}
+{{/longDescription}}
+
+</section>
+{{/longDescription.length}}
+{{/C1}}
+{{/C1.hasLongDescriptions}}
+
+{{/C1.length}}
+
+
+{{#CSI.length}}
+## CSI
+
+| Mnemonic | Name | Sequence | Short Description | Support |
+| -------- | ---- | -------- | ----------------- | ------- |
+{{#CSI}}
+| {{mnemonic}} | {{name}} | \`\`{{{sequence}}}\`\` | {{{shortDescription}}} {{#longDescription.length}}_[more](#{{longTarget}}){: .link-details}_{{/longDescription.length}} | {{{status}}} |
+{{/CSI}}
+
+{{#CSI.hasLongDescriptions}}
+{{#CSI}}
+{{#longDescription.length}}
+<section class="sequence-details">
+
+### {{name}}
+{{#longDescription}}
+{{{.}}}
+{{/longDescription}}
+
+</section>
+{{/longDescription.length}}
+{{/CSI}}
+{{/CSI.hasLongDescriptions}}
+
+{{/CSI.length}}
+
+
+{{#DCS.length}}
+## DCS
+
+| Mnemonic | Name | Sequence | Short Description | Support |
+| -------- | ---- | -------- | ----------------- | ------- |
+{{#DCS}}
+| {{mnemonic}} | {{name}} | \`{{sequence}}\` | {{{shortDescription}}} {{#longDescription.length}}_[more](#{{longTarget}}){: .link-details}_{{/longDescription.length}} | {{{status}}} |
+{{/DCS}}
+
+{{#DCS.hasLongDescriptions}}
+{{#DCS}}
+{{#longDescription.length}}
+<section class="sequence-details">
+
+### {{name}}
+{{#longDescription}}
+{{{.}}}
+{{/longDescription}}
+
+</section>
+{{/longDescription.length}}
+{{/DCS}}
+{{/DCS.hasLongDescriptions}}
+
+{{/DCS.length}}
+
+
+{{#ESC.length}}
+## ESC
+
+| Mnemonic | Name | Sequence | Short Description | Support |
+| -------- | ---- | -------- | ----------------- | ------- |
+{{#ESC}}
+| {{mnemonic}} | {{name}} | \`{{sequence}}\` | {{{shortDescription}}} {{#longDescription.length}}_[more](#{{longTarget}}){: .link-details}_{{/longDescription.length}} | {{{status}}} |
+{{/ESC}}
+
+{{#ESC.hasLongDescriptions}}
+{{#ESC}}
+{{#longDescription.length}}
+<section class="sequence-details">
+
+### {{name}}
+{{#longDescription}}
+{{{.}}}
+{{/longDescription}}
+
+</section>
+{{/longDescription.length}}
+{{/ESC}}
+{{/ESC.hasLongDescriptions}}
+
+{{/ESC.length}}
+
+
+{{#OSC.length}}
+## OSC
+
+**Note**: Other than listed in the table, the parser recognizes both ST (ECMA-48) and BEL (xterm) as OSC sequence finalizer.
+
+| Identifier | Sequence | Short Description | Support |
+| ---------- | -------- | ----------------- | ------- |
+{{#OSC}}
+| {{mnemonic}} | \`{{sequence}}\` | {{{shortDescription}}} {{#longDescription.length}}_[more](#{{longTarget}}){: .link-details}_{{/longDescription.length}} | {{{status}}} |
+{{/OSC}}
+
+{{#OSC.hasLongDescriptions}}
+{{#OSC}}
+{{#longDescription.length}}
+<section class="sequence-details">
+
+### {{name}}
+{{#longDescription}}
+{{{.}}}
+{{/longDescription}}
+
+</section>
+{{/longDescription.length}}
+{{/OSC}}
+{{/OSC.hasLongDescriptions}}
+
+{{/OSC.length}}
+
+<script type="text/javascript">
+  const linkStates = {};
+
+  function hideDetailSections() {
+    for (let section of document.getElementsByClassName('sequence-details')) section.style.display = 'none';
+  }
+  
+  function decorateDetailLinks() {
+    for (let link of document.getElementsByClassName('link-details')) {
+      link.addEventListener("click", toggleDetails, false);
+      if (linkStates[link.href] === undefined) {
+        linkStates[link.href] = {open: false, links: [], trElem: null};
+      }
+      linkStates[link.href].links.push(link);
+    }
+  }
+
+  function openDetails(link) {
+    const closestTr = link.closest('tr');
+    if (!closestTr || !closestTr.parentNode) return;
+    const closestSection = document.getElementById(link.href.split('#')[1]).closest('section');
+    if (!closestSection || !closestSection.innerHTML) return;
+    const content = closestSection.innerHTML.split('</h3>')[1];
+
+    const newRow = closestTr.parentNode.insertRow(closestTr.rowIndex);
+    const cell = newRow.insertCell(0);
+    cell.innerHTML = '<div style="font-style: italic">' + content + '</div>';
+    cell.colSpan = closestTr.children.length;
+    const state = linkStates[link.href];
+    state.trElem = newRow;
+    state.open = true;
+    if (link.innerHTML === 'more') link.innerHTML = 'less';
+  }
+
+  function closeDetails(link) {
+    const state = linkStates[link.href];
+    if (state.trElem && state.trElem.rowIndex !== -1) {
+      if (state.trElem.parentNode) state.trElem.parentNode.deleteRow(state.trElem.rowIndex-1); // why -1 here?
+      state.trElem.remove();
+      state.trElem = null;
+    }
+    state.open = false;
+    if (link.innerHTML === 'less') link.innerHTML = 'more';
+  }
+
+  function toggleDetails(ev) {
+    if (!ev.target || !ev.target.href) return;
+    const isOpen = linkStates[ev.target.href].open;
+    if (isOpen === undefined) return;
+    if (isOpen) closeDetails(ev.target);
+    else openDetails(ev.target);
+    ev.preventDefault();
+    return false;
+  }
+
+  function load() {
+    hideDetailSections();
+    decorateDetailLinks();
+  }
+  load(); // we are inlined behind all needed data, thus dont wait for onload (avoids flickering)
+</script>
+`
+
+// support status marcos
+// applied for:
+// - status field of single @vt line
+// - all lines in long description
+const MACRO = [
+  // #Y - supported
+  [/#Y/g, s => '<span title="supported">✓</span>'],
+  // #N - unsupported
+  [/#N/g, s => '<span title="unsupported">✗</span>'],
+  // #P[reason] - partial support with a reason as title
+  [/#P\[(.*?)\]/g, (s, p1) => `<span title="${p1}" style="text-decoration: underline">Partial</span>`],
+  // #B[reason] - supported but broken in a certain way, reason in title
+  [/#B\[(.*?)\]/g, (s, p1) => `<span title="${p1}" style="text-decoration: underline">Broken</span>`]
+];
+
+function applyMacros(s) {
+  for (let i = 0; i < MACRO.length; ++i) {
+    s = s.replace(MACRO[i][0], MACRO[i][1]);
+  }
+  return s;
+}
+
+function replaceStatus(s) {
+  if (s === 'supported') return '<span title="supported">✓</span>';
+  if (s === 'unsupported') return '<span title="unsupported">✗</span>';
+  return s;
+}
+
+function createAnchorSlug(s) {
+  return s.toLowerCase().split(' ').join('-');
+}
+
+function empty(ar) {
+  return !ar.filter(Boolean, ar).length;
+}
+
+function* parseMultiLineGen(filename, s) {
+  if (!~s.indexOf('@vt:')) {
+    return;
+  }
+  const lines = s.split('\n').map(el => el.trim().replace(/[*]/, '').replace(/\s/, ''));
+  let grabLine = false;
+  let longDescription = [];
+  let feature = undefined;
+  let noLineCount = 0;
+  for (const line of lines) {
+    if (grabLine) {
+      if (!line) noLineCount++;
+      if (noLineCount >= 2) {
+        if (feature) {
+          feature.longDescription = empty(longDescription) ? [] : longDescription;
+          feature.longTarget = createAnchorSlug(feature.name);
+          yield feature;
+        }
+        grabLine = false;
+        longDescription = [];
+        feature = undefined;
+        noLineCount = 0;
+      }
+      else if (line.indexOf('@vt:') === 0) {
+        if (feature) {
+          feature.longDescription = empty(longDescription) ? [] : longDescription;
+          feature.longTarget = createAnchorSlug(feature.name);
+          yield feature;
+        }
+        grabLine = true;
+        longDescription = [];
+        feature = undefined;
+        noLineCount = 0;
+      } else {
+        //longDescription.push(line);
+        longDescription.push(applyMacros(line));
+        if (line) noLineCount = 0;
+      }
+    }
+    if (line.indexOf('@vt:') === 0) {
+      feature = parseSingleLine(filename, line);
+      grabLine = true;
+    }
+  }
+  if (grabLine && feature) {
+    feature.longDescription = empty(longDescription) ? [] : longDescription;
+    feature.longTarget = createAnchorSlug(feature.name);
+    yield feature;
+  }
+}
+
+function parseSingleLine(filename, s) {
+  const line = s.trim();
+  const match = line.match(REX_VT_LINE);
+  if (match !== null) {
+    if (!~TYPES.indexOf(match[2])) {
+      throw new Error(`unkown vt-command type "${match[2]}" specified in "${filename}"`);
+    }
+    return {
+      status: match[1],
+      type: match[2],
+      mnemonic: match[3],
+      name: match[4],
+      sequence: match[5],
+      shortDescription: match[6],
+      longDescription: [],
+      longTarget: '',
+      source: filename
+    };
+  }
+}
+
+function getSorter(entry) {
+  switch (entry) {
+    case 'C0':
+    case 'C1':
+      // NOTE: expects hex value notation at last position in sequence
+      return (a, b) => parseInt(a.sequence.slice(-2), 16) - parseInt(b.sequence.slice(-2), 16);
+    case 'OSC':
+      // NOTE: expects the decimal function identifier in mnemonic
+      return (a, b) => parseInt(a.mnemonic) - parseInt(b.mnemonic);
+    case 'DCS':
+      return (a, b) => a.mnemonic > b.mnemonic;
+    case 'CSI':
+    case 'ESC':
+      // default sort order by final byte
+      return (a, b) => {
+        // ugly hack to fix sorting of workaround in HPA sequence "CSI Ps ` "
+        // for HPA compare with length - 2 instead
+        const HPA = 'CSI Ps ` ';
+        const aa = a.sequence === HPA ? a.sequence.slice(0, -1) : a.sequence;
+        const bb = b.sequence === HPA ? b.sequence.slice(0, -1) : b.sequence;
+        return aa.charCodeAt(aa.length - 1) - bb.charCodeAt(bb.length - 1);
+      };
+    default:
+      return (a, b) => a.sequence > b.sequence;
+  }
+};
+
+function postProcessData(features) {
+  const featureTable = {};
+  for (const feature of features) {
+    // feature.status = replaceStatus(feature.status);
+    feature.status = applyMacros(feature.status);
+    if (featureTable[feature.type] === undefined) {
+      featureTable[feature.type] = [];
+    }
+    featureTable[feature.type].push(feature);
+    if (feature.longDescription.length) {
+      featureTable[feature.type].hasLongDescriptions = true;
+    }
+  }
+  for (const entry in featureTable) {
+    featureTable[entry].sort(getSorter(entry));
+  }
+  // console.error(featureTable);
+  featureTable.version = require('../package.json').version;
+  console.log(Mustache.render(MARKDOWN_TMPL, featureTable));
+}
+
+function main(filenames) {
+  // console.error(filenames);
+  let leftToProcess = filenames.length;
+  const features = [];
+  for (const filename of filenames) {
+    fs.readFile(filename, 'utf-8', (err, data) => {
+      let match;
+      while ((match = REX_COMMENTS.exec(data)) !== null) {
+        if (match.index === REX_COMMENTS.lastIndex) {
+          REX_COMMENTS.lastIndex++;
+        }
+        if (match[1]) {
+          for (let feature of parseMultiLineGen(filename, match[1])) {
+            if (feature) features.push(feature);
+          }
+        } else {
+          const feature = parseSingleLine(filename, match[2]);
+          if (feature) features.push(feature);
+        }
+      }
+      leftToProcess--;
+      if (!leftToProcess) {
+        postProcessData(features);
+      }
+    });
+  }
+}
+
+main(process.argv.slice(2))

bin/publish.js

@@ -29,6 +29,8 @@ const addonPackageDirs = [
   path.resolve(__dirname, '../addons/xterm-addon-attach'),
   path.resolve(__dirname, '../addons/xterm-addon-fit'),
   path.resolve(__dirname, '../addons/xterm-addon-search'),
+  path.resolve(__dirname, '../addons/xterm-addon-serialize'),
+  path.resolve(__dirname, '../addons/xterm-addon-unicode11'),
   path.resolve(__dirname, '../addons/xterm-addon-web-links'),
   path.resolve(__dirname, '../addons/xterm-addon-webgl')
 ];

bin/test.js

@@ -14,7 +14,8 @@ env.NODE_PATH = path.resolve(__dirname, '../out');
 
 let testFiles = [
   './out/*test.js',
-  './out/**/*test.js'
+  './out/**/*test.js',
+  './addons/**/out/*test.js',
 ];
 
 let flagArgs = [];

demo/client.ts

@@ -12,16 +12,20 @@ import { Terminal } from '../out/public/Terminal';
 import { AttachAddon } from '../addons/xterm-addon-attach/out/AttachAddon';
 import { FitAddon } from '../addons/xterm-addon-fit/out/FitAddon';
 import { SearchAddon, ISearchOptions } from '../addons/xterm-addon-search/out/SearchAddon';
+import { SerializeAddon } from '../addons/xterm-addon-serialize/out/SerializeAddon';
 import { WebLinksAddon } from '../addons/xterm-addon-web-links/out/WebLinksAddon';
 import { WebglAddon } from '../addons/xterm-addon-webgl/out/WebglAddon';
+import { Unicode11Addon } from '../addons/xterm-addon-unicode11/out/Unicode11Addon';
 
 // Use webpacked version (yarn package)
 // import { Terminal } from '../lib/xterm';
 // import { AttachAddon } from 'xterm-addon-attach';
 // import { FitAddon } from 'xterm-addon-fit';
 // import { SearchAddon, ISearchOptions } from 'xterm-addon-search';
+// import { SerializeAddon } from 'xterm-addon-serialize';
 // import { WebLinksAddon } from 'xterm-addon-web-links';
 // import { WebglAddon } from 'xterm-addon-webgl';
+// import { Unicode11Addon } from 'xterm-addon-unicode11';
 
 // Pulling in the module's types relies on the <reference> above, it's looks a
 // little weird here as we're importing "this" module
@@ -33,8 +37,10 @@ export interface IWindowWithTerminal extends Window {
   AttachAddon?: typeof AttachAddon;
   FitAddon?: typeof FitAddon;
   SearchAddon?: typeof SearchAddon;
+  SerializeAddon?: typeof SerializeAddon;
   WebLinksAddon?: typeof WebLinksAddon;
   WebglAddon?: typeof WebglAddon;
+  Unicode11Addon?: typeof Unicode11Addon;
 }
 declare let window: IWindowWithTerminal;
 
@@ -44,7 +50,7 @@ let socketURL;
 let socket;
 let pid;
 
-type AddonType = 'attach' | 'fit' | 'search' | 'web-links' | 'webgl';
+type AddonType = 'attach' | 'fit' | 'search' | 'serialize' | 'unicode11' | 'web-links' | 'webgl';
 
 interface IDemoAddon<T extends AddonType> {
   name: T;
@@ -53,14 +59,18 @@ interface IDemoAddon<T extends AddonType> {
     T extends 'attach' ? typeof AttachAddon :
     T extends 'fit' ? typeof FitAddon :
     T extends 'search' ? typeof SearchAddon :
+    T extends 'serialize' ? typeof SerializeAddon :
     T extends 'web-links' ? typeof WebLinksAddon :
+    T extends 'unicode11' ? typeof Unicode11Addon :
     typeof WebglAddon;
   instance?:
     T extends 'attach' ? AttachAddon :
     T extends 'fit' ? FitAddon :
     T extends 'search' ? SearchAddon :
+    T extends 'serialize' ? SerializeAddon :
     T extends 'web-links' ? WebLinksAddon :
     T extends 'webgl' ? WebglAddon :
+    T extends 'unicode11' ? typeof Unicode11Addon :
     never;
 }
 
@@ -68,8 +78,10 @@ const addons: { [T in AddonType]: IDemoAddon<T>} = {
   attach: { name: 'attach', ctor: AttachAddon, canChange: false },
   fit: { name: 'fit', ctor: FitAddon, canChange: false },
   search: { name: 'search', ctor: SearchAddon, canChange: true },
+  serialize: { name: 'serialize', ctor: SerializeAddon, canChange: true },
   'web-links': { name: 'web-links', ctor: WebLinksAddon, canChange: true },
-  webgl: { name: 'webgl', ctor: WebglAddon, canChange: true }
+  webgl: { name: 'webgl', ctor: WebglAddon, canChange: true },
+  unicode11: { name: 'unicode11', ctor: Unicode11Addon, canChange: true }
 };
 
 const terminalContainer = document.getElementById('terminal-container');
@@ -113,11 +125,14 @@ if (document.location.pathname === '/test') {
   window.AttachAddon = AttachAddon;
   window.FitAddon = FitAddon;
   window.SearchAddon = SearchAddon;
+  window.SerializeAddon = SerializeAddon;
+  window.Unicode11Addon = Unicode11Addon;
   window.WebLinksAddon = WebLinksAddon;
   window.WebglAddon = WebglAddon;
 } else {
   createTerminal();
   document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler);
+  document.getElementById('serialize').addEventListener('click', serializeButtonHandler);
 }
 
 function createTerminal(): void {
@@ -133,12 +148,17 @@ function createTerminal(): void {
 
   // Load addons
   const typedTerm = term as TerminalType;
-  addons['web-links'].instance = new WebLinksAddon();
   addons.search.instance = new SearchAddon();
+  addons.serialize.instance = new SerializeAddon();
   addons.fit.instance = new FitAddon();
-  typedTerm.loadAddon(addons['web-links'].instance);
-  typedTerm.loadAddon(addons.search.instance);
+  addons.unicode11.instance = new Unicode11Addon();
+  // TODO: Remove arguments when link provider API is the default
+  addons['web-links'].instance = new WebLinksAddon(undefined, undefined, true);
   typedTerm.loadAddon(addons.fit.instance);
+  typedTerm.loadAddon(addons.search.instance);
+  typedTerm.loadAddon(addons.serialize.instance);
+  typedTerm.loadAddon(addons.unicode11.instance);
+  typedTerm.loadAddon(addons['web-links'].instance);
 
   window.term = term;  // Expose `term` to window for debugging purposes
   term.onResize((size: { cols: number, rows: number }) => {
@@ -239,12 +259,10 @@ function initOptions(term: TerminalType): void {
     // Internal only options
     'cancelEvents',
     'convertEol',
-    'handler',
-    'screenKeys',
     'termName',
-    'useFlowControl',
     // Complex option
-    'theme'
+    'theme',
+    'windowOptions'
   ];
   const stringOptions = {
     bellSound: null,
@@ -343,7 +361,15 @@ function initAddons(term: TerminalType): void {
       if (checkbox.checked) {
         addon.instance = new addon.ctor();
         term.loadAddon(addon.instance);
+        if (name === 'webgl') {
+          setTimeout(() => {
+            document.body.appendChild((addon.instance as WebglAddon).textureAtlas);
+          }, 0);
+        }
       } else {
+        if (name === 'webgl') {
+          document.body.removeChild((addon.instance as WebglAddon).textureAtlas);
+        }
         addon.instance!.dispose();
         addon.instance = undefined;
       }
@@ -377,3 +403,14 @@ function updateTerminalSize(): void {
   terminalContainer.style.height = height;
   addons.fit.instance.fit();
 }
+
+function serializeButtonHandler(): void {
+  const output = addons.serialize.instance.serialize();
+  const outputString = JSON.stringify(output);
+
+  document.getElementById('serialize-output').innerText = outputString;
+  if ((document.getElementById('write-to-terminal') as HTMLInputElement).checked) {
+    term.reset();
+    term.write(output);
+  }
+}

demo/index.html

@@ -2,6 +2,11 @@
 <html>
   <head>
     <title>xterm.js demo</title>
+    <!--
+      WARNING: This demo is a barebones implementation designed for development and evaluation
+      purposes only. It is definitely NOT production ready and does not aim to be so. Exposing the
+      demo to the public as is would introduce security risks for the host.
+    -->
     <link rel="shortcut icon" type="image/png" href="/logo.png">
     <link rel="stylesheet" href="/xterm.css" />
     <link rel="stylesheet" href="/style.css" />
@@ -12,7 +17,16 @@
     <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
     <div id="terminal-container"></div>
     <div>
-      <h3>Actions</h3>
+      <h3>Options</h3>
+      <p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
+      <div id="options-container"></div>
+    </div>
+    <div>
+      <h3>Addons</h3>
+      <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
+      <div id="addons-container"></div>
+      <h3>Addons Control</h3>
+      <h4>SearchAddon</h4>
       <p>
         <label>Find next <input id="find-next"/></label>
         <label>Find previous <input id="find-previous"/></label>
@@ -20,16 +34,12 @@
         <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
         <label>Whole word<input type="checkbox" id="whole-word"/></label>
       </p>
-    </div>
-    <div>
-      <h3>Options</h3>
-      <p>These options can be set in the <code>Terminal</code> constructor or using the <code>Terminal.setOption</code> function.</p>
-      <div id="options-container"></div>
-    </div>
-    <div>
-      <h3>Addons</h3>
-      <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
-      <div id="addons-container"></div>
+      <h4>SerializeAddon</h4>
+      <p>
+        <button id="serialize">Serialize the content of terminal</button>
+        <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
+        <div><pre id="serialize-output"></pre></div>
+      </p>
     </div>
     <div>
       <h3>Style</h3>
@@ -39,7 +49,6 @@
       </div>
     </div>
     <hr/>
-    <p><strong>Attention:</strong> The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.</p>
     <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
     <script src="dist/client-bundle.js" defer ></script>
   </body>

demo/server.js

@@ -1,3 +1,9 @@
+/**
+ * WARNING: This demo is a barebones implementation designed for development and evaluation
+ * purposes only. It is definitely NOT production ready and does not aim to be so. Exposing the
+ * demo to the public as is would introduce security risks for the host.
+ **/
+
 var express = require('express');
 var expressWs = require('express-ws');
 var os = require('os');

demo/style.css

@@ -30,3 +30,14 @@ p {
     padding-left: 20px;
     vertical-align: top;
 }
+
+pre {
+    display: block;
+    padding: 9.5px;
+    font-size: 13px;
+    color: #c7254e;
+    background-color: #f9f2f4;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}

demo/tsconfig.json

@@ -9,6 +9,7 @@
       "xterm-addon-attach": ["../addons/xterm-addon-attach"],
       "xterm-addon-fit": ["../addons/xterm-addon-fit"],
       "xterm-addon-search": ["../addons/xterm-addon-search"],
+      "xterm-addon-serialize": ["../addons/xterm-addon-serialize"],
       "xterm-addon-web-links": ["../addons/xterm-addon-web-links"],
       "xterm-addon-webgl": ["../addons/xterm-addon-webgl"]
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "main": "lib/xterm.js",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",
@@ -11,10 +11,16 @@
     "prepackage": "npm run build",
     "package": "webpack",
     "start": "node demo/start",
-    "lint": "tslint 'src/**/*.ts' 'addons/*/src/**/*.ts'",
+    "lint": "eslint -c .eslintrc.json --ext .ts src/ addons/",
     "test": "npm run test-unit",
     "posttest": "npm run lint",
-    "test-api": "mocha \"**/*.api.js\"",
+    "test-api": "npm run test-api-chromium",
+    "test-api-chromium": "mocha \"**/*.api.js\" --browser chromium --timeout 20000",
+    "test-api-firefox": "mocha \"**/*.api.js\" --browser firefox --timeout 20000",
+    "test-api-webkit": "mocha \"**/*.api.js\" --browser webkit --timeout 20000",
+    "pretest-api-chromium": "node ./bin/download_browser.js --browser chromium",
+    "pretest-api-firefox": "node ./bin/download_browser.js --browser firefox",
+    "pretest-api-webkit": "node ./bin/download_browser.js --browser webkit",
     "test-unit": "node ./bin/test.js",
     "test-unit-coverage": "node ./bin/test.js --coverage",
     "build": "tsc -b ./tsconfig.all.json",
@@ -26,37 +32,40 @@
     "benchmark": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json",
     "benchmark-baseline": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --baseline out-test/benchmark/test/benchmark/*benchmark.js",
     "benchmark-eval": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --eval out-test/benchmark/test/benchmark/*benchmark.js",
-    "clean": "rm -rf lib out addons/*/lib addons/*/out"
+    "clean": "rm -rf lib out addons/*/lib addons/*/out",
+    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
   },
   "devDependencies": {
-    "@types/chai": "^3.4.34",
+    "@types/chai": "^4.2.11",
+    "@types/debug": "^4.1.5",
     "@types/deep-equal": "^1.0.1",
-    "@types/glob": "^5.0.35",
-    "@types/jsdom": "11.0.1",
-    "@types/mocha": "^2.2.33",
-    "@types/node": "6.0.108",
-    "@types/puppeteer": "^1.12.4",
+    "@types/glob": "^7.1.1",
+    "@types/jsdom": "^16.2.0",
+    "@types/mocha": "^7.0.2",
+    "@types/node": "^10.17.17",
     "@types/utf8": "^2.1.6",
-    "@types/webpack": "^4.4.11",
-    "@types/ws": "^6.0.1",
-    "chai": "3.5.0",
-    "deep-equal": "^1.1.0",
+    "@types/webpack": "^4.41.10",
+    "@types/ws": "^7.2.3",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "chai": "^4.2.0",
+    "deep-equal": "^2.0.2",
+    "eslint": "^6.8.0",
     "express": "^4.17.1",
     "express-ws": "^4.0.0",
     "glob": "^7.0.5",
-    "jsdom": "^11.11.0",
-    "mocha": "^6.1.4",
-    "node-pty": "0.7.6",
-    "nyc": "13",
-    "puppeteer": "^1.15.0",
+    "jsdom": "^16.2.2",
+    "mocha": "^7.1.1",
+    "mustache": "^4.0.1",
+    "node-pty": "^0.9.0",
+    "nyc": "^15.0.1",
+    "playwright-core": "^0.11.1",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^6.0.4",
-    "tslint": "^5.18.0",
-    "tslint-consistent-codestyle": "^1.13.0",
-    "typescript": "3.7",
+    "typescript": "3.8",
     "utf8": "^3.0.0",
     "webpack": "^4.35.3",
-    "webpack-cli": "^3.1.0",
+    "webpack-cli": "^3.3.11",
     "ws": "^7.0.0",
     "xterm-benchmark": "^0.1.3"
   }

src/AccessibilityManager.ts

@@ -56,6 +56,7 @@ export class AccessibilityManager extends Disposable {
 
     this._rowContainer = document.createElement('div');
     this._rowContainer.classList.add('xterm-accessibility-tree');
+    this._rowContainer.setAttribute('role', 'list');
     this._rowElements = [];
     for (let i = 0; i < this._terminal.rows; i++) {
       this._rowElements[i] = this._createAccessibilityTreeNode();

src/InputHandler.test.ts

@@ -7,13 +7,13 @@ import { assert, expect } from 'chai';
 import { InputHandler } from './InputHandler';
 import { MockInputHandlingTerminal, TestTerminal } from './TestUtils.test';
 import { Terminal } from './Terminal';
-import { IBufferLine } from 'common/Types';
+import { IBufferLine, IAttributeData } from 'common/Types';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { CellData } from 'common/buffer/CellData';
 import { Attributes } from 'common/buffer/Constants';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { Params } from 'common/parser/Params';
-import { MockCoreService, MockBufferService, MockDirtyRowService, MockOptionsService, MockLogService, MockCoreMouseService } from 'common/TestUtils.test';
+import { MockCoreService, MockBufferService, MockDirtyRowService, MockOptionsService, MockLogService, MockCoreMouseService, MockCharsetService, MockUnicodeService } from 'common/TestUtils.test';
 import { IBufferService } from 'common/services/Services';
 import { DEFAULT_OPTIONS } from 'common/services/OptionsService';
 import { clone } from 'common/Clone';
@@ -33,34 +33,38 @@ function getLines(term: TestTerminal, limit: number = term.rows): string[] {
   return res;
 }
 
+class TestInputHandler extends InputHandler {
+  get curAttrData(): IAttributeData { return (this as any)._curAttrData; }
+}
+
 describe('InputHandler', () => {
   describe('save and restore cursor', () => {
     const terminal = new MockInputHandlingTerminal();
-    terminal.curAttrData.fg = 3;
     const bufferService = new MockBufferService(80, 30);
     bufferService.buffer.x = 1;
     bufferService.buffer.y = 2;
     bufferService.buffer.ybase = 0;
-    const inputHandler = new InputHandler(terminal, bufferService, new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService());
+    const inputHandler = new TestInputHandler(terminal, bufferService, new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService(), new MockUnicodeService(), {} as any);
+    inputHandler.curAttrData.fg = 3;
     // Save cursor position
     inputHandler.saveCursor();
     assert.equal(bufferService.buffer.x, 1);
     assert.equal(bufferService.buffer.y, 2);
-    assert.equal(terminal.curAttrData.fg, 3);
+    assert.equal(inputHandler.curAttrData.fg, 3);
     // Change cursor position
     bufferService.buffer.x = 10;
     bufferService.buffer.y = 20;
-    terminal.curAttrData.fg = 30;
+    inputHandler.curAttrData.fg = 30;
     // Restore cursor position
     inputHandler.restoreCursor();
     assert.equal(bufferService.buffer.x, 1);
     assert.equal(bufferService.buffer.y, 2);
-    assert.equal(terminal.curAttrData.fg, 3);
+    assert.equal(inputHandler.curAttrData.fg, 3);
   });
   describe('setCursorStyle', () => {
     it('should call Terminal.setOption with correct params', () => {
       const optionsService = new MockOptionsService();
-      const inputHandler = new InputHandler(new MockInputHandlingTerminal(), new MockBufferService(80, 30), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), optionsService, new MockCoreMouseService());
+      const inputHandler = new InputHandler(new MockInputHandlingTerminal(), new MockBufferService(80, 30), new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), optionsService, new MockCoreMouseService(), new MockUnicodeService(), {} as any);
 
       inputHandler.setCursorStyle(Params.fromArray([0]));
       assert.equal(optionsService.options['cursorStyle'], 'block');
@@ -101,7 +105,7 @@ describe('InputHandler', () => {
     it('should toggle Terminal.bracketedPasteMode', () => {
       const terminal = new MockInputHandlingTerminal();
       terminal.bracketedPasteMode = false;
-      const inputHandler = new InputHandler(terminal, new MockBufferService(80, 30), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService());
+      const inputHandler = new InputHandler(terminal, new MockBufferService(80, 30), new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService(), new MockUnicodeService(), {} as any);
       // Set bracketed paste mode
       inputHandler.setModePrivate(Params.fromArray([2004]));
       assert.equal(terminal.bracketedPasteMode, true);
@@ -120,7 +124,7 @@ describe('InputHandler', () => {
     it('insertChars', function(): void {
       const term = new Terminal();
       const bufferService = new MockBufferService(80, 30);
-      const inputHandler = new InputHandler(term, bufferService, new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService());
+      const inputHandler = new InputHandler(term, bufferService, new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService(), new MockUnicodeService(), {} as any);
 
       // insert some data in first and second line
       inputHandler.parse(Array(bufferService.cols - 9).join('a'));
@@ -158,7 +162,7 @@ describe('InputHandler', () => {
     it('deleteChars', function(): void {
       const term = new Terminal();
       const bufferService = new MockBufferService(80, 30);
-      const inputHandler = new InputHandler(term, bufferService, new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService());
+      const inputHandler = new InputHandler(term, bufferService, new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService(), new MockUnicodeService(), {} as any);
 
       // insert some data in first and second line
       inputHandler.parse(Array(bufferService.cols - 9).join('a'));
@@ -199,7 +203,7 @@ describe('InputHandler', () => {
     it('eraseInLine', function(): void {
       const term = new Terminal();
       const bufferService = new MockBufferService(80, 30);
-      const inputHandler = new InputHandler(term, bufferService, new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService());
+      const inputHandler = new InputHandler(term, bufferService, new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService(), new MockUnicodeService(), {} as any);
 
       // fill 6 lines to test 3 different states
       inputHandler.parse(Array(bufferService.cols + 1).join('a'));
@@ -228,7 +232,7 @@ describe('InputHandler', () => {
     it('eraseInDisplay', function(): void {
       const term = new Terminal({cols: 80, rows: 7});
       const bufferService = new MockBufferService(80, 7);
-      const inputHandler = new InputHandler(term, bufferService, new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService());
+      const inputHandler = new InputHandler(term, bufferService, new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService(), new MockUnicodeService(), {} as any);
 
       // fill display with a's
       for (let i = 0; i < bufferService.rows; ++i) inputHandler.parse(Array(bufferService.cols + 1).join('a'));
@@ -363,7 +367,7 @@ describe('InputHandler', () => {
   describe('print', () => {
     it('should not cause an infinite loop (regression test)', () => {
       const term = new Terminal();
-      const inputHandler = new InputHandler(term, new MockBufferService(80, 30), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService());
+      const inputHandler = new InputHandler(term, new MockBufferService(80, 30), new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService(), new MockUnicodeService(), {} as any);
       const container = new Uint32Array(10);
       container[0] = 0x200B;
       inputHandler.print(container, 0, 1);
@@ -378,7 +382,7 @@ describe('InputHandler', () => {
     beforeEach(() => {
       term = new Terminal();
       bufferService = new MockBufferService(80, 30);
-      handler = new InputHandler(term, bufferService, new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService());
+      handler = new InputHandler(term, bufferService, new MockCharsetService(), new MockCoreService(), new MockDirtyRowService(), new MockLogService(), new MockOptionsService(), new MockCoreMouseService(), new MockUnicodeService(), {} as any);
     });
     it('should handle DECSET/DECRST 47 (alt screen buffer)', () => {
       handler.parse('\x1b[?47h\r\n\x1b[31mJUNK\x1b[?47lTEST');
@@ -1266,4 +1270,228 @@ describe('InputHandler', () => {
       [131072, 131072], [131072, 131072], [131072, 300000 - 131072 - 131072]
     ]);
   });
+  describe('windowOptions', () => {
+    it('all should be disabled by default and not report', () => {
+      const term = new TestTerminal({cols: 10, rows: 10});
+      const stack: string[] = [];
+      term.onData(data => stack.push(data));
+      term.writeSync('\x1b[14t');
+      term.writeSync('\x1b[16t');
+      term.writeSync('\x1b[18t');
+      term.writeSync('\x1b[20t');
+      term.writeSync('\x1b[21t');
+      assert.deepEqual(stack, []);
+    });
+    it('14 - GetWinSizePixels', () => {
+      const term = new TestTerminal({cols: 10, rows: 10, windowOptions: {getWinSizePixels: true}});
+      const stack: string[] = [];
+      term.onData(data => stack.push(data));
+      term.writeSync('\x1b[14t');
+      // does not report in test terminal due to missing renderer
+      assert.deepEqual(stack, []);
+    });
+    it('16 - GetCellSizePixels', () => {
+      const term = new TestTerminal({cols: 10, rows: 10, windowOptions: {getCellSizePixels: true}});
+      const stack: string[] = [];
+      term.onData(data => stack.push(data));
+      term.writeSync('\x1b[16t');
+      // does not report in test terminal due to missing renderer
+      assert.deepEqual(stack, []);
+    });
+    it('18 - GetWinSizeChars', () => {
+      const term = new TestTerminal({cols: 10, rows: 10, windowOptions: {getWinSizeChars: true}});
+      const stack: string[] = [];
+      term.onData(data => stack.push(data));
+      term.writeSync('\x1b[18t');
+      assert.deepEqual(stack, ['\x1b[8;10;10t']);
+      term.resize(50, 20);
+      term.writeSync('\x1b[18t');
+      assert.deepEqual(stack, ['\x1b[8;10;10t', '\x1b[8;20;50t']);
+    });
+    it('22/23 - PushTitle/PopTitle', () => {
+      const term = new TestTerminal({cols: 10, rows: 10, windowOptions: {pushTitle: true, popTitle: true}});
+      const stack: string[] = [];
+      term.onTitleChange(data => stack.push(data));
+      term.writeSync('\x1b]0;1\x07');
+      term.writeSync('\x1b[22t');
+      term.writeSync('\x1b]0;2\x07');
+      term.writeSync('\x1b[22t');
+      term.writeSync('\x1b]0;3\x07');
+      term.writeSync('\x1b[22t');
+      assert.deepEqual((term as any)._inputHandler._windowTitleStack, ['1', '2', '3']);
+      assert.deepEqual((term as any)._inputHandler._iconNameStack, ['1', '2', '3']);
+      assert.deepEqual(stack, ['1', '2', '3']);
+      term.writeSync('\x1b[23t');
+      term.writeSync('\x1b[23t');
+      term.writeSync('\x1b[23t');
+      term.writeSync('\x1b[23t'); // one more to test "overflow"
+      assert.deepEqual((term as any)._inputHandler._windowTitleStack, []);
+      assert.deepEqual((term as any)._inputHandler._iconNameStack, []);
+      assert.deepEqual(stack, ['1', '2', '3', '3', '2', '1']);
+    });
+    it('22/23 - PushTitle/PopTitle with ;1', () => {
+      const term = new TestTerminal({cols: 10, rows: 10, windowOptions: {pushTitle: true, popTitle: true}});
+      const stack: string[] = [];
+      term.onTitleChange(data => stack.push(data));
+      term.writeSync('\x1b]0;1\x07');
+      term.writeSync('\x1b[22;1t');
+      term.writeSync('\x1b]0;2\x07');
+      term.writeSync('\x1b[22;1t');
+      term.writeSync('\x1b]0;3\x07');
+      term.writeSync('\x1b[22;1t');
+      assert.deepEqual((term as any)._inputHandler._windowTitleStack, []);
+      assert.deepEqual((term as any)._inputHandler._iconNameStack, ['1', '2', '3']);
+      assert.deepEqual(stack, ['1', '2', '3']);
+      term.writeSync('\x1b[23;1t');
+      term.writeSync('\x1b[23;1t');
+      term.writeSync('\x1b[23;1t');
+      term.writeSync('\x1b[23;1t'); // one more to test "overflow"
+      assert.deepEqual((term as any)._inputHandler._windowTitleStack, []);
+      assert.deepEqual((term as any)._inputHandler._iconNameStack, []);
+      assert.deepEqual(stack, ['1', '2', '3']);
+    });
+    it('22/23 - PushTitle/PopTitle with ;2', () => {
+      const term = new TestTerminal({cols: 10, rows: 10, windowOptions: {pushTitle: true, popTitle: true}});
+      const stack: string[] = [];
+      term.onTitleChange(data => stack.push(data));
+      term.writeSync('\x1b]0;1\x07');
+      term.writeSync('\x1b[22;2t');
+      term.writeSync('\x1b]0;2\x07');
+      term.writeSync('\x1b[22;2t');
+      term.writeSync('\x1b]0;3\x07');
+      term.writeSync('\x1b[22;2t');
+      assert.deepEqual((term as any)._inputHandler._windowTitleStack, ['1', '2', '3']);
+      assert.deepEqual((term as any)._inputHandler._iconNameStack, []);
+      assert.deepEqual(stack, ['1', '2', '3']);
+      term.writeSync('\x1b[23;2t');
+      term.writeSync('\x1b[23;2t');
+      term.writeSync('\x1b[23;2t');
+      term.writeSync('\x1b[23;2t'); // one more to test "overflow"
+      assert.deepEqual((term as any)._inputHandler._windowTitleStack, []);
+      assert.deepEqual((term as any)._inputHandler._iconNameStack, []);
+      assert.deepEqual(stack, ['1', '2', '3', '3', '2', '1']);
+    });
+    it('DECCOLM - should only work with "SetWinLines" (24) enabled', () => {
+      // disabled
+      const term = new TestTerminal({cols: 10, rows: 10});
+      term.writeSync('\x1b[?3l');
+      assert.equal((term as any)._bufferService.cols, 10);
+      term.writeSync('\x1b[?3h');
+      assert.equal((term as any)._bufferService.cols, 10);
+      // enabled
+      const term2 = new TestTerminal({cols: 10, rows: 10, windowOptions: {setWinLines: true}});
+      term2.writeSync('\x1b[?3l');
+      assert.equal((term2 as any)._bufferService.cols, 80);
+      term2.writeSync('\x1b[?3h');
+      assert.equal((term2 as any)._bufferService.cols, 132);
+    });
+  });
+  describe('should correctly reset cells taken by wide chars', () => {
+    let term: TestTerminal;
+    beforeEach(() => {
+      term = new TestTerminal({cols: 10, rows: 5, scrollback: 1});
+      term.writeSync('￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥');
+    });
+    it('print', () => {
+      term.writeSync('\x1b[H#');
+      assert.deepEqual(getLines(term), ['# ￥￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[1;6H######');
+      assert.deepEqual(getLines(term), ['# ￥ #####', '# ￥￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('#');
+      assert.deepEqual(getLines(term), ['# ￥ #####', '##￥￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('#');
+      assert.deepEqual(getLines(term), ['# ￥ #####', '### ￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[3;9H#');
+      assert.deepEqual(getLines(term), ['# ￥ #####', '### ￥￥￥', '￥￥￥￥#', '￥￥￥￥￥', '']);
+      term.writeSync('#');
+      assert.deepEqual(getLines(term), ['# ￥ #####', '### ￥￥￥', '￥￥￥￥##', '￥￥￥￥￥', '']);
+      term.writeSync('#');
+      assert.deepEqual(getLines(term), ['# ￥ #####', '### ￥￥￥', '￥￥￥￥##', '# ￥￥￥￥', '']);
+      term.writeSync('\x1b[4;10H#');
+      assert.deepEqual(getLines(term), ['# ￥ #####', '### ￥￥￥', '￥￥￥￥##', '# ￥￥￥ #', '']);
+    });
+    it('EL', () => {
+      term.writeSync('\x1b[1;6H\x1b[K#');
+      assert.deepEqual(getLines(term), ['￥￥ #', '￥￥￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[2;5H\x1b[1K');
+      assert.deepEqual(getLines(term), ['￥￥ #', '      ￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[3;6H\x1b[1K');
+      assert.deepEqual(getLines(term), ['￥￥ #', '      ￥￥', '      ￥￥', '￥￥￥￥￥', '']);
+    });
+    it('ICH', () => {
+      term.writeSync('\x1b[1;6H\x1b[@');
+      assert.deepEqual(getLines(term), ['￥￥   ￥', '￥￥￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[2;4H\x1b[2@');
+      assert.deepEqual(getLines(term), ['￥￥   ￥', '￥    ￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[3;4H\x1b[3@');
+      assert.deepEqual(getLines(term), ['￥￥   ￥', '￥    ￥￥', '￥     ￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[4;4H\x1b[4@');
+      assert.deepEqual(getLines(term), ['￥￥   ￥', '￥    ￥￥', '￥     ￥', '￥      ￥', '']);
+    });
+    it('DCH', () => {
+      term.writeSync('\x1b[1;6H\x1b[P');
+      assert.deepEqual(getLines(term), ['￥￥ ￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[2;6H\x1b[2P');
+      assert.deepEqual(getLines(term), ['￥￥ ￥￥', '￥￥  ￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[3;6H\x1b[3P');
+      assert.deepEqual(getLines(term), ['￥￥ ￥￥', '￥￥  ￥', '￥￥ ￥', '￥￥￥￥￥', '']);
+    });
+    it('ECH', () => {
+      term.writeSync('\x1b[1;6H\x1b[X');
+      assert.deepEqual(getLines(term), ['￥￥  ￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[2;6H\x1b[2X');
+      assert.deepEqual(getLines(term), ['￥￥  ￥￥', '￥￥    ￥', '￥￥￥￥￥', '￥￥￥￥￥', '']);
+      term.writeSync('\x1b[3;6H\x1b[3X');
+      assert.deepEqual(getLines(term), ['￥￥  ￥￥', '￥￥    ￥', '￥￥    ￥', '￥￥￥￥￥', '']);
+    });
+  });
+  describe('DECSTR', () => {
+    let term: TestTerminal;
+    beforeEach(() => {
+      term = new TestTerminal({cols: 10, rows: 5, scrollback: 1});
+      term.writeSync('01234567890123');
+    });
+    it('should reset IRM', () => {
+      term.writeSync('\x1b[4h');
+      assert.equal(term.insertMode, true);
+      term.writeSync('\x1b[!p');
+      assert.equal(term.insertMode, false);
+    });
+    it('should reset cursor visibility', () => {
+      term.writeSync('\x1b[?25l');
+      assert.equal((term as any)._coreService.isCursorHidden, true);
+      term.writeSync('\x1b[!p');
+      assert.equal((term as any)._coreService.isCursorHidden, false);
+    });
+    it('should reset scroll margins', () => {
+      term.writeSync('\x1b[2;4r');
+      assert.equal((term as any)._bufferService.buffer.scrollTop, 1);
+      assert.equal((term as any)._bufferService.buffer.scrollBottom, 3);
+      term.writeSync('\x1b[!p');
+      assert.equal((term as any)._bufferService.buffer.scrollTop, 0);
+      assert.equal((term as any)._bufferService.buffer.scrollBottom, term.rows - 1);
+    });
+    it('should reset text attributes', () => {
+      term.writeSync('\x1b[1;2;32;43m');
+      assert.equal(!!term.curAttrData.isBold(), true);
+      term.writeSync('\x1b[!p');
+      assert.equal(!!term.curAttrData.isBold(), false);
+      assert.equal(term.curAttrData.fg, 0);
+      assert.equal(term.curAttrData.bg, 0);
+    });
+    it('should reset DECSC data', () => {
+      term.writeSync('\x1b7');
+      assert.equal((term as any)._bufferService.buffer.savedX, 4);
+      assert.equal((term as any)._bufferService.buffer.savedY, 1);
+      term.writeSync('\x1b[!p');
+      assert.equal((term as any)._bufferService.buffer.savedX, 0);
+      assert.equal((term as any)._bufferService.buffer.savedY, 0);
+    });
+    it('should reset DECOM', () => {
+      term.writeSync('\x1b[?6h');
+      assert.equal((term as any)._coreService.decPrivateModes.origin, true);
+      term.writeSync('\x1b[!p');
+      assert.equal((term as any)._coreService.decPrivateModes.origin, false);
+    });
+  });
 });

src/Terminal.test.ts

@@ -7,15 +7,17 @@ import { assert, expect } from 'chai';
 import { MockViewport, MockCompositionHelper, MockRenderer, TestTerminal } from './TestUtils.test';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { CellData } from 'common/buffer/CellData';
-import { wcwidth } from 'common/CharWidth';
-import { IBufferService } from 'common/services/Services';
+import { IBufferService, IUnicodeService } from 'common/services/Services';
 import { Linkifier } from 'browser/Linkifier';
-import { MockLogService } from 'common/TestUtils.test';
+import { MockLogService, MockOptionsService, MockUnicodeService } from 'common/TestUtils.test';
 import { IRegisteredLinkMatcher, IMouseZoneManager, IMouseZone } from 'browser/Types';
 
 const INIT_COLS = 80;
 const INIT_ROWS = 24;
 
+// grab wcwidth from mock unicode service (hardcoded to V6)
+const wcwidth = (new MockUnicodeService()).wcwidth;
+
 describe('Terminal', () => {
   let term: TestTerminal;
   const termOptions = {
@@ -112,7 +114,7 @@ describe('Terminal', () => {
         assert.equal(typeof e, 'number');
         done();
       });
-      term.scroll();
+      term.scroll(DEFAULT_ATTR_DATA.clone());
     });
     it('should fire the onTitleChange event', (done) => {
       term.onTitleChange(e => {
@@ -397,7 +399,7 @@ describe('Terminal', () => {
           term.buffer.lines.get(0).setCell(0, CellData.fromCharData([0, 'a', 0, 'a'.charCodeAt(0)]));
           term.buffer.lines.get(INIT_ROWS - 1).setCell(0, CellData.fromCharData([0, 'b', 0, 'b'.charCodeAt(0)]));
           term.buffer.y = INIT_ROWS - 1; // Move cursor to last line
-          term.scroll();
+          term.scroll(DEFAULT_ATTR_DATA.clone());
           assert.equal(term.buffer.lines.length, INIT_ROWS + 1);
           assert.equal(term.buffer.lines.get(0).loadCell(0, new CellData()).getChars(), 'a');
           assert.equal(term.buffer.lines.get(INIT_ROWS - 1).loadCell(0, new CellData()).getChars(), 'b');
@@ -410,7 +412,7 @@ describe('Terminal', () => {
           term.buffer.lines.get(2).setCell(0, CellData.fromCharData([0, 'c', 0, 'c'.charCodeAt(0)]));
           term.buffer.y = INIT_ROWS - 1; // Move cursor to last line
           term.buffer.scrollTop = 1;
-          term.scroll();
+          term.scroll(DEFAULT_ATTR_DATA.clone());
           assert.equal(term.buffer.lines.length, INIT_ROWS);
           assert.equal(term.buffer.lines.get(0).loadCell(0, new CellData()).getChars(), 'a');
           assert.equal(term.buffer.lines.get(1).loadCell(0, new CellData()).getChars(), 'c');
@@ -424,7 +426,7 @@ describe('Terminal', () => {
           term.buffer.lines.get(4).setCell(0, CellData.fromCharData([0, 'e', 0, 'e'.charCodeAt(0)]));
           term.buffer.y = 3;
           term.buffer.scrollBottom = 3;
-          term.scroll();
+          term.scroll(DEFAULT_ATTR_DATA.clone());
           assert.equal(term.buffer.lines.length, INIT_ROWS + 1);
           assert.equal(term.buffer.lines.get(0).loadCell(0, new CellData()).getChars(), 'a', '\'a\' should be pushed to the scrollback');
           assert.equal(term.buffer.lines.get(1).loadCell(0, new CellData()).getChars(), 'b');
@@ -443,7 +445,7 @@ describe('Terminal', () => {
           term.buffer.y = INIT_ROWS - 1; // Move cursor to last line
           term.buffer.scrollTop = 1;
           term.buffer.scrollBottom = 3;
-          term.scroll();
+          term.scroll(DEFAULT_ATTR_DATA.clone());
           assert.equal(term.buffer.lines.length, INIT_ROWS);
           assert.equal(term.buffer.lines.get(0).loadCell(0, new CellData()).getChars(), 'a');
           assert.equal(term.buffer.lines.get(1).loadCell(0, new CellData()).getChars(), 'c', '\'b\' should be removed from the buffer');
@@ -465,7 +467,7 @@ describe('Terminal', () => {
           term.buffer.lines.get(INIT_ROWS - 1).setCell(0, CellData.fromCharData([0, 'c', 0, 'c'.charCodeAt(0)]));
           term.buffer.y = INIT_ROWS - 1; // Move cursor to last line
           assert.equal(term.buffer.lines.length, INIT_ROWS);
-          term.scroll();
+          term.scroll(DEFAULT_ATTR_DATA.clone());
           assert.equal(term.buffer.lines.length, INIT_ROWS);
           // 'a' gets pushed out of buffer
           assert.equal(term.buffer.lines.get(0).loadCell(0, new CellData()).getChars(), 'b');
@@ -480,7 +482,7 @@ describe('Terminal', () => {
           term.buffer.lines.get(2).setCell(0, CellData.fromCharData([0, 'c', 0, 'c'.charCodeAt(0)]));
           term.buffer.y = INIT_ROWS - 1; // Move cursor to last line
           term.buffer.scrollTop = 1;
-          term.scroll();
+          term.scroll(DEFAULT_ATTR_DATA.clone());
           assert.equal(term.buffer.lines.length, INIT_ROWS);
           assert.equal(term.buffer.lines.get(0).loadCell(0, new CellData()).getChars(), 'a');
           assert.equal(term.buffer.lines.get(1).loadCell(0, new CellData()).getChars(), 'c');
@@ -494,7 +496,7 @@ describe('Terminal', () => {
           term.buffer.lines.get(4).setCell(0, CellData.fromCharData([0, 'e', 0, 'e'.charCodeAt(0)]));
           term.buffer.y = 3;
           term.buffer.scrollBottom = 3;
-          term.scroll();
+          term.scroll(DEFAULT_ATTR_DATA.clone());
           assert.equal(term.buffer.lines.length, INIT_ROWS);
           assert.equal(term.buffer.lines.get(0).loadCell(0, new CellData()).getChars(), 'b');
           assert.equal(term.buffer.lines.get(1).loadCell(0, new CellData()).getChars(), 'c');
@@ -512,7 +514,7 @@ describe('Terminal', () => {
           term.buffer.y = INIT_ROWS - 1; // Move cursor to last line
           term.buffer.scrollTop = 1;
           term.buffer.scrollBottom = 3;
-          term.scroll();
+          term.scroll(DEFAULT_ATTR_DATA.clone());
           assert.equal(term.buffer.lines.length, INIT_ROWS);
           assert.equal(term.buffer.lines.get(0).loadCell(0, new CellData()).getChars(), 'a');
           assert.equal(term.buffer.lines.get(1).loadCell(0, new CellData()).getChars(), 'c', '\'b\' should be removed from the buffer');
@@ -747,7 +749,7 @@ describe('Terminal', () => {
       const cell = new CellData();
       for (let i = 0xDC00; i <= 0xDCFF; ++i) {
         term.buffer.x = term.cols - 1;
-        term.wraparoundMode = true;
+
         term.writeSync('a' + high + String.fromCharCode(i));
         expect(term.buffer.lines.get(0).loadCell(term.cols - 1, cell).getChars()).eql('a');
         expect(term.buffer.lines.get(1).loadCell(0, cell).getChars()).eql(high + String.fromCharCode(i));
@@ -761,7 +763,7 @@ describe('Terminal', () => {
       const cell = new CellData();
       for (let i = 0xDC00; i <= 0xDCFF; ++i) {
         term.buffer.x = term.cols - 1;
-        term.wraparoundMode = false;
+        term.writeSync('\x1b[?7l'); // Disable wraparound mode
         const width = wcwidth((0xD800 - 0xD800) * 0x400 + i - 0xDC00 + 0x10000);
         if (width !== 1) {
           continue;
@@ -812,7 +814,6 @@ describe('Terminal', () => {
       expect(cell.getWidth()).eql(1);
     });
     it('multiple combined é', () => {
-      term.wraparoundMode = true;
       term.writeSync(Array(100).join('e\u0301'));
       for (let i = 0; i < term.cols; ++i) {
         term.buffer.lines.get(0).loadCell(i, cell);
@@ -826,7 +827,6 @@ describe('Terminal', () => {
       expect(cell.getWidth()).eql(1);
     });
     it('multiple surrogate with combined', () => {
-      term.wraparoundMode = true;
       term.writeSync(Array(100).join('\uD800\uDC00\u0301'));
       for (let i = 0; i < term.cols; ++i) {
         term.buffer.lines.get(0).loadCell(i, cell);
@@ -855,7 +855,6 @@ describe('Terminal', () => {
       expect(term.buffer.x).eql(3);
     });
     it('line of ￥ even', () => {
-      term.wraparoundMode = true;
       term.writeSync(Array(50).join('￥'));
       for (let i = 0; i < term.cols; ++i) {
         term.buffer.lines.get(0).loadCell(i, cell);
@@ -875,7 +874,6 @@ describe('Terminal', () => {
       expect(cell.getWidth()).eql(2);
     });
     it('line of ￥ odd', () => {
-      term.wraparoundMode = true;
       term.buffer.x = 1;
       term.writeSync(Array(50).join('￥'));
       for (let i = 1; i < term.cols - 1; ++i) {
@@ -900,7 +898,6 @@ describe('Terminal', () => {
       expect(cell.getWidth()).eql(2);
     });
     it('line of ￥ with combining odd', () => {
-      term.wraparoundMode = true;
       term.buffer.x = 1;
       term.writeSync(Array(50).join('￥\u0301'));
       for (let i = 1; i < term.cols - 1; ++i) {
@@ -925,7 +922,6 @@ describe('Terminal', () => {
       expect(cell.getWidth()).eql(2);
     });
     it('line of ￥ with combining even', () => {
-      term.wraparoundMode = true;
       term.writeSync(Array(50).join('￥\u0301'));
       for (let i = 0; i < term.cols; ++i) {
         term.buffer.lines.get(0).loadCell(i, cell);
@@ -945,7 +941,6 @@ describe('Terminal', () => {
       expect(cell.getWidth()).eql(2);
     });
     it('line of surrogate fullwidth with combining odd', () => {
-      term.wraparoundMode = true;
       term.buffer.x = 1;
       term.writeSync(Array(50).join('\ud843\ude6d\u0301'));
       for (let i = 1; i < term.cols - 1; ++i) {
@@ -970,7 +965,6 @@ describe('Terminal', () => {
       expect(cell.getWidth()).eql(2);
     });
     it('line of surrogate fullwidth with combining even', () => {
-      term.wraparoundMode = true;
       term.writeSync(Array(50).join('\ud843\ude6d\u0301'));
       for (let i = 0; i < term.cols; ++i) {
         term.buffer.lines.get(0).loadCell(i, cell);
@@ -1045,7 +1039,7 @@ describe('Terminal', () => {
     // to get the special handling of fullwidth, surrogate and combining chars in the input handler
     beforeEach(() => {
       terminal = new TestTerminal({ cols: 10, rows: 5 });
-      linkifier = new TestLinkifier((terminal as any)._bufferService);
+      linkifier = new TestLinkifier((terminal as any)._bufferService, terminal.unicodeService);
       mouseZoneManager = new TestMouseZoneManager();
       linkifier.attachToDom({} as any, mouseZoneManager);
     });
@@ -1367,11 +1361,53 @@ describe('Terminal', () => {
       }).to.not.throw();
     });
   });
+
+  describe('Windows Mode', () => {
+    it('should mark lines as wrapped when the line ends in a non-null character after a LF', () => {
+      const data = [
+        'aaaaaaaaaa\n\r', // cannot wrap as it's the first
+        'aaaaaaaaa\n\r',  // wrapped (windows mode only)
+        'aaaaaaaaa'       // not wrapped
+      ];
+
+      const normalTerminal = new TestTerminal({rows: 5, cols: 10, windowsMode: false});
+      normalTerminal.writeSync(data.join(''));
+      assert.equal(normalTerminal.buffer.lines.get(0).isWrapped, false);
+      assert.equal(normalTerminal.buffer.lines.get(1).isWrapped, false);
+      assert.equal(normalTerminal.buffer.lines.get(2).isWrapped, false);
+
+      const windowsModeTerminal = new TestTerminal({rows: 5, cols: 10, windowsMode: true});
+      windowsModeTerminal.writeSync(data.join(''));
+      assert.equal(windowsModeTerminal.buffer.lines.get(0).isWrapped, false);
+      assert.equal(windowsModeTerminal.buffer.lines.get(1).isWrapped, true, 'This line should wrap in Windows mode as the previous line ends in a non-null character');
+      assert.equal(windowsModeTerminal.buffer.lines.get(2).isWrapped, false);
+    });
+
+    it('should mark lines as wrapped when the line ends in a non-null character after a CUP', () => {
+      const data = [
+        'aaaaaaaaaa\x1b[2;1H', // cannot wrap as it's the first
+        'aaaaaaaaa\x1b[3;1H',  // wrapped (windows mode only)
+        'aaaaaaaaa'             // not wrapped
+      ];
+
+      const normalTerminal = new TestTerminal({rows: 5, cols: 10, windowsMode: false});
+      normalTerminal.writeSync(data.join(''));
+      assert.equal(normalTerminal.buffer.lines.get(0).isWrapped, false);
+      assert.equal(normalTerminal.buffer.lines.get(1).isWrapped, false);
+      assert.equal(normalTerminal.buffer.lines.get(2).isWrapped, false);
+
+      const windowsModeTerminal = new TestTerminal({rows: 5, cols: 10, windowsMode: true});
+      windowsModeTerminal.writeSync(data.join(''));
+      assert.equal(windowsModeTerminal.buffer.lines.get(0).isWrapped, false);
+      assert.equal(windowsModeTerminal.buffer.lines.get(1).isWrapped, true, 'This line should wrap in Windows mode as the previous line ends in a non-null character');
+      assert.equal(windowsModeTerminal.buffer.lines.get(2).isWrapped, false);
+    });
+  });
 });
 
 class TestLinkifier extends Linkifier {
-  constructor(bufferService: IBufferService) {
-    super(bufferService, new MockLogService());
+  constructor(bufferService: IBufferService, unicodeService: IUnicodeService) {
+    super(bufferService, new MockLogService(), new MockOptionsService(), unicodeService);
     Linkifier._timeBeforeLatency = 0;
   }
 

src/Terminal.ts

@@ -37,33 +37,35 @@ import * as Strings from 'browser/LocalizableStrings';
 import { SoundService } from 'browser/services/SoundService';
 import { MouseZoneManager } from 'browser/MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
-import { ITheme, IMarker, IDisposable, ISelectionPosition } from 'xterm';
+import { ITheme, IMarker, IDisposable, ISelectionPosition, ILinkProvider } from 'xterm';
 import { DomRenderer } from 'browser/renderer/dom/DomRenderer';
-import { IKeyboardEvent, KeyboardResultType, ICharset, IBufferLine, IAttributeData, CoreMouseEventType, CoreMouseButton, CoreMouseAction } from 'common/Types';
+import { IKeyboardEvent, KeyboardResultType, IBufferLine, IAttributeData, CoreMouseEventType, CoreMouseButton, CoreMouseAction } from 'common/Types';
 import { evaluateKeyboardEvent } from 'common/input/Keyboard';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
-import { handleWindowsModeLineFeed } from 'common/WindowsMode';
+import { updateWindowsModeWrappedState } from 'common/WindowsMode';
 import { ColorManager } from 'browser/ColorManager';
 import { RenderService } from 'browser/services/RenderService';
-import { IOptionsService, IBufferService, ICoreMouseService, ICoreService, ILogService, IDirtyRowService, IInstantiationService } from 'common/services/Services';
+import { IOptionsService, IBufferService, ICoreMouseService, ICoreService, ILogService, IDirtyRowService, IInstantiationService, ICharsetService, IUnicodeService } from 'common/services/Services';
 import { OptionsService } from 'common/services/OptionsService';
 import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService } from 'browser/services/Services';
 import { CharSizeService } from 'browser/services/CharSizeService';
 import { BufferService, MINIMUM_COLS, MINIMUM_ROWS } from 'common/services/BufferService';
 import { Disposable } from 'common/Lifecycle';
 import { IBufferSet, IBuffer } from 'common/buffer/Types';
-import { Attributes } from 'common/buffer/Constants';
 import { MouseService } from 'browser/services/MouseService';
 import { IParams, IFunctionIdentifier } from 'common/parser/Types';
 import { CoreService } from 'common/services/CoreService';
 import { LogService } from 'common/services/LogService';
-import { ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport } from 'browser/Types';
+import { ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport, ILinkifier2 } from 'browser/Types';
 import { DirtyRowService } from 'common/services/DirtyRowService';
 import { InstantiationService } from 'common/services/InstantiationService';
 import { CoreMouseService } from 'common/services/CoreMouseService';
 import { WriteBuffer } from 'common/input/WriteBuffer';
+import { Linkifier2 } from 'browser/Linkifier2';
 import { CoreBrowserService } from 'browser/services/CoreBrowserService';
+import { UnicodeService } from 'common/services/UnicodeService';
+import { CharsetService } from 'common/services/CharsetService';
 
 // Let it work inside Node.js for automated testing purposes.
 const document = (typeof window !== 'undefined') ? window.document : null;
@@ -74,10 +76,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
   public element: HTMLElement;
   public screenElement: HTMLElement;
 
-  /**
-   * The HTMLElement that the terminal is created in, set by Terminal.open.
-   */
-  private _parent: HTMLElement | null;
   private _document: Document;
   private _viewportScrollArea: HTMLElement;
   private _viewportElement: HTMLElement;
@@ -96,11 +94,13 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
   // common services
   private _bufferService: IBufferService;
   private _coreService: ICoreService;
+  private _charsetService: ICharsetService;
   private _coreMouseService: ICoreMouseService;
   private _dirtyRowService: IDirtyRowService;
   private _instantiationService: IInstantiationService;
   private _logService: ILogService;
   public optionsService: IOptionsService;
+  public unicodeService: IUnicodeService;
 
   // browser services
   private _charSizeService: ICharSizeService;
@@ -110,32 +110,13 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
   private _soundService: ISoundService;
 
   // modes
-  public applicationKeypad: boolean;
-  public originMode: boolean;
   public insertMode: boolean;
-  public wraparoundMode: boolean; // defaults: xterm - true, vt100 - false
   public bracketedPasteMode: boolean;
 
-  // charset
-  // The current charset
-  public charset: ICharset;
-  public gcharset: number;
-  public glevel: number;
-  public charsets: ICharset[];
-
   // mouse properties
   public mouseEvents: CoreMouseEventType = CoreMouseEventType.NONE;
   public sendFocus: boolean;
 
-  // misc
-  public savedCols: number;
-
-  public curAttrData: IAttributeData;
-  private _eraseAttrData: IAttributeData;
-
-  public params: (string | number)[];
-  public currentParam: string | number;
-
   // write buffer
   private _writeBuffer: WriteBuffer;
 
@@ -151,6 +132,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _inputHandler: InputHandler;
   public linkifier: ILinkifier;
+  public linkifier2: ILinkifier2;
   public viewport: IViewport;
   private _compositionHelper: ICompositionHelper;
   private _mouseZoneManager: IMouseZoneManager;
@@ -228,6 +210,10 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this._instantiationService.setService(ICoreMouseService, this._coreMouseService);
     this._dirtyRowService = this._instantiationService.createInstance(DirtyRowService);
     this._instantiationService.setService(IDirtyRowService, this._dirtyRowService);
+    this.unicodeService = this._instantiationService.createInstance(UnicodeService);
+    this._instantiationService.setService(IUnicodeService, this.unicodeService);
+    this._charsetService = this._instantiationService.createInstance(CharsetService);
+    this._instantiationService.setService(ICharsetService, this._charsetService);
 
     this._setupOptionsListeners();
     this._setup();
@@ -244,44 +230,38 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this._windowsMode = undefined;
     this._renderService?.dispose();
     this._customKeyEventHandler = null;
-    this.write = () => {};
+    this.write = () => { };
     this.element?.parentNode?.removeChild(this.element);
   }
 
   private _setup(): void {
-    this._parent = document ? document.body : null;
-
     this._customKeyEventHandler = null;
 
     // modes
-    this.applicationKeypad = false;
-    this.originMode = false;
     this.insertMode = false;
-    this.wraparoundMode = true; // defaults: xterm - true, vt100 - false
     this.bracketedPasteMode = false;
 
-    // charset
-    this.charset = null;
-    this.gcharset = null;
-    this.glevel = 0;
-    // TODO: Can this be just []?
-    this.charsets = [null];
-
-    this.curAttrData = DEFAULT_ATTR_DATA.clone();
-    this._eraseAttrData = DEFAULT_ATTR_DATA.clone();
-
-    this.params = [];
-    this.currentParam = 0;
-
     this._userScrolling = false;
 
-    // Register input handler and refire/handle events
-    this._inputHandler = new InputHandler(this, this._bufferService, this._coreService, this._dirtyRowService, this._logService, this.optionsService, this._coreMouseService);
-    this._inputHandler.onCursorMove(() => this._onCursorMove.fire());
-    this._inputHandler.onLineFeed(() => this._onLineFeed.fire());
-    this.register(this._inputHandler);
+    if (this._inputHandler) {
+      this._inputHandler.reset();
+    } else {
+      // Register input handler and refire/handle events
+      this._inputHandler = new InputHandler(this, this._bufferService, this._charsetService, this._coreService, this._dirtyRowService, this._logService, this.optionsService, this._coreMouseService, this.unicodeService, this._instantiationService);
+      this._inputHandler.onRequestBell(() => this.bell());
+      this._inputHandler.onRequestRefreshRows((start, end) => this.refresh(start, end));
+      this._inputHandler.onRequestReset(() => this.reset());
+      this._inputHandler.onCursorMove(() => this._onCursorMove.fire());
+      this._inputHandler.onLineFeed(() => this._onLineFeed.fire());
+      this.register(this._inputHandler);
+    }
 
-    this.linkifier = this.linkifier || new Linkifier(this._bufferService, this._logService);
+    if (!this.linkifier) {
+      this.linkifier = new Linkifier(this._bufferService, this._logService, this.optionsService, this.unicodeService);
+    }
+    if (!this.linkifier2) {
+      this.linkifier2 = new Linkifier2(this._bufferService);
+    }
 
     if (this.options.windowsMode) {
       this._enableWindowsMode();
@@ -290,7 +270,17 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _enableWindowsMode(): void {
     if (!this._windowsMode) {
-      this._windowsMode = this.onLineFeed(handleWindowsModeLineFeed.bind(null, this._bufferService));
+      const disposables: IDisposable[] = [];
+      disposables.push(this.onLineFeed(updateWindowsModeWrappedState.bind(null, this._bufferService)));
+      disposables.push(this.addCsiHandler({ final: 'H' }, () => {
+        updateWindowsModeWrappedState(this._bufferService);
+        return false;
+      }));
+      this._windowsMode = {
+        dispose: () => {
+          disposables.forEach(d => d.dispose());
+        }
+      };
     }
   }
 
@@ -305,15 +295,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     return this._bufferService.buffers;
   }
 
-  /**
-   * back_color_erase feature for xterm.
-   */
-  public eraseAttrData(): IAttributeData {
-    this._eraseAttrData.bg &= ~(Attributes.CM_MASK | 0xFFFFFF);
-    this._eraseAttrData.bg |= this.curAttrData.bg & ~0xFC000000;
-    return this._eraseAttrData;
-  }
-
   /**
    * Focus the terminal. Delegates focus handling to the terminal's DOM element.
    */
@@ -333,6 +314,11 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
           this._renderService?.clear();
           this._charSizeService?.measure();
           break;
+        case 'cursorBlink':
+        case 'cursorStyle':
+          // The DOM renderer needs a row refresh to update the cursor styles
+          this.refresh(this.buffer.y, this.buffer.y);
+          break;
         case 'drawBoldTextInBrightColors':
         case 'letterSpacing':
         case 'lineHeight':
@@ -433,7 +419,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
       }
       copyHandler(event, this._selectionService);
     }));
-    const pasteHandlerWrapper = (event: ClipboardEvent) => handlePasteEvent(event, this.textarea, this.bracketedPasteMode, this._coreService);
+    const pasteHandlerWrapper = (event: ClipboardEvent): void => handlePasteEvent(event, this.textarea, this.bracketedPasteMode, this._coreService);
     this.register(addDisposableDomListener(this.textarea, 'paste', pasteHandlerWrapper));
     this.register(addDisposableDomListener(this.element, 'paste', pasteHandlerWrapper));
 
@@ -485,17 +471,15 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
    * @param parent The element to create the terminal within.
    */
   public open(parent: HTMLElement): void {
-    this._parent = parent || this._parent;
-
-    if (!this._parent) {
+    if (!parent) {
       throw new Error('Terminal requires a parent element.');
     }
 
     if (!document.body.contains(parent)) {
-      this._logService.warn('Terminal.open was called on an element that was not attached to the DOM');
+      this._logService.debug('Terminal.open was called on an element that was not attached to the DOM');
     }
 
-    this._document = this._parent.ownerDocument;
+    this._document = parent.ownerDocument;
 
     // Create main element container
     this.element = this._document.createElement('div');
@@ -503,7 +487,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this.element.classList.add('terminal');
     this.element.classList.add('xterm');
     this.element.setAttribute('tabindex', '0');
-    this._parent.appendChild(this.element);
+    parent.appendChild(this.element);
 
     // Performance: Use a document fragment to build the terminal
     // viewport and helper elements detached from the DOM
@@ -606,6 +590,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this.register(this._mouseZoneManager);
     this.register(this.onScroll(() => this._mouseZoneManager.clearAll()));
     this.linkifier.attachToDom(this.element, this._mouseZoneManager);
+    this.linkifier2.attachToDom(this.element, this._mouseService, this._renderService);
 
     // This event listener must be registered aftre MouseZoneManager is created
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService.onMouseDown(e)));
@@ -640,8 +625,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _createRenderer(): IRenderer {
     switch (this.options.rendererType) {
-      case 'canvas': return this._instantiationService.createInstance(Renderer, this._colorManager.colors, this.screenElement, this.linkifier);
-      case 'dom': return this._instantiationService.createInstance(DomRenderer, this._colorManager.colors, this.element, this.screenElement, this._viewportElement, this.linkifier);
+      case 'canvas': return this._instantiationService.createInstance(Renderer, this._colorManager.colors, this.screenElement, this.linkifier, this.linkifier2);
+      case 'dom': return this._instantiationService.createInstance(DomRenderer, this._colorManager.colors, this.element, this.screenElement, this._viewportElement, this.linkifier, this.linkifier2);
       default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`);
     }
   }
@@ -678,10 +663,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
     // send event to CoreMouseService
     function sendEvent(ev: MouseEvent | WheelEvent): boolean {
-      let pos;
-
       // get mouse coordinates
-      pos = self._mouseService.getRawByteCoords(ev, self.screenElement, self.cols, self.rows);
+      const pos = self._mouseService.getRawByteCoords(ev, self.screenElement, self.cols, self.rows);
       if (!pos) {
         return false;
       }
@@ -700,8 +683,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
           } else {
             // according to MDN buttons only reports up to button 5 (AUX2)
             but = ev.buttons & 1 ? CoreMouseButton.LEFT :
-                  ev.buttons & 4 ? CoreMouseButton.MIDDLE :
-                  ev.buttons & 2 ? CoreMouseButton.RIGHT :
+              ev.buttons & 4 ? CoreMouseButton.MIDDLE :
+                ev.buttons & 2 ? CoreMouseButton.RIGHT :
                   CoreMouseButton.NONE; // fallback to NONE
           }
           break;
@@ -750,13 +733,13 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
      * Note: 'mousedown' currently is "always on" and not managed
      * by onProtocolChange.
      */
-    const requestedEvents: {[key: string]: ((ev: Event) => void) | null} = {
+    const requestedEvents: { [key: string]: ((ev: Event) => void) | null } = {
       mouseup: null,
       wheel: null,
       mousedrag: null,
       mousemove: null
     };
-    const eventListeners: {[key: string]: (ev: Event) => void} = {
+    const eventListeners: { [key: string]: (ev: Event) => void } = {
       mouseup: (ev: MouseEvent) => {
         sendEvent(ev);
         if (!ev.buttons) {
@@ -879,7 +862,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
           }
 
           // Construct and send sequences
-          const sequence = C0.ESC + (this._coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + ( ev.deltaY < 0 ? 'A' : 'B');
+          const sequence = C0.ESC + (this._coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B');
           let data = '';
           for (let i = 0; i < Math.abs(amount); i++) {
             data += sequence;
@@ -958,10 +941,9 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
    * Scroll the terminal down 1 row, creating a blank line.
    * @param isWrapped Whether the new line is wrapped from the previous line.
    */
-  public scroll(isWrapped: boolean = false): void {
+  public scroll(eraseAttr: IAttributeData, isWrapped: boolean = false): void {
     let newLine: IBufferLine;
     newLine = this._blankLine;
-    const eraseAttr = this.eraseAttrData();
     if (!newLine || newLine.length !== this.cols || newLine.getFg(0) !== eraseAttr.fg || newLine.getBg(0) !== eraseAttr.bg) {
       newLine = this.buffer.getBlankLine(eraseAttr, isWrapped);
       this._blankLine = newLine;
@@ -1003,7 +985,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     } else {
       // scrollTop is non-zero which means no line will be going to the
       // scrollback, instead we can just shift them in-place.
-      const scrollRegionHeight = bottomRow - topRow + 1/*as it's zero-based*/;
+      const scrollRegionHeight = bottomRow - topRow + 1 /* as it's zero-based */;
       this.buffer.lines.shiftElements(topRow + 1, scrollRegionHeight - 1, -1);
       this.buffer.lines.set(bottomRow, newLine.clone());
     }
@@ -1143,6 +1125,10 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     }
   }
 
+  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    return this.linkifier2.registerLinkProvider(linkProvider);
+  }
+
   public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
     const joinerId = this._renderService.registerCharacterJoiner(handler);
     this.refresh(0, this.rows - 1);
@@ -1295,8 +1281,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _isThirdLevelShift(browser: IBrowser, ev: IKeyboardEvent): boolean {
     const thirdLevelKey =
-        (browser.isMac && !this.options.macOptionIsMeta && ev.altKey && !ev.ctrlKey && !ev.metaKey) ||
-        (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey);
+      (browser.isMac && !this.options.macOptionIsMeta && ev.altKey && !ev.ctrlKey && !ev.metaKey) ||
+      (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey);
 
     if (ev.type === 'keypress') {
       return thirdLevelKey;
@@ -1306,27 +1292,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     return thirdLevelKey && (!ev.keyCode || ev.keyCode > 47);
   }
 
-  /**
-   * Set the G level of the terminal
-   * @param g
-   */
-  public setgLevel(g: number): void {
-    this.glevel = g;
-    this.charset = this.charsets[g];
-  }
-
-  /**
-   * Set the charset for the given G level of the terminal
-   * @param g
-   * @param charset
-   */
-  public setgCharset(g: number, charset: ICharset): void {
-    this.charsets[g] = charset;
-    if (this.glevel === g) {
-      this.charset = charset;
-    }
-  }
-
   protected _keyUp(ev: KeyboardEvent): void {
     if (this._customKeyEventHandler && this._customKeyEventHandler(ev) === false) {
       return;
@@ -1432,7 +1397,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
     // Sync the scroll area to make sure scroll events don't fire and scroll the viewport to an
     // invalid location
-    this.viewport.syncScrollArea(true);
+    this.viewport?.syncScrollArea(true);
 
     this.refresh(0, this.rows - 1);
     this._onResize.fire({ cols: x, rows: y });
@@ -1512,18 +1477,17 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this.options.rows = this.rows;
     this.options.cols = this.cols;
     const customKeyEventHandler = this._customKeyEventHandler;
-    const inputHandler = this._inputHandler;
     const userScrolling = this._userScrolling;
 
     this._setup();
     this._bufferService.reset();
+    this._charsetService.reset();
     this._coreService.reset();
     this._coreMouseService.reset();
     this._selectionService?.reset();
 
     // reattach
     this._customKeyEventHandler = customKeyEventHandler;
-    this._inputHandler = inputHandler;
     this._userScrolling = userScrolling;
 
     // do a full screen refresh

src/TestUtils.test.ts

@@ -6,19 +6,20 @@
 import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
 import { IInputHandlingTerminal, ICompositionHelper, ITerminal, IBrowser, ITerminalOptions } from './Types';
 import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types';
-import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, ICharset, CoreMouseEventType } from 'common/Types';
+import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, ICharset } from 'common/Types';
 import { Buffer } from 'common/buffer/Buffer';
 import * as Browser from 'common/Platform';
-import { IDisposable, IMarker, IEvent, ISelectionPosition } from 'xterm';
+import { IDisposable, IMarker, IEvent, ISelectionPosition, ILinkProvider } from 'xterm';
 import { Terminal } from './Terminal';
 import { AttributeData } from 'common/buffer/AttributeData';
-import { IColorManager, IColorSet, ILinkMatcherOptions, ILinkifier, IViewport } from 'browser/Types';
-import { IOptionsService } from 'common/services/Services';
+import { IColorManager, IColorSet, ILinkMatcherOptions, ILinkifier, IViewport, ILinkifier2 } from 'browser/Types';
+import { IOptionsService, IUnicodeService } from 'common/services/Services';
 import { EventEmitter } from 'common/EventEmitter';
 import { IParams, IFunctionIdentifier } from 'common/parser/Types';
 import { ISelectionService } from 'browser/services/Services';
 
 export class TestTerminal extends Terminal {
+  get curAttrData(): IAttributeData { return (this as any)._inputHandler._curAttrData; }
   keyDown(ev: any): boolean { return this._keyDown(ev); }
   keyPress(ev: any): boolean { return this._keyPress(ev); }
 }
@@ -35,11 +36,12 @@ export class MockTerminal implements ITerminal {
   onBinary: IEvent<string>;
   onTitleChange: IEvent<string>;
   onScroll: IEvent<number>;
-  onKey: IEvent<{ key: string; domEvent: KeyboardEvent; }>;
-  onRender: IEvent<{ start: number; end: number; }>;
-  onResize: IEvent<{ cols: number; rows: number; }>;
+  onKey: IEvent<{ key: string, domEvent: KeyboardEvent }>;
+  onRender: IEvent<{ start: number, end: number }>;
+  onResize: IEvent<{ cols: number, rows: number }>;
   markers: IMarker[];
   optionsService: IOptionsService;
+  unicodeService: IUnicodeService;
   addMarker(cursorYOffset: number): IMarker {
     throw new Error('Method not implemented.');
   }
@@ -92,6 +94,9 @@ export class MockTerminal implements ITerminal {
   deregisterLinkMatcher(matcherId: number): void {
     throw new Error('Method not implemented.');
   }
+  registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    throw new Error('Method not implemented.');
+  }
   hasSelection(): boolean {
     throw new Error('Method not implemented.');
   }
@@ -134,6 +139,7 @@ export class MockTerminal implements ITerminal {
   bracketedPasteMode: boolean;
   renderer: IRenderer;
   linkifier: ILinkifier;
+  linkifier2: ILinkifier2;
   isFocused: boolean;
   options: ITerminalOptions = {};
   element: HTMLElement;
@@ -197,112 +203,24 @@ export class MockTerminal implements ITerminal {
 export class MockInputHandlingTerminal implements IInputHandlingTerminal {
   onA11yCharEmitter: EventEmitter<string>;
   onA11yTabEmitter: EventEmitter<number>;
-  element: HTMLElement;
-  options: ITerminalOptions = {};
-  cols: number;
-  rows: number;
-  charset: { [key: string]: string; };
-  gcharset: number;
-  glevel: number;
-  charsets: { [key: string]: string; }[];
-  applicationKeypad: boolean;
-  applicationCursor: boolean;
-  originMode: boolean;
   insertMode: boolean;
-  wraparoundMode: boolean;
   bracketedPasteMode: boolean;
-  curAttrData = new AttributeData();
-  savedCols: number;
-  x10Mouse: boolean;
-  vt200Mouse: boolean;
-  normalMouse: boolean;
-  mouseEvents: CoreMouseEventType;
   sendFocus: boolean;
-  utfMouse: boolean;
-  sgrMouse: boolean;
-  urxvtMouse: boolean;
-  cursorHidden: boolean;
   buffers: IBufferSet;
   buffer: IBuffer = new MockBuffer();
   viewport: IViewport;
-  selectionService: ISelectionService;
-  focus(): void {
-    throw new Error('Method not implemented.');
-  }
-  convertEol: boolean;
-  bell(): void {
-    throw new Error('Method not implemented.');
-  }
-
-  updateRange(y: number): void {
-    throw new Error('Method not implemented.');
-  }
-  scroll(isWrapped?: boolean): void {
-    throw new Error('Method not implemented.');
-  }
-  nextStop(x?: number): number {
-    throw new Error('Method not implemented.');
-  }
-  setgLevel(g: number): void {
-    throw new Error('Method not implemented.');
-  }
-  eraseAttrData(): IAttributeData {
-    throw new Error('Method not implemented.');
-  }
-  eraseRight(x: number, y: number): void {
-    throw new Error('Method not implemented.');
-  }
-  eraseLine(y: number): void {
-    throw new Error('Method not implemented.');
-  }
-  eraseLeft(x: number, y: number): void {
-    throw new Error('Method not implemented.');
-  }
-  prevStop(x?: number): number {
+  scroll(eraseAttr: IAttributeData, isWrapped?: boolean): void {
     throw new Error('Method not implemented.');
   }
   is(term: string): boolean {
     throw new Error('Method not implemented.');
   }
-  setgCharset(g: number, charset: { [key: string]: string; }): void {
-    throw new Error('Method not implemented.');
-  }
   resize(x: number, y: number): void {
     throw new Error('Method not implemented.');
   }
-  log(text: string, data?: any): void {
-    throw new Error('Method not implemented.');
-  }
-  reset(): void {
-    throw new Error('Method not implemented.');
-  }
   showCursor(): void {
     throw new Error('Method not implemented.');
   }
-  refresh(start: number, end: number): void {
-    throw new Error('Method not implemented.');
-  }
-  matchColor(r1: number, g1: number, b1: number): number {
-    throw new Error('Method not implemented.');
-  }
-  error(text: string, data?: any): void {
-    throw new Error('Method not implemented.');
-  }
-  setOption(key: string, value: any): void {
-    (<any>this.options)[key] = value;
-  }
-  on(type: string, listener: XtermListener): void {
-    throw new Error('Method not implemented.');
-  }
-  off(type: string, listener: XtermListener): void {
-    throw new Error('Method not implemented.');
-  }
-  emit(type: string, data?: any): void {
-    throw new Error('Method not implemented.');
-  }
-  addDisposableListener(type: string, handler: XtermListener): IDisposable {
-    throw new Error('Method not implemented.');
-  }
   handler(data: string): void {
     throw new Error('Method not implemented.');
   }
@@ -333,7 +251,7 @@ export class MockBuffer implements IBuffer {
   translateBufferLineToString(lineIndex: number, trimRight: boolean, startCol?: number, endCol?: number): string {
     return Buffer.prototype.translateBufferLineToString.apply(this, arguments);
   }
-  getWrappedRangeForLine(y: number): { first: number; last: number; } {
+  getWrappedRangeForLine(y: number): { first: number, last: number } {
     return Buffer.prototype.getWrappedRangeForLine.apply(this, arguments);
   }
   nextStop(x?: number): number {
@@ -364,8 +282,8 @@ export class MockBuffer implements IBuffer {
 
 export class MockRenderer implements IRenderer {
   onRequestRefreshRows: IEvent<IRequestRefreshRowsEvent>;
-  onCanvasResize: IEvent<{ width: number; height: number; }>;
-  onRender: IEvent<{ start: number; end: number; }>;
+  onCanvasResize: IEvent<{ width: number, height: number }>;
+  onRender: IEvent<{ start: number, end: number }>;
   dispose(): void {
     throw new Error('Method not implemented.');
   }
@@ -386,16 +304,16 @@ export class MockRenderer implements IRenderer {
   setColors(colors: IColorSet): void {
     throw new Error('Method not implemented.');
   }
-  onResize(cols: number, rows: number): void {}
-  onCharSizeChanged(): void {}
-  onBlur(): void {}
-  onFocus(): void {}
-  onSelectionChanged(start: [number, number], end: [number, number]): void {}
-  onCursorMove(): void {}
-  onOptionsChanged(): void {}
-  onDevicePixelRatioChange(): void {}
-  clear(): void {}
-  renderRows(start: number, end: number): void {}
+  onResize(cols: number, rows: number): void { }
+  onCharSizeChanged(): void { }
+  onBlur(): void { }
+  onFocus(): void { }
+  onSelectionChanged(start: [number, number], end: [number, number]): void { }
+  onCursorMove(): void { }
+  onOptionsChanged(): void { }
+  onDevicePixelRatioChange(): void { }
+  clear(): void { }
+  renderRows(start: number, end: number): void { }
   registerCharacterJoiner(handler: CharacterJoinerHandler): number { return 0; }
   deregisterCharacterJoiner(): boolean { return true; }
 }

src/Types.d.ts

@@ -3,11 +3,11 @@
  * @license MIT
  */
 
-import { ITerminalOptions as IPublicTerminalOptions, IDisposable, IMarker, ISelectionPosition } from 'xterm';
+import { ITerminalOptions as IPublicTerminalOptions, IDisposable, IMarker, ISelectionPosition, ILinkProvider } from 'xterm';
 import { ICharset, IAttributeData, CharData, CoreMouseEventType } from 'common/Types';
 import { IEvent, IEventEmitter } from 'common/EventEmitter';
-import { IColorSet, ILinkifier, ILinkMatcherOptions, IViewport } from 'browser/Types';
-import { IOptionsService } from 'common/services/Services';
+import { IColorSet, ILinkifier, ILinkMatcherOptions, IViewport, ILinkifier2 } from 'browser/Types';
+import { IOptionsService, IUnicodeService } from 'common/services/Services';
 import { IBuffer, IBufferSet } from 'common/buffer/Types';
 import { IParams, IFunctionIdentifier } from 'common/parser/Types';
 
@@ -21,22 +21,8 @@ export type LineData = CharData[];
  * InputHandler cleanly from the ITerminal interface.
  */
 export interface IInputHandlingTerminal {
-  element: HTMLElement;
-  options: ITerminalOptions;
-  cols: number;
-  rows: number;
-  charset: ICharset;
-  gcharset: number;
-  glevel: number;
-  charsets: ICharset[];
-  applicationKeypad: boolean;
-  originMode: boolean;
   insertMode: boolean;
-  wraparoundMode: boolean;
   bracketedPasteMode: boolean;
-  curAttrData: IAttributeData;
-  savedCols: number;
-  mouseEvents: CoreMouseEventType;
   sendFocus: boolean;
 
   buffers: IBufferSet;
@@ -46,17 +32,10 @@ export interface IInputHandlingTerminal {
   onA11yCharEmitter: IEventEmitter<string>;
   onA11yTabEmitter: IEventEmitter<number>;
 
-  bell(): void;
-  focus(): void;
-  scroll(isWrapped?: boolean): void;
-  setgLevel(g: number): void;
-  eraseAttrData(): IAttributeData;
+  scroll(eraseAttr: IAttributeData, isWrapped?: boolean): void;
   is(term: string): boolean;
-  setgCharset(g: number, charset: ICharset): void;
   resize(x: number, y: number): void;
-  reset(): void;
   showCursor(): void;
-  refresh(start: number, end: number): void;
   handleTitle(title: string): void;
 }
 
@@ -141,7 +120,7 @@ export interface IInputHandler {
   /** ESC D */ index(): void;
   /** ESC H */ tabSet(): void;
   /** ESC M */ reverseIndex(): void;
-  /** ESC c */ reset(): void;
+  /** ESC c */ fullReset(): void;
   /** ESC n
       ESC o
       ESC |
@@ -160,6 +139,7 @@ export interface ITerminal extends IPublicTerminal, IElementAccessor, IBufferAcc
   optionsService: IOptionsService;
   // TODO: We should remove options once components adopt optionsService
   options: ITerminalOptions;
+  unicodeService: IUnicodeService;
 
   onBlur: IEvent<void>;
   onFocus: IEvent<void>;
@@ -199,6 +179,7 @@ export interface IPublicTerminal extends IDisposable {
   addOscHandler(ident: number, callback: (data: string) => boolean): IDisposable;
   registerLinkMatcher(regex: RegExp, handler: (event: MouseEvent, uri: string) => void, options?: ILinkMatcherOptions): number;
   deregisterLinkMatcher(matcherId: number): void;
+  registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
   registerCharacterJoiner(handler: (text: string) => [number, number][]): number;
   deregisterCharacterJoiner(joinerId: number): void;
   addMarker(cursorYOffset: number): IMarker;
@@ -232,6 +213,7 @@ export interface IElementAccessor {
 
 export interface ILinkifierAccessor {
   linkifier: ILinkifier;
+  linkifier2: ILinkifier2;
 }
 
 // TODO: The options that are not in the public API should be reviewed
@@ -239,10 +221,7 @@ export interface ITerminalOptions extends IPublicTerminalOptions {
   [key: string]: any;
   cancelEvents?: boolean;
   convertEol?: boolean;
-  handler?: (data: string) => void;
-  screenKeys?: boolean;
   termName?: string;
-  useFlowControl?: boolean;
 }
 
 export interface IBrowser {

src/browser/Color.test.ts

@@ -4,50 +4,243 @@
  */
 
 import { assert } from 'chai';
-import { blend, fromCss, toPaddedHex, toCss, toRgba, fromRgba, opaque, rgbRelativeLuminance, contrastRatio, ensureContrastRatioRgba } from 'browser/Color';
+import { channels, color, css, rgb, rgba, toPaddedHex, contrastRatio } from 'browser/Color';
 
 describe('Color', () => {
-  describe('blend', () => {
-    it('should blend colors based on the alpha channel', () => {
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF00', rgba: 0xFFFFFF00 }), { css: '#000000', rgba: 0x000000FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF10', rgba: 0xFFFFFF10 }), { css: '#101010', rgba: 0x101010FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF20', rgba: 0xFFFFFF20 }), { css: '#202020', rgba: 0x202020FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF30', rgba: 0xFFFFFF30 }), { css: '#303030', rgba: 0x303030FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF40', rgba: 0xFFFFFF40 }), { css: '#404040', rgba: 0x404040FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF50', rgba: 0xFFFFFF50 }), { css: '#505050', rgba: 0x505050FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF60', rgba: 0xFFFFFF60 }), { css: '#606060', rgba: 0x606060FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF70', rgba: 0xFFFFFF70 }), { css: '#707070', rgba: 0x707070FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF80', rgba: 0xFFFFFF80 }), { css: '#808080', rgba: 0x808080FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF90', rgba: 0xFFFFFF90 }), { css: '#909090', rgba: 0x909090FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFA0', rgba: 0xFFFFFFA0 }), { css: '#a0a0a0', rgba: 0xA0A0A0FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFB0', rgba: 0xFFFFFFB0 }), { css: '#b0b0b0', rgba: 0xB0B0B0FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFC0', rgba: 0xFFFFFFC0 }), { css: '#c0c0c0', rgba: 0xC0C0C0FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFD0', rgba: 0xFFFFFFD0 }), { css: '#d0d0d0', rgba: 0xD0D0D0FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFE0', rgba: 0xFFFFFFE0 }), { css: '#e0e0e0', rgba: 0xE0E0E0FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFF0', rgba: 0xFFFFFFF0 }), { css: '#f0f0f0', rgba: 0xF0F0F0FF });
-      assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFFF', rgba: 0xFFFFFFFF }), { css: '#FFFFFFFF', rgba: 0xFFFFFFFF });
+
+  describe('channels', () => {
+    describe('toCss', () => {
+      it('should convert an rgb array to css hex string', () => {
+        assert.equal(channels.toCss(0x00, 0x00, 0x00), '#000000');
+        assert.equal(channels.toCss(0x10, 0x10, 0x10), '#101010');
+        assert.equal(channels.toCss(0x20, 0x20, 0x20), '#202020');
+        assert.equal(channels.toCss(0x30, 0x30, 0x30), '#303030');
+        assert.equal(channels.toCss(0x40, 0x40, 0x40), '#404040');
+        assert.equal(channels.toCss(0x50, 0x50, 0x50), '#505050');
+        assert.equal(channels.toCss(0x60, 0x60, 0x60), '#606060');
+        assert.equal(channels.toCss(0x70, 0x70, 0x70), '#707070');
+        assert.equal(channels.toCss(0x80, 0x80, 0x80), '#808080');
+        assert.equal(channels.toCss(0x90, 0x90, 0x90), '#909090');
+        assert.equal(channels.toCss(0xa0, 0xa0, 0xa0), '#a0a0a0');
+        assert.equal(channels.toCss(0xb0, 0xb0, 0xb0), '#b0b0b0');
+        assert.equal(channels.toCss(0xc0, 0xc0, 0xc0), '#c0c0c0');
+        assert.equal(channels.toCss(0xd0, 0xd0, 0xd0), '#d0d0d0');
+        assert.equal(channels.toCss(0xe0, 0xe0, 0xe0), '#e0e0e0');
+        assert.equal(channels.toCss(0xf0, 0xf0, 0xf0), '#f0f0f0');
+        assert.equal(channels.toCss(0xff, 0xff, 0xff), '#ffffff');
+      });
+    });
+
+    describe('toRgba', () => {
+      it('should convert an rgb array to an rgba number', () => {
+        assert.equal(channels.toRgba(0x00, 0x00, 0x00), 0x000000FF);
+        assert.equal(channels.toRgba(0x10, 0x10, 0x10), 0x101010FF);
+        assert.equal(channels.toRgba(0x20, 0x20, 0x20), 0x202020FF);
+        assert.equal(channels.toRgba(0x30, 0x30, 0x30), 0x303030FF);
+        assert.equal(channels.toRgba(0x40, 0x40, 0x40), 0x404040FF);
+        assert.equal(channels.toRgba(0x50, 0x50, 0x50), 0x505050FF);
+        assert.equal(channels.toRgba(0x60, 0x60, 0x60), 0x606060FF);
+        assert.equal(channels.toRgba(0x70, 0x70, 0x70), 0x707070FF);
+        assert.equal(channels.toRgba(0x80, 0x80, 0x80), 0x808080FF);
+        assert.equal(channels.toRgba(0x90, 0x90, 0x90), 0x909090FF);
+        assert.equal(channels.toRgba(0xa0, 0xa0, 0xa0), 0xa0a0a0FF);
+        assert.equal(channels.toRgba(0xb0, 0xb0, 0xb0), 0xb0b0b0FF);
+        assert.equal(channels.toRgba(0xc0, 0xc0, 0xc0), 0xc0c0c0FF);
+        assert.equal(channels.toRgba(0xd0, 0xd0, 0xd0), 0xd0d0d0FF);
+        assert.equal(channels.toRgba(0xe0, 0xe0, 0xe0), 0xe0e0e0FF);
+        assert.equal(channels.toRgba(0xf0, 0xf0, 0xf0), 0xf0f0f0FF);
+        assert.equal(channels.toRgba(0xff, 0xff, 0xff), 0xffffffFF);
+      });
+      it('should convert an rgba array to an rgba number', () => {
+        assert.equal(channels.toRgba(0x00, 0x00, 0x00, 0x00), 0x00000000);
+        assert.equal(channels.toRgba(0x10, 0x10, 0x10, 0x10), 0x10101010);
+        assert.equal(channels.toRgba(0x20, 0x20, 0x20, 0x20), 0x20202020);
+        assert.equal(channels.toRgba(0x30, 0x30, 0x30, 0x30), 0x30303030);
+        assert.equal(channels.toRgba(0x40, 0x40, 0x40, 0x40), 0x40404040);
+        assert.equal(channels.toRgba(0x50, 0x50, 0x50, 0x50), 0x50505050);
+        assert.equal(channels.toRgba(0x60, 0x60, 0x60, 0x60), 0x60606060);
+        assert.equal(channels.toRgba(0x70, 0x70, 0x70, 0x70), 0x70707070);
+        assert.equal(channels.toRgba(0x80, 0x80, 0x80, 0x80), 0x80808080);
+        assert.equal(channels.toRgba(0x90, 0x90, 0x90, 0x90), 0x90909090);
+        assert.equal(channels.toRgba(0xa0, 0xa0, 0xa0, 0xa0), 0xa0a0a0a0);
+        assert.equal(channels.toRgba(0xb0, 0xb0, 0xb0, 0xb0), 0xb0b0b0b0);
+        assert.equal(channels.toRgba(0xc0, 0xc0, 0xc0, 0xc0), 0xc0c0c0c0);
+        assert.equal(channels.toRgba(0xd0, 0xd0, 0xd0, 0xd0), 0xd0d0d0d0);
+        assert.equal(channels.toRgba(0xe0, 0xe0, 0xe0, 0xe0), 0xe0e0e0e0);
+        assert.equal(channels.toRgba(0xf0, 0xf0, 0xf0, 0xf0), 0xf0f0f0f0);
+        assert.equal(channels.toRgba(0xff, 0xff, 0xff, 0xff), 0xffffffff);
+      });
     });
   });
 
-  describe('fromCss', () => {
-    it('should covert a CSS string to an IColor', () => {
-      assert.deepEqual(fromCss('#000000'), { css: '#000000', rgba: 0x000000FF });
-      assert.deepEqual(fromCss('#101010'), { css: '#101010', rgba: 0x101010FF });
-      assert.deepEqual(fromCss('#202020'), { css: '#202020', rgba: 0x202020FF });
-      assert.deepEqual(fromCss('#303030'), { css: '#303030', rgba: 0x303030FF });
-      assert.deepEqual(fromCss('#404040'), { css: '#404040', rgba: 0x404040FF });
-      assert.deepEqual(fromCss('#505050'), { css: '#505050', rgba: 0x505050FF });
-      assert.deepEqual(fromCss('#606060'), { css: '#606060', rgba: 0x606060FF });
-      assert.deepEqual(fromCss('#707070'), { css: '#707070', rgba: 0x707070FF });
-      assert.deepEqual(fromCss('#808080'), { css: '#808080', rgba: 0x808080FF });
-      assert.deepEqual(fromCss('#909090'), { css: '#909090', rgba: 0x909090FF });
-      assert.deepEqual(fromCss('#a0a0a0'), { css: '#a0a0a0', rgba: 0xa0a0a0FF });
-      assert.deepEqual(fromCss('#b0b0b0'), { css: '#b0b0b0', rgba: 0xb0b0b0FF });
-      assert.deepEqual(fromCss('#c0c0c0'), { css: '#c0c0c0', rgba: 0xc0c0c0FF });
-      assert.deepEqual(fromCss('#d0d0d0'), { css: '#d0d0d0', rgba: 0xd0d0d0FF });
-      assert.deepEqual(fromCss('#e0e0e0'), { css: '#e0e0e0', rgba: 0xe0e0e0FF });
-      assert.deepEqual(fromCss('#f0f0f0'), { css: '#f0f0f0', rgba: 0xf0f0f0FF });
-      assert.deepEqual(fromCss('#ffffff'), { css: '#ffffff', rgba: 0xffffffFF });
+  describe('color', () => {
+    describe('blend', () => {
+      it('should blend colors based on the alpha channel', () => {
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF00', rgba: 0xFFFFFF00 }), { css: '#000000', rgba: 0x000000FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF10', rgba: 0xFFFFFF10 }), { css: '#101010', rgba: 0x101010FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF20', rgba: 0xFFFFFF20 }), { css: '#202020', rgba: 0x202020FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF30', rgba: 0xFFFFFF30 }), { css: '#303030', rgba: 0x303030FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF40', rgba: 0xFFFFFF40 }), { css: '#404040', rgba: 0x404040FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF50', rgba: 0xFFFFFF50 }), { css: '#505050', rgba: 0x505050FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF60', rgba: 0xFFFFFF60 }), { css: '#606060', rgba: 0x606060FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF70', rgba: 0xFFFFFF70 }), { css: '#707070', rgba: 0x707070FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF80', rgba: 0xFFFFFF80 }), { css: '#808080', rgba: 0x808080FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFF90', rgba: 0xFFFFFF90 }), { css: '#909090', rgba: 0x909090FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFA0', rgba: 0xFFFFFFA0 }), { css: '#a0a0a0', rgba: 0xA0A0A0FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFB0', rgba: 0xFFFFFFB0 }), { css: '#b0b0b0', rgba: 0xB0B0B0FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFC0', rgba: 0xFFFFFFC0 }), { css: '#c0c0c0', rgba: 0xC0C0C0FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFD0', rgba: 0xFFFFFFD0 }), { css: '#d0d0d0', rgba: 0xD0D0D0FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFE0', rgba: 0xFFFFFFE0 }), { css: '#e0e0e0', rgba: 0xE0E0E0FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFF0', rgba: 0xFFFFFFF0 }), { css: '#f0f0f0', rgba: 0xF0F0F0FF });
+        assert.deepEqual(color.blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFFF', rgba: 0xFFFFFFFF }), { css: '#FFFFFFFF', rgba: 0xFFFFFFFF });
+      });
+    });
+
+    describe('opaque', () => {
+      it('should make the color opaque', () => {
+        assert.deepEqual(color.opaque({ css: '#00000000', rgba: 0x00000000 }), { css: '#000000', rgba: 0x000000FF });
+        assert.deepEqual(color.opaque({ css: '#10101010', rgba: 0x10101010 }), { css: '#101010', rgba: 0x101010FF });
+        assert.deepEqual(color.opaque({ css: '#20202020', rgba: 0x20202020 }), { css: '#202020', rgba: 0x202020FF });
+        assert.deepEqual(color.opaque({ css: '#30303030', rgba: 0x30303030 }), { css: '#303030', rgba: 0x303030FF });
+        assert.deepEqual(color.opaque({ css: '#40404040', rgba: 0x40404040 }), { css: '#404040', rgba: 0x404040FF });
+        assert.deepEqual(color.opaque({ css: '#50505050', rgba: 0x50505050 }), { css: '#505050', rgba: 0x505050FF });
+        assert.deepEqual(color.opaque({ css: '#60606060', rgba: 0x60606060 }), { css: '#606060', rgba: 0x606060FF });
+        assert.deepEqual(color.opaque({ css: '#70707070', rgba: 0x70707070 }), { css: '#707070', rgba: 0x707070FF });
+        assert.deepEqual(color.opaque({ css: '#80808080', rgba: 0x80808080 }), { css: '#808080', rgba: 0x808080FF });
+        assert.deepEqual(color.opaque({ css: '#90909090', rgba: 0x90909090 }), { css: '#909090', rgba: 0x909090FF });
+        assert.deepEqual(color.opaque({ css: '#a0a0a0a0', rgba: 0xa0a0a0a0 }), { css: '#a0a0a0', rgba: 0xa0a0a0FF });
+        assert.deepEqual(color.opaque({ css: '#b0b0b0b0', rgba: 0xb0b0b0b0 }), { css: '#b0b0b0', rgba: 0xb0b0b0FF });
+        assert.deepEqual(color.opaque({ css: '#c0c0c0c0', rgba: 0xc0c0c0c0 }), { css: '#c0c0c0', rgba: 0xc0c0c0FF });
+        assert.deepEqual(color.opaque({ css: '#d0d0d0d0', rgba: 0xd0d0d0d0 }), { css: '#d0d0d0', rgba: 0xd0d0d0FF });
+        assert.deepEqual(color.opaque({ css: '#e0e0e0e0', rgba: 0xe0e0e0e0 }), { css: '#e0e0e0', rgba: 0xe0e0e0FF });
+        assert.deepEqual(color.opaque({ css: '#f0f0f0f0', rgba: 0xf0f0f0f0 }), { css: '#f0f0f0', rgba: 0xf0f0f0FF });
+        assert.deepEqual(color.opaque({ css: '#ffffffff', rgba: 0xffffffff }), { css: '#ffffff', rgba: 0xffffffFF });
+      });
+    });
+  });
+
+  describe('css', () => {
+    describe('toColor', () => {
+      it('should covert a CSS string to an IColor', () => {
+        assert.deepEqual(css.toColor('#000000'), { css: '#000000', rgba: 0x000000FF });
+        assert.deepEqual(css.toColor('#101010'), { css: '#101010', rgba: 0x101010FF });
+        assert.deepEqual(css.toColor('#202020'), { css: '#202020', rgba: 0x202020FF });
+        assert.deepEqual(css.toColor('#303030'), { css: '#303030', rgba: 0x303030FF });
+        assert.deepEqual(css.toColor('#404040'), { css: '#404040', rgba: 0x404040FF });
+        assert.deepEqual(css.toColor('#505050'), { css: '#505050', rgba: 0x505050FF });
+        assert.deepEqual(css.toColor('#606060'), { css: '#606060', rgba: 0x606060FF });
+        assert.deepEqual(css.toColor('#707070'), { css: '#707070', rgba: 0x707070FF });
+        assert.deepEqual(css.toColor('#808080'), { css: '#808080', rgba: 0x808080FF });
+        assert.deepEqual(css.toColor('#909090'), { css: '#909090', rgba: 0x909090FF });
+        assert.deepEqual(css.toColor('#a0a0a0'), { css: '#a0a0a0', rgba: 0xa0a0a0FF });
+        assert.deepEqual(css.toColor('#b0b0b0'), { css: '#b0b0b0', rgba: 0xb0b0b0FF });
+        assert.deepEqual(css.toColor('#c0c0c0'), { css: '#c0c0c0', rgba: 0xc0c0c0FF });
+        assert.deepEqual(css.toColor('#d0d0d0'), { css: '#d0d0d0', rgba: 0xd0d0d0FF });
+        assert.deepEqual(css.toColor('#e0e0e0'), { css: '#e0e0e0', rgba: 0xe0e0e0FF });
+        assert.deepEqual(css.toColor('#f0f0f0'), { css: '#f0f0f0', rgba: 0xf0f0f0FF });
+        assert.deepEqual(css.toColor('#ffffff'), { css: '#ffffff', rgba: 0xffffffFF });
+      });
+    });
+  });
+
+  describe('rgb', () => {
+    describe('relativeLuminance', () => {
+      it('should calculate the relative luminance of the color', () => {
+        assert.equal(rgb.relativeLuminance(0x000000), 0);
+        assert.equal(rgb.relativeLuminance(0x101010).toFixed(4), '0.0052');
+        assert.equal(rgb.relativeLuminance(0x202020).toFixed(4), '0.0144');
+        assert.equal(rgb.relativeLuminance(0x303030).toFixed(4), '0.0296');
+        assert.equal(rgb.relativeLuminance(0x404040).toFixed(4), '0.0513');
+        assert.equal(rgb.relativeLuminance(0x505050).toFixed(4), '0.0802');
+        assert.equal(rgb.relativeLuminance(0x606060).toFixed(4), '0.1170');
+        assert.equal(rgb.relativeLuminance(0x707070).toFixed(4), '0.1620');
+        assert.equal(rgb.relativeLuminance(0x808080).toFixed(4), '0.2159');
+        assert.equal(rgb.relativeLuminance(0x909090).toFixed(4), '0.2789');
+        assert.equal(rgb.relativeLuminance(0xA0A0A0).toFixed(4), '0.3515');
+        assert.equal(rgb.relativeLuminance(0xB0B0B0).toFixed(4), '0.4342');
+        assert.equal(rgb.relativeLuminance(0xC0C0C0).toFixed(4), '0.5271');
+        assert.equal(rgb.relativeLuminance(0xD0D0D0).toFixed(4), '0.6308');
+        assert.equal(rgb.relativeLuminance(0xE0E0E0).toFixed(4), '0.7454');
+        assert.equal(rgb.relativeLuminance(0xF0F0F0).toFixed(4), '0.8714');
+        assert.equal(rgb.relativeLuminance(0xFFFFFF), 1);
+      });
+    });
+  });
+
+  describe('rgba', () => {
+    describe('ensureContrastRatio', () => {
+      it('should return undefined if the color already meets the contrast ratio (black bg)', () => {
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 1), undefined);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 2), undefined);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 3), undefined);
+      });
+      it('should return a color that meets the contrast ratio (black bg)', () => {
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 4), 0x707070ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 5), 0x7f7f7fff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 6), 0x8c8c8cff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 7), 0x989898ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 8), 0xa3a3a3ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 9), 0xadadadff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 10), 0xb6b6b6ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 11), 0xbebebeff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 12), 0xc5c5c5ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 13), 0xd1d1d1ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 14), 0xd6d6d6ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 15), 0xdbdbdbff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 16), 0xe3e3e3ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 17), 0xe9e9e9ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 18), 0xeeeeeeff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 19), 0xf4f4f4ff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 20), 0xfafafaff);
+        assert.equal(rgba.ensureContrastRatio(0x000000ff, 0x606060ff, 21), 0xffffffff);
+      });
+      it('should return undefined if the color already meets the contrast ratio (white bg)', () => {
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 1), undefined);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 2), undefined);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 3), undefined);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 4), undefined);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 5), undefined);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 6), undefined);
+      });
+      it('should return a color that meets the contrast ratio (white bg)', () => {
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 7), 0x565656ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 8), 0x4d4d4dff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 9), 0x454545ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 10), 0x3e3e3eff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 11), 0x373737ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 12), 0x313131ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 13), 0x313131ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 14), 0x272727ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 15), 0x232323ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 16), 0x1f1f1fff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 17), 0x1b1b1bff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 18), 0x151515ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 19), 0x101010ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 20), 0x080808ff);
+        assert.equal(rgba.ensureContrastRatio(0xffffffff, 0x606060ff, 21), 0x000000ff);
+      });
+    });
+
+    describe('toChannels', () => {
+      it('should convert an rgba number to an rgba array', () => {
+        assert.deepEqual(rgba.toChannels(0x00000000), [0x00, 0x00, 0x00, 0x00]);
+        assert.deepEqual(rgba.toChannels(0x10101010), [0x10, 0x10, 0x10, 0x10]);
+        assert.deepEqual(rgba.toChannels(0x20202020), [0x20, 0x20, 0x20, 0x20]);
+        assert.deepEqual(rgba.toChannels(0x30303030), [0x30, 0x30, 0x30, 0x30]);
+        assert.deepEqual(rgba.toChannels(0x40404040), [0x40, 0x40, 0x40, 0x40]);
+        assert.deepEqual(rgba.toChannels(0x50505050), [0x50, 0x50, 0x50, 0x50]);
+        assert.deepEqual(rgba.toChannels(0x60606060), [0x60, 0x60, 0x60, 0x60]);
+        assert.deepEqual(rgba.toChannels(0x70707070), [0x70, 0x70, 0x70, 0x70]);
+        assert.deepEqual(rgba.toChannels(0x80808080), [0x80, 0x80, 0x80, 0x80]);
+        assert.deepEqual(rgba.toChannels(0x90909090), [0x90, 0x90, 0x90, 0x90]);
+        assert.deepEqual(rgba.toChannels(0xa0a0a0a0), [0xa0, 0xa0, 0xa0, 0xa0]);
+        assert.deepEqual(rgba.toChannels(0xb0b0b0b0), [0xb0, 0xb0, 0xb0, 0xb0]);
+        assert.deepEqual(rgba.toChannels(0xc0c0c0c0), [0xc0, 0xc0, 0xc0, 0xc0]);
+        assert.deepEqual(rgba.toChannels(0xd0d0d0d0), [0xd0, 0xd0, 0xd0, 0xd0]);
+        assert.deepEqual(rgba.toChannels(0xe0e0e0e0), [0xe0, 0xe0, 0xe0, 0xe0]);
+        assert.deepEqual(rgba.toChannels(0xf0f0f0f0), [0xf0, 0xf0, 0xf0, 0xf0]);
+        assert.deepEqual(rgba.toChannels(0xffffffff), [0xff, 0xff, 0xff, 0xff]);
+      });
     });
   });
 
@@ -73,134 +266,6 @@ describe('Color', () => {
     });
   });
 
-  describe('toCss', () => {
-    it('should convert an rgb array to css hex string', () => {
-      assert.equal(toCss(0x00, 0x00, 0x00), '#000000');
-      assert.equal(toCss(0x10, 0x10, 0x10), '#101010');
-      assert.equal(toCss(0x20, 0x20, 0x20), '#202020');
-      assert.equal(toCss(0x30, 0x30, 0x30), '#303030');
-      assert.equal(toCss(0x40, 0x40, 0x40), '#404040');
-      assert.equal(toCss(0x50, 0x50, 0x50), '#505050');
-      assert.equal(toCss(0x60, 0x60, 0x60), '#606060');
-      assert.equal(toCss(0x70, 0x70, 0x70), '#707070');
-      assert.equal(toCss(0x80, 0x80, 0x80), '#808080');
-      assert.equal(toCss(0x90, 0x90, 0x90), '#909090');
-      assert.equal(toCss(0xa0, 0xa0, 0xa0), '#a0a0a0');
-      assert.equal(toCss(0xb0, 0xb0, 0xb0), '#b0b0b0');
-      assert.equal(toCss(0xc0, 0xc0, 0xc0), '#c0c0c0');
-      assert.equal(toCss(0xd0, 0xd0, 0xd0), '#d0d0d0');
-      assert.equal(toCss(0xe0, 0xe0, 0xe0), '#e0e0e0');
-      assert.equal(toCss(0xf0, 0xf0, 0xf0), '#f0f0f0');
-      assert.equal(toCss(0xff, 0xff, 0xff), '#ffffff');
-    });
-  });
-
-  describe('toRgba', () => {
-    it('should convert an rgb array to an rgba number', () => {
-      assert.equal(toRgba(0x00, 0x00, 0x00), 0x000000FF);
-      assert.equal(toRgba(0x10, 0x10, 0x10), 0x101010FF);
-      assert.equal(toRgba(0x20, 0x20, 0x20), 0x202020FF);
-      assert.equal(toRgba(0x30, 0x30, 0x30), 0x303030FF);
-      assert.equal(toRgba(0x40, 0x40, 0x40), 0x404040FF);
-      assert.equal(toRgba(0x50, 0x50, 0x50), 0x505050FF);
-      assert.equal(toRgba(0x60, 0x60, 0x60), 0x606060FF);
-      assert.equal(toRgba(0x70, 0x70, 0x70), 0x707070FF);
-      assert.equal(toRgba(0x80, 0x80, 0x80), 0x808080FF);
-      assert.equal(toRgba(0x90, 0x90, 0x90), 0x909090FF);
-      assert.equal(toRgba(0xa0, 0xa0, 0xa0), 0xa0a0a0FF);
-      assert.equal(toRgba(0xb0, 0xb0, 0xb0), 0xb0b0b0FF);
-      assert.equal(toRgba(0xc0, 0xc0, 0xc0), 0xc0c0c0FF);
-      assert.equal(toRgba(0xd0, 0xd0, 0xd0), 0xd0d0d0FF);
-      assert.equal(toRgba(0xe0, 0xe0, 0xe0), 0xe0e0e0FF);
-      assert.equal(toRgba(0xf0, 0xf0, 0xf0), 0xf0f0f0FF);
-      assert.equal(toRgba(0xff, 0xff, 0xff), 0xffffffFF);
-    });
-    it('should convert an rgba array to an rgba number', () => {
-      assert.equal(toRgba(0x00, 0x00, 0x00, 0x00), 0x00000000);
-      assert.equal(toRgba(0x10, 0x10, 0x10, 0x10), 0x10101010);
-      assert.equal(toRgba(0x20, 0x20, 0x20, 0x20), 0x20202020);
-      assert.equal(toRgba(0x30, 0x30, 0x30, 0x30), 0x30303030);
-      assert.equal(toRgba(0x40, 0x40, 0x40, 0x40), 0x40404040);
-      assert.equal(toRgba(0x50, 0x50, 0x50, 0x50), 0x50505050);
-      assert.equal(toRgba(0x60, 0x60, 0x60, 0x60), 0x60606060);
-      assert.equal(toRgba(0x70, 0x70, 0x70, 0x70), 0x70707070);
-      assert.equal(toRgba(0x80, 0x80, 0x80, 0x80), 0x80808080);
-      assert.equal(toRgba(0x90, 0x90, 0x90, 0x90), 0x90909090);
-      assert.equal(toRgba(0xa0, 0xa0, 0xa0, 0xa0), 0xa0a0a0a0);
-      assert.equal(toRgba(0xb0, 0xb0, 0xb0, 0xb0), 0xb0b0b0b0);
-      assert.equal(toRgba(0xc0, 0xc0, 0xc0, 0xc0), 0xc0c0c0c0);
-      assert.equal(toRgba(0xd0, 0xd0, 0xd0, 0xd0), 0xd0d0d0d0);
-      assert.equal(toRgba(0xe0, 0xe0, 0xe0, 0xe0), 0xe0e0e0e0);
-      assert.equal(toRgba(0xf0, 0xf0, 0xf0, 0xf0), 0xf0f0f0f0);
-      assert.equal(toRgba(0xff, 0xff, 0xff, 0xff), 0xffffffff);
-    });
-  });
-
-  describe('fromRgba', () => {
-    it('should convert an rgba number to an rgba array', () => {
-      assert.deepEqual(fromRgba(0x00000000), [0x00, 0x00, 0x00, 0x00]);
-      assert.deepEqual(fromRgba(0x10101010), [0x10, 0x10, 0x10, 0x10]);
-      assert.deepEqual(fromRgba(0x20202020), [0x20, 0x20, 0x20, 0x20]);
-      assert.deepEqual(fromRgba(0x30303030), [0x30, 0x30, 0x30, 0x30]);
-      assert.deepEqual(fromRgba(0x40404040), [0x40, 0x40, 0x40, 0x40]);
-      assert.deepEqual(fromRgba(0x50505050), [0x50, 0x50, 0x50, 0x50]);
-      assert.deepEqual(fromRgba(0x60606060), [0x60, 0x60, 0x60, 0x60]);
-      assert.deepEqual(fromRgba(0x70707070), [0x70, 0x70, 0x70, 0x70]);
-      assert.deepEqual(fromRgba(0x80808080), [0x80, 0x80, 0x80, 0x80]);
-      assert.deepEqual(fromRgba(0x90909090), [0x90, 0x90, 0x90, 0x90]);
-      assert.deepEqual(fromRgba(0xa0a0a0a0), [0xa0, 0xa0, 0xa0, 0xa0]);
-      assert.deepEqual(fromRgba(0xb0b0b0b0), [0xb0, 0xb0, 0xb0, 0xb0]);
-      assert.deepEqual(fromRgba(0xc0c0c0c0), [0xc0, 0xc0, 0xc0, 0xc0]);
-      assert.deepEqual(fromRgba(0xd0d0d0d0), [0xd0, 0xd0, 0xd0, 0xd0]);
-      assert.deepEqual(fromRgba(0xe0e0e0e0), [0xe0, 0xe0, 0xe0, 0xe0]);
-      assert.deepEqual(fromRgba(0xf0f0f0f0), [0xf0, 0xf0, 0xf0, 0xf0]);
-      assert.deepEqual(fromRgba(0xffffffff), [0xff, 0xff, 0xff, 0xff]);
-    });
-  });
-
-  describe('opaque', () => {
-    it('should make the color opaque', () => {
-      assert.deepEqual(opaque({ css: '#00000000', rgba: 0x00000000 }), { css: '#000000', rgba: 0x000000FF });
-      assert.deepEqual(opaque({ css: '#10101010', rgba: 0x10101010 }), { css: '#101010', rgba: 0x101010FF });
-      assert.deepEqual(opaque({ css: '#20202020', rgba: 0x20202020 }), { css: '#202020', rgba: 0x202020FF });
-      assert.deepEqual(opaque({ css: '#30303030', rgba: 0x30303030 }), { css: '#303030', rgba: 0x303030FF });
-      assert.deepEqual(opaque({ css: '#40404040', rgba: 0x40404040 }), { css: '#404040', rgba: 0x404040FF });
-      assert.deepEqual(opaque({ css: '#50505050', rgba: 0x50505050 }), { css: '#505050', rgba: 0x505050FF });
-      assert.deepEqual(opaque({ css: '#60606060', rgba: 0x60606060 }), { css: '#606060', rgba: 0x606060FF });
-      assert.deepEqual(opaque({ css: '#70707070', rgba: 0x70707070 }), { css: '#707070', rgba: 0x707070FF });
-      assert.deepEqual(opaque({ css: '#80808080', rgba: 0x80808080 }), { css: '#808080', rgba: 0x808080FF });
-      assert.deepEqual(opaque({ css: '#90909090', rgba: 0x90909090 }), { css: '#909090', rgba: 0x909090FF });
-      assert.deepEqual(opaque({ css: '#a0a0a0a0', rgba: 0xa0a0a0a0 }), { css: '#a0a0a0', rgba: 0xa0a0a0FF });
-      assert.deepEqual(opaque({ css: '#b0b0b0b0', rgba: 0xb0b0b0b0 }), { css: '#b0b0b0', rgba: 0xb0b0b0FF });
-      assert.deepEqual(opaque({ css: '#c0c0c0c0', rgba: 0xc0c0c0c0 }), { css: '#c0c0c0', rgba: 0xc0c0c0FF });
-      assert.deepEqual(opaque({ css: '#d0d0d0d0', rgba: 0xd0d0d0d0 }), { css: '#d0d0d0', rgba: 0xd0d0d0FF });
-      assert.deepEqual(opaque({ css: '#e0e0e0e0', rgba: 0xe0e0e0e0 }), { css: '#e0e0e0', rgba: 0xe0e0e0FF });
-      assert.deepEqual(opaque({ css: '#f0f0f0f0', rgba: 0xf0f0f0f0 }), { css: '#f0f0f0', rgba: 0xf0f0f0FF });
-      assert.deepEqual(opaque({ css: '#ffffffff', rgba: 0xffffffff }), { css: '#ffffff', rgba: 0xffffffFF });
-    });
-  });
-
-  describe('rgbRelativeLuminance', () => {
-    it('should calculate the relative luminance of the color', () => {
-      assert.equal(rgbRelativeLuminance(0x000000), 0);
-      assert.equal(rgbRelativeLuminance(0x101010).toFixed(4), '0.0052');
-      assert.equal(rgbRelativeLuminance(0x202020).toFixed(4), '0.0144');
-      assert.equal(rgbRelativeLuminance(0x303030).toFixed(4), '0.0296');
-      assert.equal(rgbRelativeLuminance(0x404040).toFixed(4), '0.0513');
-      assert.equal(rgbRelativeLuminance(0x505050).toFixed(4), '0.0802');
-      assert.equal(rgbRelativeLuminance(0x606060).toFixed(4), '0.1170');
-      assert.equal(rgbRelativeLuminance(0x707070).toFixed(4), '0.1620');
-      assert.equal(rgbRelativeLuminance(0x808080).toFixed(4), '0.2159');
-      assert.equal(rgbRelativeLuminance(0x909090).toFixed(4), '0.2789');
-      assert.equal(rgbRelativeLuminance(0xA0A0A0).toFixed(4), '0.3515');
-      assert.equal(rgbRelativeLuminance(0xB0B0B0).toFixed(4), '0.4342');
-      assert.equal(rgbRelativeLuminance(0xC0C0C0).toFixed(4), '0.5271');
-      assert.equal(rgbRelativeLuminance(0xD0D0D0).toFixed(4), '0.6308');
-      assert.equal(rgbRelativeLuminance(0xE0E0E0).toFixed(4), '0.7454');
-      assert.equal(rgbRelativeLuminance(0xF0F0F0).toFixed(4), '0.8714');
-      assert.equal(rgbRelativeLuminance(0xFFFFFF), 1);
-    });
-  });
   describe('contrastRatio', () => {
     it('should calculate the relative luminance of the color', () => {
       assert.equal(contrastRatio(0, 0), 1);
@@ -212,56 +277,4 @@ describe('Color', () => {
       assert.equal(contrastRatio(1, 0), 21);
     });
   });
-  describe('ensureContrastRatioRgba', () => {
-    it('should return undefined if the color already meets the contrast ratio (black bg)', () => {
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 1), undefined);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 2), undefined);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 3), undefined);
-    });
-    it('should return a color that meets the contrast ratio (black bg)', () => {
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 4), 0x707070ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 5), 0x7f7f7fff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 6), 0x8c8c8cff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 7), 0x989898ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 8), 0xa3a3a3ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 9), 0xadadadff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 10), 0xb6b6b6ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 11), 0xbebebeff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 12), 0xc5c5c5ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 13), 0xd1d1d1ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 14), 0xd6d6d6ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 15), 0xdbdbdbff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 16), 0xe3e3e3ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 17), 0xe9e9e9ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 18), 0xeeeeeeff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 19), 0xf4f4f4ff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 20), 0xfafafaff);
-      assert.equal(ensureContrastRatioRgba(0x000000ff, 0x606060ff, 21), 0xffffffff);
-    });
-    it('should return undefined if the color already meets the contrast ratio (white bg)', () => {
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 1), undefined);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 2), undefined);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 3), undefined);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 4), undefined);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 5), undefined);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 6), undefined);
-    });
-    it('should return a color that meets the contrast ratio (white bg)', () => {
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 7), 0x565656ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 8), 0x4d4d4dff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 9), 0x454545ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 10), 0x3e3e3eff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 11), 0x373737ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 12), 0x313131ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 13), 0x313131ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 14), 0x272727ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 15), 0x232323ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 16), 0x1f1f1fff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 17), 0x1b1b1bff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 18), 0x151515ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 19), 0x101010ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 20), 0x080808ff);
-      assert.equal(ensureContrastRatioRgba(0xffffffff, 0x606060ff, 21), 0x000000ff);
-    });
-  });
 });

src/browser/Color.ts

@@ -5,33 +5,186 @@
 
 import { IColor } from 'browser/Types';
 
-export function blend(bg: IColor, fg: IColor): IColor {
-  const a = (fg.rgba & 0xFF) / 255;
-  if (a === 1) {
-    return {
-      css: fg.css,
-      rgba: fg.rgba
-    };
+/**
+ * Helper functions where the source type is "channels" (individual color channels as numbers).
+ */
+export namespace channels {
+  export function toCss(r: number, g: number, b: number, a?: number): string {
+    if (a !== undefined) {
+      return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}${toPaddedHex(a)}`;
+    }
+    return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}`;
+  }
+
+  export function toRgba(r: number, g: number, b: number, a: number = 0xFF): number {
+    // >>> 0 forces an unsigned int
+    return (r << 24 | g << 16 | b << 8 | a) >>> 0;
   }
-  const fgR = (fg.rgba >> 24) & 0xFF;
-  const fgG = (fg.rgba >> 16) & 0xFF;
-  const fgB = (fg.rgba >> 8) & 0xFF;
-  const bgR = (bg.rgba >> 24) & 0xFF;
-  const bgG = (bg.rgba >> 16) & 0xFF;
-  const bgB = (bg.rgba >> 8) & 0xFF;
-  const r = bgR + Math.round((fgR - bgR) * a);
-  const g = bgG + Math.round((fgG - bgG) * a);
-  const b = bgB + Math.round((fgB - bgB) * a);
-  const css = toCss(r, g, b);
-  const rgba = toRgba(r, g, b);
-  return { css, rgba };
 }
 
-export function fromCss(css: string): IColor {
-  return {
-    css,
-    rgba: (parseInt(css.slice(1), 16) << 8 | 0xFF) >>> 0
-  };
+/**
+ * Helper functions where the source type is `IColor`.
+ */
+export namespace color {
+  export function blend(bg: IColor, fg: IColor): IColor {
+    const a = (fg.rgba & 0xFF) / 255;
+    if (a === 1) {
+      return {
+        css: fg.css,
+        rgba: fg.rgba
+      };
+    }
+    const fgR = (fg.rgba >> 24) & 0xFF;
+    const fgG = (fg.rgba >> 16) & 0xFF;
+    const fgB = (fg.rgba >> 8) & 0xFF;
+    const bgR = (bg.rgba >> 24) & 0xFF;
+    const bgG = (bg.rgba >> 16) & 0xFF;
+    const bgB = (bg.rgba >> 8) & 0xFF;
+    const r = bgR + Math.round((fgR - bgR) * a);
+    const g = bgG + Math.round((fgG - bgG) * a);
+    const b = bgB + Math.round((fgB - bgB) * a);
+    const css = channels.toCss(r, g, b);
+    const rgba = channels.toRgba(r, g, b);
+    return { css, rgba };
+  }
+
+  export function ensureContrastRatio(bg: IColor, fg: IColor, ratio: number): IColor | undefined {
+    const result = rgba.ensureContrastRatio(bg.rgba, fg.rgba, ratio);
+    if (!result) {
+      return undefined;
+    }
+    return rgba.toColor(
+      (result >> 24 & 0xFF),
+      (result >> 16 & 0xFF),
+      (result >> 8  & 0xFF)
+    );
+  }
+
+  export function opaque(color: IColor): IColor {
+    const rgbaColor = (color.rgba | 0xFF) >>> 0;
+    const [r, g, b] = rgba.toChannels(rgbaColor);
+    return {
+      css: channels.toCss(r, g, b),
+      rgba: rgbaColor
+    };
+  }
+}
+
+/**
+ * Helper functions where the source type is "css" (string: '#rgb', '#rgba', '#rrggbb', '#rrggbbaa').
+ */
+export namespace css {
+  export function toColor(css: string): IColor {
+    return {
+      css,
+      rgba: (parseInt(css.slice(1), 16) << 8 | 0xFF) >>> 0
+    };
+  }
+}
+
+/**
+ * Helper functions where the source type is "rgb" (number: 0xrrggbb).
+ */
+export namespace rgb {
+  /**
+   * Gets the relative luminance of an RGB color, this is useful in determining the contrast ratio
+   * between two colors.
+   * @param rgb The color to use.
+   * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
+   */
+  export function relativeLuminance(rgb: number): number {
+    return relativeLuminance2(
+      (rgb >> 16) & 0xFF,
+      (rgb >> 8 ) & 0xFF,
+      (rgb      ) & 0xFF);
+  }
+
+  /**
+   * Gets the relative luminance of an RGB color, this is useful in determining the contrast ratio
+   * between two colors.
+   * @param r The red channel (0x00 to 0xFF).
+   * @param g The green channel (0x00 to 0xFF).
+   * @param b The blue channel (0x00 to 0xFF).
+   * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
+   */
+  export function relativeLuminance2(r: number, g: number, b: number): number {
+    const rs = r / 255;
+    const gs = g / 255;
+    const bs = b / 255;
+    const rr = rs <= 0.03928 ? rs / 12.92 : Math.pow((rs + 0.055) / 1.055, 2.4);
+    const rg = gs <= 0.03928 ? gs / 12.92 : Math.pow((gs + 0.055) / 1.055, 2.4);
+    const rb = bs <= 0.03928 ? bs / 12.92 : Math.pow((bs + 0.055) / 1.055, 2.4);
+    return rr * 0.2126 + rg * 0.7152 + rb * 0.0722;
+  }
+}
+
+/**
+ * Helper functions where the source type is "rgba" (number: 0xrrggbbaa).
+ */
+export namespace rgba {
+  export function ensureContrastRatio(bgRgba: number, fgRgba: number, ratio: number): number | undefined {
+    const bgL = rgb.relativeLuminance(bgRgba >> 8);
+    const fgL = rgb.relativeLuminance(fgRgba >> 8);
+    const cr = contrastRatio(bgL, fgL);
+    if (cr < ratio) {
+      if (fgL < bgL) {
+        return reduceLuminance(bgRgba, fgRgba, ratio);
+      }
+      return increaseLuminance(bgRgba, fgRgba, ratio);
+    }
+    return undefined;
+  }
+
+  export function reduceLuminance(bgRgba: number, fgRgba: number, ratio: number): number {
+    // This is a naive but fast approach to reducing luminance as converting to
+    // HSL and back is expensive
+    const bgR = (bgRgba >> 24) & 0xFF;
+    const bgG = (bgRgba >> 16) & 0xFF;
+    const bgB = (bgRgba >>  8) & 0xFF;
+    let fgR = (fgRgba >> 24) & 0xFF;
+    let fgG = (fgRgba >> 16) & 0xFF;
+    let fgB = (fgRgba >>  8) & 0xFF;
+    let cr = contrastRatio(rgb.relativeLuminance2(fgR, fgB, fgG), rgb.relativeLuminance2(bgR, bgG, bgB));
+    while (cr < ratio && (fgR > 0 || fgG > 0 || fgB > 0)) {
+      // Reduce by 10% until the ratio is hit
+      fgR -= Math.max(0, Math.ceil(fgR * 0.1));
+      fgG -= Math.max(0, Math.ceil(fgG * 0.1));
+      fgB -= Math.max(0, Math.ceil(fgB * 0.1));
+      cr = contrastRatio(rgb.relativeLuminance2(fgR, fgB, fgG), rgb.relativeLuminance2(bgR, bgG, bgB));
+    }
+    return (fgR << 24 | fgG << 16 | fgB << 8 | 0xFF) >>> 0;
+  }
+
+  export function increaseLuminance(bgRgba: number, fgRgba: number, ratio: number): number {
+    // This is a naive but fast approach to increasing luminance as converting to
+    // HSL and back is expensive
+    const bgR = (bgRgba >> 24) & 0xFF;
+    const bgG = (bgRgba >> 16) & 0xFF;
+    const bgB = (bgRgba >>  8) & 0xFF;
+    let fgR = (fgRgba >> 24) & 0xFF;
+    let fgG = (fgRgba >> 16) & 0xFF;
+    let fgB = (fgRgba >>  8) & 0xFF;
+    let cr = contrastRatio(rgb.relativeLuminance2(fgR, fgB, fgG), rgb.relativeLuminance2(bgR, bgG, bgB));
+    while (cr < ratio && (fgR < 0xFF || fgG < 0xFF || fgB < 0xFF)) {
+      // Increase by 10% until the ratio is hit
+      fgR = Math.min(0xFF, fgR + Math.ceil((255 - fgR) * 0.1));
+      fgG = Math.min(0xFF, fgG + Math.ceil((255 - fgG) * 0.1));
+      fgB = Math.min(0xFF, fgB + Math.ceil((255 - fgB) * 0.1));
+      cr = contrastRatio(rgb.relativeLuminance2(fgR, fgB, fgG), rgb.relativeLuminance2(bgR, bgG, bgB));
+    }
+    return (fgR << 24 | fgG << 16 | fgB << 8 | 0xFF) >>> 0;
+  }
+
+  export function toChannels(value: number): [number, number, number, number] {
+    return [(value >> 24) & 0xFF, (value >> 16) & 0xFF, (value >> 8) & 0xFF, value & 0xFF];
+  }
+
+  export function toColor(r: number, g: number, b: number): IColor {
+    return {
+      css: channels.toCss(r, g, b),
+      rgba: channels.toRgba(r, g, b)
+    };
+  }
 }
 
 export function toPaddedHex(c: number): string {
@@ -39,62 +192,6 @@ export function toPaddedHex(c: number): string {
   return s.length < 2 ? '0' + s : s;
 }
 
-export function toCss(r: number, g: number, b: number, a?: number): string {
-  if (a !== undefined) {
-    return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}${toPaddedHex(a)}`;
-  }
-  return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}`;
-}
-
-export function toRgba(r: number, g: number, b: number, a: number = 0xFF): number {
-  // >>> 0 forces an unsigned int
-  return (r << 24 | g << 16 | b << 8 | a) >>> 0;
-}
-
-export function fromRgba(value: number): [number, number, number, number] {
-  return [(value >> 24) & 0xFF, (value >> 16) & 0xFF, (value >> 8) & 0xFF, value & 0xFF];
-}
-
-export function opaque(color: IColor): IColor {
-  const rgba = (color.rgba | 0xFF) >>> 0;
-  const [r, g, b] = fromRgba(rgba);
-  return {
-    css: toCss(r, g, b),
-    rgba
-  };
-}
-
-/**
- * Gets the relative luminance of an RGB color, this is useful in determining the contrast ratio
- * between two colors.
- * @param rgb The color to use.
- * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
- */
-export function rgbRelativeLuminance(rgb: number): number {
-  return rgbRelativeLuminance2(
-    (rgb >> 16) & 0xFF,
-    (rgb >> 8 ) & 0xFF,
-    (rgb      ) & 0xFF);
-}
-
-/**
- * Gets the relative luminance of an RGB color, this is useful in determining the contrast ratio
- * between two colors.
- * @param r The red channel (0x00 to 0xFF).
- * @param g The green channel (0x00 to 0xFF).
- * @param b The blue channel (0x00 to 0xFF).
- * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
- */
-export function rgbRelativeLuminance2(r: number, g: number, b: number): number {
-  const rs = r / 255;
-  const gs = g / 255;
-  const bs = b / 255;
-  const rr = rs <= 0.03928 ? rs / 12.92 : Math.pow((rs + 0.055) / 1.055, 2.4);
-  const rg = gs <= 0.03928 ? gs / 12.92 : Math.pow((gs + 0.055) / 1.055, 2.4);
-  const rb = bs <= 0.03928 ? bs / 12.92 : Math.pow((bs + 0.055) / 1.055, 2.4);
-  return rr * 0.2126 + rg * 0.7152 + rb * 0.0722;
-}
-
 /**
  * Gets the contrast ratio between two relative luminance values.
  * @param l1 The first relative luminance.
@@ -107,75 +204,3 @@ export function contrastRatio(l1: number, l2: number): number {
   }
   return (l1 + 0.05) / (l2 + 0.05);
 }
-
-export function rgbaToColor(r: number, g: number, b: number): IColor {
-  return {
-    css: toCss(r, g, b),
-    rgba: toRgba(r, g, b)
-  };
-}
-
-export function ensureContrastRatioRgba(bgRgba: number, fgRgba: number, ratio: number): number | undefined {
-  const bgL = rgbRelativeLuminance(bgRgba >> 8);
-  const fgL = rgbRelativeLuminance(fgRgba >> 8);
-  const cr = contrastRatio(bgL, fgL);
-  if (cr < ratio) {
-    if (fgL < bgL) {
-      return reduceLuminance(bgRgba, fgRgba, ratio);
-    }
-    return increaseLuminance(bgRgba, fgRgba, ratio);
-  }
-  return undefined;
-}
-
-export function ensureContrastRatio(bg: IColor, fg: IColor, ratio: number): IColor | undefined {
-  const result = ensureContrastRatioRgba(bg.rgba, fg.rgba, ratio);
-  if (!result) {
-    return undefined;
-  }
-  return rgbaToColor(
-    (result >> 24 & 0xFF),
-    (result >> 16 & 0xFF),
-    (result >> 8  & 0xFF)
-  );
-}
-
-export function reduceLuminance(bgRgba: number, fgRgba: number, ratio: number): number {
-  // This is a naive but fast approach to reducing luminance as converting to
-  // HSL and back is expensive
-  const bgR = (bgRgba >> 24) & 0xFF;
-  const bgG = (bgRgba >> 16) & 0xFF;
-  const bgB = (bgRgba >>  8) & 0xFF;
-  let fgR = (fgRgba >> 24) & 0xFF;
-  let fgG = (fgRgba >> 16) & 0xFF;
-  let fgB = (fgRgba >>  8) & 0xFF;
-  let cr = contrastRatio(rgbRelativeLuminance2(fgR, fgB, fgG), rgbRelativeLuminance2(bgR, bgG, bgB));
-  while (cr < ratio && (fgR > 0 || fgG > 0 || fgB > 0)) {
-    // Reduce by 10% until the ratio is hit
-    fgR -= Math.max(0, Math.ceil(fgR * 0.1));
-    fgG -= Math.max(0, Math.ceil(fgG * 0.1));
-    fgB -= Math.max(0, Math.ceil(fgB * 0.1));
-    cr = contrastRatio(rgbRelativeLuminance2(fgR, fgB, fgG), rgbRelativeLuminance2(bgR, bgG, bgB));
-  }
-  return (fgR << 24 | fgG << 16 | fgB << 8 | 0xFF) >>> 0;
-}
-
-export function increaseLuminance(bgRgba: number, fgRgba: number, ratio: number): number {
-  // This is a naive but fast approach to increasing luminance as converting to
-  // HSL and back is expensive
-  const bgR = (bgRgba >> 24) & 0xFF;
-  const bgG = (bgRgba >> 16) & 0xFF;
-  const bgB = (bgRgba >>  8) & 0xFF;
-  let fgR = (fgRgba >> 24) & 0xFF;
-  let fgG = (fgRgba >> 16) & 0xFF;
-  let fgB = (fgRgba >>  8) & 0xFF;
-  let cr = contrastRatio(rgbRelativeLuminance2(fgR, fgB, fgG), rgbRelativeLuminance2(bgR, bgG, bgB));
-  while (cr < ratio && (fgR < 0xFF || fgG < 0xFF || fgB < 0xFF)) {
-    // Increase by 10% until the ratio is hit
-    fgR = Math.min(0xFF, fgR + Math.ceil((255 - fgR) * 0.1));
-    fgG = Math.min(0xFF, fgG + Math.ceil((255 - fgG) * 0.1));
-    fgB = Math.min(0xFF, fgB + Math.ceil((255 - fgB) * 0.1));
-    cr = contrastRatio(rgbRelativeLuminance2(fgR, fgB, fgG), rgbRelativeLuminance2(bgR, bgG, bgB));
-  }
-  return (fgR << 24 | fgG << 16 | fgB << 8 | 0xFF) >>> 0;
-}

src/browser/ColorManager.test.ts

@@ -11,7 +11,7 @@ describe('ColorManager', () => {
   let cm: ColorManager;
   let dom: jsdom.JSDOM;
   let document: Document;
-  let window: Window;
+  let window: jsdom.DOMWindow;
 
   beforeEach(() => {
     dom = new jsdom.JSDOM('');

src/browser/ColorManager.ts

@@ -5,13 +5,13 @@
 
 import { IColorManager, IColor, IColorSet, IColorContrastCache } from 'browser/Types';
 import { ITheme } from 'common/services/Services';
-import { fromCss, toCss, blend, toRgba, toPaddedHex } from 'browser/Color';
+import { channels, color, css } from 'browser/Color';
 import { ColorContrastCache } from 'browser/ColorContrastCache';
 
-const DEFAULT_FOREGROUND = fromCss('#ffffff');
-const DEFAULT_BACKGROUND = fromCss('#000000');
-const DEFAULT_CURSOR = fromCss('#ffffff');
-const DEFAULT_CURSOR_ACCENT = fromCss('#000000');
+const DEFAULT_FOREGROUND = css.toColor('#ffffff');
+const DEFAULT_BACKGROUND = css.toColor('#000000');
+const DEFAULT_CURSOR = css.toColor('#ffffff');
+const DEFAULT_CURSOR_ACCENT = css.toColor('#000000');
 const DEFAULT_SELECTION = {
   css: 'rgba(255, 255, 255, 0.3)',
   rgba: 0xFFFFFF4D
@@ -22,23 +22,23 @@ const DEFAULT_SELECTION = {
 export const DEFAULT_ANSI_COLORS = (() => {
   const colors = [
     // dark:
-    fromCss('#2e3436'),
-    fromCss('#cc0000'),
-    fromCss('#4e9a06'),
-    fromCss('#c4a000'),
-    fromCss('#3465a4'),
-    fromCss('#75507b'),
-    fromCss('#06989a'),
-    fromCss('#d3d7cf'),
+    css.toColor('#2e3436'),
+    css.toColor('#cc0000'),
+    css.toColor('#4e9a06'),
+    css.toColor('#c4a000'),
+    css.toColor('#3465a4'),
+    css.toColor('#75507b'),
+    css.toColor('#06989a'),
+    css.toColor('#d3d7cf'),
     // bright:
-    fromCss('#555753'),
-    fromCss('#ef2929'),
-    fromCss('#8ae234'),
-    fromCss('#fce94f'),
-    fromCss('#729fcf'),
-    fromCss('#ad7fa8'),
-    fromCss('#34e2e2'),
-    fromCss('#eeeeec')
+    css.toColor('#555753'),
+    css.toColor('#ef2929'),
+    css.toColor('#8ae234'),
+    css.toColor('#fce94f'),
+    css.toColor('#729fcf'),
+    css.toColor('#ad7fa8'),
+    css.toColor('#34e2e2'),
+    css.toColor('#eeeeec')
   ];
 
   // Fill in the remaining 240 ANSI colors.
@@ -49,8 +49,8 @@ export const DEFAULT_ANSI_COLORS = (() => {
     const g = v[(i / 6) % 6 | 0];
     const b = v[i % 6];
     colors.push({
-      css: toCss(r, g, b),
-      rgba: toRgba(r, g, b)
+      css: channels.toCss(r, g, b),
+      rgba: channels.toRgba(r, g, b)
     });
   }
 
@@ -58,8 +58,8 @@ export const DEFAULT_ANSI_COLORS = (() => {
   for (let i = 0; i < 24; i++) {
     const c = 8 + i * 10;
     colors.push({
-      css: toCss(c, c, c),
-      rgba: toRgba(c, c, c)
+      css: channels.toCss(c, c, c),
+      rgba: channels.toRgba(c, c, c)
     });
   }
 
@@ -93,7 +93,7 @@ export class ColorManager implements IColorManager {
       cursor: DEFAULT_CURSOR,
       cursorAccent: DEFAULT_CURSOR_ACCENT,
       selection: DEFAULT_SELECTION,
-      selectionOpaque: blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      selectionOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
       ansi: DEFAULT_ANSI_COLORS.slice(),
       contrastCache: this._contrastCache
     };
@@ -116,7 +116,7 @@ export class ColorManager implements IColorManager {
     this.colors.cursor = this._parseColor(theme.cursor, DEFAULT_CURSOR, true);
     this.colors.cursorAccent = this._parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT, true);
     this.colors.selection = this._parseColor(theme.selection, DEFAULT_SELECTION, true);
-    this.colors.selectionOpaque = blend(this.colors.background, this.colors.selection);
+    this.colors.selectionOpaque = color.blend(this.colors.background, this.colors.selection);
     this.colors.ansi[0] = this._parseColor(theme.black, DEFAULT_ANSI_COLORS[0]);
     this.colors.ansi[1] = this._parseColor(theme.red, DEFAULT_ANSI_COLORS[1]);
     this.colors.ansi[2] = this._parseColor(theme.green, DEFAULT_ANSI_COLORS[2]);
@@ -184,35 +184,23 @@ export class ColorManager implements IColorManager {
         );
         return fallback;
       }
-      let r: number;
-      let g: number;
-      let b: number;
-      let a: number;
-      let rgba: number;
-      if (css.length === 5) {
-        const num = parseInt(css.substr(1), 16);
-        r = ((num >> 12) & 0xF) * 16;
-        g = ((num >> 8) & 0xF) * 16;
-        b = ((num >> 4) & 0xF) * 16;
-        a = (num & 0xF) * 16;
-        rgba = toRgba(r, g, b, a);
-      } else {
-        rgba = parseInt(css.substr(1), 16);
-        r = (rgba >> 24) & 0xFF;
-        g = (rgba >> 16) & 0xFF;
-        b = (rgba >>  8) & 0xFF;
-        a = (rgba      ) & 0xFF;
-      }
 
+      // https://html.spec.whatwg.org/multipage/canvas.html#serialisation-of-a-color
+      // the color value has alpha less than 1.0, and the string is the color value in the CSS rgba()
+      const [r, g, b, a] = this._ctx.fillStyle.substring(5, this._ctx.fillStyle.length - 1).split(',').map(component => Number(component));
+      const alpha = Math.round(a * 255);
+      const rgba: number = channels.toRgba(r, g, b, alpha);
       return {
         rgba,
-        css: toCss(r, g, b, a)
+        css
       };
     }
 
     return {
-      css,
-      rgba: toRgba(data[0], data[1], data[2], data[3])
+      // https://html.spec.whatwg.org/multipage/canvas.html#serialisation-of-a-color
+      // if it has alpha equal to 1.0, then the string is a lowercase six-digit hex value, prefixed with a "#" character
+      css: this._ctx.fillStyle,
+      rgba: channels.toRgba(data[0], data[1], data[2], data[3])
     };
   }
 }

src/browser/Lifecycle.test.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2020 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { addDisposableDomListener } from './Lifecycle';
+import jsdom = require('jsdom');
+
+describe('addDisposableDomListener', () => {
+  const dom = new jsdom.JSDOM();
+  const document = dom.window.document;
+
+  function createEvent(type: string): Event {
+    const event = document.createEvent('Event');
+    event.initEvent(type);
+    return event;
+  }
+
+  it('dispose', () => {
+    let calledTimes = 0;
+    const div = document.createElement('div');
+    const disposable = addDisposableDomListener(div, 'test', () => { calledTimes++; });
+
+    assert.equal(calledTimes, 0);
+
+    div.dispatchEvent(createEvent('test'));
+    assert.equal(calledTimes, 1);
+
+    disposable.dispose();
+
+    div.dispatchEvent(createEvent('test'));
+    assert.equal(calledTimes, 1);
+
+    disposable.dispose(); // double disposing
+
+    div.dispatchEvent(createEvent('test'));
+    assert.equal(calledTimes, 1);
+  });
+});

src/browser/Lifecycle.ts

@@ -17,12 +17,13 @@ export function addDisposableDomListener(
   useCapture?: boolean
 ): IDisposable {
   node.addEventListener(type, handler, useCapture);
+  let disposed = false;
   return {
     dispose: () => {
-      if (!handler) {
-        // Already disposed
+      if (disposed) {
         return;
       }
+      disposed = true;
       node.removeEventListener(type, handler, useCapture);
     }
   };

src/browser/Linkifier.test.ts

@@ -9,12 +9,13 @@ import { IBufferLine } from 'common/Types';
 import { Linkifier } from 'browser/Linkifier';
 import { BufferLine } from 'common/buffer/BufferLine';
 import { CellData } from 'common/buffer/CellData';
-import { MockLogService, MockBufferService } from 'common/TestUtils.test';
+import { MockLogService, MockBufferService, MockOptionsService } from 'common/TestUtils.test';
 import { IBufferService } from 'common/services/Services';
+import { UnicodeService } from 'common/services/UnicodeService';
 
 class TestLinkifier extends Linkifier {
   constructor(bufferService: IBufferService) {
-    super(bufferService, new MockLogService());
+    super(bufferService, new MockLogService(), new MockOptionsService(), new UnicodeService());
     Linkifier._timeBeforeLatency = 0;
   }
 

src/browser/Linkifier.ts

@@ -5,9 +5,8 @@
 
 import { ILinkifierEvent, ILinkMatcher, LinkMatcherHandler, ILinkMatcherOptions, ILinkifier, IMouseZoneManager, IMouseZone, IRegisteredLinkMatcher } from 'browser/Types';
 import { IBufferStringIteratorResult } from 'common/buffer/Types';
-import { getStringCellWidth } from 'common/CharWidth';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
-import { ILogService, IBufferService } from 'common/services/Services';
+import { ILogService, IBufferService, IOptionsService, IUnicodeService } from 'common/services/Services';
 
 /**
  * Limit of the unwrapping line expansion (overscan) at the top and bottom
@@ -45,7 +44,9 @@ export class Linkifier implements ILinkifier {
 
   constructor(
     protected readonly _bufferService: IBufferService,
-    private readonly _logService: ILogService
+    private readonly _logService: ILogService,
+    private readonly _optionsService: IOptionsService,
+    private readonly _unicodeService: IUnicodeService
   ) {
     this._rowsToLinkify = {
       start: undefined,
@@ -277,8 +278,8 @@ export class Linkifier implements ILinkifier {
     if (!this._mouseZoneManager || !this._element) {
       return;
     }
-
-    const width = getStringCellWidth(uri);
+    // FIXME: get cell length from buffer to avoid mismatch after Unicode version change
+    const width = this._unicodeService.getStringCellWidth(uri);
     const x1 = x % this._bufferService.cols;
     const y1 = y + Math.floor(x / this._bufferService.cols);
     let x2 = (x1 + width) % this._bufferService.cols;
@@ -297,7 +298,13 @@ export class Linkifier implements ILinkifier {
         if (matcher.handler) {
           return matcher.handler(e, uri);
         }
-        window.open(uri, '_blank');
+        const newWindow = window.open();
+        if (newWindow) {
+          newWindow.opener = null;
+          newWindow.location.href = uri;
+        } else {
+          console.warn('Opening link blocked as opener could not be cleared');
+        }
       },
       () => {
         this._onLinkHover.fire(this._createLinkHoverEvent(x1, y1, x2, y2, fg));

src/browser/Linkifier2.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2020 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { IBufferService } from 'common/services/Services';
+import { Linkifier2 } from 'browser/Linkifier2';
+import { MockBufferService } from 'common/TestUtils.test';
+import { ILink } from 'browser/Types';
+
+class TestLinkifier2 extends Linkifier2 {
+  constructor(bufferService: IBufferService) {
+    super(bufferService);
+  }
+
+  public linkHover(element: HTMLElement, link: ILink, event: MouseEvent): void {
+    this._linkHover(element, link, event);
+  }
+
+  public linkLeave(element: HTMLElement, link: ILink, event: MouseEvent): void {
+    this._linkLeave(element, link, event);
+  }
+}
+
+describe('Linkifier2', () => {
+  let bufferService: IBufferService;
+  let linkifier: TestLinkifier2;
+
+  beforeEach(() => {
+    bufferService = new MockBufferService(100, 10);
+    linkifier = new TestLinkifier2(bufferService);
+  });
+
+  const link: ILink = {
+    text: 'foo',
+    range: {
+      start: {
+        x: 5,
+        y: 1
+      },
+      end: {
+        x: 7,
+        y: 1
+      }
+    },
+    activate: () => { }
+  };
+
+  it('onLinkHover event range is correct', done => {
+    linkifier.onLinkHover(e => {
+      assert.equal(link.range.start.x - 1, e.x1);
+      assert.equal(link.range.start.y - 1, e.y1);
+      assert.equal(link.range.end.x, e.x2);
+      assert.equal(link.range.end.y - 1, e.y2);
+
+      done();
+    });
+
+    linkifier.linkHover({ classList: { add: () => { } } } as any, link, {} as any);
+  });
+
+  it('onLinkLeave event range is correct', done => {
+    linkifier.onLinkLeave(e => {
+      assert.equal(link.range.start.x - 1, e.x1);
+      assert.equal(link.range.start.y - 1, e.y1);
+      assert.equal(link.range.end.x, e.x2);
+      assert.equal(link.range.end.y - 1, e.y2);
+
+      done();
+    });
+
+    linkifier.linkLeave({ classList: { add: () => { } } } as any, link, {} as any);
+  });
+
+});

src/browser/Linkifier2.ts

@@ -0,0 +1,243 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ILinkifier2, ILinkProvider, IBufferCellPosition, ILink, ILinkifierEvent } from './Types';
+import { IDisposable } from 'common/Types';
+import { IMouseService, IRenderService } from './services/Services';
+import { IBufferService } from 'common/services/Services';
+import { EventEmitter, IEvent } from 'common/EventEmitter';
+
+export class Linkifier2 implements ILinkifier2 {
+  private _element: HTMLElement | undefined;
+  private _mouseService: IMouseService | undefined;
+  private _renderService: IRenderService | undefined;
+  private _linkProviders: ILinkProvider[] = [];
+  private _currentLink: ILink | undefined;
+  private _lastMouseEvent: MouseEvent | undefined;
+  private _linkCacheDisposables: IDisposable[] = [];
+  private _lastBufferCell: IBufferCellPosition | undefined;
+
+  private _onLinkHover = new EventEmitter<ILinkifierEvent>();
+  public get onLinkHover(): IEvent<ILinkifierEvent> { return this._onLinkHover.event; }
+  private _onLinkLeave = new EventEmitter<ILinkifierEvent>();
+  public get onLinkLeave(): IEvent<ILinkifierEvent> { return this._onLinkLeave.event; }
+
+  constructor(
+    private readonly _bufferService: IBufferService
+  ) {
+
+  }
+
+  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    this._linkProviders.push(linkProvider);
+    return {
+      dispose: () => {
+        // Remove the link provider from the list
+        const providerIndex = this._linkProviders.indexOf(linkProvider);
+
+        if (providerIndex !== -1) {
+          this._linkProviders.splice(providerIndex, 1);
+        }
+      }
+    };
+  }
+
+  public attachToDom(element: HTMLElement, mouseService: IMouseService, renderService: IRenderService): void {
+    this._element = element;
+    this._mouseService = mouseService;
+    this._renderService = renderService;
+
+    this._element.addEventListener('mousemove', this._onMouseMove.bind(this));
+    this._element.addEventListener('click', this._onMouseDown.bind(this));
+  }
+
+  private _onMouseMove(event: MouseEvent): void {
+    this._lastMouseEvent = event;
+
+    if (!this._element || !this._mouseService) {
+      return;
+    }
+
+    const position = this._positionFromMouseEvent(event, this._element, this._mouseService);
+
+    if (!position) {
+      return;
+    }
+
+    if (!this._lastBufferCell || (position.x !== this._lastBufferCell.x || position.y !== this._lastBufferCell.y)) {
+      this._onHover(position);
+      this._lastBufferCell = position;
+    }
+  }
+
+  private _onHover(position: IBufferCellPosition): void {
+    if (this._currentLink) {
+      // Check the if the link is in the mouse position
+      const isInPosition = this._linkAtPosition(this._currentLink, position);
+
+      // Check if we need to clear the link
+      if (!isInPosition) {
+        this._clearCurrentLink();
+        this._askForLink(position);
+      }
+    } else {
+      this._askForLink(position);
+    }
+  }
+
+  private _askForLink(position: IBufferCellPosition): void {
+    const providerReplies: Map<Number, ILink | undefined> = new Map();
+    let linkProvided = false;
+
+    // There is no link cached, so ask for one
+    this._linkProviders.forEach((linkProvider, i) => {
+      linkProvider.provideLink(position, (link: ILink | undefined) => {
+        providerReplies.set(i, link);
+
+        // Check if every provider before this one has come back undefined
+        let hasLinkBefore = false;
+        for (let j = 0; j < i; j++) {
+          if (!providerReplies.has(j) || providerReplies.get(j)) {
+            hasLinkBefore = true;
+          }
+        }
+
+        // If all providers with higher priority came back undefined, then this link should be used
+        if (!hasLinkBefore && link) {
+          linkProvided = true;
+          this._handleNewLink(link);
+        }
+
+        // Check if all the providers have responded
+        if (providerReplies.size === this._linkProviders.length && !linkProvided) {
+          // Respect the order of the link providers
+          for (let j = 0; j < providerReplies.size; j++) {
+            const currentLink = providerReplies.get(j);
+            if (currentLink) {
+              this._handleNewLink(currentLink);
+              break;
+            }
+          }
+        }
+      });
+    });
+  }
+
+  private _onMouseDown(event: MouseEvent): void {
+    if (!this._element || !this._mouseService || !this._currentLink) {
+      return;
+    }
+
+    const position = this._positionFromMouseEvent(event, this._element, this._mouseService);
+
+    if (!position) {
+      return;
+    }
+
+    if (this._linkAtPosition(this._currentLink, position)) {
+      this._currentLink.activate(event, this._currentLink.text);
+    }
+  }
+
+  private _clearCurrentLink(startRow?: number, endRow?: number): void {
+    if (!this._element || !this._currentLink || !this._lastMouseEvent) {
+      return;
+    }
+
+    // If we have a start and end row, check that the link is within it
+    if (!startRow || !endRow || (this._currentLink.range.start.y >= startRow && this._currentLink.range.end.y <= endRow)) {
+      this._linkLeave(this._element, this._currentLink, this._lastMouseEvent);
+      this._currentLink = undefined;
+      this._linkCacheDisposables.forEach(l => l.dispose());
+      this._linkCacheDisposables = [];
+    }
+  }
+
+  private _handleNewLink(link: ILink): void {
+    if (!this._element || !this._lastMouseEvent || !this._mouseService) {
+      return;
+    }
+
+    const position = this._positionFromMouseEvent(this._lastMouseEvent, this._element, this._mouseService);
+
+    if (!position) {
+      return;
+    }
+
+    // Trigger hover if the we have a link at the position
+    if (this._linkAtPosition(link, position)) {
+      this._currentLink = link;
+      this._linkHover(this._element, link, this._lastMouseEvent);
+
+      // Add listener for rerendering
+      if (this._renderService) {
+        this._linkCacheDisposables.push(this._renderService.onRender(e => {
+          this._clearCurrentLink(e.start + 1 + this._bufferService.buffer.ydisp, e.end + 1 + this._bufferService.buffer.ydisp);
+        }));
+      }
+    }
+  }
+
+  protected _linkHover(element: HTMLElement, link: ILink, event: MouseEvent): void {
+    const range = link.range;
+    const scrollOffset = this._bufferService.buffer.ydisp;
+
+    this._onLinkHover.fire(this._createLinkHoverEvent(range.start.x - 1, range.start.y - scrollOffset - 1, range.end.x, range.end.y - scrollOffset - 1, undefined));
+    element.classList.add('xterm-cursor-pointer');
+
+    if (link.hover) {
+      link.hover(event, link.text);
+    }
+  }
+
+  protected _linkLeave(element: HTMLElement, link: ILink, event: MouseEvent): void {
+    const range = link.range;
+    const scrollOffset = this._bufferService.buffer.ydisp;
+
+    this._onLinkLeave.fire(this._createLinkHoverEvent(range.start.x - 1, range.start.y - scrollOffset - 1, range.end.x, range.end.y - scrollOffset - 1, undefined));
+    element.classList.remove('xterm-cursor-pointer');
+
+    if (link.leave) {
+      link.leave(event, link.text);
+    }
+  }
+
+  /**
+   * Check if the buffer position is within the link
+   * @param link
+   * @param position
+   */
+  private _linkAtPosition(link: ILink, position: IBufferCellPosition): boolean {
+    const sameLine = link.range.start.y === link.range.end.y;
+    const wrappedFromLeft = link.range.start.y < position.y;
+    const wrappedToRight = link.range.end.y > position.y;
+
+    // If the start and end have the same y, then the position must be between start and end x
+    // If not, then handle each case seperately, depending on which way it wraps
+    return ((sameLine && link.range.start.x <= position.x && link.range.end.x >= position.x) ||
+      (wrappedFromLeft && link.range.end.x >= position.x) ||
+      (wrappedToRight && link.range.start.x <= position.x) ||
+      (wrappedFromLeft && wrappedToRight)) &&
+      link.range.start.y <= position.y &&
+      link.range.end.y >= position.y;
+  }
+
+  /**
+   * Get the buffer position from a mouse event
+   * @param event
+   */
+  private _positionFromMouseEvent(event: MouseEvent, element: HTMLElement, mouseService: IMouseService): IBufferCellPosition | undefined {
+    const coords = mouseService.getCoords(event, element, this._bufferService.cols, this._bufferService.rows);
+    if (!coords) {
+      return;
+    }
+
+    return { x: coords[0], y: coords[1] + this._bufferService.buffer.ydisp };
+  }
+
+  private _createLinkHoverEvent(x1: number, y1: number, x2: number, y2: number, fg: number | undefined): ILinkifierEvent {
+    return { x1, y1, x2, y2, cols: this._bufferService.cols, fg };
+  }
+}

src/browser/LocalizableStrings.ts

@@ -3,5 +3,8 @@
  * @license MIT
  */
 
+// eslint-disable-next-line prefer-const
 export let promptLabel = 'Terminal input';
+
+// eslint-disable-next-line prefer-const
 export let tooMuchOutput = 'Too much output to announce, navigate to rows manually to read';

src/browser/Types.d.ts

@@ -5,6 +5,7 @@
 
 import { IEvent } from 'common/EventEmitter';
 import { IDisposable } from 'common/Types';
+import { IMouseService, IRenderService } from './services/Services';
 
 export interface IColorManager {
   colors: IColorSet;
@@ -105,6 +106,14 @@ export interface ILinkifier {
   deregisterLinkMatcher(matcherId: number): boolean;
 }
 
+export interface ILinkifier2 {
+  onLinkHover: IEvent<ILinkifierEvent>;
+  onLinkLeave: IEvent<ILinkifierEvent>;
+
+  attachToDom(element: HTMLElement, mouseService: IMouseService, renderService: IRenderService): void;
+  registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
+}
+
 export interface ILinkMatcherOptions {
   /**
    * The index of the link from the regex.match(text) call. This defaults to 0
@@ -155,3 +164,25 @@ export interface IMouseZone {
   leaveCallback: () => any | undefined;
   willLinkActivate: (e: MouseEvent) => boolean;
 }
+
+interface ILinkProvider {
+  provideLink(position: IBufferCellPosition, callback: (link: ILink | undefined) => void): void;
+}
+
+interface ILink {
+  range: IBufferRange;
+  text: string;
+  activate(event: MouseEvent, text: string): void;
+  hover?(event: MouseEvent, text: string): void;
+  leave?(event: MouseEvent, text: string): void;
+}
+
+interface IBufferRange {
+  start: IBufferCellPosition;
+  end: IBufferCellPosition;
+}
+
+interface IBufferCellPosition {
+  x: number;
+  y: number;
+}

src/browser/Viewport.ts

@@ -167,7 +167,7 @@ export class Viewport extends Disposable implements IViewport {
   private _bubbleScroll(ev: Event, amount: number): boolean {
     const scrollPosFromTop = this._viewportElement.scrollTop + this._lastRecordedViewportHeight;
     if ((amount < 0 && this._viewportElement.scrollTop !== 0) ||
-        (amount > 0 &&  scrollPosFromTop < this._lastRecordedBufferHeight)) {
+      (amount > 0 && scrollPosFromTop < this._lastRecordedBufferHeight)) {
       if (ev.cancelable) {
         ev.preventDefault();
       }
@@ -235,8 +235,8 @@ export class Viewport extends Disposable implements IViewport {
     const modifier = this._optionsService.options.fastScrollModifier;
     // Multiply the scroll speed when the modifier is down
     if ((modifier === 'alt' && ev.altKey) ||
-        (modifier === 'ctrl' && ev.ctrlKey) ||
-        (modifier === 'shift' && ev.shiftKey)) {
+      (modifier === 'ctrl' && ev.ctrlKey) ||
+      (modifier === 'shift' && ev.shiftKey)) {
       return amount * this._optionsService.options.fastScrollSensitivity * this._optionsService.options.scrollSensitivity;
     }
 

src/browser/input/CompositionHelper.ts

@@ -87,7 +87,8 @@ export class CompositionHelper {
       if (ev.keyCode === 229) {
         // Continue composing if the keyCode is the "composition character"
         return false;
-      } else if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
+      }
+      if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
         // Continue composing if the keyCode is a modifier key
         return false;
       }

src/browser/input/MoveToCell.test.ts

@@ -19,19 +19,40 @@ describe('MoveToCell', () => {
 
   describe('normal buffer', () => {
     it('should use the right directional escape sequences', () => {
+      assert.equal(moveToCellSequence(1, 3, bufferService, false), '\x1b[D\x1b[D');
       assert.equal(moveToCellSequence(2, 3, bufferService, false), '\x1b[D');
       assert.equal(moveToCellSequence(4, 3, bufferService, false), '\x1b[C');
+      assert.equal(moveToCellSequence(5, 3, bufferService, false), '\x1b[C\x1b[C');
     });
-    it('should ignore the Y value', () => {
-      assert.equal(moveToCellSequence(1, 1, bufferService, false), '\x1b[D\x1b[D');
-      assert.equal(moveToCellSequence(1, 2, bufferService, false), '\x1b[D\x1b[D');
-      assert.equal(moveToCellSequence(1, 3, bufferService, false), '\x1b[D\x1b[D');
-      assert.equal(moveToCellSequence(1, 4, bufferService, false), '\x1b[D\x1b[D');
-      assert.equal(moveToCellSequence(1, 5, bufferService, false), '\x1b[D\x1b[D');
+    it('should wrap around entire row instead of doing up and down when the Y value differs', () => {
+      assert.equal(moveToCellSequence(1, 1, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(2, 1, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(3, 1, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(4, 1, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(5, 1, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(1, 2, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(2, 2, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(3, 2, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(4, 2, bufferService, false), '\x1b[D\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(5, 2, bufferService, false), '\x1b[D\x1b[D\x1b[D');
+      assert.equal(moveToCellSequence(1, 4, bufferService, false), '\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(2, 4, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(3, 4, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(4, 4, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(5, 4, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(1, 5, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(2, 5, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(3, 5, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(4, 5, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C');
+      assert.equal(moveToCellSequence(5, 5, bufferService, false), '\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C\x1b[C');
     });
     it('should use the correct character for application cursor', () => {
-      assert.equal(moveToCellSequence(2, 1, bufferService, false), '\x1b[D');
-      assert.equal(moveToCellSequence(2, 1, bufferService, true), '\x1bOD');
+      assert.equal(moveToCellSequence(3, 1, bufferService, true), '\x1bOD\x1bOD\x1bOD\x1bOD\x1bOD\x1bOD\x1bOD\x1bOD\x1bOD\x1bOD');
+      assert.equal(moveToCellSequence(3, 2, bufferService, true), '\x1bOD\x1bOD\x1bOD\x1bOD\x1bOD');
+      assert.equal(moveToCellSequence(2, 3, bufferService, true), '\x1bOD');
+      assert.equal(moveToCellSequence(4, 3, bufferService, true), '\x1bOC');
+      assert.equal(moveToCellSequence(3, 4, bufferService, true), '\x1bOC\x1bOC\x1bOC\x1bOC\x1bOC');
+      assert.equal(moveToCellSequence(3, 5, bufferService, true), '\x1bOC\x1bOC\x1bOC\x1bOC\x1bOC\x1bOC\x1bOC\x1bOC\x1bOC\x1bOC');
     });
   });
 

src/browser/input/MoveToCell.ts

@@ -30,7 +30,31 @@ export function moveToCellSequence(targetX: number, targetY: number, bufferServi
   }
 
   // Only move horizontally for the normal buffer
-  return moveHorizontallyOnly(startX, startY, targetX, targetY, bufferService, applicationCursor);
+  let direction;
+  if (startY === targetY) {
+    direction = startX > targetX ? Direction.LEFT : Direction.RIGHT;
+    return repeat(Math.abs(startX - targetX), sequence(direction, applicationCursor));
+  }
+  direction = startY > targetY ? Direction.LEFT : Direction.RIGHT;
+  const rowDifference = Math.abs(startY - targetY);
+  const cellsToMove = colsFromRowEnd(startY > targetY ? targetX : startX, bufferService) +
+    (rowDifference - 1) * bufferService.cols + 1 /* wrap around 1 row */ +
+    colsFromRowBeginning(startY > targetY ? startX : targetX, bufferService);
+  return repeat(cellsToMove, sequence(direction, applicationCursor));
+}
+
+/**
+ * Find the number of cols from a row beginning to a col.
+ */
+function colsFromRowBeginning(currX: number, bufferService: IBufferService): number {
+  return currX - 1;
+}
+
+/**
+ * Find the number of cols from a col to row end.
+ */
+function colsFromRowEnd(currX: number, bufferService: IBufferService): number {
+  return bufferService.cols - currX;
 }
 
 /**

src/browser/renderer/BaseRenderLayer.ts

@@ -15,7 +15,7 @@ import { IColorSet, IColor } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IBufferService, IOptionsService } from 'common/services/Services';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
-import { toCss, ensureContrastRatioRgba, opaque } from 'browser/Color';
+import { channels, color, rgba } from 'browser/Color';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -93,7 +93,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     const oldCanvas = this._canvas;
     this._alpha = alpha;
     // Cloning preserves properties
-    this._canvas = <HTMLCanvasElement>this._canvas.cloneNode();
+    this._canvas = this._canvas.cloneNode() as HTMLCanvasElement;
     this._initCanvas();
     this._container.replaceChild(this._canvas, oldCanvas);
 
@@ -145,10 +145,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected _fillCells(x: number, y: number, width: number, height: number): void {
     this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        width * this._scaledCellWidth,
-        height * this._scaledCellHeight);
+      x * this._scaledCellWidth,
+      y * this._scaledCellHeight,
+      width * this._scaledCellWidth,
+      height * this._scaledCellHeight);
   }
 
   /**
@@ -159,10 +159,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected _fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
     this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
-        width * this._scaledCellWidth,
-        window.devicePixelRatio);
+      x * this._scaledCellWidth,
+      (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
+      width * this._scaledCellWidth,
+      window.devicePixelRatio);
   }
 
   /**
@@ -171,12 +171,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to fill.
    * @param y The row to fill.
    */
-  protected _fillLeftLineAtCell(x: number, y: number): void {
+  protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
     this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        window.devicePixelRatio,
-        this._scaledCellHeight);
+      x * this._scaledCellWidth,
+      y * this._scaledCellHeight,
+      window.devicePixelRatio * width,
+      this._scaledCellHeight);
   }
 
   /**
@@ -188,10 +188,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   protected _strokeRectAtCell(x: number, y: number, width: number, height: number): void {
     this._ctx.lineWidth = window.devicePixelRatio;
     this._ctx.strokeRect(
-        x * this._scaledCellWidth + window.devicePixelRatio / 2,
-        y * this._scaledCellHeight + (window.devicePixelRatio / 2),
-        width * this._scaledCellWidth - window.devicePixelRatio,
-        (height * this._scaledCellHeight) - window.devicePixelRatio);
+      x * this._scaledCellWidth + window.devicePixelRatio / 2,
+      y * this._scaledCellHeight + (window.devicePixelRatio / 2),
+      width * this._scaledCellWidth - window.devicePixelRatio,
+      (height * this._scaledCellHeight) - window.devicePixelRatio);
   }
 
   /**
@@ -216,17 +216,17 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   protected _clearCells(x: number, y: number, width: number, height: number): void {
     if (this._alpha) {
       this._ctx.clearRect(
-          x * this._scaledCellWidth,
-          y * this._scaledCellHeight,
-          width * this._scaledCellWidth,
-          height * this._scaledCellHeight);
+        x * this._scaledCellWidth,
+        y * this._scaledCellHeight,
+        width * this._scaledCellWidth,
+        height * this._scaledCellHeight);
     } else {
       this._ctx.fillStyle = this._colors.background.css;
       this._ctx.fillRect(
-          x * this._scaledCellWidth,
-          y * this._scaledCellHeight,
-          width * this._scaledCellWidth,
-          height * this._scaledCellHeight);
+        x * this._scaledCellWidth,
+        y * this._scaledCellHeight,
+        width * this._scaledCellWidth,
+        height * this._scaledCellHeight);
     }
   }
 
@@ -244,9 +244,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.textBaseline = 'middle';
     this._clipRow(y);
     this._ctx.fillText(
-        cell.getChars(),
-        x * this._scaledCellWidth + this._scaledCharLeft,
-        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
+      cell.getChars(),
+      x * this._scaledCellWidth + this._scaledCharLeft,
+      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
   }
 
   /**
@@ -325,7 +325,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       if (fgOverride) {
         this._ctx.fillStyle = fgOverride.css;
       } else if (cell.isBgDefault()) {
-        this._ctx.fillStyle = opaque(this._colors.background).css;
+        this._ctx.fillStyle = color.opaque(this._colors.background).css;
       } else if (cell.isBgRGB()) {
         this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getBgColor()).join(',')})`;
       } else {
@@ -359,9 +359,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     }
     // Draw the character
     this._ctx.fillText(
-        cell.getChars(),
-        x * this._scaledCellWidth + this._scaledCharLeft,
-        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
+      cell.getChars(),
+      x * this._scaledCellWidth + this._scaledCharLeft,
+      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
     this._ctx.restore();
   }
 
@@ -372,10 +372,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   private _clipRow(y: number): void {
     this._ctx.beginPath();
     this._ctx.rect(
-        0,
-        y * this._scaledCellHeight,
-        this._bufferService.cols * this._scaledCellWidth,
-        this._scaledCellHeight);
+      0,
+      y * this._scaledCellHeight,
+      this._bufferService.cols * this._scaledCellWidth,
+      this._scaledCellHeight);
     this._ctx.clip();
   }
 
@@ -418,7 +418,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
 
     const bgRgba = this._resolveBackgroundRgba(bgColorMode, bgColor, isInverse);
     const fgRgba = this._resolveForegroundRgba(fgColorMode, fgColor, isInverse, isBold);
-    const result = ensureContrastRatioRgba(bgRgba, fgRgba, this._optionsService.options.minimumContrastRatio);
+    const result = rgba.ensureContrastRatio(bgRgba, fgRgba, this._optionsService.options.minimumContrastRatio);
 
     if (!result) {
       this._colors.contrastCache.setColor(cell.bg, cell.fg, null);
@@ -426,7 +426,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     }
 
     const color: IColor = {
-      css: toCss(
+      css: channels.toCss(
         (result >> 24) & 0xFF,
         (result >> 16) & 0xFF,
         (result >> 8) & 0xFF

src/browser/renderer/CursorRenderLayer.ts

@@ -140,7 +140,9 @@ export class CursorRenderLayer extends BaseRenderLayer {
       return;
     }
 
-    this._bufferService.buffer.lines.get(cursorY)!.loadCell(this._bufferService.buffer.x, this._cell);
+    // in case cursor.x == cols adjust visual cursor to cols - 1
+    const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
+    this._bufferService.buffer.lines.get(cursorY)!.loadCell(cursorX, this._cell);
     if (this._cell.content === undefined) {
       return;
     }
@@ -151,12 +153,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
       this._ctx.fillStyle = this._colors.cursor.css;
       const cursorStyle = this._optionsService.options.cursorStyle;
       if (cursorStyle && cursorStyle !== 'block') {
-        this._cursorRenderers[cursorStyle](this._bufferService.buffer.x, viewportRelativeCursorY, this._cell);
+        this._cursorRenderers[cursorStyle](cursorX, viewportRelativeCursorY, this._cell);
       } else {
-        this._renderBlurCursor(this._bufferService.buffer.x, viewportRelativeCursorY, this._cell);
+        this._renderBlurCursor(cursorX, viewportRelativeCursorY, this._cell);
       }
       this._ctx.restore();
-      this._state.x = this._bufferService.buffer.x;
+      this._state.x = cursorX;
       this._state.y = viewportRelativeCursorY;
       this._state.isFocused = false;
       this._state.style = cursorStyle;
@@ -172,7 +174,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
     if (this._state) {
       // The cursor is already in the correct spot, don't redraw
-      if (this._state.x === this._bufferService.buffer.x &&
+      if (this._state.x === cursorX &&
           this._state.y === viewportRelativeCursorY &&
           this._state.isFocused === this._coreBrowserService.isFocused &&
           this._state.style === this._optionsService.options.cursorStyle &&
@@ -183,10 +185,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     }
 
     this._ctx.save();
-    this._cursorRenderers[this._optionsService.options.cursorStyle || 'block'](this._bufferService.buffer.x, viewportRelativeCursorY, this._cell);
+    this._cursorRenderers[this._optionsService.options.cursorStyle || 'block'](cursorX, viewportRelativeCursorY, this._cell);
     this._ctx.restore();
 
-    this._state.x = this._bufferService.buffer.x;
+    this._state.x = cursorX;
     this._state.y = viewportRelativeCursorY;
     this._state.isFocused = false;
     this._state.style = this._optionsService.options.cursorStyle;
@@ -209,7 +211,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _renderBarCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
     this._ctx.fillStyle = this._colors.cursor.css;
-    this._fillLeftLineAtCell(x, y);
+    this._fillLeftLineAtCell(x, y, this._optionsService.options.cursorWidth);
     this._ctx.restore();
   }
 
@@ -304,7 +306,7 @@ class CursorBlinkStateManager {
     // the regular interval is setup in order to support restarting the blink
     // animation in a lightweight way (without thrashing clearInterval and
     // setInterval).
-    this._blinkStartTimeout = <number><any>setTimeout(() => {
+    this._blinkStartTimeout = window.setTimeout(() => {
       // Check if another animation restart was requested while this was being
       // started
       if (this._animationTimeRestarted) {
@@ -324,7 +326,7 @@ class CursorBlinkStateManager {
       });
 
       // Setup the blink interval
-      this._blinkInterval = <number><any>setInterval(() => {
+      this._blinkInterval = window.setInterval(() => {
         // Adjust the animation time if it was restarted
         if (this._animationTimeRestarted) {
           // calc time diff
@@ -362,6 +364,9 @@ class CursorBlinkStateManager {
   }
 
   public resume(): void {
+    // Clear out any existing timers just in case
+    this.pause();
+
     this._animationTimeRestarted = undefined;
     this._restartInterval();
     this.restartBlinkAnimation();

src/browser/renderer/LinkRenderLayer.ts

@@ -7,7 +7,7 @@ import { IRenderDimensions } from 'browser/renderer/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { is256Color } from 'browser/renderer/atlas/CharAtlasUtils';
-import { IColorSet, ILinkifierEvent, ILinkifier } from 'browser/Types';
+import { IColorSet, ILinkifierEvent, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { IBufferService, IOptionsService } from 'common/services/Services';
 
 export class LinkRenderLayer extends BaseRenderLayer {
@@ -19,12 +19,16 @@ export class LinkRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     rendererId: number,
     linkifier: ILinkifier,
+    linkifier2: ILinkifier2,
     readonly bufferService: IBufferService,
     readonly optionsService: IOptionsService
   ) {
     super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService);
     linkifier.onLinkHover(e => this._onLinkHover(e));
     linkifier.onLinkLeave(e => this._onLinkLeave(e));
+
+    linkifier2.onLinkHover(e => this._onLinkHover(e));
+    linkifier2.onLinkLeave(e => this._onLinkLeave(e));
   }
 
   public resize(dim: IRenderDimensions): void {

src/browser/renderer/Renderer.ts

@@ -10,7 +10,7 @@ import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICh
 import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
 import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry';
 import { Disposable } from 'common/Lifecycle';
-import { IColorSet, ILinkifier } from 'browser/Types';
+import { IColorSet, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
 import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services';
 import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
@@ -33,7 +33,8 @@ export class Renderer extends Disposable implements IRenderer {
   constructor(
     private _colors: IColorSet,
     private readonly _screenElement: HTMLElement,
-    private readonly _linkifier: ILinkifier,
+    readonly linkifier: ILinkifier,
+    readonly linkifier2: ILinkifier2,
     @IBufferService private readonly _bufferService: IBufferService,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IOptionsService private readonly _optionsService: IOptionsService,
@@ -47,7 +48,7 @@ export class Renderer extends Disposable implements IRenderer {
     this._renderLayers = [
       new TextRenderLayer(this._screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, this._bufferService, _optionsService),
       new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, _optionsService),
-      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, this._linkifier, this._bufferService, _optionsService),
+      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier, linkifier2, this._bufferService, _optionsService),
       new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRefreshRows, this._bufferService, _optionsService, coreService, coreBrowserService)
     ];
     this.dimensions = {

src/browser/renderer/atlas/DynamicCharAtlas.ts

@@ -11,7 +11,7 @@ import { LRUMap } from 'browser/renderer/atlas/LRUMap';
 import { isFirefox, isSafari } from 'common/Platform';
 import { IColor } from 'browser/Types';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
-import { opaque } from 'browser/Color';
+import { color } from 'browser/Color';
 
 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -140,7 +140,8 @@ export class DynamicCharAtlas extends BaseCharAtlas {
     if (cacheValue !== null && cacheValue !== undefined) {
       this._drawFromCache(ctx, cacheValue, x, y);
       return true;
-    } else if (this._drawToCacheCount < FRAME_CACHE_DRAW_LIMIT) {
+    }
+    if (this._drawToCacheCount < FRAME_CACHE_DRAW_LIMIT) {
       let index;
       if (this._cacheMap.size < this._cacheMap.capacity) {
         index = this._cacheMap.size;
@@ -213,9 +214,11 @@ export class DynamicCharAtlas extends BaseCharAtlas {
       // 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) {
+    }
+    if (glyph.bg === INVERTED_DEFAULT_COLOR) {
       return this._config.colors.foreground;
-    } else if (glyph.bg < 256) {
+    }
+    if (glyph.bg < 256) {
       return this._getColorFromAnsiIndex(glyph.bg);
     }
     return this._config.colors.background;
@@ -223,8 +226,9 @@ export class DynamicCharAtlas extends BaseCharAtlas {
 
   private _getForegroundColor(glyph: IGlyphIdentifier): IColor {
     if (glyph.fg === INVERTED_DEFAULT_COLOR) {
-      return opaque(this._config.colors.background);
-    } else if (glyph.fg < 256) {
+      return color.opaque(this._config.colors.background);
+    }
+    if (glyph.fg < 256) {
       // 256 color support
       return this._getColorFromAnsiIndex(glyph.fg);
     }

src/browser/renderer/dom/DomRenderer.ts

@@ -7,11 +7,11 @@ import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRo
 import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { Disposable } from 'common/Lifecycle';
-import { IColorSet, ILinkifierEvent, ILinkifier } from 'browser/Types';
+import { IColorSet, ILinkifierEvent, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
 import { IOptionsService, IBufferService } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
-import { opaque } from 'browser/Color';
+import { color } from 'browser/Color';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -48,6 +48,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     private readonly _screenElement: HTMLElement,
     private readonly _viewportElement: HTMLElement,
     private readonly _linkifier: ILinkifier,
+    private readonly _linkifier2: ILinkifier2,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IOptionsService private readonly _optionsService: IOptionsService,
     @IBufferService private readonly _bufferService: IBufferService
@@ -88,6 +89,9 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     this._linkifier.onLinkHover(e => this._onLinkHover(e));
     this._linkifier.onLinkLeave(e => this._onLinkLeave(e));
+
+    this._linkifier2.onLinkHover(e => this._onLinkHover(e));
+    this._linkifier2.onLinkLeave(e => this._onLinkLeave(e));
   }
 
   public dispose(): void {
@@ -127,12 +131,12 @@ export class DomRenderer extends Disposable implements IRenderer {
     }
 
     const styles =
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
-        ` display: inline-block;` +
-        ` height: 100%;` +
-        ` vertical-align: top;` +
-        ` width: ${this.dimensions.actualCellWidth}px` +
-        `}`;
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
+      ` display: inline-block;` +
+      ` height: 100%;` +
+      ` vertical-align: top;` +
+      ` width: ${this.dimensions.actualCellWidth}px` +
+      `}`;
 
     this._dimensionsStyleElement.innerHTML = styles;
 
@@ -154,85 +158,84 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     // Base CSS
     let styles =
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
-        ` color: ${this._colors.foreground.css};` +
-        ` background-color: ${this._colors.background.css};` +
-        ` font-family: ${this._optionsService.options.fontFamily};` +
-        ` font-size: ${this._optionsService.options.fontSize}px;` +
-        `}`;
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+      ` color: ${this._colors.foreground.css};` +
+      ` font-family: ${this._optionsService.options.fontFamily};` +
+      ` font-size: ${this._optionsService.options.fontSize}px;` +
+      `}`;
     // Text styles
     styles +=
-        `${this._terminalSelector} span:not(.${BOLD_CLASS}) {` +
-        ` font-weight: ${this._optionsService.options.fontWeight};` +
-        `}` +
-        `${this._terminalSelector} span.${BOLD_CLASS} {` +
-        ` font-weight: ${this._optionsService.options.fontWeightBold};` +
-        `}` +
-        `${this._terminalSelector} span.${ITALIC_CLASS} {` +
-        ` font-style: italic;` +
-        `}`;
+      `${this._terminalSelector} span:not(.${BOLD_CLASS}) {` +
+      ` font-weight: ${this._optionsService.options.fontWeight};` +
+      `}` +
+      `${this._terminalSelector} span.${BOLD_CLASS} {` +
+      ` font-weight: ${this._optionsService.options.fontWeightBold};` +
+      `}` +
+      `${this._terminalSelector} span.${ITALIC_CLASS} {` +
+      ` font-style: italic;` +
+      `}`;
     // Blink animation
     styles +=
-        `@keyframes blink_box_shadow {` +
-        ` 50% {` +
-        `  box-shadow: none;` +
-        ` }` +
-        `}`;
+      `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
     styles +=
-        `@keyframes blink_block {` +
-        ` 0% {` +
-        `  background-color: ${this._colors.cursor.css};` +
-        `  color: ${this._colors.cursorAccent.css};` +
-        ` }` +
-        ` 50% {` +
-        `  background-color: ${this._colors.cursorAccent.css};` +
-        `  color: ${this._colors.cursor.css};` +
-        ` }` +
-        `}`;
+      `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
+      ` 0% {` +
+      `  background-color: ${this._colors.cursor.css};` +
+      `  color: ${this._colors.cursorAccent.css};` +
+      ` }` +
+      ` 50% {` +
+      `  background-color: ${this._colors.cursorAccent.css};` +
+      `  color: ${this._colors.cursor.css};` +
+      ` }` +
+      `}`;
     // Cursor
     styles +=
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
-        ` outline: 1px solid ${this._colors.cursor.css};` +
-        ` outline-offset: -1px;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}:not(.${CURSOR_STYLE_BLOCK_CLASS}) {` +
-        ` animation: blink_box_shadow 1s step-end infinite;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
-        ` animation: blink_block 1s step-end infinite;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
-        ` background-color: ${this._colors.cursor.css};` +
-        ` color: ${this._colors.cursorAccent.css};` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BAR_CLASS} {` +
-        ` box-shadow: 1px 0 0 ${this._colors.cursor.css} inset;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` +
-        ` box-shadow: 0 -1px 0 ${this._colors.cursor.css} inset;` +
-        `}`;
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` outline: 1px solid ${this._colors.cursor.css};` +
+      ` outline-offset: -1px;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}:not(.${CURSOR_STYLE_BLOCK_CLASS}) {` +
+      ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` background-color: ${this._colors.cursor.css};` +
+      ` color: ${this._colors.cursorAccent.css};` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BAR_CLASS} {` +
+      ` box-shadow: ${this._optionsService.options.cursorWidth}px 0 0 ${this._colors.cursor.css} inset;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      ` box-shadow: 0 -1px 0 ${this._colors.cursor.css} inset;` +
+      `}`;
     // Selection
     styles +=
-        `${this._terminalSelector} .${SELECTION_CLASS} {` +
-        ` position: absolute;` +
-        ` top: 0;` +
-        ` left: 0;` +
-        ` z-index: 1;` +
-        ` pointer-events: none;` +
-        `}` +
-        `${this._terminalSelector} .${SELECTION_CLASS} div {` +
-        ` position: absolute;` +
-        ` background-color: ${this._colors.selection.css};` +
-        `}`;
+      `${this._terminalSelector} .${SELECTION_CLASS} {` +
+      ` position: absolute;` +
+      ` top: 0;` +
+      ` left: 0;` +
+      ` z-index: 1;` +
+      ` pointer-events: none;` +
+      `}` +
+      `${this._terminalSelector} .${SELECTION_CLASS} div {` +
+      ` position: absolute;` +
+      ` background-color: ${this._colors.selection.css};` +
+      `}`;
     // Colors
     this._colors.ansi.forEach((c, i) => {
       styles +=
-          `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
-          `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
+        `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
+        `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
     });
     styles +=
-        `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${opaque(this._colors.background).css}; }` +
-        `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;
+      `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${color.opaque(this._colors.background).css}; }` +
+      `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;
 
     this._themeStyleElement.innerHTML = styles;
   }
@@ -349,7 +352,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   public renderRows(start: number, end: number): void {
     const cursorAbsoluteY = this._bufferService.buffer.ybase + this._bufferService.buffer.y;
-    const cursorX = this._bufferService.buffer.x;
+    const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
     const cursorBlink = this._optionsService.options.cursorBlink;
 
     for (let y = start; y <= end; y++) {

src/browser/renderer/dom/DomRendererRowFactory.test.ts

@@ -11,7 +11,7 @@ import { BufferLine, DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockOptionsService } from 'common/TestUtils.test';
-import { fromCss } from 'browser/Color';
+import { css } from 'browser/Color';
 
 describe('DomRendererRowFactory', () => {
   let dom: jsdom.JSDOM;
@@ -21,27 +21,27 @@ describe('DomRendererRowFactory', () => {
   beforeEach(() => {
     dom = new jsdom.JSDOM('');
     rowFactory = new DomRendererRowFactory(dom.window.document, new MockOptionsService({ drawBoldTextInBrightColors: true }), {
-      background: fromCss('#010101'),
-      foreground: fromCss('#020202'),
+      background: css.toColor('#010101'),
+      foreground: css.toColor('#020202'),
       ansi: [
         // dark:
-        fromCss('#2e3436'),
-        fromCss('#cc0000'),
-        fromCss('#4e9a06'),
-        fromCss('#c4a000'),
-        fromCss('#3465a4'),
-        fromCss('#75507b'),
-        fromCss('#06989a'),
-        fromCss('#d3d7cf'),
+        css.toColor('#2e3436'),
+        css.toColor('#cc0000'),
+        css.toColor('#4e9a06'),
+        css.toColor('#c4a000'),
+        css.toColor('#3465a4'),
+        css.toColor('#75507b'),
+        css.toColor('#06989a'),
+        css.toColor('#d3d7cf'),
         // bright:
-        fromCss('#555753'),
-        fromCss('#ef2929'),
-        fromCss('#8ae234'),
-        fromCss('#fce94f'),
-        fromCss('#729fcf'),
-        fromCss('#ad7fa8'),
-        fromCss('#34e2e2'),
-        fromCss('#eeeeec')
+        css.toColor('#555753'),
+        css.toColor('#ef2929'),
+        css.toColor('#8ae234'),
+        css.toColor('#fce94f'),
+        css.toColor('#729fcf'),
+        css.toColor('#ad7fa8'),
+        css.toColor('#34e2e2'),
+        css.toColor('#eeeeec')
       ]
     } as any);
     lineData = createEmptyLineData(2);

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -8,7 +8,7 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { NULL_CELL_CODE, WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
 import { IOptionsService } from 'common/services/Services';
-import { ensureContrastRatio, rgbaToColor } from 'browser/Color';
+import { color, rgba } from 'browser/Color';
 import { IColorSet, IColor } from 'browser/Types';
 
 export const BOLD_CLASS = 'xterm-bold';
@@ -101,7 +101,11 @@ export class DomRendererRowFactory {
         charElement.classList.add(UNDERLINE_CLASS);
       }
 
-      charElement.textContent = this._workCell.getChars() || WHITESPACE_CELL_CHAR;
+      if (this._workCell.isInvisible()) {
+        charElement.textContent = WHITESPACE_CELL_CHAR;
+      } else {
+        charElement.textContent = this._workCell.getChars() || WHITESPACE_CELL_CHAR;
+      }
 
       let fg = this._workCell.getFgColor();
       let fgColorMode = this._workCell.getFgColorMode();
@@ -129,7 +133,7 @@ export class DomRendererRowFactory {
           }
           break;
         case Attributes.CM_RGB:
-          const color = rgbaToColor(
+          const color = rgba.toColor(
             (fg >> 16) & 0xFF,
             (fg >>  8) & 0xFF,
             (fg      ) & 0xFF
@@ -178,7 +182,7 @@ export class DomRendererRowFactory {
 
     // Calculate and store in cache
     if (adjustedColor === undefined) {
-      adjustedColor = ensureContrastRatio(bg, fg, this._optionsService.options.minimumContrastRatio);
+      adjustedColor = color.ensureContrastRatio(bg, fg, this._optionsService.options.minimumContrastRatio);
       this._colors.contrastCache.setColor(this._workCell.bg, this._workCell.fg, adjustedColor ?? null);
     }
 

src/browser/services/SelectionService.ts

@@ -835,12 +835,12 @@ export class SelectionService implements ISelectionService {
     // Calculate the length in _columns_, converting the the string indexes back
     // to column coordinates.
     let length = Math.min(this._bufferService.cols, // Disallow lengths larger than the terminal cols
-        endIndex // The index of the selection's end char in the line string
-        - startIndex // The index of the selection's start char in the line string
-        + leftWideCharCount // The number of wide chars left of the initial char
-        + rightWideCharCount // The number of wide chars right of the initial char (inclusive)
-        - leftLongCharOffset // The number of additional chars left of the initial char added by columns with strings longer than 1 (emojis)
-        - rightLongCharOffset); // The number of additional chars right of the initial char (inclusive) added by columns with strings longer than 1 (emojis)
+      endIndex // The index of the selection's end char in the line string
+      - startIndex // The index of the selection's start char in the line string
+      + leftWideCharCount // The number of wide chars left of the initial char
+      + rightWideCharCount // The number of wide chars right of the initial char (inclusive)
+      - leftLongCharOffset // The number of additional chars left of the initial char added by columns with strings longer than 1 (emojis)
+      - rightLongCharOffset); // The number of additional chars right of the initial char (inclusive) added by columns with strings longer than 1 (emojis)
 
     if (!allowWhitespaceOnlySelection && line.slice(startIndex, endIndex).trim() === '') {
       return undefined;
@@ -848,9 +848,9 @@ export class SelectionService implements ISelectionService {
 
     // Recurse upwards if the line is wrapped and the word wraps to the above line
     if (followWrappedLinesAbove) {
-      if (start === 0 && bufferLine.getCodePoint(0) !== 32 /*' '*/) {
+      if (start === 0 && bufferLine.getCodePoint(0) !== 32 /* ' ' */) {
         const previousBufferLine = buffer.lines.get(coords[1] - 1);
-        if (previousBufferLine && bufferLine.isWrapped && previousBufferLine.getCodePoint(this._bufferService.cols - 1) !== 32 /*' '*/) {
+        if (previousBufferLine && bufferLine.isWrapped && previousBufferLine.getCodePoint(this._bufferService.cols - 1) !== 32 /* ' ' */) {
           const previousLineWordPosition = this._getWordAt([this._bufferService.cols - 1, coords[1] - 1], false, true, false);
           if (previousLineWordPosition) {
             const offset = this._bufferService.cols - previousLineWordPosition.start;
@@ -863,9 +863,9 @@ export class SelectionService implements ISelectionService {
 
     // Recurse downwards if the line is wrapped and the word wraps to the next line
     if (followWrappedLinesBelow) {
-      if (start + length === this._bufferService.cols && bufferLine.getCodePoint(this._bufferService.cols - 1) !== 32 /*' '*/) {
+      if (start + length === this._bufferService.cols && bufferLine.getCodePoint(this._bufferService.cols - 1) !== 32 /* ' ' */) {
         const nextBufferLine = buffer.lines.get(coords[1] + 1);
-        if (nextBufferLine && nextBufferLine.isWrapped && nextBufferLine.getCodePoint(0) !== 32 /*' '*/) {
+        if (nextBufferLine && nextBufferLine.isWrapped && nextBufferLine.getCodePoint(0) !== 32 /* ' ' */) {
           const nextLineWordPosition = this._getWordAt([0, coords[1] + 1], false, false, true);
           if (nextLineWordPosition) {
             length += nextLineWordPosition.length;