added more logs, investigating content scripts and background

Author: jrosengrant

src/app/components/Diff.tsx

@@ -89,6 +89,7 @@ function Diff(props: DiffProps): JSX.Element {
   console.log('html: ', html);
 
   console.log(show);
+  console.log(formatters.html.showUnchanged());
   if (show)
     formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
   else formatters.html.hideUnchanged(); // hides unchanged values

src/app/components/StateRoute/History.tsx

@@ -37,7 +37,7 @@ function History(props: Record<string, unknown>): JSX.Element {
 
   const svgRef = React.useRef(null);
   const root = JSON.parse(JSON.stringify(hierarchy)); // why do we stringify and then parse our hierarchy back to JSON? (asked 7/31/23)
-
+  console.log('history root: ', root);
   // setting the margins for the Map to render in the tab window.
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
@@ -167,14 +167,15 @@ function History(props: Record<string, unknown>): JSX.Element {
   const makeD3Tree = () => {
     const svg = d3.select(svgRef.current); // d3.select Selects the first element/node that matches svgRef.current. If no element/node match returns an empty selection. If multiple elements/nodes match the selector, only the first matching element/node (in document order) will be selected.
     svg.selectAll('*').remove(); // Selects all elements. The elements will be selected in document order (top-to-bottom). We then remove the selected elements/nodes from the DOM. This is important as to ensure that the SVG is empty before rendering the D3 based visualization to avoid interference/overlap with any previously rendered content.
-
+    console.log('makeD3Tree initial svgRef: ', svgRef);
     const tree = (data) => {
       // function that takes in data and turns it into a d3 tree.
       const treeRoot = d3.hierarchy(data); // 'd3.hierarchy' constructs a root node from the specified hierarchical data.
       return d3.tree().size([innerWidth, innerHeight])(treeRoot); // d3.tree creates a new tree layout with a size option of innerWidth (~line 41) and innerHeight (~line 42). We specify our new tree layout's root as 'treeRoot' which assigns an x and y property to each node to represent an [x, y] coordinate system.
     };
 
     const d3root = tree(root); // create a d3. tree from our root
+    console.log('d3root: ', d3root);
     const currNode = labelCurrentNode(d3root); // iterate through our nodes and apply a color property
 
     const g = svg //serves as a container for the nodes and links within the D3 Visualization of the tree
@@ -306,12 +307,13 @@ function History(props: Record<string, unknown>): JSX.Element {
   };
 
   useEffect(() => {
+    console.log('currLocation: ', currLocation);
     makeD3Tree();
-  }, [root, currLocation]); // if the 'root' or 'currLocation' changes, re-build the D3 Tree
+  }, [root /*, currLocation*/]); // if the 'root' or 'currLocation' changes, re-build the D3 Tree
 
-  useEffect(() => {
-    dispatch(setCurrentTabInApp('history')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
-  }, []);
+  // useEffect(() => {
+  //   dispatch(setCurrentTabInApp('history')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
+  // }, []);
 
   // then rendering each node in History tab to render using D3, which will share area with LegendKey
   return (

src/app/slices/mainSlice.ts

@@ -41,7 +41,8 @@ export const mainSlice = createSlice({
       const { tabs, currentTab, port } = state;
 
       port.postMessage({ action: 'emptySnap', tabId: currentTab }); //communicate with background.js (service worker)
-
+      console.log('emptySnapshots tabs: ', tabs);
+      console.log('emptySnapshots currentTab: ', currentTab);
       // properties associated with timetravel + seek bar
       tabs[currentTab].sliderIndex = 0;
       tabs[currentTab].viewIndex = 0;

src/backend/index.ts

@@ -40,6 +40,7 @@ linkFiber();
  * 3. If not navigate during jumping =>  invoke timeJump to update ReactFiber tree with cached data from the snapshot payload
  */
 window.addEventListener('message', async ({ data: { action, payload } }: MsgData) => {
+  console.log('index.ts window event listener data received: ', action, payload);
   switch (action) {
     case 'jumpToSnap':
       // Set mode to jumping to prevent snapShot being sent to frontEnd

src/extension/background.js

@@ -185,6 +185,7 @@ chrome.runtime.onConnect.addListener((port) => {
       if (portsArr[i] === e) {
         portsArr.splice(i, 1);
         chrome.runtime.sendMessage('portDisconnect');
+        console.log(`port ${e} disconnected. Remaining portsArr: `, portsArr);
         break;
       }
     }
@@ -262,6 +263,7 @@ chrome.runtime.onConnect.addListener((port) => {
 
 // background.js listening for a message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  console.log('background.js received message with action: ', request.action);
   // AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED: set Content
   if (request.type === 'SIGN_CONNECT') {
     return true;
@@ -291,6 +293,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // everytime we get a new tabId, add it to the object
   if (isReactTimeTravel && !(tabId in tabsObj)) {
     tabsObj[tabId] = createTabObj(tabTitle);
+    console.log('tabsObj after createTabObj function call: ', tabsObj);
   }
 
   switch (action) {
@@ -300,6 +303,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       break;
     }
     case 'jumpToSnap': {
+      console.log(`background.js received jumpToSnap from UI at ${Date.now().toLocaleString()}`);
+      console.log('portsArr at time of jumpToSnap in backgroundjs: ', portsArr);
       changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index, name);
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>
@@ -455,6 +460,7 @@ chrome.tabs.onActivated.addListener((info) => {
     // never set a reactime instance to the active tab
     if (!tab.pendingUrl?.match('^chrome-extension')) {
       activeTab = tab;
+      console.log('activeTab: ', activeTab);
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>
           bg.postMessage({

src/extension/contentScript.ts

@@ -15,6 +15,7 @@ window.addEventListener('message', (msg) => {
   // recorded on the test application from backend files (linkFiber.ts).
   // Background.js has a listener that includes switch cases, depending on
   // the name of the action (e.g. 'tabReload').
+  console.log('message sent to window event listener: ', msg.data);
   if (firstMessage) {
     // One-time request tells the background script that the tab has reloaded.
     chrome.runtime.sendMessage({ action: 'tabReload' });