Merge branch 'c2_fresh_start' of https://github.com/mozilla/collusion into c2_fresh_start

data/clock.js

@@ -31,6 +31,7 @@ function onInit(connections){
     // draw clock dial
     console.log('initializing clock from %s connections', connections.length);
     vizcanvas = document.querySelector('.vizcanvas');
+    aggregate.emit('init', connections);
     times = ['12 am', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', '12 pm', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm', '12 am'];
     timeslots = {};
     offsets = [':00', ':15', ':30', ':45'];
@@ -39,6 +40,7 @@ function onInit(connections){
     });
     vizcanvas.setAttribute('viewBox', '-350 -495 700 500');
     drawTimes();
+    drawText();
     drawTimerHand();
     connections.forEach(function(connection){
         onConnection(connection);
@@ -48,6 +50,7 @@ function onInit(connections){
 function onConnection(connection){
     // A connection has the following keys:
     // source (url), target (url), timestamp (int), contentType (str), cookie (bool), sourceVisited (bool), secure(bool), sourcePathDepth (int), sourceQueryDepth(int)
+    aggregate.emit('connection', connection);
     var bucketIdx = timeToBucket(connection.timestamp);
     if (! clock.timeslots[bucketIdx]){
         var angle = -180 + (bucketIdx * 1.875); // in degrees
@@ -80,6 +83,7 @@ function onConnection(connection){
         // transform: 'rotate(90)',
         'class': 'tracker node',
         'data-target': connection.target,
+        'data-name': connection.target,
         'data-timestamp': connection.timestamp.toISOString(),
         'data-source': connection.source,
         'data-cookie': connection.cookie,
@@ -102,6 +106,7 @@ function onConnection(connection){
 
 function onRemove(){
     clearTimeout(handTimer);
+    clock.timeslots = {};
     resetCanvas();
 };
 
@@ -186,6 +191,29 @@ function drawTimes(){
     )});
 }
 
+function drawText(){
+    vizcanvas.appendChild(svg('text', {
+        x: 0,
+        y: -80,
+        'class': 'clock-time'
+    }, timeNow()));
+    vizcanvas.appendChild(svg('text', {
+        x: 0,
+        y: -40,
+        'class': 'clock-date'
+    }, dateNow()));
+}
+
+function timeNow(){
+    var d = new Date();
+    return (d.getHours() % 12) + ':' + d.getMinutes() + ['am','pm'][Math.round(d.getHours() / 12)];
+}
+
+function dateNow(){
+    return new Date().toLocaleFormat('%e %B %Y').trim();
+}
+
+
 clock.timeslots = new Array(96);
 
 function timeToBucket(timestamp){

data/collusion.js

@@ -1,14 +1,22 @@
 var visualizations = {};
+var currentVisualization;
 window.addEventListener('load', function(evt){
     // Wire up events
-    window.currentVisualization = visualizations.graph;
-    addon.emit('uiready');
-//    document.defaultView.postMessage('pageloaded', '*');
+    document.querySelector('.btn_group.visualization').click();
+    document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').click();
 });
 
+function initCap(str){
+    return str[0].toUpperCase() + str.slice(1);
+}
+
+
 function switchVisualization(name){
     if (currentVisualization === visualizations[name]) return;
-    currentVisualization.emit('remove');
+    localStorage.visualization = initCap(name);
+    if (currentVisualization){
+        currentVisualization.emit('remove');
+    }
     currentVisualization = visualizations[name];
     clearAllBubbles();
     addon.emit('uiready');

data/index.html

@@ -62,7 +62,7 @@
                 <div class="holder">
                     <h3 class="title"></h3>
                     <span class="url"></span>
-                    <span class="blue-text">You are currently browsing this site</span>
+                    <!--span class="blue-text">You are currently browsing this site</span-->
                     <header class="subhead">Location</header>
                     <div class="map-section">
                         <div><span id="country">&nbsp;</span></div>

data/infobar.js

@@ -10,7 +10,10 @@ document.querySelector('#content').addEventListener('click', function(event){
         while(node.mozMatchesSelector('.node *')){
             node = node.parentElement;
         }
+        console.log('svg node: %o, name: %s, data node: %s', node, node.getAttribute('data-name'), aggregate.nodeForKey(node.getAttribute('data-name')));
         updateInfo(aggregate.nodeForKey(node.getAttribute('data-name')));
+    }else{
+        console.log('does not match .node: %o', event.target);
     }
 },false);
 

data/list.js

@@ -22,7 +22,7 @@ list.on("remove", onRemove);
 
 
 function OnInit(connections){
-    console.log('initializing graph from %s connections', connections.length);
+    console.log('initializing list from %s connections', connections.length);
     vizcanvas = document.querySelector('.vizcanvas');
     // A D3 visualization has a two main components, data-shaping, and setting up the D3 callbacks
     aggregate.emit('load', connections);
@@ -49,13 +49,13 @@ function initGraph(){
     var table = document.createElement("table");
     table.classList.add("list-table");
     document.querySelector(".stage.list").appendChild(table);
- 
+
     var thead = document.createElement("thead");
     table.appendChild(thead);
     thead.appendChild(createRow(columns));
- 
+
     showFilteredTable(); // showing all data so no filter param is passed here
- 
+
     document.querySelector('.list-table').addEventListener('click', function(event){
         if (event.target.mozMatchesSelector('td')){
             showFilteredTable(event.target.parentNode.getAttribute('site-url'));
@@ -96,7 +96,7 @@ function showFilteredTable(filter){
     while ( document.querySelectorAll("table tbody").length > 0 ){
         table.removeChild(document.querySelector("table tbody"));
     }
- 
+
     table.appendChild(createBody("visited",filter));
     table.appendChild(createBody("third-party",filter));
 
@@ -128,15 +128,15 @@ function getNodes(filter){
         // check what's in the selected node's linkdedFrom array
         nodePicked.linkedFrom.forEach(function(key){
             var node = aggregate.nodeForKey(key);
-            addToList(node);          
+            addToList(node);
         });
         // check what's in the selected node's linkdedTo array
         nodePicked.linkedTo.forEach(function(key){
             var node = aggregate.nodeForKey(key);
-            addToList(node);  
+            addToList(node);
         });
     }
-    
+
     return filtered;
 }
 
@@ -167,6 +167,8 @@ function createRow(dataArray, type){
         row.appendChild(cell);
     });
     row.classList.add(type);
+    row.classList.add('node');
+    row.setAttribute('data-name', dataArray[1]);
     row.setAttribute("site-url", dataArray[1]);
 
     return row;

data/style.css

@@ -338,6 +338,24 @@ text {
     visibility: hidden;
 }
 
+.clock-time{
+    font-size: 24px;
+    font-weight: bold;
+    fill: #CCC;
+    visibility: visible;
+    stroke: none;
+    font-variant: normal;
+}
+
+.clock-date{
+    font-size: 28px;
+    font-weight: lighter;
+    fill: #CCC;
+    visibility: visible;
+    stroke: none;
+    font-variant: normal;
+}
+
 .tracker rect{
     visibility: hidden;
 }

data/ui.js

@@ -4,6 +4,7 @@ function toArray(nl){
     return Array.prototype.slice.call(nl, 0);
 }
 
+
 /* DOMContentLoaded event listener */
 window.addEventListener("DOMContentLoaded", function(){
 
@@ -41,8 +42,6 @@ window.addEventListener("DOMContentLoaded", function(){
             switch(val){
                 case 'clock':
                 case 'graph':
-                    switchVisualization(val);
-                    break;
                 case 'list':
                     switchVisualization(val);
                     break;