Initial plan for issue

Add copilot setup steps

.devcontainer/devcontainer.json

@@ -1,13 +1,15 @@
 {
   "name": "xterm.js",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18-buster",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:18-bookworm",
   "features": {
-    "ghcr.io/devcontainers/features/node:1": {} // yarn
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": 18
+    } // yarn
   },
   "forwardPorts": [
     3000
   ],
-  "postCreateCommand": "yarn install",
+  "postCreateCommand": "yarn install && yarn setup",
   "customizations": {
     "vscode": {
       "extensions": [

.eslintrc.json

@@ -11,18 +11,20 @@
       "src/browser/tsconfig.json",
       "src/common/tsconfig.json",
       "src/headless/tsconfig.json",
-      "test/api/tsconfig.json",
+      "src/vs/tsconfig.json",
       "test/benchmark/tsconfig.json",
       "test/playwright/tsconfig.json",
       "addons/addon-attach/src/tsconfig.json",
       "addons/addon-attach/test/tsconfig.json",
-      "addons/addon-canvas/src/tsconfig.json",
-      "addons/addon-canvas/test/tsconfig.json",
+      "addons/addon-clipboard/src/tsconfig.json",
+      "addons/addon-clipboard/test/tsconfig.json",
       "addons/addon-fit/src/tsconfig.json",
       "addons/addon-fit/test/tsconfig.json",
       "addons/addon-image/src/tsconfig.json",
       "addons/addon-image/test/tsconfig.json",
       "addons/addon-ligatures/src/tsconfig.json",
+      "addons/addon-progress/src/tsconfig.json",
+      "addons/addon-progress/test/tsconfig.json",
       "addons/addon-search/src/tsconfig.json",
       "addons/addon-search/test/tsconfig.json",
       "addons/addon-serialize/src/tsconfig.json",
@@ -42,19 +44,37 @@
   },
   "ignorePatterns": [
     "addons/*/src/third-party/*.ts",
+    "src/vs/*",
     "out/*",
     "out-test/*",
+    "out-esbuild/*",
+    "out-esbuild-test/*",
     "**/inwasm-sdks/*",
     "**/typings/*.d.ts",
     "**/node_modules",
-    "**/*.js"
+    "**/*.js",
+    "**/*.mjs"
   ],
   "plugins": [
+    "@stylistic/ts",
     "@typescript-eslint",
     "jsdoc"
   ],
   "rules": {
-    "no-extra-semi": "error",
+    "@stylistic/ts/indent": [
+      "warn",
+      2
+    ],
+    "@stylistic/ts/semi": [
+      "warn",
+      "always"
+    ],
+    "@stylistic/ts/quotes": [
+      "warn",
+      "single",
+      { "allowTemplateLiterals": true }
+    ],
+
     "@typescript-eslint/array-type": [
       "warn",
       {
@@ -79,10 +99,6 @@
         }
       }
     ],
-    "@typescript-eslint/indent": [
-      "warn",
-      2
-    ],
     "@typescript-eslint/member-delimiter-style": [
       "warn",
       {
@@ -142,15 +158,7 @@
     "@typescript-eslint/no-useless-constructor": "warn",
     "@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",
       {
@@ -191,6 +199,7 @@
       }
     ],
     "no-eval": "warn",
+    "no-extra-semi": "error",
     "no-irregular-whitespace": "warn",
     "no-restricted-imports": [
       "warn",

.eslintrc.json.typings

@@ -6,11 +6,25 @@
   },
   "parser": "@typescript-eslint/parser",
   "plugins": [
+    "@stylistic/ts",
     "@typescript-eslint",
     "jsdoc"
   ],
   "rules": {
-    "no-extra-semi": "error",
+    "@stylistic/ts/indent": [
+      "warn",
+      2
+    ],
+    "@stylistic/ts/semi": [
+      "warn",
+      "always"
+    ],
+    "@stylistic/ts/quotes": [
+      "warn",
+      "single",
+      { "allowTemplateLiterals": true }
+    ],
+
     "@typescript-eslint/array-type": [
       "warn",
       {
@@ -24,10 +38,6 @@
         "allowExpressions": true
       }
     ],
-    "@typescript-eslint/indent": [
-      "warn",
-      2
-    ],
     "@typescript-eslint/member-delimiter-style": [
       "warn",
       {
@@ -48,15 +58,7 @@
     ],
     "@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",
       {
@@ -86,6 +88,7 @@
         "ignorePattern": "^ *(?<ps_description>\\* Ps=)"
       }
     ],
+    "no-extra-semi": "error",
     "no-irregular-whitespace": "warn",
     "no-trailing-spaces": "warn",
     "object-curly-spacing": [

.github/copilot-instructions.md

@@ -0,0 +1,10 @@
+This is a TypeScript-based repository with a Ruby client for certain API endpoints. It includes several sub projects called addons which are built separately. It contains a demo application which showcases the functionality of the project.
+
+Please follow these guidelines when contributing:
+
+## Development Flow
+
+- Install dependencies: `npm install && npm run setup`
+- Build and bundle demo: `npm run build && npm run esbuild`
+- Run unit tests: `npm run test-unit`
+- Run playwright-based integration tests: `npm run test-integration`

.github/copilot-setup-steps.yml

@@ -0,0 +1,36 @@
+name: "Copilot Setup Steps"
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+  pull_request:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+
+jobs:
+  copilot-setup-steps:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Setup and run tsc
+        run: yarn setup
+
+      - name: Esbuild
+        run: yarn esbuild

.github/workflows/ci.yml

@@ -19,37 +19,54 @@ jobs:
         cache: 'yarn'
     - name: Install dependencies
       run: yarn --frozen-lockfile
-    - name: Build
+    - name: Setup and run tsc
       run: yarn setup
+    - name: Esbuild
+      run: yarn esbuild
     - name: Zip artifacts
       run: |
         zip -r compressed-build \
+          ./lib/* \
           ./out/* \
-          ./out-test/* \
+          ./out-*/* \
+          ./addons/addon-attach/lib/* \
           ./addons/addon-attach/out/* \
-          ./addons/addon-attach/out-test/* \
-          ./addons/addon-canvas/out/* \
-          ./addons/addon-canvas/out-test/* \
+          ./addons/addon-attach/out-*/* \
+          ./addons/addon-clipboard/lib/* \
+          ./addons/addon-clipboard/out/* \
+          ./addons/addon-clipboard/out-*/* \
+          ./addons/addon-fit/lib/* \
           ./addons/addon-fit/out/* \
-          ./addons/addon-fit/out-test/* \
+          ./addons/addon-fit/out-*/* \
+          ./addons/addon-image/lib/* \
           ./addons/addon-image/out/* \
-          ./addons/addon-image/out-test/* \
+          ./addons/addon-image/out-*/* \
+          ./addons/addon-ligatures/lib/* \
           ./addons/addon-ligatures/out/* \
-          ./addons/addon-ligatures/out-test/* \
+          ./addons/addon-ligatures/out-*/* \
+          ./addons/addon-progress/lib/* \
+          ./addons/addon-progress/out/* \
+          ./addons/addon-progress/out-*/* \
+          ./addons/addon-search/lib/* \
           ./addons/addon-search/out/* \
-          ./addons/addon-search/out-test/* \
+          ./addons/addon-search/out-*/* \
+          ./addons/addon-serialize/lib/* \
           ./addons/addon-serialize/out/* \
-          ./addons/addon-serialize/out-test/* \
+          ./addons/addon-serialize/out-*/* \
+          ./addons/addon-unicode11/lib/* \
           ./addons/addon-unicode11/out/* \
-          ./addons/addon-unicode11/out-test/* \
+          ./addons/addon-unicode11/out-*/* \
+          ./addons/addon-unicode-graphemes/lib/* \
           ./addons/addon-unicode-graphemes/out/* \
-          ./addons/addon-unicode-graphemes/out-test/* \
+          ./addons/addon-unicode-graphemes/out-*/* \
+          ./addons/addon-web-links/lib/* \
           ./addons/addon-web-links/out/* \
-          ./addons/addon-web-links/out-test/* \
+          ./addons/addon-web-links/out-*/* \
+          ./addons/addon-webgl/lib/* \
           ./addons/addon-webgl/out/* \
-          ./addons/addon-webgl/out-test/*
+          ./addons/addon-webgl/out-*st/*
     - name: Upload artifacts
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: build-artifacts
         path: compressed-build.zip
@@ -91,7 +108,7 @@ jobs:
       run: |
         yarn --frozen-lockfile
         yarn install-addons
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         name: build-artifacts
     - name: Unzip artifacts
@@ -110,7 +127,7 @@ jobs:
         ./node_modules/.bin/nyc report --reporter=cobertura
         exit $EXIT_CODE
 
-  test-unit-parallel:
+  test-unit:
     timeout-minutes: 20
     strategy:
       matrix:
@@ -133,7 +150,7 @@ jobs:
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
         job: build
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         name: build-artifacts
     - name: Unzip artifacts
@@ -148,55 +165,14 @@ jobs:
     - name: Unit tests
       run: yarn test-unit --forbid-only
 
-  test-api-parallel:
+  test-integration:
     timeout-minutes: 20
     strategy:
       matrix:
         node-version: [18] # just one as integration tests are about testing in browser
-        runs-on: [ubuntu] # macos is flaky
-        browser: [chromium, firefox]
-    runs-on: ${{ matrix.runs-on }}-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}.x
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}.x
-        cache: 'yarn'
-    - name: Install dependencies
-      run: |
-        yarn --frozen-lockfile
-        yarn install-addons
-    - name: Install playwright
-      run: npx playwright install
-    - name: Wait for build job
-      uses: NathanFirmo/wait-for-other-job@v1.1.1
-      with:
-        token: ${{ secrets.GITHUB_TOKEN }}
-        job: build
-    - uses: actions/download-artifact@v3
-      with:
-        name: build-artifacts
-    - name: Unzip artifacts
-      shell: bash
-      run: |
-        if [ "$RUNNER_OS" == "Windows" ]; then
-          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
-        else
-          unzip -o compressed-build.zip
-        fi
-        ls -R
-    - name: Integration tests (${{ matrix.browser }})
-      run: yarn test-api-${{ matrix.browser }} --headless --forbid-only
-
-  test-playwright-parallel:
-    timeout-minutes: 20
-    strategy:
-      matrix:
-        node-version: [18] # just one as integration tests are about testing in browser
-        runs-on: [ubuntu] # macos is flaky
+        runs-on: [ubuntu-22.04] # macos is flaky
         browser: [chromium, firefox, webkit]
-    runs-on: ${{ matrix.runs-on }}-latest
+    runs-on: ${{ matrix.runs-on }}
     steps:
     - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}.x
@@ -215,7 +191,7 @@ jobs:
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
         job: build
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         name: build-artifacts
     - name: Unzip artifacts
@@ -228,50 +204,31 @@ jobs:
         fi
         ls -R
     - name: Build demo
-      run: yarn build-demo
+      run: yarn esbuild-demo
     - name: Integration tests (core) # Tests use 50% workers to reduce flakiness
-      run: yarn test-playwright-${{ matrix.browser }} --workers=50% --forbid-only --suite=core
-    - name: Integration tests (addon-canvas)
-      run: yarn test-playwright-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-canvas
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=core
+    - name: Integration tests (addon-attach)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-attach
+    - name: Integration tests (addon-clipboard)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-clipboard
+    - name: Integration tests (addon-fit)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-fit
+    - name: Integration tests (addon-image)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-image
+    - name: Integration tests (addon-progress)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-progress
+    - name: Integration tests (addon-search)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-search
+    - name: Integration tests (addon-serialize)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-serialize
+    - name: Integration tests (addon-unicode-graphemes)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-unicode-graphemes
+    - name: Integration tests (addon-unicode11)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-unicode11
+    - name: Integration tests (addon-web-links)
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-web-links
     - name: Integration tests (addon-webgl)
-      run: yarn test-playwright-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-webgl
-
-  test-api:
-    needs: build
-    timeout-minutes: 20
-    strategy:
-      matrix:
-        node-version: [18] # just one as integration tests are about testing in browser
-        runs-on: [windows] # macos is flaky
-        browser: [chromium, firefox]
-    runs-on: ${{ matrix.runs-on }}-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}.x
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}.x
-        cache: 'yarn'
-    - name: Install dependencies
-      run: |
-        yarn --frozen-lockfile
-        yarn install-addons
-    - name: Install playwright
-      run: npx playwright install
-    - uses: actions/download-artifact@v3
-      with:
-        name: build-artifacts
-    - name: Unzip artifacts
-      shell: bash
-      run: |
-        if [ "$RUNNER_OS" == "Windows" ]; then
-          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
-        else
-          unzip -o compressed-build.zip
-        fi
-        ls -R
-    - name: Integration tests (${{ matrix.browser }})
-      run: yarn test-api-${{ matrix.browser }} --headless --forbid-only
+      run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-webgl
 
   release-dry-run:
     needs: build
@@ -292,7 +249,7 @@ jobs:
         yarn install-addons
     - name: Install playwright
       run: npx playwright install
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         name: build-artifacts
     - name: Unzip artifacts

.gitignore

@@ -4,6 +4,8 @@ node_modules/
 lib/
 out/
 out-test/
+out-esbuild/
+out-esbuild-test/
 .nyc_output/
 Makefile.gyp
 *.Makefile

.npmignore

@@ -17,6 +17,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

.nvmrc

@@ -1 +1 @@
-16
+18

.vscode/launch.json

@@ -61,7 +61,7 @@
       "runtimeExecutable": "npm",
       "runtimeArgs": ["start"],
       "stopOnEntry": true,
-      "runtimeVersion": "16",
+      "runtimeVersion": "18",
       "serverReadyAction": {
         "action": "openExternally",
         "pattern": "App listening to (http://.*?:[0-9]+)"

.vscode/settings.json

@@ -2,15 +2,22 @@
   "files.associations": {
     ".eslintrc.json.typings": "jsonc"
   },
+  "files.exclude": {
+    "**/.nyc_output": true
+  },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.preferences.quoteStyle": "single",
   "mochaExplorer.envPath": ".mocha.env",
   "mochaExplorer.files": [
     "out/**/*.test.js",
-    "addons/**/out/*.test.js"
+    "addons/**/out/*.test.js",
+    "out-*/**/*.test.js",
+    "addons/**/out-*/*.test.js"
   ],
   "mochaExplorer.watch": [
     "out/**/*.js",
-    "addons/**/out/*.js"
+    "addons/**/out/*.js",
+    "out-*/**/*.js",
+    "addons/**/out-*/*.js"
   ]
 }

.vscode/tasks.json

@@ -8,6 +8,66 @@
     "showReuseMessage": true
   },
   "tasks": [
+    // Compound tasks
+    {
+      "label": "Development",
+      "dependsOn": ["demo-server", "tsc", "esbuild", "esbuild-demo"],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+
+    // Demo
+    {
+      "label": "demo-server",
+      "type": "npm",
+      "script": "start",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": [],
+      "presentation": {
+        "group": "xterm-demo"
+      }
+    },
+
+    // Build
+    {
+      "label": "tsc",
+      "type": "npm",
+      "script": "tsc-watch",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": "$tsc-watch",
+      "presentation": {
+        "group": "xterm-build"
+      }
+    },
+    {
+      "label": "esbuild",
+      "type": "npm",
+      "script": "esbuild-watch",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": "$esbuild-watch",
+      "presentation": {
+        "group": "xterm-build"
+      }
+    },
+    {
+      "label": "esbuild-demo",
+      "type": "npm",
+      "script": "esbuild-demo-watch",
+      "dependsOn": ["esbuild", "tsc"],
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": "$esbuild-watch",
+      "presentation": {
+        "group": "xterm-demo"
+      }
+    },
+
+    // Test
     {
       "type": "npm",
       "script": "test",
@@ -16,59 +76,6 @@
         "isDefault": true
       },
       "problemMatcher": []
-    },
-    {
-      "label": "watch",
-      "type": "npm",
-      "script": "watch",
-      "group": "build",
-      "isBackground": true,
-      "problemMatcher": "$tsc-watch",
-      "presentation": {
-        "group": "vscode"
-      }
-    },
-    {
-      "label": "start",
-      "type": "npm",
-      "script": "start",
-      "group": "build",
-      "isBackground": true,
-      "problemMatcher": [],
-      "presentation": {
-        "group": "vscode"
-      }
-    },
-    {
-      "label": "Start demo",
-      "dependsOn": ["start", "watch"],
-      "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"
-      }
     }
   ]
 }

CONTRIBUTING.md

@@ -60,3 +60,45 @@ By contributing code to xterm.js you:
 ### Test coverage
 
 One area that always needs attention is improving out unit test coverage, you can view the code coverage report on [Azure Pipelines](https://dev.azure.com/xtermjs/xterm.js/_build/latest?definitionId=3) by clicking the Code Coverage tab.
+
+## Testing
+
+### Unit tests
+
+Unit tests are run with `yarn test-unit`:
+
+```sh
+# All unit tests
+yarn test-unit
+
+# Absolute file path
+yarn test-unit out-esbuild/browser/Terminal.test.js
+
+# Filter by wildcard
+yarn test-unit out-esbuild/**/Terminal.test.js
+
+# Specific addon unit tests tests
+yarn test-unit addons/addon-image/out-esbuild/*.test.js
+
+# Multiple files
+yarn test-unit out-esbuild/**/Terminal.test.js out-esbuild/**/InputHandler.test.js
+```
+
+These use mocha to run all `.test.js` files within the esbuild output (`out-esbuild/`).
+
+### Integration tests
+
+Integration tests are run with `yarn test-integration`:
+
+```sh
+# All integration tests
+yarn test-integration
+
+# Core integration tests
+yarn test-integration --suite=core
+
+# Specific addon integration tests
+yarn test-integration --suite=addon-search
+```
+
+These use `@playwright/test` to run all tests within the esbuild test output (`out-esbuild-test/`).

Procfile

@@ -1,2 +0,0 @@
-web: npm start
-webpack: npm run watch

README.md

@@ -1,4 +1,4 @@
-# [![xterm.js logo](logo-full.png)](https://xtermjs.org)
+# [![xterm.js logo](images/logo-full.png)](https://xtermjs.org)
 
 Xterm.js is a front-end component written in TypeScript that lets applications bring fully-featured terminals to their users in the browser. It's used by popular projects such as VS Code, Hyper and Theia.
 
@@ -77,7 +77,7 @@ terminal.loadAddon(new WebLinksAddon());
 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/addon-attach): Attaches to a server running a process via a websocket
-- [`@xterm/addon-canvas`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas): Renders xterm.js using a `canvas` element's 2d context
+- [`@xterm/addon-clipboard`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-clipboard): Access the browser's clipboard
 - [`@xterm/addon-fit`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-fit): Fits the terminal to the containing element
 - [`@xterm/addon-image`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image): Adds image support
 - [`@xterm/addon-search`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-search): Adds search functionality
