Integrate base/ platform from VS Code and adopt scroll bar

.eslintrc.json

@@ -11,6 +11,7 @@
       "src/browser/tsconfig.json",
       "src/common/tsconfig.json",
       "src/headless/tsconfig.json",
+      "src/vs/tsconfig.json",
       "test/benchmark/tsconfig.json",
       "test/playwright/tsconfig.json",
       "addons/addon-attach/src/tsconfig.json",
@@ -43,6 +44,7 @@
   },
   "ignorePatterns": [
     "addons/*/src/third-party/*.ts",
+    "src/vs/*",
     "out/*",
     "out-test/*",
     "out-esbuild/*",

.vscode/settings.json

@@ -4,7 +4,9 @@
   },
   // Hide output files from the file explorer, comment this out to see the build output
   "files.exclude": {
+    "**/.nyc_output": true,
     "**/lib": true,
+    "**/dist": true,
     "**/out": true,
     "**/out-*": true,
   },

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.overviewRulerWidth || ViewportConstants.DEFAULT_SCROLL_BAR_WIDTH));
 
     const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
     const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));

bin/esbuild.mjs

@@ -20,9 +20,11 @@ const config = {
 
 /** @type {esbuild.BuildOptions} */
 const commonOptions = {
+  bundle: true,
   format: 'esm',
   target: 'es2021',
   sourcemap: true,
+  treeShaking: true,
   logLevel: 'debug',
 };
 
@@ -34,8 +36,6 @@ const devOptions = {
 /** @type {esbuild.BuildOptions} */
 const prodOptions = {
   minify: true,
-  treeShaking: true,
-  logLevel: 'debug',
   legalComments: 'none',
   // TODO: Mangling private and protected properties will reduce bundle size quite a bit, we must
   //       make sure we don't cast privates to `any` in order to prevent regressions.
@@ -80,20 +80,21 @@ function getAddonEntryPoint(addon) {
 
 /** @type {esbuild.BuildOptions} */
 let bundleConfig = {
-  bundle: true,
   ...commonOptions,
   ...(config.isProd ? prodOptions : devOptions)
 };
 
 /** @type {esbuild.BuildOptions} */
 let outConfig = {
-  format: 'cjs'
+  format: 'cjs',
+  sourcemap: true,
 }
 let skipOut = false;
 
 /** @type {esbuild.BuildOptions} */
 let outTestConfig = {
-  format: 'cjs'
+  format: 'cjs',
+  sourcemap: true,
 }
 let skipOutTest = false;
 
@@ -171,7 +172,13 @@ if (config.addon) {
   };
   outConfig = {
     ...outConfig,
-    entryPoints: ['src/**/*.ts'],
+    entryPoints: [
+      'src/browser/**/*.ts',
+      'src/common/**/*.ts',
+      'src/headless/**/*.ts',
+      'src/vs/base/**/*.ts',
+      'src/vs/patches/**/*.ts'
+    ],
     outdir: 'out-esbuild/'
   };
   outTestConfig = {

bin/test_unit.js

@@ -34,7 +34,14 @@ const checkCoverage = flagArgs.indexOf('--coverage') >= 0;
 if (checkCoverage) {
   flagArgs.splice(flagArgs.indexOf('--coverage'), 1);
   const executable = npmBinScript('nyc');
-  const args = ['--check-coverage', `--lines=${COVERAGE_LINES_THRESHOLD}`, npmBinScript('mocha'), ...testFiles, ...flagArgs];
+  const args = [
+    '--check-coverage',
+    `--lines=${COVERAGE_LINES_THRESHOLD}`,
+    '--exclude=out-esbuild/vs/**',
+    npmBinScript('mocha'),
+    ...testFiles,
+    ...flagArgs
+  ];
   console.info('executable', executable);
   console.info('args', args);
   const run = cp.spawnSync(

bin/vs_base_find_unused.js

@@ -0,0 +1,41 @@
+// @ts-check
+
+const { dirname } = require("path");
+const ts = require("typescript");
+const fs = require("fs");
+
+function findUnusedSymbols(
+  /** @type string */ tsconfigPath
+) {
+  // Initialize a program using the project's tsconfig.json
+  const configFile = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
+  const parsedConfig = ts.parseJsonConfigFileContent(configFile.config, ts.sys, dirname(tsconfigPath));
+
+  // Initialize a program with the parsed configuration
+  const program = ts.createProgram(parsedConfig.fileNames, {
+    ...parsedConfig.options,
+    noUnusedLocals: true
+  });
+  const sourceFiles = program.getSourceFiles();
+  const usedBaseSourceFiles = sourceFiles.filter(e => e.fileName.includes('src/vs/base/'));
+  const usedFilesInBase = usedBaseSourceFiles.map(e => e.fileName.replace(/^.+\/src\//, 'src/')).sort((a, b) => a.localeCompare(b));
+  // console.log('Source files used in src/vs/base/:', used);
+
+  // Get an array of all files that exist in src/vs/base/
+  const allFilesInBase = (
+    fs.readdirSync('src/vs/base', { recursive: true, withFileTypes: true })
+      .filter(e => e.isFile())
+      // @ts-ignore HACK: This is only available in Node 20
+      .map(e => `${e.parentPath}/${e.name}`.replace(/\\/g, '/'))
+  );
+  const unusedFilesInBase = allFilesInBase.filter(e => !usedFilesInBase.includes(e));
+
+  console.log({
+    allFilesInBase,
+    usedFilesInBase,
+    unusedFilesInBase
+  });
+}
+
+// Example usage
+findUnusedSymbols("./src/browser/tsconfig.json");

bin/vs_base_update.ps1

@@ -0,0 +1,61 @@
+# Get latest vscode repo
+if (Test-Path -Path "src/vs/temp") {
+  Write-Host "`e[32m> Fetching latest`e[0m"
+  git -C src/vs/temp checkout
+  git -C src/vs/temp pull
+} else {
+  Write-Host "`e[32m> Cloning microsoft/vscode`e[0m"
+  $null = New-Item -ItemType Directory -Path "src/vs/temp" -Force
+  git clone https://github.com/microsoft/vscode src/vs/temp
+}
+
+# Delete old base
+Write-Host "`e[32m> Deleting old base`e[0m"
+$null = Remove-Item -Recurse -Force "src/vs/base"
+
+# Copy base
+Write-Host "`e[32m> Copying base`e[0m"
+Copy-Item -Path "src/vs/temp/src/vs/base" -Destination "src/vs/base" -Recurse
+
+# Comment out any CSS imports
+Write-Host "`e[32m> Commenting out CSS imports" -NoNewline
+$baseFiles = Get-ChildItem -Path "src/vs/base" -Recurse -File
+$count = 0
+foreach ($file in $baseFiles) {
+  $content = Get-Content -Path $file.FullName
+  $updatedContent = $content | ForEach-Object {
+    if ($_ -match "^import 'vs/css!") {
+      Write-Host "`e[32m." -NoNewline
+      $count++
+      "// $_"
+    } else {
+      $_
+    }
+  }
+  $updatedContent | Set-Content -Path $file.FullName
+}
+Write-Host " $count files patched`e[0m"
+
+# Replace `monaco-*` with `xterm-*`, this will help avoid any styling conflicts when monaco and
+# xterm.js are used in the same project.
+Write-Host "`e[32m> Replacing monaco-* class names with xterm-* `e[0m" -NoNewline
+$baseFiles = Get-ChildItem -Path "src/vs/base" -Recurse -File
+$count = 0
+foreach ($file in $baseFiles) {
+  $content = Get-Content -Path $file.FullName
+  if ($content -match "monaco-([a-zA-Z\-]+)") {
+    $updatedContent = $content -replace "monaco-([a-zA-Z\-]+)", 'xterm-$1'
+    Write-Host "`e[32m." -NoNewline
+    $count++
+    $updatedContent | Set-Content -Path $file.FullName
+  }
+}
+Write-Host " $count files patched`e[0m"
+
+# Copy typings
+Write-Host "`e[32m> Copying typings`e[0m"
+Copy-Item -Path "src/vs/temp/src/typings" -Destination "src/vs" -Recurse -Force
+
+# Deleting unwanted typings
+Write-Host "`e[32m> Deleting unwanted typings`e[0m"
+$null = Remove-Item -Path "src/vs/typings/vscode-globals-modules.d.ts" -Force

css/xterm.css

@@ -112,10 +112,6 @@
     top: 0;
 }
 
-.xterm .xterm-scroll-area {
-    visibility: hidden;
-}
-
 .xterm-char-measure-element {
     display: inline-block;
     visibility: hidden;
@@ -222,3 +218,68 @@
     z-index: 2;
     position: relative;
 }
+
+
+
+/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */
+
+/* xterm.js customization: Override xterm's cursor style */
+.xterm .xterm-scrollable-element > .scrollbar {
+    cursor: default;
+}
+
+/* Arrows */
+.xterm .xterm-scrollable-element > .scrollbar > .scra {
+	cursor: pointer;
+	font-size: 11px !important;
+}
+
+.xterm .xterm-scrollable-element > .visible {
+	opacity: 1;
+
+	/* Background rule added for IE9 - to allow clicks on dom node */
+	background:rgba(0,0,0,0);
+
+	transition: opacity 100ms linear;
+	/* In front of peek view */
+	z-index: 11;
+}
+.xterm .xterm-scrollable-element > .invisible {
+	opacity: 0;
+	pointer-events: none;
+}
+.xterm .xterm-scrollable-element > .invisible.fade {
+	transition: opacity 800ms linear;
+}
+
+/* Scrollable Content Inset Shadow */
+.xterm .xterm-scrollable-element > .shadow {
+	position: absolute;
+	display: none;
+}
+.xterm .xterm-scrollable-element > .shadow.top {
+	display: block;
+	top: 0;
+	left: 3px;
+	height: 3px;
+	width: 100%;
+	box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
+}
+.xterm .xterm-scrollable-element > .shadow.left {
+	display: block;
+	top: 3px;
+	left: 0;
+	height: 100%;
+	width: 3px;
+	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
+}
+.xterm .xterm-scrollable-element > .shadow.top-left-corner {
+	display: block;
+	top: 0;
+	left: 0;
+	height: 3px;
+	width: 3px;
+}
+.xterm .xterm-scrollable-element > .shadow.top.left {
+	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
+}

demo/client.ts

@@ -437,12 +437,13 @@ function initOptions(term: Terminal): void {
     'logger',
     'theme',
     'windowOptions',
-    'windowsPty'
+    'windowsPty',
+    // Deprecated
+    'fastScrollModifier'
   ];
   const stringOptions = {
     cursorStyle: ['block', 'underline', 'bar'],
     cursorInactiveStyle: ['outline', 'block', 'bar', 'underline', 'none'],
-    fastScrollModifier: ['none', 'alt', 'ctrl', 'shift'],
     fontFamily: null,
     fontWeight: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
     fontWeightBold: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
@@ -575,6 +576,7 @@ function initOptions(term: Terminal): void {
               cursor: '#333333',
               cursorAccent: '#ffffff',
               selectionBackground: '#add6ff',
+              overviewRulerBorder: '#aaaaaa',
               black: '#000000',
               blue: '#0451a5',
               brightBlack: '#666666',