[firefox] make devtools reload on page navigate

Author: jaredly

shells/firefox/main/ReactPanel.js

@@ -28,33 +28,48 @@ const ReactPanel = Class({
     // this.debuggee = null;
   },
   onReady() {
-    var tabs = require('sdk/tabs');
-    var worker = tabs.activeTab.attach({
-      contentScriptFile: 'build/contentScript.js',
-    });
+    const tabs = require('sdk/tabs');
+    let worker = makeWorker();
 
     const { MessageChannel } = require('sdk/messaging');
     const channel = new MessageChannel();
     const addonSide = channel.port1;
     const panelSide = channel.port2;
 
+    function makeWorker() {
+      let worker = tabs.activeTab.attach({
+        contentScriptFile: 'build/contentScript.js',
+      });
+      worker.port.on('message', function (data) {
+        addonSide.postMessage(data);
+      });
+      worker.port.on('hasReact', function (hasReact) {
+        metaAddonSide.postMessage({type: 'hasReact', val: hasReact});
+      });
+      worker.on('error', function (error) {
+        console.log('More Error!!', error);
+      });
+      worker.port.on('error', function (error) {
+        console.log('Error!!', error);
+      });
+      return worker;
+    }
+
     addonSide.onmessage = function (evt) {
       worker.port.emit('message', evt.data);
     };
-    worker.port.on('message', function (data) {
-      addonSide.postMessage(data);
-    });
-    worker.port.on('hasReact', function (hasReact) {
-      addonSide.postMessage({hasReact});
-    });
-    worker.on('error', function (error) {
-      console.log('More Error!!', error);
-    });
-    worker.port.on('error', function (error) {
-      console.log('Error!!', error);
+
+    const metaChannel = new MessageChannel();
+    const metaAddonSide = metaChannel.port1;
+    const metaPanelSide = metaChannel.port2;
+
+    let mainPort = this.port;
+    tabs.activeTab.on('pageshow', function () {
+      metaAddonSide.postMessage('show');
+      worker = makeWorker();
     });
 
-    this.postMessage('port', [panelSide]);
+    this.postMessage('port', [panelSide, metaPanelSide]);
     console.log('Panel ready');
   },
 });

shells/firefox/panel/run.js

@@ -28,11 +28,16 @@ function reload() {
 
 window.addEventListener('message', function (event) {
   port = event.ports[0];
-  port.onmessage = evt => {
-    if (evt.data.hasReact === true) {
-      React.render(<Panel alreadyFoundReact={true} {...config} />, node);
-    } else {
-      node.innerHTML = '<h1>No react found on page...</h1>';
+  var metaPort = event.ports[1];
+  metaPort.onmessage = evt => {
+    if (evt.data === 'show') {
+      reload();
+    } else if (evt.data.type === 'hasReact') {
+      if (evt.data.val) {
+        React.render(<Panel alreadyFoundReact={true} {...config} />, node);
+      } else {
+        node.innerHTML = '<h1>No react found on page...</h1>';
+      }
     }
   };
 });

shells/firefox/src/backend.js

@@ -16,6 +16,13 @@ var setupHighlighter = require('../../../frontend/Highlighter/setup');
 
 var inject = require('../../../agent/inject');
 
+// This is the case when the page has been loaded from cache, and so there's
+// already a reactDevtoolsAgent active. We need to kill it before we start.
+if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent) {
+  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.emit('shutdown');
+  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.emit('shutdown');
+}
+
 // TODO: check to see if we're in RN before doing this?
 setInterval(function () {
   // this is needed to force refresh on react native

shells/firefox/src/contentScript.js

@@ -22,26 +22,30 @@ if (Object.keys(unsafeWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length)
   self.port.emit('hasReact', false);
 }
 
+function connectToBackend() {
+  self.port.on('message', function (payload) {
+    window.postMessage({
+      source: 'react-devtools-reporter',
+      payload: payload
+    }, '*');
+  });
+
+  window.addEventListener('message', function (evt) {
+    if (!evt.data || evt.data.source !== 'react-devtools-bridge') {
+      return;
+    }
+
+    self.port.emit('message', evt.data.payload);
+  });
+}
+
 function injectBackend() {
   var node = document.createElement('script');
 
   node.onload = function () {
     window.postMessage({source: 'react-devtools-reporter'}, '*');
 
-    self.port.on('message', function (payload) {
-      window.postMessage({
-        source: 'react-devtools-reporter',
-        payload: payload
-      }, '*');
-    });
-
-    window.addEventListener('message', function (evt) {
-      if (!evt.data || evt.data.source !== 'react-devtools-bridge') {
-        return;
-      }
-
-      self.port.emit('message', evt.data.payload);
-    });
+    connectToBackend();
     node.parentNode.removeChild(node);
   };