зеркало из https://github.com/mozilla/lightbeam.git
Merge branch 'c2_fresh_start' of https://github.com/mozilla/collusion into 261_implement_filtering
This commit is contained in:
dethe
Коммит
542ef43f92
|
|
@ -293,11 +293,11 @@ function drawText(){
|
|||
|
||||
function timeNow(){
|
||||
var d = new Date();
|
||||
return (d.getHours() % 12) + ':' + d.toLocaleFormat('%M') + ['am','pm'][Math.floor(d.getHours() / 12)];
|
||||
return ( (d.getHours() == 12) ? 12 : (d.getHours() % 12) ) + ':' + d.toLocaleFormat('%M') + ['AM','PM'][Math.floor(d.getHours() / 12)];
|
||||
}
|
||||
|
||||
function dateNow(){
|
||||
return new Date().toLocaleFormat('%e %B %Y').trim();
|
||||
return formattedDate(new Date());
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,6 @@ window.addEventListener('load', function(evt){
|
|||
addon.emit("privateWindowCheck");
|
||||
// Wire up events
|
||||
document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected", true);
|
||||
document.querySelector('.btn_group.visualization [data-selected]').classList.remove("collapsed");
|
||||
var visualization = localStorage.visualization ? ( localStorage.visualization.toLowerCase() ) : "graph";
|
||||
switchVisualization(visualization);
|
||||
if ( localStorage.userHasOptedIntoSharing && localStorage.userHasOptedIntoSharing === 'true' ){
|
||||
|
|
@ -324,14 +323,28 @@ function saveToLocalStorage(key,value){
|
|||
}
|
||||
|
||||
|
||||
/****************************************
|
||||
* Format date string
|
||||
*/
|
||||
function formattedDate(date,format){
|
||||
var d = ( typeof date == "number" ) ? new Date(date) : date;
|
||||
var month = [ "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec" ][d.getMonth()];
|
||||
var formatted = month + " " + d.getDate() + ", " + d.getFullYear();
|
||||
if ( format == "long" ){
|
||||
var dayInWeek = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ][d.getDay()];
|
||||
formatted = dayInWeek + ", " + formatted + " " + ( (d.getHours() == 12) ? 12 : (d.getHours() % 12) ) + ':' + d.toLocaleFormat('%M') + ['AM','PM'][Math.floor(d.getHours() / 12)];
|
||||
}
|
||||
return formatted;
|
||||
}
|
||||
|
||||
|
||||
/****************************************
|
||||
* update Stats Bar
|
||||
*/
|
||||
|
||||
function updateStatsBar(){
|
||||
var dateSince = "just now";
|
||||
if ( allConnections.length > 0 ){
|
||||
dateSince = new Date(allConnections[0][2]).toDateString();
|
||||
dateSince = formattedDate(allConnections[0][2]);
|
||||
}
|
||||
document.querySelector(".top-bar .date-gathered").innerHTML = dateSince;
|
||||
document.querySelector(".top-bar .third-party-sites").innerHTML = aggregate.trackerCount + " THIRD PARTY SITES";
|
||||
|
|
|
|||
|
|
@ -14,14 +14,10 @@
|
|||
<div class="collusion-icon"></div>
|
||||
<img class="logo" src="icons/Collusion---Wordmark-Beta.png" />
|
||||
</header>
|
||||
|
||||
<div class="section-header">VISUALIZATION</div>
|
||||
<div class="btn_group visualization">
|
||||
<div data-view class="dropdown_button">
|
||||
<span>VISUALIZATION</span>
|
||||
<div class="arrow">
|
||||
<i class="icon-sort-down hidden"></i><i class="icon-sort-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div data-list class="dropdown_options expanded">
|
||||
<div data-list class="dropdown_options">
|
||||
<a data-value="Graph">
|
||||
<img src="image/collusion_icon_graph.png" />graph
|
||||
</a>
|
||||
|
|
@ -33,20 +29,16 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-header">FILTER</div>
|
||||
<div class="btn_group session">
|
||||
<div data-view class="dropdown_button">
|
||||
<span>SESSION</span>
|
||||
<div class="arrow">
|
||||
<i class="icon-sort-down hidden"></i><i class="icon-sort-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div data-list class="dropdown_options expanded">
|
||||
<div data-list class="dropdown_options">
|
||||
<a data-value="recent">recent site</a>
|
||||
<a data-value="last10sites">last 10 sites</a>
|
||||
<a data-value="daily">daily</a>
|
||||
<a data-value="weekly">weekly</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-header">DATA</div>
|
||||
<div class="btn">
|
||||
<a class="download">
|
||||
<img src="image/collusion_icon_download2.png" />Download
|
||||
|
|
@ -422,13 +414,14 @@
|
|||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<!-- SITE PREFERENCES for List ================================ -->
|
||||
<div class="list-footer">
|
||||
<section class="legend-header">
|
||||
<div><header class="blue-text">SITE PREFERENCES</header></div>
|
||||
<div><a class="legend-toggle">Hide</a></div>
|
||||
</section>
|
||||
<section class="legend-controls">
|
||||
<section class="column">
|
||||
<section class="align-left">
|
||||
<div class="block-pref btn active">
|
||||
<a>
|
||||
<img src="icons/collusion_icon_block.png" />
|
||||
|
|
@ -448,19 +441,17 @@
|
|||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="column">
|
||||
<section class="align-right">
|
||||
<div class="no-pref btn active">
|
||||
<a>
|
||||
Remove Preference
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="column">
|
||||
<div class="toggle-hidden btn active orange">
|
||||
<a>
|
||||
Hide Hidden
|
||||
Clear Preference
|
||||
</a>
|
||||
</div>
|
||||
<div class="toggle-hidden btn active orange">
|
||||
<a>
|
||||
Hide Hidden Sites
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -477,7 +468,6 @@
|
|||
<script src="aggregate.js"></script>
|
||||
<!-- from https://github.com/Nycto/PicoModal -->
|
||||
<script src="picoModal-1.0.0.min.js"></script>
|
||||
<script src="infobar.js"></script>
|
||||
<script src="tooltip.js"></script>
|
||||
<script src="ui.js"></script>
|
||||
<!-- Map -->
|
||||
|
|
|
|||
|
|
@ -81,14 +81,6 @@ function updateMap(countryCode){
|
|||
setZoom(newViewBox, mapcanvas);
|
||||
}
|
||||
|
||||
function getLongDate(Short){
|
||||
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
|
||||
var number_deco = ['st','nd','rd','th','th','th','th','th','th'];
|
||||
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
|
||||
var array = Short.split('/');
|
||||
return days[new Date(Number(array[2]), Number(array[0])-1, Number(array[1])).getDay()]+', '+months[Number(array[0])-1]+' '+Number(array[1])+number_deco[Number(array[0].slice(-1))]+', '+array[2];
|
||||
}
|
||||
|
||||
// updates info on the info panel
|
||||
function updateInfo(nodeName){
|
||||
|
||||
|
|
@ -108,8 +100,8 @@ function updateInfo(nodeName){
|
|||
htmlList = htmlList + "<li>" + key + "</li>";
|
||||
numConnectedSites++;
|
||||
}else{
|
||||
firstAccess = getLongDate( nodeList[key].firstAccess.toLocaleDateString() );
|
||||
lastAccess = getLongDate( nodeList[key].lastAccess.toLocaleDateString() );
|
||||
firstAccess = formattedDate( nodeList[key].firstAccess,"long");
|
||||
lastAccess = formattedDate( nodeList[key].lastAccess,"long");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -417,7 +417,9 @@ function initializeHandlers(){
|
|||
document.querySelector('.stage-stack').addEventListener('click', function(event){
|
||||
var target = event.target;
|
||||
if(target.mozMatchesSelector('.block-pref a')){
|
||||
dialog( { "title": "Block Sites",
|
||||
dialog( { "name": "blockDialog",
|
||||
"dnsPrompt": true,
|
||||
"title": "Block Sites",
|
||||
"message": "This will prevent you from connecting to the selected website(s) and can possibly break the web."
|
||||
},function(confirmed){
|
||||
if ( confirmed ){
|
||||
|
|
@ -426,7 +428,9 @@ function initializeHandlers(){
|
|||
}
|
||||
);
|
||||
}else if (target.mozMatchesSelector('.hide-pref a')){
|
||||
dialog( { "title": "Hide Sites",
|
||||
dialog( { "name": "hideDialog",
|
||||
"dnsPrompt": true,
|
||||
"title": "Hide Sites",
|
||||
"message": "Data of the selected website(s) will be hidden in all the Visualizations."
|
||||
},function(confirmed){
|
||||
if ( confirmed ){
|
||||
|
|
|
|||
192
data/style.css
192
data/style.css
|
|
@ -50,7 +50,6 @@ h3 {
|
|||
z-index: 5;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #404850;
|
||||
|
|
@ -83,6 +82,13 @@ h3 {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.controls .section-header{
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
margin: 15px 0 5px 5px;
|
||||
}
|
||||
|
||||
/* Dialog/Popup Styling ================================ */
|
||||
|
||||
.pico-content{
|
||||
|
|
@ -111,6 +117,10 @@ h3 {
|
|||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pico-content .dialog-dns{
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.pico-content .dialog-ok,
|
||||
.pico-content .dialog-cancel{
|
||||
display: inline-block;
|
||||
|
|
@ -127,24 +137,22 @@ h3 {
|
|||
|
||||
/* Button Styling ================================ */
|
||||
|
||||
.btn a:hover{
|
||||
background: #475B61;
|
||||
}
|
||||
|
||||
.btn_group,
|
||||
.btn{
|
||||
margin-bottom: 15px;
|
||||
background: #25292D;
|
||||
margin-bottom: 5px;
|
||||
background: #171E25;
|
||||
font-size: 7pt;
|
||||
letter-spacing: 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_button{
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
border-radius: 5px 0 0 0;
|
||||
padding-left: 10px;
|
||||
.btn a:hover,
|
||||
.btn_group .dropdown_options a:hover{
|
||||
background: #6FC3E5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options a:hover{
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.btn_group a.selected_time,
|
||||
|
|
@ -152,21 +160,8 @@ h3 {
|
|||
color: #EAEAEA;
|
||||
}
|
||||
|
||||
.btn_group .arrow{
|
||||
float: right;
|
||||
padding: 0 10px;
|
||||
background: #12181B;
|
||||
border-radius: 0 5px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn a{
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn_group div.dropdown_options a,
|
||||
|
|
@ -174,30 +169,40 @@ h3 {
|
|||
margin: 0;
|
||||
display: block;
|
||||
padding-left: 10px;
|
||||
background: #303539;
|
||||
background: #171E25;
|
||||
line-height: 28px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options.expanded a:hover{
|
||||
cursor: pointer;
|
||||
background: #475B61;
|
||||
.btn_group .dropdown_options a{
|
||||
border-radius: 0;
|
||||
border-top: 2px solid #12181B;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options a[data-selected]{
|
||||
border-radius: 0 0 5px 5px;
|
||||
background: #5F6771;
|
||||
background: #73A4B8;
|
||||
margin: 0 2px;
|
||||
border-top: 2px solid #6FC3E5;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options.expanded a{
|
||||
border-radius: 0;
|
||||
.btn_group .dropdown_options a:first-child[data-selected]{
|
||||
box-shadow: 0 -2px #6FC3E5;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options.expanded a:last-child{
|
||||
border-radius: 0 0 5px 5px;
|
||||
.btn_group .dropdown_options a:last-child[data-selected]{
|
||||
box-shadow: none;
|
||||
border-top: 2px solid #6FC3E5;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options a.collapsed{
|
||||
display: none;
|
||||
|
||||
.btn_group .dropdown_options a:first-child{
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options a:last-child{
|
||||
border-radius: 0 0 3px 3px;
|
||||
box-shadow: 0 5px #12181B;
|
||||
}
|
||||
|
||||
.btn_group img,
|
||||
|
|
@ -645,14 +650,12 @@ text {
|
|||
.sourceSites{
|
||||
fill: #FFF;
|
||||
stroke: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.target,
|
||||
.targetSites{
|
||||
fill: #FFDD64;
|
||||
stroke: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.source.highlighted,
|
||||
|
|
@ -769,23 +772,23 @@ text {
|
|||
}
|
||||
|
||||
.watchedSites{
|
||||
fill: #268CB7 !important;
|
||||
fill: #6FC3E5 !important;
|
||||
}
|
||||
|
||||
.watch-text{
|
||||
color: #268CB7;
|
||||
color: #6FC3E5;
|
||||
}
|
||||
|
||||
.blockedSites{
|
||||
fill: #FF0000 !important;
|
||||
fill: #E02A61 !important;
|
||||
}
|
||||
|
||||
.block-text{
|
||||
color: #FF0000;
|
||||
color: #E02A61;
|
||||
}
|
||||
|
||||
.cookie-text{
|
||||
color: #800080;
|
||||
color: #6C0AAA;
|
||||
}
|
||||
|
||||
.edge{
|
||||
|
|
@ -810,7 +813,7 @@ text {
|
|||
.cookieYes.coloured,
|
||||
.cookieBoth.coloured,
|
||||
.cookies{
|
||||
stroke: #800080;
|
||||
stroke: #6C0AAA;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
|
|
@ -1028,23 +1031,6 @@ text {
|
|||
float: left;
|
||||
}
|
||||
|
||||
.legend-controls .column .btn{
|
||||
width: 170px;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.legend-controls .column .btn:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.legend-controls .column .btn.active{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.legend-controls .legend-canvas-small,
|
||||
.legend-controls .legend-canvas-large{
|
||||
height: 18px;
|
||||
|
|
@ -1066,3 +1052,81 @@ text {
|
|||
.legend-controls .legend-canvas-large{
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.graph-footer .btn,
|
||||
.clock-footer .btn{
|
||||
width: 170px;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.graph-footer .btn a,
|
||||
.clock-footer .btn a{
|
||||
border-top: 2px solid #171E25;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.graph-footer .btn a:hover,
|
||||
.clock-footer .btn a:hover{
|
||||
border-top: 2px solid #fff !important;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.graph-footer .btn.active a,
|
||||
.clock-footer .btn.active a{
|
||||
border-top: 2px solid #6FC3E5;
|
||||
background: #73A4B8;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.list-footer .align-left,
|
||||
.list-footer .align-right{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-footer .align-left{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.list-footer .align-right{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.list-footer .align-left .btn{
|
||||
float: left;
|
||||
width: 140px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.list-footer .align-right .btn{
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.list-footer .align-right .btn a{
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.list-footer .btn a{
|
||||
background: #888;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.list-footer .btn a:hover{
|
||||
background: #6FC3E5
|
||||
}
|
||||
|
||||
.list-footer .btn.block-pref{
|
||||
box-shadow: 0 2px #E02A61;
|
||||
}
|
||||
|
||||
.list-footer .btn.hide-pref,
|
||||
.list-footer .btn.toggle-hidden{
|
||||
box-shadow: 0 2px #FE7E00;
|
||||
}
|
||||
|
||||
.list-footer .btn.watch-pref{
|
||||
box-shadow: 0 2px #6FC3E5;
|
||||
}
|
||||
|
|
|
|||
33
data/ui.js
33
data/ui.js
|
|
@ -11,18 +11,6 @@ function toArray(nl){
|
|||
|
||||
function dropdownGroup(btnGroup, callback){
|
||||
callback = callback || function(){};
|
||||
|
||||
var arrow = btnGroup.querySelector(".arrow");
|
||||
arrow.addEventListener("click", function(event){
|
||||
var otherOptions = btnGroup.querySelectorAll(".dropdown_options a:not([data-selected])");
|
||||
arrow.querySelector(".icon-sort-down").classList.toggle("hidden");
|
||||
arrow.querySelector(".icon-sort-up").classList.toggle("hidden");
|
||||
btnGroup.querySelector(".dropdown_options").classList.toggle("expanded");
|
||||
toArray(otherOptions).forEach(function(option){
|
||||
option.classList.toggle("collapsed");
|
||||
});
|
||||
}, false);
|
||||
|
||||
var allOptions = btnGroup.querySelectorAll(".dropdown_options a");
|
||||
toArray(allOptions).forEach(function(option){
|
||||
option.addEventListener("click", function(e){
|
||||
|
|
@ -149,6 +137,7 @@ document.querySelector('.reset-data').addEventListener('click', function(){
|
|||
delete localStorage[key];;
|
||||
}
|
||||
});
|
||||
delete localStorage.dnsDialogs;
|
||||
updateStatsBar();
|
||||
}
|
||||
}
|
||||
|
|
@ -400,11 +389,19 @@ function legendBtnClickHandler(legendElm){
|
|||
|
||||
/* Dialog / Popup ===================================== */
|
||||
|
||||
// options: name, title, message, type, oneTime
|
||||
// options: name, title, message, type, dnsPrompt(Do Not Show)
|
||||
function dialog(options,callback){
|
||||
var dnsPref = localStorage.dnsDialogs || "[]";
|
||||
dnsPref = JSON.parse(dnsPref);
|
||||
if ( dnsPref.indexOf(options.name) > -1 ) return; // according to user pref, do not show this dialog
|
||||
showDialog(options,dnsPref,callback);
|
||||
}
|
||||
|
||||
function showDialog(options,dnsPref,callback){
|
||||
var titleBar = "<div class='dialog-title'>" + (options.title || " ") + "</div>";
|
||||
var messageBody = "<div class='dialog-message'>" + (options.message || " ") + "</div>";
|
||||
var controls = "<div class='dialog-controls'>"+
|
||||
"<div class='dialog-dns hidden'><input type='checkbox' /> Do not show this again.</div>" +
|
||||
"<div class='pico-close dialog-cancel'>Cancel</div>" +
|
||||
"<div class='pico-close dialog-ok'>OK</div>" +
|
||||
"</div>";
|
||||
|
|
@ -420,12 +417,22 @@ function dialog(options,callback){
|
|||
}
|
||||
});
|
||||
|
||||
if ( options.dnsPrompt ){ // show Do Not Show Again prompt
|
||||
document.querySelector(".dialog-dns").classList.remove("hidden");
|
||||
}
|
||||
if ( options.type == "alert" ){
|
||||
document.querySelector(".dialog-cancel").classList.add("hidden");
|
||||
}
|
||||
|
||||
toArray(document.querySelectorAll(".pico-close")).forEach(function(btn){
|
||||
btn.addEventListener("click", function(event){
|
||||
if ( options.dnsPrompt && (event.target.innerHTML == "OK") ){ // Do Not Show
|
||||
var checked = document.querySelector(".dialog-dns input").checked;
|
||||
if ( checked ){ // user does not want this dialog to show again
|
||||
dnsPref.push(options.name);
|
||||
localStorage.dnsDialogs = JSON.stringify(dnsPref);
|
||||
}
|
||||
}
|
||||
modal.close();
|
||||
callback( (event.target.innerHTML == "OK") ? true : false );
|
||||
});
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче