From 14b763d55306340d9b5111f9ecf3306cd2253aa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= <benoit.zugmeyer@datadoghq.com>
Date: Tue, 29 Aug 2023 14:38:51 +0200
Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=85=20revamp=20serialization=20tests?=
 =?UTF-8?q?=20a=20bit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Some tests were incorrectly labeled and hard to grasp. This commit
improves a bit, and adds a test on how style element containing text are
currently serialized.
---
 .../serialization/serializeNode.spec.ts       | 257 +++++++++---------
 1 file changed, 134 insertions(+), 123 deletions(-)

diff --git a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
index bc9dfbe08f..6ed9a02c66 100644
--- a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
+++ b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
@@ -16,7 +16,7 @@ import {
   PRIVACY_ATTR_VALUE_MASK,
   PRIVACY_ATTR_VALUE_MASK_USER_INPUT,
 } from '../../../constants'
-import type { ElementNode, SerializedNodeWithId, TextNode } from '../../../types'
+import type { ElementNode, SerializedNodeWithId } from '../../../types'
 import { NodeType } from '../../../types'
 import type { IsolatedDom } from '../../../../../rum-core/test'
 import { createIsolatedDom } from '../../../../../rum-core/test'
@@ -537,109 +537,135 @@ describe('serializeNodeWithId', () => {
       expect(addShadowRootSpy).toHaveBeenCalledWith(div.shadowRoot!)
     })
 
