Merge pull request #2547 from Tyriar/layering5

Move remaining renderer parts into browser

addons/xterm-addon-webgl/src/WebglRenderer.ts

@@ -15,13 +15,14 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { RenderModel, COMBINED_CHAR_BIT_MASK } from './RenderModel';
 import { Disposable } from 'common/Lifecycle';
 import { DEFAULT_COLOR, CHAR_DATA_CHAR_INDEX, CHAR_DATA_CODE_INDEX, NULL_CELL_CODE } from 'common/buffer/Constants';
-import { Terminal } from 'xterm';
+import { Terminal, IEvent } from 'xterm';
 import { getLuminance } from './ColorUtils';
 import { IRenderLayer } from './renderLayer/Types';
-import { IRenderDimensions, IRenderer } from 'browser/renderer/Types';
+import { IRenderDimensions, IRenderer, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
 import { IColorSet } from 'browser/Types';
 import { FLAGS } from './Constants';
 import { getCompatAttr } from './CharDataCompat';
+import { EventEmitter } from 'common/EventEmitter';
 
 export const INDICIES_PER_CELL = 4;
 
@@ -41,6 +42,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   private _core: ITerminal;
 
+  private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
+  public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
+
   constructor(
     private _terminal: Terminal,
     private _colors: IColorSet,
@@ -54,7 +58,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     this._renderLayers = [
       new LinkRenderLayer(this._core.screenElement, 2, this._colors, this._core),
-      new CursorRenderLayer(this._core.screenElement, 3, this._colors)
+      new CursorRenderLayer(this._core.screenElement, 3, this._colors, this._onRequestRefreshRows)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -186,7 +190,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._glyphRenderer.updateSelection(this._model, columnSelectMode);
 
     // TODO: #2102 Should this move to RenderCoordinator?
-    this._core.refresh(0, this._terminal.rows - 1);
+    this._onRequestRefreshRows.fire({ start: 0, end: this._terminal.rows - 1 });
   }
 
   public onCursorMove(): void {

addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts

@@ -8,7 +8,8 @@ import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IColorSet } from 'browser/Types';
-import { IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderDimensions, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { IEventEmitter } from 'common/EventEmitter';
 
 interface ICursorState {
   x: number;
@@ -29,7 +30,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _cursorBlinkStateManager: CursorBlinkStateManager | undefined;
   private _cell: ICellData = new CellData();
 
-  constructor(container: HTMLElement, zIndex: number, colors: IColorSet) {
+  constructor(
+    container: HTMLElement,
+    zIndex: number,
+    colors: IColorSet,
+    private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRefreshRowsEvent>
+  ) {
     super(container, 'cursor', zIndex, true, colors);
     this._state = {
       x: 0,
@@ -70,14 +76,14 @@ export class CursorRenderLayer extends BaseRenderLayer {
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.pause();
     }
-    terminal.refresh(terminal.buffer.cursorY, terminal.buffer.cursorY);
+    this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.cursorY, end: terminal.buffer.cursorY });
   }
 
   public onFocus(terminal: Terminal): void {
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.resume(terminal);
     } else {
-      terminal.refresh(terminal.buffer.cursorY, terminal.buffer.cursorY);
+      this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.cursorY, end: terminal.buffer.cursorY });
     }
   }
 
@@ -89,13 +95,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
         });
       }
     } else {
-      if (this._cursorBlinkStateManager) {
-        this._cursorBlinkStateManager.dispose();
-      }
+      this._cursorBlinkStateManager?.dispose();
+      this._cursorBlinkStateManager = undefined;
     }
     // Request a refresh from the terminal as management of rendering is being
     // moved back to the terminal
