Get esbuild working and adopt vs scrollbar

bin/esbuild.mjs

@@ -35,7 +35,7 @@ const devOptions = {
 const prodOptions = {
   minify: true,
   treeShaking: true,
-  logLevel: 'verbose',
+  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.
@@ -171,7 +171,13 @@ if (config.addon) {
   };
   outConfig = {
     ...outConfig,
-    entryPoints: ['src/**/*.ts'],
+    entryPoints: [
+      `src/browser/public/Terminal.ts`,
+      `src/headless/public/Terminal.ts`,
+      `src/browser/*.test.ts`,
+      `src/common/*.test.ts`,
+      `src/headless/*.test.ts`
+    ],
     outdir: 'out-esbuild/'
   };
   outTestConfig = {

css/xterm.css

@@ -112,10 +112,6 @@
     top: 0;
 }
 
-.xterm .xterm-scroll-area {
-    visibility: hidden;
-}
-
 .xterm-char-measure-element {
     display: inline-block;
     visibility: hidden;

src/browser/CoreBrowserTerminal.ts

@@ -26,7 +26,7 @@ import { addDisposableDomListener } from 'browser/Lifecycle';
 import { Linkifier } from './Linkifier';
 import * as Strings from 'browser/LocalizableStrings';
 import { OscLinkProvider } from 'browser/OscLinkProvider';
-import { CharacterJoinerHandler, CustomKeyEventHandler, CustomWheelEventHandler, IBrowser, IBufferRange, ICompositionHelper, ILinkifier2, ITerminal, IViewport } from 'browser/Types';
+import { CharacterJoinerHandler, CustomKeyEventHandler, CustomWheelEventHandler, IBrowser, IBufferRange, ICompositionHelper, ILinkifier2, ITerminal } from 'browser/Types';
 import { Viewport } from 'browser/Viewport';
 import { BufferDecorationRenderer } from 'browser/decorations/BufferDecorationRenderer';
 import { OverviewRulerRenderer } from 'browser/decorations/OverviewRulerRenderer';
@@ -65,7 +65,6 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
   public screenElement: HTMLElement | undefined;
 
   private _document: Document | undefined;
-  private _viewportScrollArea: HTMLElement | undefined;
   private _viewportElement: HTMLElement | undefined;
   private _helperContainer: HTMLElement | undefined;
   private _compositionView: HTMLElement | undefined;
@@ -118,7 +117,6 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
    */
   private _unprocessedDeadKey: boolean = false;
 
-  public viewport: IViewport | undefined;
   private _compositionHelper: ICompositionHelper | undefined;
   private _accessibilityManager: MutableDisposable<AccessibilityManager> = this.register(new MutableDisposable());
 
@@ -427,10 +425,6 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
     this._viewportElement.classList.add('xterm-viewport');
     fragment.appendChild(this._viewportElement);
 
-    this._viewportScrollArea = this._document.createElement('div');
-    this._viewportScrollArea.classList.add('xterm-scroll-area');
-    this._viewportElement.appendChild(this._viewportScrollArea);
-
     this.screenElement = this._document.createElement('div');
     this.screenElement.classList.add('xterm-screen');
     this.register(addDisposableDomListener(this.screenElement, 'mousemove', (ev: MouseEvent) => this.updateCursorStyle(ev)));
@@ -503,11 +497,6 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
       this._renderService.setRenderer(this._createRenderer());
     }
 
-    this.viewport = this._instantiationService.createInstance(Viewport, this._viewportElement, this._viewportScrollArea);
-    this.viewport.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent, ScrollSource.VIEWPORT)),
-    this.register(this._inputHandler.onRequestSyncScrollBar(() => this.viewport!.syncScrollArea()));
-    this.register(this.viewport);
-
     this.register(this.onCursorMove(() => {
       this._renderService!.handleCursorMove();
       this._syncTextArea();
@@ -515,7 +504,9 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
     this.register(this.onResize(() => this._renderService!.handleResize(this.cols, this.rows)));
     this.register(this.onBlur(() => this._renderService!.handleBlur()));
     this.register(this.onFocus(() => this._renderService!.handleFocus()));
-    this.register(this._renderService.onDimensionsChange(() => this.viewport!.syncScrollArea()));
+
+    const viewport = this.register(this._instantiationService.createInstance(Viewport, this.element, this.screenElement));
+    this.register(viewport.onRequestScrollLines(e => this.scrollLines(e, false, ScrollSource.VIEWPORT)));
 
     this._selectionService = this.register(this._instantiationService.createInstance(SelectionService,
       this.element,
@@ -534,11 +525,7 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
       this.textarea!.focus();
       this.textarea!.select();
     }));
-    this.register(this._onScroll.event(ev => {
-      this.viewport!.syncScrollArea();
-      this._selectionService!.refresh();
-    }));
-    this.register(addDisposableDomListener(this._viewportElement, 'scroll', () => this._selectionService!.refresh()));
+    this.register(this._onScroll.event(() => this._selectionService!.refresh()));
 
     this.register(this._instantiationService.createInstance(BufferDecorationRenderer, this.screenElement));
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.handleMouseDown(e)));
@@ -642,7 +629,9 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
           if (self._customWheelEventHandler && self._customWheelEventHandler(ev as WheelEvent) === false) {
             return false;
           }