@@ -128,7 +128,6 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**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.
 - [**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.
 - [**Codenvy**](http://www.codenvy.com): Cloud workspaces for development teams.
 - [**CoderPad**](https://coderpad.io): Online interviewing platform for programmers. Run code in many programming languages, with results displayed by xterm.js.
@@ -222,6 +221,14 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**Cloudtutor.io**](https://cloudtutor.io): innovative online learning platform that offers users access to an interactive lab.
 - [**Helix Editor Playground**](https://github.com/tomgroenwoldt/helix-editor-playground): Online playground for the terminal based helix editor.
 - [**Coder**](https://github.com/coder/coder): Self-Hosted Remote Development Environments
+- [**Wave Terminal**](https://waveterm.dev): An open-source, ai-native, terminal built for seamless workflows.
+- [**eva**](https://github.com/info24/eva): Eva is a web application for SSH remote login, developed in Go.
+- [**OpenSFTP**](https://opensftp.com): Super beautiful SSH and SFTP integrated workspace client.
+- [**balena**](https://www.balena.io/): Balena is a full-stack solution for developing, deploying, updating, and troubleshooting IoT Edge devices. We use xterm.js to manage & debug devices on [balenaCloud](https://www.balena.io/cloud).
+- [**Filet Cloud**](https://github.com/fuglaro/filet-cloud): The lean and powerful personal cloud ⛅.
+- [**pyTermTk**](https://github.com/ceccopierangiolieugenio/pyTermTk): Python Terminal Toolkit - a Spiced Up Cross Compatible TUI Library 🌶️, use xterm.js for the [HTML5 exporter](https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html).
+- [**ecmaOS**](https://ecmaos.sh): A kernel and suite of applications tying modern web technologies into a browser-based operating system.
+- [**LabEx**](https://labex.io): Interactive learning platform with hands-on labs and xterm.js-based online terminals, focused on learn-by-doing approach.
 - [And much more...](https://github.com/xtermjs/xterm.js/network/dependents?package_id=UGFja2FnZS0xNjYzMjc4OQ%3D%3D)
 
 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.

addons/addon-attach/.npmignore

@@ -8,6 +8,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

addons/addon-attach/package.json

@@ -6,6 +6,7 @@
     "url": "https://xtermjs.org/"
   },
   "main": "lib/addon-attach.js",
+  "module": "lib/addon-attach.mjs",
   "types": "typings/addon-attach.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-attach",
   "license": "MIT",
@@ -18,7 +19,8 @@
     "build": "../../node_modules/.bin/tsc -p .",
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
-    "prepublishOnly": "npm run package"
+    "prepublishOnly": "npm run package",
+    "start": "node ../../demo/start"
   },
   "peerDependencies": {
     "@xterm/xterm": "^5.0.0"

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

@@ -1,50 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import WebSocket = require('ws');
-import { openTerminal, pollFor, launchBrowser } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from '@playwright/test';
-
-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> {
-    browser = await launchBrowser();
-    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);
-    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);
-    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/addon-attach/test/AttachAddon.test.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import WebSocket = require('ws');
+
+import test from '@playwright/test';
+import { ITestContext, createTestContext, openTerminal, pollFor, timeout } from '../../../test/playwright/TestUtils';
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx);
+});
+test.afterAll(async () => await ctx.page.close());
+
+test.describe('Search Tests', () => {
+
+  test.beforeEach(async () => {
+    await ctx.proxy.reset();
+  });
+
+  test('string', async function(): Promise<any> {
+    const port = 8080;
+    const server = new WebSocket.Server({ port });
+    server.on('connection', socket => socket.send('foo'));
+    await ctx.page.evaluate(`window.term.loadAddon(new window.AttachAddon(new WebSocket('ws://localhost:${port}')))`);
+    await pollFor(ctx.page, `window.term.buffer.active.getLine(0).translateToString(true)`, 'foo');
+    server.close();
+  });
+
+  test('utf8', async function(): Promise<any> {
+    const port = 8080;
+    const server = new WebSocket.Server({ port });
+    const data = new Uint8Array([102, 111, 111]);
+    server.on('connection', socket => socket.send(data));
+    await ctx.page.evaluate(`window.term.loadAddon(new window.AttachAddon(new WebSocket('ws://localhost:${port}')))`);
+    await pollFor(ctx.page, `window.term.buffer.active.getLine(0).translateToString(true)`, 'foo');
+    server.close();
+  });
+});

addons/addon-attach/test/playwright.config.ts

@@ -5,14 +5,14 @@ const config: PlaywrightTestConfig = {
   timeout: 10000,
   projects: [
     {
-      name: 'Chrome Stable',
+      name: 'ChromeStable',
       use: {
         browserName: 'chromium',
         channel: 'chrome'
       }
     },
     {
-      name: 'Firefox Stable',
+      name: 'FirefoxStable',
       use: {
         browserName: 'firefox'
       }
@@ -26,7 +26,7 @@ const config: PlaywrightTestConfig = {
   ],
   reporter: 'list',
   webServer: {
-    command: 'npm run start-server-only',
+    command: 'npm run start',
     port: 3000,
     timeout: 120000,
     reuseExistingServer: !process.env.CI

addons/addon-attach/test/tsconfig.json

@@ -1,23 +1,41 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2021",
+    "target": "ESNext",
     "lib": [
-      "es2015"
+      "es2021",
     ],
     "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"
+      "../../../node_modules/@types/node"
     ]
   },
   "include": [
     "./**/*",
     "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    },
+    {
+      "path": "../../../test/playwright"
+    }
   ]
 }

addons/addon-attach/webpack.config.js

@@ -25,7 +25,9 @@ module.exports = {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    // Force usage of globalThis instead of global / self. (This is cross-env compatible)
+    globalObject: 'globalThis',
   },
   mode: 'production'
 };

addons/addon-canvas/.gitignore

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

addons/addon-canvas/README.md

@@ -1,28 +0,0 @@
-## @xterm/addon-canvas
-
-An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a canvas-based renderer using a 2d context to draw. This addon requires xterm.js v5+.
-
-The purpose of this addon is to be used as a fallback for the [webgl addon](https://www.npmjs.com/package/@xterm/addon-webgl) when better performance is desired over the default DOM renderer, but WebGL2 isn't supported or performant for some reason.
-
-### Install
-
-```bash
-npm install --save @xterm/addon-canvas
-```
-
-### Usage
-
-```ts
-import { Terminal } from '@xterm/xterm';
-import { CanvasAddon } from '@xterm/addon-canvas';
-
-const terminal = new Terminal();
-terminal.open(element);
-terminal.loadAddon(new CanvasAddon());
-```
-
-See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-canvas/typings/addon-canvas.d.ts) for more advanced usage.
-
-### See also
-
-- [@xterm/addon-webgl](https://www.npmjs.com/package/@xterm/addon-webgl) A renderer for xterm.js that uses WebGL

addons/addon-canvas/src/BaseRenderLayer.ts

@@ -1,511 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { ReadonlyColorSet } from 'browser/Types';
-import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
-import { acquireTextureAtlas } from 'browser/renderer/shared/CharAtlasCache';
-import { TEXT_BASELINE } from 'browser/renderer/shared/Constants';
-import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
-import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
-import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
-import { IRasterizedGlyph, IRenderDimensions, ISelectionRenderModel, ITextureAtlas } from 'browser/renderer/shared/Types';
-import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
-import { isSafari } from 'common/Platform';
-import { ICellData } from 'common/Types';
-import { CellData } from 'common/buffer/CellData';
-import { WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from '@xterm/xterm';
-import { IRenderLayer } from './Types';
-
-export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
-  private _canvas: HTMLCanvasElement;
-  protected _ctx!: CanvasRenderingContext2D;
-  private _deviceCharWidth: number = 0;
-  private _deviceCharHeight: number = 0;
-  private _deviceCellWidth: number = 0;
-  private _deviceCellHeight: number = 0;
-  private _deviceCharLeft: number = 0;
-  private _deviceCharTop: number = 0;
-
-  protected _selectionModel: ISelectionRenderModel = createSelectionRenderModel();
-  private _cellColorResolver: CellColorResolver;
-  private _bitmapGenerator: (BitmapGenerator | undefined)[] = [];
-
-  protected _charAtlas!: ITextureAtlas;
-  protected _charAtlasDisposable = this.register(new MutableDisposable());
-
-  public get canvas(): HTMLCanvasElement { return this._canvas; }
-  public get cacheCanvas(): HTMLCanvasElement { return this._charAtlas?.pages[0].canvas!; }
-
-  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
-  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
-
-  constructor(
-    private readonly _terminal: Terminal,
-    private _container: HTMLElement,
-    id: string,
-    zIndex: number,
-    private _alpha: boolean,
-    protected readonly _themeService: IThemeService,
-    protected readonly _bufferService: IBufferService,
-    protected readonly _optionsService: IOptionsService,
-    protected readonly _decorationService: IDecorationService,
-    protected readonly _coreBrowserService: ICoreBrowserService
-  ) {
-    super();
-    this._cellColorResolver = new CellColorResolver(this._terminal, this._optionsService, this._selectionModel, this._decorationService, this._coreBrowserService, this._themeService);
-    this._canvas = this._coreBrowserService.mainDocument.createElement('canvas');
-    this._canvas.classList.add(`xterm-${id}-layer`);
-    this._canvas.style.zIndex = zIndex.toString();
-    this._initCanvas();
-    this._container.appendChild(this._canvas);
-    this._refreshCharAtlas(this._themeService.colors);
-    this.register(this._themeService.onChangeColors(e => {
-      this._refreshCharAtlas(e);
-      this.reset();
-      // Trigger selection changed as it's handled separately to regular rendering
-      this.handleSelectionChanged(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
-    }));
-
-    this.register(toDisposable(() => {
-      this._canvas.remove();
-    }));
-  }
-
-  private _initCanvas(): void {
-    this._ctx = throwIfFalsy(this._canvas.getContext('2d', { alpha: this._alpha }));
-    // Draw the background if this is an opaque layer
-    if (!this._alpha) {
-      this._clearAll();
-    }
-  }
-
-  public handleBlur(): void {}
-  public handleFocus(): void {}
-  public handleCursorMove(): void {}
-  public handleGridChanged(startRow: number, endRow: number): void {}
-
-  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
-    this._selectionModel.update((this._terminal as any)._core, start, end, columnSelectMode);
-  }
-
-  protected _setTransparency(alpha: boolean): void {
-    // Do nothing when alpha doesn't change
-    if (alpha === this._alpha) {
-      return;
-    }
-
-    // Create new canvas and replace old one
-    const oldCanvas = this._canvas;
-    this._alpha = alpha;
-    // Cloning preserves properties
-    this._canvas = this._canvas.cloneNode() as HTMLCanvasElement;
-    this._initCanvas();
-    this._container.replaceChild(this._canvas, oldCanvas);
-
-    // Regenerate char atlas and force a full redraw
-    this._refreshCharAtlas(this._themeService.colors);
-    this.handleGridChanged(0, this._bufferService.rows - 1);
-  }
-
-  /**
-   * Refreshes the char atlas, aquiring a new one if necessary.
-   * @param colorSet The color set to use for the char atlas.
-   */
-  private _refreshCharAtlas(colorSet: ReadonlyColorSet): void {
-    if (this._deviceCharWidth <= 0 && this._deviceCharHeight <= 0) {
-      return;
-    }
-    this._charAtlas = acquireTextureAtlas(this._terminal, this._optionsService.rawOptions, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
-    this._charAtlasDisposable.value = forwardEvent(this._charAtlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);
-    this._charAtlas.warmUp();
-    for (let i = 0; i < this._charAtlas.pages.length; i++) {
-      this._bitmapGenerator[i] = new BitmapGenerator(this._charAtlas.pages[i].canvas);
-    }
-  }
-
-  public resize(dim: IRenderDimensions): void {
-    this._deviceCellWidth = dim.device.cell.width;
-    this._deviceCellHeight = dim.device.cell.height;
-    this._deviceCharWidth = dim.device.char.width;
-    this._deviceCharHeight = dim.device.char.height;
-    this._deviceCharLeft = dim.device.char.left;
-    this._deviceCharTop = dim.device.char.top;
-    this._canvas.width = dim.device.canvas.width;
-    this._canvas.height = dim.device.canvas.height;
-    this._canvas.style.width = `${dim.css.canvas.width}px`;
-    this._canvas.style.height = `${dim.css.canvas.height}px`;
-
-    // Draw the background if this is an opaque layer
-    if (!this._alpha) {
-      this._clearAll();
-    }
-
-    this._refreshCharAtlas(this._themeService.colors);
-  }
-
-  public abstract reset(): void;
-
-  public clearTextureAtlas(): void {
-    this._charAtlas?.clearTexture();
-  }
-
-  /**
-   * Fills 1+ cells completely. This uses the existing fillStyle on the context.
-   * @param x The column to start at.
-   * @param y The row to start at
-   * @param width The number of columns to fill.
-   * @param height The number of rows to fill.
-   */
-  protected _fillCells(x: number, y: number, width: number, height: number): void {
-    this._ctx.fillRect(
-      x * this._deviceCellWidth,
-      y * this._deviceCellHeight,
-      width * this._deviceCellWidth,
-      height * this._deviceCellHeight);
-  }
-
-  /**
-   * Fills a 1px line (2px on HDPI) at the middle of the cell. This uses the
-   * existing fillStyle on the context.
-   * @param x The column to fill.
-   * @param y The row to fill.
-   */
-  protected _fillMiddleLineAtCells(x: number, y: number, width: number = 1): void {
-    const cellOffset = Math.ceil(this._deviceCellHeight * 0.5);
-    this._ctx.fillRect(
-      x * this._deviceCellWidth,
-      (y + 1) * this._deviceCellHeight - cellOffset - this._coreBrowserService.dpr,
-      width * this._deviceCellWidth,
-      this._coreBrowserService.dpr);
-  }
-
-  /**
-   * Fills a 1px line (2px on HDPI) at the bottom of the cell. This uses the
-   * existing fillStyle on the context.
-   * @param x The column to fill.
-   * @param y The row to fill.
-   */
-  protected _fillBottomLineAtCells(x: number, y: number, width: number = 1, pixelOffset: number = 0): void {
-    this._ctx.fillRect(
-      x * this._deviceCellWidth,
-      (y + 1) * this._deviceCellHeight + pixelOffset - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
-      width * this._deviceCellWidth,
-      this._coreBrowserService.dpr);
-  }
-
-  protected _curlyUnderlineAtCell(x: number, y: number, width: number = 1): void {
-    this._ctx.save();
-    this._ctx.beginPath();
-    this._ctx.strokeStyle = this._ctx.fillStyle;
-    const lineWidth = this._coreBrowserService.dpr;
-    this._ctx.lineWidth = lineWidth;
-    for (let xOffset = 0; xOffset < width; xOffset++) {
-      const xLeft = (x + xOffset) * this._deviceCellWidth;
-      const xMid = (x + xOffset + 0.5) * this._deviceCellWidth;
-      const xRight = (x + xOffset + 1) * this._deviceCellWidth;
-      const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
-      const yMidBot = yMid - lineWidth;
-      const yMidTop = yMid + lineWidth;
-      this._ctx.moveTo(xLeft, yMid);
-      this._ctx.bezierCurveTo(
-        xLeft, yMidBot,
-        xMid, yMidBot,
-        xMid, yMid
-      );
-      this._ctx.bezierCurveTo(
-        xMid, yMidTop,
-        xRight, yMidTop,
-        xRight, yMid
-      );
-    }
-    this._ctx.stroke();
-    this._ctx.restore();
-  }
-
-  protected _dottedUnderlineAtCell(x: number, y: number, width: number = 1): void {
-    this._ctx.save();
-    this._ctx.beginPath();
-    this._ctx.strokeStyle = this._ctx.fillStyle;
-    const lineWidth = this._coreBrowserService.dpr;
-    this._ctx.lineWidth = lineWidth;
-    this._ctx.setLineDash([lineWidth * 2, lineWidth]);
-    const xLeft = x * this._deviceCellWidth;
-    const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
-    this._ctx.moveTo(xLeft, yMid);
-    for (let xOffset = 0; xOffset < width; xOffset++) {
-      // const xLeft = x * this._deviceCellWidth;
-      const xRight = (x + width + xOffset) * this._deviceCellWidth;
-      this._ctx.lineTo(xRight, yMid);
-    }
-    this._ctx.stroke();
-    this._ctx.closePath();
-    this._ctx.restore();
-  }
-
-  protected _dashedUnderlineAtCell(x: number, y: number, width: number = 1): void {
-    this._ctx.save();
-    this._ctx.beginPath();
-    this._ctx.strokeStyle = this._ctx.fillStyle;
-    const lineWidth = this._coreBrowserService.dpr;
-    this._ctx.lineWidth = lineWidth;
-    this._ctx.setLineDash([lineWidth * 4, lineWidth * 3]);
-    const xLeft = x * this._deviceCellWidth;
-    const xRight = (x + width) * this._deviceCellWidth;
-    const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
-    this._ctx.moveTo(xLeft, yMid);
-    this._ctx.lineTo(xRight, yMid);
-    this._ctx.stroke();
-    this._ctx.closePath();
-    this._ctx.restore();
-  }
-
-  /**
-   * Fills a 1px line (2px on HDPI) at the left of the cell. This uses the
-   * existing fillStyle on the context.
-   * @param x The column to fill.
-   * @param y The row to fill.
-   */
-  protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
-    this._ctx.fillRect(
-      x * this._deviceCellWidth,
-      y * this._deviceCellHeight,
-      this._coreBrowserService.dpr * width,
-      this._deviceCellHeight);
-  }
-
-  /**
-   * Strokes a 1px rectangle (2px on HDPI) around a cell. This uses the existing
-   * strokeStyle on the context.
-   * @param x The column to fill.
-   * @param y The row to fill.
-   */
-  protected _strokeRectAtCell(x: number, y: number, width: number, height: number): void {
-    const lineWidth = this._coreBrowserService.dpr;
-    this._ctx.lineWidth = lineWidth;
-    this._ctx.strokeRect(
-      x * this._deviceCellWidth + lineWidth / 2,
-      y * this._deviceCellHeight + (lineWidth / 2),
-      width * this._deviceCellWidth - lineWidth,
-      (height * this._deviceCellHeight) - lineWidth);
-  }
-
-  /**
-   * Clears the entire canvas.
-   */
-  protected _clearAll(): void {
-    if (this._alpha) {
-      this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-    } else {
-      this._ctx.fillStyle = this._themeService.colors.background.css;
-      this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
-    }
-  }
-
-  /**
-   * Clears 1+ cells completely.
-   * @param x The column to start at.
-   * @param y The row to start at.
-   * @param width The number of columns to clear.
-   * @param height The number of rows to clear.
-   */
-  protected _clearCells(x: number, y: number, width: number, height: number): void {
-    if (this._alpha) {
-      this._ctx.clearRect(
-        x * this._deviceCellWidth,
-        y * this._deviceCellHeight,
-        width * this._deviceCellWidth,
-        height * this._deviceCellHeight);
-    } else {
-      this._ctx.fillStyle = this._themeService.colors.background.css;
-      this._ctx.fillRect(
-        x * this._deviceCellWidth,
-        y * this._deviceCellHeight,
-        width * this._deviceCellWidth,
-        height * this._deviceCellHeight);
-    }
-  }
-
-  /**
-   * Draws a truecolor character at the cell. The character will be clipped to
-   * ensure that it fits with the cell, including the cell to the right if it's
-   * a wide character. This uses the existing fillStyle on the context.
-   * @param cell The cell data for the character to draw.
-   * @param x The column to draw at.
-   * @param y The row to draw at.
-   */
-  protected _fillCharTrueColor(cell: CellData, x: number, y: number): void {
-    this._ctx.font = this._getFont(false, false);
-    this._ctx.textBaseline = TEXT_BASELINE;
-    this._clipRow(y);
-
-    // Draw custom characters if applicable
-    let drawSuccess = false;
-    if (this._optionsService.rawOptions.customGlyphs !== false) {
-      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._deviceCellWidth, y * this._deviceCellHeight, this._deviceCellWidth, this._deviceCellHeight, this._optionsService.rawOptions.fontSize, this._coreBrowserService.dpr);
-    }
-
-    // Draw the character
-    if (!drawSuccess) {
-      this._ctx.fillText(
-        cell.getChars(),
-        x * this._deviceCellWidth + this._deviceCharLeft,
-        y * this._deviceCellHeight + this._deviceCharTop + this._deviceCharHeight);
-    }
-  }
-
-  /**
-   * Draws one or more characters at a cell. If possible this will draw using
-   * the character atlas to reduce draw time.
-   */
-  protected _drawChars(cell: ICellData, x: number, y: number): void {
-    const chars = cell.getChars();
-    const code = cell.getCode();
-    const width = cell.getWidth();
-    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y, this._deviceCellWidth);
-
-    if (!this._charAtlas) {
-      return;
-    }
-
-    let glyph: IRasterizedGlyph;
-    if (chars && chars.length > 1) {
-      glyph = this._charAtlas.getRasterizedGlyphCombinedChar(chars, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext, true);
-    } else {
-      glyph = this._charAtlas.getRasterizedGlyph(cell.getCode() || WHITESPACE_CELL_CODE, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext, true);
-    }
-    if (!glyph.size.x || !glyph.size.y) {
-      return;
-    }
-    this._ctx.save();
-    this._clipRow(y);
-
-    // Draw the image, use the bitmap if it's available
-
-    // HACK: If the canvas doesn't match, delete the generator. It's not clear how this happens but
-    // something is wrong with either the lifecycle of _bitmapGenerator or the page canvases are
-    // swapped out unexpectedly
-    if (this._bitmapGenerator[glyph.texturePage] && this._charAtlas.pages[glyph.texturePage].canvas !== this._bitmapGenerator[glyph.texturePage]!.canvas) {
-      this._bitmapGenerator[glyph.texturePage]?.bitmap?.close();
-      delete this._bitmapGenerator[glyph.texturePage];
-    }
-
-    if (this._charAtlas.pages[glyph.texturePage].version !== this._bitmapGenerator[glyph.texturePage]?.version) {
-      if (!this._bitmapGenerator[glyph.texturePage]) {
-        this._bitmapGenerator[glyph.texturePage] = new BitmapGenerator(this._charAtlas.pages[glyph.texturePage].canvas);
-      }
-      this._bitmapGenerator[glyph.texturePage]!.refresh();
-      this._bitmapGenerator[glyph.texturePage]!.version = this._charAtlas.pages[glyph.texturePage].version;
-    }
-
-    // Reduce scale horizontally for wide glyphs printed in cells that would overlap with the
-    // following cell (ie. the width is not 2).
-    let renderWidth = glyph.size.x;
-    if (this._optionsService.rawOptions.rescaleOverlappingGlyphs) {
-      if (allowRescaling(code, width, glyph.size.x, this._deviceCellWidth)) {
-        renderWidth = this._deviceCellWidth - 1; // - 1 to improve readability
-      }
-    }
-
-    this._ctx.drawImage(
-      this._bitmapGenerator[glyph.texturePage]?.bitmap || this._charAtlas!.pages[glyph.texturePage].canvas,
-      glyph.texturePosition.x,
-      glyph.texturePosition.y,
-      glyph.size.x,
-      glyph.size.y,
-      x * this._deviceCellWidth + this._deviceCharLeft - glyph.offset.x,
-      y * this._deviceCellHeight + this._deviceCharTop - glyph.offset.y,
-      renderWidth,
-      glyph.size.y
-    );
-    this._ctx.restore();
-  }
-
-  /**
-   * Clips a row to ensure no pixels will be drawn outside the cells in the row.
-   * @param y The row to clip.
-   */
-  private _clipRow(y: number): void {
-    this._ctx.beginPath();
-    this._ctx.rect(
-      0,
-      y * this._deviceCellHeight,
-      this._bufferService.cols * this._deviceCellWidth,
-      this._deviceCellHeight);
-    this._ctx.clip();
-  }
-
-  /**
-   * Gets the current font.
-   * @param isBold If we should use the bold fontWeight.
-   */
-  protected _getFont(isBold: boolean, isItalic: boolean): string {
-    const fontWeight = isBold ? this._optionsService.rawOptions.fontWeightBold : this._optionsService.rawOptions.fontWeight;
-    const fontStyle = isItalic ? 'italic' : '';
-
-    return `${fontStyle} ${fontWeight} ${this._optionsService.rawOptions.fontSize * this._coreBrowserService.dpr}px ${this._optionsService.rawOptions.fontFamily}`;
-  }
-}
-
-/**
- * The number of milliseconds to wait before generating the ImageBitmap, this is to debounce/batch
- * the operation as window.createImageBitmap is asynchronous.
- */
-const GLYPH_BITMAP_COMMIT_DELAY = 100;
-
-const enum BitmapGeneratorState {
-  IDLE = 0,
-  GENERATING = 1,
-  GENERATING_INVALID = 2
-}
-
-class BitmapGenerator {
-  private _state: BitmapGeneratorState = BitmapGeneratorState.IDLE;
-  private _commitTimeout: number | undefined = undefined;
-  private _bitmap: ImageBitmap | undefined = undefined;
-  public get bitmap(): ImageBitmap | undefined { return this._bitmap; }
-  public version: number = -1;
-
-  constructor(public readonly canvas: HTMLCanvasElement) {
-  }
-
-  public refresh(): void {
-    // Clear the bitmap immediately as it's stale
-    this._bitmap?.close();
-    this._bitmap = undefined;
-    // Disable ImageBitmaps on Safari because of https://bugs.webkit.org/show_bug.cgi?id=149990
-    if (isSafari) {
-      return;
-    }
-    if (this._commitTimeout === undefined) {
-      this._commitTimeout = window.setTimeout(() => this._generate(), GLYPH_BITMAP_COMMIT_DELAY);
-    }
-    if (this._state === BitmapGeneratorState.GENERATING) {
-      this._state = BitmapGeneratorState.GENERATING_INVALID;
-    }
-  }
-
-  private _generate(): void {
-    if (this._state === BitmapGeneratorState.IDLE) {
-      this._bitmap?.close();
-      this._bitmap = undefined;
-      this._state = BitmapGeneratorState.GENERATING;
-      window.createImageBitmap(this.canvas).then(bitmap => {
-        if (this._state === BitmapGeneratorState.GENERATING_INVALID) {
-          this.refresh();
-        } else {
-          this._bitmap = bitmap;
-        }
-        this._state = BitmapGeneratorState.IDLE;
-      });
-      if (this._commitTimeout) {
-        this._commitTimeout = undefined;
-      }
-    }
-  }
-}

addons/addon-canvas/src/CanvasAddon.ts

@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2022 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import type { ITerminalAddon, Terminal } from '@xterm/xterm';
-import type { CanvasAddon as ICanvasApi } from '@xterm/addon-canvas';
-import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { ITerminal } from 'browser/Types';
-import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { Disposable, toDisposable } from 'common/Lifecycle';
-import { setTraceLogger } from 'common/services/LogService';
-import { IBufferService, IDecorationService, ILogService } from 'common/services/Services';
-import { CanvasRenderer } from './CanvasRenderer';
-
-export class CanvasAddon extends Disposable implements ITerminalAddon , ICanvasApi {
-  private _terminal?: Terminal;
-  private _renderer?: CanvasRenderer;
-
-  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
-  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
-  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
-  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
-
-  public get textureAtlas(): HTMLCanvasElement | undefined {
-    return this._renderer?.textureAtlas;
-  }
-
-  public activate(terminal: Terminal): void {
-    const core = (terminal as any)._core as ITerminal;
-    if (!terminal.element) {
-      this.register(core.onWillOpen(() => this.activate(terminal)));
-      return;
-    }
-
-    this._terminal = terminal;
-    const coreService = core.coreService;
-    const optionsService = core.optionsService;
-    const screenElement = core.screenElement!;
-    const linkifier = core.linkifier!;
-
-    const unsafeCore = core as any;
-    const bufferService: IBufferService = unsafeCore._bufferService;
-    const renderService: IRenderService = unsafeCore._renderService;
-    const characterJoinerService: ICharacterJoinerService = unsafeCore._characterJoinerService;
-    const charSizeService: ICharSizeService = unsafeCore._charSizeService;
-    const coreBrowserService: ICoreBrowserService = unsafeCore._coreBrowserService;
-    const decorationService: IDecorationService = unsafeCore._decorationService;
-    const logService: ILogService = unsafeCore._logService;
-    const themeService: IThemeService = unsafeCore._themeService;
-
-    // Set trace logger just in case it hasn't been yet which could happen when the addon is
-    // bundled separately to the core module
-    setTraceLogger(logService);
-
-    this._renderer = new CanvasRenderer(terminal, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService, themeService);
-    this.register(forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
-    this.register(forwardEvent(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
-    renderService.setRenderer(this._renderer);
-    renderService.handleResize(bufferService.cols, bufferService.rows);
-
-    this.register(toDisposable(() => {
-      renderService.setRenderer((this._terminal as any)._core._createRenderer());
-      renderService.handleResize(terminal.cols, terminal.rows);
-      this._renderer?.dispose();
-      this._renderer = undefined;
-    }));
-  }
-
-  public clearTextureAtlas(): void {
-    this._renderer?.clearTextureAtlas();
-  }
-}

addons/addon-canvas/src/CanvasRenderer.ts

@@ -1,191 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { ILinkifier2 } from 'browser/Types';
-import { removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
-import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
-import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
-import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
-import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
-import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from '@xterm/xterm';
-import { CursorRenderLayer } from './CursorRenderLayer';
-import { LinkRenderLayer } from './LinkRenderLayer';
-import { SelectionRenderLayer } from './SelectionRenderLayer';
-import { TextRenderLayer } from './TextRenderLayer';
-import { IRenderLayer } from './Types';
-
-export class CanvasRenderer extends Disposable implements IRenderer {
-  private _renderLayers: IRenderLayer[];
-  private _devicePixelRatio: number;
-  private _observerDisposable = this.register(new MutableDisposable());
-
-  public dimensions: IRenderDimensions;
-
-  private readonly _onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>());
-  public readonly onRequestRedraw = this._onRequestRedraw.event;
-  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
-  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
-  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
-  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
-
-  constructor(
-    private readonly _terminal: Terminal,
-    private readonly _screenElement: HTMLElement,
-    linkifier2: ILinkifier2,
-    private readonly _bufferService: IBufferService,
-    private readonly _charSizeService: ICharSizeService,
-    private readonly _optionsService: IOptionsService,
-    characterJoinerService: ICharacterJoinerService,
-    coreService: ICoreService,
-    private readonly _coreBrowserService: ICoreBrowserService,
-    decorationService: IDecorationService,
-    private readonly _themeService: IThemeService
-  ) {
-    super();
-    const allowTransparency = this._optionsService.rawOptions.allowTransparency;
-    this._renderLayers = [
-      new TextRenderLayer(this._terminal, this._screenElement, 0, allowTransparency, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService, _themeService),
-      new SelectionRenderLayer(this._terminal, this._screenElement, 1, this._bufferService, this._coreBrowserService, decorationService, this._optionsService, _themeService),
-      new LinkRenderLayer(this._terminal, this._screenElement, 2, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService, _themeService),
-      new CursorRenderLayer(this._terminal, this._screenElement, 3, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService, _themeService)
-    ];
-    for (const layer of this._renderLayers) {
-      forwardEvent(layer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);
-    }
-    this.dimensions = createRenderDimensions();
-    this._devicePixelRatio = this._coreBrowserService.dpr;
-    this._updateDimensions();
-
-    this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
-    this.register(this._coreBrowserService.onWindowChange(w => {
-      this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
-    }));
-
-    this.register(toDisposable(() => {
-      for (const l of this._renderLayers) {
-        l.dispose();
-      }
-      removeTerminalFromCache(this._terminal);
-    }));
-  }
-
-  public get textureAtlas(): HTMLCanvasElement | undefined {
-    return this._renderLayers[0].cacheCanvas;
-  }
-
-  public handleDevicePixelRatioChange(): void {
-    // If the device pixel ratio changed, the char atlas needs to be regenerated
-    // and the terminal needs to refreshed
-    if (this._devicePixelRatio !== this._coreBrowserService.dpr) {
-      this._devicePixelRatio = this._coreBrowserService.dpr;
-      this.handleResize(this._bufferService.cols, this._bufferService.rows);
-    }
-  }
-
-  public handleResize(cols: number, rows: number): void {
-    // Update character and canvas dimensions
-    this._updateDimensions();
-
-    // Resize all render layers
-    for (const l of this._renderLayers) {
-      l.resize(this.dimensions);
-    }
-
-    // Resize the screen
-    this._screenElement.style.width = `${this.dimensions.css.canvas.width}px`;
-    this._screenElement.style.height = `${this.dimensions.css.canvas.height}px`;
-  }
-
-  public handleCharSizeChanged(): void {
-    this.handleResize(this._bufferService.cols, this._bufferService.rows);
-  }
-
-  public handleBlur(): void {
-    this._runOperation(l => l.handleBlur());
-  }
-
-  public handleFocus(): void {
-    this._runOperation(l => l.handleFocus());
-  }
-
-  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
-    this._runOperation(l => l.handleSelectionChanged(start, end, columnSelectMode));
-    // Selection foreground requires a full re-render
-    if (this._themeService.colors.selectionForeground) {
-      this._onRequestRedraw.fire({ start: 0, end: this._bufferService.rows - 1 });
-    }
-  }
-
-  public handleCursorMove(): void {
-    this._runOperation(l => l.handleCursorMove());
-  }
-
-  public clear(): void {
-    this._runOperation(l => l.reset());
-  }
-
-  private _runOperation(operation: (layer: IRenderLayer) => void): void {
-    for (const l of this._renderLayers) {
-      operation(l);
-    }
-  }
-
-  /**
-   * Performs the refresh loop callback, calling refresh only if a refresh is
-   * necessary before queueing up the next one.
-   */
-  public renderRows(start: number, end: number): void {
-    for (const l of this._renderLayers) {
-      l.handleGridChanged(start, end);
-    }
-  }
-
-  public clearTextureAtlas(): void {
-    for (const layer of this._renderLayers) {
-      layer.clearTextureAtlas();
-    }
-  }
-
-  /**
-   * Recalculates the character and canvas dimensions.
-   */
-  private _updateDimensions(): void {
-    if (!this._charSizeService.hasValidSize) {
-      return;
-    }
-
-    // See the WebGL renderer for an explanation of this section.
-    const dpr = this._coreBrowserService.dpr;
-    this.dimensions.device.char.width = Math.floor(this._charSizeService.width * dpr);
-    this.dimensions.device.char.height = Math.ceil(this._charSizeService.height * dpr);
-    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._optionsService.rawOptions.lineHeight);
-    this.dimensions.device.char.top = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
-    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._optionsService.rawOptions.letterSpacing);
-    this.dimensions.device.char.left = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
-    this.dimensions.device.canvas.height = this._bufferService.rows * this.dimensions.device.cell.height;
-    this.dimensions.device.canvas.width = this._bufferService.cols * this.dimensions.device.cell.width;
-    this.dimensions.css.canvas.height = Math.round(this.dimensions.device.canvas.height / dpr);
-    this.dimensions.css.canvas.width = Math.round(this.dimensions.device.canvas.width / dpr);
-    this.dimensions.css.cell.height = this.dimensions.css.canvas.height / this._bufferService.rows;
-    this.dimensions.css.cell.width = this.dimensions.css.canvas.width / this._bufferService.cols;
-  }
-
-  private _setCanvasDevicePixelDimensions(width: number, height: number): void {
-    this.dimensions.device.canvas.height = height;
-    this.dimensions.device.canvas.width = width;
-    // Resize all render layers
-    for (const l of this._renderLayers) {
-      l.resize(this.dimensions);
-    }
-    this._requestRedrawViewport();
-  }
-
-  private _requestRedrawViewport(): void {
-    this._onRequestRedraw.fire({ start: 0, end: this._bufferService.rows - 1 });
-  }
-}

addons/addon-canvas/src/CursorRenderLayer.ts

@@ -1,233 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { CursorBlinkStateManager } from 'browser/renderer/shared/CursorBlinkStateManager';
-import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
-import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { IEventEmitter } from 'common/EventEmitter';
-import { MutableDisposable } from 'common/Lifecycle';
-import { isFirefox } from 'common/Platform';
-import { ICellData } from 'common/Types';
-import { CellData } from 'common/buffer/CellData';
-import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from '@xterm/xterm';
-import { BaseRenderLayer } from './BaseRenderLayer';
-
-interface ICursorState {
-  x: number;
-  y: number;
-  isFocused: boolean;
-  style: string;
-  width: number;
-}
-
-export class CursorRenderLayer extends BaseRenderLayer {
-  private _state: ICursorState;
-  private _cursorRenderers: {[key: string]: (x: number, y: number, cell: ICellData) => void};
-  private _cursorBlinkStateManager: MutableDisposable<CursorBlinkStateManager> = this.register(new MutableDisposable());
-  private _cell: ICellData = new CellData();
-
-  constructor(
-    terminal: Terminal,
-    container: HTMLElement,
-    zIndex: number,
-    private readonly _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
-    bufferService: IBufferService,
-    optionsService: IOptionsService,
-    private readonly _coreService: ICoreService,
-    coreBrowserService: ICoreBrowserService,
-    decorationService: IDecorationService,
-    themeService: IThemeService
-  ) {
-    super(terminal, container, 'cursor', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
-    this._state = {
-      x: 0,
-      y: 0,
-      isFocused: false,
-      style: '',
-      width: 0
-    };
-    this._cursorRenderers = {
-      'bar': this._renderBarCursor.bind(this),
-      'block': this._renderBlockCursor.bind(this),
-      'underline': this._renderUnderlineCursor.bind(this),
-      'outline': this._renderOutlineCursor.bind(this)
-    };
-    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
-    this._handleOptionsChanged();
-  }
-
-  public resize(dim: IRenderDimensions): void {
-    super.resize(dim);
-    // Resizing the canvas discards the contents of the canvas so clear state
-    this._state = {
-      x: 0,
-      y: 0,
-      isFocused: false,
-      style: '',
-      width: 0
-    };
-  }
-
-  public reset(): void {
-    this._clearCursor();
-    this._cursorBlinkStateManager.value?.restartBlinkAnimation();
-    this._handleOptionsChanged();
-  }
-
-  public handleBlur(): void {
-    this._cursorBlinkStateManager.value?.pause();
-    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
-  }
-
-  public handleFocus(): void {
-    this._cursorBlinkStateManager.value?.resume();
-    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
-  }
-
-  private _handleOptionsChanged(): void {
-    if (this._optionsService.rawOptions.cursorBlink) {
-      if (!this._cursorBlinkStateManager.value) {
-        this._cursorBlinkStateManager.value = new CursorBlinkStateManager(() => this._render(true), this._coreBrowserService);
-      }
-    } else {
-      this._cursorBlinkStateManager.clear();
-    }
-    // Request a refresh from the terminal as management of rendering is being
-    // moved back to the terminal
-    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
-  }
-
-  public handleCursorMove(): void {
-    this._cursorBlinkStateManager.value?.restartBlinkAnimation();
-  }
-
-  public handleGridChanged(startRow: number, endRow: number): void {
-    if (!this._cursorBlinkStateManager.value || this._cursorBlinkStateManager.value.isPaused) {
-      this._render(false);
-    } else {
-      this._cursorBlinkStateManager.value.restartBlinkAnimation();
-    }
-  }
-
-  private _render(triggeredByAnimationFrame: boolean): void {
-    // Don't draw the cursor if it's hidden
-    if (!this._coreService.isCursorInitialized || this._coreService.isCursorHidden) {
-      this._clearCursor();
-      return;
-    }
-
-    const cursorY = this._bufferService.buffer.ybase + this._bufferService.buffer.y;
-    const viewportRelativeCursorY = cursorY - this._bufferService.buffer.ydisp;
-
-    // Don't draw the cursor if it's off-screen
-    if (viewportRelativeCursorY < 0 || viewportRelativeCursorY >= this._bufferService.rows) {
-      this._clearCursor();
-      return;
-    }
-
-    // in case cursor.x == cols adjust visual cursor to cols - 1
-    const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
-    this._bufferService.buffer.lines.get(cursorY)!.loadCell(cursorX, this._cell);
-    if (this._cell.content === undefined) {
-      return;
-    }
-
-    if (!this._coreBrowserService.isFocused) {
-      this._clearCursor();
-      this._ctx.save();
-      this._ctx.fillStyle = this._themeService.colors.cursor.css;
-      const cursorStyle = this._optionsService.rawOptions.cursorStyle;
-      const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
-      if (cursorInactiveStyle && cursorInactiveStyle !== 'none') {
-        this._cursorRenderers[cursorInactiveStyle](cursorX, viewportRelativeCursorY, this._cell);
-      }
-      this._ctx.restore();
-      this._state.x = cursorX;
-      this._state.y = viewportRelativeCursorY;
-      this._state.isFocused = false;
-      this._state.style = cursorStyle;
-      this._state.width = this._cell.getWidth();
-      return;
-    }
-
-    // Don't draw the cursor if it's blinking
-    if (this._cursorBlinkStateManager.value && !this._cursorBlinkStateManager.value.isCursorVisible) {
-      this._clearCursor();
-      return;
-    }
-
-    if (this._state) {
-      // The cursor is already in the correct spot, don't redraw
-      if (this._state.x === cursorX &&
-          this._state.y === viewportRelativeCursorY &&
-          this._state.isFocused === this._coreBrowserService.isFocused &&
-          this._state.style === this._optionsService.rawOptions.cursorStyle &&
-          this._state.width === this._cell.getWidth()) {
-        return;
-      }
-      this._clearCursor();
-    }
-
-    this._ctx.save();
-    this._cursorRenderers[this._optionsService.rawOptions.cursorStyle || 'block'](cursorX, viewportRelativeCursorY, this._cell);
-    this._ctx.restore();
-
-    this._state.x = cursorX;
-    this._state.y = viewportRelativeCursorY;
-    this._state.isFocused = false;
-    this._state.style = this._optionsService.rawOptions.cursorStyle;
-    this._state.width = this._cell.getWidth();
-  }
-
-  private _clearCursor(): void {
-    if (this._state) {
-      // Avoid potential rounding errors when browser is Firefox (#4487) or device pixel ratio is
-      // less than 1
-      if (isFirefox || this._coreBrowserService.dpr < 1) {
-        this._clearAll();
-      } else {
-        this._clearCells(this._state.x, this._state.y, this._state.width, 1);
-      }
-      this._state = {
-        x: 0,
-        y: 0,
-        isFocused: false,
-        style: '',
-        width: 0
-      };
-    }
-  }
-
-  private _renderBarCursor(x: number, y: number, cell: ICellData): void {
-    this._ctx.save();
-    this._ctx.fillStyle = this._themeService.colors.cursor.css;
-    this._fillLeftLineAtCell(x, y, this._optionsService.rawOptions.cursorWidth);
-    this._ctx.restore();
-  }
-
-  private _renderBlockCursor(x: number, y: number, cell: ICellData): void {
-    this._ctx.save();
-    this._ctx.fillStyle = this._themeService.colors.cursor.css;
-    this._fillCells(x, y, cell.getWidth(), 1);
-    this._ctx.fillStyle = this._themeService.colors.cursorAccent.css;
-    this._fillCharTrueColor(cell, x, y);
-    this._ctx.restore();
-  }
-
-  private _renderUnderlineCursor(x: number, y: number, cell: ICellData): void {
-    this._ctx.save();
-    this._ctx.fillStyle = this._themeService.colors.cursor.css;
-    this._fillBottomLineAtCells(x, y);
-    this._ctx.restore();
-  }
-
-  private _renderOutlineCursor(x: number, y: number, cell: ICellData): void {
-    this._ctx.save();
-    this._ctx.strokeStyle = this._themeService.colors.cursor.css;
-    this._strokeRectAtCell(x, y, cell.getWidth(), 1);
-    this._ctx.restore();
-  }
-}

addons/addon-canvas/src/GridCache.test.ts

@@ -1,62 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { GridCache } from './GridCache';
-
-describe('GridCache', () => {
-  let grid: GridCache<number>;
-
-  beforeEach(() => {
-    grid = new GridCache<number>();
-  });
-
-  describe('constructor', () => {
-    it('should create an empty cache', () => {
-      assert.equal(grid.cache.length, 0);
-    });
-  });
-
-  describe('resize', () => {
-    it('should fill all new elements with null', () => {
-      grid.resize(2, 2);
-      assert.equal(grid.cache.length, 2);
-      assert.equal(grid.cache[0].length, 2);
-      assert.equal(grid.cache[0][0], null);
-      assert.equal(grid.cache[0][1], null);
-      assert.equal(grid.cache[1].length, 2);
-      assert.equal(grid.cache[1][0], null);
-      assert.equal(grid.cache[1][1], null);
-      grid.resize(3, 2);
-      assert.equal(grid.cache.length, 3);
-      assert.equal(grid.cache[2][0], null);
-      assert.equal(grid.cache[2][1], null);
-    });
-
-    it('should remove rows/cols from the cache when reduced', () => {
-      grid.resize(2, 2);
-      grid.resize(1, 1);
-      assert.equal(grid.cache.length, 1);
-      assert.equal(grid.cache[0].length, 1);
-    });
-
-    it('should not touch existing cache entries if they fit in the new cache', () => {
-      grid.resize(1, 1);
-      assert.equal(grid.cache[0][0], null);
-      grid.cache[0][0] = 1;
-      grid.resize(2, 1);
-      assert.equal(grid.cache[0][0], 1);
-    });
-  });
-
-  describe('clear', () => {
-    it('should make all entries null', () => {
-      grid.resize(1, 1);
-      grid.cache[0][0] = 1;
-      grid.clear();
-      assert.equal(grid.cache[0][0], null);
-    });
-  });
-});

addons/addon-canvas/src/GridCache.ts

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-export class GridCache<T> {
-  public cache: (T | undefined)[][];
-
-  public constructor() {
-    this.cache = [];
-  }
-
-  public resize(width: number, height: number): void {
-    for (let x = 0; x < width; x++) {
-      if (this.cache.length <= x) {
-        this.cache.push([]);
-      }
-      for (let y = this.cache[x].length; y < height; y++) {
-        this.cache[x].push(undefined);
-      }
-      this.cache[x].length = height;
-    }
-    this.cache.length = width;
-  }
-
-  public clear(): void {
-    for (let x = 0; x < this.cache.length; x++) {
-      for (let y = 0; y < this.cache[x].length; y++) {
-        this.cache[x][y] = undefined;
-      }
-    }
-  }
-}

addons/addon-canvas/src/LinkRenderLayer.ts

@@ -1,84 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { ILinkifier2, ILinkifierEvent } from 'browser/Types';
-import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from '@xterm/xterm';
-import { BaseRenderLayer } from './BaseRenderLayer';
-
-export class LinkRenderLayer extends BaseRenderLayer {
-  private _state: ILinkifierEvent | undefined;
-
-  constructor(
-    terminal: Terminal,
-    container: HTMLElement,
-    zIndex: number,
-    linkifier2: ILinkifier2,
-    bufferService: IBufferService,
-    optionsService: IOptionsService,
-    decorationService: IDecorationService,
-    coreBrowserService: ICoreBrowserService,
-    themeService: IThemeService
-  ) {
-    super(terminal, container, 'link', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
-
-    this.register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
-    this.register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));
-  }
-
-  public resize(dim: IRenderDimensions): void {
-    super.resize(dim);
-    // Resizing the canvas discards the contents of the canvas so clear state
-    this._state = undefined;
-  }
-
-  public reset(): void {
-    this._clearCurrentLink();
-  }
-
-  private _clearCurrentLink(): void {
-    if (this._state) {
-      this._clearCells(this._state.x1, this._state.y1, this._state.cols - this._state.x1, 1);
-      const middleRowCount = this._state.y2 - this._state.y1 - 1;
-      if (middleRowCount > 0) {
-        this._clearCells(0, this._state.y1 + 1, this._state.cols, middleRowCount);
-      }
-      this._clearCells(0, this._state.y2, this._state.x2, 1);
-      this._state = undefined;
-    }
-  }
-
-  private _handleShowLinkUnderline(e: ILinkifierEvent): void {
-    if (e.fg === INVERTED_DEFAULT_COLOR) {
-      this._ctx.fillStyle = this._themeService.colors.background.css;
-    } else if (e.fg && is256Color(e.fg)) {
-      // 256 color support
-      this._ctx.fillStyle = this._themeService.colors.ansi[e.fg].css;
-    } else {
-      this._ctx.fillStyle = this._themeService.colors.foreground.css;
-    }
-
-    if (e.y1 === e.y2) {
-      // Single line link
-      this._fillBottomLineAtCells(e.x1, e.y1, e.x2 - e.x1);
-    } else {
-      // Multi-line link
-      this._fillBottomLineAtCells(e.x1, e.y1, e.cols - e.x1);
-      for (let y = e.y1 + 1; y < e.y2; y++) {
-        this._fillBottomLineAtCells(0, y, e.cols);
-      }
-      this._fillBottomLineAtCells(0, e.y2, e.x2);
-    }
-    this._state = e;
-  }
-
-  private _handleHideLinkUnderline(e: ILinkifierEvent): void {
-    this._clearCurrentLink();
-  }
-}

addons/addon-canvas/src/SelectionRenderLayer.ts

@@ -1,152 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-import { BaseRenderLayer } from './BaseRenderLayer';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { Terminal } from '@xterm/xterm';
-
-interface ISelectionState {
-  start?: [number, number];
-  end?: [number, number];
-  columnSelectMode?: boolean;
-  ydisp?: number;
-}
-
-export class SelectionRenderLayer extends BaseRenderLayer {
-  private _state!: ISelectionState;
-
-  constructor(
-    terminal: Terminal,
-    container: HTMLElement,
-    zIndex: number,
-    bufferService: IBufferService,
-    coreBrowserService: ICoreBrowserService,
-    decorationService: IDecorationService,
-    optionsService: IOptionsService,
-    themeService: IThemeService
-  ) {
-    super(terminal, container, 'selection', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
-    this._clearState();
-  }
-
-  private _clearState(): void {
-    this._state = {
-      start: undefined,
-      end: undefined,
-      columnSelectMode: undefined,
-      ydisp: undefined
-    };
-  }
-
-  public resize(dim: IRenderDimensions): void {
-    super.resize(dim);
-    // On resize use the base render layer's cached selection values since resize clears _state
-    // inside reset.
-    if (this._selectionModel.selectionStart && this._selectionModel.selectionEnd) {
-      this._clearState();
-      this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
-    }
-  }
-
-  public reset(): void {
-    if (this._state.start && this._state.end) {
-      this._clearState();
-      this._clearAll();
-    }
-  }
-
-  public handleBlur(): void {
-    this.reset();
-    this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
-  }
-
-  public handleFocus(): void {
-    this.reset();
-    this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
-  }
-
-  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
-    super.handleSelectionChanged(start, end, columnSelectMode);
-    this._redrawSelection(start, end, columnSelectMode);
-  }
-
-  private _redrawSelection(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
-    // Selection has not changed
-    if (!this._didStateChange(start, end, columnSelectMode, this._bufferService.buffer.ydisp)) {
-      return;
-    }
-
-    // Remove all selections
-    this._clearAll();
-
-    // Selection does not exist
-    if (!start || !end) {
-      this._clearState();
-      return;
-    }
-
-    // Translate from buffer position to viewport position
-    const viewportStartRow = start[1] - this._bufferService.buffer.ydisp;
-    const viewportEndRow = end[1] - this._bufferService.buffer.ydisp;
-    const viewportCappedStartRow = Math.max(viewportStartRow, 0);
-    const viewportCappedEndRow = Math.min(viewportEndRow, this._bufferService.rows - 1);
-
-    // No need to draw the selection
-    if (viewportCappedStartRow >= this._bufferService.rows || viewportCappedEndRow < 0) {
-      this._state.ydisp = this._bufferService.buffer.ydisp;
-      return;
-    }
-
-    this._ctx.fillStyle = (this._coreBrowserService.isFocused
-      ? this._themeService.colors.selectionBackgroundTransparent
-      : this._themeService.colors.selectionInactiveBackgroundTransparent).css;
-
-    if (columnSelectMode) {
-      const startCol = start[0];
-      const width = end[0] - startCol;
-      const height = viewportCappedEndRow - viewportCappedStartRow + 1;
-      this._fillCells(startCol, viewportCappedStartRow, width, height);
-    } else {
-      // Draw first row
-      const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
-      const startRowEndCol = viewportCappedStartRow === viewportEndRow ? end[0] : this._bufferService.cols;
-      this._fillCells(startCol, viewportCappedStartRow, startRowEndCol - startCol, 1);
-
-      // Draw middle rows
-      const middleRowsCount = Math.max(viewportCappedEndRow - viewportCappedStartRow - 1, 0);
-      this._fillCells(0, viewportCappedStartRow + 1, this._bufferService.cols, middleRowsCount);
-
-      // Draw final row
-      if (viewportCappedStartRow !== viewportCappedEndRow) {
-        // Only draw viewportEndRow if it's not the same as viewportStartRow
-        const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._bufferService.cols;
-        this._fillCells(0, viewportCappedEndRow, endCol, 1);
-      }
-    }
-
-    // Save state for next render
-    this._state.start = [start[0], start[1]];
-    this._state.end = [end[0], end[1]];
-    this._state.columnSelectMode = columnSelectMode;
-    this._state.ydisp = this._bufferService.buffer.ydisp;
-  }
-
-  private _didStateChange(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean, ydisp: number): boolean {
-    return !this._areCoordinatesEqual(start, this._state.start) ||
-      !this._areCoordinatesEqual(end, this._state.end) ||
-      columnSelectMode !== this._state.columnSelectMode ||
-      ydisp !== this._state.ydisp;
-  }
-
-  private _areCoordinatesEqual(coord1: [number, number] | undefined, coord2: [number, number] | undefined): boolean {
-    if (!coord1 || !coord2) {
-      return false;
-    }
-
-    return coord1[0] === coord2[0] && coord1[1] === coord2[1];
-  }
-}

addons/addon-canvas/src/TextRenderLayer.ts

@@ -1,292 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-import { JoinedCellData } from 'browser/services/CharacterJoinerService';
-import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { CharData, ICellData } from 'common/Types';
-import { AttributeData } from 'common/buffer/AttributeData';
-import { CellData } from 'common/buffer/CellData';
-import { Content, NULL_CELL_CODE } from 'common/buffer/Constants';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from '@xterm/xterm';
-import { BaseRenderLayer } from './BaseRenderLayer';
-import { GridCache } from './GridCache';
-
-/**
- * This CharData looks like a null character, which will forc a clear and render
- * when the character changes (a regular space ' ' character may not as it's
- * drawn state is a cleared cell).
- */
-// const OVERLAP_OWNED_CHAR_DATA: CharData = [null, '', 0, -1];
-
-export class TextRenderLayer extends BaseRenderLayer {
-  private _state: GridCache<CharData>;
-  private _characterWidth: number = 0;
-  private _characterFont: string = '';
-  private _characterOverlapCache: { [key: string]: boolean } = {};
-  private _workCell = new CellData();
-
-  constructor(
-    terminal: Terminal,
-    container: HTMLElement,
-    zIndex: number,
-    alpha: boolean,
-    bufferService: IBufferService,
-    optionsService: IOptionsService,
-    private readonly _characterJoinerService: ICharacterJoinerService,
-    decorationService: IDecorationService,
-    coreBrowserService: ICoreBrowserService,
-    themeService: IThemeService
-  ) {
-    super(terminal, container, 'text', zIndex, alpha, themeService, bufferService, optionsService, decorationService, coreBrowserService);
-    this._state = new GridCache<CharData>();
-    this.register(optionsService.onSpecificOptionChange('allowTransparency', value => this._setTransparency(value)));
-  }
-
-  public resize(dim: IRenderDimensions): void {
-    super.resize(dim);
-
-    // Clear the character width cache if the font or width has changed
-    const terminalFont = this._getFont(false, false);
-    if (this._characterWidth !== dim.device.char.width || this._characterFont !== terminalFont) {
-      this._characterWidth = dim.device.char.width;
-      this._characterFont = terminalFont;
-      this._characterOverlapCache = {};
-    }
-    // Resizing the canvas discards the contents of the canvas so clear state
-    this._state.clear();
-    this._state.resize(this._bufferService.cols, this._bufferService.rows);
-  }
-
-  public reset(): void {
-    this._state.clear();
-    this._clearAll();
-  }
-
-  private _forEachCell(
-    firstRow: number,
-    lastRow: number,
-    callback: (
-      cell: ICellData,
-      x: number,
-      y: number
-    ) => void
-  ): void {
-    for (let y = firstRow; y <= lastRow; y++) {
-      const row = y + this._bufferService.buffer.ydisp;
-      const line = this._bufferService.buffer.lines.get(row);
-      const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
-      for (let x = 0; x < this._bufferService.cols; x++) {
-        line!.loadCell(x, this._workCell);
-        let cell = this._workCell;
-
-        // If true, indicates that the current character(s) to draw were joined.
-        let isJoined = false;
-        let lastCharX = x;
-
-        // The character to the left is a wide character, drawing is owned by
-        // the char at x-1
-        if (cell.getWidth() === 0) {
-          continue;
-        }
-
-        // exit early for NULL and SP
-        // NOTE: commented out due to #4120 (needs a more clever patch to keep things performant)
-        // const code = cell.getCode();
-        // if (code === 0 || code === 32) {
-        //  continue;
-        // }
-
-        // 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(
-            this._workCell,
-            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;
-        }
-
-        // If the character is an overlapping char and the character to the
-        // right is a space, take ownership of the cell to the right. We skip
-        // this check for joined characters because their rendering likely won't
-        // yield the same result as rendering the last character individually.
-        if (!isJoined && this._isOverlapping(cell)) {
-          // If the character is overlapping, we want to force a re-render on every
-          // frame. This is specifically to work around the case where two
-          // overlaping chars `a` and `b` are adjacent, the cursor is moved to b and a
-          // space is added. Without this, the first half of `b` would never
-          // get removed, and `a` would not re-render because it thinks it's
-          // already in the correct state.
-          // this._state.cache[x][y] = OVERLAP_OWNED_CHAR_DATA;
-          if (lastCharX < line!.length - 1 && line!.getCodePoint(lastCharX + 1) === NULL_CELL_CODE) {
-            // patch width to 2
-            cell.content &= ~Content.WIDTH_MASK;
-            cell.content |= 2 << Content.WIDTH_SHIFT;
-            // this._clearChar(x + 1, y);
-            // The overlapping char's char data will force a clear and render when the
-            // overlapping char is no longer to the left of the character and also when
-            // the space changes to another character.
-            // this._state.cache[x + 1][y] = OVERLAP_OWNED_CHAR_DATA;
-          }
-        }
-
-        callback(
-          cell,
-          x,
-          y
-        );
-
-        x = lastCharX;
-      }
-    }
-  }
-
-  /**
-   * Draws the background for a specified range of columns. Tries to batch adjacent cells of the
-   * same color together to reduce draw calls.
-   */
-  private _drawBackground(firstRow: number, lastRow: number): void {
-    const ctx = this._ctx;
-    const cols = this._bufferService.cols;
-    let startX: number = 0;
-    let startY: number = 0;
-    let prevFillStyle: string | null = null;
-
-    ctx.save();
-
-    this._forEachCell(firstRow, lastRow, (cell, x, y) => {
-      // libvte and xterm both draw the background (but not foreground) of invisible characters,
-      // so we should too.
-      let nextFillStyle = null; // null represents default background color
-
-      if (cell.isInverse()) {
-        if (cell.isFgDefault()) {
-          nextFillStyle = this._themeService.colors.foreground.css;
-        } else if (cell.isFgRGB()) {
-          nextFillStyle = `rgb(${AttributeData.toColorRGB(cell.getFgColor()).join(',')})`;
-        } else {
-          nextFillStyle = this._themeService.colors.ansi[cell.getFgColor()].css;
-        }
-      } else if (cell.isBgRGB()) {
-        nextFillStyle = `rgb(${AttributeData.toColorRGB(cell.getBgColor()).join(',')})`;
-      } else if (cell.isBgPalette()) {
-        nextFillStyle = this._themeService.colors.ansi[cell.getBgColor()].css;
-      }
-
-      // Get any decoration foreground/background overrides, this must be fetched before the early
-      // exist but applied after inverse
-      let isTop = false;
-      this._decorationService.forEachDecorationAtCell(x, this._bufferService.buffer.ydisp + y, undefined, d => {
-        if (d.options.layer !== 'top' && isTop) {
-          return;
-        }
-        if (d.backgroundColorRGB) {
-          nextFillStyle = d.backgroundColorRGB.css;
-        }
-        isTop = d.options.layer === 'top';
-      });
-
-      if (prevFillStyle === null) {
-        // This is either the first iteration, or the default background was set. Either way, we
-        // don't need to draw anything.
-        startX = x;
-        startY = y;
-      }
-
-      if (y !== startY) {
-        // our row changed, draw the previous row
-        ctx.fillStyle = prevFillStyle || '';
-        this._fillCells(startX, startY, cols - startX, 1);
-        startX = x;
-        startY = y;
-      } else if (prevFillStyle !== nextFillStyle) {
-        // our color changed, draw the previous characters in this row
-        ctx.fillStyle = prevFillStyle || '';
-        this._fillCells(startX, startY, x - startX, 1);
-        startX = x;
-        startY = y;
-      }
-
-      prevFillStyle = nextFillStyle;
-    });
-
-    // flush the last color we encountered
-    if (prevFillStyle !== null) {
-      ctx.fillStyle = prevFillStyle;
-      this._fillCells(startX, startY, cols - startX, 1);
-    }
-
-    ctx.restore();
-  }
-
-  private _drawForeground(firstRow: number, lastRow: number): void {
-    this._forEachCell(firstRow, lastRow, (cell, x, y) => this._drawChars(cell, x, y));
-  }
-
-  public handleGridChanged(firstRow: number, lastRow: number): void {
-    // Resize has not been called yet
-    if (this._state.cache.length === 0) {
-      return;
-    }
-
-    if (this._charAtlas) {
-      this._charAtlas.beginFrame();
-    }
-
-    this._clearCells(0, firstRow, this._bufferService.cols, lastRow - firstRow + 1);
-    this._drawBackground(firstRow, lastRow);
-    this._drawForeground(firstRow, lastRow);
-  }
-
-  /**
-   * Whether a character is overlapping to the next cell.
-   */
-  private _isOverlapping(cell: ICellData): boolean {
-    // Only single cell characters can be overlapping, rendering issues can
-    // occur without this check
-    if (cell.getWidth() !== 1) {
-      return false;
-    }
-
-    // We assume that any ascii character will not overlap
-    if (cell.getCode() < 256) {
-      return false;
-    }
-
-    const chars = cell.getChars();
-
-    // Deliver from cache if available
-    if (this._characterOverlapCache.hasOwnProperty(chars)) {
-      return this._characterOverlapCache[chars];
-    }
-
-    // Setup the font
-    this._ctx.save();
-    this._ctx.font = this._characterFont;
-
-    // Measure the width of the character, but Math.floor it
-    // because that is what the renderer does when it calculates
-    // the character dimensions we are comparing against
-    const overlaps = Math.floor(this._ctx.measureText(chars).width) > this._characterWidth;
-
-    // Restore the original context
-    this._ctx.restore();
-
-    // Cache and return
-    this._characterOverlapCache[chars] = overlaps;
-    return overlaps;
-  }
-}

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

@@ -1,86 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { IDisposable } from 'common/Types';
-import { IEvent } from 'common/EventEmitter';
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-
-export interface IRequestRedrawEvent {
-  start: number;
-  end: number;
-}
-
-/**
- * Note that IRenderer implementations should emit the refresh event after
- * rendering rows to the screen.
- */
-export interface IRenderer extends IDisposable {
-  readonly dimensions: IRenderDimensions;
-
-  /**
-   * Fires when the renderer is requesting to be redrawn on the next animation
-   * frame but is _not_ a result of content changing (eg. selection changes).
-   */
-  readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
-
-  handleDevicePixelRatioChange(): void;
-  handleResize(cols: number, rows: number): void;
-  handleCharSizeChanged(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
-  handleCursorMove(): void;
-  handleOptionsChanged(): void;
-  clear(): void;
-  renderRows(start: number, end: number): void;
-  clearTextureAtlas?(): void;
-}
-
-export interface IRenderLayer extends IDisposable {
-  readonly canvas: HTMLCanvasElement;
-  readonly cacheCanvas: HTMLCanvasElement;
-
-  readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
-  /**
-   * Called when the terminal loses focus.
-   */
-  handleBlur(): void;
-
-  /**
-   * Called when the terminal gets focus.
-   */
-  handleFocus(): void;
-
-  /**
-   * Called when the cursor is moved.
-   */
-  handleCursorMove(): void;
-
-  /**
-   * Called when the data in the grid has changed (or needs to be rendered
-   * again).
-   */
-  handleGridChanged(startRow: number, endRow: number): void;
-
-  /**
-   * Calls when the selection changes.
-   */
-  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
-
-  /**
-   * Resize the render layer.
-   */
-  resize(dim: IRenderDimensions): void;
-
-  /**
-   * Clear the state of the render layer.
-   */
-  reset(): void;
-
-  /**
-   * Clears the texture atlas.
-   */
-  clearTextureAtlas(): void;
-}

addons/addon-canvas/test/CanvasRenderer.test.ts

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import test from '@playwright/test';
-import { ISharedRendererTestContext, injectSharedRendererTests, injectSharedRendererTestsStandalone } from '../../../out-test/playwright/SharedRendererTests';
-import { ITestContext, createTestContext, openTerminal } from '../../../out-test/playwright/TestUtils';
-
-let ctx: ITestContext;
-const ctxWrapper: ISharedRendererTestContext = {
-  value: undefined,
-  skipCanvasExceptions: true
-} as any;
-test.beforeAll(async ({ browser }) => {
-  ctx = await createTestContext(browser);
-  await openTerminal(ctx);
-  ctxWrapper.value = ctx;
-  await ctx.page.evaluate(`
-    window.addon = new window.CanvasAddon(true);
-    window.term.loadAddon(window.addon);
-  `);
-});
-test.afterAll(async () => await ctx.page.close());
-
-test.describe('Canvas Renderer Integration Tests', () => {
-  // HACK: The tests fail for an unknown reason
-  test.skip(({ browserName }) => browserName === 'webkit');
-
-  injectSharedRendererTests(ctxWrapper);
-  injectSharedRendererTestsStandalone(ctxWrapper, async () => {
-    await ctx.page.evaluate(`
-      window.addon = new window.CanvasAddon(true);
-      window.term.loadAddon(window.addon);
-    `);
-  });
-});

addons/addon-canvas/typings/addon-canvas.d.ts

@@ -1,43 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { Terminal, ITerminalAddon, IEvent } from '@xterm/xterm';
-
-declare module '@xterm/addon-canvas' {
-  /**
-   * An xterm.js addon that provides search functionality.
-   */
-  export class CanvasAddon implements ITerminalAddon {
-    public textureAtlas?: HTMLCanvasElement;
-
-    /**
-     * An event that is fired when the texture atlas of the renderer changes.
-     */
-    public readonly onChangeTextureAtlas: IEvent<HTMLCanvasElement>;
-
-    /**
-     * An event that is fired when the a new page is added to the texture atlas.
-     */
-    public readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
-
-    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;
-
-    /**
-     * Clears the terminal's texture atlas and triggers a redraw.
-     */
-    public clearTextureAtlas(): void;
-  }
-}

addons/addon-clipboard/.gitignore

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

addons/addon-clipboard/.npmignore

@@ -8,6 +8,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

addons/addon-clipboard/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+Copyright (c) 2023, The xterm.js authors (https://github.com/xtermjs/xterm.js)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

addons/addon-clipboard/README.md

@@ -0,0 +1,53 @@
+## @xterm/addon-clipboard
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables
+accessing the system clipboard. This addon requires xterm.js v4+.
+
+### Install
+
+```bash
+npm install --save @xterm/addon-clipboard
+```
+
+### Usage
+
+```ts
+import { Terminal } from 'xterm';
+import { ClipboardAddon } from '@xterm/addon-clipboard';
+
+const terminal = new Terminal();
+const clipboardAddon = new ClipboardAddon();
+terminal.loadAddon(clipboardAddon);
+```
+
+To use a custom clipboard provider
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { ClipboardAddon, IClipboardProvider, ClipboardSelectionType } from '@xterm/addon-clipboard';
+
+function b64Encode(data: string): string {
+  // Base64 encode impl
+}
+
+function b64Decode(data: string): string {
+  // Base64 decode impl
+}
+
+class MyCustomClipboardProvider implements IClipboardProvider {
+  private _data: string
+  public readText(selection: ClipboardSelectionType): Promise<string> {
+    return Promise.resolve(b64Encode(this._data));
+  }
+  public writeText(selection: ClipboardSelectionType, data: string): Promise<void> {
+    this._data = b64Decode(data);
+    return Promise.resolve();
+  }
+}
+
+const terminal = new Terminal();
+const clipboardAddon = new ClipboardAddon(new MyCustomClipboardProvider());
+terminal.loadAddon(clipboardAddon);
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-clipboard/typings/addon-clipboard.d.ts) for more advanced usage.

addons/addon-clipboard/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@xterm/addon-clipboard",
+  "version": "0.1.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-clipboard.js",
+  "module": "lib/addon-clipboard.mjs",
+  "types": "typings/addon-clipboard.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-clipboard",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p .",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package",
+    "start": "node ../../demo/start"
+  },
+  "peerDependencies": {
+    "@xterm/xterm": "^5.4.0"
+  },
+  "dependencies": {
+    "js-base64": "^3.7.5"
+  }
+}

addons/addon-clipboard/src/ClipboardAddon.ts

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { IDisposable, ITerminalAddon, Terminal } from '@xterm/xterm';
+import { type IClipboardProvider, ClipboardSelectionType, type IBase64 } from '@xterm/addon-clipboard';
+import { Base64 as JSBase64 } from 'js-base64';
+
+export class ClipboardAddon implements ITerminalAddon {
+  private _terminal?: Terminal;
+  private _disposable?: IDisposable;
+
+  constructor(
+    private _base64: IBase64 = new Base64(),
+    private _provider: IClipboardProvider = new BrowserClipboardProvider()
+  ) {}
+
+  public activate(terminal: Terminal): void {
+    this._terminal = terminal;
+    this._disposable = terminal.parser.registerOscHandler(52, data => this._setOrReportClipboard(data));
+  }
+
+  public dispose(): void {
+    return this._disposable?.dispose();
+  }
+
+  private _readText(sel: ClipboardSelectionType, data: string): void {
+    const b64 = this._base64.encodeText(data);
+    this._terminal?.input(`\x1b]52;${sel};${b64}\x07`, false);
+  }
+
+  private _setOrReportClipboard(data: string): boolean | Promise<boolean> {
+    const args = data.split(';');
+    if (args.length < 2) {
+      return true;
+    }
+
+    const pc = args[0] as ClipboardSelectionType;
+    const pd = args[1];
+    if (pd === '?') {
+      const text = this._provider.readText(pc);
+
+      // Report clipboard
+      if (text instanceof Promise) {
+        return text.then((data) => {
+          this._readText(pc, data);
+          return true;
+        });
+      }
+
+      this._readText(pc, text);
+      return true;
+    }
+
+    // Clear clipboard if text is not a base64 encoded string.
+    let text = '';
+    try {
+      text = this._base64.decodeText(pd);
+    } catch {}
+
+
+    const result = this._provider.writeText(pc, text);
+    if (result instanceof Promise) {
+      return result.then(() => true);
+    }
+
+    return true;
+  }
+}
+
+export class BrowserClipboardProvider implements IClipboardProvider {
+  public async readText(selection: ClipboardSelectionType): Promise<string> {
+    if (selection !== 'c') {
+      return Promise.resolve('');
+    }
+    return navigator.clipboard.readText();
+  }
+
+  public async writeText(selection: ClipboardSelectionType, text: string): Promise<void> {
+    if (selection !== 'c') {
+      return Promise.resolve();
+    }
+    return navigator.clipboard.writeText(text);
+  }
+}
+
+export class Base64 implements IBase64 {
+  public encodeText(data: string): string {
+    return JSBase64.encode(data);
+  }
+  public decodeText(data: string): string {
+    const text = JSBase64.decode(data);
+    if (!JSBase64.isValid(data) || JSBase64.encode(text) !== data) {
+      return '';
+    }
+    return text;
+  }
+}

addons/addon-clipboard/src/tsconfig.json

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

addons/addon-clipboard/test/ClipboardAddon.test.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import test from '@playwright/test';
+import { deepEqual, ok, strictEqual } from 'assert';
+import { ITestContext, createTestContext, launchBrowser, openTerminal, timeout } from '../../../test/playwright/TestUtils';
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }, testInfo) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx);
+});
+test.afterAll(async () => {
+  await ctx.page.close();
+});
+
+test.describe('ClipboardAddon', () => {
+
+  test.beforeEach(async ({}, testInfo) => {
+    // DEBT: This test doesn't work since the migration to @playwright/test
+    if (ctx.browser.browserType().name() !== 'chromium') {
+      testInfo.skip();
+      return;
+    }
+    if (ctx.browser.browserType().name() === 'chromium') {
+      // Enable clipboard access in chromium without user gesture
+      await ctx.page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
+    }
+    await ctx.page.evaluate(`
+      window.term.reset()
+      window.clipboard?.dispose();
+      window.clipboard = new ClipboardAddon();
+      window.term.loadAddon(window.clipboard);
+    `);
+  });
+
+  test.beforeEach(async () => {
+    await ctx.proxy.reset();
+  });
+
+  const testDataEncoded = 'aGVsbG8gd29ybGQ=';
+  const testDataDecoded = 'hello world';
+
+  test.describe('write data', async function (): Promise<any> {
+    test('simple string', async () => {
+      await ctx.proxy.write(`\x1b]52;c;${testDataEncoded}\x07`);
+      deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), testDataDecoded);
+    });
+    test('invalid base64 string', async () => {
+      await ctx.proxy.write(`\x1b]52;c;${testDataEncoded}invalid\x07`);
+      deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), '');
+    });
+    test('empty string', async () => {
+      await ctx.proxy.write(`\x1b]52;c;${testDataEncoded}\x07`);
+      await ctx.proxy.write(`\x1b]52;c;\x07`);
+      deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), '');
+    });
+  });
+
+  test.describe('read data', async function (): Promise<any> {
+    test('simple string', async () => {
+      await ctx.page.evaluate(`
+        window.data = [];
+        window.term.onData(e => data.push(e));
+      `);
+      await ctx.page.evaluate(() => window.navigator.clipboard.writeText('hello world'));
+      await ctx.proxy.write(`\x1b]52;c;?\x07`);
+      deepEqual(await ctx.page.evaluate('window.data'), [`\x1b]52;c;${testDataEncoded}\x07`]);
+    });
+    test('clear clipboard', async () => {
+      await ctx.proxy.write(`\x1b]52;c;!\x07`);
+      await ctx.proxy.write(`\x1b]52;c;?\x07`);
+      deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), '');
+    });
+  });
+});

