├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .gitmodules
├── .travis.yml
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── docs
    └── images
    │   ├── lightbeam-launch.gif
    │   ├── lightbeam.gif
    │   └── lightbeam.png
├── karma.conf.js
├── package.json
├── src
    ├── css
    │   ├── OpenSans.css
    │   ├── first-run.css
    │   └── style.css
    ├── first-run.html
    ├── fonts
    │   ├── OpenSans-Bold.ttf
    │   ├── OpenSans-Light.ttf
    │   ├── OpenSans-LightItalic.ttf
    │   └── OpenSans-Regular.ttf
    ├── images
    │   ├── defaultFavicon.svg
    │   ├── lightbeam-48.png
    │   ├── lightbeam-96.png
    │   ├── lightbeam-icon-charcoal.svg
    │   ├── lightbeam-icon.svg
    │   ├── lightbeam_150x45.png
    │   ├── lightbeam_dialog_warningreset.png
    │   ├── lightbeam_icon_about.png
    │   ├── lightbeam_icon_download.png
    │   ├── lightbeam_icon_feedback.png
    │   ├── lightbeam_icon_graph.png
    │   ├── lightbeam_icon_help.png
    │   ├── lightbeam_icon_list.png
    │   ├── lightbeam_icon_reset.png
    │   ├── lightbeam_icon_website.png
    │   ├── lightbeam_logo-only_16x16.png
    │   └── lightbeam_logo-wordmark_300x150.png
    ├── index.html
    ├── js
    │   ├── background.js
    │   ├── capture.js
    │   ├── lightbeam.js
    │   ├── store.js
    │   ├── storeChild.js
    │   └── viz.js
    └── manifest.json
└── test
    └── unit
        └── store.test.js


/.eslintignore:
--------------------------------------------------------------------------------
1 | /shavar-prod-lists/*
2 | /src/ext-libs/*
3 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "env": {
  3 |         "browser": true,
  4 |         "es6": true,
  5 |         "mocha": true
  6 |     },
  7 |     "globals": {
  8 |         "browser": true,
  9 |         "store": true,
 10 |         "storeChild": true,
 11 |         "capture": true,
 12 |         "lightbeam": true,
 13 |         "viz": true,
 14 |         "d3": true,
 15 |         "Dexie": true
 16 |     },
 17 |     "plugins": [
 18 |         "json",
 19 |         "mocha",
 20 |         "no-unsanitized"
 21 |     ],
 22 |     "extends": ["eslint:recommended"],
 23 |     "parserOptions": {
 24 |          "ecmaVersion": "2017"
 25 |     },
 26 |     "rules": {
 27 |         "no-unsanitized/method": "error",
 28 |         "no-unsanitized/property": "error",
 29 |         "space-infix-ops": [
 30 |             "error"
 31 |         ],
 32 |         "indent": [
 33 |             "error",
 34 |             2,
 35 |             {
 36 |                 "CallExpression":
 37 |                     { "arguments": 1 },
 38 |                 "FunctionDeclaration":
 39 |                     { "parameters": 1 },
 40 |                 "SwitchCase": 1
 41 |             }
 42 |         ],
 43 |         "linebreak-style": [
 44 |             "error",
 45 |             "unix"
 46 |         ],
 47 |         "object-property-newline": [
 48 |             "error"
 49 |         ],
 50 |         "no-multi-assign": [
 51 |             "error"
 52 |         ],
 53 |         "no-new-object": [
 54 |             "error"
 55 |         ],
 56 |         "func-call-spacing": [
 57 |             "error",
 58 |             "never"
 59 |         ],
 60 |         "brace-style": [
 61 |             "error",
 62 |             "1tbs"
 63 |         ],
 64 |         "object-curly-newline": [
 65 |             "error",
 66 |             {"multiline": true}
 67 |         ],
 68 |         "no-implied-eval": [
 69 |             "error"
 70 |         ],
 71 |         "operator-linebreak": [
 72 |             "error",
 73 |             "before"
 74 |         ],
 75 |         "no-lonely-if": [
 76 |             "error"
 77 |         ],
 78 |         "no-multi-str": [
 79 |             "error"
 80 |         ],
 81 |         "prefer-const": [
 82 |             "error"
 83 |         ],
 84 |         "prefer-template": [
 85 |             "error"
 86 |         ],
 87 |         "require-await": [
 88 |             "error"
 89 |         ],
 90 |         "spaced-comment": [
 91 |             "error",
 92 |             "always"
 93 |         ],
 94 |         "max-len": [
 95 |             "error", {
 96 |                 "code": 80,
 97 |                 "tabWidth": 2,
 98 |                 "ignoreUrls": true
 99 |             }
100 |         ],
101 |         "semi": [
102 |             "error",
103 |             "always"
104 |         ],
105 |         "quotes": [
106 |             "error",
107 |             "single"
108 |         ],
109 |         "no-trailing-spaces": [
110 |             "error"
111 |         ],
112 |         "keyword-spacing": [
113 |           "error", {
114 |             "before": true,
115 |             "after": true
116 |           }
117 |         ],
118 |         "space-before-blocks": [
119 |           "error", {
120 |             "functions": "always",
121 |             "keywords": "always"
122 |           }
123 |         ],
124 |         "arrow-body-style": [
125 |             "error",
126 |             "always"
127 |         ]
128 |     }
129 | }
130 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | text eol=lf
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | npm-debug.log
4 | src/ext-libs
5 | src/web-ext-artifacts
6 | 


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "shavar-prod-lists"]
2 | 	path = shavar-prod-lists
3 | 	url = https://github.com/mozilla-services/shavar-prod-lists.git
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | addons:
 2 |   firefox: latest
 3 | before_script:
 4 |   - export DISPLAY=:99.0
 5 |   - sh -e /etc/init.d/xvfb start
 6 |   - sleep 3
 7 | language: node_js
 8 | node_js:
 9 |   - '6.1'
10 | notifications:
11 |   slack:
12 |     secure: B+WoTn0JfBWEdFZ8hKzXdYLc2W5cwngBrLoW9YM2jBFcXvidW8m/Aslq7koRw8F21R/sYlqtA1bYssmBBya4dLzGNZZA0+R8g0rwJwg5FjpJ/1DYfz7u5f/nhe5K2Wll7+4EPfuhN8LfK+38te6JBOc0xGBZdawTvFZkF2hBljFf2+YWutiUg9Vzmr/q51DffDCV9mziYGH+M30WBCTa9f+m7YNvAJxWzF3ckBLLhDUOj74P1a2bua2RICV3KZoVt2KeZ3VdERDk2xtRlqThJALJJzb/x8nkisb/DKWzuYzwrrtyT9IH/86tOz2rh/Dex26VH3piD76SqAl2VAjuS8TzIbKoXDxKLYyRNeAeLCNyiMT7049g5tTxug1sQ4uVAz97jH+sqP1CG3V67RhHRhC2zm6zKrU8biqoYLzFIKYUuYHHhek+2zizvYAzL5Z0z0+0VbtCd4zo5cL013jDvzzoFRmNKDMZqWjW52qYFrZDAccu5dNUuY7eXhnkQFC+Z1XY1WucBNyDg7O4iBTEy9RgkxapfCKqGPJKknArKD5YGp4xgnT/5g9mGQuRYtn86qzZVS76hKhSN15J9arjDRHNJYm/HVGRqWMFkCIolcrtRkyUFiiQgOMPCoNk7a2nPif0IgY5TqIxMojsF5jDoKzRT3JQ4TvJ6Ng7l5b6IDw=
13 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Community Participation Guidelines
2 | 
3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
4 | For more details, please read the
5 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
6 | 
7 | ## How to Report
8 | For more information on how to report violations of the Community Participation Guidelines, please read our [How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/) page.
9 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Everyone is welcome to contribute to Lightbeam. Reach out to team members if you have questions:
 4 | 
 5 | - Email: lightbeam-feedback@mozilla.org
 6 | 
 7 | ## Filing bugs
 8 | 
 9 | If you find a bug with Lightbeam, please file an issue.
10 | 
11 | Check first if the bug might already exist: [Existing issues](https://github.com/mozilla/lightbeam-we/issues)
12 | 
13 | [Open an issue](https://github.com/mozilla/lightbeam-we/issues/new)
14 | 
15 | 1. Visit `about:support`
16 | 2. Click "Copy raw data to clipboard" and paste into the bug. Alternatively, copy the following sections into the issue:
17 |     - Application Basics
18 |     - Nightly Features (if you are in Nightly)
19 |     - Extensions
20 |     - Experimental Features
21 | 3. Include clear steps to reproduce the issue you have experienced.
22 | 4. Include screenshots if possible.
23 | 
24 | ## Sending Pull Requests
25 | 
26 | Patches should be submitted as pull requests. When submitting patches as PRs:
27 | 
28 | - You agree to license your code under the project's open source license (MPL 2.0).
29 | - Base your branch off the current master (see below for an example workflow).
30 | - Add both your code and new tests if relevant.
31 | - Run `npm test` to make sure all tests still pass.
32 | - Please do not include merge commits in pull requests; include only commits with the new relevant code.
33 | 
34 | See the main [README](./README.md) for information on prerequisites, installing, running and testing.
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | Mozilla Public License Version 2.0
  2 | ==================================
  3 | 
  4 | 1. Definitions
  5 | --------------
  6 | 
  7 | 1.1. "Contributor"
  8 |     means each individual or legal entity that creates, contributes to
  9 |     the creation of, or owns Covered Software.
 10 | 
 11 | 1.2. "Contributor Version"
 12 |     means the combination of the Contributions of others (if any) used
 13 |     by a Contributor and that particular Contributor's Contribution.
 14 | 
 15 | 1.3. "Contribution"
 16 |     means Covered Software of a particular Contributor.
 17 | 
 18 | 1.4. "Covered Software"
 19 |     means Source Code Form to which the initial Contributor has attached
 20 |     the notice in Exhibit A, the Executable Form of such Source Code
 21 |     Form, and Modifications of such Source Code Form, in each case
 22 |     including portions thereof.
 23 | 
 24 | 1.5. "Incompatible With Secondary Licenses"
 25 |     means
 26 | 
 27 |     (a) that the initial Contributor has attached the notice described
 28 |         in Exhibit B to the Covered Software; or
 29 | 
 30 |     (b) that the Covered Software was made available under the terms of
 31 |         version 1.1 or earlier of the License, but not also under the
 32 |         terms of a Secondary License.
 33 | 
 34 | 1.6. "Executable Form"
 35 |     means any form of the work other than Source Code Form.
 36 | 
 37 | 1.7. "Larger Work"
 38 |     means a work that combines Covered Software with other material, in
 39 |     a separate file or files, that is not Covered Software.
 40 | 
 41 | 1.8. "License"
 42 |     means this document.
 43 | 
 44 | 1.9. "Licensable"
 45 |     means having the right to grant, to the maximum extent possible,
 46 |     whether at the time of the initial grant or subsequently, any and
 47 |     all of the rights conveyed by this License.
 48 | 
 49 | 1.10. "Modifications"
 50 |     means any of the following:
 51 | 
 52 |     (a) any file in Source Code Form that results from an addition to,
 53 |         deletion from, or modification of the contents of Covered
 54 |         Software; or
 55 | 
 56 |     (b) any new file in Source Code Form that contains any Covered
 57 |         Software.
 58 | 
 59 | 1.11. "Patent Claims" of a Contributor
 60 |     means any patent claim(s), including without limitation, method,
 61 |     process, and apparatus claims, in any patent Licensable by such
 62 |     Contributor that would be infringed, but for the grant of the
 63 |     License, by the making, using, selling, offering for sale, having
 64 |     made, import, or transfer of either its Contributions or its
 65 |     Contributor Version.
 66 | 
 67 | 1.12. "Secondary License"
 68 |     means either the GNU General Public License, Version 2.0, the GNU
 69 |     Lesser General Public License, Version 2.1, the GNU Affero General
 70 |     Public License, Version 3.0, or any later versions of those
 71 |     licenses.
 72 | 
 73 | 1.13. "Source Code Form"
 74 |     means the form of the work preferred for making modifications.
 75 | 
 76 | 1.14. "You" (or "Your")
 77 |     means an individual or a legal entity exercising rights under this
 78 |     License. For legal entities, "You" includes any entity that
 79 |     controls, is controlled by, or is under common control with You. For
 80 |     purposes of this definition, "control" means (a) the power, direct
 81 |     or indirect, to cause the direction or management of such entity,
 82 |     whether by contract or otherwise, or (b) ownership of more than
 83 |     fifty percent (50%) of the outstanding shares or beneficial
 84 |     ownership of such entity.
 85 | 
 86 | 2. License Grants and Conditions
 87 | --------------------------------
 88 | 
 89 | 2.1. Grants
 90 | 
 91 | Each Contributor hereby grants You a world-wide, royalty-free,
 92 | non-exclusive license:
 93 | 
 94 | (a) under intellectual property rights (other than patent or trademark)
 95 |     Licensable by such Contributor to use, reproduce, make available,
 96 |     modify, display, perform, distribute, and otherwise exploit its
 97 |     Contributions, either on an unmodified basis, with Modifications, or
 98 |     as part of a Larger Work; and
 99 | 
100 | (b) under Patent Claims of such Contributor to make, use, sell, offer
101 |     for sale, have made, import, and otherwise transfer either its
102 |     Contributions or its Contributor Version.
103 | 
104 | 2.2. Effective Date
105 | 
106 | The licenses granted in Section 2.1 with respect to any Contribution
107 | become effective for each Contribution on the date the Contributor first
108 | distributes such Contribution.
109 | 
110 | 2.3. Limitations on Grant Scope
111 | 
112 | The licenses granted in this Section 2 are the only rights granted under
113 | this License. No additional rights or licenses will be implied from the
114 | distribution or licensing of Covered Software under this License.
115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
116 | Contributor:
117 | 
118 | (a) for any code that a Contributor has removed from Covered Software;
119 |     or
120 | 
121 | (b) for infringements caused by: (i) Your and any other third party's
122 |     modifications of Covered Software, or (ii) the combination of its
123 |     Contributions with other software (except as part of its Contributor
124 |     Version); or
125 | 
126 | (c) under Patent Claims infringed by Covered Software in the absence of
127 |     its Contributions.
128 | 
129 | This License does not grant any rights in the trademarks, service marks,
130 | or logos of any Contributor (except as may be necessary to comply with
131 | the notice requirements in Section 3.4).
132 | 
133 | 2.4. Subsequent Licenses
134 | 
135 | No Contributor makes additional grants as a result of Your choice to
136 | distribute the Covered Software under a subsequent version of this
137 | License (see Section 10.2) or under the terms of a Secondary License (if
138 | permitted under the terms of Section 3.3).
139 | 
140 | 2.5. Representation
141 | 
142 | Each Contributor represents that the Contributor believes its
143 | Contributions are its original creation(s) or it has sufficient rights
144 | to grant the rights to its Contributions conveyed by this License.
145 | 
146 | 2.6. Fair Use
147 | 
148 | This License is not intended to limit any rights You have under
149 | applicable copyright doctrines of fair use, fair dealing, or other
150 | equivalents.
151 | 
152 | 2.7. Conditions
153 | 
154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
155 | in Section 2.1.
156 | 
157 | 3. Responsibilities
158 | -------------------
159 | 
160 | 3.1. Distribution of Source Form
161 | 
162 | All distribution of Covered Software in Source Code Form, including any
163 | Modifications that You create or to which You contribute, must be under
164 | the terms of this License. You must inform recipients that the Source
165 | Code Form of the Covered Software is governed by the terms of this
166 | License, and how they can obtain a copy of this License. You may not
167 | attempt to alter or restrict the recipients' rights in the Source Code
168 | Form.
169 | 
170 | 3.2. Distribution of Executable Form
171 | 
172 | If You distribute Covered Software in Executable Form then:
173 | 
174 | (a) such Covered Software must also be made available in Source Code
175 |     Form, as described in Section 3.1, and You must inform recipients of
176 |     the Executable Form how they can obtain a copy of such Source Code
177 |     Form by reasonable means in a timely manner, at a charge no more
178 |     than the cost of distribution to the recipient; and
179 | 
180 | (b) You may distribute such Executable Form under the terms of this
181 |     License, or sublicense it under different terms, provided that the
182 |     license for the Executable Form does not attempt to limit or alter
183 |     the recipients' rights in the Source Code Form under this License.
184 | 
185 | 3.3. Distribution of a Larger Work
186 | 
187 | You may create and distribute a Larger Work under terms of Your choice,
188 | provided that You also comply with the requirements of this License for
189 | the Covered Software. If the Larger Work is a combination of Covered
190 | Software with a work governed by one or more Secondary Licenses, and the
191 | Covered Software is not Incompatible With Secondary Licenses, this
192 | License permits You to additionally distribute such Covered Software
193 | under the terms of such Secondary License(s), so that the recipient of
194 | the Larger Work may, at their option, further distribute the Covered
195 | Software under the terms of either this License or such Secondary
196 | License(s).
197 | 
198 | 3.4. Notices
199 | 
200 | You may not remove or alter the substance of any license notices
201 | (including copyright notices, patent notices, disclaimers of warranty,
202 | or limitations of liability) contained within the Source Code Form of
203 | the Covered Software, except that You may alter any license notices to
204 | the extent required to remedy known factual inaccuracies.
205 | 
206 | 3.5. Application of Additional Terms
207 | 
208 | You may choose to offer, and to charge a fee for, warranty, support,
209 | indemnity or liability obligations to one or more recipients of Covered
210 | Software. However, You may do so only on Your own behalf, and not on
211 | behalf of any Contributor. You must make it absolutely clear that any
212 | such warranty, support, indemnity, or liability obligation is offered by
213 | You alone, and You hereby agree to indemnify every Contributor for any
214 | liability incurred by such Contributor as a result of warranty, support,
215 | indemnity or liability terms You offer. You may include additional
216 | disclaimers of warranty and limitations of liability specific to any
217 | jurisdiction.
218 | 
219 | 4. Inability to Comply Due to Statute or Regulation
220 | ---------------------------------------------------
221 | 
222 | If it is impossible for You to comply with any of the terms of this
223 | License with respect to some or all of the Covered Software due to
224 | statute, judicial order, or regulation then You must: (a) comply with
225 | the terms of this License to the maximum extent possible; and (b)
226 | describe the limitations and the code they affect. Such description must
227 | be placed in a text file included with all distributions of the Covered
228 | Software under this License. Except to the extent prohibited by statute
229 | or regulation, such description must be sufficiently detailed for a
230 | recipient of ordinary skill to be able to understand it.
231 | 
232 | 5. Termination
233 | --------------
234 | 
235 | 5.1. The rights granted under this License will terminate automatically
236 | if You fail to comply with any of its terms. However, if You become
237 | compliant, then the rights granted under this License from a particular
238 | Contributor are reinstated (a) provisionally, unless and until such
239 | Contributor explicitly and finally terminates Your grants, and (b) on an
240 | ongoing basis, if such Contributor fails to notify You of the
241 | non-compliance by some reasonable means prior to 60 days after You have
242 | come back into compliance. Moreover, Your grants from a particular
243 | Contributor are reinstated on an ongoing basis if such Contributor
244 | notifies You of the non-compliance by some reasonable means, this is the
245 | first time You have received notice of non-compliance with this License
246 | from such Contributor, and You become compliant prior to 30 days after
247 | Your receipt of the notice.
248 | 
249 | 5.2. If You initiate litigation against any entity by asserting a patent
250 | infringement claim (excluding declaratory judgment actions,
251 | counter-claims, and cross-claims) alleging that a Contributor Version
252 | directly or indirectly infringes any patent, then the rights granted to
253 | You by any and all Contributors for the Covered Software under Section
254 | 2.1 of this License shall terminate.
255 | 
256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all
257 | end user license agreements (excluding distributors and resellers) which
258 | have been validly granted by You or Your distributors under this License
259 | prior to termination shall survive termination.
260 | 
261 | ************************************************************************
262 | *                                                                      *
263 | *  6. Disclaimer of Warranty                                           *
264 | *  -------------------------                                           *
265 | *                                                                      *
266 | *  Covered Software is provided under this License on an "as is"       *
267 | *  basis, without warranty of any kind, either expressed, implied, or  *
268 | *  statutory, including, without limitation, warranties that the       *
269 | *  Covered Software is free of defects, merchantable, fit for a        *
270 | *  particular purpose or non-infringing. The entire risk as to the     *
271 | *  quality and performance of the Covered Software is with You.        *
272 | *  Should any Covered Software prove defective in any respect, You     *
273 | *  (not any Contributor) assume the cost of any necessary servicing,   *
274 | *  repair, or correction. This disclaimer of warranty constitutes an   *
275 | *  essential part of this License. No use of any Covered Software is   *
276 | *  authorized under this License except under this disclaimer.         *
277 | *                                                                      *
278 | ************************************************************************
279 | 
280 | ************************************************************************
281 | *                                                                      *
282 | *  7. Limitation of Liability                                          *
283 | *  --------------------------                                          *
284 | *                                                                      *
285 | *  Under no circumstances and under no legal theory, whether tort      *
286 | *  (including negligence), contract, or otherwise, shall any           *
287 | *  Contributor, or anyone who distributes Covered Software as          *
288 | *  permitted above, be liable to You for any direct, indirect,         *
289 | *  special, incidental, or consequential damages of any character      *
290 | *  including, without limitation, damages for lost profits, loss of    *
291 | *  goodwill, work stoppage, computer failure or malfunction, or any    *
292 | *  and all other commercial damages or losses, even if such party      *
293 | *  shall have been informed of the possibility of such damages. This   *
294 | *  limitation of liability shall not apply to liability for death or   *
295 | *  personal injury resulting from such party's negligence to the       *
296 | *  extent applicable law prohibits such limitation. Some               *
297 | *  jurisdictions do not allow the exclusion or limitation of           *
298 | *  incidental or consequential damages, so this exclusion and          *
299 | *  limitation may not apply to You.                                    *
300 | *                                                                      *
301 | ************************************************************************
302 | 
303 | 8. Litigation
304 | -------------
305 | 
306 | Any litigation relating to this License may be brought only in the
307 | courts of a jurisdiction where the defendant maintains its principal
308 | place of business and such litigation shall be governed by laws of that
309 | jurisdiction, without reference to its conflict-of-law provisions.
310 | Nothing in this Section shall prevent a party's ability to bring
311 | cross-claims or counter-claims.
312 | 
313 | 9. Miscellaneous
314 | ----------------
315 | 
316 | This License represents the complete agreement concerning the subject
317 | matter hereof. If any provision of this License is held to be
318 | unenforceable, such provision shall be reformed only to the extent
319 | necessary to make it enforceable. Any law or regulation which provides
320 | that the language of a contract shall be construed against the drafter
321 | shall not be used to construe this License against a Contributor.
322 | 
323 | 10. Versions of the License
324 | ---------------------------
325 | 
326 | 10.1. New Versions
327 | 
328 | Mozilla Foundation is the license steward. Except as provided in Section
329 | 10.3, no one other than the license steward has the right to modify or
330 | publish new versions of this License. Each version will be given a
331 | distinguishing version number.
332 | 
333 | 10.2. Effect of New Versions
334 | 
335 | You may distribute the Covered Software under the terms of the version
336 | of the License under which You originally received the Covered Software,
337 | or under the terms of any subsequent version published by the license
338 | steward.
339 | 
340 | 10.3. Modified Versions
341 | 
342 | If you create software not governed by this License, and you want to
343 | create a new license for such software, you may create and use a
344 | modified version of this License if you rename the license and remove
345 | any references to the name of the license steward (except to note that
346 | such modified license differs from this License).
347 | 
348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary
349 | Licenses
350 | 
351 | If You choose to distribute Source Code Form that is Incompatible With
352 | Secondary Licenses under the terms of this version of the License, the
353 | notice described in Exhibit B of this License must be attached.
354 | 
355 | Exhibit A - Source Code Form License Notice
356 | -------------------------------------------
357 | 
358 |   This Source Code Form is subject to the terms of the Mozilla Public
359 |   License, v. 2.0. If a copy of the MPL was not distributed with this
360 |   file, You can obtain one at http://mozilla.org/MPL/2.0/.
361 | 
362 | If it is not possible or desirable to put the notice in a particular
363 | file, then You may include the notice in a location (such as a LICENSE
364 | file in a relevant directory) where a recipient would be likely to look
365 | for such a notice.
366 | 
367 | You may add additional accurate notices of copyright ownership.
368 | 
369 | Exhibit B - "Incompatible With Secondary Licenses" Notice
370 | ---------------------------------------------------------
371 | 
372 |   This Source Code Form is "Incompatible With Secondary Licenses", as
373 |   defined by the Mozilla Public License, v. 2.0.
374 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Firefox Lightbeam
 2 | This is the web extension version of the Firefox Lightbeam add-on for visualizing HTTP requests between websites in real time.
 3 | 
 4 | The Firefox Lightbeam extension by Mozilla is a key tool for Mozilla to educate the public about privacy.
 5 | 
 6 | ![lightbeam-screenshot](/docs/images/lightbeam.gif)
 7 | 
 8 | ## Quick Start
 9 | 
10 | ### Clone the repository
11 | 
12 | **Note** This repository uses a [submodule](https://github.com/mozilla-services/shavar-prod-lists) to allow some third party requests. To ensure the submodule is cloned along with this repository, use a modified `clone` command:
13 | `git clone --recursive https://github.com/mozilla/lightbeam-we.git`
14 | 
15 | ### Run the web extension
16 | 
17 | There are a couple ways to try out this web extension:
18 | 
19 | 1. Open Firefox and load `about:debugging` in the URL bar.
20 |     - Click the [Load Temporary Add-on](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox) button and select the `manifest.json` file within the directory of this repository.
21 |     - You should now see the Lightbeam icon on the top right bar of the browser.
22 |     - Click the Lightbeam icon to launch the web extension.
23 | 
24 | 2. Install the [web-ext](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext) tool, change into the `src` directory of this repository, and type `web-ext run`.
25 |     - This will launch Firefox and install the extension automatically.
26 |     - This tool gives you some additional development features such as [automatic reloading](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext#Automatic_extension_reloading).
27 | 
28 | ## Development Guide
29 | 
30 | ### Download dependencies
31 | Run `npm run build`.
32 | 
33 | ### Update the submodule
34 | To manually update the submodule at any time during development, run `git submodule update`.
35 | 
36 | ### Testing
37 | Run `npm run test` to check that everything is OK.
38 | 
39 | * If you have installed `eslint` globally, you will have to install globally the following `eslint` plugins too:
40 |     - `eslint-plugin-json`
41 |     - `eslint-plugin-mocha`
42 | * Test suites include lint and unit testing. You can individually run lint or unit tests using the following commands:
43 |     * `npm run lint:eslint`
44 |     * `npm run test:karma`
45 | 
46 | Eslint is used for linting. Karma, Mocha & Chai are used for unit testing. Additionally the test suites are run on the Travis service providing continuous integration support.
47 | 


--------------------------------------------------------------------------------
/docs/images/lightbeam-launch.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/docs/images/lightbeam-launch.gif


--------------------------------------------------------------------------------
/docs/images/lightbeam.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/docs/images/lightbeam.gif


--------------------------------------------------------------------------------
/docs/images/lightbeam.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/docs/images/lightbeam.png


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-undef: "off" */
 2 | 
 3 | /*
 4 | * @todo resolve 'module' is undefined and turn 'on' the eslint rule
 5 | */
 6 | 
 7 | module.exports = function(config) {
 8 |   config.set({
 9 |     singleRun: true,
10 |     browsers: ['Firefox'],
11 |     frameworks: ['mocha', 'chai'],
12 |     files: [
13 |       'test/unit/*.test.js'
14 |     ],
15 |     plugins: [
16 |       'karma-chai',
17 |       'karma-firefox-launcher',
18 |       'karma-mocha'
19 |     ]
20 |   });
21 | };
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lightbeam-we",
 3 |   "version": "2.1.0",
 4 |   "description": "Firefox Lightbeam web extension",
 5 |   "main": "background.js",
 6 |   "scripts": {
 7 |     "build": "npm install && npm run updatesubmodule && npm run createlib && cd src && web-ext build --overwrite-dest",
 8 |     "updatesubmodule": "git submodule init && git submodule update",
 9 |     "createlib": "cd src && rm -rf ext-libs/ && mkdir ext-libs && npm run movelibcontents",
10 |     "movelibcontents": "cp node_modules/dexie/dist/dexie.js src/ext-libs && cp node_modules/d3/build/d3.min.js src/ext-libs && cp node_modules/dialog-polyfill/dialog-polyfill.js src/ext-libs && node node_modules/json/lib/json.js -f shavar-prod-lists/disconnect-entitylist.json > src/ext-libs/disconnect-entitylist.json",
11 |     "lint": "npm-run-all lint:*",
12 |     "lint:eslint": "eslint --ext=.js,.json .",
13 |     "lint:webext": "web-ext -s js lint",
14 |     "precommit": "npm run lint:eslint",
15 |     "prepush": "npm run test",
16 |     "test": "npm-run-all test:*",
17 |     "test:lint": "npm run lint:eslint",
18 |     "test:karma": "karma start --browsers Firefox --single-run"
19 |   },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "https://github.com/mozilla/lightbeam-we.git"
23 |   },
24 |   "author": "Mozilla",
25 |   "license": "MPL-2.0",
26 |   "bugs": {
27 |     "url": "https://github.com/mozilla/lightbeam-we/issues"
28 |   },
29 |   "homepage": "https://github.com/mozilla/lightbeam-we/blob/master/README.md",
30 |   "dependencies": {
31 |     "d3": "^4.9.1",
32 |     "dexie": "^2.0.1",
33 |     "dialog-polyfill": "^0.4.9"
34 |   },
35 |   "devDependencies": {
36 |     "chai": "^3.5.0",
37 |     "eslint": "^3.19.0",
38 |     "eslint-plugin-json": "^1.2.0",
39 |     "eslint-plugin-mocha": "^4.9.0",
40 |     "eslint-plugin-no-unsanitized": "^2.0.0",
41 |     "husky": "^0.13.4",
42 |     "json": "^9.0.6",
43 |     "karma": "^1.7.0",
44 |     "karma-chai": "^0.1.0",
45 |     "karma-firefox-launcher": "^1.0.1",
46 |     "karma-mocha": "^1.3.0",
47 |     "mocha": "^3.4.1",
48 |     "npm-run-all": "^4.0.2",
49 |     "sinon": "^2.3.1",
50 |     "sinon-chrome": "^2.2.1"
51 |   },
52 |   "directories": {
53 |     "test": "test"
54 |   },
55 |   "keywords": [
56 |     "webextension",
57 |     "mozilla",
58 |     "web",
59 |     "security"
60 |   ]
61 | }
62 | 


