From b1790754a93eaad33e1f71e42d8cc52f1e773159 Mon Sep 17 00:00:00 2001
From: Blake Byrnes <blakebyrnes@gmail.com>
Date: Mon, 11 Mar 2024 09:23:06 -0400
Subject: [PATCH] fix(timetravel): push dom changes one at a time

CLOSES #252
---
 timetravel/injected-scripts/domReplayer.ts | 4 +++-
 timetravel/lib/MirrorPage.ts               | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/timetravel/injected-scripts/domReplayer.ts b/timetravel/injected-scripts/domReplayer.ts
index 46385f79e..db9e9b63c 100644
--- a/timetravel/injected-scripts/domReplayer.ts
+++ b/timetravel/injected-scripts/domReplayer.ts
@@ -94,7 +94,9 @@ class DomReplayer {
   }
 
   private applyDomChanges(changeEvents: IFrontendDomChangeEvent[], isReverse = false): void {
-    this.pendingDomChanges.push(...changeEvents);
+    for (const change of changeEvents) {
+      this.pendingDomChanges.push(change);
+    }
     if (document.readyState !== 'complete') {
       document.addEventListener('DOMContentLoaded', () => this.applyDomChanges([]), { once: true });
       return;
diff --git a/timetravel/lib/MirrorPage.ts b/timetravel/lib/MirrorPage.ts
index beb7a0902..0aa27a5fc 100644
--- a/timetravel/lib/MirrorPage.ts
+++ b/timetravel/lib/MirrorPage.ts
@@ -436,7 +436,9 @@ export default class MirrorPage extends TypedEventEmitter<{
         this.domRecording.paintEvents.push(paint);
         this.paintEventByTimestamp[paint.timestamp] = paint;
       } else {
-        existing.changeEvents.push(...paint.changeEvents);
+        for (const change of paint.changeEvents) {
+          existing.changeEvents.push(change);
+        }
         existing.changeEvents.sort((a, b) => {
           if (a.frameId === b.frameId) return a.eventIndex - b.eventIndex;
           return a.frameId - b.frameId;
@@ -458,7 +460,9 @@ export default class MirrorPage extends TypedEventEmitter<{
 
   private onPageEvents(event: ITabEventParams['page-events']): void {
     const { domChanges } = event.records;
-    this.pendingDomChanges.push(...domChanges);
+    for (const record of domChanges) {
+      this.pendingDomChanges.push(record);
+    }
   }
 
   private async evaluate<T>(expression: string): Promise<T> {