security-and-privacy/CanvasBlocker
security-and-privacy/CanvasBlocker
1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2024-12-22 12:50:36 +01:00
Code Releases Activity

Improved theme system and appearance

Browse Source 
Fixes #181 and #341
This commit is contained in:
kkapsner 2019-05-02 23:46:20 +02:00
parent 6301b744d2
commit 54e3f8d3f4
21 changed files with 246 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_locales/de/messages.json
View File

@ -1035,6 +1035,10 @@
"message": "",
"description": ""
},
"theme_options.auto": {
"message": "automatisch",
"description": ""
},
"theme_options.default": {
"message": "Standard",
"description": ""
@ -1047,6 +1051,14 @@
"message": "dunkel",
"description": ""
},
"theme_options.colorful": {
"message": "farbenfroh",
"description": ""
},
"theme_options.none": {
"message": "keines",
"description": ""
},
"blockDataURLs_title": {
"message": "Data-URL Seiten blockieren",
"description": ""

12
_locales/en/messages.json
View File

@ -1082,6 +1082,10 @@
"message": "",
"description": ""
},
"theme_options.auto": {
"message": "automatic",
"description": ""
},
"theme_options.default": {
"message": "default",
"description": ""
@ -1094,6 +1098,14 @@
"message": "dark",
"description": ""
},
"theme_options.colorful": {
"message": "colorful",
"description": ""
},
"theme_options.none": {
"message": "none",
"description": ""
},
"blockDataURLs_title": {
"message": "Block data URL pages",

4
lib/settingDefinitions.js
View File

@ -326,8 +326,8 @@
},
{
name: "theme",
defaultValue: "default",
options: ["default", "light", "dark"]
defaultValue: "auto",
options: ["auto", "default", "light", "dark", "colorful"/*, "none"*/]
},
{
name: "dontShowOptionsOnUpdate",

58
lib/theme.js
View File

@ -16,22 +16,52 @@
scope.init = function(page){
const basePath = browser.extension.getURL("themes");
var baseLink = document.createElement("link");
baseLink.href = `${basePath}/base/layout.css`;
baseLink.rel = "alternative";
baseLink.type = "text/css";
document.head.appendChild(baseLink);
const links = ["layout", page].filter(function(file){
return file;
}).map(function(file){
var link = document.createElement("link");
link.cbFile = file;
link.rel = "alternative";
link.type = "text/css";
document.head.appendChild(link);
return link;
});
function setTheme(theme){
switch (theme){
case "none":
baseLink.rel = "alternative";
links.forEach(function(link){
link.rel = "alternative";
});
break;
case "auto":
if (window.matchMedia("(prefers-color-scheme: dark)").matches){
theme = "dark";
}
else {
theme = "default";
}
// fall through
default:
baseLink.rel = "stylesheet";
links.forEach(function(link){
link.rel = "stylesheet";
link.href = `${basePath}/${theme}/${link.cbFile}.css`;
});
}
}
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;
});
setTheme(settings.theme);
settings.on("theme", function(){
links.forEach(function(link){
link.href = `${basePath}/${settings.theme}/${link.cbFile}.css`;
});
setTheme(settings.theme);
});
});
};

6
options/navigator.css
View File

@ -10,13 +10,7 @@
.button {
display: inline-block;
border: 1px solid lightgray;
margin: 2px;
width: 7em;
box-sizing: border-box;
padding: 0.5em;
outline: none;
cursor: pointer;
}
.active .button {
border-color: red;

1
options/options.css
View File

@ -155,6 +155,7 @@ textarea {
padding: 0;
border: none;
background-color: transparent;
background-image: none;
}
.urlValues table .url {
min-width: 4em;

2
options/options.js
View File

@ -155,7 +155,7 @@
dontShowAgain.appendChild(dontShowAgainInput);
dontShowAgain.appendChild(
document.createTextNode(
extension.getTranslation("dontShowOptionsOnUpdate")
" " + extension.getTranslation("dontShowOptionsOnUpdate")
)
);
bookmarkingNotice.appendChild(dontShowAgain);

1
pageAction/pageAction.css
View File

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

3
releaseNotes.txt
View File

@ -2,6 +2,7 @@ Version 0.5.9:
changes:
- code cleanup
- made history length threshold url specific
- uniform themes
new features:
- added protection for navigator properties
@ -9,6 +10,8 @@ Version 0.5.9:
- protection for data URLs can now be url specific
- changed input of lists to textarea
- added option to protect no part of the canvas API
- apply themes to all extension pages (options, page action, browser action, setting sanitation, setting inspection, navigator settings)
- theme for automatic detection of dark mode
fixes:
- search could show hidden settings

65
themes/base/layout.css Normal file
View File

@ -0,0 +1,65 @@
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: sans-serif;
font-size: 10pt;
}
a:link, a:visited, a:active {
color: var(--link-color);
}
input, textarea, select, button {
background-color: var(--input-background-color);
color: var(--text-color);
border-color: var(--input-background-color);
border-radius: 3px;
padding: 1px;
}
button {
background-image: var(--button-background-image);
border-radius: 0px;
border: 1px solid lightgray;
margin: 2px;
min-width: 7em;
box-sizing: border-box;
padding: 0.25em 0.5em;
cursor: pointer;
}
button:focus {
border-style: dotted;
}
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;
}

