Use webgl when available, add search and better weblinks

Signed-off-by: Sebastian Malton <sebastian@malton.name>

package.json

@@ -300,8 +300,7 @@
     "win-ca": "^3.5.0",
     "winston": "^3.8.2",
     "winston-transport-browserconsole": "^1.0.5",
-    "ws": "^8.12.0",
-    "xterm-link-provider": "^1.3.1"
+    "ws": "^8.12.0"
   },
   "devDependencies": {
     "@async-fn/jest": "1.6.4",
@@ -450,27 +449,15 @@
     "webpack-dev-server": "^4.11.1",
     "webpack-node-externals": "^3.0.0",
     "xterm": "^5.0.0",
-    "xterm-addon-fit": "^0.5.0"
+    "xterm-addon-fit": "^0.5.0",
+    "xterm-addon-search": "^0.10.0",
+    "xterm-addon-web-links": "^0.7.0",
+    "xterm-addon-webgl": "^0.13.0",
+    "xterm-link-provider": "^1.3.1"
   },
   "peerDependencies": {
-    "@types/byline": "^4.2.33",
-    "@types/chart.js": "^2.9.36",
-    "@types/color": "^3.0.3",
-    "@types/crypto-js": "^3.1.47",
-    "@types/lodash": "^4.14.191",
-    "@types/proper-lockfile": "^4.1.2",
-    "@types/react-dom": "^17.0.16",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5",
-    "@types/request-promise-native": "^1.0.18",
-    "@types/tar": "^6.1.3",
-    "@types/tcp-port-used": "^1.0.1",
-    "@types/url-parse": "^1.4.8",
-    "@types/uuid": "^8.3.4",
     "monaco-editor": "^0.29.1",
     "react-select": "^5.7.0",
-    "typed-emitter": "^1.4.0",
-    "xterm-addon-fit": "^0.5.0"
+    "typed-emitter": "^1.4.0"
   }
 }

src/features/terminal/__snapshots__/opening-terminal-tab.test.tsx.snap

@@ -645,6 +645,14 @@ exports[`test for opening terminal tab within cluster frame when new terminal ta
                   <div
                     class="xterm-decoration-container"
                   />
+                  <canvas
+                    class="xterm-link-layer"
+                    style="z-index: 2;"
+                  />
+                  <canvas
+                    class="xterm-cursor-layer"
+                    style="z-index: 3;"
+                  />
                 </div>
               </div>
             </div>

src/renderer/components/dock/terminal/terminal.ts

@@ -17,9 +17,11 @@ import type { Logger } from "../../../../common/logger";
 import type { TerminalConfig } from "../../../../common/user-store/preferences-helpers";
 import assert from "assert";
 import { TerminalChannels } from "../../../../common/terminal/channels";
-import { LinkProvider } from "xterm-link-provider";
 import type { OpenLinkInBrowser } from "../../../../common/utils/open-link-in-browser.injectable";
 import type { CreateTerminalRenderer } from "./create-renderer.injectable";
+import { WebLinksAddon } from "xterm-addon-web-links";
+import { SearchAddon } from "xterm-addon-search";
+import { WebglAddon } from "xterm-addon-webgl";
 
 export interface TerminalDependencies {
   readonly spawningPool: HTMLElement;
@@ -98,10 +100,25 @@ export class Terminal {
       fontFamily: this.fontFamily,
       theme: this.dependencies.xtermColorTheme.get(),
     });
+
     // enable terminal addons
     this.xterm.loadAddon(this.fitAddon);
+    this.xterm.loadAddon(new WebLinksAddon());
+    this.xterm.loadAddon(new SearchAddon());
 
     this.xterm.open(this.dependencies.spawningPool);
+
+    try {
+      const webgl = new WebglAddon();
+
+      this.xterm.loadAddon(webgl);
+      webgl.onContextLoss(() => {
+        webgl.dispose();
+      });
+    } catch (error) {
+      this.dependencies.logger.warn("[TERMINAL]: failed to load webgl as renderer, falling back to DOM", error);
+    }
+
     this.xterm.attachCustomKeyEventHandler(this.keyHandler);
     this.xterm.onSelectionChange(this.onSelectionChange);
 
@@ -116,16 +133,7 @@ export class Terminal {
     this.api.on("error", this.onApiError);
     window.addEventListener("resize", this.onResize);
 
-    const linkProvider = new LinkProvider(
-      this.xterm,
-      /https?:\/\/[^\s]+/i,
-      (event, link) => this.dependencies.openLinkInBrowser(link),
-      undefined,
-      0,
-    );
-
     this.disposer.push(
-      this.xterm.registerLinkProvider(linkProvider),
       reaction(
         () => this.dependencies.xtermColorTheme.get(),
         colors => this.xterm.options.theme = colors,
@@ -133,7 +141,6 @@ export class Terminal {
       reaction(() => this.fontSize, this.setFontSize),
       reaction(() => this.fontFamily, this.setFontFamily),
       this.xterm.onData(this.onData),
-      () => this.fitAddon.dispose(),
       () => this.api.removeAllListeners(),
       () => window.removeEventListener("resize", this.onResize),
       () => this.elem.removeEventListener("contextmenu", this.onContextMenu),

yarn.lock

@@ -14034,6 +14034,21 @@ xterm-addon-fit@^0.5.0:
   resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
   integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
 
+xterm-addon-search@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.10.0.tgz#b6a5e859c0bfd83ad534233f93376640c0e0c652"
+  integrity sha512-l+kjDxNDQbkniU5OUo9BHknxUEPZGM0OFpVpc2sMmrb97S0FKJVJO4wAZPJvSGVJ8ZEG6KuDyzXluvnb08t71Q==
+
+xterm-addon-web-links@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.7.0.tgz#dceac36170605f9db10a01d716bd83ee38f65c17"
+  integrity sha512-6PqoqzzPwaeSq22skzbvyboDvSnYk5teUYEoKBwMYvhbkwOQkemZccjWHT5FnNA8o1aInTc4PRYAl4jjPucCKA==
+
+xterm-addon-webgl@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-webgl/-/xterm-addon-webgl-0.13.0.tgz#b1d42ec454390ad8595aa8c8dde714b98a5eb896"
+  integrity sha512-xL4qBQWUHjFR620/8VHCtrTMVQsnZaAtd1IxFoiKPhC63wKp6b+73a45s97lb34yeo57PoqZhE9Jq5pB++ksPQ==
+
 xterm-link-provider@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/xterm-link-provider/-/xterm-link-provider-1.3.1.tgz#69727223220dfa8758056ad6b2b5394a8454b9cb"