Merge remote-tracking branch 'ups/v3' into v3

src/utils/Browser.ts

@@ -1,6 +1,5 @@
 /**
- * Attributes and methods to help with identifying the current browser and platform.
- * @module xterm/utils/Browser
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/utils/CharMeasure.test.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
@@ -25,13 +26,13 @@ describe('CharMeasure', () => {
 
   describe('measure', () => {
     it('should set _measureElement on first call', () => {
-      charMeasure.measure();
+      charMeasure.measure({});
       assert.isDefined((<any>charMeasure)._measureElement, 'CharMeasure.measure should have created _measureElement');
     });
 
     it('should be performed async on first call', done => {
       assert.equal(charMeasure.width, null);
-      charMeasure.measure();
+      charMeasure.measure({});
       // Mock getBoundingClientRect since jsdom doesn't have a layout engine
       (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
         return { width: 1, height: 1 };
@@ -44,7 +45,7 @@ describe('CharMeasure', () => {
     });
 
     it('should be performed sync on successive calls', done => {
-      charMeasure.measure();
+      charMeasure.measure({});
       // Mock getBoundingClientRect since jsdom doesn't have a layout engine
       (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
         return { width: 1, height: 1 };
@@ -55,19 +56,19 @@ describe('CharMeasure', () => {
         (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
           return { width: 2, height: 2 };
         };
-        charMeasure.measure();
+        charMeasure.measure({});
         assert.equal(charMeasure.width, firstWidth * 2);
         done();
       }, 0);
     });
 
     it('should NOT do a measure when the parent is hidden', done => {
-      charMeasure.measure();
+      charMeasure.measure({});
       setTimeout(() => {
         const firstWidth = charMeasure.width;
         container.style.display = 'none';
         container.style.fontSize = '2em';
-        charMeasure.measure();
+        charMeasure.measure({});
         assert.equal(charMeasure.width, firstWidth);
         done();
       }, 0);

src/utils/CharMeasure.ts

@@ -1,14 +1,17 @@
 /**
- * @module xterm/utils/CharMeasure
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
 import { EventEmitter } from '../EventEmitter.js';
+import { ICharMeasure, ITerminal, ITerminalOptions } from '../Interfaces';
 
 /**
- * Utility class that measures the size of a character.
+ * Utility class that measures the size of a character. Measurements are done in
+ * the DOM rather than with a canvas context because support for extracting the
+ * height of characters is patchy across browsers.
  */