addons/addon-clipboard/test/playwright.config.ts

@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'ChromeStable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'FirefoxStable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm run start',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;

addons/addon-clipboard/test/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2015",
+    "target": "ESNext",
     "lib": [
-      "es6",
+      "es2021",
     ],
     "rootDir": ".",
     "outDir": "../out-test",
@@ -20,10 +20,7 @@
     },
     "strict": true,
     "types": [
-      "../../../node_modules/@types/node",
-      "../../../node_modules/@lunapaint/png-codec",
-      "../../../out-test/playwright/TestUtils",
-      "../../../out-test/playwright/SharedRendererTests"
+      "../../../node_modules/@types/node"
     ]
   },
   "include": [
@@ -36,6 +33,9 @@
     },
     {
       "path": "../../../src/browser"
+    },
+    {
+      "path": "../../../test/playwright"
     }
   ]
 }

addons/addon-clipboard/typings/addon-clipboard.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal, ITerminalAddon } from '@xterm/xterm';
+
+declare module '@xterm/addon-clipboard' {
+  /**
+   * An xterm.js addon that enables accessing the system clipboard from
+   * xterm.js.
+   */
+  export class ClipboardAddon implements ITerminalAddon {
+    /**
+     * Creates a new clipboard addon.
+     * @param base64 An optional base64 encoder/decoder.
+     * @param provider An optional clipboard provider.
+     */
+    constructor(base64?: IBase64, provider?: IClipboardProvider);
+
+    /**
+     * Activates the addon
+     * @param terminal The terminal the addon is being loaded in.
+     */
+    public activate(terminal: Terminal): void;
+
+    /**
+     * Disposes the addon.
+     */
+    public dispose(): void
+  }
+
+  /**
+   * Clipboard selection type. This is used to specify which selection buffer to
+   * read or write to.
+   * - SYSTEM `c`: The system clipboard.
+   * - PRIMARY `p`: The primary clipboard. This is provided for compatibility
+   *  with Linux X11.
+   */
+  export const enum ClipboardSelectionType {
+    SYSTEM = 'c',
+    PRIMARY = 'p',
+  }
+
+  export interface IBase64 {
+    /**
+    * Converts a utf-8 string to a base64 string.
+    * @param data The utf-8 string to convert to base64 string.
+    */
+    encodeText(data: string): string;
+
+    /**
+    * Converts a base64 string to a utf-8 string.
+    * @param data The base64 string to convert to utf-8 string.
+    * @throws An error if the input is not valid base64.
+    */
+    decodeText(data: string): string;
+  }
+
+  /**
+   * A default Base64 encoding and decoding type.
+   **/
+  export class Base64 implements IBase64 {
+    /**
+     * Converts a utf-8 string to a base64 string.
+     * @param data The utf-8 string to convert to base64 string.
+     */
+    public encodeText(data: string): string;
+
+    /**
+     * Converts a base64 string to a utf-8 string.
+     * @param data The base64 string to convert to utf-8 string.
+     * @throws An error if the input is not valid base64.
+     */
+    public decodeText(data: string): string;
+  }
+
+  export interface IClipboardProvider {
+    /**
+     * Gets the clipboard content.
+     * @param selection The clipboard selection to read.
+     * @returns A promise that resolves with clipboard selection data.
+     */
+    readText(selection: ClipboardSelectionType): string | Promise<string>;
+
+    /**
+     * Sets the clipboard content.
+     * @param selection The clipboard selection to set.
+     * @param data The clipboard text to write.
+     */
+    writeText(selection: ClipboardSelectionType, text: string): void | Promise<void>;
+  }
+
+  /**
+   * The clipboard provider interface that enables xterm.js to access the system clipboard.
+   */
+  export class BrowserClipboardProvider implements IClipboardProvider{
+    /**
+     * Reads text from the clipboard.
+     * @param selection The selection type to read from.
+     * @returns A promise that resolves with the text from the clipboard.
+     */
+    public readText(selection: ClipboardSelectionType): Promise<string>;
+
+    /**
+     * Writes text to the clipboard.
+     * @param selection The selection type to write to.
+     * @param data The text to write to the clipboard.
+     * @returns A promise that resolves when the text has been written to the clipboard.
+     */
+    public writeText(selection: ClipboardSelectionType, data: string): Promise<void>;
+  }
+}

