Merge remote-tracking branch 'origin/master' into pr/princjef/1460

src/renderer/BaseRenderLayer.ts

@@ -49,7 +49,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   public onFocus(terminal: ITerminal): void {}
   public onCursorMove(terminal: ITerminal): void {}
   public onGridChanged(terminal: ITerminal, startRow: number, endRow: number): void {}
-  public onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number]): void {}
+  public onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number], columnSelectMode: boolean = false): void {}
 
   public onThemeChanged(terminal: ITerminal, colorSet: IColorSet): void {
     this._refreshCharAtlas(terminal, colorSet);

src/renderer/ColorManager.test.ts

@@ -36,7 +36,7 @@ describe('ColorManager', () => {
       for (const key of Object.keys(cm.colors)) {
         if (key !== 'ansi') {
           // A #rrggbb or rgba(...)
-          assert.ok(cm.colors[key].css.length >= 7);
+          assert.ok((<any>cm.colors)[key].css.length >= 7);
         }
       }
       assert.equal(cm.colors.ansi.length, 256);

src/renderer/Renderer.ts

@@ -11,8 +11,8 @@ import { IRenderLayer, IColorSet, IRenderer, IRenderDimensions, ICharacterJoiner
 import { ITerminal, CharacterJoinerHandler } from '../Types';
 import { LinkRenderLayer } from './LinkRenderLayer';
 import { EventEmitter } from '../EventEmitter';
-import { RenderDebouncer } from '../utils/RenderDebouncer';
-import { ScreenDprMonitor } from '../utils/ScreenDprMonitor';
+import { RenderDebouncer } from '../ui/RenderDebouncer';
+import { ScreenDprMonitor } from '../ui/ScreenDprMonitor';
 import { ITheme } from 'xterm';
 
 export class Renderer extends EventEmitter implements IRenderer {
@@ -64,12 +64,14 @@ export class Renderer extends EventEmitter implements IRenderer {
     this._renderDebouncer = new RenderDebouncer(this._terminal, this._renderRows.bind(this));
     this._screenDprMonitor = new ScreenDprMonitor();
     this._screenDprMonitor.setListener(() => this.onWindowResize(window.devicePixelRatio));
+    this.register(this._screenDprMonitor);
 
     // Detect whether IntersectionObserver is detected and enable renderer pause
     // and resume based on terminal visibility if so
     if ('IntersectionObserver' in window) {
       const observer = new IntersectionObserver(e => this.onIntersectionChange(e[0]), { threshold: 0 });
       observer.observe(this._terminal.element);
+      this.register({ dispose: () => observer.disconnect() });
     }
   }
 
@@ -143,8 +145,8 @@ export class Renderer extends EventEmitter implements IRenderer {
     this._runOperation(l => l.onFocus(this._terminal));
   }
 
-  public onSelectionChanged(start: [number, number], end: [number, number]): void {
-    this._runOperation(l => l.onSelectionChanged(this._terminal, start, end));
+  public onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean = false): void {
+    this._runOperation(l => l.onSelectionChanged(this._terminal, start, end, columnSelectMode));
   }
 
   public onCursorMove(): void {

src/renderer/SelectionRenderLayer.ts

@@ -8,13 +8,14 @@ import { IColorSet, IRenderDimensions } from './Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 
 export class SelectionRenderLayer extends BaseRenderLayer {
-  private _state: {start: [number, number], end: [number, number]};
+  private _state: { start: [number, number], end: [number, number], columnSelectMode: boolean };
 
   constructor(container: HTMLElement, zIndex: number, colors: IColorSet) {
     super(container, 'selection', zIndex, true, colors);
     this._state = {
       start: null,
-      end: null
+      end: null,
+      columnSelectMode: null
     };
   }
 
@@ -23,7 +24,8 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     // Resizing the canvas discards the contents of the canvas so clear state
     this._state = {
       start: null,
-      end: null
+      end: null,
+      columnSelectMode: null
     };
   }
 
@@ -31,15 +33,16 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     if (this._state.start && this._state.end) {
       this._state = {
         start: null,
-        end: null
+        end: null,
+        columnSelectMode: null
       };
       this.clearAll();
     }
   }
 
-  public onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number]): void {
+  public onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number], columnSelectMode: boolean): void {
     // Selection has not changed
-    if (this._state.start === start || this._state.end === end) {
+    if (!this._didStateChange(start, end, columnSelectMode)) {
       return;
     }
 
@@ -62,25 +65,48 @@ export class SelectionRenderLayer extends BaseRenderLayer {
       return;
     }
 
-    // Draw first row
-    const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
-    const startRowEndCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : terminal.cols;
     this._ctx.fillStyle = this._colors.selection.css;
-    this.fillCells(startCol, viewportCappedStartRow, startRowEndCol - startCol, 1);
 
-    // Draw middle rows
-    const middleRowsCount = Math.max(viewportCappedEndRow - viewportCappedStartRow - 1, 0);
-    this.fillCells(0, viewportCappedStartRow + 1, terminal.cols, middleRowsCount);
+    if (columnSelectMode) {
+      const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
+      const width = end[0] - startCol;
+      const height = viewportCappedEndRow - viewportCappedStartRow + 1;
+      this.fillCells(startCol, viewportCappedStartRow, width, height);
+    } else {
+      // Draw first row
+      const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
+      const startRowEndCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : terminal.cols;
+      this.fillCells(startCol, viewportCappedStartRow, startRowEndCol - startCol, 1);
 
-    // Draw final row
-    if (viewportCappedStartRow !== viewportCappedEndRow) {
-      // Only draw viewportEndRow if it's not the same as viewportStartRow
-      const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : terminal.cols;
-      this.fillCells(0, viewportCappedEndRow, endCol, 1);
+      // Draw middle rows
+      const middleRowsCount = Math.max(viewportCappedEndRow - viewportCappedStartRow - 1, 0);
+      this.fillCells(0, viewportCappedStartRow + 1, terminal.cols, middleRowsCount);
+
+      // Draw final row
+      if (viewportCappedStartRow !== viewportCappedEndRow) {
+        // Only draw viewportEndRow if it's not the same as viewportStartRow
+        const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : terminal.cols;
+        this.fillCells(0, viewportCappedEndRow, endCol, 1);
+      }
     }
 
     // Save state for next render
     this._state.start = [start[0], start[1]];
     this._state.end = [end[0], end[1]];
+    this._state.columnSelectMode = columnSelectMode;
+  }
+
+  private _didStateChange(start: [number, number], end: [number, number], columnSelectMode: boolean): boolean {
+    return !this._areCoordinatesEqual(start, this._state.start) ||
+      !this._areCoordinatesEqual(end, this._state.end) ||
+      columnSelectMode !== this._state.columnSelectMode;
+  }
+
+  private _areCoordinatesEqual(coord1: [number, number], coord2: [number, number]): boolean {
+    if (!coord1 || !coord2) {
+      return false;
+    }
+
+    return coord1[0] === coord2[0] && coord1[1] === coord2[1];
   }
 }

src/renderer/TextRenderLayer.ts

@@ -260,7 +260,9 @@ export class TextRenderLayer extends BaseRenderLayer {
       return;
     }
 
-    this._charAtlas.beginFrame();
+    if (this._charAtlas) {
+      this._charAtlas.beginFrame();
+    }
 
     this.clearCells(0, firstRow, terminal.cols, lastRow - firstRow + 1);
     this._drawBackground(terminal, firstRow, lastRow);

src/renderer/Types.ts

@@ -4,7 +4,7 @@
  */
 
 import { ITerminal, CharacterJoinerHandler } from '../Types';
-import { IEventEmitter, ITheme } from 'xterm';
+import { IEventEmitter, ITheme, IDisposable } from 'xterm';
 import { IColorSet } from '../shared/Types';
 
 /**
@@ -20,17 +20,22 @@ export const enum FLAGS {
   ITALIC = 64
 }
 
-export interface IRenderer extends IEventEmitter {
+/**
+ * Note that IRenderer implementations should emit the refresh event after
+ * rendering rows to the screen.
+ */
+export interface IRenderer extends IEventEmitter, IDisposable {
   dimensions: IRenderDimensions;
   colorManager: IColorManager;
 
+  dispose(): void;
   setTheme(theme: ITheme): IColorSet;
   onWindowResize(devicePixelRatio: number): void;
   onResize(cols: number, rows: number): void;
   onCharSizeChanged(): void;
   onBlur(): void;
   onFocus(): void;
-  onSelectionChanged(start: [number, number], end: [number, number]): void;
+  onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean): void;
   onCursorMove(): void;
   onOptionsChanged(): void;
   clear(): void;
@@ -96,7 +101,7 @@ export interface IRenderLayer {
   /**
    * Calls when the selection changes.
    */
-  onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number]): void;
+  onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number], columnSelectMode: boolean): void;
 
   /**
    * Registers a handler to join characters to render as a group

src/renderer/atlas/CharAtlasUtils.ts

@@ -9,7 +9,7 @@ import { ICharAtlasConfig } from '../../shared/atlas/Types';
 
 export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, terminal: ITerminal, colors: IColorSet): ICharAtlasConfig {
   // null out some fields that don't matter
-  const clonedColors = {
+  const clonedColors = <IColorSet>{
     foreground: colors.foreground,
     background: colors.background,
     cursor: null,

src/renderer/atlas/LRUMap.ts

@@ -11,7 +11,7 @@ interface ILinkedListNode<T> {
 }
 
 export default class LRUMap<T> {
-  private _map = {};
+  private _map: { [key: string]: ILinkedListNode<T> } = {};
   private _head: ILinkedListNode<T> = null;
   private _tail: ILinkedListNode<T> = null;
   private _nodePool: ILinkedListNode<T>[] = [];

src/renderer/atlas/StaticCharAtlas.ts

@@ -26,7 +26,7 @@ export default class StaticCharAtlas extends BaseCharAtlas {
     return canvas;
   }
 
-  public _doWarmUp(): void {
+  protected _doWarmUp(): void {
     const result = generateStaticCharAtlasTexture(window, this._canvasFactory, this._config);
     if (result instanceof HTMLCanvasElement) {
       this._texture = result;

src/renderer/dom/DomRenderer.ts

@@ -0,0 +1,325 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IRenderer, IRenderDimensions, IColorSet } from '../Types';
+import { ITerminal, CharacterJoinerHandler } from '../../Types';
+import { ITheme } from 'xterm';
+import { EventEmitter } from '../../EventEmitter';
+import { ColorManager } from '../ColorManager';
+import { RenderDebouncer } from '../../ui/RenderDebouncer';
+import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, DomRendererRowFactory } from './DomRendererRowFactory';
+
+const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
+const ROW_CONTAINER_CLASS = 'xterm-rows';
+const FG_CLASS_PREFIX = 'xterm-fg-';
+const BG_CLASS_PREFIX = 'xterm-bg-';
+const FOCUS_CLASS = 'xterm-focus';
+const SELECTION_CLASS = 'xterm-selection';
+
+let nextTerminalId = 1;
+
+// TODO: Pull into an addon when TS composite projects allow easier sharing of code (not just
+// interfaces) between core and addons
+
+/**
+ * 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
+ * canvas is not an option.
+ */
+export class DomRenderer extends EventEmitter implements IRenderer {
+  private _renderDebouncer: RenderDebouncer;
+  private _rowFactory: DomRendererRowFactory;
+  private _terminalClass: number = nextTerminalId++;
+
+  private _themeStyleElement: HTMLStyleElement;
+  private _dimensionsStyleElement: HTMLStyleElement;
+  private _rowContainer: HTMLElement;
+  private _rowElements: HTMLElement[] = [];
+  private _selectionContainer: HTMLElement;
+
+  public dimensions: IRenderDimensions;
+  public colorManager: ColorManager;
+
+  constructor(private _terminal: ITerminal, theme: ITheme | undefined) {
+    super();
+    const allowTransparency = this._terminal.options.allowTransparency;
+    this.colorManager = new ColorManager(document, allowTransparency);
+    this.setTheme(theme);
+
+    this._rowContainer = document.createElement('div');
+    this._rowContainer.classList.add(ROW_CONTAINER_CLASS);
+    this._rowContainer.style.lineHeight = 'normal';
+    this._rowContainer.setAttribute('aria-hidden', 'true');
+    this._refreshRowElements(this._terminal.rows, this._terminal.cols);
+    this._selectionContainer = document.createElement('div');
+    this._selectionContainer.classList.add(SELECTION_CLASS);
+    this._selectionContainer.setAttribute('aria-hidden', 'true');
+
+    this.dimensions = {
+      scaledCharWidth: null,
+      scaledCharHeight: null,
+      scaledCellWidth: null,
+      scaledCellHeight: null,
+      scaledCharLeft: null,
+      scaledCharTop: null,
+      scaledCanvasWidth: null,
+      scaledCanvasHeight: null,
+      canvasWidth: null,
+      canvasHeight: null,
+      actualCellWidth: null,
+      actualCellHeight: null
+    };
+    this._updateDimensions();
+
+    this._renderDebouncer = new RenderDebouncer(this._terminal, this._renderRows.bind(this));
+    this._rowFactory = new DomRendererRowFactory(document);
+
+    this._terminal.element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
+    this._terminal.screenElement.appendChild(this._rowContainer);
+    this._terminal.screenElement.appendChild(this._selectionContainer);
+  }
+
+  private _updateDimensions(): void {
+    this.dimensions.scaledCharWidth = this._terminal.charMeasure.width * window.devicePixelRatio;
+    this.dimensions.scaledCharHeight = this._terminal.charMeasure.height * window.devicePixelRatio;
+    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth;
+    this.dimensions.scaledCellHeight = this.dimensions.scaledCharHeight;
+    this.dimensions.scaledCharLeft = 0;
+    this.dimensions.scaledCharTop = 0;
+    this.dimensions.scaledCanvasWidth = this.dimensions.scaledCellWidth * this._terminal.cols;
+    this.dimensions.scaledCanvasHeight = this.dimensions.scaledCellHeight * this._terminal.rows;
+    this.dimensions.canvasWidth = this._terminal.charMeasure.width * this._terminal.cols;
+    this.dimensions.canvasHeight = this._terminal.charMeasure.height * this._terminal.rows;
+    this.dimensions.actualCellWidth = this._terminal.charMeasure.width;
+    this.dimensions.actualCellHeight = this._terminal.charMeasure.height;
+
+    this._rowElements.forEach(element => {
+      element.style.width = `${this.dimensions.canvasWidth}px`;
+      element.style.height = `${this._terminal.charMeasure.height}px`;
+    });
+
+    if (!this._dimensionsStyleElement) {
+      this._dimensionsStyleElement = document.createElement('style');
+      this._terminal.screenElement.appendChild(this._dimensionsStyleElement);
+    }
+
+    const styles =
+        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
+        ` display: inline-block;` +
+        ` height: 100%;` +
+        ` vertical-align: top;` +
+        ` width: ${this._terminal.charMeasure.width}px` +
+        `}`;
+
+    this._dimensionsStyleElement.innerHTML = styles;
+
+    this._selectionContainer.style.height = (<any>this._terminal)._viewportElement.style.height;
+    this._rowContainer.style.width = `${this.dimensions.canvasWidth}px`;
+    this._rowContainer.style.height = `${this.dimensions.canvasHeight}px`;
+  }
+
+  public setTheme(theme: ITheme | undefined): IColorSet {
+    if (theme) {
+      this.colorManager.setTheme(theme);
+    }
+
+    if (!this._themeStyleElement) {
+      this._themeStyleElement = document.createElement('style');
+      this._terminal.screenElement.appendChild(this._themeStyleElement);
+    }
+
+    // Base CSS
+    let styles =
+        `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+        ` color: ${this.colorManager.colors.foreground.css};` +
+        ` background-color: ${this.colorManager.colors.background.css};` +
+        ` font-family: ${this._terminal.getOption('fontFamily')};` +
+        ` font-size: ${this._terminal.getOption('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;` +
+        `}`;
+    // Cursor
+    styles +=
+        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS} {` +
+        ` background-color: ${this.colorManager.colors.cursor.css};` +
+        ` color: ${this.colorManager.colors.cursorAccent.css};` +
+        `}` +
+        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${CURSOR_CLASS} {` +
+        ` outline: 1px solid #fff;` +
+        ` outline-offset: -1px;` +
+        `}`;
+    // 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.colorManager.colors.selection.css};` +
+        `}`;
+    // Colors
+    this.colorManager.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._themeStyleElement.innerHTML = styles;
+    return this.colorManager.colors;
+  }
+
+  public onWindowResize(devicePixelRatio: number): void {
+    this._updateDimensions();
+  }
+
+  private _refreshRowElements(cols: number, rows: number): void {
+    // Add missing elements
+    for (let i = this._rowElements.length; i <= rows; i++) {
+      const row = document.createElement('div');
+      this._rowContainer.appendChild(row);
+      this._rowElements.push(row);
+    }
+    // Remove excess elements
+    while (this._rowElements.length > rows) {
+      this._rowContainer.removeChild(this._rowElements.pop());
+    }
+  }
+
+  public onResize(cols: number, rows: number): void {
+    this._refreshRowElements(cols, rows);
+    this._updateDimensions();
+  }
+
+  public onCharSizeChanged(): void {
+    this._updateDimensions();
+  }
+
+  public onBlur(): void {
+    this._rowContainer.classList.remove(FOCUS_CLASS);
+  }
+
+  public onFocus(): void {
+    this._rowContainer.classList.add(FOCUS_CLASS);
+  }
+
+  public onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean): void {
+    // Remove all selections
+    while (this._selectionContainer.children.length) {
+      this._selectionContainer.removeChild(this._selectionContainer.children[0]);
+    }
+
+    // Selection does not exist
+    if (!start || !end) {
+      return;
+    }
+
+    // Translate from buffer position to viewport position
+    const viewportStartRow = start[1] - this._terminal.buffer.ydisp;
+    const viewportEndRow = end[1] - this._terminal.buffer.ydisp;
+    const viewportCappedStartRow = Math.max(viewportStartRow, 0);
+    const viewportCappedEndRow = Math.min(viewportEndRow, this._terminal.rows - 1);
+
+    // No need to draw the selection
+    if (viewportCappedStartRow >= this._terminal.rows || viewportCappedEndRow < 0) {
+      return;
+    }
+
+    // Create the selections
+    const documentFragment = document.createDocumentFragment();
+    const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
+
+    if (columnSelectMode) {
+      documentFragment.appendChild(
+        this._createSelectionElement(viewportCappedStartRow, startCol, end[0], viewportCappedEndRow - viewportStartRow + 1)
+      );
+    } else {
+      // Draw first row
+      const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
+      documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol));
+      // Draw middle rows
+      const middleRowsCount = viewportCappedEndRow - viewportCappedStartRow - 1;
+      documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow + 1, 0, this._terminal.cols, middleRowsCount));
+      // Draw final row
+      if (viewportCappedStartRow !== viewportCappedEndRow) {
+        // Only draw viewportEndRow if it's not the same as viewporttartRow
+        const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
+        documentFragment.appendChild(this._createSelectionElement(viewportCappedEndRow, 0, endCol));
+      }
+    }
+    this._selectionContainer.appendChild(documentFragment);
+  }
+
+  /**
+   * Creates a selection element at the specified position.
+   * @param row The row of the selection.
+   * @param colStart The start column.
+   * @param colEnd The end columns.
+   */
+  private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement {
+    const element = document.createElement('div');
+    element.style.height = `${rowCount * this._terminal.charMeasure.height}px`;
+    element.style.top = `${row * this._terminal.charMeasure.height}px`;
+    element.style.left = `${colStart * this._terminal.charMeasure.width}px`;
+    element.style.width = `${this._terminal.charMeasure.width * (colEnd - colStart)}px`;
+    return element;
+  }
+
+  public onCursorMove(): void {
+    // No-op, the cursor is drawn when rows are drawn
+  }
+
+  public onOptionsChanged(): void {
+    // Force a refresh
+    this._updateDimensions();
+    this.setTheme(undefined);
+    this._terminal.refresh(0, this._terminal.rows - 1);
+  }
+
+  public clear(): void {
+    this._rowElements.forEach(e => e.innerHTML = '');
+  }
+
+  public refreshRows(start: number, end: number): void {
+    this._renderDebouncer.refresh(start, end);
+  }
+
+  private _renderRows(start: number, end: number): void {
+    const terminal = this._terminal;
+
+    const cursorAbsoluteY = terminal.buffer.ybase + terminal.buffer.y;
+    const cursorX = this._terminal.buffer.x;
+
+    for (let y = start; y <= end; y++) {
+      const rowElement = this._rowElements[y];
+      rowElement.innerHTML = '';
+
+      const row = y + terminal.buffer.ydisp;
+      const lineData = terminal.buffer.lines.get(row);
+      rowElement.appendChild(this._rowFactory.createRow(lineData, row === cursorAbsoluteY, cursorX, terminal.charMeasure.width, terminal.cols));
+    }
+
+    this._terminal.emit('refresh', {start, end});
+  }
+
+  private get _terminalSelector(): string {
+    return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`;
+  }
+
+  public registerCharacterJoiner(handler: CharacterJoinerHandler): number { return -1; }
+  public deregisterCharacterJoiner(joinerId: number): boolean { return false; }
+}

src/renderer/dom/DomRendererRowFactory.test.ts

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import jsdom = require('jsdom');
+import { assert } from 'chai';
+import { DomRendererRowFactory } from './DomRendererRowFactory';
+import { LineData } from '../../Types';
+import { DEFAULT_ATTR } from '../../Buffer';
+import { FLAGS } from '../Types';
+
+describe('DomRendererRowFactory', () => {
+  let dom: jsdom.JSDOM;
+  let rowFactory: DomRendererRowFactory;
+  let lineData: LineData;
+
+  beforeEach(() => {
+    dom = new jsdom.JSDOM('');
+    rowFactory = new DomRendererRowFactory(dom.window.document);
+    lineData = createEmptyLineData(2);
+  });
+
+  describe('createRow', () => {
+    it('should create an element for every character in the row', () => {
+      const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+      assert.equal(getFragmentHtml(fragment),
+        '<span> </span>' +
+        '<span> </span>'
+      );
+    });
+
+    it('should set correct attributes for double width characters', () => {
+      lineData[0] = [DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)];
+      // There should be no element for the following "empty" cell
+      lineData[1] = [DEFAULT_ATTR, '', 0, undefined];
+      const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+      assert.equal(getFragmentHtml(fragment),
+        '<span style="width: 10px;">語</span>'
+      );
+    });
+
+    it('should add class for cursor', () => {
+      const fragment = rowFactory.createRow(lineData, true, 0, 5, 20);
+      assert.equal(getFragmentHtml(fragment),
+        '<span class="xterm-cursor"> </span>' +
+        '<span> </span>'
+      );
+    });
+
+    it('should not render cells that go beyond the terminal\'s columns', () => {
+      lineData[0] = [DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)];
+      lineData[1] = [DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)];
+      const fragment = rowFactory.createRow(lineData, false, 0, 5, 1);
+      assert.equal(getFragmentHtml(fragment),
+        '<span>a</span>'
+      );
+    });
+
+    describe('attributes', () => {
+      it('should add class for bold', () => {
+        lineData[0] = [DEFAULT_ATTR | (FLAGS.BOLD << 18), 'a', 1, 'a'.charCodeAt(0)];
+        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-bold">a</span>' +
+          '<span> </span>'
+        );
+      });
+
+      it('should add class for italic', () => {
+        lineData[0] = [DEFAULT_ATTR | (FLAGS.ITALIC << 18), 'a', 1, 'a'.charCodeAt(0)];
+        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-italic">a</span>' +
+          '<span> </span>'
+        );
+      });
+
+      it('should add classes for 256 foreground colors', () => {
+        const defaultAttrNoFgColor = (0 << 9) | (256 << 0);
+        for (let i = 0; i < 256; i++) {
+          lineData[0] = [defaultAttrNoFgColor | (i << 9), 'a', 1, 'a'.charCodeAt(0)];
+          const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+          assert.equal(getFragmentHtml(fragment),
+            `<span class="xterm-fg-${i}">a</span>` +
+            '<span> </span>'
+          );
+        }
+      });
+
+      it('should add classes for 256 background colors', () => {
+        const defaultAttrNoBgColor = (257 << 9) | (0 << 0);
+        for (let i = 0; i < 256; i++) {
+          lineData[0] = [defaultAttrNoBgColor | (i << 0), 'a', 1, 'a'.charCodeAt(0)];
+          const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+          assert.equal(getFragmentHtml(fragment),
+            `<span class="xterm-bg-${i}">a</span>` +
+            '<span> </span>'
+          );
+        }
+      });
+
+      it('should correctly invert colors', () => {
+        lineData[0] = [(FLAGS.INVERSE << 18) | (2 << 9) | (1 << 0), 'a', 1, 'a'.charCodeAt(0)];
+        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-fg-1 xterm-bg-2">a</span>' +
+          '<span> </span>'
+        );
+      });
+
+      it('should correctly invert default fg color', () => {
+        lineData[0] = [(FLAGS.INVERSE << 18) | (257 << 9) | (1 << 0), 'a', 1, 'a'.charCodeAt(0)];
+        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-fg-1 xterm-bg-15">a</span>' +
+          '<span> </span>'
+        );
+      });
+
+      it('should correctly invert default bg color', () => {
+        lineData[0] = [(FLAGS.INVERSE << 18) | (1 << 9) | (256 << 0), 'a', 1, 'a'.charCodeAt(0)];
+        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-fg-0 xterm-bg-1">a</span>' +
+          '<span> </span>'
+        );
+      });
+
+      it('should turn bold fg text bright', () => {
+        for (let i = 0; i < 8; i++) {
+          lineData[0] = [(FLAGS.BOLD << 18) | (i << 9) | (256 << 0), 'a', 1, 'a'.charCodeAt(0)];
+          const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+          assert.equal(getFragmentHtml(fragment),
+            `<span class="xterm-bold xterm-fg-${i + 8}">a</span>` +
+            '<span> </span>'
+          );
+        }
+      });
+    });
+  });
+
+  function getFragmentHtml(fragment: DocumentFragment): string {
+    const element = dom.window.document.createElement('div');
+    element.appendChild(fragment);
+    return element.innerHTML;
+  }
+
+  function createEmptyLineData(cols: number): LineData {
+    const lineData: LineData = [];
+    for (let i = 0; i < cols; i++) {
+      lineData.push([DEFAULT_ATTR, ' ', 1, 32 /* ' '.charCodeAt(0) */]);
+    }
+    return lineData;
+  }
+});

src/renderer/dom/DomRendererRowFactory.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { LineData } from '../../Types';
+import { CHAR_DATA_CHAR_INDEX, CHAR_DATA_ATTR_INDEX, CHAR_DATA_WIDTH_INDEX } from '../../Buffer';
+import { FLAGS } from '../Types';
+
+export const BOLD_CLASS = 'xterm-bold';
+export const ITALIC_CLASS = 'xterm-italic';
+export const CURSOR_CLASS = 'xterm-cursor';
+
+export class DomRendererRowFactory {
+  constructor(
+    private _document: Document
+  ) {
+  }
+
+  public createRow(lineData: LineData, isCursorRow: boolean, cursorX: number, cellWidth: number, cols: number): DocumentFragment {
+    const fragment = this._document.createDocumentFragment();
+    let colCount = 0;
+
+    for (let x = 0; x < lineData.length; x++) {
+      // Don't allow any buffer to the right to be displayed
+      if (colCount >= cols) {
+        continue;
+      }
+
+      const charData = lineData[x];
+      const char: string = charData[CHAR_DATA_CHAR_INDEX];
+      const attr: number = charData[CHAR_DATA_ATTR_INDEX];
+      const width: number = charData[CHAR_DATA_WIDTH_INDEX];
+
+      // The character to the left is a wide character, drawing is owned by the char at x-1
+      if (width === 0) {
+        continue;
+      }
+
+      const charElement = this._document.createElement('span');
+      if (width > 1) {
+        charElement.style.width = `${cellWidth * width}px`;
+      }
+
+      const flags = attr >> 18;
+      let bg = attr & 0x1ff;
+      let fg = (attr >> 9) & 0x1ff;
+
+      if (isCursorRow && x === cursorX) {
+        charElement.classList.add(CURSOR_CLASS);
+      }
+
+      // If inverse flag is on, the foreground should become the background.
+      if (flags & FLAGS.INVERSE) {
+        const temp = bg;
+        bg = fg;
+        fg = temp;
+        if (fg === 256) {
+          fg = 0;
+        }
+        if (bg === 257) {
+          bg = 15;
+        }
+      }
+
+      if (flags & FLAGS.BOLD) {
+        // Convert the FG color to the bold variant
+        if (fg < 8) {
+          fg += 8;
+        }
+        charElement.classList.add(BOLD_CLASS);
+      }
+
+      if (flags & FLAGS.ITALIC) {
+        charElement.classList.add(ITALIC_CLASS);
+      }
+
+      charElement.textContent = char;
+      if (fg !== 257) {
+        charElement.classList.add(`xterm-fg-${fg}`);
+      }
+      if (bg !== 256) {
+        charElement.classList.add(`xterm-bg-${bg}`);
+      }
+      fragment.appendChild(charElement);
+      colCount += width;
+    }
+    return fragment;
+  }
+}