@xterm/xterm 5.4.0-beta.3 → 5.4.0-beta.30

package/src/browser/Terminal.ts

@@ -23,10 +23,10 @@
 
 import { copyHandler, handlePasteEvent, moveTextAreaUnderMouseCursor, paste, rightClickHandler } from 'browser/Clipboard';
 import { addDisposableDomListener } from 'browser/Lifecycle';
-import { Linkifier2 } from 'browser/Linkifier2';
+import { Linkifier } from './Linkifier';
 import * as Strings from 'browser/LocalizableStrings';
 import { OscLinkProvider } from 'browser/OscLinkProvider';
-import { CharacterJoinerHandler, CustomKeyEventHandler, IBrowser, IBufferRange, ICompositionHelper, ILinkifier2, ITerminal, IViewport } from 'browser/Types';
+import { CharacterJoinerHandler, CustomKeyEventHandler, CustomWheelEventHandler, IBrowser, IBufferRange, ICompositionHelper, ILinkifier2, ITerminal, IViewport } from 'browser/Types';
 import { Viewport } from 'browser/Viewport';
 import { BufferDecorationRenderer } from 'browser/decorations/BufferDecorationRenderer';
 import { OverviewRulerRenderer } from 'browser/decorations/OverviewRulerRenderer';
@@ -39,9 +39,9 @@ import { CoreBrowserService } from 'browser/services/CoreBrowserService';
 import { MouseService } from 'browser/services/MouseService';
 import { RenderService } from 'browser/services/RenderService';
 import { SelectionService } from 'browser/services/SelectionService';
-import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IMouseService, IRenderService, ISelectionService, IThemeService } from 'browser/services/Services';
+import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, ILinkProviderService, IMouseService, IRenderService, ISelectionService, IThemeService } from 'browser/services/Services';
 import { ThemeService } from 'browser/services/ThemeService';
-import { color, rgba } from 'common/Color';
+import { channels, color } from 'common/Color';
 import { CoreTerminal } from 'common/CoreTerminal';
 import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { MutableDisposable, toDisposable } from 'common/Lifecycle';
@@ -57,6 +57,7 @@ import { IDecorationService } from 'common/services/Services';
 import { IDecoration, IDecorationOptions, IDisposable, ILinkProvider, IMarker } from '@xterm/xterm';
 import { WindowsOptionsReportType } from '../common/InputHandler';
 import { AccessibilityManager } from './AccessibilityManager';
