[REPLAY] Add support for adoptedStyleSheets

[ThibautGeriz]

Motivation

Following what we started on the shadow dom support, let's add support for dynamic stylesheet

Changes

• update rum format
• add type for adoptedStylesheets because it's added in typescript 4.8 and we're using 4.7
• add support for adoptedStylesheets when serializing on Document & ShadowRoot

Out of scope

• Mutation of the adoptedStylesheets property
• Mutation of CSSStylesheet themselves.

Testing

• Local
• Staging
• Unit
• End to end

Document

Shadow root

---

I have gone over the contributing documentation.

[codecov-commenter]

Codecov Report

Merging #1916 (2ebb758) into main (ac26b8d) will decrease coverage by 0.02%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #1916      +/-   ##
==========================================
- Coverage   93.21%   93.19%   -0.03%     
==========================================
  Files         141      141              
  Lines        5349     5362      +13     
  Branches     1202     1207       +5     
==========================================
+ Hits         4986     4997      +11     
- Misses        363      365       +2     

Impacted Files	Coverage Δ
packages/rum-core/test/createIsolatedDom.ts	100.00% <ø> (ø)
packages/core/src/tools/browserDetection.ts	100.00% <100.00%> (ø)
...ckages/rum/src/domain/record/serializationUtils.ts	98.14% <100.00%> (+0.42%)	⬆️
packages/rum/src/domain/record/serialize.ts	92.63% <100.00%> (+0.03%)	⬆️
packages/core/src/tools/timeUtils.ts	97.43% <0.00%> (-2.57%)	⬇️
packages/rum/src/domain/record/mutationObserver.ts	95.86% <0.00%> (-0.69%)	⬇️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[bcaudan]

💬 suggestion: ‏Could we check the adoptedStyleSheets property on document instead?
it would allow to automatically run this test on other browsers when available

[ThibautGeriz]

no because it would be in the runner (node) not in the targetted browser :(

[bcaudan]

browserExecute helper could execute this check on the browser side

[ThibautGeriz]

Indeed, @BenoitZugmeyer you suggest that approach. Maybe you want to share your opinion here

[ThibautGeriz]

Is it possible to get the result out of the browser to the runner to stop the test?

[BenoitZugmeyer]

It's a bit more annoying as it would be asynchronous, but we can try!

Note, instead of if (...) { createTest(...).run() } it would need to done in the .run() callback like:

.run(async () => {
  if (!await isAdoptedStyleSheetsSupported()) { pending('...') }
  ...
})

[ThibautGeriz]

@BenoitZugmeyer How can I test that locally? By default it will run on Chrome up to date and be ok with the test but how can I test that it will be pending?

[BenoitZugmeyer]

You can try with a constant condition (ex: if (!await Promise.resolve(false)) { pending() }

About the condition specifically, I managed to run e2e tests in firefox locally, or you can run your tests on browserstack with the yarn test:e2e:bs with the right tokens as environment variable. Or simply push the change and see how it goes :)

[ThibautGeriz]

[DELETED]