зеркало из https://github.com/mozilla/bedrock.git
Fix bug 926629 Lightbeam landing page
Addressing bug 926629. Initial version of landing pages for Lightbeam launch. Our goal is to have this go live on Sat Oct 26th. Please let us know if there are any changes we have to make and we will get to it as quickly as possible.
This commit is contained in:
Mavis Ou
Родитель
29d1da4f5f
Коммит
ac11f99545
|
|
@ -0,0 +1,5 @@
|
|||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
# Create your models here.
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
{# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
|
||||
|
||||
{% extends "base-resp.html" %}
|
||||
|
||||
{% block page_title %}Ligthbeam for Firefox{% endblock %}
|
||||
{% block body_id %}lightbeam{% endblock %}
|
||||
{% block body_class %}sky about{% endblock %}
|
||||
{% block page_favicon %}{{ media('img/lightbeam/favicon.png') }}{% endblock %}
|
||||
{% block site_header_logo %}
|
||||
<h2><a href="{{ url('lightbeam.lightbeam') }}"><img src="{{ media('img/lightbeam/lightbeam_logo-wordmark_500x156.png') }}" class="ligthbeam-wordmark"></a></h2>
|
||||
{% endblock %}
|
||||
{% block site_header_nav %}
|
||||
<span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
|
||||
<nav id="nav-main" role="navigation">
|
||||
<ul id="nav-main-menu">
|
||||
<li><a href="{{ url('lightbeam.lightbeam') }}">Home</a></li>
|
||||
<li><a href="{{ url('lightbeam.database') }}">Database</a></li>
|
||||
<li><b>About</b></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{{ css('lightbeam') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('lightbeam') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section id="primary" class="container text-center">
|
||||
<h1 class="page-slogan">About Lightbeam</h1>
|
||||
</section>
|
||||
|
||||
<section id="secondary" class="container">
|
||||
<div class="span7">
|
||||
<h2>How the add-on works</h2>
|
||||
<p>
|
||||
Lightbeam visualizes the relationships between the sites you visit and the third party sites that are active on those pages.
|
||||
</p>
|
||||
<p>
|
||||
Using three distinct interactive graphic representations — Graph, Clock and List — Lightbeam enables you to examine individual third parties over time and space, identify where they connect to your online activity and provides ways for you to engage with this unique view of the Web.
|
||||
</p>
|
||||
<p>
|
||||
The default Graph view provides a real time visualization of every site you visit and all third party requests made from your browser. The Graph view also provides adjustable filters that allow you to visualize more types of data at a glance. The Clock view allows you to examine connections over a 24-hour period. The List view provides more options for drilling down into individual sites. Site preferences in the List view enable you to block sites from connecting to your Firefox browser, watch sites you’re interested in or hide sites you don’t want to see visualized.
|
||||
</p>
|
||||
<p>
|
||||
Lightbeam also offers an information panel that provides additional details about the site you selected and the sites it has connected to.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<br/><br/><br/><br/>
|
||||
<img src="{{ media('img/lightbeam/Lightbeam-AMOScreenshot1_anon.jpg') }}" alt="">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="span6">
|
||||
<br/><br/><br/>
|
||||
<div class="text-center"><img src="{{ media('img/lightbeam/Lightbeam-meet-firefox.png') }}" alt=""></div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h2>The origins of Lightbeam</h2>
|
||||
<p>
|
||||
Lightbeam began in July 2011 as Collusion, a personal project by Mozilla software developer <a href="http://www.toolness.com/wp/" target="_blank">Atul Varma</a>. Inspired by the book, <i>The Filter Bubble</i>, Atul created an experimental add-on to visualize browsing behavior and data collection on the Web.
|
||||
</p>
|
||||
<p>
|
||||
In February 2012, Gary Kovacs, Mozilla CEO at the time, introduced the Collusion add-on in a <a href="http://www.ted.com/talks/gary_kovacs_tracking_the_trackers.html" target="_blank">TED talk</a> (now one of the most watched TED talks of all time) about exposing online tracking.
|
||||
</p>
|
||||
<p>
|
||||
In September 2012, Mozilla joined forces with students at <a href="https://www.ecuad.ca/" target="_blank">Emily Carr University of Art + Design</a> to develop and implement visualizations for the add-on. With the support of the Ford Foundation and the Natural Sciences and Engineering Research Council (NSERC), Collusion has been re-imagined as Lightbeam and was launched in the fall of 2013.
|
||||
</p>
|
||||
<p>
|
||||
To read more about the collaboration, please visit <a href="http://www.simcentre.ca" target="_blank">http://www.simcentre.ca</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="span6">
|
||||
<h2>Policy and the larger tracking narrative</h2>
|
||||
<p>
|
||||
At Mozilla, we believe that everyone should have the tools to make their own decisions about their online privacy and who collects data on them. With the Lightbeam add-on and database server, we are providing a valuable (and open) community research platform that aims to raise awareness, promote analysis and, ultimately, affect policy change in the areas of tracking and privacy. Lightbeam is one step in a larger, concerted effort by Mozilla and its partners to provide Web users with greater control and transparency of their personal data.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h2>Learn more about online tracking and privacy</h2>
|
||||
<p>
|
||||
The <a href="http://www.mozilla.org/en-US/foundation/" target="_blank">Mozilla Foundation</a> is a non-profit organization that promotes the values of an open Web to the broader world. The larger Mozilla community sees the growing relevance of online privacy and is supporting several initiatives that tackle the issue in various ways.
|
||||
<a href="http://stopwatching.us" target="_blank">stopwatching.us</a></br>
|
||||
<a href="http://www.mozilla.org/en-US/dnt/" target="_blank">www.mozilla.org/en-US/dnt/</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="span6">
|
||||
<h2>Data formats in Lightbeam</h2>
|
||||
<p>
|
||||
Visit our <a href="https://github.com/mozilla/lightbeam/blob/master/doc/data_format.v1.1.md" target="_blank">documentation on Github</a> to learn more about the file formats used in Lightbeam and to see details of the data that is uploaded if you opt in to contribute to the database.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam-list-view.jpg') }}" alt="">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<h2>Partners of Lightbeam</h2>
|
||||
<div class="span6">
|
||||
<div class="text-center"><img src="{{ media('img/lightbeam/Lightbeam_partners_fordfoundation.png') }}" alt="Ford Foundation" class="partner-logo"></div>
|
||||
<p class="text-left">
|
||||
The <a href="http://www.fordfoundation.org/" target="_blank">Ford Foundation</a> is a non-profit organization that focuses on the mission of advancing human welfare. They provide support for companies and institutions devoted to strengthening democratic values, reducing poverty and social injustice, supporting human achievement and fostering international co-operation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<div class="text-center"><img src="{{ media('img/lightbeam/Lightbeam_partners_ecuad.png') }}" alt="SIM Centre" class="partner-logo"></div>
|
||||
<p class="text-left">
|
||||
The <a href="http://www.simcentre.ca/" target="_blank">Social + Interactive Media (SIM) Centre</a> at Emily Carr University of Art + Design supports a wide range of projects in design and media, giving companies direct access to the innovative thinking, design skills and research expertise of British Columbia’s most creative faculty and students.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
{# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
|
||||
|
||||
{% extends "base-resp.html" %}
|
||||
|
||||
{% block page_title %}Ligthbeam for Firefox{% endblock %}
|
||||
{% block body_id %}lightbeam{% endblock %}
|
||||
{% block body_class %}sky database{% endblock %}
|
||||
{% block page_favicon %}{{ media('img/lightbeam/favicon.png') }}{% endblock %}
|
||||
{% block site_header_logo %}
|
||||
<h2><a href="{{ url('lightbeam.lightbeam') }}"><img src="{{ media('img/lightbeam/lightbeam_logo-wordmark_500x156.png') }}" class="ligthbeam-wordmark"></a></h2>
|
||||
{% endblock %}
|
||||
{% block site_header_nav %}
|
||||
<span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
|
||||
<nav id="nav-main" role="navigation">
|
||||
<ul id="nav-main-menu">
|
||||
<li><a href="{{ url('lightbeam.lightbeam') }}">Home</a></li>
|
||||
<li><b>Database</b></li>
|
||||
<li><a href="{{ url('lightbeam.about') }}">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{{ css('lightbeam') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('lightbeam') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section id="primary" class="container text-center">
|
||||
<h1 class="page-slogan">Your donated data</h1>
|
||||
<div class="text-center centered-span3">
|
||||
The data that you contribute to Lightbeam helps us generate a larger understanding of how we collectively interact in the online space.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="secondary" class="container data-section white-bg">
|
||||
<h2 class="span12">Lightbeam Website Database</h2>
|
||||
<div class="table-controls">
|
||||
<div class="span8">
|
||||
<div class="inline-label all-cap">Sort By:</div>
|
||||
<div class="sorting-options">
|
||||
<a data-sort="alphabetically">alphabetically</a>
|
||||
<span class="option-divider">|</span>
|
||||
<a data-sort="siteConnected" data-selected>sites connected</a>
|
||||
<span class="option-divider">|</span>
|
||||
<a data-sort="connections">connections</a>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<div class="row-range">viewing
|
||||
<span class="row-start"></span> - <span class="row-end"></span> of <span class="num-sites"></span> sites <i><span class="site"></span></i>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="pagination">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="website-list-container">
|
||||
<table class="website-list-table">
|
||||
<thead class="all-cap">
|
||||
<tr>
|
||||
<th class="sixty-percent">Website</th>
|
||||
<th class="twenty-percent">Unique Sites Connected</th>
|
||||
<th class="twenty-percent">Connections</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="top-trackers-container">
|
||||
<table class="top-trackers-table">
|
||||
<caption class="all-cap">Top 10</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="ten-percent"></th>
|
||||
<th class="ninety-percent"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<br/><small>Note: Rankings are based on data provided by users of Lightbeam for Firefox. Additional data may alter these rankings over time, so check back often.</small>
|
||||
</div>
|
||||
<div id="loading">
|
||||
<div>
|
||||
<img src="{{ media('img/lightbeam/loader.gif') }}" alt="Loading"><br/>
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<h2>Supported by the Ford Foundation</h2>
|
||||
<div class="span6">
|
||||
<div class="text-center">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam_partners_fordfoundation.png') }}" alt="" class="partner-logo text-center">
|
||||
</div>
|
||||
<p>
|
||||
The work at the Ford Foundation focuses on building outreach campaigns to help people understand online data tracking — both the benefits and the issues. <a href="http://www.fordfoundation.org/" target="_blank"> Learn more »</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
{# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
|
||||
|
||||
{% extends "base-resp.html" %}
|
||||
|
||||
{% block page_title %}Ligthbeam for Firefox{% endblock %}
|
||||
{% block body_id %}lightbeam{% endblock %}
|
||||
{% block body_class %}sky lightbeam-home{% endblock %}
|
||||
{% block page_favicon %}{{ media('img/lightbeam/favicon.png') }}{% endblock %}
|
||||
{% block site_header_logo %}
|
||||
<h2><a href="{{ url('lightbeam.lightbeam') }}"><img src="{{ media('img/lightbeam/lightbeam_logo-wordmark_500x156.png') }}" class="ligthbeam-wordmark"></a></h2>
|
||||
{% endblock %}
|
||||
{% block site_header_nav %}
|
||||
<span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
|
||||
<nav id="nav-main" role="navigation">
|
||||
<ul id="nav-main-menu">
|
||||
<li><b>Home</b></li>
|
||||
<li><a href="{{ url('lightbeam.database') }}">Database</a></li>
|
||||
<li><a href="{{ url('lightbeam.about') }}">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{{ css('lightbeam') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('lightbeam') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<hgroup class="container">
|
||||
<h1 class="large">Lightbeam for Firefox</h1>
|
||||
<h2>See who’s tracking you online.</h2>
|
||||
</hgroup>
|
||||
|
||||
<section id="primary" class="container">
|
||||
|
||||
<div class="span6">
|
||||
<h1>Shine a light on who’s watching you</h1>
|
||||
Lightbeam is a Firefox add-on that uses interactive visualizations to show you the first and third party sites you interact with on the Web. As you browse, Lightbeam reveals the full depth of the Web today, including parts that are not transparent to the average user.
|
||||
<br/>
|
||||
<div class="text-center">
|
||||
<a class="button" href="https://addons.mozilla.org/en-US/firefox/addon/lightbeam/">
|
||||
Download Lightbeam for Firefox
|
||||
<small>Get it from Mozilla Add-Ons</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam-UpdatedGraphImageLandscape2.png') }}" alt="">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="secondary" class="container">
|
||||
<h2 class="page-slogan text-center">How Lightbeam Works</h2><br/>
|
||||
<div class="span3">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam_Illustration4.png') }}" alt="">
|
||||
Download and run the Lightbeam add-on in your Firefox browser.
|
||||
</div>
|
||||
<div class="span3">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam_Illustration5.png') }}" alt="">
|
||||
Lightbeam will create a record of events for every site you visit and every third party site that is stored locally on your browser.
|
||||
</div>
|
||||
<div class="span3">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam_Illustration6.png') }}" alt="">
|
||||
Lightbeam visually graphs these events to highlight the interactions between sites you intentionally visit and the third parties.
|
||||
</div>
|
||||
<div class="span3">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam_Illustration7.png') }}" alt="">
|
||||
Lightbeam will continue to add to your graph as you browse the Web. You can stop Lightbeam at any time by disabling it or uninstalling the add-on. Your Lightbeam data can be easily saved or deleted.
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="container">
|
||||
<div class="span6">
|
||||
<h2>Tracking & privacy</h2>
|
||||
<p>
|
||||
Not all tracking is bad. Many services rely on user data to provide relevant content and enhance your online experience. But tracking can happen without the user’s knowledge. That’s not okay for some. It should be you who decides when, how and if you want your browsing data to be shared. We recognize the importance of transparency and our mission is all about empowering users — both with tools and information. <a href="{{ url('lightbeam.about') }}"> About Lightbeam »</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h2>Explore the database</h2>
|
||||
<p>In the Lightbeam database, you will be able to browse first and third-party connection data uploaded by donors who use the Lightbeam add-on. We’re building this crowd-sourced directory to encourage users to visualize the state of tracking as an aggregate and to examine relationships that exist on the Web.
|
||||
<a href="{{ url('lightbeam.database') }}"> Go to database »</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container three-points">
|
||||
<div class="span4">
|
||||
<div class="text-center"><img src="{{ media('img/lightbeam/Lightbeam_Illustration1.png') }}" alt=""></div>
|
||||
<h4 class="text-center">Visualize your data</h4>
|
||||
<p>
|
||||
After you download and install the Lightbeam add-on to Firefox, it will begin to create a real time visualization of the websites you visit and all the third parties that are also active on those pages.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="text-center"><img src="{{ media('img/lightbeam/Lightbeam_Illustration2.png') }}" alt=""></div>
|
||||
<h4 class="text-center">Analyze your connections</h4>
|
||||
<p>
|
||||
As your visualizations grow, you can take a closer look into the relationships between the various first and third party sites that are stored in your data. You can also reset or save your data at any time.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="text-center"><img src="{{ media('img/lightbeam/Lightbeam_Illustration3.png') }}" alt=""></div>
|
||||
<h4 class="text-center">Contribute your data</h4>
|
||||
<p>
|
||||
As a part of Lightbeam, we're creating a big-picture view of Internet tracking and of how first and third party sites are connected. To help us, you can contribute your data to our Lightbeam database.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<h2>Supported by the Ford Foundation</h2>
|
||||
<div class="span6">
|
||||
<div class="text-center">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam_partners_fordfoundation.png') }}" alt="" class="partner-logo text-center">
|
||||
</div>
|
||||
<p>
|
||||
The work at the Ford Foundation focuses on building outreach campaigns to help people understand online data tracking — both the benefits and the issues. <a href="http://www.fordfoundation.org/" target="_blank"> Learn more »</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
{# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
|
||||
|
||||
{% extends "base-resp.html" %}
|
||||
|
||||
{% block page_title %}Ligthbeam for Firefox{% endblock %}
|
||||
{% block body_id %}lightbeam{% endblock %}
|
||||
{% block body_class %}sky profile{% endblock %}
|
||||
{% block page_favicon %}{{ media('img/lightbeam/favicon.png') }}{% endblock %}
|
||||
{% block site_header_logo %}
|
||||
<h2><a href="{{ url('lightbeam.lightbeam') }}"><img src="{{ media('img/lightbeam/lightbeam_logo-wordmark_500x156.png') }}" class="ligthbeam-wordmark"></a></h2>
|
||||
{% endblock %}
|
||||
{% block site_header_nav %}
|
||||
<span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
|
||||
<nav id="nav-main" role="navigation">
|
||||
<ul id="nav-main-menu">
|
||||
<li><a href="{{ url('lightbeam.lightbeam') }}">Home</a></li>
|
||||
<li><b>Database</b></li>
|
||||
<li><a href="{{ url('lightbeam.about') }}">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{{ css('lightbeam') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('lightbeam') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section id="primary" class="container">
|
||||
<div class="span12">
|
||||
<a href="{{ url('lightbeam.database') }}">Database</a>
|
||||
>>
|
||||
<span class="site"></span>
|
||||
<h1 class="site site-title"></h1>
|
||||
Server location: <span id="country"></span>
|
||||
</div>
|
||||
|
||||
<div class="span4">
|
||||
<div class="vizcanvas-container">
|
||||
<svg class="vizcanvas" width="100%" height="100%" viewBox="0 0 1000 1000"></svg>
|
||||
</div>
|
||||
<h4 class="all-cap blue-text num-total-connection"><b></b> Connections</h4>
|
||||
<div>
|
||||
<svg class="percent-bar" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="first-bar" height="20" />
|
||||
<text x="5" y="15"></text>
|
||||
<rect class="third-bar" height="20" />
|
||||
<text y="15"></text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="all-cap num-first"><b></b> first party connections</div>
|
||||
<div class="all-cap num-third"><b></b> third party connections</div>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<div class="profile-main">
|
||||
<div class="span8">
|
||||
<h4 class="blue-text all-cap"><span class="num-sites"></span> connected websites</h4>
|
||||
</div>
|
||||
<div class="span8 float-left">
|
||||
<div class="inline-label all-cap">Sort By:</div>
|
||||
<div class="sorting-options">
|
||||
<a data-sort="alphabetically">alphabetically</a>
|
||||
<span class="option-divider">|</span>
|
||||
<a data-sort="connections" data-selected>connections</a>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<div class="row-range">viewing
|
||||
<span class="row-start"></span> - <span class="row-end"></span> of <span class="num-sites"></span> sites <i><span class="site"></span></i>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="pagination">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<table class="website-list-table">
|
||||
<thead class="all-cap">
|
||||
<tr>
|
||||
<th class="fifty-percent">Website</th>
|
||||
<th class="fifty-percent">Connections between <br/><span class="site"></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading">
|
||||
<div>
|
||||
<img src="{{ media('img/lightbeam/loader.gif') }}" alt="Loading"><br/>
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<h2>Supported by the Ford Foundation</h2>
|
||||
<div class="span6">
|
||||
<div class="text-center">
|
||||
<img src="{{ media('img/lightbeam/Lightbeam_partners_fordfoundation.png') }}" alt="" class="partner-logo text-center">
|
||||
</div>
|
||||
<p>
|
||||
The work at the Ford Foundation focuses on building outreach campaigns to help people understand online data tracking — both the benefits and the issues. <a href="http://www.fordfoundation.org/" target="_blank"> Learn more »</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
from django.conf.urls import patterns
|
||||
from bedrock.mozorg.util import page
|
||||
|
||||
urlpatterns = patterns('',
|
||||
page('', 'lightbeam/lightbeam.html'),
|
||||
page('database', 'lightbeam/database.html'),
|
||||
page('about', 'lightbeam/about.html'),
|
||||
page('profile', 'lightbeam/profile.html'),
|
||||
)
|
||||
|
|
@ -116,6 +116,9 @@ MINIFY_BUNDLES = {
|
|||
'collusion': (
|
||||
'css/collusion/collusion.less',
|
||||
),
|
||||
'lightbeam': (
|
||||
'css/lightbeam/lightbeam.less',
|
||||
),
|
||||
'itu': (
|
||||
'css/mozorg/itu.less',
|
||||
),
|
||||
|
|
@ -375,6 +378,13 @@ MINIFY_BUNDLES = {
|
|||
'js/collusion/demo.js',
|
||||
'js/collusion/graphrunner.js',
|
||||
),
|
||||
'lightbeam': (
|
||||
'js/lightbeam/d3.v3.min.js',
|
||||
'js/lightbeam/rAF.js',
|
||||
'js/lightbeam/lightbeam.js',
|
||||
'js/lightbeam/ui.js',
|
||||
'js/libs/jquery.validate.js',
|
||||
),
|
||||
'common': (
|
||||
'js/libs/jquery-1.7.1.min.js',
|
||||
'js/base/global.js',
|
||||
|
|
@ -672,6 +682,7 @@ INSTALLED_APPS = get_apps(exclude=(
|
|||
# Local apps
|
||||
'%s.base' % PROJECT_MODULE,
|
||||
'%s.collusion' % PROJECT_MODULE,
|
||||
'%s.lightbeam' % PROJECT_MODULE,
|
||||
'%s.firefox' % PROJECT_MODULE,
|
||||
'%s.foundation' % PROJECT_MODULE,
|
||||
'%s.grants' % PROJECT_MODULE,
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ urlpatterns = patterns('',
|
|||
# Main pages
|
||||
(r'^apps/', include('bedrock.marketplace.urls')),
|
||||
(r'^collusion/', include('bedrock.collusion.urls')),
|
||||
(r'^lightbeam/', include('bedrock.lightbeam.urls')),
|
||||
(r'^foundation/', include('bedrock.foundation.urls')),
|
||||
(r'^grants/', include('bedrock.grants.urls')),
|
||||
(r'^legal/', include('bedrock.legal.urls')),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,481 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
@import "../sandstone/lib.less";
|
||||
|
||||
|
||||
hgroup {
|
||||
text-align: center;
|
||||
padding-top: @baseLine * 2;
|
||||
padding-bottom: @baseLine * 2;
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbeam-home #primary{
|
||||
padding-top: @baseLine * 2;
|
||||
padding-bottom: @baseLine * 2;
|
||||
@shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 0 0 1px #fff;
|
||||
margin-bottom: @baseLine * 3;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-right: 40%;
|
||||
}
|
||||
|
||||
.button {
|
||||
height: auto;
|
||||
line-height: @baseLine;
|
||||
font-size: 18px;
|
||||
padding: @gridGutterWidth;
|
||||
width: @gridColumnWidth * 5;
|
||||
margin-top: @baseLine * 2;
|
||||
font-weight: normal;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.three-points{
|
||||
img{
|
||||
margin-top: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.container{
|
||||
padding-top: @baseLine;
|
||||
padding-bottom: @baseLine;
|
||||
margin-bottom: @baseLine * 2;
|
||||
}
|
||||
|
||||
.span3{
|
||||
.span(3);
|
||||
}
|
||||
|
||||
.span4{
|
||||
.span(4);
|
||||
}
|
||||
|
||||
.span5{
|
||||
.span(5);
|
||||
}
|
||||
|
||||
.span6{
|
||||
.span(6);
|
||||
}
|
||||
|
||||
.span7{
|
||||
.span(7);
|
||||
}
|
||||
|
||||
.span8{
|
||||
.span(8);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.span12{
|
||||
.span(12);
|
||||
}
|
||||
|
||||
.centered-span3{
|
||||
.span(6);
|
||||
.offset(3);
|
||||
}
|
||||
|
||||
.ligthbeam-wordmark{
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.white-bg{
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.square{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
|
||||
.inline-label{
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.row-range{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float-left{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right{
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/* Database Page & Profile Page */
|
||||
|
||||
.data-section{
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.table-controls{
|
||||
.span(12);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.website-list-container{
|
||||
.span(8);
|
||||
}
|
||||
|
||||
.top-trackers-container{
|
||||
.span(4);
|
||||
}
|
||||
|
||||
.sorting-options{
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sorting-options a{
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.sorting-options a[data-selected]{
|
||||
font-weight: bold;
|
||||
color: #48C7E6;
|
||||
}
|
||||
|
||||
.option-divider{
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.pagination-container{
|
||||
.float-right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination{
|
||||
margin: 0 0 10px 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pagination select{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table tr{
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
.website-list-table,
|
||||
.top-trackers-table{
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.website-list-table th,{
|
||||
background-color: #ABDFF2;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.website-list-table tr:hover,
|
||||
.top-trackers-table tr:hover{
|
||||
background-color: #BFBFBF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-trackers-table caption{
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.top-trackers-table tr td:first-child{
|
||||
color: #2FB4D2;
|
||||
}
|
||||
|
||||
svg.percent-bar{
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
svg.percent-bar .first-bar{
|
||||
fill: #3a75b6;
|
||||
}
|
||||
|
||||
.num-first{
|
||||
color: #3a75b6;
|
||||
}
|
||||
|
||||
svg.percent-bar .third-bar{
|
||||
fill: #f58329;
|
||||
}
|
||||
|
||||
.num-third{
|
||||
color: #f58329;
|
||||
}
|
||||
|
||||
svg.percent-bar rect + text{
|
||||
font-weight: bold;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.site-title{
|
||||
margin-top: @baseLine;
|
||||
margin-bottom: @baseLine;
|
||||
}
|
||||
|
||||
#loading{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10000000;
|
||||
}
|
||||
|
||||
#loading div{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255,.6);
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#loading img, #loading span{
|
||||
position: relative;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.ten-percent{
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.twenty-percent{
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.fifty-percent{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.sixty-percent{
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.ninety-percent{
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.partner-logo{
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.all-cap{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
/* Styles for lightbeam Graph */
|
||||
|
||||
.vizcanvas-container{
|
||||
background-color: #000;
|
||||
border-radius: 5px;
|
||||
margin-bottom: @baseLine / 2;
|
||||
}
|
||||
|
||||
.edge{
|
||||
stroke: #FFF;
|
||||
}
|
||||
|
||||
.node{
|
||||
fill: #FFF;
|
||||
}
|
||||
|
||||
|
||||
/* {{{ Tablet Layout: 768px */
|
||||
@media only screen and (min-width: @widthTablet) and (max-width: @widthDesktop) {
|
||||
|
||||
.lightbeam-home .span6,
|
||||
.about .span3,
|
||||
.about .span5,
|
||||
.about .span6,
|
||||
.about .span7{
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.profile {
|
||||
.span4,
|
||||
.span8,
|
||||
.span12{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-controls{
|
||||
.span_narrow(12);
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: span-all();
|
||||
|
||||
.centered-span3{
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#loading img{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.lightbeam-home #primary {
|
||||
padding: 0;
|
||||
margin-top: @baseLine * 14;
|
||||
margin-bottom: @baseLine * 2;
|
||||
|
||||
img {
|
||||
max-width: 40%;
|
||||
top: -310px;
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
p {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
/* {{{ Wide Mobile Layout: 480px */
|
||||
@media only screen and (max-width: @widthTablet) {
|
||||
|
||||
.lightbeam-home,
|
||||
.about {
|
||||
.span3,
|
||||
.span4,
|
||||
.span5,
|
||||
.span6,
|
||||
.span7,
|
||||
.span8{
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#primary .button{
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.database,
|
||||
.profile {
|
||||
.span3,
|
||||
.span4,
|
||||
.span5,
|
||||
.span6,
|
||||
.span7,
|
||||
.span8,
|
||||
.span12,
|
||||
.website-list-container,
|
||||
.top-trackers-container{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-controls{
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sorting-options a{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: span-all();
|
||||
|
||||
.centered-span3{
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#loading img{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.website-list-table thead tr th:nth-child(3),
|
||||
.website-list-table tbody tr td:nth-child(3),
|
||||
.sorting-options a:nth-of-type(3),
|
||||
.option-divider:nth-of-type(2){
|
||||
display: none;
|
||||
}
|
||||
|
||||
.website-list-table{
|
||||
width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.lightbeam-home #primary {
|
||||
padding: 0;
|
||||
margin-top: @baseLine * 7;
|
||||
margin-bottom: @baseLine * 2;
|
||||
|
||||
img {
|
||||
max-width: 40%;
|
||||
top: -150px;
|
||||
right: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 24 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 471 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 24 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 82 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 89 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 12 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 42 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 32 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 47 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 87 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 10 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 28 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 24 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 18 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,196 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
window.lightbeam = {};
|
||||
|
||||
var width = 1000, height = 1000;
|
||||
var force, vizcanvas, vis;
|
||||
|
||||
var nodemap = {};
|
||||
var nodes = [];
|
||||
var edgemap = {};
|
||||
var edges = [];
|
||||
var aggregate;
|
||||
|
||||
lightbeam.loadData = function buildGraph(data) {
|
||||
vis = d3.select('.vizcanvas');
|
||||
nodemap = data;
|
||||
var connections;
|
||||
var node;
|
||||
var edgename;
|
||||
var edge;
|
||||
connections = Object.keys(data).map(function(key) {
|
||||
node = data[key];
|
||||
node.lastAccess = new Date(node.lastAccess);
|
||||
node.firstAccess = new Date(node.firstAccess);
|
||||
if (node.linkedFrom) {
|
||||
node.linkedFrom.forEach(function(name) {
|
||||
var source = nodemap[name];
|
||||
if (!source) {
|
||||
nodemap[name] = source = {
|
||||
name: name,
|
||||
notVisited: true,
|
||||
notSecure: true,
|
||||
cookie: true
|
||||
};
|
||||
}
|
||||
edgename = name + '->' + node.name;
|
||||
if (!edgemap[edgename]) {
|
||||
edge = { source: source, target: node, name: edgename };
|
||||
edgemap[edgename] = edge;
|
||||
edges.push(edge);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (node.linkedTo) {
|
||||
node.linkedTo.forEach(function(name) {
|
||||
var target = nodemap[name];
|
||||
if (!target) {
|
||||
nodemap[name] = target = {
|
||||
name: name,
|
||||
notVisited: true,
|
||||
notSecure: true,
|
||||
cookie: true
|
||||
};
|
||||
}
|
||||
edgename = node.name + '->' + name;
|
||||
if (!edgemap[edgename]) {
|
||||
edge = { source: node, target: target, name: edgename };
|
||||
edgemap[edgename] = edge;
|
||||
edges.push(edge);
|
||||
}
|
||||
});
|
||||
}
|
||||
return nodes.push(node);
|
||||
});
|
||||
aggregate = {
|
||||
allnodes: nodes,
|
||||
nodemap: nodemap,
|
||||
edges: edges,
|
||||
edgemap: edgemap
|
||||
};
|
||||
initGraph();
|
||||
};
|
||||
|
||||
|
||||
// UTILITIES FOR CREATING POLYGONS
|
||||
|
||||
function point(angle, size) {
|
||||
return [Math.round(Math.cos(angle) * size), -Math.round(Math.sin(angle) * size)];
|
||||
}
|
||||
|
||||
function polygon(points, size, debug) {
|
||||
var increment = Math.PI * 2 / points;
|
||||
var angles = [], i;
|
||||
for (i = 0; i < points; i++) {
|
||||
angles.push(i * increment + Math.PI/2); // add 90 degrees so first point is up
|
||||
}
|
||||
return angles.map(function(angle) { return point(angle, size); });
|
||||
}
|
||||
|
||||
function polygonAsString(points, size) {
|
||||
var poly = polygon(points, size);
|
||||
return poly.map(function(pair) { return pair.join(',');}).join(' ');
|
||||
}
|
||||
|
||||
// SET UP D3 HANDLERS
|
||||
|
||||
function initGraph() {
|
||||
// Initialize D3 layout and bind data
|
||||
force = d3.layout.force()
|
||||
.nodes(aggregate.allnodes)
|
||||
.links(aggregate.edges)
|
||||
.charge(-500)
|
||||
.size([width,height])
|
||||
.start();
|
||||
updateGraph();
|
||||
|
||||
// update method
|
||||
force.on('tick', function() {
|
||||
vis.selectAll('.edge')
|
||||
.attr('x1', function(edge) { return edge.source.x; })
|
||||
.attr('y1', function(edge) { return edge.source.y; })
|
||||
.attr('x2', function(edge) { return edge.target.x; })
|
||||
.attr('y2', function(edge) { return edge.target.y; });
|
||||
vis.selectAll('.node').call(updateNodes);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function updateGraph() {
|
||||
// Data binding for links
|
||||
var lines = vis.selectAll('.edge')
|
||||
.data(aggregate.edges, function(edge) { return edge.name; });
|
||||
|
||||
lines.enter().insert('line', ':first-child')
|
||||
.classed('edge', true);
|
||||
|
||||
lines.exit()
|
||||
.remove();
|
||||
|
||||
var nodes = vis.selectAll('.node')
|
||||
.data(aggregate.allnodes, function(node) { return node.name; });
|
||||
|
||||
nodes.call(force.drag);
|
||||
|
||||
nodes.enter().append('g')
|
||||
.classed('visitedYes', function(node) { return node.visitedCount; })
|
||||
.classed('visitedNo', function(node) { return !node.visitedCount; })
|
||||
.call(addShape)
|
||||
.attr('data-name', function(node) { return node.name; })
|
||||
.classed('node', true);
|
||||
|
||||
|
||||
|
||||
nodes.exit()
|
||||
.remove();
|
||||
window.requestAnimationFrame(updateGraph);
|
||||
}
|
||||
|
||||
|
||||
function addCircle(selection) {
|
||||
selection
|
||||
.append('circle')
|
||||
.attr('cx', 0)
|
||||
.attr('cy', 0)
|
||||
.attr('r', 12)
|
||||
.classed('site', true);
|
||||
}
|
||||
|
||||
function addShape(selection) {
|
||||
selection.filter('.visitedYes').call(addCircle);
|
||||
selection.filter('.visitedNo').call(addTriangle);
|
||||
}
|
||||
|
||||
function addTriangle(selection) {
|
||||
selection
|
||||
.append('polygon')
|
||||
.attr('points', polygonAsString(3, 20))
|
||||
.attr('data-name', function(node) { return node.name; });
|
||||
}
|
||||
|
||||
function addSquare(selection) {
|
||||
selection
|
||||
.append('rect')
|
||||
.attr('x', -9)
|
||||
.attr('y', -9)
|
||||
.attr('width', 18)
|
||||
.attr('height', 18);
|
||||
}
|
||||
|
||||
|
||||
function updateNodes(thenodes) {
|
||||
thenodes
|
||||
.attr('transform', function(node) { return 'translate(' + node.x + ',' + node.y + ') scale(' + (1 + 0.03 * node.weight) + ')'; })
|
||||
.classed('secureYes', function(node) { return node.secureCount === node.howMany; })
|
||||
.classed('secureNo', function(node) { return node.secureCount !== node.howMany; })
|
||||
.classed('cookieYes', function(node) { return node.cookieCount; })
|
||||
.classed('cookieNo', function(node) { return !node.cookieCount; })
|
||||
.attr('data-timestamp', function(node) { return node.lastAccess.toISOString(); });
|
||||
// change shape if needed
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
||||
|
||||
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
|
||||
|
||||
// MIT license
|
||||
|
||||
(function() {
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|
||||
|| window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame){
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|
||||
timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
|
||||
if (!window.cancelAnimationFrame){
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}
|
||||
}());
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
// not sure what's the best way to include the URL
|
||||
var DATABASE_URL = "//collusiondb.mofoprod.net";
|
||||
var ROWS_PER_TABLE_PAGE = 20;
|
||||
var AJAX_JSONP_TIMEOUT = 30 * 1000; // in millinseconds
|
||||
var currentPage;
|
||||
var allSites;
|
||||
var errorNotice = function jsonpErrorHandling(){
|
||||
addClass(document.querySelector("#loading img"),"hidden");
|
||||
document.querySelector("#loading span").innerHTML = "This is taking longer than expected. <br/>Please reload the page or check back later. <br/>Thanks!";
|
||||
};
|
||||
|
||||
function checkClassExist(elem,theClass){
|
||||
return elem.className.split(" ").indexOf(theClass) > -1;
|
||||
};
|
||||
|
||||
function addClass(elem,theClass){
|
||||
if ( !checkClassExist(elem,theClass) ){
|
||||
elem.className += " " + theClass;
|
||||
}
|
||||
};
|
||||
|
||||
function removeClass(elem,theClass){
|
||||
if ( checkClassExist(elem,theClass) ){
|
||||
var classes = elem.className.split(" ");
|
||||
classes.splice(classes.indexOf(theClass),1);
|
||||
elem.className = classes.join(" ");
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
currentPage = document.querySelector("body");
|
||||
|
||||
if (checkClassExist(currentPage,"database")) {
|
||||
loadContentDatabase();
|
||||
} else if (checkClassExist(currentPage,"profile")) {
|
||||
var hrefArray = window.location.href.split('?');
|
||||
var site = hrefArray[hrefArray.length-1].substr(5);
|
||||
loadContentProfile(site);
|
||||
} else {
|
||||
}
|
||||
});
|
||||
|
||||
function showLoading() {
|
||||
removeClass(document.querySelector("#loading"),"hidden");
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
addClass(document.querySelector("#loading"),"hidden");
|
||||
}
|
||||
|
||||
function addCommasToNumber(num) {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
|
||||
var siteTableClickHandler = function(event) {
|
||||
var row = event.target;
|
||||
var profileURL = "";
|
||||
if (!row.getAttribute("data-url")) {
|
||||
row = row.parentElement;
|
||||
}
|
||||
profileURL = row.getAttribute("data-url");
|
||||
if (!profileURL) {
|
||||
return;
|
||||
}
|
||||
window.location = profileURL;
|
||||
};
|
||||
|
||||
if (document.querySelector(".website-list-table")) {
|
||||
document.querySelector(".website-list-table").addEventListener("click", siteTableClickHandler);
|
||||
}
|
||||
|
||||
if (document.querySelector(".top-trackers-table")) {
|
||||
document.querySelector(".top-trackers-table").addEventListener("click", siteTableClickHandler);
|
||||
}
|
||||
|
||||
|
||||
/********************************************************************************
|
||||
* Database Page
|
||||
*/
|
||||
|
||||
function loadContentDatabase() {
|
||||
showLoading();
|
||||
// jQuery does not handle cross-domain jsonp request. Set a timer as a workaround.
|
||||
var timeoutTimer = setTimeout(errorNotice, AJAX_JSONP_TIMEOUT);
|
||||
$.ajax( {
|
||||
url: DATABASE_URL + "/databaseSiteList",
|
||||
dataType: 'jsonp',
|
||||
success: function(data) {
|
||||
var top10Trackers = data[1];
|
||||
var total;
|
||||
allSites = data[0];
|
||||
showAllSitesTable();
|
||||
showPotentialTracker(top10Trackers);
|
||||
total = currentPage.querySelectorAll(".num-sites");
|
||||
for (var i=0; i<total.length; i++) {
|
||||
total[i].textContent = addCommasToNumber(Object.keys(data[0]).length);
|
||||
}
|
||||
hideLoading();
|
||||
clearTimeout(timeoutTimer);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/****************************************
|
||||
* Table Sorting
|
||||
*/
|
||||
|
||||
function showPotentialTracker(top10Trackers) {
|
||||
var html = currentPage.querySelector(".top-trackers-table").innerHTML;
|
||||
var siteArray = Object.keys(top10Trackers);
|
||||
var site;
|
||||
var row;
|
||||
for ( var i=0; i<siteArray.length; i++ ) {
|
||||
site = top10Trackers[siteArray[i]];
|
||||
row = "<tr data-url='/lightbeam/profile?site="+ site.site + "'>" +
|
||||
"<td>" + (i+1) + "</td>" +
|
||||
"<td>" + site.site + "</td>" +
|
||||
"</tr>";
|
||||
html += row;
|
||||
}
|
||||
$(".top-trackers-table").html(html);
|
||||
}
|
||||
|
||||
function showAllSitesTable(pageIndex) {
|
||||
if (!pageIndex) {
|
||||
pageIndex = 1;
|
||||
}
|
||||
var numTotalPages = Math.ceil(allSites.length/ROWS_PER_TABLE_PAGE);
|
||||
var start = (pageIndex-1) * ROWS_PER_TABLE_PAGE;
|
||||
var end = (pageIndex * ROWS_PER_TABLE_PAGE);
|
||||
var tbody = "";
|
||||
allSites.slice(start,end).forEach(function(site) {
|
||||
tbody += addTableRow(site);
|
||||
});
|
||||
$(".website-list-table tbody").html(tbody);
|
||||
addPageSelection(pageIndex,numTotalPages);
|
||||
}
|
||||
|
||||
function addPageSelection(current,total) {
|
||||
currentPage.querySelector(".row-start").textContent = (current-1) * ROWS_PER_TABLE_PAGE + 1;
|
||||
currentPage.querySelector(".row-end").textContent = (current-1) * ROWS_PER_TABLE_PAGE + currentPage.querySelectorAll(".website-list-table tbody tr[data-url]").length;
|
||||
|
||||
if ( !document.querySelector(".pagination select") ) {
|
||||
var html = "Page: <select>";
|
||||
for (var i=1; i<=total; i++) {
|
||||
html = html + "<option>" + i + "</option>";
|
||||
}
|
||||
html += "</select>";
|
||||
currentPage.querySelector(".pagination").innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
function sortSiteList(sortByFunction) {
|
||||
if (sortByFunction) {
|
||||
allSites.sort(sortByFunction);
|
||||
}
|
||||
showAllSitesTable();
|
||||
document.querySelector(".pagination select").selectedIndex = 0;
|
||||
}
|
||||
|
||||
function addTableRow(site) {
|
||||
var html = "<tr data-url='/lightbeam/profile?site="+ site.site + "'>" +
|
||||
"<td>" + site.site + "</td>";
|
||||
if ( site.numConnectedSites ) {
|
||||
html += "<td>" + addCommasToNumber(site.numConnectedSites) + "</td>";
|
||||
}
|
||||
if ( site.numConnections ) {
|
||||
html += "<td>" + addCommasToNumber(site.numConnections) + "</td>";
|
||||
}
|
||||
return html + "</tr>";
|
||||
}
|
||||
|
||||
var paginationForSiteTables = function paginationHandler(event) {
|
||||
var selectedIdx = document.querySelector(".pagination select").selectedIndex; // starts from 0
|
||||
showAllSitesTable( (selectedIdx+1));
|
||||
};
|
||||
|
||||
var sortingForSiteTables = function sortingHandler(event) {
|
||||
var sortBy = event.target.getAttribute("data-sort");
|
||||
if (sortBy) {
|
||||
var sortByFunction;
|
||||
var sortByConnectedSites = function(a,b) { return b.numConnectedSites - a.numConnectedSites; };
|
||||
var sortByConnections = function(a,b) { return b.numConnections - a.numConnections; };
|
||||
var sortByAlpha = function(a,b) {
|
||||
if (a.site.toLowerCase() < b.site.toLowerCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (a.site.toLowerCase() > b.site.toLowerCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
if (sortBy === "siteConnected") {
|
||||
sortByFunction = sortByConnectedSites;
|
||||
} else if (sortBy === "connections") {
|
||||
sortByFunction = sortByConnections;
|
||||
} else {
|
||||
sortByFunction = sortByAlpha;
|
||||
}
|
||||
|
||||
document.querySelector(".sorting-options a[data-selected]").removeAttribute("data-selected");
|
||||
event.target.setAttribute("data-selected","true");
|
||||
|
||||
sortSiteList(sortByFunction);
|
||||
}
|
||||
};
|
||||
|
||||
if ( document.querySelector(".database") ) {
|
||||
document.querySelector(".sorting-options").addEventListener("click",sortingForSiteTables);
|
||||
document.querySelector(".pagination").addEventListener("click",paginationForSiteTables);
|
||||
}
|
||||
|
||||
|
||||
/********************************************************************************
|
||||
* Profile Page
|
||||
*/
|
||||
|
||||
function turnMapIntoArray(nodemap) {
|
||||
var node;
|
||||
var arr = Object.keys(nodemap).map(function(nodeName) {
|
||||
node = nodemap[nodeName];
|
||||
return { site: node.name, numConnections: node.howMany };
|
||||
});
|
||||
return arr;
|
||||
}
|
||||
|
||||
function loadContentProfile(siteName) {
|
||||
showLoading();
|
||||
var sites = currentPage.querySelectorAll(".site");
|
||||
for (var i=0; i<sites.length; i++) {
|
||||
sites[i].textContent = siteName;
|
||||
}
|
||||
// jQuery does not handle cross-domain jsonp request. Set a timer as a workaround.
|
||||
var timeoutTimer = setTimeout(errorNotice, AJAX_JSONP_TIMEOUT);
|
||||
$.ajax( {
|
||||
url: DATABASE_URL+"/getSiteProfileNew?name=" + siteName,
|
||||
dataType: 'jsonp',
|
||||
success: function(data) {
|
||||
// generate d3 graph
|
||||
lightbeam.loadData(data);
|
||||
// other UI content
|
||||
var siteData = data[siteName];
|
||||
addConnnectionBar(siteData.howManyFirstParty, siteData.howMany);
|
||||
currentPage.querySelector(".num-total-connection b").innerHTML = siteData.howMany;
|
||||
currentPage.querySelector(".num-first b").innerHTML = siteData.howManyFirstParty;
|
||||
currentPage.querySelector(".num-third b").innerHTML = siteData.howMany - siteData.howManyFirstParty;
|
||||
// connected sites table
|
||||
delete data[siteName];
|
||||
allSites = turnMapIntoArray(data);
|
||||
document.querySelector(".profile .sorting-options a[data-selected]").click();
|
||||
var total = currentPage.querySelectorAll(".num-sites");
|
||||
for (var i=0; i<total.length; i++) {
|
||||
total[i].textContent = addCommasToNumber(Object.keys(data).length);
|
||||
}
|
||||
hideLoading();
|
||||
clearTimeout(timeoutTimer);
|
||||
}
|
||||
});
|
||||
|
||||
/***************************************************
|
||||
* Find out where the server of the site locates
|
||||
*
|
||||
* Based on https://github.com/toolness/url-demystifier
|
||||
* and uses Steven Levithan's parseUri 1.2.2
|
||||
*/
|
||||
$.ajax( {
|
||||
url: "//freegeoip.net/json/" + siteName,
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
var countryName = data.country_name;
|
||||
var countryCode = data.country_code.toLowerCase();
|
||||
if ( data === false || countryName === "Reserved" ) {
|
||||
document.querySelector("#country").innerHTML = "(Unable to find server location)";
|
||||
} else {
|
||||
document.querySelector("#country").innerHTML = data.country_name;
|
||||
}
|
||||
},
|
||||
error: function(){
|
||||
document.querySelector("#country").innerHTML = "(Unable to find server location)";
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function addConnnectionBar(numFirstParty,numTotal) {
|
||||
// calculate connections percentage bar
|
||||
try{
|
||||
var totalWidth = currentPage.querySelector(".percent-bar").parentElement.getBoundingClientRect().width;
|
||||
}catch(e){ // getBoundingClientRect() might not work in older IE
|
||||
totalWidth = currentPage.querySelector(".percent-bar").clientWidth;
|
||||
}
|
||||
var firstPartyRatio = numFirstParty / numTotal;
|
||||
var firstBar = currentPage.querySelector(".first-bar");
|
||||
var thirdBar = currentPage.querySelector(".third-bar");
|
||||
var firstBarLabel = currentPage.querySelector(".first-bar + text");
|
||||
var thirdBarLabel = currentPage.querySelector(".third-bar + text");
|
||||
firstBar.setAttribute("width", totalWidth*firstPartyRatio);
|
||||
firstBarLabel.innerHTML = Math.round(firstPartyRatio*100) + "%";
|
||||
thirdBar.setAttribute("x", totalWidth*firstPartyRatio);
|
||||
thirdBar.setAttribute("width", totalWidth*(1-firstPartyRatio));
|
||||
thirdBarLabel.setAttribute("x", totalWidth*firstPartyRatio + 5);
|
||||
thirdBarLabel.innerHTML = Math.round((1-firstPartyRatio)*100) + "%";
|
||||
}
|
||||
|
||||
|
||||
if ( document.querySelector(".profile") ) {
|
||||
document.querySelector(".profile .pagination").addEventListener("click",paginationForSiteTables);
|
||||
document.querySelector(".profile .sorting-options").addEventListener("click",sortingForSiteTables);
|
||||
}
|
||||
|
||||
})();
|
||||
Загрузка…
Ссылка в новой задаче