+import { LinkProviderService } from 'browser/services/LinkProviderService';
 
 export class Terminal extends CoreTerminal implements ITerminal {
   public textarea: HTMLTextAreaElement | undefined;
@@ -69,14 +70,19 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _helperContainer: HTMLElement | undefined;
   private _compositionView: HTMLElement | undefined;
 
+  public linkifier: ILinkifier2 | undefined;
   private _overviewRulerRenderer: OverviewRulerRenderer | undefined;
 
   public browser: IBrowser = Browser as any;
 
   private _customKeyEventHandler: CustomKeyEventHandler | undefined;
+  private _customWheelEventHandler: CustomWheelEventHandler | undefined;
 
-  // browser services
+  // Browser services
   private _decorationService: DecorationService;
+  private _linkProviderService: ILinkProviderService;
+
+  // Optional browser services
   private _charSizeService: ICharSizeService | undefined;
   private _coreBrowserService: ICoreBrowserService | undefined;
   private _mouseService: IMouseService | undefined;
@@ -112,7 +118,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
    */
   private _unprocessedDeadKey: boolean = false;
 
-  public linkifier2: ILinkifier2;
   public viewport: IViewport | undefined;
   private _compositionHelper: ICompositionHelper | undefined;
   private _accessibilityManager: MutableDisposable<AccessibilityManager> = this.register(new MutableDisposable());
@@ -148,10 +153,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this._setup();
 
-    this.linkifier2 = this.register(this._instantiationService.createInstance(Linkifier2));
-    this.linkifier2.registerLinkProvider(this._instantiationService.createInstance(OscLinkProvider));
     this._decorationService = this._instantiationService.createInstance(DecorationService);
     this._instantiationService.setService(IDecorationService, this._decorationService);
+    this._linkProviderService = this._instantiationService.createInstance(LinkProviderService);
+    this._instantiationService.setService(ILinkProviderService, this._linkProviderService);
+    this._linkProviderService.registerLinkProvider(this._instantiationService.createInstance(OscLinkProvider));
 
     // Setup InputHandler listeners
     this.register(this._inputHandler.onRequestBell(() => this._onBell.fire()));
@@ -205,17 +211,17 @@ export class Terminal extends CoreTerminal implements ITerminal {
       }
       switch (req.type) {
         case ColorRequestType.REPORT:
-          const channels = color.toColorRGB(acc === 'ansi'
+          const colorRgb = color.toColorRGB(acc === 'ansi'
             ? this._themeService.colors.ansi[req.index]
             : this._themeService.colors[acc]);
-          this.coreService.triggerDataEvent(`${C0.ESC}]${ident};${toRgbString(channels)}${C1_ESCAPED.ST}`);
+          this.coreService.triggerDataEvent(`${C0.ESC}]${ident};${toRgbString(colorRgb)}${C1_ESCAPED.ST}`);
           break;
         case ColorRequestType.SET:
           if (acc === 'ansi') {
-            this._themeService.modifyColors(colors => colors.ansi[req.index] = rgba.toColor(...req.color));
+            this._themeService.modifyColors(colors => colors.ansi[req.index] = channels.toColor(...req.color));
           } else {
             const narrowedAcc = acc;
-            this._themeService.modifyColors(colors => colors[narrowedAcc] = rgba.toColor(...req.color));
+            this._themeService.modifyColors(colors => colors[narrowedAcc] = channels.toColor(...req.color));
           }
           break;
         case ColorRequestType.RESTORE:
@@ -260,11 +266,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
   /**
    * Binds the desired focus behavior on a given terminal object.
    */
-  private _handleTextAreaFocus(ev: KeyboardEvent): void {
+  private _handleTextAreaFocus(ev: FocusEvent): void {
     if (this.coreService.decPrivateModes.sendFocus) {
       this.coreService.triggerDataEvent(C0.ESC + '[I');
     }
-    this.updateCursorStyle(ev);
     this.element!.classList.add('focus');
     this._showCursor();
     this._onFocus.fire();
@@ -428,6 +433,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this.screenElement = this._document.createElement('div');
     this.screenElement.classList.add('xterm-screen');
+    this.register(addDisposableDomListener(this.screenElement, 'mousemove', (ev: MouseEvent) => this.updateCursorStyle(ev)));
     // Create the container that will hold helpers like the textarea for
     // capturing DOM Events. Then produce the helpers.
     this._helperContainer = this._document.createElement('div');
@@ -458,11 +464,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
     ));
     this._instantiationService.setService(ICoreBrowserService, this._coreBrowserService);
 
-    this.register(addDisposableDomListener(this.textarea, 'focus', (ev: KeyboardEvent) => this._handleTextAreaFocus(ev)));
+    this.register(addDisposableDomListener(this.textarea, 'focus', (ev: FocusEvent) => this._handleTextAreaFocus(ev)));
     this.register(addDisposableDomListener(this.textarea, 'blur', () => this._handleTextAreaBlur()));
     this._helperContainer.appendChild(this.textarea);
 
-
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
     this._instantiationService.setService(ICharSizeService, this._charSizeService);
 
@@ -482,6 +487,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._compositionHelper = this._instantiationService.createInstance(CompositionHelper, this.textarea, this._compositionView);
     this._helperContainer.appendChild(this._compositionView);
 
+    this._mouseService = this._instantiationService.createInstance(MouseService);
+    this._instantiationService.setService(IMouseService, this._mouseService);
+
+    this.linkifier = this.register(this._instantiationService.createInstance(Linkifier, this.screenElement));
+
     // Performance: Add viewport and helper elements from the fragment
     this.element.appendChild(fragment);
 
@@ -493,9 +503,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this._renderService.setRenderer(this._createRenderer());
     }
 
-    this._mouseService = this._instantiationService.createInstance(MouseService);
-    this._instantiationService.setService(IMouseService, this._mouseService);
-
     this.viewport = this._instantiationService.createInstance(Viewport, this._viewportElement, this._viewportScrollArea);
     this.viewport.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent, ScrollSource.VIEWPORT)),
     this.register(this._inputHandler.onRequestSyncScrollBar(() => this.viewport!.syncScrollArea()));
