workaround for CSS injection in firefox

when taking screenshots, firefox complains adoptedStyleSheets.push is not a function
This commit is contained in:
Rui Figueira 2024-04-14 17:45:16 +01:00
parent fb69e334f8
commit 3460693f5f
2 changed files with 12 additions and 4 deletions

View file

@ -75,9 +75,17 @@ export class Highlight {
this._actionPointElement = document.createElement('x-pw-action-point'); this._actionPointElement = document.createElement('x-pw-action-point');
this._actionPointElement.setAttribute('hidden', 'true'); this._actionPointElement.setAttribute('hidden', 'true');
this._glassPaneShadow = this._glassPaneElement.attachShadow({ mode: this._isUnderTest ? 'open' : 'closed' }); this._glassPaneShadow = this._glassPaneElement.attachShadow({ mode: this._isUnderTest ? 'open' : 'closed' });
const sheet = new injectedScript.window.CSSStyleSheet(); // workaround for firefox: when taking screenshots, it complains adoptedStyleSheets.push
sheet.replaceSync(highlightCSS); // is not a function, so we fallback to style injection
this._glassPaneShadow.adoptedStyleSheets = [sheet]; if (typeof this._glassPaneShadow.adoptedStyleSheets.push === 'function') {
const sheet = new this._injectedScript.window.CSSStyleSheet();
sheet.replaceSync(highlightCSS);
this._glassPaneShadow.adoptedStyleSheets.push(sheet);
} else {
const styleElement = this._injectedScript.document.createElement('style');
styleElement.textContent = highlightCSS;
this._glassPaneShadow.appendChild(styleElement);
}
this._glassPaneShadow.appendChild(this._actionPointElement); this._glassPaneShadow.appendChild(this._actionPointElement);
} }

View file

@ -1057,7 +1057,7 @@ export class Recorder {
]; ];
this.highlight.install(); this.highlight.install();
this.overlay?.install(); this.overlay?.install();
this.document.adoptedStyleSheets = [...this.document.adoptedStyleSheets, this._stylesheet]; this.document.adoptedStyleSheets.push(this._stylesheet);
} }
private _switchCurrentTool() { private _switchCurrentTool() {