-    terminal.refresh(terminal.buffer.cursorY, terminal.buffer.cursorY);
+    this._onRequestRefreshRowsEvent.fire({ start: terminal.buffer.cursorY, end: terminal.buffer.cursorY });
   }
 
   public onCursorMove(terminal: Terminal): void {
@@ -115,7 +120,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _render(terminal: Terminal, triggeredByAnimationFrame: boolean): void {
     // Don't draw the cursor if it's hidden
     // TODO: Need to expose API for this
-    if (!(terminal as any)._core.cursorState || (terminal as any)._core.cursorHidden) {
+    if (!(terminal as any)._core._coreService.isCursorInitialized || (terminal as any)._core._coreService.isCursorHidden) {
       this._clearCursor();
       return;
     }

src/InputHandler.ts

@@ -1449,7 +1449,7 @@ export class InputHandler extends Disposable implements IInputHandler {
           this._logService.debug('DECSET 1015 not supported (see #2507)');
           break;
         case 25: // show cursor
-          this._terminal.cursorHidden = false;
+          this._coreService.isCursorHidden = false;
           break;
         case 1048: // alt screen cursor
           this.saveCursor();
@@ -1620,7 +1620,7 @@ export class InputHandler extends Disposable implements IInputHandler {
         this._logService.debug('DECRST 1015 not supported (see #2507)');
           break;
         case 25: // hide cursor
-          this._terminal.cursorHidden = true;
+          this._coreService.isCursorHidden = true;
           break;
         case 1048: // alt screen cursor
           this.restoreCursor();
@@ -1954,7 +1954,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * http://vt100.net/docs/vt220-rm/table4-10.html
    */
   public softReset(params: IParams): void {
-    this._terminal.cursorHidden = false;
+    this._coreService.isCursorHidden = false;
     this._terminal.insertMode = false;
     this._terminal.originMode = false;
     this._terminal.wraparoundMode = true;  // defaults: xterm - true, vt100 - false

src/Terminal.test.ts

@@ -163,17 +163,6 @@ describe('Terminal', () => {
     });
   });
 
-  describe('reset', () => {
-    it('should not affect cursorState', () => {
-      term.cursorState = 1;
-      term.reset();
-      assert.equal(term.cursorState, 1);
-      term.cursorState = 0;
-      term.reset();
-      assert.equal(term.cursorState, 0);
-    });
-  });
-
   describe('clear', () => {
     it('should clear a buffer equal to rows', () => {
       const promptLine = term.buffer.lines.get(term.buffer.ybase + term.buffer.y);

src/Terminal.ts

@@ -28,7 +28,7 @@ import { Viewport } from 'browser/Viewport';
 import { rightClickHandler, moveTextAreaUnderMouseCursor, handlePasteEvent, copyHandler, paste } from 'browser/Clipboard';
 import { C0 } from 'common/data/EscapeSequences';
 import { InputHandler } from './InputHandler';
-import { Renderer } from './renderer/Renderer';
+import { Renderer } from 'browser/renderer/Renderer';
 import { Linkifier } from 'browser/Linkifier';
 import { SelectionService } from 'browser/services/SelectionService';
 import * as Browser from 'common/Platform';
@@ -38,7 +38,7 @@ import { SoundService } from 'browser/services/SoundService';
 import { MouseZoneManager } from 'browser/MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
 import { ITheme, IMarker, IDisposable, ISelectionPosition } from 'xterm';
-import { DomRenderer } from './renderer/dom/DomRenderer';
+import { DomRenderer } from 'browser/renderer/dom/DomRenderer';
 import { IKeyboardEvent, KeyboardResultType, ICharset, IBufferLine, IAttributeData, CoreMouseEventType, CoreMouseButton, CoreMouseAction } from 'common/Types';
 import { evaluateKeyboardEvent } from 'common/input/Keyboard';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
@@ -48,7 +48,7 @@ import { ColorManager } from 'browser/ColorManager';
 import { RenderService } from 'browser/services/RenderService';
 import { IOptionsService, IBufferService, ICoreMouseService, ICoreService, ILogService, IDirtyRowService, IInstantiationService } from 'common/services/Services';
 import { OptionsService } from 'common/services/OptionsService';
-import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService } from 'browser/services/Services';
+import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService } from 'browser/services/Services';
 import { CharSizeService } from 'browser/services/CharSizeService';
 import { BufferService, MINIMUM_COLS, MINIMUM_ROWS } from 'common/services/BufferService';
 import { Disposable } from 'common/Lifecycle';
@@ -63,6 +63,7 @@ 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 { CoreBrowserService } from 'browser/services/CoreBrowserService';
 
 // Let it work inside Node.js for automated testing purposes.
 const document = (typeof window !== 'undefined') ? window.document : null;
@@ -90,10 +91,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
   // TODO: We should remove options once components adopt optionsService
   public get options(): ITerminalOptions { return this.optionsService.options; }
 
-  // TODO: This can be changed to an enum or boolean, 0 and 1 seem to be the only options
-  public cursorState: number;
-  public cursorHidden: boolean;
-
   private _customKeyEventHandler: CustomKeyEventHandler;
 
   // common services
@@ -251,8 +248,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
   private _setup(): void {
     this._parent = document ? document.body : null;
 
-    this.cursorState = 0;
-    this.cursorHidden = false;
     this._customKeyEventHandler = null;
 
     // modes
@@ -319,10 +314,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     }
   }
 
-  public get isFocused(): boolean {
-    return document.activeElement === this.textarea && document.hasFocus();
-  }
-
   private _setupOptionsListeners(): void {
     // TODO: These listeners should be owned by individual components
     this.optionsService.onOptionChange(key => {
@@ -537,6 +528,9 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this.register(addDisposableDomListener(this.textarea, 'blur', () => this._onTextAreaBlur()));
     this._helperContainer.appendChild(this.textarea);
 
+    const coreBrowserService = this._instantiationService.createInstance(CoreBrowserService, this.textarea);
+    this._instantiationService.setService(ICoreBrowserService, coreBrowserService);
+
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
     this._instantiationService.setService(ICharSizeService, this._charSizeService);
 
@@ -637,8 +631,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _createRenderer(): IRenderer {
     switch (this.options.rendererType) {
-      case 'canvas': return new Renderer(this._colorManager.colors, this, this._bufferService, this._charSizeService, this.optionsService);
-      case 'dom': return new DomRenderer(this, this._colorManager.colors, this._charSizeService, this.optionsService);
+      case 'canvas': return this._instantiationService.createInstance(Renderer, this._colorManager.colors, this.screenElement, this.linkifier);
+      case 'dom': return this._instantiationService.createInstance(DomRenderer, this._colorManager.colors, this.element, this.screenElement, this._viewportElement, this.linkifier);
       default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`);
     }
   }
@@ -945,8 +939,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
    * Display the cursor element
    */
   public showCursor(): void {
-    if (!this.cursorState) {
-      this.cursorState = 1;
+    if (!this._coreService.isCursorInitialized) {
+      this._coreService.isCursorInitialized = true;
       this.refresh(this.buffer.y, this.buffer.y);
     }
   }
@@ -1510,7 +1504,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     this.options.cols = this.cols;
     const customKeyEventHandler = this._customKeyEventHandler;
     const inputHandler = this._inputHandler;
-    const cursorState = this.cursorState;
     const userScrolling = this._userScrolling;
 
     this._setup();
@@ -1522,7 +1515,6 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     // reattach
     this._customKeyEventHandler = customKeyEventHandler;
     this._inputHandler = inputHandler;
-    this.cursorState = cursorState;
     this._userScrolling = userScrolling;
 
     // do a full screen refresh

src/TestUtils.test.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
 import { IInputHandlingTerminal, ICompositionHelper, ITerminal, IBrowser, ITerminalOptions } from './Types';
 import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types';
 import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, ICharset, CoreMouseEventType } from 'common/Types';
@@ -362,6 +362,7 @@ export class MockBuffer implements IBuffer {
 }
 
 export class MockRenderer implements IRenderer {
+  onRequestRefreshRows: IEvent<IRequestRefreshRowsEvent>;
   onCanvasResize: IEvent<{ width: number; height: number; }>;
   onRender: IEvent<{ start: number; end: number; }>;
   dispose(): void {

src/Types.d.ts

@@ -38,7 +38,6 @@ export interface IInputHandlingTerminal {
   savedCols: number;
   mouseEvents: CoreMouseEventType;
   sendFocus: boolean;
-  cursorHidden: boolean;
 
   buffers: IBufferSet;
   buffer: IBuffer;
@@ -154,11 +153,8 @@ export interface IInputHandler {
 export interface ITerminal extends IPublicTerminal, IElementAccessor, IBufferAccessor, ILinkifierAccessor {
   screenElement: HTMLElement;
   browser: IBrowser;
-  cursorHidden: boolean;
-  cursorState: number;
   buffer: IBuffer;
   buffers: IBufferSet;
-  isFocused: boolean;
   viewport: IViewport;
   bracketedPasteMode: boolean;
   optionsService: IOptionsService;

src/browser/renderer/CursorRenderLayer.ts

@@ -3,13 +3,14 @@
  * @license MIT
  */
 
-import { IRenderDimensions } from 'browser/renderer/Types';
-import { BaseRenderLayer } from '../browser/renderer/BaseRenderLayer';
-import { ITerminal } from '../Types';
+import { IRenderDimensions, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IColorSet } from 'browser/Types';
-import { IBufferService, IOptionsService } from 'common/services/Services';
+import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services';
+import { IEventEmitter } from 'common/EventEmitter';
+import { ICoreBrowserService } from 'browser/services/Services';
 
 interface ICursorState {
   x: number;
@@ -27,25 +28,27 @@ const BLINK_INTERVAL = 600;
 export class CursorRenderLayer extends BaseRenderLayer {
   private _state: ICursorState;
   private _cursorRenderers: {[key: string]: (x: number, y: number, cell: ICellData) => void};
-  private _cursorBlinkStateManager: CursorBlinkStateManager;
+  private _cursorBlinkStateManager: CursorBlinkStateManager | undefined;
   private _cell: ICellData = new CellData();
 
   constructor(
     container: HTMLElement,
     zIndex: number,
     colors: IColorSet,
-    private _terminal: ITerminal,
     rendererId: number,
+    private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRefreshRowsEvent>,
     readonly bufferService: IBufferService,
-    readonly optionsService: IOptionsService
+    readonly optionsService: IOptionsService,
+    private readonly _coreService: ICoreService,
+    private readonly _coreBrowserService: ICoreBrowserService
   ) {
     super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService);
     this._state = {
-      x: null,
-      y: null,
-      isFocused: null,
-      style: null,
-      width: null
+      x: 0,
+      y: 0,
+      isFocused: false,
+      style: '',
+      width: 0
     };
     this._cursorRenderers = {
       'bar': this._renderBarCursor.bind(this),
@@ -59,11 +62,11 @@ export class CursorRenderLayer extends BaseRenderLayer {
     super.resize(dim);
     // Resizing the canvas discards the contents of the canvas so clear state
     this._state = {
-      x: null,
-      y: null,
-      isFocused: null,
-      style: null,
-      width: null
+      x: 0,
+      y: 0,
+      isFocused: false,
+      style: '',
+      width: 0
     };
   }
 
@@ -71,7 +74,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this._clearCursor();
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.dispose();
-      this._cursorBlinkStateManager = null;
+      this._cursorBlinkStateManager = undefined;
       this.onOptionsChanged();
     }
   }
@@ -80,33 +83,31 @@ export class CursorRenderLayer extends BaseRenderLayer {
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.pause();
     }
-    this._terminal.refresh(this._bufferService.buffer.y, this._bufferService.buffer.y);
+    this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
   }
 
   public onFocus(): void {
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.resume();
     } else {
-      this._terminal.refresh(this._bufferService.buffer.y, this._bufferService.buffer.y);
+      this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
     }
   }
 
   public onOptionsChanged(): void {
     if (this._optionsService.options.cursorBlink) {
       if (!this._cursorBlinkStateManager) {
-        this._cursorBlinkStateManager = new CursorBlinkStateManager(this._terminal.isFocused, () => {
+        this._cursorBlinkStateManager = new CursorBlinkStateManager(this._coreBrowserService.isFocused, () => {
           this._render(true);
         });
       }
     } else {
-      if (this._cursorBlinkStateManager) {
-        this._cursorBlinkStateManager.dispose();
-        this._cursorBlinkStateManager = null;
-      }
+      this._cursorBlinkStateManager?.dispose();
+      this._cursorBlinkStateManager = undefined;
     }
     // Request a refresh from the terminal as management of rendering is being
     // moved back to the terminal
-    this._terminal.refresh(this._bufferService.buffer.y, this._bufferService.buffer.y);
+    this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
   }
 
   public onCursorMove(): void {
@@ -125,7 +126,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
   private _render(triggeredByAnimationFrame: boolean): void {
     // Don't draw the cursor if it's hidden
-    if (!this._terminal.cursorState || this._terminal.cursorHidden) {
+    if (!this._coreService.isCursorInitialized || this._coreService.isCursorHidden) {
       this._clearCursor();
       return;
     }
@@ -139,12 +140,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
       return;
     }
 
-    this._bufferService.buffer.lines.get(cursorY).loadCell(this._bufferService.buffer.x, this._cell);
+    this._bufferService.buffer.lines.get(cursorY)!.loadCell(this._bufferService.buffer.x, this._cell);
     if (this._cell.content === undefined) {
       return;
     }
 
-    if (!this._terminal.isFocused) {
+    if (!this._coreBrowserService.isFocused) {
       this._clearCursor();
       this._ctx.save();
       this._ctx.fillStyle = this._colors.cursor.css;
@@ -173,7 +174,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
       // The cursor is already in the correct spot, don't redraw
       if (this._state.x === this._bufferService.buffer.x &&
           this._state.y === viewportRelativeCursorY &&
-          this._state.isFocused === this._terminal.isFocused &&
+          this._state.isFocused === this._coreBrowserService.isFocused &&
           this._state.style === this._optionsService.options.cursorStyle &&
           this._state.width === this._cell.getWidth()) {
         return;
@@ -196,11 +197,11 @@ export class CursorRenderLayer extends BaseRenderLayer {
     if (this._state) {
       this._clearCells(this._state.x, this._state.y, this._state.width, 1);
       this._state = {
-        x: null,
-        y: null,
-        isFocused: null,
-        style: null,
-        width: null
+        x: 0,
+        y: 0,
+        isFocused: false,
+        style: '',
+        width: 0
       };
     }
   }
@@ -239,16 +240,16 @@ export class CursorRenderLayer extends BaseRenderLayer {
 class CursorBlinkStateManager {
   public isCursorVisible: boolean;
 
-  private _animationFrame: number;
-  private _blinkStartTimeout: number;
-  private _blinkInterval: number;
+  private _animationFrame: number | undefined;
+  private _blinkStartTimeout: number | undefined;
+  private _blinkInterval: number | undefined;
 
   /**
    * The time at which the animation frame was restarted, this is used on the
    * next render to restart the timers so they don't need to restart the timers
    * multiple times over a short period.
    */
-  private _animationTimeRestarted: number;
+  private _animationTimeRestarted: number | undefined;
 
   constructor(
     isFocused: boolean,
@@ -265,15 +266,15 @@ class CursorBlinkStateManager {
   public dispose(): void {
     if (this._blinkInterval) {
       window.clearInterval(this._blinkInterval);
-      this._blinkInterval = null;
+      this._blinkInterval = undefined;
     }
     if (this._blinkStartTimeout) {
       window.clearTimeout(this._blinkStartTimeout);
-      this._blinkStartTimeout = null;
+      this._blinkStartTimeout = undefined;
     }
     if (this._animationFrame) {
       window.cancelAnimationFrame(this._animationFrame);
-      this._animationFrame = null;
+      this._animationFrame = undefined;
     }
   }
 
@@ -288,7 +289,7 @@ class CursorBlinkStateManager {
     if (!this._animationFrame) {
       this._animationFrame = window.requestAnimationFrame(() => {
         this._renderCallback();
-        this._animationFrame = null;
+        this._animationFrame = undefined;
       });
     }
   }
@@ -308,7 +309,7 @@ class CursorBlinkStateManager {
       // started
       if (this._animationTimeRestarted) {
         const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
-        this._animationTimeRestarted = null;
+        this._animationTimeRestarted = undefined;
         if (time > 0) {
           this._restartInterval(time);
           return;
@@ -319,7 +320,7 @@ class CursorBlinkStateManager {
       this.isCursorVisible = false;
       this._animationFrame = window.requestAnimationFrame(() => {
         this._renderCallback();
-        this._animationFrame = null;
+        this._animationFrame = undefined;
       });
 
       // Setup the blink interval
@@ -329,7 +330,7 @@ class CursorBlinkStateManager {
           // calc time diff
           // Make restart interval do a setTimeout initially?
           const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
-          this._animationTimeRestarted = null;
+          this._animationTimeRestarted = undefined;
           this._restartInterval(time);
           return;
         }
@@ -338,7 +339,7 @@ class CursorBlinkStateManager {
         this.isCursorVisible = !this.isCursorVisible;
         this._animationFrame = window.requestAnimationFrame(() => {
           this._renderCallback();
-          this._animationFrame = null;
+          this._animationFrame = undefined;
         });
       }, BLINK_INTERVAL);
     }, timeToStart);
@@ -348,20 +349,20 @@ class CursorBlinkStateManager {
     this.isCursorVisible = true;
     if (this._blinkInterval) {
       window.clearInterval(this._blinkInterval);
-      this._blinkInterval = null;
+      this._blinkInterval = undefined;
     }
     if (this._blinkStartTimeout) {
       window.clearTimeout(this._blinkStartTimeout);
-      this._blinkStartTimeout = null;
+      this._blinkStartTimeout = undefined;
     }
     if (this._animationFrame) {
       window.cancelAnimationFrame(this._animationFrame);
-      this._animationFrame = null;
+      this._animationFrame = undefined;
     }
   }
 
   public resume(): void {
-    this._animationTimeRestarted = null;
+    this._animationTimeRestarted = undefined;
     this._restartInterval();
     this.restartBlinkAnimation();
   }

src/browser/renderer/Renderer.ts

@@ -3,18 +3,18 @@
  * @license MIT
  */
 
-import { TextRenderLayer } from '../browser/renderer/TextRenderLayer';
-import { SelectionRenderLayer } from '../browser/renderer/SelectionRenderLayer';
-import { CursorRenderLayer } from './CursorRenderLayer';
-import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICharacterJoinerRegistry } from 'browser/renderer/Types';
-import { ITerminal } from '../Types';
-import { LinkRenderLayer } from '../browser/renderer/LinkRenderLayer';
+import { TextRenderLayer } from 'browser/renderer/TextRenderLayer';
+import { SelectionRenderLayer } from 'browser/renderer/SelectionRenderLayer';
+import { CursorRenderLayer } from 'browser/renderer/CursorRenderLayer';
+import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICharacterJoinerRegistry, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
 import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry';
 import { Disposable } from 'common/Lifecycle';
-import { IColorSet } from 'browser/Types';
-import { ICharSizeService } from 'browser/services/Services';
-import { IBufferService, IOptionsService } from 'common/services/Services';
+import { IColorSet, ILinkifier } from 'browser/Types';
+import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
+import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services';
 import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
+import { EventEmitter, IEvent } from 'common/EventEmitter';
 
 let nextRendererId = 1;
 
@@ -27,36 +27,42 @@ export class Renderer extends Disposable implements IRenderer {
 
   public dimensions: IRenderDimensions;
 
+  private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
+  public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
+
   constructor(
     private _colors: IColorSet,
-    private readonly _terminal: ITerminal,
-    readonly bufferService: IBufferService,
-    private readonly _charSizeService: ICharSizeService,
-    readonly optionsService: IOptionsService
+    private readonly _screenElement: HTMLElement,
+    private readonly _linkifier: ILinkifier,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @ICharSizeService private readonly _charSizeService: ICharSizeService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @ICoreService readonly coreService: ICoreService,
+    @ICoreBrowserService readonly coreBrowserService: ICoreBrowserService
   ) {
     super();
-    const allowTransparency = this._terminal.options.allowTransparency;
-    this._characterJoinerRegistry = new CharacterJoinerRegistry(bufferService);
+    const allowTransparency = this._optionsService.options.allowTransparency;
+    this._characterJoinerRegistry = new CharacterJoinerRegistry(this._bufferService);
 
     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 TextRenderLayer(this._screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, this._bufferService, _optionsService),
+      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, _optionsService),
+      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, this._linkifier, this._bufferService, _optionsService),
+      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRefreshRows, this._bufferService, _optionsService, coreService, coreBrowserService)
     ];
     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
+      scaledCharWidth: 0,
+      scaledCharHeight: 0,
+      scaledCellWidth: 0,
+      scaledCellHeight: 0,
+      scaledCharLeft: 0,
+      scaledCharTop: 0,
+      scaledCanvasWidth: 0,
+      scaledCanvasHeight: 0,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      actualCellWidth: 0,
+      actualCellHeight: 0
     };
     this._devicePixelRatio = window.devicePixelRatio;
     this._updateDimensions();
@@ -74,7 +80,7 @@ export class Renderer extends Disposable implements IRenderer {
     // and the terminal needs to refreshed
     if (this._devicePixelRatio !== window.devicePixelRatio) {
       this._devicePixelRatio = window.devicePixelRatio;
-      this.onResize(this._terminal.cols, this._terminal.rows);
+      this.onResize(this._bufferService.cols, this._bufferService.rows);
     }
   }
 
@@ -96,12 +102,12 @@ export class Renderer extends Disposable implements IRenderer {
     this._renderLayers.forEach(l => l.resize(this.dimensions));
 
     // Resize the screen
-    this._terminal.screenElement.style.width = `${this.dimensions.canvasWidth}px`;
-    this._terminal.screenElement.style.height = `${this.dimensions.canvasHeight}px`;
+    this._screenElement.style.width = `${this.dimensions.canvasWidth}px`;
+    this._screenElement.style.height = `${this.dimensions.canvasHeight}px`;
   }
 
   public onCharSizeChanged(): void {
-    this.onResize(this._terminal.cols, this._terminal.rows);
+    this.onResize(this._bufferService.cols, this._bufferService.rows);
   }
 
   public onBlur(): void {
@@ -163,23 +169,23 @@ export class Renderer extends Disposable implements IRenderer {
     // will be floored because since lineHeight can never be lower then 1, there
     // is a guarentee that the scaled line height will always be larger than
     // scaled char height.
-    this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._terminal.options.lineHeight);
+    this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._optionsService.options.lineHeight);
 
     // Calculate the y coordinate within a cell that text should draw from in
     // order to draw in the center of a cell.
-    this.dimensions.scaledCharTop = this._terminal.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledCellHeight - this.dimensions.scaledCharHeight) / 2);
+    this.dimensions.scaledCharTop = this._optionsService.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledCellHeight - this.dimensions.scaledCharHeight) / 2);
 
     // Calculate the scaled cell width, taking the letterSpacing into account.
-    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._terminal.options.letterSpacing);
+    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._optionsService.options.letterSpacing);
 
     // Calculate the x coordinate with a cell that text should draw from in
     // order to draw in the center of a cell.
-    this.dimensions.scaledCharLeft = Math.floor(this._terminal.options.letterSpacing / 2);
+    this.dimensions.scaledCharLeft = Math.floor(this._optionsService.options.letterSpacing / 2);
 
     // Recalculate the canvas dimensions; scaled* define the actual number of
     // pixel in the canvas
-    this.dimensions.scaledCanvasHeight = this._terminal.rows * this.dimensions.scaledCellHeight;
-    this.dimensions.scaledCanvasWidth = this._terminal.cols * this.dimensions.scaledCellWidth;
+    this.dimensions.scaledCanvasHeight = this._bufferService.rows * this.dimensions.scaledCellHeight;
+    this.dimensions.scaledCanvasWidth = this._bufferService.cols * this.dimensions.scaledCellWidth;
 
     // The the size of the canvas on the page. It's very important that this
     // rounds to nearest integer and not ceils as browsers often set
@@ -194,8 +200,8 @@ export class Renderer extends Disposable implements IRenderer {
     // account window.devicePixelRatio. ICharSizeService.width/height by itself
     // is insufficient when the page is not at 100% zoom level as it's measured
     // in CSS pixels, but the actual char size on the canvas can differ.
-    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._terminal.rows;
-    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._terminal.cols;
+    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._bufferService.rows;
+    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._bufferService.cols;
   }
 
   public registerCharacterJoiner(handler: CharacterJoinerHandler): number {

src/browser/renderer/Types.d.ts

@@ -5,6 +5,7 @@
 
 import { IDisposable } from 'common/Types';
 import { IColorSet } from 'browser/Types';
+import { IEvent } from 'common/EventEmitter';
 
 export type CharacterJoinerHandler = (text: string) => [number, number][];
 
@@ -23,6 +24,11 @@ export interface IRenderDimensions {
   actualCellHeight: number;
 }
 
+export interface IRequestRefreshRowsEvent {
+  start: number;
+  end: number;
+}
+
 /**
  * Note that IRenderer implementations should emit the refresh event after
  * rendering rows to the screen.
@@ -30,6 +36,8 @@ export interface IRenderDimensions {
 export interface IRenderer extends IDisposable {
   readonly dimensions: IRenderDimensions;
 
+  readonly onRequestRefreshRows: IEvent<IRequestRefreshRowsEvent>;
+
   dispose(): void;
   setColors(colors: IColorSet): void;
   onDevicePixelRatioChange(): void;

src/browser/renderer/dom/DomRenderer.ts

@@ -3,14 +3,14 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types';
-import { ITerminal } from '../../Types';
+import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
 import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { Disposable } from 'common/Lifecycle';
-import { IColorSet, ILinkifierEvent } from 'browser/Types';
+import { IColorSet, ILinkifierEvent, ILinkifier } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
-import { IOptionsService } from 'common/services/Services';
+import { IOptionsService, IBufferService } from 'common/services/Services';
+import { EventEmitter, IEvent } from 'common/EventEmitter';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -30,19 +30,26 @@ export class DomRenderer extends Disposable implements IRenderer {
   private _rowFactory: DomRendererRowFactory;
   private _terminalClass: number = nextTerminalId++;
 
-  private _themeStyleElement: HTMLStyleElement;
-  private _dimensionsStyleElement: HTMLStyleElement;
+  private _themeStyleElement!: HTMLStyleElement;
+  private _dimensionsStyleElement!: HTMLStyleElement;
   private _rowContainer: HTMLElement;
   private _rowElements: HTMLElement[] = [];
   private _selectionContainer: HTMLElement;
 
   public dimensions: IRenderDimensions;
 
+  private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
+  public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
+
   constructor(
-    private _terminal: ITerminal,
     private _colors: IColorSet,
-    private _charSizeService: ICharSizeService,
-    private _optionsService: IOptionsService
+    private readonly _element: HTMLElement,
+    private readonly _screenElement: HTMLElement,
+    private readonly _viewportElement: HTMLElement,
+    private readonly _linkifier: ILinkifier,
+    @ICharSizeService private readonly _charSizeService: ICharSizeService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @IBufferService private readonly _bufferService: IBufferService
   ) {
     super();
 
@@ -50,60 +57,60 @@ export class DomRenderer extends Disposable implements IRenderer {
     this._rowContainer.classList.add(ROW_CONTAINER_CLASS);
     this._rowContainer.style.lineHeight = 'normal';
     this._rowContainer.setAttribute('aria-hidden', 'true');
-    this._refreshRowElements(this._terminal.cols, this._terminal.rows);
+    this._refreshRowElements(this._bufferService.cols, this._bufferService.rows);
     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
+      scaledCharWidth: 0,
+      scaledCharHeight: 0,
+      scaledCellWidth: 0,
+      scaledCellHeight: 0,
+      scaledCharLeft: 0,
+      scaledCharTop: 0,
+      scaledCanvasWidth: 0,
+      scaledCanvasHeight: 0,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      actualCellWidth: 0,
+      actualCellHeight: 0
     };
     this._updateDimensions();
     this._injectCss();
 
     this._rowFactory = new DomRendererRowFactory(document, this._optionsService);
 
-    this._terminal.element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
-    this._terminal.screenElement.appendChild(this._rowContainer);
-    this._terminal.screenElement.appendChild(this._selectionContainer);
+    this._element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
+    this._screenElement.appendChild(this._rowContainer);
+    this._screenElement.appendChild(this._selectionContainer);
 
-    this._terminal.linkifier.onLinkHover(e => this._onLinkHover(e));
-    this._terminal.linkifier.onLinkLeave(e => this._onLinkLeave(e));
+    this._linkifier.onLinkHover(e => this._onLinkHover(e));
+    this._linkifier.onLinkLeave(e => this._onLinkLeave(e));
   }
 
   public dispose(): void {
-    this._terminal.element.classList.remove(TERMINAL_CLASS_PREFIX + this._terminalClass);
-    this._terminal.screenElement.removeChild(this._rowContainer);
-    this._terminal.screenElement.removeChild(this._selectionContainer);
-    this._terminal.screenElement.removeChild(this._themeStyleElement);
-    this._terminal.screenElement.removeChild(this._dimensionsStyleElement);
+    this._element.classList.remove(TERMINAL_CLASS_PREFIX + this._terminalClass);
+    this._screenElement.removeChild(this._rowContainer);
+    this._screenElement.removeChild(this._selectionContainer);
+    this._screenElement.removeChild(this._themeStyleElement);
+    this._screenElement.removeChild(this._dimensionsStyleElement);
     super.dispose();
   }
 
   private _updateDimensions(): void {
     this.dimensions.scaledCharWidth = this._charSizeService.width * window.devicePixelRatio;
     this.dimensions.scaledCharHeight = Math.ceil(this._charSizeService.height * window.devicePixelRatio);
-    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._terminal.options.letterSpacing);
-    this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._terminal.options.lineHeight);
+    this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._optionsService.options.letterSpacing);
+    this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._optionsService.options.lineHeight);
     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.scaledCanvasWidth = this.dimensions.scaledCellWidth * this._bufferService.cols;
+    this.dimensions.scaledCanvasHeight = this.dimensions.scaledCellHeight * this._bufferService.rows;
     this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
     this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
-    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._terminal.cols;
-    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._terminal.rows;
+    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._bufferService.cols;
+    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._bufferService.rows;
 
     this._rowElements.forEach(element => {
       element.style.width = `${this.dimensions.canvasWidth}px`;
@@ -115,7 +122,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     if (!this._dimensionsStyleElement) {
       this._dimensionsStyleElement = document.createElement('style');
-      this._terminal.screenElement.appendChild(this._dimensionsStyleElement);
+      this._screenElement.appendChild(this._dimensionsStyleElement);
     }
 
     const styles =
@@ -128,9 +135,9 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     this._dimensionsStyleElement.innerHTML = styles;
 
-    this._selectionContainer.style.height = (<any>this._terminal)._viewportElement.style.height;
-    this._terminal.screenElement.style.width = `${this.dimensions.canvasWidth}px`;
-    this._terminal.screenElement.style.height = `${this.dimensions.canvasHeight}px`;
+    this._selectionContainer.style.height = this._viewportElement.style.height;
+    this._screenElement.style.width = `${this.dimensions.canvasWidth}px`;
+    this._screenElement.style.height = `${this.dimensions.canvasHeight}px`;
   }
 
   public setColors(colors: IColorSet): void {
@@ -141,7 +148,7 @@ export class DomRenderer extends Disposable implements IRenderer {
   private _injectCss(): void {
     if (!this._themeStyleElement) {
       this._themeStyleElement = document.createElement('style');
-      this._terminal.screenElement.appendChild(this._themeStyleElement);
+      this._screenElement.appendChild(this._themeStyleElement);
     }
 
     // Base CSS
@@ -149,16 +156,16 @@ export class DomRenderer extends Disposable implements IRenderer {
         `${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;` +
+        ` font-family: ${this._optionsService.options.fontFamily};` +
+        ` font-size: ${this._optionsService.options.fontSize}px;` +
         `}`;
     // Text styles
     styles +=
         `${this._terminalSelector} span:not(.${BOLD_CLASS}) {` +
-        ` font-weight: ${this._terminal.options.fontWeight};` +
+        ` font-weight: ${this._optionsService.options.fontWeight};` +
         `}` +
         `${this._terminalSelector} span.${BOLD_CLASS} {` +
-        ` font-weight: ${this._terminal.options.fontWeightBold};` +
+        ` font-weight: ${this._optionsService.options.fontWeightBold};` +
         `}` +
         `${this._terminalSelector} span.${ITALIC_CLASS} {` +
         ` font-style: italic;` +
@@ -242,7 +249,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     }
     // Remove excess elements
     while (this._rowElements.length > rows) {
-      this._rowContainer.removeChild(this._rowElements.pop());
+      this._rowContainer.removeChild(this._rowElements.pop()!);
     }
   }
 
@@ -275,13 +282,13 @@ export class DomRenderer extends Disposable implements IRenderer {
     }
 
     // Translate from buffer position to viewport position
-    const viewportStartRow = start[1] - this._terminal.buffer.ydisp;
-    const viewportEndRow = end[1] - this._terminal.buffer.ydisp;
+    const viewportStartRow = start[1] - this._bufferService.buffer.ydisp;
+    const viewportEndRow = end[1] - this._bufferService.buffer.ydisp;
     const viewportCappedStartRow = Math.max(viewportStartRow, 0);
-    const viewportCappedEndRow = Math.min(viewportEndRow, this._terminal.rows - 1);
+    const viewportCappedEndRow = Math.min(viewportEndRow, this._bufferService.rows - 1);
 
     // No need to draw the selection
-    if (viewportCappedStartRow >= this._terminal.rows || viewportCappedEndRow < 0) {
+    if (viewportCappedStartRow >= this._bufferService.rows || viewportCappedEndRow < 0) {
       return;
     }
 
@@ -295,15 +302,15 @@ export class DomRenderer extends Disposable implements IRenderer {
     } else {
       // Draw first row
       const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
-      const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
+      const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._bufferService.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));
+      documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow + 1, 0, this._bufferService.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;
+        const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._bufferService.cols;
         documentFragment.appendChild(this._createSelectionElement(viewportCappedEndRow, 0, endCol));
       }
     }
@@ -333,7 +340,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     // Force a refresh
     this._updateDimensions();
     this._injectCss();
-    this._terminal.refresh(0, this._terminal.rows - 1);
+    this._onRequestRefreshRows.fire({ start: 0, end: this._bufferService.rows - 1 });
   }
 
   public clear(): void {
@@ -341,20 +348,18 @@ export class DomRenderer extends Disposable implements IRenderer {
   }
 
   public renderRows(start: number, end: number): void {
-    const terminal = this._terminal;
-
-    const cursorAbsoluteY = terminal.buffer.ybase + terminal.buffer.y;
-    const cursorX = this._terminal.buffer.x;
-    const cursorBlink = this._terminal.options.cursorBlink;
+    const cursorAbsoluteY = this._bufferService.buffer.ybase + this._bufferService.buffer.y;
+    const cursorX = this._bufferService.buffer.x;
+    const cursorBlink = this._optionsService.options.cursorBlink;
 
     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);
-      const cursorStyle = terminal.options.cursorStyle;
-      rowElement.appendChild(this._rowFactory.createRow(lineData, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, terminal.cols));
+      const row = y + this._bufferService.buffer.ydisp;
+      const lineData = this._bufferService.buffer.lines.get(row);
+      const cursorStyle = this._optionsService.options.cursorStyle;
+      rowElement.appendChild(this._rowFactory.createRow(lineData!, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, this._bufferService.cols));
     }
   }
 

src/browser/services/CoreBrowserService.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICoreBrowserService } from './Services';
+
+export class CoreBrowserService implements ICoreBrowserService {
+  serviceBrand: any;
+
+  constructor(
+    private _textarea: HTMLTextAreaElement
+  ) {
+  }
+
+  public get isFocused(): boolean {
+    return document.activeElement === this._textarea && document.hasFocus();
+  }
+}

src/browser/services/RenderService.ts

@@ -51,6 +51,9 @@ export class RenderService extends Disposable implements IRenderService {
     this.register(optionsService.onOptionChange(() => this._renderer.onOptionsChanged()));
     this.register(charSizeService.onCharSizeChange(() => this.onCharSizeChanged()));
 
+    // No need to register this as renderer is explicitly disposed in RenderService.dispose
+    this._renderer.onRequestRefreshRows(e => this.refreshRows(e.start, e.end));
+
     // dprchange should handle this case, we need this as well for browsers that don't support the
     // matchMedia query.
     this.register(addDisposableDomListener(window, 'resize', () => this.onDevicePixelRatioChange()));
@@ -105,12 +108,14 @@ export class RenderService extends Disposable implements IRenderService {
 
   public dispose(): void {
     this._renderer.dispose();
+    super.dispose();
   }
 
   public setRenderer(renderer: IRenderer): void {
     // TODO: RenderService should be the only one to dispose the renderer
     this._renderer.dispose();
     this._renderer = renderer;
+    this._renderer.onRequestRefreshRows(e => this.refreshRows(e.start, e.end));
     this.refreshRows(0, this._rowCount - 1);
   }
 

src/browser/services/Services.ts

@@ -23,6 +23,13 @@ export interface ICharSizeService {
   measure(): void;
 }
 
+export const ICoreBrowserService = createDecorator<ICoreBrowserService>('CoreBrowserService');
+export interface ICoreBrowserService {
+  serviceBrand: any;
+
+  readonly isFocused: boolean;
+}
+
 export const IMouseService = createDecorator<IMouseService>('MouseService');
 export interface IMouseService {
   serviceBrand: any;

src/common/TestUtils.test.ts

@@ -43,6 +43,9 @@ export class MockCoreMouseService implements ICoreMouseService {
 }
 
 export class MockCoreService implements ICoreService {
+  isCursorInitialized: boolean = false;
+  isCursorHidden: boolean = false;
+  isFocused: boolean = false;
   serviceBrand: any;
   decPrivateModes: IDecPrivateModes = {} as any;
   onData: IEvent<string> = new EventEmitter<string>().event;

src/common/services/CoreService.test.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICoreService } from 'common/services/Services';
+import { CoreService } from 'common/services/CoreService';
+import { MockBufferService, MockLogService, MockOptionsService } from 'common/TestUtils.test';
+import { assert } from 'chai';
+
+describe('CoreService', () => {
+  let coreService: ICoreService;
+
+  beforeEach(() => {
+    coreService = new CoreService(
+      () => {},
+      new MockBufferService(80, 30),
+      new MockLogService(),
+      new MockOptionsService());
+  });
+
+  describe('reset', () => {
+    it('should not affect isCursorInitialized', () => {
+      coreService.isCursorInitialized = true;
+      coreService.reset();
+      assert.equal(coreService.isCursorInitialized, true);
+      coreService.isCursorInitialized = false;
+      coreService.reset();
+      assert.equal(coreService.isCursorInitialized, false);
+    });
+  });
+});

src/common/services/CoreService.ts

@@ -15,6 +15,8 @@ const DEFAULT_DEC_PRIVATE_MODES: IDecPrivateModes = Object.freeze({
 export class CoreService implements ICoreService {
   serviceBrand: any;
 
+  public isCursorInitialized: boolean = false;
+  public isCursorHidden: boolean = false;
   public decPrivateModes: IDecPrivateModes;
 
   private _onData = new EventEmitter<string>();

src/common/services/Services.ts

@@ -58,6 +58,12 @@ export const ICoreService = createDecorator<ICoreService>('CoreService');
 export interface ICoreService {
   serviceBrand: any;
 
+  /**
+   * Initially the cursor will not be visible until the first time the terminal
+   * is focused.
+   */
+  isCursorInitialized: boolean;
+  isCursorHidden: boolean;
   readonly decPrivateModes: IDecPrivateModes;
 
   readonly onData: IEvent<string>;