зеркало из https://github.com/mozilla/lightbeam.git
Merge branch 'c2_fresh_start' of https://github.com/mozilla/collusion into c2_fresh_start
This commit is contained in:
dethe
Коммит
df4895cb37
|
|
@ -24,7 +24,7 @@ const STATUS = 12;
|
||||||
const CACHEABLE = 13;
|
const CACHEABLE = 13;
|
||||||
const FROM_PRIVATE_MODE = 14;
|
const FROM_PRIVATE_MODE = 14;
|
||||||
|
|
||||||
const vizcanvas = document.querySelector('.vizcanvas');
|
var vizcanvas = document.querySelector('.vizcanvas');
|
||||||
var mapDocument, mapcanvas;
|
var mapDocument, mapcanvas;
|
||||||
document.querySelector('.world-map').addEventListener('load', function(event){
|
document.querySelector('.world-map').addEventListener('load', function(event){
|
||||||
mapDocument = event.target.contentDocument;
|
mapDocument = event.target.contentDocument;
|
||||||
|
|
@ -83,9 +83,6 @@ function elem(name, attributes, children){
|
||||||
window.addEventListener('load', function(evt){
|
window.addEventListener('load', function(evt){
|
||||||
addon.emit("privateWindowCheck");
|
addon.emit("privateWindowCheck");
|
||||||
// Wire up events
|
// Wire up events
|
||||||
// document.querySelector('.btn_group.visualization').click();
|
|
||||||
// document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').click();
|
|
||||||
// document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected").click();
|
|
||||||
document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected", true);
|
document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected", true);
|
||||||
document.querySelector('.btn_group.visualization [data-selected]').classList.remove("collapsed");
|
document.querySelector('.btn_group.visualization [data-selected]').classList.remove("collapsed");
|
||||||
switchVisualization(localStorage.visualization.toLowerCase() || 'graph');
|
switchVisualization(localStorage.visualization.toLowerCase() || 'graph');
|
||||||
|
|
@ -140,6 +137,13 @@ function resetAddtionalUI(){
|
||||||
clearAllBubbles();
|
clearAllBubbles();
|
||||||
// show vizcanvas again in case it is hidden
|
// show vizcanvas again in case it is hidden
|
||||||
document.querySelector(".vizcanvas").classList.remove("hide");
|
document.querySelector(".vizcanvas").classList.remove("hide");
|
||||||
|
// toggle graph legend section
|
||||||
|
console.log(currentVisualization.name);
|
||||||
|
if( currentVisualization.name != "graph" ){
|
||||||
|
document.querySelector(".graph-legend").classList.add("hidden");
|
||||||
|
}else{
|
||||||
|
document.querySelector(".graph-legend").classList.remove("hidden")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
101
data/index.html
101
data/index.html
|
|
@ -118,6 +118,107 @@
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</div><!-- .stage -->
|
</div><!-- .stage -->
|
||||||
|
<div class="graph-legend">
|
||||||
|
<section class="legend-header">
|
||||||
|
<div><header>LEGEND & CONTROLS</header></div>
|
||||||
|
<div><a class="legend-toggle">Hide</a></div>
|
||||||
|
</section>
|
||||||
|
<section class="legend-controls">
|
||||||
|
<section class="column">
|
||||||
|
<div class="btn 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" />
|
||||||
|
</svg>
|
||||||
|
Visited Site
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="btn 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" />
|
||||||
|
</svg>
|
||||||
|
Never Visited Site
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="btn 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" />
|
||||||
|
</svg>
|
||||||
|
Connection
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="column">
|
||||||
|
<div class="btn">
|
||||||
|
<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" />
|
||||||
|
<polygon class="watchedSites" points="18,14 25,2 32,14" />
|
||||||
|
</svg>
|
||||||
|
Watched Sites
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<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" />
|
||||||
|
<line class="blockedSites" x1="11" y1="3" x2="4.5" y2="14" />
|
||||||
|
<polygon class="blockedSites" points="18,14 25,2 32,14" />
|
||||||
|
<line class="blockedSites" x1="27.5" y1="4.5" x2="23" y2="14" />
|
||||||
|
</svg>
|
||||||
|
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">
|
||||||
|
<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" />
|
||||||
|
</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>
|
||||||
<div class="list-footer">
|
<div class="list-footer">
|
||||||
<h3>Site Preferences</h3>
|
<h3>Site Preferences</h3>
|
||||||
<div class="list-footer-btns">
|
<div class="list-footer-btns">
|
||||||
|
|
|
||||||
124
data/style.css
124
data/style.css
|
|
@ -545,10 +545,6 @@ text {
|
||||||
strokewidth: 3px;
|
strokewidth: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
line{
|
|
||||||
stroke: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greyed-out{
|
.greyed-out{
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
|
|
@ -826,3 +822,123 @@ line{
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Legend for Graph */
|
||||||
|
|
||||||
|
.graph-legend{
|
||||||
|
margin-right: 30px;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .legend-header{
|
||||||
|
overflow: hidden;
|
||||||
|
border-bottom: 1px solid #fff;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-header div:first-of-type{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-header div:last-of-type{
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend header{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #4CC7E6;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .legend-toggle{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .legend-controls{
|
||||||
|
clear: both;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .column{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .column .btn{
|
||||||
|
width: 170px;
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .column .btn:hover{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .column .btn.active{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .legend-canvas-small,
|
||||||
|
.graph-legend .legend-canvas-large{
|
||||||
|
height: 18px;
|
||||||
|
position: relative;
|
||||||
|
top: 7px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend .legend-canvas-small{
|
||||||
|
width: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
|
||||||
26
data/ui.js
26
data/ui.js
|
|
@ -400,3 +400,29 @@ document.querySelector(".connections-list ul").addEventListener("click", functio
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* Legend & Controls for Graph ===================================== */
|
||||||
|
|
||||||
|
document.querySelector(".graph-legend .legend-controls").addEventListener("click", function(event){
|
||||||
|
if (event.target.mozMatchesSelector(".btn, .btn *")){
|
||||||
|
var btn = event.target;
|
||||||
|
while(btn.mozMatchesSelector('.btn *')){
|
||||||
|
btn = btn.parentElement;
|
||||||
|
}
|
||||||
|
btn.classList.toggle("active");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector(".graph-legend .legend-toggle").addEventListener("click", function(event){
|
||||||
|
var controlsSection = document.querySelector(".graph-legend .legend-controls");
|
||||||
|
if ( controlsSection.classList.contains("hidden") ){
|
||||||
|
controlsSection.classList.remove("hidden");
|
||||||
|
event.target.innerHTML = "Hide";
|
||||||
|
}else{
|
||||||
|
controlsSection.classList.add("hidden");
|
||||||
|
event.target.innerHTML = "Show";
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче