зеркало из 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:
Mavis Ou
Коммит
b11b12a906
|
|
@ -1,3 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
var visualizations = {};
|
||||
var currentVisualization;
|
||||
var allConnections = [];
|
||||
|
|
|
|||
|
|
@ -11,9 +11,8 @@
|
|||
<div class="main">
|
||||
<aside class="controls">
|
||||
<header>
|
||||
<div class="collusion-icon">
|
||||
</div>
|
||||
<img class="logo" src="image/collusion_wordmark_temp.png" />
|
||||
<div class="collusion-icon"></div>
|
||||
<img class="logo" src="icons/collusion_wordmark_temp.png" />
|
||||
</header>
|
||||
<div class="btn_group visualization">
|
||||
<div data-view class="dropdown_button">
|
||||
|
|
@ -50,17 +49,17 @@
|
|||
</div>
|
||||
<div class="btn">
|
||||
<a class="upload">
|
||||
<img src="image/collusion_icon_share.png" />share
|
||||
<img src="image/collusion_icon_share.png" />Share
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a class="download">
|
||||
<img src="image/collusion_icon_save.png" />download
|
||||
<img src="image/collusion_icon_save.png" />Download
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a class="reset-data">
|
||||
<img src="image/collusion_icon_reset.png" />reset
|
||||
<img src="image/collusion_icon_reset.png" />Reset
|
||||
</a>
|
||||
</div>
|
||||
<!-- <ul class="controls_options">
|
||||
|
|
@ -95,8 +94,8 @@
|
|||
<h3></h3>
|
||||
<span>3RD PARTY</span>
|
||||
</div>
|
||||
<div class="stat first-party-sites">
|
||||
<h3></h3>
|
||||
<div class="stat 1st-party-connections">
|
||||
<h3>124</h3>
|
||||
<span>1ST PARTY</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,17 +104,19 @@
|
|||
<div class="holder">
|
||||
<div>
|
||||
<h2 class="title"></h2>
|
||||
<span><span class="blue-text"><b>First Access </b></span>Date</span><br>
|
||||
<span><span class="blue-text"><b>Last Access </b></span>Date</span>
|
||||
</div>
|
||||
<!--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"> </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">17</b> Connection</h3>
|
||||
<span>Made to/from this site</span>
|
||||
</div>
|
||||
<div class="connections-list">
|
||||
<h3 class="num-connected-sites blue-text">___ Connected Sites</h3>
|
||||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -139,7 +140,7 @@
|
|||
<!-- LEGEND & CONTROLS for Graph ================================ -->
|
||||
<div class="graph-footer hidden">
|
||||
<section class="legend-header">
|
||||
<div><header>LEGEND & CONTROLS</header></div>
|
||||
<div><header class="blue-text">LEGEND & CONTROLS</header></div>
|
||||
<div><a class="legend-toggle">Hide</a></div>
|
||||
</section>
|
||||
<section class="legend-controls">
|
||||
|
|
@ -215,7 +216,7 @@
|
|||
<!-- LEGEND & CONTROLS for Clock ================================ -->
|
||||
<div class="clock-footer hidden">
|
||||
<section class="legend-header">
|
||||
<div><header>LEGEND & CONTROLS</header></div>
|
||||
<div><header class="blue-text">LEGEND & CONTROLS</header></div>
|
||||
<div><a class="legend-toggle">Hide</a></div>
|
||||
</section>
|
||||
<section class="legend-controls">
|
||||
|
|
@ -248,10 +249,11 @@
|
|||
</div>
|
||||
<div class="btn">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<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>
|
||||
</svg>-->
|
||||
Blocked Sites
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -283,15 +285,46 @@
|
|||
</section>
|
||||
</div>
|
||||
<div class="list-footer">
|
||||
<h3 class="blue-text">SITE PREFERENCES</h3>
|
||||
<div class="list-footer-btns">
|
||||
<div class="block-pref btn"><a>Block Site</a></div>
|
||||
<div class="hide-pref btn"><a>Hide Site</a></div>
|
||||
<div class="watch-pref btn"><a>Watch Site</a></div>
|
||||
<div class="no-pref btn"><a>Remove</a></div>
|
||||
<div class="btn-spacer"></div>
|
||||
<div class="toggle-hidden btn orange"><a>Hide Hidden</a></div>
|
||||
<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">
|
||||
<div class="block-pref btn active">
|
||||
<a>
|
||||
<img src="icons/collusion_icon_block.png" />
|
||||
Block Site
|
||||
</a>
|
||||
</div>
|
||||
<div class="hide-pref btn active">
|
||||
<a>
|
||||
<img src="icons/collusion_icon_hide.png" />
|
||||
Hide Site
|
||||
</a>
|
||||
</div>
|
||||
<div class="watch-pref btn active">
|
||||
<a>
|
||||
<img src="icons/collusion_icon_watch.png" />
|
||||
Watch Site
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="column">
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div><!-- .stage-stack -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
function initMap(){
|
||||
|
||||
var oriMapViewBox = mapcanvas.getAttribute('viewBox');
|
||||
|
|
@ -7,10 +9,10 @@ document.querySelector('#content').addEventListener('click', function(event){
|
|||
// click could happen on .node or an element inside of .node
|
||||
if (event.target.mozMatchesSelector('.node, .node *')){
|
||||
var node = event.target;
|
||||
if (node.mozMatchesSelector('[type=checkbox], td [type=checkbox]')) return;
|
||||
while(node.mozMatchesSelector('.node *')){
|
||||
node = node.parentElement;
|
||||
}
|
||||
if (node.querySelector('[type=checkbox]')) return;
|
||||
// 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);
|
||||
}else{
|
||||
|
|
@ -76,7 +78,13 @@ 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){
|
||||
|
|
@ -99,6 +107,11 @@ function updateInfo(nodeName){
|
|||
}
|
||||
}
|
||||
|
||||
var HTMLnode = document.querySelector('[data-name="'+nodeName+'"]');
|
||||
document.querySelector('.info-first-access').textContent = getLongDate(HTMLnode.children[4].textContent);
|
||||
document.querySelector('.info-last-access').textContent = getLongDate(HTMLnode.children[5].textContent);
|
||||
|
||||
|
||||
// update the connections list
|
||||
var nodeList = aggregate.nodeForKey(nodeName);
|
||||
var htmlList = "";
|
||||
|
|
@ -109,8 +122,7 @@ function updateInfo(nodeName){
|
|||
numConnectedSites++;
|
||||
}
|
||||
}
|
||||
document.querySelector(".num-connected-sites").innerHTML
|
||||
= ( numConnectedSites > 1) ? ( numConnectedSites + " Connected Sites" ) : ( numConnectedSites + " Connected Site" ) ;
|
||||
document.querySelector(".num-connected-sites").textContent = numConnectedSites;
|
||||
document.querySelector(".connections-list ul").innerHTML = htmlList;
|
||||
|
||||
document.querySelector("#content").classList.add("showinfo");
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
'use strict';
|
||||
|
||||
// List Visualization
|
||||
|
||||
// Display data in tabular format
|
||||
|
||||
(function(visualizations){
|
||||
"use strict";
|
||||
|
||||
var list = new Emitter();
|
||||
visualizations.list = list;
|
||||
|
|
@ -86,7 +87,6 @@ function initList(){
|
|||
});
|
||||
// Add handler for rows
|
||||
document.querySelector('.list-table').addEventListener('click', function(event){
|
||||
// FIXME: This selector is too broad
|
||||
var url = event.target.parentNode.dataset.sortKey;
|
||||
if (event.target.mozMatchesSelector('td:nth-child(1)')){
|
||||
var checkbox = event.target.querySelector('input')
|
||||
|
|
@ -302,6 +302,10 @@ function initializeHandlers(){
|
|||
selectAllRows(event.target.checked);
|
||||
}, false);
|
||||
|
||||
document.querySelector('.list-footer').querySelector(".legend-toggle").addEventListener("click", function(event){
|
||||
toggleLegendSection(event.target,document.querySelector('.list-footer'));
|
||||
});
|
||||
|
||||
document.querySelector('.stage-stack').addEventListener('click', function(event){
|
||||
var target = event.target;
|
||||
if(target.mozMatchesSelector('.block-pref a')){
|
||||
|
|
|
|||
|
|
@ -137,12 +137,6 @@ h3 {
|
|||
background: #303539;
|
||||
line-height: 28px;
|
||||
}
|
||||
.btn.orange a{
|
||||
background: rgb(250, 105, 0);
|
||||
}
|
||||
.btn.orange a:hover{
|
||||
background: rgb(200, 75, 0);
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options.expanded a:hover{
|
||||
cursor: pointer;
|
||||
|
|
@ -324,11 +318,14 @@ h3 {
|
|||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
<<<<<<< HEAD
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.connections-list ul li{
|
||||
padding:2px 2px 2px 10px;
|
||||
=======
|
||||
>>>>>>> azlen-c2_fresh_start
|
||||
}
|
||||
|
||||
.highlight-country{
|
||||
|
|
@ -352,10 +349,10 @@ h3 {
|
|||
}
|
||||
|
||||
.blue-text {
|
||||
color: #64aac5;
|
||||
color: #4CC7E6;
|
||||
}
|
||||
.dark-blue-text{
|
||||
color:#317792;
|
||||
color: #0C87A6;
|
||||
}
|
||||
|
||||
.info .filters{
|
||||
|
|
@ -402,17 +399,22 @@ h3 {
|
|||
}
|
||||
|
||||
.connections-list ul{
|
||||
margin-top:50px;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
list-style-type: none;
|
||||
min-height: 75px;
|
||||
min-height: 150px;
|
||||
overflow-y: auto;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.connections-list ul li{
|
||||
padding:2px 2px 2px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.connections-list ul li:hover,
|
||||
.settings-page ul li:hover{
|
||||
cursor: pointer;
|
||||
background-color: #475B61;
|
||||
}
|
||||
|
||||
|
|
@ -442,35 +444,6 @@ h3 {
|
|||
/*margin-right: 300px;*/
|
||||
}
|
||||
|
||||
.list-footer{
|
||||
flex: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list .list-footer{
|
||||
display: block;
|
||||
}
|
||||
.list-footer h3{
|
||||
font-size: 12px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.list-footer-btns{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
}
|
||||
.list-footer-btns .btn{
|
||||
margin-right:20px;
|
||||
color: rgb(234, 234, 234);
|
||||
border: 0;
|
||||
}
|
||||
.list-footer-btns .btn a{
|
||||
padding-right:10px;
|
||||
}
|
||||
.btn-spacer{
|
||||
flex:1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SVG STYLES */
|
||||
|
|
@ -734,7 +707,7 @@ text {
|
|||
.preferences{
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
[data-pref=watch] .preferences{
|
||||
|
|
@ -906,10 +879,11 @@ text {
|
|||
|
||||
|
||||
|
||||
/* Legend for Graph and Clock */
|
||||
/* Legend for Graph and Clock and Site Preferences for List*/
|
||||
|
||||
.graph-footer,
|
||||
.clock-footer{
|
||||
.clock-footer,
|
||||
.list-footer{
|
||||
margin-right: 30px;
|
||||
flex: none;
|
||||
}
|
||||
|
|
@ -931,7 +905,6 @@ text {
|
|||
.legend-header header{
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
color: #4CC7E6;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -972,6 +945,8 @@ text {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.legend-controls .legend-canvas-small,
|
||||
.legend-controls .legend-canvas-large{
|
||||
height: 18px;
|
||||
|
|
@ -980,6 +955,12 @@ text {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.legend-controls .column .btn img{
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.legend-controls .legend-canvas-small{
|
||||
width: 17px;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче