udpated setTab reducer to correctly handle mode on initial connect (assume true rather than empty object--this should help with 'no target' issue). Commented out port forEach loop in background.js on connect as it causes errors and is not necessary. Thinking of adding a new reducer function that fires on context menu click to update current tab in state.

Author: jrosengrant

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -127,6 +127,7 @@ export default function ComponentMap({
   };
 
   const formatRenderTime: string = (time: number): string => {
+    if (!time) return 'No time information';
     const renderTime = time.toFixed(3);
     return `${renderTime} ms `;
   };

src/app/containers/MainContainer.tsx

@@ -83,7 +83,7 @@ function MainContainer(): JSX.Element {
         break;
       }
       case 'changeTab': {
-        console.log('made it to the mainContainer dispatch');
+        console.log('MainContainer changeTab payload: ', payload);
         dispatch(setTab(payload));
         break;
       }

src/app/slices/mainSlice.ts

@@ -124,10 +124,18 @@ export const mainSlice = createSlice({
       state.port = action.payload;
     },
 
+    // JR: REFACTOR: 12.20.23 this code has if statement to catch diff shapes of payload ('number' vs 'object'). This should not be the case, the payload should always come in as expected.
+    // consider creating a custom typescript type for the action that setTab receives.
+
+    //JR: DOCS: 12.20.23 This code will update the currentTab being tracked in the Redux state. It depends, however, on the 'mode', which is an unfortunately named label for the "Locked" button status.
+    // The naming is unfortunate because the backend also has a mode variable that does a completely different thing, which creates confusion. Consider renaming this to 'locked' or somesuch.
+    // Mode is an object that expects to contain a single key, paused, with a boolean value.
+    // If true: Reactime is 'Locked', and navigating to another tab will not update the Redux state and trigger Reactime to take any actions.
+    // If false: Reactime is 'Unlocked', and navigating to another tab will update the Redux state's currentTab, which will trigger Reactime to try to run on that new tab.
     setTab: (state, action) => {
       const { tabs, currentTab } = state;
-      const { mode } = tabs[currentTab] || {};
-      console.log('mainSlice setTab, mode: ', mode, 'payload: ', action.payload);
+      const { mode } = tabs[currentTab] || { paused: true };
+      console.log('mainSlice setTab, mode: ', JSON.stringify(mode), 'payload: ', action.payload);
       if (!mode?.paused) {
         if (typeof action.payload === 'number') {
           state.currentTab = action.payload;
@@ -178,7 +186,7 @@ export const mainSlice = createSlice({
       const { tabs, currentTab } = state;
       console.log(
         'changeView tabs: ',
-        tabs,
+        JSON.stringify(tabs),
         'currentTab: ',
         currentTab,
         'tabs[currentTab]: ',
@@ -343,6 +351,7 @@ export const mainSlice = createSlice({
     toggleMode: (state, action) => {
       const { port, tabs, currentTab } = state;
       const { mode } = tabs[currentTab] || {};
+      console.log('toggleMode current mode destructured from tabs[currentTab]: ', mode);
       mode[action.payload] = !mode[action.payload];
       const newMode = mode[action.payload];
       let actionText;

src/extension/background.js

@@ -140,7 +140,7 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
   This allows us to set up listener's for when we connect, message, and disconnect the script.
 */
 
-// FROM FRONTEND CONNECTION TO BACKGROUND
+// INCOMING CONNECTION FROM FRONTEND (MainContainer) TO BACKGROUND.JS
 // Establishing incoming connection with Reactime.
 chrome.runtime.onConnect.addListener((port) => {
   /*
@@ -167,16 +167,17 @@ chrome.runtime.onConnect.addListener((port) => {
   console.log('portsArr onConnect: ', portsArr);
 
   // JR: CONSIDER DELETING
-  if (portsArr.length > 0) {
-    portsArr.forEach((bg) => {
-      // go through each port object (each Reactime instance)
-      bg.postMessage({
-        // send passed in action object as a message to the current port
-        action: 'changeTab',
-        payload: { tabId: activeTab.id, title: activeTab.title },
-      });
-    });
-  }
+  // 12.20.23 commenting out, possible culprit of many in no target bug
+  // if (portsArr.length > 0) {
+  //   portsArr.forEach((bg) => {
+  //     // go through each port object (each Reactime instance)
+  //     bg.postMessage({
+  //       // send passed in action object as a message to the current port
+  //       action: 'changeTab',
+  //       payload: { tabId: activeTab.id, title: activeTab.title },
+  //     });
+  //   });
+  // }
 
   // JR: CONSIDER DELETING
   if (Object.keys(tabsObj).length > 0) {
@@ -198,7 +199,7 @@ chrome.runtime.onConnect.addListener((port) => {
     }
   });
 
-  // FROM FRONTEND TO BACKGROUND
+  // INCOMING MESSAGE FROM FRONTEND (MainContainer) TO BACKGROUND.js
   // listen for message containing a snapshot from devtools and send it to contentScript -
   // (i.e. they're all related to the button actions on Reactime)
   port.onMessage.addListener((msg) => {
@@ -269,7 +270,7 @@ chrome.runtime.onConnect.addListener((port) => {
   });
 });
 
-// FROM CONTENT SCRIPT TO BACKGROUND
+// INCOMING MESSAGE FROM CONTENT SCRIPT TO BACKGROUND.JS
 // 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, request);
@@ -471,6 +472,7 @@ chrome.tabs.onActivated.addListener((info) => {
       activeTab = tab;
       console.log('tabs.onActivated info: ', info);
       console.log('activeTab: ', activeTab);
+      console.log('tabs.onActivated portsArr: ', portsArr);
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>
           bg.postMessage({
@@ -509,21 +511,20 @@ chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
   // // this would allow you to split your screen, keep the browser open on the right side, and reactime always opens at the top left corner.
   // // currently, invokedScreenLeft is the left of the invoked window. To get around the issue of reactime covering the refresh button (currently needed for debugging as of 12.19.23), added a vertical offset, topOffset.
   // // this just pushes the top down by a fixed amount that is enough to surpass most people's bookmarks bar.
-  chrome.system.display.getInfo((displayUnitInfo) => {
-    console.log(displayUnitInfo);
-  });
+  // chrome.system.display.getInfo((displayUnitInfo) => {
+  //   console.log(displayUnitInfo);
+  // });
 
   chrome.windows.getCurrent((window) => {
-    // const topOffset = 0; // use to push top down to approximately the start of the viewport (for easy access to refresh button)
     const invokedScreenHeight = window.height || 1000;
     const invokedScreenTop = window.top || 0;
     const invokedScreenLeft = -400;
     const options = {
       type: 'panel',
       left: invokedScreenLeft,
-      top: invokedScreenTop, // + topOffset,
+      top: invokedScreenTop,
       width: 1000,
-      height: invokedScreenHeight, //  - topOffset,
+      height: invokedScreenHeight,
       url: chrome.runtime.getURL('panel.html'),
     };
     if (menuItemId === 'reactime') chrome.windows.create(options);

src/extension/contentScript.ts

@@ -10,6 +10,7 @@ let firstMessage = true;
 // Listens for window messages (from the injected script on the DOM)
 let isRecording = true;
 
+// INCOMING MESSAGE FROM BACKEND (index.ts) TO CONTENT SCRIPT
 window.addEventListener('message', (msg) => {
   // Event listener runs constantly based on actions
   // recorded on the test application from backend files (linkFiber.ts).
@@ -38,6 +39,7 @@ window.addEventListener('message', (msg) => {
   }
 });
 
+// FROM BACKGROUND TO CONTENT SCRIPT
 // Listening for messages from the UI of the Reactime extension.
 chrome.runtime.onMessage.addListener((request) => {
   const { action }: { action: string } = request;
@@ -63,8 +65,15 @@ chrome.runtime.onMessage.addListener((request) => {
 // To learn more about Chrome web vitals, see https://web.dev/vitals/.
 const metrics = {};
 const gatherMetrics = ({ name, value }) => {
+  console.log(
+    'contentScript gatherMetrics: prior metrics Obj: ',
+    metrics,
+    'name: ',
+    name,
+    'value: ',
+    value,
+  );
   metrics[name] = value;
-
   chrome.runtime.sendMessage({
     type: 'performance:metric',
     name,