From 6301b744d2b021719b0bd78a3f87b0bfe42c7268 Mon Sep 17 00:00:00 2001 From: kkapsner Date: Thu, 2 May 2019 00:30:30 +0200 Subject: [PATCH] Added centralized theme system and themed all pages --- browserAction/browserAction.css | 2 + browserAction/browserAction.html | 1 + browserAction/browserAction.js | 11 +--- lib/theme.js | 38 +++++++++++ options/export.html | 1 + options/export.js | 1 + options/navigator.css | 2 - options/navigator.html | 1 + options/navigator.js | 1 + options/options-dark.css | 26 -------- options/options-default.css | 19 ------ options/options-light.css | 19 ------ options/options.css | 4 ++ options/options.html | 1 + options/options.js | 11 +--- options/optionsGui.js | 2 +- options/sanitize.html | 1 + options/sanitize.js | 1 + pageAction/pageAction.css | 1 + pageAction/pageAction.html | 1 + pageAction/pageAction.js | 11 +--- .../dark/browserAction.css | 5 -- themes/dark/layout.css | 57 +++++++++++++++++ .../dark/notVisible.svg | 0 themes/dark/options.css | 11 ++++ .../dark/pageAction.css | 5 -- themes/dark/sanitize.css | 11 ++++ themes/dark/selectArrow.svg | 63 +++++++++++++++++++ .../dark/visible.svg | 0 .../default/browserAction.css | 5 -- themes/default/layout.css | 57 +++++++++++++++++ themes/default/options.css | 4 ++ .../default/pageAction.css | 5 -- themes/default/selectArrow.svg | 63 +++++++++++++++++++ .../light/browserAction.css | 5 -- themes/light/layout.css | 57 +++++++++++++++++ themes/light/options.css | 4 ++ .../light/pageAction.css | 5 -- themes/light/selectArrow.svg | 63 +++++++++++++++++++ 39 files changed, 448 insertions(+), 127 deletions(-) create mode 100644 lib/theme.js delete mode 100644 options/options-dark.css delete mode 100644 options/options-default.css delete mode 100644 options/options-light.css rename browserAction/browserAction-dark.css => themes/dark/browserAction.css (63%) create mode 100644 themes/dark/layout.css rename options/notVisible-dark.svg => themes/dark/notVisible.svg (100%) create mode 100644 themes/dark/options.css rename pageAction/pageAction-dark.css => themes/dark/pageAction.css (82%) create mode 100644 themes/dark/sanitize.css create mode 100644 themes/dark/selectArrow.svg rename options/visible-dark.svg => themes/dark/visible.svg (100%) rename browserAction/browserAction-default.css => themes/default/browserAction.css (64%) create mode 100644 themes/default/layout.css create mode 100644 themes/default/options.css rename pageAction/pageAction-default.css => themes/default/pageAction.css (82%) create mode 100644 themes/default/selectArrow.svg rename browserAction/browserAction-light.css => themes/light/browserAction.css (64%) create mode 100644 themes/light/layout.css create mode 100644 themes/light/options.css rename pageAction/pageAction-light.css => themes/light/pageAction.css (82%) create mode 100644 themes/light/selectArrow.svg diff --git a/browserAction/browserAction.css b/browserAction/browserAction.css index ed90c00..64b6894 100644 --- a/browserAction/browserAction.css +++ b/browserAction/browserAction.css @@ -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%; diff --git a/browserAction/browserAction.html b/browserAction/browserAction.html index e97407c..9770270 100644 --- a/browserAction/browserAction.html +++ b/browserAction/browserAction.html @@ -13,6 +13,7 @@ + \ No newline at end of file diff --git a/browserAction/browserAction.js b/browserAction/browserAction.js index 2138adc..59b7dee 100644 --- a/browserAction/browserAction.js +++ b/browserAction/browserAction.js @@ -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"); [ diff --git a/lib/theme.js b/lib/theme.js new file mode 100644 index 0000000..656a501 --- /dev/null +++ b/lib/theme.js @@ -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`; + }); + }); + }); + }; +}()); \ No newline at end of file diff --git a/options/export.html b/options/export.html index e7992b4..b718cbb 100644 --- a/options/export.html +++ b/options/export.html @@ -14,6 +14,7 @@ + \ No newline at end of file diff --git a/options/export.js b/options/export.js index 889df95..504558c 100644 --- a/options/export.js +++ b/options/export.js @@ -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 = {}; diff --git a/options/navigator.css b/options/navigator.css index 99870c8..dadc166 100644 --- a/options/navigator.css +++ b/options/navigator.css @@ -10,8 +10,6 @@ .button { display: inline-block; - border: none; - background-color: white; border: 1px solid lightgray; margin: 2px; width: 7em; diff --git a/options/navigator.html b/options/navigator.html index 3905257..30c92af 100644 --- a/options/navigator.html +++ b/options/navigator.html @@ -13,6 +13,7 @@ + \ No newline at end of file diff --git a/options/navigator.js b/options/navigator.js index d6a7e05..3eb42e5 100644 --- a/options/navigator.js +++ b/options/navigator.js @@ -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"; diff --git a/options/options-dark.css b/options/options-dark.css deleted file mode 100644 index b6da05f..0000000 --- a/options/options-dark.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/options/options-default.css b/options/options-default.css deleted file mode 100644 index 12c1906..0000000 --- a/options/options-default.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/options/options-light.css b/options/options-light.css deleted file mode 100644 index cb61fdf..0000000 --- a/options/options-light.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/options/options.css b/options/options.css index c0395bb..40d4324 100644 --- a/options/options.css +++ b/options/options.css @@ -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"; diff --git a/options/options.html b/options/options.html index 39bf363..1b07ef0 100644 --- a/options/options.html +++ b/options/options.html @@ -15,6 +15,7 @@ + diff --git a/options/options.js b/options/options.js index 7d8d712..9a72e5b 100644 --- a/options/options.js +++ b/options/options.js @@ -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}){ diff --git a/options/optionsGui.js b/options/optionsGui.js index b364752..7cb4f5a 100644 --- a/options/optionsGui.js +++ b/options/optionsGui.js @@ -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){ diff --git a/options/sanitize.html b/options/sanitize.html index 14cf118..e404b4c 100644 --- a/options/sanitize.html +++ b/options/sanitize.html @@ -12,6 +12,7 @@ + diff --git a/options/sanitize.js b/options/sanitize.js index 712351f..6a3ce3f 100644 --- a/options/sanitize.js +++ b/options/sanitize.js @@ -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"); diff --git a/pageAction/pageAction.css b/pageAction/pageAction.css index 1842a56..324f727 100644 --- a/pageAction/pageAction.css +++ b/pageAction/pageAction.css @@ -24,6 +24,7 @@ button.action.isIcon { margin: 0; line-height: 0; background-color: transparent; + background-image: none; } * + button.action.isIcon { margin-left: 1px; diff --git a/pageAction/pageAction.html b/pageAction/pageAction.html index 178198a..9991c21 100644 --- a/pageAction/pageAction.html +++ b/pageAction/pageAction.html @@ -18,6 +18,7 @@ + diff --git a/pageAction/pageAction.js b/pageAction/pageAction.js index 0a9f7ae..2a348ec 100644 --- a/pageAction/pageAction.js +++ b/pageAction/pageAction.js @@ -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"); diff --git a/browserAction/browserAction-dark.css b/themes/dark/browserAction.css similarity index 63% rename from browserAction/browserAction-dark.css rename to themes/dark/browserAction.css index 0cecccc..638b341 100644 --- a/browserAction/browserAction-dark.css +++ b/themes/dark/browserAction.css @@ -1,8 +1,3 @@ -body { - background-color: rgb(74, 74, 79); - color: rgb(249, 249, 250); -} - .action { border-color: rgb(92, 92, 97); } diff --git a/themes/dark/layout.css b/themes/dark/layout.css new file mode 100644 index 0000000..7663ac9 --- /dev/null +++ b/themes/dark/layout.css @@ -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; +} \ No newline at end of file diff --git a/options/notVisible-dark.svg b/themes/dark/notVisible.svg similarity index 100% rename from options/notVisible-dark.svg rename to themes/dark/notVisible.svg diff --git a/themes/dark/options.css b/themes/dark/options.css new file mode 100644 index 0000000..58a6896 --- /dev/null +++ b/themes/dark/options.css @@ -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); +} \ No newline at end of file diff --git a/pageAction/pageAction-dark.css b/themes/dark/pageAction.css similarity index 82% rename from pageAction/pageAction-dark.css rename to themes/dark/pageAction.css index 56ced99..9d64fb8 100644 --- a/pageAction/pageAction-dark.css +++ b/themes/dark/pageAction.css @@ -1,8 +1,3 @@ -body { - background-color: rgb(74, 74, 79); - color: rgb(249, 249, 250); -} - .collapsible .collapser { color: rgb(120, 145, 255); } diff --git a/themes/dark/sanitize.css b/themes/dark/sanitize.css new file mode 100644 index 0000000..08c4963 --- /dev/null +++ b/themes/dark/sanitize.css @@ -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); +} \ No newline at end of file diff --git a/themes/dark/selectArrow.svg b/themes/dark/selectArrow.svg new file mode 100644 index 0000000..dc8d039 --- /dev/null +++ b/themes/dark/selectArrow.svg @@ -0,0 +1,63 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/options/visible-dark.svg b/themes/dark/visible.svg similarity index 100% rename from options/visible-dark.svg rename to themes/dark/visible.svg diff --git a/browserAction/browserAction-default.css b/themes/default/browserAction.css similarity index 64% rename from browserAction/browserAction-default.css rename to themes/default/browserAction.css index 586952d..5eff920 100644 --- a/browserAction/browserAction-default.css +++ b/themes/default/browserAction.css @@ -1,8 +1,3 @@ -body { - color: rgb(60, 62, 60); - background-color: rgb(249, 250, 249); -} - .action { border-color: rgb(185, 185, 185); } diff --git a/themes/default/layout.css b/themes/default/layout.css new file mode 100644 index 0000000..cf462d1 --- /dev/null +++ b/themes/default/layout.css @@ -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; +} \ No newline at end of file diff --git a/themes/default/options.css b/themes/default/options.css new file mode 100644 index 0000000..fef8cdd --- /dev/null +++ b/themes/default/options.css @@ -0,0 +1,4 @@ +header .bookmarkNotice { + border: 1px dotted #880000; + color: #880000; +} \ No newline at end of file diff --git a/pageAction/pageAction-default.css b/themes/default/pageAction.css similarity index 82% rename from pageAction/pageAction-default.css rename to themes/default/pageAction.css index 38d0bc9..e2a47ab 100644 --- a/pageAction/pageAction-default.css +++ b/themes/default/pageAction.css @@ -1,8 +1,3 @@ -body { - color: rgb(60, 62, 60); - background-color: rgb(249, 250, 249); -} - .collapsible .collapser { color: blue; } diff --git a/themes/default/selectArrow.svg b/themes/default/selectArrow.svg new file mode 100644 index 0000000..dc8d039 --- /dev/null +++ b/themes/default/selectArrow.svg @@ -0,0 +1,63 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/browserAction/browserAction-light.css b/themes/light/browserAction.css similarity index 64% rename from browserAction/browserAction-light.css rename to themes/light/browserAction.css index d6c3f02..f0e4f60 100644 --- a/browserAction/browserAction-light.css +++ b/themes/light/browserAction.css @@ -1,8 +1,3 @@ -body { - color: rgb(12, 12, 13); - background-color: rgb(255, 255, 255); -} - .action { border-color: rgb(222, 222, 222); } diff --git a/themes/light/layout.css b/themes/light/layout.css new file mode 100644 index 0000000..b8970cf --- /dev/null +++ b/themes/light/layout.css @@ -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; +} \ No newline at end of file diff --git a/themes/light/options.css b/themes/light/options.css new file mode 100644 index 0000000..fef8cdd --- /dev/null +++ b/themes/light/options.css @@ -0,0 +1,4 @@ +header .bookmarkNotice { + border: 1px dotted #880000; + color: #880000; +} \ No newline at end of file diff --git a/pageAction/pageAction-light.css b/themes/light/pageAction.css similarity index 82% rename from pageAction/pageAction-light.css rename to themes/light/pageAction.css index ea5ef7a..4ae3885 100644 --- a/pageAction/pageAction-light.css +++ b/themes/light/pageAction.css @@ -1,8 +1,3 @@ -body { - color: rgb(12, 12, 13); - background-color: rgb(255, 255, 255); -} - .collapsible .collapser { color: blue; } diff --git a/themes/light/selectArrow.svg b/themes/light/selectArrow.svg new file mode 100644 index 0000000..dc8d039 --- /dev/null +++ b/themes/light/selectArrow.svg @@ -0,0 +1,63 @@ + + + + + + + + + + image/svg+xml + + + + + + + + +