@xterm/xterm 5.6.0-beta.14 → 5.6.0-beta.141

package/src/browser/services/CoreBrowserService.ts

@@ -3,21 +3,21 @@
  * @license MIT
  */
 
-import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 import { ICoreBrowserService } from './Services';
-import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { addDisposableDomListener } from 'browser/Lifecycle';
+import { Emitter, Event } from 'vs/base/common/event';
+import { addDisposableListener } from 'vs/base/browser/dom';
+import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
 
 export class CoreBrowserService extends Disposable implements ICoreBrowserService {
   public serviceBrand: undefined;
 
   private _isFocused = false;
   private _cachedIsFocused: boolean | undefined = undefined;
-  private _screenDprMonitor = this.register(new ScreenDprMonitor(this._window));
+  private _screenDprMonitor = this._register(new ScreenDprMonitor(this._window));
 
-  private readonly _onDprChange = this.register(new EventEmitter<number>());
+  private readonly _onDprChange = this._register(new Emitter<number>());
   public readonly onDprChange = this._onDprChange.event;
-  private readonly _onWindowChange = this.register(new EventEmitter<Window & typeof globalThis>());
+  private readonly _onWindowChange = this._register(new Emitter<Window & typeof globalThis>());
   public readonly onWindowChange = this._onWindowChange.event;
 
   constructor(
@@ -28,15 +28,11 @@ export class CoreBrowserService extends Disposable implements ICoreBrowserServic
     super();
 
     // Monitor device pixel ratio
-    this.register(this.onWindowChange(w => this._screenDprMonitor.setWindow(w)));
-    this.register(forwardEvent(this._screenDprMonitor.onDprChange, this._onDprChange));
-
-    this.register(
-      addDisposableDomListener(this._textarea, 'focus', () => (this._isFocused = true))
-    );
-    this.register(
-      addDisposableDomListener(this._textarea, 'blur', () => (this._isFocused = false))
-    );
+    this._register(this.onWindowChange(w => this._screenDprMonitor.setWindow(w)));
+    this._register(Event.forward(this._screenDprMonitor.onDprChange, this._onDprChange));
+
+    this._register(addDisposableListener(this._textarea, 'focus', () => this._isFocused = true));
+    this._register(addDisposableListener(this._textarea, 'blur', () => this._isFocused = false));
   }
 
   public get window(): Window & typeof globalThis {
@@ -69,7 +65,7 @@ export class CoreBrowserService extends Disposable implements ICoreBrowserServic
  * window.devicePixelRatio value changes. This is done not with polling but with
  * the use of window.matchMedia to watch media queries. When the event fires,
  * the listener will be reattached using a different media query to ensure that
- * any further changes will register.
+ * any further changes will _register.
  *
  * The listener should fire on both window zoom changes and switching to a
  * monitor with a different DPI.
@@ -78,9 +74,9 @@ class ScreenDprMonitor extends Disposable {
   private _currentDevicePixelRatio: number;
   private _outerListener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | undefined;
   private _resolutionMediaMatchList: MediaQueryList | undefined;
-  private _windowResizeListener = this.register(new MutableDisposable());
+  private _windowResizeListener = this._register(new MutableDisposable());
 
-  private readonly _onDprChange = this.register(new EventEmitter<number>());
+  private readonly _onDprChange = this._register(new Emitter<number>());
   public readonly onDprChange = this._onDprChange.event;
 
   constructor(private _parentWindow: Window) {
@@ -95,7 +91,7 @@ class ScreenDprMonitor extends Disposable {
     this._setWindowResizeListener();
 
     // Setup additional disposables
-    this.register(toDisposable(() => this.clearListener()));
+    this._register(toDisposable(() => this.clearListener()));
   }
 
 
@@ -106,7 +102,7 @@ class ScreenDprMonitor extends Disposable {
   }
 
   private _setWindowResizeListener(): void {
-    this._windowResizeListener.value = addDisposableDomListener(this._parentWindow, 'resize', () => this._setDprAndFireIfDiffers());
+    this._windowResizeListener.value = addDisposableListener(this._parentWindow, 'resize', () => this._setDprAndFireIfDiffers());
   }
 
   private _setDprAndFireIfDiffers(): void {

package/src/browser/services/LinkProviderService.ts

@@ -1,5 +1,5 @@
 import { ILinkProvider, ILinkProviderService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { IDisposable } from 'common/Types';
 
 export class LinkProviderService extends Disposable implements ILinkProviderService {
@@ -9,7 +9,7 @@ export class LinkProviderService extends Disposable implements ILinkProviderServ
 
   constructor() {
     super();
-    this.register(toDisposable(() => this.linkProviders.length = 0));
+    this._register(toDisposable(() => this.linkProviders.length = 0));
   }
 
   public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {

package/src/browser/services/RenderService.ts

@@ -7,10 +7,10 @@ import { RenderDebouncer } from 'browser/RenderDebouncer';
 import { IRenderDebouncerWithCallback } from 'browser/Types';
 import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
 import { ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
 import { DebouncedIdleTask } from 'common/TaskQueue';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { Emitter } from 'vs/base/common/event';
 
 interface ISelectionState {
   start: [number, number] | undefined;
@@ -18,13 +18,17 @@ interface ISelectionState {
   columnSelectMode: boolean;
 }
 
+const enum Constants {
+  SYNCHRONIZED_OUTPUT_TIMEOUT_MS = 1000
+}
+
 export class RenderService extends Disposable implements IRenderService {
   public serviceBrand: undefined;
 
-  private _renderer: MutableDisposable<IRenderer> = this.register(new MutableDisposable());
+  private _renderer: MutableDisposable<IRenderer> = this._register(new MutableDisposable());
   private _renderDebouncer: IRenderDebouncerWithCallback;
   private _pausedResizeTask = new DebouncedIdleTask();
-  private _observerDisposable = this.register(new MutableDisposable());
+  private _observerDisposable = this._register(new MutableDisposable());
 
   private _isPaused: boolean = false;
   private _needsFullRefresh: boolean = false;
@@ -32,19 +36,20 @@ export class RenderService extends Disposable implements IRenderService {
   private _needsSelectionRefresh: boolean = false;
   private _canvasWidth: number = 0;
   private _canvasHeight: number = 0;
+  private _syncOutputHandler: SynchronizedOutputHandler;
   private _selectionState: ISelectionState = {
     start: undefined,
     end: undefined,
     columnSelectMode: false
   };
 
-  private readonly _onDimensionsChange = this.register(new EventEmitter<IRenderDimensions>());
+  private readonly _onDimensionsChange = this._register(new Emitter<IRenderDimensions>());
   public readonly onDimensionsChange = this._onDimensionsChange.event;
-  private readonly _onRenderedViewportChange = this.register(new EventEmitter<{ start: number, end: number }>());
+  private readonly _onRenderedViewportChange = this._register(new Emitter<{ start: number, end: number }>());
   public readonly onRenderedViewportChange = this._onRenderedViewportChange.event;
-  private readonly _onRender = this.register(new EventEmitter<{ start: number, end: number }>());
+  private readonly _onRender = this._register(new Emitter<{ start: number, end: number }>());
   public readonly onRender = this._onRender.event;
-  private readonly _onRefreshRequest = this.register(new EventEmitter<{ start: number, end: number }>());
+  private readonly _onRefreshRequest = this._register(new Emitter<{ start: number, end: number }>());
   public readonly onRefreshRequest = this._onRefreshRequest.event;
 
   public get dimensions(): IRenderDimensions { return this._renderer.value!.dimensions; }
@@ -52,33 +57,41 @@ export class RenderService extends Disposable implements IRenderService {
   constructor(
     private _rowCount: number,
     screenElement: HTMLElement,
-    @IOptionsService optionsService: IOptionsService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
+    @ICoreService private readonly _coreService: ICoreService,
     @IDecorationService decorationService: IDecorationService,
     @IBufferService bufferService: IBufferService,
-    @ICoreBrowserService coreBrowserService: ICoreBrowserService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
     @IThemeService themeService: IThemeService
   ) {
     super();
 
-    this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end), coreBrowserService);
-    this.register(this._renderDebouncer);
+    this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end), this._coreBrowserService);
+    this._register(this._renderDebouncer);
 
-    this.register(coreBrowserService.onDprChange(() => this.handleDevicePixelRatioChange()));
+    this._syncOutputHandler = new SynchronizedOutputHandler(
+      this._coreBrowserService,
+      this._coreService,
+      () => this._fullRefresh()
+    );
+    this._register(toDisposable(() => this._syncOutputHandler.dispose()));
 
-    this.register(bufferService.onResize(() => this._fullRefresh()));
-    this.register(bufferService.buffers.onBufferActivate(() => this._renderer.value?.clear()));
-    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
-    this.register(this._charSizeService.onCharSizeChange(() => this.handleCharSizeChanged()));
+    this._register(this._coreBrowserService.onDprChange(() => this.handleDevicePixelRatioChange()));
+
+    this._register(bufferService.onResize(() => this._fullRefresh()));
+    this._register(bufferService.buffers.onBufferActivate(() => this._renderer.value?.clear()));
+    this._register(this._optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this._register(this._charSizeService.onCharSizeChange(() => this.handleCharSizeChanged()));
 
     // Do a full refresh whenever any decoration is added or removed. This may not actually result
     // in changes but since decorations should be used sparingly or added/removed all in the same
     // frame this should have minimal performance impact.
-    this.register(decorationService.onDecorationRegistered(() => this._fullRefresh()));
-    this.register(decorationService.onDecorationRemoved(() => this._fullRefresh()));
+    this._register(decorationService.onDecorationRegistered(() => this._fullRefresh()));
+    this._register(decorationService.onDecorationRemoved(() => this._fullRefresh()));
 
     // Clear the renderer when the a change that could affect glyphs occurs
-    this.register(optionsService.onMultipleOptionChange([
+    this._register(this._optionsService.onMultipleOptionChange([
       'customGlyphs',
       'drawBoldTextInBrightColors',
       'letterSpacing',
@@ -96,15 +109,15 @@ export class RenderService extends Disposable implements IRenderService {
     }));
 
     // Refresh the cursor line when the cursor changes
-    this.register(optionsService.onMultipleOptionChange([
+    this._register(this._optionsService.onMultipleOptionChange([
       'cursorBlink',
       'cursorStyle'
     ], () => this.refreshRows(bufferService.buffer.y, bufferService.buffer.y, true)));
 
-    this.register(themeService.onChangeColors(() => this._fullRefresh()));
+    this._register(themeService.onChangeColors(() => this._fullRefresh()));
 
-    this._registerIntersectionObserver(coreBrowserService.window, screenElement);
-    this.register(coreBrowserService.onWindowChange((w) => this._registerIntersectionObserver(w, screenElement)));
+    this._registerIntersectionObserver(this._coreBrowserService.window, screenElement);
+    this._register(this._coreBrowserService.onWindowChange((w) => this._registerIntersectionObserver(w, screenElement)));
   }
 
   private _registerIntersectionObserver(w: Window & typeof globalThis, screenElement: HTMLElement): void {
@@ -137,6 +150,18 @@ export class RenderService extends Disposable implements IRenderService {
       this._needsFullRefresh = true;
       return;
     }
+
+    if (this._coreService.decPrivateModes.synchronizedOutput) {
+      this._syncOutputHandler.bufferRows(start, end);
+      return;
+    }
+
+    const buffered = this._syncOutputHandler.flush();
+    if (buffered) {
+      start = Math.min(start, buffered.start);
+      end = Math.max(end, buffered.end);
+    }
+
     if (!isRedrawOnly) {
       this._isNextRenderRedrawOnly = false;
     }
@@ -148,6 +173,13 @@ export class RenderService extends Disposable implements IRenderService {
       return;
     }
 
+    // Skip rendering if synchronized output mode is enabled. This check must happen here
+    // (in addition to refreshRows) to handle renders that were queued before the mode was enabled.
+    if (this._coreService.decPrivateModes.synchronizedOutput) {
+      this._syncOutputHandler.bufferRows(start, end);
+      return;
+    }
+
     // Since this is debounced, a resize event could have happened between the time a refresh was
     // requested and when this triggers. Clamp the values of start and end to ensure they're valid
     // given the current viewport state.
@@ -283,3 +315,62 @@ export class RenderService extends Disposable implements IRenderService {
     this._renderer.value?.clear();
   }
 }
+
+/**
+ * Buffers row refresh requests during synchronized output mode (DEC mode 2026).
+ * When the mode is disabled, the accumulated row range is flushed for rendering.
+ * A safety timeout ensures rendering occurs even if the end sequence is not received.
+ */
+class SynchronizedOutputHandler {
+  private _start: number = 0;
+  private _end: number = 0;
+  private _timeout: number | undefined;
+  private _isBuffering: boolean = false;
+
+  constructor(
+    private readonly _coreBrowserService: ICoreBrowserService,
+    private readonly _coreService: ICoreService,
+    private readonly _onTimeout: () => void
+  ) {}
+
+  public bufferRows(start: number, end: number): void {
+    if (!this._isBuffering) {
+      this._start = start;
+      this._end = end;
+      this._isBuffering = true;
+    } else {
+      this._start = Math.min(this._start, start);
+      this._end = Math.max(this._end, end);
+    }
+
+    if (this._timeout === undefined) {
+      this._timeout = this._coreBrowserService.window.setTimeout(() => {
+        this._timeout = undefined;
+        this._coreService.decPrivateModes.synchronizedOutput = false;
+        this._onTimeout();
+      }, Constants.SYNCHRONIZED_OUTPUT_TIMEOUT_MS);
+    }
+  }
+
+  public flush(): { start: number, end: number } | undefined {
+    if (this._timeout !== undefined) {
+      this._coreBrowserService.window.clearTimeout(this._timeout);
+      this._timeout = undefined;
+    }
+
+    if (!this._isBuffering) {
+      return undefined;
+    }
+
+    const result = { start: this._start, end: this._end };
+    this._isBuffering = false;
+    return result;
+  }
+
+  public dispose(): void {
+    if (this._timeout !== undefined) {
+      this._coreBrowserService.window.clearTimeout(this._timeout);
+      this._timeout = undefined;
+    }
+  }
+}

package/src/browser/services/SelectionService.ts

@@ -9,14 +9,14 @@ import { moveToCellSequence } from 'browser/input/MoveToCell';
 import { SelectionModel } from 'browser/selection/SelectionModel';
 import { ISelectionRedrawRequestEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { ICoreBrowserService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import * as Browser from 'common/Platform';
 import { IBufferLine, IDisposable } from 'common/Types';
 import { getRangeLength } from 'common/buffer/BufferRange';
 import { CellData } from 'common/buffer/CellData';
 import { IBuffer } from 'common/buffer/Types';
 import { IBufferService, ICoreService, IOptionsService } from 'common/services/Services';
+import { Emitter } from 'vs/base/common/event';
 
 /**
  * The number of pixels the mouse needs to be above or below the viewport in
@@ -111,13 +111,13 @@ export class SelectionService extends Disposable implements ISelectionService {
   private _oldSelectionStart: [number, number] | undefined = undefined;
   private _oldSelectionEnd: [number, number] | undefined = undefined;
 
-  private readonly _onLinuxMouseSelection = this.register(new EventEmitter<string>());
+  private readonly _onLinuxMouseSelection = this._register(new Emitter<string>());
   public readonly onLinuxMouseSelection = this._onLinuxMouseSelection.event;
-  private readonly _onRedrawRequest = this.register(new EventEmitter<ISelectionRedrawRequestEvent>());
+  private readonly _onRedrawRequest = this._register(new Emitter<ISelectionRedrawRequestEvent>());
   public readonly onRequestRedraw = this._onRedrawRequest.event;
-  private readonly _onSelectionChange = this.register(new EventEmitter<void>());
+  private readonly _onSelectionChange = this._register(new Emitter<void>());
   public readonly onSelectionChange = this._onSelectionChange.event;
-  private readonly _onRequestScrollLines = this.register(new EventEmitter<ISelectionRequestScrollLinesEvent>());
+  private readonly _onRequestScrollLines = this._register(new Emitter<ISelectionRequestScrollLinesEvent>());
   public readonly onRequestScrollLines = this._onRequestScrollLines.event;
 
   constructor(
@@ -142,16 +142,24 @@ export class SelectionService extends Disposable implements ISelectionService {
       }
     });
     this._trimListener = this._bufferService.buffer.lines.onTrim(amount => this._handleTrim(amount));
-    this.register(this._bufferService.buffers.onBufferActivate(e => this._handleBufferActivate(e)));
+    this._register(this._bufferService.buffers.onBufferActivate(e => this._handleBufferActivate(e)));
 
     this.enable();
 
     this._model = new SelectionModel(this._bufferService);
     this._activeSelectionMode = SelectionMode.NORMAL;
 
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
       this._removeMouseDownListeners();
     }));
+
+    // Clear selection when resizing vertically. This experience could be improved, this is the
+    // simple option to fix the buggy behavior. https://github.com/xtermjs/xterm.js/issues/5300
+    this._register(this._bufferService.onResize(e => {
+      if (e.rowsChanged) {
+        this.clearSelection();
+      }
+    }));
   }
 
   public reset(): void {

package/src/browser/services/Services.ts

@@ -3,12 +3,12 @@
  * @license MIT
  */
 
-import { IEvent } from 'common/EventEmitter';
 import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
 import { IColorSet, ILink, ReadonlyColorSet } from 'browser/Types';
 import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { createDecorator } from 'common/services/ServiceRegistry';
 import { AllColorIndex, IDisposable } from 'common/Types';
+import type { Event } from 'vs/base/common/event';
 
 export const ICharSizeService = createDecorator<ICharSizeService>('CharSizeService');
 export interface ICharSizeService {
@@ -18,7 +18,7 @@ export interface ICharSizeService {
   readonly height: number;
   readonly hasValidSize: boolean;
 
-  readonly onCharSizeChange: IEvent<void>;
+  readonly onCharSizeChange: Event<void>;
 
   measure(): void;
 }
@@ -29,8 +29,8 @@ export interface ICoreBrowserService {
 
   readonly isFocused: boolean;
 
-  readonly onDprChange: IEvent<number>;
-  readonly onWindowChange: IEvent<Window & typeof globalThis>;
+  readonly onDprChange: Event<number>;
+  readonly onWindowChange: Event<Window & typeof globalThis>;
 
   /**
    * Gets or sets the parent window that the terminal is rendered into. DOM and rendering APIs (e.g.
@@ -61,17 +61,17 @@ export const IRenderService = createDecorator<IRenderService>('RenderService');
 export interface IRenderService extends IDisposable {
   serviceBrand: undefined;
 
-  onDimensionsChange: IEvent<IRenderDimensions>;
+  onDimensionsChange: Event<IRenderDimensions>;
   /**
    * Fires when buffer changes are rendered. This does not fire when only cursor
    * or selections are rendered.
    */
-  onRenderedViewportChange: IEvent<{ start: number, end: number }>;
+  onRenderedViewportChange: Event<{ start: number, end: number }>;
   /**
    * Fires on render
    */
-  onRender: IEvent<{ start: number, end: number }>;
-  onRefreshRequest: IEvent<{ start: number, end: number }>;
+  onRender: Event<{ start: number, end: number }>;
+  onRefreshRequest: Event<{ start: number, end: number }>;
 
   dimensions: IRenderDimensions;
 
@@ -101,10 +101,10 @@ export interface ISelectionService {
   readonly selectionStart: [number, number] | undefined;
   readonly selectionEnd: [number, number] | undefined;
 
-  readonly onLinuxMouseSelection: IEvent<string>;
-  readonly onRequestRedraw: IEvent<ISelectionRequestRedrawEvent>;
-  readonly onRequestScrollLines: IEvent<ISelectionRequestScrollLinesEvent>;
-  readonly onSelectionChange: IEvent<void>;
+  readonly onLinuxMouseSelection: Event<string>;
+  readonly onRequestRedraw: Event<ISelectionRequestRedrawEvent>;
+  readonly onRequestScrollLines: Event<ISelectionRequestScrollLinesEvent>;
+  readonly onSelectionChange: Event<void>;
 
   disable(): void;
   enable(): void;
@@ -136,7 +136,7 @@ export interface IThemeService {
 
   readonly colors: ReadonlyColorSet;
 
-  readonly onChangeColors: IEvent<ReadonlyColorSet>;
+  readonly onChangeColors: Event<ReadonlyColorSet>;
 
   restoreColor(slot?: AllColorIndex): void;
   /**

package/src/browser/services/ThemeService.ts

@@ -5,12 +5,12 @@
 
 import { ColorContrastCache } from 'browser/ColorContrastCache';
 import { IThemeService } from 'browser/services/Services';
-import { IColorContrastCache, IColorSet, ReadonlyColorSet } from 'browser/Types';
-import { channels, color, css, NULL_COLOR } from 'common/Color';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable } from 'common/Lifecycle';
+import { DEFAULT_ANSI_COLORS, IColorContrastCache, IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { color, css, NULL_COLOR } from 'common/Color';
+import { Disposable } from 'vs/base/common/lifecycle';
 import { IOptionsService, ITheme } from 'common/services/Services';
 import { AllColorIndex, IColor, SpecialColorIndex } from 'common/Types';
+import { Emitter } from 'vs/base/common/event';
 
 interface IRestoreColorSet {
   foreground: IColor;
@@ -23,59 +23,12 @@ interface IRestoreColorSet {
 const DEFAULT_FOREGROUND = css.toColor('#ffffff');
 const DEFAULT_BACKGROUND = css.toColor('#000000');
 const DEFAULT_CURSOR = css.toColor('#ffffff');
-const DEFAULT_CURSOR_ACCENT = css.toColor('#000000');
+const DEFAULT_CURSOR_ACCENT = DEFAULT_BACKGROUND;
 const DEFAULT_SELECTION = {
   css: 'rgba(255, 255, 255, 0.3)',
   rgba: 0xFFFFFF4D
 };
-
-// An IIFE to generate DEFAULT_ANSI_COLORS.
-export const DEFAULT_ANSI_COLORS = Object.freeze((() => {
-  const colors = [
-    // dark:
-    css.toColor('#2e3436'),
-    css.toColor('#cc0000'),
-    css.toColor('#4e9a06'),
-    css.toColor('#c4a000'),
-    css.toColor('#3465a4'),
-    css.toColor('#75507b'),
-    css.toColor('#06989a'),
-    css.toColor('#d3d7cf'),
-    // bright:
-    css.toColor('#555753'),
-    css.toColor('#ef2929'),
-    css.toColor('#8ae234'),
-    css.toColor('#fce94f'),
-    css.toColor('#729fcf'),
-    css.toColor('#ad7fa8'),
-    css.toColor('#34e2e2'),
-    css.toColor('#eeeeec')
-  ];
-
-  // Fill in the remaining 240 ANSI colors.
-  // Generate colors (16-231)
-  const v = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff];
-  for (let i = 0; i < 216; i++) {
-    const r = v[(i / 36) % 6 | 0];
-    const g = v[(i / 6) % 6 | 0];
-    const b = v[i % 6];
-    colors.push({
-      css: channels.toCss(r, g, b),
-      rgba: channels.toRgba(r, g, b)
-    });
-  }
-
-  // Generate greys (232-255)
-  for (let i = 0; i < 24; i++) {
-    const c = 8 + i * 10;
-    colors.push({
-      css: channels.toCss(c, c, c),
-      rgba: channels.toRgba(c, c, c)
-    });
-  }
-
-  return colors;
-})());
+const DEFAULT_OVERVIEW_RULER_BORDER = DEFAULT_FOREGROUND;
 
 export class ThemeService extends Disposable implements IThemeService {
   public serviceBrand: undefined;
@@ -87,7 +40,7 @@ export class ThemeService extends Disposable implements IThemeService {
 
   public get colors(): ReadonlyColorSet { return this._colors; }
 
-  private readonly _onChangeColors = this.register(new EventEmitter<ReadonlyColorSet>());
+  private readonly _onChangeColors = this._register(new Emitter<ReadonlyColorSet>());
   public readonly onChangeColors = this._onChangeColors.event;
 
   constructor(
@@ -105,6 +58,10 @@ export class ThemeService extends Disposable implements IThemeService {
       selectionBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
       selectionInactiveBackgroundTransparent: DEFAULT_SELECTION,
       selectionInactiveBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      scrollbarSliderBackground: color.opacity(DEFAULT_FOREGROUND, 0.2),
+      scrollbarSliderHoverBackground: color.opacity(DEFAULT_FOREGROUND, 0.4),
+      scrollbarSliderActiveBackground: color.opacity(DEFAULT_FOREGROUND, 0.5),
+      overviewRulerBorder: DEFAULT_FOREGROUND,
       ansi: DEFAULT_ANSI_COLORS.slice(),
       contrastCache: this._contrastCache,
       halfContrastCache: this._halfContrastCache
@@ -112,8 +69,8 @@ export class ThemeService extends Disposable implements IThemeService {
     this._updateRestoreColors();
     this._setTheme(this._optionsService.rawOptions.theme);
 
-    this.register(this._optionsService.onSpecificOptionChange('minimumContrastRatio', () => this._contrastCache.clear()));
-    this.register(this._optionsService.onSpecificOptionChange('theme', () => this._setTheme(this._optionsService.rawOptions.theme)));
+    this._register(this._optionsService.onSpecificOptionChange('minimumContrastRatio', () => this._contrastCache.clear()));
+    this._register(this._optionsService.onSpecificOptionChange('theme', () => this._setTheme(this._optionsService.rawOptions.theme)));
   }
 
   /**
@@ -125,8 +82,8 @@ export class ThemeService extends Disposable implements IThemeService {
     const colors = this._colors;
     colors.foreground = parseColor(theme.foreground, DEFAULT_FOREGROUND);
     colors.background = parseColor(theme.background, DEFAULT_BACKGROUND);
-    colors.cursor = parseColor(theme.cursor, DEFAULT_CURSOR);
-    colors.cursorAccent = parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT);
+    colors.cursor = color.blend(colors.background, parseColor(theme.cursor, DEFAULT_CURSOR));
+    colors.cursorAccent = color.blend(colors.background, parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT));
     colors.selectionBackgroundTransparent = parseColor(theme.selectionBackground, DEFAULT_SELECTION);
     colors.selectionBackgroundOpaque = color.blend(colors.background, colors.selectionBackgroundTransparent);
     colors.selectionInactiveBackgroundTransparent = parseColor(theme.selectionInactiveBackground, colors.selectionBackgroundTransparent);
@@ -148,6 +105,10 @@ export class ThemeService extends Disposable implements IThemeService {
       const opacity = 0.3;
       colors.selectionInactiveBackgroundTransparent = color.opacity(colors.selectionInactiveBackgroundTransparent, opacity);
     }
+    colors.scrollbarSliderBackground = parseColor(theme.scrollbarSliderBackground, color.opacity(colors.foreground, 0.2));
+    colors.scrollbarSliderHoverBackground = parseColor(theme.scrollbarSliderHoverBackground, color.opacity(colors.foreground, 0.4));
+    colors.scrollbarSliderActiveBackground = parseColor(theme.scrollbarSliderActiveBackground, color.opacity(colors.foreground, 0.5));
+    colors.overviewRulerBorder = parseColor(theme.overviewRulerBorder, DEFAULT_OVERVIEW_RULER_BORDER);
     colors.ansi = DEFAULT_ANSI_COLORS.slice();
     colors.ansi[0] = parseColor(theme.black, DEFAULT_ANSI_COLORS[0]);
     colors.ansi[1] = parseColor(theme.red, DEFAULT_ANSI_COLORS[1]);

package/src/browser/shared/Constants.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2024 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export const enum ViewportConstants {
+  DEFAULT_SCROLL_BAR_WIDTH = 14
+}

package/src/common/CircularList.ts

@@ -4,8 +4,8 @@
  */
 
 import { ICircularList } from 'common/Types';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable } from 'common/Lifecycle';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { Emitter } from 'vs/base/common/event';
 
 export interface IInsertEvent {
   index: number;
@@ -26,11 +26,11 @@ export class CircularList<T> extends Disposable implements ICircularList<T> {
   private _startIndex: number;
   private _length: number;
 
-  public readonly onDeleteEmitter = this.register(new EventEmitter<IDeleteEvent>());
+  public readonly onDeleteEmitter = this._register(new Emitter<IDeleteEvent>());
   public readonly onDelete = this.onDeleteEmitter.event;
-  public readonly onInsertEmitter = this.register(new EventEmitter<IInsertEvent>());
+  public readonly onInsertEmitter = this._register(new Emitter<IInsertEvent>());
   public readonly onInsert = this.onInsertEmitter.event;
-  public readonly onTrimEmitter = this.register(new EventEmitter<number>());
+  public readonly onTrimEmitter = this._register(new Emitter<number>());
   public readonly onTrim = this.onTrimEmitter.event;
 
   constructor(