addons/addon-clipboard/webpack.config.js

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

addons/addon-clipboard/yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+js-base64@^3.7.5:
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.7.tgz#e51b84bf78fbf5702b9541e2cb7bfcb893b43e79"
+  integrity sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==

addons/addon-fit/.npmignore

@@ -8,6 +8,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

addons/addon-fit/package.json

@@ -6,6 +6,7 @@
     "url": "https://xtermjs.org/"
   },
   "main": "lib/addon-fit.js",
+  "module": "lib/addon-fit.mjs",
   "types": "typings/addon-fit.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-fit",
   "license": "MIT",
@@ -18,7 +19,8 @@
     "build": "../../node_modules/.bin/tsc -p .",
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
-    "prepublishOnly": "npm run package"
+    "prepublishOnly": "npm run package",
+    "start": "node ../../demo/start"
   },
   "peerDependencies": {
     "@xterm/xterm": "^5.0.0"

addons/addon-fit/src/FitAddon.ts

@@ -6,6 +6,7 @@
 import type { Terminal, ITerminalAddon } from '@xterm/xterm';
 import type { FitAddon as IFitApi } from '@xterm/addon-fit';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
+import { ViewportConstants } from 'browser/shared/Constants';
 
 interface ITerminalDimensions {
   /**
@@ -64,8 +65,9 @@ export class FitAddon implements ITerminalAddon , IFitApi {
       return undefined;
     }
 
-    const scrollbarWidth = this._terminal.options.scrollback === 0 ?
-      0 : core.viewport.scrollBarWidth;
+    const scrollbarWidth = (this._terminal.options.scrollback === 0
+      ? 0
+      : (this._terminal.options.overviewRuler?.width || ViewportConstants.DEFAULT_SCROLL_BAR_WIDTH));
 
     const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
     const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));

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

@@ -1,135 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { openTerminal, launchBrowser, timeout } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from '@playwright/test';
-
-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> {
-    browser = await launchBrowser();
-    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(() => unloadFit());
-
-    it('default', async function(): Promise<any> {
-      await loadFit();
-      const dimensions: {cols: number, rows: number} = await page.evaluate(`window.fit.proposeDimensions()`);
-      assert.isAbove(dimensions.cols, 85);
-      assert.isBelow(dimensions.cols, 88);
-      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.isAbove(dimensions.cols, 108);
-      assert.isBelow(dimensions.cols, 111);
-      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();
-      const dimensions: { cols: number, rows: number } | undefined = await page.evaluate(`window.fit.proposeDimensions()`);
-      // The value of dims will be undefined if the char measure strategy falls back to the DOM
-      // method, so only assert if it's not undefined.
-      if (dimensions) {
-        assert.isAbove(dimensions.cols, 85);
-        assert.isBelow(dimensions.cols, 88);
-        assert.isAbove(dimensions.rows, 24);
-        assert.isBelow(dimensions.rows, 29);
-      }
-    });
-  });
-
-  describe('fit', () => {
-    afterEach(() => 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.isAbove(cols, 85);
-      assert.isBelow(cols, 88);
-      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.isAbove(cols, 108);
-      assert.isBelow(cols, 111);
-      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/addon-fit/test/FitAddon.test.ts

@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import test from '@playwright/test';
+import { deepEqual, ok, strictEqual } from 'assert';
+import { ITestContext, createTestContext, openTerminal, timeout } from '../../../test/playwright/TestUtils';
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  ctx.page.setViewportSize({ width: 1024, height: 768 });
+  await openTerminal(ctx);
+});
+test.afterAll(async () => await ctx.page.close());
+
+test.describe('FitAddon', () => {
+  test.beforeEach(async function(): Promise<any> {
+    await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display=''`);
+    await ctx.page.evaluate(`
+      window.term.reset()
+      window.fit?.dispose();
+      window.fit = new FitAddon();
+      window.term.loadAddon(window.fit);
+    `);
+  });
+
+  // test.beforeEach(async function(): Promise<any> {
+  //   await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display=''`);
+  //   await openTerminal(page);
+  // });
+
+  // after(async () => {
+  //   await browser.close();
+  // });
+
+  // afterEach(async function(): Promise<any> {
+  //   await ctx.proxy.dispose();
+  // });
+
+  test('no terminal', async function(): Promise<any> {
+    await ctx.page.evaluate(`window.fit2 = new FitAddon();`);
+    strictEqual(await ctx.page.evaluate(`window.fit2.proposeDimensions()`), undefined);
+    await ctx.page.evaluate(`window.fit2.dispose();`);
+  });
+
+  test.describe('proposeDimensions', () => {
+    test('default', async function(): Promise<any> {
+      await setDimensions();
+      const dimensions: {cols: number, rows: number} = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
+      ok(dimensions.cols > 85);
+      ok(dimensions.cols < 88);
+      ok(dimensions.rows > 24);
+      ok(dimensions.rows < 29);
+    });
+
+    test('width', async function(): Promise<any> {
+      await setDimensions(1008);
+      const dimensions: {cols: number, rows: number} = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
+      ok(dimensions.cols > 108);
+      ok(dimensions.cols < 111);
+      ok(dimensions.rows > 24);
+      ok(dimensions.rows < 29);
+    });
+
+    test('small', async function(): Promise<any> {
+      await setDimensions(1, 1);
+      deepEqual(await ctx.page.evaluate(`window.fit.proposeDimensions()`), {
+        cols: 2,
+        rows: 1
+      });
+    });
+
+    test('hidden', async function(): Promise<any> {
+      await ctx.proxy.dispose();
+      await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display='none'`);
+      await ctx.page.evaluate(`window.term = new Terminal()`);
+      await ctx.page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
+      await setDimensions();
+      const dimensions: { cols: number, rows: number } | undefined = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
+      // The value of dims will be undefined if the char measure strategy falls back to the DOM
+      // method, so only assert if it's not undefined.
+      if (dimensions) {
+        ok(dimensions.cols > 85);
+        ok(dimensions.cols < 88);
+        ok(dimensions.rows > 24);
+        ok(dimensions.rows < 29);
+      }
+    });
+  });
+
+  test.describe('fit', () => {
+    test('default', async function(): Promise<any> {
+      await setDimensions();
+      await ctx.page.evaluate(`window.fit.fit()`);
+      const cols: number = await ctx.proxy.cols;
+      const rows: number = await ctx.proxy.rows;
+      ok(cols > 85);
+      ok(cols < 88);
+      ok(rows > 24);
+      ok(rows < 29);
+    });
+
+    test('width', async function(): Promise<any> {
+      await setDimensions(1008);
+      await ctx.page.evaluate(`window.fit.fit()`);
+      const cols: number = await ctx.proxy.cols;
+      const rows: number = await ctx.proxy.rows;
+      ok(cols > 108);
+      ok(cols < 111);
+      ok(rows > 24);
+      ok(rows < 29);
+    });
+
+    test('small', async function(): Promise<any> {
+      await setDimensions(1, 1);
+      await ctx.page.evaluate(`window.fit.fit()`);
+      strictEqual(await ctx.proxy.cols, 2);
+      strictEqual(await ctx.proxy.rows, 1);
+    });
+  });
+});
+
+async function setDimensions(width: number = 800, height: number = 450): Promise<void> {
+  await ctx.page.evaluate(`
+    document.querySelector('#terminal-container').style.width='${width}px';
+    document.querySelector('#terminal-container').style.height='${height}px';
+    document.querySelector('#terminal-container').style.display='';
+  `);
+  // HACK: Await a short period as hiding #terminal-container can mess with other tests
+  await timeout(500);
+}

addons/addon-fit/test/playwright.config.ts

@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'ChromeStable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'FirefoxStable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm run start',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;

addons/addon-fit/test/tsconfig.json

@@ -1,23 +1,41 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2021",
+    "target": "ESNext",
     "lib": [
-      "es2015"
+      "es2021",
     ],
     "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"
+      "../../../node_modules/@types/node"
     ]
   },
   "include": [
     "./**/*",
     "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    },
+    {
+      "path": "../../../test/playwright"
+    }
   ]
 }