-export class CharMeasure extends EventEmitter {
+export class CharMeasure extends EventEmitter implements ICharMeasure {
   private _document: Document;
   private _parentElement: HTMLElement;
   private _measureElement: HTMLElement;
@@ -29,24 +32,27 @@ export class CharMeasure extends EventEmitter {
     return this._height;
   }
 
-  public measure(): void {
+  public measure(options: ITerminalOptions): void {
     if (!this._measureElement) {
       this._measureElement = this._document.createElement('span');
       this._measureElement.style.position = 'absolute';
       this._measureElement.style.top = '0';
       this._measureElement.style.left = '-9999em';
+      this._measureElement.style.lineHeight = 'normal';
       this._measureElement.textContent = 'W';
       this._measureElement.setAttribute('aria-hidden', 'true');
       this._parentElement.appendChild(this._measureElement);
       // Perform _doMeasure async if the element was just attached as sometimes
       // getBoundingClientRect does not return accurate values without this.
-      setTimeout(() => this._doMeasure(), 0);
+      setTimeout(() => this._doMeasure(options), 0);
     } else {
-      this._doMeasure();
+      this._doMeasure(options);
     }
   }
 
-  private _doMeasure(): void {
+  private _doMeasure(options: ITerminalOptions): void {
+    this._measureElement.style.fontFamily = options.fontFamily;
+    this._measureElement.style.fontSize = `${options.fontSize}px`;
     const geometry = this._measureElement.getBoundingClientRect();
     // The element is likely currently display:none, we should retain the
     // previous value.
@@ -55,7 +61,7 @@ export class CharMeasure extends EventEmitter {
     }
     if (this._width !== geometry.width || this._height !== geometry.height) {
       this._width = geometry.width;
-      this._height = geometry.height;
+      this._height = Math.ceil(geometry.height);
       this.emit('charsizechanged');
     }
   }

src/utils/CircularList.test.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/utils/CircularList.ts

@@ -1,13 +1,15 @@
 /**
- * Represents a circular list; a list with a maximum size that wraps around when push is called,
- * overriding values at the start of the list.
- * @module xterm/utils/CircularList
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
 import { EventEmitter } from '../EventEmitter';
 import { ICircularList } from '../Interfaces';
 
+/**
+ * Represents a circular list; a list with a maximum size that wraps around when push is called,
+ * overriding values at the start of the list.
+ */
 export class CircularList<T> extends EventEmitter implements ICircularList<T> {
   protected _array: T[];
   private _startIndex: number;

src/utils/DomElementObjectPool.test.ts

@@ -1,51 +0,0 @@
-/**
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { DomElementObjectPool } from './DomElementObjectPool';
-
-class MockDocument {
-  private _attr: {[key: string]: string} = {};
-  constructor() {}
-  public getAttribute(key: string): string { return this._attr[key]; };
-  public setAttribute(key: string, value: string): void { this._attr[key] = value; }
-}
-
-describe('DomElementObjectPool', () => {
-  let pool: DomElementObjectPool;
-
-  beforeEach(() => {
-    pool = new DomElementObjectPool('span');
-    (<any>global).document = {
-      createElement: () => new MockDocument()
-    };
-  });
-
-  it('should acquire distinct elements', () => {
-    const element1 = pool.acquire();
-    const element2 = pool.acquire();
-    assert.notEqual(element1, element2);
-  });
-
-  it('should acquire released elements', () => {
-    const element = pool.acquire();
-    pool.release(element);
-    assert.equal(pool.acquire(), element);
-  });
-
-  it('should handle a series of acquisitions and releases', () => {
-    const element1 = pool.acquire();
-    const element2 = pool.acquire();
-    pool.release(element1);
-    assert.equal(pool.acquire(), element1);
-    pool.release(element1);
-    pool.release(element2);
-    assert.equal(pool.acquire(), element2);
-    assert.equal(pool.acquire(), element1);
-  });
-
-  it('should throw when releasing an element that was not acquired', () => {
-    assert.throws(() => pool.release(document.createElement('span')));
-  });
-});

src/utils/DomElementObjectPool.ts

@@ -1,75 +0,0 @@
-/**
- * @module xterm/utils/DomElementObjectPool
- * @license MIT
- */
-
-/**
- * An object pool that manages acquisition and releasing of DOM elements for
- * when reuse is desirable.
- */
-export class DomElementObjectPool {
-  private static readonly OBJECT_ID_ATTRIBUTE = 'data-obj-id';
-
-  private static _objectCount = 0;
-
-  private _type: string;
-  private _pool: HTMLElement[];
-  private _inUse: {[key: string]: HTMLElement};
-
-  /**
-   * @param type The DOM element type (div, span, etc.).
-   */
-  constructor(private type: string) {
-    this._type = type;
-    this._pool = [];
-    this._inUse = {};
-  }
-
-  /**
-   * Acquire an element from the pool, creating it if the pool is empty.
-   */
-  public acquire(): HTMLElement {
-    let element: HTMLElement;
-    if (this._pool.length === 0) {
-      element = this._createNew();
-    } else {
-      element = this._pool.pop();
-    }
-    this._inUse[element.getAttribute(DomElementObjectPool.OBJECT_ID_ATTRIBUTE)] = element;
-    return element;
-  }
-
-  /**
-   * Release an element back into the pool. It's up to the caller of this
-   * function to ensure that all external references to the element have been
-   * removed.
-   * @param element The element being released.
-   */
-  public release(element: HTMLElement): void {
-    if (!this._inUse[element.getAttribute(DomElementObjectPool.OBJECT_ID_ATTRIBUTE)]) {
-      throw new Error('Could not release an element not yet acquired');
-    }
-    delete this._inUse[element.getAttribute(DomElementObjectPool.OBJECT_ID_ATTRIBUTE)];
-    this._cleanElement(element);
-    this._pool.push(element);
-  }
-
-  /**
-   * Creates a new element for the pool.
-   */
-  private _createNew(): HTMLElement {
-    const element = document.createElement(this._type);
-    const id = DomElementObjectPool._objectCount++;
-    element.setAttribute(DomElementObjectPool.OBJECT_ID_ATTRIBUTE, id.toString(10));
-    return element;
-  }
-
-  /**
-   * Resets an element back to a "clean state".
-   * @param element The element to be cleaned.
-   */
-  private _cleanElement(element: HTMLElement): void {
-    element.className = '';
-    element.innerHTML = '';
-  }
-}

src/utils/Generic.ts

@@ -1,6 +1,5 @@
 /**
- * Generic utilities module with methods that can be helpful at different parts of the code base.
- * @module xterm/utils/Generic
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/utils/Mouse.ts

@@ -1,88 +0,0 @@
-/**
- * @license MIT
- */
-
-import { CharMeasure } from './CharMeasure';
-
-export function getCoordsRelativeToElement(event: MouseEvent, element: HTMLElement): [number, number] {
-  // Ignore browsers that don't support MouseEvent.pageX
-  if (event.pageX == null) {
-    return null;
-  }
-
-  const originalElement = element;
-  let x = event.pageX;
-  let y = event.pageY;
-
-  // Converts the coordinates from being relative to the document to being
-  // relative to the terminal.
-  while (element && element !== self.document.documentElement) {
-    x -= element.offsetLeft;
-    y -= element.offsetTop;
-    element = 'offsetParent' in element ? <HTMLElement>element.offsetParent : <HTMLElement>element.parentElement;
-  }
-  element = originalElement;
-  while (element && element !== self.document.body) {
-    x += element.scrollLeft;
-    y += element.scrollTop;
-    element = <HTMLElement>element.parentElement;
-  }
-  return [x, y];
-}
-
-/**
- * Gets coordinates within the terminal for a particular mouse event. The result
- * is returned as an array in the form [x, y] instead of an object as it's a
- * little faster and this function is used in some low level code.
- * @param event The mouse event.
- * @param rowContainer The terminal's row container.
- * @param charMeasure The char measure object used to determine character sizes.
- * @param colCount The number of columns in the terminal.
- * @param rowCount The number of rows n the terminal.
- * @param isSelection Whether the request is for the selection or not. This will
- * apply an offset to the x value such that the left half of the cell will
- * select that cell and the right half will select the next cell.
- */
-export function getCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, colCount: number, rowCount: number, isSelection?: boolean): [number, number] {
-  // Coordinates cannot be measured if charMeasure has not been initialized
-  if (!charMeasure.width || !charMeasure.height) {
-    return null;
-  }
-
-  const coords = getCoordsRelativeToElement(event, rowContainer);
-  if (!coords) {
-    return null;
-  }
-
-  // Convert to cols/rows.
-  coords[0] = Math.ceil((coords[0] + (isSelection ? charMeasure.width / 2 : 0)) / charMeasure.width);
-  coords[1] = Math.ceil(coords[1] / charMeasure.height);
-
-  // Ensure coordinates are within the terminal viewport.
-  coords[0] = Math.min(Math.max(coords[0], 1), colCount + 1);
-  coords[1] = Math.min(Math.max(coords[1], 1), rowCount + 1);
-
-  return coords;
-}
-
-/**
- * Gets coordinates within the terminal for a particular mouse event, wrapping
- * them to the bounds of the terminal and adding 32 to both the x and y values
- * as expected by xterm.
- * @param event The mouse event.
- * @param rowContainer The terminal's row container.
- * @param charMeasure The char measure object used to determine character sizes.
- * @param colCount The number of columns in the terminal.
- * @param rowCount The number of rows in the terminal.
- */
-export function getRawByteCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, colCount: number, rowCount: number): { x: number, y: number } {
-  const coords = getCoords(event, rowContainer, charMeasure, colCount, rowCount);
-  let x = coords[0];
-  let y = coords[1];
-
-  // xterm sends raw bytes and starts at 32 (SP) for each.
-  x += 32;
-  y += 32;
-
-  return { x, y };
-}

src/utils/MouseHelper.test.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import jsdom = require('jsdom');
+import { assert } from 'chai';
+import { MouseHelper } from './MouseHelper';
+import { MockCharMeasure, MockRenderer } from './TestUtils.test';
+
+const CHAR_WIDTH = 10;
+const CHAR_HEIGHT = 20;
+
+describe('MouseHelper.getCoords', () => {
+  let dom: jsdom.JSDOM;
+  let window: Window;
+  let document: Document;
+  let mouseHelper: MouseHelper;
+
+  let charMeasure: MockCharMeasure;
+
+  beforeEach(() => {
+    dom = new jsdom.JSDOM('');
+    window = dom.window;
+    document = window.document;
+    charMeasure = new MockCharMeasure();
+    charMeasure.width = CHAR_WIDTH;
+    charMeasure.height = CHAR_HEIGHT;
+    const renderer = new MockRenderer();
+    renderer.dimensions = <any>{
+      actualCellWidth: CHAR_WIDTH,
+      actualCellHeight: CHAR_HEIGHT
+    };
+    mouseHelper = new MouseHelper(renderer);
+  });
+
+  describe('when charMeasure is not initialized', () => {
+    it('should return null', () => {
+      charMeasure = new MockCharMeasure();
+      assert.equal(mouseHelper.getCoords({ pageX: 0, pageY: 0 }, document.createElement('div'), charMeasure, 1, 10, 10), null);
+    });
+  });
+
+  describe('when pageX/pageY are not supported', () => {
+    it('should return null', () => {
+      assert.equal(mouseHelper.getCoords({ pageX: undefined, pageY: undefined }, document.createElement('div'), charMeasure, 1, 10, 10), null);
+    });
+  });
+
+  it('should return the cell that was clicked', () => {
+    let coords: [number, number];
+    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH / 2, pageY: CHAR_HEIGHT / 2 }, document.createElement('div'), charMeasure, 1, 10, 10);
+    assert.deepEqual(coords, [1, 1]);
+    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH, pageY: CHAR_HEIGHT }, document.createElement('div'), charMeasure, 1, 10, 10);
+    assert.deepEqual(coords, [1, 1]);
+    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH, pageY: CHAR_HEIGHT + 1 }, document.createElement('div'), charMeasure, 1, 10, 10);
+    assert.deepEqual(coords, [1, 2]);
+    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH + 1, pageY: CHAR_HEIGHT }, document.createElement('div'), charMeasure, 1, 10, 10);
+    assert.deepEqual(coords, [2, 1]);
+  });
+
+  it('should ensure the coordinates are returned within the terminal bounds', () => {
+    let coords: [number, number];
+    coords = mouseHelper.getCoords({ pageX: -1, pageY: -1 }, document.createElement('div'), charMeasure, 1, 10, 10);
+    assert.deepEqual(coords, [1, 1]);
+    // Event are double the cols/rows
+    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH * 20, pageY: CHAR_HEIGHT * 20 }, document.createElement('div'), charMeasure, 1, 10, 10);
+    assert.deepEqual(coords, [10, 10], 'coordinates should never come back as larger than the terminal');
+  });
+});

