firefox uses new panel, has slightly better styling

Author: jaredly

shells/firefox/data/panel.html

@@ -21,6 +21,10 @@
                 right: 0;
                 bottom: 0;
                 background-color: white;
+                font-family: sans-serif;
+            }
+            #container h1 {
+                margin: 20px auto;
             }
             #logs {
                 position: fixed;

shells/firefox/main/ReactPanel.js

@@ -39,19 +39,20 @@ const ReactPanel = Class({
     const panelSide = channel.port2;
 
     addonSide.onmessage = function (evt) {
-      // console.log('from panel', evt.data);
       worker.port.emit('message', evt.data);
     };
     worker.port.on('message', function (data) {
-      // console.log('to panel', data);
       addonSide.postMessage(data);
     });
     worker.port.on('hasReact', function (hasReact) {
+      addonSide.postMessage({hasReact});
+      /*
       addonSide.postMessage({
         type: 'event',
         evt: 'hasReact',
         data: hasReact,
       });
+      */
     });
     worker.on('error', function (error) {
       console.log('More Error!!', error);

shells/firefox/panel/Panel.js

@@ -10,21 +10,53 @@
  */
 'use strict';
 
-var Panel = require('./Panel');
+var globalHook = require('../../../backend/GlobalHook');
+globalHook(window);
+
+var Panel = require('../../../frontend/Panel');
 var React = require('react');
 
 var node = document.getElementById('container');
 node.innerHTML = '<h1>Connecting to devtools</h1>';
-var port;
+var port = {};
 
 function reload() {
   React.unmountComponentAtNode(node);
   node.innerHTML = '';
-  React.render(<Panel port={port} reload={reload} />, node);
+  React.render(<Panel alreadyFoundReact={true} {...config} />, node);
 }
 
 window.addEventListener('message', function (evt) {
   port = evt.ports[0];
-  React.render(<Panel port={port} reload={reload} />, node);
+  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 config = {
+  reload,
+  // checkForReact,
+  inject(done) {
+    var disconnected = false;
+
+    var wall = {
+      listen(fn) {
+        port.onmessage = evt => {
+          fn(evt.data);
+        };
+      },
+      send(data) {
+        if (disconnected) {
+          return;
+        }
+        port.postMessage(data);
+      },
+    };
+    done(wall);
+  },
+};
+