-          const amount = self.viewport!.getLinesScrolled(ev as WheelEvent);
+          // TODO: Implement
+          const amount = 0;
+          // const amount = self.viewport!.getLinesScrolled(ev as WheelEvent);
 
           if (amount === 0) {
             return false;
@@ -808,7 +797,8 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
       if (!this.buffer.hasScrollback) {
         // Convert wheel events into up/down events when the buffer does not have scrollback, this
         // enables scrolling in apps hosted in the alt buffer such as vim or tmux.
-        const amount = this.viewport!.getLinesScrolled(ev);
+        // TODSO: Impl
+        const amount = 0; // this.viewport!.getLinesScrolled(ev);
 
         // Do nothing if there's no vertical scroll
         if (amount === 0) {
@@ -827,23 +817,24 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
 
       // normal viewport scrolling
       // conditionally stop event, if the viewport still had rows to scroll within
-      if (this.viewport!.handleWheel(ev)) {
-        return this.cancel(ev);
-      }
+      // if (this.viewport!.handleWheel(ev)) {
+      //   return this.cancel(ev);
+      // }
     }, { passive: false }));
 
-    this.register(addDisposableDomListener(el, 'touchstart', (ev: TouchEvent) => {
-      if (this.coreMouseService.areMouseEventsActive) return;
-      this.viewport!.handleTouchStart(ev);
-      return this.cancel(ev);
-    }, { passive: true }));
+    // TODO: Make sure this.coreMouseService.areMouseEventsActive still works
+    // this.register(addDisposableDomListener(el, 'touchstart', (ev: TouchEvent) => {
+    //   if (this.coreMouseService.areMouseEventsActive) return;
+    //   this.viewport!.handleTouchStart(ev);
+    //   return this.cancel(ev);
+    // }, { passive: true }));
 
-    this.register(addDisposableDomListener(el, 'touchmove', (ev: TouchEvent) => {
-      if (this.coreMouseService.areMouseEventsActive) return;
-      if (!this.viewport!.handleTouchMove(ev)) {
-        return this.cancel(ev);
-      }
-    }, { passive: false }));
+    // this.register(addDisposableDomListener(el, 'touchmove', (ev: TouchEvent) => {
+    //   if (this.coreMouseService.areMouseEventsActive) return;
+    //   if (!this.viewport!.handleTouchMove(ev)) {
+    //     return this.cancel(ev);
+    //   }
+    // }, { passive: false }));
   }
 
 
@@ -882,8 +873,6 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
     if (source === ScrollSource.VIEWPORT) {
       super.scrollLines(disp, suppressScrollEvent, source);
       this.refresh(0, this.rows - 1);
-    } else {
-      this.viewport?.scrollLines(disp);
     }
   }
 
