Added support for a basic link parser

src/Terminal.ts

@@ -37,7 +37,7 @@ import * as Strings from 'browser/LocalizableStrings';
 import { SoundService } from 'browser/services/SoundService';
 import { MouseZoneManager } from 'browser/MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
-import { ITheme, IMarker, IDisposable, ISelectionPosition } from 'xterm';
+import { ITheme, IMarker, IDisposable, ISelectionPosition, ILinkProvider } from 'xterm';
 import { DomRenderer } from './renderer/dom/DomRenderer';
 import { IKeyboardEvent, KeyboardResultType, ICharset, IBufferLine, IAttributeData, CoreMouseEventType, CoreMouseButton, CoreMouseAction } from 'common/Types';
 import { evaluateKeyboardEvent } from 'common/input/Keyboard';
@@ -58,11 +58,12 @@ import { MouseService } from 'browser/services/MouseService';
 import { IParams, IFunctionIdentifier } from 'common/parser/Types';
 import { CoreService } from 'common/services/CoreService';
 import { LogService } from 'common/services/LogService';
-import { ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport } from 'browser/Types';
+import { ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport, ILinkifier2 } from 'browser/Types';
 import { DirtyRowService } from 'common/services/DirtyRowService';
 import { InstantiationService } from 'common/services/InstantiationService';
 import { CoreMouseService } from 'common/services/CoreMouseService';
 import { WriteBuffer } from 'common/input/WriteBuffer';
+import { Linkifier2 } from 'browser/Linkifier2';
 
 // Let it work inside Node.js for automated testing purposes.
 const document = (typeof window !== 'undefined') ? window.document : null;
@@ -154,6 +155,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _inputHandler: InputHandler;
   public linkifier: ILinkifier;
+  public linkifier2: ILinkifier2;
   public viewport: IViewport;
   private _compositionHelper: ICompositionHelper;
   private _mouseZoneManager: IMouseZoneManager;
@@ -248,7 +250,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
       this._renderService.dispose();
     }
     this._customKeyEventHandler = null;
-    this.write = () => {};
+    this.write = () => { };
     if (this.element && this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
     }
@@ -290,6 +292,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this.register(this._inputHandler);
 
     this.linkifier = this.linkifier || new Linkifier(this._bufferService, this._logService);
+    this.linkifier2 = this.linkifier2 || new Linkifier2(this._bufferService);
 
     if (this.options.windowsMode) {
       this._windowsMode = applyWindowsMode(this);
@@ -619,6 +622,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this.register(this._mouseZoneManager);
     this.register(this.onScroll(() => this._mouseZoneManager.clearAll()));
     this.linkifier.attachToDom(this.element, this._mouseZoneManager);
+    this.linkifier2.attachToDom(this.element, this._mouseService);
 
     // This event listener must be registered aftre MouseZoneManager is created
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService.onMouseDown(e)));
@@ -719,8 +723,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
           } else {
             // according to MDN buttons only reports up to button 5 (AUX2)
             but = ev.buttons & 1 ? CoreMouseButton.LEFT :
-                  ev.buttons & 4 ? CoreMouseButton.MIDDLE :
-                  ev.buttons & 2 ? CoreMouseButton.RIGHT :
+              ev.buttons & 4 ? CoreMouseButton.MIDDLE :
+                ev.buttons & 2 ? CoreMouseButton.RIGHT :
                   CoreMouseButton.NONE; // fallback to NONE
           }
           break;
@@ -769,13 +773,13 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
      * Note: 'mousedown' currently is "always on" and not managed
      * by onProtocolChange.
      */
