Merge pull request #4069 from mihaip/master

Make terminal rendering work in popout windows

.eslintrc.json

@@ -147,6 +147,29 @@
         ]
       }
     ],
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "selector": "CallExpression[callee.name='requestAnimationFrame']",
+        "message": "The global requestAnimationFrame() should be avoided, call it on the parent window from ICoreBrowserService."
+      },
+      {
+        "selector": "CallExpression[callee.name='cancelAnimationFrame']",
+        "message": "The global cancelAnimationFrame() should be avoided, call it on the parent window from ICoreBrowserService."
+      },
+      {
+        "selector": "CallExpression > MemberExpression[object.name='window'][property.name='requestAnimationFrame']",
+        "message": "window.requestAnimationFrame() should be avoided, call it on the parent window from ICoreBrowserService."
+      },
+      {
+        "selector": "CallExpression > MemberExpression[object.name='window'][property.name='cancelAnimationFrame']",
+        "message": "window.cancelAnimationFrame() should be avoided, call it on the parent window from ICoreBrowserService."
+      },
+      {
+        "selector": "MemberExpression[object.name='window'][property.name='devicePixelRatio']",
+        "message": "window.devicePixelRatio should be avoided, get it from ICoreBrowserService."
+      }
+    ],
     "no-trailing-spaces": "warn",
     "no-unsafe-finally": "warn",
     "no-var": "warn",

addons/xterm-addon-canvas/src/BaseRenderLayer.ts

@@ -15,6 +15,7 @@ import { AttributeData } from 'common/buffer/AttributeData';
 import { IColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICoreBrowserService } from 'browser/services/Services';
 import { excludeFromContrastRatioDemands, throwIfFalsy } from 'browser/renderer/RendererUtils';
 import { channels, color, rgba } from 'common/Color';
 import { removeElementFromParent } from 'browser/Dom';
@@ -60,7 +61,8 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     private _rendererId: number,
     protected readonly _bufferService: IBufferService,
     protected readonly _optionsService: IOptionsService,
-    protected readonly _decorationService: IDecorationService
+    protected readonly _decorationService: IDecorationService,
+    protected readonly _coreBrowserService: ICoreBrowserService
   ) {
     this._canvas = document.createElement('canvas');
     this._canvas.classList.add(`xterm-${id}-layer`);
@@ -125,7 +127,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireCharAtlas(this._optionsService.rawOptions, this._rendererId, colorSet, this._scaledCharWidth, this._scaledCharHeight);
+    this._charAtlas = acquireCharAtlas(this._optionsService.rawOptions, this._rendererId, colorSet, this._scaledCharWidth, this._scaledCharHeight, this._coreBrowserService.dpr);
     this._charAtlas.warmUp();
   }
 