--------------------------------------------------------------------------------
/src/css/OpenSans.css:
--------------------------------------------------------------------------------
 1 | /* This Source Code Form is subject to the terms of the Mozilla Public
 2 |  * License, v. 2.0. If a copy of the MPL was not distributed with this
 3 |  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 4 | @font-face {
 5 |   font-family: 'Open Sans';
 6 |   font-style: italic;
 7 |   font-weight: 400;
 8 |   src: url('../fonts/OpenSans-LightItalic.ttf') format('truetype')
 9 | }
10 | 
11 | @font-face {
12 |   font-family: 'Open Sans';
13 |   font-style: bold;
14 |   font-weight: 700;
15 |   src: url('../fonts/OpenSans-Bold.ttf') format('truetype')
16 | }
17 | 
18 | @font-face {
19 |   font-family: 'Open Sans';
20 |   font-style: normal;
21 |   font-weight: 400;
22 |   src: url('../fonts/OpenSans-Light.ttf') format('truetype')
23 | }
24 | 


--------------------------------------------------------------------------------
/src/css/first-run.css:
--------------------------------------------------------------------------------
 1 | /* This Source Code Form is subject to the terms of the Mozilla Public
 2 |  * License, v. 2.0. If a copy of the MPL was not distributed with this
 3 |  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 4 | body {
 5 |   background: #5d667a;
 6 |   color:#333;
 7 |   font-family: "Open Sans", sans-serif;
 8 |   margin:0; /* unset browser styles */
 9 |   padding-bottom:16px;
10 | }
11 | 
12 | h1 {
13 |   color: white;
14 |   font-weight: normal;
15 | }
16 | 
17 | .center { text-align: center; }
18 | img.center, button.center, a.center { display: block; margin: 0 auto; }
19 | 
20 | img#lightbeam-logo { margin-bottom:-18px; }
21 | 
22 | body > ol, body > ul, body > #start { width: 578px; margin: 0 auto; }
23 | 
24 | ol#steps {
25 |   /* unset default styles */
26 |   list-style-type:none;
27 |   padding:0px;
28 |   /* counter for custom numbers */
29 |   counter-reset: steps-counter;
30 | }
31 | ol#steps > li {
32 |   background:white;
33 |   padding:20px;
34 |   border-radius: 0.5em;
35 |   margin-bottom:24px;
36 |   position:relative;
37 | }
38 | ol#steps > li:before {
39 |   content: counter(steps-counter);
40 |   counter-increment: steps-counter;
41 |   font-size:31px;
42 |   font-weight:bold;
43 |   position: absolute;
44 |   top: 8px;
45 |   left: -68px;
46 |   background:white;
47 |   width:48px;
48 |   height:48px;
49 |   border-radius:24px;
50 |   text-align:center;
51 | }
52 | ol#steps p {
53 |   margin:0; /* unset default styles */
54 |   margin-bottom: 16px;
55 | }
56 | ol#steps > li p:last-child {
57 |   margin-bottom: 0;
58 | }
59 | 
60 | ul {
61 |   padding-left:16px
62 | }
63 | 
64 | ul li {
65 |   padding-bottom: 10px;
66 | }
67 | 
68 | ul li:last-child {
69 |   padding-bottom: 0;
70 | }
71 | 
72 | div#start {
73 |   background: white;
74 |   border-radius: 0.5em;
75 |   transition: all 0.3s;
76 | }
77 | #start a {
78 |   text-decoration: none;
79 |   padding: 10px;
80 |   color: #5D667A;
81 |   font-weight: bold;
82 |   outline: none;
83 |   transition: all 0.3s;
84 | }
85 | 
86 | #start:hover {
87 |   box-shadow: 5px 5px 5px #111111;
88 |   background: #4BC599;
89 | }
90 | #start a:hover {
91 |   color: white;
92 | }
93 | 