addons/addon-fit/typings/addon-fit.d.ts

@@ -39,7 +39,7 @@ declare module '@xterm/addon-fit' {
   }
 
   /**
-   * Reprepresents the dimensions of a terminal.
+   * Represents the dimensions of a terminal.
    */
   export interface ITerminalDimensions {
     /**

addons/addon-fit/webpack.config.js

@@ -25,7 +25,9 @@ module.exports = {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    // Force usage of globalThis instead of global / self. (This is cross-env compatible)
+    globalObject: 'globalThis',
   },
   mode: 'production'
 };

addons/addon-image/.npmignore

@@ -6,5 +6,7 @@ tsconfig.json
 webpack.config.js
 test
 out-test
+out-esbuild
+out-esbuild-test
 inwasm-sdks
 inwasm-builds

addons/addon-image/package.json

@@ -6,6 +6,7 @@
     "url": "https://xtermjs.org/"
   },
   "main": "lib/addon-image.js",
+  "module": "lib/addon-image.mjs",
   "types": "typings/addon-image.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image",
   "license": "MIT",
@@ -19,7 +20,8 @@
   "scripts": {
     "prepackage": "../../node_modules/.bin/tsc -p .",
     "package": "../../node_modules/.bin/webpack",
-    "prepublishOnly": "npm run package"
+    "prepublishOnly": "npm run package",
+    "start": "node ../../demo/start"
   },
   "peerDependencies": {
     "@xterm/xterm": "^5.2.0"

addons/addon-image/src/IIPMetrics.test.ts

@@ -25,6 +25,7 @@ const TEST_IMAGES: [string, IMetrics][] = [
   ['w3c_home_gray.png', { mime: 'image/png', width: 72, height: 48 }],
   ['w3c_home.jpg', { mime: 'image/jpeg', width: 72, height: 48 }],
   ['w3c_home.png', { mime: 'image/png', width: 72, height: 48 }],
+  ['w3c_home_noexif.jpg', { mime: 'image/jpeg', width: 72, height: 48 }],
   ['spinfox.png', { mime: 'image/png', width: 148, height: 148 }],
   ['iphone_hdr_YES.jpg', { mime: 'image/jpeg', width: 3264, height: 2448 }],
   ['nikon-e950.jpg', { mime: 'image/jpeg', width: 800, height: 600 }],

addons/addon-image/src/IIPMetrics.ts

@@ -32,13 +32,8 @@ export function imageType(d: Uint8Array): IMetrics {
       height: d[20] << 24 | d[21] << 16 | d[22] << 8 | d[23]
     };
   }
-  // JPEG: FF D8 FF E0 xx xx JFIF  or  FF D8 FF E1 xx xx Exif 00 00
-  if ((d32[0] === 0xE0FFD8FF || d32[0] === 0xE1FFD8FF)
-    &&  (
-      (d[6] === 0x4a && d[7] === 0x46 && d[8] === 0x49 && d[9] === 0x46)
-        ||  (d[6] === 0x45 && d[7] === 0x78 && d[8] === 0x69 && d[9] === 0x66)
-    )
-  ) {
+  // JPEG: FF D8 FF
+  if (d[0] === 0xFF && d[1] === 0xD8 && d[2] === 0xFF) {
     const [width, height] = jpgSize(d);
     return { mime: 'image/jpeg', width, height };
   }

addons/addon-image/src/ImageRenderer.ts

@@ -6,8 +6,7 @@
 import { toRGBA8888 } from 'sixel/lib/Colors';
 import { IDisposable } from '@xterm/xterm';
 import { ICellSize, ITerminalExt, IImageSpec, IRenderDimensions, IRenderService } from './Types';
-import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
-
+import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
 
 const PLACEHOLDER_LENGTH = 4096;
 const PLACEHOLDER_HEIGHT = 24;
@@ -23,7 +22,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
   private _ctx: CanvasRenderingContext2D | null | undefined;
   private _placeholder: HTMLCanvasElement | undefined;
   private _placeholderBitmap: ImageBitmap | undefined;
-  private _optionsRefresh = this.register(new MutableDisposable());
+  private _optionsRefresh = this._register(new MutableDisposable());
   private _oldOpen: ((parent: HTMLElement) => void) | undefined;
   private _renderService: IRenderService | undefined;
   private _oldSetRenderer: ((renderer: any) => void) | undefined;
@@ -85,7 +84,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
         this._renderService?.refreshRows(0, this._terminal.rows);
       }
     });
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
       this.removeLayerFromDom();
       if (this._terminal._core && this._oldOpen) {
         this._terminal._core.open = this._oldOpen;

addons/addon-image/src/tsconfig.json

@@ -15,6 +15,7 @@
     "paths": {
       "browser/*": [ "../../../src/browser/*" ],
       "common/*": [ "../../../src/common/*" ],
+      "vs/*": [ "../../../src/vs/*" ],
       "@xterm/addon-image": [ "../typings/addon-image.d.ts" ]
     }
   },
@@ -24,6 +25,7 @@
   ],
   "references": [
     { "path": "../../../src/browser" },
-    { "path": "../../../src/common" }
+    { "path": "../../../src/common" },
+    { "path": "../../../src/vs" }
   ]
 }

addons/addon-image/test/ImageAddon.api.ts

@@ -1,321 +0,0 @@
-/**
- * Copyright (c) 2020 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { openTerminal, launchBrowser, pollFor } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from '@playwright/test';
-import { IImageAddonOptions } from '../src/Types';
-import { FINALIZER, introducer, sixelEncode } from 'sixel';
-import { readFileSync } from 'fs';
-
-const APP = 'http://127.0.0.1:3001/test';
-
-let browser: Browser;
-let page: Page;
-const width = 800;
-const height = 600;
-
-// eslint-disable-next-line
-declare const ImageAddon: {
-  new(options?: Partial<IImageAddonOptions>): any;
-};
-
-interface ITestData {
-  width: number;
-  height: number;
-  bytes: Uint8Array;
-  palette: number[];
-  sixel: string;
-}
-
-interface IDimensions {
-  cellWidth: number;
-  cellHeight: number;
-  width: number;
-  height: number;
-}
-
-// image: 640 x 80, 512 color
-const TESTDATA: ITestData = (() => {
-  const data8 = readFileSync('./addons/addon-image/fixture/palette.blob');
-  const data32 = new Uint32Array(data8.buffer);
-  const palette = new Set<number>();
-  for (let i = 0; i < data32.length; ++i) palette.add(data32[i]);
-  const sixel = sixelEncode(data8, 640, 80, [...palette]);
-  return {
-    width: 640,
-    height: 80,
-    bytes: data8,
-    palette: [...palette],
-    sixel
-  };
-})();
-const SIXEL_SEQ_0 = introducer(0) + TESTDATA.sixel + FINALIZER;
-// const SIXEL_SEQ_1 = introducer(1) + TESTDATA.sixel + FINALIZER;
-// const SIXEL_SEQ_2 = introducer(2) + TESTDATA.sixel + FINALIZER;
-
-// NOTE: the data is loaded as string for easier transport through playwright
-const TESTDATA_IIP: [string, [number, number]][] = [
-  [readFileSync('./addons/addon-image/fixture/iip/palette.iip', { encoding: 'utf-8' }), [640, 80]],
-  [readFileSync('./addons/addon-image/fixture/iip/spinfox.iip', { encoding: 'utf-8' }), [148, 148]],
-  [readFileSync('./addons/addon-image/fixture/iip/w3c_gif.iip', { encoding: 'utf-8' }), [72, 48]],
-  [readFileSync('./addons/addon-image/fixture/iip/w3c_jpg.iip', { encoding: 'utf-8' }), [72, 48]],
-  [readFileSync('./addons/addon-image/fixture/iip/w3c_png.iip', { encoding: 'utf-8' }), [72, 48]]
-];
-
-describe('ImageAddon', () => {
-  before(async () => {
-    browser = await launchBrowser();
-    page = await (await browser.newContext()).newPage();
-    await page.setViewportSize({ width, height });
-  });
-
-  after(async () => {
-    await browser.close();
-  });
-
-  beforeEach(async () => {
-    await page.goto(APP);
-    await openTerminal(page);
-    await page.evaluate(opts => {
-      (window as any).imageAddon = new ImageAddon(opts.opts);
-      (window as any).term.loadAddon((window as any).imageAddon);
-    }, { opts: { sixelPaletteLimit: 512 } });
-  });
-
-  it('test for private accessors', async () => {
-    // terminal privates
-    const accessors = [
-      '_core',
-      '_core._renderService',
-      '_core._inputHandler',
-      '_core._inputHandler._parser',
-      '_core._inputHandler._curAttrData',
-      '_core._inputHandler._dirtyRowTracker',
-      '_core._themeService.colors',
-      '_core._coreBrowserService'
-    ];
-    for (const prop of accessors) {
-      assert.equal(
-        await page.evaluate('(() => { const v = window.term.' + prop + '; return v !== undefined && v !== null; })()'),
-        true, `problem at ${prop}`
-      );
-    }
-    // bufferline privates
-    assert.equal(await page.evaluate('window.term._core.buffer.lines.get(0)._data instanceof Uint32Array'), true);
-    assert.equal(await page.evaluate('window.term._core.buffer.lines.get(0)._extendedAttrs instanceof Object'), true);
-    // inputhandler privates
-    assert.equal(await page.evaluate('window.term._core._inputHandler._curAttrData.constructor.name'), 'AttributeData');
-    assert.equal(await page.evaluate('window.term._core._inputHandler._parser.constructor.name'), 'EscapeSequenceParser');
-  });
-
-  describe('ctor options', () => {
-    it('empty settings should load defaults', async () => {
-      const DEFAULT_OPTIONS: IImageAddonOptions = {
-        enableSizeReports: true,
-        pixelLimit: 16777216,
-        sixelSupport: true,
-        sixelScrolling: true,
-        sixelPaletteLimit: 512,  // set to 512 to get example image working
-        sixelSizeLimit: 25000000,
-        storageLimit: 128,
-        showPlaceholder: true,
-        iipSupport: true,
-        iipSizeLimit: 20000000
-      };
-      assert.deepEqual(await page.evaluate(`window.imageAddon._opts`), DEFAULT_OPTIONS);
-    });
-    it('custom settings should overload defaults', async () => {
-      const customSettings: IImageAddonOptions = {
-        enableSizeReports: false,
-        pixelLimit: 5,
-        sixelSupport: false,
-        sixelScrolling: false,
-        sixelPaletteLimit: 1024,
-        sixelSizeLimit: 1000,
-        storageLimit: 10,
-        showPlaceholder: false,
-        iipSupport: false,
-        iipSizeLimit: 1000
-      };
-      await page.evaluate(opts => {
-        (window as any).imageAddonCustom = new ImageAddon(opts.opts);
-        (window as any).term.loadAddon((window as any).imageAddonCustom);
-      }, { opts: customSettings });
-      assert.deepEqual(await page.evaluate(`window.imageAddonCustom._opts`), customSettings);
-    });
-  });
-
-  describe('scrolling & cursor modes', () => {
-    it('testdata default (scrolling with VT240 cursor pos)', async () => {
-      const dim = await getDimensions();
-      await writeToTerminal(SIXEL_SEQ_0);
-      assert.deepEqual(await getCursor(), [0, Math.floor(TESTDATA.height/dim.cellHeight)]);
-      // moved to right by 10 cells
-      await writeToTerminal('#'.repeat(10) + SIXEL_SEQ_0);
-      assert.deepEqual(await getCursor(), [10, Math.floor(TESTDATA.height/dim.cellHeight) * 2]);
-    });
-    it('write testdata noScrolling', async () => {
-      await writeToTerminal('\x1b[?80h' + SIXEL_SEQ_0);
-      assert.deepEqual(await getCursor(), [0, 0]);
-      // second draw does not change anything
-      await writeToTerminal(SIXEL_SEQ_0);
-      assert.deepEqual(await getCursor(), [0, 0]);
-    });
-    it('testdata cursor always at VT240 pos', async () => {
-      const dim = await getDimensions();
-      // offset 0
-      await writeToTerminal(SIXEL_SEQ_0);
-      assert.deepEqual(await getCursor(), [0, Math.floor(TESTDATA.height/dim.cellHeight)]);
-      // moved to right by 10 cells
-      await writeToTerminal('#'.repeat(10) + SIXEL_SEQ_0);
-      assert.deepEqual(await getCursor(), [10, Math.floor(TESTDATA.height/dim.cellHeight) * 2]);
-      // moved by 30 cells (+10 prev)
-      await writeToTerminal('#'.repeat(30) + SIXEL_SEQ_0);
-      assert.deepEqual(await getCursor(), [10 + 30, Math.floor(TESTDATA.height/dim.cellHeight) * 3]);
-    });
-  });
-
-  describe('image lifecycle & eviction', () => {
-    it('delete image once scrolled off', async () => {
-      await writeToTerminal(SIXEL_SEQ_0);
-      pollFor(page, 'window.imageAddon._storage._images.size', 1);
-      // scroll to scrollback + rows - 1
-      await page.evaluate(
-        scrollback => new Promise(res => (window as any).term.write('\n'.repeat(scrollback), res)),
-        (await getScrollbackPlusRows() - 1)
-      );
-      // wait here, as we have to make sure, that eviction did not yet occur
-      await new Promise(r => setTimeout(r, 100));
-      pollFor(page, 'window.imageAddon._storage._images.size', 1);
-      // scroll one further should delete the image
-      await page.evaluate(() => new Promise(res => (window as any).term.write('\n', res)));
-      pollFor(page, 'window.imageAddon._storage._images.size', 0);
-    });
-    it('get storageUsage', async () => {
-      assert.equal(await page.evaluate('imageAddon.storageUsage'), 0);
-      await writeToTerminal(SIXEL_SEQ_0);
-      assert.closeTo(await page.evaluate('imageAddon.storageUsage'), 640 * 80 * 4 / 1000000, 0.05);
-    });
-    it('get/set storageLimit', async () => {
-      assert.equal(await page.evaluate('imageAddon.storageLimit'), 128);
-      assert.equal(await page.evaluate('imageAddon.storageLimit = 1'), 1);
-      assert.equal(await page.evaluate('imageAddon.storageLimit'), 1);
-    });
-    it('remove images by storage limit pressure', async () => {
-      assert.equal(await page.evaluate('imageAddon.storageLimit = 1'), 1);
-      // never go beyond storage limit
-      await writeToTerminal(SIXEL_SEQ_0);
-      await writeToTerminal(SIXEL_SEQ_0);
-      await writeToTerminal(SIXEL_SEQ_0);
-      await writeToTerminal(SIXEL_SEQ_0);
-      await new Promise(r => setTimeout(r, 50));
-      const usage = await page.evaluate('imageAddon.storageUsage');
-      await writeToTerminal(SIXEL_SEQ_0);
-      await writeToTerminal(SIXEL_SEQ_0);
-      await writeToTerminal(SIXEL_SEQ_0);
-      await writeToTerminal(SIXEL_SEQ_0);
-      await new Promise(r => setTimeout(r, 50));
-      assert.equal(await page.evaluate('imageAddon.storageUsage'), usage);
-      assert.equal(usage as number < 1, true);
-    });
-    it('set storageLimit removes images synchronously', async () => {
-      await writeToTerminal(SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0);
-      const usage: number = await page.evaluate('imageAddon.storageUsage');
-      const newUsage: number = await page.evaluate('imageAddon.storageLimit = 0.5; imageAddon.storageUsage');
-      assert.equal(newUsage < usage, true);
-      assert.equal(newUsage < 0.5, true);
-    });
-    it('clear alternate images on buffer change', async () => {
-      assert.equal(await page.evaluate('imageAddon.storageUsage'), 0);
-      await writeToTerminal('\x1b[?1049h' + SIXEL_SEQ_0);
-      assert.closeTo(await page.evaluate('imageAddon.storageUsage'), 640 * 80 * 4 / 1000000, 0.05);
-      await writeToTerminal('\x1b[?1049l');
-      assert.equal(await page.evaluate('imageAddon.storageUsage'), 0);
-    });
-    it('evict tiles by in-place overwrites (only full overwrite tested)', async () => {
-      await new Promise(r => setTimeout(r, 50));
-      await writeToTerminal('\x1b[H' + SIXEL_SEQ_0 + '\x1b[100;100H');
-      let usage = await page.evaluate('imageAddon.storageUsage');
-      while (usage === 0) {
-        await new Promise(r => setTimeout(r, 50));
-        usage = await page.evaluate('imageAddon.storageUsage');
-      }
-      await writeToTerminal('\x1b[H' + SIXEL_SEQ_0 + '\x1b[100;100H');
-      await new Promise(r => setTimeout(r, 200));  // wait some time and re-check
-      assert.equal(await page.evaluate('imageAddon.storageUsage'), usage);
-    });
-    it('manual eviction on alternate buffer must not miss images', async () => {
-      await writeToTerminal('\x1b[?1049h');
-      await writeToTerminal(SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0);
-      await new Promise(r => setTimeout(r, 50));
-      const usage: number = await page.evaluate('imageAddon.storageUsage');
-      await writeToTerminal(SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0);
-      await writeToTerminal(SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0);
-      await new Promise(r => setTimeout(r, 50));
-      const newUsage: number = await page.evaluate('imageAddon.storageUsage');
-      assert.equal(newUsage, usage);
-    });
-  });
-
-  describe('IIP support - testimages', () => {
-    it('palette.png', async () => {
-      await writeToTerminal(TESTDATA_IIP[0][0]);
-      assert.deepEqual(await getOrigSize(1), TESTDATA_IIP[0][1]);
-    });
-    it('spinfox.png', async () => {
-      await writeToTerminal(TESTDATA_IIP[1][0]);
-      assert.deepEqual(await getOrigSize(1), TESTDATA_IIP[1][1]);
-    });
-    it('w3c gif', async () => {
-      await writeToTerminal(TESTDATA_IIP[2][0]);
-      assert.deepEqual(await getOrigSize(1), TESTDATA_IIP[2][1]);
-    });
-    it('w3c jpeg', async () => {
-      await writeToTerminal(TESTDATA_IIP[3][0]);
-      assert.deepEqual(await getOrigSize(1), TESTDATA_IIP[3][1]);
-    });
-    it('w3c png', async () => {
-      await writeToTerminal(TESTDATA_IIP[4][0]);
-      assert.deepEqual(await getOrigSize(1), TESTDATA_IIP[4][1]);
-    });
-  });
-});
-
-/**
- * terminal access helpers.
- */
-async function getDimensions(): Promise<IDimensions> {
-  const dimensions: any = await page.evaluate(`term._core._renderService.dimensions`);
-  return {
-    cellWidth: Math.round(dimensions.css.cell.width),
-    cellHeight: Math.round(dimensions.css.cell.height),
-    width: Math.round(dimensions.css.canvas.width),
-    height: Math.round(dimensions.css.canvas.height)
-  };
-}
-
-async function getCursor(): Promise<[number, number]> {
-  return page.evaluate('[window.term.buffer.active.cursorX, window.term.buffer.active.cursorY]');
-}
-
-async function getImageStorageLength(): Promise<number> {
-  return page.evaluate('window.imageAddon._storage._images.size');
-}
-
-async function getScrollbackPlusRows(): Promise<number> {
-  return page.evaluate('window.term.options.scrollback + window.term.rows');
-}
-
-async function writeToTerminal(d: string): Promise<any> {
-  return page.evaluate(data => new Promise(res => (window as any).term.write(data, res)), d);
-}
-
-async function getOrigSize(id: number): Promise<[number, number]> {
-  return page.evaluate<any>(`[
-    window.imageAddon._storage._images.get(${id}).orig.width,
-    window.imageAddon._storage._images.get(${id}).orig.height
-  ]`);
-}

addons/addon-image/test/ImageAddon.test.ts

@@ -0,0 +1,329 @@
+/**
+ * Copyright (c) 2020 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import test from '@playwright/test';
+import { readFileSync } from 'fs';
+import { FINALIZER, introducer, sixelEncode } from 'sixel';
+import { ITestContext, createTestContext, openTerminal, pollFor, timeout } from '../../../test/playwright/TestUtils';
+import { deepStrictEqual, ok, strictEqual } from 'assert';
+
+/**
+ * Plugin ctor options.
+ */
+export interface IImageAddonOptions {
+  enableSizeReports: boolean;
+  pixelLimit: number;
+  storageLimit: number;
+  showPlaceholder: boolean;
+  sixelSupport: boolean;
+  sixelScrolling: boolean;
+  sixelPaletteLimit: number;
+  sixelSizeLimit: number;
+  iipSupport: boolean;
+  iipSizeLimit: number;
+}
+
+// eslint-disable-next-line
+declare const ImageAddon: {
+  new(options?: Partial<IImageAddonOptions>): any;
+};
+
+interface ITestData {
+  width: number;
+  height: number;
+  bytes: Uint8Array;
+  palette: number[];
+  sixel: string;
+}
+
+interface IDimensions {
+  cellWidth: number;
+  cellHeight: number;
+  width: number;
+  height: number;
+}
+
+// image: 640 x 80, 512 color
+const TESTDATA: ITestData = (() => {
+  const data8 = readFileSync('./addons/addon-image/fixture/palette.blob');
+  const data32 = new Uint32Array(data8.buffer);
+  const palette = new Set<number>();
+  for (let i = 0; i < data32.length; ++i) palette.add(data32[i]);
+  const sixel = sixelEncode(data8, 640, 80, [...palette]);
+  return {
+    width: 640,
+    height: 80,
+    bytes: data8,
+    palette: [...palette],
+    sixel
+  };
+})();
+const SIXEL_SEQ_0 = introducer(0) + TESTDATA.sixel + FINALIZER;
+// const SIXEL_SEQ_1 = introducer(1) + TESTDATA.sixel + FINALIZER;
+// const SIXEL_SEQ_2 = introducer(2) + TESTDATA.sixel + FINALIZER;
+
+// NOTE: the data is loaded as string for easier transport through playwright
+const TESTDATA_IIP: [string, [number, number]][] = [
+  [readFileSync('./addons/addon-image/fixture/iip/palette.iip', { encoding: 'utf-8' }), [640, 80]],
+  [readFileSync('./addons/addon-image/fixture/iip/spinfox.iip', { encoding: 'utf-8' }), [148, 148]],
+  [readFileSync('./addons/addon-image/fixture/iip/w3c_gif.iip', { encoding: 'utf-8' }), [72, 48]],
+  [readFileSync('./addons/addon-image/fixture/iip/w3c_jpg.iip', { encoding: 'utf-8' }), [72, 48]],
+  [readFileSync('./addons/addon-image/fixture/iip/w3c_png.iip', { encoding: 'utf-8' }), [72, 48]]
+];
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx, { cols: 80, rows: 24 });
+});
+test.afterAll(async () => await ctx.page.close());
+
+test.describe('ImageAddon', () => {
+
+  test.beforeEach(async ({}, testInfo) => {
+    // DEBT: This test never worked on webkit
+    if (ctx.browser.browserType().name() === 'webkit') {
+      testInfo.skip();
+      return;
+    }
+    await ctx.page.evaluate(`
+      window.term.reset()
+      window.imageAddon?.dispose();
+      window.imageAddon = new ImageAddon({ sixelPaletteLimit: 512 });
+      window.term.loadAddon(window.imageAddon);
+    `);
+  });
+
+  test('test for private accessors', async () => {
+    // terminal privates
+    const accessors = [
+      '_core',
+      '_core._renderService',
+      '_core._inputHandler',
+      '_core._inputHandler._parser',
+      '_core._inputHandler._curAttrData',
+      '_core._inputHandler._dirtyRowTracker',
+      '_core._themeService.colors',
+      '_core._coreBrowserService'
+    ];
+    for (const prop of accessors) {
+      strictEqual(
+        await ctx.page.evaluate('(() => { const v = window.term.' + prop + '; return v !== undefined && v !== null; })()'),
+        true, `problem at ${prop}`
+      );
+    }
+    // bufferline privates
+    strictEqual(await ctx.page.evaluate('window.term._core.buffer.lines.get(0)._data instanceof Uint32Array'), true);
+    strictEqual(await ctx.page.evaluate('window.term._core.buffer.lines.get(0)._extendedAttrs instanceof Object'), true);
+    // inputhandler privates
+    strictEqual(await ctx.page.evaluate('window.term._core._inputHandler._curAttrData.constructor.name'), '_AttributeData');
+    strictEqual(await ctx.page.evaluate('window.term._core._inputHandler._parser.constructor.name'), 'EscapeSequenceParser');
+  });
+
+  test.describe('ctor options', () => {
+    test('empty settings should load defaults', async () => {
+      const DEFAULT_OPTIONS: IImageAddonOptions = {
+        enableSizeReports: true,
+        pixelLimit: 16777216,
+        sixelSupport: true,
+        sixelScrolling: true,
+        sixelPaletteLimit: 512,  // set to 512 to get example image working
+        sixelSizeLimit: 25000000,
+        storageLimit: 128,
+        showPlaceholder: true,
+        iipSupport: true,
+        iipSizeLimit: 20000000
+      };
+      deepStrictEqual(await ctx.page.evaluate(`window.imageAddon._opts`), DEFAULT_OPTIONS);
+    });
+    test('custom settings should overload defaults', async () => {
+      const customSettings: IImageAddonOptions = {
+        enableSizeReports: false,
+        pixelLimit: 5,
+        sixelSupport: false,
+        sixelScrolling: false,
+        sixelPaletteLimit: 1024,
+        sixelSizeLimit: 1000,
+        storageLimit: 10,
+        showPlaceholder: false,
+        iipSupport: false,
+        iipSizeLimit: 1000
+      };
+      await ctx.page.evaluate(opts => {
+        (window as any).imageAddonCustom = new ImageAddon(opts.opts);
+        (window as any).term.loadAddon((window as any).imageAddonCustom);
+      }, { opts: customSettings });
+      deepStrictEqual(await ctx.page.evaluate(`window.imageAddonCustom._opts`), customSettings);
+    });
+  });
+
+  test.describe('scrolling & cursor modes', () => {
+    test('testdata default (scrolling with VT240 cursor pos)', async () => {
+      const dim = await getDimensions();
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      deepStrictEqual(await getCursor(), [0, Math.floor(TESTDATA.height/dim.cellHeight)]);
+      // moved to right by 10 cells
+      await ctx.proxy.write('#'.repeat(10) + SIXEL_SEQ_0);
+      deepStrictEqual(await getCursor(), [10, Math.floor(TESTDATA.height/dim.cellHeight) * 2]);
+    });
+    test('write testdata noScrolling', async () => {
+      await ctx.proxy.write('\x1b[?80h' + SIXEL_SEQ_0);
+      deepStrictEqual(await getCursor(), [0, 0]);
+      // second draw does not change anything
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      deepStrictEqual(await getCursor(), [0, 0]);
+    });
+    test('testdata cursor always at VT240 pos', async () => {
+      const dim = await getDimensions();
+      // offset 0
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      deepStrictEqual(await getCursor(), [0, Math.floor(TESTDATA.height/dim.cellHeight)]);
+      // moved to right by 10 cells
+      await ctx.proxy.write('#'.repeat(10) + SIXEL_SEQ_0);
+      deepStrictEqual(await getCursor(), [10, Math.floor(TESTDATA.height/dim.cellHeight) * 2]);
+      // moved by 30 cells (+10 prev)
+      await ctx.proxy.write('#'.repeat(30) + SIXEL_SEQ_0);
+      deepStrictEqual(await getCursor(), [10 + 30, Math.floor(TESTDATA.height/dim.cellHeight) * 3]);
+    });
+  });
+
+  test.describe('image lifecycle & eviction', () => {
+    test('delete image once scrolled off', async () => {
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      pollFor(ctx.page, 'window.imageAddon._storage._images.size', 1);
+      // scroll to scrollback + rows - 1
+      await ctx.page.evaluate(
+        scrollback => new Promise(res => (window as any).term.write('\n'.repeat(scrollback), res)),
+        (await getScrollbackPlusRows() - 1)
+      );
+      // wait here, as we have to make sure, that eviction did not yet occur
+      await timeout(100);
+      pollFor(ctx.page, 'window.imageAddon._storage._images.size', 1);
+      // scroll one further should delete the image
+      await ctx.page.evaluate(() => new Promise(res => (window as any).term.write('\n', res)));
+      pollFor(ctx.page, 'window.imageAddon._storage._images.size', 0);
+    });
+    test('get storageUsage', async () => {
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageUsage'), 0);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      ok(Math.abs((await ctx.page.evaluate<number>('window.imageAddon.storageUsage')) - 640 * 80 * 4 / 1000000) < 0.05);
+    });
+    test('get/set storageLimit', async () => {
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageLimit'), 128);
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageLimit = 1'), 1);
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageLimit'), 1);
+    });
+    test('remove images by storage limit pressure', async () => {
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageLimit = 1'), 1);
+      // never go beyond storage limit
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await timeout(100);
+      const usage = await ctx.page.evaluate('window.imageAddon.storageUsage');
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await timeout(100);
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageUsage'), usage);
+      strictEqual(usage as number < 1, true);
+    });
+    test('set storageLimit removes images synchronously', async () => {
+      await ctx.proxy.write(SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0);
+      const usage: number = await ctx.page.evaluate('window.imageAddon.storageUsage');
+      const newUsage: number = await ctx.page.evaluate('window.imageAddon.storageLimit = 0.5; window.imageAddon.storageUsage');
+      strictEqual(newUsage < usage, true);
+      strictEqual(newUsage < 0.5, true);
+    });
+    test('clear alternate images on buffer change', async () => {
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageUsage'), 0);
+      await ctx.proxy.write('\x1b[?1049h' + SIXEL_SEQ_0);
+      ok(Math.abs((await ctx.page.evaluate<number>('window.imageAddon.storageUsage')) - 640 * 80 * 4 / 1000000) < 0.05);
+      await ctx.proxy.write('\x1b[?1049l');
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageUsage'), 0);
+    });
+    test('evict tiles by in-place overwrites (only full overwrite tested)', async () => {
+      await timeout(50);
+      await ctx.proxy.write('\x1b[H' + SIXEL_SEQ_0 + '\x1b[100;100H');
+      await timeout(50);
+      let usage = await ctx.page.evaluate('window.imageAddon.storageUsage');
+      while (usage === 0) {
+        await timeout(50);
+        usage = await ctx.page.evaluate('window.imageAddon.storageUsage');
+      }
+      await ctx.proxy.write('\x1b[H' + SIXEL_SEQ_0 + '\x1b[100;100H');
+      await timeout(200); // wait some time and re-check
+      strictEqual(await ctx.page.evaluate('window.imageAddon.storageUsage'), usage);
+    });
+    test('manual eviction on alternate buffer must not miss images', async () => {
+      await ctx.proxy.write('\x1b[?1049h');
+      await ctx.proxy.write(SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0);
+      await timeout(100);
+      const usage: number = await ctx.page.evaluate('window.imageAddon.storageUsage');
+      await ctx.proxy.write(SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0);
+      await ctx.proxy.write(SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0 + SIXEL_SEQ_0);
+      await timeout(100);
+      const newUsage: number = await ctx.page.evaluate('window.imageAddon.storageUsage');
+      strictEqual(newUsage, usage);
+    });
+  });
+
+  test.describe('IIP support - testimages', () => {
+    test('palette.png', async () => {
+      await ctx.proxy.write(TESTDATA_IIP[0][0]);
+      deepStrictEqual(await getOrigSize(1), TESTDATA_IIP[0][1]);
+    });
+    test('spinfox.png', async () => {
+      await ctx.proxy.write(TESTDATA_IIP[1][0]);
+      deepStrictEqual(await getOrigSize(1), TESTDATA_IIP[1][1]);
+    });
+    test('w3c gif', async () => {
+      await ctx.proxy.write(TESTDATA_IIP[2][0]);
+      deepStrictEqual(await getOrigSize(1), TESTDATA_IIP[2][1]);
+    });
+    test('w3c jpeg', async () => {
+      await ctx.proxy.write(TESTDATA_IIP[3][0]);
+      deepStrictEqual(await getOrigSize(1), TESTDATA_IIP[3][1]);
+    });
+    test('w3c png', async () => {
+      await ctx.proxy.write(TESTDATA_IIP[4][0]);
+      deepStrictEqual(await getOrigSize(1), TESTDATA_IIP[4][1]);
+    });
+  });
+});
+
+/**
+ * terminal access helpers.
+ */
+async function getDimensions(): Promise<IDimensions> {
+  const dimensions: any = await ctx.page.evaluate(`term._core._renderService.dimensions`);
+  return {
+    cellWidth: Math.round(dimensions.css.cell.width),
+    cellHeight: Math.round(dimensions.css.cell.height),
+    width: Math.round(dimensions.css.canvas.width),
+    height: Math.round(dimensions.css.canvas.height)
+  };
+}
+
+async function getCursor(): Promise<[number, number]> {
+  return ctx.page.evaluate('[window.term.buffer.active.cursorX, window.term.buffer.active.cursorY]');
+}
+
+async function getImageStorageLength(): Promise<number> {
+  return ctx.page.evaluate('window.imageAddon._storage._images.size');
+}
+
+async function getScrollbackPlusRows(): Promise<number> {
+  return ctx.page.evaluate('window.term.options.scrollback + window.term.rows');
+}
+
+async function getOrigSize(id: number): Promise<[number, number]> {
+  return ctx.page.evaluate<any>(`[
+    window.imageAddon._storage._images.get(${id}).orig.width,
+    window.imageAddon._storage._images.get(${id}).orig.height
+  ]`);
+}

