xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Buffer modifications to virtual stylesheets (#618)

Browse Source 
* Fix sheet insertion

Restore skip duration

Use virtualStyleRulesMap to re-populate stylesheet on Flush event

Clear virtualStyleRulesMap after flush applied

* Support rule deletion in virtual processing

* Simply restoreNodeSheet with early aborts

* Encountered a bug where firstFullSnapshot was played twice because timer was immediately started and reached the snapshot before the setTimeout returned

* Ignoring a FullSnapshot needs to be a one-time only thing, as otherwise we'll ignore it after scrubbing (restarting play head at a particular time). This is a problem if mutations have altered the player state, and we try to replay those mutations, so we e.g. try to remove an element that has already been removed because we haven't reset the FullSnapshot state

* Some `npm run typings` related fixups

* add basic html snapshot functionality

* move restoreNodeSheet to it's own module

* Refactor virtual style rules to buffer changes.
Only applies changes on flush.

`virtualStyleRulesMap` now works with strings instead of CSSRules.
CSSRules can only be via made `.insertRule` on CSSStyleSheet in most browsers.
And `new CSSStyleSheet()` only works in Chrome currently.

* remove unused code

* move VirtualStyleRules from CSSRule to string in tests

* correct paths for tests

* naming

* create and restore style snapshots for virtual nodes

* update replayer snapshot

* move storeCSSRules to virtual-styles.ts

* try/catch access to .sheet in case of access errors

* clean up tests

Co-authored-by: Vladimir Milenko <vladimir.milenko@uber.com>
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 9df2aa8e0e
commit 59b7a39ce1
9 changed files with 1851 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
test/utils.ts
View File

@@ -8,6 +8,7 @@ import {
MouseInteractions,
} from '../src/types';
import * as puppeteer from 'puppeteer';
import { TidyDoc } from 'node-libtidy';
export async function launchPuppeteer() {
return await puppeteer.launch({
@@ -61,7 +62,7 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
s.data.href = 'about:blank';
}
// FIXME: travis coordinates seems different with my laptop
const coordinatesReg = /(bottom|top|left|right|width|height): \d+(\.\d+)?px/g
const coordinatesReg = /(bottom|top|left|right|width|height): \d+(\.\d+)?px/g;
if (
s.type === EventType.IncrementalSnapshot &&
s.data.source === IncrementalSource.MouseInteraction
@@ -78,7 +79,10 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
'style' in a.attributes &&
coordinatesReg.test(a.attributes.style!)
) {
a.attributes.style = a.attributes.style!.replace(coordinatesReg, '$1: Npx');
a.attributes.style = a.attributes.style!.replace(
coordinatesReg,
'$1: Npx',
);
}
});
s.data.adds.forEach((add) => {
@@ -88,7 +92,10 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
typeof add.node.attributes.style === 'string' &&
coordinatesReg.test(add.node.attributes.style)
) {
add.node.attributes.style = add.node.attributes.style.replace(coordinatesReg, '$1: Npx');
add.node.attributes.style = add.node.attributes.style.replace(
coordinatesReg,
'$1: Npx',
);
}
});
}
@@ -100,6 +107,49 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
);
}
function stringifyDomSnapshot(mhtml: string): string {
const { Parser } = require('fast-mhtml');
const resources: string[] = [];
const p = new Parser({
rewriteFn: (filename: string): string => {
const index = resources.indexOf(filename);
const prefix = /^\w+/.exec(filename);
if (index !== -1) {
return `file-${prefix}-${index}`;
} else {
return `file-${prefix}-${resources.push(filename) - 1}`;
}
},
});
const result = p
.parse(mhtml) // parse file
.rewrite() // rewrite all links
.spit(); // return all contents
const newResult: { filename: string; content: string }[] = result.map(
(asset: { filename: string; content: string }) => {
let { filename, content } = asset;
let res: string | undefined;
if (filename.includes('frame')) {
const doc = TidyDoc();
doc.options = {
indent: 'auto',
indent_spaces: 2,
wrap: 80,
markup: true,
quote_marks: true,
break_before_br: true,
tidy_mark: false,
};
doc.parseBufferSync(Buffer.from(content));
res = doc.saveBufferSync().toString();
}
return { filename, content: res || content };
},
);
return newResult.map((asset) => Object.values(asset).join('\n')).join('\n\n');
}
export function assertSnapshot(
snapshots: eventWithTime[],
filename: string,
@@ -109,6 +159,20 @@ export function assertSnapshot(
assert(result.pass, result.pass ? '' : result.report());
}
export async function assertDomSnapshot(
page: puppeteer.Page,
filename: string,
name: string,
) {
const cdp = await page.target().createCDPSession();
const { data } = await cdp.send('Page.captureSnapshot', {
format: 'mhtml',
});
const result = matchSnapshot(stringifyDomSnapshot(data), filename, name);
assert(result.pass, result.pass ? '' : result.report());
}
const now = Date.now();
export const sampleEvents: eventWithTime[] = [
{
@@ -241,23 +305,23 @@ export const sampleStyleSheetRemoveEvents: eventWithTime[] = [
childNodes: [
{
type: 2,
tagName: "style",
tagName: 'style',
attributes: {
"data-jss": "",
"data-meta": "OverlayDrawer",
_cssText: ".OverlayDrawer-modal-187 { }.OverlayDrawer-paper-188 { width: 100%; }@media (min-width: 48em) {\n .OverlayDrawer-paper-188 { width: 38rem; }\n}@media (min-width: 48em) {\n}@media (min-width: 48em) {\n}"
'data-jss': '',
'data-meta': 'OverlayDrawer',
_cssText:
'.OverlayDrawer-modal-187 { }.OverlayDrawer-paper-188 { width: 100%; }@media (min-width: 48em) {\n .OverlayDrawer-paper-188 { width: 38rem; }\n}@media (min-width: 48em) {\n}@media (min-width: 48em) {\n}',
},
childNodes: [
{
type: 3,
textContent: "\n",
textContent: '\n',
isStyle: true,
id: 5
id: 5,
},
],
id: 4
id: 4,
},
],
id: 3,
},
@@ -290,10 +354,10 @@ export const sampleStyleSheetRemoveEvents: eventWithTime[] = [
removes: [
{
parentId: 3,
id: 4
}
id: 4,
},
],
adds: []
adds: [],
},
timestamp: now + 2000,
},