--------------------------------------------------------------------------------
/src/css/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /* ----------- VISUALIZATION ----------- */
  3 | 
  4 | .links line {
  5 |   stroke: #999;
  6 |   stroke-opacity: 0.6;
  7 | }
  8 | 
  9 | .nodes circle {
 10 |   stroke: #fff;
 11 |   stroke-width: 1.5px;
 12 | }
 13 | 
 14 | /* ----------- UI - General ----------- */
 15 | 
 16 | @font-face {
 17 |   font-family: "Open Sans";
 18 |   src: url("../fonts/OpenSans-Regular.ttf");
 19 | }
 20 | 
 21 | [hidden] {
 22 |   display: none !important;
 23 | }
 24 | 
 25 | :root {
 26 |   --primary-color: #000;
 27 |   --secondary-color: #404850;
 28 |   --tertiary-color: #eaeaea;
 29 |   --button-color: #171e25;
 30 |   --button-border-color: #12181b;
 31 |   --button-active-color: #73a4b8;
 32 |   --button-active-border-color: #6fc3e5;
 33 |   --primary-text-color: #eaeaea;
 34 |   --secondary-text-color: #73a4b8;
 35 |   --dialog-header-color: #4cc7e6;
 36 |   --dialog-button-color: #4cc7e6;
 37 | }
 38 | 
 39 | *::before, *::after, * {
 40 |   box-sizing: border-box;
 41 | }
 42 | 
 43 | body {
 44 |   display: grid;
 45 |   grid-template-columns: 170px 1fr;
 46 |   height: 100vh;
 47 |   width: 100%;
 48 |   margin: 0;
 49 |   font-family: "Open Sans", sans-serif;
 50 |   font-weight: normal;
 51 | }
 52 | 
 53 | h1, h2, h3, dt, dd, label {
 54 |   margin: 0;
 55 |   font-weight: 400;
 56 | }
 57 | 
 58 | h1 {
 59 |   font-size: 1.75em;
 60 | }
 61 | 
 62 | h2, dt, label {
 63 |   font-size: .75em;
 64 |   font-weight: 700;
 65 |   text-transform: uppercase;
 66 | }
 67 | 
 68 | h3, dd {
 69 |   font-size: 1.2em;
 70 |   color: var(--secondary-text-color);
 71 |   text-transform: uppercase;
 72 | }
 73 | 
 74 | var {
 75 |   font-style: normal;
 76 | }
 77 | 
 78 | button {
 79 |   display: flex;
 80 |   align-items: center;
 81 |   justify-content: flex-start;
 82 |   width: 100%;
 83 |   margin-top: 10px;
 84 |   text-align: left;
 85 |   padding: 10px;
 86 |   font-size: .75em;
 87 |   border: none;
 88 |   border-width: 1px;
 89 |   border-radius: 3px;
 90 |   cursor: pointer;
 91 |   color: var(--primary-text-color);
 92 |   background-color: var(--button-color);
 93 |   border-color: var(--button-border-color);
 94 |   box-shadow: 0 3px 3px #12181B;
 95 | }
 96 | 
 97 | button:hover {
 98 |   background-color: var(--button-active-color);
 99 | }
100 | 
101 | button::before, a.thumbs-up::before {
102 |   content: "";
103 |   display: inline-block;
104 |   background-repeat: no-repeat;
105 |   background-position: center;
106 |   width: 15px;
107 |   height: 15px;
108 |   background-size: contain;
109 |   margin-right: 10px;
110 | }
111 | 
112 | dialog {
113 |   display: block;
114 |   position: fixed;
115 |   transform: translate(0, -50%);
116 |   top: 50%;
117 |   left: 2em;
118 |   right: 2em;
119 |   width: -moz-fit-content;
120 |   width: -webkit-fit-content;
121 |   width: fit-content;
122 |   max-width: 40em;
123 |   height: -moz-fit-content;
124 |   height: -webkit-fit-content;
125 |   height: fit-content;
126 |   margin: auto;
127 |   padding: 1em;
128 |   background: white;
129 |   color: black;
130 |   border: none;
131 |   border-radius: 0.5em;
132 |   box-shadow: 0.5em 0.5em 0 rgba(0,0,0,0.5);
133 |   overflow: hidden;
134 | }
135 | 
136 | dialog:not([open]) {
137 |   display: none;
138 | }
139 | 
140 | dialog::backdrop, dialog + .backdrop {
141 |   background: rgba(0,0,0,0.25);
142 | }
143 | 
144 | dialog + .backdrop {
145 |   position: fixed;
146 |   top: 0;
147 |   right: 0;
148 |   bottom: 0;
149 |   left: 0;
150 | }
151 | 
152 | dialog .dialog-wrapper {
153 |   display: grid;
154 |   grid-template-columns: repeat(4, 1fr);
155 |   grid-gap: 10px;
156 |   grid-auto-rows: auto;
157 | }
158 | 
159 | dialog .dialog-title {
160 |   background: var(--dialog-header-color);
161 |   color: #FFF;
162 |   margin: -1em -1em 0;
163 |   padding: 1em;
164 |   font-size: 1em;
165 |   text-transform: uppercase;
166 |   grid-column: 1 / 5;
167 |   grid-row: 1;
168 | }
169 | 
170 | dialog .dialog-icon {
171 |   grid-column: 1;
172 |   grid-row: 2;
173 |   width: 100%;
174 |   display: block;
175 | }
176 | 
177 | dialog .dialog-content {
178 |   grid-column: 1 / 5;
179 |   grid-row: 2;
180 | }
181 | 
182 | dialog .dialog-icon + .dialog-content {
183 |   grid-column: 2 / 5;
184 | }
185 | 
186 | dialog .dialog-options {
187 |   text-align: right;
188 |   display: block;
189 |   margin: 0;
190 |   padding: 0;
191 |   grid-column: 1 / 5;
192 |   grid-row: 3;
193 | }
194 | 
195 | dialog .dialog-options button {
196 |   background: var(--dialog-button-color);
197 |   display: inline-block;
198 |   width: auto;
199 |   min-width: 6em;
200 |   box-shadow: none;
201 |   margin: 0;
202 |   padding: 0.5em 1em;
203 |   font-size: inherit;
204 |   text-align: center;
205 | }
206 | 
207 | dialog .dialog-options button::before {
208 |   display: none;
209 | }
210 | 
211 | dialog .dialog-options button::-moz-focus-inner {
212 |   padding: 0;
213 |   border: none;
214 | }
215 | 
216 | dialog .dialog-options button:focus {
217 |   outline: dotted 1px grey;
218 | }
219 | 
220 | @media (max-width: 44em) {
221 |   dialog .dialog-icon {
222 |     display: none;
223 |   }
224 | 
225 |   dialog .dialog-content,
226 |   dialog .dialog-icon + .dialog-content {
227 |     grid-column: 1 / 5;
228 |   }
229 | }
230 | 
231 | ._dialog_overlay {
232 |   position: fixed;
233 |   top: 0;
234 |   right: 0;
235 |   bottom: 0;
236 |   left: 0;
237 | }
238 | 
239 | .active {
240 |   background-color: var(--button-active-color);
241 |   border-top: 2px solid var(--button-active-border-color);
242 | }
243 | 
244 | .active:hover {
245 |   border-top-color: var(--tertiary-color);
246 | }
247 | 
248 | a {
249 |   color: var(--secondary-text-color);
250 |   font-size: .75em;
251 | }
252 | 
253 | .filter-menu button:first-child {
254 |   margin-top: 10px;
255 |   border-radius: 3px 3px 0 0;
256 | }
257 | 
258 | .filter-menu button:last-child {
259 |   border-radius: 0 0 3px 3px;
260 | }
261 | 
262 | .filter-menu button {
263 |   margin-top: 0;
264 |   border-radius: 0;
265 |   border-top: 2px solid var(--button-border-color);
266 | }
267 | 
268 | .filter-menu button:hover {
269 |   background-color: var(--button-active-color);
270 | }
271 | 
272 | .filter-menu .active {
273 |   border-color: var(--button-active-border-color);
274 | }
275 | 
276 | .filter-menu .active:hover {
277 |   border-color: #fff;
278 | }
279 | 
280 | /* ----------- UI - Side Bar ----------- */
281 | 
282 | aside {
283 |   background-color: var(--secondary-color);
284 |   padding: 15px;
285 | }
286 | 
287 | aside h1 {
288 |   color: var(--tertiary-color);
289 | }
290 | 
291 | .logo {
292 |   max-width: 100%;
293 | }
294 | 
295 | aside h2 {
296 |   margin-top: 20px;
297 |   color: var(--primary-text-color);
298 | }
299 | 
300 | .nav-links {
301 |   margin-top: 20px;
302 |   text-align: center;
303 | }
304 | 
305 | .nav-links .icon {
306 |   margin-right: 0;
307 | }
308 | 
309 | .graph::before {
310 |   background-image: url("../images/lightbeam_icon_graph.png");
311 | }
312 | 
313 | .list:before {
314 |   background-image: url("../images/lightbeam_icon_list.png");
315 | }
316 | 
317 | .download::before {
318 |   background-image: url("../images/lightbeam_icon_download.png");
319 | }
320 | 
321 | .reset::before {
322 |   background-image: url("../images/lightbeam_icon_reset.png");
323 | }
324 | 
325 | .thumbs-up::before {
326 |   background-image: url("../images/lightbeam_icon_feedback.png");
327 | }
328 | 
329 | /* ----------- UI - Top Bar ----------- */
330 | 
331 | main {
332 |   display: grid;
333 |   grid-template-rows: 10% 60% 30%;
334 |   background-color: var(--primary-color);
335 |   height: 100%;
336 | }
337 | 
338 | .top-bar {
339 |   display: flex;
340 |   justify-content: space-between;
341 |   align-items: center;
342 |   background-color: var(--tertiary-color);
343 |   padding: 20px;
344 | }
345 | 
346 | .top-bar > dl {
347 |   display: flex;
348 |   flex-wrap: wrap;
349 | }
350 | 
351 | .top-bar > dl > div {
352 |   margin-right: 15px;
353 | }
354 | 
355 | .tracking-protection {
356 |   display: flex;
357 |   align-items: center;
358 |   flex-wrap: wrap;
359 | }
360 | 
361 | #tracking-protection-disabled > div {
362 |   display: inline-block;
363 |   width: 140px;
364 |   margin-inline-start: 10px;
365 | }
366 | 
367 | #tracking-protection-disabled > div > a {
368 |   font-size: 1rem;
369 |   text-decoration: none;
370 | }
371 | 
372 | .toggle-switch {
373 |   display: inline-flex;
374 |   align-items: center;
375 |   justify-content: space-around;
376 |   height: 30px;
377 |   width: 55px;
378 |   margin-left: 5px;
379 |   background-color: var(--secondary-color);
380 |   border-radius: 5px;
381 |   position: relative;
382 |   cursor: pointer;
383 | }
384 | 
385 | .toggle-switch input {
386 |   -moz-appearance: none;
387 |   opacity: 0;
388 | }
389 | 
390 | .toggle-switch:active {
391 |   border:1px solid var(--button-active-border-color);
392 | }
393 | 
394 | .toggle:before {
395 |   content: "";
396 |   height: 24px;
397 |   width: 25px;
398 |   background-color: var(--primary-color);
399 |   border-radius: 5px;
400 |   transition: all 0.4s;
401 |   position: absolute;
402 |   left: 5px;
403 |   top: 10%;
404 | }
405 | 
406 | .toggle:after {
407 |   content: "OFF";
408 |   font-size: .75em;
409 |   font-weight: 700;
410 |   text-transform: uppercase;
411 |   color: var(--primary-text-color);
412 |   position: absolute;
413 |   right: 10%;
414 |   top: 30%;
415 | }
416 | 
417 | .toggle-switch input:checked + .toggle:before {
418 |   transform: translateX(20px);
419 |   right: 10%;
420 |   background-color: var(--secondary-text-color);
421 | }
422 | 
423 | .toggle-switch input:checked + .toggle:after {
424 |   content: "ON";
425 |   left: 10%;
426 | }
427 | 
428 | /* ----------- UI - Graph ----------- */
429 | 
430 | .vis {
431 |   display: grid;
432 |   grid-template-rows: 60px 1fr;
433 |   grid-template-columns: 1fr 40px;
434 | }
435 | 
436 | .vis-header {
437 |   padding-left: 20px;
438 |   padding-top: 10px;
439 |   background-color: var(--primary-color);
440 | }
441 | 
442 | .vis-header > h1 {
443 |   color: var(--primary-text-color);
444 | }
445 | 
446 | .vis-header > h2 {
447 |   color: var(--secondary-text-color);
448 | }
449 | 
450 | .vis-content {
451 |   position: absolute;
452 |   top: 0;
453 |   bottom: 0;
454 |   left: 0;
455 |   right: 0;
456 |   overflow: hidden;
457 | }
458 | 
459 | #tooltip {
460 |   position: absolute;
461 |   z-index: 1;
462 |   display: none;
463 |   background-color: #FFF;
464 |   color: #010203;
465 |   padding: 5px 10px;
466 |   box-shadow: 0px 2px #4CC7E6;
467 |   border-radius: 5px;
468 | }
469 | 
470 | #tooltip::after {
471 |   content: '';
472 |   width: 0;
473 |   height: 0;
474 |   border: 10px solid transparent;
475 |   border-top: 10px solid #FFF;
476 |   position: absolute;
477 |   top: 100%;
478 |   left: 50%;
479 |   margin-left: -10px;
480 | }
481 | 
482 | .vis-controls {
483 |   grid-row-end: span 3;
484 | }
485 | 
486 | .info-panel-controls {
487 | 
488 | }
489 | 
490 | .info-panel {
491 |   border-radius: 3px 0 0 3px;
492 |   margin-top: 5px;
493 | }
494 | 
495 | .info-panel::before {
496 |   margin-right: 0;
497 | }
498 | 
499 | .info-panel:first-child {
500 |   background-color: transparent;
501 |   box-shadow: none;
502 |   margin-top: 0;
503 | }
504 | 
505 | .website::before {
506 |   background-image: url('../images/lightbeam_icon_website.png');
507 |   opacity: .5;
508 | }
509 | 
510 | .help::before {
511 |   background-image: url('../images/lightbeam_icon_help.png');
512 | }
513 | 
514 | .about::before {
515 |   background-image: url('../images/lightbeam_icon_about.png');
516 | }
517 | 
518 | /* ----------- UI - vis Controls ----------- */
519 | footer {
520 |   display: grid;
521 |   grid-template-columns: repeat(4, 1fr) minmax(150px, auto);
522 |   padding: 0 30px;
523 | }
524 | 
525 | .footer-heading {
526 |   display: flex;
527 |   border-bottom: 1px solid var(--primary-text-color);
528 |   justify-content: space-between;
529 | }
530 | 
531 | .footer-heading h2 {
532 |   padding-bottom: 5px;
533 |   color: var(--primary-text-color);
534 | }
535 | 
536 | .footer-heading .hide {
537 |   text-transform: none;
538 |   font-weight: 400;
539 | }
540 | 
541 | .footer-toggle {
542 |   grid-column: 1 / 5;
543 | }
544 | 
545 | .footer-filter {
546 |   grid-column-start: 5;
547 | }
548 | 
549 | .footer-toggle-buttons {
550 |   display: grid;
551 |   grid-column-gap: 10px;
552 |   grid-template-columns: repeat(3, minmax(auto, 150px));
553 |   grid-template-rows: repeat(3, 1fr);
554 | }
555 | 
556 | .footer-toggle-buttons .connections {
557 |   grid-column-start: 1;
558 | }
559 | 
560 | .visited-sites::before {
561 |   background-image: url('data:image/svg+xml,<svg style="fill: rgb(234, 234, 234)" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6"></circle></svg>');
562 | }
563 | 
564 | .third-party-sites::before {
565 |   background-image: url('data:image/svg+xml,<svg style="fill: rgb(234, 234, 234)" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="0,14 7,2 14,14"></polygon></svg>');
566 | }
567 | 
568 | .connections::before {
569 |   background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="14" y1="2" x2="2" y2="14" style="stroke: rgb(234, 234, 234); stroke-width: 2"></line></svg>');
570 | }
571 | 
572 | .two-icons::before {
573 |   width: 30px;
574 | }
575 | 
576 | .watched-sites::before {
577 |   background-image: url('data:image/svg+xml,<svg style="fill: rgb(111, 195, 229)" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6"></circle></svg>'), url('data:image/svg+xml,<svg style="margin-left: 15px; fill: rgb(111, 195, 229)" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="0,14 7,2 14,14"></polygon></svg>');
578 | }
579 | 
580 | .blocked-sites::before {
581 |   background-image: url('data:image/svg+xml,<svg style="fill: rgb(224, 42, 97)" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6"></circle></svg>'), url('data:image/svg+xml,<svg style="margin-left: 15px; fill: rgb(224, 42, 97)" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="0,14 7,2 14,14"></polygon></svg>');
582 | }
583 | 
584 | .cookies::before {
585 |   background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="14" y1="2" x2="2" y2="14" style="stroke: rgb(108, 10, 170); stroke-width: 2"></line></svg>');
586 | }
587 | 
588 | .filter-menu {
589 |   max-width: 150px;
590 | }
591 | 
592 | @media (max-width: 800px) {
593 |   footer {
594 |     grid-template-columns: 1fr 1fr;
595 |   }
596 | 
597 |   .footer-toggle {
598 |     grid-column: 1 / 1;
599 |   }
600 | 
601 |   .footer-filter {
602 |     grid-column-start: 2;
603 |   }
604 | 
605 |   .footer-toggle-buttons {
606 |     grid-template-columns: minmax(auto, 150px);
607 |   }
608 | 
609 |   .watched-sites {
610 |     order: 4;
611 |   }
612 | 
613 |   .blocked-sites {
614 |     order: 5;
615 |   }
616 | 
617 |   .cookies {
618 |     order: 6;
619 |   }
620 | }
621 | 
622 | @media (max-width: 600px) {
623 |   main {
624 |     display: block;
625 |   }
626 | 
627 |   .vis {
628 |     height: 600px;
629 |   }
630 | 
631 |   footer {
632 |     grid-template-columns: 1fr;
633 |   }
634 | 
635 |   .footer-toggle {
636 |     grid-column: 1;
637 |   }
638 | 
639 |   .footer-filter {
640 |     grid-column-start: 1;
641 |   }
642 | }
643 | 
644 | .unimplemented {
645 |   visibility: hidden;
646 | }
647 | 
648 | .unimplemented.list,
649 | footer.unimplemented {
650 |   display: none;
651 | }
652 | 
653 | .max-graph {
654 |   position: relative;
655 |   z-index: 2;
656 | }
657 | 