@@ -513,7 +520,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._selectionService = this.register(this._instantiationService.createInstance(SelectionService,
       this.element,
       this.screenElement,
-      this.linkifier2
+      this.linkifier
     ));
     this._instantiationService.setService(ISelectionService, this._selectionService);
     this.register(this._selectionService.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent)));
@@ -533,7 +540,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }));
     this.register(addDisposableDomListener(this._viewportElement, 'scroll', () => this._selectionService!.refresh()));
 
-    this.linkifier2.attachToDom(this.screenElement, this._mouseService, this._renderService);
     this.register(this._instantiationService.createInstance(BufferDecorationRenderer, this.screenElement));
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.handleMouseDown(e)));
 
@@ -575,7 +581,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   private _createRenderer(): IRenderer {
-    return this._instantiationService.createInstance(DomRenderer, this._document!, this.element!, this.screenElement!, this._viewportElement!, this._helperContainer!, this.linkifier2);
+    return this._instantiationService.createInstance(DomRenderer, this, this._document!, this.element!, this.screenElement!, this._viewportElement!, this._helperContainer!, this.linkifier!);
   }
 
   /**
@@ -633,6 +639,9 @@ export class Terminal extends CoreTerminal implements ITerminal {
           but = ev.button < 3 ? ev.button : CoreMouseButton.NONE;
           break;
         case 'wheel':
+          if (self._customWheelEventHandler && self._customWheelEventHandler(ev as WheelEvent) === false) {
+            return false;
+          }
           const amount = self.viewport!.getLinesScrolled(ev as WheelEvent);
 
           if (amount === 0) {
@@ -792,6 +801,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
       // do nothing, if app side handles wheel itself
       if (requestedEvents.wheel) return;
 
+      if (this._customWheelEventHandler && this._customWheelEventHandler(ev) === false) {
+        return false;
+      }
+
       if (!this.buffer.hasScrollback) {
         // Convert wheel events into up/down events when the buffer does not have scrollback, this
         // enables scrolling in apps hosted in the alt buffer such as vim or tmux.
@@ -847,7 +860,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   /**
    * Change the cursor style for different selection modes
    */