src/utils/MouseHelper.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICharMeasure } from '../Interfaces';
+import { IRenderer } from '../renderer/Interfaces';
+
+export class MouseHelper {
+  constructor(private _renderer: IRenderer) {}
+
+  public static getCoordsRelativeToElement(event: {pageX: number, pageY: number}, element: HTMLElement): [number, number] {
+    // Ignore browsers that don't support MouseEvent.pageX
+    if (event.pageX == null) {
+      return null;
+    }
+
+    const originalElement = element;
+    let x = event.pageX;
+    let y = event.pageY;
+
+    // Converts the coordinates from being relative to the document to being
+    // relative to the terminal.
+    while (element) {
+      x -= element.offsetLeft;
+      y -= element.offsetTop;
+      element = 'offsetParent' in element ? <HTMLElement>element.offsetParent : <HTMLElement>element.parentElement;
+    }
+    element = originalElement;
+    while (element && element !== self.document.body) {
+      x += element.scrollLeft;
+      y += element.scrollTop;
+      element = <HTMLElement>element.parentElement;
+    }
+    return [x, y];
+  }
+
+  /**
+   * Gets coordinates within the terminal for a particular mouse event. The result
+   * is returned as an array in the form [x, y] instead of an object as it's a
+   * little faster and this function is used in some low level code.
+   * @param event The mouse event.
+   * @param element The terminal's container element.
+   * @param charMeasure The char measure object used to determine character sizes.
+   * @param colCount The number of columns in the terminal.
+   * @param rowCount The number of rows n the terminal.
+   * @param isSelection Whether the request is for the selection or not. This will
+   * apply an offset to the x value such that the left half of the cell will
+   * select that cell and the right half will select the next cell.
+   */
+  public getCoords(event: {pageX: number, pageY: number}, element: HTMLElement, charMeasure: ICharMeasure, lineHeight: number, colCount: number, rowCount: number, isSelection?: boolean): [number, number] {
+    // Coordinates cannot be measured if charMeasure has not been initialized
+    if (!charMeasure.width || !charMeasure.height) {
+      return null;
+    }
+
+    const coords = MouseHelper.getCoordsRelativeToElement(event, element);
+    if (!coords) {
+      return null;
+    }
+
+    coords[0] = Math.ceil((coords[0] + (isSelection ? this._renderer.dimensions.actualCellWidth / 2 : 0)) / this._renderer.dimensions.actualCellWidth);
+    coords[1] = Math.ceil(coords[1] / this._renderer.dimensions.actualCellHeight);
+
+    // Ensure coordinates are within the terminal viewport.
+    coords[0] = Math.min(Math.max(coords[0], 1), colCount);
+    coords[1] = Math.min(Math.max(coords[1], 1), rowCount);
+
+    return coords;
+  }
+
+  /**
+   * Gets coordinates within the terminal for a particular mouse event, wrapping
+   * them to the bounds of the terminal and adding 32 to both the x and y values
+   * as expected by xterm.
+   * @param event The mouse event.
+   * @param element The terminal's container element.
+   * @param charMeasure The char measure object used to determine character sizes.
+   * @param colCount The number of columns in the terminal.
+   * @param rowCount The number of rows in the terminal.
+   */
+  public getRawByteCoords(event: MouseEvent, element: HTMLElement, charMeasure: ICharMeasure, lineHeight: number, colCount: number, rowCount: number): { x: number, y: number } {
+    const coords = this.getCoords(event, element, charMeasure, lineHeight, colCount, rowCount);
+    let x = coords[0];
+    let y = coords[1];
+
+    // xterm sends raw bytes and starts at 32 (SP) for each.
+    x += 32;
+    y += 32;
+
+    return { x, y };
+  }
+}

