Merge branch 'master' into 2586_dom_renderer

src/browser/Linkifier2.ts

@@ -0,0 +1,243 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ILinkifier2, ILinkProvider, IBufferCellPosition, ILink, ILinkifierEvent } from './Types';
+import { IDisposable } from 'common/Types';
+import { IMouseService, IRenderService } from './services/Services';
+import { IBufferService, ICoreService } from 'common/services/Services';
+import { EventEmitter, IEvent } from 'common/EventEmitter';
+
+export class Linkifier2 implements ILinkifier2 {
+  private _element: HTMLElement | undefined;
+  private _mouseService: IMouseService | undefined;
+  private _renderService: IRenderService | undefined;
+  private _linkProviders: ILinkProvider[] = [];
+  private _currentLink: ILink | undefined;
+  private _lastMouseEvent: MouseEvent | undefined;
+  private _linkCacheDisposables: IDisposable[] = [];
+  private _lastBufferCell: IBufferCellPosition | undefined;
+
+  private _onLinkHover = new EventEmitter<ILinkifierEvent>();
+  public get onLinkHover(): IEvent<ILinkifierEvent> { return this._onLinkHover.event; }
+  private _onLinkLeave = new EventEmitter<ILinkifierEvent>();
+  public get onLinkLeave(): IEvent<ILinkifierEvent> { return this._onLinkLeave.event; }
+
+  constructor(
+    private readonly _bufferService: IBufferService
+  ) {
+
+  }
+
+  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    this._linkProviders.push(linkProvider);
+    return {
+      dispose: () => {
+        // Remove the link provider from the list
+        const providerIndex = this._linkProviders.indexOf(linkProvider);
+
+        if (providerIndex !== -1) {
+          this._linkProviders.splice(providerIndex, 1);
+        }
+      }
+    };
+  }
+
+  public attachToDom(element: HTMLElement, mouseService: IMouseService, renderService: IRenderService): void {
+    this._element = element;
+    this._mouseService = mouseService;
+    this._renderService = renderService;
+
+    this._element.addEventListener('mousemove', this._onMouseMove.bind(this));
+    this._element.addEventListener('click', this._onMouseDown.bind(this));
+  }
+
+  private _onMouseMove(event: MouseEvent): void {
+    this._lastMouseEvent = event;
+
+    if (!this._element || !this._mouseService) {
+      return;
+    }
+
+    const position = this._positionFromMouseEvent(event, this._element, this._mouseService);
+
+    if (!position) {
+      return;
+    }
+
+    if (!this._lastBufferCell || (position.x !== this._lastBufferCell.x || position.y !== this._lastBufferCell.y)) {
+      this._onHover(position);
+      this._lastBufferCell = position;
+    }
+  }
+
+  private _onHover(position: IBufferCellPosition): void {
+    if (this._currentLink) {
+      // Check the if the link is in the mouse position
+      const isInPosition = this._linkAtPosition(this._currentLink, position);
+
+      // Check if we need to clear the link
+      if (!isInPosition) {
+        this._clearCurrentLink();
+        this._askForLink(position);
+      }
+    } else {
+      this._askForLink(position);
+    }
+  }
+
+  private _askForLink(position: IBufferCellPosition): void {
+    const providerReplies: Map<Number, ILink | undefined> = new Map();
+    let linkProvided = false;
+
+    // There is no link cached, so ask for one
+    this._linkProviders.forEach((linkProvider, i) => {
+      linkProvider.provideLink(position, (link: ILink | undefined) => {
+        providerReplies.set(i, link);
+
+        // Check if every provider before this one has come back undefined
+        let hasLinkBefore = false;
+        for (let j = 0; j < i; j++) {
+          if (!providerReplies.has(j) || providerReplies.get(j)) {
+            hasLinkBefore = true;
+          }
+        }
+
+        // If all providers with higher priority came back undefined, then this link should be used
+        if (!hasLinkBefore && link) {
+          linkProvided = true;
+          this._handleNewLink(link);
+        }
+
+        // Check if all the providers have responded
+        if (providerReplies.size === this._linkProviders.length && !linkProvided) {
+          // Respect the order of the link providers
+          for (let j = 0; j < providerReplies.size; j++) {
+            const currentLink = providerReplies.get(j);
+            if (currentLink) {
+              this._handleNewLink(currentLink);
+              break;
+            }
+          }
+        }
+      });
+    });
+  }
+
+  private _onMouseDown(event: MouseEvent): void {
+    if (!this._element || !this._mouseService || !this._currentLink) {
+      return;
+    }
+
+    const position = this._positionFromMouseEvent(event, this._element, this._mouseService);
+
+    if (!position) {
+      return;
+    }
+
+    if (this._linkAtPosition(this._currentLink, position)) {
+      this._currentLink.activate(event, this._currentLink.text);
+    }
+  }
+
+  private _clearCurrentLink(startRow?: number, endRow?: number): void {
+    if (!this._element || !this._currentLink || !this._lastMouseEvent) {
+      return;
+    }
+
+    // If we have a start and end row, check that the link is within it
+    if (!startRow || !endRow || (this._currentLink.range.start.y >= startRow && this._currentLink.range.end.y <= endRow)) {
+      this._linkLeave(this._element, this._currentLink, this._lastMouseEvent);
+      this._currentLink = undefined;
+      this._linkCacheDisposables.forEach(l => l.dispose());
+      this._linkCacheDisposables = [];
+    }
+  }
+
+  private _handleNewLink(link: ILink): void {
+    if (!this._element || !this._lastMouseEvent || !this._mouseService) {
+      return;
+    }
+
+    const position = this._positionFromMouseEvent(this._lastMouseEvent, this._element, this._mouseService);
+
+    if (!position) {
+      return;
+    }
+
+    // Trigger hover if the we have a link at the position
+    if (this._linkAtPosition(link, position)) {
+      this._currentLink = link;
+      this._linkHover(this._element, link, this._lastMouseEvent);
+
+      // Add listener for rerendering
+      if (this._renderService) {
+        this._linkCacheDisposables.push(this._renderService.onRender(e => {
+          this._clearCurrentLink(e.start + 1 + this._bufferService.buffer.ydisp, e.end + 1 + this._bufferService.buffer.ydisp);
+        }));
+      }
+    }
+  }
+
+  private _linkHover(element: HTMLElement, link: ILink, event: MouseEvent): void {
+    const range = link.range;
+    const scrollOffset = this._bufferService.buffer.ydisp;
+
+    this._onLinkHover.fire(this._createLinkHoverEvent(range.start.x - 1, range.start.y - scrollOffset - 1, range.end.x - 1, range.end.y - scrollOffset - 1, undefined));
+    element.classList.add('xterm-cursor-pointer');
+
+    if (link.hover) {
+      link.hover(event, link.text);
+    }
+  }
+
+  private _linkLeave(element: HTMLElement, link: ILink, event: MouseEvent): void {
+    const range = link.range;
+    const scrollOffset = this._bufferService.buffer.ydisp;
+
+    this._onLinkLeave.fire(this._createLinkHoverEvent(range.start.x - 1, range.start.y - scrollOffset - 1, range.end.x - 1, range.end.y - scrollOffset - 1, undefined));
+    element.classList.remove('xterm-cursor-pointer');
+
+    if (link.leave) {
+      link.leave(event, link.text);
+    }
+  }
+
+  /**
+   * Check if the buffer position is within the link
+   * @param link
+   * @param position
+   */
+  private _linkAtPosition(link: ILink, position: IBufferCellPosition): boolean {
+    const sameLine = link.range.start.y === link.range.end.y;
+    const wrappedFromLeft = link.range.start.y < position.y;
+    const wrappedToRight = link.range.end.y > position.y;
+
+    // If the start and end have the same y, then the position must be between start and end x
+    // If not, then handle each case seperately, depending on which way it wraps
+    return ((sameLine && link.range.start.x <= position.x && link.range.end.x >= position.x) ||
+      (wrappedFromLeft && link.range.end.x >= position.x) ||
+      (wrappedToRight && link.range.start.x <= position.x) ||
+      (wrappedFromLeft && wrappedToRight)) &&
+      link.range.start.y <= position.y &&
+      link.range.end.y >= position.y;
+  }
+
+  /**
+   * Get the buffer position from a mouse event
+   * @param event
+   */
+  private _positionFromMouseEvent(event: MouseEvent, element: HTMLElement, mouseService: IMouseService): IBufferCellPosition | undefined {
+    const coords = mouseService.getCoords(event, element, this._bufferService.cols, this._bufferService.rows);
+    if (!coords) {
+      return;
+    }
+
+    return { x: coords[0], y: coords[1] + this._bufferService.buffer.ydisp };
+  }
+
+  private _createLinkHoverEvent(x1: number, y1: number, x2: number, y2: number, fg: number | undefined): ILinkifierEvent {
+    return { x1, y1, x2, y2, cols: this._bufferService.cols, fg };
+  }
+}

