mozilla
/
lightbeam
зеркало из https://github.com/mozilla/lightbeam.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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

This commit is contained in:
dethe 2013-07-10 15:07:35 -07:00
Родитель 2d99736d57 e508dc7de7
Коммит df4895cb37
4 изменённых файлов: 255 добавлений и 8 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

12
data/collusion.js
Просмотреть файл

@ -24,7 +24,7 @@ const STATUS = 12;
const CACHEABLE = 13;
const FROM_PRIVATE_MODE = 14;
const vizcanvas = document.querySelector('.vizcanvas');
var vizcanvas = document.querySelector('.vizcanvas');
var mapDocument, mapcanvas;
document.querySelector('.world-map').addEventListener('load', function(event){
mapDocument = event.target.contentDocument;
@ -83,9 +83,6 @@ function elem(name, attributes, children){
window.addEventListener('load', function(evt){
addon.emit("privateWindowCheck");
// 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('.btn_group.visualization [data-selected]').classList.remove("collapsed");
switchVisualization(localStorage.visualization.toLowerCase() || 'graph');
@ -140,6 +137,13 @@ function resetAddtionalUI(){
clearAllBubbles();
// show vizcanvas again in case it is hidden
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
Просмотреть файл

@ -118,6 +118,107 @@
</defs>
</svg>
</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">
<h3>Site Preferences</h3>
<div class="list-footer-btns">

124
data/style.css
Просмотреть файл

@ -545,10 +545,6 @@ text {
strokewidth: 3px;
}
line{
stroke: #FFF;
}
.greyed-out{
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
Просмотреть файл

@ -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";
}
});