--------------------------------------------------------------------------------
/src/first-run.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8"/>
 5 |     <title>Welcome to Lightbeam!</title>
 6 |     <link rel="stylesheet" href="css/first-run.css" />
 7 |     <link rel="stylesheet" href="css/OpenSans.css" />
 8 |   </head>
 9 |   <body>
10 | 
11 |     <div id="header">
12 |       <img src="images/lightbeam_logo-wordmark_300x150.png" class="center" id="lightbeam-logo" />
13 |       <h1 class="center">Thanks for downloading Lightbeam!</h1>
14 |     </div>
15 | 
16 |     <ol id="steps">
17 |       <li>
18 |         <strong>Open the Lightbeam tab</strong> by clicking the <span class="platform-dependent"
19 |           id="icon-placement"><img src="images/lightbeam_logo-only_16x16.png" /> logo in the browser
20 |           toolbar</span><br>or by using the 'Get Started' below.
21 |       </li>
22 |       <li>
23 |         <ul>
24 |           <li>Lightbeam starts recording connections as soon as it's installed. If you open it now, you'll see a blank screen because nothing's been recorded yet.</li>
25 |           <li><strong>To start visualizing your online interactions</strong>, open a new tab, navigate to a site, and then check back to the Lightbeam tab.</li>
26 |         </ul>
27 |       </li>
28 |       <li>
29 |         <ul id="contact">
30 |           <!-- TODO: update Mozilla's Lightbeam page -->
31 |           <!-- <li>Learn more about Mozilla's Lightbeam for Firefox on our <a href="https://mozilla.org/lightbeam">project page</a></li> -->
32 |           <li>Lightbeam is under development. If you find a bug that is not already listed as an <a href="https://github.com/mozilla/lightbeam-we/issues/" target="_blank">issue</a>, please <a href="https://github.com/mozilla/lightbeam-we/issues/new" target="_blank">report it!</a></li>
33 |           <li><a href="mailto:lightbeam-feedback@mozilla.org">Give us feedback!</a></li>
34 |           <!-- TODO: update link to Lightbeam browser extension page on addons.mozilla.org -->
35 |           <!-- <li>Don't forget to <a href="https://addons.mozilla.org/en-US/firefox/addon/lightbeam/reviews/add" target="_blank">leave a review</a> on our Mozilla Addons page!</li> -->
36 |         </ul>
37 |       </li>
38 |     </ol>
39 |     <div id="start">
40 |       <a class="center" href="index.html">Get Started</a>
41 |     </div>
42 | 
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/src/fonts/OpenSans-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/fonts/OpenSans-Bold.ttf


--------------------------------------------------------------------------------
/src/fonts/OpenSans-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/fonts/OpenSans-Light.ttf


--------------------------------------------------------------------------------
/src/fonts/OpenSans-LightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/fonts/OpenSans-LightItalic.ttf


--------------------------------------------------------------------------------
/src/fonts/OpenSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/fonts/OpenSans-Regular.ttf


--------------------------------------------------------------------------------
/src/images/defaultFavicon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
2 |   <circle cx="8.028" cy="8" r="8" fill="#fff"/>
3 |   <circle cx="8.028" cy="8" r="7" fill="#737373"/>
4 |   <g fill="#fff">
5 |     <path d="M3.12 6.664c.163-.13.743.134 1.188-.013.213-.07.018-.32.325-.37.152-.02.158.27.34.15.057-.03.036-.15.055-.16.047-.03 0-.31.114-.38.4-.24.335.6.764.22.25-.31-.24-.57-.127-.88.16-.44.44-.09.73-.2.21-.08-.04-.59.14-.68.34-.17.26.39.53.42.17.02.53-.28.51-.45-.03-.2-.45-.27-.53-.45-.1-.21.15-.41.06-.56-.11-.19-.47-.36-.67-.18-.31.27.18.3.05.47-.15.2-.18-.04-.35.06-.2.11-.18.44-.46.314-.69-.285.71-.85.38-1.27-.05-.06-.28-.034-.3-.105-.03-.1.17-.19.23-.224a5.986 5.986 0 0 0-4.07 5.09s.12.2.41.01.58.05.68-.15c.17-.34-.34-.35-.02-.61z"/>
6 |     <path d="M6.44 2.44c0 .173-.008.658.38.164a.78.78 0 0 1 .79-.134c-.075-.026-.538.31-.385.4s.46-.115.55-.208a1.343 1.343 0 0 0 .335-.514c.024-.134.024-.15.024-.15a6.03 6.03 0 0 0-1.852.248s.158.092.158.193zm2.304.05c.13.06-.44.217-.4.375s.557.187.758.235.177.15.355.33c.3.3.35-.572.646-.617.237-.036.12-.2.043-.245s.124-.124.124-.124a5.966 5.966 0 0 0-1.735-.42s-.3-.036-.168.17a.806.806 0 0 0 .377.297zm4.803 3.22c-.01-.027 0 .1-.053.13s-.12-.21-.233.024a.2.2 0 0 1-.1.16c-.08 0 .06-.235.06-.258 0-.04-.04-.064-.05-.1-.03-.11-.06-.222-.07-.247-.02-.05.04-.1.05-.17-.1-.13.01-.33-.03-.4a6.03 6.03 0 0 0-1-1.22l-.01.01a6.1 6.1 0 0 0 .38.63c.04.06-.25-.06-.18 0-.08-.07-.17-.27-.25-.34-.1-.1-.14-.2-.22-.27-.12-.12-.29-.15-.3-.12-.02.06.12.34.15.39.18.3.28.19.42.24.25.09.44.96.74.94-.09 0-.36-.1-.44 0s.12.1.28.59c.15.45.12.22.29.26a.48.48 0 0 1 .24.41c0 .08-.1.09-.13.18-.02.11.09.34.07.43-.02.11-.13.14-.21.29-.11 0 .02-.12-.21-.08-.17.02-.15.33-.35.38-.1.03-.21.06-.26.03-.1-.07-.04-.26-.11-.23-.12.05-.18.29-.17.47s.23.13.07.36c-.18.27-.24-.09-.33-.05s-.12.04-.15.17c-.01.04.06.02.05.09-.01.09-.12.13-.19.25s.12.06.147.07c0-.02.33.22.12.31a.57.57 0 0 0-.325.573c0 .13.19-.158.36-.11s.058.68.167.63c.07-.04.08-.09.13-.13s.13-.05.17-.1.223-.55.46-.4c.1.06.01.46.094.44.06-.014.23-.25.31-.2.14.09.05.056.32.23s.008.28.275.183c.43-.157.49-1.486.515-1.82a5.932 5.932 0 0 0-.43-2.69zM9.34 12.26c.143-.135.264-.293.122-.476-.088-.113-.34-.144-.51-.335a.31.31 0 0 0-.276-.14c-.06.02.128.24.128.27 0 .07.094.2.08.27-.035.15-.213.22-.352.23a.2.2 0 0 1-.18-.02c.015.12.033-.43.006-.28.012-.07.13-.19.136-.24.01-.07-.572-.18-.155-.23s.19-.35.15-.52c-.1-.37.01-.3-.27-.44-.09-.04-.33.18-.42.14-.05-.02.05-.2.02-.25s-.17 0-.22-.03c-.1-.06 0-.47-.13-.47-.02 0-.25.21-.26.14-.07-.73-.2.09-.32.06s-.07-.36.03-.34c.17-.1-.53-.55.13-.47.17.02.48.1.3-.02s-.38-.05-.4-.1c-.16-.44-.29.1-.53.06-.05-.01.03-.29-.02-.28-.09 0-.18.03-.26.27a1.107 1.107 0 0 1-.36.12c-.14.06.19.342-.16.2s-.24-.35-.27-.36c-.5-.13-.88-.26-1.17.44-.12.27.24.423-.03.643-.08.066-.7.055-.7.174 0 .09.08.08-.05.17s-.27-.07-.15.18.44.64.7.48a6.02 6.02 0 0 1 .27.67.25.25 0 0 1-.2.02c-.02 0 .77.865.79.934.03.18-.19.22-.19.22a5.966 5.966 0 0 0 2.13.887s-.04-.12.46-.27a.832.832 0 0 0 .6-.085 1.53 1.53 0 0 1 .6-.253c.92-.21.42-.6.87-1.01zm3.22-.452a2.138 2.138 0 0 0-.386.285 1.374 1.374 0 0 0-.322.374c-.187.122.12-.272.01-.21-.034.02-.05.076-.16.126-.02-.02-.086 0-.124.01-.18.066-.217.23-.345.19a.46.46 0 0 0-.43.13c-.135-.072-.2.2-.257.17 0-.045.076-.122 0-.133s-.276-.017-.347.116c-.02.032.13.026.18.075.02.03.22.3.06.19-.07-.04-.16.08-.39.14a.567.567 0 0 0-.22 0 .436.436 0 0 0-.2.08c-.15.05-.23.08-.13.09.18.02.07.1.15.09 0 0-.44.1-.29.08a1.117 1.117 0 0 1 .13-.01.3.3 0 0 0 .11.01c.19-.03.24-.05.34-.07-.05.02-.23.07-.28.14-.02.03-.11.04-.2.07a.972.972 0 0 1-.17.08 1.086 1.086 0 0 1-.32.09.422.422 0 0 0-.23.07 5.992 5.992 0 0 0 3.97-2.26.192.192 0 0 1-.05.04 1.262 1.262 0 0 1-.13.08z"/>
7 |     <path d="M8.088 10.067c.18-.007.81.013.9-.173.128-.278-.247-.616-.535-.594-.353.027-.6.777-.365.767zm4.667.325c-.027.04-.685 0-.37.284.03.028.346-.05.332 0-.046.15-.126.123-.2.206a1.3 1.3 0 0 0-.237.417c-.027-.06-.053.02-.025.05 0 .01-.064.07-.06.08-.05.11-.154.2-.07.17.245-.07.355-.26.675-.61s.254-1.06-.045-.61zm-.815 1.258c-.043-.065-.148 0-.183.052q.027.1.16-.008c.02-.02.036-.02.022-.043z"/>
8 |   </g>
9 | </svg>


--------------------------------------------------------------------------------
/src/images/lightbeam-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam-48.png


--------------------------------------------------------------------------------
/src/images/lightbeam-96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam-96.png


--------------------------------------------------------------------------------
/src/images/lightbeam-icon-charcoal.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="234px" height="234px" viewBox="0 0 234 234" enable-background="new 0 0 234 234" xml:space="preserve">
 6 | <path fill="#4C4C4C" d="M86.985,181.613l70.912,6.142l-31.153,31.153c-5.56,5.56-14.574,5.559-20.133,0l-28.104-28.105l-5.508-6.443
 7 | 	l14.53,8.914L74.561,182.21l15.746,6.531l-13.017-7.968l3.673,0.318l11.378,2.738L86.985,181.613z M68.968,158.912l11.065-12.968
 8 | 	l-8.914,14.53l12.957-11.077l-11.077,12.957l14.53-8.914l-12.961,11.059l0.012-0.002l15.727-6.524l-8.588,5.258l122.408-21.705
 9 | 	l16.572-16.572c5.56-5.559,5.559-14.574,0-20.133l-93.954-93.954c-5.559-5.559-14.573-5.559-20.133,0L92.406,25.072L70.045,152.075
10 | 	l5.454-8.909L68.968,158.912z M40.198,145.944l11.065,12.968l-6.531-15.746l7.704,12.585l-0.409-4.718l-2.382-9.902l1.928,4.661
11 | 	L45.2,72.278l-32.543,32.543c-5.56,5.56-5.559,14.574,0,20.133l30.011,30.011l6.444,5.509L40.198,145.944z"/>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/src/images/lightbeam-icon.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  5 | 	 width="234px" height="234px" viewBox="0 0 234 234" enable-background="new 0 0 234 234" xml:space="preserve">
  6 | <g opacity="0.6">
  7 | 		<radialGradient id="SVGID_1_" cx="117.3563" cy="207.1612" r="107.368" gradientTransform="matrix(1 1.493749e-04 -2.959144e-05 0.1733 0.0061 172.3689)" gradientUnits="userSpaceOnUse">
  8 | 		<stop  offset="0.3247" style="stop-color:#000000;stop-opacity:0.2"/>
  9 | 		<stop  offset="1" style="stop-color:#000000;stop-opacity:0"/>
 10 | 	</radialGradient>
 11 | 	<path fill="url(#SVGID_1_)" d="M221.107,200.784c5.545,1.113,5.545,2.918,0,4.031l-93.71,18.81c-5.545,1.113-14.536,1.113-20.081,0
 12 | 		l-93.71-18.81c-5.545-1.113-5.545-2.918,0-4.031l93.71-18.81c5.545-1.113,14.536-1.113,20.081,0L221.107,200.784z"/>
 13 | 		<radialGradient id="SVGID_2_" cx="116.3563" cy="214.1114" r="56.8709" gradientTransform="matrix(1 1.493749e-04 -4.617017e-05 0.2703 0.0099 156.8797)" gradientUnits="userSpaceOnUse">
 14 | 		<stop  offset="0.2968" style="stop-color:#000000;stop-opacity:0.4"/>
 15 | 		<stop  offset="1" style="stop-color:#000000;stop-opacity:0"/>
 16 | 	</radialGradient>
 17 | 	<path opacity="0.8" fill="url(#SVGID_2_)" d="M221.107,200.784c5.545,1.113,5.545,2.918,0,4.031l-93.71,18.81
 18 | 		c-5.545,1.113-14.536,1.113-20.081,0l-93.71-18.81c-5.545-1.113-5.545-2.918,0-4.031l93.71-18.81
 19 | 		c5.545-1.113,14.536-1.113,20.081,0L221.107,200.784z"/>
 20 | 		<radialGradient id="SVGID_3_" cx="116.8563" cy="219.4576" r="33.8761" gradientTransform="matrix(1 1.493749e-04 -5.262639e-05 0.3082 0.0116 152.1379)" gradientUnits="userSpaceOnUse">
 21 | 		<stop  offset="0.2968" style="stop-color:#000000;stop-opacity:0.4"/>
 22 | 		<stop  offset="1" style="stop-color:#000000;stop-opacity:0"/>
 23 | 	</radialGradient>
 24 | 	<path fill="url(#SVGID_3_)" d="M221.107,200.784c5.545,1.113,5.545,2.918,0,4.031l-93.71,18.81c-5.545,1.113-14.536,1.113-20.081,0
 25 | 		l-93.71-18.81c-5.545-1.113-5.545-2.918,0-4.031l93.71-18.81c5.545-1.113,14.536-1.113,20.081,0L221.107,200.784z"/>
 26 | </g>
 27 | <g>
 28 | 		<radialGradient id="SVGID_4_" cx="633.8045" cy="1584.8099" r="198.3853" gradientTransform="matrix(0.7071 0.7071 -0.7071 0.7071 734.0817 -1396.0051)" gradientUnits="userSpaceOnUse">
 29 | 		<stop  offset="0.05" style="stop-color:#FFFFFF"/>
 30 | 		<stop  offset="0.2804" style="stop-color:#78C8E0"/>
 31 | 		<stop  offset="0.3424" style="stop-color:#68B7DD"/>
 32 | 		<stop  offset="0.4416" style="stop-color:#429BDB"/>
 33 | 		<stop  offset="0.6909" style="stop-color:#2B4D9F"/>
 34 | 		<stop  offset="0.7599" style="stop-color:#284083"/>
 35 | 		<stop  offset="0.9036" style="stop-color:#1D2855"/>
 36 | 		<stop  offset="0.9717" style="stop-color:#171E45"/>
 37 | 	</radialGradient>
 38 | 	<path fill="url(#SVGID_4_)" d="M220.917,104.799c5.554,5.554,5.554,14.558,0,20.111l-93.852,93.852
 39 | 		c-5.554,5.554-14.557,5.554-20.111,0L13.103,124.91c-5.554-5.554-5.554-14.558,0-20.111l93.852-93.852
 40 | 		c5.554-5.554,14.557-5.554,20.111,0L220.917,104.799z"/>
 41 | 	<g>
 42 | 		<defs>
 43 | 			<path id="SVGID_5_" d="M220.916,104.855c5.554,5.554,5.554,14.557,0,20.111l-93.85,93.85c-5.554,5.554-14.557,5.554-20.111,0
 44 | 				l-93.851-93.85c-5.554-5.554-5.554-14.557,0-20.111l93.851-93.85c5.553-5.554,14.557-5.554,20.111,0L220.916,104.855z"/>
 45 | 		</defs>
 46 | 		<clipPath id="SVGID_6_">
 47 | 			<use xlink:href="#SVGID_5_"  overflow="visible"/>
 48 | 		</clipPath>
 49 | 		<g clip-path="url(#SVGID_6_)">
 50 | 			<g>
 51 | 				<g>
 52 | 					<polygon fill="#FFFFFF" points="44.712,71.423 52.838,165.184 53.536,165.867 53.538,62.427 					"/>
 53 | 					<polygon fill="#FFFFFF" points="56.028,59.938 53.538,62.427 53.536,165.867 53.991,166.307 59.762,100.448 					"/>
 54 | 					<polygon fill="#FFFFFF" points="63.949,52.13 56.028,59.938 59.762,100.448 					"/>
 55 | 					<polygon fill="#FFFFFF" points="65.872,50.206 63.949,52.13 53.991,166.307 65.759,101.919 					"/>
 56 | 					<polygon fill="#FFFFFF" points="76.622,39.456 65.872,50.206 65.872,101.354 					"/>
 57 | 					<polygon fill="#FFFFFF" points="77.528,38.664 76.622,39.456 65.872,101.354 66.099,166.307 					"/>
 58 | 					<polygon fill="#FFFFFF" points="91.899,24.406 44.966,72.435 53.36,170.137 67.004,165.796 					"/>
 59 | 				</g>
 60 | 				<polygon fill="#FFFFFF" points="65.759,102.259 53.991,166.307 60.328,172.643 66.382,166.589 				"/>
 61 | 			</g>
 62 | 			<g>
 63 | 				<g>
 64 | 					<polygon fill="#FFFFFF" points="160.671,187.383 66.948,179.264 66.273,178.589 169.667,178.556 					"/>
 65 | 					<polygon fill="#FFFFFF" points="172.157,176.067 169.667,178.556 66.273,178.589 65.788,178.104 131.646,172.333 					"/>
 66 | 					<polygon fill="#FFFFFF" points="179.965,168.146 172.157,176.067 131.646,172.333 					"/>
 67 | 					<polygon fill="#FFFFFF" points="181.888,166.222 179.965,168.146 65.788,178.104 130.175,166.335 					"/>
 68 | 					<polygon fill="#FFFFFF" points="192.639,155.472 181.888,166.222 130.741,166.222 					"/>
 69 | 					<polygon fill="#FFFFFF" points="193.431,154.567 192.639,155.472 130.741,166.222 65.788,165.996 					"/>
 70 | 					<polygon fill="#FFFFFF" points="207.689,140.196 165.163,187.596 61.418,177.859 67.016,165.139 					"/>
 71 | 					<polyline fill="#FFFFFF" points="169.667,178.556 66.251,178.567 65.788,178.104 					"/>
 72 | 					<polyline fill="#FFFFFF" points="169.667,178.556 66.251,178.567 65.788,178.104 					"/>
 73 | 				</g>
 74 | 				<polygon fill="#FFFFFF" points="129.836,166.335 65.788,178.104 59.451,171.767 65.505,165.713 				"/>
 75 | 			</g>
 76 | 		</g>
 77 | 		<g opacity="0.4" clip-path="url(#SVGID_6_)">
 78 | 			<radialGradient id="SVGID_7_" cx="59.8482" cy="172.7286" r="160.9687" gradientUnits="userSpaceOnUse">
 79 | 				<stop  offset="0.1939" style="stop-color:#FFFFFF"/>
 80 | 				<stop  offset="0.4635" style="stop-color:#171E45;stop-opacity:0.5"/>
 81 | 			</radialGradient>
 82 | 			<path fill="url(#SVGID_7_)" d="M116.976,224.064c-4.148,0-8.047-1.615-10.981-4.548l-93.622-93.622
 83 | 				c-6.055-6.055-6.055-15.907,0-21.961l93.622-93.622c2.933-2.933,6.833-4.548,10.981-4.548c4.148,0,8.048,1.615,10.981,4.548
 84 | 				l93.622,93.622c6.055,6.055,6.055,15.907,0,21.961l-93.622,93.622C125.024,222.448,121.124,224.064,116.976,224.064z
 85 | 				 M116.976,8.447c-3.43,0-6.655,1.336-9.082,3.761l-93.622,93.622c-5.007,5.008-5.007,13.156,0,18.163l93.622,93.622
 86 | 				c2.426,2.426,5.651,3.761,9.082,3.761c3.431,0,6.656-1.336,9.082-3.761l93.622-93.622c5.007-5.008,5.007-13.156,0-18.163
 87 | 				l-93.622-93.622C123.632,9.783,120.407,8.447,116.976,8.447z"/>
 88 | 		</g>
 89 | 		<g clip-path="url(#SVGID_6_)">
 90 | 			<g>
 91 | 				<path fill="#FFFFFF" d="M59.762,100.448l-5.771,65.858l-0.455-0.44l0.002-103.44l2.49-2.49L59.762,100.448z M65.872,50.206
 92 | 					l-1.924,1.924l-9.958,114.177l11.769-64.387L65.872,50.206z M77.528,38.664l-0.905,0.792l-10.75,61.898l0.226,64.953
 93 | 					L77.528,38.664z"/>
 94 | 				<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="68.3053" y1="166.3065" x2="68.3053" y2="24.4059">
 95 | 					<stop  offset="0.25" style="stop-color:#FFFFFF"/>
 96 | 					<stop  offset="1" style="stop-color:#429BDB;stop-opacity:0.7"/>
 97 | 				</linearGradient>
 98 | 				<path fill="url(#SVGID_8_)" d="M53.538,62.427l-0.002,103.44l-0.698-0.683l-8.126-93.761L53.538,62.427z M63.949,52.13
 99 | 					l-7.921,7.808l3.734,40.511L63.949,52.13z M76.622,39.456l-10.75,10.75v51.147L76.622,39.456z M91.899,24.406L77.528,38.664
