security-and-privacy/CanvasBlocker
security-and-privacy/CanvasBlocker
1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2025-01-18 09:28:52 +01:00
Code Releases Activity

Unified action pages and fixed display issues

Browse Source 
For #341
This commit is contained in:
kkapsner 2019-05-03 23:17:35 +02:00
parent c870fb6720
commit 6ffd537a58
19 changed files with 69 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
browserAction/browserAction.css
View File

@ -7,39 +7,6 @@ div {
display: block; display: block;
} }
.action {
display: block;
padding: 0.5em;
margin: 0;
background-color: transparent;
background-image: none;
border: 1px solid currentColor;
cursor: pointer;
width: 100%;
text-align: left;
height: auto;
z-index: 1;
position: relative;
white-space: nowrap;
color: currentColor;
}
.action + .action {
border-top-width: 0;
}
.action:first-child {
border-radius: 3px 3px 0 0;
}
.action:last-child {
border-radius: 0 0 3px 3px;
}
.action:active, .action:hover, .action:focus {
z-index: 10;
}
.action .icon { .action .icon {
vertical-align: text-bottom; vertical-align: text-bottom;
height: 19px; height: 19px;
@ -50,8 +17,6 @@ div {
display: inline-block; display: inline-block;
} }
.search { .action.search {
box-sizing: border-box;
padding-left: calc(0.5em + 19px + 0.25em); padding-left: calc(0.5em + 19px + 0.25em);
cursor: initial;
} }

2
browserAction/browserAction.html
View File

@ -6,7 +6,7 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head> </head>
<body> <body>
<div id="actions"></div> <div id="actions" class="stackedInputs"></div>
<script src="../lib/require.js"></script> <script src="../lib/require.js"></script>
<script src="../lib/extension.js"></script> <script src="../lib/extension.js"></script>
<script src="../lib/logging.js"></script> <script src="../lib/logging.js"></script>

2
browserAction/browserAction.js
View File

@ -7,7 +7,7 @@
const extension = require("../lib/extension"); const extension = require("../lib/extension");
const logging = require("../lib/logging"); const logging = require("../lib/logging");
const settings = require("../lib/settings"); const settings = require("../lib/settings");
require("../lib/theme").init("browserAction"); require("../lib/theme").init();
logging.message("Opened browser action"); logging.message("Opened browser action");
settings.onloaded(function(){ settings.onloaded(function(){

2
lib/theme.js
View File

@ -19,7 +19,7 @@
var baseLink = document.createElement("link"); var baseLink = document.createElement("link");
baseLink.href = `${basePath}/base/layout.css`; baseLink.href = `${basePath}/base/layout.css`;
baseLink.rel = "alternative"; baseLink.rel = "stylesheet";
baseLink.type = "text/css"; baseLink.type = "text/css";
document.head.appendChild(baseLink); document.head.appendChild(baseLink);
const links = ["layout", page].filter(function(file){ const links = ["layout", page].filter(function(file){

16
pageAction/gui.js
View File

@ -71,6 +71,8 @@
document.body.innerHTML = ""; document.body.innerHTML = "";
document.body.className = "modal"; document.body.className = "modal";
document.body.appendChild(document.createTextNode(messageText)); document.body.appendChild(document.createTextNode(messageText));
const stack = document.createElement("div");
stack.className = "stackedInputs";
choices.forEach(function(choice){ choices.forEach(function(choice){
const button = document.createElement("button"); const button = document.createElement("button");
button.addEventListener("click", function(){ button.addEventListener("click", function(){
@ -78,8 +80,9 @@
message("modal choice closed with value", choice.value || choice); message("modal choice closed with value", choice.value || choice);
}); });
button.appendChild(document.createTextNode(choice.text || choice)); button.appendChild(document.createTextNode(choice.text || choice));
document.body.appendChild(button); stack.appendChild(button);
}); });
document.body.append(stack);
}); });
}; };
@ -89,16 +92,19 @@
document.body.innerHTML = ""; document.body.innerHTML = "";
document.body.className = "modal"; document.body.className = "modal";
document.body.appendChild(document.createTextNode(messageText)); document.body.appendChild(document.createTextNode(messageText));
var input = document.createElement("input"); const stack = document.createElement("div");
stack.className = "stackedInputs";
const input = document.createElement("input");
input.value = defaultValue; input.value = defaultValue;
document.body.appendChild(input); stack.appendChild(input);
var button = document.createElement("button"); const button = document.createElement("button");
button.textContent = "OK"; button.textContent = "OK";
button.addEventListener("click", function(){ button.addEventListener("click", function(){
resolve(input.value); resolve(input.value);
message("modal prompt closed with value", input.value); message("modal prompt closed with value", input.value);
}); });
document.body.appendChild(button); stack.appendChild(button);
document.body.append(stack);
}); });
}; };
}()); }());

43
pageAction/pageAction.css
View File

