Merge branch 'master' into 1134_3

src/browser/ColorContrastCache.ts

@@ -5,35 +5,30 @@
 
 import { IColorContrastCache } from 'browser/Types';
 import { IColor } from 'common/Types';
+import { TwoKeyMap } from 'common/MultiKeyMap';
 
 export class ColorContrastCache implements IColorContrastCache {
-  private _color: { [bg: number]: { [fg: number]: IColor | null | undefined } | undefined } = {};
-  private _rgba: { [bg: number]: { [fg: number]: string | null | undefined } | undefined } = {};
-
-  public clear(): void {
-    this._color = {};
-    this._rgba = {};
-  }
+  private _color: TwoKeyMap</* bg */number, /* fg */number, IColor | null> = new TwoKeyMap();
+  private _css: TwoKeyMap</* bg */number, /* fg */number, string | null> = new TwoKeyMap();
 
   public setCss(bg: number, fg: number, value: string | null): void {
-    if (!this._rgba[bg]) {
-      this._rgba[bg] = {};
-    }
-    this._rgba[bg]![fg] = value;
+    this._css.set(bg, fg, value);
   }
 
   public getCss(bg: number, fg: number): string | null | undefined {
-    return this._rgba[bg] ? this._rgba[bg]![fg] : undefined;
+    return this._css.get(bg, fg);
   }
 
   public setColor(bg: number, fg: number, value: IColor | null): void {
-    if (!this._color[bg]) {
-      this._color[bg] = {};
-    }
-    this._color[bg]![fg] = value;
+    this._color.set(bg, fg, value);
   }
 
   public getColor(bg: number, fg: number): IColor | null | undefined {
-    return this._color[bg] ? this._color[bg]![fg] : undefined;
+    return this._color.get(bg, fg);
+  }
+
+  public clear(): void {
+    this._color.clear();
+    this._css.clear();
   }
 }

src/browser/LocalizableStrings.ts

@@ -3,6 +3,8 @@
  * @license MIT
  */
 
+// This file contains strings that get exported in the API so they can be localized
+
 // eslint-disable-next-line prefer-const
 export let promptLabel = 'Terminal input';
 

src/browser/renderer/CustomGlyphs.ts

