bookmarklet opens collusion graph as an embedded 'picture-in-picture'…

… style iframe.
toolness · Feb 12, 2012 · 962f200 · 962f200
1 parent a748b19
commit 962f200
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 29 deletions.
diff --git a/website/bookmarklet/bookmarklet.js b/website/bookmarklet/bookmarklet.js
@@ -47,7 +47,10 @@ var CollusionGraphBookmarklet = (function() {
         domains.push(domain);
     }
 
-    function addSrc(node) { add(node.src); }
+    function addSrc(node) {
+      if (node.className != "collusion-bookmarklet")
+        add(node.src);
+    }
 
     exports.forEach("iframe", addSrc);
     exports.forEach(document.scripts, addSrc);
@@ -76,38 +79,36 @@ var CollusionGraphBookmarklet = (function() {
   };
 
   exports.makeLinkToGraph = function(baseURI) {
-    var link = document.createElement('div');
+    function sendGraphOnReady(target) {
+      window.addEventListener("message", function(event) {
+        if (event.source == target) {
+          target.postMessage(JSON.stringify(graph), "*");
+        }
+      });
+    }
+
+    var link = document.createElement('iframe');
     var graph = exports.makeGraphJSON();
 
+    link.setAttribute("src", baseURI + "../index.html?graph_url=parent");
+    link.setAttribute("scrolling", "no");
     document.documentElement.appendChild(link);
-
-    link.textContent = "Click here for a collusion graph of this page.";
+    sendGraphOnReady(link.contentWindow);
+
     link.style.position = "fixed";
     link.style.bottom = "0px";
-    link.style.left = "0px";
-    link.style.color = "white";
-    link.style.backgroundColor = "black";
-    link.style.padding = "10px";
-    link.style.textDecoration = "none";
-    link.style.fontFamily = "sans-serif";
-    link.style.fontSize = "large";
+    link.style.right = "0px";
+    link.style.width = "640px";
+    link.style.height = "480px";
     link.style.zIndex = 99999999;
     link.style.cursor = "pointer";
-    link.onclick = function() {
-      var collusion = window.open(baseURI + "../index.html?graph_url=opener");
-      window.addEventListener("message", function(event) {
-        if (event.source == collusion) {
-          collusion.postMessage(JSON.stringify(graph), "*");
-        }
-      });
-    };
+    link.style.border = "none";
   };
 
   (function maybeInitBookmarklet() {
     var script = document.querySelector("script.collusion-bookmarklet");
 
     if (script) {
-      console.log('YAY');
       var src = script.getAttribute("src");
       var baseURI = src.match(/(.*)bookmarklet\.js$/)[1];
       if (window.console && window.console.log)

diff --git a/website/index.html b/website/index.html
@@ -99,11 +99,18 @@ <h2 class="domain"></h2>
   }
 }
 
+function updateGraphViaPostMessage(graph, target) {
+  target.postMessage("ready", "*");
+  $(window).one("message", function(event) {
+    graph.update(JSON.parse(event.originalEvent.data));
+  });
+}
+
 $(window).ready(function() {
   var addon = CollusionAddon;
   var graphUrl = getQueryVariable("graph_url");
 
-  if (addon.isInstalled())
+  if (addon.isInstalled() || graphUrl == "parent")
     $(".exposition").hide();
 
   // get list of known trackers from trackers.json file hosted on website:
@@ -138,15 +145,14 @@ <h2 class="domain"></h2>
 
     if (graphUrl) {
       if (graphUrl == "opener") {
-        window.opener.postMessage("ready", "*");
-        $(window).one("message", function(event) {
-          graph.update(JSON.parse(event.originalEvent.data));
+        updateGraphViaPostMessage(graph, window.opener);
+      } else if (graphUrl == "parent") {
+
+        updateGraphViaPostMessage(graph, window.parent);
+      } else
+        jQuery.getJSON(graphUrl, function(data) {
+          graph.update(data);
         });
-        return;
-      }
-      jQuery.getJSON(graphUrl, function(data) {
-        graph.update(data);
-      });
       return;
     }