merging developMerge branch 'develop' into eva/axComponents

Author: jguerrero35

src/backend/routers/linkFiber.ts

@@ -100,13 +100,6 @@ export default function linkFiber(mode: Status): () => Promise<void> {
       },
       '*',
     );
-    window.postMessage(
-      {
-        action: 'recordAXSnap',
-        payload: 'recordAXSnap',
-      },
-      '*',
-    );
     // --------------INITIATE EVENT LISTENER FOR VISIBILITY CHANGE--------------
     /**
      * Initiate an event listener for when there is a change to the visibility of the react target application (the browser tab)
@@ -142,14 +135,6 @@ export default function linkFiber(mode: Status): () => Promise<void> {
         // If the target React application is visible, send a request to update the snapShot tree displayed on Chrome Extension
         if (isVisible) {
           throttledUpdateSnapshot(fiberRoot, mode);
-          // SEND COMMAND TO FRONT END TO GET NEW AX TREE
-          window.postMessage(
-            {
-              action: 'recordAXSnap',
-              payload: 'recordAXSnap',
-            },
-            '*',
-          );
         }
         // After our added work is completed we invoke the original onComitFiberRoot function
         return onCommitFiberRoot(...args);

src/extension/background.js

@@ -18,25 +18,26 @@ const metrics = {};
 const pruneAxTree = (axTree) => {
   const axArr = [];
   for (const node of axTree) {
-    const { 
-      backendDOMNodeId, 
-      childIds, 
-      ignored, 
-      name, 
-      nodeId, 
-      ignoredReasons, 
-      parentId, 
-      properties } = node;
+    const {
+      backendDOMNodeId,
+      childIds,
+      ignored,
+      name,
+      nodeId,
+      ignoredReasons,
+      parentId,
+      properties,
+    } = node;
 
     const axNode = {
-      "backendDOMNodeId": backendDOMNodeId, 
-      "childIds": childIds, 
-      "ignored": ignored, 
-      "name": name, 
-      "nodeId": nodeId, 
-      "ignoredReasons": ignoredReasons, 
-      "parentId": parentId, 
-      "properties": properties
+      backendDOMNodeId: backendDOMNodeId,
+      childIds: childIds,
+      ignored: ignored,
+      name: name,
+      nodeId: nodeId,
+      ignoredReasons: ignoredReasons,
+      parentId: parentId,
+      properties: properties,
     };
 
     axArr.push(axNode);
@@ -45,7 +46,6 @@ const pruneAxTree = (axTree) => {
   return axArr;
 };
 
-
 // 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) {
@@ -60,7 +60,7 @@ function createTabObj(title) {
     // components the Reactime tab working on a specific user application
     snapshots: [],
     // axSnapshots is an array of the chrome ax tree at different points for state and stateless applications
-    // functionality to add snapshots is done later 
+    // functionality to add snapshots is done later
     axSnapshots: [],
     // index here is the tab index that shows total amount of state changes
     index: 0,
@@ -103,6 +103,7 @@ class HistoryNode {
     // marks from what branch this node is originated
     this.branch = tabObj.currBranch;
     this.stateSnapshot = obj;
+    this.axSnapshot = tabObj.axSnapshots[tabObj.axSnapshots.length - 1];
     this.children = [];
   }
 }
@@ -127,6 +128,7 @@ function countCurrName(rootNode, name) {
 // 1. param tabObj : arg tabObj[tabId]
 // 2. param newNode : arg an instance of the Node class
 function sendToHierarchy(tabObj, newNode) {
+  // newNode.axSnapshot = tabObj.axSnapshots[tabObj.axSnapshots.length - 1];
   if (!tabObj.currLocation) {
     tabObj.currLocation = newNode;
     tabObj.hierarchy = newNode;
@@ -303,7 +305,7 @@ chrome.runtime.onConnect.addListener((port) => {
 
 // INCOMING MESSAGE FROM CONTENT SCRIPT TO BACKGROUND.JS
 // background.js listening for a message from contentScript.js
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
   // AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED: set Content
   if (request.type === 'SIGN_CONNECT') {
     return true;
@@ -324,8 +326,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     action === 'jumpToSnap' ||
     action === 'injectScript' ||
     action === 'devToolsInstalled' ||
-    action === 'aReactApp' ||
-    action === 'recordAXSnap'
+    action === 'aReactApp'
   ) {
     isReactTimeTravel = true;
   } else {
@@ -336,22 +337,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     tabsObj[tabId] = createTabObj(tabTitle);
   }
   switch (action) {
-    case 'recordAXSnap': {
-      chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
-        chrome.debugger.sendCommand({ tabId: tabId }, 'Accessibility.enable', () => {
-          chrome.debugger.sendCommand(
-            { tabId: tabId },
-            'Accessibility.getFullAXTree',
-            {},
-            (response) => {
-              // function pruning the ax tree
-              tabsObj[tabId].axSnapshots = pruneAxTree(response.nodes);
-              chrome.debugger.detach({ tabId: tabId });
-            },
-          );
-        });
-      });
-    }
     case 'attemptReconnect': {
       const success = 'portSuccessfullyConnected';
       sendResponse({ success });
@@ -413,9 +398,67 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       break;
     }
     case 'recordSnap': {
+      console.log(
+        '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);
+      }
+
+      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');
+          addAxSnap(response.nodes);
+          await detachDebugger(tabId);
+        } catch (error) {
+          console.error('axRecord debugger command failed:', error);
+        }
+      }
       const sourceTab = tabId;
       tabsObj[tabId].webMetrics = metrics;
+
       if (!firstSnapshotReceived[tabId]) {
+        await axRecord(tabId);
         firstSnapshotReceived[tabId] = true;
         reloaded[tabId] = false;
         tabsObj[tabId].webMetrics = metrics;
@@ -429,6 +472,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             }),
           );
         }
+
         break;
       }
 
@@ -448,9 +492,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         tabsObj[tabId].snapshots.push(request.payload);
         // INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN
         if (!tabsObj[tabId][index]) {
+          await axRecord(tabId);
           sendToHierarchy(tabsObj[tabId], new HistoryNode(request.payload, tabsObj[tabId]));
         }
       }
+
       // sends new tabs obj to devtools
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>

src/extension/contentScript.ts

@@ -36,11 +36,6 @@ window.addEventListener('message', (msg) => {
   if (action === 'aReactApp') {
     chrome.runtime.sendMessage(msg.data);
   }
-  if (action === 'recordAXSnap') {
-    console.log('contentScript.ts: window received recordAXSnap');
-    // chrome.runtime.sendMessage({ action: 'recordAXSnap' });
-    chrome.runtime.sendMessage(msg.data);
-  }
 });
 
 // FROM BACKGROUND TO CONTENT SCRIPT