100 | 					L66.099,166.307l0.905-0.51L91.899,24.406z"/>
101 | 			</g>
102 | 			<polygon fill="#FFFFFF" points="65.759,102.259 53.991,166.307 60.328,172.643 66.382,166.589 			"/>
103 | 		</g>
104 | 		<g clip-path="url(#SVGID_6_)">
105 | 			<path fill="#FFFFFF" d="M172.157,176.067l-2.49,2.49l-103.394,0.033l-0.485-0.485l65.858-5.771L172.157,176.067z
106 | 				 M130.175,166.335l-64.387,11.768l114.177-9.958l1.924-1.924L130.175,166.335z M65.788,165.996l64.953,0.226l61.898-10.75
107 | 				l0.792-0.905L65.788,165.996z"/>
108 | 			<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="66.0756" y1="163.7892" x2="207.6886" y2="163.7892">
109 | 				<stop  offset="0.25" style="stop-color:#FFFFFF"/>
110 | 				<stop  offset="1" style="stop-color:#429BDB;stop-opacity:0.7"/>
111 | 			</linearGradient>
112 | 			<path fill="url(#SVGID_9_)" d="M160.671,187.383l-93.723-8.118l-0.675-0.675l103.394-0.033L160.671,187.383z M131.646,172.333
113 | 				l40.511,3.734l7.808-7.921L131.646,172.333z M130.741,166.222h51.147l10.75-10.75L130.741,166.222z M67.016,165.139l-0.94,0.88
114 | 				l127.355-11.453l14.258-14.371L67.016,165.139z"/>
115 | 			<polygon fill="#FFFFFF" points="129.836,166.335 65.788,178.104 59.451,171.767 65.505,165.713 			"/>
116 | 		</g>
117 | 		<radialGradient id="SVGID_10_" cx="60.4155" cy="171.6791" r="40.495" gradientUnits="userSpaceOnUse">
118 | 			<stop  offset="0.2756" style="stop-color:#FFFFFF"/>
119 | 			<stop  offset="0.3503" style="stop-color:#FFFFFF;stop-opacity:0.8969"/>
120 | 			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
121 | 		</radialGradient>
122 | 		<polygon clip-path="url(#SVGID_6_)" fill="url(#SVGID_10_)" points="60.416,131.184 61.085,163.174 66.75,131.683 62.407,163.384 
123 | 			72.929,133.166 63.68,163.797 78.8,135.598 64.873,164.405 84.218,138.918 65.956,165.192 89.05,143.045 66.903,166.138 
124 | 			93.177,147.877 67.69,167.221 96.497,153.295 68.297,168.414 98.929,159.165 68.711,169.687 100.412,165.344 68.92,171.01 
125 | 			100.911,171.679 68.92,172.348 100.412,178.014 68.711,173.671 98.929,184.193 68.297,174.944 96.497,190.063 67.69,176.137 
126 | 			93.177,195.481 66.903,177.22 89.05,200.313 65.956,178.166 84.218,204.44 64.873,178.953 78.8,207.76 63.68,179.561 
127 | 			72.929,210.192 62.407,179.975 66.75,211.675 61.085,180.184 60.416,212.174 59.746,180.184 54.081,211.675 58.424,179.975 
128 | 			47.902,210.192 57.151,179.561 42.031,207.76 55.958,178.953 36.613,204.44 54.875,178.166 31.781,200.313 53.928,177.22 
129 | 			27.654,195.481 53.141,176.137 24.334,190.063 52.534,174.944 21.903,184.193 52.12,173.671 20.419,178.014 51.911,172.348 
130 | 			19.921,171.679 51.911,171.01 20.419,165.344 52.12,169.687 21.903,159.165 52.534,168.414 24.334,153.295 53.141,167.221 
131 | 			27.654,147.877 53.928,166.138 31.781,143.045 54.875,165.192 36.613,138.918 55.958,164.405 42.031,135.598 57.151,163.797 
132 | 			47.902,133.166 58.424,163.384 54.081,131.683 59.746,163.174 		"/>
133 | 	</g>
134 | </g>
135 | </svg>
136 | 


--------------------------------------------------------------------------------
/src/images/lightbeam_150x45.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_150x45.png


--------------------------------------------------------------------------------
/src/images/lightbeam_dialog_warningreset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_dialog_warningreset.png


--------------------------------------------------------------------------------
/src/images/lightbeam_icon_about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_icon_about.png


--------------------------------------------------------------------------------
/src/images/lightbeam_icon_download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_icon_download.png


--------------------------------------------------------------------------------
/src/images/lightbeam_icon_feedback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_icon_feedback.png


--------------------------------------------------------------------------------
/src/images/lightbeam_icon_graph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_icon_graph.png


--------------------------------------------------------------------------------
/src/images/lightbeam_icon_help.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_icon_help.png


--------------------------------------------------------------------------------
/src/images/lightbeam_icon_list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_icon_list.png


--------------------------------------------------------------------------------
/src/images/lightbeam_icon_reset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_icon_reset.png


--------------------------------------------------------------------------------
/src/images/lightbeam_icon_website.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_icon_website.png


--------------------------------------------------------------------------------
/src/images/lightbeam_logo-only_16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_logo-only_16x16.png


--------------------------------------------------------------------------------
/src/images/lightbeam_logo-wordmark_300x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/lightbeam-we/ddd4c0545a43b3e3ba435adf137308571587d211/src/images/lightbeam_logo-wordmark_300x150.png


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


--------------------------------------------------------------------------------
/src/js/background.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | async function checkFirstRun() {
 4 | /*
 5 |   if (await store.isFirstRun()) {
 6 |     browser.tabs.create({ url: 'first-run.html' });
 7 |   }
 8 |   */
 9 | }
10 | 
11 | checkFirstRun();
12 | 
13 | async function runLightbeam() {
14 |   // Checks to see if Lightbeam is already open.
15 |   // Returns true if it is, false if not.
16 |   async function isOpen() {
17 |     const tabs = await browser.tabs.query({});
18 |     const fullUrl = browser.extension.getURL('index.html');
19 |     const lightbeamTabs = tabs.filter((tab) => {
20 |       return (tab.url === fullUrl);
21 |     });
22 |     return lightbeamTabs[0] || false;
23 |   }
24 | 
25 |   const lightbeamTab = await isOpen();
26 |   if (!lightbeamTab) {
27 |     // only open a new Lightbeam instance if one isn't already open.
28 |     browser.tabs.create({ url: 'index.html' });
29 |   } else if (!lightbeamTab.active) {
30 |      // re-focus Lightbeam if it is already open but lost focus
31 |     browser.tabs.update(lightbeamTab.id, {active: true});
32 |   }
33 | }
34 | 
35 | // When the user clicks browserAction icon in toolbar, run Lightbeam
36 | browser.browserAction.onClicked.addListener(runLightbeam);
37 | 


--------------------------------------------------------------------------------
/src/js/capture.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | * Listens for HTTP request responses, sending first- and
  3 | * third-party requests to storage.
  4 | */
  5 | const capture = {
  6 | 
  7 |   init() {
  8 |     this.addListeners();
  9 |   },
 10 | 
 11 |   addListeners() {
 12 |     // listen for each HTTP response
 13 |     this.queue = [];
 14 |     browser.webRequest.onResponseStarted.addListener((response) => {
 15 |       const eventDetails = {
 16 |         type: 'sendThirdParty',
 17 |         data: response
 18 |       };
 19 |       this.queue.push(eventDetails);
 20 |       this.processNextEvent();
 21 |     },
 22 |       {urls: ['<all_urls>']});
 23 |     // listen for tab updates
 24 |     browser.tabs.onUpdated.addListener(
 25 |       (tabId, changeInfo, tab) => {
 26 |         const eventDetails = {
 27 |           type: 'sendFirstParty',
 28 |           data: {
 29 |             tabId,
 30 |             changeInfo,
 31 |             tab
 32 |           }
 33 |         };
 34 |         this.queue.push(eventDetails);
 35 |         this.processNextEvent();
 36 |       });
 37 |   },
 38 | 
 39 |   // Process each HTTP request or tab page load in order,
 40 |   // so that async reads/writes to IndexedDB
 41 |   // (via sendFirstParty and sendThirdParty) won't miss data
 42 |   // The 'ignore' boolean ensures processNextEvent is only
 43 |   // executed when the previous call to processNextEvent
 44 |   // has completed.
 45 |   async processNextEvent(ignore = false) {
 46 |     if (this.processingQueue && !ignore) {
 47 |       return;
 48 |     }
 49 |     if (this.queue.length >= 1) {
 50 |       try {
 51 |         const nextEvent = this.queue.shift();
 52 |         this.processingQueue = true;
 53 |         switch (nextEvent.type) {
 54 |           case 'sendFirstParty':
 55 |             await this.sendFirstParty(
 56 |               nextEvent.data.tabId,
 57 |               nextEvent.data.changeInfo,
 58 |               nextEvent.data.tab
 59 |             );
 60 |             break;
 61 |           case 'sendThirdParty':
 62 |             await this.sendThirdParty(nextEvent.data);
 63 |             break;
 64 |           default:
 65 |             throw new Error(
 66 |               'An event must be of type sendFirstParty or sendThirdParty.'
 67 |             );
 68 |         }
 69 |       } catch (e) {
 70 |         // eslint-disable-next-line no-console
 71 |         console.warn('Exception found in queue process', e);
 72 |       }
 73 |       this.processNextEvent(true);
 74 |     } else {
 75 |       this.processingQueue = false;
 76 |     }
 77 |   },
 78 | 
 79 |   // Returns true if the request should be stored, otherwise false.
 80 |   // info could be a tab (from setFirstParty) or a
 81 |   // response (from setThirdParty) object
 82 |   async shouldStore(info) {
 83 |     const tabId = info.id || info.tabId;
 84 |     let documentUrl, privateBrowsing;
 85 |     // Ignore container tabs as we need to store them correctly
 86 |     //  showing a simpler graph just for default means we won't confuse users
 87 |     //  into thinking isolation has broken
 88 |     const defaultCookieStore = 'firefox-default';
 89 |     if ('cookieStoreId' in info
 90 |         && info.cookieStoreId !== defaultCookieStore) {
 91 |       return false;
 92 |     }
 93 |     if (this.isVisibleTab(tabId)) {
 94 |       const tab = await this.getTab(tabId);
 95 |       if (!tab) {
 96 |         return;
 97 |       }
 98 |       if (tab.cookieStoreId !== defaultCookieStore) {
 99 |         return false;
100 |       }
101 |       documentUrl = new URL(tab.url);
102 |       privateBrowsing = tab.incognito;
103 |     } else {
104 |       // if we were not able to check the cookie store
105 |       // lets drop this for paranoia sake.
106 |       if (!('cookieStoreId' in info)) {
107 |         return false;
108 |       }
109 |       // browser.tabs.get throws an error for nonvisible tabs (tabId = -1)
110 |       // but some non-visible tabs can make third party requests,
111 |       // ex: Service Workers
112 |       documentUrl = new URL(info.originUrl);
113 |       privateBrowsing = false;
114 |     }
115 | 
116 |     // ignore about:*, moz-extension:*
117 |     // also ignore private browsing tabs
118 |     if (documentUrl.protocol !== 'about:'
119 |       && documentUrl.protocol !== 'moz-extension:'
120 |       && !privateBrowsing) {
121 |       return true;
122 |     }
123 |     return false;
124 |   },
125 | 
126 |   isVisibleTab(tabId) {
127 |     return tabId !== browser.tabs.TAB_ID_NONE;
128 |   },
129 | 
130 |   async getTab(tabId) {
131 |     let tab;
132 |     try {
133 |       tab = await browser.tabs.get(tabId);
134 |     } catch (e) {
135 |       // Lets ignore tabs we can't get hold of (likely have closed)
136 |       return;
137 |     }
138 |     return tab;
139 |   },
140 | 
141 |   // capture third party requests
142 |   async sendThirdParty(response) {
143 |     if (!response.originUrl) {
144 |       // originUrl is undefined for the first request from the browser to the
145 |       // first party site
146 |       return;
147 |     }
148 | 
149 |     // @todo figure out why Web Extensions sometimes gives
150 |     // undefined for response.originUrl
151 |     const originUrl = response.originUrl ? new URL(response.originUrl) : '';
152 |     const targetUrl = new URL(response.url);
153 |     let firstPartyUrl;
154 |     if (this.isVisibleTab(response.tabId)) {
155 |       const tab = await this.getTab(response.tabId);
156 |       if (!tab) {
157 |         return;
158 |       }
159 |       firstPartyUrl = new URL(tab.url);
160 |     } else {
161 |       firstPartyUrl = new URL(response.originUrl);
162 |     }
163 | 
164 |     if (firstPartyUrl.hostname
165 |       && targetUrl.hostname !== firstPartyUrl.hostname
166 |       && await this.shouldStore(response)) {
167 |       const data = {
168 |         target: targetUrl.hostname,
169 |         origin: originUrl.hostname,
170 |         requestTime: response.timeStamp,
171 |         firstParty: false
172 |       };
173 |       await store.setThirdParty(
174 |         firstPartyUrl.hostname,
175 |         targetUrl.hostname,
176 |         data
177 |       );
178 |     }
179 |   },
180 | 
181 |   // capture first party requests
182 |   async sendFirstParty(tabId, changeInfo, tab) {
183 |     const documentUrl = new URL(tab.url);
184 |     if (documentUrl.hostname
185 |         && tab.status === 'complete' && await this.shouldStore(tab)) {
186 |       const data = {
187 |         faviconUrl: tab.favIconUrl,
188 |         firstParty: true,
189 |         requestTime: Date.now()
190 |       };
191 |       await store.setFirstParty(documentUrl.hostname, data);
192 |     }
193 |   }
194 | };
195 | 
196 | capture.init();
197 | 


