imporve popup data flow

Author: deeppatel234

extensions/chrome/background/background.js

@@ -8,7 +8,10 @@ chrome.runtime.onConnect.addListener(port => {
     if (message.type === "REACT_CONTEXT_DEVTOOL_INIT") {
       connections[message.tabId] = port;
       if (catchData[message.tabId]) {
-        port.postMessage(getCatchData(message.tabId));
+        port.postMessage({
+          type: 'REACT_CONTEXT_DEVTOOL_DEVPANEL_DATA',
+          data: getCatchData(message.tabId),
+        });
       }
       return;
     }
@@ -39,29 +42,39 @@ chrome.tabs.onRemoved.addListener(tabId => {
 chrome.runtime.onMessage.addListener((request, sender) => {
   if (request.type === 'REACT_CONTEXT_DEVTOOL_DETECTED') {
     setAppPopup(true, sender.tab.id);
-    return;
+    return true;
   }
 
   if (request.type === 'REACT_CONTEXT_DEVTOOL_POPUP_DATA_REQUEST') {
-    chrome.runtime.sendMessage({
-      type: 'REACT_CONTEXT_DEVTOOL_POPUP_DATA',
-      data: getCatchData(request.tabId),
-    });
+    sendMessageToPopup(request.tabId);
     return true;
   }
   if (request.type === 'REACT_CONTEXT_DEVTOOL_DATA' && sender.tab) {
     const tabId = sender.tab.id;
     saveCatchData(request.data, sender.tab);
-    if (tabId in connections) {
-      connections[tabId].postMessage({
-        type: 'REACT_CONTEXT_DEVTOOL_DEVPANEL_DATA',
-        data: getCatchData(tabId),
-      });
-    }
+    sendMessageToDevPanel(tabId);
+    sendMessageToPopup(tabId);
   }
   return true;
 });
 
+const sendMessageToPopup = tabId => {
+  chrome.runtime.sendMessage({
+    type: 'REACT_CONTEXT_DEVTOOL_POPUP_DATA',
+    data: getCatchData(tabId),
+    tabId,
+  });
+};
+
+const sendMessageToDevPanel = tabId => {
+  if (tabId in connections) {
+    connections[tabId].postMessage({
+      type: 'REACT_CONTEXT_DEVTOOL_DEVPANEL_DATA',
+      data: getCatchData(tabId),
+    });
+  }
+};
+
 const saveCatchData = (dataToCatch, { id: tabId, title }) => {
   if (!catchData[tabId]) {
     catchData[tabId] = {
@@ -84,8 +97,6 @@ const saveCatchData = (dataToCatch, { id: tabId, title }) => {
 
   catchData[tabId].context[id].oldValue = catchData[tabId].context[id].newValue;
   catchData[tabId].context[id].newValue = dataToCatch;
-
-  console.log(catchData);
 };
 
 const getCatchData = tabId => {

src/components/DiffView/index.js

@@ -30,7 +30,7 @@ const DiffView = ({ oldValue, data }) => {
         splitView={false}
         hideLineNumbers
         styles={newStyles}
-        extraLinesSurroundingDiff={Infinity}
+        extraLinesSurroundingDiff={500}
         renderContent={highlightSyntax}
       />
     </DiffViewWrapper>

src/devpanel.index.js

@@ -27,7 +27,6 @@ const DevPanel = () => {
 
   const onMessage = message => {
     if (message.type === 'REACT_CONTEXT_DEVTOOL_DEVPANEL_DATA') {
-      console.log("message from devpanel", message);
       setAppData(message.data);
     }
   };

src/popup.index.js

@@ -5,18 +5,24 @@ import ReactDOM from "react-dom";
 import App from "./App";
 
 const registerTab = onMessage => {
+  let tabId = null;
+
   chrome.runtime.onMessage.addListener(function(message) {
-    console.log(message);
-    if (message.type === "REACT_CONTEXT_DEVTOOL_POPUP_DATA") {
+    if (
+      message.type === "REACT_CONTEXT_DEVTOOL_POPUP_DATA" &&
+      tabId &&
+      tabId === message.tabId
+    ) {
       onMessage(message.data);
     }
   });
 
   chrome.tabs.query({ active: true, currentWindow: true }, tab => {
+    tabId = tab[0].id;
     chrome.runtime.sendMessage({
-      type: 'REACT_CONTEXT_DEVTOOL_POPUP_DATA_REQUEST',
-      tabId: tab[0].id
-    })
+      type: "REACT_CONTEXT_DEVTOOL_POPUP_DATA_REQUEST",
+      tabId
+    });
   });
 };
 
@@ -28,7 +34,6 @@ const DevPanel = () => {
   }, []);
 
   const onMessage = message => {
-    console.log("message from popup", message);
     setAppData(message);
   };