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
feat: Add support for replaying modal and non modal dialog elements
Juice10 committed Jun 11, 2024

Verified

This commit was signed with the committer’s verified signature.
shunk031 Shunsuke KITADA
commit 337b4c41981db0df666f6e1c2f0b06f7c96269b3
2 changes: 2 additions & 0 deletions packages/rrweb-snapshot/src/rebuild.ts
Original file line number Diff line number Diff line change
@@ -353,6 +353,8 @@ function buildNode(
(node as HTMLMediaElement).loop = value;
} else if (name === 'rr_mediaVolume' && typeof value === 'number') {
(node as HTMLMediaElement).volume = value;
} else if (name === 'rr_open') {
(node as HTMLDialogElement).setAttribute('rr_open', value as string); // keep this attribute for rrweb to trigger showModal
}
}

30 changes: 29 additions & 1 deletion packages/rrweb/src/replay/dialog/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@
import type { attributeMutation } from '@rrweb/types';
import { RRNode } from 'rrdom';

export function triggerShowModalForModals(
node: HTMLDialogElement | Node | RRNode,
) {
if (node.nodeName !== 'DIALOG' || node instanceof RRNode) return;
const dialog = node as HTMLDialogElement;
console.log('dialog', dialog.getAttribute('rr_open'));
if (dialog.getAttribute('rr_open') !== 'modal') return;

// complain if dialog is not attached to the dom
if (!dialog.isConnected) {
console.warn('dialog is not attached to the dom', dialog);
return;
}

dialog.showModal();
}

export function triggerCloseForModals(
node: HTMLDialogElement | Node | RRNode,
attributeMuation: attributeMutation,
) {
if (node.nodeName !== 'DIALOG' || node instanceof RRNode) return;
const dialog = node as HTMLDialogElement;

// complain if dialog is not attached to the dom
if (!dialog.isConnected) {
console.warn('dialog is not attached to the dom', dialog);
return;
}

if (attributeMuation.attributes.rr_open === null) {
dialog.close();
}
if (attributeMuation.attributes.open === '') {
dialog.show();
}
}
17 changes: 14 additions & 3 deletions packages/rrweb/src/replay/index.ts
Original file line number Diff line number Diff line change
@@ -86,6 +86,7 @@ import './styles/style.css';
import canvasMutation from './canvas';
import { deserializeArg } from './canvas/deserialize-args';
import { MediaManager } from './media';
import { triggerShowModalForModals, triggerCloseForModals } from './dialog';

const SKIP_TIME_INTERVAL = 5 * 1000;

@@ -245,6 +246,7 @@ export class Replayer {
this.applyStyleDeclaration(data, styleSheet);
},
afterAppend: (node: Node, id: number) => {
triggerShowModalForModals(node);
for (const plugin of this.config.plugins || []) {
if (plugin.onBuild) plugin.onBuild(node, { id, replayer: this });
}
@@ -801,9 +803,12 @@ export class Replayer {
);
}
this.legacy_missingNodeRetryMap = {};
const collected: AppendedIframe[] = [];
const collectedIframes: AppendedIframe[] = [];
const collectedDialogs = new Set<HTMLDialogElement>();
const afterAppend = (builtNode: Node, id: number) => {
this.collectIframeAndAttachDocument(collected, builtNode);
if (builtNode.nodeName === 'DIALOG')
collectedDialogs.add(builtNode as HTMLDialogElement);
this.collectIframeAndAttachDocument(collectedIframes, builtNode);
if (this.mediaManager.isSupportedMediaElement(builtNode)) {
const { events } = this.service.state.context;
this.mediaManager.addMediaElements(
@@ -840,14 +845,15 @@ export class Replayer {
});
afterAppend(this.iframe.contentDocument, event.data.node.id);

for (const { mutationInQueue, builtNode } of collected) {
for (const { mutationInQueue, builtNode } of collectedIframes) {
this.attachDocumentToIframe(mutationInQueue, builtNode);
this.newDocumentQueue = this.newDocumentQueue.filter(
(m) => m !== mutationInQueue,
);
}
const { documentElement, head } = this.iframe.contentDocument;
this.insertStyleRules(documentElement, head);
collectedDialogs.forEach((d) => triggerShowModalForModals(d));
if (!this.service.state.matches('playing')) {
this.iframe.contentDocument
.getElementsByTagName('html')[0]
@@ -912,6 +918,7 @@ export class Replayer {

const collected: AppendedIframe[] = [];
const afterAppend = (builtNode: Node, id: number) => {
triggerShowModalForModals(builtNode);
this.collectIframeAndAttachDocument(collected, builtNode);
const sn = (mirror as TMirror).getMeta(builtNode as unknown as TNode);
if (
@@ -1532,6 +1539,7 @@ export class Replayer {
const afterAppend = (node: Node | RRNode, id: number) => {
// Skip the plugin onBuild callback for virtual dom
if (this.usingVirtualDom) return;
triggerShowModalForModals(node);
for (const plugin of this.config.plugins || []) {
if (plugin.onBuild) plugin.onBuild(node, { id, replayer: this });
}
@@ -1736,6 +1744,9 @@ export class Replayer {
const value = mutation.attributes[attributeName];
if (value === null) {
(target as Element | RRElement).removeAttribute(attributeName);
if (attributeName === 'rr_open') {
triggerCloseForModals(target, mutation);
}
} else if (typeof value === 'string') {
try {
// When building snapshot, some link styles haven't loaded. Then they are loaded, they will be inlined as incremental mutation change of attribute. We need to replace the old elements whose styles aren't inlined.
Loading