--------------------------------------------------------------------------------
/src/js/lightbeam.js:
--------------------------------------------------------------------------------
  1 | const lightbeam = {
  2 |   websites: {},
  3 |   dataGatheredSince: null,
  4 |   numFirstParties: 0,
  5 |   numThirdParties: 0,
  6 | 
  7 |   async init() {
  8 |     this.websites = await storeChild.getAll();
  9 |     this.initTPToggle();
 10 |     this.renderGraph();
 11 |     this.addListeners();
 12 |     this.updateVars();
 13 |   },
 14 | 
 15 |   async initTPToggle() {
 16 |     const toggleCheckbox
 17 |       = document.getElementById('tracking-protection-control');
 18 |     const trackingProtection = document.getElementById('tracking-protection');
 19 |     const trackingProtectionDisabled
 20 |       = document.getElementById('tracking-protection-disabled');
 21 |     // Do we support setting TP
 22 |     if ('trackingProtectionMode' in browser.privacy.websites) {
 23 |       trackingProtection.hidden = false;
 24 |       trackingProtectionDisabled.hidden = true;
 25 | 
 26 |       const trackingProtectionState
 27 |         = await browser.privacy.websites.trackingProtectionMode.get({});
 28 |       let value = true;
 29 |       if (trackingProtectionState.value !== 'always') {
 30 |         value = false;
 31 |       }
 32 |       toggleCheckbox.checked = value;
 33 |       toggleCheckbox.addEventListener('change', () => {
 34 |         const value = toggleCheckbox.checked ? 'always' : 'private_browsing';
 35 |         browser.privacy.websites.trackingProtectionMode.set({ value });
 36 |       });
 37 |     } else {
 38 |       trackingProtection.hidden = true;
 39 |       trackingProtectionDisabled.hidden = false;
 40 |     }
 41 |   },
 42 | 
 43 |   renderGraph() {
 44 |     const transformedData = this.transformData();
 45 |     viz.init(transformedData.nodes, transformedData.links);
 46 |   },
 47 | 
 48 |   addListeners() {
 49 |     this.downloadData();
 50 |     this.resetData();
 51 |     storeChild.onUpdate((data) => {
 52 |       this.redraw(data);
 53 |     });
 54 |   },
 55 | 
 56 |   // Called from init() (isFirstParty = undefined)
 57 |   // and redraw() (isFirstParty = true or false).
 58 |   async updateVars(isFirstParty) {
 59 | 
 60 |     // initialize dynamic vars from storage
 61 |     if (!this.dataGatheredSince) {
 62 |       const { dateStr, fullDateTime } = await this.getDataGatheredSince();
 63 |       if (!dateStr) {
 64 |         return;
 65 |       }
 66 |       this.dataGatheredSince = dateStr;
 67 |       const dataGatheredSinceElement
 68 |         = document.getElementById('data-gathered-since');
 69 |       dataGatheredSinceElement.textContent = this.dataGatheredSince || '';
 70 |       dataGatheredSinceElement.setAttribute('datetime', fullDateTime || '');
 71 |     }
 72 |     if (isFirstParty === undefined) {
 73 |       this.numFirstParties = await this.getNumFirstParties();
 74 |       this.setPartyVar('firstParty');
 75 |       this.numThirdParties = await this.getNumThirdParties();
 76 |       this.setPartyVar('thirdParty');
 77 |       return;
 78 |     }
 79 | 
 80 |     // update on redraw
 81 |     if (isFirstParty) {
 82 |       this.numFirstParties++;
 83 |       this.setPartyVar('firstParty');
 84 |     } else {
 85 |       this.numThirdParties++;
 86 |       this.setPartyVar('thirdParty');
 87 |     }
 88 |   },
 89 | 
 90 |   // Updates dynamic variable values in the page
 91 |   setPartyVar(party) {
 92 |     const numFirstPartiesElement = document.getElementById('num-first-parties');
 93 |     const numThirdPartiesElement = document.getElementById('num-third-parties');
 94 |     if (party === 'firstParty') {
 95 |       if (this.numFirstParties === 0) {
 96 |         numFirstPartiesElement.textContent = '';
 97 |       } else {
 98 |         numFirstPartiesElement.textContent = `${this.numFirstParties} Sites`;
 99 |       }
100 |     } else if (this.numThirdParties === 0) {
101 |       numThirdPartiesElement.textContent = '';
102 |     } else {
103 |       const str = `${this.numThirdParties} Third Party Sites`;
104 |       numThirdPartiesElement.textContent = str;
105 |     }
106 |   },
107 | 
108 |   async getDataGatheredSince() {
109 |     const firstRequestUnixTime = await storeChild.getFirstRequestTime();
110 |     if (!firstRequestUnixTime) {
111 |       return {};
112 |     }
113 |     // reformat unix time
114 |     let fullDateTime = new Date(firstRequestUnixTime);
115 |     let dateStr = fullDateTime.toDateString();
116 |     // remove day of the week
117 |     const dateArr = dateStr.split(' ');
118 |     dateArr.shift();
119 |     dateStr = dateArr.join(' ');
120 |     // ISO string used for datetime attribute on <time>
121 |     fullDateTime = fullDateTime.toISOString();
122 |     return {
123 |       dateStr,
124 |       fullDateTime
125 |     };
126 |   },
127 | 
128 |   async getNumFirstParties() {
129 |     return await storeChild.getNumFirstParties();
130 |   },
131 | 
132 |   async getNumThirdParties() {
133 |     return await storeChild.getNumThirdParties();
134 |   },
135 | 
136 |   // transforms the object of nested objects 'websites' into a
137 |   // usable format for d3
138 |   /*
139 |     websites is expected to match this format:
140 |     {
141 |       "www.firstpartydomain.com": {
142 |         favicon: "http://blah...",
143 |         firstParty: true,
144 |         firstPartyHostnames: false,
145 |         hostname: "www.firstpartydomain.com",
146 |         thirdParties: [
147 |           "www.thirdpartydomain.com",
148 |           ...
149 |         ]
150 |       },
151 |       "www.thirdpartydomain.com": {
152 |         favicon: "",
153 |         firstParty: false,
154 |         firstPartyHostnames: [
155 |           "www.firstpartydomain.com",
156 |           ...
157 |         ],
158 |         hostname: "www.thirdpartydomain.com",
159 |         thirdParties: []
160 |       },
161 |       ...
162 |     }
163 | 
164 |     nodes is expected to match this format:
165 |     [
166 |       {
167 |         favicon: "http://blah...",
168 |         firstParty: true,
169 |         firstPartyHostnames: false,
170 |         hostname: "www.firstpartydomain.com",
171 |         thirdParties: [
172 |           "www.thirdpartydomain.com",
173 |           ...
174 |         ]
175 |       },
176 |       {
177 |         favicon: "",
178 |         firstParty: false,
179 |         firstPartyHostnames: [
180 |           "www.firstpartydomain.com",
181 |           ...
182 |         ],
183 |         hostname: "www.thirdpartydomain.com",
184 |         thirdParties: []
185 |       },
186 |       ...
187 |     ]
188 | 
189 |     links is expected to match this format:
190 |     [
191 |       {
192 |         source: {
193 |           favicon: "http://blah...",
194 |           firstParty: true,
195 |           firstPartyHostnames: false,
196 |           hostname: "www.firstpartydomain.com",
197 |           thirdParties: [
198 |             "www.thirdpartydomain.com",
199 |             ...
200 |           ]
201 |         },
202 |         target: {
203 |           favicon: "",
204 |           firstParty: false,
205 |           firstPartyHostnames: [
206 |             "www.firstpartydomain.com",
207 |             ...
208 |           ],
209 |           hostname: "www.thirdpartydomain.com",
210 |           thirdParties: []
211 |         }
212 |       },
213 |       ...
214 |     ]
215 |   */
216 |   transformData() {
217 |     const nodes = [];
218 |     let links = [];
219 |     for (const website in this.websites) {
220 |       const site = this.websites[website];
221 |       if (site.thirdParties) {
222 |         const thirdPartyLinks = site.thirdParties.map((thirdParty) => {
223 |           return {
224 |             source: website,
225 |             target: thirdParty
226 |           };
227 |         });
228 |         links = links.concat(thirdPartyLinks);
229 |       }
230 |       nodes.push(this.websites[website]);
231 |     }
232 | 
233 |     return {
234 |       nodes,
235 |       links
236 |     };
237 |   },
238 | 
239 |   downloadData() {
240 |     const saveData = document.getElementById('save-data-button');
241 |     saveData.addEventListener('click', async () => {
242 |       const data = await storeChild.getAll();
243 |       const blob = new Blob([JSON.stringify(data ,' ' , 2)],
244 |         {type : 'application/json'});
245 |       const url = window.URL.createObjectURL(blob);
246 |       const downloading = browser.downloads.download({
247 |         url : url,
248 |         filename : 'lightbeamData.json',
249 |         conflictAction : 'uniquify'
250 |       });
251 |       await downloading;
252 |     });
253 |   },
254 | 
255 |   resetData() {
256 |     const resetData = document.getElementById('reset-data-button');
257 |     const dialog = document.getElementById('reset-data-dialog');
258 |     window.dialogPolyfill && window.dialogPolyfill.registerDialog(dialog);
259 | 
260 |     resetData.addEventListener('click', () => {
261 |       dialog.showModal();
262 |     });
263 | 
264 |     dialog.addEventListener('cancel', () => {
265 |       delete dialog.returnValue;
266 |     });
267 | 
268 |     dialog.addEventListener('close', async () => {
269 |       if (dialog.returnValue === 'confirm') {
270 |         await storeChild.reset();
271 |         window.location.reload();
272 |       }
273 | 
274 |       // This is a little naive, because the dialog might not have been
275 |       // triggered by the reset button. But it's better than nothing.
276 |       resetData.focus();
277 |     });
278 |   },
279 | 
280 |   redraw(data) {
281 |     if (!(data.hostname in this.websites)) {
282 |       this.websites[data.hostname] = data;
283 |       this.updateVars(data.firstParty);
284 |     }
285 |     if (data.firstPartyHostnames) {
286 |       // if we have the first parties make the link if they don't exist
287 |       data.firstPartyHostnames.forEach((firstPartyHostname) => {
288 |         if (this.websites[firstPartyHostname]) {
289 |           const firstPartyWebsite = this.websites[firstPartyHostname];
290 |           if (!('thirdParties' in firstPartyWebsite)) {
291 |             firstPartyWebsite.thirdParties = [];
292 |             firstPartyWebsite.firstParty = true;
293 |           }
294 |           if (!(firstPartyWebsite.thirdParties.includes(data.hostname))) {
295 |             firstPartyWebsite.thirdParties.push(data.hostname);
296 |           }
297 |         }
298 |       });
299 |     }
300 |     const transformedData = this.transformData(this.websites);
301 |     viz.draw(transformedData.nodes, transformedData.links);
302 |   }
303 | };
304 | 
305 | window.onload = () => {
306 |   lightbeam.init();
307 | };
308 | 


