security-and-privacy/CanvasBlocker
security-and-privacy
/
CanvasBlocker
mirror of https://github.com/kkapsner/CanvasBlocker
1
0
Fork 0
Code Releases Activity

Added centralized theme system and themed all pages

This commit is contained in:
kkapsner 2019-05-02 00:30:30 +02:00
parent c2a817478e
commit 6301b744d2
39 changed files with 448 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browserAction/browserAction.css
View File

@ -10,7 +10,9 @@ div {
.action {
display: block;
padding: 0.5em;
margin: 0;
background-color: transparent;
background-image: none;
border: 1px solid currentColor;
cursor: pointer;
width: 100%;

1
browserAction/browserAction.html
View File

@ -13,6 +13,7 @@
<script src="../lib/settingDefinitions.js"></script>
<script src="../lib/settingContainers.js"></script>
<script src="../lib/settings.js"></script>
<script src="../lib/theme.js"></script>
<script src="browserAction.js"></script>
</body>
</html>

11
browserAction/browserAction.js
View File

@ -7,19 +7,10 @@
const extension = require("../lib/extension");
const logging = require("../lib/logging");
const settings = require("../lib/settings");
require("../lib/theme").init("browserAction");
logging.message("Opened browser action");
settings.onloaded(function(){
// load theme
var themeLink = document.createElement("link");
themeLink.href = `browserAction-${settings.theme}.css`;
themeLink.rel = "stylesheet";
themeLink.type = "text/css";
document.head.appendChild(themeLink);
settings.on("theme", function(){
themeLink.href = `browserAction-${settings.theme}.css`;
});
var actions = document.getElementById("actions");
[

38
lib/theme.js Normal file
View File

@ -0,0 +1,38 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
(function(){
"use strict";
let scope;
if ((typeof exports) !== "undefined"){
scope = exports;
}
else {
scope = require.register("./theme", {});
}
const settings = require("./settings");
scope.init = function(page){
const basePath = browser.extension.getURL("themes");
settings.onloaded(function(){
const links = ["layout", page].filter(function(file){
return file;
}).map(function(file){
var link = document.createElement("link");
link.cbFile = file;
link.href = `${basePath}/${settings.theme}/${file}.css`;
link.rel = "stylesheet";
link.type = "text/css";
document.head.appendChild(link);
return link;
});
settings.on("theme", function(){
links.forEach(function(link){
link.href = `${basePath}/${settings.theme}/${link.cbFile}.css`;
});
});
});
};
}());

1
options/export.html
View File

@ -14,6 +14,7 @@
<script src="../lib/settingContainers.js"></script>
<script src="../lib/settingsMigration.js"></script>
<script src="../lib/settings.js"></script>
<script src="../lib/theme.js"></script>
<script src="export.js"></script>
</body>
</html>

1
options/export.js
View File

@ -7,6 +7,7 @@
const settings = require("../lib/settings");
const logging = require("../lib/logging");
const settingsMigration = require("../lib/settingsMigration");
require("../lib/theme").init();
const input = document.getElementById("settings");
settings.onloaded(function(){
var data = {};

2
options/navigator.css
View File

@ -10,8 +10,6 @@
.button {
display: inline-block;
border: none;
background-color: white;
border: 1px solid lightgray;
margin: 2px;
width: 7em;

1
options/navigator.html
View File

@ -13,6 +13,7 @@
<script src="../lib/settingContainers.js"></script>
<script src="../lib/settings.js"></script>
<script src="../lib/navigator.js"></script>
<script src="../lib/theme.js"></script>
<script src="navigator.js"></script>
</body>
</html>

1
options/navigator.js
View File

@ -7,6 +7,7 @@
const extension = require("../lib/extension");
const settings = require("../lib/settings");
const navigator = require("../lib/navigator");
require("../lib/theme").init();
const title = document.createElement("h1");
title.className = "title";

26
options/options-dark.css
View File

@ -1,26 +0,0 @@
body {
background-color: rgb(74, 74, 79);
color: rgb(249, 249, 250);
}
a:link, a:visited, a:active {
color: lightblue;
}
header .bookmarkNotice {
border: 1px dotted #E72020;
color: #FF8E8E;
}
input, textarea, select, button {
background-color: rgb(53, 56, 54);
color: rgb(249, 249, 250);
border-color: rgb(53, 56, 54);
}
.content .hide ~ .display, .displayHidden ~ .display {
background-image: url(visible-dark.svg);
}
.content .hide:checked ~ .display, .displayHidden:checked ~ .display {
background-image: url(notVisible-dark.svg);
}

19
options/options-default.css
View File

@ -1,19 +0,0 @@
body {
color: rgb(60, 62, 60);
background-color: rgb(249, 250, 249);
}
a:link, a:visited, a:active {
color: blue;
}
header .bookmarkNotice {
border: 1px dotted #880000;
color: #880000;
}
input, textarea, select, button {
background-color: rgb(236, 237, 236);
color: rgb(60, 62, 60);
border-color: rgb(236, 237, 236);
}

19
options/options-light.css
View File

@ -1,19 +0,0 @@
body {
background-color: rgb(255, 255, 255);
color: rgb(12, 12, 13);
}
a:link, a:visited, a:active {
color: blue;
}
header .bookmarkNotice {
border: 1px dotted #880000;
color: #880000;
}
input, textarea, select, button {
background-color: rgb(240, 240, 240);
color: rgb(12, 12, 13);
border-color: rgb(240, 240, 240);
}

4
options/options.css
View File

@ -174,9 +174,13 @@ textarea {
padding: 0;
border: none;
background-color: transparent;
background-image: none;
}
.urlValues.collapsed .collapser::after {
content: "\25B6";
display: inline-block;
height: 100%;
line-height: 0;
}
.urlValues.expanded .collapser::after {
content: "\25BC";

1
options/options.html
View File

@ -15,6 +15,7 @@
<script src="../lib/settingsMigration.js"></script>
<script src="../lib/settings.js"></script>
<script src="../lib/search.js"></script>
<script src="../lib/theme.js"></script>
<script src="optionsGui.js"></script>
<script src="settingsDisplay.js"></script>
<script src="options.js"></script>

11
options/options.js
View File

@ -15,6 +15,7 @@
const settingStrings = require("../lib/settingStrings");
const searchParameters = new URLSearchParams(window.location.search);
const settingsMigration = require("../lib/settingsMigration");
require("./theme").init("options");
var callbacks = {
openNavigatorSettings: function(){
@ -428,16 +429,6 @@
document.body.appendChild(version);
settings.onloaded(function(){
// load theme
var themeLink = document.createElement("link");
themeLink.href = `options-${settings.theme}.css`;
themeLink.rel = "stylesheet";
themeLink.type = "text/css";
document.head.appendChild(themeLink);
settings.on("theme", function(){
themeLink.href = `options-${settings.theme}.css`;
});
const reCaptchaEntry = "^https://www\\.google\\.com/recaptcha/api2/(?:b?frame|anchor).*$";
const {url: urlContainer} = settings.getContainers();
settings.on("protectWindow", function({newValue}){

2
options/optionsGui.js
View File

@ -108,7 +108,7 @@
const input = document.createElement("input");
input.type = "checkbox";
input.checked = value;
input.style.display = "inline";
input.style.display = "inline-block";
return input;
},
updateCallback: function(input, value){

1
options/sanitize.html
View File

@ -12,6 +12,7 @@
<script src="../lib/settingDefinitions.js"></script>
<script src="../lib/settingContainers.js"></script>
<script src="../lib/settings.js"></script>
<script src="../lib/theme.js"></script>
<script src="sanitationRules.js"></script>
<script src="sanitize.js"></script>
</body>

1
options/sanitize.js
View File

@ -6,6 +6,7 @@
const extension = require("../lib/extension");
const settings = require("../lib/settings");
require("../lib/theme").init("sanitize");
const sanitationRules = require("./sanitationRules");
var title = document.createElement("h1");

1
pageAction/pageAction.css
View File

@ -24,6 +24,7 @@ button.action.isIcon {
margin: 0;
line-height: 0;
background-color: transparent;
background-image: none;
}
* + button.action.isIcon {
margin-left: 1px;

1
pageAction/pageAction.html
View File

@ -18,6 +18,7 @@
<script src="../lib/settings.js"></script>
<script src="../lib/lists.js"></script>
<script src="../lib/callingStack.js"></script>
<script src="../lib/theme.js"></script>
<script src="gui.js"></script>
<script src="domainNotification.js"></script>
<script src="notification.js"></script>

11
pageAction/pageAction.js
View File

@ -14,21 +14,12 @@
const Notification = require("./Notification");
const {createActionButtons, modalPrompt, modalChoice} = require("./gui");
const lists = require("../lib/lists");
require("../lib/theme").init("pageAction");
Promise.all([
browser.tabs.query({active: true, currentWindow: true}),
settings.loaded
]).then(function(values){
// load theme
var themeLink = document.createElement("link");
themeLink.href = `pageAction-${settings.theme}.css`;
themeLink.rel = "stylesheet";
themeLink.type = "text/css";
document.head.appendChild(themeLink);
settings.on("theme", function(){
themeLink.href = `pageAction-${settings.theme}.css`;
});
const tabs = values[0];
notice("create global action buttons");

5
browserAction/browserAction-dark.css → themes/dark/browserAction.css
View File

@ -1,8 +1,3 @@
body {
background-color: rgb(74, 74, 79);
color: rgb(249, 249, 250);
}
.action {
border-color: rgb(92, 92, 97);
}

57
themes/dark/layout.css Normal file
View File

@ -0,0 +1,57 @@
body {
background-color: rgb(74, 74, 79);
color: rgb(249, 249, 250);
font-family: sans-serif;
font-size: 10pt;
}
a:link, a:visited, a:active {
color: lightblue;
}
input, textarea, select, button {
background-color: rgb(53, 56, 54);
color: rgb(249, 249, 250);
border-color: rgb(53, 56, 54);
border-radius: 3px;
padding: 1px;
}
button {
margin: 1px;
padding: 0px 10px;
background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
border-radius: 0px;
}
select, input[type=checkbox]{
-moz-appearance: none;
appearance: none;
}
select {
background-image: url("selectArrow.svg");
background-position: 100% 50%;
background-repeat: no-repeat;
}
input[type=checkbox]{
margin: 1.5px;
width: 15px;
height: 15px;
line-height: 11px;
border-style: inset;
border-width: 2px;
vertical-align: middle;
overflow: hidden;
}
input[type=checkbox]:checked::before {
content: "\2713";
font-size: 100%;
line-height: 11px;
text-align: center;
display: inline-block;
height: 100%;
width: 100%;
vertical-align: top;
}

0
options/notVisible-dark.svg → themes/dark/notVisible.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

11
themes/dark/options.css Normal file
View File

@ -0,0 +1,11 @@
header .bookmarkNotice {
border: 1px dotted #E72020;
color: #FF8E8E;
}
.content .hide ~ .display, .displayHidden ~ .display {
background-image: url(visible.svg);
}
.content .hide:checked ~ .display, .displayHidden:checked ~ .display {
background-image: url(notVisible.svg);
}

5
pageAction/pageAction-dark.css → themes/dark/pageAction.css
View File

@ -1,8 +1,3 @@
body {
background-color: rgb(74, 74, 79);
color: rgb(249, 249, 250);
}
.collapsible .collapser {
color: rgb(120, 145, 255);
}

11
themes/dark/sanitize.css Normal file
View File

@ -0,0 +1,11 @@
.complaint.high {
background-color: rgb(153, 19, 19);
}
.complaint.medium {
background-color: rgb(168, 112, 8);
}
.complaint.low {
background-color: rgb(175, 175, 13);
}

63
themes/dark/selectArrow.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="30"
height="20"
viewBox="0 0 7.9374998 5.2916668"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="selectArrow-dark.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="-71.024296"
inkscape:cy="54.832316"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="841"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.70832)">
<path
style="opacity:0.5;fill:#a3a3a3;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 6.8884137,293.36755 -0.9594253,0.87344 -1.0588099,-0.86505 -0.712205,0.64837 1.8566551,1.51689 1.6716308,-1.52181 z"
id="rect817"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

0
options/visible-dark.svg → themes/dark/visible.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

5
browserAction/browserAction-default.css → themes/default/browserAction.css
View File

@ -1,8 +1,3 @@
body {
color: rgb(60, 62, 60);
background-color: rgb(249, 250, 249);
}
.action {
border-color: rgb(185, 185, 185);
}

57
themes/default/layout.css Normal file
View File

@ -0,0 +1,57 @@
body {
color: rgb(60, 62, 60);
background-color: rgb(249, 250, 249);
font-family: sans-serif;
font-size: 10pt;
}
a:link, a:visited, a:active {
color: blue;
}
input, textarea, select, button {
background-color: rgb(249, 250, 249);
color: rgb(60, 62, 60);;
border-color: rgb(249, 250, 249);
border-radius: 3px;
padding: 1px;
}
button {
margin: 1px;
padding: 0px 10px;
background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 0px;
}
select, input[type=checkbox]{
-moz-appearance: none;
appearance: none;
}
select {
background-image: url("selectArrow.svg");
background-position: 100% 50%;
background-repeat: no-repeat;
}
input[type=checkbox]{
margin: 1.5px;
width: 15px;
height: 15px;
line-height: 11px;
border-style: inset;
border-width: 2px;
vertical-align: middle;
overflow: hidden;
}
input[type=checkbox]:checked::before {
content: "\2713";
font-size: 100%;
line-height: 11px;
text-align: center;
display: inline-block;
height: 100%;
width: 100%;
vertical-align: top;
}

4
themes/default/options.css Normal file
View File

@ -0,0 +1,4 @@
header .bookmarkNotice {
border: 1px dotted #880000;
color: #880000;
}

5
pageAction/pageAction-default.css → themes/default/pageAction.css
View File

@ -1,8 +1,3 @@
body {
color: rgb(60, 62, 60);
background-color: rgb(249, 250, 249);
}
.collapsible .collapser {
color: blue;
}

63
themes/default/selectArrow.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="30"
height="20"
viewBox="0 0 7.9374998 5.2916668"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="selectArrow-dark.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="-71.024296"
inkscape:cy="54.832316"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="841"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.70832)">
<path
style="opacity:0.5;fill:#a3a3a3;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 6.8884137,293.36755 -0.9594253,0.87344 -1.0588099,-0.86505 -0.712205,0.64837 1.8566551,1.51689 1.6716308,-1.52181 z"
id="rect817"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

5
browserAction/browserAction-light.css → themes/light/browserAction.css
View File

@ -1,8 +1,3 @@
body {
color: rgb(12, 12, 13);
background-color: rgb(255, 255, 255);
}
.action {
border-color: rgb(222, 222, 222);
}

57
themes/light/layout.css Normal file
View File

@ -0,0 +1,57 @@
body {
background-color: rgb(255, 255, 255);
color: rgb(12, 12, 13);
font-family: sans-serif;
font-size: 10pt;
}
a:link, a:visited, a:active {
color: blue;
}
input, textarea, select, button {
background-color: rgb(255, 255, 255);
color: rgb(12, 12, 13);
border-color: rgb(255, 255, 255);
border-radius: 3px;
padding: 1px;
}
button {
margin: 1px;
padding: 0px 10px;
background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 0px;
}
select, input[type=checkbox]{
-moz-appearance: none;
appearance: none;
}
select {
background-image: url("selectArrow.svg");
background-position: 100% 50%;
background-repeat: no-repeat;
}
input[type=checkbox]{
margin: 1.5px;
width: 15px;
height: 15px;
line-height: 11px;
border-style: inset;
border-width: 2px;
vertical-align: middle;
overflow: hidden;
}
input[type=checkbox]:checked::before {
content: "\2713";
font-size: 100%;
line-height: 11px;
text-align: center;
display: inline-block;
height: 100%;
width: 100%;
vertical-align: top;
}

4
themes/light/options.css Normal file
View File

@ -0,0 +1,4 @@
header .bookmarkNotice {
border: 1px dotted #880000;
color: #880000;
}

5
pageAction/pageAction-light.css → themes/light/pageAction.css
View File

@ -1,8 +1,3 @@
body {
color: rgb(12, 12, 13);
background-color: rgb(255, 255, 255);
}
.collapsible .collapser {
color: blue;
}

63
themes/light/selectArrow.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="30"
height="20"
viewBox="0 0 7.9374998 5.2916668"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="selectArrow-dark.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="-71.024296"
inkscape:cy="54.832316"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="841"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.70832)">
<path
style="opacity:0.5;fill:#a3a3a3;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 6.8884137,293.36755 -0.9594253,0.87344 -1.0588099,-0.86505 -0.712205,0.64837 1.8566551,1.51689 1.6716308,-1.52181 z"
id="rect817"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB