From 2aee19f0e1b262f5c6bec1f88638439cbfcdaa68 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Tue, 15 Aug 2023 08:31:34 -0700 Subject: [PATCH 1/2] Revert "Workaround crash that can happen in Electron/Chromium" This reverts commit 2ca0ccbe0c57acfcf5cc61ac2e6922577331a130. --- src/browser/renderer/dom/StyleSheet.ts | 13 ++++--------- src/common/Platform.ts | 1 - 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/browser/renderer/dom/StyleSheet.ts b/src/browser/renderer/dom/StyleSheet.ts index a4c52da4..574615f4 100644 --- a/src/browser/renderer/dom/StyleSheet.ts +++ b/src/browser/renderer/dom/StyleSheet.ts @@ -3,8 +3,6 @@ * @license MIT */ -import { isElectron } from 'common/Platform'; - export interface IStyleSheet { dispose: () => void; setCss: (value: string) => void; @@ -39,12 +37,9 @@ const createStyleElement = (parent: HTMLElement): IStyleSheet => { }; 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 */ } + try { + return createCssStyleSheet(parent.ownerDocument); + } catch { + return createStyleElement(parent); } - 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); From 843bdc4d55123eba5d2c428c6e90760686c1a783 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Tue, 15 Aug 2023 08:32:49 -0700 Subject: [PATCH 2/2] Revert "Merge pull request #4611 from SimonSiefke/constructed-stylesheets" This reverts commit 5889344dd25dcf562b7a16c47de79cbe39c8eb8f, reversing changes made to 679c149164f55b8e2a0141d5e22b81e7ebf75f8b. --- src/browser/renderer/dom/DomRenderer.ts | 23 +++++++------ src/browser/renderer/dom/StyleSheet.ts | 45 ------------------------- 2 files changed, 12 insertions(+), 56 deletions(-) delete mode 100644 src/browser/renderer/dom/StyleSheet.ts 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 574615f4..00000000 --- a/src/browser/renderer/dom/StyleSheet.ts +++ /dev/null @@ -1,45 +0,0 @@ -/** - * 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); - } -};