Remove rowContainer and children, disable Linkifier

src/Interfaces.ts

@@ -19,7 +19,6 @@ export interface IBrowser {
 
 export interface ITerminal extends IEventEmitter {
   element: HTMLElement;
-  rowContainer: HTMLElement;
   selectionContainer: HTMLElement;
   selectionManager: ISelectionManager;
   charMeasure: ICharMeasure;
@@ -28,7 +27,6 @@ export interface ITerminal extends IEventEmitter {
   cols: number;
   browser: IBrowser;
   writeBuffer: string[];
-  children: HTMLElement[];
   cursorHidden: boolean;
   cursorState: number;
   defAttr: number;

src/SelectionManager.test.ts

@@ -17,10 +17,9 @@ class TestSelectionManager extends SelectionManager {
   constructor(
     terminal: ITerminal,
     buffer: IBuffer,
-    rowContainer: HTMLElement,
     charMeasure: CharMeasure
   ) {
-    super(terminal, buffer, rowContainer, charMeasure);
+    super(terminal, buffer, charMeasure);
   }
 
   public get model(): SelectionModel { return this._model; }
@@ -48,7 +47,6 @@ describe('SelectionManager', () => {
     dom = new jsdom.JSDOM('');
     window = dom.window;
     document = window.document;
-    rowContainer = document.createElement('div');
     terminal = new MockTerminal();
     terminal.cols = 80;
     terminal.rows = 2;
@@ -56,7 +54,7 @@ describe('SelectionManager', () => {
     terminal.buffers = new BufferSet(terminal);
     terminal.buffer = terminal.buffers.active;
     buffer = terminal.buffer;
-    selectionManager = new TestSelectionManager(terminal, buffer, rowContainer, null);
+    selectionManager = new TestSelectionManager(terminal, buffer, null);
   });
 
   function stringToRow(text: string): LineData {

src/SelectionManager.ts

@@ -98,7 +98,6 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
   constructor(
     private _terminal: ITerminal,
     private _buffer: IBuffer,
-    private _rowContainer: HTMLElement,
     private _charMeasure: CharMeasure
   ) {
     super();
@@ -273,7 +272,7 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
    * @param event The mouse event.
    */
   private _getMouseBufferCoords(event: MouseEvent): [number, number] {
-    const coords = Mouse.getCoords(event, this._rowContainer, this._charMeasure, this._terminal.options.lineHeight, this._terminal.cols, this._terminal.rows, true);
+    const coords = Mouse.getCoords(event, this._terminal.element, this._charMeasure, this._terminal.options.lineHeight, this._terminal.cols, this._terminal.rows, true);
     if (!coords) {
       return null;
     }
@@ -292,7 +291,7 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
    * @param event The mouse event.
    */
   private _getMouseEventScrollAmount(event: MouseEvent): number {
-    let offset = Mouse.getCoordsRelativeToElement(event, this._rowContainer)[1];
+    let offset = Mouse.getCoordsRelativeToElement(event, this._terminal.element)[1];
     const terminalHeight = this._terminal.rows * Math.ceil(this._charMeasure.height * this._terminal.options.lineHeight);
     if (offset >= 0 && offset <= terminalHeight) {
       return 0;
@@ -361,8 +360,8 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
    */
   private _addMouseDownListeners(): void {
     // Listen on the document so that dragging outside of viewport works
-    this._rowContainer.ownerDocument.addEventListener('mousemove', this._mouseMoveListener);
-    this._rowContainer.ownerDocument.addEventListener('mouseup', this._mouseUpListener);
+    this._terminal.element.ownerDocument.addEventListener('mousemove', this._mouseMoveListener);
+    this._terminal.element.ownerDocument.addEventListener('mouseup', this._mouseUpListener);
     this._dragScrollIntervalTimer = setInterval(() => this._dragScroll(), DRAG_SCROLL_INTERVAL);
   }
 
@@ -370,8 +369,8 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
    * Removes the listeners that are registered when mousedown is triggered.
    */
   private _removeMouseDownListeners(): void {
-    this._rowContainer.ownerDocument.removeEventListener('mousemove', this._mouseMoveListener);
-    this._rowContainer.ownerDocument.removeEventListener('mouseup', this._mouseUpListener);
+    this._terminal.element.ownerDocument.removeEventListener('mousemove', this._mouseMoveListener);
+    this._terminal.element.ownerDocument.removeEventListener('mouseup', this._mouseUpListener);
     clearInterval(this._dragScrollIntervalTimer);
     this._dragScrollIntervalTimer = null;
   }

src/Terminal.ts

@@ -31,7 +31,7 @@ import { InputHandler } from './InputHandler';
 import { Parser } from './Parser';
 // import { Renderer } from './Renderer';
 import { Renderer } from './renderer/Renderer';
-import { Linkifier } from './Linkifier';
+// import { Linkifier } from './Linkifier';
 import { SelectionManager } from './SelectionManager';
 import { CharMeasure } from './utils/CharMeasure';
 import * as Browser from './utils/Browser';
@@ -87,7 +87,6 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
 export class Terminal extends EventEmitter implements ITerminal, IInputHandlingTerminal {
   public textarea: HTMLTextAreaElement;
   public element: HTMLElement;
-  public rowContainer: HTMLElement;
 
   /**
    * The HTMLElement that the terminal is created in, set by Terminal.open.
@@ -145,7 +144,6 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
   public urxvtMouse: boolean;
 
   // misc
-  public children: HTMLElement[];
   private refreshStart: number;
   private refreshEnd: number;
   public savedCols: number;
@@ -187,7 +185,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
   private parser: Parser;
   private renderer: Renderer;
   public selectionManager: SelectionManager;
-  private linkifier: Linkifier;
+  // private linkifier: Linkifier;
   public buffers: BufferSet;
   public buffer: Buffer;
   public viewport: IViewport;
@@ -284,7 +282,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     // Reuse renderer if the Terminal is being recreated via a reset call.
     this.renderer = this.renderer || null;
     this.selectionManager = this.selectionManager || null;
-    this.linkifier = this.linkifier || new Linkifier();
+    // this.linkifier = this.linkifier || new Linkifier();
 
     // Create the terminal's buffers and set the current buffer
     this.buffers = new BufferSet(this);
@@ -539,22 +537,6 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     this.on('refresh', (data) => this.queueLinkification(data.start, data.end));
   }
 
-  /**
-   * Insert the given row to the terminal or produce a new one
-   * if no row argument is passed. Return the inserted row.
-   * @param {HTMLElement} row (optional) The row to append to the terminal.
-   */
-  private insertRow(row?: HTMLElement): HTMLElement {
-    if (typeof row !== 'object') {
-      row = document.createElement('div');
-    }
-
-    this.rowContainer.appendChild(row);
-    this.children.push(row);
-
-    return row;
-  };
-
   /**
    * Opens the terminal within an element.
    *
@@ -597,13 +579,8 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     this.selectionContainer.classList.add('xterm-selection');
     this.element.appendChild(this.selectionContainer);
 
-    // Create the container that will hold the lines of the terminal and then
-    // produce the lines the lines.
-    this.rowContainer = document.createElement('div');
-    this.rowContainer.classList.add('xterm-rows');
-    this.element.appendChild(this.rowContainer);
-    this.children = [];
-    this.linkifier.attachToDom(document, this.children);
+    // TODO: Re-enable linkifier
+    // this.linkifier.attachToDom(document, this.children);
 
     // Create the container that will hold helpers like the textarea for
     // capturing DOM Events. Then produce the helpers.
@@ -629,9 +606,6 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     this.charSizeStyleElement = document.createElement('style');
     this.helperContainer.appendChild(this.charSizeStyleElement);
 
-    for (; i < this.rows; i++) {
-      this.insertRow();
-    }
     this.parent.appendChild(this.element);
 
     this.charMeasure = new CharMeasure(document, this.helperContainer);
@@ -648,7 +622,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
       this.renderer.queueRefresh(0, this.rows - 1);
     });
 
-    this.selectionManager = new SelectionManager(this, this.buffer, this.rowContainer, this.charMeasure);
+    this.selectionManager = new SelectionManager(this, this.buffer, this.charMeasure);
     this.element.addEventListener('mousedown', (e: MouseEvent) => this.selectionManager.onMouseDown(e));
     this.selectionManager.on('refresh', data => this.renderer.onSelectionChanged(data.start, data.end));
     this.selectionManager.on('newselection', text => {
@@ -721,7 +695,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
       button = getButton(ev);
 
       // get mouse coordinates
-      pos = getRawByteCoords(ev, self.rowContainer, self.charMeasure, self.options.lineHeight, self.cols, self.rows);
+      pos = getRawByteCoords(ev, self.element, self.charMeasure, self.options.lineHeight, self.cols, self.rows);
       if (!pos) return;
 
       sendEvent(button, pos);
@@ -747,7 +721,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     // ^[[M 3<^[[M@4<^[[M@5<^[[M@6<^[[M@7<^[[M#7<
     function sendMove(ev: MouseEvent): void {
       let button = pressed;
-      let pos = getRawByteCoords(ev, self.rowContainer, self.charMeasure, self.options.lineHeight, self.cols, self.rows);
+      let pos = getRawByteCoords(ev, self.element, self.charMeasure, self.options.lineHeight, self.cols, self.rows);
       if (!pos) return;
 
       // buttons marked as motions
@@ -1033,12 +1007,9 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    * @param {number} end The row to end at (between start and this.rows - 1).
    */
   private queueLinkification(start: number, end: number): void {
-    if (this.linkifier) {
-      this.linkifier.linkifyRows(0, this.rows);
-      // for (let i = start; i <= end; i++) {
-      //   this.linkifier.linkifyRow(i);
-      // }
-    }
+    // if (this.linkifier) {
+    //   this.linkifier.linkifyRows(0, this.rows);
+    // }
   }
 
   /**
@@ -1246,12 +1217,12 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    * @param handler The handler callback function.
    */
   public setHypertextLinkHandler(handler: LinkMatcherHandler): void {
-    if (!this.linkifier) {
-      throw new Error('Cannot attach a hypertext link handler before Terminal.open is called');
-    }
-    this.linkifier.setHypertextLinkHandler(handler);
-    // Refresh to force links to refresh
-    this.refresh(0, this.rows - 1);
+    // if (!this.linkifier) {
+    //   throw new Error('Cannot attach a hypertext link handler before Terminal.open is called');
+    // }
+    // this.linkifier.setHypertextLinkHandler(handler);
+    // // Refresh to force links to refresh
+    // this.refresh(0, this.rows - 1);
   }
 
   /**
@@ -1261,12 +1232,12 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    * be cleared with null.
    */
   public setHypertextValidationCallback(callback: LinkMatcherValidationCallback): void {
-    if (!this.linkifier) {
-      throw new Error('Cannot attach a hypertext validation callback before Terminal.open is called');
-    }
-    this.linkifier.setHypertextValidationCallback(callback);
-    // Refresh to force links to refresh
-    this.refresh(0, this.rows - 1);
+    // if (!this.linkifier) {
+    //   throw new Error('Cannot attach a hypertext validation callback before Terminal.open is called');
+    // }
+    // this.linkifier.setHypertextValidationCallback(callback);
+    // // Refresh to force links to refresh
+    // this.refresh(0, this.rows - 1);
   }
 
   /**
@@ -1280,11 +1251,12 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    * @return The ID of the new matcher, this can be used to deregister.
    */
   public registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options?: ILinkMatcherOptions): number {
-    if (this.linkifier) {
-      const matcherId = this.linkifier.registerLinkMatcher(regex, handler, options);
-      this.refresh(0, this.rows - 1);
-      return matcherId;
-    }
+    // if (this.linkifier) {
+    //   const matcherId = this.linkifier.registerLinkMatcher(regex, handler, options);
+    //   this.refresh(0, this.rows - 1);
+    //   return matcherId;
+    // }
+    return 0;
   }
 
   /**
@@ -1292,11 +1264,11 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    * @param matcherId The link matcher's ID (returned after register)
    */
   public deregisterLinkMatcher(matcherId: number): void {
-    if (this.linkifier) {
-      if (this.linkifier.deregisterLinkMatcher(matcherId)) {
-        this.refresh(0, this.rows - 1);
-      }
-    }
+    // if (this.linkifier) {
+    //   if (this.linkifier.deregisterLinkMatcher(matcherId)) {
+    //     this.refresh(0, this.rows - 1);
+    //   }
+    // }
   }
 
   /**
@@ -1794,13 +1766,6 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
       return;
     }
 
-    let line;
-    let el;
-    let i;
-    let j;
-    let ch;
-    let addToY;
-
     if (x === this.cols && y === this.rows) {
       // Check if we still need to measure the char size (fixes #785).
       if (!this.charMeasure.width || !this.charMeasure.height) {
@@ -1814,16 +1779,6 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
 
     this.buffers.resize(x, y);
 
-    // Adjust rows in the DOM to accurately reflect the new dimensions
-    while (this.children.length < y) {
-      this.insertRow();
-    }
-    while (this.children.length > y) {
-      el = this.children.shift();
-      if (!el) continue;
-      el.parentNode.removeChild(el);
-    }
-
     this.cols = x;
     this.rows = y;
     this.buffers.setupTabStops(this.cols);

src/Viewport.test.ts

@@ -55,18 +55,6 @@ describe('Viewport', () => {
   });
 
   describe('refresh', () => {
-    it('should set the line-height of the terminal', done => {
-      // Allow CharMeasure to be initialized
-      setTimeout(() => {
-        assert.equal(viewportElement.style.lineHeight, CHARACTER_HEIGHT + 'px');
-        assert.equal(terminal.rowContainer.style.lineHeight, CHARACTER_HEIGHT + 'px');
-        charMeasure.height = 1;
-        viewport.refresh();
-        assert.equal(viewportElement.style.lineHeight, '1px');
-        assert.equal(terminal.rowContainer.style.lineHeight, '1px');
-        done();
-      }, 0);
-    });
     it('should set the height of the viewport when the line-height changed', () => {
       terminal.buffer.lines.push('');
       terminal.buffer.lines.push('');

src/Viewport.ts

@@ -51,7 +51,7 @@ export class Viewport implements IViewport {
       if (rowHeightChanged) {
         this.currentRowHeight = lineHeight;
         this.viewportElement.style.lineHeight = lineHeight + 'px';
-        this.terminal.rowContainer.style.lineHeight = lineHeight + 'px';
+        this.terminal.element.style.lineHeight = lineHeight + 'px';
       }
       const viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
       if (rowHeightChanged || viewportHeightChanged) {

src/addons/fit/fit.js

@@ -35,18 +35,14 @@
     if (!term.element.parentElement) {
       return null;
     }
-    var parentElementStyle = window.getComputedStyle(term.element.parentElement),
-        parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
-        parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17),
-        elementStyle = window.getComputedStyle(term.element),
-        elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
-        elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')),
-        availableHeight = parentElementHeight - elementPaddingVer,
-        availableWidth = parentElementWidth - elementPaddingHor,
-        container = term.rowContainer,
-        subjectRow = term.rowContainer.firstElementChild,
-        contentBuffer = subjectRow.innerHTML;
-
+    var parentElementStyle = window.getComputedStyle(term.element.parentElement);
+    var parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));
+    var parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17);
+    var elementStyle = window.getComputedStyle(term.element);
+    var elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom'));
+    var elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left'));
+    var availableHeight = parentElementHeight - elementPaddingVer;
+    var availableWidth = parentElementWidth - elementPaddingHor;
     var geometry = {
       cols: parseInt(availableWidth / term.charMeasure.width, 10),
       rows: parseInt(availableHeight / (term.charMeasure.height * term.getOption('lineHeight')), 10)

src/utils/Mouse.ts

@@ -28,7 +28,7 @@ export function getCoordsRelativeToElement(event: MouseEvent, element: HTMLEleme
  * 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 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.
@@ -36,13 +36,13 @@ export function getCoordsRelativeToElement(event: MouseEvent, element: HTMLEleme
  * 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, lineHeight: number, colCount: number, rowCount: number, isSelection?: boolean): [number, number] {
+export function getCoords(event: MouseEvent, element: HTMLElement, charMeasure: CharMeasure, 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 = getCoordsRelativeToElement(event, rowContainer);
+  const coords = getCoordsRelativeToElement(event, element);
   if (!coords) {
     return null;
   }
@@ -63,13 +63,13 @@ export function getCoords(event: MouseEvent, rowContainer: HTMLElement, charMeas
  * 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 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.
  */
-export function getRawByteCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, lineHeight: number, colCount: number, rowCount: number): { x: number, y: number } {
-  const coords = getCoords(event, rowContainer, charMeasure, lineHeight, colCount, rowCount);
+export function getRawByteCoords(event: MouseEvent, element: HTMLElement, charMeasure: CharMeasure, lineHeight: number, colCount: number, rowCount: number): { x: number, y: number } {
+  const coords = getCoords(event, element, charMeasure, lineHeight, colCount, rowCount);
   let x = coords[0];
   let y = coords[1];