--------------------------------------------------------------------------------
/src/js/store.js:
--------------------------------------------------------------------------------
  1 | const store = {
  2 |   ALLOWLIST_URL: '/ext-libs/disconnect-entitylist.json',
  3 |   db: null,
  4 | 
  5 |   async init() {
  6 |     if (!this.db) {
  7 |       this.makeNewDatabase();
  8 |     }
  9 |     browser.runtime.onMessage.addListener((m) => {
 10 |       return store.messageHandler(m);
 11 |     });
 12 |     await this.getAllowList();
 13 |   },
 14 | 
 15 |   async isFirstRun() {
 16 |     let isFirstRun = await browser.storage.local.get('isFirstRun');
 17 |     if (! ('isFirstRun' in isFirstRun)) {
 18 |       isFirstRun = true;
 19 |     } else if (isFirstRun) {
 20 |       isFirstRun = false;
 21 |     }
 22 |     await browser.storage.local.set({ isFirstRun });
 23 |     return isFirstRun;
 24 |   },
 25 | 
 26 |   indexes: [
 27 |     'hostname', // Primary key
 28 |     'firstRequestTime',
 29 |     'lastRequestTime',
 30 |     'isVisible',
 31 |     'firstParty'
 32 |   ],
 33 | 
 34 |   makeNewDatabase() {
 35 |     this.db = new Dexie('websites_database');
 36 |     const websites = this.indexes.join(', ');
 37 |     this.db.version(1).stores({websites});
 38 |     this.db.open();
 39 |   },
 40 | 
 41 |   // get Disconnect Entity List from shavar-prod-lists submodule
 42 |   async getAllowList() {
 43 |     let allowList;
 44 |     try {
 45 |       allowList = await fetch(this.ALLOWLIST_URL);
 46 |       allowList = await allowList.json();
 47 |     } catch (error) {
 48 |       allowList = {};
 49 |       const explanation = 'See README.md for how to import submodule file';
 50 |       // eslint-disable-next-line no-console
 51 |       console.error(`${error.message} ${explanation} ${this.ALLOWLIST_URL}`);
 52 |     }
 53 |     const { firstPartyAllowList, thirdPartyAllowList }
 54 |       = this.reformatList(allowList);
 55 |     this.firstPartyAllowList = firstPartyAllowList;
 56 |     this.thirdPartyAllowList = thirdPartyAllowList;
 57 |   },
 58 | 
 59 |   /*
 60 |   disconnect-entitylist.json is expected to match this format, where:
 61 |     - 'properties' keys are first parties
 62 |     - 'resources' keys are third parties
 63 | 
 64 |   {
 65 |     "Facebook" : {
 66 |       "properties": [
 67 |         "facebook.com",
 68 |         "facebook.de",
 69 |         ...
 70 |         "messenger.com"
 71 |       ],
 72 |       "resources": [
 73 |         "facebook.com",
 74 |         "facebook.de",
 75 |         ...
 76 |         "akamaihd.net"
 77 |       ]
 78 |     }
 79 | 
 80 |     "Google" : {
 81 |       ...
 82 |     }
 83 |   }
 84 | 
 85 |   this.firstPartyAllowList is expected to match this format:
 86 |   {
 87 |     "google.com": 1,
 88 |     "abc.xyz": 1
 89 |     ....
 90 |     "facebook.com": 2,
 91 |     ...
 92 |   }
 93 | 
 94 |   this.thirdPartyAllowList is expected to match this format:
 95 |   {
 96 |     1: [
 97 |       "google.com",
 98 |       "googleanalytics.com",
 99 |       "weloveevilstuff.com"
100 |     ]
101 |   }
102 | */
103 | 
104 |   reformatList(allowList) {
105 |     const firstPartyAllowList = {};
106 |     const thirdPartyAllowList = {};
107 |     let counter = 0;
108 |     for (const siteOwner in allowList) {
109 |       const firstParties = allowList[siteOwner].properties;
110 |       for (let i = 0; i < firstParties.length; i++) {
111 |         firstPartyAllowList[firstParties[i]] = counter;
112 |       }
113 |       const thirdParties = allowList[siteOwner].resources;
114 |       thirdPartyAllowList[counter] = [];
115 |       for (let i = 0; i < thirdParties.length; i++) {
116 |         thirdPartyAllowList[counter].push(thirdParties[i]);
117 |       }
118 |       counter++;
119 |     }
120 | 
121 |     return {
122 |       firstPartyAllowList,
123 |       thirdPartyAllowList
124 |     };
125 |   },
126 | 
127 |   // send message to storeChild when data in store is changed
128 |   updateChild(...args) {
129 |     return browser.runtime.sendMessage({
130 |       type: 'storeChildCall',
131 |       args
132 |     });
133 |   },
134 | 
135 |   messageHandler(m) {
136 |     if (m.type !== 'storeCall') {
137 |       return;
138 |     }
139 | 
140 |     const publicMethods = [
141 |       'getAll',
142 |       'reset',
143 |       'getFirstRequestTime',
144 |       'getNumFirstParties',
145 |       'getNumThirdParties',
146 |       'isFirstRun'
147 |     ];
148 | 
149 |     if (publicMethods.includes(m['method'])) {
150 |       const args = m.args;
151 |       return this[m['method']](...args);
152 |     } else {
153 |       return new Error(`Unsupported method ${m.method}`);
154 |     }
155 |   },
156 | 
157 |   async _write(website) {
158 |     for (const key in website) {
159 |       website[key] = this.mungeDataInbound(key, website[key]);
160 |     }
161 |     return await this.db.websites.put(website);
162 |   },
163 | 
164 |   outputWebsite(hostname, website) {
165 |     const output = {
166 |       hostname: hostname,
167 |       favicon: website.faviconUrl || '',
168 |       firstPartyHostnames: website.firstPartyHostnames || false,
169 |       firstParty: !!website.firstParty,
170 |       thirdParties: []
171 |     };
172 |     if ('thirdPartyHostnames' in website) {
173 |       output.thirdParties = website.thirdPartyHostnames;
174 |     }
175 |     return output;
176 |   },
177 | 
178 |   async getAll() {
179 |     const websites = await this.db.websites.filter((website) => {
180 |       return website.isVisible || website.firstParty;
181 |     }).toArray();
182 |     const output = {};
183 |     for (const website of websites) {
184 |       output[website.hostname]
185 |         = this.outputWebsite(website.hostname, website);
186 |     }
187 |     return output;
188 |   },
189 | 
190 |   /*
191 |   if not {}, getWebsite returns an object:
192 |   - in this format for first parties:
193 |     {
194 |       thirdPartyHostnames: [
195 |         "www.thirdpartydomain.com",
196 |         ...
197 |       ]
198 |     }
199 |   and in this format for third parties:
200 |     {
201 |       firstPartyHostnames: [
202 |         "www.firstpartydomain.com",
203 |         ...
204 |       ],
205 |       isVisible: false,
206 |     }
207 |   */
208 |   async getWebsite(hostname) {
209 |     if (!hostname) {
210 |       throw new Error('getWebsite requires a valid hostname argument');
211 |     }
212 | 
213 |     const website = await this.db.websites.get(hostname);
214 |     if (website) {
215 |       const websiteOutput = {};
216 |       Object.keys(website).forEach((key) => {
217 |         websiteOutput[key] = this.mungeDataOutbound(key, website[key]);
218 |       });
219 |       return websiteOutput;
220 |     } else {
221 |       return {};
222 |     }
223 |   },
224 | 
225 |   mungeDataInbound(key, value) {
226 |     if (this.indexes.includes(key)) {
227 |       // IndexedDB does not accept boolean values for indexes; using 0/1 instead
228 |       if (value === true) {
229 |         value = 1;
230 |       }
231 |       if (value === false) {
232 |         value = 0;
233 |       }
234 |     }
235 |     return value;
236 |   },
237 | 
238 |   mungeDataOutbound(key, value) {
239 |     if (this.indexes.includes(key)) {
240 |       // IndexedDB does not accept boolean values for indexes; using 0/1 instead
241 |       if (value === 1) {
242 |         value = true;
243 |       }
244 |       if (value === 0) {
245 |         value = false;
246 |       }
247 |     }
248 |     return value;
249 |   },
250 | 
251 |   async setWebsite(hostname, data) {
252 |     const website = await this.getWebsite(hostname);
253 | 
254 |     if (!('hostname' in website)) {
255 |       website['hostname'] = hostname;
256 |     }
257 | 
258 |     for (const key in data) {
259 |       const value = data[key];
260 |       switch (key) {
261 |         case 'requestTime':
262 |           // store first and last request times for clearing data every X days
263 |           if (!('firstRequestTime' in website)) {
264 |             website.firstRequestTime = value;
265 |           } else {
266 |             website.lastRequestTime = value;
267 |           }
268 |           break;
269 |         case 'isVisible':
270 |           if ('isVisible' in website
271 |               && website.isVisible === true) {
272 |             // once a website is visible, it will always be visible
273 |             break;
274 |           }
275 |           website.isVisible = value;
276 |           break;
277 |         case 'firstParty':
278 |           if ('firstParty' in website
279 |               && website.firstParty === true) {
280 |             // once a website is a first party, it will always be drawn as one
281 |             break;
282 |           }
283 |           website.firstParty = value;
284 |           if (value) {
285 |             website.isVisible = value;
286 |           }
287 |           break;
288 |         default:
289 |           website[key] = value;
290 |           break;
291 |       }
292 |     }
293 | 
294 |     await this._write(website);
295 | 
296 |     return website;
297 |   },
298 | 
299 | 
300 |   async isNewWebsite(hostname) {
301 |     if (!(await this.db.websites.get(hostname))) {
302 |       return true;
303 |     }
304 |     return false;
305 |   },
306 | 
307 |   getHostnameVariants(hostname) {
308 |     const hostnameVariants = [hostname];
309 |     const hostnameArr = hostname.split('.');
310 |     const numDots = hostnameArr.length - 1;
311 |     for (let i = 0; i < numDots - 1; i++) {
312 |       hostnameArr.shift();
313 |       hostname = hostnameArr.join('.');
314 |       hostnameVariants.push(hostname);
315 |     }
316 |     return hostnameVariants;
317 |   },
318 | 
319 |   // check if third party is on the allowlist (owned by the first party)
320 |   // returns true if it is and false otherwise
321 |   onAllowList(firstPartyFromRequest, thirdPartyFromRequest) {
322 |     if (thirdPartyFromRequest && this.firstPartyAllowList) {
323 |       const hostnameVariantsFirstParty
324 |         = this.getHostnameVariants(firstPartyFromRequest);
325 |       for (let i = 0; i < hostnameVariantsFirstParty.length; i++) {
326 |         if (this.firstPartyAllowList
327 |           .hasOwnProperty(hostnameVariantsFirstParty[i])) {
328 |           // first party is in the allowlist
329 |           const index = this.firstPartyAllowList[hostnameVariantsFirstParty[i]];
330 |           const hostnameVariantsThirdParty
331 |             = this.getHostnameVariants(thirdPartyFromRequest);
332 |           for (let j = 0; j < hostnameVariantsThirdParty.length; j++) {
333 |             if (this.thirdPartyAllowList[index]
334 |               .includes(hostnameVariantsThirdParty[j])) {
335 |               return true;
336 |             }
337 |           }
338 |           return false;
339 |         }
340 |       }
341 |     }
342 |     return false;
343 |   },
344 | 
345 |   async setFirstParty(hostname, data) {
346 |     if (!hostname) {
347 |       throw new Error('setFirstParty requires a valid hostname argument');
348 |     }
349 | 
350 |     const isNewWebsite = await this.isNewWebsite(hostname);
351 | 
352 |     const responseData = await this.setWebsite(hostname, data);
353 | 
354 |     if (isNewWebsite) {
355 |       this.updateChild(this.outputWebsite(hostname, responseData));
356 |     }
357 |   },
358 | 
359 |   async setThirdParty(origin, target, data) {
360 |     if (!origin) {
361 |       throw new Error('setThirdParty requires a valid origin argument');
362 |     }
363 | 
364 |     let isNewThirdParty = false;
365 |     let shouldUpdate = false;
366 | 
367 |     const firstParty = await this.getWebsite(origin);
368 |     const thirdParty = await this.getWebsite(target);
369 | 
370 |     // add link in third party if it doesn't exist yet
371 |     if (!('firstPartyHostnames' in thirdParty)) {
372 |       thirdParty['firstPartyHostnames'] = [];
373 |     }
374 |     if (!thirdParty['firstPartyHostnames'].includes(origin)) {
375 |       thirdParty['firstPartyHostnames'].push(origin);
376 |     }
377 | 
378 |     // add link in first party if it doesn't exist yet
379 |     // and the third party is visible (i.e. not allowlisted)
380 |     if (!this.isFirstPartyLinkedToThirdParty(firstParty, target)) {
381 |       if (!this.isVisibleThirdParty(thirdParty)) {
382 |         if (this.onAllowList(origin, target)) {
383 |           // hide third party
384 |           thirdParty['isVisible'] = false;
385 |         } else {
386 |           // show third party; it either became visible or is brand new
387 |           thirdParty['isVisible'] = true;
388 |           isNewThirdParty = true;
389 |           for (let i = 0; i < thirdParty['firstPartyHostnames'].length; i++) {
390 |             const firstPartyHostname = thirdParty['firstPartyHostnames'][i];
391 |             await this.addFirstPartyLink(firstPartyHostname, target);
392 |           }
393 |           shouldUpdate = true;
394 |         }
395 |       }
396 |       if (this.isVisibleThirdParty(thirdParty) && !isNewThirdParty) {
397 |         // an existing visible third party links to a new first party
398 |         await this.addFirstPartyLink(origin, target);
399 |         shouldUpdate = true;
400 |       }
401 |     }
402 | 
403 |     // merge data with thirdParty
404 |     for (const key in data) {
405 |       thirdParty[key] = data[key];
406 |     }
407 | 
408 |     const responseData = await this.setWebsite(target, thirdParty);
409 | 
410 |     if (shouldUpdate) {
411 |       this.updateChild(this.outputWebsite(target, responseData));
412 |     }
413 |   },
414 | 
415 |   isFirstPartyLinkedToThirdParty(firstParty, thirdPartyHostname) {
416 |     if (!('thirdPartyHostnames' in firstParty)
417 |       || !firstParty['thirdPartyHostnames'].includes(thirdPartyHostname)) {
418 |       return false;
419 |     }
420 |     return true;
421 |   },
422 | 
423 |   isVisibleThirdParty(thirdParty) {
424 |     if (!('isVisible' in thirdParty) || !thirdParty['isVisible']) {
425 |       return false;
426 |     }
427 |     return true;
428 |   },
429 | 
430 |   async addFirstPartyLink(firstPartyHostname, thirdPartyHostname) {
431 |     const firstParty = await this.getWebsite(firstPartyHostname);
432 |     // We are likely storing the tp first, lets account for that
433 |     if (!('firstParty' in firstParty)) {
434 |       firstParty.firstParty = true;
435 |     }
436 |     if (!('thirdPartyHostnames' in firstParty)) {
437 |       firstParty['thirdPartyHostnames'] = [];
438 |     }
439 |     if (!this.isFirstPartyLinkedToThirdParty(firstParty, thirdPartyHostname)) {
440 |       firstParty['thirdPartyHostnames'].push(thirdPartyHostname);
441 |       await this.setFirstParty(firstPartyHostname, firstParty);
442 |     }
443 |   },
444 | 
445 |   async reset() {
446 |     // empty out request processing queue
447 |     capture.queue = [];
448 |     return await this.db.websites.clear();
449 |   },
450 | 
451 |   async getFirstRequestTime() {
452 |     const oldestSite
453 |       = await this.db.websites.orderBy('firstRequestTime').first();
454 |     if (!oldestSite) {
455 |       return false;
456 |     }
457 |     return oldestSite.firstRequestTime;
458 |   },
459 | 
460 |   async getNumFirstParties() {
461 |     return await this.db.websites.where('firstParty').equals(1).count();
462 |   },
463 | 
464 |   async getNumThirdParties() {
465 |     return await this.db.websites
466 |       .where('firstParty').equals(0).and((website) => {
467 |         return website.isVisible;
468 |       }).count();
469 |   }
470 | };
471 | 
472 | store.init();
473 | 


--------------------------------------------------------------------------------
/src/js/storeChild.js:
--------------------------------------------------------------------------------
 1 | const storeChildObject = {
 2 |   callbacks: new Set(),
 3 | 
 4 |   init() {
 5 |     browser.runtime.onMessage.addListener((m) => {
 6 |       this.messageHandler(m);
 7 |     });
 8 |   },
 9 | 
10 |   update(data) {
11 |     this.callbacks.forEach((callback) => {
12 |       callback(data);
13 |     });
14 |   },
15 | 
16 |   onUpdate(callback) {
17 |     this.callbacks.add(callback);
18 |   },
19 | 
20 |   messageHandler(m) {
21 |     if (m.type !== 'storeChildCall') {
22 |       return;
23 |     }
24 | 
25 |     const args = m.args;
26 |     return this.update(...args);
27 |   },
28 | 
29 |   parentMessage(method, ...args) {
30 |     return browser.runtime.sendMessage({
31 |       type: 'storeCall',
32 |       method,
33 |       args
34 |     });
35 |   }
36 | };
37 | 
38 | const storeChild = new Proxy(storeChildObject, {
39 |   get(target, prop) {
40 |     if (target[prop] === undefined) {
41 |       return async function(...args)  {
42 |         return await this.parentMessage(prop, ...args);
43 |       };
44 |     } else {
45 |       return target[prop];
46 |     }
47 |   }
48 | });
49 | 
50 | storeChild.init();
51 | 


