Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support top-layer <dialog> recording & replay #1503

Merged
merged 34 commits into from
Aug 2, 2024
Merged
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
78849f3
WIP dialog recording
Juice10 Jun 10, 2024
c1d850f
chore: its important to run `yarn build:all` before running `yarn dev`
Juice10 Jun 10, 2024
b657233
feat: trigger showModal from rrdom and rrweb
Juice10 Jun 10, 2024
337b4c4
feat: Add support for replaying modal and non modal dialog elements
Juice10 Jun 11, 2024
29d4827
chore: Update dev script to remove CLEAR_DIST_DIR flag
Juice10 Jun 11, 2024
dcc867c
Get modal recording and replay working
Juice10 Jun 12, 2024
1144c9d
DRY up dialog test and dedupe snapshot images
Juice10 Jun 12, 2024
7507f4d
Fix eslint error
Juice10 Jun 12, 2024
b8679a0
feat: Refactor dialog test to use updated attribute name
Juice10 Jun 12, 2024
6ec4727
feat: Update dialog test to include rr_open attribute
Juice10 Jun 12, 2024
f7db71c
chore: Add npm dependency happy-dom@14.12.0
Juice10 Jun 12, 2024
b300674
Fix dialog test
Juice10 Jun 12, 2024
178ec1f
Add more test cases for dialog
Juice10 Jun 12, 2024
4229391
Add changesets
Juice10 Jun 12, 2024
b0065ce
Clean up naming
Juice10 Jun 12, 2024
25678f4
Apply formatting changes
Juice10 Jun 12, 2024
b71c8b7
Refactor dialog open code
Juice10 Jun 12, 2024
05d4cf0
Merge branch 'juice10/record-dialog' of https://github.com/rrweb-io/r…
Juice10 Jun 12, 2024
e731636
Revert changed code that doesn't do anything
Juice10 Jun 12, 2024
184e4fa
Add documentation for unimplemented type
Juice10 Jun 12, 2024
6a58edc
chore: Remove unnecessary comments in dialog.test.ts
Juice10 Jun 12, 2024
8c51129
Merge branch 'master' of https://github.com/rrweb-io/rrweb into juice…
Juice10 Jun 26, 2024
0df7994
rename rr_open to rr_openMode
Juice10 Jun 26, 2024
1ce8f70
Replace todo with a skipped test
Juice10 Jun 26, 2024
8aeb47f
Add better logging for CI
Juice10 Jun 26, 2024
985ac9f
Rename rr_openMode to rr_open_mode
Juice10 Jun 26, 2024
d693da9
Remove unused images
Juice10 Jun 26, 2024
760908f
Move after iframe append based on @YunFeng0817's comment
Juice10 Jul 9, 2024
2dfeb01
Remove redundant dialog handling from rrdom.
Juice10 Jul 9, 2024
63c0def
Merge branch 'master' into juice10/record-dialog
Juice10 Jul 9, 2024
21c4826
Rename variables for dialog handling in rrweb replay module
Juice10 Jul 9, 2024
424e4c8
Merge branch 'juice10/record-dialog' of https://github.com/rrweb-io/r…
Juice10 Jul 9, 2024
30c7780
Merge branch 'master' into juice10/record-dialog
eoghanmurray Jul 31, 2024
9f2a27c
Update packages/rrdom/src/document.ts
Juice10 Aug 2, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Merge branch 'master' into juice10/record-dialog
eoghanmurray authored Jul 31, 2024

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
commit 30c77802cf17cf4ef6ec8e893fa05ef7fdac07dd
3 changes: 1 addition & 2 deletions packages/rrweb-snapshot/test/snapshot.test.ts
Original file line number Diff line number Diff line change
@@ -6,11 +6,10 @@ import { describe, expect, it } from 'vitest';

import snapshot, {
_isBlockedElement,
absoluteToStylesheet,
serializeNodeWithId,
} from '../src/snapshot';
import { elementNode, serializedNodeWithId } from '../src/types';
import { Mirror } from '../src/utils';
import { Mirror, absolutifyURLs } from '../src/utils';

