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

Unified action pages and fixed display issues 

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;
}
.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 {
vertical-align: text-bottom;
height: 19px;
@ -50,8 +17,6 @@ div {
display: inline-block;
}
.search {
box-sizing: border-box;
.action.search {
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">
</head>
<body>
<div id="actions"></div>
<div id="actions" class="stackedInputs"></div>
<script src="../lib/require.js"></script>
<script src="../lib/extension.js"></script>
<script src="../lib/logging.js"></script>

2
browserAction/browserAction.js
View File

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

2
lib/theme.js
View File

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

16
pageAction/gui.js
View File

@ -71,6 +71,8 @@
document.body.innerHTML = "";
document.body.className = "modal";
document.body.appendChild(document.createTextNode(messageText));
const stack = document.createElement("div");
stack.className = "stackedInputs";
choices.forEach(function(choice){
const button = document.createElement("button");
button.addEventListener("click", function(){
@ -78,8 +80,9 @@
message("modal choice closed with value", choice.value || 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.className = "modal";
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;
document.body.appendChild(input);
var button = document.createElement("button");
stack.appendChild(input);
const button = document.createElement("button");
button.textContent = "OK";
button.addEventListener("click", function(){
resolve(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 {
margin: 0.5em;
padding: 2px;
padding-right: 23px;
padding-bottom: 1.5em;
white-space: nowrap;
position: relative;
@ -15,6 +14,7 @@ body {
list-style: none;
padding: 0;
margin: 0;
float: left;
}
button.action.isIcon {
@ -60,9 +60,7 @@ button.action img {
#globalActions {
position: absolute;
right: 0;
top: 0;
float: right;
width: 23px;
text-align: right;
line-height: 0;
@ -134,39 +132,6 @@ body.modal {
padding: 2px;
}
.modal input {
display: block;
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;
body.modal .stackedInputs {
margin-top: 0.5em;
}

42
themes/base/layout.css
View File

@ -62,4 +62,46 @@ input[type=checkbox]:checked::before {
height: 100%;
width: 100%;
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);
--link-color: rgb(5, 197, 188);
--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

@ -8,12 +8,4 @@
.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);
}

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);
--link-color: lightblue;
--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

@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
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;
--input-background-color: rgb(255, 255, 255);
--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

@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
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);
--link-color: blue;
--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

@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
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);
}