-    it('serializes style node with local CSS', () => {
-      const styleNode = document.createElement('style')
-      isolatedDom.document.head.appendChild(styleNode)
-      const styleSheet = styleNode.sheet
-      styleSheet?.insertRule('body { width: 100%; }')
-      expect(serializeElement(styleNode)).toEqual({
-        type: NodeType.Element,
-        tagName: 'style',
-        id: jasmine.any(Number) as unknown as number,
-        isSVG: undefined,
-        attributes: { _cssText: 'body { width: 100%; }' },
-        childNodes: [],
+    describe('<style> elements', () => {
+      it('serializes a node with dynamically edited CSS rules', () => {
+        const styleNode = document.createElement('style')
+        isolatedDom.document.head.appendChild(styleNode)
+        styleNode.sheet!.insertRule('body { width: 100%; }')
+
+        expect(serializeElement(styleNode)).toEqual({
+          type: NodeType.Element,
+          tagName: 'style',
+          id: jasmine.any(Number) as unknown as number,
+          isSVG: undefined,
+          attributes: { _cssText: 'body { width: 100%; }' },
+          childNodes: [],
+        })
       })
-    })
 
-    it('serializes style node with dynamic CSS that cannot be fetched', () => {
-      const linkNode = document.createElement('link')
-      linkNode.setAttribute('rel', 'stylesheet')
-      linkNode.setAttribute('href', 'https://datadoghq.com/some/style.css')
-      isolatedDom.document.head.appendChild(linkNode)
-      expect(serializeNodeWithId(linkNode, DEFAULT_OPTIONS)).toEqual({
-        type: NodeType.Element,
-        tagName: 'link',
-        id: jasmine.any(Number) as unknown as number,
-        isSVG: undefined,
-        attributes: { rel: 'stylesheet', href: 'https://datadoghq.com/some/style.css' },
-        childNodes: [],
+      it('serializes a node with CSS rules specified as inner text', () => {
+        const styleNode = document.createElement('style')
+        styleNode.textContent = 'body { width: 100%; }'
+        isolatedDom.document.head.appendChild(styleNode)
+
+        expect(serializeElement(styleNode)).toEqual({
+          type: NodeType.Element,
+          tagName: 'style',
+          id: jasmine.any(Number) as unknown as number,
+          isSVG: undefined,
+          attributes: {},
+          childNodes: [
+            {
+              type: NodeType.Text,
+              textContent: 'body { width: 100%; }',
+              isStyle: true,
+              id: jasmine.any(Number) as unknown as number,
+            },
+          ],
+        })
       })
     })
 
-    it('serializes style node with dynamic CSS that can be fetched', () => {
-      const linkNode = document.createElement('link')
-      linkNode.setAttribute('rel', 'stylesheet')
-      linkNode.setAttribute('href', 'https://datadoghq.com/some/style.css')
-      isolatedDom.document.head.appendChild(linkNode)
-      Object.defineProperty(isolatedDom.document, 'styleSheets', {
-        value: [
-          {
-            href: 'https://datadoghq.com/some/style.css',
-            cssRules: [{ cssText: 'body { width: 100%; }' }],
-          },
-        ],
+    describe('<link rel="stylesheet"> elements', () => {
+      it('does not inline external CSS if it cannot be fetched', () => {
+        const linkNode = document.createElement('link')
+        linkNode.setAttribute('rel', 'stylesheet')
+        linkNode.setAttribute('href', 'https://datadoghq.com/some/style.css')
+        isolatedDom.document.head.appendChild(linkNode)
+        expect(serializeNodeWithId(linkNode, DEFAULT_OPTIONS)).toEqual({
+          type: NodeType.Element,
+          tagName: 'link',
+          id: jasmine.any(Number) as unknown as number,
+          isSVG: undefined,
+          attributes: { rel: 'stylesheet', href: 'https://datadoghq.com/some/style.css' },
+          childNodes: [],
+        })
       })
 
-      expect(serializeNodeWithId(linkNode, DEFAULT_OPTIONS)).toEqual({
-        type: NodeType.Element,
-        tagName: 'link',
-        id: jasmine.any(Number) as unknown as number,
-        isSVG: undefined,
-        attributes: {
-          _cssText: 'body { width: 100%; }',
-          rel: 'stylesheet',
-          href: 'https://datadoghq.com/some/style.css',
-        },
-        childNodes: [],
-      })
-    })
+      it('inlines external CSS it can be fetched', () => {
+        const linkNode = document.createElement('link')
+        linkNode.setAttribute('rel', 'stylesheet')
+        linkNode.setAttribute('href', 'https://datadoghq.com/some/style.css')
+        isolatedDom.document.head.appendChild(linkNode)
+        Object.defineProperty(isolatedDom.document, 'styleSheets', {
+          value: [
+            {
+              href: 'https://datadoghq.com/some/style.css',
+              cssRules: [{ cssText: 'body { width: 100%; }' }],
+            },
+          ],
+        })
 
-    it('does not inline external style sheets when DISABLE_REPLAY_INLINE_CSS is enabled', () => {
-      addExperimentalFeatures([ExperimentalFeature.DISABLE_REPLAY_INLINE_CSS])
-      const linkNode = document.createElement('link')
-      linkNode.setAttribute('rel', 'stylesheet')
-      linkNode.setAttribute('href', 'https://datadoghq.com/some/style.css')
-      isolatedDom.document.head.appendChild(linkNode)
-      Object.defineProperty(isolatedDom.document, 'styleSheets', {
-        value: [
-          {
+        expect(serializeNodeWithId(linkNode, DEFAULT_OPTIONS)).toEqual({
+          type: NodeType.Element,
+          tagName: 'link',
+          id: jasmine.any(Number) as unknown as number,
+          isSVG: undefined,
+          attributes: {
+            _cssText: 'body { width: 100%; }',
+            rel: 'stylesheet',
             href: 'https://datadoghq.com/some/style.css',
-            cssRules: [{ cssText: 'body { width: 100%; }' }],
           },
-        ],
+          childNodes: [],
+        })
       })
 
-      expect((serializeNodeWithId(linkNode, DEFAULT_OPTIONS) as ElementNode).attributes._cssText).toBeUndefined()
-    })
+      it('does not inline external CSS when DISABLE_REPLAY_INLINE_CSS is enabled', () => {
+        addExperimentalFeatures([ExperimentalFeature.DISABLE_REPLAY_INLINE_CSS])
+        const linkNode = document.createElement('link')
+        linkNode.setAttribute('rel', 'stylesheet')
+        linkNode.setAttribute('href', 'https://datadoghq.com/some/style.css')
+        isolatedDom.document.head.appendChild(linkNode)
+        Object.defineProperty(isolatedDom.document, 'styleSheets', {
+          value: [
+            {
+              href: 'https://datadoghq.com/some/style.css',
+              cssRules: [{ cssText: 'body { width: 100%; }' }],
+            },
+          ],
+        })
 
-    it('does not serialize style node with dynamic CSS that is behind CORS', () => {
-      const linkNode = document.createElement('link')
-      linkNode.setAttribute('rel', 'stylesheet')
-      linkNode.setAttribute('href', 'https://datadoghq.com/some/style.css')
-      isolatedDom.document.head.appendChild(linkNode)
-      class FakeCSSStyleSheet {
-        get cssRules() {
-          return []
+        expect((serializeNodeWithId(linkNode, DEFAULT_OPTIONS) as ElementNode).attributes._cssText).toBeUndefined()
+      })
+
+      it('does not inline external CSS if the style sheet is behind CORS', () => {
+        const linkNode = document.createElement('link')
+        linkNode.setAttribute('rel', 'stylesheet')
+        linkNode.setAttribute('href', 'https://datadoghq.com/some/style.css')
+        isolatedDom.document.head.appendChild(linkNode)
+        class FakeCSSStyleSheet {
+          get cssRules() {
+            return []
+          }
         }
-      }
-      const styleSheet = new FakeCSSStyleSheet()
-      spyOnProperty(styleSheet, 'cssRules', 'get').and.throwError(new DOMException('cors issue', 'SecurityError'))
+        const styleSheet = new FakeCSSStyleSheet()
+        spyOnProperty(styleSheet, 'cssRules', 'get').and.throwError(new DOMException('cors issue', 'SecurityError'))
 
-      Object.defineProperty(isolatedDom.document, 'styleSheets', {
-        value: [styleSheet],
-      })
+        Object.defineProperty(isolatedDom.document, 'styleSheets', {
+          value: [styleSheet],
+        })
 
-      expect(serializeNodeWithId(linkNode, DEFAULT_OPTIONS)).toEqual({
-        type: NodeType.Element,
-        tagName: 'link',
-        id: jasmine.any(Number) as unknown as number,
-        isSVG: undefined,
-        attributes: {
-          rel: 'stylesheet',
-          href: 'https://datadoghq.com/some/style.css',
-        },
-        childNodes: [],
+        expect(serializeNodeWithId(linkNode, DEFAULT_OPTIONS)).toEqual({
+          type: NodeType.Element,
+          tagName: 'link',
+          id: jasmine.any(Number) as unknown as number,
+          isSVG: undefined,
+          attributes: {
+            rel: 'stylesheet',
+            href: 'https://datadoghq.com/some/style.css',
+          },
+          childNodes: [],
+        })
       })
     })
   })
@@ -748,72 +774,57 @@ describe('serializeNodeWithId', () => {
 
   describe('handles privacy', () => {
     describe('for privacy tag `hidden`, a DOM tree', () => {
-      it('keeps private info private', () => {
+      it('does not include any private info', () => {
         const serializedDoc = generateLeanSerializedDoc(HTML, 'hidden')
         expect(JSON.stringify(serializedDoc)).not.toContain('private')
       })
     })
 
     describe('for privacy tag `mask`, a DOM tree', () => {
-      it("doesn't have innerText alpha numeric", () => {
+      it('obfuscates all text content', () => {
         const serializedDoc = generateLeanSerializedDoc(HTML, 'mask')
-        expect({ text: getTextNodesFromSerialized(serializedDoc) }).not.toBe({
-          text: jasmine.stringMatching(/^[*x\s]+\.example {content: "anything";}[*x\s]+$/),
-        })
+        for (const textContents of getAllTextContents(serializedDoc)) {
+          expect(textContents).toEqual(jasmine.stringMatching(/^([*x\s]*|\.example {content: "anything";})$/))
+        }
       })
 
-      it('keeps private info private', () => {
+      it('obfuscates attributes and text content', () => {
         const serializedDoc = generateLeanSerializedDoc(HTML, 'mask')
         expect(JSON.stringify(serializedDoc)).not.toContain('private')
       })
     })
 
     describe('for privacy tag `mask-user-input`, a DOM tree', () => {
-      it("doesn't mask text content", () => {
+      it('does not obfuscate text content', () => {
         const serializedDoc = generateLeanSerializedDoc(HTML, 'mask-user-input')
         expect(JSON.stringify(serializedDoc)).not.toContain('᙮᙮')
       })
-      it('keeps form fields private', () => {
+
+      it('obfuscates input fields', () => {
         const serializedDoc = generateLeanSerializedDoc(HTML, 'mask-user-input')
         expect(JSON.stringify(serializedDoc)).toContain('**')
       })
     })
 
     describe('for privacy tag `allow`, a DOM tree', () => {
-      it("doesn't have innerText alpha numeric", () => {
-        const serializedDoc = generateLeanSerializedDoc(HTML, 'allow')
-        const innerText = getTextNodesFromSerialized(serializedDoc)
-        const privateWordMatchCount = innerText.match(/private/g)?.length
-        expect(privateWordMatchCount).toBe(10)
-        expect(innerText).toBe(
-          '  \n      .example {content: "anything";}\n       private title \n \n     hello private world \n     Loreum ipsum private text \n     hello private world \n     \n      Click https://private.com/path/nested?query=param#hash\n     \n      \n     \n       private option A \n       private option B \n       private option C \n     \n      \n      \n      \n     inputFoo label \n\n      \n\n           Loreum Ipsum private ...\n     \n\n     editable private div \n'
-        )
-      })
-
-      it('keeps innerText public', () => {
+      it('does not obfuscate anything', () => {
         const serializedDoc = generateLeanSerializedDoc(HTML, 'allow')
         expect(JSON.stringify(serializedDoc)).not.toContain('*')
         expect(JSON.stringify(serializedDoc)).not.toContain('xx')
       })
     })
 
-    const getTextNodesFromSerialized = (serializedNode: SerializedNodeWithId | null): string => {
-      try {
-        if (serializedNode === null) {
-          return ''
-        } else if (serializedNode.type === NodeType.Text) {
-          const textNode = serializedNode as TextNode
-          return textNode.textContent
-        } else if (serializedNode.type === NodeType.Element || serializedNode.type === NodeType.Document) {
-          const textNode = serializedNode as ElementNode
-          return textNode.childNodes.map((node: SerializedNodeWithId) => getTextNodesFromSerialized(node)).join(' ')
-        }
-        return ''
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error('caught getTextNodesFromSerialized error:', e, serializedNode)
-        return ''
+    function getAllTextContents(serializedNode: SerializedNodeWithId): string[] {
+      if (serializedNode.type === NodeType.Text) {
+        return [serializedNode.textContent.trim()]
+      }
+      if ('childNodes' in serializedNode) {
+        return serializedNode.childNodes.reduce<string[]>(
+          (result, child) => result.concat(getAllTextContents(child)),
+          []
+        )
       }
+      return []
     }
   })
 })

From e933531b7ea86763857c2505c9809993aff4cb52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= <benoit.zugmeyer@datadoghq.com>
Date: Tue, 29 Aug 2023 16:05:03 +0200
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9B=20always=20serialize=20<style>?=
 =?UTF-8?q?=20element=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, we serialized the <style> element state (as reflected by its
associated StyleSheet object) only if the element was empty / did not
have children.

This is an issue when the recording starts after a non-empty <style>
element is edited via `insertRule`/`deleteRule`, as doing so only
changes the <style> element state and not its children, so changes were
ignored.

This commit fixes this issue by always serializing the <style> element
state.
---
 .../serialization/htmlAst.specHelper.ts       |  6 ++---
 .../serialization/serializeAttributes.ts      |  7 +-----
 .../serialization/serializeNode.spec.ts       | 25 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts b/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
index 90c7e4cf9b..29b011ecae 100644
--- a/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
+++ b/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
@@ -142,7 +142,7 @@ export const AST_MASK = {
             {
               type: 2,
               tagName: 'style',
-              attributes: {},
+              attributes: { _cssText: '.example { content: "anything"; }' },
               childNodes: [
                 {
                   type: 3,
@@ -455,7 +455,7 @@ export const AST_MASK_USER_INPUT = {
             {
               type: 2,
               tagName: 'style',
-              attributes: {},
+              attributes: { _cssText: '.example { content: "anything"; }' },
               childNodes: [
                 {
                   type: 3,
@@ -768,7 +768,7 @@ export const AST_ALLOW = {
             {
               type: 2,
               tagName: 'style',
-              attributes: {},
+              attributes: { _cssText: '.example { content: "anything"; }' },
               childNodes: [
                 {
                   type: 3,
diff --git a/packages/rum/src/domain/record/serialization/serializeAttributes.ts b/packages/rum/src/domain/record/serialization/serializeAttributes.ts
index abbbfcf04a..8fd2218d30 100644
--- a/packages/rum/src/domain/record/serialization/serializeAttributes.ts
+++ b/packages/rum/src/domain/record/serialization/serializeAttributes.ts
@@ -59,12 +59,7 @@ export function serializeAttributes(
   }
 
   // dynamic stylesheet
-  if (
-    tagName === 'style' &&
-    (element as HTMLStyleElement).sheet &&
-    // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
-    !((element as HTMLStyleElement).innerText || element.textContent || '').trim().length
-  ) {
+  if (tagName === 'style' && (element as HTMLStyleElement).sheet) {
     const cssText = getCssRulesString((element as HTMLStyleElement).sheet)
     if (cssText) {
       safeAttrs._cssText = cssText
diff --git a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
index 6ed9a02c66..44aaf76179 100644
--- a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
+++ b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
@@ -563,7 +563,30 @@ describe('serializeNodeWithId', () => {
           tagName: 'style',
           id: jasmine.any(Number) as unknown as number,
           isSVG: undefined,
-          attributes: {},
+          attributes: { _cssText: 'body { width: 100%; }' },
+          childNodes: [
+            {
+              type: NodeType.Text,
+              textContent: 'body { width: 100%; }',
+              isStyle: true,
+              id: jasmine.any(Number) as unknown as number,
+            },
+          ],
+        })
+      })
+
+      it('serializes a node with CSS rules specified as inner text then dynamically edited', () => {
+        const styleNode = document.createElement('style')
+        styleNode.textContent = 'body { width: 100%; }'
+        isolatedDom.document.head.appendChild(styleNode)
+        styleNode.sheet!.insertRule('body { background: red; }')
+
+        expect(serializeElement(styleNode)).toEqual({
+          type: NodeType.Element,
+          tagName: 'style',
+          id: jasmine.any(Number) as unknown as number,
+          isSVG: undefined,
+          attributes: { _cssText: 'body { background: red; }body { width: 100%; }' },
           childNodes: [
             {
               type: NodeType.Text,

From 0fb7de0616190820b16034b7b1966ebded26dea2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= <benoit.zugmeyer@datadoghq.com>
Date: Tue, 29 Aug 2023 14:52:23 +0200
Subject: [PATCH 3/4] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20do=20not=20serialize?=
 =?UTF-8?q?=20<style>=20children?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Because the <style> state is now always serialized in the _cssText
attribute, providing children is not useful and implies sending the CSS
text twice in some cases.
---
 .../serialization/htmlAst.specHelper.ts       | 24 +++----------------
 .../serialization/serializeNode.spec.ts       | 20 +++-------------
 .../record/serialization/serializeNode.ts     |  6 ++++-
 3 files changed, 11 insertions(+), 39 deletions(-)

diff --git a/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts b/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
index 29b011ecae..e5460dec62 100644
--- a/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
+++ b/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
@@ -143,13 +143,7 @@ export const AST_MASK = {
               type: 2,
               tagName: 'style',
               attributes: { _cssText: '.example { content: "anything"; }' },
-              childNodes: [
-                {
-                  type: 3,
-                  textContent: '\n      .example {content: "anything";}\n    ',
-                  isStyle: true,
-                },
-              ],
+              childNodes: [],
             },
             {
               type: 2,
@@ -456,13 +450,7 @@ export const AST_MASK_USER_INPUT = {
               type: 2,
               tagName: 'style',
               attributes: { _cssText: '.example { content: "anything"; }' },
-              childNodes: [
-                {
-                  type: 3,
-                  textContent: '\n      .example {content: "anything";}\n    ',
-                  isStyle: true,
-                },
-              ],
+              childNodes: [],
             },
             {
               type: 2,
@@ -769,13 +757,7 @@ export const AST_ALLOW = {
               type: 2,
               tagName: 'style',
               attributes: { _cssText: '.example { content: "anything"; }' },
-              childNodes: [
-                {
-                  type: 3,
-                  textContent: '\n      .example {content: "anything";}\n    ',
-                  isStyle: true,
-                },
-              ],
+              childNodes: [],
             },
             {
               type: 2,
diff --git a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
index 44aaf76179..edd18688c5 100644
--- a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
+++ b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
@@ -564,14 +564,7 @@ describe('serializeNodeWithId', () => {
           id: jasmine.any(Number) as unknown as number,
           isSVG: undefined,
           attributes: { _cssText: 'body { width: 100%; }' },
-          childNodes: [
-            {
-              type: NodeType.Text,
-              textContent: 'body { width: 100%; }',
-              isStyle: true,
-              id: jasmine.any(Number) as unknown as number,
-            },
-          ],
+          childNodes: [],
         })
       })
 
@@ -587,14 +580,7 @@ describe('serializeNodeWithId', () => {
           id: jasmine.any(Number) as unknown as number,
           isSVG: undefined,
           attributes: { _cssText: 'body { background: red; }body { width: 100%; }' },
-          childNodes: [
-            {
-              type: NodeType.Text,
-              textContent: 'body { width: 100%; }',
-              isStyle: true,
-              id: jasmine.any(Number) as unknown as number,
-            },
-          ],
+          childNodes: [],
         })
       })
     })
@@ -807,7 +793,7 @@ describe('serializeNodeWithId', () => {
       it('obfuscates all text content', () => {
         const serializedDoc = generateLeanSerializedDoc(HTML, 'mask')
         for (const textContents of getAllTextContents(serializedDoc)) {
-          expect(textContents).toEqual(jasmine.stringMatching(/^([*x\s]*|\.example {content: "anything";})$/))
+          expect(textContents).toEqual(jasmine.stringMatching(/^[*x\s]*$/))
         }
       })
 
diff --git a/packages/rum/src/domain/record/serialization/serializeNode.ts b/packages/rum/src/domain/record/serialization/serializeNode.ts
index a4085139eb..b7b8b0e5e7 100644
--- a/packages/rum/src/domain/record/serialization/serializeNode.ts
+++ b/packages/rum/src/domain/record/serialization/serializeNode.ts
@@ -156,7 +156,11 @@ function serializeElementNode(element: Element, options: SerializeOptions): Elem
   const attributes = serializeAttributes(element, nodePrivacyLevel, options)
 
   let childNodes: SerializedNodeWithId[] = []
-  if (element.childNodes.length) {
+  if (
+    element.childNodes.length &&
+    // Do not serialize style children as the css rules are already in the _cssText attribute
+    tagName !== 'style'
+  ) {
     // OBJECT POOLING OPTIMIZATION:
     // We should not create a new object systematically as it could impact performances. Try to reuse
     // the same object as much as possible, and clone it only if we need to.

From 86f65b3ee4a2059ccc9c9be5e54006cf0d93c1de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= <benoit.zugmeyer@datadoghq.com>
Date: Tue, 29 Aug 2023 15:31:24 +0200
Subject: [PATCH 4/4] =?UTF-8?q?=E2=9A=A1=EF=B8=8Fremove=20isStyle=20checks?=
 =?UTF-8?q?=20and=20property?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When serializing text nodes, there is no need to check whether the
parent element is a <style> since we don't serialize <style> element
children anymore.

The `isStyle` property on the `TextNode` interface is kept for backward
compatibility but won't be defined for newer versions of the SDK.
---
 packages/rum/src/domain/record/privacy.ts          |  4 +---
 .../record/serialization/serializeNode.spec.ts     | 14 --------------
 .../domain/record/serialization/serializeNode.ts   |  4 ----
 3 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/packages/rum/src/domain/record/privacy.ts b/packages/rum/src/domain/record/privacy.ts
index cfbc4b406e..1f497beb6f 100644
--- a/packages/rum/src/domain/record/privacy.ts
+++ b/packages/rum/src/domain/record/privacy.ts
@@ -173,7 +173,6 @@ export function getTextContent(
 
   const nodePrivacyLevel = parentNodePrivacyLevel
 
-  const isStyle = parentTagName === 'STYLE' ? true : undefined
   const isScript = parentTagName === 'SCRIPT'
 
   if (isScript) {
@@ -183,9 +182,8 @@ export function getTextContent(
     // Should never occur, but just in case, we set to CENSORED_MARK.
     textContent = CENSORED_STRING_MARK
   } else if (
-    shouldMaskNode(textNode, nodePrivacyLevel) &&
+    shouldMaskNode(textNode, nodePrivacyLevel)
     // Style tags are `overruled` (Use `hide` to enforce privacy)
-    !isStyle
   ) {
     if (
       // Scrambling the child list breaks text nodes for DATALIST/SELECT/OPTGROUP
diff --git a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
index edd18688c5..2e1535ff35 100644
--- a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
+++ b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
@@ -688,7 +688,6 @@ describe('serializeNodeWithId', () => {
       expect(serializeNodeWithId(textNode, DEFAULT_OPTIONS)).toEqual({
         type: NodeType.Text,
         id: jasmine.any(Number) as unknown as number,
-        isStyle: undefined,
         textContent: 'foo',
       })
     })
@@ -700,7 +699,6 @@ describe('serializeNodeWithId', () => {
       expect(serializeNodeWithId(textNode, DEFAULT_OPTIONS)).toEqual({
         type: NodeType.Text,
         id: jasmine.any(Number) as unknown as number,
-        isStyle: undefined,
         textContent: '',
       })
     })
@@ -710,18 +708,6 @@ describe('serializeNodeWithId', () => {
         serializeNodeWithId(document.createTextNode('   '), { ...DEFAULT_OPTIONS, ignoreWhiteSpace: true })
       ).toEqual(null)
     })
-
-    it('serializes a text node contained in a <style> element', () => {
-      const style = document.createElement('style')
-      style.textContent = 'body { background-color: red }'
-
-      expect(serializeNodeWithId(style.childNodes[0], DEFAULT_OPTIONS)).toEqual(
-        jasmine.objectContaining({
-          textContent: 'body { background-color: red }',
-          isStyle: true,
-        })
-      )
-    })
   })
 
   describe('CDATA nodes serialization', () => {
diff --git a/packages/rum/src/domain/record/serialization/serializeNode.ts b/packages/rum/src/domain/record/serialization/serializeNode.ts
index b7b8b0e5e7..f0371487a2 100644
--- a/packages/rum/src/domain/record/serialization/serializeNode.ts
+++ b/packages/rum/src/domain/record/serialization/serializeNode.ts
@@ -203,9 +203,6 @@ function isSVGElement(el: Element): boolean {
  */
 
 function serializeTextNode(textNode: Text, options: SerializeOptions): TextNode | undefined {
-  // The parent node may not be a html element which has a tagName attribute.
-  // So just let it be undefined which is ok in this use case.
-  const parentTagName = textNode.parentElement?.tagName
   const textContent = getTextContent(textNode, options.ignoreWhiteSpace || false, options.parentNodePrivacyLevel)
   if (textContent === undefined) {
     return
@@ -213,7 +210,6 @@ function serializeTextNode(textNode: Text, options: SerializeOptions): TextNode
   return {
     type: NodeType.Text,
     textContent,
-    isStyle: parentTagName === 'STYLE' ? true : undefined,
   }
 }