tons more console logs. Updated the SwitchApp.tsx to have a label for the toggleRecord button.

Author: jrosengrant

src/app/components/SwitchApp.tsx

@@ -4,6 +4,7 @@ import { setTab } from '../slices/mainSlice';
 //importing these methods for RTK
 import { useSelector, useDispatch } from 'react-redux';
 import { MainState, RootState } from '../FrontendTypes';
+import { current } from '@reduxjs/toolkit';
 
 /*
   This is the dropdown menu on the left column above the 'clear' button and the state snapshots list. It allows us to switch between which website/application we are currently working on.
@@ -17,7 +18,7 @@ const SwitchAppDropdown = (): JSX.Element => {
   const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
 
   const tabsArray: {}[] = []; // tabsArray is an empty array that will take objects as it's elements
-
+  console.log('switchAppDropdown; currentTab: ', currentTab, 'tabs: ', tabs);
   Object.keys(tabs).forEach((tab) => {
     // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.
     tabsArray.unshift({ value: tab, label: tabs[tab].title });
@@ -45,8 +46,12 @@ const SwitchAppDropdown = (): JSX.Element => {
       classNamePrefix='tab-select'
       value={currTab}
       styles={customStyles}
-      onChange={(e): void => {
-        dispatch(setTab(parseInt(e.value, 10)));
+      onInputChange={(inputValue, { action }): void => {
+        console.log('onInputChange action', action);
+        if (action === 'set-value') {
+          console.log('Option selected: ', inputValue);
+          // dispatch(setTab(parseInt(e.value, 10)));
+        }
       }}
       options={tabsArray}
     />

src/app/containers/ActionContainer.tsx

@@ -187,7 +187,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           </aside>
         </div>
         <a type='button' id='recordBtn' onClick={toggleRecord}>
-          <i />
+          <div style={{ display: 'flex', alignItems: 'center' }}>Toggle Record</div>
           {recordingActions ? <Switch defaultChecked /> : <Switch />}
         </a>
       </div>

src/app/containers/MainContainer.tsx

@@ -79,6 +79,7 @@ function MainContainer(): JSX.Element {
         break;
       }
       case 'changeTab': {
+        console.log('made it to the mainContainer dispatch');
         dispatch(setTab(payload));
         break;
       }
@@ -106,9 +107,12 @@ function MainContainer(): JSX.Element {
     // Connect ot port and assign evaluated result (obj) to currentPort
     const currentPort = chrome.runtime.connect();
 
+    // JR: why are we removing the listener just to readd it? logging here
+    console.log('messageListener before removing: ', messageListener);
     // If messageListener exists on currentPort, remove it
     while (currentPort.onMessage.hasListener(messageListener))
       currentPort.onMessage.removeListener(messageListener);
+    console.log('messageListener after removing: ', messageListener);
 
     // Add messageListener to the currentPort
     currentPort.onMessage.addListener(messageListener);

src/app/slices/mainSlice.ts

@@ -127,14 +127,15 @@ export const mainSlice = createSlice({
     setTab: (state, action) => {
       const { tabs, currentTab } = state;
       const { mode } = tabs[currentTab] || {};
-
+      console.log('mainSlice. mode: ', mode, 'payload: ', action.payload);
       if (!mode?.paused) {
         if (typeof action.payload === 'number') {
           state.currentTab = action.payload;
           return;
         } else if (typeof action.payload === 'object') {
           state.currentTab = action.payload.tabId;
           if (action.payload?.title) state.currentTitle = action.payload.title;
+          console.log('mainSlice setTab currentTitle: ', state.currentTitle);
           return;
         }
       }

src/extension/background.js

@@ -137,6 +137,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
 // Establishing incoming connection with Reactime.
 chrome.runtime.onConnect.addListener((port) => {
   /*
@@ -158,9 +159,10 @@ chrome.runtime.onConnect.addListener((port) => {
   
     Again, this port object is used for communication within your extension, not for communication with external ports or tabs in the Chrome browser. If you need to interact with specific tabs or external ports, you would use other APIs or methods, such as chrome.tabs or other Chrome Extension APIs.
   */
-
+  console.log('tabsObj onConnect: ', tabsObj);
   portsArr.push(port); // push each Reactime communication channel object to the portsArr
-
+  console.log('portsArr onConnect: ', portsArr);
+  // JR: CONSIDER DELETING
   if (portsArr.length > 0) {
     portsArr.forEach((bg) => {
       // go through each port object (each Reactime instance)
@@ -172,6 +174,7 @@ chrome.runtime.onConnect.addListener((port) => {
     });
   }
 
+  // JR: CONSIDER DELETING
   if (Object.keys(tabsObj).length > 0) {
     port.postMessage({
       action: 'initialConnectSnapshots',
@@ -191,6 +194,7 @@ chrome.runtime.onConnect.addListener((port) => {
     }
   });
 
+  // FROM FRONTEND TO BACKGROUND
   // 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) => {
@@ -261,9 +265,10 @@ chrome.runtime.onConnect.addListener((port) => {
   });
 });
 
+// FROM CONTENT SCRIPT TO BACKGROUND
 // 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);
+  console.log('background.js received message with action: ', request.action, request);
   // AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED: set Content
   if (request.type === 'SIGN_CONNECT') {
     return true;
@@ -460,6 +465,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('tabs.onActivated info: ', info);
       console.log('activeTab: ', activeTab);
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>