--------------------------------------------------------------------------------
/src/js/viz.js:
--------------------------------------------------------------------------------
  1 | // eslint-disable-next-line no-unused-vars
  2 | const viz = {
  3 |   scalingFactor: 2,
  4 |   circleRadius: 5,
  5 |   resizeTimer: null,
  6 |   minZoom: 0.5,
  7 |   maxZoom: 1.5,
  8 |   collisionRadius: 10,
  9 |   chargeStrength: -100,
 10 |   tickCount: 100,
 11 |   canvasColor: 'white',
 12 |   alphaStart: 1,
 13 |   alphaTargetStart: 0.1,
 14 |   alphaTargetStop: 0,
 15 | 
 16 |   init(nodes, links) {
 17 |     const { width, height } = this.getDimensions();
 18 |     const { canvas, context } = this.createCanvas();
 19 | 
 20 |     this.canvas = canvas;
 21 |     this.context = context;
 22 |     this.tooltip = document.getElementById('tooltip');
 23 |     this.circleRadius = this.circleRadius * this.scalingFactor;
 24 |     this.collisionRadius = this.collisionRadius * this.scalingFactor;
 25 |     this.scale = (window.devicePixelRatio || 1) * this.scalingFactor;
 26 |     this.transform = d3.zoomIdentity;
 27 |     this.defaultIcon = this.loadImage('images/defaultFavicon.svg');
 28 | 
 29 |     this.updateCanvas(width, height);
 30 |     this.draw(nodes, links);
 31 |     this.addListeners();
 32 |   },
 33 | 
 34 |   draw(nodes, links) {
 35 |     this.nodes = nodes;
 36 |     this.links = links;
 37 | 
 38 |     this.simulateForce();
 39 |     this.drawOnCanvas();
 40 |   },
 41 | 
 42 |   simulateForce() {
 43 |     if (!this.simulation) {
 44 |       this.simulation = d3.forceSimulation(this.nodes);
 45 |       this.simulation.on('tick', () => {
 46 |         return this.drawOnCanvas();
 47 |       });
 48 |       this.registerSimulationForces();
 49 |     } else {
 50 |       this.simulation.nodes(this.nodes);
 51 |       this.resetAlpha();
 52 |     }
 53 |     this.registerLinkForce();
 54 |   },
 55 | 
 56 |   resetAlpha() {
 57 |     const alpha = this.simulation.alpha();
 58 |     const alphaRounded =  Math.round((1 - alpha) * 100);
 59 |     if (alphaRounded === 100) {
 60 |       this.simulation.alpha(this.alphaStart);
 61 |       this.restartSimulation();
 62 |     }
 63 |   },
 64 | 
 65 |   resetAlphaTarget() {
 66 |     this.simulation.alphaTarget(this.alphaTargetStart);
 67 |     this.restartSimulation();
 68 |   },
 69 | 
 70 |   stopAlphaTarget() {
 71 |     this.simulation.alphaTarget(this.alphaTargetStop);
 72 |   },
 73 | 
 74 |   restartSimulation() {
 75 |     this.simulation.restart();
 76 |   },
 77 | 
 78 |   registerLinkForce() {
 79 |     const linkForce = d3.forceLink(this.links);
 80 |     linkForce.id((d) => {
 81 |       return d.hostname;
 82 |     });
 83 |     this.simulation.force('link', linkForce);
 84 |   },
 85 | 
 86 |   registerSimulationForces() {
 87 |     const centerForce = d3.forceCenter(this.width / 2, this.height / 2);
 88 |     this.simulation.force('center', centerForce);
 89 | 
 90 |     const forceX = d3.forceX(this.width / 2);
 91 |     this.simulation.force('x', forceX);
 92 | 
 93 |     const forceY = d3.forceY(this.height / 2);
 94 |     this.simulation.force('y', forceY);
 95 | 
 96 |     const chargeForce = d3.forceManyBody();
 97 |     chargeForce.strength(this.chargeStrength);
 98 |     this.simulation.force('charge', chargeForce);
 99 | 
100 |     const collisionForce = d3.forceCollide(this.collisionRadius);
101 |     this.simulation.force('collide', collisionForce);
102 |   },
103 | 
104 |   createCanvas() {
105 |     const base = document.getElementById('visualization');
106 |     const canvas = document.createElement('canvas');
107 |     const context = canvas.getContext('2d');
108 | 
109 |     base.appendChild(canvas);
110 | 
111 |     return {
112 |       canvas,
113 |       context
114 |     };
115 |   },
116 | 
117 |   updateCanvas(width, height) {
118 |     this.width = width;
119 |     this.height = height;
120 |     this.canvas.setAttribute('width', width * this.scale);
121 |     this.canvas.setAttribute('height', height * this.scale);
122 |     this.canvas.style.width = `${width}px`;
123 |     this.canvas.style.height = `${height}px`;
124 |     this.context.scale(this.scale, this.scale);
125 |   },
126 | 
127 |   getDimensions() {
128 |     const element = document.body;
129 |     const { width, height } = element.getBoundingClientRect();
130 | 
131 |     return {
132 |       width,
133 |       height
134 |     };
135 |   },
136 | 
137 |   drawOnCanvas() {
138 |     this.context.clearRect(0, 0, this.width, this.height);
139 |     this.context.save();
140 |     this.context.translate(this.transform.x, this.transform.y);
141 |     this.context.scale(this.transform.k, this.transform.k);
142 |     this.drawLinks();
143 |     this.drawNodes();
144 |     this.context.restore();
145 |   },
146 | 
147 |   getRadius(thirdPartyLength) {
148 |     if (thirdPartyLength > 0) {
149 |       if (thirdPartyLength > this.collisionRadius) {
150 |         return this.circleRadius + this.collisionRadius;
151 |       } else {
152 |         return this.circleRadius + thirdPartyLength;
153 |       }
154 |     }
155 |     return this.circleRadius;
156 |   },
157 | 
158 |   drawNodes() {
159 |     for (const node of this.nodes) {
160 |       const x = node.fx || node.x;
161 |       const y = node.fy || node.y;
162 |       let radius;
163 | 
164 |       this.context.beginPath();
165 |       this.context.moveTo(x, y);
166 | 
167 |       if (node.firstParty) {
168 |         radius = this.getRadius(node.thirdParties.length);
169 |         this.drawFirstParty(x, y, radius);
170 |       } else {
171 |         this.drawThirdParty(x, y);
172 |       }
173 | 
174 |       if (node.shadow) {
175 |         this.drawShadow(x, y, radius);
176 |       }
177 | 
178 |       this.context.fillStyle = this.canvasColor;
179 |       this.context.closePath();
180 |       this.context.fill();
181 | 
182 |       if (node.favicon) {
183 |         this.drawFavicon(node, x, y, radius);
184 |       } else {
185 |         this.drawFavicon(node, x, y, this.circleRadius);
186 |       }
187 |     }
188 |   },
189 | 
190 |   getSquare(radius) {
191 |     const side = Math.sqrt(radius * radius * 2);
192 |     const offset = side * 0.5;
193 | 
194 |     return {
195 |       side,
196 |       offset
197 |     };
198 |   },
199 | 
200 |   loadImage(URI) {
201 |     return new Promise((resolve, reject) => {
202 |       if (!URI) {
203 |         return reject();
204 |       }
205 | 
206 |       const image = new Image();
207 | 
208 |       image.onload = () => {
209 |         return resolve(image);
210 |       };
211 |       image.onerror = () => {
212 |         return resolve(this.defaultIcon);
213 |       };
214 |       image.src = URI;
215 |     });
216 |   },
217 | 
218 |   scaleFavicon(image, side) {
219 |     const canvas = document.createElement('canvas'),
220 |       context = canvas.getContext('2d');
221 | 
222 |     canvas.width = side * this.scale;
223 |     canvas.height = side * this.scale;
224 |     context.fillStyle = this.canvasColor;
225 |     context.fillRect(0, 0, canvas.width, canvas.height);
226 | 
227 |     context.drawImage(
228 |       image,
229 |       0,
230 |       0,
231 |       side * this.scale,
232 |       side * this.scale);
233 | 
234 |     return context.getImageData(0, 0, canvas.width, canvas.height);
235 |   },
236 | 
237 |   async drawFavicon(node, x, y, radius) {
238 |     const offset = this.getSquare(radius).offset,
239 |       side = this.getSquare(radius).side,
240 |       tx = this.transform.applyX(x) - offset,
241 |       ty = this.transform.applyY(y) - offset;
242 | 
243 |     if (!node.image) {
244 |       node.image = await this.loadImage(node.favicon);
245 |     }
246 | 
247 |     this.context.putImageData(
248 |       this.scaleFavicon(node.image, side),
249 |       tx * this.scale,
250 |       ty * this.scale
251 |     );
252 |   },
253 | 
254 |   drawShadow(x, y, radius) {
255 |     const lineWidth = 2,
256 |       shadowBlur = 15,
257 |       shadowRadius = 5;
258 |     this.context.beginPath();
259 |     this.context.lineWidth = lineWidth;
260 |     this.context.shadowColor = this.canvasColor;
261 |     this.context.strokeStyle = 'rgba(0, 0, 0, 1)';
262 |     this.context.shadowBlur = shadowBlur;
263 |     this.context.shadowOffsetX = 0;
264 |     this.context.shadowOffsetY = 0;
265 |     this.context.arc(x, y, radius + shadowRadius, 0, 2 * Math.PI);
266 |     this.context.stroke();
267 |     this.context.closePath();
268 |   },
269 | 
270 |   drawFirstParty(x, y, radius) {
271 |     this.context.arc(x, y, radius, 0, 2 * Math.PI);
272 |   },
273 | 
274 |   drawThirdParty(x, y) {
275 |     const deltaY = this.circleRadius / 2;
276 |     const deltaX = deltaY * Math.sqrt(3);
277 | 
278 |     this.context.moveTo(x - deltaX, y + deltaY);
279 |     this.context.lineTo(x, y - this.circleRadius);
280 |     this.context.lineTo(x + deltaX, y + deltaY);
281 |   },
282 | 
283 |   getTooltipPosition(x, y) {
284 |     const tooltipArrowHeight = 20;
285 |     const { right: canvasRight } = this.canvas.getBoundingClientRect();
286 |     const {
287 |       height: tooltipHeight,
288 |       width: tooltipWidth
289 |     } = this.tooltip.getBoundingClientRect();
290 |     const top = y - tooltipHeight - this.circleRadius - tooltipArrowHeight;
291 | 
292 |     let left;
293 |     if (x + tooltipWidth >= canvasRight) {
294 |       left = x - tooltipWidth;
295 |     } else {
296 |       left = x - (tooltipWidth / 2);
297 |     }
298 | 
299 |     return {
300 |       left,
301 |       top
302 |     };
303 |   },
304 | 
305 |   showTooltip(title, x, y) {
306 |     this.tooltip.innerText = title;
307 |     this.tooltip.style.display = 'block';
308 | 
309 |     const { left, top } = this.getTooltipPosition(x, y);
310 |     this.tooltip.style['left'] = `${left}px`;
311 |     this.tooltip.style['top'] = `${top}px`;
312 |   },
313 | 
314 |   hideTooltip() {
315 |     this.tooltip.style.display = 'none';
316 |   },
317 | 
318 |   drawLinks() {
319 |     this.context.beginPath();
320 |     for (const d of this.links) {
321 |       const sx = d.source.fx || d.source.x;
322 |       const sy = d.source.fy || d.source.y;
323 |       const tx = d.target.fx || d.target.x;
324 |       const ty = d.target.fy || d.target.y;
325 |       this.context.moveTo(sx, sy);
326 |       this.context.lineTo(tx, ty);
327 |     }
328 |     this.context.closePath();
329 |     this.context.strokeStyle = '#ccc';
330 |     this.context.stroke();
331 |   },
332 | 
333 |   isPointInsideCircle(x, y, cx, cy) {
334 |     const dx = Math.abs(x - cx);
335 |     const dy = Math.abs(y - cy);
336 |     const d = dx * dx + dy * dy;
337 |     const r = this.circleRadius;
338 | 
339 |     return d <= r * r;
340 |   },
341 | 
342 |   getNodeAtCoordinates(x, y) {
343 |     for (const node of this.nodes) {
344 |       if (this.isPointInsideCircle(x, y, node.x, node.y)) {
345 |         return node;
346 |       }
347 |     }
348 |     return null;
349 |   },
350 | 
351 |   getMousePosition(event) {
352 |     const { left, top } = this.canvas.getBoundingClientRect();
353 | 
354 |     return {
355 |       mouseX: event.clientX - left,
356 |       mouseY: event.clientY - top
357 |     };
358 |   },
359 | 
360 |   addListeners() {
361 |     this.addMouseMove();
362 |     this.addWindowResize();
363 |     this.addDrag();
364 |     this.addZoom();
365 |   },
366 | 
367 |   addMouseMove() {
368 |     this.canvas.addEventListener('mousemove', (event) => {
369 |       const { mouseX, mouseY } = this.getMousePosition(event);
370 |       const [ invertX, invertY ] = this.transform.invert([mouseX, mouseY]);
371 |       const node = this.getNodeAtCoordinates(invertX, invertY);
372 | 
373 |       if (node) {
374 |         this.showTooltip(node.hostname, mouseX, mouseY);
375 |       } else {
376 |         this.hideTooltip();
377 |       }
378 |     });
379 |   },
380 | 
381 |   addWindowResize() {
382 |     window.addEventListener('resize', () => {
383 |       clearTimeout(this.resizeTimer);
384 |       this.resizeTimer = setTimeout(() => {
385 |         this.resize();
386 |       }, 250);
387 |     });
388 |   },
389 | 
390 |   resize() {
391 |     this.canvas.style.width = 0;
392 |     this.canvas.style.height = 0;
393 | 
394 |     const { width, height } = this.getDimensions('visualization');
395 |     this.updateCanvas(width, height);
396 |     this.draw(this.nodes, this.links);
397 |   },
398 | 
399 |   addDrag() {
400 |     const drag = d3.drag();
401 |     drag.subject(() => {
402 |       return this.dragSubject();
403 |     });
404 |     drag.on('start', () => {
405 |       return this.dragStart();
406 |     });
407 |     drag.on('drag', () => {
408 |       return this.drag();
409 |     });
410 |     drag.on('end', () => {
411 |       return this.dragEnd();
412 |     });
413 | 
414 |     d3.select(this.canvas)
415 |       .call(drag);
416 |   },
417 | 
418 |   dragSubject() {
419 |     const x = this.transform.invertX(d3.event.x);
420 |     const y = this.transform.invertY(d3.event.y);
421 |     return this.getNodeAtCoordinates(x, y);
422 |   },
423 | 
424 |   dragStart() {
425 |     if (!d3.event.active) {
426 |       this.resetAlphaTarget();
427 |     }
428 |     d3.event.subject.shadow = true;
429 |     d3.event.subject.fx = d3.event.subject.x;
430 |     d3.event.subject.fy = d3.event.subject.y;
431 |   },
432 | 
433 |   drag() {
434 |     d3.event.subject.fx = d3.event.x;
435 |     d3.event.subject.fy = d3.event.y;
436 | 
437 |     this.hideTooltip();
438 |   },
439 | 
440 |   dragEnd() {
441 |     if (!d3.event.active) {
442 |       this.stopAlphaTarget();
443 |     }
444 |     d3.event.subject.x = d3.event.subject.fx;
445 |     d3.event.subject.y = d3.event.subject.fy;
446 |     d3.event.subject.fx = null;
447 |     d3.event.subject.fy = null;
448 |     d3.event.subject.shadow = false;
449 |   },
450 | 
451 |   addZoom() {
452 |     const zoom = d3.zoom().scaleExtent([this.minZoom, this.maxZoom]);
453 |     zoom.on('zoom', () => {
454 |       return this.zoom();
455 |     });
456 | 
457 |     d3.select(this.canvas)
458 |       .call(zoom);
459 |   },
460 | 
461 |   zoom() {
462 |     this.transform = d3.event.transform;
463 |     this.drawOnCanvas();
464 |   }
465 | };
466 | 


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "Firefox Lightbeam",
 4 |   "version": "2.1.0",
 5 | 
 6 |   "description": "Firefox Lightbeam is a Firefox browser extension that uses interactive visualizations to show you the relationships between third parties and the sites you visit.",
 7 |   "homepage_url": "https://github.com/mozilla/lightbeam-we",
 8 | 
 9 |   "icons": {
10 |     "48": "images/lightbeam-48.png",
11 |     "96": "images/lightbeam-96.png"
12 |   },
13 | 
14 |   "permissions": [
15 |     "webRequest",
16 |     "<all_urls>",
17 |     "tabs",
18 |     "cookies",
19 |     "storage",
20 |     "downloads",
21 |     "privacy"
22 |   ],
23 | 
24 |   "browser_action": {
25 |     "default_icon": "images/lightbeam-48.png",
26 |     "default_title": "Firefox Lightbeam"
27 |   },
28 | 
29 |   "applications": {
30 |     "gecko": {
31 |       "id": "jid1-F9UJ2thwoAm5gQ@jetpack",
32 |       "strict_min_version": "52.0"
33 |     }
34 |   },
35 | 
36 |   "background": {
37 |     "scripts": [
38 |       "ext-libs/dexie.js",
39 |       "js/store.js",
40 |       "js/capture.js",
41 |       "js/background.js"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/test/unit/store.test.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-undef: "off" */
  2 | /* eslint no-console: "off" */
  3 | 
  4 | /*
  5 | * @todo resolve 'assert' is undefined and turn 'on' the above eslint rules
  6 | * @todo use eslint-plugin-chai to resolve 'assert'
  7 | */
  8 | 'use strict';
  9 | 
 10 | function clone(obj) {
 11 |   return Object.assign({}, obj);
 12 | }
 13 | 
 14 | describe('store.js', () => {
 15 |   const mockWebsites = {
 16 |     'a1.com': {
 17 |       faviconUrl: '/link/to/url',
 18 |       firstAccess: 1234,
 19 |       lastAccess: 5678,
 20 |       thirdPartyRequests: {
 21 |         'a.com': { requestTime: 9012 },
 22 |         'b.com': {},
 23 |         'c.com': {}
 24 |       }
 25 |     },
 26 |     'a2.com': {}
 27 |   };
 28 | 
 29 |   const mockStore = {
 30 |     _websites: null,
 31 | 
 32 |     init() {
 33 |       this._websites = clone(mockWebsites);
 34 |     },
 35 | 
 36 |     _write(websites) {
 37 |       this._websites = clone(websites);
 38 |       return Promise.resolve();
 39 |     },
 40 | 
 41 |     getAll() {
 42 |       return clone(this._websites);
 43 |     },
 44 | 
 45 |     getFirstParty(hostname) {
 46 |       if (!hostname) {
 47 |         throw new Error('getFirstParty requires a valid hostname argument');
 48 |       }
 49 | 
 50 |       return this._websites[hostname];
 51 |     },
 52 | 
 53 |     getThirdParties(hostname) {
 54 |       if (!hostname) {
 55 |         throw new Error('getFirstParty requires a valid hostname argument');
 56 |       }
 57 | 
 58 |       const firstParty = this.getFirstParty(hostname);
 59 |       if ('thirdPartyRequests' in firstParty) {
 60 |         return firstParty.thirdPartyRequests;
 61 |       }
 62 | 
 63 |       return null;
 64 |     },
 65 | 
 66 |     setFirstParty(hostname, data) {
 67 |       if (!hostname) {
 68 |         throw new Error('setFirstParty requires a valid hostname argument');
 69 |       }
 70 | 
 71 |       const websites = clone(this._websites);
 72 |       websites[hostname] = data;
 73 |       this._write(websites);
 74 |     },
 75 | 
 76 |     setThirdParty(origin, target, data) {
 77 |       if (!origin) {
 78 |         throw new Error('setThirdParty requires a valid origin argument');
 79 |       }
 80 | 
 81 |       const websites = clone(this._websites);
 82 |       const firstParty = clone(websites[origin]);
 83 | 
 84 |       if (!('thirdPartyRequests' in firstParty)) {
 85 |         firstParty['thirdPartyRequests'] = {};
 86 |       }
 87 |       firstParty['thirdPartyRequests'][target] = data;
 88 | 
 89 |       this.setFirstParty(origin, firstParty);
 90 |     }
 91 |   };
 92 | 
 93 |   describe('store get method', () => {
 94 |     it('should initialise _websites to mockWebsites', (done) => {
 95 |       mockStore.init();
 96 |       const websites = mockStore.getAll();
 97 |       assert.deepEqual(websites, mockWebsites);
 98 |       done();
 99 |     });
100 | 
101 |     it('should get all websites from store', (done) => {
102 |       const websites = mockStore.getAll();
103 |       assert.deepEqual(websites, mockWebsites);
104 |       done();
105 |     });
106 | 
107 |     it('should get website object for a1.com', (done) => {
108 |       const website = mockStore.getFirstParty('a1.com');
109 |       assert.deepEqual(website, mockWebsites['a1.com']);
110 |       done();
111 |     });
112 | 
113 |     it('error thrown when hostname is not passed for getFirstParty()',
114 |       () => {
115 |         try {
116 |           mockStore.getFirstParty();
117 |         } catch (err) {
118 |           console.log('error from getFirstParty', err);
119 |         }
120 |       });
121 | 
122 |     it('should get thirdPartyRequests for a1.com', (done) => {
123 |       const thirdParties = mockStore.getThirdParties('a1.com');
124 |       const mockThirdParties = mockWebsites['a1.com'].thirdPartyRequests;
125 |       assert.deepEqual(thirdParties, mockThirdParties);
126 |       done();
127 |     });
128 | 
129 |     it('error thrown when hostname is not passed for getThirdParties()',
130 |       () => {
131 |         try {
132 |           mockStore.getThirdParties();
133 |         } catch (err) {
134 |           console.log('error from getThirdParties', err);
135 |         }
136 |       });
137 | 
138 |     it('should return null for getThirdParties()', (done) => {
139 |       const thirdPartyRequests = mockStore.getThirdParties('a2.com');
140 |       assert.equal(thirdPartyRequests, null);
141 |       done();
142 |     });
143 |   });
144 | 
145 |   describe('store set method', () => {
146 |     it('should set firstParty c1.com', (done) => {
147 |       mockStore.setFirstParty('c1.com', { faviconUrl: '/ccc/ccc' });
148 |       const website = mockStore.getFirstParty('c1.com');
149 |       assert.deepEqual(website, mockStore._websites['c1.com']);
150 |       done();
151 |     });
152 | 
153 |     it('should set thirdParty for c1.com', (done) => {
154 |       mockStore.setThirdParty('c1.com', 'c11.com', { faviconUrl: '/c1/c1' });
155 |       const thirdParties = mockStore.getThirdParties('c1.com');
156 |       const mockThirdParties = mockStore._websites['c1.com'].thirdPartyRequests;
157 |       assert.deepEqual(thirdParties, mockThirdParties);
158 |       done();
159 |     });
160 |   });
161 | });
162 | 


--------------------------------------------------------------------------------