Merge pull request #1 from oslabs-beta/peng

fixing bug and adding some comment

Author: christinaor

package.json

@@ -192,6 +192,7 @@
     "react-split": "^2.0.14",
     "recoil": "0.0.10",
     "util": "^0.12.4",
-    "web-vitals": "^1.1.0"
+    "web-vitals": "^1.1.0",
+    "yarn": "^1.22.19"
   }
-}
+}

src/app/components/App.tsx

@@ -11,7 +11,6 @@ import MainContainer from '../containers/MainContainer';
 import { StoreContext } from '../store';
 import mainReducer from '../reducers/mainReducer.js';
 
-
 // import 'intro.js/introjs.css';
 
 // currentTab is the current active tab within Google Chrome. This is used to decide what tab Reactime should be monitoring. This can be "locked"

src/app/containers/MainContainer.tsx

@@ -22,7 +22,7 @@ import { useStoreContext } from '../store';
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const {
-    tabs, currentTab, port: currentPort, split,
+    tabs, currentTab, port, split,
   } = store;
   const [actionView, setActionView] = useState(true);
   // this function handles Time Jump sidebar view
@@ -41,12 +41,12 @@ function MainContainer(): any {
   // let port;
   useEffect(() => {
     // only open port once
-    if (currentPort) return;
+    if (port) return;
 
     // open long-lived connection with background script
-    const port = chrome.runtime.connect();
+    const currentPort = chrome.runtime.connect();
     // listen for a message containing snapshots from the background script
-    port.onMessage.addListener(
+    currentPort.onMessage.addListener(
       (message: {
         action: string;
         payload: Record<string, unknown>;
@@ -91,13 +91,13 @@ function MainContainer(): any {
       },
     );
 
-    port.onDisconnect.addListener(() => {
+    currentPort.onDisconnect.addListener(() => {
       console.log('this port is disconeccting line 79');
       // disconnecting
     });
 
     // assign port to state so it could be used by other components
-    dispatch(setPort(port));
+    dispatch(setPort(currentPort));
   });
 
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)

src/backend/index.ts

@@ -43,37 +43,37 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       mode.paused = payload;
       break;
     // maybe this isn't work react cohort 45
-    case 'onHover':
-      if (Array.isArray(payload)) {
-        for (let i = 0; i < payload.length; i + 1) {
-          const element = document.getElementById(payload[i]);
-          if (element !== null) {
-            element.style.backgroundColor = '#C0D9D9';
-          }
-        }
-      } else {
-        const element: HTMLElement = document.querySelector(`.${payload}`);
-        if (element !== null) {
-          element.style.backgroundColor = '#C0D9D9';
-        }
-      }
-      break;
-    // maybe this isn't work react cohort 45
-    case 'onHoverExit':
-      if (Array.isArray(payload)) {
-        for (let i = 0; i < payload.length; i++) {
-          const element: HTMLElement = document.querySelector(`.${payload}`);
-          if (element !== null) {
-            element.style.backgroundColor = '';
-          }
-        }
-      } else {
-        const element: HTMLElement = document.querySelector(`.${payload}`);
-        if (element !== null) {
-          element.style.backgroundColor = '';
-        }
-      }
-      break;
+    // case 'onHover':
+    //   if (Array.isArray(payload)) {
+    //     for (let i = 0; i < payload.length; i + 1) {
+    //       const element = document.getElementById(payload[i]);
+    //       if (element !== null) {
+    //         element.style.backgroundColor = '#C0D9D9';
+    //       }
+    //     }
+    //   } else {
+    //     const element: HTMLElement = document.querySelector(`.${payload}`);
+    //     if (element !== null) {
+    //       element.style.backgroundColor = '#C0D9D9';
+    //     }
+    //   }
+    //   break;
+    // // maybe this isn't work react cohort 45
+    // case 'onHoverExit':
+    //   if (Array.isArray(payload)) {
+    //     for (let i = 0; i < payload.length; i++) {
+    //       const element: HTMLElement = document.querySelector(`.${payload}`);
+    //       if (element !== null) {
+    //         element.style.backgroundColor = '';
+    //       }
+    //     }
+    //   } else {
+    //     const element: HTMLElement = document.querySelector(`.${payload}`);
+    //     if (element !== null) {
+    //       element.style.backgroundColor = '';
+    //     }
+    //   }
+    //   break;
     default:
       break;
   }

src/backend/linkFiber.ts

@@ -571,17 +571,38 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     document.addEventListener('visibilitychange', onVisibilityChange);
 
     if (reactInstance && reactInstance.version) {
+      console.log(devTools);
+      console.log(devTools.onCommitFiberRoot);
       fiberRoot = devTools.getFiberRoots(1).values().next().value;
-      devTools.onCommitFiberRoot = (function (original) {
+      // original is a function
+      // devTools.onCommitFiberRoot = (function (original) {
+      //   return function (...args) {
+      //     // eslint-disable-next-line prefer-destructuring
+      //     fiberRoot = args[1];
+      //     if (doWork) {
+      //       throttledUpdateSnapshot();
+      //     }
+      //     return original(...args);
+      //   };
+      // }(devTools.onCommitFiberRoot));
+
+      // React has inherent methods that are called with react fiber
+      // we attach new functionality without compromising the original work that onCommitFiberRoot does
+      const addOneMoreStep = function (original) {
         return function (...args) {
+          console.log(args);
           // eslint-disable-next-line prefer-destructuring
           fiberRoot = args[1];
+          // this is the additional functionality we added
           if (doWork) {
             throttledUpdateSnapshot();
           }
+          // after our added work is completed we invoke the original function
           return original(...args);
         };
-      }(devTools.onCommitFiberRoot));
+      };
+      devTools.onCommitFiberRoot = addOneMoreStep(devTools.onCommitFiberRoot);
+
       throttledUpdateSnapshot(); // only runs on start up
     }
   };

src/extension/background.js

@@ -12,7 +12,6 @@ let activeTab;
 const tabsObj = {};
 // Will store Chrome web vital metrics and their corresponding values.
 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.
 function createTabObj(title) {
@@ -122,12 +121,13 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
   }
 }
 
-// Establishing incoming connection with devtools.
+// Establishing incoming connection with Reactime.
 chrome.runtime.onConnect.addListener(port => {
   // port is one end of the connection - an object
   // push every port connected to the ports array
   portsArr.push(port);
-
+  console.log(port, '<--port');
+  console.log(portsArr, '<--portsArr');
   // On Reactime launch: make sure RT's active tab is correct
   if (portsArr.length > 0) {
     portsArr.forEach(bg => bg.postMessage({
@@ -222,7 +222,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.type === 'SIGN_CONNECT') {
     return true;
   }
-
+  console.log(sender, '<-- sender');
   const tabTitle = sender.tab.title;
   const tabId = sender.tab.id;
   const {
@@ -286,7 +286,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         script.setAttribute('type', 'text/javascript');
         script.setAttribute('src', file);
         // eslint-disable-next-line prefer-template
-        document.title = tab + '-' + document.title;
+        // document.title = tab + '-' + document.title; // error of injecting random number
         htmlBody.appendChild(script);
       };
 

src/extension/build/manifest.json

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

src/extension/contentScript.ts

@@ -27,8 +27,9 @@ window.addEventListener('message', msg => {
   // will send snapshots of the test app's link fiber tree.
   const { action }: { action: string } = msg.data;
   if (action === 'recordSnap') {
-    if (!isRecording) return;
-    chrome.runtime.sendMessage(msg.data);
+    if (isRecording) {
+      chrome.runtime.sendMessage(msg.data);
+    }
   }
   if (action === 'devToolsInstalled') {
     chrome.runtime.sendMessage(msg.data);