commit so i can move to another branch

Author: jrosengrant

src/app/containers/ErrorContainer.tsx

@@ -23,8 +23,8 @@ function ErrorContainer(): JSX.Element {
   const timeout = useRef(null);
 
   console.log(
-    'ErrorContainer state variables: tabs: ',
-    tabs,
+    'ErrorContainer state variables: tabs status: ',
+    JSON.stringify(tabs[currentTab]?.status),
     'currentTab: ',
     currentTab,
     'currentTitle: ',

src/app/containers/MainContainer.tsx

@@ -12,6 +12,7 @@ import {
   setTab,
   deleteTab,
   noDev,
+  aReactApp, // JR added 12.20.23 9.53pm
   setCurrentLocation,
   disconnected,
   endConnect,
@@ -27,7 +28,15 @@ function MainContainer(): JSX.Element {
   const dispatch = useDispatch();
 
   const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
-
+  console.log(
+    'MainContainer state at render: tabs: ',
+    JSON.stringify(tabs[currentTab]?.status),
+    // tabs[currentTab]?.status,
+    'port: ',
+    port?.name,
+    'time: ',
+    new Date().toLocaleString(),
+  );
   //JR: check connection status
   const { connectionStatus }: MainState = useSelector((state: RootState) => state.main);
   console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
@@ -72,6 +81,7 @@ function MainContainer(): JSX.Element {
       'MainContainer messageListener message. action: ',
       action,
       'payload: ',
+      JSON.stringify(payload.status),
       payload,
       'sourceTab: ',
       sourceTab,
@@ -93,6 +103,11 @@ function MainContainer(): JSX.Element {
         dispatch(noDev(payload));
         break;
       }
+      // JR 12.20.23 9.53pm added a listener case for sending aReactApp to frontend
+      case 'aReactApp': {
+        dispatch(aReactApp(payload));
+        break;
+      }
       case 'changeTab': {
         console.log('MainContainer changeTab payload: ', payload);
         dispatch(setTab(payload));
@@ -132,14 +147,9 @@ function MainContainer(): JSX.Element {
     // If messageListener exists on currentPort, remove it
     while (currentPort.onMessage.hasListener(messageListener))
       currentPort.onMessage.removeListener(messageListener);
-    console.log('messageListener after removing: ', messageListener);
 
     // Add messageListener to the currentPort
     currentPort.onMessage.addListener(messageListener);
-    console.log(
-      'currentPort hasListener? after re-adding: ',
-      currentPort.onMessage.hasListener(messageListener),
-    );
 
     // If handleDisconnect exists on chrome.runtime, remove it
     while (chrome.runtime.onMessage.hasListener(handleDisconnect))

src/app/slices/mainSlice.ts

@@ -160,7 +160,32 @@ export const mainSlice = createSlice({
 
       if (tabs[currentTab]) {
         const { reactDevToolsInstalled } = payload[currentTab].status;
-        tabs[currentTab].status.reactDevToolsInstalled = reactDevToolsInstalled;
+        console.log(reactDevToolsInstalled);
+        // JR 12.20. 9.47pm this was not applying to state before
+        state.tabs[currentTab].status.reactDevToolsInstalled = reactDevToolsInstalled;
+        console.log(
+          'devTools updated state: ',
+          JSON.stringify(state.tabs[currentTab].status),
+          'time: ',
+          new Date().toLocaleString(),
+        );
+      }
+    },
+
+    aReactApp: (state, action) => {
+      const { payload } = action;
+      const { tabs, currentTab } = state;
+
+      if (tabs[currentTab]) {
+        console.log(tabs[currentTab], payload[currentTab]);
+        // JR 12.20. 9.47pm this was not applying to state before
+        state.tabs[currentTab].status.targetPageisaReactApp = true;
+        console.log(
+          'aReactApp updated state: ',
+          JSON.stringify(state.tabs[currentTab].status),
+          'time: ',
+          new Date().toLocaleString(),
+        );
       }
     },
 
@@ -506,6 +531,7 @@ export const {
   setTab,
   deleteTab,
   noDev,
+  aReactApp,
   setCurrentLocation,
   changeView,
   changeSlider,

src/backend/index.ts

@@ -6,7 +6,7 @@
 // regenerator runtime supports async functionality : This package implements a fully-functional source transformation that takes the syntax for generators/yield from ECMAScript 2015 or ES2015 and Asynchronous Iteration proposal and spits out efficient JS-of-today (ES5) that behaves the same way.
 import 'regenerator-runtime/runtime';
 // linkFiberInitialization (actually uses the function linkFiber but is labeled here as linkFiberInitialization, returns a function). When this returned function is invoked, it checks if devTools is installed, checks if the website is a reactApp, adds event listeners for timetravel, and allows us to obtain the initial FiberRoot Node from react dev tool
-import linkFiberInitialization from './routers/linkFiber';
+import linkFiber from './routers/linkFiber';
 // timeJumpInitialization (actually uses the function timeJumpInitiation but is labeled here as linkFiberInitialization, returns a function) returns a function that sets jumping to false and handles timetravel feature
 import timeJumpInitialization from './controllers/timeJump';
 import { Snapshot, Status, MsgData } from './types/backendTypes';
@@ -20,7 +20,7 @@ const mode: Status = {
 
 // ---------------------INITIALIZE LINKFIBER & TIMEJUMP-------------------------
 // linkFiber is now assigned the default ASYNC function exported from the file linkFiber.ts
-const linkFiber = linkFiberInitialization(mode);
+const linkFiberInit = linkFiber(mode);
 // timeJump is now assigned the default ASYNC function exported from the file timeJump.ts
 const timeJump = timeJumpInitialization(mode);
 
@@ -30,7 +30,7 @@ const timeJump = timeJumpInitialization(mode);
  * 2. Obtain the initial ReactFiber Tree from target React App
  * 3. Send a snapshot of ReactFiber Tree to frontend/Chrome Extension
  */
-linkFiber();
+linkFiberInit();
 
 // --------------INITIALIZE EVENT LISTENER FOR TIME TRAVEL----------------------
 /**

src/extension/background.js

@@ -162,15 +162,15 @@ chrome.runtime.onConnect.addListener((port) => {
   
     Again, this port object is used for communication within your extension, not for communication with external ports or tabs in the Chrome browser. If you need to interact with specific tabs or external ports, you would use other APIs or methods, such as chrome.tabs or other Chrome Extension APIs.
   */
-  console.log('tabsObj onConnect: ', tabsObj);
+  console.log('tabsObj onConnect: ', JSON.stringify(tabsObj));
   portsArr.push(port); // push each Reactime communication channel object to the portsArr
-  console.log('portsArr onConnect: ', portsArr);
+  console.log('portsArr onConnect: ', Object.keys(portsArr));
 
   // JR: CONSIDER DELETING
   // 12.20.23 commenting out, possible culprit of many in no target bug
   if (portsArr.length > 0) {
-    portsArr.forEach((bg) => {
-      console.log('background onConnect. Send changeTab for port ', bg);
+    portsArr.forEach((bg, index) => {
+      console.log('background onConnect. Send changeTab for port ', index);
       // go through each port object (each Reactime instance)
       bg.postMessage({
         // send passed in action object as a message to the current port
@@ -190,14 +190,14 @@ chrome.runtime.onConnect.addListener((port) => {
 
   // every time devtool is closed, remove the port from portsArr
   port.onDisconnect.addListener((e) => {
-    console.log('port onDisconnect triggered, portsArr: ', portsArr);
+    console.log('port onDisconnect triggered, portsArr: ', Object.keys(portsArr));
     for (let i = 0; i < portsArr.length; i += 1) {
       if (portsArr[i] === e) {
         // if (portsArr.length === 1) portsArr[i].sendMessage('portDisconnect'); // JR 12.20.23 try sending message to last remaining port directly prior to it being disconnected
         portsArr.splice(i, 1);
         chrome.runtime.sendMessage({ action: 'portDisconnect', port: e.name }); // JR 12.20.23 isn't this supposed to be a port.sendMessage? chrome.runtime sends messages between content script and background.js
         console.log('spliced portsArr', portsArr);
-        console.log(`port ${e.name} disconnected. Remaining portsArr: `, portsArr);
+        console.log(`port ${e.name} disconnected. Remaining portsArr: `, Object.keys(portsArr));
         break;
       }
     }
@@ -333,6 +333,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     // Confirmed React Dev Tools installed, send this info to frontend
     case 'devToolsInstalled': {
       tabsObj[tabId].status.reactDevToolsInstalled = true;
+      console.log('devToolsInstalled action, update tabsObj status', tabsObj[tabId].status);
+
       portsArr.forEach((bg) =>
         bg.postMessage({
           action: 'devTools',
@@ -342,8 +344,18 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       break;
     }
     // Confirmed target is a react app. No need to send to frontend
+    // JR: BUG: why wouldn't we need to send to frontend???
     case 'aReactApp': {
       tabsObj[tabId].status.targetPageisaReactApp = true;
+      console.log('aReactApp action, update tabsObj status', tabsObj[tabId].status);
+
+      // JR 12.20.23 9.53pm added a message action to send to frontend
+      portsArr.forEach((bg) =>
+        bg.postMessage({
+          action: 'aReactApp',
+          payload: tabsObj,
+        }),
+      );
       break;
     }
     // This injects a script into the app that you're testing Reactime on,