Merge pull request #3365 from jerch/fix_3362

allow cursor to stick at cols in ED/EL

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10
+FROM node:14
 
 # Configure apt
 ENV DEBIAN_FRONTEND=noninteractive

.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"
   ]
 }

.dockerignore

@@ -1,16 +0,0 @@
-node_modules/
-*.swp
-.lock-wscript
-lib/
-Makefile.gyp
-*.Makefile
-*.target.gyp.mk
-*.node
-example/*.log
-docs/
-npm-debug.log
-/.idea/
-.env
-build/
-.vscode/
-.git/

.eslintrc.json

@@ -0,0 +1,177 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": [
+      "src/browser/tsconfig.json",
+      "src/common/tsconfig.json",
+      "test/api/tsconfig.json",
+      "test/benchmark/tsconfig.json",
+      "addons/xterm-addon-attach/src/tsconfig.json",
+      "addons/xterm-addon-attach/test/tsconfig.json",
+      "addons/xterm-addon-fit/src/tsconfig.json",
+      "addons/xterm-addon-fit/test/tsconfig.json",
+      "addons/xterm-addon-ligatures/src/tsconfig.json",
+      "addons/xterm-addon-search/src/tsconfig.json",
+      "addons/xterm-addon-search/test/tsconfig.json",
+      "addons/xterm-addon-serialize/src/tsconfig.json",
+      "addons/xterm-addon-serialize/test/tsconfig.json",
+      "addons/xterm-addon-serialize/benchmark/tsconfig.json",
+      "addons/xterm-addon-unicode11/src/tsconfig.json",
+      "addons/xterm-addon-unicode11/test/tsconfig.json",
+      "addons/xterm-addon-web-links/src/tsconfig.json",
+      "addons/xterm-addon-web-links/test/tsconfig.json",
+      "addons/xterm-addon-webgl/src/tsconfig.json",
+      "addons/xterm-addon-webgl/test/tsconfig.json"
+    ],
+    "sourceType": "module"
+  },
+  "ignorePatterns": [
+    "**/typings/*.d.ts",
+    "**/node_modules",
+    "**/*.js"
+  ],
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "no-extra-semi": "error",
+    "@typescript-eslint/array-type": [
+      "warn",
+      {
+        "default": "array",
+        "readonly": "generic"
+      }
+    ],
+    "@typescript-eslint/consistent-type-assertions": "warn",
+    "@typescript-eslint/consistent-type-definitions": "warn",
+    "@typescript-eslint/explicit-function-return-type": [
+      "warn",
+      {
+        "allowExpressions": true
+      }
+    ],
+    "@typescript-eslint/explicit-member-accessibility": [
+      "warn",
+      {
+        "accessibility": "explicit",
+        "overrides": {
+          "constructors": "off"
+        }
+      }
+    ],
+    "@typescript-eslint/indent": [
+      "warn",
+      2
+    ],
+    "@typescript-eslint/member-delimiter-style": [
+      "warn",
+      {
+        "multiline": {
+          "delimiter": "semi",
+          "requireLast": true
+        },
+        "singleline": {
+          "delimiter": "comma",
+          "requireLast": false
+        }
+      }
+    ],
+    "@typescript-eslint/naming-convention": [
+      "warn",
+      { "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": "warn",
+    "@typescript-eslint/type-annotation-spacing": "warn",
+    "@typescript-eslint/quotes": [
+      "warn",
+      "single",
+      { "allowTemplateLiterals": true }
+    ],
+    "@typescript-eslint/semi": [
+      "warn",
+      "always"
+    ],
+    "comma-dangle": [
+      "warn",
+      {
+        "objects": "never",
+        "arrays": "never",
+        "functions": "never"
+      }
+    ],
+    "curly": [
+      "warn",
+      "multi-line"
+    ],
+    "eol-last": "warn",
+    "eqeqeq": [
+      "warn",
+      "always"
+    ],
+    "keyword-spacing": "warn",
+    "new-parens": "warn",
+    "no-duplicate-imports": "warn",
+    "no-else-return": [
+      "warn",
+      {
+        "allowElseIf": false
+      }
+    ],
+    "no-eval": "warn",
+    "no-irregular-whitespace": "warn",
+    "no-restricted-imports": [
+      "warn",
+      {
+        "patterns": [
+          ".*\\/out\\/.*"
+        ]
+      }
+    ],
+    "no-trailing-spaces": "warn",
+    "no-unsafe-finally": "warn",
+    "no-var": "warn",
+    "one-var": [
+      "warn",
+      "never"
+    ],
+    "object-curly-spacing": [
+      "warn",
+      "always"
+    ],
+    "prefer-const": "warn",
+    "spaced-comment": [
+      "warn",
+      "always",
+      {
+        "markers": ["/"],
+        "exceptions": ["-"]
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.ts"],
+      "rules": {
+        "object-curly-spacing": "off"
+      }
+    }
+  ]
+}

.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"
 }

.vscode/tasks.json

@@ -1,51 +1,70 @@
 {
-	"version": "2.0.0",
-	"presentation": {
-		"echo": false,
-		"reveal": "always",
-		"focus": false,
-		"panel": "dedicated",
-		"showReuseMessage": true
-	},
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "test",
-			"group": "test",
-			"problemMatcher": []
-		},
-		{
-			"type": "npm",
-			"script": "watch",
-			"group": "build",
-			"isBackground": true,
-			"problemMatcher": [],
-			"presentation": {
-				"group": "vscode"
-			}
-		},
-		{
-			"type": "npm",
-			"script": "start",
-			"group": "build",
-			"isBackground": true,
-			"problemMatcher": [],
-			"presentation": {
-				"group": "vscode"
-			}
-		},
-		{
-			"label": "Start demo",
-			"dependsOn": ["npm: watch", "npm: start"],
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			},
-			"isBackground": true,
-			"problemMatcher": [],
-			"presentation": {
-				"group": "vscode"
-			}
-		}
-	]
+  "version": "2.0.0",
+  "presentation": {
+    "echo": false,
+    "reveal": "always",
+    "focus": false,
+    "panel": "dedicated",
+    "showReuseMessage": true
+  },
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "test",
+      "group": "test",
+      "problemMatcher": []
+    },
+    {
+      "type": "npm",
+      "script": "watch",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": "$tsc-watch",
+      "presentation": {
+        "group": "vscode"
+      }
+    },
+    {
+      "type": "npm",
+      "script": "start",
+      "dependsOn": "npm: watch",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": [],
+      "presentation": {
+        "group": "vscode"
+      }
+    },
+    {
+      "label": "Start demo",
+      "dependsOn": "npm: start",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": [
+          "relative",
+          "${workspaceFolder}"
+        ],
+        "pattern": [
+          {
+            "regexp": "^([^\\\\s].*)\\\\((\\\\d+,\\\\d+)\\\\):\\\\s*(.*)$",
+            "file": 1,
+            "location": 2,
+            "message": 3
+          }
+        ],
+        "background": {
+          "beginsPattern": "assets by",
+          "endsPattern": "webpack \\d+\\.\\d+\\.\\d+ compiled successfully"
+        }
+      },
+      "presentation": {
+        "group": "vscode"
+      }
+    }
+  ]
 }

Dockerfile

@@ -1,19 +0,0 @@
-FROM node:8
-MAINTAINER Paris Kasidiaris <paris@sourcelair.com>
-
-# Set the working directory
-WORKDIR /usr/src/app
-
-# Set an entrypoint, to automatically install node modules
-ENTRYPOINT ["/bin/bash", "-c", "if [[ ! -d node_modules ]]; then npm install; fi; exec \"${@:0}\";"]
-CMD ["npm", "run", "start"]
-
-# First, install dependencies to improve layer caching
-COPY package.json /usr/src/app/
-RUN npm install
-
-# Add the code
-COPY . /usr/src/app
-
-# Run the tests and build, to make sure everything is working nicely
-RUN npm run build && npm run test

README.md

@@ -6,11 +6,11 @@ Xterm.js is a front-end component written in TypeScript that lets applications b
 
 ## Features
 
-- **Terminal apps just work**: Xterm.js works with most terminal apps such as `bash`, `vim` and `tmux`, this includes support for curses-based apps and mouse event support.
+- **Terminal apps just work**: Xterm.js works with most terminal apps such as `bash`, `vim`, and `tmux`, including support for curses-based apps and mouse events.
 - **Performant**: Xterm.js is *really* fast, it even includes a GPU-accelerated renderer.
-- **Rich unicode support**: Supports CJK, emojis and IMEs.
+- **Rich Unicode support**: Supports CJK, emojis, and IMEs.
 - **Self-contained**: Requires zero dependencies to work.
-- **Accessible**: Screen reader and minimum contrast ratio support can be turned on
+- **Accessible**: Screen reader and minimum contrast ratio support can be turned on.
 - **And much more**: Links, theming, addons, well documented API, etc.
 
 ## What xterm.js is not
@@ -20,13 +20,13 @@ Xterm.js is a front-end component written in TypeScript that lets applications b
 
 ## Getting Started
 
