Merge pull request #3 from BagelEnthusiast/sandbox

Sandbox

Author: josephiswhere

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

@@ -89,6 +89,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) {
@@ -105,6 +108,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,
@@ -218,7 +222,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;
@@ -239,6 +243,9 @@ function createTree(
     treeBaseDuration,
   } = currentFiber;
 
+  // console.log('currentFiber: ', currentFiber);
+  // console.log('tag', tag);
+
   //Checks Recoil Atom and Selector Relationships
   if (
     currentFiber.memoizedState &&
@@ -498,9 +505,16 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     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__;
+    // nathan test
+    console.log('devTools', devTools);
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
+    // nathan test
+    console.log('reactInstance', reactInstance);
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-
+    // nathan test
+    console.log('devTools.getFiberRoots(1)', devTools.getFiberRoots(1));
+    console.log('devTools.getFiberRoots(1).values()', devTools.getFiberRoots(1).values());
+    console.log('fiberRoot: ', fiberRoot);
     const throttledUpdateSnapshot = throttle(
       () => updateSnapShotTree(snap, mode),
       70
@@ -510,6 +524,8 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
+          // nathan test
+          console.log('args', args);
           // eslint-disable-next-line prefer-destructuring
           fiberRoot = args[1];
           if (doWork) {

src/extension/background.js

@@ -131,6 +131,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:
     // {
@@ -191,8 +193,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;
@@ -433,6 +440,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,