Merge pull request #2 from dangitbobbeh/master

changed script injection

Author: dangitbobbeh

src/app/containers/ActionContainer.tsx

@@ -54,7 +54,7 @@ function ActionContainer(props) {
   };
   // the hierarchy gets set on the first click in the page
   // when page in refreshed we may not have a hierarchy so we need to check if hierarchy was initialized
-  // if true involk displayArray to display the hierarchy
+  // if true invoke displayArray to display the hierarchy
   if (hierarchy) displayArray(hierarchy);
 
   // handles keyboard presses, function passes an event and index of each action-component

src/app/containers/MainContainer.tsx

@@ -20,6 +20,7 @@ const mixpanel = require('mixpanel').init('12fa2800ccbf44a5c36c37bc9776e4c0', {
 
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
+  console.log("storecont:", useStoreContext());
   const { tabs, currentTab, port: currentPort } = store;
   const [actionView, setActionView] = useState(true);
   //this function handles Time Jump sidebar view

src/app/reducers/mainReducer.js

@@ -4,7 +4,10 @@ import * as types from '../constants/actionTypes.ts';
 
 export default (state, action) =>
   produce(state, (draft) => {
+    console.log("export state", state)
     const { port, currentTab, tabs } = draft;
+    console.log("currentTab Reducer:", currentTab)
+    console.log("reducer action:", action)
     const { hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex } =
       tabs[currentTab] || {};
 
@@ -154,6 +157,7 @@ export default (state, action) =>
       }
       case types.EMPTY: {
         port.postMessage({ action: 'emptySnap', tabId: currentTab });
+                console.log("mainreducer line 159")
         tabs[currentTab].sliderIndex = 0;
         tabs[currentTab].viewIndex = -1;
         tabs[currentTab].playing = false;

src/backend/linkFiber.ts

@@ -82,6 +82,7 @@ function getRecoilState(): any {
  * Middleware: Gets a copy of the current snap.tree and posts a recordSnap message to the window
  */
 function sendSnapshot(snap: Snapshot, mode: Mode): void {
+  console.log('This is sendSnapshot!')
   // Don't send messages while jumping or while paused
   if (mode.jumping || mode.paused) return;
   // If there is no current tree  creates a new one
@@ -91,6 +92,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   const payload = snap.tree.cleanTreeCopy();
   // if it's Recoil - run different actions?
   if (isRecoil) {
+      console.log('This is recoil and we\'re in sendSnapshot!')
     // getRecoilState()
     payload.atomsComponents = atomsComponents;
     payload.atomSelectors = atomsSelectors;
@@ -121,6 +123,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
 
 //updating tree depending on current mode on the panel (pause, etc)
 function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
+    console.log('This is updateSnapShotTree!')
   // this is the currently active root fiber(the mutable root of the tree)
   if (fiberRoot) {
     const { current } = fiberRoot;
@@ -147,6 +150,7 @@ function traverseRecoilHooks(
   //Props of the fiber that were used to create the output during the previous render.
   memoizedProps: any
 ): HookStates {
+  console.log('This is traverseRecoilHooks!')
   const hooksStates: HookStates = [];
   while (memoizedState && memoizedState.queue) {
     if (
@@ -177,6 +181,7 @@ function traverseRecoilHooks(
  * every time a hooks component changes state
  */
 function traverseHooks(memoizedState: any): HookStates {
+  console.log('This is traverseHooks!')
   const hooksStates: HookStates = [];
   while (memoizedState && memoizedState.queue) {
     if (memoizedState.memoizedState) {
@@ -213,6 +218,7 @@ function createTree(
   tree: Tree = new Tree('root', 'root'),
   fromSibling = false
 ) {
+    console.log('currentFiber: ', currentFiber);
   // Base case: child or sibling pointed to null
   if (!currentFiber) return null;
   if (!tree) return tree;
@@ -343,6 +349,7 @@ function createTree(
     (tag === 0 || tag === 1 || tag === 2 || tag === 10) &&
     isRecoil === false
   ) {
+    console.log("Node uses regular react hooks")
     if (memoizedState.queue) {
       // Hooks states are stored as a linked list using memoizedState.next,
       // so we must traverse through the list and get the states.
@@ -488,6 +495,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     doWork = !document.hidden;
   }
   return () => {
+    console.log("exporting LinkFiber!")
     // react devtools global hook is a global object that was injected by the React Devtools content script, allows access to fiber nodes and react version
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;

src/extension/background.js

@@ -12,6 +12,7 @@ const metrics = {};
 
 // 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.
+//console.log("hello from background.js");
 function createTabObj(title) {
   // update tabsObj
   return {
@@ -240,6 +241,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
           const script = document.createElement('script');
           script.setAttribute('type', 'text/javascript');
           script.setAttribute('src', file);
+          document.title=${tabId} + '-' + document.title
           htmlBody.appendChild(script);
         };
         injectScript(chrome.runtime.getURL('bundles/backend.bundle.js'), 'body');
@@ -334,12 +336,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             tabsObj[tabId],
             new Node(request.payload, tabsObj[tabId])
           );
-        } else {
-          sendToHierarchy(
-            tabsObj[tabId],
-            new NewNode(request.payload, tabsObj[tabId])
-          );
         }
+        //  else {
+        //   sendToHierarchy(
+        //     tabsObj[tabId],
+        //     new NewNode(request.payload, tabsObj[tabId])
+        //   );
+        // }
       }
       // sends new tabs obj to devtools
       if (portsArr.length > 0) {

src/extension/build/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Reactime",
+  "name": "ReactimeX",
   "version": "8.0.0",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React applications by memorizing the state of components with every render.",