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

* chore: its important to run `yarn build:all` before running `yarn dev`

* feat: trigger showModal from rrdom and rrweb

* feat: Add support for replaying modal and non modal dialog elements

* chore: Update dev script to remove CLEAR_DIST_DIR flag

* Get modal recording and replay working

* DRY up dialog test and dedupe snapshot images

* feat: Refactor dialog test to use updated attribute name

* feat: Update dialog test to include rr_open attribute

* chore: Add npm dependency happy-dom@14.12.0

* Add more test cases for dialog

* Clean up naming

* Refactor dialog open code

* Revert changed code that doesn't do anything

* Add documentation for unimplemented type

* chore: Remove unnecessary comments in dialog.test.ts

* rename rr_open to rr_openMode

* Replace todo with a skipped test

* Add better logging for CI

* Rename rr_openMode to rr_open_mode

rrdom downcases all attribute names which made `rr_openMode` tricky to deal with

* Remove unused images

* Move after iframe append based on @YunFeng0817's comment
https://github.com/rrweb-io/rrweb/pull/1503#discussion_r1666363931

* Remove redundant dialog handling from rrdom.

rrdom already handles dialog element creation it's self

* Rename variables for dialog handling in rrweb replay module

* Update packages/rrdom/src/document.ts

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>

packages/rrweb-snapshot/test/snapshot.test.ts

@@ -2,12 +2,31 @@
  * @vitest-environment jsdom
  */
 import { JSDOM } from 'jsdom';
-import { describe, it, expect } from 'vitest';
-import { serializeNodeWithId, _isBlockedElement } from '../src/snapshot';
-import snapshot from '../src/snapshot';
-import { serializedNodeWithId, elementNode } from '../src/types';
+import { describe, expect, it } from 'vitest';
+
+import snapshot, {
+  _isBlockedElement,
+  serializeNodeWithId,
+} from '../src/snapshot';
+import { elementNode, serializedNodeWithId } from '../src/types';
 import { Mirror, absolutifyURLs } from '../src/utils';
 
+const serializeNode = (node: Node): serializedNodeWithId | null => {
+  return serializeNodeWithId(node, {
+    doc: document,
+    mirror: new Mirror(),
+    blockClass: 'blockblock',
+    blockSelector: null,
+    maskTextClass: 'maskmask',
+    maskTextSelector: null,
+    skipChild: false,
+    inlineStylesheet: true,
+    maskTextFn: undefined,
+    maskInputFn: undefined,
+    slimDOMOptions: {},
+  });
+};
+
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
 
@@ -135,22 +154,6 @@ describe('isBlockedElement()', () => {
 });
 
 describe('style elements', () => {
-  const serializeNode = (node: Node): serializedNodeWithId | null => {
-    return serializeNodeWithId(node, {
-      doc: document,
-      mirror: new Mirror(),
-      blockClass: 'blockblock',
-      blockSelector: null,
-      maskTextClass: 'maskmask',
-      maskTextSelector: null,
-      skipChild: false,
-      inlineStylesheet: true,
-      maskTextFn: undefined,
-      maskInputFn: undefined,
-      slimDOMOptions: {},
-    });
-  };
-
   const render = (html: string): HTMLStyleElement => {
     document.write(html);
     return document.querySelector('style')!;
@@ -180,23 +183,6 @@ describe('style elements', () => {
 });
 
 describe('scrollTop/scrollLeft', () => {
-  const serializeNode = (node: Node): serializedNodeWithId | null => {
-    return serializeNodeWithId(node, {
-      doc: document,
-      mirror: new Mirror(),
-      blockClass: 'blockblock',
-      blockSelector: null,
-      maskTextClass: 'maskmask',
-      maskTextSelector: null,
-      skipChild: false,
-      inlineStylesheet: true,
-      maskTextFn: undefined,
-      maskInputFn: undefined,
-      slimDOMOptions: {},
-      newlyAddedElement: false,
-    });
-  };
-
   const render = (html: string): HTMLDivElement => {
     document.write(html);
     return document.querySelector('div')!;
@@ -218,23 +204,6 @@ describe('scrollTop/scrollLeft', () => {
 });
 
 describe('form', () => {
-  const serializeNode = (node: Node): serializedNodeWithId | null => {
-    return serializeNodeWithId(node, {
-      doc: document,
-      mirror: new Mirror(),
-      blockClass: 'blockblock',
-      blockSelector: null,
-      maskTextClass: 'maskmask',
-      maskTextSelector: null,
-      skipChild: false,
-      inlineStylesheet: true,
-      maskTextFn: undefined,
-      maskInputFn: undefined,
-      slimDOMOptions: {},
-      newlyAddedElement: false,
-    });
-  };
-
   const render = (html: string): HTMLTextAreaElement => {
     document.write(html);
     return document.querySelector('textarea')!;