-First you need to install the module, we ship exclusively through [npm](https://www.npmjs.com/) so you need that installed and then add xterm.js as a dependency by running:
+First, you need to install the module, we ship exclusively through [npm](https://www.npmjs.com/), so you need that installed and then add xterm.js as a dependency by running:
 
-```
+```bash
 npm install xterm
 ```
 
-To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your html page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
+To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your HTML page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally, instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
 
 ```html
 <!doctype html>
@@ -58,7 +58,7 @@ import { Terminal } from 'xterm';
 
 ⚠️ *This section describes the new addon format introduced in v3.14.0, see [here](https://github.com/xtermjs/xterm.js/blob/3.14.2/README.md#addons) for the instructions on the old format*
 
-Addons are separate modules that extend the `Terminal` by building on the [xterm.js API](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts). To use an addon you first need to install it in your project:
+Addons are separate modules that extend the `Terminal` by building on the [xterm.js API](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts). To use an addon, you first need to install it in your project:
 
 ```bash
 npm i -S xterm-addon-web-links
@@ -76,7 +76,7 @@ const terminal = new Terminal();
 terminal.loadAddon(new WebLinksAddon());
 ```
 
-The xterm.js team maintains the following addons but they can be built by anyone:
+The xterm.js team maintains the following addons, but anyone can build them:
 
 - [`xterm-addon-attach`](https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-attach): Attaches to a server running a process via a websocket
 - [`xterm-addon-fit`](https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-fit): Fits the terminal to the containing element
@@ -85,23 +85,23 @@ The xterm.js team maintains the following addons but they can be built by anyone
 
 ## Browser Support
 
-Since xterm.js is typically implemented as a developer tool, only modern browsers are supported officially. Specifically the latest versions of *Chrome*, *Edge*, *Firefox* and *Safari*.
+Since xterm.js is typically implemented as a developer tool, only modern browsers are supported officially. Specifically the latest versions of *Chrome*, *Edge*, *Firefox*, and *Safari*.
 
-We also partially support *Intenet Explorer 11*, meaning xterm.js should work for the most part, but we reserve the right to not provide workarounds specifically for it unless it's absolutely necessary to get the basic input/output flow working.
+We also partially support *Internet Explorer 11*, meaning xterm.js should work for the most part, but we reserve the right to not provide workarounds specifically for it unless it's absolutely necessary to get the basic input/output flow working.
 
-Xterm.js works seamlessly in [Electron](https://electronjs.org/) apps and may even work on earlier versions of the browsers, these are the versions we strive to keep working.
+Xterm.js works seamlessly in [Electron](https://electronjs.org/) apps and may even work on earlier versions of the browsers. These are the versions we strive to keep working.
 
 ## API
 
 The full API for xterm.js is contained within the [TypeScript declaration file](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts), use the branch/tag picker in GitHub (`w`) to navigate to the correct version of the API.
 
-Note that some APIs are marked *experimental*, these are added to enable experimentation with new ideas without committing to support it like a normal [semver](https://semver.org/) API. Note that these APIs can change radically between versions so be sure to read release notes if you plan on using experimental APIs.
+Note that some APIs are marked *experimental*, these are added to enable experimentation with new ideas without committing to support it like a normal [semver](https://semver.org/) API. Note that these APIs can change radically between versions, so be sure to read release notes if you plan on using experimental APIs.
 
 ## Real-world uses
 Xterm.js is used in several world-class applications to provide great terminal experiences.
 
 - [**SourceLair**](https://www.sourcelair.com/): In-browser IDE that provides its users with fully-featured Linux terminals based on xterm.js.
-- [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile and powerful open source code editor that provides an integrated terminal based on xterm.js.
+- [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile, and powerful open source code editor that provides an integrated terminal based on xterm.js.
 - [**ttyd**](https://github.com/tsl0922/ttyd): A command-line tool for sharing terminal over the web, with fully-featured terminal emulation based on xterm.js.
 - [**Katacoda**](https://www.katacoda.com/): Katacoda is an Interactive Learning Platform for software developers, covering the latest Cloud Native technologies.
 - [**Eclipse Che**](http://www.eclipse.org/che): Developer workspace server, cloud IDE, and Eclipse next-generation IDE.
@@ -113,10 +113,10 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**Next Tech**](https://next.tech "Next Tech"): Online platform for interactive coding and web development courses. Live container-backed terminal uses xterm.js.
 - [**RStudio**](https://www.rstudio.com/products/RStudio "RStudio"): RStudio is an integrated development environment (IDE) for R.
 - [**Terminal for Atom**](https://github.com/jsmecham/atom-terminal-tab): A simple terminal for the Atom text editor.
-- [**Eclipse Orion**](https://orionhub.org): A modern, open source software development environment that runs in the cloud. Code, deploy and run in the cloud.
+- [**Eclipse Orion**](https://orionhub.org): A modern, open source software development environment that runs in the cloud. Code, deploy, and run in the cloud.
 - [**Gravitational Teleport**](https://github.com/gravitational/teleport): Gravitational Teleport is a modern SSH server for remotely accessing clusters of Linux servers via SSH or HTTPS.
 - [**Hexlet**](https://en.hexlet.io): Practical programming courses (JavaScript, PHP, Unix, databases, functional programming). A steady path from the first line of code to the first job.
-- [**Selenoid UI**](https://github.com/aerokube/selenoid-ui): Simple UI for the scallable golang implementation of Selenium Hub named Selenoid. We use XTerm for streaming logs over websockets from docker containers.
+- [**Selenoid UI**](https://github.com/aerokube/selenoid-ui): Simple UI for the scalable golang implementation of Selenium Hub named Selenoid. We use XTerm for streaming logs over websockets from docker containers.
 - [**Portainer**](https://portainer.io): Simple management UI for Docker.
 - [**SSHy**](https://github.com/stuicey/SSHy): HTML5 Based SSHv2 Web Client with E2E encryption utilising xterm.js, SJCL & websockets.
 - [**JupyterLab**](https://github.com/jupyterlab/jupyterlab): An extensible computational environment for Jupyter, supporting interactive data science and scientific computing across all programming languages.
@@ -143,7 +143,6 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**cPanel & WHM**](https://cpanel.com): The hosting platform of choice.
 - [**Nutanix**](https://github.com/nutanix): Nutanix Enterprise Cloud uses xterm in the webssh functionality within Nutanix Calm, and is also looking to move our old noserial (termjs) functionality to xterm.js.
 - [**SSH Web Client**](https://github.com/roke22/PHP-SSH2-Web-Client): SSH Web Client with PHP.
-- [**Shellvault**](https://www.shellvault.io): The cloud-based SSH terminal you can access from anywhere.
 - [**Juno**](http://junolab.org/): A flexible Julia IDE, based on Atom.
 - [**webssh**](https://github.com/huashengdun/webssh): Web based ssh client.
 - [**info-beamer hosted**](https://info-beamer.com): Uses xterm.js to manage digital signage devices from the web dashboard.
@@ -159,10 +158,27 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**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, ...
+- [**Dank Domain**](https://www.DDgame.us/): Open source multiuser medieval game supporting old & new terminal emulation.
+- [**DockerStacks**](https://docker-stacks.com/): Local LAMP/LEMP development studio
+- [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash. 
+- [**Laravel Ssh Web Client**](https://github.com/roke22/Laravel-ssh-client): Laravel server inventory with ssh web client to connect at server using xterm.js
+- [**Repl.it**](https://repl.it): Collaborative browser based IDE with support for 50+ different languages.
+- [**TeleType**](https://github.com/akshaykmr/TeleType): cli tool that allows you to share your terminal online conveniently. Show off mad cli-fu, help a colleague, teach, or troubleshoot.
+- [**Intervue**](https://www.intervue.io): Pair programming for interviews. Multiple programming languages are supported, with results displayed by xterm.js.
+- [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP, and Database services.  
+- [**Commas**](https://github.com/CyanSalt/commas): Commas is a hackable terminal and command runner.
+- [**Devtron**](https://github.com/devtron-labs/devtron): Software Delivery Workflow For Kubernetes. 
+- [**NxShell**](https://github.com/nxshell/nxshell): An easy to use new terminal for SSH.
+- [**gifcast**](https://dstein64.github.io/gifcast/): Converts an asciinema cast to an animated GIF.
+- [**WizardWebssh**](https://gitlab.com/mikeramsey/wizardwebssh): A terminal with Pyqt5 Widget for embedding, which can be used as an ssh client to connect to your ssh servers. It is written in Python, based on tornado, paramiko, and xterm.js.
+- [**Wizard Assistant**](https://wizardassistant.com/): Wizard Assistant comes with advanced automation tools, preloaded common and special time-saving commands, and a built-in SSH terminal. Now you can remotely administer, troubleshoot, and analyze any system with ease. 
+- [**ucli**](https://github.com/tsadarsh/ucli): Command Line for everyone :family_man_woman_girl_boy: at [www.ucli.tech](https://www.ucli.tech).
+- [**Tess**](https://github.com/SquitchYT/Tess/): Simple Terminal Fully Customizable for Everyone.
+- [And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
 
-[And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
-
-Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it in our list. Note: Please add any new contributions to the end of the list only.
+Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it on our list. Note: Please add any new contributions to the end of the list only.
 
 ## Releases
 
@@ -172,21 +188,21 @@ All current and past releases are available on this repo's [Releases page](https
 
 ### Beta builds
 
-Our CI releases beta builds to npm for every change that goes into master, install the latest beta build with:
+Our CI releases beta builds to npm for every change that goes into master. Install the latest beta build with:
 
-```
+```bash
 npm install -S xterm@beta
 ```
 
-These should generally be stable but some bugs may slip in, we recommend using the beta build primarily to test out new features and for verifying bug fixes.
+These should generally be stable, but some bugs may slip in. We recommend using the beta build primarily to test out new features and to verify bug fixes.
 
 ## Contributing
 
-You can read the [guide on the wiki](https://github.com/xtermjs/xterm.js/wiki/Contributing) to learn how to contribute and setup xterm.js for development.
+You can read the [guide on the wiki](https://github.com/xtermjs/xterm.js/wiki/Contributing) to learn how to contribute and set up xterm.js for development.
 
 ## License Agreement
 
-If you contribute code to this project, you are implicitly allowing your code to be distributed under the MIT license. You are also implicitly verifying that all code is your original work.
+If you contribute code to this project, you implicitly allow your code to be distributed under the MIT license. You are also implicitly verifying that all code is your original work.
 
 Copyright (c) 2017-2019, [The xterm.js authors](https://github.com/xtermjs/xterm.js/graphs/contributors) (MIT License)<br>
 Copyright (c) 2014-2017, SourceLair, Private Company ([www.sourcelair.com](https://www.sourcelair.com/home)) (MIT License)<br>

addons/xterm-addon-attach/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-attach",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
   "repository": "https://github.com/xtermjs/xterm.js",
   "license": "MIT",
   "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package"

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

@@ -1,79 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import * as puppeteer from 'puppeteer';
-import { assert } from 'chai';
-import { ITerminalOptions } from 'xterm';
-import WebSocket = require('ws');
-
-const APP = 'http://127.0.0.1:3000/test';
-
-let browser: puppeteer.Browser;
-let page: puppeteer.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`]
-    });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
-  });
-
-  after(async () => {
-    await browser.close();
-  });
-
-  beforeEach(async function(): Promise<any> {
-    this.timeout(20000);
-    await page.goto(APP);
-  });
-
-  it('string', async function(): Promise<any> {
-    this.timeout(20000);
-    await openTerminal({ 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');
-    server.close();
-  });
-
-  it('utf8', async function(): Promise<any> {
-    this.timeout(20000);
-    await openTerminal({ 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');
-    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/AttachAddon.ts

@@ -20,7 +20,7 @@ export class AttachAddon implements ITerminalAddon {
     this._socket = socket;
     // always set binary type to arraybuffer, we do not handle blobs
     this._socket.binaryType = 'arraybuffer';
-    this._bidirectional = (options && options.bidirectional === false) ? false : true;
+    this._bidirectional = !(options && options.bidirectional === false);
   }
 
   public activate(terminal: Terminal): void {
@@ -41,7 +41,9 @@ export class AttachAddon implements ITerminalAddon {
   }
 
   public dispose(): void {
-    this._disposables.forEach(d => d.dispose());
+    for (const d of this._disposables) {
+      d.dispose();
+    }
   }
 
   private _sendData(data: string): void {

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

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

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

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import WebSocket = require('ws');
+import { openTerminal, pollFor, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright';
+
+const APP = 'http://127.0.0.1:3001/test';
+
+let browser: Browser;
+let page: Page;
+const width = 800;
+const height = 600;
+
+describe('AttachAddon', () => {
+  before(async function(): Promise<any> {
+    const browserType = getBrowserType();
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
+    });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
+  });
+
+  after(async () => {
+    await browser.close();
+  });
+
+  beforeEach(async () => await page.goto(APP));
+
+  it('string', async function(): Promise<any> {
+    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.active.getLine(0).translateToString(true)`, 'foo');
+    server.close();
+  });
+
+  it('utf8', async function(): Promise<any> {
+    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.active.getLine(0).translateToString(true)`, 'foo');
+    server.close();
+  });
+});

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

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

addons/xterm-addon-attach/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}

addons/xterm-addon-fit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-fit",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
   "repository": "https://github.com/xtermjs/xterm.js",
   "license": "MIT",
   "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package"

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

@@ -1,118 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import * as puppeteer from 'puppeteer';
-import { assert } from 'chai';
-import { ITerminalOptions } from 'xterm';
-
-const APP = 'http://127.0.0.1:3000/test';
-
-let browser: puppeteer.Browser;
-let page: puppeteer.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`]
-    });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
-    await page.goto(APP);
-    await openTerminal();
-  });
-
-  after(async () => {
-    await browser.close();
-  });
-
-  it('no terminal', async function(): Promise<any> {
-    await page.evaluate(`window.fit = new FitAddon();`);
-    assert.equal(await page.evaluate(`window.fit.proposeDimensions()`), undefined);
-  });
-
-  describe('proposeDimensions', () => {
-    afterEach(async () => {
-      return unloadFit();
-    });
-
-    it('default', async function(): Promise<any> {
-      await loadFit();
-      assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
-        cols: 87,
-        rows: 26
-      });
-    });
-
-    it('width', async function(): Promise<any> {
-      await loadFit(1008);
-      assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
-        cols: 110,
-        rows: 26
-      });
-    });
-
-    it('small', async function(): Promise<any> {
-      await loadFit(1, 1);
-      assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
-        cols: 2,
-        rows: 1
-      });
-    });
-  });
-
-  describe('fit', () => {
-    afterEach(async () => {
-      return unloadFit();
-    });
-
-    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);
-    });
-
-    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);
-    });
-
-    it('small', async function(): Promise<any> {
-      await loadFit(1, 1);
-      await page.evaluate(`window.fit.fit()`);
-      assert.equal(await page.evaluate(`window.term.cols`), 2);
-      assert.equal(await page.evaluate(`window.term.rows`), 1);
-    });
-  });
-});
-
-async function loadFit(width: number = 800, height: number = 450): Promise<void> {
-  await page.evaluate(`
-    window.fit = new FitAddon();
-    window.term.loadAddon(window.fit);
-    document.querySelector('#terminal-container').style.width='${width}px';
-    document.querySelector('#terminal-container').style.height='${height}px';
-  `);
-}
-
-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,11 @@ export class FitAddon implements ITerminalAddon {
     }
 
     // TODO: Remove reliance on private API
-    const core = (<any>this._terminal)._core;
+    const core = (this._terminal as any)._core;
+
+    if (core._renderService.dimensions.actualCellWidth === 0 || core._renderService.dimensions.actualCellHeight === 0) {
+      return undefined;
+    }
 
     const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
     const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));

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

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

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

@@ -0,0 +1,130 @@
+/**
+ * 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';
+
+const APP = 'http://127.0.0.1:3001/test';
+
+let browser: Browser;
+let page: Page;
+const width = 1024;
+const height = 768;
+
+describe('FitAddon', () => {
+  before(async function(): Promise<any> {
+    const browserType = getBrowserType();
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
+    });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
+    await page.goto(APP);
+  });
+
+  beforeEach(async function(): Promise<any> {
+    await page.evaluate(`document.querySelector('#terminal-container').style.display=''`);
+    await openTerminal(page);
+  });
+
+  after(async () => {
+    await browser.close();
+  });
+
+  afterEach(async function(): Promise<any> {
+    await page.evaluate(`window.term.dispose()`);
+  });
+
+  it('no terminal', async function(): Promise<any> {
+    await page.evaluate(`window.fit = new FitAddon();`);
+    assert.equal(await page.evaluate(`window.fit.proposeDimensions()`), undefined);
+  });
+
+  describe('proposeDimensions', () => {
+    afterEach(async () => {
+      return await unloadFit();
+    });
+
+    it('default', async function(): Promise<any> {
+      await loadFit();
+      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);
+      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> {
+      await loadFit(1, 1);
+      assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
+        cols: 2,
+        rows: 1
+      });
+    });
+
+    it('hidden', async function(): Promise<any> {
+      await page.evaluate(`window.term.dispose()`);
+      await page.evaluate(`document.querySelector('#terminal-container').style.display='none'`);
+      await page.evaluate(`window.term = new Terminal()`);
+      await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
+      await loadFit();
+      assert.equal(await page.evaluate(`window.fit.proposeDimensions()`), undefined);
+    });
+  });
+
+  describe('fit', () => {
+    afterEach(async () => {
+      return await unloadFit();
+    });
+
+    it('default', async function(): Promise<any> {
+      await loadFit();
+      await page.evaluate(`window.fit.fit()`);
+      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()`);
+      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> {
+      await loadFit(1, 1);
+      await page.evaluate(`window.fit.fit()`);
+      assert.equal(await page.evaluate(`window.term.cols`), 2);
+      assert.equal(await page.evaluate(`window.term.rows`), 1);
+    });
+  });
+});
+
+async function loadFit(width: number = 800, height: number = 450): Promise<void> {
+  await page.evaluate(`
+    window.fit = new FitAddon();
+    window.term.loadAddon(window.fit);
+    document.querySelector('#terminal-container').style.width='${width}px';
+    document.querySelector('#terminal-container').style.height='${height}px';
+  `);
+}
+
+async function unloadFit(): Promise<void> {
+  await page.evaluate(`window.fit.dispose();`);
+}

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

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

addons/xterm-addon-fit/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}

addons/xterm-addon-ligatures/.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.nyc_output/
+coverage/
+
+lib/
+fonts/
+
+.env
+.vscode/
+*.swp
+*.tgz
+npm-debug.log*
+yarn-error.log*

addons/xterm-addon-ligatures/.npmignore

@@ -0,0 +1,48 @@
+# Blacklist - exclude everything except npm defaults such as LICENSE, etc
+*
+!*/
+
+# Whitelist - entries to be included must be negated with "!"
+!*.js
+!*.json
+
+# Whitelist - lib/
+!lib/**/*.d.ts
+
+!lib/**/*.js
+!lib/**/*.js.map
+
+# Whitelist - out/
+!out/**/*.d.ts
+
+!out/**/*.js
+!out/**/*.js.map
+
+# Whitelist - src/
+!src/**/*.ts
+!src/**/*.d.ts
+
+!src/**/*.js
+!src/**/*.js.map
+
+# Whitelist - typings/
+!typings/**/*.d.ts
+
+# Blacklist - (normal behavior) these will override any whitelist
+*.test.ts
+*.test.d.ts
+*.test.js
+*.test.js.map
+
+docs/
+/.idea/
+.vscode/
+coverage/
+.nyc_output/
+fonts/
+
+**/*.api.js
+**/*.api.ts
+tsconfig.json
+.yarnrc
+webpack.config.js

addons/xterm-addon-ligatures/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+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-ligatures/README.md

@@ -0,0 +1,54 @@
+## xterm-addon-ligatures
+
+Add support for programming ligatures to [xterm.js] when running in environments with access to [Node.js] APIs (such as [Electron]).
+
+### Requirements
+
+ * [Node.js] 8.x or higher (present in [Electron] 1.8.3 or higher)
+ * [xterm.js] 4.0.0 or higher using the default canvas renderer
+
+### Install
+
+```bash
+npm install --save xterm-addon-ligatures
+```
+
+### Usage
+
+```ts
+import { Terminal } from 'xterm';
+import { LigaturesAddon } from 'xterm-addon-ligatures';
+
+const terminal = new Terminal();
+const ligaturesAddon = new LigaturesAddon();
+terminal.open(containerElement);
+terminal.loadAddon(ligaturesAddon);
+```
+
+### How It Works
+
+In a browser environment, font ligature information is read directly by the web browser and used to render text correctly without any intervention from the developer. As of version 3, xterm.js uses the canvas to render characters individually, resulting in a significant performance boost. However, this means that it can no longer lean on the browser to determine when to draw font ligatures.
+
+This package locates the font file on disk for the font currently in use by the terminal and parses the ligature information out of it (via the [font-ligatures] package). As text is rendered in xterm.js, this package annotates it with the locations of ligatures, allowing xterm.js to render it correctly.
+
+Since this package depends on being able to find and resolve a system font from disk, it has to have system access that isn't available in the web browser. As a result, this package is mainly useful in environments that combine browser and Node.js runtimes (such as [Electron]).
+
+### Fonts
+
+This package makes use of the following fonts for testing:
+
+ * [Fira Code][Fira Code] - [Licensed under the OFL][Fira Code License] by Nikita
+   Prokopov, Mozilla Foundation with reserved names Fira Code, Fira Mono, and
+   Fira Sans
+ * [Iosevka] - [Licensed under the OFL][Iosevka License] by Belleve Invis with
+   reserved name Iosevka
+
+[xterm.js]: https://github.com/xtermjs/xterm.js
+[Electron]: https://electronjs.org/
+[Node.js]: https://nodejs.org/
+[font-ligatures]: https://github.com/princjef/font-ligatures
+[Fira Code]: https://github.com/tonsky/FiraCode
+[Fira Code License]: https://github.com/tonsky/FiraCode/blob/master/LICENSE
+[Iosevka]: https://github.com/be5invis/Iosevka
+[Iosevka License]: https://github.com/be5invis/Iosevka/blob/master/LICENSE.md
+

addons/xterm-addon-ligatures/bin/download-fonts.js

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const fs = require('fs');
+const path = require('path');
+const util = require('util');
+
+const axios = require('axios').default;
+const mkdirp = require('mkdirp');
+const yauzl = require('yauzl');
+
+const urls = {
+  fira: 'https://github.com/tonsky/FiraCode/raw/d42e7276fa925e5f82748f3ec9ea429736611b48/distr/otf/FiraCode-Regular.otf',
+  iosevka: 'https://github.com/be5invis/Iosevka/releases/download/v1.14.3/01-iosevka-1.14.3.zip'
+};
+
+const writeFile = util.promisify(fs.writeFile);
+const fontsFolder = path.join(__dirname, '../fonts');
+
+async function download() {
+  await mkdirp(fontsFolder);
+
+  await downloadFiraCode();
+  await downloadIosevka();
+
+  console.log('Loaded all fonts for testing')
+}
+
+async function downloadFiraCode() {
+  const file = path.join(fontsFolder, 'firaCode.otf');
+  if (await util.promisify(fs.exists)(file)) {
+    console.log('Fira Code already loaded');
+  } else {
+    console.log('Downloading Fira Code...');
+    await writeFile(
+      file,
+      (await axios.get(urls.fira, { responseType: 'arraybuffer' })).data
+    );
+  }
+}
+
+async function downloadIosevka() {
+  const file = path.join(fontsFolder, 'iosevka.ttf');
+  if (await util.promisify(fs.exists)(file)) {
+    console.log('Iosevka already loaded');
+  } else {
+    console.log('Downloading Iosevka...');
+    const iosevkaContents = (await axios.get(urls.iosevka, { responseType: 'arraybuffer' })).data;
+    const iosevkaZipfile = await util.promisify(yauzl.fromBuffer)(iosevkaContents);
+    await new Promise((resolve, reject) => {
+      iosevkaZipfile.on('entry', entry => {
+        if (entry.fileName === 'ttf/iosevka-regular.ttf') {
+          iosevkaZipfile.openReadStream(entry, (err, stream) => {
+            if (err) {
+              return reject(err);
+            }
+
+            const writeStream = fs.createWriteStream(file);
+            stream.pipe(writeStream);
+            writeStream.on('close', () => resolve());
+          });
+        }
+      });
+    });
+  }
+}
+
+download();
+
+process.on('unhandledRejection', e => {
+  console.error(e);
+  process.exit(1);
+});

addons/xterm-addon-ligatures/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "xterm-addon-ligatures",
+  "version": "0.5.0",
+  "description": "Add support for programming ligatures to xterm.js",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/xterm-addon-ligatures.js",
+  "types": "typings/xterm-addon-ligatures.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js",
+  "engines": {
+    "node": ">8.0.0"
+  },
+  "scripts": {
+    "prepare": "node bin/download-fonts.js",
+    "build": "tsc -p src",
+    "watch": "tsc -w -p src",
+    "prepackage": "npm run build",
+    "package": "webpack",
+    "pretest": "npm run build",
+    "test": "nyc mocha out/**/*.test.js",
+    "prepublish": "npm run package"
+  },
+  "keywords": [
+    "font",
+    "ligature",
+    "xterm",
+    "xterm.js",
+    "terminal"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "font-finder": "^1.1.0",
+    "font-ligatures": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/sinon": "^5.0.1",
+    "axios": "^0.18.0",
+    "mkdirp": "0.5.5",
+    "sinon": "6.3.5",
+    "yauzl": "^2.10.0"
+  },
+  "peerDependencies": {
+    "xterm": "^4.0.0"
+  }
+}

addons/xterm-addon-ligatures/src/LigaturesAddon.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal } from 'xterm';
+import { enableLigatures } from '.';
+
+export interface ITerminalAddon {
+  activate(terminal: Terminal): void;
+  dispose(): void;
+}
+
+export class LigaturesAddon implements ITerminalAddon {
+  constructor() {}
+
+  public activate(terminal: Terminal): void {
+    enableLigatures(terminal);
+  }
+
+  public dispose(): void {}
+}
+

addons/xterm-addon-ligatures/src/font.ts

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { FontList } from 'font-finder';
+import { Font, loadBuffer, loadFile } from 'font-ligatures';
+
+import parse from './parse';
+
+interface IFontMetadata {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  blob: () => Promise<Blob>;
+}
+
+interface IFontAccessNavigator {
+  fonts: {
+    query: () => Promise<IFontMetadata[]>;
+  };
+  permissions: {
+    request?: (permission: { name: string }) => Promise<{state: string}>;
+  };
+}
+
+let fontsPromise: Promise<FontList | Record<string, IFontMetadata[]>> | undefined = undefined;
+
+/**
+ * Loads the font ligature wrapper for the specified font family if it could be
+ * resolved, throwing if it is unable to find a suitable match.
+ * @param fontFamily The CSS font family definition to resolve
+ * @param cacheSize The size of the ligature cache to maintain if the font is resolved
+ */
+export default async function load(fontFamily: string, cacheSize: number): Promise<Font | undefined> {
+  if (!fontsPromise) {
+    // Web environment that supports font access API
+    if (typeof navigator !== 'undefined' && 'fonts' in navigator) {
+      try {
+        const status = await (navigator as IFontAccessNavigator).permissions.request?.({
+          name: 'local-fonts'
+        });
+        if (status && status.state !== 'granted') {
+          throw new Error('Permission to access local fonts not granted.');
+        }
+      } catch (err) {
+        // A `TypeError` indicates the 'local-fonts'
+        // permission is not yet implemented, so
+        // only `throw` if this is _not_ the problem.
+        if (err.name !== 'TypeError') {
+          throw err;
+        }
+      }
+      const fonts: Record<string, IFontMetadata[]> = {};
+      try {
+        const fontsIterator = await (navigator as IFontAccessNavigator).fonts.query();
+        for (const metadata of fontsIterator) {
+          if (!fonts.hasOwnProperty(metadata.family)) {
+            fonts[metadata.family] = [];
+          }
+          fonts[metadata.family].push(metadata);
+        }
+        fontsPromise = Promise.resolve(fonts);
+      } catch (err) {
+        console.error(err.name, err.message);
+      }
+    }
+    // Node environment or no font access API
+    else {
+      try {
+        fontsPromise = (await import('font-finder')).list();
+      } catch (err) {
+        // No-op
+      }
+    }
+    if (!fontsPromise) {
+      fontsPromise = Promise.resolve({});
+    }
+  }
+
+  const fonts = await fontsPromise;
+  for (const family of parse(fontFamily)) {
+    // If we reach one of the generic font families, the font resolution
+    // will end for the browser and we can't determine the specific font
+    // used. Throw.
+    if (genericFontFamilies.includes(family)) {
+      return undefined;
+    }
+
+    if (fonts.hasOwnProperty(family) && fonts[family].length > 0) {
+      const font = fonts[family][0];
+      if ('blob' in font) {
+        return loadBuffer(await (await font.blob()).arrayBuffer(), { cacheSize });
+      }
+      return await loadFile(font.path, { cacheSize });
+    }
+  }
+
+  // If none of the fonts could resolve, throw an error
+  return undefined;
+}
+
+// https://drafts.csswg.org/css-fonts-4/#generic-font-families
+const genericFontFamilies = [
+  'serif',
+  'sans-serif',
+  'cursive',
+  'fantasy',
+  'monospace',
+  'system-ui',
+  'emoji',
+  'math',
+  'fangsong'
+];

addons/xterm-addon-ligatures/src/index.test.ts

@@ -0,0 +1,222 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import * as path from 'path';
+import * as sinon from 'sinon';
+import { assert } from 'chai';
+import * as fontFinder from 'font-finder';
+import * as fontLigatures from 'font-ligatures';
+
+import * as ligatureSupport from '.';
+
+describe('xterm-addon-ligatures', () => {
+  let onRefresh: sinon.SinonStub;
+  let term: MockTerminal;
+
+  // -> forms a ligature in Fira Code and Iosevka, but www only forms a ligature
+  // in Fira Code
+  const input = 'a -> b www c';
+
+  before(() => {
+    sinon.stub(fontFinder, 'list').returns(Promise.resolve({
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'Fira Code': [{
+        path: path.join(__dirname, '../fonts/firaCode.otf'),
+        style: fontFinder.Style.Regular,
+        type: fontFinder.Type.Monospace,
+        weight: 400
+      }],
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'Iosevka': [{
+        path: path.join(__dirname, '../fonts/iosevka.ttf'),
+        style: fontFinder.Style.Regular,
+        type: fontFinder.Type.Monospace,
+        weight: 400
+      }],
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'Nonexistant Font': [{
+        path: path.join(__dirname, '../fonts/nonexistant.ttf'),
+        style: fontFinder.Style.Regular,
+        type: fontFinder.Type.Monospace,
+        weight: 400
+      }]
+    } as fontFinder.FontList));
+  });
+
+  beforeEach(() => {
+    onRefresh = sinon.stub();
+    term = new MockTerminal(onRefresh);
+    ligatureSupport.enableLigatures(term as any);
+  });
+
+  it('registers itself correctly', () => {
+    const term = new MockTerminal(sinon.spy());
+    assert.isUndefined(term.joiner);
+    ligatureSupport.enableLigatures(term as any);
+    assert.isFunction(term.joiner);
+  });
+
+  it('registers itself correctly when called directly', () => {
+    const term = new MockTerminal(sinon.spy());
+    assert.isUndefined(term.joiner);
+    ligatureSupport.enableLigatures(term as any);
+    assert.isFunction(term.joiner);
+  });
+
+  it('returns an empty set of ranges on the first call while the font is loading', () => {
+    assert.deepEqual(term.joiner!(input), []);
+  });
+
+  it('returns the correct set of ranges once the font has loaded', done => {
+    assert.deepEqual(term.joiner!(input), []);
+    onRefresh.callsFake(() => {
+      assert.deepEqual(term.joiner!(input), [[2, 4], [7, 10]]);
+      done();
+    });
+  });
+
+  it('handles quoted font names', done => {
+    term.setOption('fontFamily', '"Fira Code", monospace');
+    assert.deepEqual(term.joiner!(input), []);
+    onRefresh.callsFake(() => {
+      assert.deepEqual(term.joiner!(input), [[2, 4], [7, 10]]);
+      done();
+    });
+  });
+
+  it('falls back to later fonts if earlier ones are not present', done => {
+    term.setOption('fontFamily', 'notinstalled, Fira Code, monospace');
+    assert.deepEqual(term.joiner!(input), []);
+    onRefresh.callsFake(() => {
+      assert.deepEqual(term.joiner!(input), [[2, 4], [7, 10]]);
+      done();
+    });
+  });
+
+  it('uses the current font value', done => {
+    // The first three calls are all synchronous so that we don't allow time for
+    // any fonts to load while we're switching things around
+    term.setOption('fontFamily', 'Fira Code');
+    assert.deepEqual(term.joiner!(input), []);
+    term.setOption('fontFamily', 'notinstalled');
+    assert.deepEqual(term.joiner!(input), []);
+    term.setOption('fontFamily', 'Iosevka');
+    assert.deepEqual(term.joiner!(input), []);
+    onRefresh.callsFake(() => {
+      assert.deepEqual(term.joiner!(input), [[2, 4]]);
+
+      // And switch it back to Fira Code for good measure
+      term.setOption('fontFamily', 'Fira Code');
+
+      // At this point, we haven't loaded the new font, so the result reverts
+      // back to empty until that happens
+      assert.deepEqual(term.joiner!(input), []);
+
+      onRefresh.callsFake(() => {
+        assert.deepEqual(term.joiner!(input), [[2, 4], [7, 10]]);
+        done();
+      });
+    });
+  });
+
+  it('allows multiple terminal instances that use different fonts', done => {
+    const onRefresh2 = sinon.stub();
+    const term2 = new MockTerminal(onRefresh2);
+    term2.setOption('fontFamily', 'Iosevka');
+    ligatureSupport.enableLigatures(term2 as any);
+
+    assert.deepEqual(term.joiner!(input), []);
+    onRefresh.callsFake(() => {
+      assert.deepEqual(term.joiner!(input), [[2, 4], [7, 10]]);
+      assert.deepEqual(term2.joiner!(input), []);
+      onRefresh2.callsFake(() => {
+        assert.deepEqual(term2.joiner!(input), [[2, 4]]);
+        assert.deepEqual(term.joiner!(input), [[2, 4], [7, 10]]);
+        done();
+      });
+    });
+  });
+
+  it('fails if it finds but cannot load the font', async () => {
+    term.setOption('fontFamily', 'Nonexistant Font, monospace');
+    assert.deepEqual(term.joiner!(input), []);
+    await delay(500);
+    assert.isTrue(onRefresh.notCalled);
+    assert.throws(() => term.joiner!(input));
+  });
+
+  it('returns nothing if the font is not present on the system', async () => {
+    term.setOption('fontFamily', 'notinstalled');
+    assert.deepEqual(term.joiner!(input), []);
+    await delay(500);
+    assert.isTrue(onRefresh.notCalled);
+    assert.deepEqual(term.joiner!(input), []);
+  });
+
+  it('returns nothing if no specific font is specified', async () => {
+    term.setOption('fontFamily', 'monospace');
+    assert.deepEqual(term.joiner!(input), []);
+    await delay(500);
+    assert.isTrue(onRefresh.notCalled);
+    assert.deepEqual(term.joiner!(input), []);
+  });
+
+  it('returns nothing if no fonts are provided', async () => {
+    term.setOption('fontFamily', '');
+    assert.deepEqual(term.joiner!(input), []);
+    await delay(500);
+    assert.isTrue(onRefresh.notCalled);
+    assert.deepEqual(term.joiner!(input), []);
+  });
+
+  it('fails when given malformed inputs', async () => {
+    term.setOption('fontFamily', {} as any);
+    assert.deepEqual(term.joiner!(input), []);
+    await delay(500);
+    assert.isTrue(onRefresh.notCalled);
+    assert.throws(() => term.joiner!(input));
+  });
+
+  it('ensures no empty errors are thrown', async () => {
+    sinon.stub(fontLigatures, 'loadFile').callsFake(async () => { throw undefined; });
+    term.setOption('fontFamily', 'Iosevka');
+    assert.deepEqual(term.joiner!(input), []);
+    await delay(500);
+    assert.isTrue(onRefresh.notCalled);
+    assert.throws(() => term.joiner!(input), 'Failure while loading font');
+    (fontLigatures.loadFile as sinon.SinonStub).restore();
+  });
+});
+
+class MockTerminal {
+  private _options: { [name: string]: string | number } = {
+    fontFamily: 'Fira Code, monospace',
+    rows: 50
+  };
+  public joiner?: (text: string) => [number, number][];
+  public refresh: (start: number, end: number) => void;
+
+  constructor(onRefresh: (start: number, end: number) => void) {
+    this.refresh = onRefresh;
+  }
+
+  public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
+    this.joiner = handler;
+    return 1;
+  }
+  public deregisterCharacterJoiner(id: number): void {
+    this.joiner = undefined;
+  }
+  public setOption(name: string, value: string | number): void {
+    this._options[name] = value;
+  }
+  public getOption(name: string): string | number {
+    return this._options[name];
+  }
+}
+
+function delay(delayMs: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, delayMs));
+}

addons/xterm-addon-ligatures/src/index.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal } from 'xterm';
+import { Font } from 'font-ligatures';
+
+import load from './font';
+
+const enum LoadingState {
+  UNLOADED,
+  LOADING,
+  LOADED,
+  FAILED
+}
+
+// Caches 100K characters worth of ligatures. In practice this works out to
+// about 650 KB worth of cache, when a moderate number of ligatures are present.
+const CACHE_SIZE = 100000;
+
+/**
+ * Enable ligature support for the provided Terminal instance. To function
+ * properly, this must be called after `open()` is called on the therminal. If
+ * the font currently in use supports ligatures, the terminal will automatically
+ * start to render them.
+ * @param term Terminal instance from xterm.js
+ */
+export function enableLigatures(term: Terminal): void {
+  let currentFontName: string | undefined = undefined;
+  let font: Font | undefined = undefined;
+  let loadingState: LoadingState = LoadingState.UNLOADED;
+  let loadError: any | undefined = undefined;
+
+  term.registerCharacterJoiner((text: string): [number, number][] => {
+    // If the font hasn't been loaded yet, load it and return an empty result
+    const termFont = term.getOption('fontFamily');
+    if (
+      termFont &&
+      (loadingState === LoadingState.UNLOADED || currentFontName !== termFont)
+    ) {
+      font = undefined;
+      loadingState = LoadingState.LOADING;
+      currentFontName = termFont;
+      const currentCallFontName = currentFontName;
+
+      load(currentCallFontName, CACHE_SIZE)
+        .then(f => {
+          // Another request may have come in while we were waiting, so make
+          // sure our font is still vaild.
+          if (currentCallFontName === term.getOption('fontFamily')) {
+            loadingState = LoadingState.LOADED;
+            font = f;
+
+            // Only refresh things if we actually found a font
+            if (f) {
+              term.refresh(0, term.getOption('rows') - 1);
+            }
+          }
+        })
+        .catch(e => {
+          // Another request may have come in while we were waiting, so make
+          // sure our font is still vaild.
+          if (currentCallFontName === term.getOption('fontFamily')) {
+            loadingState = LoadingState.FAILED;
+            font = undefined;
+            loadError = e;
+          }
+        });
+    }
+
+    if (font && loadingState === LoadingState.LOADED) {
+      // We clone the entries to avoid the internal cache of the ligature finder
+      // getting messed up.
+      return font.findLigatureRanges(text).map<[number, number]>(
+        range => [range[0], range[1]]
+      );
+    }
+    if (loadingState === LoadingState.FAILED) {
+      throw loadError || new Error('Failure while loading font');
+    }
+
+    return [];
+  });
+}

addons/xterm-addon-ligatures/src/parse.test.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+
+import parse from './parse';
+
+// TODO: integrate tests from http://test.csswg.org/suites/css-fonts-4_dev/nightly-unstable/
+describe('parse', () => {
+  it('parses individual families', () => {
+    assert.deepEqual(parse('monospace'), ['monospace']);
+  });
+
+  it('parses multiple families', () => {
+    assert.deepEqual(parse('Arial, Verdana, serif'), ['Arial', 'Verdana', 'serif']);
+  });
+
+  it('parses quoted families', () => {
+    assert.deepEqual(parse('"Times New Roman", serif'), ['Times New Roman', 'serif']);
+  });
+
+  it('parses single quoted families', () => {
+    assert.deepEqual(parse('\'Times New Roman\', serif'), ['Times New Roman', 'serif']);
+  });
+
+  it('parses families with spaces in their names', () => {
+    assert.deepEqual(parse('Times New Roman, serif'), ['Times New Roman', 'serif']);
+  });
+
+  it('collapses multiple spaces together in identifiers', () => {
+    assert.deepEqual(parse('Times   New Roman, serif'), ['Times New Roman', 'serif']);
+  });
+
+  it('does not collapse multiple spaces together in quoted strings', () => {
+    assert.deepEqual(parse('"Times   New Roman", serif'), ['Times   New Roman', 'serif']);
+  });
+
+  it('handles escaped characters in strings', () => {
+    assert.deepEqual(parse('"quote \\" slash \\\\ slashquote \\\\\\"", serif'), ['quote " slash \\ slashquote \\"', 'serif']);
+  });
+
+  it('fails if a family has an unterminated string', () => {
+    assert.throws(() => parse('"Unterminated, serif'));
+  });
+
+  it('handles unicode escape sequences', () => {
+    assert.deepEqual(parse('"space\\20 between", serif'), ['space between', 'serif']);
+  });
+
+  it('swallows only the first space after a unicode escape', () => {
+    assert.deepEqual(parse('"two-space\\20  between", serif'), ['two-space  between', 'serif']);
+  });
+
+  it('automatically ends the unicode escape after six digits', () => {
+    assert.deepEqual(parse('space\\000020between, serif'), ['space between', 'serif']);
+  });
+
+  it('handles unicode escapes at the end of the family', () => {
+    assert.deepEqual(parse('endswithbrace \\7b, serif'), ['endswithbrace {', 'serif']);
+  });
+
+  it('handles unicode escapes at the end of the input', () => {
+    assert.deepEqual(parse('endswithbrace \\7b'), ['endswithbrace {']);
+  });
+
+  it('handles other escaped characters in identifiers', () => {
+    assert.deepEqual(parse('has\\,comma'), ['has,comma']);
+  });
+
+  it('swallows escaped newlines in strings', () => {
+    assert.deepEqual(parse('"multi \\\nline", serif'), ['multi line', 'serif']);
+  });
+});

addons/xterm-addon-ligatures/src/parse.ts

@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+interface IParseContext {
+  input: string;
+  offset: number;
+}
+
+/**
+ * Parses a CSS font family value, returning the component font families
+ * contained within.
+ *
+ * @param family The CSS font family input string to parse
+ */
+export default function parse(family: string): string[] {
+  if (typeof family !== 'string') {
+    throw new Error('Font family must be a string');
+  }
+
+  const context: IParseContext = {
+    input: family,
+    offset: 0
+  };
+
+  const families = [];
+  let currentFamily = '';
+
+  // Work through the input character by character until there are none left.
+  // This lexing and parsing in one pass.
+  while (context.offset < context.input.length) {
+    const char = context.input[context.offset++];
+    switch (char) {
+      // String
+      case '\'':
+      case '"':
+        currentFamily += parseString(context, char);
+        break;
+      // End of family
+      case ',':
+        families.push(currentFamily);
+        currentFamily = '';
+        break;
+      default:
+        // Identifiers (whitespace between families is swallowed)
+        if (!/\s/.test(char)) {
+          context.offset--;
+          currentFamily += parseIdentifier(context);
+          families.push(currentFamily);
+          currentFamily = '';
+        }
+    }
+  }
+
+  return families;
+}
+
+/**
+ * Parse a CSS string.
+ *
+ * @param context Parsing input and offset
+ * @param quoteChar The quote character for the string (' or ")
+ */
+function parseString(context: IParseContext, quoteChar: '\'' | '"'): string {
+  let str = '';
+  let escaped = false;
+  while (context.offset < context.input.length) {
+    const char = context.input[context.offset++];
+    if (escaped) {
+      if (/[\dA-Fa-f]/.test(char)) {
+        // Unicode escape
+        context.offset--;
+        str += parseUnicode(context);
+      } else if (char !== '\n') {
+        // Newlines are ignored if escaped. Other characters are used as is.
+        str += char;
+      }
+      escaped = false;
+    } else {
+      switch (char) {
+        // Terminated quote
+        case quoteChar:
+          return str;
+        // Begin escape
+        case '\\':
+          escaped = true;
+          break;
+        // Add character to string
+        default:
+          str += char;
+      }
+    }
+  }
+
+  throw new Error('Unterminated string');
+}
+
+/**
+ * Parse a CSS custom identifier.
+ *
+ * @param context Parsing input and offset
+ */
+function parseIdentifier(context: IParseContext): string {
+  let str = '';
+  let escaped = false;
+  while (context.offset < context.input.length) {
+    const char = context.input[context.offset++];
+    if (escaped) {
+      if (/[\dA-Fa-f]/.test(char)) {
+        // Unicode escape
+        context.offset--;
+        str += parseUnicode(context);
+      } else {
+        // Everything else is used as is
+        str += char;
+      }
+      escaped = false;
+    } else {
+      switch (char) {
+        // Begin escape
+        case '\\':
+          escaped = true;
+          break;
+        // Terminate identifier
+        case ',':
+          return str;
+        default:
+          if (/\s/.test(char)) {
+            // Whitespace is collapsed into a single space within an identifier
+            if (!str.endsWith(' ')) {
+              str += ' ';
+            }
+          } else {
+            // Add other characters directly
+            str += char;
+          }
+      }
+    }
+  }
+
+  return str;
+}
+
+/**
+ * Parse a CSS unicode escape.
+ *
+ * @param context Parsing input and offset
+ */
+function parseUnicode(context: IParseContext): string {
+  let str = '';
+  while (context.offset < context.input.length) {
+    const char = context.input[context.offset++];
+    if (/\s/.test(char)) {
+      // The first whitespace character after a unicode escape indicates the end
+      // of the escape and is swallowed.
+      return unicodeToString(str);
+    }
+    if (str.length >= 6 || !/[\dA-Fa-f]/.test(char)) {
+      // If the next character is not a valid hex digit or we have reached the
+      // maximum of 6 digits in the escape, terminate the escape.
+      context.offset--;
+      return unicodeToString(str);
+    }
+
+    // Otherwise, just add it to the escape
+    str += char;
+  }
+
+  return unicodeToString(str);
+}
+
+/**
+ * Convert a unicode code point from a hex string to a utf8 string.
+ *
+ * @param codePoint Unicode code point represented as a hex string
+ */
+function unicodeToString(codePoint: string): string {
+  return String.fromCodePoint(parseInt(codePoint, 16));
+}

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

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "sourceMap": true,
+    "outDir": "../out",
+    "rootDir": ".",
+    "strict": true,
+    "noUnusedLocals": true,
+    "preserveWatchOutput": true,
+    "types": [
+      "../../../node_modules/@types/mocha"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ]
+}

addons/xterm-addon-ligatures/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" }
+  ]
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * This contains the type declarations for the xterm-addon-ligatures library.
+ * Note that some interfaces may differ between this file and the actual
+ * implementation in src/, that's because this file declares the *public* API
+ * which is intended to be stable and consumed by external programs.
+ */
+
+import { Terminal, ITerminalAddon } from 'xterm';
+
+declare module 'xterm-addon-ligatures' {
+  /**
+   * An xterm.js addon that enables web links.
+   */
+  export class LigaturesAddon implements ITerminalAddon {
+    /**
+     * Creates a new ligatures addon.
+     */
+    constructor();
+
+    /**
+     * Activates the addon
+     * @param terminal The terminal the addon is being loaded in.
+     */
+    public activate(terminal: Terminal): void;
+
+    /**
+     * Disposes the addon.
+     */
+    public dispose(): void;
+  }
+}

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

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const path = require('path');
+
+const addonName = 'LigaturesAddon';
+const mainFile = 'xterm-addon-ligatures.js';
+
+module.exports = {
+  entry: `./out/${addonName}.js`,
+  devtool: 'source-map',
+  target: 'electron-renderer',
+  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',
+  externals: {
+    'font-finder': 'font-finder',
+    'stream': 'stream',
+    'os': 'os',
+    'util': 'util'
+  },
+  resolve: {
+    // The ligature modules contains fallbacks for node environments, we never want to browserify them
+    fallback: {
+      stream: false,
+      util: false,
+      os: false,
+      path: false
+    }
+  }
+};

addons/xterm-addon-ligatures/yarn.lock

@@ -0,0 +1,241 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@sinonjs/commons@^1", "@sinonjs/commons@^1.0.2", "@sinonjs/commons@^1.3.0", "@sinonjs/commons@^1.7.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"
+  integrity sha512-wEj54PfsZ5jGSwMX68G8ZXFawcSglQSXqCftWX3ec8MDUzQdHgcKvw97awHbY0efQEL5iKUOAmmVtoYgmrSG4Q==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/formatio@^3.0.0", "@sinonjs/formatio@^3.2.1":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-3.2.2.tgz#771c60dfa75ea7f2d68e3b94c7e888a78781372c"
+  integrity sha512-B8SEsgd8gArBLMD6zpRw3juQ2FVSsmdd7qlevyDqzS9WTCtvF55/gAL+h6gue8ZvPYcdiPdvueM/qm//9XzyTQ==
+  dependencies:
+    "@sinonjs/commons" "^1"
+    "@sinonjs/samsam" "^3.1.0"
+
+"@sinonjs/samsam@^2.1.2":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-2.1.3.tgz#62cf2a9b624edc795134135fe37fc2ae8ea36be3"
+  integrity sha512-8zNeBkSKhU9a5cRNbpCKau2WWPfan+Q2zDlcXvXyhn9EsMqgYs4qzo0XHNVlXC6ABQL8fT6nV+zzo5RTHJzyXw==
+
+"@sinonjs/samsam@^3.1.0":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-3.3.3.tgz#46682efd9967b259b81136b9f120fd54585feb4a"
+  integrity sha512-bKCMKZvWIjYD0BLGnNrxVuw4dkWCYsLqFOUWw8VgKF/+5Y+mE7LfHWPIYoDXowH+3a9LsWDMo0uAP8YDosPvHQ==
+  dependencies:
+    "@sinonjs/commons" "^1.3.0"
+    array-from "^2.1.1"
+    lodash "^4.17.15"
+
+"@sinonjs/text-encoding@^0.7.1":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
+  integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
+
+"@types/sinon@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-5.0.1.tgz#a15b36ec42f1f53166617491feabd1734cb03e21"
+
+array-from@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
+  integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=
+
+axios@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3"
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
+buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
+diff@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  dependencies:
+    pend "~1.2.0"
+
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  dependencies:
+    debug "=3.1.0"
+
+font-finder@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/font-finder/-/font-finder-1.0.4.tgz#2ca944954dd8d0e1b5bdc4c596cc08607761d89b"
+  dependencies:
+    get-system-fonts "^2.0.0"
+    promise-stream-reader "^1.0.1"
+
+font-finder@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/font-finder/-/font-finder-1.1.0.tgz#2bff2b2762acba720239c8bec898a96daae90858"
+  integrity sha512-wpCL2uIbi6GurJbU7ZlQ3nGd61Ho+dSU6U83/xJT5UPFfN35EeCW/rOtS+5k+IuEZu2SYmHzDIPL9eA5tSYRAw==
+  dependencies:
+    get-system-fonts "^2.0.0"
+    promise-stream-reader "^1.0.1"
+
+font-ligatures@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/font-ligatures/-/font-ligatures-1.4.0.tgz#6a7b370d96be1358dddfad67830e82fbfd59e6dc"
+  integrity sha512-n7DFnnEpJ0NrVoLqZIL4tMGVs+CnFwQc92m80LWyrbgAFO4x234+t2/H9o4eOYA1eh6ta9dZAEEsJAwsBdNezA==
+  dependencies:
+    font-finder "^1.0.3"
+    lru-cache "^6.0.0"
+    opentype.js "^0.8.0"
+
+get-system-fonts@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/get-system-fonts/-/get-system-fonts-2.0.0.tgz#a43b9a33f05c0715a60176d2aad5ce6e98f0a3c6"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
+is-buffer@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+just-extend@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.1.0.tgz#7278a4027d889601640ee0ce0e5a00b992467da4"
+  integrity sha512-ApcjaOdVTJ7y4r08xI5wIqpvwS48Q0PBG4DJROcEkH1f8MdAiNFyFxz3xoL0LWAVwjrwPYZdVHHxhRHcx/uGLA==
+
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
+lodash@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+lolex@^2.7.5:
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.7.5.tgz#113001d56bfc7e02d56e36291cc5c413d1aa0733"
+  integrity sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==
+
+lolex@^5.0.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mkdirp@0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nise@^1.4.5:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-1.5.3.tgz#9d2cfe37d44f57317766c6e9408a359c5d3ac1f7"
+  integrity sha512-Ymbac/94xeIrMf59REBPOv0thr+CJVFMhrlAkW/gjCIE58BGQdCj0x7KRCb3yz+Ga2Rz3E9XXSvUyyxqqhjQAQ==
+  dependencies:
+    "@sinonjs/formatio" "^3.2.1"
+    "@sinonjs/text-encoding" "^0.7.1"
+    just-extend "^4.0.2"
+    lolex "^5.0.1"
+    path-to-regexp "^1.7.0"
+
+opentype.js@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-0.8.0.tgz#acabcfa1642fbe894a3e4d759e43ba694e02bd35"
+  dependencies:
+    tiny-inflate "^1.0.2"
+
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+
+promise-stream-reader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-stream-reader/-/promise-stream-reader-1.0.1.tgz#4e793a79c9d49a73ccd947c6da9c127f12923649"
+
+sinon@6.3.5:
+  version "6.3.5"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-6.3.5.tgz#0f6d6a5b4ebaad1f6e8e019395542d1d02c144a0"
+  integrity sha512-xgoZ2gKjyVRcF08RrIQc+srnSyY1JDJtxu3Nsz07j1ffjgXoY6uPLf/qja6nDBZgzYYEovVkFryw2+KiZz11xQ==
+  dependencies:
+    "@sinonjs/commons" "^1.0.2"
+    "@sinonjs/formatio" "^3.0.0"
+    "@sinonjs/samsam" "^2.1.2"
+    diff "^3.5.0"
+    lodash.get "^4.4.2"
+    lolex "^2.7.5"
+    nise "^1.4.5"
+    supports-color "^5.5.0"
+    type-detect "^4.0.8"
+
+supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+tiny-inflate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.2.tgz#93d9decffc8805bd57eae4310f0b745e9b6fb3a7"
+
+type-detect@4.0.8, type-detect@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"

addons/xterm-addon-search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-search",
-  "version": "0.4.0",
+  "version": "0.8.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
   "repository": "https://github.com/xtermjs/xterm.js",
   "license": "MIT",
   "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package"

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
@@ -110,8 +110,12 @@ export class SearchAddon implements ITerminalAddon {
       }
     }
 
-    // If there is only one result, return true.
-    if (!result && currentSelection) return true;
+    // If there is only one result, wrap back and return selection if it exists.
+    if (!result && currentSelection) {
+      searchPosition.startRow = currentSelection.startRow;
+      searchPosition.startCol = 0;
+      result = this._findInLine(term, searchPosition, searchOptions);
+    }
 
     // Set selection and scroll if a result was found
     return this._selectResult(result);
@@ -135,7 +139,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;
@@ -154,8 +158,15 @@ export class SearchAddon implements ITerminalAddon {
     };
 
     if (incremental) {
+      // Try to expand selection to right first.
       result = this._findInLine(term, searchPosition, searchOptions, false);
-      if (!(result && result.row === startRow && result.col === startCol)) {
+      const isOldResultHighlighted = result && result.row === startRow && result.col === startCol;
+      if (!isOldResultHighlighted) {
+        // If selection was not able to be expanded to the right, then try reverse search
+        if (currentSelection) {
+          searchPosition.startRow = currentSelection.endRow;
+          searchPosition.startCol = currentSelection.endColumn;
+        }
         result = this._findInLine(term, searchPosition, searchOptions, true);
       }
     } else {
@@ -174,8 +185,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 +208,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());
     }
@@ -229,8 +240,8 @@ export class SearchAddon implements ITerminalAddon {
    * @param term the substring that starts at searchIndex
    */
   private _isWholeWord(searchIndex: number, line: string, term: string): boolean {
-    return (((searchIndex === 0) || (NON_WORD_CHARACTERS.indexOf(line[searchIndex - 1]) !== -1)) &&
-      (((searchIndex + term.length) === line.length) || (NON_WORD_CHARACTERS.indexOf(line[searchIndex + term.length]) !== -1)));
+    return ((searchIndex === 0) || (NON_WORD_CHARACTERS.includes(line[searchIndex - 1]))) &&
+      (((searchIndex + term.length) === line.length) || (NON_WORD_CHARACTERS.includes(line[searchIndex + term.length])));
   }
 
   /**
@@ -241,6 +252,7 @@ export class SearchAddon implements ITerminalAddon {
    * @param term The search term.
    * @param position The position to start the search.
    * @param searchOptions Search options.
+   * @param isReverseSearch Whether the search should start from the right side of the terminal and search to the left.
    * @return The search result if it was found.
    */
   protected _findInLine(term: string, searchPosition: ISearchPosition, searchOptions: ISearchOptions = {}, isReverseSearch: boolean = false): ISearchResult | undefined {
@@ -249,8 +261,8 @@ 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);
-    if (firstLine && firstLine.isWrapped) {
+    const firstLine = terminal.buffer.active.getLine(row);
+    if (firstLine?.isWrapped) {
       if (isReverseSearch) {
         searchPosition.startCol += terminal.cols;
         return;
@@ -311,7 +323,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++) {
@@ -354,9 +366,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,9 +392,9 @@ 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;
-      scroll = scroll - Math.floor(terminal.rows / 2);
+    if (result.row >= (terminal.buffer.active.viewportY + terminal.rows) || result.row < terminal.buffer.active.viewportY) {
+      let scroll = result.row - terminal.buffer.active.viewportY;
+      scroll -= Math.floor(terminal.rows / 2);
       terminal.scrollLines(scroll);
     }
     return true;

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

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

addons/xterm-addon-search/test/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';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/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({
+      headless: process.argv.includes('--headless')
     });
-    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);
@@ -113,12 +111,19 @@ describe('Search Tests', function (): void {
       let fixture: string;
       before(async () => {
         const rawFixture = await new Promise<Buffer>(r => readFile(resolve(__dirname, '../fixtures/issue-2444'), (err, data) => r(data)));
-        fixture = rawFixture.toString()
-          .replace(/\n/g, '\\n\\r')
+        if (process.platform === 'win32') {
+          fixture = rawFixture.toString()
+            .replace(/\n/g, '\\n')
+            .replace(/\r/g, '\\r');
+        } else {
+          fixture = rawFixture.toString()
+            .replace(/\n/g, '\\n\\r');
+        }
+        fixture = fixture
           .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 +157,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 +194,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/test/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [
+      "es6",
+    ],
+    "rootDir": ".",
+    "outDir": "../out-test",
+    "sourceMap": true,
+    "removeComments": true,
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../node_modules/@types/node",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ]
+}

addons/xterm-addon-search/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}

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

@@ -7,21 +7,21 @@ 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 { Terminal } from 'browser/public/Terminal';
 import { SerializeAddon } from 'SerializeAddon';
 
 class TestTerminal extends Terminal {
-  writeSync(data: string): void {
-    (<any>this)._core.writeSync(data);
+  public 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"', () => {
+perfContext('Terminal: sh -c "dd if=/dev/urandom 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'], {
+    const p = spawn('sh', ['-c', 'dd if=/dev/urandom count=40 bs=1k | hexdump | lolcat -f'], {
       name: 'xterm-256color',
       cols: 80,
       rows: 25,
@@ -35,7 +35,7 @@ perfContext('Terminal: sh -c "dd if=/dev/random count=40 bs=1k | hexdump | lolca
       chunks.push(data as unknown as Buffer);
       length += data.length;
     });
-    await new Promise(resolve => p.on('exit', () => resolve()));
+    await new Promise<void>(resolve => p.on('exit', () => resolve()));
     contentUtf8 = Buffer.concat(chunks, length);
     // translate to content string
     const buffer = new Uint32Array(contentUtf8.length);

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

@@ -11,8 +11,6 @@
     "paths": {
       "common/*": ["../../../src/common/*"],
       "browser/*": ["../../../src/browser/*"],
-      "public/*": ["../../../src/public/*"],
-      "Terminal": ["../../../src/Terminal"],
       "SerializeAddon": ["../src/SerializeAddon"]
     }
   },

addons/xterm-addon-serialize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-serialize",
-  "version": "0.1.1",
+  "version": "0.5.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -9,15 +9,15 @@
   "types": "typings/xterm-addon-serialize.d.ts",
   "license": "MIT",
   "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
     "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"
+    "benchmark-baseline": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json --baseline out-benchmark/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/benchmark/*benchmark.js"
   },
   "peerDependencies": {
-    "xterm": "^3.14.0"
+    "xterm": "^4.0.0"
   }
 }

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

@@ -15,13 +15,13 @@ function constrain(value: number, low: number, high: number): number {
 abstract class BaseSerializeHandler {
   constructor(private _buffer: IBuffer) { }
 
-  serialize(startRow: number, endRow: number): string {
+  public 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);
+    this._beforeSerialize(endRow - startRow, startRow, endRow);
 
     for (let row = startRow; row < endRow; row++) {
       const line = this._buffer.getLine(row);
@@ -36,7 +36,7 @@ abstract class BaseSerializeHandler {
           oldCell = c;
         }
       }
-      this._rowEnd(row);
+      this._rowEnd(row, row === endRow - 1);
     }
 
     this._afterSerialize();
@@ -45,8 +45,8 @@ abstract class BaseSerializeHandler {
   }
 
   protected _nextCell(cell: IBufferCell, oldCell: IBufferCell, row: number, col: number): void { }
-  protected _rowEnd(row: number): void { }
-  protected _beforeSerialize(rows: number): void { }
+  protected _rowEnd(row: number, isLastRow: boolean): void { }
+  protected _beforeSerialize(rows: number, startRow: number, endRow: number): void { }
   protected _afterSerialize(): void { }
   protected _serializeString(): string { return ''; }
 }
@@ -71,27 +71,152 @@ function equalFlags(cell1: IBufferCell, cell2: IBufferCell): boolean {
     && cell1.isDim() === cell2.isDim();
 }
 
+
+
 class StringSerializeHandler extends BaseSerializeHandler {
   private _rowIndex: number = 0;
   private _allRows: string[] = new Array<string>();
+  private _allRowSeparators: string[] = new Array<string>();
   private _currentRow: string = '';
   private _nullCellCount: number = 0;
 
-  constructor(buffer: IBuffer) {
-    super(buffer);
+  // we can see a full colored cell and a null cell that only have background the same style
+  // but the information isn't preserved by null cell itself
+  // so wee need to record it when required.
+  private _cursorStyle: IBufferCell = this._buffer1.getNullCell();
+
+  // where exact the cursor styles comes from
+  // because we can't copy the cell directly
+  // so we remember where the content comes from instead
+  private _cursorStyleRow: number = 0;
+  private _cursorStyleCol: number = 0;
+
+  // this is a null cell for reference for checking whether background is empty or not
+  private _backgroundCell: IBufferCell = this._buffer1.getNullCell();
+
+  private _firstRow: number = 0;
+  private _lastCursorRow: number = 0;
+  private _lastCursorCol: number = 0;
+  private _lastContentCursorRow: number = 0;
+  private _lastContentCursorCol: number = 0;
+
+  constructor(private _buffer1: IBuffer, private _terminal: Terminal) {
+    super(_buffer1);
   }
 
-  protected _beforeSerialize(rows: number): void {
+  protected _beforeSerialize(rows: number, start: number, end: number): void {
     this._allRows = new Array<string>(rows);
+    this._lastContentCursorRow = start;
+    this._lastCursorRow = start;
+    this._firstRow = start;
   }
 
-  protected _rowEnd(row: number): void {
-    this._allRows[this._rowIndex++] = this._currentRow;
+  private _thisRowLastChar: IBufferCell = this._buffer1.getNullCell();
+  private _thisRowLastSecondChar: IBufferCell = this._buffer1.getNullCell();
+  private _nextRowFirstChar: IBufferCell = this._buffer1.getNullCell();
+  protected _rowEnd(row: number, isLastRow: boolean): void {
+    // if there is colorful empty cell at line end, whe must pad it back, or the the color block will missing
+    if (this._nullCellCount > 0 && !equalBg(this._cursorStyle, this._backgroundCell)) {
+      // use clear right to set background.
+      this._currentRow += `\x1b[${this._nullCellCount}X`;
+    }
+
+    let rowSeparator = '';
+
+    // handle row separator
+    if (!isLastRow) {
+      // Enable BCE
+      if (row - this._firstRow >= this._terminal.rows) {
+        this._buffer1.getLine(this._cursorStyleRow)?.getCell(this._cursorStyleCol, this._backgroundCell);
+      }
+
+      // Fetch current line
+      const currentLine = this._buffer1.getLine(row)!;
+      // Fetch next line
+      const nextLine = this._buffer1.getLine(row + 1)!;
+
+      if (!nextLine.isWrapped) {
+        // just insert the line break
+        rowSeparator = '\r\n';
+        // we sended the enter
+        this._lastCursorRow = row + 1;
+        this._lastCursorCol = 0;
+      } else {
+        rowSeparator = '';
+        const thisRowLastChar = currentLine.getCell(currentLine.length - 1, this._thisRowLastChar)!;
+        const thisRowLastSecondChar = currentLine.getCell(currentLine.length - 2, this._thisRowLastSecondChar)!;
+        const nextRowFirstChar = nextLine.getCell(0, this._nextRowFirstChar)!;
+        const isNextRowFirstCharDoubleWidth = nextRowFirstChar.getWidth() > 1;
+
+        // validate whether this line wrap is ever possible
+        // which mean whether cursor can placed at a overflow position (x === row) naturally
+        let isValid = false;
+
+        if (
+          // you must output character to cause overflow, control sequence can't do this
+          nextRowFirstChar.getChars() &&
+          isNextRowFirstCharDoubleWidth ? this._nullCellCount <= 1 : this._nullCellCount <= 0
+        ) {
+          if (
+            // the last character can't be null,
+            // you can't use control sequence to move cursor to (x === row)
+            (thisRowLastChar.getChars() || thisRowLastChar.getWidth() === 0) &&
+            // change background of the first wrapped cell also affects BCE
+            // so we mark it as invalid to simply the process to determine line separator
+            equalBg(thisRowLastChar, nextRowFirstChar)
+          ) {
+            isValid = true;
+          }
+
+          if (
+            // the second to last character can't be null if the next line starts with CJK,
+            // you can't use control sequence to move cursor to (x === row)
+            isNextRowFirstCharDoubleWidth &&
+            (thisRowLastSecondChar.getChars() || thisRowLastSecondChar.getWidth() === 0) &&
+            // change background of the first wrapped cell also affects BCE
+            // so we mark it as invalid to simply the process to determine line separator
+            equalBg(thisRowLastChar, nextRowFirstChar) &&
+            equalBg(thisRowLastSecondChar, nextRowFirstChar)
+          ) {
+            isValid = true;
+          }
+        }
+
+        if (!isValid) {
+          // force the wrap with magic
+          // insert enough character to force the wrap
+          rowSeparator = '-'.repeat(this._nullCellCount + 1);
+          // move back and erase next line head
+          rowSeparator += '\x1b[1D\x1b[1X';
+
+          if (this._nullCellCount > 0) {
+            // do these because we filled the last several null slot, which we shouldn't
+            rowSeparator += '\x1b[A';
+            rowSeparator += `\x1b[${currentLine.length - this._nullCellCount}C`;
+            rowSeparator += `\x1b[${this._nullCellCount}X`;
+            rowSeparator += `\x1b[${currentLine.length - this._nullCellCount}D`;
+            rowSeparator += '\x1b[B';
+          }
+
+          // This is content and need the be serialized even it is invisible.
+          // without this, wrap will be missing from outputs.
+          this._lastContentCursorRow = row + 1;
+          this._lastContentCursorCol = 0;
+
+          // force commit the cursor position
+          this._lastCursorRow = row + 1;
+          this._lastCursorCol = 0;
+        }
+      }
+    }
+
+    this._allRows[this._rowIndex] = this._currentRow;
+    this._allRowSeparators[this._rowIndex++] = rowSeparator;
     this._currentRow = '';
     this._nullCellCount = 0;
   }
 
-  protected _nextCell(cell: IBufferCell, oldCell: IBufferCell, row: number, col: number): void {
+  private _diffStyle(cell: IBufferCell, oldCell: IBufferCell): number[] {
     const sgrSeq: number[] = [];
     const fgChanged = !equalFg(cell, oldCell);
     const bgChanged = !equalBg(cell, oldCell);
@@ -99,7 +224,9 @@ class StringSerializeHandler extends BaseSerializeHandler {
 
     if (fgChanged || bgChanged || flagsChanged) {
       if (cell.isAttributeDefault()) {
-        this._currentRow += '\x1b[0m';
+        if (!oldCell.isAttributeDefault()) {
+          sgrSeq.push(0);
+        }
       } else {
         if (fgChanged) {
           const color = cell.getFgColor();
@@ -131,30 +258,129 @@ class StringSerializeHandler extends BaseSerializeHandler {
       }
     }
 
-    if (sgrSeq.length) {
+    return sgrSeq;
+  }
+
+  protected _nextCell(cell: IBufferCell, oldCell: IBufferCell, row: number, col: number): void {
+    // a width 0 cell don't need to be count because it is just a placeholder after a CJK character;
+    const isPlaceHolderCell = cell.getWidth() === 0;
+
+    if (isPlaceHolderCell) {
+      return;
+    }
+
+    // this cell don't have content
+    const isEmptyCell = cell.getChars() === '';
+
+    const sgrSeq = this._diffStyle(cell, this._cursorStyle);
+
+    // the empty cell style is only assumed to be changed when background changed, because foreground is always 0.
+    const styleChanged = isEmptyCell ? !equalBg(this._cursorStyle, cell) : sgrSeq.length > 0;
+
+    /**
+     *  handles style change
+     */
+    if (styleChanged) {
+      // before update the style, we need to fill empty cell back
+      if (this._nullCellCount > 0) {
+        // use clear right to set background.
+        if (!equalBg(this._cursorStyle, this._backgroundCell)) {
+          this._currentRow += `\x1b[${this._nullCellCount}X`;
+        }
+        // use move right to move cursor.
+        this._currentRow += `\x1b[${this._nullCellCount}C`;
+        this._nullCellCount = 0;
+      }
+
+      this._lastContentCursorRow = this._lastCursorRow = row;
+      this._lastContentCursorCol = this._lastCursorCol = col;
+
       this._currentRow += `\x1b[${sgrSeq.join(';')}m`;
+
+      // update the last cursor style
+      const line = this._buffer1.getLine(row);
+      if (line !== undefined) {
+        line.getCell(col, this._cursorStyle);
+        this._cursorStyleRow = row;
+        this._cursorStyleCol = col;
+      }
     }
 
-    // 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;
-    }
+    /**
+     *  handles actual content
+     */
+    if (isEmptyCell) {
+      this._nullCellCount += cell.getWidth();
+    } else {
+      if (this._nullCellCount > 0) {
+        // we can just assume we have same style with previous one here
+        // because style change is handled by previous stage
+        // use move right when background is empty, use clear right when there is background.
+        if (equalBg(this._cursorStyle, this._backgroundCell)) {
+          this._currentRow += `\x1b[${this._nullCellCount}C`;
+        } else {
+          this._currentRow += `\x1b[${this._nullCellCount}X`;
+          this._currentRow += `\x1b[${this._nullCellCount}C`;
+        }
+        this._nullCellCount = 0;
+      }
 
-    this._currentRow += cell.getChars();
+      this._currentRow += cell.getChars();
+
+      // update cursor
+      this._lastContentCursorRow = this._lastCursorRow = row;
+      this._lastContentCursorCol = this._lastCursorCol = col + cell.getWidth();
+    }
   }
 
   protected _serializeString(): string {
     let rowEnd = this._allRows.length;
-    for (; rowEnd > 0; rowEnd--) {
-      if (this._allRows[rowEnd - 1]) {
-        break;
+
+    // the fixup is only required for data without scrollback
+    // because it will always be placed at last line otherwise
+    if (this._buffer1.length - this._firstRow <= this._terminal.rows) {
+      rowEnd = this._lastContentCursorRow + 1 - this._firstRow;
+      this._lastCursorCol = this._lastContentCursorCol;
+      this._lastCursorRow = this._lastContentCursorRow;
+    }
+
+    let content = '';
+
+    for (let i = 0; i < rowEnd; i++) {
+      content += this._allRows[i];
+      if (i + 1 < rowEnd) {
+        content += this._allRowSeparators[i];
       }
     }
-    return this._allRows.slice(0, rowEnd).join('\r\n');
+
+    // restore the cursor
+    const realCursorRow = this._buffer1.baseY + this._buffer1.cursorY;
+    const realCursorCol = this._buffer1.cursorX;
+
+    const cursorMoved = (realCursorRow !== this._lastCursorRow || realCursorCol !== this._lastCursorCol);
+
+    const moveRight = (offset: number): void => {
+      if (offset > 0) {
+        content += `\u001b[${offset}C`;
+      } else if (offset < 0) {
+        content += `\u001b[${-offset}D`;
+      }
+    };
+    const moveDown = (offset: number): void => {
+      if (offset > 0) {
+        content += `\u001b[${offset}B`;
+      } else if (offset < 0) {
+        content += `\u001b[${-offset}A`;
+      }
+    };
+
+    if (cursorMoved) {
+      moveDown(realCursorRow - this._lastCursorRow);
+      moveRight(realCursorCol - this._lastCursorCol);
+    }
+
+
+    return content;
   }
 }
 
@@ -167,20 +393,33 @@ export class SerializeAddon implements ITerminalAddon {
     this._terminal = terminal;
   }
 
-  public serialize(rows?: number): string {
-    // TODO: Add re-position cursor support
-    // TODO: Add word wrap mode support
+  private _getString(buffer: IBuffer, scrollback?: number): string {
+    const maxRows = buffer.length;
+    const handler = new StringSerializeHandler(buffer, this._terminal!);
+
+    const correctRows = (scrollback === undefined) ? maxRows : constrain(scrollback + this!._terminal!.rows, 0, maxRows);
+    const result = handler.serialize(maxRows - correctRows, maxRows);
+
+    return result;
+  }
+
+  public serialize(scrollback?: number): string {
     // TODO: Add combinedData support
     if (!this._terminal) {
       throw new Error('Cannot use addon until it has been loaded');
     }
 
-    const maxRows = this._terminal.buffer.length;
-    const handler = new StringSerializeHandler(this._terminal.buffer);
+    if (this._terminal.buffer.active.type === 'normal') {
+      return this._getString(this._terminal.buffer.active, scrollback);
+    }
 
-    rows = (rows === undefined) ? maxRows : constrain(rows, 0, maxRows);
+    const normalScreenContent = this._getString(this._terminal.buffer.normal, scrollback);
+    // alt screen don't have scrollback
+    const alternativeScreenContent = this._getString(this._terminal.buffer.alternate, undefined);
 
-    return handler.serialize(maxRows - rows, maxRows);
+    return normalScreenContent
+      + '\u001b[?1049h\u001b[H'
+      + alternativeScreenContent;
   }
 
   public dispose(): void { }

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

@@ -12,15 +12,22 @@
     "removeComments": true,
     "baseUrl": ".",
     "paths": {
-      "common/*": [ "../../../src/common/*" ]
+      "common/*": [
+        "../../../src/common/*"
+      ]
     },
-    "strict": true
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha"
+    ]
   },
   "include": [
     "./**/*",
     "../../../typings/xterm.d.ts"
   ],
   "references": [
-    { "path": "../../../src/common" }
+    {
+      "path": "../../../src/common"
+    }
   ]
 }

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

@@ -3,43 +3,114 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { assert } from 'chai';
-import { ITerminalOptions } from 'xterm';
+import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
+const writeRawSync = (page: any, str: string): Promise<void> => writeSync(page, '\' +' + JSON.stringify(str) + '+ \'');
+
+const testNormalScreenEqual = async (page: any, str: string): Promise<void> => {
+  await writeRawSync(page, str);
+  const originalBuffer = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+  const result = await page.evaluate(`serializeAddon.serialize();`) as string;
+  await page.evaluate(`term.reset();`);
+  await writeRawSync(page, result);
+  const newBuffer = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+  // chai decides -0 and 0 are different number...
+  // and firefox have a bug that output -0 for unknown reason
+  assert.equal(JSON.stringify(originalBuffer), JSON.stringify(newBuffer));
+};
+
 describe('SerializeAddon', () => {
-  before(async function (): Promise<any> {
-    browser = await puppeteer.launch({
-      headless: process.argv.indexOf('--headless') !== -1,
-      args: [`--window-size=${width},${height}`]
+  before(async function(): Promise<any> {
+    const browserType = getBrowserType();
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
     });
-    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({ rows: 10, cols: 10, rendererType: 'dom' });
+    await openTerminal(page, { rows: 10, cols: 10, rendererType: 'dom' });
     await page.evaluate(`
       window.serializeAddon = new SerializeAddon();
       window.term.loadAddon(window.serializeAddon);
+      window.inspectBuffer = (buffer) => {
+        const lines = [];
+        for (let i = 0; i < buffer.length; i++) {
+          // Do this intentionally to get content of underlining source
+          const bufferLine = buffer.getLine(i)._line;
+          lines.push(JSON.stringify(bufferLine));
+        }
+        return {
+          x: buffer.cursorX,
+          y: buffer.cursorY,
+          data: lines
+        };
+      }
     `);
   });
 
   after(async () => await browser.close());
   beforeEach(async () => await page.evaluate(`window.term.reset()`));
 
-  it('empty content', async function (): Promise<any> {
+  it('produce different output when we call test util with different text', async function(): Promise<any> {
+    await writeRawSync(page, '12345');
+    const buffer1 = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+    await page.evaluate(`term.reset();`);
+    await writeRawSync(page, '67890');
+    const buffer2 = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+    assert.throw(() => {
+      assert.equal(JSON.stringify(buffer1), JSON.stringify(buffer2));
+    });
+  });
+
+  it('produce different output when we call test util with different line wrap', async function(): Promise<any> {
+    await writeRawSync(page, '1234567890\r\n12345');
+    const buffer3 = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+    await page.evaluate(`term.reset();`);
+    await writeRawSync(page, '1234567890n12345');
+    const buffer4 = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+    assert.throw(() => {
+      assert.equal(JSON.stringify(buffer3), JSON.stringify(buffer4));
+    });
+  });
+
+  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> {
+  it('unwrap wrapped line', async function(): Promise<any> {
+    const lines = ['123456789123456789'];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('does not unwrap non-wrapped line', async function(): Promise<any> {
+    const lines = [
+      '123456789',
+      '123456789'
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+
+  it('preserve last empty lines', async function(): Promise<any> {
     const cols = 10;
     const lines = [
       '',
@@ -55,10 +126,10 @@ describe('SerializeAddon', () => {
       ''
     ];
     await writeSync(page, lines.join('\\r\\n'));
-    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.slice(0, 8).join('\r\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('digits content', async function (): Promise<any> {
+  it('digits content', async function(): Promise<any> {
     const rows = 10;
     const cols = 10;
     const digitsLine = digitsString(cols);
@@ -67,24 +138,25 @@ describe('SerializeAddon', () => {
     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;
+  it('serialize with half of scrollback', async function(): Promise<any> {
+    const rows = 20;
+    const scrollback = rows - 10;
+    const halfScrollback = scrollback / 2;
     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'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize(${halfScrollback});`), lines.slice(halfScrollback, rows).join('\r\n'));
   });
 
-  it('serialize 0 rows of content', async function (): Promise<any> {
-    const rows = 10;
+  it('serialize 0 rows of scrollback', async function(): Promise<any> {
+    const rows = 20;
     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);`), '');
+    assert.equal(await page.evaluate(`serializeAddon.serialize(0);`), lines.slice(rows - 10, rows).join('\r\n'));
   });
 
-  it('serialize all rows of content with color16', async function (): Promise<any> {
+  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
@@ -101,7 +173,7 @@ describe('SerializeAddon', () => {
     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> {
+  it('serialize all rows of content with fg/bg flags', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
@@ -122,7 +194,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with color256', async function (): Promise<any> {
+  it('serialize all rows of content with color256', async function(): Promise<any> {
     const rows = 32;
     const cols = 10;
     const lines = newArray<string>(
@@ -133,7 +205,7 @@ describe('SerializeAddon', () => {
     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> {
+  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[] = [
@@ -152,7 +224,7 @@ describe('SerializeAddon', () => {
     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> {
+  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[] = [
@@ -174,7 +246,7 @@ describe('SerializeAddon', () => {
     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> {
+  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[] = [
@@ -193,7 +265,7 @@ describe('SerializeAddon', () => {
     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> {
+  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[] = [
@@ -215,7 +287,7 @@ describe('SerializeAddon', () => {
     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> {
+  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[] = [
@@ -234,7 +306,7 @@ describe('SerializeAddon', () => {
     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> {
+  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[] = [
@@ -270,25 +342,154 @@ describe('SerializeAddon', () => {
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), expected.join('\r\n'));
   });
-});
 
-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');
-  }
-}
+  it('serialize CJK correctly', async () => {
+    const lines = [
+      '中文中文',
+      '12中文',
+      '中文12',
+      // This line is going to be wrapped at last character
+      // because it has line length of 11 (1+2*5).
+      // We concat it back without the null cell currently.
+      // But this may be incorrect.
+      // see also #3097
+      '1中文中文中'
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('serialize CJK Mixed with tab correctly', async () => {
+    const lines = [
+      '中文\t12' // CJK mixed with tab
+    ];
+    const expected = [
+      '中文\x1b[4C12'
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), expected.join('\r\n'));
+  });
+
+  it('serialize with alt screen correctly', async () => {
+    const SMCUP = '\u001b[?1049h';
+    const CUP = '\u001b[H';
+
+    const lines = [
+      `1${SMCUP}${CUP}2`
+    ];
+    const expected = [
+      `1${SMCUP}${CUP}2`
+    ];
+
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`window.term.buffer.active.type`), 'alternate');
+    assert.equal(JSON.stringify(await page.evaluate(`serializeAddon.serialize();`)), JSON.stringify(expected.join('\r\n')));
+  });
+
+  it('serialize without alt screen correctly', async () => {
+    const SMCUP = '\u001b[?1049h';
+    const RMCUP = '\u001b[?1049l';
+
+    const lines = [
+      `1${SMCUP}2${RMCUP}`
+    ];
+    const expected = [
+      `1`
+    ];
+
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`window.term.buffer.active.type`), 'normal');
+    assert.equal(JSON.stringify(await page.evaluate(`serializeAddon.serialize();`)), JSON.stringify(expected.join('\r\n')));
+  });
+
+  it('serialize with background', async () => {
+    const CLEAR_RIGHT = (l: number): string => `\u001b[${l}X`;
+
+    const lines = [
+      `1\u001b[44m${CLEAR_RIGHT(5)}`,
+      `2${CLEAR_RIGHT(9)}`
+    ];
+
+    await testNormalScreenEqual(page, lines.join('\r\n'));
+  });
+
+  it('cause the BCE on scroll', async () => {
+    const CLEAR_RIGHT = (l: number): string => `\u001b[${l}X`;
+
+    const padLines = newArray<string>(
+      (index: number) => digitsString(10, index),
+      10
+    );
+
+    const lines = [
+      ...padLines,
+      `\u001b[44m${CLEAR_RIGHT(5)}1111111111111111`
+    ];
+
+    await testNormalScreenEqual(page, lines.join('\r\n'));
+  });
+
+  it('handle invalid wrap before scroll', async () => {
+    const CLEAR_RIGHT = (l: number): string => `\u001b[${l}X`;
+    const MOVE_UP = (l: number): string => `\u001b[${l}A`;
+    const MOVE_DOWN = (l: number): string => `\u001b[${l}B`;
+    const MOVE_LEFT = (l: number): string => `\u001b[${l}D`;
+
+    // A line wrap happened after current line.
+    // But there is no content.
+    // so wrap shouldn't even be able to happen.
+    const segments = [
+      `123456789012345`,
+      MOVE_UP(1),
+      CLEAR_RIGHT(5),
+      MOVE_DOWN(1),
+      MOVE_LEFT(5),
+      CLEAR_RIGHT(5),
+      MOVE_UP(1),
+      '1'
+    ];
+
+    await testNormalScreenEqual(page, segments.join(''));
+  });
+
+  it('handle invalid wrap after scroll', async () => {
+    const CLEAR_RIGHT = (l: number): string => `\u001b[${l}X`;
+    const MOVE_UP = (l: number): string => `\u001b[${l}A`;
+    const MOVE_DOWN = (l: number): string => `\u001b[${l}B`;
+    const MOVE_LEFT = (l: number): string => `\u001b[${l}D`;
+
+    const padLines = newArray<string>(
+      (index: number) => digitsString(10, index),
+      10
+    );
+
+    // A line wrap happened after current line.
+    // But there is no content.
+    // so wrap shouldn't even be able to happen.
+    const lines = [
+      padLines.join('\r\n'),
+      '\r\n',
+      `123456789012345`,
+      MOVE_UP(1),
+      CLEAR_RIGHT(5),
+      MOVE_DOWN(1),
+      MOVE_LEFT(5),
+      CLEAR_RIGHT(5),
+      MOVE_UP(1),
+      '1'
+    ];
+
+    await testNormalScreenEqual(page, lines.join(''));
+  });
+});
 
 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);
+      array[i] = (initial as (index: number) => T)(i);
     } else {
-      array[i] = <T>initial;
+      array[i] = initial as T;
     }
   }
   return array;
@@ -348,23 +549,3 @@ const DIM = '2';
 
 const NO_ITALIC = '23';
 const NO_DIM = '22';
-
-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);
-}
-
-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);
-    });
-  }
-}

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

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

addons/xterm-addon-serialize/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" },
+    { "path": "./benchmark" }
+  ]
+}

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

@@ -25,10 +25,10 @@ declare module 'xterm-addon-serialize' {
      * 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.
+     * @param scrollback The number of rows in scrollback buffer to serialize, starting from the bottom of the
+     * scrollback buffer. This defaults to the all available rows in the scrollback buffer.
      */
-    public serialize(rows?: number): string;
+    public serialize(scrollback?: number): string;
 
     /**
      * Disposes the addon.

addons/xterm-addon-unicode11/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-unicode11",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
   "repository": "https://github.com/xtermjs/xterm.js",
   "license": "MIT",
   "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package"

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

@@ -13,14 +13,21 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "common/*": [ "../../../src/common/*" ]
+      "common/*": [
+        "../../../src/common/*"
+      ]
     },
+    "types": [
+      "../../../node_modules/@types/mocha"
+    ]
   },
   "include": [
     "./**/*",
     "../../../typings/xterm.d.ts"
   ],
   "references": [
-    { "path": "../../../src/common" }
+    {
+      "path": "../../../src/common"
+    }
   ]
 }

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

@@ -3,26 +3,25 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
-import { ITerminalOptions } from 'xterm';
 import { assert } from 'chai';
+import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
 describe('Unicode11Addon', () => {
   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({
+      headless: process.argv.includes('--headless')
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
   });
 
   after(async () => {
@@ -30,9 +29,8 @@ describe('Unicode11Addon', () => {
   });
 
   beforeEach(async function(): Promise<any> {
-    this.timeout(20000);
     await page.goto(APP);
-    await openTerminal();
+    await openTerminal(page);
   });
 
   it('wcwidth V11 emoji test', async () => {
@@ -49,13 +47,3 @@ describe('Unicode11Addon', () => {
     assert.deepEqual(await page.evaluate(`window.term._core.unicodeService.getStringCellWidth('🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣')`), 20);
   });
 });
-
-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-unicode11/test/tsconfig.json

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

addons/xterm-addon-unicode11/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}

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

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-web-links",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
   "repository": "https://github.com/xtermjs/xterm.js",
   "license": "MIT",
   "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package"

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

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ILinkProvider, ILink, Terminal, IViewportRange } from 'xterm';
+
+interface ILinkProviderOptions {
+  hover?(event: MouseEvent, text: string, location: IViewportRange): void;
+  leave?(event: MouseEvent, text: string): void;
+}
+
+export class WebLinkProvider implements ILinkProvider {
+
+  constructor(
+    private readonly _terminal: Terminal,
+    private readonly _regex: RegExp,
+    private readonly _handler: (event: MouseEvent, uri: string) => void,
+    private readonly _options: ILinkProviderOptions = {}
+  ) {
+
+  }
+
+  public provideLinks(y: number, callback: (links: ILink[] | undefined) => void): void {
+    const links = LinkComputer.computeLink(y, this._regex, this._terminal, this._handler);
+    callback(this._addCallbacks(links));
+  }
+
+  private _addCallbacks(links: ILink[]): ILink[] {
+    return links.map(link => {
+      link.leave = this._options.leave;
+      link.hover = (event: MouseEvent, uri: string): void => {
+        if (this._options.hover) {
+          const { range } = link;
+          this._options.hover(event, uri, range);
+        }
+      };
+      return link;
+    });
+  }
+}
+
+export class LinkComputer {
+  public static computeLink(y: number, regex: RegExp, terminal: Terminal, activate: (event: MouseEvent, uri: string) => void): ILink[] {
+    const rex = new RegExp(regex.source, (regex.flags || '') + 'g');
+
+    const [line, startLineIndex] = LinkComputer._translateBufferLineToStringWithWrap(y - 1, false, terminal);
+
+    let match;
+    let stringIndex = -1;
+    const result: ILink[] = [];
+
+    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
+        }
+      };
+
+      result.push({ range, text, activate });
+    }
+
+    return result;
+  }
+
+  /**
+   * 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.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, IDisposable, IViewportRange } from 'xterm';
+import { WebLinkProvider } from './WebLinkProvider';
 
 const protocolClause = '(https?:\\/\\/)';
 const domainCharacterSet = '[\\da-z\\.-]+';
@@ -14,7 +15,7 @@ const ipClause = '((\\d{1,3}\\.){3}\\d{1,3})';
 const localHostClause = '(localhost)';
 const portClause = '(:\\d{1,5})';
 const hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + '|' + localHostClause + ')' + portClause + '?';
-const pathCharacterSet = '(\\/[\\/\\w\\.\\-%~:+]*)*([^:"\'\\s])';
+const pathCharacterSet = '(\\/[\\/\\w\\.\\-%~:+@]*)*([^:"\'\\s])';
 const pathClause = '(' + pathCharacterSet + ')?';
 const queryStringHashFragmentCharacterSet = '[0-9\\w\\[\\]\\(\\)\\/\\?\\!#@$%&\'*+,:;~\\=\\.\\-]*';
 const queryStringClause = '(\\?' + queryStringHashFragmentCharacterSet + ')?';
@@ -35,25 +36,42 @@ function handleLink(event: MouseEvent, uri: string): void {
   }
 }
 
+interface ILinkProviderOptions {
+  hover?(event: MouseEvent, text: string, location: IViewportRange): void;
+  leave?(event: MouseEvent, text: string): void;
+}
+
 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 | ILinkProviderOptions = {},
+    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) {
+      const options = this._options as ILinkProviderOptions;
+      this._linkProvider = this._terminal.registerLinkProvider(new WebLinkProvider(this._terminal, strictUrlRegex, this._handler, options));
+    } else {
+      // TODO: This should be removed eventually
+      const options = this._options as ILinkMatcherOptions;
+      options.matchIndex = 1;
+      this._linkMatcherId = (this._terminal as Terminal).registerLinkMatcher(strictUrlRegex, this._handler, 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,10 @@
     "outDir": "../out",
     "sourceMap": true,
     "removeComments": true,
-    "strict": true
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha"
+    ]
   },
   "include": [
     "./**/*",

addons/xterm-addon-web-links/test/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';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/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({
+      headless: process.argv.includes('--headless')
     });
-    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/test/tsconfig.json

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

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

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}

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

@@ -4,7 +4,7 @@
  */
 
 
-import { Terminal, ILinkMatcherOptions, ITerminalAddon } from 'xterm';
+import { Terminal, ILinkMatcherOptions, ITerminalAddon, IViewportRange } from 'xterm';
 
 declare module 'xterm-addon-web-links' {
   /**
@@ -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 | ILinkProviderOptions, useLinkProvider?: boolean);
 
     /**
      * Activates the addon
@@ -29,4 +33,21 @@ declare module 'xterm-addon-web-links' {
      */
     public dispose(): void;
   }
+
+  /**
+   * An object containing options for a link provider.
+   */
+  export interface ILinkProviderOptions {
+    /**
+     * A callback that fires when the mouse hovers over a link for a period of
+     * time (defined by {@link ITerminalOptions.linkTooltipHoverDuration}).
+     */
+    hover?(event: MouseEvent, text: string, location: IViewportRange): void;
+
+    /**
+     * A callback that fires when the mouse leaves a link. Note that this can
+     * happen even when tooltipCallback hasn't fired for the link yet.
+     */
+    leave?(event: MouseEvent, text: string): void;
+  }
 }

addons/xterm-addon-webgl/.npmignore

@@ -3,3 +3,5 @@
 tsconfig.json
 .yarnrc
 webpack.config.js
+out-test/
+test/

addons/xterm-addon-webgl/README.md

@@ -1,8 +1,6 @@
 ## xterm-addon-webgl
 
-An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a WebGL-based renderer. This addon requires xterm.js v4+.
-
-⚠️ This is an experimental addon that is [missing some features and may be unstable](https://github.com/xtermjs/xterm.js/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Faddon%2Fwebgl) ⚠️
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a WebGL2-based renderer. This addon requires xterm.js v4+.
 
 ### Install
 
@@ -21,3 +19,18 @@ terminal.loadAddon(new WebglAddon());
 ```
 
 See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/xterm-addon-webgl/typings/xterm-addon-webgl.d.ts) for more advanced usage.
+
+### Handling Context Loss
+
+The browser may drop WebGL contexts for various reasons like OOM or after the system has been suspended. There is an API exposed that fires the `webglcontextlost` event fired on the canvas so embedders can handle it however they wish. An easy, but suboptimal way, to handle this is by disposing of WebglAddon when the event fires:
+
+```ts
+const terminal = new Terminal();
+const addon = new WebglAddon();
+addon.onContextLoss(e => {
+  addon.dispose();
+});
+terminal.loadAddon(addon);
+```
+
+Read more about handling WebGL context losses on the [Khronos wiki](https://www.khronos.org/webgl/wiki/HandlingContextLost).

addons/xterm-addon-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-webgl",
-  "version": "0.5.0",
+  "version": "0.11.1",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
   "repository": "https://github.com/xtermjs/xterm.js",
   "license": "MIT",
   "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package"

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

@@ -213,14 +213,14 @@ export class GlyphRenderer {
     // a_cellpos only changes on resize
   }
 
-  public updateSelection(model: IRenderModel, columnSelectMode: boolean): void {
+  public updateSelection(model: IRenderModel): void {
     const terminal = this._terminal;
 
     this._vertices.selectionAttributes = slice(this._vertices.attributes, 0);
 
     const bg = (this._colors.selectionOpaque.rgba >>> 8) | Attributes.CM_RGB;
 
-    if (columnSelectMode) {
+    if (model.selection.columnSelectMode) {
       const startCol = model.selection.startCol;
       const width = model.selection.endCol - startCol;
       const height = model.selection.viewportCappedEndRow - model.selection.viewportCappedStartRow + 1;
@@ -250,7 +250,7 @@ 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;
@@ -263,7 +263,7 @@ export class GlyphRenderer {
         // 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));
+        fg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK | FgFlags.INVERSE);
         switch (workCell.getBgColorMode()) {
           case Attributes.CM_P16:
           case Attributes.CM_P256:
@@ -281,7 +281,7 @@ export class GlyphRenderer {
       }
       if (code & COMBINED_CHAR_BIT_MASK) {
         if (!line) {
-          line = terminal.buffer.getLine(row);
+          line = terminal.buffer.active.getLine(row);
         }
         const chars = line!.getCell(x)!.getChars();
         this._updateCell(this._vertices.selectionAttributes, x, y, model.cells[offset], bg, fg, chars);

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

@@ -171,7 +171,7 @@ export class RectangleRenderer {
     );
   }
 
-  public updateSelection(model: ISelectionRenderModel, columnSelectMode: boolean): void {
+  public updateSelection(model: ISelectionRenderModel): void {
     const terminal = this._terminal;
 
     if (!model.hasSelection) {
@@ -179,7 +179,7 @@ export class RectangleRenderer {
       return;
     }
 
-    if (columnSelectMode) {
+    if (model.columnSelectMode) {
       const startCol = model.startCol;
       const width = model.endCol - startCol;
       const height = model.viewportCappedEndRow - model.viewportCappedStartRow + 1;
@@ -196,7 +196,7 @@ export class RectangleRenderer {
     } else {
       // Draw first row
       const startCol = model.viewportStartRow === model.viewportCappedStartRow ? model.startCol : 0;
-      const startRowEndCol = model.viewportCappedStartRow === model.viewportCappedEndRow ? model.endCol : terminal.cols;
+      const startRowEndCol = model.viewportCappedStartRow === model.viewportEndRow ? model.endCol : terminal.cols;
       this._addRectangleFloat(
         this._vertices.selection,
         0,

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

@@ -22,6 +22,7 @@ export class RenderModel implements IRenderModel {
     this.lineLengths = new Uint32Array(0);
     this.selection = {
       hasSelection: false,
+      columnSelectMode: false,
       viewportStartRow: 0,
       viewportEndRow: 0,
       viewportCappedStartRow: 0,
@@ -42,7 +43,6 @@ export class RenderModel implements IRenderModel {
   public clear(): void {
     fill(this.cells, 0, 0);
     fill(this.lineLengths, 0, 0);
-    this.clearSelection();
   }
 
   public clearSelection(): void {

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

@@ -56,6 +56,7 @@ export interface IRenderModel {
 
 export interface ISelectionRenderModel {
   hasSelection: boolean;
+  columnSelectMode: boolean;
   viewportStartRow: number;
   viewportEndRow: number;
   viewportCappedStartRow: number;

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

@@ -3,14 +3,17 @@
  * @license MIT
  */
 
-import { Terminal, ITerminalAddon } from 'xterm';
+import { Terminal, ITerminalAddon, IEvent } from 'xterm';
 import { WebglRenderer } from './WebglRenderer';
-import { IRenderService } from 'browser/services/Services';
+import { ICharacterJoinerService, IRenderService } from 'browser/services/Services';
 import { IColorSet } from 'browser/Types';
+import { EventEmitter } from 'common/EventEmitter';
 
 export class WebglAddon implements ITerminalAddon {
   private _terminal?: Terminal;
   private _renderer?: WebglRenderer;
+  private _onContextLoss = new EventEmitter<void>();
+  public get onContextLoss(): IEvent<void> { return this._onContextLoss.event; }
 
   constructor(
     private _preserveDrawingBuffer?: boolean
@@ -21,9 +24,11 @@ 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 colors: IColorSet = (<any>terminal)._core._colorManager.colors;
-    this._renderer = new WebglRenderer(terminal, colors, this._preserveDrawingBuffer);
+    const renderService: IRenderService = (terminal as any)._core._renderService;
+    const characterJoinerService: ICharacterJoinerService = (terminal as any)._core._characterJoinerService;
+    const colors: IColorSet = (terminal as any)._core._colorManager.colors;
+    this._renderer = new WebglRenderer(terminal, colors, characterJoinerService, this._preserveDrawingBuffer);
+    this._renderer.onContextLoss(() => this._onContextLoss.fire());
     renderService.setRenderer(this._renderer);
   }
 
@@ -31,8 +36,8 @@ export class WebglAddon implements ITerminalAddon {
     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;
   }
@@ -40,4 +45,8 @@ export class WebglAddon implements ITerminalAddon {
   public get textureAtlas(): HTMLCanvasElement | undefined {
     return this._renderer?.textureAtlas;
   }
+
+  public clearTextureAtlas(): void {
+    this._renderer?.clearCharAtlas();
+  }
 }

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

@@ -3,7 +3,6 @@
  * @license MIT
  */
 
-import { ITerminal } from '../../../src/Types';
 import { GlyphRenderer } from './GlyphRenderer';
 import { LinkRenderLayer } from './renderLayer/LinkRenderLayer';
 import { CursorRenderLayer } from './renderLayer/CursorRenderLayer';
@@ -13,13 +12,17 @@ import { RectangleRenderer } from './RectangleRenderer';
 import { IWebGL2RenderingContext } from './Types';
 import { RenderModel, COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
 import { Disposable } from 'common/Lifecycle';
-import { NULL_CELL_CODE } from 'common/buffer/Constants';
+import { Content, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Terminal, IEvent } from 'xterm';
 import { IRenderLayer } from './renderLayer/Types';
-import { IRenderDimensions, IRenderer, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
-import { IColorSet } from 'browser/Types';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { ITerminal, IColorSet } from 'browser/Types';
 import { EventEmitter } from 'common/EventEmitter';
 import { CellData } from 'common/buffer/CellData';
+import { addDisposableDomListener } from 'browser/Lifecycle';
+import { ICharacterJoinerService } from 'browser/services/Services';
+import { CharData, ICellData } from 'common/Types';
+import { AttributeData } from 'common/buffer/AttributeData';
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
@@ -39,21 +42,25 @@ export class WebglRenderer extends Disposable implements IRenderer {
   private _core: ITerminal;
   private _isAttached: boolean;
 
-  private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
-  public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
+  private _onRequestRedraw = new EventEmitter<IRequestRedrawEvent>();
+  public get onRequestRedraw(): IEvent<IRequestRedrawEvent> { return this._onRequestRedraw.event; }
+
+  private _onContextLoss = new EventEmitter<void>();
+  public get onContextLoss(): IEvent<void> { return this._onContextLoss.event; }
 
   constructor(
     private _terminal: Terminal,
     private _colors: IColorSet,
+    private readonly _characterJoinerService: ICharacterJoinerService,
     preserveDrawingBuffer?: boolean
   ) {
     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),
-      new CursorRenderLayer(this._core.screenElement, 3, this._colors, this._onRequestRefreshRows)
+      new LinkRenderLayer(this._core.screenElement!, 2, this._colors, this._core),
+      new CursorRenderLayer(this._core.screenElement!, 3, this._colors, this._onRequestRedraw)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -81,9 +88,12 @@ 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);
+
+    this.register(addDisposableDomListener(this._canvas, 'webglcontextlost', (e) => { this._onContextLoss.fire(e); }));
+
+    this._core.screenElement!.appendChild(this._canvas);
 
     this._rectangleRenderer = new RectangleRenderer(this._terminal, this._colors, this._gl, this.dimensions);
     this._glyphRenderer = new GlyphRenderer(this._terminal, this._colors, this._gl, this.dimensions);
@@ -91,12 +101,14 @@ export class WebglRenderer extends Disposable implements IRenderer {
     // Update dimensions and acquire char atlas
     this.onCharSizeChanged();
 
-    this._isAttached = document.body.contains(this._core.screenElement);
+    this._isAttached = document.body.contains(this._core.screenElement!);
   }
 
   public dispose(): void {
-    this._renderLayers.forEach(l => l.dispose());
-    this._core.screenElement.removeChild(this._canvas);
+    for (const l of this._renderLayers) {
+      l.dispose();
+    }
+    this._core.screenElement!.removeChild(this._canvas);
     super.dispose();
   }
 
@@ -107,10 +119,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
   public setColors(colors: IColorSet): void {
     this._colors = colors;
     // Clear layers and force a full render
-    this._renderLayers.forEach(l => {
+    for (const l of this._renderLayers) {
       l.setColors(this._terminal, this._colors);
       l.reset(this._terminal);
-    });
+    }
 
     this._rectangleRenderer.setColors();
     this._glyphRenderer.setColors();
@@ -135,10 +147,11 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._updateDimensions();
 
     this._model.resize(this._terminal.cols, this._terminal.rows);
-    this._rectangleRenderer.onResize();
 
     // Resize all render layers
-    this._renderLayers.forEach(l => l.resize(this._terminal, this.dimensions));
+    for (const l of this._renderLayers) {
+      l.resize(this._terminal, this.dimensions);
+    }
 
     // Resize the canvas
     this._canvas.width = this.dimensions.scaledCanvasWidth;
@@ -147,8 +160,15 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._canvas.style.height = `${this.dimensions.canvasHeight}px`;
 
     // Resize the screen
-    this._core.screenElement.style.width = `${this.dimensions.canvasWidth}px`;
-    this._core.screenElement.style.height = `${this.dimensions.canvasHeight}px`;
+    this._core.screenElement!.style.width = `${this.dimensions.canvasWidth}px`;
+    this._core.screenElement!.style.height = `${this.dimensions.canvasHeight}px`;
+
+    this._rectangleRenderer.onResize();
+    if (this._model.selection.hasSelection) {
+      // Update selection as dimensions have changed
+      this._rectangleRenderer.updateSelection(this._model.selection);
+    }
+
     this._glyphRenderer.setDimensions(this.dimensions);
     this._glyphRenderer.onResize();
 
@@ -163,30 +183,37 @@ export class WebglRenderer extends Disposable implements IRenderer {
   }
 
   public onBlur(): void {
-    this._renderLayers.forEach(l => l.onBlur(this._terminal));
+    for (const l of this._renderLayers) {
+      l.onBlur(this._terminal);
+    }
   }
 
   public onFocus(): void {
-    this._renderLayers.forEach(l => l.onFocus(this._terminal));
+    for (const l of this._renderLayers) {
+      l.onFocus(this._terminal);
+    }
   }
 
-  public onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean): void {
-    this._renderLayers.forEach(l => l.onSelectionChanged(this._terminal, start, end, columnSelectMode));
+  public onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    for (const l of this._renderLayers) {
+      l.onSelectionChanged(this._terminal, start, end, columnSelectMode);
+    }
 
-    this._updateSelectionModel(start, end);
+    this._updateSelectionModel(start, end, columnSelectMode);
 
-    this._rectangleRenderer.updateSelection(this._model.selection, columnSelectMode);
-    this._glyphRenderer.updateSelection(this._model, columnSelectMode);
-
-    this._onRequestRefreshRows.fire({ start: 0, end: this._terminal.rows - 1 });
+    this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1 });
   }
 
   public onCursorMove(): void {
-    this._renderLayers.forEach(l => l.onCursorMove(this._terminal));
+    for (const l of this._renderLayers) {
+      l.onCursorMove(this._terminal);
+    }
   }
 
   public onOptionsChanged(): void {
-    this._renderLayers.forEach(l => l.onOptionsChanged(this._terminal));
+    for (const l of this._renderLayers) {
+      l.onOptionsChanged(this._terminal);
+    }
     this._updateDimensions();
     this._refreshCharAtlas();
   }
@@ -212,8 +239,17 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._glyphRenderer.setAtlas(this._charAtlas);
   }
 
+  public clearCharAtlas(): void {
+    this._charAtlas?.clearTexture();
+    this._model.clear();
+    this._updateModel(0, this._terminal.rows - 1);
+    this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1 });
+  }
+
   public clear(): void {
-    this._renderLayers.forEach(l => l.reset(this._terminal));
+    for (const l of this._renderLayers) {
+      l.reset(this._terminal);
+    }
   }
 
   public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
@@ -226,7 +262,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;
@@ -236,11 +272,14 @@ export class WebglRenderer extends Disposable implements IRenderer {
     }
 
     // Update render layers
-    this._renderLayers.forEach(l => l.onGridChanged(this._terminal, start, end));
+    for (const l of this._renderLayers) {
+      l.onGridChanged(this._terminal, start, end);
+    }
 
     // Tell renderer the frame is beginning
     if (this._glyphRenderer.beginFrame()) {
       this._model.clear();
+      this._updateSelectionModel(undefined, undefined);
     }
 
     // Update model to reflect what's drawn
@@ -253,16 +292,41 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   private _updateModel(start: number, end: number): void {
     const terminal = this._core;
+    let cell: ICellData = this._workCell;
 
     for (let y = start; y <= end; y++) {
       const row = y + terminal.buffer.ydisp;
       const line = terminal.buffer.lines.get(row)!;
       this._model.lineLengths[y] = 0;
+      const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
       for (let x = 0; x < terminal.cols; x++) {
-        line.loadCell(x, this._workCell);
+        line.loadCell(x, cell);
 
-        const chars = this._workCell.getChars();
-        let code = this._workCell.getCode();
+        // If true, indicates that the current character(s) to draw were joined.
+        let isJoined = false;
+        let lastCharX = x;
+
+        // Process any joined character ranges as needed. Because of how the
+        // ranges are produced, we know that they are valid for the characters
+        // and attributes of our input.
+        if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
+          isJoined = true;
+          const range = joinedRanges.shift()!;
+
+          // We already know the exact start and end column of the joined range,
+          // so we get the string and width representing it directly
+          cell = new JoinedCellData(
+            cell,
+            line!.translateToString(true, range[0], range[1]),
+            range[1] - range[0]
+          );
+
+          // Skip over the cells occupied by this range in the loop
+          lastCharX = range[1] - 1;
+        }
+
+        const chars = cell.getChars();
+        let code = cell.getCode();
         const i = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
 
         if (code !== NULL_CELL_CODE) {
@@ -271,55 +335,78 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // Nothing has changed, no updates needed
         if (this._model.cells[i] === code &&
-            this._model.cells[i + RENDER_MODEL_BG_OFFSET] === this._workCell.bg &&
-            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === this._workCell.fg) {
+            this._model.cells[i + RENDER_MODEL_BG_OFFSET] === cell.bg &&
+            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === cell.fg) {
           continue;
         }
 
         // Flag combined chars with a bit mask so they're easily identifiable
         if (chars.length > 1) {
-          code = code | COMBINED_CHAR_BIT_MASK;
+          code |= COMBINED_CHAR_BIT_MASK;
         }
 
         // Cache the results in the model
         this._model.cells[i] = code;
-        this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._workCell.bg;
-        this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._workCell.fg;
+        this._model.cells[i + RENDER_MODEL_BG_OFFSET] = cell.bg;
+        this._model.cells[i + RENDER_MODEL_FG_OFFSET] = cell.fg;
 
-        this._glyphRenderer.updateCell(x, y, code, this._workCell.bg, this._workCell.fg, chars);
+        this._glyphRenderer.updateCell(x, y, code, cell.bg, cell.fg, chars);
+
+        if (isJoined) {
+          // Restore work cell
+          cell = this._workCell;
+
+          // Null out non-first cells
+          for (x++; x < lastCharX; x++) {
+            const j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
+            this._glyphRenderer.updateCell(x, y, NULL_CELL_CODE, 0, 0, NULL_CELL_CHAR);
+            this._model.cells[j] = NULL_CELL_CODE;
+            this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._workCell.bg;
+            this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._workCell.fg;
+          }
+        }
       }
     }
     this._rectangleRenderer.updateBackgrounds(this._model);
+    if (this._model.selection.hasSelection) {
+      // Model could be updated but the selection is unchanged
+      this._glyphRenderer.updateSelection(this._model);
+    }
   }
 
-  private _updateSelectionModel(start: [number, number], end: [number, number]): void {
+  private _updateSelectionModel(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
     const terminal = this._terminal;
 
     // Selection does not exist
     if (!start || !end || (start[0] === end[0] && start[1] === end[1])) {
       this._model.clearSelection();
+      this._rectangleRenderer.updateSelection(this._model.selection);
       return;
     }
 
     // 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);
 
     // No need to draw the selection
     if (viewportCappedStartRow >= terminal.rows || viewportCappedEndRow < 0) {
       this._model.clearSelection();
+      this._rectangleRenderer.updateSelection(this._model.selection);
       return;
     }
 
     this._model.selection.hasSelection = true;
+    this._model.selection.columnSelectMode = columnSelectMode;
     this._model.selection.viewportStartRow = viewportStartRow;
     this._model.selection.viewportEndRow = viewportEndRow;
     this._model.selection.viewportCappedStartRow = viewportCappedStartRow;
     this._model.selection.viewportCappedEndRow = viewportCappedEndRow;
     this._model.selection.startCol = start[0];
     this._model.selection.endCol = end[0];
+
+    this._rectangleRenderer.updateSelection(this._model.selection);
   }
 
   /**
@@ -329,7 +416,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;
     }
 
@@ -340,12 +427,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
@@ -394,3 +481,49 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this.dimensions.actualCellWidth = this.dimensions.scaledCellWidth / this._devicePixelRatio;
   }
 }
+
+// TODO: Share impl with core
+export class JoinedCellData extends AttributeData implements ICellData {
+  private _width: number;
+  // .content carries no meaning for joined CellData, simply nullify it
+  // thus we have to overload all other .content accessors
+  public content: number = 0;
+  public fg: number;
+  public bg: number;
+  public combinedData: string = '';
+
+  constructor(firstCell: ICellData, chars: string, width: number) {
+    super();
+    this.fg = firstCell.fg;
+    this.bg = firstCell.bg;
+    this.combinedData = chars;
+    this._width = width;
+  }
+
+  public isCombined(): number {
+    // always mark joined cell data as combined
+    return Content.IS_COMBINED_MASK;
+  }
+
+  public getWidth(): number {
+    return this._width;
+  }
+
+  public getChars(): string {
+    return this.combinedData;
+  }
+
+  public getCode(): number {
+    // code always gets the highest possible fake codepoint (read as -1)
+    // this is needed as code is used by caches as identifier
+    return 0x1FFFFF;
+  }
+
+  public setFromCharData(value: CharData): void {
+    throw new Error('not implemented');
+  }
+
+  public getAsCharData(): CharData {
+    return [this.fg, this.getChars(), this.getWidth(), this.getCode()];
+  }
+}

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

@@ -20,7 +20,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     background: colors.background,
     cursor: NULL_COLOR,
     cursorAccent: NULL_COLOR,
-    selection: NULL_COLOR,
+    selectionTransparent: NULL_COLOR,
     selectionOpaque: NULL_COLOR,
     // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
     // dynamic character atlas.

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

@@ -80,12 +80,12 @@ export class WebglCharAtlas implements IDisposable {
     // The canvas needs alpha because we use clearColor to convert the background color to alpha.
     // It might also contain some characters with transparent backgrounds if allowTransparency is
     // set.
-    this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', {alpha: true}));
+    this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', { alpha: true }));
 
     this._tmpCanvas = document.createElement('canvas');
-    this._tmpCanvas.width = this._config.scaledCharWidth * 2 + TMP_CANVAS_GLYPH_PADDING * 2;
+    this._tmpCanvas.width = this._config.scaledCharWidth * 4 + 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._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
   }
 
   public dispose(): void {
@@ -101,7 +101,7 @@ export class WebglCharAtlas implements IDisposable {
     }
   }
 
-  protected _doWarmUp(): void {
+  private _doWarmUp(): void {
     // Pre-fill with ASCII 33-126
     for (let i = 33; i < 126; i++) {
       const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR);
@@ -115,17 +115,26 @@ export class WebglCharAtlas implements IDisposable {
 
   public beginFrame(): boolean {
     if (this._currentRowY > TEXTURE_CAPACITY) {
-      this._cacheCtx.clearRect(0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT);
-      this._cacheMap = {};
-      this._currentRowHeight = 0;
-      this._currentRowX = 0;
-      this._currentRowY = 0;
-      this._doWarmUp();
+      this.clearTexture();
+      this.warmUp();
       return true;
     }
     return false;
   }
 
+  public clearTexture(): void {
+    if (this._currentRowX === 0 && this._currentRowY === 0) {
+      return;
+    }
+    this._cacheCtx.clearRect(0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT);
+    this._cacheMap = {};
+    this._cacheMapCombined = {};
+    this._currentRowHeight = 0;
+    this._currentRowX = 0;
+    this._currentRowY = 0;
+    this._didWarmUp = false;
+  }
+
   public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number): IRasterizedGlyph {
     let rasterizedGlyphSet = this._cacheMapCombined[chars];
     if (!rasterizedGlyphSet) {
@@ -308,6 +317,13 @@ export class WebglCharAtlas implements IDisposable {
 
     this.hasCanvasChanged = true;
 
+    // Allow 1 cell width per character, with a minimum of 2 (CJK), plus some padding. This is used
+    // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure
+    // giant ligatures (eg. =====>) don't impact overall performance.
+    const allowedWidth = this._config.scaledCharWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2;
+    if (this._tmpCanvas.width < allowedWidth) {
+      this._tmpCanvas.width = allowedWidth;
+    }
     this._tmpCtx.save();
 
     this._workAttributeData.fg = fg;
@@ -349,7 +365,7 @@ export class WebglCharAtlas implements IDisposable {
     const fontStyle = italic ? 'italic' : '';
     this._tmpCtx.font =
       `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
-    this._tmpCtx.textBaseline = 'top';
+    this._tmpCtx.textBaseline = 'ideographic';
 
     this._tmpCtx.fillStyle = this._getForegroundCss(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, inverse, bold);
 
@@ -358,8 +374,22 @@ export class WebglCharAtlas implements IDisposable {
       this._tmpCtx.globalAlpha = DIM_OPACITY;
     }
 
+    // Check if the char is a powerline glyph, these will be restricted to a single cell glyph, no
+    // padding on either side that are allowed for other glyphs since they are designed to be pixel
+    // perfect but may render with "bad" anti-aliasing
+    let isPowerlineGlyph = false;
+    if (chars.length === 1) {
+      const code = chars.charCodeAt(0);
+      if (code >= 0xE0A0 && code <= 0xE0D6) {
+        isPowerlineGlyph = true;
+      }
+    }
+
+    // For powerline glyphs left/top padding is excluded (https://github.com/microsoft/vscode/issues/120129)
+    const padding = isPowerlineGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING;
+
     // Draw the character
-    this._tmpCtx.fillText(chars, TMP_CANVAS_GLYPH_PADDING, TMP_CANVAS_GLYPH_PADDING);
+    this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
     this._tmpCtx.restore();
 
     // clear the background from the character to avoid issues with drawing over the previous
@@ -382,7 +412,7 @@ export class WebglCharAtlas implements IDisposable {
       return NULL_RASTERIZED_GLYPH;
     }
 
-    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox);
+    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, isPowerlineGlyph);
     const clippedImageData = this._clipImageData(imageData, this._workBoundingBox);
 
     // Check if there is enough room in the current row and go to next if needed
@@ -415,11 +445,13 @@ export class WebglCharAtlas implements IDisposable {
    * @param imageData The image data to read.
    * @param boundingBox An IBoundingBox to put the clipped bounding box values.
    */
-  private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox): IRasterizedGlyph {
+  private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean): IRasterizedGlyph {
     boundingBox.top = 0;
+    const height = restrictedGlyph ? this._config.scaledCharHeight : this._tmpCanvas.height;
+    const width = restrictedGlyph ? this._config.scaledCharWidth : allowedWidth;
     let found = false;
-    for (let y = 0; y < this._tmpCanvas.height; y++) {
-      for (let x = 0; x < this._tmpCanvas.width; x++) {
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
           boundingBox.top = y;
@@ -433,8 +465,8 @@ export class WebglCharAtlas implements IDisposable {
     }
     boundingBox.left = 0;
     found = false;
-    for (let x = 0; x < this._tmpCanvas.width; x++) {
-      for (let y = 0; y < this._tmpCanvas.height; y++) {
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
           boundingBox.left = x;
@@ -446,10 +478,10 @@ export class WebglCharAtlas implements IDisposable {
         break;
       }
     }
-    boundingBox.right = this._tmpCanvas.width;
+    boundingBox.right = width;
     found = false;
-    for (let x = this._tmpCanvas.width - 1; x >= 0; x--) {
-      for (let y = 0; y < this._tmpCanvas.height; y++) {
+    for (let x = width - 1; x >= 0; x--) {
+      for (let y = 0; y < height; y++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
           boundingBox.right = x;
@@ -461,10 +493,10 @@ export class WebglCharAtlas implements IDisposable {
         break;
       }
     }
-    boundingBox.bottom = this._tmpCanvas.height;
+    boundingBox.bottom = height;
     found = false;
-    for (let y = this._tmpCanvas.height - 1; y >= 0; y--) {
-      for (let x = 0; x < this._tmpCanvas.width; x++) {
+    for (let y = height - 1; y >= 0; y--) {
+      for (let x = 0; x < width; x++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
           boundingBox.bottom = y;
@@ -488,8 +520,8 @@ export class WebglCharAtlas implements IDisposable {
         y: (boundingBox.bottom - boundingBox.top + 1) / TEXTURE_HEIGHT
       },
       offset: {
-        x: -boundingBox.left + TMP_CANVAS_GLYPH_PADDING,
-        y: -boundingBox.top + TMP_CANVAS_GLYPH_PADDING
+        x: -boundingBox.left + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING),
+        y: -boundingBox.top + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING)
       }
     };
   }

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

@@ -46,7 +46,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   }
 
   private _initCanvas(): void {
-    this._ctx = throwIfFalsy(this._canvas.getContext('2d', {alpha: this._alpha}));
+    this._ctx = throwIfFalsy(this._canvas.getContext('2d', { alpha: this._alpha }));
     // Draw the background if this is an opaque layer
     if (!this._alpha) {
       this._clearAll();
@@ -58,7 +58,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   public onFocus(terminal: Terminal): void {}
   public onCursorMove(terminal: Terminal): void {}
   public onGridChanged(terminal: Terminal, startRow: number, endRow: number): void {}
-  public onSelectionChanged(terminal: Terminal, start: [number, number], end: [number, number], columnSelectMode: boolean = false): void {}
+  public onSelectionChanged(terminal: Terminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {}
 
   public setColors(terminal: Terminal, colorSet: IColorSet): void {
     this._refreshCharAtlas(terminal, colorSet);
@@ -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);
   }
 
   /**
@@ -155,10 +155,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
     this._ctx.fillRect(
-        x * this._scaledCellWidth,
-        y * this._scaledCellHeight,
-        window.devicePixelRatio * width,
-        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);
     }
   }
 
@@ -224,12 +224,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected _fillCharTrueColor(terminal: Terminal, cell: CellData, x: number, y: number): void {
     this._ctx.font = this._getFont(terminal, false, false);
-    this._ctx.textBaseline = 'middle';
+    this._ctx.textBaseline = 'ideographic';
     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);
   }
 
   /**
@@ -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

@@ -8,7 +8,7 @@ import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IColorSet } from 'browser/Types';
-import { IRenderDimensions, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { IEventEmitter } from 'common/EventEmitter';
 
 interface ICursorState {
@@ -34,7 +34,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     container: HTMLElement,
     zIndex: number,
     colors: IColorSet,
-    private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRefreshRowsEvent>
+    private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRedrawEvent>
   ) {
     super(container, 'cursor', zIndex, true, colors);
     this._state = {
@@ -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');
@@ -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

@@ -3,21 +3,23 @@
  * @license MIT
  */
 
-import { ILinkifierAccessor } from '../../../../src/Types';
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { is256Color } from '../atlas/CharAtlasUtils';
-import { IColorSet, ILinkifierEvent } from 'browser/Types';
+import { ITerminal, IColorSet, ILinkifierEvent } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
 
 export class LinkRenderLayer extends BaseRenderLayer {
   private _state: ILinkifierEvent | undefined;
 
-  constructor(container: HTMLElement, zIndex: number, colors: IColorSet, terminal: ILinkifierAccessor) {
+  constructor(container: HTMLElement, zIndex: number, colors: IColorSet, terminal: ITerminal) {
     super(container, 'link', zIndex, true, colors);
-    terminal.linkifier.onLinkHover(e => this._onLinkHover(e));
-    terminal.linkifier.onLinkLeave(e => this._onLinkLeave(e));
+    terminal.linkifier.onShowLinkUnderline(e => this._onShowLinkUnderline(e));
+    terminal.linkifier.onHideLinkUnderline(e => this._onHideLinkUnderline(e));
+
+    terminal.linkifier2.onShowLinkUnderline(e => this._onShowLinkUnderline(e));
+    terminal.linkifier2.onHideLinkUnderline(e => this._onHideLinkUnderline(e));
   }
 
   public resize(terminal: Terminal, dim: IRenderDimensions): void {
@@ -42,7 +44,7 @@ export class LinkRenderLayer extends BaseRenderLayer {
     }
   }
 
-  private _onLinkHover(e: ILinkifierEvent): void {
+  private _onShowLinkUnderline(e: ILinkifierEvent): void {
     if (e.fg === INVERTED_DEFAULT_COLOR) {
       this._ctx.fillStyle = this._colors.background.css;
     } else if (e.fg !== undefined && is256Color(e.fg)) {
@@ -66,7 +68,7 @@ export class LinkRenderLayer extends BaseRenderLayer {
     this._state = e;
   }
 
-  private _onLinkLeave(e: ILinkifierEvent): void {
+  private _onHideLinkUnderline(e: ILinkifierEvent): void {
     this._clearCurrentLink();
   }
 }

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

@@ -42,7 +42,7 @@ export interface IRenderLayer extends IDisposable {
   /**
    * Calls when the selection changes.
    */
-  onSelectionChanged(terminal: Terminal, start: [number, number], end: [number, number], columnSelectMode: boolean): void;
+  onSelectionChanged(terminal: Terminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
 
   /**
    * Registers a handler to join characters to render as a group

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

@@ -12,17 +12,28 @@
     "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"
+    ]
   },
   "include": [
     "./**/*",
     "../../../typings/xterm.d.ts"
   ],
   "references": [
-    { "path": "../../../src/common" },
-    { "path": "../../../src/browser" }
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    }
   ]
 }

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

@@ -3,21 +3,27 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
-import { ITerminalOptions } from '../../../src/Types';
+import { ITerminalOptions } from '../../../src/common/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';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/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 () => {
+describe('WebGL Renderer Integration Tests', async () => {
+  const browserType = getBrowserType();
+  const isHeadless = process.argv.includes('--headless');
+  // Firefox works only in non-headless mode https://github.com/microsoft/playwright/issues/1032
+  const areTestsEnabled = browserType.name() === 'chromium' || (browserType.name() === 'firefox' && !isHeadless);
+  const 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 +32,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 +50,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 +61,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 +76,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 +87,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 +99,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 +110,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 +122,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 +133,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 +145,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 +156,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [22, 23, 24, 255]);
     });
 
-    it('foreground 0-15 inivisible', async () => {
+    itWebgl('foreground 0-15 inivisible', async () => {
       const theme: ITheme = {
         black: '#010203',
         red: '#040506',
@@ -160,7 +168,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         white: '#161718'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
-      await writeSync(`\\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 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]);
@@ -171,7 +179,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       await pollFor(page, () => getCellColor(8, 1), [0, 0, 0, 255]);
     });
 
-    it('background 0-15 inivisible', async () => {
+    itWebgl('background 0-15 inivisible', async () => {
       const theme: ITheme = {
         black: '#010203',
         red: '#040506',
@@ -183,7 +191,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
         white: '#161718'
       };
       await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
-      await writeSync(`\\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 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]);
@@ -194,7 +202,7 @@ 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 bright', async () => {
       const theme: ITheme = {
         brightBlack: '#010203',
         brightRed: '#040506',
@@ -206,7 +214,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]);
@@ -217,7 +225,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',
@@ -229,7 +237,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]);
@@ -240,7 +248,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++) {
@@ -248,7 +256,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];
@@ -260,7 +268,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++) {
@@ -268,7 +276,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];
@@ -280,7 +288,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++) {
@@ -288,7 +296,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];
@@ -300,7 +308,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++) {
@@ -308,7 +316,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];
@@ -320,7 +328,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground 16-255 invisible', async () => {
+    itWebgl('foreground 16-255 invisible', async () => {
       let data = '';
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -328,19 +336,15 @@ 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];
-          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]);
         }
       }
     });
 
-    it('background 16-255 invisible', async () => {
+    itWebgl('background 16-255 invisible', async () => {
       let data = '';
       for (let y = 0; y < 240 / 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -348,7 +352,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];
@@ -360,7 +364,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color red', async () => {
+    itWebgl('foreground true color red', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -369,7 +373,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;
@@ -378,7 +382,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++) {
@@ -387,7 +391,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;
@@ -396,7 +400,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++) {
@@ -405,7 +409,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;
@@ -414,7 +418,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++) {
@@ -423,7 +427,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;
@@ -432,7 +436,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++) {
@@ -441,7 +445,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;
@@ -450,7 +454,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++) {
@@ -459,7 +463,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;
@@ -468,7 +472,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++) {
@@ -477,7 +481,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;
@@ -486,7 +490,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++) {
@@ -495,7 +499,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;
@@ -504,7 +508,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++) {
@@ -513,7 +517,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;
@@ -522,7 +526,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++) {
@@ -531,7 +535,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;
@@ -540,7 +544,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++) {
@@ -549,7 +553,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;
@@ -558,7 +562,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++) {
@@ -567,7 +571,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;
@@ -576,7 +580,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++) {
@@ -585,7 +589,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;
@@ -594,7 +598,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++) {
@@ -603,7 +607,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;
@@ -612,7 +616,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++) {
@@ -621,7 +625,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;
@@ -630,7 +634,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++) {
@@ -639,7 +643,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;
@@ -648,7 +652,7 @@ describe('WebGL Renderer Integration Tests', function(): void {
       }
     });
 
-    it('foreground true color grey invisible', async () => {
+    itWebgl('foreground true color grey invisible', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -657,16 +661,15 @@ 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), [0, 0, 0, 255]);
         }
       }
     });
 
-    it('background true color grey invisible', async () => {
+    itWebgl('background true color grey invisible', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {
         for (let x = 0; x < 16; x++) {
@@ -675,7 +678,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;
@@ -686,11 +689,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',
@@ -713,7 +718,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█`
       );
@@ -757,7 +762,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',
@@ -781,7 +786,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█`
       );
@@ -826,18 +831,20 @@ describe('WebGL Renderer Integration Tests', function(): void {
   });
 
   describe('selection', 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 resolve the inverse foreground color based on the original background color, not the selection', async () => {
+    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(` █\\x1b[7m█\\x1b[0m`);
+      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]);
@@ -850,36 +857,25 @@ describe('WebGL Renderer Integration Tests', function(): void {
   });
 
   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;
@@ -895,32 +891,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({
+    headless: process.argv.includes('--headless')
   });
-  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/test/tsconfig.json

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

addons/xterm-addon-webgl/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}

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

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { Terminal, IDisposable, ITerminalAddon } from 'xterm';
+import { Terminal, ITerminalAddon, IEvent } from 'xterm';
 
 declare module 'xterm-addon-webgl' {
   /**
@@ -15,7 +15,7 @@ declare module 'xterm-addon-webgl' {
     constructor(preserveDrawingBuffer?: boolean);
 
     /**
-     * Activates the addon
+     * Activates the addon.
      * @param terminal The terminal the addon is being loaded in.
      */
     public activate(terminal: Terminal): void;
@@ -24,5 +24,15 @@ declare module 'xterm-addon-webgl' {
      * Disposes the addon.
      */
     public dispose(): void;
+
+    /**
+     * Clears the terminal's texture atlas and triggers a redraw.
+     */
+    public clearTextureAtlas(): void;
+
+    /**
+     * Fired when the WebglRenderer loses context
+     */
+    public get onContextLoss(): IEvent<void>;
   }
 }

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: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -41,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: '14.x'
     displayName: 'Install Node.js'
   - task: CacheBeta@1
     inputs:
@@ -64,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: '14.x'
     displayName: 'Install Node.js'
   - task: CacheBeta@1
     inputs:
@@ -85,11 +79,20 @@ 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: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -97,27 +100,42 @@ jobs:
     displayName: 'Install Yarn'
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
-  - script: |
-      yarn start &
-      sleep 10
-      yarn test-api --headless --forbid-only
-    displayName: 'Linux Integration tests'
+  - 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: '14.x'
     displayName: 'Install Node.js'
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
-  - script: |
-      yarn start &
-      sleep 10
-      yarn test-api --headless --forbid-only
-    displayName: 'MacOS Integration tests'
+  - 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: Windows_IntegrationTests
+  pool:
+    vmImage: 'vs2017-win2016'
+  steps:
+  - task: NodeTool@0
+    inputs:
+      versionSpec: '14.x'
+    displayName: 'Install Node.js'
+  - script: yarn --frozen-lockfile
+    displayName: 'Install dependencies and build'
+  - script: yarn test-api-chromium --headless --forbid-only
+    displayName: 'Integration tests (Chromium)'
+  - script: yarn test-api-firefox --headless --forbid-only
+    displayName: 'Integration tests (Firefox)'
 
 - job: Release
   dependsOn:
@@ -126,15 +144,14 @@ jobs:
   - Windows
   - Linux_IntegrationTests
   - macOS_IntegrationTests
+  - Windows_IntegrationTests
   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: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:

bin/extract_vtfeatures.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2019 The xterm.js authors. All rights reserved.
  * @license MIT
- * 
+ *
  * Script to extract vt features documented in docstrings.
  */
 const fs = require('fs');
@@ -32,9 +32,15 @@ const TYPES = [
   'SOS'
 ];
 
-const MARKDOWN_TMPL = `
+const MARKDOWN_TMPL = `---
+title: Supported Terminal Sequences
+category: API
+---
+
 {::options parse_block_html="true" /}
 
+# Supported Terminal Sequences
+
 xterm.js version: {{version}}
 
 ## Table of Contents
@@ -259,7 +265,7 @@ To denote the sequences the tables use the same abbreviations as xterm does:
   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);
@@ -338,11 +344,11 @@ function applyMacros(s) {
   return s;
 }
 
-function replaceStatus(s) {
-  if (s === 'supported') return '<span title="supported">✓</span>';
-  if (s === 'unsupported') return '<span title="unsupported">✗</span>';
-  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('-');
@@ -353,7 +359,7 @@ function empty(ar) {
 }
 
 function* parseMultiLineGen(filename, s) {
-  if (!~s.indexOf('@vt:')) {
+  if (!s.includes('@vt:')) {
     return;
   }
   const lines = s.split('\n').map(el => el.trim().replace(/[*]/, '').replace(/\s/, ''));
@@ -407,7 +413,7 @@ function parseSingleLine(filename, s) {
   const line = s.trim();
   const match = line.match(REX_VT_LINE);
   if (match !== null) {
-    if (!~TYPES.indexOf(match[2])) {
+    if (!TYPES.includes(match[2])) {
       throw new Error(`unkown vt-command type "${match[2]}" specified in "${filename}"`);
     }
     return {

bin/install-addons.js

@@ -25,7 +25,7 @@ if (fs.existsSync(addonsPath)) {
 
   // walk all addon folders
   fs.readdir(addonsPath, (err, files) => {
-    files.forEach(folder => {
+    for (const folder of files) {
       const addonPath = path.join(addonsPath, folder);
 
       // install only if there are dependencies listed
@@ -51,6 +51,6 @@ if (fs.existsSync(addonsPath)) {
       } else {
         console.log('Skipped', folder);
       }
-    });
+    }
   });
 }

bin/publish.js

@@ -11,7 +11,7 @@ const path = require('path');
 // Setup auth
 fs.writeFileSync(`${process.env['HOME']}/.npmrc`, `//registry.npmjs.org/:_authToken=${process.env['NPM_AUTH_TOKEN']}`);
 
-const isDryRun = process.argv.indexOf('--dry') !== -1;
+const isDryRun = process.argv.includes('--dry');
 if (isDryRun) {
   console.log('Publish dry run');
 }
@@ -28,6 +28,7 @@ if (changedFiles.some(e => e.search(/^addons\//) === -1)) {
 const addonPackageDirs = [
   path.resolve(__dirname, '../addons/xterm-addon-attach'),
   path.resolve(__dirname, '../addons/xterm-addon-fit'),
+  path.resolve(__dirname, '../addons/xterm-addon-ligatures'),
   path.resolve(__dirname, '../addons/xterm-addon-search'),
   path.resolve(__dirname, '../addons/xterm-addon-serialize'),
   path.resolve(__dirname, '../addons/xterm-addon-unicode11'),
@@ -35,13 +36,13 @@ const addonPackageDirs = [
   path.resolve(__dirname, '../addons/xterm-addon-webgl')
 ];
 console.log(`Checking if addons need to be published`);
-addonPackageDirs.forEach(p => {
+for (const p of addonPackageDirs) {
   const addon = path.basename(p);
-  if (changedFiles.some(e => e.indexOf(addon) !== -1)) {
+  if (changedFiles.some(e => e.includes(addon))) {
     console.log(`Try publish ${addon}`);
     checkAndPublishPackage(p);
   }
-});
+}
 
 // Publish website if it's a stable release
 if (isStableRelease) {
@@ -53,7 +54,7 @@ function checkAndPublishPackage(packageDir) {
 
   // Determine if this is a stable or beta release
   const publishedVersions = getPublishedVersions(packageJson);
-  const isStableRelease = publishedVersions.indexOf(packageJson.version) === -1;
+  const isStableRelease = !publishedVersions.includes(packageJson.version);
 
   // Get the next version
   let nextVersion = isStableRelease ? packageJson.version : getNextBetaVersion(packageJson);

bin/test.js

@@ -13,7 +13,6 @@ const env = { ...process.env };
 env.NODE_PATH = path.resolve(__dirname, '../out');
 
 let testFiles = [
-  './out/*test.js',
   './out/**/*test.js',
   './addons/**/out/*test.js',
 ];

bin/test_api.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const cp = require('child_process');
+const path = require('path');
+
+
+// Add `out` to the NODE_PATH so absolute paths can be resolved.
+const env = { ...process.env };
+env.NODE_PATH = path.resolve(__dirname, '../out');
+
+let testFiles = [
+  './addons/**/out-test/*api.js',
+  './out-test/**/*api.js',
+];
+
+
+let flagArgs = [];
+
+if (process.argv.length > 2) {
+  const args = process.argv.slice(2);
+  flagArgs = args.filter(e => e.startsWith('--')).map(arg => arg.split('=')).reduce((arr, val) => arr.concat([...val], []));
+  console.info(flagArgs);
+  // ability to inject particular test files via
+  // yarn test [testFileA testFileB ...]
+  files = args.filter(e => !e.startsWith('--'));
+  if (files.length) {
+    testFiles = files;
+  }
+}
+
+
+
+env.DEBUG = flagArgs.indexOf('--debug') >= 0 ? 'debug' : '';
+env.PORT = 3001;
+
+const server = cp.spawn('node', ['demo/start'], {
+  cwd: path.resolve(__dirname, '..'),
+  env,
+  stdio: 'pipe'
+})
+
+server.stdout.on('data', (data) => {
+  // await for the server to fully start
+  if (data.indexOf("successfully") !== -1) {
+    const run = cp.spawnSync(
+      npmBinScript('mocha'),
+      [...testFiles, ...flagArgs], {
+        cwd: path.resolve(__dirname, '..'),
+        env,
+        stdio: 'inherit'
+      }
+    );
+
+    function npmBinScript(script) {
+      return path.resolve(__dirname, `../node_modules/.bin/` + (process.platform === 'win32' ?
+        `${script}.cmd` : script));
+    }
+
+    process.exit(run.status);
+  }
+});

bin/test_mousemodes.js

@@ -88,19 +88,19 @@ function evalButtonCode(code) {
   if (code & 64) {
     button |= 4
   }
-  let actionS = 'press';
+  let action = 'press';
   let buttonS = reverseButtons[button];
   if (button === 3) {
     buttonS = '<none>';
-    actionS = 'release';
+    action = 'release';
   }
   if (move) {
-    actionS = 'move';
+    action = 'move';
   } else if (4 <= button && button <= 7) {
     buttonS = 'wheel';
-    actionS = button === 4 ? 'up' : button === 5 ? 'down' : button === 6 ? 'left' : 'right';
+    action = button === 4 ? 'up' : button === 5 ? 'down' : button === 6 ? 'left' : 'right';
   }
-  return {button: buttonS, action: actionS, modifier};
+  return {button: buttonS, action, modifier};
 }
 
 // protocols

css/xterm.css

@@ -36,7 +36,6 @@
  */
 
 .xterm {
-    font-feature-settings: "liga" 0;
     position: relative;
     user-select: none;
     -ms-user-select: none;
@@ -59,10 +58,10 @@
 }
 
 .xterm .xterm-helper-textarea {
-    /*
-     * HACK: to fix IE's blinking cursor
-     * Move textarea out of the screen to the far left, so that the cursor is not visible.
-     */
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
     position: absolute;
     opacity: 0;
     left: -9999em;

demo/client.ts

@@ -8,7 +8,7 @@
 /// <reference path="../typings/xterm.d.ts"/>
 
 // Use tsc version (yarn watch)
-import { Terminal } from '../out/public/Terminal';
+import { Terminal } from '../out/browser/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';
@@ -16,6 +16,7 @@ import { SerializeAddon } from '../addons/xterm-addon-serialize/out/SerializeAdd
 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';
+import { LigaturesAddon } from '../addons/xterm-addon-ligatures/out/LigaturesAddon';
 
 // Use webpacked version (yarn package)
 // import { Terminal } from '../lib/xterm';
@@ -26,6 +27,7 @@ import { Unicode11Addon } from '../addons/xterm-addon-unicode11/out/Unicode11Add
 // import { WebLinksAddon } from 'xterm-addon-web-links';
 // import { WebglAddon } from 'xterm-addon-webgl';
 // import { Unicode11Addon } from 'xterm-addon-unicode11';
+// import { LigaturesAddon } from 'xterm-addon-ligatures';
 
 // Pulling in the module's types relies on the <reference> above, it's looks a
 // little weird here as we're importing "this" module
@@ -41,6 +43,7 @@ export interface IWindowWithTerminal extends Window {
   WebLinksAddon?: typeof WebLinksAddon;
   WebglAddon?: typeof WebglAddon;
   Unicode11Addon?: typeof Unicode11Addon;
+  LigaturesAddon?: typeof LigaturesAddon;
 }
 declare let window: IWindowWithTerminal;
 
@@ -50,7 +53,7 @@ let socketURL;
 let socket;
 let pid;
 
-type AddonType = 'attach' | 'fit' | 'search' | 'serialize' | 'unicode11' | 'web-links' | 'webgl';
+type AddonType = 'attach' | 'fit' | 'search' | 'serialize' | 'unicode11' | 'web-links' | 'webgl' | 'ligatures';
 
 interface IDemoAddon<T extends AddonType> {
   name: T;
@@ -62,8 +65,9 @@ interface IDemoAddon<T extends AddonType> {
     T extends 'serialize' ? typeof SerializeAddon :
     T extends 'web-links' ? typeof WebLinksAddon :
     T extends 'unicode11' ? typeof Unicode11Addon :
+    T extends 'ligatures' ? typeof LigaturesAddon :
     typeof WebglAddon;
-  instance?:
+    instance?:
     T extends 'attach' ? AttachAddon :
     T extends 'fit' ? FitAddon :
     T extends 'search' ? SearchAddon :
@@ -71,6 +75,7 @@ interface IDemoAddon<T extends AddonType> {
     T extends 'web-links' ? WebLinksAddon :
     T extends 'webgl' ? WebglAddon :
     T extends 'unicode11' ? typeof Unicode11Addon :
+    T extends 'ligatures' ? typeof LigaturesAddon :
     never;
 }
 
@@ -81,7 +86,8 @@ const addons: { [T in AddonType]: IDemoAddon<T>} = {
   serialize: { name: 'serialize', ctor: SerializeAddon, canChange: true },
   'web-links': { name: 'web-links', ctor: WebLinksAddon, canChange: true },
   webgl: { name: 'webgl', ctor: WebglAddon, canChange: true },
-  unicode11: { name: 'unicode11', ctor: Unicode11Addon, canChange: true }
+  unicode11: { name: 'unicode11', ctor: Unicode11Addon, canChange: true },
+  ligatures: { name: 'ligatures', ctor: LigaturesAddon, canChange: true }
 };
 
 const terminalContainer = document.getElementById('terminal-container');
@@ -93,7 +99,7 @@ const paddingElement = <HTMLInputElement>document.getElementById('padding');
 
 function setPadding(): void {
   term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
-  term.fit();
+  addons.fit.instance.fit();
 }
 
 function getSearchOptions(e: KeyboardEvent): ISearchOptions {
@@ -112,9 +118,16 @@ const disposeRecreateButtonHandler = () => {
     term = null;
     window.term = null;
     socket = null;
+    addons.attach.instance = undefined;
+    addons.fit.instance = undefined;
+    addons.search.instance = undefined;
+    addons.serialize.instance = undefined;
+    addons.unicode11.instance = undefined;
+    addons.ligatures.instance = undefined;
+    addons['web-links'].instance = undefined;
+    addons.webgl.instance = undefined;
     document.getElementById('dispose').innerHTML = 'Recreate Terminal';
-  }
-  else {
+  } else {
     createTerminal();
     document.getElementById('dispose').innerHTML = 'Dispose terminal';
   }
@@ -127,6 +140,7 @@ if (document.location.pathname === '/test') {
   window.SearchAddon = SearchAddon;
   window.SerializeAddon = SerializeAddon;
   window.Unicode11Addon = Unicode11Addon;
+  window.LigaturesAddon = LigaturesAddon;
   window.WebLinksAddon = WebLinksAddon;
   window.WebglAddon = WebglAddon;
 } else {
@@ -143,7 +157,8 @@ function createTerminal(): void {
 
   const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].indexOf(navigator.platform) >= 0;
   term = new Terminal({
-    windowsMode: isWindows
+    windowsMode: isWindows,
+    fontFamily: 'Fira Code, courier-new, courier, monospace'
   } as ITerminalOptions);
 
   // Load addons
@@ -152,7 +167,8 @@ function createTerminal(): void {
   addons.serialize.instance = new SerializeAddon();
   addons.fit.instance = new FitAddon();
   addons.unicode11.instance = new Unicode11Addon();
-  addons['web-links'].instance = new WebLinksAddon();
+  // 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);
@@ -356,7 +372,7 @@ function initAddons(term: TerminalType): void {
     if (!addon.canChange) {
       checkbox.disabled = true;
     }
-    checkbox.addEventListener('change', () => {
+    addDomListener(checkbox, 'change', () => {
       if (checkbox.checked) {
         addon.instance = new addon.ctor();
         term.loadAddon(addon.instance);
@@ -385,7 +401,9 @@ function initAddons(term: TerminalType): void {
     wrapper.appendChild(label);
     fragment.appendChild(wrapper);
   });
-  document.getElementById('addons-container').appendChild(fragment);
+  const container = document.getElementById('addons-container');
+  container.innerHTML = '';
+  container.appendChild(fragment);
 }
 
 function addDomListener(element: HTMLElement, type: string, handler: (...args: any[]) => any): void {

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" />
@@ -13,7 +18,7 @@
     <div id="terminal-container"></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>
+      <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>
@@ -44,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>