Drawing kind of works

data/content-script.js

@@ -5,53 +5,31 @@
 // mutable so we use unsafeWindow below. This handles the post message
 // connections and does a little UI work on the side.
 self.port.on('connection', function(connection) {
-    if (unsafeWindow && unsafeWindow.aggregate) {
-        global.allConnections.push(connection);
-        unsafeWindow.aggregate.emit('connection', connection);
-    } else {
-        console.log('cannot call unsafeWindow.aggregate: ' + unsafeWindow);
-    }
+    global.allConnections.push(connection);
+    global.aggregate.emit('connection', connection);
 });
 
 self.port.on('passStoredConnections', function(connections) {
     global.allConnections = connections;
-    if (unsafeWindow) {
-        unsafeWindow.aggregate.emit('load', global.allConnections);
-    }
+    global.aggregate.emit('load', global.allConnections);
 });
 
 self.port.on('update-blocklist', function(domain) {
-    if (unsafeWindow && unsafeWindow.aggregate) {
-        unsafeWindow.aggregate.emit('update-blocklist', domain);
-    } else {
-        console.log('cannot call unsafeWindow.aggregate to update blocklist: ' + unsafeWindow);
-    }
+    global.aggregate.emit('update-blocklist', domain);
 });
 
 self.port.on('update-blocklist-all', function(domains) {
-    if (unsafeWindow && unsafeWindow.aggregate) {
-        unsafeWindow.aggregate.emit('update-blocklist-all', domains);
-    } else {
-        console.log('cannot call unsafeWindow.aggregate to update blocklist: ' + unsafeWindow);
-    }
+    global.aggregate.emit('update-blocklist-all', domains);
 });
 
 self.port.on('init', function() {
     console.log('content-script::init()');
-    if (unsafeWindow && unsafeWindow.aggregate && !unsafeWindow.aggregate.initialized) {
-        unsafeWindow.aggregate.emit('load', global.allConnections);
-    } else {
-        console.error('cannot call unsafeWindow.aggregate: %s', unsafeWindow);
-    }
+    global.aggregate.emit('load', global.allConnections);
 });
 
 self.port.on("setPrefs", function(prefs) {
   console.log("Got set prefs", prefs);
-  if (unsafeWindow && unsafeWindow.aggregate) {
-    unsafeWindow.aggregate.emit("setPrefs", prefs);
-  } else {
-    console.error("cannot call aggregate.setPrefs");
-  }
+  global.aggregate.emit("setPrefs", prefs);
 });
 try {
     unsafeWindow.addon = self.port;

data/index.html

@@ -463,22 +463,5 @@
     </div>
     <div id="tooltip"></div>
 
-    <script src="d3.v3.min.js"></script>
-    <script src="events.js" type="application/javascript;version=1.8"></script>
-    <script src="infobar.js" type="application/javascript;version=1.8"></script>
-    <script src="lightbeam.js" type="application/javascript;version=1.8"></script>
-    <script src="svgdataset.js" type="application/javascript;version=1.8"></script>
-    <script src="aggregate.js" type="application/javascript;version=1.8"></script>
-    <!-- from https://github.com/Nycto/PicoModal -->
-    <script src="picoModal-1.0.0.min.js"></script>
-    <script src="tooltip.js" type="application/javascript;version=1.8"></script>
-    <script src="dialog.js" type="application/javascript;version=1.8"></script>
-    <script src="ui.js" type="application/javascript;version=1.8"></script>
-    <!-- Map -->
-    <script src="parseuri.js" type="application/javascript;version=1.8"></script>
-    <!-- Visualizations -->
-    <script src="clock.js" type="application/javascript;version=1.8"></script>
-    <script src="graph.js" type="application/javascript;version=1.8"></script>
-    <script src="list.js" type="application/javascript;version=1.8"></script>
 </body>
 </html>

data/lightbeam.js

@@ -43,7 +43,7 @@ global.allConnections = allConnections;
 
 // DOM Utility
 
-function elem(name, attributes, children){
+global.elem = function elem(name, attributes, children){
    // name is the tagName of an element
    // [optional] attributes can be null or undefined, or an object of key/values to setAttribute on, attribute values can be functions to call to get the actual value
    // [optional] children can be an element, text or an array (or null or undefined). If an array, can contain strings or elements
@@ -88,7 +88,7 @@ function elem(name, attributes, children){
 
 window.addEventListener('load', function(evt){
     console.log('window onload');
-    addon.emit('uiready');
+    self.port.emit('uiready');
     // Wire up events
     document.querySelector('[data-value=Graph]').setAttribute("data-selected", true);
     var visualizationName = "graph";
@@ -101,7 +101,7 @@ function initCap(str){
     return str[0].toUpperCase() + str.slice(1);
 }
 
-function switchVisualization(name){
+global.switchVisualization = function switchVisualization(name){
     // var startTime = Date.now();
     console.log('switchVisualizations(' + name + ')');
     if (currentVisualization != visualizations[name]) {
@@ -110,7 +110,7 @@ function switchVisualization(name){
     currentVisualization = visualizations[name];
     resetAdditionalUI();
     currentVisualization.emit('init');
-    addon.emit("prefChanged", { defaultVisualization: name });
+    self.port.emit("prefChanged", { defaultVisualization: name });
     // console.log('it took %s ms to switch visualizations', Date.now() - startTime);
 }
 
@@ -181,7 +181,7 @@ function singularOrPluralNoun(num,str){
 global.updateStatsBar = function updateStatsBar(){
     var dateSince = "just now";
     if (global.allConnections.length > 0 ){
-        dateSince = formattedDate(allConnections[0][2]);
+        dateSince = formattedDate(global.allConnections[0][2]);
     }
     document.querySelector(".top-bar .date-gathered").textContent = dateSince;
     document.querySelector(".top-bar .third-party-sites").textContent = aggregate.trackerCount + " " + singularOrPluralNoun(aggregate.trackerCount,"THIRD PARTY SITE"); 

data/ui.js

@@ -363,7 +363,7 @@ global.connectedNodeEffect = function connectedNodeEffect(name){
 }
 
 // for Graph & Clock
-globa..addGlow = function addGlow(name,type){
+global.addGlow = function addGlow(name,type){
     type = ( type == "selected") ? "selected-glow" : "connected-glow";
     var viz = global.currentVisualization.name;
     var gNodes = document.querySelectorAll(".node[data-name='"+name+"']");

lib/main.js

@@ -2,6 +2,7 @@
 
 const events = require("sdk/system/events");
 const { PageMod } = require("sdk/page-mod");
+const { data } = require("sdk/self");
 
 const { Connection, addConnection } = require('./connection');
 const tabEvents = require('./tab/events');
@@ -9,7 +10,6 @@ const ui = require('./ui');
 const persist = require("./persist");
 
 var tabs = require("sdk/tabs");
-var data = require("sdk/self").data;
 
 // This is the heart of Lightbeam, we get all of our data from observing these
 // requests.
@@ -26,7 +26,22 @@ events.on("http-on-examine-response", function(subject) {
 PageMod({
   include: ui.mainPage,
   contentScriptWhen: 'ready',
-  contentScriptFile: ui.contentScript,
+  contentScriptFile: [
+    data.url('content-script.js'),
+    data.url('d3.v3.min.js'),
+    data.url('events.js'),
+    data.url('infobar.js'),
+    data.url('lightbeam.js'),
+    data.url('svgdataset.js'),
+    data.url('aggregate.js'),
+    data.url('picoModal-1.0.0.min.js'),
+    data.url('tooltip.js'),
+    data.url('dialog.js'),
+    data.url('ui.js'),
+    data.url('parseuri.js'),
+    data.url('graph.js'),
+    data.url('list.js'),
+  ],
   onAttach: ui.attachToLightbeamPage
 });
 

lib/ui.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const tabs = require('sdk/tabs');
 const { data } = require("sdk/self");
+const tabs = require('sdk/tabs');
 const { isPrivate } = require("sdk/private-browsing");
 const { ContentPolicy } = require('shared/policy');
 const ss = require('sdk/simple-storage');
@@ -21,11 +21,9 @@ if (usingAustralis) {
 exports.usingAustralis = usingAustralis;
 
 const mainPage = data.url("index.html");
-const contentScript = data.url('content-script.js');
 var uiworker = null;
 
 exports.mainPage = mainPage;
-exports.contentScript = contentScript;
 exports.attachToLightbeamPage = attachToLightbeamPage;
 // These attach page workers to new tabs.
 exports.onForWorker = function(eventname, handler) {
@@ -39,8 +37,6 @@ exports.onForWorker = function(eventname, handler) {
 exports.emitForWorker = function(eventname, obj) {
   if (uiworker) {
     uiworker.port.emit(eventname, obj);
-  } else {
-    console.log('no uiworker to receive ' + eventname);
   }
 }