addons/addon-image/test/playwright.config.ts

@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'ChromeStable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'FirefoxStable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm run start',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;

addons/addon-image/test/tsconfig.json

@@ -1,21 +1,26 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2017",
+    "target": "ESNext",
+    "lib": [
+      "es2021",
+    ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "strict": true,
     "baseUrl": ".",
     "paths": {
-      "browser/*": [ "../../../src/browser/*" ],
-      "common/*": [ "../../../src/common/*" ]
+      "common/*": [
+        "../../../src/common/*"
+      ],
+      "browser/*": [
+        "../../../src/browser/*"
+      ]
     },
+    "strict": true,
     "types": [
-      "../../../node_modules/@types/mocha",
-      "../../../node_modules/@types/node",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@types/node"
     ]
   },
   "include": [
@@ -23,7 +28,14 @@
     "../../../typings/xterm.d.ts"
   ],
   "references": [
-    { "path": "../../../src/browser" },
-    { "path": "../../../src/common" }
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    },
+    {
+      "path": "../../../test/playwright"
+    }
   ]
 }

addons/addon-image/webpack.config.js

@@ -26,14 +26,17 @@ const addon = {
     extensions: [ '.js' ],
     alias: {
       common: path.resolve('../../out/common'),
-      browser: path.resolve('../../out/browser')
+      browser: path.resolve('../../out/browser'),
+      vs: path.resolve('../../out/vs')
     }
   },
   output: {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    // Force usage of globalThis instead of global / self. (This is cross-env compatible)
+    globalObject: 'globalThis',
   },
   mode: 'production'
 };

addons/addon-ligatures/.npmignore

@@ -8,6 +8,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

addons/addon-ligatures/package.json

@@ -7,6 +7,7 @@
     "url": "https://xtermjs.org/"
   },
   "main": "lib/addon-ligatures.js",
+  "module": "lib/addon-ligatures.mjs",
   "types": "typings/addon-ligatures.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-ligatures",
   "engines": {

addons/addon-ligatures/src/LigaturesAddon.ts

@@ -15,24 +15,31 @@ export interface ITerminalAddon {
 
 export class LigaturesAddon implements ITerminalAddon , ILigaturesApi {
   private readonly _fallbackLigatures: string[];
+  private readonly _fontFeatureSettings?: string;
 
   private _terminal: Terminal | undefined;
   private _characterJoinerId: number | undefined;
 
   constructor(options?: Partial<ILigatureOptions>) {
+    // Source: calt set from https://github.com/be5invis/Iosevka?tab=readme-ov-file#ligations
     this._fallbackLigatures = (options?.fallbackLigatures || [
       '<--', '<---', '<<-', '<-', '->', '->>', '-->', '--->',
       '<==', '<===', '<<=', '<=', '=>', '=>>', '==>', '===>', '>=', '>>=',
-      '<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '-------->',
-      '<~~', '<~', '~>', '~~>', '::', ':::', '==', '!=', '===', '!==',
-      ':=', ':-', ':+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+:', '-:', '=:', ':>',
-      '++', '+++', '<!--', '<!---', '<***>'
+      '<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '::', ':::',
+      '<~~', '</', '</>', '/>', '~~>', '==', '!=', '/=', '~=', '<>', '===', '!==', '!===',
+      '<:', ':=', '*=', '*+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+*', '=*', '=:', ':>',
+      '/*', '*/', '+++', '<!--', '<!---'
     ]).sort((a, b) => b.length - a.length);
+    this._fontFeatureSettings = options?.fontFeatureSettings;
   }
 
   public activate(terminal: Terminal): void {
+    if (!terminal.element) {
+      throw new Error('Cannot activate LigaturesAddon before open is called');
+    }
     this._terminal = terminal;
     this._characterJoinerId = enableLigatures(terminal, this._fallbackLigatures);
+    terminal.element.style.fontFeatureSettings = this._fontFeatureSettings ?? '"calt" on';
   }
 
   public dispose(): void {
@@ -40,5 +47,8 @@ export class LigaturesAddon implements ITerminalAddon , ILigaturesApi {
       this._terminal?.deregisterCharacterJoiner(this._characterJoinerId);
       this._characterJoinerId = undefined;
     }
+    if (this._terminal?.element) {
+      this._terminal.element.style.fontFeatureSettings = '';
+    }
   }
 }

addons/addon-ligatures/src/Types.ts

@@ -5,4 +5,5 @@
 
 export interface ILigatureOptions {
   fallbackLigatures: string[];
+  fontFeatureSettings: string;
 }

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

@@ -7,7 +7,6 @@ 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 '.';
 
@@ -106,15 +105,6 @@ describe('LigaturesAddon', () => {
     await delay(500);
     assert.isTrue(onRefresh.notCalled);
   });
-
-  it('ensures no empty errors are thrown', async () => {
-    sinon.stub(fontLigatures, 'loadFile').callsFake(async () => { throw undefined; });
-    term.options.fontFamily = 'Iosevka';
-    assert.deepEqual(term.joiner!(input), []);
-    await delay(500);
-    assert.isTrue(onRefresh.notCalled);
-    (fontLigatures.loadFile as sinon.SinonStub).restore();
-  });
 });
 
 class MockTerminal {

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

@@ -23,7 +23,10 @@ declare module '@xterm/addon-ligatures' {
     constructor(options?: Partial<ILigatureOptions>);
 
     /**
-     * Activates the addon
+     * Activates the addon. Note that if webgl is also being used, that addon
+     * should be reactivated after ligatures is activated in order to apply
+     * {@link ILigatureOptions.fontFeatureSettings} to the texture atlas.
+     *
      *
      * @param terminal The terminal the addon is being loaded in.
      */
@@ -40,19 +43,28 @@ declare module '@xterm/addon-ligatures' {
    */
   export interface ILigatureOptions {
     /**
-     * Fallback ligatures to use when the font access API is either not supported by the browser or
-     * access is denied. The default set of ligatures is taken from Iosevka's default "calt"
-     * ligation set: https://typeof.net/Iosevka/
+     * Fallback ligatures to use when the font access API is either not
+     * supported by the browser or access is denied. The default set of
+     * ligatures is taken from Iosevka's default "calt" ligation set:
+     * https://typeof.net/Iosevka/
      *
      * ```
      * <-- <--- <<- <- -> ->> --> --->
      * <== <=== <<= <= => =>> ==> ===> >= >>=
-     * <-> <--> <---> <----> <=> <==> <===> <====> -------->
-     * <~~ <~ ~> ~~> :: ::: == != === !==
-     * := :- :+ <* <*> *> <| <|> |> +: -: =: :>
-     * ++ +++ <!-- <!--- <***>
-     * ```
+     * <-> <--> <---> <----> <=> <==> <===> <====> :: :::
+     * <~~ </ </> /> ~~> == != /= ~= <> === !== !===
+     * <: := *= *+ <* <*> *> <| <|> |> +* =* =: :>
+     * /* <close block comment> +++ <!-- <!---
      */
     fallbackLigatures: string[]
+
+    /**
+     * The CSS `font-feature-settings` value to use for enabling ligatures. This
+     * also supports font variants for example with a value like
+     * `"calt" on, "ss03"`.
+     *
+     * The default value is `"calt" on`.
+     */
+    fontFeatureSettings: string;
   }
 }

addons/addon-ligatures/webpack.config.js

@@ -25,14 +25,16 @@ module.exports = {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    // Force usage of globalThis instead of global / self. (This is cross-env compatible)
+    globalObject: 'globalThis',
   },
   mode: 'production',
   externals: {
-    'fs': 'fs',
-    'path': 'path',
-    'stream': 'stream',
-    'util': 'util'
+    'fs': 'commonjs fs',
+    'path': 'commonjs path',
+    'stream': 'commonjs stream',
+    'util': 'commonjs util'
   },
   resolve: {
     // The ligature modules contains fallbacks for node environments, we never want to browserify them

addons/addon-ligatures/yarn.lock

@@ -51,11 +51,11 @@ asynckit@^0.4.0:
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
 axios@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.0.tgz#f1e5292f26b2fd5c2e66876adc5b06cdbd7d2102"
-  integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.8.2.tgz#fabe06e241dfe83071d4edfbcaa7b1c3a40f7979"
+  integrity sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==
   dependencies:
-    follow-redirects "^1.15.0"
+    follow-redirects "^1.15.6"
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
@@ -85,10 +85,10 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-follow-redirects@^1.15.0:
-  version "1.15.3"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
-  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
 font-finder@^1.0.3:
   version "1.0.4"
@@ -210,8 +210,9 @@ opentype.js@^0.8.0:
     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"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.9.0.tgz#5dc0753acbf8521ca2e0f137b4578b917b10cf24"
+  integrity sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==
   dependencies:
     isarray "0.0.1"
 

addons/addon-progress/.gitignore

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

addons/addon-progress/.npmignore

@@ -0,0 +1,32 @@
+# Blacklist - exclude everything except npm defaults such as LICENSE, etc
+*
+!*/
+
+# Whitelist - lib/
+!lib/**/*.d.ts
+
+!lib/**/*.js
+!lib/**/*.js.map
+
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
+!lib/**/*.css
+
+# Whitelist - src/
+!src/**/*.ts
+!src/**/*.d.ts
+
+!src/**/*.js
+!src/**/*.js.map
+
+!src/**/*.css
+
+# Blacklist - src/ test files
+src/**/*.test.ts
+src/**/*.test.d.ts
+src/**/*.test.js
+src/**/*.test.js.map
+
+# Whitelist - typings/
+!typings/*.d.ts

addons/addon-progress/LICENSE

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

addons/addon-progress/README.md

@@ -0,0 +1,69 @@
+## @xterm/addon-progress
+
+An xterm.js addon providing an interface for ConEmu's progress sequence.
+See https://conemu.github.io/en/AnsiEscapeCodes.html#ConEmu_specific_OSC for sequence details.
+
+
+### Install
+
+```bash
+npm install --save @xterm/addon-progress
+```
+
+
+### Usage
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { ProgressAddon, IProgressState } from '@xterm/addon-progress';
+
+const terminal = new Terminal();
+const progressAddon = new ProgressAddon();
+terminal.loadAddon(progressAddon);
+progressAddon.onChange({state, value}: IProgressState) => {
+  // state: 0-4 integer (see below for meaning)
+  // value: 0-100 integer (percent value)
+  
+  // do your visualisation based on state/value here
+  ...
+});
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-progress/typings/addon-progress.d.ts) for more advanced usage.
+
+### Sequence
+
+The sequence to set progress information has the following format:
+
+```plain
+ESC ] 9 ; 4 ; <state> ; <progress value> BEL
+```
+
+where state is a decimal number in 0 to 4 and progress value is a decimal number in 0 to 100.
+The states have the following meaning:
+
+- 0: Remove any progress indication. Also resets progress value to 0. A given progress value will be ignored.
+- 1: Normal state to set a progress value. The value should be in 0..100, greater values are clamped to 100.
+  If the value is omitted, it will be set to 0.
+- 2: Error state with an optional progress value. An omitted value will be set to 0,
+  which has a special meaning using the last active value.
+- 3: Actual progress is "indeterminate", any progress value will be ignored. Meant to be used to indicate
+  a running task without progress information (e.g. by a spinner). A previously set progress value
+  by any other state sequence will be left untouched.
+- 4: Pause or warning state with an optional progress value. An omitted value will be set to 0,
+  which has a special meaning using the last active value.
+
+The addon resolves most of those semantic nuances and will provide these ready-to-go values:
+- For the remove state (0) any progress value wont be parsed, thus is even allowed to contain garbage.
+  It will always emit `{state: 0, value: 0}`.
+- For the set state (1) an omitted value will be set to 0 emitting `{state: 1, value: 0}`.
+  If a value was given, it must be decimal digits only, any characters outside will mark the whole sequence
+  as faulty (no sloppy integer parsing). The value will be clamped to max 100 giving
+  `{state: 1, value: parsedAndClampedValue}`.
+- For the error and pause state (2 & 4) an omitted or zero value will emit `{state: 2|4, value: lastValue}`.
+  If a value was given, it must be decimal digits only, any characters outside will mark the whole sequence
+  as faulty (no sloppy integer parsing). The value will be clamped to max 100 giving
+  `{state: 2|4, value: parsedAndClampedValue}`.
+- For the indeterminate state (3) a value notion will be ignored.
+  It still emits the value as `{state: 3, value: lastValue}`. Keep in mind not use that value while
+  that state is active, as a task might have entered that state without a proper reset at the beginning.

addons/addon-progress/package.json

@@ -1,17 +1,17 @@
 {
-  "name": "@xterm/addon-canvas",
-  "version": "0.7.0",
+  "name": "@xterm/addon-progress",
+  "version": "0.1.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
   },
-  "main": "lib/addon-canvas.js",
-  "types": "typings/addon-canvas.d.ts",
-  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas",
+  "main": "lib/addon-progress.js",
+  "module": "lib/addon-progress.mjs",
+  "types": "typings/addon-progress.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-progress",
   "license": "MIT",
   "keywords": [
     "terminal",
-    "canvas",
     "xterm",
     "xterm.js"
   ],
@@ -20,7 +20,7 @@
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package",
-    "start-server-only": "node ../../demo/start-server-only"
+    "start": "node ../../demo/start"
   },
   "peerDependencies": {
     "@xterm/xterm": "^5.0.0"

addons/addon-progress/src/ProgressAddon.ts

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2024 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { Terminal, ITerminalAddon, IDisposable } from '@xterm/xterm';
+import type { ProgressAddon as IProgressApi, IProgressState } from '@xterm/addon-progress';
+import type { Emitter, Event } from 'vs/base/common/event';
+
+
+const enum ProgressType {
+  REMOVE = 0,
+  SET = 1,
+  ERROR = 2,
+  INDETERMINATE = 3,
+  PAUSE = 4
+}
+
+
+/**
+ * Strict integer parsing, only decimal digits allowed.
+ */
+function toInt(s: string): number {
+  let v = 0;
+  for (let i = 0; i < s.length; ++i) {
+    const c = s.charCodeAt(i);
+    if (c < 0x30 || 0x39 < c) {
+      return -1;
+    }
+    v = v * 10 + c - 48;
+  }
+  return v;
+}
+
+
+export class ProgressAddon implements ITerminalAddon, IProgressApi {
+  private _seqHandler: IDisposable | undefined;
+  private _st: ProgressType = ProgressType.REMOVE;
+  private _pr = 0;
+  // HACK: This uses ! to align with the API, this should be fixed when 5283 is resolved
+  private _onChange!: Emitter<IProgressState>;
+  public onChange!: Event<IProgressState>;
+
+  public dispose(): void {
+    this._seqHandler?.dispose();
+    this._onChange?.dispose();
+  }
+
+  public activate(terminal: Terminal): void {
+    this._seqHandler = terminal.parser.registerOscHandler(9, data => {
+      if (!data.startsWith('4;')) {
+        return false;
+      }
+      const parts = data.split(';');
+
+      if (parts.length > 3) {
+        return true;  // faulty sequence, just exit
+      }
+      if (parts.length === 2) {
+        parts.push('');
+      }
+      const st = toInt(parts[1]);
+      const pr = toInt(parts[2]);
+
+      switch (st) {
+        case ProgressType.REMOVE:
+          this.progress = { state: st, value: 0 };
+          break;
+        case ProgressType.SET:
+          if (pr < 0) return true;  // faulty sequence, just exit
+          this.progress = { state: st, value: pr };
+          break;
+        case ProgressType.ERROR:
+        case ProgressType.PAUSE:
+          if (pr < 0) return true;  // faulty sequence, just exit
+          this.progress = { state: st, value: pr || this._pr };
+          break;
+        case ProgressType.INDETERMINATE:
+          this.progress = { state: st, value: this._pr };
+          break;
+      }
+      return true;
+    });
+    // FIXME: borrow emitter ctor from xterm, to be changed once #5283 is resolved
+    this._onChange = new (terminal as any)._core._onData.constructor();
+    this.onChange = this._onChange!.event;
+  }
+
+  public get progress(): IProgressState {
+    return { state: this._st, value: this._pr };
+  }
+
+  public set progress(progress: IProgressState) {
+    if (progress.state < 0 || progress.state > 4) {
+      console.warn(`progress state out of bounds, not applied`);
+      return;
+    }
+    this._st = progress.state;
+    this._pr = Math.min(Math.max(progress.value, 0), 100);
+    this._onChange?.fire({ state: this._st, value: this._pr });
+  }
+}

addons/addon-progress/src/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2021",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "rootDir": ".",
+    "outDir": "../out",
+    "sourceMap": true,
+    "removeComments": true,
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../src/vs/typings/thenable"
+    ],
+    "paths": {
+      "browser/*": [
+        "../../../src/browser/*"
+      ],
+      "vs/*": [
+        "../../../src/vs/*"
+      ],
+      "@xterm/addon-progress": [
+        "../typings/addon-progress.d.ts"
+      ]
+    }
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/browser"
+    },
+    {
+      "path": "../../../src/vs"
+    }
+  ]
+}