src/utils/Sounds.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/utils/TestUtils.test.ts

@@ -1,12 +1,19 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
-import { ITerminal, IBuffer, IBufferSet, IBrowser, ICharMeasure, ISelectionManager, ITerminalOptions, IListenerType, IInputHandlingTerminal, IViewport, ICircularList, ICompositionHelper } from '../Interfaces';
+import { ITerminal, IBuffer, IBufferSet, IBrowser, ICharMeasure, ISelectionManager, ITerminalOptions, IListenerType, IInputHandlingTerminal, IViewport, ICircularList, ICompositionHelper, ITheme, ILinkifier, IMouseHelper } from '../Interfaces';
 import { LineData } from '../Types';
+import { Buffer } from '../Buffer';
 import * as Browser from './Browser';
+import { IColorSet, IRenderer, IRenderDimensions, IColorManager } from '../renderer/Interfaces';
 
 export class MockTerminal implements ITerminal {
+  mouseHelper: IMouseHelper;
+  renderer: IRenderer;
+  linkifier: ILinkifier;
+  isFocused: boolean;
   options: ITerminalOptions = {};
   element: HTMLElement;
   rowContainer: HTMLElement;
@@ -52,16 +59,27 @@ export class MockTerminal implements ITerminal {
   showCursor(): void {
     throw new Error('Method not implemented.');
   }
+  refresh(start: number, end: number): void {
+    throw new Error('Method not implemented.');
+  }
   blankLine(cur?: boolean, isWrapped?: boolean, cols?: number): LineData {
     const line: LineData = [];
     cols = cols || this.cols;
     for (let i = 0; i < cols; i++) {
-      line.push([0, ' ', 1]);
+      line.push([0, ' ', 1, 32]);
     }
     return line;
   }
 }
 
+export class MockCharMeasure implements ICharMeasure {
+  width: number;
+  height: number;
+  measure(options: ITerminalOptions): void {
+    throw new Error('Method not implemented.');
+  }
+}
+
 export class MockInputHandlingTerminal implements IInputHandlingTerminal {
   element: HTMLElement;
   options: ITerminalOptions = {};
@@ -125,7 +143,7 @@ export class MockInputHandlingTerminal implements IInputHandlingTerminal {
   eraseLeft(x: number, y: number): void {
     throw new Error('Method not implemented.');
   }
-  blankLine(cur?: boolean, isWrapped?: boolean): [number, string, number][] {
+  blankLine(cur?: boolean, isWrapped?: boolean): [number, string, number, number][] {
     throw new Error('Method not implemented.');
   }
   prevStop(x?: number): number {
@@ -176,7 +194,8 @@ export class MockInputHandlingTerminal implements IInputHandlingTerminal {
 }
 
 export class MockBuffer implements IBuffer {
-  lines: ICircularList<[number, string, number][]>;
+  isCursorInViewport: boolean;
+  lines: ICircularList<[number, string, number, number][]>;
   ydisp: number;
   ybase: number;
   y: number;
@@ -187,11 +206,45 @@ export class MockBuffer implements IBuffer {
   savedY: number;
   savedX: number;
   translateBufferLineToString(lineIndex: number, trimRight: boolean, startCol?: number, endCol?: number): string {
+    return Buffer.prototype.translateBufferLineToString.apply(this, arguments);
+  }
+  nextStop(x?: number): number {
+    throw new Error('Method not implemented.');
+  }
+  prevStop(x?: number): number {
     throw new Error('Method not implemented.');
   }
 }
 
+export class MockRenderer implements IRenderer {
+  colorManager: IColorManager;
+  on(type: string, listener: IListenerType): void {
+    throw new Error('Method not implemented.');
+  }
+  off(type: string, listener: IListenerType): void {
+    throw new Error('Method not implemented.');
+  }
+  emit(type: string, data?: any): void {
+    throw new Error('Method not implemented.');
+  }
+  dimensions: IRenderDimensions;
+  setTheme(theme: ITheme): IColorSet { return <IColorSet>{}; }
+  onResize(cols: number, rows: number, didCharSizeChange: boolean): void {}
+  onCharSizeChanged(): void {}
+  onBlur(): void {}
+  onFocus(): void {}
+  onSelectionChanged(start: [number, number], end: [number, number]): void {}
+  onCursorMove(): void {}
+  onOptionsChanged(): void {}
+  onWindowResize(devicePixelRatio: number): void {}
+  clear(): void {}
+  queueRefresh(start: number, end: number): void {}
+}
+
 export class MockViewport implements IViewport {
+  onThemeChanged(colors: IColorSet): void {
+    throw new Error('Method not implemented.');
+  }
   onWheel(ev: WheelEvent): void {
     throw new Error('Method not implemented.');
   }