Merge branch 'master' into faster_dom

src/browser/renderer/dom/DomRenderer.ts

@@ -14,6 +14,7 @@ import { color } from 'common/Color';
 import { EventEmitter } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, IInstantiationService, IOptionsService } from 'common/services/Services';
+import { createStyle, IStyleSheet } from './StyleSheet';
 
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
@@ -35,7 +36,7 @@ export class DomRenderer extends Disposable implements IRenderer {
   private _rowFactory: DomRendererRowFactory;
   private _terminalClass: number = nextTerminalId++;
 
-  private _themeStyleElement!: HTMLStyleElement;
+  private _themeStyle!: IStyleSheet;
   private _rowContainer: HTMLElement;
   private _rowElements: HTMLElement[] = [];
   private _selectionContainer: HTMLElement;
@@ -90,7 +91,7 @@ export class DomRenderer extends Disposable implements IRenderer {
       // https://github.com/xtermjs/xterm.js/issues/2960
       this._rowContainer.remove();
       this._selectionContainer.remove();
-      this._themeStyleElement.remove();
+      this._themeStyle.dispose();
       this._widthCache.dispose();
     }));
 
@@ -127,9 +128,8 @@ export class DomRenderer extends Disposable implements IRenderer {
   }
 
   private _injectCss(colors: ReadonlyColorSet): void {
-    if (!this._themeStyleElement) {
-      this._themeStyleElement = document.createElement('style');
-      this._screenElement.appendChild(this._themeStyleElement);
+    if (!this._themeStyle) {
+      this._themeStyle = createStyle(this._screenElement);
     }
 
     // Base CSS
@@ -228,7 +228,7 @@ export class DomRenderer extends Disposable implements IRenderer {
       `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR}.${RowCss.DIM_CLASS} { color: ${color.multiplyOpacity(color.opaque(colors.background), 0.5).css}; }` +
       `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${colors.foreground.css}; }`;
 
-    this._themeStyleElement.textContent = styles;
+    this._themeStyle.setCss(styles);
   }
 
   public handleDevicePixelRatioChange(): void {

src/browser/renderer/dom/StyleSheet.ts

@@ -0,0 +1,39 @@
+export interface IStyleSheet {
+  dispose: () => void;
+  setCss: (value: string) => void;
+}
+
+const createCssStyleSheet = (): IStyleSheet => {
+  const sheet = new CSSStyleSheet();
+  document.adoptedStyleSheets.push(sheet);
+  return {
+    dispose() {
+      const index = document.adoptedStyleSheets.indexOf(sheet);
+      document.adoptedStyleSheets.splice(index, 1);
+    },
+    setCss(css) {
+      sheet.replaceSync(css);
+    }
+  };
+};
+
+const createStyleElement = (parent: HTMLElement): IStyleSheet => {
+  const element = document.createElement('style');
+  parent.append(element);
+  return {
+    dispose() {
+      element.remove();
+    },
+    setCss(css) {
+      element.textContent = css;
+    }
+  };
+};
+
+export const createStyle = (parent: HTMLElement): IStyleSheet => {
+  try {
+    return createCssStyleSheet();
+  } catch {
+    return createStyleElement(parent);
+  }
+};

src/common/InputHandler.test.ts

@@ -1950,14 +1950,14 @@ describe('InputHandler', () => {
       inputHandler.onColor(ev => stack.push(ev));
       // single color query
       await inputHandler.parseP('\x1b]4;0;?\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.REPORT, index: 0 }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.REPORT, index: 0 as ColorIndex }]]);
       stack.length = 0;
       await inputHandler.parseP('\x1b]4;123;?\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.REPORT, index: 123 }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.REPORT, index: 123 as ColorIndex }]]);
       stack.length = 0;
       // multiple queries
       await inputHandler.parseP('\x1b]4;0;?;123;?\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.REPORT, index: 0 }, { type: ColorRequestType.REPORT, index: 123 }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.REPORT, index: 0 as ColorIndex }, { type: ColorRequestType.REPORT, index: 123 as ColorIndex }]]);
       stack.length = 0;
     });
     it('4: set color events', async () => {
@@ -1965,32 +1965,32 @@ describe('InputHandler', () => {
       inputHandler.onColor(ev => stack.push(ev));
       // single color query
       await inputHandler.parseP('\x1b]4;0;rgb:01/02/03\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.SET, index: 0, color: [1, 2, 3] }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.SET, index: 0 as ColorIndex, color: [1, 2, 3] }]]);
       stack.length = 0;
       await inputHandler.parseP('\x1b]4;123;#aabbcc\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.SET, index: 123, color: [170, 187, 204] }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.SET, index: 123 as ColorIndex, color: [170, 187, 204] }]]);
       stack.length = 0;
       // multiple queries
       await inputHandler.parseP('\x1b]4;0;rgb:aa/bb/cc;123;#001122\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.SET, index: 0, color: [170, 187, 204] }, { type: ColorRequestType.SET, index: 123, color: [0, 17, 34] }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.SET, index: 0 as ColorIndex, color: [170, 187, 204] }, { type: ColorRequestType.SET, index: 123 as ColorIndex, color: [0, 17, 34] }]]);
       stack.length = 0;
     });
     it('4: should ignore invalid values', async () => {
       const stack: IColorEvent[] = [];
       inputHandler.onColor(ev => stack.push(ev));
       await inputHandler.parseP('\x1b]4;0;rgb:aa/bb/cc;45;rgb:1/22/333;123;#001122\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.SET, index: 0, color: [170, 187, 204] }, { type: ColorRequestType.SET, index: 123, color: [0, 17, 34] }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.SET, index: 0 as ColorIndex, color: [170, 187, 204] }, { type: ColorRequestType.SET, index: 123 as ColorIndex, color: [0, 17, 34] }]]);
       stack.length = 0;
     });
     it('104: restore events', async () => {
       const stack: IColorEvent[] = [];
       inputHandler.onColor(ev => stack.push(ev));
       await inputHandler.parseP('\x1b]104;0\x07\x1b]104;43\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.RESTORE, index: 0 }], [{ type: ColorRequestType.RESTORE, index: 43 }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.RESTORE, index: 0 as ColorIndex }], [{ type: ColorRequestType.RESTORE, index: 43 as ColorIndex }]]);
       stack.length = 0;
       // multiple in one command
       await inputHandler.parseP('\x1b]104;0;43\x07');
-      assert.deepEqual(stack, [[{ type: ColorRequestType.RESTORE, index: 0 }, { type: ColorRequestType.RESTORE, index: 43 }]]);
+      assert.deepEqual(stack, [[{ type: ColorRequestType.RESTORE, index: 0 as ColorIndex }, { type: ColorRequestType.RESTORE, index: 43 as ColorIndex }]]);
       stack.length = 0;
       // full ANSI table restore
       await inputHandler.parseP('\x1b]104\x07');