HTML dialog recording and replay

packages/rrweb-snapshot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasinc/rrweb-snapshot",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

packages/rrweb-snapshot/src/rebuild.ts

@@ -258,6 +258,11 @@ function buildNode(
                 break;
               default:
             }
+          } else if (name === 'rr_open_mode') {
+            (node as HTMLDialogElement).setAttribute(
+              'rr_open_mode',
+              value as string,
+            ); // keep this attribute for rrweb to trigger showModal
           }
         }
       }

packages/rrweb-snapshot/src/snapshot.ts

@@ -11,6 +11,7 @@ import {
   MaskInputFn,
   KeepIframeSrcFn,
   MaskImageFn,
+  DialogAttributes,
 } from './types';
 import {
   isElement,
@@ -542,6 +543,16 @@ function serializeNode(
           delete attributes.selected;
         }
       }
+
+      if (tagName === 'dialog' && (n as HTMLDialogElement).open) {
+        // register what type of dialog is this
+        // `modal` or `non-modal`
+        // this is used to trigger `showModal()` or `show()` on replay (outside of rrweb-snapshot, in rrweb)
+        (attributes as DialogAttributes).rr_open_mode = (n as HTMLDialogElement).matches('dialog:modal')
+          ? 'modal'
+          : 'non-modal';
+      }
+
       // canvas image data
       if (tagName === 'canvas' && recordCanvas) {
         attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();

packages/rrweb-snapshot/src/types.ts

@@ -67,6 +67,23 @@ export type tagMap = {
   [key: string]: string;
 };
 
+export type DialogAttributes = {
+  open: string;
+  /**
+   * Represents the dialog's open mode.
+   * `modal` means the dialog is opened with `showModal()`.
+   * `non-modal` means the dialog is opened with `show()` or
+   * by adding an `open` attribute.
+   */
+  rr_open_mode: 'modal' | 'non-modal';
+  /**
+   * Currently unimplemented, but in future can be used to:
+   * Represents the order of which of the dialog was opened.
+   * This is useful for replaying the dialog `.showModal()` in the correct order.
+   */
+  // rr_open_mode_index?: number;
+};
+
 export interface INode extends Node {
   __sn_atlas: serializedNodeWithId;
 }

packages/rrweb-snapshot/typings/types.d.ts

@@ -52,6 +52,10 @@ export declare type serializedNodeWithId = serializedNode & {
 export declare type tagMap = {
     [key: string]: string;
 };
+export declare type DialogAttributes = {
+    open: string;
+    rr_open_mode: 'modal' | 'non-modal';
+};
 export interface INode extends Node {
     __sn_atlas: serializedNodeWithId;
 }

packages/rrweb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasinc/rrweb",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

packages/rrweb/src/record/mutation.ts

@@ -540,6 +540,14 @@ export default class MutationBuffer {
           );
         }
 
+        if (m.attributeName === 'open' && tagName === 'dialog') {
+          if (target.matches('dialog:modal')) {
+            item.attributes.rr_open_mode = 'modal';
+          } else {
+            item.attributes.rr_open_mode = 'non-modal';
+          }
+        }
+
         if (tagName === 'img') {
           const needsMasking = needMaskingText(
             m.target,

packages/rrweb/src/replay/dialog.ts

@@ -0,0 +1,80 @@
+import { attributeMutation } from '../types';
+
+/**
+ * Checks if the dialog is a top level dialog and applies the dialog to the top level
+ * @param node - potential dialog element to apply top level `showModal()` to, or other node (which will be ignored)
+ * @param attributeMutation - the attribute mutation used to change the dialog (optional)
+ * @returns void
+ */
+export function applyDialogToTopLevel(
+  node: HTMLDialogElement | Node,
+  attributeMutation?: attributeMutation,
+): void {
+  if (node.nodeName !== 'DIALOG') {
+    return;
+  }
+  const dialog = node as HTMLDialogElement;
+  const oldIsOpen = dialog.open;
+  const oldIsModalState = oldIsOpen && dialog.matches('dialog:modal');
+  const rrOpenMode = dialog.getAttribute('rr_open_mode');
+
+  const newIsOpen =
+    typeof attributeMutation?.attributes.open === 'string' ||
+    typeof dialog.getAttribute('open') === 'string';
+  const newIsModalState = rrOpenMode === 'modal';
+  const newIsNonModalState = rrOpenMode === 'non-modal';
+
+  const modalStateChanged =
+    (oldIsModalState && newIsNonModalState) ||
+    (!oldIsModalState && newIsModalState);
+
+  if (oldIsOpen && !modalStateChanged) {
+    return;
+  }
+
+  // complain if dialog is not attached to the dom
+  if (!dialog.isConnected) {
+    console.warn('dialog is not attached to the dom', dialog);
+    return;
+  }
+
+  if (oldIsOpen) {
+    dialog.close();
+  }
+  if (!newIsOpen) {
+    return;
+  }
+
+  if (newIsModalState) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+}
+
+/**
+ * Check if the dialog is a top level dialog and removes the dialog from the top level if necessary
+ * @param node - potential dialog element to remove from top level, or other node (which will be ignored)
+ * @param attributeMutation - the attribute mutation used to change the dialog
+ * @returns void
+ */
+export function removeDialogFromTopLevel(
+  node: HTMLDialogElement | Node,
+  attributeMutation: attributeMutation,
+): void {
+  if (node.nodeName !== 'DIALOG') {
+    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 (attributeMutation.attributes.open === null) {
+    dialog.removeAttribute('open');
+    dialog.removeAttribute('rr_open_mode');
+  }
+}