PPLT-5148: Add dialog serialization for showModal() support

[yashmahamulkar-bs]

Summary

• Add serializeDialogs() to stamp data-percy-dialog-modal on <dialog> elements opened via showModal(), enabling the renderer to restore top-layer positioning and ::backdrop during visual snapshots.
• Add comprehensive tests covering showModal(), show(), setAttribute('open'), closed dialogs, and mixed scenarios.

1. Percy's serialization works on a clone of the DOM, not the original, so that any modifications (adding attributes, rewriting
   elements) don't affect the live page the user is testing.

Looking at serialize-dom.js:115:
ctx.clone = cloneNodeAndShadow(ctx);

The pattern across all serializers (serialize-inputs.js, serialize-canvas.js, serialize-video.js, etc.) is the same:

• Read state from dom (the original) — e.g., checking elem.matches(':modal')
• Write changes to clone — e.g., stamping data-percy-dialog-modal

The clone is what gets serialized to HTML and sent to Percy's rendering servers. The original DOM stays untouched so the user's
page isn't disrupted during snapshot capture.

2. These are doing very different things. serialize-pseudo-classes handles computed CSS styles for pseudo-class elements — it's about
   capturing :hover, :focus styles and injecting CSS rules. It's complex (200 lines) with XPath lookups, style computation, and CSS
   injection. Our dialog logic is about detecting showModal() and stamping a data attribute. It follows the same pattern as serialize-inputs.js, serialize-canvas.js, serialize-video.js — small, focused serializers that each handle one element type.

Output after fix

https://storage.googleapis.com/percy-dev-images/263646a46264af1f177d1270e7e091b91810b075851050f3a38a0fee50cf33be

Test plan

• Run yarn workspace @percy/dom test to verify dialog serialization tests pass
• Verify no regressions in existing DOM serialization tests

🤖 Generated with Claude Code

[this-is-shivamsingh]

domElement is this domElement is cloned dom or actual dom ?

[yashmahamulkar-bs]

It's the actual/original DOM. markElement is called at line 64 of clone-dom.js before the node is cloned: markElement(node, disableShadowDOM, forceShadowAsLightDOM); // line 64
let clone = cloneElementWithoutLifecycle(node); // line 66
So it stamps data-percy-element-id on the original element first, then the clone inherits it since cloneNode() copies all attributes.

[this-is-shivamsingh]

Why not marking this clonedDom, if the actual dom have data-percy-element-id and your cloned dom is not having one, then you should setAttribute for this cloned dom as well

[yashmahamulkar-bs]

The clone already has data-percy-element-id — it's copied during cloning since cloneNode() copies all attributes. The if (!cloneEl) continue is a defensive guard for edge cases (e.g., if the clone tree structure diverges unexpectedly). This is the same pattern used in serialize-inputs.js:9, serialize-canvas.js:26, serialize-video.js:12 — none of them re-mark the clone either.

[this-is-shivamsingh]

double check

1. dialogElement.show() v/s dialogElement.showModal(), does this comes true in both cases
2. Did you checked for the case when a multiple dialog elements open
3. When dialogElement have a button click on that open another dialog elements, then we need to set priority on which dialogElement to call showModal at last. On the top most one, we should call showModal at last

[yashmahamulkar-bs]

1. Checked it
2. Yes in that we iterate dom.querySelectorAll('dialog[open]') so every open dialog is evaluated independently.
   The "multiple dialogs with mixed open methods" test covers this one showModal(), one setAttribute('open'), one closed — and only the showModal() one gets stamped.
3. Our code stamps all of them with data-percy-dialog-modal. The renderer then calls showModal() on each, and the browser restores the correct stacking order. Also added test cases in cli.
   Also in renderer we sort dialog element via their z index.