Merge branch 'xtermjs:master' into master

addons/addon-canvas/src/BaseRenderLayer.ts

@@ -8,7 +8,7 @@ import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
 import { acquireTextureAtlas } from 'browser/renderer/shared/CharAtlasCache';
 import { TEXT_BASELINE } from 'browser/renderer/shared/Constants';
 import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
-import { isEmoji, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
 import { IRasterizedGlyph, IRenderDimensions, ISelectionRenderModel, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
@@ -407,14 +407,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     // following cell (ie. the width is not 2).
     let renderWidth = glyph.size.x;
     if (this._optionsService.rawOptions.rescaleOverlappingGlyphs) {
-      if (
-        // Is single cell width
-        width === 1 &&
-        // Glyph exceeds cell bounds, + 1 to avoid hurting readability
-        glyph.size.x > this._deviceCellWidth + 1 &&
-        // Never rescale emoji
-        code && !isEmoji(code)
-      ) {
+      if (allowRescaling(code, width, glyph.size.x, this._deviceCellWidth)) {
         renderWidth = this._deviceCellWidth - 1; // - 1 to improve readability
       }
     }

addons/addon-search/src/SearchAddon.ts

@@ -6,7 +6,7 @@
 import type { Terminal, IDisposable, ITerminalAddon, IDecoration } from '@xterm/xterm';
 import type { SearchAddon as ISearchApi } from '@xterm/addon-search';
 import { EventEmitter } from 'common/EventEmitter';
-import { Disposable, toDisposable, disposeArray, MutableDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable, disposeArray, MutableDisposable, getDisposeArrayDisposable } from 'common/Lifecycle';
 
 export interface ISearchOptions {
   regex?: boolean;
@@ -78,8 +78,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
    */
   private _linesCache: LineCacheEntry[] | undefined;
   private _linesCacheTimeoutId = 0;
-  private _cursorMoveListener: IDisposable | undefined;
-  private _resizeListener: IDisposable | undefined;
+  private _linesCacheDisposables = new MutableDisposable();
 
   private readonly _onDidChangeResults = this.register(new EventEmitter<{ resultIndex: number, resultCount: number }>());
   public readonly onDidChangeResults = this._onDidChangeResults.event;
@@ -427,8 +426,11 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
     const terminal = this._terminal!;
     if (!this._linesCache) {
       this._linesCache = new Array(terminal.buffer.active.length);
-      this._cursorMoveListener = terminal.onCursorMove(() => this._destroyLinesCache());
-      this._resizeListener = terminal.onResize(() => this._destroyLinesCache());
+      this._linesCacheDisposables.value = getDisposeArrayDisposable([
+        terminal.onLineFeed(() => this._destroyLinesCache()),
+        terminal.onCursorMove(() => this._destroyLinesCache()),
+        terminal.onResize(() => this._destroyLinesCache())
+      ]);
     }
 
     window.clearTimeout(this._linesCacheTimeoutId);
@@ -437,14 +439,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
 
   private _destroyLinesCache(): void {
     this._linesCache = undefined;
-    if (this._cursorMoveListener) {
-      this._cursorMoveListener.dispose();
-      this._cursorMoveListener = undefined;
-    }
-    if (this._resizeListener) {
-      this._resizeListener.dispose();
-      this._resizeListener = undefined;
-    }
+    this._linesCacheDisposables.clear();
     if (this._linesCacheTimeoutId) {
       window.clearTimeout(this._linesCacheTimeoutId);
       this._linesCacheTimeoutId = 0;

addons/addon-webgl/src/GlyphRenderer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { isEmoji, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
 import { IRasterizedGlyph, IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { NULL_CELL_CODE } from 'common/buffer/Constants';
@@ -281,14 +281,7 @@ export class GlyphRenderer extends Disposable {
     // Reduce scale horizontally for wide glyphs printed in cells that would overlap with the
     // following cell (ie. the width is not 2).
     if (this._optionsService.rawOptions.rescaleOverlappingGlyphs) {
-      if (
-        // Is single cell width
-        width === 1 &&
-        // Glyph exceeds cell bounds, + 1 to avoid hurting readability
-        $glyph.size.x > this._dimensions.device.cell.width + 1 &&
-        // Never rescale emoji
-        code && !isEmoji(code)
-      ) {
+      if (allowRescaling(code, width, $glyph.size.x, this._dimensions.device.cell.width)) {
         array[$i + 2] = (this._dimensions.device.cell.width - 1) / this._dimensions.device.canvas.width; // - 1 to improve readability
       }
     }

src/browser/renderer/dom/DomRenderer.ts

@@ -183,14 +183,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` font-style: italic;` +
       `}`;
     // Blink animation
+    const blinkAnimationUnderlineId = `blink_underline_${this._terminalClass}`;
+    const blinkAnimationBarId = `blink_bar_${this._terminalClass}`;
+    const blinkAnimationBlockId = `blink_block_${this._terminalClass}`;
     styles +=
-      `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationUnderlineId} {` +
       ` 50% {` +
       `  border-bottom-style: hidden;` +
       ` }` +
       `}`;
     styles +=
-      `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationBarId} {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
+    styles +=
+      `@keyframes ${blinkAnimationBlockId} {` +
       ` 0% {` +
       `  background-color: ${colors.cursor.css};` +
       `  color: ${colors.cursorAccent.css};` +
@@ -202,13 +211,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Cursor
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}:not(.${RowCss.CURSOR_STYLE_BLOCK_CLASS}) {` +
-      ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      ` animation: ${blinkAnimationUnderlineId} 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
+      ` animation: ${blinkAnimationBarId} 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
-      ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      ` animation: ${blinkAnimationBlockId} 1s step-end infinite;` +
       `}` +
+      // !important helps fix an issue where the cursor will not render on top of the selection,
+      // however it's very hard to fix this issue and retain the blink animation without the use of
+      // !important. So this edge case fails when cursor blink is on.
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` background-color: ${colors.cursor.css};` +
+      ` color: ${colors.cursorAccent.css};` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS}:not(.${RowCss.CURSOR_BLINK_CLASS}) {` +
       ` background-color: ${colors.cursor.css} !important;` +
       ` color: ${colors.cursorAccent.css} !important;` +
       `}` +

src/browser/renderer/shared/RendererUtils.ts

@@ -48,8 +48,9 @@ export function allowRescaling(codepoint: number | undefined, width: number, gly
   return (
     // Is single cell width
     width === 1 &&
-    // Glyph exceeds cell bounds, + 1 to avoid hurting readability
-    glyphSizeX > deviceCellWidth + 1 &&
+    // Glyph exceeds cell bounds, add 25% to avoid hurting readability by rescaling glyphs that
+    // barely overlap
+    glyphSizeX > deviceCellWidth * 1.25 &&
     // Never rescale emoji
     codepoint !== undefined && !isEmoji(codepoint) &&
     // Never rescale powerline or nerd fonts

src/common/Color.ts

@@ -3,7 +3,6 @@
  * @license MIT
  */
 
-import { isNode } from 'common/Platform';
 import { IColor, IColorRGB } from 'common/Types';
 
 let $r = 0;
@@ -117,9 +116,10 @@ export namespace color {
  * '#rrggbbaa').
  */
 export namespace css {
+  // Attempt to set get the shared canvas context
   let $ctx: CanvasRenderingContext2D | undefined;
   let $litmusColor: CanvasGradient | undefined;
-  if (!isNode) {
+  try {
     // This is guaranteed to run in the first window, so document should be correct
     const canvas = document.createElement('canvas');
     canvas.width = 1;
@@ -133,6 +133,9 @@ export namespace css {
       $litmusColor = $ctx.createLinearGradient(0, 0, 1, 1);
     }
   }
+  catch {
+    // noop
+  }
 
   /**
    * Converts a css string to an IColor, this should handle all valid CSS color strings and will

src/common/Platform.ts

@@ -14,7 +14,7 @@ interface INavigator {
 declare const navigator: INavigator;
 declare const process: unknown;
 
-export const isNode = (typeof process !== 'undefined') ? true : false;
+export const isNode = (typeof process !== 'undefined' && 'title' in (process as any)) ? true : false;
 const userAgent = (isNode) ? 'node' : navigator.userAgent;
 const platform = (isNode) ? 'node' : navigator.platform;
 

test/playwright/SharedRendererTests.ts

@@ -6,7 +6,7 @@
 import { IImage32, decodePng } from '@lunapaint/png-codec';
 import { LocatorScreenshotOptions, test } from '@playwright/test';
 import { ITheme } from '@xterm/xterm';
-import { ITestContext, MaybeAsync, openTerminal, pollFor, pollForApproximate, timeout } from './TestUtils';
+import { ITestContext, MaybeAsync, openTerminal, pollFor, pollForApproximate } from './TestUtils';
 
 export interface ISharedRendererTestContext {
   value: ITestContext;