more logs. Got the extension to load on the same tab as the one that invoked it.

Author: jrosengrant

src/app/components/Diff.tsx

@@ -80,13 +80,16 @@ function Diff(props: DiffProps): JSX.Element {
     return newObj; // return the cleaned state snapshot(s)
   };
 
-  console.log('previousDisplay before stateless cleaning: ', previous);
+  // console.log('previousDisplay before stateless cleaning: ', previous);
   const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
-  console.log('previousDisplay after stateless cleaning: ', previousDisplay);
+
+  // console.log('previousDisplay after stateless cleaning: ', previousDisplay);
   const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
-  console.log('delta: ', delta);
+
+  // console.log('delta: ', delta);
   const html: StatelessCleaning = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
-  console.log('html: ', html);
+
+  // console.log('html: ', html);
 
   console.log(show);
   console.log(formatters.html.showUnchanged());

src/app/components/SwitchApp.tsx

@@ -46,12 +46,8 @@ const SwitchAppDropdown = (): JSX.Element => {
       classNamePrefix='tab-select'
       value={currTab}
       styles={customStyles}
-      onInputChange={(inputValue, { action }): void => {
-        console.log('onInputChange action', action);
-        if (action === 'set-value') {
-          console.log('Option selected: ', inputValue);
-          // dispatch(setTab(parseInt(e.value, 10)));
-        }
+      onChange={(e): void => {
+        dispatch(setTab(parseInt(e.value, 10)));
       }}
       options={tabsArray}
     />

src/app/components/theme.ts

@@ -2,7 +2,7 @@ import { createTheme } from '@mui/material/styles';
 const theme = createTheme({
   palette: {
     primary: {
-      main: '#8Fb5f9',
+      main: '#b2f7a1',
     },
     secondary: {
       main: '#BF6DD2',

src/app/slices/mainSlice.ts

@@ -127,7 +127,7 @@ export const mainSlice = createSlice({
     setTab: (state, action) => {
       const { tabs, currentTab } = state;
       const { mode } = tabs[currentTab] || {};
-      console.log('mainSlice. mode: ', mode, 'payload: ', action.payload);
+      console.log('mainSlice setTab, mode: ', mode, 'payload: ', action.payload);
       if (!mode?.paused) {
         if (typeof action.payload === 'number') {
           state.currentTab = action.payload;
@@ -176,7 +176,19 @@ export const mainSlice = createSlice({
 
     changeView: (state, action) => {
       const { tabs, currentTab } = state;
+      console.log(
+        'changeView tabs: ',
+        tabs,
+        'currentTab: ',
+        currentTab,
+        'tabs[currentTab]: ',
+        tabs[currentTab],
+      );
+      console.log(tabs);
+      console.log('changeView state: ', state);
       const { viewIndex } = tabs[currentTab] || {};
+      console.log('changeView viewIndex: ', viewIndex);
+      console.log('changeView action.payload: ', action.payload);
       // unselect view if same index was selected
       tabs[currentTab].viewIndex = viewIndex === action.payload ? -1 : action.payload;
     },

src/extension/background.js

@@ -1,6 +1,8 @@
 // Import snapshots from "../app/components/snapshots".
 // import 'core-js';
 
+import { invoke } from 'lodash';
+
 // Store ports in an array.
 const portsArr = [];
 const reloaded = {};
@@ -62,6 +64,7 @@ class Node {
     tabObj.index += 1;
     // continues the order of number of states changed from that parent
     tabObj.currParent += 1;
+    console.log('new Node tabObj: ', tabObj);
     this.name = tabObj.currParent;
     // marks from what branch this node is originated
     this.branch = tabObj.currBranch;
@@ -162,6 +165,7 @@ chrome.runtime.onConnect.addListener((port) => {
   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) => {
@@ -491,14 +495,34 @@ chrome.runtime.onInstalled.addListener(() => {
 
 // when context menu is clicked, listen for the menuItemId,
 // if user clicked on reactime, open the devtools window
+
+// JR 12.19.23
+// As of V22, if multiple monitors are used, it would open the reactime panel on the other screen, which was inconvenient when opening repeatedly for debugging.
+// V23 fixes this by making use of chrome.windows.getCurrent to get the top and left of the screen which invoked the extension.
+// The reason you must use chrome.windows.getCurrent is that as of chrome manifest V3, background.js is a 'service worker', which does not have access to the DOM or to the native 'window' method.
+// chrome.windows.getCurrent allows us to still get the window from within a service worker. It returns a promise (asynchronous), so all resulting functionality must happen in the callback function,
+// or it will run before 'invokedScreen' variables have been captured.
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
-  const options = {
-    type: 'panel',
-    left: 0,
-    top: 0,
-    width: 1000,
-    height: 1000,
-    url: chrome.runtime.getURL('panel.html'),
-  };
-  if (menuItemId === 'reactime') chrome.windows.create(options);
+  console.log('background ext screenX', chrome.windows.getCurrent());
+
+  chrome.system.display.getInfo((displayUnitInfo) => {
+    console.log(displayUnitInfo);
+  });
+
+  let invokedScreenTop = 0;
+  let invokedScreenLeft = 0;
+  chrome.windows.getCurrent((window) => {
+    invokedScreenTop = window.top + 300 || 0;
+    console.log('invokedTop', invokedScreenTop);
+    invokedScreenLeft = window.left || 0;
+    const options = {
+      type: 'panel',
+      left: invokedScreenLeft,
+      top: invokedScreenTop,
+      width: 1000,
+      height: 1000,
+      url: chrome.runtime.getURL('panel.html'),
+    };
+    if (menuItemId === 'reactime') chrome.windows.create(options);
+  });
 });

src/extension/build/manifest.json

@@ -24,6 +24,6 @@
       "matches": ["<all_urls>"]
     }
   ],
-  "permissions": ["contextMenus", "tabs", "activeTab", "scripting"],
+  "permissions": ["contextMenus", "tabs", "activeTab", "scripting", "system.display"],
   "host_permissions": ["<all_urls>"]
 }

src/extension/build/panel.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Reactime 22.0</title>
+    <title>Reactime 23.0</title>
   </head>
 
   <body>

typedoc.json

@@ -3,5 +3,5 @@
   "out": "docs",
   "includes": ["./src/backend"],
   "exclude": ["**/__tests__/**", "**/**/**/build/**", "**/types/**"],
-  "name": "Reactime 21.0"
+  "name": "Reactime 23.0"
 }