@ -5,7 +5,6 @@
body { body {
margin: 0.5em; margin: 0.5em;
padding: 2px; padding: 2px;
padding-right: 23px;
padding-bottom: 1.5em; padding-bottom: 1.5em;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
@ -15,6 +14,7 @@ body {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
float: left;
} }
button.action.isIcon { button.action.isIcon {
@ -60,9 +60,7 @@ button.action img {
#globalActions { #globalActions {
position: absolute; float: right;
right: 0;
top: 0;
width: 23px; width: 23px;
text-align: right; text-align: right;
line-height: 0; line-height: 0;
@ -134,39 +132,6 @@ body.modal {
padding: 2px; padding: 2px;
} }
.modal input { body.modal .stackedInputs {
display: block; margin-top: 0.5em;
box-sizing: border-box;
width: 100%;
}
.modal button {
display: block;
padding: 0.5em;
background-color: transparent;
border: 1px solid currentColor;
cursor: pointer;
width: 100%;
text-align: left;
height: auto;
z-index: 1;
position: relative;
white-space: nowrap;
color: currentColor;
}
.modal button + .modal button {
border-top-width: 0;
}
.modal button:first-child {
border-radius: 3px 3px 0 0;
}
.modal button:last-child {
border-radius: 0 0 3px 3px;
}
.modal button:active, .modal button:hover, .modal button:focus {
z-index: 10;
} }

42
themes/base/layout.css
View File

@ -63,3 +63,45 @@ input[type=checkbox]:checked::before {
width: 100%; width: 100%;
vertical-align: top; vertical-align: top;
} }
/* Input stack */
.stackedInputs > * {
display: block;
padding: 0.5em;
margin: 0;
background-color: transparent;
background-image: none;
border: 1px solid var(--stacked-inputs-border-color);
cursor: pointer;
width: 100%;
text-align: left;
height: auto;
z-index: 1;
position: relative;
white-space: nowrap;
color: currentColor;
}
.stackedInputs > * + * {
border-top-width: 0;
}
.stackedInputs > *:first-child {
border-radius: 3px 3px 0 0;
}
.stackedInputs > *:last-child {
border-radius: 0 0 3px 3px;
}
.stackedInputs > *:active, .stackedInputs > *:hover, .stackedInputs > *:focus {
z-index: 10;
background-color: var(--stacked-inputs-focus-color);
}
.stackedInputs > input {
box-sizing: border-box;
cursor: initial;
background-color: var(--input-background-color);
}

7
themes/colorful/browserAction.css
View File

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

2
themes/colorful/layout.css
View File

@ -4,4 +4,6 @@ body {
--text-color: rgb(102, 42, 34); --text-color: rgb(102, 42, 34);
--link-color: rgb(5, 197, 188); --link-color: rgb(5, 197, 188);
--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%); --button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
--stacked-inputs-border-color: rgb(255, 0, 255);
--stacked-inputs-focus-color: rgb(255, 196, 0);
} }

8
themes/colorful/pageAction.css
View File

@ -9,11 +9,3 @@
.hasHiddenActions:hover, .hasHiddenActions .actions { .hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(208, 255, 0); 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);
}

7
themes/dark/browserAction.css
View File

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

2
themes/dark/layout.css
View File

@ -4,4 +4,6 @@ body {
--text-color: rgb(249, 249, 250); --text-color: rgb(249, 249, 250);
--link-color: lightblue; --link-color: lightblue;
--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%); --button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
--stacked-inputs-border-color: rgb(92, 92, 97);
--stacked-inputs-focus-color: rgb(92, 92, 97);
} }

8
themes/dark/pageAction.css
View File

@ -9,11 +9,3 @@
.hasHiddenActions:hover, .hasHiddenActions .actions { .hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(92, 92, 97); background-color: rgb(92, 92, 97);
} }
.modal button {
border-color: rgb(92, 92, 97);
}
.modal button:active, .modal button:hover, .modal button:focus {
background-color: rgb(92, 92, 97);
}

7
themes/default/browserAction.css
View File

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

2
themes/default/layout.css
View File

@ -4,4 +4,6 @@ body {
--link-color: blue; --link-color: blue;
--input-background-color: rgb(255, 255, 255); --input-background-color: rgb(255, 255, 255);
--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%); --button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
--stacked-inputs-border-color: rgb(185, 185, 185);
--stacked-inputs-focus-color: rgb(236, 237, 236);
} }

8
themes/default/pageAction.css
View File

@ -9,11 +9,3 @@
.hasHiddenActions:hover, .hasHiddenActions .actions { .hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(236, 237, 236); background-color: rgb(236, 237, 236);
} }
.modal button {
border-color: rgb(236, 237, 236);
}
.modal button:active, .modal button:hover, .modal button:focus {
background-color: rgb(236, 237, 236);
}

7
themes/light/browserAction.css
View File

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

2
themes/light/layout.css
View File

@ -4,4 +4,6 @@ body {
--text-color: rgb(12, 12, 13); --text-color: rgb(12, 12, 13);
--link-color: blue; --link-color: blue;
--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%); --button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
--stacked-inputs-border-color: rgb(222, 222, 222);
--stacked-inputs-focus-color: rgb(240, 240, 240);
} }

8
themes/light/pageAction.css
View File

@ -9,11 +9,3 @@
.hasHiddenActions:hover, .hasHiddenActions .actions { .hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(240, 240, 240); background-color: rgb(240, 240, 240);
} }
.modal button {
border-color: rgb(240, 240, 240);
}
.modal button:active, .modal button:hover, .modal button:focus {
background-color: rgb(240, 240, 240);
}