addons/addon-progress/test/ProgressAddon.test.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2024 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import test from '@playwright/test';
+import { deepStrictEqual } from 'assert';
+import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
+
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  ctx.page.setViewportSize({ width: 1024, height: 768 });
+  await openTerminal(ctx);
+});
+test.afterAll(async () => await ctx.page.close());
+
+
+test.describe('ProgressAddon', () => {
+  test.beforeEach(async function(): Promise<any> {
+    await ctx.page.evaluate(`
+      window.progressStack = [];
+      window.term.reset();
+      window.progressAddon?.dispose();
+      window.progressAddon = new ProgressAddon();
+      window.term.loadAddon(window.progressAddon);
+      window.progressAddon.onChange(progress => window.progressStack.push(progress));
+    `);
+  });
+
+  test('initial values should be 0;0', async () => {
+    deepStrictEqual(await ctx.page.evaluate('window.progressAddon.progress'), {state: 0, value: 0});
+  });
+  test('state 0: remove', async () => {
+    // no value
+    await ctx.proxy.write('\x1b]9;4;0\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), [{state: 0, value: 0}]);
+    // value ignored
+    await ctx.proxy.write('\x1b]9;4;0;12\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), [{state: 0, value: 0}, {state: 0, value: 0}]);
+  });
+  test('state 1: set', async () => {
+    // set 10%
+    await ctx.proxy.write('\x1b]9;4;1;10\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), [{state: 1, value: 10}]);
+    // set 50%
+    await ctx.proxy.write('\x1b]9;4;1;50\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), [{state: 1, value: 10}, {state: 1, value: 50}]);
+    // set 23%
+    await ctx.proxy.write('\x1b]9;4;1;23\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), [{state: 1, value: 10}, {state: 1, value: 50}, {state: 1, value: 23}]);
+  });
+  test('state 1: set - special sequence handling', async () => {
+    // missing progress value defaults to 0
+    await ctx.proxy.write('\x1b]9;4;1\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), [{state: 1, value: 0}]);
+    // malformed progress value get ignored
+    await ctx.proxy.write('\x1b]9;4;1;12x\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), [{state: 1, value: 0}]);
+    // out of bounds gets clamped to 100
+    await ctx.proxy.write('\x1b]9;4;1;123\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), [{state: 1, value: 0}, {state: 1, value: 100}]);
+  });
+  test('state 2: error - preserve previous value on empty/0', async () => {
+    // set value to 12
+    await ctx.proxy.write('\x1b]9;4;1;12\x1b\\');
+    // omitted/empty/0 value emits previous value
+    await ctx.proxy.write('\x1b]9;4;2\x1b\\');
+    await ctx.proxy.write('\x1b]9;4;2;\x1b\\');
+    await ctx.proxy.write('\x1b]9;4;2;0\x1b\\');
+    deepStrictEqual(
+      await ctx.page.evaluate('window.progressStack'),
+      [{state: 1, value: 12}, {state: 2, value: 12}, {state: 2, value: 12}, {state: 2, value: 12}]
+    );
+  });
+  test('state 2: error - with new value', async () => {
+    // set value to 12
+    await ctx.proxy.write('\x1b]9;4;1;12\x1b\\');
+    // new value updates clamped
+    await ctx.proxy.write('\x1b]9;4;2;25\x1b\\');
+    await ctx.proxy.write('\x1b]9;4;2;123\x1b\\');
+    deepStrictEqual(
+      await ctx.page.evaluate('window.progressStack'),
+      [{state: 1, value: 12}, {state: 2, value: 25}, {state: 2, value: 100}]
+    );
+  });
+  test('state 3: indeterminate - keeps value untouched', async () => {
+    // set value to 12
+    await ctx.proxy.write('\x1b]9;4;1;12\x1b\\');
+    // new value updates clamped
+    await ctx.proxy.write('\x1b]9;4;3\x1b\\');
+    await ctx.proxy.write('\x1b]9;4;3;123\x1b\\');
+    deepStrictEqual(
+      await ctx.page.evaluate('window.progressStack'),
+      [{state: 1, value: 12}, {state: 3, value: 12}, {state: 3, value: 12}]
+    );
+  });
+  test('state 4: pause - preserve previous value on empty/0', async () => {
+    // set value to 12
+    await ctx.proxy.write('\x1b]9;4;1;12\x1b\\');
+    // omitted/empty/0 value emits previous value
+    await ctx.proxy.write('\x1b]9;4;4\x1b\\');
+    await ctx.proxy.write('\x1b]9;4;4;\x1b\\');
+    await ctx.proxy.write('\x1b]9;4;4;0\x1b\\');
+    deepStrictEqual(
+      await ctx.page.evaluate('window.progressStack'),
+      [{state: 1, value: 12}, {state: 4, value: 12}, {state: 4, value: 12}, {state: 4, value: 12}]
+    );
+  });
+  test('state 4: pause - with new value', async () => {
+    // set value to 12
+    await ctx.proxy.write('\x1b]9;4;1;12\x1b\\');
+    // new value updates clamped
+    await ctx.proxy.write('\x1b]9;4;4;25\x1b\\');
+    await ctx.proxy.write('\x1b]9;4;4;123\x1b\\');
+    deepStrictEqual(
+      await ctx.page.evaluate('window.progressStack'),
+      [{state: 1, value: 12}, {state: 4, value: 25}, {state: 4, value: 100}]
+    );
+  });
+  test('invalid sequences should not emit anything', async () => {
+    // illegal state
+    await ctx.proxy.write('\x1b]9;4;5;12\x1b\\');
+    // illegal chars in value
+    await ctx.proxy.write('\x1b]9;4;1; 123xxxx\x1b\\');
+    deepStrictEqual(await ctx.page.evaluate('window.progressStack'), []);
+  });
+});

addons/addon-progress/test/playwright.config.ts

@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'ChromeStable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'FirefoxStable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm run start',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;

addons/addon-progress/test/tsconfig.json

@@ -1,13 +1,12 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2021",
+    "target": "ESNext",
     "lib": [
-      "dom",
-      "es2021"
+      "es2021",
     ],
     "rootDir": ".",
-    "outDir": "../out",
+    "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
     "baseUrl": ".",
@@ -17,15 +16,11 @@
       ],
       "browser/*": [
         "../../../src/browser/*"
-      ],
-      "@xterm/addon-canvas": [
-        "../typings/addon-canvas.d.ts"
       ]
     },
     "strict": true,
-    "downlevelIteration": true,
     "types": [
-      "../../../node_modules/@types/mocha"
+      "../../../node_modules/@types/node"
     ]
   },
   "include": [
@@ -38,6 +33,9 @@
     },
     {
       "path": "../../../src/browser"
+    },
+    {
+      "path": "../../../test/playwright"
     }
   ]
 }

addons/addon-progress/tsconfig.json

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

addons/addon-progress/typings/addon-progress.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2024 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal, ITerminalAddon, IDisposable, IEvent } from '@xterm/xterm';
+
+declare module '@xterm/addon-progress' {
+  /**
+   * An xterm.js addon that provides an interface for ConEmu's progress
+   * sequence.
+   */
+  export class ProgressAddon implements ITerminalAddon, IDisposable {
+
+    /**
+     * Creates a new progress 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;
+
+    /**
+     * An event that fires when the tracked progress changes.
+     */
+    public readonly onChange: IEvent<IProgressState>;
+
+    /**
+     * Gets or sets the current progress tracked by the addon. This can be used
+     * to reset a stuck progress indicator back to initial with
+     * `{ state: 0, value: 0 }` or to restore an indicator.
+     */
+    public progress: IProgressState;
+  }
+
+  /**
+   * Progress state tracked by the addon.
+   */
+  export interface IProgressState {
+    /**
+     * The progress state.
+     *
+     * - `0`: No progress. Setting this will resets progress value to 0
+     *   regardless of the {@link value} used.
+     * - `1`: Normal percentage-based from 0 to 100.
+     * - `2`: Error with an optional progress value from 0 to 100.
+     * - `3`: Indeterminate progress, any progress value will be ignored. This
+     *   is used to indicate work is happening but a percentage value cannot be
+     *   determined.
+     * - `4`: Pause or warning state with an optional progress value.
+     */
+    state: 0 | 1 | 2 | 3 | 4;
+
+    /**
+     * The percentage value of progress from 0 to 100. See {@link state} for
+     * whether this is relevant.
+     */
+    value: number;
+  }
+}

addons/addon-progress/webpack.config.js

@@ -1,12 +1,12 @@
 /**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2024 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
 const path = require('path');
 
-const addonName = 'CanvasAddon';
-const mainFile = 'addon-canvas.js';
+const addonName = 'ProgressAddon';
+const mainFile = 'addon-progress.js';
 
 module.exports = {
   entry: `./out/${addonName}.js`,
@@ -26,14 +26,17 @@ module.exports = {
     extensions: [ '.js' ],
     alias: {
       common: path.resolve('../../out/common'),
-      browser: path.resolve('../../out/browser')
+      browser: path.resolve('../../out/browser'),
+      vs: path.resolve('../../out/vs')
     }
   },
   output: {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    // Force usage of globalThis instead of global / self. (This is cross-env compatible)
+    globalObject: 'globalThis',
   },
   mode: 'production'
 };

addons/addon-search/.npmignore

@@ -8,6 +8,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

addons/addon-search/package.json

@@ -6,6 +6,7 @@
     "url": "https://xtermjs.org/"
   },
   "main": "lib/addon-search.js",
+  "module": "lib/addon-search.mjs",
   "types": "typings/addon-search.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-search",
   "license": "MIT",
@@ -17,7 +18,8 @@
   "scripts": {
     "prepackage": "../../node_modules/.bin/tsc -p .",
     "package": "../../node_modules/.bin/webpack",
-    "prepublishOnly": "npm run package"
+    "prepublishOnly": "npm run package",
+    "start": "node ../../demo/start"
   },
   "peerDependencies": {
     "@xterm/xterm": "^5.0.0"

addons/addon-search/src/SearchAddon.ts

@@ -5,8 +5,8 @@
 
 import type { Terminal, IDisposable, ITerminalAddon, IDecoration } from '@xterm/xterm';
 import type { SearchAddon as ISearchApi } from '@xterm/addon-search';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable, toDisposable, disposeArray, MutableDisposable, getDisposeArrayDisposable } from 'common/Lifecycle';
+import { Emitter } from 'vs/base/common/event';
+import { combinedDisposable, Disposable, dispose, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
 
 export interface ISearchOptions {
   regex?: boolean;
@@ -58,6 +58,11 @@ interface IHighlight extends IDisposable {
   match: ISearchResult;
 }
 
+interface IMultiHighlight extends IDisposable {
+  decorations: IDecoration[];
+  match: ISearchResult;
+}
+
 const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\\;:"\',./<>?';
 const LINES_CACHE_TIME_TO_LIVE = 15 * 1000; // 15 secs
 const DEFAULT_HIGHLIGHT_LIMIT = 1000;
@@ -67,7 +72,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
   private _cachedSearchTerm: string | undefined;
   private _highlightedLines: Set<number> = new Set();
   private _highlightDecorations: IHighlight[] = [];
-  private _selectedDecoration: MutableDisposable<IHighlight> = this.register(new MutableDisposable());
+  private _selectedDecoration: MutableDisposable<IMultiHighlight> = this._register(new MutableDisposable());
   private _highlightLimit: number;
   private _lastSearchOptions: ISearchOptions | undefined;
   private _highlightTimeout: number | undefined;
@@ -80,7 +85,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
   private _linesCacheTimeoutId = 0;
   private _linesCacheDisposables = new MutableDisposable();
 
-  private readonly _onDidChangeResults = this.register(new EventEmitter<{ resultIndex: number, resultCount: number }>());
+  private readonly _onDidChangeResults = this._register(new Emitter<{ resultIndex: number, resultCount: number }>());
   public readonly onDidChangeResults = this._onDidChangeResults.event;
 
   constructor(options?: Partial<ISearchAddonOptions>) {
@@ -91,9 +96,9 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
 
   public activate(terminal: Terminal): void {
     this._terminal = terminal;
-    this.register(this._terminal.onWriteParsed(() => this._updateMatches()));
-    this.register(this._terminal.onResize(() => this._updateMatches()));
-    this.register(toDisposable(() => this.clearDecorations()));
+    this._register(this._terminal.onWriteParsed(() => this._updateMatches()));
+    this._register(this._terminal.onResize(() => this._updateMatches()));
+    this._register(toDisposable(() => this.clearDecorations()));
   }
 
   private _updateMatches(): void {
@@ -111,7 +116,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
 
   public clearDecorations(retainCachedSearchTerm?: boolean): void {
     this._selectedDecoration.clear();
-    disposeArray(this._highlightDecorations);
+    dispose(this._highlightDecorations);
     this._highlightDecorations = [];
     this._highlightedLines.clear();
     if (!retainCachedSearchTerm) {
@@ -179,14 +184,20 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
       );
     }
     for (const match of searchResultsWithHighlight) {
-      const decoration = this._createResultDecoration(match, searchOptions.decorations!);
-      if (decoration) {
-        this._highlightedLines.add(decoration.marker.line);
-        this._highlightDecorations.push({ decoration, match, dispose() { decoration.dispose(); } });
+      const decorations = this._createResultDecorations(match, searchOptions.decorations!, false);
+      if (decorations) {
+        for (const decoration of decorations) {
+          this._storeDecoration(decoration, match);
+        }
       }
     }
   }
 
+  private _storeDecoration(decoration: IDecoration, match: ISearchResult): void {
+    this._highlightedLines.add(decoration.marker.line);
+    this._highlightDecorations.push({ decoration, match, dispose() { decoration.dispose(); } });
+  }
+
   private _find(term: string, startRow: number, startCol: number, searchOptions?: ISearchOptions): ISearchResult | undefined {
     if (!this._terminal || !term || term.length === 0) {
       this._terminal?.clearSelection();
@@ -426,11 +437,11 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
     const terminal = this._terminal!;
     if (!this._linesCache) {
       this._linesCache = new Array(terminal.buffer.active.length);
-      this._linesCacheDisposables.value = getDisposeArrayDisposable([
+      this._linesCacheDisposables.value = combinedDisposable(
         terminal.onLineFeed(() => this._destroyLinesCache()),
         terminal.onCursorMove(() => this._destroyLinesCache()),
         terminal.onResize(() => this._destroyLinesCache())
-      ]);
+      );
     }
 
     window.clearTimeout(this._linesCacheTimeoutId);
@@ -499,12 +510,16 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
     const [stringLine, offsets] = cache;
 
     const offset = this._bufferColsToStringOffset(row, col);
-    const searchTerm = searchOptions.caseSensitive ? term : term.toLowerCase();
-    const searchStringLine = searchOptions.caseSensitive ? stringLine : stringLine.toLowerCase();
+    let searchTerm = term;
+    let searchStringLine = stringLine;
+    if (!searchOptions.regex) {
+      searchTerm = searchOptions.caseSensitive ? term : term.toLowerCase();
+      searchStringLine = searchOptions.caseSensitive ? stringLine : stringLine.toLowerCase();
+    }
 
     let resultIndex = -1;
     if (searchOptions.regex) {
-      const searchRegex = RegExp(searchTerm, 'g');
+      const searchRegex = RegExp(searchTerm, searchOptions.caseSensitive ? 'g' : 'gi');
       let foundTerm: RegExpExecArray | null;
       if (isReverseSearch) {
         // This loop will get the resultIndex of the _last_ regex match in the range 0..offset
@@ -662,25 +677,9 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
     }
     terminal.select(result.col, result.row, result.size);
     if (options) {
-      const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row);
-      if (marker) {
-        const decoration = terminal.registerDecoration({
-          marker,
-          x: result.col,
-          width: result.size,
-          backgroundColor: options.activeMatchBackground,
-          layer: 'top',
-          overviewRulerOptions: {
-            color: options.activeMatchColorOverviewRuler
-          }
-        });
-        if (decoration) {
-          const disposables: IDisposable[] = [];
-          disposables.push(marker);
-          disposables.push(decoration.onRender((e) => this._applyStyles(e, options.activeMatchBorder, true)));
-          disposables.push(decoration.onDispose(() => disposeArray(disposables)));
-          this._selectedDecoration.value = { decoration, match: result, dispose() { decoration.dispose(); } };
-        }
+      const decorations = this._createResultDecorations(result, options, true);
+      if (decorations) {
+        this._selectedDecoration.value = { decorations, match: result, dispose() { dispose(decorations); } };
       }
     }
 
@@ -720,28 +719,45 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
    * @param options the options for the decoration
    * @returns the {@link IDecoration} or undefined if the marker has already been disposed of
    */
-  private _createResultDecoration(result: ISearchResult, options: ISearchDecorationOptions): IDecoration | undefined {
+  private _createResultDecorations(result: ISearchResult, options: ISearchDecorationOptions, isActiveResult: boolean): IDecoration[] | undefined {
     const terminal = this._terminal!;
-    const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row);
-    if (!marker) {
-      return undefined;
+
+    // Gather decoration ranges for this match as it could wrap
+    const decorationRanges: [number, number, number][] = [];
+    let currentCol = result.col;
+    let remainingSize = result.size;
+    let markerOffset = -terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row;
+    while (remainingSize > 0) {
+      const amountThisRow = Math.min(terminal.cols - currentCol, remainingSize);
+      decorationRanges.push([markerOffset, currentCol, amountThisRow]);
+      currentCol = 0;
+      remainingSize -= amountThisRow;
+      markerOffset++;
     }
-    const findResultDecoration = terminal.registerDecoration({
-      marker,
-      x: result.col,
-      width: result.size,
-      backgroundColor: options.matchBackground,
-      overviewRulerOptions: this._highlightedLines.has(marker.line) ? undefined : {
-        color: options.matchOverviewRuler,
-        position: 'center'
+
+    // Create the decorations
+    const decorations: IDecoration[] = [];
+    for (const range of decorationRanges) {
+      const marker = terminal.registerMarker(range[0]);
+      const decoration = terminal.registerDecoration({
+        marker,
+        x: range[1],
+        width: range[2],
+        backgroundColor: isActiveResult ? options.activeMatchBackground : options.matchBackground,
+        overviewRulerOptions: this._highlightedLines.has(marker.line) ? undefined : {
+          color: isActiveResult ? options.activeMatchColorOverviewRuler : options.matchOverviewRuler,
+          position: 'center'
+        }
+      });
+      if (decoration) {
+        const disposables: IDisposable[] = [];
+        disposables.push(marker);
+        disposables.push(decoration.onRender((e) => this._applyStyles(e, isActiveResult ? options.activeMatchBorder : options.matchBorder, false)));
+        disposables.push(decoration.onDispose(() => dispose(disposables)));
+        decorations.push(decoration);
       }
-    });
-    if (findResultDecoration) {
-      const disposables: IDisposable[] = [];
-      disposables.push(marker);
-      disposables.push(findResultDecoration.onRender((e) => this._applyStyles(e, options.matchBorder, false)));
-      disposables.push(findResultDecoration.onDispose(() => disposeArray(disposables)));
     }
-    return findResultDecoration;
+
+    return decorations.length === 0 ? undefined : decorations;
   }
 }

addons/addon-search/src/tsconfig.json

@@ -18,6 +18,9 @@
       "common/*": [
         "../../../src/common/*"
       ],
+      "vs/*": [
+        "../../../src/vs/*"
+      ],
       "@xterm/addon-search" : [
         "../typings/addon-search.d.ts"
       ]
@@ -30,6 +33,9 @@
   "references": [
     {
       "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/vs"
     }
   ]
 }

addons/addon-search/test/SearchAddon.api.ts

@@ -1,510 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { readFile } from 'fs';
-import { resolve } from 'path';
-import { openTerminal, writeSync, launchBrowser, timeout } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from '@playwright/test';
-
-const APP = 'http://127.0.0.1:3001/test';
-
-let browser: Browser;
-let page: Page;
-const width = 800;
-const height = 600;
-
-describe('Search Tests', function (): void {
-  before(async function (): Promise<any> {
-    browser = await launchBrowser();
-    page = await (await browser.newContext()).newPage();
-    await page.setViewportSize({ width, height });
-    await page.goto(APP);
-    await openTerminal(page);
-  });
-
-  after(() => {
-    browser.close();
-  });
-
-  beforeEach(async () => {
-    await page.evaluate(`
-      window.term.reset()
-      window.search?.dispose();
-      window.search = new SearchAddon();
-      window.term.loadAddon(window.search);
-    `);
-  });
-
-  it('Simple Search', async () => {
-    await writeSync(page, 'dafhdjfldshafhldsahfkjhldhjkftestlhfdsakjfhdjhlfdsjkafhjdlk');
-    assert.deepEqual(await page.evaluate(`window.search.findNext('test')`), true);
-    assert.deepEqual(await page.evaluate(`window.term.getSelection()`), 'test');
-  });
-
-  it('Scrolling Search', async () => {
-    let dataString = '';
-    for (let i = 0; i < 100; i++) {
-      if (i === 52) {
-        dataString += '$^1_3{}test$#';
-      }
-      dataString += makeData(50);
-    }
-    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 () => {
-    await page.evaluate(`window.term.writeln('package.jsonc\\n')`);
-    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.active.getLine(window.term.getSelectionPosition().start.y).translateToString()`);
-    let selectionPosition: { start: { x: number, y: number }, end: { x: number, y: 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.start.x, selectionPosition.end.x + 8), 'package.lock');
-    await page.evaluate(`window.search.findPrevious('package.j', {incremental: true})`);
-    selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-    assert.deepEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x + 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.active.getLine(window.term.getSelectionPosition().start.y).translateToString()`);
-    selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-    assert.deepEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x), 'package.jsonc');
-  });
-  it('Incremental Find Next', async () => {
-    await page.evaluate(`window.term.writeln('package.lock pack package.json package.ups\\n')`);
-    await writeSync(page, 'package.jsonc');
-    await page.evaluate(`window.search.findNext('pack', {incremental: true})`);
-    let line: string = await page.evaluate(`window.term.buffer.active.getLine(window.term.getSelectionPosition().start.y).translateToString()`);
-    let selectionPosition: { start: { x: number, y: number }, end: { x: number, y: 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.start.x, selectionPosition.end.x + 8), 'package.lock');
-    await page.evaluate(`window.search.findNext('package.j', {incremental: true})`);
-    selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-    assert.deepEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x + 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.active.getLine(window.term.getSelectionPosition().start.y).translateToString()`);
-    selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-    assert.deepEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x), 'package.jsonc');
-  });
-  it('Simple Regex', async () => {
-    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})`);
-    assert.deepEqual(await page.evaluate(`window.term.getSelection()`), 'ABCD');
-  });
-
-  it('Search for single result twice should not unselect it', async () => {
-    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);
-    assert.deepEqual(await page.evaluate(`window.term.getSelection()`), 'abc');
-  });
-
-  it('Search for result bounding with wide unicode chars', async () => {
-    await writeSync(page, '中文xx𝄞𝄞');
-    assert.deepEqual(await page.evaluate(`window.search.findNext('中')`), true);
-    assert.deepEqual(await page.evaluate(`window.term.getSelection()`), '中');
-    assert.deepEqual(await page.evaluate(`window.search.findNext('xx')`), true);
-    assert.deepEqual(await page.evaluate(`window.term.getSelection()`), 'xx');
-    assert.deepEqual(await page.evaluate(`window.search.findNext('𝄞')`), true);
-    assert.deepEqual(await page.evaluate(`window.term.getSelection()`), '𝄞');
-    assert.deepEqual(await page.evaluate(`window.search.findNext('𝄞')`), true);
-    assert.deepEqual(await page.evaluate(`window.term.getSelectionPosition()`), {
-      start: {
-        x: 7,
-        y: 0
-      },
-      end: {
-        x: 8,
-        y: 0
-      }
-    });
-  });
-
-  describe('onDidChangeResults', async () => {
-    describe('findNext', () => {
-      it('should not fire unless the decorations option is set', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        await writeSync(page, 'abc');
-        assert.strictEqual(await page.evaluate(`window.search.findNext('a')`), true);
-        assert.strictEqual(await page.evaluate('window.calls.length'), 0);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.strictEqual(await page.evaluate('window.calls.length'), 1);
-      });
-      it('should fire with correct event values', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        await writeSync(page, 'abc bc c');
-        assert.strictEqual(await page.evaluate(`window.search.findNext('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1, resultIndex: 0 }
-        ]);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 }
-        ]);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('d', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 0, resultIndex: -1 }
-        ]);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 0, resultIndex: -1 },
-          { resultCount: 3, resultIndex: 0 },
-          { resultCount: 3, resultIndex: 1 },
-          { resultCount: 3, resultIndex: 2 }
-        ]);
-      });
-      it('should fire with correct event values (incremental)', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        await writeSync(page, 'd abc aabc d');
-        assert.deepStrictEqual(await page.evaluate(`window.search.findNext('a', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 0 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findNext('ab', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findNext('abc', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findNext('abc', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 1 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findNext('d', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 1 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findNext('abcd', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 0, resultIndex: -1 }
-        ]);
-      });
-      it('should fire with more than 1k matches', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        const data = ('a bc'.repeat(10) + '\\n\\r').repeat(150);
-        await writeSync(page, data);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1000, resultIndex: 0 }
-        ]);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1000, resultIndex: 0 },
-          { resultCount: 1000, resultIndex: 1 }
-        ]);
-        assert.strictEqual(await page.evaluate(`window.search.findNext('bc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1000, resultIndex: 0 },
-          { resultCount: 1000, resultIndex: 1 },
-          { resultCount: 1000, resultIndex: 1 }
-        ]);
-      });
-      it('should fire when writing to terminal', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        await writeSync(page, 'abc bc c\\n\\r'.repeat(2));
-        assert.strictEqual(await page.evaluate(`window.search.findNext('abc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 2, resultIndex: 0 }
-        ]);
-        await writeSync(page, 'abc bc c\\n\\r');
-        await timeout(300);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 3, resultIndex: 0 }
-        ]);
-      });
-    });
-    describe('findPrevious', () => {
-      it('should not fire unless the decorations option is set', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        await writeSync(page, 'abc');
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('a')`), true);
-        assert.strictEqual(await page.evaluate('window.calls.length'), 0);
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.strictEqual(await page.evaluate('window.calls.length'), 1);
-      });
-      it('should fire with correct event values', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        await writeSync(page, 'abc bc c');
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1, resultIndex: 0 }
-        ]);
-        await page.evaluate(`window.term.clearSelection()`);
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 1 }
-        ]);
-        await timeout(2000);
-        assert.strictEqual(await page.evaluate(`debugger; window.search.findPrevious('d', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 0, resultIndex: -1 }
-        ]);
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 0, resultIndex: -1 },
-          { resultCount: 3, resultIndex: 2 },
-          { resultCount: 3, resultIndex: 1 },
-          { resultCount: 3, resultIndex: 0 }
-        ]);
-      });
-      it('should fire with correct event values (incremental)', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        await writeSync(page, 'd abc aabc d');
-        assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('a', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 2 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('ab', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 2 },
-          { resultCount: 2, resultIndex: 1 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('abc', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 2 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 1 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('abc', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 2 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 0 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('d', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 2 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 1 }
-        ]);
-        assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('abcd', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 3, resultIndex: 2 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 2, resultIndex: 0 },
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 0, resultIndex: -1 }
-        ]);
-      });
-      it('should fire with more than 1k matches', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        const data = ('a bc'.repeat(10) + '\\n\\r').repeat(150);
-        await writeSync(page, data);
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1000, resultIndex: -1 }
-        ]);
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1000, resultIndex: -1 },
-          { resultCount: 1000, resultIndex: -1 }
-        ]);
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('bc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 1000, resultIndex: -1 },
-          { resultCount: 1000, resultIndex: -1 },
-          { resultCount: 1000, resultIndex: -1 }
-        ]);
-      });
-      it('should fire when writing to terminal', async () => {
-        await page.evaluate(`
-          window.calls = [];
-          window.search.onDidChangeResults(e => window.calls.push(e));
-        `);
-        await writeSync(page, 'abc bc c\\n\\r'.repeat(2));
-        assert.strictEqual(await page.evaluate(`window.search.findPrevious('abc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 2, resultIndex: 1 }
-        ]);
-        await writeSync(page, 'abc bc c\\n\\r');
-        await timeout(300);
-        assert.deepStrictEqual(await page.evaluate('window.calls'), [
-          { resultCount: 2, resultIndex: 1 },
-          { resultCount: 3, resultIndex: 1 }
-        ]);
-      });
-    });
-  });
-
-  describe('Regression tests', () => {
-    describe('#2444 wrapped line content not being found', () => {
-      let fixture: string;
-      before(async () => {
-        const rawFixture = await new Promise<Buffer>(r => readFile(resolve(__dirname, '../fixtures/issue-2444'), (err, data) => r(data)));
-        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(page, fixture);
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        let selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 24, y: 53 }, end: { x: 30, y: 53 } });
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 24, y: 76 }, end: { x: 30, y: 76 } });
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 24, y: 96 }, end: { x: 30, y: 96 } });
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 1, y: 114 }, end: { x: 7, y: 114 } });
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 11, y: 115 }, end: { x: 17, y: 115 } });
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 1, y: 126 }, end: { x: 7, y: 126 } });
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 11, y: 127 }, end: { x: 17, y: 127 } });
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 1, y: 135 }, end: { x: 7, y: 135 } });
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 11, y: 136 }, end: { x: 17, y: 136 } });
-        // Wrap around to first result
-        assert.deepEqual(await page.evaluate(`window.search.findNext('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 24, y: 53 }, end: { x: 30, y: 53 } });
-      });
-
-      it('should y all occurrences using findPrevious', async () => {
-        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, { start: { x: 11, y: 136 }, end: { x: 17, y: 136 } });
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 1, y: 135 }, end: { x: 7, y: 135 } });
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 11, y: 127 }, end: { x: 17, y: 127 } });
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 1, y: 126 }, end: { x: 7, y: 126 } });
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 11, y: 115 }, end: { x: 17, y: 115 } });
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 1, y: 114 }, end: { x: 7, y: 114 } });
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 24, y: 96 }, end: { x: 30, y: 96 } });
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 24, y: 76 }, end: { x: 30, y: 76 } });
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 24, y: 53 }, end: { x: 30, y: 53 } });
-        // Wrap around to first result
-        assert.deepEqual(await page.evaluate(`window.search.findPrevious('opencv')`), true);
-        selectionPosition = await page.evaluate(`window.term.getSelectionPosition()`);
-        assert.deepEqual(selectionPosition, { start: { x: 11, y: 136 }, end: { x: 17, y: 136 } });
-      });
-    });
-  });
-  describe('#3834 lines with null characters before search terms', () => {
-    // This case can be triggered by the prompt when using starship under conpty
-    it('should find all matches on a line containing null characters', async () => {
-      await page.evaluate(`
-        window.calls = [];
-        window.search.onDidChangeResults(e => window.calls.push(e));
-      `);
-      // Move cursor forward 1 time to create a null character, as opposed to regular whitespace
-      await writeSync(page, '\\x1b[CHi Hi');
-      assert.strictEqual(await page.evaluate(`window.search.findPrevious('h', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
-      assert.deepStrictEqual(await page.evaluate('window.calls'), [
-        { resultCount: 2, resultIndex: 1 }
-      ]);
-    });
-  });
-});
-
-function makeData(length: number): string {
-  let result = '';
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * characters.length));
-  }
-  return result;
-}

addons/addon-search/test/SearchAddon.test.ts

@@ -0,0 +1,492 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import test from '@playwright/test';
+import { deepStrictEqual, strictEqual } from 'assert';
+import { readFile } from 'fs';
+import { resolve } from 'path';
+import { ITestContext, createTestContext, openTerminal, timeout } from '../../../test/playwright/TestUtils';
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx, { cols: 80, rows: 24 });
+});
+test.afterAll(async () => await ctx.page.close());
+
+test.describe('Search Tests', () => {
+
+  test.beforeEach(async () => {
+    await ctx.page.evaluate(`
+      window.term.reset()
+      window.search?.dispose();
+      window.search = new SearchAddon();
+      window.term.loadAddon(window.search);
+    `);
+  });
+
+  test('Simple Search', async () => {
+    await ctx.proxy.write('dafhdjfldshafhldsahfkjhldhjkftestlhfdsakjfhdjhlfdsjkafhjdlk');
+    deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('test')`), true);
+    deepStrictEqual(await ctx.proxy.getSelection(), 'test');
+  });
+
+  test('Scrolling Search', async () => {
+    let dataString = '';
+    for (let i = 0; i < 100; i++) {
+      if (i === 52) {
+        dataString += '$^1_3{}test$#';
+      }
+      dataString += makeData(50);
+    }
+    await ctx.proxy.write(dataString);
+    deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('$^1_3{}test$#')`), true);
+    deepStrictEqual(await ctx.proxy.getSelection(), '$^1_3{}test$#');
+  });
+  test('Incremental Find Previous', async () => {
+    await ctx.proxy.writeln(`package.jsonc\n`);
+    await ctx.proxy.write('package.json pack package.lock');
+    await ctx.page.evaluate(`window.search.findPrevious('pack', {incremental: true})`);
+    let selectionPosition: { start: { x: number, y: number }, end: { x: number, y: number } } = (await ctx.proxy.getSelectionPosition())!;
+    let line: string = await (await ctx.proxy.buffer.active.getLine(selectionPosition.start.y))!.translateToString();
+    // We look further ahead in the line to ensure that pack was selected from package.lock
+    deepStrictEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x + 8), 'package.lock');
+    await ctx.page.evaluate(`window.search.findPrevious('package.j', {incremental: true})`);
+    selectionPosition = (await ctx.proxy.getSelectionPosition())!;
+    deepStrictEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x + 3), 'package.json');
+    await ctx.page.evaluate(`window.search.findPrevious('package.jsonc', {incremental: true})`);
+    // We have to reevaluate line because it should have switched starting rows at this point
+    selectionPosition = (await ctx.proxy.getSelectionPosition())!;
+    line = await (await ctx.proxy.buffer.active.getLine(selectionPosition.start.y))!.translateToString();
+    deepStrictEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x), 'package.jsonc');
+  });
+  test('Incremental Find Next', async () => {
+    await ctx.proxy.writeln(`package.lock pack package.json package.ups\n`);
+    await ctx.proxy.write('package.jsonc');
+    await ctx.page.evaluate(`window.search.findNext('pack', {incremental: true})`);
+    let selectionPosition: { start: { x: number, y: number }, end: { x: number, y: number } } = (await ctx.proxy.getSelectionPosition())!;
+    let line: string = await (await ctx.proxy.buffer.active.getLine(selectionPosition.start.y))!.translateToString();
+    // We look further ahead in the line to ensure that pack was selected from package.lock
+    deepStrictEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x + 8), 'package.lock');
+    await ctx.page.evaluate(`window.search.findNext('package.j', {incremental: true})`);
+    selectionPosition = (await ctx.proxy.getSelectionPosition())!;
+    deepStrictEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x + 3), 'package.json');
+    await ctx.page.evaluate(`window.search.findNext('package.jsonc', {incremental: true})`);
+    // We have to reevaluate line because it should have switched starting rows at this point
+    selectionPosition = (await ctx.proxy.getSelectionPosition())!;
+    line = await (await ctx.proxy.buffer.active.getLine(selectionPosition.start.y))!.translateToString();
+    deepStrictEqual(line.substring(selectionPosition.start.x, selectionPosition.end.x), 'package.jsonc');
+  });
+  test('Simple Regex', async () => {
+    await ctx.proxy.write('abc123defABCD');
+    await ctx.page.evaluate(`window.search.findNext('[a-z]+', {regex: true})`);
+    deepStrictEqual(await ctx.proxy.getSelection(), 'abc');
+    await ctx.page.evaluate(`window.search.findNext('[A-Z]+', {regex: true, caseSensitive: true})`);
+    deepStrictEqual(await ctx.proxy.getSelection(), 'ABCD');
+  });
+
+  test('Search for single result twice should not unselect it', async () => {
+    await ctx.proxy.write('abc def');
+    deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('abc')`), true);
+    deepStrictEqual(await ctx.proxy.getSelection(), 'abc');
+    deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('abc')`), true);
+    deepStrictEqual(await ctx.proxy.getSelection(), 'abc');
+  });
+
+  test('Search for result bounding with wide unicode chars', async () => {
+    await ctx.proxy.write('中文xx𝄞𝄞');
+    deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('中')`), true);
+    deepStrictEqual(await ctx.proxy.getSelection(), '中');
+    deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('xx')`), true);
+    deepStrictEqual(await ctx.proxy.getSelection(), 'xx');
+    deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('𝄞')`), true);
+    deepStrictEqual(await ctx.proxy.getSelection(), '𝄞');
+    deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('𝄞')`), true);
+    deepStrictEqual(await ctx.proxy.getSelectionPosition(), {
+      start: {
+        x: 7,
+        y: 0
+      },
+      end: {
+        x: 8,
+        y: 0
+      }
+    });
+  });
+
+  test.describe('onDidChangeResults', async () => {
+    test.describe('findNext', () => {
+      test('should not fire unless the decorations option is set', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        await ctx.proxy.write('abc');
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('a')`), true);
+        strictEqual(await ctx.page.evaluate('window.calls.length'), 0);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        strictEqual(await ctx.page.evaluate('window.calls.length'), 1);
+      });
+      test('should fire with correct event values', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        await ctx.proxy.write('abc bc c');
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1, resultIndex: 0 }
+        ]);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 }
+        ]);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('d', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 0, resultIndex: -1 }
+        ]);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 0, resultIndex: -1 },
+          { resultCount: 3, resultIndex: 0 },
+          { resultCount: 3, resultIndex: 1 },
+          { resultCount: 3, resultIndex: 2 }
+        ]);
+      });
+      test('should fire with correct event values (incremental)', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        await ctx.proxy.write('d abc aabc d');
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('a', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 0 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('ab', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('abc', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('abc', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 1 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('d', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 1 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('abcd', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 0, resultIndex: -1 }
+        ]);
+      });
+      test('should fire with more than 1k matches', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        const data = ('a bc'.repeat(10) + '\\n\\r').repeat(150);
+        await ctx.proxy.write(data);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1000, resultIndex: 0 }
+        ]);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1000, resultIndex: 0 },
+          { resultCount: 1000, resultIndex: 1 }
+        ]);
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('bc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1000, resultIndex: 0 },
+          { resultCount: 1000, resultIndex: 1 },
+          { resultCount: 1000, resultIndex: 1 }
+        ]);
+      });
+      test('should fire when writing to terminal', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        await ctx.proxy.write('abc bc c\\n\\r'.repeat(2));
+        strictEqual(await ctx.page.evaluate(`window.search.findNext('abc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 2, resultIndex: 0 }
+        ]);
+        await ctx.proxy.write('abc bc c\\n\\r');
+        await timeout(300);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 3, resultIndex: 0 }
+        ]);
+      });
+    });
+    test.describe('findPrevious', () => {
+      test('should not fire unless the decorations option is set', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        await ctx.proxy.write('abc');
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('a')`), true);
+        strictEqual(await ctx.page.evaluate('window.calls.length'), 0);
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        strictEqual(await ctx.page.evaluate('window.calls.length'), 1);
+      });
+      test('should fire with correct event values', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        await ctx.proxy.write('abc bc c');
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1, resultIndex: 0 }
+        ]);
+        await ctx.page.evaluate(`window.term.clearSelection()`);
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 1 }
+        ]);
+        await timeout(2000);
+        strictEqual(await ctx.page.evaluate(`debugger; window.search.findPrevious('d', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 0, resultIndex: -1 }
+        ]);
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('c', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 0, resultIndex: -1 },
+          { resultCount: 3, resultIndex: 2 },
+          { resultCount: 3, resultIndex: 1 },
+          { resultCount: 3, resultIndex: 0 }
+        ]);
+      });
+      test('should fire with correct event values (incremental)', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        await ctx.proxy.write('d abc aabc d');
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('a', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 2 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('ab', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 2 },
+          { resultCount: 2, resultIndex: 1 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('abc', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 2 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 1 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('abc', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 2 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 0 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('d', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 2 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 1 }
+        ]);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('abcd', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 3, resultIndex: 2 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 2, resultIndex: 0 },
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 0, resultIndex: -1 }
+        ]);
+      });
+      test('should fire with more than 1k matches', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        const data = ('a bc'.repeat(10) + '\\n\\r').repeat(150);
+        await ctx.proxy.write(data);
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1000, resultIndex: -1 }
+        ]);
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1000, resultIndex: -1 },
+          { resultCount: 1000, resultIndex: -1 }
+        ]);
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('bc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 1000, resultIndex: -1 },
+          { resultCount: 1000, resultIndex: -1 },
+          { resultCount: 1000, resultIndex: -1 }
+        ]);
+      });
+      test('should fire when writing to terminal', async () => {
+        await ctx.page.evaluate(`
+          window.calls = [];
+          window.search.onDidChangeResults(e => window.calls.push(e));
+        `);
+        await ctx.proxy.write('abc bc c\\n\\r'.repeat(2));
+        strictEqual(await ctx.page.evaluate(`window.search.findPrevious('abc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 2, resultIndex: 1 }
+        ]);
+        await ctx.proxy.write('abc bc c\\n\\r');
+        await timeout(300);
+        deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+          { resultCount: 2, resultIndex: 1 },
+          { resultCount: 3, resultIndex: 1 }
+        ]);
+      });
+    });
+  });
+
+  test.describe('Regression tests', () => {
+    test.describe('#2444 wrapped line content not being found', () => {
+      let fixture: string;
+      test.beforeAll(async () => {
+        fixture = (await new Promise<Buffer>(r => readFile(resolve(__dirname, '../fixtures/issue-2444'), (err, data) => r(data)))).toString();
+        if (process.platform !== 'win32') {
+          fixture = fixture.replace(/\n/g, '\n\r');
+        }
+      });
+      test('should find all occurrences using findNext', async () => {
+        await ctx.proxy.write(fixture);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        let selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 24, y: 53 }, end: { x: 30, y: 53 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 24, y: 76 }, end: { x: 30, y: 76 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 24, y: 96 }, end: { x: 30, y: 96 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 1, y: 114 }, end: { x: 7, y: 114 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 11, y: 115 }, end: { x: 17, y: 115 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 1, y: 126 }, end: { x: 7, y: 126 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 11, y: 127 }, end: { x: 17, y: 127 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 1, y: 135 }, end: { x: 7, y: 135 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 11, y: 136 }, end: { x: 17, y: 136 } });
+        // Wrap around to first result
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findNext('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 24, y: 53 }, end: { x: 30, y: 53 } });
+      });
+
+      test('should y all occurrences using findPrevious', async () => {
+        await ctx.proxy.write(fixture);
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        let selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 11, y: 136 }, end: { x: 17, y: 136 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 1, y: 135 }, end: { x: 7, y: 135 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 11, y: 127 }, end: { x: 17, y: 127 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 1, y: 126 }, end: { x: 7, y: 126 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 11, y: 115 }, end: { x: 17, y: 115 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 1, y: 114 }, end: { x: 7, y: 114 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 24, y: 96 }, end: { x: 30, y: 96 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 24, y: 76 }, end: { x: 30, y: 76 } });
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 24, y: 53 }, end: { x: 30, y: 53 } });
+        // Wrap around to first result
+        deepStrictEqual(await ctx.page.evaluate(`window.search.findPrevious('opencv')`), true);
+        selectionPosition = await ctx.proxy.getSelectionPosition();
+        deepStrictEqual(selectionPosition, { start: { x: 11, y: 136 }, end: { x: 17, y: 136 } });
+      });
+    });
+  });
+  test.describe('#3834 lines with null characters before search terms', () => {
+    // This case can be triggered by the prompt when using starship under conpty
+    test('should find all matches on a line containing null characters', async () => {
+      await ctx.page.evaluate(`
+        window.calls = [];
+        window.search.onDidChangeResults(e => window.calls.push(e));
+      `);
+      // Move cursor forward 1 time to create a null character, as opposed to regular whitespace
+      await ctx.proxy.write('\\x1b[CHi Hi');
+      strictEqual(await ctx.page.evaluate(`window.search.findPrevious('h', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true);
+      deepStrictEqual(await ctx.page.evaluate('window.calls'), [
+        { resultCount: 2, resultIndex: 1 }
+      ]);
+    });
+  });
+});
+
+function makeData(length: number): string {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}

addons/addon-search/test/playwright.config.ts

@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'ChromeStable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'FirefoxStable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm run start',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;