@@ -180,9 +182,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     const cellOffset = Math.ceil(this._scaledCellHeight * 0.5);
     this._ctx.fillRect(
       x * this._scaledCellWidth,
-      (y + 1) * this._scaledCellHeight - cellOffset - window.devicePixelRatio,
+      (y + 1) * this._scaledCellHeight - cellOffset - this._coreBrowserService.dpr,
       width * this._scaledCellWidth,
-      window.devicePixelRatio);
+      this._coreBrowserService.dpr);
   }
 
   /**
@@ -194,23 +196,24 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   protected _fillBottomLineAtCells(x: number, y: number, width: number = 1, pixelOffset: number = 0): void {
     this._ctx.fillRect(
       x * this._scaledCellWidth,
-      (y + 1) * this._scaledCellHeight + pixelOffset - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
+      (y + 1) * this._scaledCellHeight + pixelOffset - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
       width * this._scaledCellWidth,
-      window.devicePixelRatio);
+      this._coreBrowserService.dpr);
   }
 
   protected _curlyUnderlineAtCell(x: number, y: number, width: number = 1): void {
     this._ctx.save();
     this._ctx.beginPath();
     this._ctx.strokeStyle = this._ctx.fillStyle;
-    this._ctx.lineWidth = window.devicePixelRatio;
+    const lineWidth = this._coreBrowserService.dpr;
+    this._ctx.lineWidth = lineWidth;
     for (let xOffset = 0; xOffset < width; xOffset++) {
       const xLeft = (x + xOffset) * this._scaledCellWidth;
       const xMid = (x + xOffset + 0.5) * this._scaledCellWidth;
       const xRight = (x + xOffset + 1) * this._scaledCellWidth;
-      const yMid = (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1;
-      const yMidBot = yMid - window.devicePixelRatio;
-      const yMidTop = yMid + window.devicePixelRatio;
+      const yMid = (y + 1) * this._scaledCellHeight - lineWidth - 1;
+      const yMidBot = yMid - lineWidth;
+      const yMidTop = yMid + lineWidth;
       this._ctx.moveTo(xLeft, yMid);
       this._ctx.bezierCurveTo(
         xLeft, yMidBot,
@@ -231,10 +234,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.save();
     this._ctx.beginPath();
     this._ctx.strokeStyle = this._ctx.fillStyle;
-    this._ctx.lineWidth = window.devicePixelRatio;
-    this._ctx.setLineDash([window.devicePixelRatio * 2, window.devicePixelRatio]);
+    const lineWidth = this._coreBrowserService.dpr;
+    this._ctx.lineWidth = lineWidth;
+    this._ctx.setLineDash([lineWidth * 2, lineWidth]);
     const xLeft = x * this._scaledCellWidth;
-    const yMid = (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1;
+    const yMid = (y + 1) * this._scaledCellHeight - lineWidth - 1;
     this._ctx.moveTo(xLeft, yMid);
     for (let xOffset = 0; xOffset < width; xOffset++) {
       // const xLeft = x * this._scaledCellWidth;
@@ -250,11 +254,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.save();
     this._ctx.beginPath();
     this._ctx.strokeStyle = this._ctx.fillStyle;
-    this._ctx.lineWidth = window.devicePixelRatio;
-    this._ctx.setLineDash([window.devicePixelRatio * 4, window.devicePixelRatio * 3]);
+    const lineWidth = this._coreBrowserService.dpr;
+    this._ctx.lineWidth = lineWidth;
+    this._ctx.setLineDash([lineWidth * 4, lineWidth * 3]);
     const xLeft = x * this._scaledCellWidth;
     const xRight = (x + width) * this._scaledCellWidth;
-    const yMid = (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1;
+    const yMid = (y + 1) * this._scaledCellHeight - lineWidth - 1;
     this._ctx.moveTo(xLeft, yMid);
     this._ctx.lineTo(xRight, yMid);
     this._ctx.stroke();
@@ -272,7 +277,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.fillRect(
       x * this._scaledCellWidth,
       y * this._scaledCellHeight,
-      window.devicePixelRatio * width,
+      this._coreBrowserService.dpr * width,
       this._scaledCellHeight);
   }
 
@@ -283,12 +288,13 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param y The row to fill.
    */
   protected _strokeRectAtCell(x: number, y: number, width: number, height: number): void {
-    this._ctx.lineWidth = window.devicePixelRatio;
+    const lineWidth = this._coreBrowserService.dpr;
+    this._ctx.lineWidth = lineWidth;
     this._ctx.strokeRect(
-      x * this._scaledCellWidth + window.devicePixelRatio / 2,
-      y * this._scaledCellHeight + (window.devicePixelRatio / 2),
-      width * this._scaledCellWidth - window.devicePixelRatio,
-      (height * this._scaledCellHeight) - window.devicePixelRatio);
+      x * this._scaledCellWidth + lineWidth / 2,
+      y * this._scaledCellHeight + (lineWidth / 2),
+      width * this._scaledCellWidth - lineWidth,
+      (height * this._scaledCellHeight) - lineWidth);
   }
 
   /**
@@ -344,7 +350,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     // Draw custom characters if applicable
     let drawSuccess = false;
     if (this._optionsService.rawOptions.customGlyphs !== false) {
-      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight, this._optionsService.rawOptions.fontSize);
+      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight, this._optionsService.rawOptions.fontSize, this._coreBrowserService.dpr);
     }
 
     // Draw the character
@@ -472,7 +478,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     // Draw custom characters if applicable
     let drawSuccess = false;
     if (this._optionsService.rawOptions.customGlyphs !== false) {
-      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight, this._optionsService.rawOptions.fontSize);
+      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight, this._optionsService.rawOptions.fontSize, this._coreBrowserService.dpr);
     }
 
     // Draw the character
@@ -509,7 +515,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     const fontWeight = isBold ? this._optionsService.rawOptions.fontWeightBold : this._optionsService.rawOptions.fontWeight;
     const fontStyle = isItalic ? 'italic' : '';
 
-    return `${fontStyle} ${fontWeight} ${this._optionsService.rawOptions.fontSize * window.devicePixelRatio}px ${this._optionsService.rawOptions.fontFamily}`;
+    return `${fontStyle} ${fontWeight} ${this._optionsService.rawOptions.fontSize * this._coreBrowserService.dpr}px ${this._optionsService.rawOptions.fontFamily}`;
   }
 
   private _getContrastColor(cell: CellData, x: number, y: number): IColor | undefined {

addons/xterm-addon-canvas/src/CanvasRenderer.ts

@@ -39,16 +39,16 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     private readonly _optionsService: IOptionsService,
     characterJoinerService: ICharacterJoinerService,
     coreService: ICoreService,
-    coreBrowserService: ICoreBrowserService,
+    private readonly _coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService
   ) {
     super();
     const allowTransparency = this._optionsService.rawOptions.allowTransparency;
     this._renderLayers = [
-      new TextRenderLayer(this._screenElement, 0, this._colors, allowTransparency, this._id, this._bufferService, this._optionsService, characterJoinerService, decorationService),
-      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, coreBrowserService, decorationService, this._optionsService),
-      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier2, this._bufferService, this._optionsService, decorationService),
-      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, coreBrowserService, decorationService)
+      new TextRenderLayer(this._screenElement, 0, this._colors, allowTransparency, this._id, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService),
+      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, this._coreBrowserService, decorationService, this._optionsService),
+      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService),
+      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -64,10 +64,10 @@ export class CanvasRenderer extends Disposable implements IRenderer {
       actualCellWidth: 0,
       actualCellHeight: 0
     };
-    this._devicePixelRatio = window.devicePixelRatio;
+    this._devicePixelRatio = this._coreBrowserService.dpr;
     this._updateDimensions();
 
-    this.register(observeDevicePixelDimensions(this._renderLayers[0].canvas, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
+    this.register(observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
 
     this.onOptionsChanged();
   }
@@ -83,8 +83,8 @@ export class CanvasRenderer extends Disposable implements IRenderer {
   public onDevicePixelRatioChange(): void {
     // If the device pixel ratio changed, the char atlas needs to be regenerated
     // and the terminal needs to refreshed
-    if (this._devicePixelRatio !== window.devicePixelRatio) {
-      this._devicePixelRatio = window.devicePixelRatio;
+    if (this._devicePixelRatio !== this._coreBrowserService.dpr) {
+      this._devicePixelRatio = this._coreBrowserService.dpr;
       this.onResize(this._bufferService.cols, this._bufferService.rows);
     }
   }
@@ -175,16 +175,17 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     }
 
     // See the WebGL renderer for an explanation of this section.
-    this.dimensions.scaledCharWidth = Math.floor(this._charSizeService.width * window.devicePixelRatio);
-    this.dimensions.scaledCharHeight = Math.ceil(this._charSizeService.height * window.devicePixelRatio);
+    const dpr = this._coreBrowserService.dpr;
+    this.dimensions.scaledCharWidth = Math.floor(this._charSizeService.width * dpr);
+    this.dimensions.scaledCharHeight = Math.ceil(this._charSizeService.height * dpr);
     this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._optionsService.rawOptions.lineHeight);
     this.dimensions.scaledCharTop = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledCellHeight - this.dimensions.scaledCharHeight) / 2);
     this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._optionsService.rawOptions.letterSpacing);
     this.dimensions.scaledCharLeft = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
     this.dimensions.scaledCanvasHeight = this._bufferService.rows * this.dimensions.scaledCellHeight;
     this.dimensions.scaledCanvasWidth = this._bufferService.cols * this.dimensions.scaledCellWidth;
-    this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
-    this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
+    this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / dpr);
+    this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / dpr);
     this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._bufferService.rows;
     this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._bufferService.cols;
   }

addons/xterm-addon-canvas/src/CursorRenderLayer.ts

@@ -40,10 +40,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     bufferService: IBufferService,
     optionsService: IOptionsService,
     private readonly _coreService: ICoreService,
-    private readonly _coreBrowserService: ICoreBrowserService,
+    coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService
   ) {
-    super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService);
+    super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
     this._state = {
       x: 0,
       y: 0,
@@ -99,7 +99,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
       if (!this._cursorBlinkStateManager) {
         this._cursorBlinkStateManager = new CursorBlinkStateManager(this._coreBrowserService.isFocused, () => {
           this._render(true);
-        });
+        }, this._coreBrowserService);
       }
     } else {
       this._cursorBlinkStateManager?.dispose();
@@ -196,7 +196,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _clearCursor(): void {
     if (this._state) {
       // Avoid potential rounding errors when device pixel ratio is less than 1
-      if (window.devicePixelRatio < 1) {
+      if (this._coreBrowserService.dpr < 1) {
         this._clearAll();
       } else {
         this._clearCells(this._state.x, this._state.y, this._state.width, 1);
@@ -258,7 +258,8 @@ class CursorBlinkStateManager {
 
   constructor(
     isFocused: boolean,
-    private _renderCallback: () => void
+    private _renderCallback: () => void,
+    private _coreBrowserService: ICoreBrowserService
   ) {
     this.isCursorVisible = true;
     if (isFocused) {
@@ -270,15 +271,15 @@ class CursorBlinkStateManager {
 
   public dispose(): void {
     if (this._blinkInterval) {
-      window.clearInterval(this._blinkInterval);
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
       this._blinkInterval = undefined;
     }
     if (this._blinkStartTimeout) {
-      window.clearTimeout(this._blinkStartTimeout);
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
       this._blinkStartTimeout = undefined;
     }
     if (this._animationFrame) {
-      window.cancelAnimationFrame(this._animationFrame);
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
       this._animationFrame = undefined;
     }
   }
@@ -292,7 +293,7 @@ class CursorBlinkStateManager {
     // Force a cursor render to ensure it's visible and in the correct position
     this.isCursorVisible = true;
     if (!this._animationFrame) {
-      this._animationFrame = window.requestAnimationFrame(() => {
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
         this._renderCallback();
         this._animationFrame = undefined;
       });
@@ -302,7 +303,7 @@ class CursorBlinkStateManager {
   private _restartInterval(timeToStart: number = BLINK_INTERVAL): void {
     // Clear any existing interval
     if (this._blinkInterval) {
-      window.clearInterval(this._blinkInterval);
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
       this._blinkInterval = undefined;
     }
 
@@ -310,7 +311,7 @@ class CursorBlinkStateManager {
     // the regular interval is setup in order to support restarting the blink
     // animation in a lightweight way (without thrashing clearInterval and
     // setInterval).
-    this._blinkStartTimeout = window.setTimeout(() => {
+    this._blinkStartTimeout = this._coreBrowserService.window.setTimeout(() => {
       // Check if another animation restart was requested while this was being
       // started
       if (this._animationTimeRestarted) {
@@ -324,13 +325,13 @@ class CursorBlinkStateManager {
 
       // Hide the cursor
       this.isCursorVisible = false;
-      this._animationFrame = window.requestAnimationFrame(() => {
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
         this._renderCallback();
         this._animationFrame = undefined;
       });
 
       // Setup the blink interval
-      this._blinkInterval = window.setInterval(() => {
+      this._blinkInterval = this._coreBrowserService.window.setInterval(() => {
         // Adjust the animation time if it was restarted
         if (this._animationTimeRestarted) {
           // calc time diff
@@ -343,7 +344,7 @@ class CursorBlinkStateManager {
 
         // Invert visibility and render
         this.isCursorVisible = !this.isCursorVisible;
-        this._animationFrame = window.requestAnimationFrame(() => {
+        this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
           this._renderCallback();
           this._animationFrame = undefined;
         });
@@ -354,15 +355,15 @@ class CursorBlinkStateManager {
   public pause(): void {
     this.isCursorVisible = true;
     if (this._blinkInterval) {
-      window.clearInterval(this._blinkInterval);
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
       this._blinkInterval = undefined;
     }
     if (this._blinkStartTimeout) {
-      window.clearTimeout(this._blinkStartTimeout);
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
       this._blinkStartTimeout = undefined;
     }
     if (this._animationFrame) {
-      window.cancelAnimationFrame(this._animationFrame);
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
       this._animationFrame = undefined;
     }
   }

addons/xterm-addon-canvas/src/LinkRenderLayer.ts

@@ -6,6 +6,7 @@
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
+import { ICoreBrowserService } from 'browser/services/Services';
 import { is256Color } from './atlas/CharAtlasUtils';
 import { IColorSet, ILinkifierEvent, ILinkifier2 } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
@@ -21,9 +22,10 @@ export class LinkRenderLayer extends BaseRenderLayer {
     linkifier2: ILinkifier2,
     bufferService: IBufferService,
     optionsService: IOptionsService,
-    decorationService: IDecorationService
+    decorationService: IDecorationService,
+    coreBrowserService: ICoreBrowserService
   ) {
-    super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService);
+    super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
 
     linkifier2.onShowLinkUnderline(e => this._onShowLinkUnderline(e));
     linkifier2.onHideLinkUnderline(e => this._onHideLinkUnderline(e));

addons/xterm-addon-canvas/src/SelectionRenderLayer.ts

@@ -25,11 +25,11 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     rendererId: number,
     bufferService: IBufferService,
-    private readonly _coreBrowserService: ICoreBrowserService,
+    coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService,
     optionsService: IOptionsService
   ) {
-    super(container, 'selection', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService);
+    super(container, 'selection', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
     this._clearState();
   }
 

addons/xterm-addon-canvas/src/TextRenderLayer.ts

@@ -12,7 +12,7 @@ import { NULL_CELL_CODE, Content, UnderlineStyle } from 'common/buffer/Constants
 import { IColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IOptionsService, IBufferService, IDecorationService } from 'common/services/Services';
-import { ICharacterJoinerService } from 'browser/services/Services';
+import { ICharacterJoinerService, ICoreBrowserService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 import { color, css } from 'common/Color';
 
@@ -39,9 +39,10 @@ export class TextRenderLayer extends BaseRenderLayer {
     bufferService: IBufferService,
     optionsService: IOptionsService,
     private readonly _characterJoinerService: ICharacterJoinerService,
-    decorationService: IDecorationService
+    decorationService: IDecorationService,
+    coreBrowserService: ICoreBrowserService
   ) {
-    super(container, 'text', zIndex, alpha, colors, rendererId, bufferService, optionsService, decorationService);
+    super(container, 'text', zIndex, alpha, colors, rendererId, bufferService, optionsService, decorationService, coreBrowserService);
     this._state = new GridCache<CharData>();
   }
 
@@ -282,8 +283,8 @@ export class TextRenderLayer extends BaseRenderLayer {
           }
           switch (cell.extended.underlineStyle) {
             case UnderlineStyle.DOUBLE:
-              this._fillBottomLineAtCells(x, y, cell.getWidth(), -window.devicePixelRatio);
-              this._fillBottomLineAtCells(x, y, cell.getWidth(), window.devicePixelRatio);
+              this._fillBottomLineAtCells(x, y, cell.getWidth(), -this._coreBrowserService.dpr);
+              this._fillBottomLineAtCells(x, y, cell.getWidth(), this._coreBrowserService.dpr);
               break;
             case UnderlineStyle.CURLY:
               this._curlyUnderlineAtCell(x, y, cell.getWidth());

addons/xterm-addon-canvas/src/atlas/CharAtlasCache.ts

@@ -29,9 +29,10 @@ export function acquireCharAtlas(
   rendererId: number,
   colors: IColorSet,
   scaledCharWidth: number,
-  scaledCharHeight: number
+  scaledCharHeight: number,
+  devicePixelRatio: number
 ): BaseCharAtlas {
-  const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, options, colors);
+  const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, options, colors, devicePixelRatio);
 
   // Check to see if the renderer already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

addons/xterm-addon-canvas/src/atlas/CharAtlasUtils.ts

@@ -8,7 +8,7 @@ import { DEFAULT_COLOR } from 'common/buffer/Constants';
 import { IColorSet, IPartialColorSet } from 'browser/Types';
 import { ITerminalOptions } from 'xterm';
 
-export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, options: Required<ITerminalOptions>, colors: IColorSet): ICharAtlasConfig {
+export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, options: Required<ITerminalOptions>, colors: IColorSet, devicePixelRatio: number): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IPartialColorSet = {
     foreground: colors.foreground,
@@ -19,7 +19,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     ansi: colors.ansi.slice()
   };
   return {
-    devicePixelRatio: window.devicePixelRatio,
+    devicePixelRatio,
     scaledCharWidth,
     scaledCharHeight,
     fontFamily: options.fontFamily,

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

@@ -77,7 +77,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._core = (this._terminal as any)._core;
 
     this._renderLayers = [
-      new LinkRenderLayer(this._core.screenElement!, 2, this._colors, this._core),
+      new LinkRenderLayer(this._core.screenElement!, 2, this._colors, this._core, this._coreBrowserService),
       new CursorRenderLayer(_terminal, this._core.screenElement!, 3, this._colors, this._onRequestRedraw, this._coreBrowserService, coreService)
     ];
     this.dimensions = {
@@ -94,7 +94,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
       actualCellWidth: 0,
       actualCellHeight: 0
     };
-    this._devicePixelRatio = window.devicePixelRatio;
+    this._devicePixelRatio = this._coreBrowserService.dpr;
     this._updateDimensions();
 
     this._canvas = document.createElement('canvas');
@@ -132,13 +132,13 @@ export class WebglRenderer extends Disposable implements IRenderer {
       this._requestRedrawViewport();
     }));
 
-    this.register(observeDevicePixelDimensions(this._canvas, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
+    this.register(observeDevicePixelDimensions(this._canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
 
     this._core.screenElement!.appendChild(this._canvas);
 
     this._initializeWebGLState();
 
-    this._isAttached = document.body.contains(this._core.screenElement!);
+    this._isAttached = this._coreBrowserService.window.document.body.contains(this._core.screenElement!);
   }
 
   public dispose(): void {
@@ -173,8 +173,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
   public onDevicePixelRatioChange(): void {
     // If the device pixel ratio changed, the char atlas needs to be regenerated
     // and the terminal needs to refreshed
-    if (this._devicePixelRatio !== window.devicePixelRatio) {
-      this._devicePixelRatio = window.devicePixelRatio;
+    if (this._devicePixelRatio !== this._coreBrowserService.dpr) {
+      this._devicePixelRatio = this._coreBrowserService.dpr;
       this.onResize(this._terminal.cols, this._terminal.rows);
     }
   }
@@ -281,7 +281,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
       return;
     }
 
-    const atlas = acquireCharAtlas(this._terminal, this._colors, this.dimensions.scaledCellWidth, this.dimensions.scaledCellHeight, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight);
+    const atlas = acquireCharAtlas(this._terminal, this._colors, this.dimensions.scaledCellWidth, this.dimensions.scaledCellHeight, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight, this._coreBrowserService.dpr);
     if (!('getRasterizedGlyph' in atlas)) {
       throw new Error('The webgl renderer only works with the webgl char atlas');
     }
@@ -329,7 +329,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   public renderRows(start: number, end: number): void {
     if (!this._isAttached) {
-      if (document.body.contains(this._core.screenElement!) && (this._core as any)._charSizeService.width && (this._core as any)._charSizeService.height) {
+      if (this._coreBrowserService.window.document.body.contains(this._core.screenElement!) && (this._core as any)._charSizeService.width && (this._core as any)._charSizeService.height) {
         this._updateDimensions();
         this._refreshCharAtlas();
         this._isAttached = true;

addons/xterm-addon-webgl/src/atlas/CharAtlasCache.ts

@@ -31,9 +31,10 @@ export function acquireCharAtlas(
   scaledCellWidth: number,
   scaledCellHeight: number,
   scaledCharWidth: number,
-  scaledCharHeight: number
+  scaledCharHeight: number,
+  devicePixelRatio: number
 ): WebglCharAtlas {
-  const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, colors);
+  const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, colors, devicePixelRatio);
 
   // Check to see if the terminal already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts

@@ -14,7 +14,7 @@ const NULL_COLOR: IColor = {
   rgba: 0
 };
 
-export function generateConfig(scaledCellWidth: number, scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet): ICharAtlasConfig {
+export function generateConfig(scaledCellWidth: number, scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet, devicePixelRatio: number): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IColorSet = {
     foreground: colors.foreground,
@@ -33,7 +33,7 @@ export function generateConfig(scaledCellWidth: number, scaledCellHeight: number
   };
   return {
     customGlyphs: terminal.options.customGlyphs,
-    devicePixelRatio: window.devicePixelRatio,
+    devicePixelRatio,
     letterSpacing: terminal.options.letterSpacing,
     lineHeight: terminal.options.lineHeight,
     scaledCellWidth,

addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts

@@ -409,7 +409,7 @@ export class WebglCharAtlas implements IDisposable {
     // Draw custom characters if applicable
     let customGlyph = false;
     if (this._config.customGlyphs !== false) {
-      customGlyph = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight, this._config.fontSize);
+      customGlyph = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight, this._config.fontSize, this._config.devicePixelRatio);
     }
 
     // Whether to clear pixels based on a threshold difference between the glyph color and the
@@ -427,7 +427,7 @@ export class WebglCharAtlas implements IDisposable {
     // Draw underline
     if (underline) {
       this._tmpCtx.save();
-      const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 15));
+      const lineWidth = Math.max(1, Math.floor(this._config.fontSize * this._config.devicePixelRatio / 15));
       // When the line width is odd, draw at a 0.5 position
       const yOffset = lineWidth % 2 === 1 ? 0.5 : 0;
       this._tmpCtx.lineWidth = lineWidth;
@@ -501,12 +501,12 @@ export class WebglCharAtlas implements IDisposable {
             );
             break;
           case UnderlineStyle.DOTTED:
-            this._tmpCtx.setLineDash([window.devicePixelRatio * 2, window.devicePixelRatio]);
+            this._tmpCtx.setLineDash([this._config.devicePixelRatio * 2, this._config.devicePixelRatio]);
             this._tmpCtx.moveTo(xChLeft, yTop);
             this._tmpCtx.lineTo(xChRight, yTop);
             break;
           case UnderlineStyle.DASHED:
-            this._tmpCtx.setLineDash([window.devicePixelRatio * 4, window.devicePixelRatio * 3]);
+            this._tmpCtx.setLineDash([this._config.devicePixelRatio * 4, this._config.devicePixelRatio * 3]);
             this._tmpCtx.moveTo(xChLeft, yTop);
             this._tmpCtx.lineTo(xChRight, yTop);
             break;
@@ -543,7 +543,7 @@ export class WebglCharAtlas implements IDisposable {
             const clipRegion = new Path2D();
             clipRegion.rect(xLeft, yTop - Math.ceil(lineWidth / 2), this._config.scaledCellWidth, yBot - yTop + Math.ceil(lineWidth / 2));
             this._tmpCtx.clip(clipRegion);
-            this._tmpCtx.lineWidth = window.devicePixelRatio * 3;
+            this._tmpCtx.lineWidth = this._config.devicePixelRatio * 3;
             this._tmpCtx.strokeStyle = backgroundColor.css;
             this._tmpCtx.strokeText(chars, padding, padding + this._config.scaledCharHeight);
             this._tmpCtx.restore();
@@ -578,7 +578,7 @@ export class WebglCharAtlas implements IDisposable {
 
     // Draw strokethrough
     if (strikethrough) {
-      const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 10));
+      const lineWidth = Math.max(1, Math.floor(this._config.fontSize * this._config.devicePixelRatio / 10));
       const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position
       this._tmpCtx.lineWidth = lineWidth;
       this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle;

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

@@ -8,6 +8,7 @@ import { acquireCharAtlas } from '../atlas/CharAtlasCache';
 import { Terminal } from 'xterm';
 import { IColorSet } from 'browser/Types';
 import { TEXT_BASELINE } from 'browser/renderer/Constants';
+import { ICoreBrowserService } from 'browser/services/Services';
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { CellData } from 'common/buffer/CellData';
 import { WebglCharAtlas } from 'atlas/WebglCharAtlas';
@@ -30,7 +31,8 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     id: string,
     zIndex: number,
     private _alpha: boolean,
-    protected _colors: IColorSet
+    protected _colors: IColorSet,
+    protected readonly _coreBrowserService: ICoreBrowserService
   ) {
     this._canvas = document.createElement('canvas');
     this._canvas.classList.add(`xterm-${id}-layer`);
@@ -93,7 +95,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCellWidth, this._scaledCellHeight, this._scaledCharWidth, this._scaledCharHeight);
+    this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCellWidth, this._scaledCellHeight, this._scaledCharWidth, this._scaledCharHeight, this._coreBrowserService.dpr);
     this._charAtlas.warmUp();
   }
 
@@ -143,9 +145,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   protected _fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
     this._ctx.fillRect(
       x * this._scaledCellWidth,
-      (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
+      (y + 1) * this._scaledCellHeight - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
       width * this._scaledCellWidth,
-      window.devicePixelRatio);
+      this._coreBrowserService.dpr);
   }
 
   /**
@@ -158,7 +160,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.fillRect(
       x * this._scaledCellWidth,
       y * this._scaledCellHeight,
-      window.devicePixelRatio * width,
+      this._coreBrowserService.dpr * width,
       this._scaledCellHeight);
   }
 
@@ -169,12 +171,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param y The row to fill.
    */
   protected _strokeRectAtCell(x: number, y: number, width: number, height: number): void {
-    this._ctx.lineWidth = window.devicePixelRatio;
+    this._ctx.lineWidth = this._coreBrowserService.dpr;
     this._ctx.strokeRect(
-      x * this._scaledCellWidth + window.devicePixelRatio / 2,
-      y * this._scaledCellHeight + (window.devicePixelRatio / 2),
-      width * this._scaledCellWidth - window.devicePixelRatio,
-      (height * this._scaledCellHeight) - window.devicePixelRatio);
+      x * this._scaledCellWidth + this._coreBrowserService.dpr / 2,
+      y * this._scaledCellHeight + (this._coreBrowserService.dpr / 2),
+      width * this._scaledCellWidth - this._coreBrowserService.dpr,
+      (height * this._scaledCellHeight) - this._coreBrowserService.dpr);
   }
 
   /**
@@ -258,7 +260,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     const fontWeight = isBold ? terminal.options.fontWeightBold : terminal.options.fontWeight;
     const fontStyle = isItalic ? 'italic' : '';
 
-    return `${fontStyle} ${fontWeight} ${terminal.options.fontSize! * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
+    return `${fontStyle} ${fontWeight} ${terminal.options.fontSize! * this._coreBrowserService.dpr}px ${terminal.options.fontFamily}`;
   }
 }
 

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

@@ -38,10 +38,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     zIndex: number,
     colors: IColorSet,
     private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRedrawEvent>,
-    private readonly _coreBrowserService: ICoreBrowserService,
+    coreBrowserService: ICoreBrowserService,
     private readonly _coreService: ICoreService
   ) {
-    super(container, 'cursor', zIndex, true, colors);
+    super(container, 'cursor', zIndex, true, colors, coreBrowserService);
     this._state = {
       x: 0,
       y: 0,
@@ -195,7 +195,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _clearCursor(): void {
     if (this._state) {
       // Avoid potential rounding errors when device pixel ratio is less than 1
-      if (window.devicePixelRatio < 1) {
+      if (this._coreBrowserService.dpr < 1) {
         this._clearAll();
       } else {
         this._clearCells(this._state.x, this._state.y, this._state.width, 1);
@@ -257,10 +257,10 @@ class CursorBlinkStateManager {
 
   constructor(
     private _renderCallback: () => void,
-    coreBrowserService: ICoreBrowserService
+    private _coreBrowserService: ICoreBrowserService
   ) {
     this.isCursorVisible = true;
-    if (coreBrowserService.isFocused) {
+    if (this._coreBrowserService.isFocused) {
       this._restartInterval();
     }
   }
@@ -269,15 +269,15 @@ class CursorBlinkStateManager {
 
   public dispose(): void {
     if (this._blinkInterval) {
-      window.clearInterval(this._blinkInterval);
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
       this._blinkInterval = undefined;
     }
     if (this._blinkStartTimeout) {
-      window.clearTimeout(this._blinkStartTimeout);
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
       this._blinkStartTimeout = undefined;
     }
     if (this._animationFrame) {
-      window.cancelAnimationFrame(this._animationFrame);
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
       this._animationFrame = undefined;
     }
   }
@@ -291,7 +291,7 @@ class CursorBlinkStateManager {
     // Force a cursor render to ensure it's visible and in the correct position
     this.isCursorVisible = true;
     if (!this._animationFrame) {
-      this._animationFrame = window.requestAnimationFrame(() => {
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
         this._renderCallback();
         this._animationFrame = undefined;
       });
@@ -301,7 +301,7 @@ class CursorBlinkStateManager {
   private _restartInterval(timeToStart: number = BLINK_INTERVAL): void {
     // Clear any existing interval
     if (this._blinkInterval) {
-      window.clearInterval(this._blinkInterval);
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
       this._blinkInterval = undefined;
     }
 
@@ -309,7 +309,7 @@ class CursorBlinkStateManager {
     // the regular interval is setup in order to support restarting the blink
     // animation in a lightweight way (without thrashing clearInterval and
     // setInterval).
-    this._blinkStartTimeout = window.setTimeout(() => {
+    this._blinkStartTimeout = this._coreBrowserService.window.setTimeout(() => {
       // Check if another animation restart was requested while this was being
       // started
       if (this._animationTimeRestarted) {
@@ -323,13 +323,13 @@ class CursorBlinkStateManager {
 
       // Hide the cursor
       this.isCursorVisible = false;
-      this._animationFrame = window.requestAnimationFrame(() => {
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
         this._renderCallback();
         this._animationFrame = undefined;
       });
 
       // Setup the blink interval
-      this._blinkInterval = window.setInterval(() => {
+      this._blinkInterval = this._coreBrowserService.window.setInterval(() => {
         // Adjust the animation time if it was restarted
         if (this._animationTimeRestarted) {
           // calc time diff
@@ -342,7 +342,7 @@ class CursorBlinkStateManager {
 
         // Invert visibility and render
         this.isCursorVisible = !this.isCursorVisible;
-        this._animationFrame = window.requestAnimationFrame(() => {
+        this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
           this._renderCallback();
           this._animationFrame = undefined;
         });
@@ -353,15 +353,15 @@ class CursorBlinkStateManager {
   public pause(): void {
     this.isCursorVisible = true;
     if (this._blinkInterval) {
-      window.clearInterval(this._blinkInterval);
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
       this._blinkInterval = undefined;
     }
     if (this._blinkStartTimeout) {
-      window.clearTimeout(this._blinkStartTimeout);
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
       this._blinkStartTimeout = undefined;
     }
     if (this._animationFrame) {
-      window.cancelAnimationFrame(this._animationFrame);
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
       this._animationFrame = undefined;
     }
   }

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

@@ -9,12 +9,19 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
 import { is256Color } from '../atlas/CharAtlasUtils';
 import { ITerminal, IColorSet, ILinkifierEvent } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
+import { ICoreBrowserService } from 'browser/services/Services';
 
 export class LinkRenderLayer extends BaseRenderLayer {
   private _state: ILinkifierEvent | undefined;
 
-  constructor(container: HTMLElement, zIndex: number, colors: IColorSet, terminal: ITerminal) {
-    super(container, 'link', zIndex, true, colors);
+  constructor(
+    container: HTMLElement,
+    zIndex: number,
+    colors: IColorSet,
+    terminal: ITerminal,
+    coreBrowserService: ICoreBrowserService
+  ) {
+    super(container, 'link', zIndex, true, colors, coreBrowserService);
 
     terminal.linkifier2.onShowLinkUnderline(e => this._onShowLinkUnderline(e));
     terminal.linkifier2.onHideLinkUnderline(e => this._onHideLinkUnderline(e));

demo/client.ts

@@ -94,7 +94,7 @@ const addons: { [T in AddonType]: IDemoAddon<T> } = {
   ligatures: { name: 'ligatures', ctor: LigaturesAddon, canChange: true }
 };
 
-const terminalContainer = document.getElementById('terminal-container');
+let terminalContainer = document.getElementById('terminal-container');
 const actionElements = {
   find: <HTMLInputElement>document.querySelector('#find'),
   findNext: <HTMLInputElement>document.querySelector('#find-next'),
@@ -169,6 +169,35 @@ const disposeRecreateButtonHandler = () => {
   }
 };
 
+const createNewWindowButtonHandler = () => {
+  if (term) {
+    disposeRecreateButtonHandler();
+  }
+  const win = window.open();
+  terminalContainer = win.document.createElement('div');
+  terminalContainer.id = 'terminal-container';
+  win.document.body.appendChild(terminalContainer);
+
+  // Stylesheets are needed to get the terminal in the popout window to render
+  // correctly. We also need to wait for them to load before creating the
+  // terminal, otherwise we will not compute the correct metrics when rendering.
+  let pendingStylesheets = 0;
+  for (const linkNode of document.querySelectorAll('head link[rel=stylesheet]')) {
+    const newLink = document.createElement('link');
+    newLink.rel = 'stylesheet';
+    newLink.href = (linkNode as HTMLLinkElement).href;
+    win.document.head.appendChild(newLink);
+
+    pendingStylesheets++;
+    newLink.addEventListener('load', () => {
+      pendingStylesheets--;
+      if (pendingStylesheets === 0) {
+        createTerminal();
+      }
+    });
+  }
+}
+
 if (document.location.pathname === '/test') {
   window.Terminal = Terminal;
   window.AttachAddon = AttachAddon;
@@ -182,6 +211,7 @@ if (document.location.pathname === '/test') {
 } else {
   createTerminal();
   document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler);
+  document.getElementById('create-new-window').addEventListener('click', createNewWindowButtonHandler);
   document.getElementById('serialize').addEventListener('click', serializeButtonHandler);
   document.getElementById('htmlserialize').addEventListener('click', htmlSerializeButtonHandler);
   document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler);

demo/index.html

@@ -70,6 +70,7 @@
             <dl>
               <dt>Lifecycle</dt>
               <dd><button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button></dd>
+              <dd><button id="create-new-window" title="This is used to test rendering in other windows">Create terminal in new window</button></dd>
 
               <dt>Performance</dt>
               <dd><button id="load-test" title="Write several MB of data to simulate a lot of data coming from the process">Load test</button></dd>

src/browser/AccessibilityManager.ts

@@ -98,7 +98,7 @@ export class AccessibilityManager extends Disposable {
     this.register(this._terminal.onBlur(() => this._clearLiveRegion()));
     this.register(this._renderService.onDimensionsChange(() => this._refreshRowsDimensions()));
 
-    this._screenDprMonitor = new ScreenDprMonitor();
+    this._screenDprMonitor = new ScreenDprMonitor(window);
     this.register(this._screenDprMonitor);
     this._screenDprMonitor.setListener(() => this._refreshRowsDimensions());
     // This shouldn't be needed on modern browsers but is present in case the

src/browser/RenderDebouncer.ts

@@ -16,13 +16,14 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback {
   private _refreshCallbacks: FrameRequestCallback[] = [];
 
   constructor(
+    private _parentWindow: Window,
     private _renderCallback: (start: number, end: number) => void
   ) {
   }
 
   public dispose(): void {
     if (this._animationFrame) {
-      window.cancelAnimationFrame(this._animationFrame);
+      this._parentWindow.cancelAnimationFrame(this._animationFrame);
       this._animationFrame = undefined;
     }
   }
@@ -30,7 +31,7 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback {
   public addRefreshCallback(callback: FrameRequestCallback): number {
     this._refreshCallbacks.push(callback);
     if (!this._animationFrame) {
-      this._animationFrame = window.requestAnimationFrame(() => this._innerRefresh());
+      this._animationFrame = this._parentWindow.requestAnimationFrame(() => this._innerRefresh());
     }
     return this._animationFrame;
   }
@@ -48,7 +49,7 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback {
       return;
     }
 
-    this._animationFrame = window.requestAnimationFrame(() => this._innerRefresh());
+    this._animationFrame = this._parentWindow.requestAnimationFrame(() => this._innerRefresh());
   }
 
   private _innerRefresh(): void {