зеркало из https://github.com/mozilla/lightbeam.git
[Issue #245] some controls are working now.
This commit is contained in:
Mavis Ou
Родитель
e508dc7de7
Коммит
965fbb9c36
|
|
@ -135,8 +135,9 @@ function onConnection(conn){
|
|||
}
|
||||
if (edgemap[connection.source + '->' + connection.target]){
|
||||
edge = edgemap[connection.source + '->' + connection.target];
|
||||
edge.update(connection);
|
||||
}else{
|
||||
edge = new GraphEdge(sourcenode, targetnode);
|
||||
edge = new GraphEdge(sourcenode, targetnode, connection);
|
||||
edgemap[edge.name] = edge;
|
||||
aggregate.edges.push(edge);
|
||||
updated = true;
|
||||
|
|
@ -165,10 +166,11 @@ function moveNode(node, oldNodeType){
|
|||
}
|
||||
|
||||
|
||||
function GraphEdge(source, target){
|
||||
function GraphEdge(source, target, connection){
|
||||
this.source = source;
|
||||
this.target = target;
|
||||
this.name = source.name + '->' + target.name;
|
||||
this.cookieCount = connection.cookie ? 1 : 0;
|
||||
// console.log('edge: %s', this.name);
|
||||
}
|
||||
GraphEdge.prototype.lastAccess = function(){
|
||||
|
|
@ -177,6 +179,9 @@ GraphEdge.prototype.lastAccess = function(){
|
|||
GraphEdge.prototype.firstAccess = function(){
|
||||
return (this.source.firstAccess < this.target.firstAccess) ? this.source.firstAccess : this.target.firstAccess;
|
||||
}
|
||||
GraphEdge.prototype.update = function(connection){
|
||||
this.cookieCount = connection.cookie ? this.cookieCount+1 : this.cookieCount;
|
||||
}
|
||||
|
||||
// A graph node represents one end of a connection, either a target or a source
|
||||
// Where a connection is a point in time with a timestamp, a graph node has a time range
|
||||
|
|
|
|||
|
|
@ -122,7 +122,10 @@ function initGraph(){
|
|||
.attr('x1', function(edge){ return edge.source.x; })
|
||||
.attr('y1', function(edge){ return edge.source.y; })
|
||||
.attr('x2', function(edge){ return edge.target.x; })
|
||||
.attr('y2', function(edge){ return edge.target.y; });
|
||||
.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; });
|
||||
vis.selectAll('.node').call(updateNodes);
|
||||
var endDraw = Date.now();
|
||||
draws.push(endDraw - lastTick);
|
||||
|
|
@ -187,7 +190,8 @@ function addCircle(selection){
|
|||
function addShape(selection){
|
||||
selection.filter('.visitedYes').call(addCircle).call(addFavicon);
|
||||
selection.filter('.visitedNo').call(addTriangle).call(addFavicon);
|
||||
selection.filter('.visitedBoth').call(addSquare).call(addFavicon);
|
||||
selection.filter('.visitedBoth').call(addCircle).call(addFavicon);
|
||||
// selection.filter('.visitedBoth').call(addSquare).call(addFavicon);
|
||||
}
|
||||
|
||||
function addTriangle(selection){
|
||||
|
|
@ -197,14 +201,14 @@ function addTriangle(selection){
|
|||
.attr('data-name', function(node){ return node.name; });
|
||||
}
|
||||
|
||||
function addSquare(selection){
|
||||
selection
|
||||
.append('rect')
|
||||
.attr('x', -9)
|
||||
.attr('y', -9)
|
||||
.attr('width', 18)
|
||||
.attr('height', 18);
|
||||
}
|
||||
// function addSquare(selection){
|
||||
// selection
|
||||
// .append('rect')
|
||||
// .attr('x', -9)
|
||||
// .attr('y', -9)
|
||||
// .attr('width', 18)
|
||||
// .attr('height', 18);
|
||||
// }
|
||||
|
||||
|
||||
function updateNodes(thenodes){
|
||||
|
|
@ -216,23 +220,14 @@ function updateNodes(thenodes){
|
|||
.classed('secureYes', function(node){ return node.secureCount/node.howMany == 1 })
|
||||
.classed('secureNo', function(node){ return node.secureCount/node.howMany == 0 })
|
||||
.classed('secureBoth', function(node){ return node.secureCount/node.howMany > 0 && node.secureCount/node.howMany < 1 })
|
||||
.classed('cookieYes', function(node){ return node.cookieCount/node.howMany == 1 })
|
||||
.classed('cookieNo', function(node){ return node.cookieCount/node.howMany == 0 })
|
||||
.classed('cookieBoth', function(node){ return node.cookieCount/node.howMany > 0 && node.cookieCount/node.howMany < 1 })
|
||||
// .classed('cookieYes', function(node){ return node.cookieCount/node.howMany == 1 })
|
||||
// .classed('cookieNo', function(node){ return node.cookieCount/node.howMany == 0 })
|
||||
// .classed('cookieBoth', function(node){ return node.cookieCount/node.howMany > 0 && node.cookieCount/node.howMany < 1 })
|
||||
.attr('data-timestamp', function(node){ return node.lastAccess.toISOString(); })
|
||||
.attr('visited-scale', function(node){ return node.visitedCount/node.howMany; })
|
||||
.attr('secure-scale', function(node){ return node.secureCount/node.howMany; })
|
||||
.attr('cookie-scale', function(node){ return node.cookieCount/node.howMany; })
|
||||
.style('fill', function(node){
|
||||
// sites: #6CB4F9 rgb(108,180,249)
|
||||
// third-party: #E73547 rgb(231,53,71)
|
||||
var visitedRatio = node.visitedCount/node.howMany;
|
||||
var red = parseInt( visitedRatio * (108-231) ) + 231;
|
||||
var green = parseInt( visitedRatio * (180-53) ) + 53;
|
||||
var blue = parseInt( visitedRatio * (249-71) ) + 71;
|
||||
//console.log("rgba(%d,%d,%d,1)", red, green, blue);
|
||||
return "rgba(" + red + "," + green + "," + blue + "," + "1)";
|
||||
});
|
||||
.classed('highlighted', function(edge){ return ( edge.visitedCount > 0 ) ? highlightVisited : highlightNeverVisited; });
|
||||
// change shape if needed
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
</section>
|
||||
<section class="legend-controls">
|
||||
<section class="column">
|
||||
<div class="btn active">
|
||||
<div class="btn 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" />
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
Visited Site
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn active">
|
||||
<div class="btn 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" />
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
Never Visited Site
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn active">
|
||||
<div class="btn 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" />
|
||||
|
|
@ -180,40 +180,14 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="column">
|
||||
<div class="btn">
|
||||
<div class="btn toggle-cookies">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<line class="secureConnection" x1="14" y1="2" x2="2" y2="14" />
|
||||
</svg>
|
||||
Secure Connection
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<line class="unsecureConnection" x1="14" y1="2" x2="2" y2="14" />
|
||||
</svg>
|
||||
Unsecured Connection
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="column">
|
||||
<div class="btn">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="cookies" cx="8" cy="8" r="6" />
|
||||
<line class="cookies" x1="14" y1="2" x2="2" y2="14" />
|
||||
</svg>
|
||||
Cookies
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="noCookies" cx="8" cy="8" r="6" />
|
||||
</svg>
|
||||
No Cookies
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
120
data/style.css
120
data/style.css
|
|
@ -506,39 +506,67 @@ text {
|
|||
|
||||
/* Graph Visualization */
|
||||
|
||||
.cookieYes,
|
||||
.cookieNo,
|
||||
.cookieBoth{
|
||||
stroke: #FFFFFF;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.visitedSites,
|
||||
.unvisitedSites{
|
||||
fill: #FFF;
|
||||
}
|
||||
|
||||
.connectionLine{
|
||||
stroke: #FFF;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.watchedSites{
|
||||
fill: #FFF;
|
||||
stroke: #268CB7;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.blockedSites{
|
||||
fill: #FFF;
|
||||
stroke: #FF0000;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.hiddenSites{
|
||||
fill: #FFF;
|
||||
stroke: #FA9828;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.edge{
|
||||
stroke: #FFF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.node{
|
||||
stroke-width: 4;
|
||||
.visitedYes,
|
||||
.visitedNo,
|
||||
.visitedBoth{
|
||||
fill: #FFFFFF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.secureYes{
|
||||
/* stroke: #1ABE15; */
|
||||
.visitedYes.highlighted,
|
||||
.visitedNo.highlighted,
|
||||
.visitedBoth.highlighted,
|
||||
.edge.highlighted{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.secureNo{
|
||||
/* stroke: #CE1105; */
|
||||
.cookieYes.coloured,
|
||||
.cookieBoth.coloured,
|
||||
.cookies{
|
||||
stroke: #800080;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.secureBoth{
|
||||
/* stroke: #00FF00; */
|
||||
}
|
||||
|
||||
.cookieYes{
|
||||
/* fill: #1E55EE; */
|
||||
}
|
||||
|
||||
.cookieNo{
|
||||
/* fill: #FEEB1E; */
|
||||
}
|
||||
|
||||
.cookieBoth{
|
||||
/* fill: #EA5E15; */
|
||||
}
|
||||
|
||||
|
||||
/* List Visualization */
|
||||
.hide {
|
||||
display: none;
|
||||
|
|
@ -827,49 +855,3 @@ text {
|
|||
.graph-legend .legend-canvas-large{
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.visitedSites,
|
||||
.unvisitedSites{
|
||||
fill: #FFF;
|
||||
}
|
||||
|
||||
.connectionLine{
|
||||
stroke: #FFF;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.watchedSites{
|
||||
fill: #FFF;
|
||||
stroke: #268CB7;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.blockedSites{
|
||||
fill: #FFF;
|
||||
stroke: #FF0000;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.hiddenSites{
|
||||
fill: #FFF;
|
||||
stroke: #FA9828;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.secureConnection{
|
||||
stroke: #107A10;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.unsecureConnection{
|
||||
stroke: #FFFF00;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.cookies{
|
||||
fill: #800080;
|
||||
}
|
||||
|
||||
.noCookies{
|
||||
fill: #FFF;
|
||||
}
|
||||
47
data/ui.js
47
data/ui.js
|
|
@ -404,6 +404,11 @@ document.querySelector(".connections-list ul").addEventListener("click", functio
|
|||
|
||||
/* Legend & Controls for Graph ===================================== */
|
||||
|
||||
var highlightVisited = true;
|
||||
var highlightNeverVisited = true;
|
||||
var highlightConnections = true;
|
||||
var highlightCookies = false;
|
||||
|
||||
document.querySelector(".graph-legend .legend-controls").addEventListener("click", function(event){
|
||||
if (event.target.mozMatchesSelector(".btn, .btn *")){
|
||||
var btn = event.target;
|
||||
|
|
@ -423,6 +428,46 @@ document.querySelector(".graph-legend .legend-toggle").addEventListener("click",
|
|||
controlsSection.classList.add("hidden");
|
||||
event.target.innerHTML = "Show";
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
document.querySelector(".toggle-visited").addEventListener("click", function(event){
|
||||
var visited = document.querySelectorAll(".visitedYes, .visitedBoth");
|
||||
toggleGraphElements(visited,"highlighted","highlightVisited");
|
||||
});
|
||||
|
||||
document.querySelector(".toggle-never-visited").addEventListener("click", function(event){
|
||||
var neverVisited = document.querySelectorAll(".visitedNo");
|
||||
toggleGraphElements(neverVisited,"highlighted","highlightNeverVisited");
|
||||
});
|
||||
|
||||
document.querySelector(".toggle-connections").addEventListener("click", function(event){
|
||||
var cookiesConnections = document.querySelectorAll(".edge");
|
||||
toggleGraphElements(cookiesConnections,"highlighted","highlightConnections");
|
||||
});
|
||||
|
||||
document.querySelector(".toggle-cookies").addEventListener("click", function(event){
|
||||
console.log("clicked");
|
||||
var cookiesConnections = document.querySelectorAll(".cookieYes");
|
||||
toggleGraphElements(cookiesConnections,"coloured","highlightCookies");
|
||||
});
|
||||
|
||||
function toggleGraphElements(elements,classToggle,flag){
|
||||
console.log(toArray(elements).length);
|
||||
toArray(elements).forEach(function(elm){
|
||||
elm.classList.toggle(classToggle);
|
||||
});
|
||||
switch(flag){
|
||||
case "highlightVisited":
|
||||
highlightVisited = !highlightVisited;
|
||||
case "highlightNeverVisited":
|
||||
highlightNeverVisited = !highlightNeverVisited;
|
||||
case "highlightConnections":
|
||||
highlightConnections = !highlightConnections;
|
||||
case "highlightCookies":
|
||||
highlightCookies = !highlightCookies;
|
||||
break;
|
||||
default:
|
||||
console.log("toggle flag=" + flag);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче