added comments, console logs, and commented out code

Author: rtviner

src/app/containers/MainContainer.tsx

@@ -28,7 +28,7 @@ function MainContainer(): any {
   useEffect(() => {
     // only open port once
     if (currentPort) return;
-    // open connection with background script
+    // open long-lived connection with background script
     const port = chrome.runtime.connect();
 
     // listen for a message containing snapshots from the background script

src/backend/index.ts

@@ -26,26 +26,26 @@ const mode: Mode = {
   paused: false,
   locked: false,
 };
-console.log("linkFiberStart in index.ts:" + linkFiberStart);
+// console.log("linkFiberStart in index.ts:" + linkFiberStart);
 const linkFiber = linkFiberStart(snapShot, mode);
-console.log('linkFiber in index.ts: ' + linkFiber);
+// console.log('linkFiber in index.ts: ' + linkFiber);
 const timeJump = timeJumpStart(snapShot, mode);
 
-function getRouteURL(node: SnapshotNode): string {
-  if (node.name === 'Router') {
-    return node.state.location.pathname;
-  }
-  if (node.children && node.children.length >= 1) {
-    const tempNode: any[] = node.children;
-    for (let index = 0; index < tempNode.length; index += 1) {
-      return getRouteURL(tempNode[index]); // Carlos: ???
-    }
-  }
-}
+// function getRouteURL(node: SnapshotNode): string {
+//   if (node.name === 'Router') {
+//     return node.state.location.pathname;
+//   }
+//   if (node.children && node.children.length >= 1) {
+//     const tempNode: any[] = node.children;
+//     for (let index = 0; index < tempNode.length; index += 1) {
+//       return getRouteURL(tempNode[index]); // Carlos: ???
+//     }
+//   }
+// }
 
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
-  console.log('linkFiber in index.ts: ' + linkFiber);
+  // console.log('linkFiber in index.ts: ' + linkFiber);
   switch (action) {
     case 'jumpToSnap':
       timeJump(payload, true); // * This sets state with given payload
@@ -94,5 +94,5 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       break;
   }
 });
-
+// connect to dev tools and new fiber 
 linkFiber();

src/backend/linkFiber.ts

@@ -41,6 +41,7 @@ let rtid = null;
 let recoilDomNode = {};
 
 // Simple check for whether our target app uses Recoil
+// can these be regular 
 if (window[`$recoilDebugStates`]) {
   isRecoil = true;
 }
@@ -102,8 +103,8 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
 function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
   // this is the currently active root fiber(the mutable root of the tree)
   let fiberRootCurrent = fiberRoot.current;
-  console.log("fiber root props: ", Object.entries(fiberRootCurrent));
-  console.log("fiberroot sibling:", fiberRootCurrent.sibling, "fiberroot stateNode:", fiberRootCurrent.stateNode, "fiberroot child:", fiberRootCurrent.child, "fiberroot memoizedState:", fiberRootCurrent.memoizedState, "fiberroot memoizedProps:", fiberRootCurrent.memoizedProps, "fiberRootCurrent.elementType:",fiberRootCurrent.elementType, "fiberRootCurrent.tag: ", fiberRootCurrent.tag, "fiberRootCurrent.actualDuration: ", fiberRootCurrent.actualDuration, "fiberRootCurrent.actualStartTime: ", fiberRootCurrent.actualStartTime, "fiberRootCurrent.selfBaseDuration: ", fiberRootCurrent.selfBaseDuration, "fiberRootCurrent.treeBaseDuration:", fiberRootCurrent.treeBaseDuration);
+  // console.log("fiber root props: ", Object.entries(fiberRootCurrent));
+  // console.log("fiberroot sibling:", fiberRootCurrent.sibling, "fiberroot stateNode:", fiberRootCurrent.stateNode, "fiberroot child:", fiberRootCurrent.child, "fiberroot memoizedState:", fiberRootCurrent.memoizedState, "fiberroot memoizedProps:", fiberRootCurrent.memoizedProps, "fiberRootCurrent.elementType:",fiberRootCurrent.elementType, "fiberRootCurrent.tag: ", fiberRootCurrent.tag, "fiberRootCurrent.actualDuration: ", fiberRootCurrent.actualDuration, "fiberRootCurrent.actualStartTime: ", fiberRootCurrent.actualStartTime, "fiberRootCurrent.selfBaseDuration: ", fiberRootCurrent.selfBaseDuration, "fiberRootCurrent.treeBaseDuration:", fiberRootCurrent.treeBaseDuration);
 
   if (fiberRoot) {
     const { current } = fiberRoot;
@@ -269,7 +270,7 @@ function createTree(
   } = {};
   let componentFound = false;
 
-  // Check if node is a stateful setState component
+  // Check if node is a stateful class component
   if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
     // Save component's state and setState() function to our record for future
     // time-travel state changing. Add record index to snapshot so we can retrieve.
@@ -344,6 +345,7 @@ function createTree(
         } else if (newState) {
           newState.hooksState = [{ [hooksNames[i]]: state.state }];
         } else {
+          // possibly app breaks somewhere if newState and hooksState do not exist?
           newState = { hooksState: [] };
           newState.hooksState.push({ [hooksNames[i]]: state.state });
         }
@@ -370,6 +372,7 @@ function createTree(
 
   // We want to add this fiber node to the snapshot
   if (componentFound || newState === 'stateless') {
+    // where does this get changed to true?
     if (fromSibling) {
 
       if(isRecoil){
@@ -397,7 +400,7 @@ function createTree(
           }
           rtidCounter++;
       }
-
+      // tree object from tree.ts, with addSibling
       newNode = tree.addSibling(
         newState,
         elementType ? elementType.name : 'nameless',
@@ -477,15 +480,17 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-   console.log("fiberRoot in export default: " + Object.entries(fiberRoot));
+  //  console.log("fiberRoot in export default: " + Object.entries(fiberRoot));
     const throttledUpdateSnapshot = throttle(() => updateSnapShotTree(snap, mode), 70);
     document.addEventListener('visibilitychange', onVisibilityChange);
 
     if (reactInstance && reactInstance.version) {
+      // when is this being called...
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
           console.log("args in onCommitFiberRoot: ", args)
           // eslint-disable-next-line prefer-destructuring
+
           fiberRoot = args[1];
           if (doWork) {
             throttledUpdateSnapshot();

src/backend/masterState.ts

@@ -7,8 +7,8 @@
 // import {Hook}
 import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  HookStateItem,
-  HookStates,
+  HookStateItem, // obj with state and component
+  HookStates, // array of hook state items
 } from './types/backendTypes';
 
 const componentActionsRecord: HookStates = [];

src/backend/timeJump.ts

@@ -26,21 +26,34 @@ export default (origin, mode) => {
   // Set the state of the origin tree if the component is stateful
   function jump(target, firstCall = false) {
     if (!target) return;
-
+    //console.log("target in jump: ", target)
     if (target.state === 'stateless') {
       target.children.forEach(child => jump(child));
       return;
     }
+    //
     const component = componentActionsRecord.getComponentByIndex(
       target.componentData.index,
     );
+    // console.log("component in time jump: ", component)
+    // check if it is a stateful class component
+    // if yes, find the component by its index and assign it to a variable
+    // call that components setState method to reset state to the state at the time of the jump snapshot
+    // if (target.state && !target.state.hooksState)
     if (component && component.setState) {
       component.setState(
         prevState => {
+          // console.log("prevState: ", prevState);
           Object.keys(prevState).forEach(key => {
-            if (target.state[key] === undefined) {
+            // console.log("target state object at key: ", target.state[key])
+            // what is this edge case??
+            if (!target.state[key] === undefined) {
               target.state[key] = undefined;
             }
+            // does this do the same?
+            // if (!target.state[key]) {
+            //   target.state[key];
+            // }
           });
           return target.state;
         },
@@ -52,10 +65,13 @@ export default (origin, mode) => {
     // Check for hooks state and set it with dispatch()
     if (target.state && target.state.hooksState) {
       target.state.hooksState.forEach(hook => {
+        // console.log("hook: ", hook);
         const hooksComponent = componentActionsRecord.getComponentByIndex(
           target.componentData.hooksIndex,
         );
+        // console.log("hooksComponent: ", hooksComponent);
         const hookState = Object.values(hook);
+        // console.log("hookstate in hooks if block: ", hookState);
         if (hooksComponent && hooksComponent.dispatch) {
           hooksComponent.dispatch(hookState[0]);
         }

src/backend/tree.ts

@@ -64,7 +64,7 @@ class Tree {
   }
 
   addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode:any): Tree {
-    console.log("arguments in addChild: "+ arguments.length)
+    //console.log("arguments in addChild: "+ arguments.length)
     const newChild: Tree = new Tree(state, name, componentData, rtid, recoilDomNode);
     newChild.parent = this;
     this.children.push(newChild);

src/extension/background.js

@@ -1,18 +1,12 @@
-// import 'core-js'; 
-/* eslint-disable max-len */
-/* eslint-disable no-param-reassign */
-/* eslint-disable function-paren-newline */
-/* eslint-disable implicit-arrow-linebreak */
-
-import snapshots from "../app/components/snapshots";
-
+// import snapshots from "../app/components/snapshots";
+import 'core-js';
 // store ports in an array
 const portsArr = [];
 const reloaded = {};
 const firstSnapshotReceived = {};
 // there will be the same number of objects in here as there are reactime tabs open for each user application being worked on
 const tabsObj = {};
-
+console.log("hello from background")
 function createTabObj(title) {
   // update tabsObj
   return {
@@ -25,7 +19,7 @@ function createTabObj(title) {
     index: 0,
     //* this is our pointer so we know what the current state the user is checking (this accounts for time travel aka when user clicks jump on the UI)
     currLocation: null,
-    // points the node that will generate the next child set by newest node or jump
+    // points to the node that will generate the next child set by newest node or jump
     currParent: 0,
     // points to the current branch
     currBranch: 0,
@@ -44,14 +38,9 @@ function createTabObj(title) {
 
 class Node {
   constructor(obj, tabObj) {
-    // eslint-disable-next-line no-param-reassign
-    // eslint-disable-next-line no-multi-assign
-    // eslint-disable-next-line no-plusplus
     // continues the order of number of total state changes
-    // eslint-disable-next-line no-plusplus
     this.index = tabObj.index++;
     // continues the order of number of states changed from that parent
-    // eslint-disable-next-line no-multi-assign
     this.name = tabObj.currParent += 1;
     // marks from what branch this node is originated
     this.branch = tabObj.currBranch;
@@ -76,9 +65,9 @@ function sendToHierarchy(tabObj, newNode) {
     tabObj.currLocation = newNode;
   }
 }
-
+// used for map visualization
 function changeCurrLocation(tabObj, rootNode, index, name) {
-  // index comes from the app's main reducer to locate the right current location on tabObj
+  // index comes from the app's main reducer to locate the correct current location on tabObj
   // check if current node has the index wanted
   if (rootNode.index === index) {
     tabObj.currLocation = rootNode;
@@ -99,7 +88,7 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
   }
 }
 
-// establishing connection with devtools
+// establishing incoming connection with devtools
 chrome.runtime.onConnect.addListener((port) => {
   // port is one end of the connection - an object
 
@@ -124,7 +113,7 @@ chrome.runtime.onConnect.addListener((port) => {
     }
   });
 
-  // receive snapshot from devtools and send it to contentScript -
+  // listen for message containing a snapshot from devtools and send it to contentScript -
   port.onMessage.addListener((msg) => {
     // msg is action denoting a time jump in devtools
 
@@ -182,13 +171,13 @@ chrome.runtime.onConnect.addListener((port) => {
         break;
       default:
     }
-
+    // one time request sent to content s
     chrome.tabs.sendMessage(tabId, msg);
     return true; // attempt to fix message port closing error, consider return Promise
   });
 });
 
-// background.js recieves message from contentScript.js
+// background.js listening for a  message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender) => {
   // IGNORE THE AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED
   if (request.type === 'SIGN_CONNECT') {
@@ -199,7 +188,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   const { action, index, name } = request;
   let isReactTimeTravel = false;
 
-  // Filter out tabs that don't have reactime
+  // Filter out tabs that don't have reactime, tabs that dont use react?
   if (
     action === 'tabReload' ||
     action === 'recordSnap' ||
@@ -251,6 +240,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
           // resets hierarchy to page initial state recorded when emptied
           tabsObj[tabId].hierarchy = tabsObj[tabId].initialHierarchy;
         } else {
+          // triggered with new tab opened
           // resets snapshots to page initial state
           tabsObj[tabId].snapshots.splice(1);
           // checks if hierarchy before reset
@@ -346,6 +336,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
 // when tab is closed, remove the tabid from the tabsObj
 chrome.tabs.onRemoved.addListener((tabId) => {
+  console.log('tab is deleted.')
   // tell devtools which tab to delete
   if (portsArr.length > 0) {
     portsArr.forEach((bg) =>
@@ -364,6 +355,7 @@ chrome.tabs.onRemoved.addListener((tabId) => {
 
 // when a new url is loaded on the same tab, this remove the tabid from the tabsObj, recreate the tab and inject the script
 chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
+  console.log("new site loaded.")
   // check if the tab title changed to see if tab need to restart
   if (changeInfo && tabsObj[tabId]) {
     if (changeInfo.title && changeInfo.title !== tabsObj[tabId].title) {
@@ -388,8 +380,9 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
   }
 });
 
-// when tab is view change, put the tabid as the current tab
+// when tab view is changed, put the tabid as the current tab
 chrome.tabs.onActivated.addListener((info) => {
+  console.log("tab view has changed")
   // tell devtools which tab to be the current
   if (portsArr.length > 0) {
     portsArr.forEach((bg) =>
@@ -414,6 +407,7 @@ chrome.runtime.onInstalled.addListener(() => {
 // when context menu is clicked, listen for the menuItemId,
 // if user clicked on reactime, open the devtools window
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
+  console.log('inspect clicked reactime')
   const options = {
     type: 'panel',
     left: 0,