added tests to show snapshot data

Author: BagelEnthusiast

src/app/components/Action.tsx

@@ -41,11 +41,14 @@ interface ActionProps {
 // index and delta props were removed from Action.jsx  */
 // viewIndex and handleonkeyDown added to props
 const Action = (props: ActionProps): JSX.Element => {
+
   const {
     selected, last, index, sliderIndex, dispatch, displayName, componentName,
     componentData, viewIndex, handleOnkeyDown,
   } = props;
 
+  // nathan test for props
+  console.log('componentName: ', componentName);
   /**
    * @function cleanTime: Displays render times for state changes
    * @returns render display time in seconds in miliseconds
@@ -91,7 +94,8 @@ const Action = (props: ActionProps): JSX.Element => {
       tabIndex={index}
     >
       <div className="action-component-text">
-        {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `}
+        {/* {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `} */}
+        {`displayName: ${displayName}`}
       </div>
       <button
         className="time-button"

src/app/components/Diff.tsx

@@ -61,6 +61,8 @@ function Diff(props: DiffProps) {
   // diff function returns a comparison of two objects, one has an updated change
   // just displays stateful data
   const delta = diff(previousDisplay, snapshot);
+  // nathan test
+  console.log('delta', delta);
   // returns html in string
   // just displays stateful data
   const html = formatters.html.format(delta, previousDisplay);

src/app/containers/ActionContainer.tsx

@@ -20,6 +20,8 @@ function ActionContainer(props) {
   let actionsArr = [];
   const hierarchyArr: any[] = [];
 
+  
+
   // function to traverse state from hiararchy and also getting information on display name and component name
   const displayArray = (obj: {
     stateSnapshot: { children: any[] };
@@ -38,7 +40,9 @@ function ActionContainer(props) {
         index: obj.index,
         displayName: `${obj.name}.${obj.branch}`,
         state: obj.stateSnapshot.children[0].state,
-        componentName: obj.stateSnapshot.children[0].name,
+        // componentName: obj.stateSnapshot.children[0].name,
+        // nathan testing new entries for component name, original above
+        componentName: obj.stateSnapshot,
         componentData:
           JSON.stringify(obj.stateSnapshot.children[0].componentData) === '{}'
             ? ''
@@ -60,7 +64,7 @@ function ActionContainer(props) {
   // handles keyboard presses, function passes an event and index of each action-component
   function handleOnKeyDown(e: KeyboardEvent, i: number) {
     let currIndex = i;
-    // up array key pressed
+    // up arrow key pressed
     if (e.keyCode === 38) {
       currIndex -= 1;
       if (currIndex < 0) return;
@@ -109,14 +113,14 @@ function ActionContainer(props) {
           viewIndex={viewIndex}
         />
       );
-    }
+    },
   );
   useEffect(() => {
     setActionView(true);
   }, []);
 
-  //the conditional logic below will cause ActionContainer.test.tsx to fail as it cannot find the Empty button
-  //UNLESS actionView={true} is passed into <ActionContainer /> in the beforeEach() call in ActionContainer.test.tsx
+  // the conditional logic below will cause ActionContainer.test.tsx to fail as it cannot find the Empty button
+  // UNLESS actionView={true} is passed into <ActionContainer /> in the beforeEach() call in ActionContainer.test.tsx
   return (
     <div id='action-id' className='action-container'>
       <div id='arrow'>

src/backend/linkFiber.ts

@@ -88,6 +88,9 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   if (!snap.tree) {
     snap.tree = new Tree('root', 'root');
   }
+  // nathan test breakpoint
+  console.log('snap: ', snap);
+
   const payload = snap.tree.cleanTreeCopy();
   // if it's Recoil - run different actions?
   if (isRecoil) {
@@ -103,6 +106,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   // the postMessage action will be received on the content script to later update the tabsObj
   // this will fire off everytime there is a change in test application
   window.postMessage(
+
     {
       action: 'recordSnap',
       payload,
@@ -213,6 +217,7 @@ function createTree(
   tree: Tree = new Tree('root', 'root'),
   fromSibling = false
 ) {
+  
   // Base case: child or sibling pointed to null
   if (!currentFiber) return null;
   if (!tree) return tree;
@@ -233,6 +238,9 @@ function createTree(
     treeBaseDuration,
   } = currentFiber;
 
+  // console.log('currentFiber: ', currentFiber);
+  // console.log('tag', tag);
+
   //Checks Recoil Atom and Selector Relationships
   if (
     currentFiber.memoizedState &&
@@ -490,6 +498,8 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
   return () => {
     // 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__;
+    // nathan test
+    console.log('devTools', devTools);
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
 

src/extension/background.js

@@ -130,6 +130,8 @@ chrome.runtime.onConnect.addListener((port) => {
   port.onMessage.addListener((msg) => {
     // msg is action denoting a time jump in devtools
 
+    // nathan tests below
+    console.log('msg: ', msg);
     // ---------------------------------------------------------------
     // message incoming from devTools should look like this:
     // {
@@ -190,8 +192,13 @@ chrome.runtime.onConnect.addListener((port) => {
   });
 });
 
+// nathan test
+console.log('top level log in background.js');
 // background.js listening for a message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  // nathan test
+  console.log('request: ', request);
+  console.log('sender: ', sender);
   // IGNORE THE AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED
   if (request.type === 'SIGN_CONNECT') {
     return true;
@@ -430,6 +437,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('this is the menuItemId: ', menuItemId);
   const options = {
     type: 'panel',
     left: 0,

src/extension/build/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Reactime",
+  "name": "ReactimeVnpr",
   "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.",