isBlocked factors in the selector

packages/rrweb-snapshot/src/snapshot.ts

@@ -276,27 +276,39 @@ export function transformAttribute(
 }
 
 export function _isBlockedElement(
-  element: HTMLElement,
+  node: Node | null,
   blockClass: string | RegExp,
   blockSelector: string | null,
 ): boolean {
-  if (typeof blockClass === 'string') {
-    if (element.classList.contains(blockClass)) {
-      return true;
-    }
-  } else {
-    for (let eIndex = element.classList.length; eIndex--; ) {
-      const className = element.classList[eIndex];
-      if (blockClass.test(className)) {
-        return true;
+  if (!node) {
+    return false;
+  }
+  if (node.nodeType === node.ELEMENT_NODE) {
+    let needBlock = false;
+    if (typeof blockClass === 'string') {
+      if ((node as HTMLElement).closest !== undefined) {
+        needBlock = (node as HTMLElement).closest('.' + blockClass) !== null;
+      } else {
+        needBlock = (node as HTMLElement).classList.contains(blockClass);
       }
+    } else {
+      (node as HTMLElement).classList.forEach((className) => {
+        if (blockClass.test(className)) {
+          needBlock = true;
+        }
+      });
+    }
+    if (blockSelector) {
+      needBlock = needBlock || (node as HTMLElement).matches(blockSelector);
     }
+
+    return needBlock || _isBlockedElement(node.parentNode, blockClass, blockSelector);
   }
-  if (blockSelector) {
-    return element.matches(blockSelector);
+  if (node.nodeType === node.TEXT_NODE) {
+    // check parent node since text node do not have class name
+    return _isBlockedElement(node.parentNode, blockClass, blockSelector); 
   }
-
-  return false;
+  return _isBlockedElement(node.parentNode, blockClass, blockSelector);
 }
 
 export function classMatchesRegex(

packages/rrweb/src/record/index.ts

@@ -70,7 +70,9 @@ function record<T = eventWithTime>(
     inlineImages = false,
     plugins,
     keepIframeSrcFn = () => false,
+    ignoreCSSAttributes = new Set([]),
   } = options;
+
   // runtime checks for user options
   if (!emit) {
     throw new Error('emit function is required');
@@ -226,6 +228,7 @@ function record<T = eventWithTime>(
     mutationCb: wrappedCanvasMutationEmit,
     win: window,
     blockClass,
+    blockSelector,
     mirror,
     sampling: sampling.canvas,
   });
@@ -464,6 +467,7 @@ function record<T = eventWithTime>(
           stylesheetManager,
           shadowDomManager,
           canvasManager,
+          ignoreCSSAttributes,
           plugins:
             plugins
               ?.filter((p) => p.observer)

packages/rrweb/src/record/mutation.ts

@@ -273,7 +273,7 @@ export default class MutationBuffer {
         rootShadowHost =
           (rootShadowHost?.getRootNode?.() as ShadowRoot | undefined)?.host ||
           null;
-      // ensure shadowHost is a Node, or doc.contains will throw an error
+      // ensure contains is passed a Node, or it will throw an error
       const notInDoc =
         !this.doc.contains(n) &&
         (!rootShadowHost || !this.doc.contains(rootShadowHost));
@@ -446,7 +446,7 @@ export default class MutationBuffer {
       case 'characterData': {
         const value = m.target.textContent;
         if (
-          !isBlocked(m.target, this.blockClass, false) &&
+          !isBlocked(m.target, this.blockClass, this.blockSelector, false) &&
           value !== m.oldValue
         ) {
           this.texts.push({
@@ -478,7 +478,7 @@ export default class MutationBuffer {
           });
         }
         if (
-          isBlocked(m.target, this.blockClass, false) ||
+          isBlocked(m.target, this.blockClass, this.blockSelector, false) ||
           value === m.oldValue
         ) {
           return;
@@ -554,7 +554,7 @@ export default class MutationBuffer {
         /**
          * Parent is blocked, ignore all child mutations
          */
-        if (isBlocked(m.target, this.blockClass, true)) return;
+        if (isBlocked(m.target, this.blockClass, this.blockSelector, true)) return;
 
         m.addedNodes.forEach((n) => this.genAdds(n, m.target));
         m.removedNodes.forEach((n) => {
@@ -563,7 +563,7 @@ export default class MutationBuffer {
             ? this.mirror.getId(m.target.host)
             : this.mirror.getId(m.target);
           if (
-            isBlocked(m.target, this.blockClass, false) ||
+            isBlocked(m.target, this.blockClass, this.blockSelector, false) ||
             isIgnored(n, this.mirror) ||
             !isSerialized(n, this.mirror)
           ) {
@@ -635,7 +635,7 @@ export default class MutationBuffer {
 
     // if this node is blocked `serializeNode` will turn it into a placeholder element
     // but we have to remove it's children otherwise they will be added as placeholders too
-    if (!isBlocked(n, this.blockClass, false))
+    if (!isBlocked(n, this.blockClass, this.blockSelector, false))
       n.childNodes.forEach((childN) => this.genAdds(childN));
   };
 }

packages/rrweb/src/record/observer.ts

@@ -210,6 +210,7 @@ function initMouseInteractionObserver({
   doc,
   mirror,
   blockClass,
+  blockSelector,
   sampling,
 }: observerParam): listenerHandler {
   if (sampling.mouseInteraction === false) {
@@ -227,7 +228,7 @@ function initMouseInteractionObserver({
   const getHandler = (eventKey: keyof typeof MouseInteractions) => {
     return (event: MouseEvent | TouchEvent) => {
       const target = getEventTarget(event) as Node;
-      if (isBlocked(target, blockClass, true)) {
+      if (isBlocked(target, blockClass, blockSelector, true)) {
         return;
       }
       const e = isTouchEvent(event) ? event.changedTouches[0] : event;
@@ -266,14 +267,15 @@ export function initScrollObserver({
   doc,
   mirror,
   blockClass,
+  blockSelector,
   sampling,
 }: Pick<
   observerParam,
-  'scrollCb' | 'doc' | 'mirror' | 'blockClass' | 'sampling'
+  'scrollCb' | 'doc' | 'mirror' | 'blockClass' | 'blockSelector' | 'sampling'
 >): listenerHandler {
   const updatePosition = throttle<UIEvent>((evt) => {
     const target = getEventTarget(evt);
-    if (!target || isBlocked(target as Node, blockClass, true)) {
+    if (!target || isBlocked(target as Node, blockClass, blockSelector, true)) {
       return;
     }
     const id = mirror.getId(target as Node);
@@ -331,6 +333,7 @@ function initInputObserver({
   doc,
   mirror,
   blockClass,
+  blockSelector,
   ignoreClass,
   maskInputOptions,
   maskInputFn,
@@ -350,7 +353,7 @@ function initInputObserver({
       !target ||
       !(target as Element).tagName ||
       INPUT_TAGS.indexOf((target as Element).tagName) < 0 ||
-      isBlocked(target as Node, blockClass, true)
+      isBlocked(target as Node, blockClass, blockSelector, true)
     ) {
       return;
     }
@@ -613,7 +616,7 @@ function initStyleSheetObserver(
 }
 
 function initStyleDeclarationObserver(
-  { styleDeclarationCb, mirror }: observerParam,
+  { styleDeclarationCb, mirror, ignoreCSSAttributes }: observerParam,
   { win }: { win: IWindow },
 ): listenerHandler {
   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -624,6 +627,10 @@ function initStyleDeclarationObserver(
     value: string,
     priority: string,
   ) {
+    // ignore this mutation if we do not care about this css attribute
+    if (ignoreCSSAttributes.has(property)) {
+      return setProperty.apply(this, [property, value, priority]);
+    }
     const id = mirror.getId(this.parentRule?.parentStyleSheet?.ownerNode);
     if (id !== -1) {
       styleDeclarationCb({
@@ -645,6 +652,10 @@ function initStyleDeclarationObserver(
     this: CSSStyleDeclaration,
     property: string,
   ) {
+    // ignore this mutation if we do not care about this css attribute
+    if (ignoreCSSAttributes.has(property)) {
+      return removeProperty.apply(this, [property]);
+    }
     const id = mirror.getId(this.parentRule?.parentStyleSheet?.ownerNode);
     if (id !== -1) {
       styleDeclarationCb({
@@ -667,13 +678,14 @@ function initStyleDeclarationObserver(
 function initMediaInteractionObserver({
   mediaInteractionCb,
   blockClass,
+  blockSelector,
   mirror,
   sampling,
 }: observerParam): listenerHandler {
   const handler = (type: MediaInteractions) =>
     throttle((event: Event) => {
       const target = getEventTarget(event);
-      if (!target || isBlocked(target as Node, blockClass, true)) {
+      if (!target || isBlocked(target as Node, blockClass, blockSelector, true)) {
         return;
       }
       const { currentTime, volume, muted } = target as HTMLMediaElement;
@@ -755,7 +767,7 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
 }
 
 function initSelectionObserver(param: observerParam): listenerHandler {
-  const { doc, mirror, blockClass, selectionCb } = param;
+  const { doc, mirror, blockClass, blockSelector, selectionCb } = param;
   let collapsed = true;
 
   const updateSelection = () => {
@@ -774,8 +786,8 @@ function initSelectionObserver(param: observerParam): listenerHandler {
       const { startContainer, startOffset, endContainer, endOffset } = range;
 
       const blocked =
-        isBlocked(startContainer, blockClass, true) ||
-        isBlocked(endContainer, blockClass, true);
+        isBlocked(startContainer, blockClass, blockSelector, true) ||
+        isBlocked(endContainer, blockClass, blockSelector, true);
 
       if (blocked) continue;
 

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -13,6 +13,7 @@ export default function initCanvas2DMutationObserver(
   cb: canvasManagerMutationCallback,
   win: IWindow,
   blockClass: blockClass,
+  blockSelector: string | null,
   mirror: Mirror,
 ): listenerHandler {
   const handlers: listenerHandler[] = [];
@@ -41,7 +42,7 @@ export default function initCanvas2DMutationObserver(
             this: CanvasRenderingContext2D,
             ...args: Array<unknown>
           ) {
-            if (!isBlocked(this.canvas, blockClass, true)) {
+            if (!isBlocked(this.canvas, blockClass, blockSelector, true)) {
               // Using setTimeout as toDataURL can be heavy
               // and we'd rather not block the main thread
               setTimeout(() => {

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -59,17 +59,18 @@ export class CanvasManager {
     mutationCb: canvasMutationCallback;
     win: IWindow;
     blockClass: blockClass;
+    blockSelector: string | null,
     mirror: Mirror;
     sampling?: 'all' | number;
   }) {
-    const { sampling = 'all', win, blockClass, recordCanvas } = options;
+    const { sampling = 'all', win, blockClass, blockSelector, recordCanvas } = options;
     this.mutationCb = options.mutationCb;
     this.mirror = options.mirror;
 
     if (recordCanvas && sampling === 'all')
-      this.initCanvasMutationObserver(win, blockClass);
+      this.initCanvasMutationObserver(win, blockClass, blockSelector);
     if (recordCanvas && typeof sampling === 'number')
-      this.initCanvasFPSObserver(sampling, win, blockClass);
+      this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector);
   }
 
   private processMutation: canvasManagerMutationCallback = (
@@ -93,8 +94,9 @@ export class CanvasManager {
     fps: number,
     win: IWindow,
     blockClass: blockClass,
+    blockSelector: string | null,
   ) {
-    const canvasContextReset = initCanvasContextObserver(win, blockClass);
+    const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector);
     const snapshotInProgressMap: Map<number, boolean> = new Map();
     const worker = new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
     worker.onmessage = (e) => {
@@ -198,22 +200,25 @@ export class CanvasManager {
   private initCanvasMutationObserver(
     win: IWindow,
     blockClass: blockClass,
+    blockSelector: string | null,
   ): void {
     this.startRAFTimestamping();
     this.startPendingCanvasMutationFlusher();
 
-    const canvasContextReset = initCanvasContextObserver(win, blockClass);
+    const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector);
     const canvas2DReset = initCanvas2DMutationObserver(
       this.processMutation.bind(this),
       win,
       blockClass,
+      blockSelector,
       this.mirror,
     );
 
     const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(
       this.processMutation.bind(this),
       win,
       blockClass,
+      blockSelector,
       this.mirror,
     );
 

packages/rrweb/src/record/observers/canvas/canvas.ts

@@ -5,6 +5,7 @@ import { isBlocked, patch } from '../../../utils';
 export default function initCanvasContextObserver(
   win: IWindow,
   blockClass: blockClass,
+  blockSelector: string | null,
 ): listenerHandler {
   const handlers: listenerHandler[] = [];
   try {
@@ -23,7 +24,7 @@ export default function initCanvasContextObserver(
           contextType: string,
           ...args: Array<unknown>
         ) {
-          if (!isBlocked(this, blockClass, true)) {
+          if (!isBlocked(this, blockClass, blockSelector, true)) {
             if (!('__context' in this)) this.__context = contextType;
           }
           return original.apply(this, [contextType, ...args]);

packages/rrweb/src/record/observers/canvas/webgl.ts

@@ -15,6 +15,7 @@ function patchGLPrototype(
   type: CanvasContext,
   cb: canvasManagerMutationCallback,
   blockClass: blockClass,
+  blockSelector: string | null,
   mirror: Mirror,
   win: IWindow,
 ): listenerHandler[] {
@@ -36,7 +37,7 @@ function patchGLPrototype(
           return function (this: typeof prototype, ...args: Array<unknown>) {
             const result = original.apply(this, args);
             saveWebGLVar(result, win, prototype);
-            if (!isBlocked(this.canvas, blockClass, true)) {
+            if (!isBlocked(this.canvas, blockClass, blockSelector, true)) {
               const recordArgs = serializeArgs([...args], win, prototype);
               const mutation: canvasMutationWithType = {
                 type,
@@ -76,6 +77,7 @@ export default function initCanvasWebGLMutationObserver(
   cb: canvasManagerMutationCallback,
   win: IWindow,
   blockClass: blockClass,
+  blockSelector: string | null,
   mirror: Mirror,
 ): listenerHandler {
   const handlers: listenerHandler[] = [];
@@ -86,6 +88,7 @@ export default function initCanvasWebGLMutationObserver(
       CanvasContext.WebGL,
       cb,
       blockClass,
+      blockSelector,
       mirror,
       win,
     ),
@@ -98,6 +101,7 @@ export default function initCanvasWebGLMutationObserver(
         CanvasContext.WebGL2,
         cb,
         blockClass,
+        blockSelector,
         mirror,
         win,
       ),

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -39,7 +39,7 @@ export class ShadowDomManager {
     const manager = this;
     this.restorePatches.push(
       patch(
-        HTMLElement.prototype,
+        Element.prototype,
         'attachShadow',
         function (original: (init: ShadowRootInit) => ShadowRoot) {
           return function (this: HTMLElement, option: ShadowRootInit) {