commented console.logs in timeJump and masterState. Toggle is functioning without frontend button

Author: Oliver-Cho

src/backend/controllers/timeJump.ts

@@ -1,6 +1,7 @@
 import componentActionsRecord from '../models/masterState';
 import { Status } from '../types/backendTypes';
 import Tree from '../models/tree';
+import { update } from 'lodash';
 
 // THIS FILE CONTAINS NECCESSARY FUNCTIONALITY FOR TIME-TRAVEL FEATURE
 
@@ -48,6 +49,12 @@ async function updateReactFiberTree(
   targetSnapshot,
   circularComponentTable: Set<any> = new Set(),
 ): Promise<void> {
+  console.log(
+    'updateReactFiberTree: targetSnapshot:',
+    targetSnapshot,
+    'circularComponentTable:',
+    circularComponentTable,
+  );
   if (!targetSnapshot) return;
   // Base Case: if has visited, return
   if (circularComponentTable.has(targetSnapshot)) {

src/backend/models/masterState.ts

@@ -11,6 +11,7 @@ export default {
    * @function clear - Clears componentActionsRecord
    */
   clear: (): void => {
+    // console.log(componentActionsRecord);
     componentActionsRecord = [];
   },
 

src/extension/background.js

@@ -7,6 +7,9 @@ const portsArr = [];
 const reloaded = {};
 const firstSnapshotReceived = {};
 
+// Toggle for recording accessibility snapshots
+let toggleAxRecord = false;
+
 // There will be the same number of objects in here as there are
 // Reactime tabs open for each user application being worked on.
 let activeTab;
@@ -46,6 +49,55 @@ const pruneAxTree = (axTree) => {
   return axArr;
 };
 
+function attachDebugger(tabId, version) {
+  return new Promise((resolve, reject) => {
+    chrome.debugger.attach({ tabId: tabId }, version, () => {
+      if (chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError);
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+function sendDebuggerCommand(tabId, command, params = {}) {
+  return new Promise((resolve, reject) => {
+    chrome.debugger.sendCommand({ tabId: tabId }, command, params, (response) => {
+      if (chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError);
+      } else {
+        resolve(response);
+      }
+    });
+  });
+}
+
+function detachDebugger(tabId) {
+  return new Promise((resolve, reject) => {
+    chrome.debugger.detach({ tabId: tabId }, () => {
+      if (chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError);
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+async function axRecord(tabId) {
+  try {
+    await attachDebugger(tabId, '1.3');
+    await sendDebuggerCommand(tabId, 'Accessibility.enable');
+    const response = await sendDebuggerCommand(tabId, 'Accessibility.getFullAXTree');
+    const pruned = pruneAxTree(response.nodes);
+    await detachDebugger(tabId);
+    return pruned;
+  } catch (error) {
+    console.error('axRecord debugger command failed:', error);
+  }
+}
+
 // This function will create the first instance of the test app's tabs object
 // which will hold test app's snapshots, link fiber tree info, chrome tab info, etc.
 function createTabObj(title) {
@@ -307,6 +359,10 @@ chrome.runtime.onConnect.addListener((port) => {
         chrome.tabs.sendMessage(tabId, msg);
         return true;
 
+      case 'toggleAxRecord':
+        toggleAxRecord = !toggleAxRecord;
+        return true;
+
       case 'reinitialize':
         chrome.tabs.sendMessage(tabId, msg);
         return true;
@@ -358,6 +414,15 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
     }
     case 'jumpToSnap': {
       changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index, name);
+      toggleAxRecord = true;
+      if (tabsObj[tabId].currLocation.axSnapshot === 'emptyAxSnap' && toggleAxRecord === true) {
+        // add new ax snapshot to currlocation
+        const addedAxSnap = await axRecord(tabId);
+        tabsObj[tabId].currLocation.axSnapshot = addedAxSnap;
+        // modify array to include the new recorded ax snapshot
+        tabsObj[tabId].axSnapshots[tabsObj[tabId].currLocation.index] = addedAxSnap;
+      }
+
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>
           bg.postMessage({
@@ -368,6 +433,7 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
       }
       break;
     }
+
     // Confirmed React Dev Tools installed, send this info to frontend
     case 'devToolsInstalled': {
       tabsObj[tabId].status.reactDevToolsInstalled = true;
@@ -416,60 +482,7 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
         'background.js: top of recordSnap: tabsObj[tabId]:',
         JSON.parse(JSON.stringify(tabsObj[tabId])),
       );
-      function addAxSnap(snap) {
-        const pruned = pruneAxTree(snap);
-        tabsObj[tabId].axSnapshots.push(pruned);
-        return pruned;
-      }
-
-      function attachDebugger(tabId, version) {
-        return new Promise((resolve, reject) => {
-          chrome.debugger.attach({ tabId: tabId }, version, () => {
-            if (chrome.runtime.lastError) {
-              reject(chrome.runtime.lastError);
-            } else {
-              resolve();
-            }
-          });
-        });
-      }
-
-      function sendDebuggerCommand(tabId, command, params = {}) {
-        return new Promise((resolve, reject) => {
-          chrome.debugger.sendCommand({ tabId: tabId }, command, params, (response) => {
-            if (chrome.runtime.lastError) {
-              reject(chrome.runtime.lastError);
-            } else {
-              resolve(response);
-            }
-          });
-        });
-      }
-
-      function detachDebugger(tabId) {
-        return new Promise((resolve, reject) => {
-          chrome.debugger.detach({ tabId: tabId }, () => {
-            if (chrome.runtime.lastError) {
-              reject(chrome.runtime.lastError);
-            } else {
-              resolve();
-            }
-          });
-        });
-      }
 
-      async function axRecord(tabId) {
-        try {
-          await attachDebugger(tabId, '1.3');
-          await sendDebuggerCommand(tabId, 'Accessibility.enable');
-          const response = await sendDebuggerCommand(tabId, 'Accessibility.getFullAXTree');
-          const addedAxSnap = addAxSnap(response.nodes);
-          await detachDebugger(tabId);
-          return addedAxSnap;
-        } catch (error) {
-          console.error('axRecord debugger command failed:', error);
-        }
-      }
       const sourceTab = tabId;
       tabsObj[tabId].webMetrics = metrics;
 
@@ -478,7 +491,16 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
         reloaded[tabId] = false;
         tabsObj[tabId].webMetrics = metrics;
         tabsObj[tabId].snapshots.push(request.payload);
-        const addedAxSnap = await axRecord(tabId);
+
+        // check if accessibility recording has been toggled on
+        let addedAxSnap;
+        if (toggleAxRecord === true) {
+          addedAxSnap = await axRecord(tabId);
+          tabsObj[tabId].axSnapshots.push(addedAxSnap);
+        } else {
+          addedAxSnap = 'emptyAxSnap';
+          tabsObj[tabId].axSnapshots.push(addedAxSnap);
+        }
         sendToHierarchy(
           tabsObj[tabId],
           new HistoryNode(tabsObj[tabId], request.payload, addedAxSnap),
@@ -519,7 +541,16 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
         tabsObj[tabId].snapshots.push(request.payload);
         // INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN
         if (!tabsObj[tabId][index]) {
-          const addedAxSnap = await axRecord(tabId);
+          // check if accessibility recording has been toggled on
+          let addedAxSnap;
+          if (toggleAxRecord === true) {
+            addedAxSnap = await axRecord(tabId);
+            tabsObj[tabId].axSnapshots.push(addedAxSnap);
+          } else {
+            addedAxSnap = 'emptyAxSnap';
+            tabsObj[tabId].axSnapshots.push(addedAxSnap);
+          }
+
           sendToHierarchy(
             tabsObj[tabId],
             new HistoryNode(tabsObj[tabId], request.payload, addedAxSnap),