rrweb icon indicating copy to clipboard operation
rrweb copied to clipboard

Support top-layer <dialog> recording & replay

Open Juice10 opened this issue 1 year ago • 1 comments

Fixes #1381.

Adds support for recording & replaying Top Layer <dialog> elements. These elements float over any other elements no matter the z-index.

What this PR does not do:

  • trigger showModal() on rrweb-snapshot's rebuild
    • when rebuild is called we have no guarantee the element is added to the dom, and .showModal() has to be attached to be called, so the responsibility to do this is hoisted to rrweb & rrdom.
  • add support for popover elements.
  • add support for requestFullScreen elements.
  • register order of top layer dialog elements, this is impossible to do without monkey patching HTMLDialogElement.showModal, and although that is possible I didn't have time to implement it. However most of the time this PR should sufficient. Unfortunately there is no way to query the dom for the order of elements in the top layer, as that would have made this doable without monkey patch, and recordable in rrweb-snapshot.
    • exact case where this breaks:
    •   const dialog1 = document.createElement('dialog') as HTMLDialogElement;
        dialog1.className = 'dialog1';
        document.body.appendChild(dialog1);
        const dialog2 = document.createElement('dialog') as HTMLDialogElement;
        dialog1.className = 'dialog2';
        document.body.appendChild(dialog2);
        dialog2.showModal(); // <== Note that dialog TWO is being triggered first, if dialog 1 was triggered first, this would have replayed as expected.
        dialog1.showModal();
      

Juice10 avatar Jun 10 '24 09:06 Juice10