diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index 1449aee6..8126de6e 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -14,7 +14,6 @@ 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-'; @@ -36,8 +35,8 @@ export class DomRenderer extends Disposable implements IRenderer { private _rowFactory: DomRendererRowFactory; private _terminalClass: number = nextTerminalId++; - private _themeStyle!: IStyleSheet; - private _dimensionsStyle!: IStyleSheet; + private _themeStyleElement!: HTMLStyleElement; + private _dimensionsStyleElement!: HTMLStyleElement; private _rowContainer: HTMLElement; private _rowElements: HTMLElement[] = []; private _selectionContainer: HTMLElement; @@ -92,9 +91,9 @@ export class DomRenderer extends Disposable implements IRenderer { // https://github.com/xtermjs/xterm.js/issues/2960 this._rowContainer.remove(); this._selectionContainer.remove(); - this._themeStyle.dispose(); - this._dimensionsStyle.dispose(); this._widthCache.dispose(); + this._themeStyleElement.remove(); + this._dimensionsStyleElement.remove(); })); this._widthCache = new WidthCache(document); @@ -130,8 +129,9 @@ export class DomRenderer extends Disposable implements IRenderer { element.style.overflow = 'hidden'; } - if (!this._dimensionsStyle) { - this._dimensionsStyle = createStyle(this._screenElement); + if (!this._dimensionsStyleElement) { + this._dimensionsStyleElement = document.createElement('style'); + this._screenElement.appendChild(this._dimensionsStyleElement); } const styles = @@ -141,7 +141,7 @@ export class DomRenderer extends Disposable implements IRenderer { ` vertical-align: top;` + `}`; - this._dimensionsStyle.setCss(styles); + this._dimensionsStyleElement.textContent = styles; this._selectionContainer.style.height = this._viewportElement.style.height; this._screenElement.style.width = `${this.dimensions.css.canvas.width}px`; @@ -149,8 +149,9 @@ export class DomRenderer extends Disposable implements IRenderer { } private _injectCss(colors: ReadonlyColorSet): void { - if (!this._themeStyle) { - this._themeStyle = createStyle(this._screenElement); + if (!this._themeStyleElement) { + this._themeStyleElement = document.createElement('style'); + this._screenElement.appendChild(this._themeStyleElement); } // Base CSS @@ -248,7 +249,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._themeStyle.setCss(styles); + this._themeStyleElement.textContent = styles; } /** diff --git a/src/browser/renderer/dom/StyleSheet.ts b/src/browser/renderer/dom/StyleSheet.ts deleted file mode 100644 index a4c52da4..00000000 --- a/src/browser/renderer/dom/StyleSheet.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Copyright (c) 2023 The xterm.js authors. All rights reserved. - * @license MIT - */ - -import { isElectron } from 'common/Platform'; - -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 => { - // The combination of the CSP workaround and the DOM renderer can trigger a crash in electron - // https://github.com/microsoft/vscode/issues/189753 - if (!isElectron) { - try { - return createCssStyleSheet(parent.ownerDocument); - } catch { /* Fall through */ } - } - return createStyleElement(parent); -}; diff --git a/src/common/Platform.ts b/src/common/Platform.ts index 27dc97cf..41d8552e 100644 --- a/src/common/Platform.ts +++ b/src/common/Platform.ts @@ -17,7 +17,6 @@ export const isNode = (typeof navigator === 'undefined') ? true : false; const userAgent = (isNode) ? 'node' : navigator.userAgent; const platform = (isNode) ? 'node' : navigator.platform; -export const isElectron = userAgent.includes('Electron'); export const isFirefox = userAgent.includes('Firefox'); export const isLegacyEdge = userAgent.includes('Edge'); export const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);