replay: set data-dd-privacy attribute on snapshot node if hidden

As a node can be hidden from a data attribute rather than a class,
only adding the class to the snapshot node attributes means we can't
properly style the node when rebuilding it.

This commit ensures the data-dd-privacy=hidden attribute is always
set, even if the node was hidden using the class.

Additionally, we set the ID as a/ it helps with testing, b/ we can
assume it doesn't contain PII and c/ it may be used when
rebuilding (CSS rules could be selecting by ID).

packages/rum-recorder/src/domain/privacy.ts

@@ -1,6 +1,6 @@
-const PRIVACY_ATTR_NAME = 'data-dd-privacy'
-const PRIVACY_ATTR_VALUE_HIDDEN = 'hidden'
-const PRIVACY_ATTR_VALUE_INPUT_IGNORED = 'input-ignored'
+export const PRIVACY_ATTR_NAME = 'data-dd-privacy'
+export const PRIVACY_ATTR_VALUE_HIDDEN = 'hidden'
+export const PRIVACY_ATTR_VALUE_INPUT_IGNORED = 'input-ignored'
 
 const PRIVACY_CLASS_HIDDEN = 'dd-privacy-hidden'
 const PRIVACY_CLASS_INPUT_IGNORED = 'dd-privacy-input-ignored'

packages/rum-recorder/src/domain/rrweb-snapshot/snapshot.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { nodeShouldBeHidden } from '../privacy'
+import { PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_HIDDEN, nodeShouldBeHidden } from '../privacy'
 import {
   SerializedNode,
   SerializedNodeWithId,
@@ -254,9 +254,11 @@ function serializeNode(
       if (shouldBeHidden) {
         const { width, height } = (n as HTMLElement).getBoundingClientRect()
         attributes = {
+          id: attributes.id,
           class: attributes.class,
           rr_width: `${width}px`,
           rr_height: `${height}px`,
+          [PRIVACY_ATTR_NAME]: PRIVACY_ATTR_VALUE_HIDDEN,
         }
       }
       return {

test/e2e/scenario/recorder.scenario.ts

@@ -69,7 +69,7 @@ describe('recorder', () => {
         html`
           <p id="foo">foo</p>
           <p id="bar" data-dd-privacy="hidden">bar</p>
-          <p id="baz" class="dd-privacy-hidden">baz</p>
+          <p id="baz" class="dd-privacy-hidden baz">baz</p>
         `
       )
       .run(async ({ events }) => {
@@ -83,8 +83,16 @@ describe('recorder', () => {
         expect(fooNode).toBeTruthy()
         expect(findTextContent(fooNode!)).toBe('foo')
 
-        expect(findNodeWithId(fullSnapshot, 'bar')).toBeFalsy()
-        expect(findNodeWithId(fullSnapshot, 'baz')).toBeFalsy()
+        const barNode = findNodeWithId(fullSnapshot, 'bar')
+        expect(barNode).toBeTruthy()
+        expect(barNode!.attributes['data-dd-privacy']).toBe('hidden')
+        expect(barNode!.childNodes.length).toBe(0)
+
+        const bazNode = findNodeWithId(fullSnapshot, 'baz')
+        expect(bazNode).toBeTruthy()
+        expect(bazNode!.attributes.class).toBe('dd-privacy-hidden baz')
+        expect(bazNode!.attributes['data-dd-privacy']).toBe('hidden')
+        expect(bazNode!.childNodes.length).toBe(0)
       })
   })