src/browser/Types.d.ts

@@ -5,6 +5,7 @@
 
 import { IEvent } from 'common/EventEmitter';
 import { IDisposable } from 'common/Types';
+import { IMouseService, IRenderService } from './services/Services';
 
 export interface IColorManager {
   colors: IColorSet;
@@ -105,6 +106,14 @@ export interface ILinkifier {
   deregisterLinkMatcher(matcherId: number): boolean;
 }
 
+export interface ILinkifier2 {
+  onLinkHover: IEvent<ILinkifierEvent>;
+  onLinkLeave: IEvent<ILinkifierEvent>;
+
+  attachToDom(element: HTMLElement, mouseService: IMouseService, renderService: IRenderService): void;
+  registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
+}
+
 export interface ILinkMatcherOptions {
   /**
    * The index of the link from the regex.match(text) call. This defaults to 0
@@ -155,3 +164,25 @@ export interface IMouseZone {
   leaveCallback: () => any | undefined;
   willLinkActivate: (e: MouseEvent) => boolean;
 }
+
+interface ILinkProvider {
+  provideLink(position: IBufferCellPosition, callback: (link: ILink | undefined) => void): void;
+}
+
+interface ILink {
+  range: IBufferRange;
+  text: string;
+  activate(event: MouseEvent, text: string): void;
+  hover?(event: MouseEvent, text: string): void;
+  leave?(event: MouseEvent, text: string): void;
+}
+
+interface IBufferRange {
+  start: IBufferCellPosition;
+  end: IBufferCellPosition;
+}
+
+interface IBufferCellPosition {
+  x: number;
+  y: number;
+}

src/browser/Viewport.ts

@@ -167,7 +167,7 @@ export class Viewport extends Disposable implements IViewport {
   private _bubbleScroll(ev: Event, amount: number): boolean {
     const scrollPosFromTop = this._viewportElement.scrollTop + this._lastRecordedViewportHeight;
     if ((amount < 0 && this._viewportElement.scrollTop !== 0) ||
-        (amount > 0 &&  scrollPosFromTop < this._lastRecordedBufferHeight)) {
+      (amount > 0 && scrollPosFromTop < this._lastRecordedBufferHeight)) {
       if (ev.cancelable) {
         ev.preventDefault();
       }
@@ -235,8 +235,8 @@ export class Viewport extends Disposable implements IViewport {
     const modifier = this._optionsService.options.fastScrollModifier;
     // Multiply the scroll speed when the modifier is down
     if ((modifier === 'alt' && ev.altKey) ||
-        (modifier === 'ctrl' && ev.ctrlKey) ||
-        (modifier === 'shift' && ev.shiftKey)) {
+      (modifier === 'ctrl' && ev.ctrlKey) ||
+      (modifier === 'shift' && ev.shiftKey)) {
       return amount * this._optionsService.options.fastScrollSensitivity * this._optionsService.options.scrollSensitivity;
     }
 

src/browser/renderer/LinkRenderLayer.ts

@@ -7,7 +7,7 @@ import { IRenderDimensions } from 'browser/renderer/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { is256Color } from 'browser/renderer/atlas/CharAtlasUtils';
-import { IColorSet, ILinkifierEvent, ILinkifier } from 'browser/Types';
+import { IColorSet, ILinkifierEvent, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { IBufferService, IOptionsService } from 'common/services/Services';
 
 export class LinkRenderLayer extends BaseRenderLayer {
@@ -19,12 +19,16 @@ export class LinkRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     rendererId: number,
     linkifier: ILinkifier,
+    linkifier2: ILinkifier2,
     readonly bufferService: IBufferService,
     readonly optionsService: IOptionsService
   ) {
     super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService);
     linkifier.onLinkHover(e => this._onLinkHover(e));
     linkifier.onLinkLeave(e => this._onLinkLeave(e));
+
+    linkifier2.onLinkHover(e => this._onLinkHover(e));
+    linkifier2.onLinkLeave(e => this._onLinkLeave(e));
   }
 
   public resize(dim: IRenderDimensions): void {

src/browser/renderer/Renderer.ts

@@ -10,7 +10,7 @@ import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICh
 import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
 import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry';
 import { Disposable } from 'common/Lifecycle';
-import { IColorSet, ILinkifier } from 'browser/Types';
+import { IColorSet, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
 import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services';
 import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
@@ -33,7 +33,8 @@ export class Renderer extends Disposable implements IRenderer {
   constructor(
     private _colors: IColorSet,
     private readonly _screenElement: HTMLElement,
-    private readonly _linkifier: ILinkifier,
+    readonly linkifier: ILinkifier,
+    readonly linkifier2: ILinkifier2,
     @IBufferService private readonly _bufferService: IBufferService,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IOptionsService private readonly _optionsService: IOptionsService,
@@ -47,7 +48,7 @@ export class Renderer extends Disposable implements IRenderer {
     this._renderLayers = [
       new TextRenderLayer(this._screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, this._bufferService, _optionsService),
       new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, _optionsService),
-      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, this._linkifier, this._bufferService, _optionsService),
+      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier, linkifier2, this._bufferService, _optionsService),
       new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRefreshRows, this._bufferService, _optionsService, coreService, coreBrowserService)
     ];
     this.dimensions = {

src/browser/renderer/dom/DomRenderer.ts

@@ -7,7 +7,7 @@ import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRo
 import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { Disposable } from 'common/Lifecycle';
-import { IColorSet, ILinkifierEvent, ILinkifier } from 'browser/Types';
+import { IColorSet, ILinkifierEvent, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
 import { IOptionsService, IBufferService } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
@@ -48,6 +48,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     private readonly _screenElement: HTMLElement,
     private readonly _viewportElement: HTMLElement,
     private readonly _linkifier: ILinkifier,
+    private readonly _linkifier2: ILinkifier2,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IOptionsService private readonly _optionsService: IOptionsService,
     @IBufferService private readonly _bufferService: IBufferService
@@ -88,6 +89,9 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     this._linkifier.onLinkHover(e => this._onLinkHover(e));
     this._linkifier.onLinkLeave(e => this._onLinkLeave(e));
+
+    this._linkifier2.onLinkHover(e => this._onLinkHover(e));
+    this._linkifier2.onLinkLeave(e => this._onLinkLeave(e));
   }
 
   public dispose(): void {
@@ -127,12 +131,12 @@ export class DomRenderer extends Disposable implements IRenderer {
     }
 
     const styles =
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
-        ` display: inline-block;` +
-        ` height: 100%;` +
-        ` vertical-align: top;` +
-        ` width: ${this.dimensions.actualCellWidth}px` +
-        `}`;
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
+      ` display: inline-block;` +
+      ` height: 100%;` +
+      ` vertical-align: top;` +
+      ` width: ${this.dimensions.actualCellWidth}px` +
+      `}`;
 
     this._dimensionsStyleElement.innerHTML = styles;
 
@@ -154,84 +158,84 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     // Base CSS
     let styles =
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
-        ` color: ${this._colors.foreground.css};` +
-        ` font-family: ${this._optionsService.options.fontFamily};` +
-        ` font-size: ${this._optionsService.options.fontSize}px;` +
-        `}`;
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+      ` color: ${this._colors.foreground.css};` +
+      ` font-family: ${this._optionsService.options.fontFamily};` +
+      ` font-size: ${this._optionsService.options.fontSize}px;` +
+      `}`;
     // Text styles
     styles +=
-        `${this._terminalSelector} span:not(.${BOLD_CLASS}) {` +
-        ` font-weight: ${this._optionsService.options.fontWeight};` +
-        `}` +
-        `${this._terminalSelector} span.${BOLD_CLASS} {` +
-        ` font-weight: ${this._optionsService.options.fontWeightBold};` +
-        `}` +
-        `${this._terminalSelector} span.${ITALIC_CLASS} {` +
-        ` font-style: italic;` +
-        `}`;
+      `${this._terminalSelector} span:not(.${BOLD_CLASS}) {` +
+      ` font-weight: ${this._optionsService.options.fontWeight};` +
+      `}` +
+      `${this._terminalSelector} span.${BOLD_CLASS} {` +
+      ` font-weight: ${this._optionsService.options.fontWeightBold};` +
+      `}` +
+      `${this._terminalSelector} span.${ITALIC_CLASS} {` +
+      ` font-style: italic;` +
+      `}`;
     // Blink animation
     styles +=
-        `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
-        ` 50% {` +
-        `  box-shadow: none;` +
-        ` }` +
-        `}`;
+      `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
     styles +=
-        `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
-        ` 0% {` +
-        `  background-color: ${this._colors.cursor.css};` +
-        `  color: ${this._colors.cursorAccent.css};` +
-        ` }` +
-        ` 50% {` +
-        `  background-color: ${this._colors.cursorAccent.css};` +
-        `  color: ${this._colors.cursor.css};` +
-        ` }` +
-        `}`;
+      `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
+      ` 0% {` +
+      `  background-color: ${this._colors.cursor.css};` +
+      `  color: ${this._colors.cursorAccent.css};` +
+      ` }` +
+      ` 50% {` +
+      `  background-color: ${this._colors.cursorAccent.css};` +
+      `  color: ${this._colors.cursor.css};` +
+      ` }` +
+      `}`;
     // Cursor
     styles +=
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
-        ` outline: 1px solid ${this._colors.cursor.css};` +
-        ` outline-offset: -1px;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}:not(.${CURSOR_STYLE_BLOCK_CLASS}) {` +
-        ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
-        ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
-        ` background-color: ${this._colors.cursor.css};` +
-        ` color: ${this._colors.cursorAccent.css};` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BAR_CLASS} {` +
-        ` box-shadow: ${this._optionsService.options.cursorWidth}px 0 0 ${this._colors.cursor.css} inset;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` +
-        ` box-shadow: 0 -1px 0 ${this._colors.cursor.css} inset;` +
-        `}`;
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` outline: 1px solid ${this._colors.cursor.css};` +
+      ` outline-offset: -1px;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}:not(.${CURSOR_STYLE_BLOCK_CLASS}) {` +
+      ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` background-color: ${this._colors.cursor.css};` +
+      ` color: ${this._colors.cursorAccent.css};` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BAR_CLASS} {` +
+      ` box-shadow: ${this._optionsService.options.cursorWidth}px 0 0 ${this._colors.cursor.css} inset;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      ` box-shadow: 0 -1px 0 ${this._colors.cursor.css} inset;` +
+      `}`;
     // Selection
     styles +=
-        `${this._terminalSelector} .${SELECTION_CLASS} {` +
-        ` position: absolute;` +
-        ` top: 0;` +
-        ` left: 0;` +
-        ` z-index: 1;` +
-        ` pointer-events: none;` +
-        `}` +
-        `${this._terminalSelector} .${SELECTION_CLASS} div {` +
-        ` position: absolute;` +
-        ` background-color: ${this._colors.selection.css};` +
-        `}`;
+      `${this._terminalSelector} .${SELECTION_CLASS} {` +
+      ` position: absolute;` +
+      ` top: 0;` +
+      ` left: 0;` +
+      ` z-index: 1;` +
+      ` pointer-events: none;` +
+      `}` +
+      `${this._terminalSelector} .${SELECTION_CLASS} div {` +
+      ` position: absolute;` +
+      ` background-color: ${this._colors.selection.css};` +
+      `}`;
     // Colors
     this._colors.ansi.forEach((c, i) => {
       styles +=
-          `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
-          `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
+        `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
+        `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
     });
     styles +=
-        `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${color.opaque(this._colors.background).css}; }` +
-        `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;
+      `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${color.opaque(this._colors.background).css}; }` +
+      `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;
 
     this._themeStyleElement.innerHTML = styles;
   }