🐛 fix dynamic style serialization

[BenoitZugmeyer]

Motivation

See #2380. When a website uses a non-empty <style> element, edits it with insertRule or deleteRule, and then starts recording with startSessionReplayRecording(), changes made to the style are lost. Example:

Let's assume the page contains this piece of HTML:

<style>
body { color: red }
</style>

If a script is modifying the <style> state:

document.querySelector('style').sheet.insertRule('body { font-size: 10px }')

And only then we are taking a full snapshot

DD_RUM.startSessionReplayRecording()

The inserted rule will be ignored during serialization. The <style> will be serialized like this:

{
  type: NodeType.Element,
  tagName: 'style',
  attributes: {},
  childNodes: [{
    type: NodeType.Text,
    textContent: 'body { color: red }',
    isStyle: true
  }]
}

This behavior is inherited from rrweb which still has it. There is no justification on why this condition is here in the commit history.

Changes

• Always use the <style> element state (from its associated StyleSheet) when serializing it.
• Do not serialize <style> element children anymore
• Do not define the isStyle property on serialized text nodes

In the above example, the <style> will be serialized like this:

{
  type: NodeType.Element,
  tagName: 'style',
  attributes: { _cssText: 'body { font-size: 10px } body {color: red }' },
  childNodes: []
}

This change is compatible with the current implementation of the player.

Testing

• Local
• Staging
• Unit
• End to end

---

I have gone over the contributing documentation.

[BenoitZugmeyer]

/to-staging

[dd-devflow]

🚂 Branch Integration: starting soon, merge in < 0s

commit 86f65b3ee4 will soon be integrated into staging-35.

This build is going to start soon! (estimated merge in less than 0s)

you can cancel this operation by commenting your pull request with /to-staging -c!

[dd-devflow]

🚂 Branch Integration: this commit was successfully integrated

Commit 86f65b3ee4 has been merged into staging-35 in merge commit 4fd8de709b.

Check out the triggered pipeline on Gitlab 🦊

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.99%. Comparing base (ef8f6ca) to head (703ba60).
Report is 570 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2397      +/-   ##
==========================================
- Coverage   93.99%   93.99%   -0.01%     
==========================================
  Files         212      212              
  Lines        6298     6292       -6     
  Branches     1405     1399       -6     
==========================================
- Hits         5920     5914       -6     
  Misses        378      378              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.