6
themes/dark/selectArrow.svg → themes/base/selectArrow.svg
View File

@ -15,7 +15,7 @@
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="selectArrow-dark.svg">
sodipodi:docname="selectArrow.svg">
<defs
id="defs2" />
<sodipodi:namedview
@ -26,7 +26,7 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="-71.024296"
inkscape:cx="-70.51922"
inkscape:cy="54.832316"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
@ -56,7 +56,7 @@
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"
d="m 6.359247,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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

7
themes/colorful/browserAction.css Normal file
View File

@ -0,0 +1,7 @@
.action {
border-color: rgb(255, 0, 255);
}
.action:active, .action:hover, .action:focus {
background-color: rgb(255, 196, 0);
}

7
themes/colorful/layout.css Normal file
View File

@ -0,0 +1,7 @@
body {
--background-color: rgb(218, 244, 250);
--input-background-color: rgb(228, 253, 169);
--text-color: rgb(102, 42, 34);
--link-color: rgb(5, 197, 188);
--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
}

23
themes/light/selectArrow.svg → themes/colorful/notVisible.svg
View File

@ -15,7 +15,7 @@
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="selectArrow-dark.svg">
sodipodi:docname="notVisible.svg">
<defs
id="defs2" />
<sodipodi:namedview
@ -26,7 +26,7 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="-71.024296"
inkscape:cx="-131.24635"
inkscape:cy="54.832316"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
@ -55,9 +55,22 @@
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"
style="fill:none;stroke:#800080;stroke-width:0.07936867;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1"
d="m 0.14548308,294.43593 c 2.59575882,2.03078 4.92396642,2.03973 7.67986362,-0.06 -3.6044602,-0.64366 -3.6257846,-2.34887 -7.67986362,0.06 z"
id="path4520"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<ellipse
style="fill:#00ff00;fill-opacity:1;stroke:#00ff00;stroke-width:0.04199925;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1"
id="path4522"
cx="4.0754137"
cy="294.64594"
rx="0.92998338"
ry="0.86998433" />
<path
style="opacity:1;fill:none;stroke:#ff00ff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 1.2695302,296.79953 5.6794774,-4.27631"
id="path4543"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

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

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

19
themes/colorful/pageAction.css Normal file
View File

@ -0,0 +1,19 @@
.collapsible .collapser {
color: rgb(244, 120, 255);
}
.hasHiddenActions {
color: rgb(240, 182, 245);
}
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(208, 255, 0);
}
.modal button {
border-color: rgb(208, 255, 0);
}
.modal button:active, .modal button:hover, .modal button:focus {
background-color: rgb(208, 255, 0);
}

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

@ -0,0 +1,11 @@
.complaint.high {
background-color: rgb(247, 28, 236);
}
.complaint.medium {
background-color: rgb(65, 255, 223);
}
.complaint.low {
background-color: rgb(255, 255, 2);
}

20
themes/default/selectArrow.svg → themes/colorful/visible.svg
View File

@ -15,7 +15,7 @@
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="selectArrow-dark.svg">
sodipodi:docname="visible.svg">
<defs
id="defs2" />
<sodipodi:namedview
@ -26,7 +26,7 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="-71.024296"
inkscape:cx="-131.24635"
inkscape:cy="54.832316"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
@ -55,9 +55,17 @@
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" />
style="fill:none;stroke:#800080;stroke-width:0.07936867;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 0.14548308,294.43593 c 2.59575882,2.03078 4.92396642,2.03973 7.67986362,-0.06 -3.6044602,-0.64366 -3.6257846,-2.34887 -7.67986362,0.06 z"
id="path4520"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<ellipse
style="fill:#00ff00;fill-opacity:1;stroke:#00ff00;stroke-width:0.04199925;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4522"
cx="4.0754137"
cy="294.64594"
rx="0.92998338"
ry="0.86998433" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

60
themes/dark/layout.css
View File

@ -1,57 +1,7 @@
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;
--background-color: rgb(74, 74, 79);
--input-background-color: rgb(53, 56, 54);
--text-color: rgb(249, 249, 250);
--link-color: lightblue;
--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
}

60
themes/default/layout.css
View File

@ -1,57 +1,7 @@
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;
--text-color: rgb(60, 62, 60);
--background-color: rgb(249, 250, 249);
--link-color: blue;
--input-background-color: rgb(255, 255, 255);
--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}

60
themes/light/layout.css
View File

@ -1,57 +1,7 @@
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;
--background-color: rgb(255, 255, 255);
--input-background-color: rgb(249, 250, 249);
--text-color: rgb(12, 12, 13);
--link-color: blue;
--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}