-  public updateCursorStyle(ev: KeyboardEvent): void {
+  public updateCursorStyle(ev: KeyboardEvent | MouseEvent): void {
     if (this._selectionService?.shouldColumnSelect(ev)) {
       this.element!.classList.add('column-select');
     } else {
@@ -878,21 +891,16 @@ export class Terminal extends CoreTerminal implements ITerminal {
     paste(data, this.textarea!, this.coreService, this.optionsService);
   }
 
-  /**
-   * Attaches a custom key event handler which is run before keys are processed,
-   * giving consumers of xterm.js ultimate control as to what keys should be
-   * processed by the terminal and what keys should not.
-   * @param customKeyEventHandler The custom KeyboardEvent handler to attach.
-   * This is a function that takes a KeyboardEvent, allowing consumers to stop
-   * propagation and/or prevent the default action. The function returns whether
-   * the event should be processed by xterm.js.
-   */
   public attachCustomKeyEventHandler(customKeyEventHandler: CustomKeyEventHandler): void {
     this._customKeyEventHandler = customKeyEventHandler;
   }
 
+  public attachCustomWheelEventHandler(customWheelEventHandler: CustomWheelEventHandler): void {
+    this._customWheelEventHandler = customWheelEventHandler;
+  }
+
   public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
-    return this.linkifier2.registerLinkProvider(linkProvider);
+    return this._linkProviderService.registerLinkProvider(linkProvider);
   }
 
   public registerCharacterJoiner(handler: CharacterJoinerHandler): number {

package/src/browser/Types.d.ts

@@ -7,7 +7,6 @@ import { IEvent } from 'common/EventEmitter';
 import { CharData, IColor, ICoreTerminal, ITerminalOptions } from 'common/Types';
 import { IBuffer } from 'common/buffer/Types';
 import { IDisposable, Terminal as ITerminalApi } from '@xterm/xterm';
-import { IMouseService, IRenderService } from './services/Services';
 
 /**
  * A portion of the public API that are implemented identially internally and simply passed through.
@@ -18,9 +17,9 @@ export interface ITerminal extends InternalPassthroughApis, ICoreTerminal {
   screenElement: HTMLElement | undefined;
   browser: IBrowser;
   buffer: IBuffer;
+  linkifier: ILinkifier2 | undefined;
   viewport: IViewport | undefined;
   options: Required<ITerminalOptions>;
-  linkifier2: ILinkifier2;
 
   onBlur: IEvent<void>;
   onFocus: IEvent<void>;
@@ -32,6 +31,7 @@ export interface ITerminal extends InternalPassthroughApis, ICoreTerminal {
 }
 
 export type CustomKeyEventHandler = (event: KeyboardEvent) => boolean;
+export type CustomWheelEventHandler = (event: WheelEvent) => boolean;
 
 export type LineData = CharData[];
 
@@ -127,13 +127,6 @@ export interface ILinkifier2 extends IDisposable {
   onShowLinkUnderline: IEvent<ILinkifierEvent>;
   onHideLinkUnderline: IEvent<ILinkifierEvent>;
   readonly currentLink: ILinkWithState | undefined;
-
-  attachToDom(element: HTMLElement, mouseService: IMouseService, renderService: IRenderService): void;
-  registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
-}
-
-interface ILinkProvider {
-  provideLinks(y: number, callback: (links: ILink[] | undefined) => void): void;
 }
 
 interface ILink {

package/src/browser/public/Terminal.ts

@@ -148,6 +148,9 @@ export class Terminal extends Disposable implements ITerminalApi {
   public attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void {
     this._core.attachCustomKeyEventHandler(customKeyEventHandler);
   }
+  public attachCustomWheelEventHandler(customWheelEventHandler: (event: WheelEvent) => boolean): void {
+    this._core.attachCustomWheelEventHandler(customWheelEventHandler);
+  }
   public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
     return this._core.registerLinkProvider(linkProvider);
   }

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

@@ -7,9 +7,10 @@ import { DomRendererRowFactory, RowCss } from 'browser/renderer/dom/DomRendererR
 import { WidthCache } from 'browser/renderer/dom/WidthCache';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
-import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
+import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent, ISelectionRenderModel } from 'browser/renderer/shared/Types';
 import { ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { ILinkifier2, ILinkifierEvent, ReadonlyColorSet } from 'browser/Types';
+import { ILinkifier2, ILinkifierEvent, ITerminal, ReadonlyColorSet } from 'browser/Types';
 import { color } from 'common/Color';
 import { EventEmitter } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
@@ -25,7 +26,6 @@ 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
@@ -41,12 +41,14 @@ export class DomRenderer extends Disposable implements IRenderer {
   private _rowElements: HTMLElement[] = [];
   private _selectionContainer: HTMLElement;
   private _widthCache: WidthCache;
+  private _selectionRenderModel: ISelectionRenderModel = createSelectionRenderModel();
 
   public dimensions: IRenderDimensions;
 
   public readonly onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>()).event;
 
   constructor(
+    private readonly _terminal: ITerminal,
     private readonly _document: Document,
     private readonly _element: HTMLElement,
     private readonly _screenElement: HTMLElement,
@@ -291,6 +293,7 @@ export class DomRenderer extends Disposable implements IRenderer {
   public handleResize(cols: number, rows: number): void {
     this._refreshRowElements(cols, rows);
     this._updateDimensions();
+    this.handleSelectionChanged(this._selectionRenderModel.selectionStart, this._selectionRenderModel.selectionEnd, this._selectionRenderModel.columnSelectMode);
   }
 
   public handleCharSizeChanged(): void {
@@ -320,11 +323,13 @@ export class DomRenderer extends Disposable implements IRenderer {
       return;
     }
 
+    this._selectionRenderModel.update(this._terminal, start, end, columnSelectMode);
+
     // Translate from buffer position to viewport position
-    const viewportStartRow = start[1] - this._bufferService.buffer.ydisp;
-    const viewportEndRow = end[1] - this._bufferService.buffer.ydisp;
-    const viewportCappedStartRow = Math.max(viewportStartRow, 0);
-    const viewportCappedEndRow = Math.min(viewportEndRow, this._bufferService.rows - 1);
+    const viewportStartRow = this._selectionRenderModel.viewportStartRow;
+    const viewportEndRow = this._selectionRenderModel.viewportEndRow;
+    const viewportCappedStartRow = this._selectionRenderModel.viewportCappedStartRow;
+    const viewportCappedEndRow = this._selectionRenderModel.viewportCappedEndRow;
 
     // No need to draw the selection
     if (viewportCappedStartRow >= this._bufferService.rows || viewportCappedEndRow < 0) {
@@ -365,10 +370,16 @@ export class DomRenderer extends Disposable implements IRenderer {
    */
   private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement {
     const element = this._document.createElement('div');
+    const left = colStart * this.dimensions.css.cell.width;
+    let width = this.dimensions.css.cell.width * (colEnd - colStart);
+    if (left + width > this.dimensions.css.canvas.width) {
+      width = this.dimensions.css.canvas.width - left;
+    }
+
     element.style.height = `${rowCount * this.dimensions.css.cell.height}px`;
     element.style.top = `${row * this.dimensions.css.cell.height}px`;
-    element.style.left = `${colStart * this.dimensions.css.cell.width}px`;
-    element.style.width = `${this.dimensions.css.cell.width * (colEnd - colStart)}px`;
+    element.style.left = `${left}px`;
+    element.style.width = `${width}px`;
     return element;
   }
 

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

@@ -8,10 +8,10 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
 import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { color, rgba } from 'common/Color';
+import { channels, color } from 'common/Color';
 import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
-import { excludeFromContrastRatioDemands } from 'browser/renderer/shared/RendererUtils';
+import { treatGlyphAsBackgroundColor } from 'browser/renderer/shared/RendererUtils';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { WidthCache } from 'browser/renderer/dom/WidthCache';
 import { IColorContrastCache } from 'browser/Types';
@@ -376,7 +376,7 @@ export class DomRendererRowFactory {
           classes.push(`xterm-bg-${bg}`);
           break;
         case Attributes.CM_RGB:
-          resolvedBg = rgba.toColor(bg >> 16, bg >> 8 & 0xFF, bg & 0xFF);
+          resolvedBg = channels.toColor(bg >> 16, bg >> 8 & 0xFF, bg & 0xFF);
           this._addStyle(charElement, `background-color:#${padStart((bg >>> 0).toString(16), '0', 6)}`);
           break;
         case Attributes.CM_DEFAULT:
@@ -408,7 +408,7 @@ export class DomRendererRowFactory {
           }
           break;
         case Attributes.CM_RGB:
-          const color = rgba.toColor(
+          const color = channels.toColor(
             (fg >> 16) & 0xFF,
             (fg >>  8) & 0xFF,
             (fg      ) & 0xFF
@@ -458,7 +458,7 @@ export class DomRendererRowFactory {
   }
 
   private _applyMinimumContrast(element: HTMLElement, bg: IColor, fg: IColor, cell: ICellData, bgOverride: IColor | undefined, fgOverride: IColor | undefined): boolean {
-    if (this._optionsService.rawOptions.minimumContrastRatio === 1 || excludeFromContrastRatioDemands(cell.getCode())) {
+    if (this._optionsService.rawOptions.minimumContrastRatio === 1 || treatGlyphAsBackgroundColor(cell.getCode())) {
       return false;
     }
 

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

@@ -1,10 +1,12 @@
 import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { ReadonlyColorSet } from 'browser/Types';
-import { Attributes, BgFlags, FgFlags } from 'common/buffer/Constants';
-import { IDecorationService } from 'common/services/Services';
+import { Attributes, BgFlags, ExtFlags, FgFlags, NULL_CELL_CODE, UnderlineStyle } from 'common/buffer/Constants';
+import { IDecorationService, IOptionsService } from 'common/services/Services';
 import { ICellData } from 'common/Types';
 import { Terminal } from '@xterm/xterm';
+import { rgba } from 'common/Color';
+import { treatGlyphAsBackgroundColor } from 'browser/renderer/shared/RendererUtils';
 
 // Work variables to avoid garbage collection
 let $fg = 0;
@@ -13,6 +15,7 @@ let $hasFg = false;
 let $hasBg = false;
 let $isSelected = false;
 let $colors: ReadonlyColorSet | undefined;
+let $variantOffset = 0;
 
 export class CellColorResolver {
   /**
@@ -27,6 +30,7 @@ export class CellColorResolver {
 
   constructor(
     private readonly _terminal: Terminal,
+    private readonly _optionService: IOptionsService,
     private readonly _selectionRenderModel: ISelectionRenderModel,
     private readonly _decorationService: IDecorationService,
     private readonly _coreBrowserService: ICoreBrowserService,
@@ -38,7 +42,7 @@ export class CellColorResolver {
    * Resolves colors for the cell, putting the result into the shared {@link result}. This resolves
    * overrides, inverse and selection for the cell which can then be used to feed into the renderer.
    */
-  public resolve(cell: ICellData, x: number, y: number): void {
+  public resolve(cell: ICellData, x: number, y: number, deviceCellWidth: number): void {
     this.result.bg = cell.bg;
     this.result.fg = cell.fg;
     this.result.ext = cell.bg & BgFlags.HAS_EXTENDED ? cell.extended.ext : 0;
@@ -52,15 +56,22 @@ export class CellColorResolver {
     $hasFg = false;
     $isSelected = false;
     $colors = this._themeService.colors;
+    $variantOffset = 0;
+
+    const code = cell.getCode();
+    if (code !== NULL_CELL_CODE && cell.extended.underlineStyle === UnderlineStyle.DOTTED) {
+      const lineWidth = Math.max(1, Math.floor(this._optionService.rawOptions.fontSize * this._coreBrowserService.dpr / 15));
+      $variantOffset = x * deviceCellWidth % (Math.round(lineWidth) * 2);
+    }
 
     // Apply decorations on the bottom layer
     this._decorationService.forEachDecorationAtCell(x, y, 'bottom', d => {
       if (d.backgroundColorRGB) {
-        $bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $bg = d.backgroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
         $hasBg = true;
       }
       if (d.foregroundColorRGB) {
-        $fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $fg = d.foregroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
         $hasFg = true;
       }
     });
@@ -68,10 +79,94 @@ export class CellColorResolver {
     // Apply the selection color if needed
     $isSelected = this._selectionRenderModel.isCellSelected(this._terminal, x, y);
     if ($isSelected) {
-      $bg = (this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba >> 8 & 0xFFFFFF;
+      // If the cell has a bg color, retain the color by blending it with the selection color
+      if (
+        (this.result.fg & FgFlags.INVERSE) ||
+        (this.result.bg & Attributes.CM_MASK) !== Attributes.CM_DEFAULT
+      ) {
+        // Resolve the standard bg color
+        if (this.result.fg & FgFlags.INVERSE) {
+          switch (this.result.fg & Attributes.CM_MASK) {
+            case Attributes.CM_P16:
+            case Attributes.CM_P256:
+              $bg = this._themeService.colors.ansi[this.result.fg & Attributes.PCOLOR_MASK].rgba;
+              break;
+            case Attributes.CM_RGB:
+              $bg = ((this.result.fg & Attributes.RGB_MASK) << 8) | 0xFF;
+              break;
+            case Attributes.CM_DEFAULT:
+            default:
+              $bg = this._themeService.colors.foreground.rgba;
+          }
+        } else {
+          switch (this.result.bg & Attributes.CM_MASK) {
+            case Attributes.CM_P16:
+            case Attributes.CM_P256:
+              $bg = this._themeService.colors.ansi[this.result.bg & Attributes.PCOLOR_MASK].rgba;
+              break;
+            case Attributes.CM_RGB:
+              $bg = ((this.result.bg & Attributes.RGB_MASK) << 8) | 0xFF;
+              break;
+            // No need to consider default bg color here as it's not possible
+          }
+        }
+        // Blend with selection bg color
+        $bg = rgba.blend(
+          $bg,
+          ((this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba & 0xFFFFFF00) | 0x80
+        ) >> 8 & Attributes.RGB_MASK;
+      } else {
+        $bg = (this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba >> 8 & Attributes.RGB_MASK;
+      }
       $hasBg = true;
+
+      // Apply explicit selection foreground if present
       if ($colors.selectionForeground) {
-        $fg = $colors.selectionForeground.rgba >> 8 & 0xFFFFFF;
+        $fg = $colors.selectionForeground.rgba >> 8 & Attributes.RGB_MASK;
+        $hasFg = true;
+      }
+
+      // Overwrite fg as bg if it's a special decorative glyph (eg. powerline)
+      if (treatGlyphAsBackgroundColor(cell.getCode())) {
+        // Inverse default background should be treated as transparent
+        if (
+          (this.result.fg & FgFlags.INVERSE) &&
+          (this.result.bg & Attributes.CM_MASK) === Attributes.CM_DEFAULT
+        ) {
+          $fg = (this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba >> 8 & Attributes.RGB_MASK;
+        } else {
+
+          if (this.result.fg & FgFlags.INVERSE) {
+            switch (this.result.bg & Attributes.CM_MASK) {
+              case Attributes.CM_P16:
+              case Attributes.CM_P256:
+                $fg = this._themeService.colors.ansi[this.result.bg & Attributes.PCOLOR_MASK].rgba;
+                break;
+              case Attributes.CM_RGB:
+                $fg = ((this.result.bg & Attributes.RGB_MASK) << 8) | 0xFF;
+                break;
+              // No need to consider default bg color here as it's not possible
+            }
+          } else {
+            switch (this.result.fg & Attributes.CM_MASK) {
+              case Attributes.CM_P16:
+              case Attributes.CM_P256:
+                $fg = this._themeService.colors.ansi[this.result.fg & Attributes.PCOLOR_MASK].rgba;
+                break;
+              case Attributes.CM_RGB:
+                $fg = ((this.result.fg & Attributes.RGB_MASK) << 8) | 0xFF;
+                break;
+              case Attributes.CM_DEFAULT:
+              default:
+                $fg = this._themeService.colors.foreground.rgba;
+            }
+          }
+
+          $fg = rgba.blend(
+            $fg,
+            ((this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba & 0xFFFFFF00) | 0x80
+          ) >> 8 & Attributes.RGB_MASK;
+        }
         $hasFg = true;
       }
     }
@@ -79,11 +174,11 @@ export class CellColorResolver {
     // Apply decorations on the top layer
     this._decorationService.forEachDecorationAtCell(x, y, 'top', d => {
       if (d.backgroundColorRGB) {
-        $bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $bg = d.backgroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
         $hasBg = true;
       }
       if (d.foregroundColorRGB) {
-        $fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $fg = d.foregroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
         $hasFg = true;
       }
     });
@@ -110,7 +205,7 @@ export class CellColorResolver {
       if ($hasBg && !$hasFg) {
         // Resolve bg color type (default color has a different meaning in fg vs bg)
         if ((this.result.bg & Attributes.CM_MASK) === Attributes.CM_DEFAULT) {
-          $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | (($colors.background.rgba >> 8 & 0xFFFFFF) & Attributes.RGB_MASK) | Attributes.CM_RGB;
+          $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | (($colors.background.rgba >> 8 & Attributes.RGB_MASK) & Attributes.RGB_MASK) | Attributes.CM_RGB;
         } else {
           $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | this.result.bg & (Attributes.RGB_MASK | Attributes.CM_MASK);
         }
@@ -119,7 +214,7 @@ export class CellColorResolver {
       if (!$hasBg && $hasFg) {
         // Resolve bg color type (default color has a different meaning in fg vs bg)
         if ((this.result.fg & Attributes.CM_MASK) === Attributes.CM_DEFAULT) {
-          $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | (($colors.foreground.rgba >> 8 & 0xFFFFFF) & Attributes.RGB_MASK) | Attributes.CM_RGB;
+          $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | (($colors.foreground.rgba >> 8 & Attributes.RGB_MASK) & Attributes.RGB_MASK) | Attributes.CM_RGB;
         } else {
           $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | this.result.fg & (Attributes.RGB_MASK | Attributes.CM_MASK);
         }
@@ -133,5 +228,9 @@ export class CellColorResolver {
     // Use the override if it exists
     this.result.bg = $hasBg ? $bg : this.result.bg;
     this.result.fg = $hasFg ? $fg : this.result.fg;
+
+    // Reset overrides variantOffset
+    this.result.ext &= ~ExtFlags.VARIANT_OFFSET;
+    this.result.ext |= ($variantOffset << 29) & ExtFlags.VARIANT_OFFSET;
   }
 }

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

@@ -27,7 +27,7 @@ function isBoxOrBlockGlyph(codepoint: number): boolean {
   return 0x2500 <= codepoint && codepoint <= 0x259F;
 }
 
-export function excludeFromContrastRatioDemands(codepoint: number): boolean {
+export function treatGlyphAsBackgroundColor(codepoint: number): boolean {
   return isPowerlineGlyph(codepoint) || isBoxOrBlockGlyph(codepoint);
 }
 
@@ -56,3 +56,7 @@ function createDimension(): IDimensions {
     height: 0
   };
 }
+
+export function computeNextVariantOffset(cellWidth: number, lineWidth: number, currentOffset: number = 0): number {
+  return (cellWidth - (Math.round(lineWidth) * 2 - currentOffset)) % (Math.round(lineWidth) * 2);
+}

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

@@ -3,6 +3,7 @@
  * @license MIT
  */
 
+import { ITerminal } from 'browser/Types';
 import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
 import { Terminal } from '@xterm/xterm';
 
@@ -35,7 +36,7 @@ class SelectionRenderModel implements ISelectionRenderModel {
     this.selectionEnd = undefined;
   }
 
-  public update(terminal: Terminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
+  public update(terminal: ITerminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
     this.selectionStart = start;
     this.selectionEnd = end;
     // Selection does not exist
@@ -45,8 +46,9 @@ class SelectionRenderModel implements ISelectionRenderModel {
     }
 
     // Translate from buffer position to viewport position
-    const viewportStartRow = start[1] - terminal.buffer.active.viewportY;
-    const viewportEndRow = end[1] - terminal.buffer.active.viewportY;
+    const viewportY = terminal.buffers.active.ydisp;
+    const viewportStartRow = start[1] - viewportY;
+    const viewportEndRow = end[1] - viewportY;
     const viewportCappedStartRow = Math.max(viewportStartRow, 0);
     const viewportCappedEndRow = Math.min(viewportEndRow, terminal.rows - 1);