Merge branch 'master' into #4121

src/browser/Terminal.ts

@@ -35,7 +35,7 @@ import * as Strings from 'browser/LocalizableStrings';
 import { AccessibilityManager } from './AccessibilityManager';
 import { ITheme, IMarker, IDisposable, ILinkProvider, IDecorationOptions, IDecoration } from 'xterm';
 import { DomRenderer } from 'browser/renderer/dom/DomRenderer';
-import { KeyboardResultType, CoreMouseEventType, CoreMouseButton, CoreMouseAction, ITerminalOptions, ScrollSource, IColorEvent, ColorIndex, ColorRequestType } from 'common/Types';
+import { KeyboardResultType, CoreMouseEventType, CoreMouseButton, CoreMouseAction, ITerminalOptions, ScrollSource, IColorEvent, ColorIndex, ColorRequestType, SpecialColorIndex } from 'common/Types';
 import { evaluateKeyboardEvent } from 'common/input/Keyboard';
 import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
@@ -203,15 +203,15 @@ export class Terminal extends CoreTerminal implements ITerminal {
       let acc: 'foreground' | 'background' | 'cursor' | 'ansi';
       let ident = '';
       switch (req.index) {
-        case ColorIndex.FOREGROUND: // OSC 10 | 110
+        case SpecialColorIndex.FOREGROUND: // OSC 10 | 110
           acc = 'foreground';
           ident = '10';
           break;
-        case ColorIndex.BACKGROUND: // OSC 11 | 111
+        case SpecialColorIndex.BACKGROUND: // OSC 11 | 111
           acc = 'background';
           ident = '11';
           break;
-        case ColorIndex.CURSOR: // OSC 12 | 112
+        case SpecialColorIndex.CURSOR: // OSC 12 | 112
           acc = 'cursor';
           ident = '12';
           break;

src/browser/renderer/dom/DomRenderer.ts

@@ -13,6 +13,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-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -32,8 +33,8 @@ export class DomRenderer extends Disposable implements IRenderer {
   private _rowFactory: DomRendererRowFactory;
   private _terminalClass: number = nextTerminalId++;
 
-  private _themeStyleElement!: HTMLStyleElement;
-  private _dimensionsStyleElement!: HTMLStyleElement;
+  private _themeStyle!: IStyleSheet;
+  private _dimensionsStyle!: IStyleSheet;
   private _rowContainer: HTMLElement;
   private _rowElements: HTMLElement[] = [];
   private _selectionContainer: HTMLElement;
@@ -88,8 +89,8 @@ 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._dimensionsStyleElement.remove();
+      this._themeStyle.dispose();
+      this._dimensionsStyle.dispose();
     }));
   }
 
@@ -116,9 +117,8 @@ export class DomRenderer extends Disposable implements IRenderer {
       element.style.overflow = 'hidden';
     }
 
-    if (!this._dimensionsStyleElement) {
-      this._dimensionsStyleElement = document.createElement('style');
-      this._screenElement.appendChild(this._dimensionsStyleElement);
+    if (!this._dimensionsStyle) {
+      this._dimensionsStyle = createStyle(this._screenElement);
     }
 
     const styles =
@@ -129,7 +129,7 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` width: ${this.dimensions.css.cell.width}px` +
       `}`;
 
-    this._dimensionsStyleElement.textContent = styles;
+    this._dimensionsStyle.setCss(styles);
 
     this._selectionContainer.style.height = this._viewportElement.style.height;
     this._screenElement.style.width = `${this.dimensions.css.canvas.width}px`;
@@ -137,9 +137,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
@@ -236,7 +235,7 @@ export class DomRenderer extends Disposable implements IRenderer {
       `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR}.${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,45 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export interface IStyleSheet {
+  dispose: () => void;
+  setCss: (value: string) => void;
+}
+
+const createCssStyleSheet = (doc: Document): IStyleSheet => {
+  const sheet = new CSSStyleSheet();
+  doc.adoptedStyleSheets.push(sheet);
+  return {
+    dispose() {
+      const index = doc.adoptedStyleSheets.indexOf(sheet);
+      doc.adoptedStyleSheets.splice(index, 1);
+    },
+    setCss(css) {
+      sheet.replaceSync(css);
+    }
+  };
+};
+
+const createStyleElement = (parent: HTMLElement): IStyleSheet => {
+  const doc = parent.ownerDocument;
+  const element = doc.createElement('style');
+  parent.append(element);
+  return {
+    dispose() {
+      element.remove();
+    },
+    setCss(css) {
+      element.textContent = css;
+    }
+  };
+};
+
+export const createStyle = (parent: HTMLElement): IStyleSheet => {
+  try {
+    return createCssStyleSheet(parent.ownerDocument);
+  } catch {
+    return createStyleElement(parent);
+  }
+};

src/browser/services/Services.ts

@@ -8,8 +8,7 @@ import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
 import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { createDecorator } from 'common/services/ServiceRegistry';
-import { ColorIndex, IDisposable } from 'common/Types';
-import { ITheme } from 'common/services/Services';
+import { AllColorIndex, IDisposable } from 'common/Types';
 
 export const ICharSizeService = createDecorator<ICharSizeService>('CharSizeService');
 export interface ICharSizeService {
@@ -130,7 +129,7 @@ export interface IThemeService {
 
   readonly onChangeColors: IEvent<ReadonlyColorSet>;
 
-  restoreColor(slot?: ColorIndex): void;
+  restoreColor(slot?: AllColorIndex): void;
   /**
    * Allows external modifying of colors in the theme, this is used instead of {@link colors} to
    * prevent accidental writes.

src/browser/services/ThemeService.ts

@@ -10,7 +10,7 @@ import { channels, color, css, NULL_COLOR } from 'common/Color';
 import { EventEmitter } from 'common/EventEmitter';
 import { Disposable } from 'common/Lifecycle';
 import { IOptionsService, ITheme } from 'common/services/Services';
-import { ColorIndex, IColor } from 'common/Types';
+import { ColorIndex, SpecialColorIndex, IColor, AllColorIndex } from 'common/Types';
 
 interface IRestoreColorSet {
   foreground: IColor;
@@ -176,12 +176,12 @@ export class ThemeService extends Disposable implements IThemeService {
     this._onChangeColors.fire(this.colors);
   }
 
-  public restoreColor(slot?: ColorIndex): void {
+  public restoreColor(slot?: AllColorIndex): void {
     this._restoreColor(slot);
     this._onChangeColors.fire(this.colors);
   }
 
-  private _restoreColor(slot: ColorIndex | undefined): void {
+  private _restoreColor(slot: AllColorIndex | undefined): void {
     // unset slot restores all ansi colors
     if (slot === undefined) {
       for (let i = 0; i < this._restoreColors.ansi.length; ++i) {
@@ -190,13 +190,13 @@ export class ThemeService extends Disposable implements IThemeService {
       return;
     }
     switch (slot) {
-      case ColorIndex.FOREGROUND:
+      case SpecialColorIndex.FOREGROUND:
         this._colors.foreground = this._restoreColors.foreground;
         break;
-      case ColorIndex.BACKGROUND:
+      case SpecialColorIndex.BACKGROUND:
         this._colors.background = this._restoreColors.background;
         break;
-      case ColorIndex.CURSOR:
+      case SpecialColorIndex.CURSOR:
         this._colors.cursor = this._restoreColors.cursor;
         break;
       default: