1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Firefox Lightbeam</title>
<meta name="description" content="Firefox Lightbeam is a Firefox add-on that uses interactive visualizations to show you the relationships between third parties and the sites you visit.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/lightbeam-48.png" type="image/x-icon">
<link rel="icon" href="images/lightbeam-48.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/storeChild.js" type="text/javascript"></script>
<script src="ext-libs/d3.min.js"></script>
<script src="ext-libs/dialog-polyfill.js"></script>
<script src="js/viz.js" type="text/javascript"></script>
<script src="js/lightbeam.js" type="text/javascript"></script>
</head>
<body>
<aside class="max-graph">
<header>
<img class="logo" role="banner" src="images/lightbeam_150x45.png">
</header>
<nav role="navigation">
<h2>Visualization</h2>
<div class="toggle-menu">
<!-- @todo add click to toggle view between graph and list, highlighting active view -->
<button class="active graph">Graph</button>
<button class="list unimplemented">List</button>
</div>
<h2>Data</h2>
<div>
<!-- @todo add click to save data -->
<button class="download" id="save-data-button">Save Data</button>
<button class="reset" id="reset-data-button">Reset Data</button>
</div>
<div class="nav-links">
<!-- @todo confirm feedback URL -->
<a class="thumbs-up" href="mailto:lightbeam-feedback@mozilla.org">Give Us Feedback</a>
</div>
</nav>
</aside>
<main role="main">
<section class="top-bar max-graph">
<dl class="info-headings">
<div>
<dt>Data Gathered Since</dt>
<dd>
<time id="data-gathered-since" datetime=""></time>
</dd>
</div>
<div>
<dt>You Have Visited</dt>
<dd>
<var id="num-first-parties"></var>
</dd>
</div>
<div>
<dt>You Have Connected With</dt>
<dd>
<var id="num-third-parties"></var>
</dd>
</div>
</dl>
<!-- @todo add tracking protection and toggle functionality -->
<div class="tracking-protection" id="tracking-protection">
<label>Tracking Protection</label>
<div class="toggle-switch">
<label for="tracking-protection-control">
<input type="checkbox" id="tracking-protection-control">
<span class="toggle"></span>
</label>
</div>
</div>
<div class="tracking-protection" id="tracking-protection-disabled" hidden>
<label>Tracking Protection</label>
<div title="Due to technical issues this doesn't work in current Firefox. Please visit Firefox preferences to enable instead.">
Coming back in <a href="https://www.mozilla.org/en-US/firefox/quantum/">Firefox Quantum</a>
</div>
</div>
</div>
</section>
<section class="vis">
<div class="vis-header max-graph">
<!-- @todo update filter with current filter state -->
<h1 id="filter">Recent Site</h1>
<!-- @todo update view with current view state -->
<h2><span id="view">Graph</span> View</h2>
<!-- @todo display list or graph view, update view based on filter and controls -->
<!-- @todo remove the hard-coded width, height values -->
</div>
<div class="vis-controls info-panel-controls unimplemented">
<!-- @todo check purpose of website icon -->
<button class="info-panel website"></button>
<!-- @todo add help sidebar -->
<button class="info-panel help"></button>
<!-- @todo add about sidebar -->
<button class="info-panel about"></button>
</div>
<div class="vis-content" id="visualization">
<div id="tooltip"></div>
</div>
</section>
<footer class="unimplemented">
<div class="footer-toggle unimplemented">
<div class="footer-heading">
<h2>Toggle Controls</h2>
</div>
<!-- @todo highlight active controls, add click to toggle controls -->
<div class="footer-toggle-buttons controls">
<button class="visited-sites active">Visited Sites</button>
<button class="watched-sites two-icons active">Watched Sites</button>
<button class="cookies active">Cookies</button>
<button class="third-party-sites active">Third Party Sites</button>
<button class="blocked-sites two-icons active">Blocked Sites</button>
<button class="connections active">Connections</button>
</div>
</div>
<div class="footer-filter unimplemented">
<div class="footer-heading">
<h2>Filter</h2>
<!-- @todo add click for hide to toggle filter menu-->
<h2 class="hide">Hide</h2>
</div>
<div class="filter-menu">
<!-- @todo highlight active filter, add click to toggle filter -->
<button class="active">Recent Site</button>
<button>Last 10 Sites</button>
<button>Daily</button>
<button>Weekly</button>
</div>
</div>
</footer>
</main>
<dialog id="reset-data-dialog" aria-labelledby="reset-data-dialog-title">
<form method="dialog" class="dialog-wrapper">
<h1 id="reset-data-dialog-title" class="dialog-title">Reset Data</h1>
<img class="dialog-icon" src="images/lightbeam_dialog_warningreset.png" alt="">
<div class="dialog-content">
<p>Pressing OK will delete all Lightbeam information including connection history, user preferences, block sites list, etc.</p>
<p>Your browser will be returned to the state of a fresh install of Lightbeam.</p>
</div>
<menu class="dialog-options">
<button type="submit" value="" autofocus>Cancel</button>
<button type="submit" value="confirm">OK</button>
</menu>
</form>
</dialog>
</body>
</html>
|