@@ -1212,10 +1201,6 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
 
   private _afterResize(x: number, y: number): void {
     this._charSizeService?.measure();
-
-    // Sync the scroll area to make sure scroll events don't fire and scroll the viewport to an
-    // invalid location
-    this.viewport?.syncScrollArea(true);
   }
 
   /**
@@ -1238,7 +1223,8 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
     // IMPORTANT: Fire scroll event before viewport is reset. This ensures embedders get the clear
     // scroll event and that the viewport's state will be valid for immediate writes.
     this._onScroll.fire({ position: this.buffer.ydisp, source: ScrollSource.TERMINAL });
-    this.viewport?.reset();
+    // TODO: Reset scrollable element?
+    // this.viewport?.reset();
     this.refresh(0, this.rows - 1);
   }
 
@@ -1263,7 +1249,8 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
     super.reset();
     this._selectionService?.reset();
     this._decorationService.reset();
-    this.viewport?.reset();
+    // TODO: Reset scrollable element?
+    // this.viewport?.reset();
 
     // reattach
     this._customKeyEventHandler = customKeyEventHandler;

src/browser/Terminal.test.ts

@@ -29,8 +29,6 @@ describe('Terminal', () => {
     term = new TestTerminal(termOptions);
     term.refresh = () => { };
     (term as any).renderer = new MockRenderer();
-    term.viewport = new MockViewport();
-    term.viewport.onRequestScrollLines(e => term.scrollLines(e.amount, e.suppressScrollEvent, ScrollSource.VIEWPORT));
     (term as any)._compositionHelper = new MockCompositionHelper();
     (term as any).element = {
       classList: {

src/browser/Types.ts

@@ -19,7 +19,6 @@ export interface ITerminal extends InternalPassthroughApis, ICoreTerminal {
   browser: IBrowser;
   buffer: IBuffer;
   linkifier: ILinkifier2 | undefined;
-  viewport: IViewport | undefined;
   options: Required<ITerminalOptions>;
 
   onBlur: IEvent<void>;

src/browser/decorations/OverviewRulerRenderer.ts

@@ -118,8 +118,8 @@ export class OverviewRulerRenderer extends Disposable {
 
   private _refreshDrawConstants(): void {
     // width
-    const outerWidth = Math.floor(this._canvas.width / 3);
-    const innerWidth = Math.ceil(this._canvas.width / 3);
+    const outerWidth = Math.floor((this._canvas.width - 1) / 3);
+    const innerWidth = Math.ceil((this._canvas.width - 1) / 3);
     drawWidth.full = this._canvas.width;
     drawWidth.left = outerWidth;
     drawWidth.center = innerWidth;
@@ -127,10 +127,10 @@ export class OverviewRulerRenderer extends Disposable {
     // height
     this._refreshDrawHeightConstants();
     // x
-    drawX.full = 0;
-    drawX.left = 0;
-    drawX.center = drawWidth.left;
-    drawX.right = drawWidth.left + drawWidth.center;
+    drawX.full = 1;
+    drawX.left = 1;
+    drawX.center = 1 + drawWidth.left;
+    drawX.right = 1 + drawWidth.left + drawWidth.center;
   }
 
   private _refreshDrawHeightConstants(): void {
@@ -173,6 +173,7 @@ export class OverviewRulerRenderer extends Disposable {
       this._colorZoneStore.addDecoration(decoration);
     }
     this._ctx.lineWidth = 1;
+    this._renderRulerOutline();
     const zones = this._colorZoneStore.zones;
     for (const zone of zones) {
       if (zone.position !== 'full') {
@@ -188,6 +189,12 @@ export class OverviewRulerRenderer extends Disposable {
     this._shouldUpdateAnchor = false;
   }
 
+  private _renderRulerOutline(): void {
+    // TODO: Support customizing the color
+    this._ctx.fillStyle = '#000';
+    this._ctx.fillRect(0, 0, 1, this._canvas.height);
+  }
+
   private _renderColorZone(zone: IColorZone): void {
     this._ctx.fillStyle = zone.color;
     this._ctx.fillRect(

src/common/tsconfig.json

@@ -9,16 +9,10 @@
     "types": [
       "../../node_modules/@types/mocha"
     ],
-    "baseUrl": "..",
-    "paths": {
-      "vs/*": [ "./vs/*" ]
-    }
+    "baseUrl": ".."
   },
   "include": [
     "./**/*",
     "../../typings/xterm.d.ts"
-  ],
-  "references": [
-    { "path": "../vs" }
   ]
 }

src/vs/tsconfig.json

@@ -64,8 +64,7 @@
     "base/common/jsonc.js",
     "base/common/performance.js",
     "base/common/marked/marked.js",
-    "base/common/network.js",
-
-    "typings/vscode-globals-modules.d.ts"
+    "base/common/network.ts",
+    "base/browser/markdownRenderer.ts"
   ]
 }