This commit is contained in:
dethe 2013-08-02 15:27:11 -07:00
Родитель e3908a99c3 59abce62d6
Коммит acd80f1d28
12 изменённых файлов: 276 добавлений и 256 удалений

Просмотреть файл

@ -89,7 +89,6 @@ function elem(name, attributes, children){
};
window.addEventListener('load', function(evt){
addon.emit("privateWindowCheck");
// Wire up events
document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected", true);
var visualization = localStorage.visualization ? ( localStorage.visualization.toLowerCase() ) : "graph";
@ -105,32 +104,6 @@ window.addEventListener('beforeunload', function(){
saveConnections(allConnections);
}, false);
addon.on("isPrivateWindow", function(isPrivate){
if ( !localStorage.privateBrowsingMsgShown ){
if ( isPrivate ){
dialog( { "type": "alert",
"title": "Data Collected while Private Browsing",
"message":
"You've launched Collusion in a Private Browsing Window. " +
"Data collected under Private Browsing Windows will not be perserved or stored. " +
"It will not appear again once the Window is close."
}
);
}else{
dialog( { "type": "alert",
"title": "Data Collected while Private Browsing",
"message":
"Data collected under Private Browsing Windows will not be perserved or stored. " +
"It will not appear again once the Window is close."
}
);
}
}
localStorage.privateBrowsingMsgShown = true;
});
function initCap(str){
return str[0].toUpperCase() + str.slice(1);
}
@ -224,11 +197,12 @@ function dateAsKey(timestamp){
function startSharing(callback){
dialog( { "title": "Upload Data",
"message":
'You are about to start uploading anonymized data to the Mozilla Collusion server. ' +
'Your data will continue to be uploaded periodically until you turn off sharing. </br>' +
'For more information about the data we upload, how it is anonymized, and what Mozilla\'s ' +
'privacy policies are, please visit http://ItsOurData.com/privacy/. </br>' +
'By clicking OK you are agreeing to share your data under those terms.'
'<p>You are about to start uploading anonymized data to the Mozilla Collusion server. ' +
'Your data will continue to be uploaded periodically until you turn off sharing. </p>' +
'<p>For more information about the data we upload, how it is anonymized, and what Mozilla\'s ' +
'privacy policies are, please visit <a href="http://mozilla.org/collusion">http://mozilla.org/collusion</a> </p>' +
'<p>By clicking OK you are agreeing to share your data under those terms.</p>',
"imageUrl": "image/collusion_popup_warningsharing.png"
},
function(confirmed){
if ( confirmed ){
@ -243,11 +217,11 @@ function startSharing(callback){
function stopSharing(callback){
dialog( { "title": "Stop Uploading Data",
"message":
'You are about to stop sharing data with the Mozilla Collusion server.</br>' +
'By clicking OK you will no longer be uploading data.'
'<p>You are about to stop sharing data with the Mozilla Collusion server.</p>' +
'<p>By clicking OK you will no longer be uploading data.</p>',
"imageUrl": "image/collusion_popup_stopsharing2.png"
},
function(confirmed){
console.log(confirmed);
if ( confirmed ){
localStorage.userHasOptedIntoSharing = false;
if (uploadTimer){

Двоичные данные
data/image/collusion_popup_blocked.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 7.8 KiB

Двоичные данные
data/image/collusion_popup_hidden.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 13 KiB

Двоичные данные
data/image/collusion_popup_privacy.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 12 KiB

Двоичные данные
data/image/collusion_popup_stopsharing2.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 5.1 KiB

Двоичные данные
data/image/collusion_popup_warningreset.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 11 KiB

Двоичные данные
data/image/collusion_popup_warningsharing.png Executable file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 13 KiB

Просмотреть файл

@ -15,7 +15,7 @@
<img class="logo" src="icons/Collusion---Wordmark-Beta.png" />
</header>
<div class="section-header">VISUALIZATION</div>
<div class="section-header all-cap-header">VISUALIZATION</div>
<div class="btn_group visualization">
<div data-list class="dropdown_options">
<a data-value="Graph">
@ -29,7 +29,7 @@
</a>
</div>
</div>
<div class="section-header">FILTER</div>
<div class="section-header all-cap-header">FILTER</div>
<div class="btn_group session">
<div data-list class="dropdown_options">
<a data-value="recent">recent site</a>
@ -38,7 +38,7 @@
<a data-value="weekly">weekly</a>
</div>
</div>
<div class="section-header">DATA</div>
<div class="section-header all-cap-header">DATA</div>
<div class="btn">
<a class="download">
<img src="image/collusion_icon_download2.png" />Download
@ -59,20 +59,20 @@
<div class="top-bar">
<div class="stats-section">
<section>
<span class="context-label">DATA GATHERED SINCE </span>
<div class="stat date-gathered"></div>
<div class="all-cap-header">DATA GATHERED SINCE</div>
<div class="stat date-gathered large-header"></div>
</section>
<section>
<span class="context-label">YOU HAVE VISITED</span>
<div class="stat first-party-sites"></div>
<div class="all-cap-header">YOU HAVE VISITED</div>
<div class="stat first-party-sites large-header"></div>
</section>
<section>
<span class="context-label">YOU HAVE CONNECTED WITH</span>
<div class="stat third-party-sites"></div>
<div class="all-cap-header">YOU HAVE CONNECTED WITH</div>
<div class="stat third-party-sites large-header"></div>
</section>
</div>
<div class="sharing-section">
<div class="label">SHARING DATA</div>
<div class="label all-cap-header">SHARING DATA</div>
<div class="toggle-btn share-btn">
<label><input type="checkbox" name="" id="" />
<div class="toggle-btn-innner">
@ -89,19 +89,19 @@
<!-- Site Profile starts ================================= -->
<div class="site-profile-content hidden">
<div>
<h2 class="title"></h2>
<header class="title large-header"></header>
<!--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>
<span class="all-cap-header"><b>First Access </b></span><span class="info-first-access">Date</span><br>
<span class="all-cap-header"><b>Last Access </b></span><span class="info-last-access">Date</span>
<div class="map-section">
<h3 class="blue-text">Server Location</h3>
<header class="blue-text large-header">Server Location</header>
<div><span id="country">&nbsp;</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"></b> Connected Sites</h3>
</div>
<div class="connections-list">
<header class="large-header"><b class="num-connected-sites"></b> Connected Sites</header>
<ul>
</ul>
</div>
@ -111,13 +111,13 @@
<div class="help-content">
<!-- Graph View Help -->
<div class="graph-view-help hidden">
<h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
<header class="large-header"><img src="image/collusion_icon_help.png" /> Visualization Help</header>
<div>
<div class="grey-label">VISUALIZATION</div> Graph View</br>
<div class="grey-label">BEST for</div> Seeing site relationships</br>
<div class="grey-label all-cap-header">VISUALIZATION</div> Graph View</br>
<div class="grey-label all-cap-header">BEST for</div> Seeing site relationships</br>
</div>
<section>
<div class="blue-label">DESCRIPTION</div>
<div class="blue-text all-cap-header">DESCRIPTION</div>
<p>
In this graph visualization, you can see <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> <b>circular nodes</b> that are websites you have visited, <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> <b>triangular nodes</b> are third party site and <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> <b>connections</b> between them.
Over time, this graph will become a network of connections and nodes to visualize your relationship with the web.
@ -127,7 +127,7 @@
</p>
</section>
<section>
<div class="blue-label">FEATURES</div>
<div class="blue-text all-cap-header">FEATURES</div>
<div>
<div><span class="feature-name">Zoom In + Out</span> - on scroll</div>
<div><span class="feature-name">Pan</span> - on click + drag</div>
@ -136,7 +136,7 @@
</div>
</section>
<section>
<div class="blue-label">LEGENDS AND CONTROLS</div>
<div class="blue-text all-cap-header">LEGENDS AND CONTROLS</div>
<p>
These buttons serve as toggles to help identify various elements on the graph.
</p>
@ -154,22 +154,22 @@
</div>
<!-- Clock View Help -->
<div class="clock-view-help hidden">
<h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
<header class="large-header"><img src="image/collusion_icon_help.png" /> Visualization Help</header>
<div>
<div class="grey-label">VISUALIZATION</div> Clock View</br>
<div class="grey-label">BEST for</div> Seeing site patterns with time</br>
<div class="grey-label all-cap-header">VISUALIZATION</div> Clock View</br>
<div class="grey-label all-cap-header">BEST for</div> Seeing site patterns with time</br>
</div>
<section>
<div class="blue-label">DESCRIPTION</div>
<div class="blue-text all-cap-header">DESCRIPTION</div>
<p>
In this clock visualization, you can see <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> <b>circular nodes</b> in <span style="color:#72AC45"><b>green</b></span> represents websites you have visited and <span style="color:#968BCD"><b>purple</b></span> nodes that are sites you have not but still connected to you and the connections between them. Over time, this view reveals patterns across the arch that represent your browsing behavirous according to time and your relationship with the web.
In this clock visualization, you can see <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> <b>circular nodes</b> in <span style="color:#128764"><b>green</b></span> represents websites you have visited and <span style="color:#F1C40F"><b>yellow</b></span> nodes that are sites you have not but still connected to you and the connections between them. Over time, this view reveals patterns across the arch that represent your browsing behavirous according to time and your relationship with the web.
</p>
<p>
This visualization becomes populated as 15 minutes increments on the arc and the previous (24 hour) session is seen faded to compare data from the previous day.
</p>
</section>
<section>
<div class="blue-label">FEATURES</div>
<div class="blue-text all-cap-header">FEATURES</div>
<div>
<div><span class="feature-name">Zoom In + Out</span> - on scroll</div>
<div><span class="feature-name">Pan</span> - on click + drag</div>
@ -178,7 +178,7 @@
</div>
</section>
<section>
<div class="blue-label">LEGENDS AND CONTROLS</div>
<div class="blue-text all-cap-header">LEGENDS AND CONTROLS</div>
<p>
These buttons serve as toggles to help identify various elements on the graph.
</p>
@ -193,13 +193,13 @@
</div>
<!-- List View Help -->
<div class="list-view-help hidden">
<h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
<header class="large-header"><img src="image/collusion_icon_help.png" /> Visualization Help</header>
<div>
<div class="grey-label">VISUALIZATION</div> List View</br>
<div class="grey-label">BEST for</div> Seeing a text database</br>
<div class="grey-label all-cap-header">VISUALIZATION</div> List View</br>
<div class="grey-label all-cap-header">BEST for</div> Seeing a text database</br>
</div>
<section>
<div class="blue-label">DESCRIPTION</div>
<div class="blue-text all-cap-header">DESCRIPTION</div>
<p>
In this list visualization, you can see al ist of all websites you have visited and sites you have not visited but still connect to you. This view assists with sorting and filtering large numbers of sites.
</p>
@ -208,14 +208,14 @@
</p>
</section>
<section>
<div class="blue-label">FEATURES</div>
<div class="blue-text all-cap-header">FEATURES</div>
<div>
<div><span class="feature-name">(_icon_) Checkboxes</span> - click + apply site preference</div>
<div><span class="feature-name">(_icon_) _SORT BY_</span> - Type, Preference, WEbsite(A-Z), Date</div>
</div>
</section>
<section>
<div class="blue-label">LEGENDS AND CONTROLS</div>
<div class="blue-text all-cap-header">LEGENDS AND CONTROLS</div>
<p>
These buttons serve as toggles to help identify various elements on the graph.
</p>
@ -233,37 +233,37 @@
<!-- About Section starts ================================= -->
<div class="about-content">
<div class="graph-view-help">
<h4><img src="image/collusion_icon_about.png" /> About Collusion</h4>
<header class="large-header"><img src="image/collusion_icon_about.png" /> About Collusion</header>
<div>
<div class="grey-label">VERSION</div> v1.0</br>
<div class="grey-label">BY</div> ____</br>
<div class="grey-label all-cap-header">VERSION</div> v1.0</br>
<div class="grey-label all-cap-header">BY</div> ____</br>
</div>
<section>
<div class="blue-label">ABOUT THIS ADD-ON</div>
<div class="blue-text all-cap-header">ABOUT THIS ADD-ON</div>
<p>
Collusion is an experimental add-on for Firefox that allows you to see which sites are suing third-party cookies to track your movements across the Web. It shows, in realtime, how that data creates a spiderwed of interaction between companies and other trackers.
</p>
</section>
<section>
<div class="blue-label">MISSION STATEMENT</div>
<div class="blue-text all-cap-header">MISSION STATEMENT</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus eu quam consectetur vestibulum. Vivamus elementum faucibus commodo. Nullam bibendum ac justo in convallis. Ut ac lacinia nibh. Suspendisse ac eleifend enim. Donec ornare, metus eu suscipit tempor, nisl leo bibendum quam, ac fermentum eros est a mi.
</p>
</section>
<section>
<div class="blue-label">Privacy Policy</div>
<div class="blue-text all-cap-header">Privacy Policy</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus eu quam consectetur vestibulum. Vivamus elementum faucibus commodo. Nullam bibendum ac justo in convallis. Ut ac lacinia nibh. Suspendisse ac eleifend enim. Donec ornare, metus eu suscipit tempor, nisl leo bibendum quam, ac fermentum eros est a mi.
</p>
</section>
<section>
<div class="blue-label">CONTACT</div>
<div class="blue-text all-cap-header">CONTACT</div>
<p>
<i>You can contact us at:</i>
</p>
</section>
<section>
<div class="blue-label">WEBSITE</div>
<div class="blue-text all-cap-header">WEBSITE</div>
<p>
<i>For more information please visit: <a href="www.mozilla.org/collusion" target="_blank">mozilla.org/collusion/</a></i>
</p>
@ -290,8 +290,8 @@
<!-- LEGEND & CONTROLS for Graph ================================ -->
<div class="graph-footer hidden">
<section class="legend-header">
<div><header class="blue-text">LEGEND & CONTROLS</header></div>
<div><a class="legend-toggle">Hide</a></div>
<div><header class="blue-text all-cap-header">LEGEND & CONTROLS</header></div>
<div><a class="legend-toggle blue-text">Hide</a></div>
</section>
<section class="legend-controls">
<section class="column">
@ -357,15 +357,15 @@
<!-- LEGEND & CONTROLS for Clock ================================ -->
<div class="clock-footer hidden">
<section class="legend-header">
<div><header class="blue-text">LEGEND & CONTROLS</header></div>
<div><a class="legend-toggle">Hide</a></div>
<div><header class="blue-text all-cap-header">LEGEND & CONTROLS</header></div>
<div><a class="legend-toggle blue-text">Hide</a></div>
</section>
<section class="legend-controls">
<section class="column">
<div class="btn legend-toggle-visited active">
<a>
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="sourceSites" cx="8" cy="8" r="6" />
<circle class="source-sites" cx="8" cy="8" r="6" />
</svg>
Visited Site("source")
</a>
@ -373,7 +373,7 @@
<div class="btn legend-toggle-target active">
<a>
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="targetSites" cx="8" cy="8" r="6" />
<circle class="target-sites" cx="8" cy="8" r="6" />
</svg>
Third Party Site("target")
</a>
@ -398,7 +398,7 @@
</a>
</div>
</section>
<section class="column">
<!-- <section class="column">
<div class="legend-label">
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="selectedSites" cx="8" cy="8" r="6" />
@ -411,14 +411,14 @@
</svg>
"Colluded Sites"
</div>
</section>
</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>
<div><header class="blue-text all-cap-header">SITE PREFERENCES</header></div>
<div><a class="legend-toggle blue-text">Hide</a></div>
</section>
<section class="legend-controls">
<section class="align-left">
@ -447,7 +447,7 @@
Clear Preference
</a>
</div>
<div class="toggle-hidden btn orange">
<div class="toggle-hidden disabled btn">
<a>
Hide Hidden Sites
</a>

Просмотреть файл

@ -36,6 +36,7 @@ function onInit(connections){
if ( !statsBarInitiated ){
updateStatsBar();
}
toggleShowHideHiddenButton();
}
@ -344,6 +345,7 @@ function resetCanvas(){
breadcrumb.parentElement.removeChild(breadcrumb);
}
breadcrumbList = [];
document.querySelector('.stage-stack').removeEventListener('click', listStageStackClickHandler, false);
vizcanvas.classList.remove("hide");
}
@ -387,6 +389,7 @@ function setPreferences(pref){
setUserSetting(row, pref);
});
toggleOnPrefButtons(false); // disable buttons since all checkboxes are unchecked now
toggleShowHideHiddenButton();
}
function toggleHiddenSites(target){
@ -411,6 +414,49 @@ if (localStorage.listViewHideRows){
document.querySelector('.stage-stack').classList.add('hide-hidden-rows');
}
var listStageStackClickHandler = function(event){
var target = event.target;
if(target.mozMatchesSelector('.block-pref.active a') ){
dialog( { "title": "Block Sites",
"message": "<p><b>Warning:</b></p> " +
"<p>Blocking sites will prevent any and all content from being loaded from these domains: [domain1.com, domain2.com, ...] and ALL SUBDOMAINS [www.domain1.com, etc.]. </p>" +
"<p>This can prevent some sites from working and degrade your interenet experience. Please use this feature carefully. </p>" +
"<p>For more info: <a href='http://mozilla.org/collusion'>http://mozilla.org/collusion</a></p>",
"imageUrl": "image/collusion_popup_blocked.png"
},function(confirmed){
if ( confirmed ){
setPreferences('block');
}
}
);
}else if (target.mozMatchesSelector('.hide-pref.active a')){
var hideDialogName = "hideDialog";
if ( doNotShowDialog(hideDialogName) ){
setPreferences('hide');
}else{
dialog( { "name": hideDialogName,
"dnsPrompt": true,
"title": "Hide Sites",
"message": "<p>These sites will not be shown in Collusion visualizations, including List View, unless you specifically toggle them back on with the Show Hidden Sites button.</p>" +
"<p>You can use this to ignore trusted sites from the data.</p>",
"imageUrl": "image/collusion_popup_hidden.png"
},function(confirmed){
if ( confirmed ){
setPreferences('hide');
}
}
);
}
}else if (target.mozMatchesSelector('.watch-pref.active a')){
setPreferences('watch');
}else if(target.mozMatchesSelector('.no-pref.active a')){
setPreferences('');
}else if(target.mozMatchesSelector('.toggle-hidden a')){
toggleHiddenSites(target);
}
};
// Install handlers
function initializeHandlers(){
try{
@ -422,38 +468,7 @@ function initializeHandlers(){
toggleLegendSection(event.target,document.querySelector('.list-footer'));
});
document.querySelector('.stage-stack').addEventListener('click', function(event){
var target = event.target;
if(target.mozMatchesSelector('.block-pref.active a') ){
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 ){
setPreferences('block');
}
}
);
}else if (target.mozMatchesSelector('.hide-pref.active a')){
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 ){
setPreferences('hide');
}
}
);
}else if (target.mozMatchesSelector('.watch-pref.active a')){
setPreferences('watch');
}else if(target.mozMatchesSelector('.no-pref.active a')){
setPreferences('');
}else if(target.mozMatchesSelector('.toggle-hidden a')){
toggleHiddenSites(target);
}
}, false);
document.querySelector('.stage-stack').addEventListener('click', listStageStackClickHandler, false);
// highlight selected row
document.querySelector(".list-table").addEventListener("click",function(event){
@ -494,4 +509,12 @@ function toggleOnPrefButtons(toggleOn){
document.querySelector(".no-pref").classList.remove(classToRemove);
}
function toggleShowHideHiddenButton(){
if ( document.querySelectorAll("[data-pref='hide']").length > 0 ){
document.querySelector(".toggle-hidden").classList.remove("disabled");
}else{
document.querySelector(".toggle-hidden").classList.add("disabled");
}
}
})(visualizations);

Просмотреть файл

@ -23,6 +23,7 @@ html, body{
background-color: #000;
color: #EAEAEA;
overflow: hidden;
font-size: 12px;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,aside,section,hgroup,footer,nav,figure,header,article,input,textarea,p,blockquote,th,td,select {
@ -33,11 +34,38 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,aside,section,hgr
font-family: "Open Sans";
}
h3 {
color: #EBE9E9;
a{
color: #73A4B8;
text-decoration: none;
}
a:hover{
color: #6FC3E5;
}
a:visited{
color: #FFF;
}
.large-header{
color: #73A4B8;
font-size: 18px;
}
.all-cap-header{
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
}
.blue-text {
color: #73A4B8;
}
.grey-text{
color: #3E454D;
}
.main{
position: relative;
height: 100%;
@ -49,7 +77,6 @@ h3 {
float: left;
z-index: 5;
height: 100%;
font-size: 12px;
overflow-x: hidden;
overflow-y: auto;
background: #404850;
@ -84,8 +111,6 @@ h3 {
.controls .section-header{
display: block;
text-transform: uppercase;
font-weight: bold;
margin: 15px 0 5px 5px;
}
@ -113,12 +138,38 @@ h3 {
padding-left: 20px;
}
.pico-content .dialog-message{
.pico-content .dialog-content{
overflow: hidden;
margin-top: 30px;
}
.pico-content p{
margin-top: 15px;
}
.pico-content .dialog-sign{
float: left;
width: 20%;
}
.pico-content .dialog-sign img{
margin-top: 10px;
width: 100%;
height: 100%;
}
.pico-content .dialog-message{
float: left;
width: calc( 80% - 20px );
margin-left: 20px;
}
.pico-content .dialog-controls{
clear: both;
}
.pico-content .dialog-dns{
margin: 10px 0;
margin: 20px 0;
}
.pico-content .dialog-ok,
@ -140,7 +191,6 @@ h3 {
.btn{
margin-bottom: 5px;
background: #171E25;
font-size: 7pt;
letter-spacing: 1px;
border-radius: 5px;
}
@ -172,6 +222,7 @@ h3 {
background: #171E25;
line-height: 28px;
text-transform: capitalize;
color: #fff;
}
.btn_group .dropdown_options a{
@ -214,17 +265,10 @@ h3 {
top: 3px;
}
.controls .links > a, .controls .links > a:visited{
color: white;
text-decoration: none;
}
.controls .links > a:hover {
text-decoration: underline;
}
.controls .links{
text-align: center;
line-height: 30px;
margin-top: 15px;
}
.controls .links img{
@ -244,7 +288,6 @@ h3 {
width: 60px;
height: 28px;
padding: 3px;
font-size: 12px;
cursor: pointer;
}
@ -263,7 +306,7 @@ h3 {
.toggle-btn .toggle-btn-innner .on-off-text{
float: right;
line-height: 20px;
font-size: 9px;
font-size: 10px;
font-weight: bold;
margin: 0 5px;
}
@ -292,11 +335,6 @@ h3 {
height: 100%;
}
#content span,
#content p{
font-size: 12px;
}
.content-flex{
display:flex;
flex-direction:column;
@ -308,12 +346,11 @@ h3 {
background-color:#fff;
flex:none;
padding: 10px;
font-size: 10px;
}
.stats-section{
float: left;
color: #707070;
color: #3E454D;
width: 80%;
}
@ -322,11 +359,6 @@ h3 {
margin-right: 20px;
}
.stats-section .context-label{
display: block;
font-weight: bold;
}
.sharing-section{
float: right;
margin: 3px 5px 0 0;
@ -335,9 +367,8 @@ h3 {
.sharing-section .label{
display: inline-block;
font-weight: bold;
letter-spacing: 1px;
color: #707070;
color: #3E454D;
}
.sharing-section .share-btn{
@ -348,9 +379,6 @@ h3 {
.stat{
display:inline-block;
font-weight:bold;
color:#38a9cb;
font-size: 20px;
margin: 0 3px;
}
@ -422,16 +450,11 @@ h3 {
top: 2px;
}
.info .holder > div{
font-size: 12px;
}
.info .holder > div h4{
font-size: 20px;
.info .holder > div .large-header{
margin-bottom: 10px;
}
.info .holder > div h4 img{
.info .holder > div .large-header img{
width: 16px;
height: 16px;
}
@ -442,15 +465,12 @@ h3 {
color: #777;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
}
.blue-label{
.help-content .blue-text.all-cap-header,
.about-content .blue-text.all-cap-header{
margin-bottom: 10px;
color: #4CC7E6;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
}
.info .holder section{
@ -485,18 +505,7 @@ h3 {
/* Info Panel(Profile) Sections */
.map-section{
margin: 10px 0 50px 0;
font-size: 10px;
}
.map-control i:hover{
color: #fff;
}
.map-control i{
font-size: 12px;
margin: 0 5px;
color: #939393;
margin: 10px 0 10px 0;
}
@ -530,13 +539,6 @@ h3 {
width: 300px;
}
.blue-text {
color: #4CC7E6;
}
.dark-blue-text{
color: #0C87A6;
}
.info .filters{
margin-bottom: 1em;
}
@ -581,8 +583,6 @@ h3 {
}
.connections-list ul{
margin-top:50px;
font-size: 12px;
line-height: 15px;
list-style-type: none;
min-height: 150px;
@ -596,7 +596,7 @@ h3 {
}
.connections-list ul li:hover{
background-color: #475B61;
background-color: #6FC3E5;
}
.stage-stack{
@ -650,20 +650,15 @@ text {
/* CLOCK Visualization */
.howMany{
font-size: 0.8em;
color: #343533;
}
.source,
.sourceSites{
fill: #FFF;
.source-sites{
fill: #128764;
stroke: none;
}
.target,
.targetSites{
fill: #FFDD64;
.target-sites{
fill: #F1C40F;
stroke: none;
}
@ -692,17 +687,13 @@ text {
stroke-width: 2;
}
.time-hand-label{
font-size: 13px;
}
.times-label{
font-size: 15px;
}
.times-am-pm-label{
fill: #555;
font-size: 9px;
fill: #3E454D;
font-size: 10px;
}
.clock-time{
@ -751,7 +742,7 @@ text {
}
.clicked-node.node.target{
stroke: #FA6900;
stroke: #F1C40F;
}
.colluded-source.node, .colluded-target.node{
@ -855,7 +846,6 @@ text {
.list-table{
border-collapse: collapse;
font-size: 12px;
height: 100%;
margin-right: 10px;
}
@ -1006,13 +996,12 @@ text {
.legend-header header{
display: inline-block;
font-size: 15px;
margin-bottom: 3px;
}
.legend-header .legend-toggle{
display: inline-block;
font-size: 12px;
font-size: 10px;
cursor: pointer;
}
@ -1023,7 +1012,7 @@ text {
.legend-controls .legend-label{
margin-bottom: 15px;
font-size: 7pt;
font-size: 10px;
letter-spacing: 1px;
border-radius: 5px
}
@ -1036,7 +1025,7 @@ text {
.legend-controls .legend-canvas-large{
height: 18px;
position: relative;
top: 7px;
top: 6px;
margin-right: 5px;
}
@ -1054,6 +1043,10 @@ text {
width: 34px;
}
.legend-controls .btn a{
font-size: 10px;
}
.graph-footer .btn,
.clock-footer .btn{
width: 170px;

Просмотреть файл

@ -125,19 +125,16 @@ document.querySelector(".download").addEventListener('click', function(evt) {
document.querySelector('.reset-data').addEventListener('click', function(){
dialog( { "title": "Reset Data",
"message": "Are you sure you want to reset your data?"
"message": "<p>Pressing OK will delete all Collusion information including connection history, user preferences, unique token, block sites list [etc.].</p>" +
"<p>Your browser will be returned to the state of a fresh install of Collusion.</p>",
"imageUrl": "image/collusion_popup_warningreset.png"
},function(confirmed){
if ( confirmed ){
addon.emit('reset');
aggregate.emit('reset');
currentVisualization.emit('reset');
currentVisualization.emit('remove');
allConnections = [];
Object.keys(localStorage).sort().forEach(function(key){
if ( key.charAt(0) == "2" ){ // date keys are in the format of yyyy-mm-dd
delete localStorage[key];;
}
});
delete localStorage.dnsDialogs;
localStorage.clear();
updateStatsBar();
}
}
@ -197,7 +194,7 @@ function setZoom(box,canvas){
* clock = " -350 -495 700 500 "
* map = " 0 0 2711.3 1196.7 "
*/
var graphZoomInLimit = { x:300, y:300, w:200, h:300 };
var graphZoomInLimit = { w:250, h:250 };
var graphZoomOutLimit = { w:4000, h:4000 };
var clockZoomInLimit = { w:350, h:250 };
var clockZoomOutLimit = { w:2800, h:2800 };
@ -389,53 +386,92 @@ function legendBtnClickHandler(legendElm){
/* Dialog / Popup ===================================== */
// options: name, title, message, type, dnsPrompt(Do Not Show)
// options: name, title, message, type, dnsPrompt(Do Not Show), imageUrl
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);
if ( doNotShowDialog(options.name) ) return; // according to user pref, do not show this dialog
createDialog(options,callback);
}
function showDialog(options,dnsPref,callback){
var titleBar = "<div class='dialog-title'>" + (options.title || "&nbsp;") + "</div>";
var messageBody = "<div class='dialog-message'>" + (options.message || "&nbsp;") + "</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>";
function doNotShowDialog(dialogName){
var dnsPref = localStorage.dnsDialogs || "[]";
dnsPref = JSON.parse(dnsPref);
return ( dnsPref.indexOf(dialogName) > -1 ) ? true : false;
}
function createDialog(options,callback){
var modal = picoModal({
content: titleBar + messageBody + controls,
content: createDialogContent(options),
closeButton: false,
overlayClose: false,
// width: 400,
overlayStyles: {
backgroundColor: "#000",
opacity: 0.75
}
});
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 );
});
addDialogEventHandlers(modal,options,function(userResponse){
callback(userResponse);
});
}
function createDialogContent(options){
var titleBar = "<div class='dialog-title'>" + (options.title || "&nbsp;") + "</div>";
var messageBody = "<div class='dialog-message'>" + (options.message || "&nbsp;") + "</div>";
var content = "";
// dialog sign
var image = "";
if ( options.imageUrl ){
image = "<div class='dialog-sign'><img src='" + options.imageUrl + "' /></div>";
}
// controls
var controls;
var childElems = "";
if ( options.dnsPrompt ){ // show Do Not Show Again prompt
childElems += "<div class='dialog-dns'><input type='checkbox' /> Do not show this again.</div>";
}
if ( navigator.appVersion.indexOf("Win") > -1 ){ // runs on Windows
childElems += "<div class='pico-close dialog-cancel'>Cancel</div>";
childElems += "<div class='pico-close dialog-ok'>OK</div>";
}else{
childElems += "<div class='pico-close dialog-ok'>OK</div>";
childElems += "<div class='pico-close dialog-cancel'>Cancel</div>";
}
controls = "<div class='dialog-controls'>" + childElems + "</div>";
content = "<div class='dialog-content'>" + image + messageBody + "</div>";
return titleBar + content + controls;
}
function addDialogEventHandlers(modal,options,callback){
// press Esc to close the dialog (functions the same as clicking Cancel)
var escapeDialogKeyHandler = function(e){
if ( e.keyCode == "27" ){ // Esc key pressed
modal.close();
callback(false);
}
}
document.addEventListener("keydown", escapeDialogKeyHandler);
modal.onClose(function(){
document.removeEventListener("keydown", escapeDialogKeyHandler);
});
// OK button click event handler
document.querySelector(".pico-close.dialog-ok").addEventListener("click",function(){
if ( document.querySelector(".dialog-dns input") && document.querySelector(".dialog-dns input").checked ){ // Do Not Show
var dnsPref = localStorage.dnsDialogs || "[]";
dnsPref = JSON.parse(dnsPref);
dnsPref.push(options.name);
localStorage.dnsDialogs = JSON.stringify(dnsPref);
}
modal.close();
callback(true);
});
// Cancel button click event handler
document.querySelector(".pico-close.dialog-cancel").addEventListener("click",function(){
modal.close();
callback(false);
});
}

Просмотреть файл

@ -118,10 +118,6 @@ function attachToCollusionPage(worker) {
tempConnections = tempConn;
};
var onPrivateWindowCheck = function(){
worker.port.emit('isPrivateWindow', isPrivate( getCollusionTab() ));
}
var onUIReady = function(){
worker.port.emit('log', 'addon received uiready');
Connection.on('restored', onRestored);
@ -178,7 +174,6 @@ function attachToCollusionPage(worker) {
this.port.removeListener('reset', onWorkerReset);
this.port.removeListener('uiready', onUIReady);
this.port.removeListener('updateBlockList', onWorkerUpdateBlocklist);
this.port.removeListener('privateWindowCheck', onPrivateWindowCheck);
this.port.removeListener('tempConnectionTransferred', onTempConnectionTransferred);
uiworker = null;
this.destroy();
@ -188,7 +183,6 @@ function attachToCollusionPage(worker) {
worker.port.on("reset", onWorkerReset);
worker.port.on('uiready', onUIReady);
worker.port.on('updateBlocklist', onWorkerUpdateBlocklist);
worker.port.on("privateWindowCheck", onPrivateWindowCheck);
worker.port.on("tempConnectionTransferred", onTempConnectionTransferred);
Connection.on('tempConnections', onTempConnections);