const serializeNode = (node: Node): serializedNodeWithId | null => {
return serializeNodeWithId(node, {

Unchanged files with check annotations Beta

// So we'll be conservative and keep textContent as-is.
} else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
textContent = stringifyStylesheet(
(n.parentNode as HTMLStyleElement).sheet!,

Check warning on line 518 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 518 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L518

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.

Check warning on line 518 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
);
}
} catch (err) {
const recordInlineImage = () => {
image.removeEventListener('load', recordInlineImage);
try {
canvasService!.width = image.naturalWidth;

Check warning on line 711 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 711 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L711

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.

Check warning on line 711 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
canvasService!.height = image.naturalHeight;

Check warning on line 712 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 712 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L712

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.

Check warning on line 712 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
canvasCtx!.drawImage(image, 0, 0);

Check warning on line 713 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 713 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L713

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.

Check warning on line 713 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
attributes.rr_dataURL = canvasService!.toDataURL(

Check warning on line 714 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 714 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb-snapshot/src/snapshot.ts#L714

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.

Check warning on line 714 in packages/rrweb-snapshot/src/snapshot.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
dataURLOptions.type,
dataURLOptions.quality,
);
* Browsers sometimes incorrectly escape `@import` on `.cssText` statements.
* This function tries to correct the escaping.
* more info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
* @param cssImportRule

Check warning on line 74 in packages/rrweb-snapshot/src/utils.ts

GitHub Actions / ESLint Check and Report Upload

tsdoc-param-tag-missing-hyphen: The @param block should be followed by a parameter name and then a hyphen

Check warning on line 74 in packages/rrweb-snapshot/src/utils.ts

GitHub Actions / ESLint Check and Report Upload

tsdoc-param-tag-missing-hyphen: The @param block should be followed by a parameter name and then a hyphen
* @returns `cssText` with browser inconsistencies fixed, or null if not applicable.
*/
export function escapeImportStatement(rule: CSSImportRule): string {
plugins
?.filter((p) => p.observer)
?.map((p) => ({
observer: p.observer!,

Check warning on line 558 in packages/rrweb/src/record/index.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 558 in packages/rrweb/src/record/index.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
options: p.options,
callback: (payload: object) =>
wrappedEmit({
iframeManager.addLoadListener((iframeEl) => {
try {
handlers.push(observe(iframeEl.contentDocument!));

Check warning on line 576 in packages/rrweb/src/record/index.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 576 in packages/rrweb/src/record/index.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
} catch (error) {
// TODO: handle internal error
console.warn(error);
};
while (this.mapRemoves.length) {
this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);

Check warning on line 351 in packages/rrweb/src/record/mutation.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 351 in packages/rrweb/src/record/mutation.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb/src/record/mutation.ts#L351

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.

Check warning on line 351 in packages/rrweb/src/record/mutation.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
}
for (const n of this.movedSet) {
if (
isParentRemoved(this.removes, n, this.mirror) &&
!this.movedSet.has(n.parentNode!)

Check warning on line 357 in packages/rrweb/src/record/mutation.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion

Check warning on line 357 in packages/rrweb/src/record/mutation.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb/src/record/mutation.ts#L357

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.

Check warning on line 357 in packages/rrweb/src/record/mutation.ts

GitHub Actions / ESLint Check and Report Upload

Forbidden non-null assertion
) {
continue;
}
sn?.type === NodeType.Element &&
sn?.tagName.toUpperCase() === 'HTML'
) {
const { documentElement, head } = iframeEl.contentDocument!;

Check warning on line 931 in packages/rrweb/src/replay/index.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb/src/replay/index.ts#L931

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
this.insertStyleRules(
documentElement as HTMLElement | RRElement,
head as HTMLElement | RRElement,
};
buildNodeWithSN(mutation.node, {
doc: iframeEl.contentDocument! as Document,

Check warning on line 950 in packages/rrweb/src/replay/index.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb/src/replay/index.ts#L950

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
mirror: mirror as Mirror,
hackCss: true,
skipChild: false,
afterAppend,
cache: this.cache,
});
afterAppend(iframeEl.contentDocument! as Document, mutation.node.id);

Check warning on line 957 in packages/rrweb/src/replay/index.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb/src/replay/index.ts#L957

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
for (const { mutationInQueue, builtNode } of collectedIframes) {
this.attachDocumentToIframe(mutationInQueue, builtNode);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const imgd = ctx?.createImageData(canvas.width, canvas.height);
ctx?.putImageData(imgd!, 0, 0);

Check warning on line 1074 in packages/rrweb/src/replay/index.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb/src/replay/index.ts#L1074

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
}
}
private async deserializeAndPreloadCanvasEvents(
// Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
this.usingVirtualDom = true;
buildFromDom(this.iframe.contentDocument!, this.mirror, this.virtualDom);

Check warning on line 1395 in packages/rrweb/src/replay/index.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb/src/replay/index.ts#L1395

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
// If these legacy missing nodes haven't been resolved, they should be converted to virtual nodes.
if (Object.keys(this.legacy_missingNodeRetryMap).length) {
for (const key in this.legacy_missingNodeRetryMap) {
// If the parent is attached a shadow dom after it's created, it won't have a shadow root.
if (!hasShadowRoot(parent)) {
(parent as Element | RRElement).attachShadow({ mode: 'open' });
parent = (parent as Element | RRElement).shadowRoot! as Node | RRNode;

Check warning on line 1512 in packages/rrweb/src/replay/index.ts

GitHub Actions / ESLint Report Analysis

packages/rrweb/src/replay/index.ts#L1512

[@typescript-eslint/no-non-null-assertion] Forbidden non-null assertion.
} else parent = parent.shadowRoot as Node | RRNode;
}
You are viewing a condensed version of this merge commit. You can view the full changes here.