Merge pull request #2837 from Tyriar/2836

Only fire IRenderService.onRender when buffer changes occurred

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

@@ -16,7 +16,7 @@ import { Disposable } from 'common/Lifecycle';
 import { NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Terminal, IEvent } from 'xterm';
 import { IRenderLayer } from './renderLayer/Types';
-import { IRenderDimensions, IRenderer, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { IColorSet } from 'browser/Types';
 import { EventEmitter } from 'common/EventEmitter';
 import { CellData } from 'common/buffer/CellData';
@@ -39,8 +39,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
   private _core: ITerminal;
   private _isAttached: boolean;
 
-  private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
-  public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
+  private _onRequestRedraw = new EventEmitter<IRequestRedrawEvent>();
+  public get onRequestRedraw(): IEvent<IRequestRedrawEvent> { return this._onRequestRedraw.event; }
 
   constructor(
     private _terminal: Terminal,
@@ -53,7 +53,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, this._onRequestRefreshRows)
+      new CursorRenderLayer(this._core.screenElement, 3, this._colors, this._onRequestRedraw)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -178,7 +178,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._rectangleRenderer.updateSelection(this._model.selection, columnSelectMode);
     this._glyphRenderer.updateSelection(this._model, columnSelectMode);
 
-    this._onRequestRefreshRows.fire({ start: 0, end: this._terminal.rows - 1 });
+    this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1 });
   }
 
   public onCursorMove(): void {

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

@@ -8,7 +8,7 @@ import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IColorSet } from 'browser/Types';
-import { IRenderDimensions, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { IEventEmitter } from 'common/EventEmitter';
 
 interface ICursorState {
@@ -34,7 +34,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     container: HTMLElement,
     zIndex: number,
     colors: IColorSet,
-    private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRefreshRowsEvent>
+    private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRedrawEvent>
   ) {
     super(container, 'cursor', zIndex, true, colors);
     this._state = {

src/Terminal.ts

@@ -543,7 +543,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
     const renderer = this._createRenderer();
     this._renderService = this._instantiationService.createInstance(RenderService, renderer, this.rows, this.screenElement);
     this._instantiationService.setService(IRenderService, this._renderService);
-    this._renderService.onRender(e => this._onRender.fire(e));
+    this._renderService.onRenderedBufferChange(e => this._onRender.fire(e));
     this.onResize(e => this._renderService.resize(e.cols, e.rows));
 
     this._soundService = this._instantiationService.createInstance(SoundService);

src/TestUtils.test.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRedrawEvent } 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 } from 'common/Types';
@@ -281,7 +281,7 @@ export class MockBuffer implements IBuffer {
 }
 
 export class MockRenderer implements IRenderer {
-  onRequestRefreshRows: IEvent<IRequestRefreshRowsEvent>;
+  onRequestRedraw: IEvent<IRequestRedrawEvent>;
   onCanvasResize: IEvent<{ width: number, height: number }>;
   onRender: IEvent<{ start: number, end: number }>;
   dispose(): void {

src/browser/Linkifier2.ts

@@ -50,7 +50,7 @@ export class Linkifier2 implements ILinkifier2 {
     this._renderService = renderService;
 
     this._element.addEventListener('mousemove', this._onMouseMove.bind(this));
-    this._element.addEventListener('click', this._onMouseDown.bind(this));
+    this._element.addEventListener('click', this._onClick.bind(this));
   }
 
   private _onMouseMove(event: MouseEvent): void {
@@ -125,7 +125,7 @@ export class Linkifier2 implements ILinkifier2 {
     });
   }
 
-  private _onMouseDown(event: MouseEvent): void {
+  private _onClick(event: MouseEvent): void {
     if (!this._element || !this._mouseService || !this._currentLink) {
       return;
     }
@@ -173,7 +173,7 @@ export class Linkifier2 implements ILinkifier2 {
 
       // Add listener for rerendering
       if (this._renderService) {
-        this._linkCacheDisposables.push(this._renderService.onRender(e => {
+        this._linkCacheDisposables.push(this._renderService.onRenderedBufferChange(e => {
           this._clearCurrentLink(e.start + 1 + this._bufferService.buffer.ydisp, e.end + 1 + this._bufferService.buffer.ydisp);
         }));
       }

src/browser/TestUtils.test.ts

@@ -30,7 +30,7 @@ export class MockMouseService implements IMouseService {
 export class MockRenderService implements IRenderService {
   serviceBrand: any;
   onDimensionsChange: IEvent<IRenderDimensions> = new EventEmitter<IRenderDimensions>().event;
-  onRender: IEvent<{ start: number, end: number }, void> = new EventEmitter<{ start: number, end: number }>().event;
+  onRenderedBufferChange: IEvent<{ start: number, end: number }, void> = new EventEmitter<{ start: number, end: number }>().event;
   onRefreshRequest: IEvent<{ start: number, end: number}, void> = new EventEmitter<{ start: number, end: number }>().event;
   dimensions: IRenderDimensions = {
     scaledCharWidth: 0,

src/browser/renderer/CursorRenderLayer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IRenderDimensions, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
@@ -36,7 +36,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     zIndex: number,
     colors: IColorSet,
     rendererId: number,
-    private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRefreshRowsEvent>,
+    private _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
     readonly bufferService: IBufferService,
     readonly optionsService: IOptionsService,
     private readonly _coreService: ICoreService,
@@ -83,14 +83,14 @@ export class CursorRenderLayer extends BaseRenderLayer {
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.pause();
     }
-    this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
+    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
   }
 
   public onFocus(): void {
     if (this._cursorBlinkStateManager) {
       this._cursorBlinkStateManager.resume();
     } else {
-      this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
+      this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
     }
   }
 
@@ -107,7 +107,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     }
     // Request a refresh from the terminal as management of rendering is being
     // moved back to the terminal
-    this._onRequestRefreshRowsEvent.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
+    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
   }
 
   public onCursorMove(): void {

src/browser/renderer/Renderer.ts

@@ -6,7 +6,7 @@
 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 { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICharacterJoinerRegistry, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
 import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry';
 import { Disposable } from 'common/Lifecycle';
@@ -27,8 +27,8 @@ export class Renderer extends Disposable implements IRenderer {
 
   public dimensions: IRenderDimensions;
 
-  private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
-  public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
+  private _onRequestRedraw = new EventEmitter<IRequestRedrawEvent>();
+  public get onRequestRedraw(): IEvent<IRequestRedrawEvent> { return this._onRequestRedraw.event; }
 
   constructor(
     private _colors: IColorSet,
@@ -49,7 +49,7 @@ export class Renderer extends Disposable implements IRenderer {
       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, linkifier, linkifier2, this._bufferService, _optionsService),
-      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRefreshRows, this._bufferService, _optionsService, coreService, coreBrowserService)
+      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, _optionsService, coreService, coreBrowserService)
     ];
     this.dimensions = {
       scaledCharWidth: 0,

src/browser/renderer/Types.d.ts

@@ -24,7 +24,7 @@ export interface IRenderDimensions {
   actualCellHeight: number;
 }
 
-export interface IRequestRefreshRowsEvent {
+export interface IRequestRedrawEvent {
   start: number;
   end: number;
 }
@@ -36,7 +36,11 @@ export interface IRequestRefreshRowsEvent {
 export interface IRenderer extends IDisposable {
   readonly dimensions: IRenderDimensions;
 
-  readonly onRequestRefreshRows: IEvent<IRequestRefreshRowsEvent>;
+  /**
+   * Fires when the renderer is requesting to be redrawn on the next animation
+   * frame but is _not_ a result of content changing (eg. selection changes).
+   */
+  readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
 
   dispose(): void;
   setColors(colors: IColorSet): void;

src/browser/renderer/dom/DomRenderer.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRefreshRowsEvent } from 'browser/renderer/Types';
+import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRedrawEvent } 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';
@@ -39,8 +39,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   public dimensions: IRenderDimensions;
 
-  private _onRequestRefreshRows = new EventEmitter<IRequestRefreshRowsEvent>();
-  public get onRequestRefreshRows(): IEvent<IRequestRefreshRowsEvent> { return this._onRequestRefreshRows.event; }
+  public get onRequestRedraw(): IEvent<IRequestRedrawEvent> { return new EventEmitter<IRequestRedrawEvent>().event; }
 
   constructor(
     private _colors: IColorSet,

src/browser/services/RenderService.ts

@@ -21,13 +21,14 @@ export class RenderService extends Disposable implements IRenderService {
 
   private _isPaused: boolean = false;
   private _needsFullRefresh: boolean = false;
+  private _isNextRenderRedrawOnly: boolean = true;
   private _canvasWidth: number = 0;
   private _canvasHeight: number = 0;
 
   private _onDimensionsChange = new EventEmitter<IRenderDimensions>();
   public get onDimensionsChange(): IEvent<IRenderDimensions> { return this._onDimensionsChange.event; }
   private _onRender = new EventEmitter<{ start: number, end: number }>();
-  public get onRender(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
+  public get onRenderedBufferChange(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
   private _onRefreshRequest = new EventEmitter<{ start: number, end: number }>();
   public get onRefreshRequest(): IEvent<{ start: number, end: number }> { return this._onRefreshRequest.event; }
 
@@ -52,7 +53,7 @@ export class RenderService extends Disposable implements IRenderService {
     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));
+    this._renderer.onRequestRedraw(e => this.refreshRows(e.start, e.end, true));
 
     // dprchange should handle this case, we need this as well for browsers that don't support the
     // matchMedia query.
@@ -75,17 +76,23 @@ export class RenderService extends Disposable implements IRenderService {
     }
   }
 
-  public refreshRows(start: number, end: number): void {
+  public refreshRows(start: number, end: number, isRedrawOnly: boolean = false): void {
     if (this._isPaused) {
       this._needsFullRefresh = true;
       return;
     }
+    if (!isRedrawOnly) {
+      this._isNextRenderRedrawOnly = false;
+    }
     this._renderDebouncer.refresh(start, end, this._rowCount);
   }
 
   private _renderRows(start: number, end: number): void {
     this._renderer.renderRows(start, end);
-    this._onRender.fire({ start, end });
+    if (!this._isNextRenderRedrawOnly) {
+      this._onRender.fire({ start, end });
+    }
+    this._isNextRenderRedrawOnly = true;
   }
 
   public resize(cols: number, rows: number): void {
@@ -116,7 +123,7 @@ export class RenderService extends Disposable implements IRenderService {
     // 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._renderer.onRequestRedraw(e => this.refreshRows(e.start, e.end, true));
     this.refreshRows(0, this._rowCount - 1);
   }
 

src/browser/services/Services.ts

@@ -43,7 +43,11 @@ export interface IRenderService extends IDisposable {
   serviceBrand: any;
 
   onDimensionsChange: IEvent<IRenderDimensions>;
-  onRender: IEvent<{ start: number, end: number }>;
+  /**
+   * Fires when buffer changes are rendered. This does not fire when only cursor
+   * or selections are rendered.
+   */
+  onRenderedBufferChange: IEvent<{ start: number, end: number }>;
   onRefreshRequest: IEvent<{ start: number, end: number }>;
 
   dimensions: IRenderDimensions;