@@ -349,25 +349,27 @@ const enum VectorType {
  * not been patched with powerline characters and also to get pixel perfect rendering as rendering
  * issues can occur around AA/SPAA.
  *
+ * The line variants draw beyond the cell and get clipped to ensure the end of the line is not visible.
+ *
  * Original symbols defined in https://github.com/powerline/fontpatcher
  */
 export const powerlineDefinitions: { [index: string]: IVectorShape } = {
   // Right triangle solid
-  '\u{E0B0}': { d: 'M0,0 L1,.5 L0,1', type: VectorType.FILL },
+  '\u{E0B0}': { d: 'M0,0 L1,.5 L0,1', type: VectorType.FILL, rightPadding: 2 },
   // Right triangle line
-  '\u{E0B1}': { d: 'M0,0 L1,.5 L0,1', type: VectorType.STROKE, leftPadding: window.devicePixelRatio / 2, rightPadding: window.devicePixelRatio / 2 },
+  '\u{E0B1}': { d: 'M-1,-.5 L1,.5 L-1,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
   // Left triangle solid
-  '\u{E0B2}': { d: 'M1,0 L0,.5 L1,1', type: VectorType.FILL },
+  '\u{E0B2}': { d: 'M1,0 L0,.5 L1,1', type: VectorType.FILL, leftPadding: 2 },
   // Left triangle line
-  '\u{E0B3}': { d: 'M1,0 L0,.5 L1,1', type: VectorType.STROKE, leftPadding: window.devicePixelRatio / 2, rightPadding: window.devicePixelRatio / 2 },
+  '\u{E0B3}': { d: 'M2,-.5 L0,.5 L2,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
   // Right semi-circle solid,
-  '\u{E0B4}': { d: 'M0,0 L0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.FILL },
+  '\u{E0B4}': { d: 'M0,0 L0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.FILL, rightPadding: 1 },
   // Right semi-circle line,
-  '\u{E0B5}': { d: 'M0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.STROKE, rightPadding: window.devicePixelRatio / 2 },
+  '\u{E0B5}': { d: 'M0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.STROKE, rightPadding: 1 },
   // Left semi-circle solid,
-  '\u{E0B6}': { d: 'M1,0 L1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.FILL },
+  '\u{E0B6}': { d: 'M1,0 L1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.FILL, leftPadding: 1 },
   // Left semi-circle line,
-  '\u{E0B7}': { d: 'M1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.STROKE, leftPadding: window.devicePixelRatio / 2 }
+  '\u{E0B7}': { d: 'M1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.STROKE, leftPadding: 1 }
 };
 
 /**
@@ -380,7 +382,8 @@ export function tryDrawCustomChar(
   xOffset: number,
   yOffset: number,
   scaledCellWidth: number,
-  scaledCellHeight: number
+  scaledCellHeight: number,
+  fontSize: number
 ): boolean {
   const blockElementDefinition = blockElementDefinitions[c];
   if (blockElementDefinition) {
@@ -402,7 +405,7 @@ export function tryDrawCustomChar(
 
   const powerlineDefinition = powerlineDefinitions[c];
   if (powerlineDefinition) {
-    drawPowerlineChar(ctx, powerlineDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    drawPowerlineChar(ctx, powerlineDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight, fontSize);
     return true;
   }
 
@@ -562,7 +565,7 @@ function drawBoxDrawingChar(
       if (!args[0] || !args[1]) {
         continue;
       }
-      f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset));
+      f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset, true));
     }
     ctx.stroke();
     ctx.closePath();
@@ -575,10 +578,13 @@ function drawPowerlineChar(
   xOffset: number,
   yOffset: number,
   scaledCellWidth: number,
-  scaledCellHeight: number
+  scaledCellHeight: number,
+  fontSize: number
 ): void {
   ctx.beginPath();
-  ctx.lineWidth = window.devicePixelRatio;
+  // Scale the stroke with DPR and font size
+  const cssLineWidth = fontSize / 12;
+  ctx.lineWidth = window.devicePixelRatio * cssLineWidth;
   for (const instruction of charDefinition.d.split(' ')) {
     const type = instruction[0];
     const f = svgToCanvasInstructionMap[type];
@@ -590,7 +596,16 @@ function drawPowerlineChar(
     if (!args[0] || !args[1]) {
       continue;
     }
-    f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset, charDefinition.leftPadding, charDefinition.rightPadding));
+    f(ctx, translateArgs(
+      args,
+      scaledCellWidth,
+      scaledCellHeight,
+      xOffset,
+      yOffset,
+      false,
+      (charDefinition.leftPadding ?? 0) * (cssLineWidth / 2),
+      (charDefinition.rightPadding ?? 0) * (cssLineWidth / 2)
+    ));
   }
   if (charDefinition.type === VectorType.STROKE) {
     ctx.strokeStyle = ctx.fillStyle;
@@ -611,7 +626,7 @@ const svgToCanvasInstructionMap: { [index: string]: any } = {
   'M': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.moveTo(args[0], args[1])
 };
 
-function translateArgs(args: string[], cellWidth: number, cellHeight: number, xOffset: number, yOffset: number, leftPadding: number = 0, rightPadding: number = 0): number[] {
+function translateArgs(args: string[], cellWidth: number, cellHeight: number, xOffset: number, yOffset: number, doClamp: boolean, leftPadding: number = 0, rightPadding: number = 0): number[] {
   const result = args.map(e => parseFloat(e) || parseInt(e));
 
   if (result.length < 2) {
@@ -623,7 +638,7 @@ function translateArgs(args: string[], cellWidth: number, cellHeight: number, xO
     result[x] *= cellWidth - (leftPadding * window.devicePixelRatio) - (rightPadding * window.devicePixelRatio);
     // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
     // line at 100% devicePixelRatio
-    if (result[x] !== 0) {
+    if (doClamp && result[x] !== 0) {
       result[x] = clamp(Math.round(result[x] + 0.5) - 0.5, cellWidth, 0);
     }
     // Apply the cell's offset (ie. x*cellWidth)
@@ -635,7 +650,7 @@ function translateArgs(args: string[], cellWidth: number, cellHeight: number, xO
     result[y] *= cellHeight;
     // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
     // line at 100% devicePixelRatio
-    if (result[y] !== 0) {
+    if (doClamp && result[y] !== 0) {
       result[y] = clamp(Math.round(result[y] + 0.5) - 0.5, cellHeight, 0);
     }
     // Apply the cell's offset (ie. x*cellHeight)

src/browser/renderer/DevicePixelObserver.ts

@@ -24,10 +24,12 @@ export function observeDevicePixelDimensions(element: HTMLElement, callback: (de
       return;
     }
 
-    callback(
-      entry.devicePixelContentBoxSize[0].inlineSize,
-      entry.devicePixelContentBoxSize[0].blockSize
-    );
+    // Fire the callback, ignore events where the dimensions are 0x0 as the canvas is likely hidden
+    const width = entry.devicePixelContentBoxSize[0].inlineSize;
+    const height = entry.devicePixelContentBoxSize[0].blockSize;
+    if (width > 0 && height > 0) {
+      callback(width, height);
+    }
   });
   observer.observe(element, { box: ['device-pixel-content-box'] } as any);
   return toDisposable(() => observer?.disconnect());

src/browser/renderer/RendererUtils.ts

@@ -14,11 +14,15 @@ export function isPowerlineGlyph(codepoint: number): boolean {
   // Only return true for Powerline symbols which require
   // different padding and should be excluded from minimum contrast
   // ratio standards
-  return 0xE0A4 <= codepoint && codepoint <=  0xE0D6;
+  return 0xE0A4 <= codepoint && codepoint <= 0xE0D6;
+}
+
+export function isRestrictedPowerlineGlyph(codepoint: number): boolean {
+  return 0xE0B0 <= codepoint && codepoint <= 0xE0B7;
 }
 
 function isBoxOrBlockGlyph(codepoint: number): boolean {
-  return (0x2500 <= codepoint && codepoint <= 0x259F);
+  return 0x2500 <= codepoint && codepoint <= 0x259F;
 }
 
 export function excludeFromContrastRatioDemands(codepoint: number): boolean {

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -204,9 +204,9 @@ export class DomRendererRowFactory {
       let bgOverride: IColor | undefined;
       let fgOverride: IColor | undefined;
       let isTop = false;
-      for (const d of this._decorationService.getDecorationsAtCell(x, row)) {
+      this._decorationService.forEachDecorationAtCell(x, row, undefined, d => {
         if (d.options.layer !== 'top' && isTop) {
-          continue;
+          return;
         }
         if (d.backgroundColorRGB) {
           bgColorMode = Attributes.CM_RGB;
@@ -219,7 +219,7 @@ export class DomRendererRowFactory {
           fgOverride = d.foregroundColorRGB;
         }
         isTop = d.options.layer === 'top';
-      }
+      });
 
       // Apply selection foreground if applicable
       const isInSelection = this._isCellInSelection(x, row);

src/common/MultiKeyMap.test.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { FourKeyMap, TwoKeyMap } from 'common/MultiKeyMap';
+
+const strictEqual = assert.strictEqual;
+
+describe('TwoKeyMap', () => {
+  let map: TwoKeyMap<number | string, number | string, string>;
+
+  beforeEach(() => {
+    map = new TwoKeyMap();
+  });
+
+  it('set, get', () => {
+    strictEqual(map.get(1, 2), undefined);
+    map.set(1, 2, 'foo');
+    strictEqual(map.get(1, 2), 'foo');
+    map.set(1, 3, 'bar');
+    strictEqual(map.get(1, 2), 'foo');
+    strictEqual(map.get(1, 3), 'bar');
+    map.set(2, 2, 'foo2');
+    map.set(2, 3, 'bar2');
+    strictEqual(map.get(1, 2), 'foo');
+    strictEqual(map.get(1, 3), 'bar');
+    strictEqual(map.get(2, 2), 'foo2');
+    strictEqual(map.get(2, 3), 'bar2');
+  });
+  it('clear', () => {
+    strictEqual(map.get(1, 2), undefined);
+    map.set(1, 2, 'foo');
+    strictEqual(map.get(1, 2), 'foo');
+    map.clear();
+    strictEqual(map.get(1, 2), undefined);
+  });
+});
+
+describe('FourKeyMap', () => {
+  let map: FourKeyMap<number | string, number | string, number | string, number | string, string>;
+
+  beforeEach(() => {
+    map = new FourKeyMap();
+  });
+
+  it('set, get', () => {
+    strictEqual(map.get(1, 2, 3, 4), undefined);
+    map.set(1, 2, 3, 4, 'foo');
+    strictEqual(map.get(1, 2, 3, 4), 'foo');
+    map.set(1, 3, 3, 4, 'bar');
+    strictEqual(map.get(1, 2, 3, 4), 'foo');
+    strictEqual(map.get(1, 3, 3, 4), 'bar');
+    map.set(2, 2, 3, 4, 'foo2');
+    map.set(2, 3, 3, 4, 'bar2');
+    strictEqual(map.get(1, 2, 3, 4), 'foo');
+    strictEqual(map.get(1, 3, 3, 4), 'bar');
+    strictEqual(map.get(2, 2, 3, 4), 'foo2');
+    strictEqual(map.get(2, 3, 3, 4), 'bar2');
+  });
+  it('clear', () => {
+    strictEqual(map.get(1, 2, 3, 4), undefined);
+    map.set(1, 2, 3, 4, 'foo');
+    strictEqual(map.get(1, 2, 3, 4), 'foo');
+    map.clear();
+    strictEqual(map.get(1, 2, 3, 4), undefined);
+  });
+});

src/common/MultiKeyMap.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export class TwoKeyMap<TFirst extends string | number, TSecond extends string | number, TValue> {
+  private _data: { [bg: string | number]: { [fg: string | number]: TValue | undefined } | undefined } = {};
+
+  public set(first: TFirst, second: TSecond, value: TValue): void {
+    if (!this._data[first]) {
+      this._data[first] = {};
+    }
+    this._data[first as string | number]![second] = value;
+  }
+
+  public get(first: TFirst, second: TSecond): TValue | undefined {
+    return this._data[first as string | number] ? this._data[first as string | number]![second] : undefined;
+  }
+
+  public clear(): void {
+    this._data = {};
+  }
+}
+
+export class FourKeyMap<TFirst extends string | number, TSecond extends string | number, TThird extends string | number, TFourth extends string | number, TValue> {
+  private _data: TwoKeyMap<TFirst, TSecond, TwoKeyMap<TThird, TFourth, TValue>> = new TwoKeyMap();
+
+  public set(first: TFirst, second: TSecond, third: TThird, fourth: TFourth, value: TValue): void {
+    if (!this._data.get(first, second)) {
+      this._data.set(first, second, new TwoKeyMap());
+    }
+    this._data.get(first, second)!.set(third, fourth, value);
+  }
+
+  public get(first: TFirst, second: TSecond, third: TThird, fourth: TFourth): TValue | undefined {
+    return this._data.get(first, second)?.get(third, fourth);
+  }
+
+  public clear(): void {
+    this._data.clear();
+  }
+}

src/common/SortedList.ts

@@ -3,6 +3,9 @@
  * @license MIT
  */
 
+// Work variables to avoid garbage collection.
+let i = 0;
+
 /**
  * A generic list that is maintained in sorted order and allows values with duplicate keys. This
  * list is based on binary search and as such locating a key will take O(log n) amortized, this
@@ -25,7 +28,7 @@ export class SortedList<T> {
       this._array.push(value);
       return;
     }
-    const i = this._search(this._getKey(value), 0, this._array.length - 1);
+    i = this._search(this._getKey(value), 0, this._array.length - 1);
     this._array.splice(i, 0, value);
   }
 
@@ -37,7 +40,7 @@ export class SortedList<T> {
     if (key === undefined) {
       return false;
     }
-    let i = this._search(key, 0, this._array.length - 1);
+    i = this._search(key, 0, this._array.length - 1);
     if (i === -1) {
       return false;
     }
@@ -57,7 +60,7 @@ export class SortedList<T> {
     if (this._array.length === 0) {
       return;
     }
-    let i = this._search(key, 0, this._array.length - 1);
+    i = this._search(key, 0, this._array.length - 1);
     if (i < 0 || i >= this._array.length) {
       return;
     }
@@ -69,6 +72,22 @@ export class SortedList<T> {
     } while (++i < this._array.length && this._getKey(this._array[i]) === key);
   }
 
+  public forEachByKey(key: number, callback: (value: T) => void): void {
+    if (this._array.length === 0) {
+      return;
+    }
+    i = this._search(key, 0, this._array.length - 1);
+    if (i < 0 || i >= this._array.length) {
+      return;
+    }
+    if (this._getKey(this._array[i]) !== key) {
+      return;
+    }
+    do {
+      callback(this._array[i]);
+    } while (++i < this._array.length && this._getKey(this._array[i]) === key);
+  }
+
   public values(): IterableIterator<T> {
     return this._array.values();
   }

src/common/TestUtils.test.ts

@@ -173,7 +173,6 @@ export class MockDecorationService implements IDecorationService {
   public onDecorationRemoved = new EventEmitter<IInternalDecoration>().event;
   public registerDecoration(decorationOptions: IDecorationOptions): IDecoration | undefined { return undefined; }
   public reset(): void { }
-  public *getDecorationsAtLine(line: number): IterableIterator<IInternalDecoration> { }
-  public *getDecorationsAtCell(x: number, line: number): IterableIterator<IInternalDecoration> { }
+  public forEachDecorationAtCell(x: number, line: number, layer: 'bottom' | 'top' | undefined, callback: (decoration: IInternalDecoration) => void): void { }
   public dispose(): void { }
 }

src/common/buffer/BufferLine.ts

@@ -37,6 +37,11 @@ const enum Cell {
 
 export const DEFAULT_ATTR_DATA = Object.freeze(new AttributeData());
 
+/** Work variables to avoid garbage collection. */
+const w: { startIndex: number } = {
+  startIndex: 0
+};
+
 /**
  * Typed array based bufferline implementation.
  *
@@ -168,10 +173,10 @@ export class BufferLine implements IBufferLine {
    * to GC as it significantly reduced the amount of new objects/references needed.
    */
   public loadCell(index: number, cell: ICellData): ICellData {
-    const startIndex = index * CELL_SIZE;
-    cell.content = this._data[startIndex + Cell.CONTENT];
-    cell.fg = this._data[startIndex + Cell.FG];
-    cell.bg = this._data[startIndex + Cell.BG];
+    w.startIndex = index * CELL_SIZE;
+    cell.content = this._data[w.startIndex + Cell.CONTENT];
+    cell.fg = this._data[w.startIndex + Cell.FG];
+    cell.bg = this._data[w.startIndex + Cell.BG];
     if (cell.content & Content.IS_COMBINED_MASK) {
       cell.combinedData = this._combined[index];
     }

src/common/buffer/BufferSet.ts

@@ -58,14 +58,14 @@ export class BufferSet extends Disposable implements IBufferSet {
   }
 
   /**
-   * Returns the normal Buffer of the BufferSet
+   * Returns the currently active Buffer of the BufferSet
    */
   public get active(): Buffer {
     return this._activeBuffer;
   }
 
   /**
-   * Returns the currently active Buffer of the BufferSet
+   * Returns the normal Buffer of the BufferSet
    */
   public get normal(): Buffer {
     return this._normal;

src/common/services/DecorationService.ts

@@ -11,6 +11,12 @@ import { SortedList } from 'common/SortedList';
 import { IColor } from 'common/Types';
 import { IDecorationOptions, IDecoration, IMarker, IEvent } from 'xterm';
 
+/** Work variables to avoid garbage collection. */
+const w = {
+  xmin: 0,
+  xmax: 0
+};
+
 export class DecorationService extends Disposable implements IDecorationService {
   public serviceBrand: any;
 
@@ -56,10 +62,6 @@ export class DecorationService extends Disposable implements IDecorationService
     this._decorations.clear();
   }
 
-  public *getDecorationsAtLine(line: number): IterableIterator<IInternalDecoration> {
-    return this._decorations.getKeyIterator(line);
-  }
-
   public *getDecorationsAtCell(x: number, line: number, layer?: 'bottom' | 'top'): IterableIterator<IInternalDecoration> {
     let xmin = 0;
     let xmax = 0;
@@ -72,6 +74,16 @@ export class DecorationService extends Disposable implements IDecorationService
     }
   }
 
+  public forEachDecorationAtCell(x: number, line: number, layer: 'bottom' | 'top' | undefined, callback: (decoration: IInternalDecoration) => void): void {
+    this._decorations.forEachByKey(line, d => {
+      w.xmin = d.options.x ?? 0;
+      w.xmax = w.xmin + (d.options.width ?? 1);
+      if (x >= w.xmin && x < w.xmax && (!layer || (d.options.layer ?? 'bottom') === layer)) {
+        callback(d);
+      }
+    });
+  }
+
   public dispose(): void {
     for (const d of this._decorations.values()) {
       this._onDecorationRemoved.fire(d);

src/common/services/Services.ts

@@ -321,10 +321,11 @@ export interface IDecorationService extends IDisposable {
   readonly onDecorationRemoved: IEvent<IInternalDecoration>;
   registerDecoration(decorationOptions: IDecorationOptions): IDecoration | undefined;
   reset(): void;
-  /** Iterates over the decorations at a line (in no particular order). */
-  getDecorationsAtLine(line: number): IterableIterator<IInternalDecoration>;
-  /** Iterates over the decorations at a cell (in no particular order). */
-  getDecorationsAtCell(x: number, line: number, layer?: 'bottom' | 'top'): IterableIterator<IInternalDecoration>;
+  /**
+   * Trigger a callback over the decoration at a cell (in no particular order). This uses a callback
+   * instead of an iterator as it's typically used in hot code paths.
+   */
+  forEachDecorationAtCell(x: number, line: number, layer: 'bottom' | 'top' | undefined, callback: (decoration: IInternalDecoration) => void): void;
 }
 export interface IInternalDecoration extends IDecoration {
   readonly options: IDecorationOptions;