resolving merge issues

data/OpenSans.css

@@ -9,7 +9,7 @@
   font-family: 'Open Sans';
   font-style: bold;
   font-weight: 700;
-  src: url('font/OpenSans-Regular.ttf') format('truetype')
+  src: url('font/OpenSans-Bold.ttf') format('truetype')
 }
 
 @font-face {

data/aggregate.js

@@ -232,6 +232,7 @@ GraphNode.prototype.update = function(connection, isSource){
     if ( this.status.indexOf(connection.status) < 0 ){
         this.status.push(connection.status);
     }
+
     this.howMany++;
     if ( this.visitedCount/this.howMany == 1 ){
         this.nodeType = 'site';
@@ -254,12 +255,23 @@ function nodesSortedByDate(nodes){
         });
 }
 
-function edgesForNodes(nodes){
-    var edgemap = {};
-    nodes.forEach(function(node){
-        node.linkedFrom.forEach(function)
-    })
-}
+// function edgesForNodes(nodes){
+//     var edgemap = {};
+//     var edge;
+//     nodes.forEach(function(node){
+//         node.linkedFrom.forEach(function(linkname){
+//             edge = new GraphEdge(node, nodemap[linkname]);
+//             edgemap[edge.name] = edge;
+//         });
+//         node.linkedTo.forEach(function(linkname){
+//             edge = new GraphEdge(node, nodemap[linkname]);
+//             edgemap[edge.name] = edge;
+//         });
+//     });
+//     return Object.keys(edgemap).map(function(nodename){
+//         return edgemap[nodename];
+//     })
+// }
 
 function aggregateFromNodes(nodes){
     var localmap = {};
@@ -299,7 +311,7 @@ aggregate.filters = {
         // filter
         // find index where we go beyond date
         var i;
-        for (i = sortedNodes.length - 1; i > -1, i--){
+        for (i = sortedNodes.length - 1; i > -1; i--){
             if (sortedNodes[i].lastAccess < then){
                 break;
             }
@@ -317,7 +329,7 @@ aggregate.filters = {
         // filter
         // find index where we go beyond date
         var i;
-        for (i = sortedNodes.length - 1; i > -1, i--){
+        for (i = sortedNodes.length - 1; i > -1; i--){
             if (sortedNodes[i].lastAccess < then){
                 break;
             }
@@ -362,5 +374,8 @@ aggregate.filters = {
     }
 };
 
+var currentFilter = aggregate.filters[localStorage.currentFilter || 'last24Hours'];
+
+
 
 })(this);

data/clock.js

@@ -29,9 +29,18 @@ clock.on('remove', onRemove);
 
 function onInit(connections){
     console.log("= onInit = allConnections.length = %s" , allConnections.length);
-    // draw clock dial
     console.log('initializing clock from %s connections', connections.length);
-    aggregate.emit('init', connections);
+    drawClockFrame();
+    connections.forEach(function(connection){
+        onConnection(connection);
+    });
+    fadeEarlierTrackers(timeToBucket(new Date()));
+    if ( !statsBarInitiated ){  
+        updateStatsBar();
+    }
+};
+
+function drawClockFrame(){
     times = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
     timeAmPmLabels = [ 'AM', 'AM', 'AM', 'AM', 'AM', 'AM', 'AM', 'AM', 'AM', 'AM', 'AM', 'AM', 'PM', 'PM', 'PM', 'PM', 'PM', 'PM', 'PM', 'PM', 'PM', 'PM', 'PM', 'PM', 'AM' ]
     timeslots = {};
@@ -42,14 +51,7 @@ function onInit(connections){
     vizcanvas.setAttribute('viewBox', '-350 -515 700 530');
     drawTimes();
     updateTime();
-    connections.forEach(function(connection){
-        onConnection(connection);
-    });
-    fadeEarlierTrackers(timeToBucket(new Date()));
-    if ( !statsBarInitiated ){  
-        updateStatsBar();
-    }
-};
+}
 
 function onConnection(conn){
     console.log("= allConnections.length = %s" , allConnections.length);
@@ -115,12 +117,18 @@ function onConnection(conn){
 
 function appendNodeG(bucket,connection,nodeType){
     var classes = [ "node", nodeType ];
-    if ( nodeType == "source" && highlightSource ){
+    if ( nodeType == "source" && highlight.source ){
         classes.push("highlighted");
     }
-    if ( nodeType == "target" && highlightTarget ){
+    if ( nodeType == "target" && highlight.target ){
         classes.push("highlighted");
     }
+    if ( Object.keys(userSettings).indexOf(connection[nodeType]) > -1 && userSettings[connection[nodeType]].contains("watch") ){
+        classes.push("watched");
+    }
+    if ( Object.keys(userSettings).indexOf(connection[nodeType]) > -1 && userSettings[connection[nodeType]].contains("block") ){
+        classes.push("blocked");
+    }
 
     var g = svg('g', {
         'class': classes.join(" "),
@@ -179,7 +187,6 @@ function onRemove(){
 };
 
 
-
 function svg(name, attrs, text){
     var node = document.createElementNS(SVG_NS, name);
     if (attrs){
@@ -358,25 +365,91 @@ function updateTime(){
 }
 
 
+/* Visual Effect ===================================== */
+
+/* ********************
+*   When a node in the clock visualization is clicked,
+*       all instances of the same node across the day should be highlighted
+*       all colluded nodes should also be highlighted (differently)
+*/
+document.querySelector('#content').addEventListener('click', function(event){
+    if ( currentVisualization.name == "clock" ){
+        // click could happen on .node or an element inside of .node
+        if (event.target.mozMatchesSelector('.node, .node *')){
+            var node = event.target;
+            while(node.mozMatchesSelector('.node *')){
+                node = node.parentElement;
+            }
+            console.log(node);
+            applyHighlightingEffect(node.getAttribute("data-name"));
+        }
+    }
+},false);
+
+function highlightColludedNode(selection){
+    selection.each(function(){
+        var colludedNode = d3.select(this);
+        if ( colludedNode.classed("source") ){  // this instance of colluded node is a source node
+            colludedNode.classed("colluded-source", true);
+        }
+        if ( colludedNode.classed("target") ){ // this instance of colluded node is a target node
+            colludedNode.classed("colluded-target", true);
+        }
+    });
+}
+
+function applyHighlightingEffect(clickedNodeName){
+    // reset styling effect
+    d3.selectAll("g.node").classed("clicked-node", false)
+                          .classed("colluded-source", false)
+                          .classed("colluded-target", false);
+
+    // highlight all instances of the clicked node(both source and target)
+    d3.selectAll("g[data-name='" + clickedNodeName +"']")
+            .classed("clicked-node", true);
+
+    // find all the colluded sites and highlight all instances of them
+    for ( var key in aggregate.nodeForKey( clickedNodeName ) ){
+        if ( key != clickedNodeName ){
+            d3.selectAll("g[data-name='"+ key +"']").call(highlightColludedNode);
+        }
+    }
+
+}
+
 
 /* for Highlighting and Colouring -------------------- */
 
-var highlightSource = true;
-var highlightTarget = true;
+var highlight = {};
+highlight.source = true;
+highlight.target = true;
 var clockLegend = document.querySelector(".clock-footer");
 
 legendBtnClickHandler(clockLegend);
 
-clockLegend.querySelector(".toggle-visited").addEventListener("click", function(event){
+clockLegend.querySelector(".legend-toggle-visited").addEventListener("click", function(event){
     var visited = document.querySelectorAll(".source");
     toggleVizElements(visited,"highlighted");
-    highlightSource = !highlightSource;
+    highlight.source = !highlight.source;
 });
 
-clockLegend.querySelector(".toggle-target").addEventListener("click", function(event){
+clockLegend.querySelector(".legend-toggle-target").addEventListener("click", function(event){
     var targets = document.querySelectorAll(".target");
     toggleVizElements(targets,"highlighted");
-    highlightTarget = !highlightTarget;
+    highlight.target = !highlight.target;
+});
+
+clockLegend.querySelector(".legend-toggle-watched").addEventListener("click", function(event){
+    var watchedSites = document.querySelectorAll(".watched");
+    console.log(watchedSites);
+    toggleVizElements(watchedSites,"watchedSites");
+    highlight.watched = !highlight.watched;
+});
+
+clockLegend.querySelector(".legend-toggle-blocked").addEventListener("click", function(event){
+    var blockedSites = document.querySelectorAll(".blocked");
+    toggleVizElements(blockedSites,"blockedSites");
+    highlight.blocked = !highlight.blocked;
 });
 
 clockLegend.querySelector(".legend-toggle").addEventListener("click", function(event){

data/collusion.js

@@ -137,8 +137,6 @@ function switchVisualization(name){
 }
 
 
-var currentFilter = aggregate.filters[localStorage.currentFilter || 'last24Hours'];
-
 function switchFilter(name){
     console.log('switchFilter(' + name + ')');
     if (currentFilter && currentFilter === filters[name]) return;
@@ -153,8 +151,18 @@ function switchFilter(name){
 
 
 function resetAddtionalUI(){
-    // toggle off info panel, settings page
+    // toggle off info panel
     document.querySelector("#content").classList.remove("showinfo");
+    var activeTab = document.querySelector(".info-panel-controls ul li.active");
+    if ( activeTab ){ // make the active tab inactive, if any
+        activeTab.classList.remove("active");
+        activeTab.querySelector("img").classList.remove("hidden");
+        activeTab.querySelector("i").classList.add("hidden");
+    }
+    // hide all help sections
+    document.querySelector(".help-content .graph-view-help").classList.add("hidden");
+    document.querySelector(".help-content .clock-view-help").classList.add("hidden");
+    document.querySelector(".help-content .list-view-help").classList.add("hidden");
     // show vizcanvas again in case it is hidden
     document.querySelector(".vizcanvas").classList.remove("hide");
     // toggle footer section accordingly

data/graph.js

@@ -123,8 +123,8 @@ function initGraph(){
             .attr('x2', function(edge){ return edge.target.x; })
             .attr('y2', function(edge){ return edge.target.y; })
             .classed('cookieYes', function(edge){ return edge.cookieCount > 0; })
-            .classed('highlighted', function(edge){ return highlightConnections; })
-            .classed('coloured', function(edge){ return edge.cookieCount > 0 && highlightCookies; });
+            .classed('highlighted', function(edge){ return highlight.connections; })
+            .classed('coloured', function(edge){ return edge.cookieCount > 0 && highlight.cookies; });
         vis.selectAll('.node').call(updateNodes);
         var endDraw = Date.now();
         draws.push(endDraw - lastTick);
@@ -204,8 +204,7 @@ function updateNodes(thenodes){
     .classed('secureYes', function(node){ return node.secureCount > 0 })
     .classed('secureNo', function(node){ return node.secureCount == 0 })
     .attr('data-timestamp', function(node){ return node.lastAccess.toISOString(); })
-    .classed('highlighted', function(edge){ return ( edge.visitedCount > 0 ) ? highlightVisited : highlightNeverVisited; });
-    // change shape if needed
+    .classed('highlighted', function(edge){ return ( edge.visitedCount > 0 ) ? highlightVisited : highlightNeverVisited; });    // change shape if needed
 }
 
 // FIXME: Move this out of visualization so multiple visualizations can use it.
@@ -221,10 +220,13 @@ function resetCanvas(){
 
 /* for Highlighting and Colouring -------------------- */
 
-var highlightVisited = true;
-var highlightNeverVisited = true;
-var highlightConnections = true;
-var highlightCookies = false;
+var highlight = {};
+highlight.visited = true;
+highlight.neverVisited = true;
+highlight.connections = true;
+highlight.cookies = false;
+highlight.watched = false;
+highlight.blocked = false;
 var graphLegend = document.querySelector(".graph-footer");
 
 legendBtnClickHandler(graphLegend);
@@ -232,27 +234,40 @@ legendBtnClickHandler(graphLegend);
 graphLegend.querySelector(".toggle-visited").addEventListener("click", function(event){
     var visited = document.querySelectorAll(".visitedYes");
     toggleVizElements(visited,"highlighted");
-    highlightVisited = !highlightVisited;
+    highlight.visited = !highlight.visited;
 });
 
-graphLegend.querySelector(".toggle-never-visited").addEventListener("click", function(event){
+graphLegend.querySelector(".legend-toggle-never-visited").addEventListener("click", function(event){
     var neverVisited = document.querySelectorAll(".visitedNo");
     toggleVizElements(neverVisited,"highlighted");
-    highlightNeverVisited = !highlightNeverVisited;
+    highlight.neverVisited = !highlight.neverVisited;
 });
 
-graphLegend.querySelector(".toggle-connections").addEventListener("click", function(event){
+graphLegend.querySelector(".legend-toggle-connections").addEventListener("click", function(event){
     var cookiesConnections = document.querySelectorAll(".edge");
     toggleVizElements(cookiesConnections,"highlighted");
-    highlightConnections = !highlightConnections;
+    highlight.connections = !highlight.connections;
 });
 
-graphLegend.querySelector(".toggle-cookies").addEventListener("click", function(event){
+graphLegend.querySelector(".legend-toggle-cookies").addEventListener("click", function(event){
     var cookiesConnections = document.querySelectorAll(".cookieYes");
     toggleVizElements(cookiesConnections,"coloured");
-    highlightCookies = !highlightCookies;
+    highlight.cookies = !highlight.cookies;
 });
 
+graphLegend.querySelector(".legend-toggle-watched").addEventListener("click", function(event){
+    var watchedSites = document.querySelectorAll(".watched");
+    toggleVizElements(watchedSites,"watchedSites");
+    highlight.watched = !highlight.watched;
+});
+
+graphLegend.querySelector(".legend-toggle-blocked").addEventListener("click", function(event){
+    var blockedSites = document.querySelectorAll(".blocked");
+    toggleVizElements(blockedSites,"blockedSites");
+    highlight.blocked = !highlight.blocked;
+});
+
+
 graphLegend.querySelector(".legend-toggle").addEventListener("click", function(event){
     toggleLegendSection(event.target,graphLegend);
 });

data/index.html

@@ -12,7 +12,7 @@
         <aside class="controls">
             <header>
                 <div class="collusion-icon"></div>
-                <img class="logo" src="icons/collusion_wordmark_temp.png" />
+                <img class="logo" src="icons/Collusion---Wordmark-Beta.png" />
             </header>
             <div class="btn_group visualization">
                 <div data-view class="dropdown_button">
@@ -49,7 +49,7 @@
             </div>
             <div class="btn">
                 <a class="download">
-                    <img src="image/collusion_icon_save.png" />Download
+                    <img src="image/collusion_icon_download2.png" />Download
                 </a>
             </div>
             <div class="btn">
@@ -57,16 +57,6 @@
                     <img src="image/collusion_icon_reset.png" />Reset
                 </a>
             </div>
-            <div class="square-button-controls">
-                <div class="square-button">
-                    <a class="settings"><img src="image/collusion_icon_settings.png" /></a>
-                    <div class="button-label">SETTINGS</div>
-                </div>
-                <div class="square-button">
-                    <a class="about"><img src="image/collusion_icon_about.png" /></a>
-                    <div class="button-label">ABOUT</div>
-                </div>
-            </div>
             <div class="collusion-url">
                 <a href="http://www.mozilla.org/collusion" target="_blank">www.mozilla.org/collusion</a>
             </div>
@@ -98,33 +88,202 @@
                     </div>
                 </div>
 			</div>
-        <div id="content" class="">
+        <div id="content">
             <aside class="info">
                 <div class="holder">
-					<div>
-						<h2 class="title"></h2>
-						<!--span class="blue-text">You are currently browsing this site</span-->
-						<span class="blue-text"><b>First Access </b></span><span class="info-first-access">Date</span><br>
-						<span class="blue-text"><b>Last Access </b></span><span class="info-last-access">Date</span>
-                    <div class="map-section">
-                        <h3 class="blue-text">Server Location</h3>
-                        <div><span id="country">&nbsp;</span></div>
-                        <!-- SVG world map code starts; based on BlankMap-World6,_compact.svg by Canuckguy et al. =========================  -->
-                        <object type="image/svg+xml" data="map.svg" class="world-map"></object>
+                <!-- Site Profile starts ================================= -->
+                    <div class="site-profile-content hidden">
+    					<div>
+    						<h2 class="title"></h2>
+    						<!--span class="blue-text">You are currently browsing this site</span-->
+    						<span class="blue-text"><b>First Access </b></span><span class="info-first-access">Date</span><br>
+    						<span class="blue-text"><b>Last Access </b></span><span class="info-last-access">Date</span>
+                        <div class="map-section">
+                            <h3 class="blue-text">Server Location</h3>
+                            <div><span id="country">&nbsp;</span></div>
+                            <!-- SVG world map code starts; based on BlankMap-World6,_compact.svg by Canuckguy et al. =========================  -->
+                            <object type="image/svg+xml" data="map.svg" class="world-map"></object>
+                        </div>
+    						<h3 class="connections-head dark-blue-text"><b class="blue-text num-connected-sites"></b> Connected Sites</h3>
+    					</div>
+                        <div class="connections-list">
+                            <ul>
+                            </ul>
+                        </div>
                     </div>
-						<h3 class="connections-head dark-blue-text"><b class="blue-text num-connected-sites"></b> Connected Sites</h3>
-					</div>
-                    <div class="connections-list">
-                        <ul>
-                        </ul>
+                <!-- Site Profile ends ================================= -->
+                <!-- Help Sections starts ================================= -->
+                    <div class="help-content">
+                    <!-- Graph View Help -->
+                        <div class="graph-view-help hidden">
+                            <h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
+                            <div>
+                                <div class="grey-label">VISUALIZATION</div> Graph View</br>
+                                <div class="grey-label">BEST for</div> Seeing site relationships</br>
+                            </div>
+                            <section>
+                                <div class="blue-label">DESCRIPTION</div>
+                                <p>
+                                    In this graph visualization, you can see <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="visitedSites" cx="8" cy="8" r="6" /></svg> <b>circular nodes</b> that are websites you have visited, <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="unvisitedSites" points="0,14 7,2 14,14" /></svg> <b>triangular nodes</b> are third party site and <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><line class="connectionLine" x1="14" y1="2" x2="2" y2="14" /></svg> <b>connections</b> between them.
+                                    Over time, this graph will become a network of connecitons and nodes to visualize your relationship with the web.
+                                </p>
+                                <p>
+                                    This graph may get complex quickly and to reduce the amount of info displayed use  <b>SESSIONS</b> to help focus on a set of data.
+                                </p>
+                            </section>
+                            <section>
+                                <div class="blue-label">FEATURES</div>
+                                <div>
+                                    <div><span class="feature-name">Zoom In + Out</span> - on scroll</div>
+                                    <div><span class="feature-name">Pan</span> - on click + drag</div>
+                                    <div><span class="feature-name">Tooltips</span> - on hover</div>
+                                    <div><span class="feature-name">Website Profile</span> - on click</div>
+                                </div>
+                            </section>
+                            <section>
+                                <div class="blue-label">LEGENDS AND CONTROLS</div>
+                                <p>
+                                    These buttons serve as toggles to help identify various elements on the graph.
+                                </p>
+                                <p>
+                                    When you set your site preferecnes:
+                                    <ul>
+                                        <li><svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                                        <line class="cookies" x1="14" y1="2" x2="2" y2="14" />
+                                    </svg> <span class="cookie-text"><b>Cookies</b></span> means the site stored some data in your browser.</li>
+                                        <li><img src="icons/collusion_icon_block.png" /><span class="block-text">Block</span>  means they are blocked from connecting to your browser.</li>
+                                        <li><img src="icons/collusion_icon_watch.png" /><span class="watch-text">Watch</span>  means they are highlighted.</li>
+                                    </ul>
+                                </p>
+                            </section>
+                        </div>
+                    <!-- Clock View Help -->
+                        <div class="clock-view-help hidden">
+                            <h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
+                            <div>
+                                <div class="grey-label">VISUALIZATION</div> Clock View</br>
+                                <div class="grey-label">BEST for</div> Seeing site patterns with time</br>
+                            </div>
+                            <section>
+                                <div class="blue-label">DESCRIPTION</div>
+                                <p>
+                                    In this clock visualization, you can see <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="visitedSites" cx="8" cy="8" r="6" /></svg> <b>circular nodes</b> in <span style="color:#72AC45"><b>green</b></span> represents websites you have visited and <span style="color:#968BCD"><b>purple</b></span> nodes that are sites you have not but still connected to you and the connecitons between them.  Over time, this view reveals patterns across the arch that represent your browsing behavirous according to time and your relationship with the web.
+                                </p>
+                                <p>
+                                    This visualization becomes populated as 15 minutes increments on the arc and the previous (24 hour) session is seen faded to compare data from the previous day.
+                                </p>
+                            </section>
+                            <section>
+                                <div class="blue-label">FEATURES</div>
+                                <div>
+                                    <div><span class="feature-name">Zoom In + Out</span> - on scroll</div>
+                                    <div><span class="feature-name">Pan</span> - on click + drag</div>
+                                    <div><span class="feature-name">Tooltips</span> - on hover</div>
+                                    <div><span class="feature-name">Website Profile</span> - on click</div>
+                                </div>
+                            </section>
+                            <section>
+                                <div class="blue-label">LEGENDS AND CONTROLS</div>
+                                <p>
+                                    These buttons serve as toggles to help identify various elements on the graph.
+                                </p>
+                                <p>
+                                    When you set your site preferecnes:
+                                    <ul>
+                                        <li><img src="icons/collusion_icon_block.png" /><span class="block-text">Block</span>  means they are blocked from connecting to your browser.</li>
+                                        <li><img src="icons/collusion_icon_watch.png" /><span class="watch-text">Watch</span>  means they are highlighted.</li>
+                                    </ul>
+                                </p>
+                            </section>
+                        </div>
+                    <!-- List View Help -->
+                        <div class="list-view-help hidden">
+                            <h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
+                            <div>
+                                <div class="grey-label">VISUALIZATION</div> List View</br>
+                                <div class="grey-label">BEST for</div> Seeing a text database</br>
+                            </div>
+                            <section>
+                                <div class="blue-label">DESCRIPTION</div>
+                                <p>
+                                    In this list visualization, you can see al ist of all websites you have visited and sites you have not visited but still connect to you.  This view assists with sorting and filtering large numbers of sites.
+                                </p>
+                                <p>
+                                    This list may get quite extensive and to reduce the amount of information displayed use <b>SESSIONS</b> to help you focus on a set list of data.
+                                </p>
+                            </section>
+                            <section>
+                                <div class="blue-label">FEATURES</div>
+                                <div>
+                                    <div><span class="feature-name">(_icon_) Checkboxes</span> - click + apply site preference</div>
+                                    <div><span class="feature-name">(_icon_) _SORT BY_</span> - Type, Preference, WEbsite(A-Z), Date</div>
+                                </div>
+                            </section>
+                            <section>
+                                <div class="blue-label">LEGENDS AND CONTROLS</div>
+                                <p>
+                                    These buttons serve as toggles to help identify various elements on the graph.
+                                </p>
+                                <p>
+                                    When you set your site preferecnes:
+                                    <ul>
+                                        <li><img src="icons/collusion_icon_block.png" /><span class="block-text">Block</span>  means they are blocked from connecting to your browser.</li>
+                                        <li><img src="icons/collusion_icon_watch.png" /><span class="watch-text">Watch</span>  means they are highlighted.</li>
+                                    </ul>
+                                </p>
+                            </section>
+                        </div>
                     </div>
+                <!-- Help Sections ends ================================= -->
+                <!-- About Section starts ================================= -->
+                    <div class="about-content">
+                        <div class="graph-view-help">
+                            <h4><img src="image/collusion_icon_about.png" /> About Collusion</h4>
+                            <div>
+                                <div class="grey-label">VERSION</div> v1.0</br>
+                                <div class="grey-label">BY</div> ____</br>
+                            </div>
+                            <section>
+                                <div class="blue-label">ABOUT THIS ADD-ON</div>
+                                <p>
+                                    Collusion is an experimental add-on for Firefox that allows you to see which sites are suing third-party cookies to track your movements across the Web.  It shows, in realtime, how that data creates a spiderwed of interaction between companies and other trackers.
+                                </p>
+                            </section>
+                            <section>
+                                <div class="blue-label">MISSION STATEMENT</div>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus eu quam consectetur vestibulum. Vivamus elementum faucibus commodo. Nullam bibendum ac justo in convallis. Ut ac lacinia nibh. Suspendisse ac eleifend enim. Donec ornare, metus eu suscipit tempor, nisl leo bibendum quam, ac fermentum eros est a mi.
+                                </p>
+                            </section>
+                            <section>
+                                <div class="blue-label">Privacy Policy</div>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus eu quam consectetur vestibulum. Vivamus elementum faucibus commodo. Nullam bibendum ac justo in convallis. Ut ac lacinia nibh. Suspendisse ac eleifend enim. Donec ornare, metus eu suscipit tempor, nisl leo bibendum quam, ac fermentum eros est a mi.
+                                </p>
+                            </section>
+                            <section>
+                                <div class="blue-label">CONTACT</div>
+                                <p>
+                                    <i>You can contact us at:</i>
+                                </p>
+                            </section>
+                            <section>
+                                <div class="blue-label">WEBSITE</div>
+                                <p>
+                                    <i>For more information please visit: <a href="www.mozilla.org/collusion" target="_blank">www.mozilla.org/collusion/</a></i>
+                                </p>
+                            </section>
+                        </div>
+                    </div>
+                <!-- About Section starts ================================= -->
                 </div>
             </aside>
             <div class="info-panel-controls">
-                <div class="toggle-help">
-                    <a class="help-mode"><img src="image/collusion_icon_help.png" /></a>
-                </div>
-                <div class="toggle-info-panel">+</div>
+                <ul>
+                    <li class="toggle-site-profile disabled"><img src="image/collusion_icon_website.png" /><i class="icon-chevron-right hidden"></i></li>
+                    <li class="toggle-help"><a class="help"><img src="image/collusion_icon_help.png" /><i class="icon-chevron-right hidden"></i></a></li>
+                    <li class="toggle-about"><a class="about"><img src="image/collusion_icon_about.png" /></a><i class="icon-chevron-right hidden"></i></li>
+                </ul>
             </div>
             <div class="stage-stack">
               <div class="stage">
@@ -141,7 +300,7 @@
                     </section>
                     <section class="legend-controls">
                         <section class="column">
-                            <div class="btn toggle-visited active">
+                            <div class="btn legend-toggle-visited active">
                                 <a>
                                     <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <circle class="visitedSites" cx="8" cy="8" r="6" />
@@ -149,7 +308,7 @@
                                     Visited Site
                                 </a>
                             </div>
-                            <div class="btn toggle-never-visited active">
+                            <div class="btn legend-toggle-never-visited active">
                                 <a>
                                     <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <polygon class="unvisitedSites" points="0,14 7,2 14,14" />
@@ -157,7 +316,7 @@
                                     Never Visited Site
                                 </a>
                             </div>
-                            <div class="btn toggle-connections active">
+                            <div class="btn legend-toggle-connections active">
                                 <a>
                                     <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <line class="connectionLine" x1="14" y1="2" x2="2" y2="14" />
@@ -167,7 +326,7 @@
                             </div>
                         </section>
                         <section class="column">
-                            <div class="btn">
+                            <div class="btn legend-toggle-watched">
                                 <a>
                                     <svg class="legend-canvas-large" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <circle class="watchedSites" cx="8" cy="8" r="6" />
@@ -176,7 +335,7 @@
                                     Watched Sites
                                 </a>
                             </div>
-                            <div class="btn">
+                            <div class="btn legend-toggle-blocked">
                                 <a>
                                     <svg class="legend-canvas-large" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <circle class="blockedSites" cx="8" cy="8" r="6" />
@@ -187,18 +346,9 @@
                                     Blocked Sites
                                 </a>
                             </div>
-                            <div class="btn">
-                                <a>
-                                    <svg class="legend-canvas-large" version="1.1" xmlns="http://www.w3.org/2000/svg">
-                                        <circle class="hiddenSites" cx="8" cy="8" r="6" />
-                                        <polygon class="hiddenSites" points="18,14 25,2 32,14" />
-                                    </svg>
-                                    Hidden Sites
-                                </a>
-                            </div>
                         </section>
                         <section class="column">
-                            <div class="btn toggle-cookies">
+                            <div class="btn legend-toggle-cookies">
                                 <a>
                                     <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <line class="cookies" x1="14" y1="2" x2="2" y2="14" />
@@ -217,7 +367,7 @@
                     </section>
                     <section class="legend-controls">
                         <section class="column">
-                            <div class="btn toggle-visited active">
+                            <div class="btn legend-toggle-visited active">
                                 <a>
                                     <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <circle class="sourceSites" cx="8" cy="8" r="6" />
@@ -225,7 +375,7 @@
                                     Visited Site("source")
                                 </a>
                             </div>
-                            <div class="btn toggle-target active">
+                            <div class="btn legend-toggle-target active">
                                 <a>
                                     <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <circle class="targetSites" cx="8" cy="8" r="6" />
@@ -235,7 +385,7 @@
                             </div>
                         </section>
                         <section class="column">
-                            <div class="btn">
+                            <div class="btn legend-toggle-watched">
                                 <a>
                                     <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                         <circle class="watchedSites" cx="8" cy="8" r="6" />
@@ -243,24 +393,13 @@
                                     Watched Sites
                                 </a>
                             </div>
-                            <div class="btn">
-                                <a>
-                                	<img src="icons/collusion_icon_block.png" />
-                                    <!--<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
-                                        <circle class="blockedSites" cx="8" cy="8" r="6" />
-                                        <line class="blockedSites" x1="11" y1="3" x2="4.5" y2="14" />
-                                    </svg>-->
-                                    Blocked Sites
-                                </a>
-                            </div>
-                        </section>
-                        <section class="column">
-                            <div class="btn">
+                            <div class="btn legend-toggle-blocked">
                                 <a>
                                     <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
-                                        <circle class="hiddenSites" cx="8" cy="8" r="6" />
+                                        <circle class="blockedSites" cx="8" cy="8" r="6" />
+                                        <line class="blockedSites" x1="11" y1="3" x2="4.5" y2="14" />
                                     </svg>
-                                    Hidden Sites
+                                    Blocked Sites
                                 </a>
                             </div>
                         </section>

data/infobar.js

@@ -14,7 +14,6 @@ document.querySelector('#content').addEventListener('click', function(event){
             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(node.dataset.name);
         updateInfo(node.getAttribute("data-name"));
     }else{
         //console.log('does not match .node: %o', event.target);
@@ -98,18 +97,6 @@ function updateInfo(nodeName){
         var favicon = "<img src='http://"+ nodeName +"/favicon.ico' class='favicon'>";
         document.querySelector(".holder .title").innerHTML = favicon+nodeName;
 
-        if ( data == false || data.country_name === "Reserved" ){
-            document.querySelector("#country").innerHTML = "(Unable to find server location)";
-            resetMap();
-        }else{
-            // update country info only when it is different from the current one
-            if ( data.country_name !==  document.querySelector("#country").innerHTML ){
-                resetMap();
-                document.querySelector("#country").innerHTML = data.country_name;
-                updateMap(data.country_code.toLowerCase());
-            }
-        }
-
         // update the connections list
         var nodeList = aggregate.nodeForKey(nodeName);
         var htmlList = "";
@@ -132,11 +119,48 @@ function updateInfo(nodeName){
         document.querySelector(".num-connected-sites").textContent = numConnectedSites;
         document.querySelector(".connections-list ul").innerHTML = htmlList;
 
-        document.querySelector("#content").classList.add("showinfo");
+        // display site profile in Info Panel 
+        showSiteProfile();
+
+        // update map after we have loaded the SVG
+        if ( data == false || data.country_name === "Reserved" ){
+            document.querySelector("#country").innerHTML = "(Unable to find server location)";
+            resetMap();
+        }else{
+            // update country info only when it is different from the current one
+            if ( data.country_name !==  document.querySelector("#country").innerHTML ){
+                resetMap();
+                document.querySelector("#country").innerHTML = data.country_name;
+                updateMap(data.country_code.toLowerCase());
+            }
+        }
     });
 
 }
 
+
+function showSiteProfile(){
+    var siteProfileTab = document.querySelector(".toggle-site-profile");
+    var contentToBeShown = document.querySelector(".site-profile-content");
+    var infoPanelOpen = document.querySelector("#content").classList.contains("showinfo");
+    var siteProfileTabActive = document.querySelector(".toggle-site-profile").classList.contains("active");
+    if( !infoPanelOpen ){
+        document.querySelector("#content").classList.add("showinfo");
+        showInfoPanelTab(siteProfileTab, contentToBeShown);
+    }
+
+    if( infoPanelOpen ){
+        if ( !siteProfileTabActive ){
+            // make the previously active tab inactive
+            deactivatePreviouslyActiveTab();
+            showInfoPanelTab(siteProfileTab, contentToBeShown);
+        }
+    }
+
+    document.querySelector(".toggle-site-profile").classList.remove("disabled");
+}
+
+
 /* mapcanvas events */
 mapcanvas.addEventListener("mousedown",function(event){
     onDragMap = true;
@@ -178,3 +202,86 @@ mapDocument.addEventListener("wheel",function(event){
 
 }
 
+
+/* Info Panel Tabs ======================================== */
+
+
+/* Toggle Site Profile */
+document.querySelector(".toggle-site-profile").addEventListener("click", function(){
+    var tabClicked = document.querySelector(".toggle-site-profile");
+    if ( !tabClicked.classList.contains("disabled") ){
+        var contentToBeShown = document.querySelector(".site-profile-content");
+        toggleInfoPanelTab(tabClicked, contentToBeShown);
+    }
+});
+
+/* Toggle Help Sections */
+document.querySelector(".toggle-help").addEventListener("click", function(){
+    var tabClicked = document.querySelector(".toggle-help");
+    var contentToBeShown = document.querySelector(".help-content ." + currentVisualization.name +"-view-help");
+    toggleInfoPanelTab(tabClicked, contentToBeShown);
+});
+
+
+/* Toggle About */
+document.querySelector(".toggle-about").addEventListener("click", function(){
+    var tabClicked = document.querySelector(".toggle-about");
+    var contentToBeShown = document.querySelector(".about-content");
+    toggleInfoPanelTab(tabClicked, contentToBeShown);
+});
+
+
+function toggleInfoPanelTab(tabClicked, contentToBeShown){
+    var infoPanelOpen = document.querySelector("#content").classList.contains("showinfo");
+    var isActiveTab = tabClicked.classList.contains("active");
+    if( infoPanelOpen ){
+        if ( isActiveTab ){ // collapse info panel
+            document.querySelector("#content").classList.remove("showinfo");
+            tabClicked.classList.remove("active");
+            tabClicked.querySelector("img").classList.remove("hidden");
+            tabClicked.querySelector("i").classList.add("hidden");
+        }else{
+            // make the previously active tab inactive
+            deactivatePreviouslyActiveTab();
+            // make the selected tab active
+            showInfoPanelTab(tabClicked, contentToBeShown);
+        }
+    }else{
+        // open the info panel and make the selected tab active
+        document.querySelector("#content").classList.add("showinfo");
+        showInfoPanelTab(tabClicked, contentToBeShown);
+    }
+}
+
+
+function deactivatePreviouslyActiveTab(){
+    var previouslyActiveTab = document.querySelector(".info-panel-controls ul li.active");
+    if ( previouslyActiveTab ){
+        previouslyActiveTab.classList.remove("active");
+        previouslyActiveTab.querySelector("img").classList.remove("hidden");
+        previouslyActiveTab.querySelector("i").classList.add("hidden");
+    }
+}
+
+
+// make the selected tab active
+function showInfoPanelTab(tabClicked, contentToBeShown){
+    tabClicked.classList.add("active");
+    tabClicked.querySelector("img").classList.add("hidden");
+    tabClicked.querySelector("i").classList.remove("hidden");
+    hideAllInfoPanelContentExcept(contentToBeShown);
+}
+
+
+function hideAllInfoPanelContentExcept(elmToShow){
+    document.querySelector(".site-profile-content").classList.add("hidden");
+    document.querySelector(".help-content .graph-view-help").classList.add("hidden");
+    document.querySelector(".help-content .clock-view-help").classList.add("hidden");
+    document.querySelector(".help-content .list-view-help").classList.add("hidden");
+    document.querySelector(".about-content").classList.add("hidden");
+    if (elmToShow){
+        elmToShow.classList.remove("hidden");
+    }
+}
+
+

data/list.js

@@ -316,6 +316,29 @@ function initializeHandlers(){
             toggleHiddenSites(target);
         }
     }, false);
+
+    // highlight selected row
+    document.querySelector(".list-table").addEventListener("click",function(event){
+        var node = event.target;
+        // clicking on the cell where the checkbox locates can also trigger the checkbox clicking handler
+        if (node.mozMatchesSelector('tbody tr td:first-child, tbody tr td:first-child [type=checkbox]')){
+            var rowChecked;
+            if ( node.mozMatchesSelector('tbody tr td:first-child') ){
+                rowChecked = node.querySelector("[type=checkbox]").checked;
+            }else{
+                rowChecked = node.checked;
+            }
+            while(node.mozMatchesSelector('.node *')){
+                node = node.parentElement;
+            }
+            if (rowChecked){
+                node.classList.add("checked");
+            }else{
+                node.classList.remove("checked");
+            }
+        }
+    });
+
 }catch(e){
     console.log('Error: %o', e);
 }

data/style.css

@@ -85,8 +85,7 @@ h3 {
 
 /* Button Styling ================================ */
 
-.btn a:hover,
-.square-button a:hover{
+.btn a:hover{
     background: #475B61;
 }
 
@@ -123,8 +122,7 @@ h3 {
     display: none;
 }
 
-.btn a,
-.square-button a{
+.btn a{
     border-radius: 5px;
     cursor: pointer;
 }
@@ -169,55 +167,12 @@ h3 {
     top: 3px;
 }
 
-.controls .square-button-controls{
-    position: fixed;
-    bottom: 30px;
-    margin-bottom: 20px;
-}
-
 .controls .collusion-url{
     position: fixed;
     bottom: 0;
     margin-bottom: 10px;
 }
 
-.square-button{
-    float: left;
-    cursor: pointer;
-    text-align: center;
-}
-
-.square-button:not(:last-child){
-    margin-right: 60px;
-}
-
-.square-button a{
-    display: block;
-    background: #25292D;
-    width: 18px;
-    height: 18px;
-    padding: 5px;
-    margin: 0 auto;
-}
-
-.square-button.active{
-    background: #5F6771;
-}
-
-.square-button img{
-    position: relative;
-    top: 2px;
-    width: 15px;
-    height: 15px;
-}
-
-.square-button .button-label{
-    font-size: 7pt;
-    color: #fff;
-    margin-top: 5px;
-    text-align: center;
-}
-
 .toggle-btn input{
     display: none;
 }
@@ -344,41 +299,42 @@ h3 {
 
 .info-panel-controls{
     display: block;
-    transform: translate(0px,-2px) rotate(-90deg);
     float: right;
     z-index: 1000;
+    margin: 30px 0 0 0;
 }
 
-.info-panel-controls div{
+.info-panel-controls ul{
+    list-style-type: none;
+}
+
+.info-panel-controls ul li{
     width: 28px;
     height: 28px;
-    margin-bottom: 10px;
     position: relative;
     bottom: 10px;
+    margin-bottom: 5px;
+    padding: 5px 10px;
+    background: #20272E;
+    border-radius: 2px 0 0 2px;
+    cursor: pointer;
+    font-size: 15px;
+}
+
+.info-panel-controls ul li.active{
+    background: #404850;
 }
 
 .info-panel-controls img{
     width: 15px;
     height: 15px;
     position: relative;
-    bottom: 3px;
     right: 3px;
 }
 
-.toggle-info-panel{
-    background: #404850;
-    border-radius: 5px 5px 0 0;
-    padding: 5px 10px;
-    font-size: 15px;
-    cursor: pointer;
-}
-
-.toggle-help{
-    transform: translate(0px,2px) rotate(90deg);
-    background: #25292D;
-    border-radius: 5px;
-    padding: 5px 10px;
-    cursor: pointer;
+.toggle-site-profile.disabled{
+    cursor: default;
+    opacity: 0.2;
 }
 
 .info .holder{
@@ -387,6 +343,79 @@ h3 {
     height:100%;
 }
 
+
+
+/* Help Sections */
+
+.help-content svg{
+    width: 15px;
+    height: 15px;
+    position: relative;
+    top: 2px;
+}
+
+.info .holder > div{
+    font-size: 12px;
+}
+
+.info .holder > div h4{
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.info .holder > div h4 img{
+    width: 16px;
+    height: 16px;
+}
+
+.grey-label{
+    display: inline-block;
+    margin-right: 5px;
+    color: #777;
+    letter-spacing: 1px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.blue-label{
+    margin-bottom: 10px;
+    color: #4CC7E6;
+    letter-spacing: 1px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.info .holder section{
+    padding: 15px 0;
+}
+
+.info .holder section:not(:last-of-type){
+    border-bottom: 1px solid #303840;
+}
+
+.info .holder section p{
+    margin: 5px 0;
+}
+
+.info .holder section ul{
+    list-style-type: none;
+}
+
+.info .holder section ul img{
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+}
+
+.feature-name{
+    display: inline-block;
+    width: 120px;
+    font-weight: bold; 
+    text-transform: capitalize;
+}
+
+/* Info Panel(Profile) Sections */
+
 .map-section{
     margin: 10px 0 50px 0;
     font-size: 10px;
@@ -420,7 +449,7 @@ h3 {
 .info .holder{
     width: 300px;
     height: 100%;
-    padding: 15px 30px;
+    padding: 15px;
 }
 
 .info .holder .favicon{
@@ -498,8 +527,7 @@ h3 {
     cursor: pointer;
 }
 
-.connections-list ul li:hover,
-.settings-page ul li:hover{
+.connections-list ul li:hover{
     background-color: #475B61;
 }
 
@@ -534,16 +562,18 @@ text {
 #tooltip{
     display: none;
     position: absolute;
-    background-color: #CCC;
+    background-color: #FFF;
     color: #010203;
-    padding: 5px;
+    padding: 5px 10px;
+    box-shadow: 0px 2px #4CC7E6;
+    border-radius: 5px;
 }
 #tooltip:after{
     content: '';
     width: 0;
     height: 0;
     border: 10px solid transparent;
-    border-top: 10px solid #CCC;
+    border-top: 10px solid #FFF;
     position: absolute;
     top: 100%;
     left: 50%;
@@ -685,21 +715,23 @@ text {
 }
 
 .watchedSites{
-    fill: #FFF;
-    stroke: #268CB7;
-    stroke-width: 2;
+    fill: #268CB7 !important;
+}
+
+.watch-text{
+    color: #268CB7;
 }
 
 .blockedSites{
-    fill: #FFF;
-    stroke: #FF0000;
-    stroke-width: 2;
+    fill: #FF0000 !important;
 }
 
-.hiddenSites{
-    fill: #FFF;
-    stroke: #FA9828;
-    stroke-width: 2;
+.block-text{
+    color: #FF0000;
+}
+
+.cookie-text{
+    color: #800080;
 }
 
 .edge{
@@ -740,6 +772,7 @@ text {
     border-collapse: collapse;
     font-size: 12px;
     height: 100%;
+    margin-right: 10px;
 }
 
 .list-table table{
@@ -810,7 +843,8 @@ text {
     display: none;
 }
 
-.list-table tbody tr:hover{
+.list-table tbody tr:hover,
+.list-table tbody tr.checked{
     background: #33464d;
 }
 
@@ -858,70 +892,12 @@ text {
 
 
 
-/* Settings Page */
-
-.settings-page{
-    width: 100%;
-    padding: 30px 10px 0 50px;
-    color: #939393;
-}
-
-.page-header{
-    font-size: 22px;
-    margin-bottom: 25px;
-}
-
-.settings-page header{
-    color: #fff;
-    margin: 10px 0;
-    font-size: 16px;
-}
-
-.settings-page section{
-    font-size: 15px;
-    margin-bottom: 40px;
-}
-
-.settings-page .num-sites{
-    color: #5A50F0;
-}
-
-.settings-page ul{
-    width: 400px;
-    list-style-type: none;
-    cursor: pointer;
-    overflow-y: auto;
-}
-
-.settings-page ul li{
-    padding: 1px 0;
-    clear: both;
-    overflow: auto;
-}
-
-.settings-page i{
-    float: left;
-    position: relative;
-    top: 2px;
-}
-
-.settings-page .site-url{
-    float: left;
-}
-.settings-page .settings-option{
-    font-size: 12px;
-    padding-left: 15px;
-    clear: both;
-}
-
-
-
 /* Legend for Graph and Clock and Site Preferences for List*/
 
 .graph-footer,
 .clock-footer,
 .list-footer{
-    margin-right: 30px;
+    margin-right: 20px;
     flex: none;
 }
 

data/tooltip.js

@@ -13,8 +13,9 @@ function showTooltip(event){
     tooltip.innerHTML = event.target.getAttribute(["data-name"]);
     var rect = event.target.getClientRects()[0];
     var tooltipWidth = tooltip.offsetWidth;
-    tooltip.style.top = (rect.top - 40) + 'px';
+    tooltip.style.top = (rect.top - 45) + 'px';
     tooltip.style.left = (rect.left + (rect.width / 2) - (tooltipWidth / 2)) + 'px';
+    setTooltipTimeout();
     return false;
 }
 
@@ -25,10 +26,10 @@ function d3ShowTooltip(node, idx){
     tooltip.style.left = '-1000px';
     tooltip.style.display = 'inline-block';
     // console.error(event, event.target, event.target.dataset);
-    tooltip.innerHTML = node.name + '<span class="howMany">(&times;' + node.howMany + ')</span>';
+    tooltip.innerHTML = node.name;
     var rect = this.getClientRects()[0];
     var tooltipWidth = tooltip.offsetWidth;
-    tooltip.style.top = (rect.top - 50) + 'px';
+    tooltip.style.top = (rect.top - 55) + 'px';
     tooltip.style.left = (rect.left + (rect.width / 2) - (tooltipWidth / 2)) + 'px';
     return false;
 }
@@ -49,7 +50,7 @@ function timeoutTooltip(){
 }
 
 function hideTooltip(){
-    setTooltipTimeout();
+    timeoutTooltip();
     return false;
 }
 

data/ui.js

@@ -102,22 +102,6 @@ function toggleBtnOffEffect(toggleBtn){
 }
 
 
-
-
-
-/* Toggle Info Panel */
-document.querySelector(".toggle-info-panel").addEventListener("click", function(){
-    var infoShown = document.querySelector("#content").classList.contains("showinfo");
-    if ( infoShown ){
-        document.querySelector("#content").classList.remove("showinfo");
-        document.querySelector(".toggle-info-panel").innerHTML = "+";
-    }else{
-        document.querySelector("#content").classList.add("showinfo");
-        document.querySelector(".toggle-info-panel").innerHTML = "X";
-    }
-});
-
-
 /* When a open dropdown list loses focus, collapse it. */
 window.addEventListener("click", function(e){
     var activeDropdown = document.querySelector(".active_dropdown");
@@ -158,7 +142,6 @@ document.querySelector('.reset-data').addEventListener('click', function(){
     });
 
     updateStatsBar();
-    // FIXME: empty the data from current view too
 });
 
 // function handleDisclosureToggle(elem){
@@ -216,7 +199,7 @@ function setZoom(box,canvas){
 */
 var graphZoomInLimit   = { x:300, y:300, w:200, h:300 };
 var graphZoomOutLimit  = { w:4000, h:4000 };
-var clockZoomInLimit   = { w:560, h:400 };
+var clockZoomInLimit   = { w:350, h:250 };
 var clockZoomOutLimit  = { w:2800, h:2800 };
 var mapZoomInLimit     = { w:(2711.3/5), h:(1196.7/5) };
 var mapZoomOutLimit    = { w:2711.3, h:1196.7 };
@@ -325,58 +308,6 @@ document.querySelector(".stage").addEventListener("mouseleave",function(event){
 },false);
 
 
-/* Clock View ===================================== */
-
-function highlightColludedNode(selection){
-    selection.each(function(){
-        var colludedNode = d3.select(this);
-        if ( colludedNode.classed("source") ){  // this instance of colluded node is a source node
-            colludedNode.classed("colluded-source", true);
-        }
-        if ( colludedNode.classed("target") ){ // this instance of colluded node is a target node
-            colludedNode.classed("colluded-target", true);
-        }
-    });
-}
-
-function applyHighlightingEffect(clickedNodeName){
-    // reset styling effect
-    d3.selectAll("g.node").classed("clicked-node", false)
-                          .classed("colluded-source", false)
-                          .classed("colluded-target", false);
-
-    // highlight all instances of the clicked node(both source and target)
-    d3.selectAll("g[data-name='" + clickedNodeName +"']")
-            .classed("clicked-node", true);
-
-    // find all the colluded sites and highlight all instances of them
-    for ( var key in aggregate.nodeForKey( clickedNodeName ) ){
-        if ( key != clickedNodeName ){
-            d3.selectAll("g[data-name='"+ key +"']").call(highlightColludedNode);
-        }
-    }
-
-}
-
-document.querySelector('#content').addEventListener('click', function(event){
-    /*
-    *   When a node in the clock visualization is clicked,
-    *       all instances of the same node across the day should be highlighted
-    *       all colluded nodes should also be highlighted (differently)
-    */
-    if ( currentVisualization.name == "clock" ){
-        // click could happen on .node or an element inside of .node
-        if (event.target.mozMatchesSelector('.node, .node *')){
-            var node = event.target;
-            while(node.mozMatchesSelector('.node *')){
-                node = node.parentElement;
-            }
-            applyHighlightingEffect(node.getAttribute("data-name"));
-        }
-    }
-},false);
-
-
 /* Export ========== */
 
 function exportFormat(connections){

lib/ui.js

@@ -216,7 +216,9 @@ function openOrSwitchToOrClose(){
         tab.close();
     }else{
         // otherwise, switch to this tab
+        // bring Collusion window/tab to the front
         tab.activate();
+        tab.window.activate();
     }
 }
 exports.openOrSwitchToOrClose = openOrSwitchToOrClose;