-    const requestedEvents: {[key: string]: ((ev: Event) => void) | null} = {
+    const requestedEvents: { [key: string]: ((ev: Event) => void) | null } = {
       mouseup: null,
       wheel: null,
       mousedrag: null,
       mousemove: null
     };
-    const eventListeners: {[key: string]: (ev: Event) => void} = {
+    const eventListeners: { [key: string]: (ev: Event) => void } = {
       mouseup: (ev: MouseEvent) => {
         sendEvent(ev);
         if (!ev.buttons) {
@@ -898,7 +902,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
           }
 
           // Construct and send sequences
-          const sequence = C0.ESC + (this._coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + ( ev.deltaY < 0 ? 'A' : 'B');
+          const sequence = C0.ESC + (this._coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B');
           let data = '';
           for (let i = 0; i < Math.abs(amount); i++) {
             data += sequence;
@@ -1166,6 +1170,13 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     }
   }
 
+  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    if (!this.linkifier2) {
+      return;
+    }
+    return this.linkifier2.registerLinkProvider(linkProvider);
+  }
+
   public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
     const joinerId = this._renderService.registerCharacterJoiner(handler);
     this.refresh(0, this.rows - 1);
@@ -1324,8 +1335,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _isThirdLevelShift(browser: IBrowser, ev: IKeyboardEvent): boolean {
     const thirdLevelKey =
-        (browser.isMac && !this.options.macOptionIsMeta && ev.altKey && !ev.ctrlKey && !ev.metaKey) ||
-        (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey);
+      (browser.isMac && !this.options.macOptionIsMeta && ev.altKey && !ev.ctrlKey && !ev.metaKey) ||
+      (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey);
 
     if (ev.type === 'keypress') {
       return thirdLevelKey;

src/TestUtils.test.ts

@@ -9,10 +9,10 @@ import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types'
 import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, ICharset, CoreMouseEventType } from 'common/Types';
 import { Buffer } from 'common/buffer/Buffer';
 import * as Browser from 'common/Platform';
-import { IDisposable, IMarker, IEvent, ISelectionPosition } from 'xterm';
+import { IDisposable, IMarker, IEvent, ISelectionPosition, ILinkProvider } from 'xterm';
 import { Terminal } from './Terminal';
 import { AttributeData } from 'common/buffer/AttributeData';
-import { IColorManager, IColorSet, ILinkMatcherOptions, ILinkifier, IViewport } from 'browser/Types';
+import { IColorManager, IColorSet, ILinkMatcherOptions, ILinkifier, IViewport, ILinkifier2 } from 'browser/Types';
 import { IOptionsService } from 'common/services/Services';
 import { EventEmitter } from 'common/EventEmitter';
 import { IParams, IFunctionIdentifier } from 'common/parser/Types';
@@ -91,6 +91,9 @@ export class MockTerminal implements ITerminal {
   deregisterLinkMatcher(matcherId: number): void {
     throw new Error('Method not implemented.');
   }
+  registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    throw new Error('Method not implemented.');
+  }
   hasSelection(): boolean {
     throw new Error('Method not implemented.');
   }
@@ -133,6 +136,7 @@ export class MockTerminal implements ITerminal {
   bracketedPasteMode: boolean;
   renderer: IRenderer;
   linkifier: ILinkifier;
+  linkifier2: ILinkifier2;
   isFocused: boolean;
   options: ITerminalOptions = {};
   element: HTMLElement;
@@ -384,16 +388,16 @@ export class MockRenderer implements IRenderer {
   setColors(colors: IColorSet): void {
     throw new Error('Method not implemented.');
   }
-  onResize(cols: number, rows: number): void {}
-  onCharSizeChanged(): void {}
-  onBlur(): void {}
-  onFocus(): void {}
-  onSelectionChanged(start: [number, number], end: [number, number]): void {}
-  onCursorMove(): void {}
-  onOptionsChanged(): void {}
-  onDevicePixelRatioChange(): void {}
-  clear(): void {}
-  renderRows(start: number, end: number): void {}
+  onResize(cols: number, rows: number): void { }
+  onCharSizeChanged(): void { }
+  onBlur(): void { }
+  onFocus(): void { }
+  onSelectionChanged(start: [number, number], end: [number, number]): void { }
+  onCursorMove(): void { }
+  onOptionsChanged(): void { }
+  onDevicePixelRatioChange(): void { }
+  clear(): void { }
+  renderRows(start: number, end: number): void { }
   registerCharacterJoiner(handler: CharacterJoinerHandler): number { return 0; }
   deregisterCharacterJoiner(): boolean { return true; }
 }

src/Types.d.ts

@@ -3,10 +3,10 @@
  * @license MIT
  */
 
-import { ITerminalOptions as IPublicTerminalOptions, IDisposable, IMarker, ISelectionPosition } from 'xterm';
+import { ITerminalOptions as IPublicTerminalOptions, IDisposable, IMarker, ISelectionPosition, ILinkProvider } from 'xterm';
 import { ICharset, IAttributeData, CharData, CoreMouseEventType } from 'common/Types';
 import { IEvent, IEventEmitter } from 'common/EventEmitter';
-import { IColorSet, ILinkifier, ILinkMatcherOptions, IViewport } from 'browser/Types';
+import { IColorSet, ILinkifier, ILinkMatcherOptions, IViewport, ILinkifier2 } from 'browser/Types';
 import { IOptionsService } from 'common/services/Services';
 import { IBuffer, IBufferSet } from 'common/buffer/Types';
 import { IParams, IFunctionIdentifier } from 'common/parser/Types';
@@ -198,6 +198,7 @@ export interface IPublicTerminal extends IDisposable {
   addOscHandler(ident: number, callback: (data: string) => boolean): IDisposable;
   registerLinkMatcher(regex: RegExp, handler: (event: MouseEvent, uri: string) => void, options?: ILinkMatcherOptions): number;
   deregisterLinkMatcher(matcherId: number): void;
+  registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
   registerCharacterJoiner(handler: (text: string) => [number, number][]): number;
   deregisterCharacterJoiner(joinerId: number): void;
   addMarker(cursorYOffset: number): IMarker;
@@ -231,6 +232,7 @@ export interface IElementAccessor {
 
 export interface ILinkifierAccessor {
   linkifier: ILinkifier;
+  linkifier2: ILinkifier2;
 }
 
 // TODO: The options that are not in the public API should be reviewed

src/browser/Linkifier2.ts

@@ -0,0 +1,142 @@
+import { ILinkifier2, ILinkProvider, IBufferCellPosition, ILink, ILinkifierEvent } from './Types';
+import { IDisposable } from 'common/Types';
+import { IMouseService } from './services/Services';
+import { IBufferService } from 'common/services/Services';
+import { EventEmitter, IEvent } from 'common/EventEmitter';
+
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+
+/**
+ */
+export class Linkifier2 implements ILinkifier2 {
+  private _element: HTMLElement | undefined;
+  private _linkProviders: ILinkProvider[] = [];
+  private _mouseService: IMouseService | undefined;
+  private _linkCache: ILinkCache[] = [];
+
+  private _onShowTooltip = new EventEmitter<ILinkifierEvent>();
+  public get onShowTooltip(): IEvent<ILinkifierEvent> { return this._onShowTooltip.event; }
+  private _onHideTooltip = new EventEmitter<ILinkifierEvent>();
+  public get onHideTooltip(): IEvent<ILinkifierEvent> { return this._onHideTooltip.event; }
+
+  constructor(
+    private readonly _bufferService: IBufferService
+  ) {
+
+  }
+
+  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    this._linkProviders.push(linkProvider);
+    return { dispose: () => console.log('disposing link providers') };
+  }
+
+  public attachToDom(element: HTMLElement, mouseService: IMouseService): void {
+    this._element = element;
+    this._mouseService = mouseService;
+
+    this._element.addEventListener('mousemove', this._onMouseMove.bind(this));
+    this._element.addEventListener('click', this._onMouseDown.bind(this));
+  }
+
+  private _onMouseMove(event: MouseEvent): void {
+    const position = this._positionFromMouseEvent(event);
+
+    if (!position) {
+      return;
+    }
+
+    // Check the cache for a link and determine if we need to show or hide tooltip
+    let foundLink = false;
+    this._linkCache.forEach((cachedLink, i) => {
+      const isInPosition = this._linkAtPosition(cachedLink.link, position);
+      const range = cachedLink.link.range;
+      if (isInPosition && !cachedLink.mouseOver) {
+        // Show the tooltip
+        this._onShowTooltip.fire(this._createLinkHoverEvent(range.start.x - 1, range.start.y - 1, range.end.x - 1, range.end.y - 1, undefined));
+        this._element!.classList.add('xterm-cursor-pointer');
+        cachedLink.link.showTooltip(event, cachedLink.link.url);
+
+        this._linkCache[i].mouseOver = true;
+        foundLink = true;
+      } else if (!isInPosition && cachedLink.mouseOver) {
+        // Hide the tooltip
+        this._onHideTooltip.fire(this._createLinkHoverEvent(range.start.x - 1, range.start.y - 1, range.end.x - 1, range.end.y - 1, undefined));
+        this._element!.classList.remove('xterm-cursor-pointer');
+        cachedLink.link.hideTooltip(event, cachedLink.link.url);
+
+        this._linkCache[i].mouseOver = false;
+      }
+    });
+
+    if (foundLink) {
+      return;
+    }
+
+    // The is no link in the cache, so ask for one
+    this._linkProviders.forEach(linkProvider => {
+      linkProvider.provideLink(position, this._handleNewLink.bind(this));
+    });
+  }
+
+  private _onMouseDown(event: MouseEvent): void {
+    const position = this._positionFromMouseEvent(event);
+
+    if (!position) {
+      return;
+    }
+
+    this._linkCache.forEach((cachedLink, i) => {
+      if (this._linkAtPosition(cachedLink.link, position)) {
+        cachedLink.link.handle(event, cachedLink.link.url);
+      }
+    });
+  }
+
+  private _handleNewLink(link: ILink | undefined): void {
+    if (link && !this._linkCache.find(cachedLink => cachedLink.link = link)) {
+      this._linkCache.push({ link: link, mouseOver: false });
+    }
+  }
+
+  /**
+   * Check if the buffer position is within the link
+   * @param link
+   * @param position
+   */
+  private _linkAtPosition(link: ILink, position: IBufferCellPosition): boolean {
+    return link.range.start.x <= position.x
+      && link.range.start.y <= position.y
+      && link.range.end.x >= position.x
+      && link.range.end.y >= position.y;
+  }
+
+  /**
+   * Get the buffer position from a mouse event
+   * @param event
+   */
+  private _positionFromMouseEvent(event: MouseEvent): IBufferCellPosition | undefined {
+    if (!this._element) {
+      return;
+    }
+
+    const coords = this._mouseService!.getCoords(event, this._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 };
+  }
+}
+
+interface ILinkCache {
+  link: ILink;
+  mouseOver: boolean;
+}

src/browser/Types.d.ts

@@ -5,6 +5,7 @@
 
 import { IEvent } from 'common/EventEmitter';
 import { IDisposable } from 'common/Types';
+import { IMouseService } from './services/Services';
 
 export interface IColorManager {
   colors: IColorSet;
@@ -93,6 +94,14 @@ export interface ILinkifier {
   deregisterLinkMatcher(matcherId: number): boolean;
 }
 
+export interface ILinkifier2 {
+  onShowTooltip: IEvent<ILinkifierEvent>;
+  onHideTooltip: IEvent<ILinkifierEvent>;
+
+  attachToDom(element: HTMLElement, mouseService: IMouseService): void
+  registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
+}
+
 export interface ILinkMatcherOptions {
   /**
    * The index of the link from the regex.match(text) call. This defaults to 0
@@ -143,3 +152,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;
+  url: string;
+  showTooltip(event: MouseEvent, link: string): void;
+  hideTooltip(event: MouseEvent, link: string): void;
+  handle(event: MouseEvent, link: string): void;
+}
+
+interface IBufferRange {
+  start: IBufferCellPosition;
+  end: IBufferCellPosition;
+}
+
+interface IBufferCellPosition {
+  x: number;
+  y: number;
+}

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.onShowTooltip(e => this._onLinkHover(e));
+    linkifier2.onHideTooltip(e => this._onLinkLeave(e));
   }
 
   public resize(dim: IRenderDimensions): void {

src/public/Terminal.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { Terminal as ITerminalApi, ITerminalOptions, IMarker, IDisposable, ILinkMatcherOptions, ITheme, ILocalizableStrings, ITerminalAddon, ISelectionPosition, IBuffer as IBufferApi, IBufferLine as IBufferLineApi, IBufferCell as IBufferCellApi, IParser, IFunctionIdentifier } from 'xterm';
+import { Terminal as ITerminalApi, ITerminalOptions, IMarker, IDisposable, ILinkMatcherOptions, ITheme, ILocalizableStrings, ITerminalAddon, ISelectionPosition, IBuffer as IBufferApi, IBufferLine as IBufferLineApi, IBufferCell as IBufferCellApi, IParser, IFunctionIdentifier, ILinkProvider } from 'xterm';
 import { ITerminal } from '../Types';
 import { IBufferLine } from 'common/Types';
 import { IBuffer } from 'common/buffer/Types';
@@ -67,6 +67,9 @@ export class Terminal implements ITerminalApi {
   public deregisterLinkMatcher(matcherId: number): void {
     this._core.deregisterLinkMatcher(matcherId);
   }
+  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    return this._core.registerLinkProvider(linkProvider);
+  }
   public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
     return this._core.registerCharacterJoiner(handler);
   }
@@ -186,7 +189,7 @@ export class Terminal implements ITerminalApi {
 }
 
 class BufferApiView implements IBufferApi {
-  constructor(private _buffer: IBuffer) {}
+  constructor(private _buffer: IBuffer) { }
 
   public get cursorY(): number { return this._buffer.y; }
   public get cursorX(): number { return this._buffer.x; }
@@ -203,7 +206,7 @@ class BufferApiView implements IBufferApi {
 }
 
 class BufferLineApiView implements IBufferLineApi {
-  constructor(private _line: IBufferLine) {}
+  constructor(private _line: IBufferLine) { }
 
   public get isWrapped(): boolean { return this._line.isWrapped; }
   public getCell(x: number): IBufferCellApi | undefined {
@@ -218,13 +221,13 @@ class BufferLineApiView implements IBufferLineApi {
 }
 
 class BufferCellApiView implements IBufferCellApi {
-  constructor(private _line: IBufferLine, private _x: number) {}
+  constructor(private _line: IBufferLine, private _x: number) { }
   public get char(): string { return this._line.getString(this._x); }
   public get width(): number { return this._line.getWidth(this._x); }
 }
 
 class ParserApi implements IParser {
-  constructor(private _core: ITerminal) {}
+  constructor(private _core: ITerminal) { }
 
   public addCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean): IDisposable {
     return this._core.addCsiHandler(id, (params: IParams) => callback(params.toArray()));

src/renderer/Renderer.ts

@@ -41,8 +41,8 @@ export class Renderer extends Disposable implements IRenderer {
     this._renderLayers = [
       new TextRenderLayer(this._terminal.screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, bufferService, optionsService),
       new SelectionRenderLayer(this._terminal.screenElement, 1, this._colors, this._id, bufferService, optionsService),
-      new LinkRenderLayer(this._terminal.screenElement, 2, this._colors, this._id, this._terminal.linkifier, bufferService, optionsService),
-      new CursorRenderLayer(this._terminal.screenElement, 3, this._colors, this._terminal, this._id, bufferService, optionsService)
+      new LinkRenderLayer(this._terminal.screenElement, 2, this._colors, this._id, this._terminal.linkifier, this._terminal.linkifier2, bufferService, optionsService),
+      new CursorRenderLayer(this._terminal.screenElement, 4, this._colors, this._terminal, this._id, bufferService, optionsService)
     ];
     this.dimensions = {
       scaledCharWidth: null,

src/renderer/dom/DomRenderer.ts

@@ -80,6 +80,9 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     this._terminal.linkifier.onLinkHover(e => this._onLinkHover(e));
     this._terminal.linkifier.onLinkLeave(e => this._onLinkLeave(e));
+
+    this._terminal.linkifier2.onShowTooltip(e => this._onLinkHover(e));
+    this._terminal.linkifier2.onHideTooltip(e => this._onLinkLeave(e));
   }
 
   public dispose(): void {
@@ -119,12 +122,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;
 
@@ -146,85 +149,85 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     // Base CSS
     let styles =
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
-        ` color: ${this._colors.foreground.css};` +
-        ` background-color: ${this._colors.background.css};` +
-        ` font-family: ${this._terminal.options.fontFamily};` +
-        ` font-size: ${this._terminal.options.fontSize}px;` +
-        `}`;
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+      ` color: ${this._colors.foreground.css};` +
+      ` background-color: ${this._colors.background.css};` +
+      ` font-family: ${this._terminal.options.fontFamily};` +
+      ` font-size: ${this._terminal.options.fontSize}px;` +
+      `}`;
     // Text styles
     styles +=
-        `${this._terminalSelector} span:not(.${BOLD_CLASS}) {` +
-        ` font-weight: ${this._terminal.options.fontWeight};` +
-        `}` +
-        `${this._terminalSelector} span.${BOLD_CLASS} {` +
-        ` font-weight: ${this._terminal.options.fontWeightBold};` +
-        `}` +
-        `${this._terminalSelector} span.${ITALIC_CLASS} {` +
-        ` font-style: italic;` +
-        `}`;
+      `${this._terminalSelector} span:not(.${BOLD_CLASS}) {` +
+      ` font-weight: ${this._terminal.options.fontWeight};` +
+      `}` +
+      `${this._terminalSelector} span.${BOLD_CLASS} {` +
+      ` font-weight: ${this._terminal.options.fontWeightBold};` +
+      `}` +
+      `${this._terminalSelector} span.${ITALIC_CLASS} {` +
+      ` font-style: italic;` +
+      `}`;
     // Blink animation
     styles +=
-        `@keyframes blink_box_shadow {` +
-        ` 50% {` +
-        `  box-shadow: none;` +
-        ` }` +
-        `}`;
+      `@keyframes blink_box_shadow {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
     styles +=
-        `@keyframes blink_block {` +
-        ` 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 {` +
+      ` 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 1s step-end infinite;` +
-        `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
-        ` animation: blink_block 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: 1px 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 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` animation: blink_block 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: 1px 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: ${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: ${this._colors.background.css}; }` +
+      `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;
 
     this._themeStyleElement.innerHTML = styles;
   }