@xterm/xterm 5.6.0-beta.9 → 5.6.0-beta.91

package/src/browser/decorations/OverviewRulerRenderer.ts

@@ -4,10 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { ColorZoneStore, IColorZone, IColorZoneStore } from 'browser/decorations/ColorZoneStore';
-import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 
+const enum Constants {
+  OVERVIEW_RULER_BORDER_WIDTH = 1
+}
+
 // Helper objects to avoid excessive calculation and garbage collection during rendering. These are
 // static values for each render and can be accessed using the decoration position as the key.
 const drawHeight = {
@@ -34,7 +38,7 @@ export class OverviewRulerRenderer extends Disposable {
   private readonly _ctx: CanvasRenderingContext2D;
   private readonly _colorZoneStore: IColorZoneStore = new ColorZoneStore();
   private get _width(): number {
-    return this._optionsService.options.overviewRulerWidth || 0;
+    return this._optionsService.options.overviewRuler?.width || 0;
   }
   private _animationFrame: number | undefined;
 
@@ -51,6 +55,7 @@ export class OverviewRulerRenderer extends Disposable {
     @IDecorationService private readonly _decorationService: IDecorationService,
     @IRenderService private readonly _renderService: IRenderService,
     @IOptionsService private readonly _optionsService: IOptionsService,
+    @IThemeService private readonly _themeService: IThemeService,
     @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
   ) {
     super();
@@ -58,68 +63,47 @@ export class OverviewRulerRenderer extends Disposable {
     this._canvas.classList.add('xterm-decoration-overview-ruler');
     this._refreshCanvasDimensions();
     this._viewportElement.parentElement?.insertBefore(this._canvas, this._viewportElement);
+    this._register(toDisposable(() => this._canvas?.remove()));
+
     const ctx = this._canvas.getContext('2d');
     if (!ctx) {
       throw new Error('Ctx cannot be null');
     } else {
       this._ctx = ctx;
     }
-    this._registerDecorationListeners();
-    this._registerBufferChangeListeners();
-    this._registerDimensionChangeListeners();
-    this.register(toDisposable(() => {
-      this._canvas?.remove();
-    }));
-  }
 
-  /**
-   * On decoration add or remove, redraw
-   */
-  private _registerDecorationListeners(): void {
-    this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh(undefined, true)));
-    this.register(this._decorationService.onDecorationRemoved(() => this._queueRefresh(undefined, true)));
-  }
+    this._register(this._decorationService.onDecorationRegistered(() => this._queueRefresh(undefined, true)));
+    this._register(this._decorationService.onDecorationRemoved(() => this._queueRefresh(undefined, true)));
 
-  /**
-   * On buffer change, redraw
-   * and hide the canvas if the alt buffer is active
-   */
-  private _registerBufferChangeListeners(): void {
-    this.register(this._renderService.onRenderedViewportChange(() => this._queueRefresh()));
-    this.register(this._bufferService.buffers.onBufferActivate(() => {
+    this._register(this._renderService.onRenderedViewportChange(() => this._queueRefresh()));
+    this._register(this._bufferService.buffers.onBufferActivate(() => {
       this._canvas!.style.display = this._bufferService.buffer === this._bufferService.buffers.alt ? 'none' : 'block';
     }));
-    this.register(this._bufferService.onScroll(() => {
+    this._register(this._bufferService.onScroll(() => {
       if (this._lastKnownBufferLength !== this._bufferService.buffers.normal.lines.length) {
         this._refreshDrawHeightConstants();
         this._refreshColorZonePadding();
       }
     }));
-  }
-  /**
-   * On dimension change, update canvas dimensions
-   * and then redraw
-   */
-  private _registerDimensionChangeListeners(): void {
-    // container height changed
-    this.register(this._renderService.onRender((): void => {
+
+    // Container height changed
+    this._register(this._renderService.onRender((): void => {
       if (!this._containerHeight || this._containerHeight !== this._screenElement.clientHeight) {
         this._queueRefresh(true);
         this._containerHeight = this._screenElement.clientHeight;
       }
     }));
-    // overview ruler width changed
-    this.register(this._optionsService.onSpecificOptionChange('overviewRulerWidth', () => this._queueRefresh(true)));
-    // device pixel ratio changed
-    this.register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
-    // set the canvas dimensions
+
+    this._register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
+    this._register(this._optionsService.onSpecificOptionChange('overviewRuler', () => this._queueRefresh(true)));
+    this._register(this._themeService.onChangeColors(() => this._queueRefresh()));
     this._queueRefresh(true);
   }
 
   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 - Constants.OVERVIEW_RULER_BORDER_WIDTH) / 3);
+    const innerWidth = Math.ceil((this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH) / 3);
     drawWidth.full = this._canvas.width;
     drawWidth.left = outerWidth;
     drawWidth.center = innerWidth;
@@ -127,10 +111,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 = Constants.OVERVIEW_RULER_BORDER_WIDTH;
+    drawX.left = Constants.OVERVIEW_RULER_BORDER_WIDTH;
+    drawX.center = Constants.OVERVIEW_RULER_BORDER_WIDTH + drawWidth.left;
+    drawX.right = Constants.OVERVIEW_RULER_BORDER_WIDTH + drawWidth.left + drawWidth.center;
   }
 
   private _refreshDrawHeightConstants(): void {
@@ -173,6 +157,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 +173,17 @@ export class OverviewRulerRenderer extends Disposable {
     this._shouldUpdateAnchor = false;
   }
 
+  private _renderRulerOutline(): void {
+    this._ctx.fillStyle = this._themeService.colors.overviewRulerBorder.css;
+    this._ctx.fillRect(0, 0, Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
+    if (this._optionsService.rawOptions.overviewRuler.showTopBorder) {
+      this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, 0, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, Constants.OVERVIEW_RULER_BORDER_WIDTH);
+    }
+    if (this._optionsService.rawOptions.overviewRuler.showBottomBorder) {
+      this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
+    }
+  }
+
   private _renderColorZone(zone: IColorZone): void {
     this._ctx.fillStyle = zone.color;
     this._ctx.fillRect(

package/src/browser/input/CompositionHelper.ts

@@ -93,7 +93,8 @@ export class CompositionHelper {
    */
   public keydown(ev: KeyboardEvent): boolean {
     if (this._isComposing || this._isSendingComposition) {
-      if (ev.keyCode === 229) {
+      if (ev.keyCode === 20 || ev.keyCode === 229) {
+        // 20 is CapsLock, 229 is Enter
         // Continue composing if the keyCode is the "composition character"
         return false;
       }

package/src/browser/public/Terminal.ts

@@ -4,16 +4,16 @@
  */
 
 import * as Strings from 'browser/LocalizableStrings';
-import { Terminal as TerminalCore } from 'browser/Terminal';
+import { CoreBrowserTerminal as TerminalCore } from 'browser/CoreBrowserTerminal';
 import { IBufferRange, ITerminal } from 'browser/Types';
-import { IEvent } from 'common/EventEmitter';
-import { Disposable } from 'common/Lifecycle';
+import { Disposable } from 'vs/base/common/lifecycle';
 import { ITerminalOptions } from 'common/Types';
 import { AddonManager } from 'common/public/AddonManager';
 import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi';
 import { ParserApi } from 'common/public/ParserApi';
 import { UnicodeApi } from 'common/public/UnicodeApi';
 import { IBufferNamespace as IBufferNamespaceApi, IDecoration, IDecorationOptions, IDisposable, ILinkProvider, ILocalizableStrings, IMarker, IModes, IParser, ITerminalAddon, Terminal as ITerminalApi, ITerminalInitOnlyOptions, IUnicodeHandling } from '@xterm/xterm';
+import type { Event } from 'vs/base/common/event';
 
 /**
  * The set of options that only have an effect when set in the Terminal constructor.
@@ -32,8 +32,8 @@ export class Terminal extends Disposable implements ITerminalApi {
   constructor(options?: ITerminalOptions & ITerminalInitOnlyOptions) {
     super();
 
-    this._core = this.register(new TerminalCore(options));
-    this._addonManager = this.register(new AddonManager());
+    this._core = this._register(new TerminalCore(options));
+    this._addonManager = this._register(new AddonManager());
 
     this._publicOptions = { ... this._core.options };
     const getter = (propName: string): any => {
@@ -68,18 +68,18 @@ export class Terminal extends Disposable implements ITerminalApi {
     }
   }
 
-  public get onBell(): IEvent<void> { return this._core.onBell; }
-  public get onBinary(): IEvent<string> { return this._core.onBinary; }
-  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
-  public get onData(): IEvent<string> { return this._core.onData; }
-  public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
-  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
-  public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; }
-  public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; }
-  public get onScroll(): IEvent<number> { return this._core.onScroll; }
-  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
-  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
-  public get onWriteParsed(): IEvent<void> { return this._core.onWriteParsed; }
+  public get onBell(): Event<void> { return this._core.onBell; }
+  public get onBinary(): Event<string> { return this._core.onBinary; }
+  public get onCursorMove(): Event<void> { return this._core.onCursorMove; }
+  public get onData(): Event<string> { return this._core.onData; }
+  public get onKey(): Event<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
+  public get onLineFeed(): Event<void> { return this._core.onLineFeed; }
+  public get onRender(): Event<{ start: number, end: number }> { return this._core.onRender; }
+  public get onResize(): Event<{ cols: number, rows: number }> { return this._core.onResize; }
+  public get onScroll(): Event<number> { return this._core.onScroll; }
+  public get onSelectionChange(): Event<void> { return this._core.onSelectionChange; }
+  public get onTitleChange(): Event<string> { return this._core.onTitleChange; }
+  public get onWriteParsed(): Event<void> { return this._core.onWriteParsed; }
 
   public get element(): HTMLElement | undefined { return this._core.element; }
   public get parser(): IParser {
@@ -97,7 +97,7 @@ export class Terminal extends Disposable implements ITerminalApi {
   public get cols(): number { return this._core.cols; }
   public get buffer(): IBufferNamespaceApi {
     if (!this._buffer) {
-      this._buffer = this.register(new BufferNamespaceApi(this._core));
+      this._buffer = this._register(new BufferNamespaceApi(this._core));
     }
     return this._buffer;
   }
@@ -247,7 +247,13 @@ export class Terminal extends Disposable implements ITerminalApi {
     this._addonManager.loadAddon(this, addon);
   }
   public static get strings(): ILocalizableStrings {
-    return Strings;
+    // A wrapper is required here because esbuild prevents setting an `export let`
+    return {
+      get promptLabel(): string { return Strings.promptLabel.get(); },
+      set promptLabel(value: string) { Strings.promptLabel.set(value); },
+      get tooMuchOutput(): string { return Strings.tooMuchOutput.get(); },
+      set tooMuchOutput(value: string) { Strings.tooMuchOutput.set(value); }
+    };
   }
 
   private _verifyIntegers(...values: number[]): void {

package/src/browser/renderer/dom/DomRenderer.ts

@@ -12,9 +12,9 @@ import { IRenderDimensions, IRenderer, IRequestRedrawEvent, ISelectionRenderMode
 import { ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { ILinkifier2, ILinkifierEvent, ITerminal, ReadonlyColorSet } from 'browser/Types';
 import { color } from 'common/Color';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable, toDisposable } from 'common/Lifecycle';
-import { IBufferService, IInstantiationService, IOptionsService } from 'common/services/Services';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { IBufferService, ICoreService, IInstantiationService, IOptionsService } from 'common/services/Services';
+import { Emitter } from 'vs/base/common/event';
 
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
@@ -27,9 +27,9 @@ const SELECTION_CLASS = 'xterm-selection';
 let nextTerminalId = 1;
 
 /**
- * A fallback renderer for when canvas is slow. This is not meant to be
- * particularly fast or feature complete, more just stable and usable for when
- * canvas is not an option.
+ * The standard renderer and fallback for when the webgl addon is slow. This is not meant to be
+ * particularly fast and will even lack some features such as custom glyphs, hoever this is more
+ * reliable as webgl may not work on some machines.
  */
 export class DomRenderer extends Disposable implements IRenderer {
   private _rowFactory: DomRendererRowFactory;
@@ -45,7 +45,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   public dimensions: IRenderDimensions;
 
-  public readonly onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>()).event;
+  public readonly onRequestRedraw = this._register(new Emitter<IRequestRedrawEvent>()).event;
 
   constructor(
     private readonly _terminal: ITerminal,
@@ -59,6 +59,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IOptionsService private readonly _optionsService: IOptionsService,
     @IBufferService private readonly _bufferService: IBufferService,
+    @ICoreService private readonly _coreService: ICoreService,
     @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
     @IThemeService private readonly _themeService: IThemeService
   ) {
@@ -74,9 +75,9 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     this.dimensions = createRenderDimensions();
     this._updateDimensions();
-    this.register(this._optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this._register(this._optionsService.onOptionChange(() => this._handleOptionsChanged()));
 
-    this.register(this._themeService.onChangeColors(e => this._injectCss(e)));
+    this._register(this._themeService.onChangeColors(e => this._injectCss(e)));
     this._injectCss(this._themeService.colors);
 
     this._rowFactory = instantiationService.createInstance(DomRendererRowFactory, document);
@@ -85,10 +86,10 @@ export class DomRenderer extends Disposable implements IRenderer {
     this._screenElement.appendChild(this._rowContainer);
     this._screenElement.appendChild(this._selectionContainer);
 
-    this.register(this._linkifier2.onShowLinkUnderline(e => this._handleLinkHover(e)));
-    this.register(this._linkifier2.onHideLinkUnderline(e => this._handleLinkLeave(e)));
+    this._register(this._linkifier2.onShowLinkUnderline(e => this._handleLinkHover(e)));
+    this._register(this._linkifier2.onHideLinkUnderline(e => this._handleLinkLeave(e)));
 
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
       this._element.classList.remove(TERMINAL_CLASS_PREFIX + this._terminalClass);
 
       // Outside influences such as React unmounts may manipulate the DOM before our disposal.
@@ -161,6 +162,10 @@ export class DomRenderer extends Disposable implements IRenderer {
     // Base CSS
     let styles =
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+      // Disabling pointer events circumvents a browser behavior that prevents `click` events from
+      // being delivered if the target element is replaced during the click. This happened due to
+      // refresh() being called during the mousedown handler to start a selection.
+      ` pointer-events: none;` +
       ` color: ${colors.foreground.css};` +
       ` font-family: ${this._optionsService.rawOptions.fontFamily};` +
       ` font-size: ${this._optionsService.rawOptions.fontSize}px;` +
@@ -437,8 +442,8 @@ export class DomRenderer extends Disposable implements IRenderer {
     const buffer = this._bufferService.buffer;
     const cursorAbsoluteY = buffer.ybase + buffer.y;
     const cursorX = Math.min(buffer.x, this._bufferService.cols - 1);
-    const cursorBlink = this._optionsService.rawOptions.cursorBlink;
-    const cursorStyle = this._optionsService.rawOptions.cursorStyle;
+    const cursorBlink = this._coreService.decPrivateModes.cursorBlink ?? this._optionsService.rawOptions.cursorBlink;
+    const cursorStyle = this._coreService.decPrivateModes.cursorStyle ?? this._optionsService.rawOptions.cursorStyle;
     const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
 
     for (let y = start; y <= end; y++) {

package/src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -84,6 +84,7 @@ export class DomRendererRowFactory {
     let charElement: HTMLSpanElement | undefined;
     let cellAmount = 0;
     let text = '';
+    let i = 0;
     let oldBg = 0;
     let oldFg = 0;
     let oldExt = 0;
@@ -91,6 +92,7 @@ export class DomRendererRowFactory {
     let oldSpacing = 0;
     let oldIsInSelection: boolean = false;
     let spacing = 0;
+    let skipJoinedCheckUntilX = 0;
     const classes: string[] = [];
 
     const hasHover = linkStart !== -1 && linkEnd !== -1;
@@ -106,29 +108,46 @@ export class DomRendererRowFactory {
 
       // If true, indicates that the current character(s) to draw were joined.
       let isJoined = false;
+
+      // Indicates whether this cell is part of a joined range that should be ignored as it cannot
+      // be rendered entirely, like the selection state differs across the range.
+      let isValidJoinRange = (x >= skipJoinedCheckUntilX);
+
       let lastCharX = x;
 
       // 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.
       let cell = this._workCell;
-      if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
-        isJoined = true;
+      if (joinedRanges.length > 0 && x === joinedRanges[0][0] && isValidJoinRange) {
         const range = joinedRanges.shift()!;
+        // If the ligature's selection state is not consistent, don't join it. This helps the
+        // selection render correctly regardless whether they should be joined.
+        const firstSelectionState = this._isCellInSelection(range[0], row);
+        for (i = range[0] + 1; i < range[1]; i++) {
+          isValidJoinRange &&= (firstSelectionState === this._isCellInSelection(i, row));
+        }
+        // Similarly, if the cursor is in the ligature, don't join it.
+        isValidJoinRange &&= !isCursorRow || cursorX < range[0] || cursorX >= range[1];
+        if (!isValidJoinRange) {
+          skipJoinedCheckUntilX = range[1];
+        } else {
+          isJoined = true;
+
+          // 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,
+            lineData.translateToString(true, range[0], range[1]),
+            range[1] - range[0]
+          );
 
-        // 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,
-          lineData.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;
+          // Skip over the cells occupied by this range in the loop
+          lastCharX = range[1] - 1;
 
-        // Recalculate width
-        width = cell.getWidth();
+          // Recalculate width
+          width = cell.getWidth();
+        }
       }
 
       const isInSelection = this._isCellInSelection(x, row);
@@ -178,6 +197,7 @@ export class DomRendererRowFactory {
           && !isCursorCell
           && !isJoined
           && !isDecorated
+          && isValidJoinRange
         ) {
           // no span alterations, thus only account chars skipping all code below
           if (cell.isInvisible()) {
@@ -435,7 +455,7 @@ export class DomRendererRowFactory {
       }
 
       // exclude conditions for cell merging - never merge these
-      if (!isCursorCell && !isJoined && !isDecorated) {
+      if (!isCursorCell && !isJoined && !isDecorated && isValidJoinRange) {
         cellAmount++;
       } else {
         charElement.textContent = text;

package/src/browser/renderer/shared/CharAtlasCache.ts

@@ -31,9 +31,10 @@ export function acquireTextureAtlas(
   deviceCellHeight: number,
   deviceCharWidth: number,
   deviceCharHeight: number,
-  devicePixelRatio: number
+  devicePixelRatio: number,
+  deviceMaxTextureSize: number
 ): ITextureAtlas {
-  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, options, colors, devicePixelRatio);
+  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, options, colors, devicePixelRatio, deviceMaxTextureSize);
 
   // Check to see if the terminal already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

package/src/browser/renderer/shared/CharAtlasUtils.ts

@@ -9,7 +9,7 @@ import { ITerminalOptions } from '@xterm/xterm';
 import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { NULL_COLOR } from 'common/Color';
 
-export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, options: Required<ITerminalOptions>, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig {
+export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, options: Required<ITerminalOptions>, colors: ReadonlyColorSet, devicePixelRatio: number, deviceMaxTextureSize: number): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IColorSet = {
     foreground: colors.foreground,
@@ -21,6 +21,10 @@ export function generateConfig(deviceCellWidth: number, deviceCellHeight: number
     selectionBackgroundOpaque: NULL_COLOR,
     selectionInactiveBackgroundTransparent: NULL_COLOR,
     selectionInactiveBackgroundOpaque: NULL_COLOR,
+    overviewRulerBorder: NULL_COLOR,
+    scrollbarSliderBackground: NULL_COLOR,
+    scrollbarSliderHoverBackground: NULL_COLOR,
+    scrollbarSliderActiveBackground: NULL_COLOR,
     // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
     // dynamic character atlas.
     ansi: colors.ansi.slice(),
@@ -30,6 +34,7 @@ export function generateConfig(deviceCellWidth: number, deviceCellHeight: number
   return {
     customGlyphs: options.customGlyphs,
     devicePixelRatio,
+    deviceMaxTextureSize,
     letterSpacing: options.letterSpacing,
     lineHeight: options.lineHeight,
     deviceCellWidth: deviceCellWidth,

package/src/browser/renderer/shared/CustomGlyphs.ts

@@ -355,6 +355,12 @@ const enum VectorType {
  * Original symbols defined in https://github.com/powerline/fontpatcher
  */
 export const powerlineDefinitions: { [index: string]: IVectorShape } = {
+  // Git branch
+  '\u{E0A0}': { d: 'M.3,1 L.03,1 L.03,.88 C.03,.82,.06,.78,.11,.73 C.15,.7,.2,.68,.28,.65 L.43,.6 C.49,.58,.53,.56,.56,.53 C.59,.5,.6,.47,.6,.43 L.6,.27 L.4,.27 L.69,.1 L.98,.27 L.78,.27 L.78,.46 C.78,.52,.76,.56,.72,.61 C.68,.66,.63,.67,.56,.7 L.48,.72 C.42,.74,.38,.76,.35,.78 C.32,.8,.31,.84,.31,.88 L.31,1 M.3,.5 L.03,.59 L.03,.09 L.3,.09 L.3,.655', type: VectorType.FILL },
+  // L N
+  '\u{E0A1}': { d: 'M.7,.4 L.7,.47 L.2,.47 L.2,.03 L.355,.03 L.355,.4 L.705,.4 M.7,.5 L.86,.5 L.86,.95 L.69,.95 L.44,.66 L.46,.86 L.46,.95 L.3,.95 L.3,.49 L.46,.49 L.71,.78 L.69,.565 L.69,.5', type: VectorType.FILL },
+  // Lock
+  '\u{E0A2}': { d: 'M.25,.94 C.16,.94,.11,.92,.11,.87 L.11,.53 C.11,.48,.15,.455,.23,.45 L.23,.3 C.23,.25,.26,.22,.31,.19 C.36,.16,.43,.15,.51,.15 C.59,.15,.66,.16,.71,.19 C.77,.22,.79,.26,.79,.3 L.79,.45 C.87,.45,.91,.48,.91,.53 L.91,.87 C.91,.92,.86,.94,.77,.94 L.24,.94 M.53,.2 C.49,.2,.45,.21,.42,.23 C.39,.25,.38,.27,.38,.3 L.38,.45 L.68,.45 L.68,.3 C.68,.27,.67,.25,.64,.23 C.61,.21,.58,.2,.53,.2 M.58,.82 L.58,.66 C.63,.65,.65,.63,.65,.6 C.65,.58,.64,.57,.61,.56 C.58,.55,.56,.54,.52,.54 C.48,.54,.46,.55,.43,.56 C.4,.57,.39,.59,.39,.6 C.39,.63,.41,.64,.46,.66 L.46,.82 L.57,.82', type: VectorType.FILL },
   // Right triangle solid
   '\u{E0B0}': { d: 'M0,0 L1,.5 L0,1', type: VectorType.FILL, rightPadding: 2 },
   // Right triangle line

package/src/browser/renderer/shared/DevicePixelObserver.ts

@@ -3,8 +3,7 @@
  * @license MIT
  */
 
-import { toDisposable } from 'common/Lifecycle';
-import { IDisposable } from 'common/Types';
+import { toDisposable, IDisposable } from 'vs/base/common/lifecycle';
 
 export function observeDevicePixelDimensions(element: HTMLElement, parentWindow: Window & typeof globalThis, callback: (deviceWidth: number, deviceHeight: number) => void): IDisposable {
   // Observe any resizes to the element and extract the actual pixel size of the element if the

package/src/browser/renderer/shared/TextureAtlas.ts

@@ -9,13 +9,13 @@ import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
 import { computeNextVariantOffset, treatGlyphAsBackgroundColor, isPowerlineGlyph, isRestrictedPowerlineGlyph, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { IBoundingBox, ICharAtlasConfig, IRasterizedGlyph, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { NULL_COLOR, channels, color, rgba } from 'common/Color';
-import { EventEmitter } from 'common/EventEmitter';
 import { FourKeyMap } from 'common/MultiKeyMap';
 import { IdleTaskQueue } from 'common/TaskQueue';
 import { IColor } from 'common/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { Attributes, DEFAULT_COLOR, DEFAULT_EXT, UnderlineStyle } from 'common/buffer/Constants';
 import { IUnicodeService } from 'common/services/Services';
+import { Emitter } from 'vs/base/common/event';
 
 /**
  * A shared object which is used to draw nothing for a particular cell.
@@ -66,6 +66,7 @@ export class TextureAtlas implements ITextureAtlas {
 
   // The set of atlas pages that can be written to
   private _activePages: AtlasPage[] = [];
+  private _overflowSizePage: AtlasPage | undefined;
 
   private _tmpCanvas: HTMLCanvasElement;
   // A temporary context that glyphs are drawn to before being transfered to the atlas.
@@ -79,9 +80,9 @@ export class TextureAtlas implements ITextureAtlas {
   public static maxAtlasPages: number | undefined;
   public static maxTextureSize: number | undefined;
 
-  private readonly _onAddTextureAtlasCanvas = new EventEmitter<HTMLCanvasElement>();
+  private readonly _onAddTextureAtlasCanvas = new Emitter<HTMLCanvasElement>();
   public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
-  private readonly _onRemoveTextureAtlasCanvas = new EventEmitter<HTMLCanvasElement>();
+  private readonly _onRemoveTextureAtlasCanvas = new Emitter<HTMLCanvasElement>();
   public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
 
   constructor(
@@ -102,6 +103,7 @@ export class TextureAtlas implements ITextureAtlas {
   }
 
   public dispose(): void {
+    this._tmpCanvas.remove();
     for (const page of this.pages) {
       page.canvas.remove();
     }
@@ -121,7 +123,7 @@ export class TextureAtlas implements ITextureAtlas {
     for (let i = 33; i < 126; i++) {
       queue.enqueue(() => {
         if (!this._cacheMap.get(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT)) {
-          const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT);
+          const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, false, undefined);
           this._cacheMap.set(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, rasterizedGlyph);
         }
       });
@@ -241,12 +243,12 @@ export class TextureAtlas implements ITextureAtlas {
     }
   }
 
-  public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph {
-    return this._getFromCacheMap(this._cacheMapCombined, chars, bg, fg, ext, restrictToCellHeight);
+  public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph {
+    return this._getFromCacheMap(this._cacheMapCombined, chars, bg, fg, ext, restrictToCellHeight, domContainer);
   }
 
-  public getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph {
-    return this._getFromCacheMap(this._cacheMap, code, bg, fg, ext, restrictToCellHeight);
+  public getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph {
+    return this._getFromCacheMap(this._cacheMap, code, bg, fg, ext, restrictToCellHeight, domContainer);
   }
 
   /**
@@ -258,11 +260,12 @@ export class TextureAtlas implements ITextureAtlas {
     bg: number,
     fg: number,
     ext: number,
-    restrictToCellHeight: boolean = false
+    restrictToCellHeight: boolean,
+    domContainer: HTMLElement | undefined
   ): IRasterizedGlyph {
     $glyph = cacheMap.get(key, bg, fg, ext);
     if (!$glyph) {
-      $glyph = this._drawToCache(key, bg, fg, ext, restrictToCellHeight);
+      $glyph = this._drawToCache(key, bg, fg, ext, restrictToCellHeight, domContainer);
       cacheMap.set(key, bg, fg, ext, $glyph);
     }
     return $glyph;
@@ -422,16 +425,24 @@ export class TextureAtlas implements ITextureAtlas {
     return this._config.colors.contrastCache;
   }
 
-  private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean = false): IRasterizedGlyph {
+  private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph {
     const chars = typeof codeOrChars === 'number' ? String.fromCharCode(codeOrChars) : codeOrChars;
 
     // Uncomment for debugging
     // console.log(`draw to cache "${chars}"`, bg, fg, ext);
 
+    // Attach the canvas to the DOM in order to inherit font-feature-settings
+    // from the parent elements. This is necessary for ligatures and variants to
+    // work.
+    if (domContainer && this._tmpCanvas.parentElement !== domContainer) {
+      this._tmpCanvas.style.display = 'none';
+      domContainer.append(this._tmpCanvas);
+    }
+
     // Allow 1 cell width per character, with a minimum of 2 (CJK), plus some padding. This is used
     // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure
     // giant ligatures (eg. =====>) don't impact overall performance.
-    const allowedWidth = Math.min(this._config.deviceCellWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2, this._textureSize);
+    const allowedWidth = Math.min(this._config.deviceCellWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2, this._config.deviceMaxTextureSize);
     if (this._tmpCanvas.width < allowedWidth) {
       this._tmpCanvas.width = allowedWidth;
     }
@@ -772,6 +783,27 @@ export class TextureAtlas implements ITextureAtlas {
         }
       }
 
+      // Create a new page for oversized glyphs as they come up
+      if (rasterizedGlyph.size.x > this._textureSize) {
+        if (!this._overflowSizePage) {
+          this._overflowSizePage = new AtlasPage(this._document, this._config.deviceMaxTextureSize);
+          this.pages.push(this._overflowSizePage);
+
+          // Request the model to be cleared to refresh all texture pages.
+          this._requestClearModel = true;
+          this._onAddTextureAtlasCanvas.fire(this._overflowSizePage.canvas);
+        }
+        activePage = this._overflowSizePage;
+        activeRow = this._overflowSizePage.currentRow;
+        // Move to next row if necessary
+        if (activeRow.x + rasterizedGlyph.size.x >= activePage.canvas.width) {
+          activeRow.x = 0;
+          activeRow.y += activeRow.height;
+          activeRow.height = 0;
+        }
+        break;
+      }
+
       // Create a new page if too much vertical space would be wasted or there is not enough room
       // left in the page. The previous active row will become fixed in the process as it now has a
       // fixed height
@@ -782,6 +814,7 @@ export class TextureAtlas implements ITextureAtlas {
         if (activePage.currentRow.y + activePage.currentRow.height + rasterizedGlyph.size.y >= activePage.canvas.height) {
           // Find the first page with room to create the new row on
           let candidatePage: AtlasPage | undefined;
+
           for (const p of this._activePages) {
             if (p.currentRow.y + p.currentRow.height + rasterizedGlyph.size.y < p.canvas.height) {
               candidatePage = p;