diff --git a/.eslintrc b/.eslintrc index af049f37..6441aad4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -215,7 +215,7 @@ rules: no-unreachable: [2] no-unsafe-finally: [2] no-unsafe-negation: [2] - no-unused-expressions: [2] + no-unused-expressions: [1] no-unused-labels: [0] no-unused-vars: [1, {args: after-used, vars: local, argsIgnorePattern: ^_}] no-use-before-define: [2, nofunc] diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c6a336cf..4fe186cf 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -681,6 +681,15 @@ "optionsUpdateImportNote": { "message": "When importing style backups from old version or from Stylish, do a one-time check for updates manually in the styles manager to ensure all styles are updated." }, + "optionsCustomizeIcon": { + "message": "Toolbar icon" + }, + "optionsIconLight": { + "message": "Light browser themes" + }, + "optionsIconDark": { + "message": "Dark browser themes" + }, "optionsCustomizeBadge": { "message": "Badge on the toolbar icon" }, diff --git a/background.js b/background.js index ea7db689..7b9daa43 100644 --- a/background.js +++ b/background.js @@ -258,15 +258,17 @@ function updateIcon(tab, styles) { const postfix = disableAll ? 'x' : numStyles == 0 ? 'w' : ''; const color = prefs.get(disableAll ? 'badgeDisabled' : 'badgeNormal'); const text = prefs.get('show-badge') && numStyles ? String(numStyles) : ''; + const iconset = ['', 'light/'][prefs.get('iconset')] || ''; + const path = 'images/icon/' + iconset; chrome.browserAction.setIcon({ tabId: tab.id, path: { // Material Design 2016 new size is 16px - 16: `images/icon/16${postfix}.png`, - 32: `images/icon/32${postfix}.png`, + 16: `${path}16${postfix}.png`, + 32: `${path}32${postfix}.png`, // Chromium forks or non-chromium browsers may still use the traditional 19px - 19: `images/icon/19${postfix}.png`, - 38: `images/icon/38${postfix}.png`, + 19: `${path}19${postfix}.png`, + 38: `${path}38${postfix}.png`, // TODO: add Edge preferred sizes: 20, 25, 30, 40 }, }, () => { diff --git a/dom.js b/dom.js index 139619cc..be081107 100644 --- a/dom.js +++ b/dom.js @@ -12,16 +12,17 @@ for (const type of [NodeList, NamedNodeMap, HTMLCollection, HTMLAllCollection]) } // add favicon in Firefox -if (/Firefox/.test(navigator.userAgent)) { - for (const size of [128, 38, 32, 19, 16]) { +navigator.userAgent.includes('Firefox') && setTimeout(() => { + const iconset = ['', 'light/'][prefs.get('iconset')] || ''; + for (const size of [38, 32, 19, 16]) { document.head.appendChild($element({ tag: 'link', rel: 'icon', - href: `/images/icon/${size}.png`, + href: `/images/icon/${iconset}${size}.png`, sizes: size + 'x' + size, })); } -} +}); function onDOMready() { diff --git a/images/icon/16.png b/images/icon/16.png index fa6c32b3..48252ae4 100644 Binary files a/images/icon/16.png and b/images/icon/16.png differ diff --git a/images/icon/16w.png b/images/icon/16w.png index 8ea89b0a..5dd2cffb 100644 Binary files a/images/icon/16w.png and b/images/icon/16w.png differ diff --git a/images/icon/16x.png b/images/icon/16x.png index 9292d0a9..09bea46d 100644 Binary files a/images/icon/16x.png and b/images/icon/16x.png differ diff --git a/images/icon/32.png b/images/icon/32.png index 4da26c37..8fd51f80 100644 Binary files a/images/icon/32.png and b/images/icon/32.png differ diff --git a/images/icon/32w.png b/images/icon/32w.png index 42aec600..56421263 100644 Binary files a/images/icon/32w.png and b/images/icon/32w.png differ diff --git a/images/icon/32x.png b/images/icon/32x.png index 99793fc6..51116fdb 100644 Binary files a/images/icon/32x.png and b/images/icon/32x.png differ diff --git a/images/icon/38.png b/images/icon/38.png index 37362a0f..ffa99c2b 100644 Binary files a/images/icon/38.png and b/images/icon/38.png differ diff --git a/images/icon/38w.png b/images/icon/38w.png index 555eef9a..73342164 100644 Binary files a/images/icon/38w.png and b/images/icon/38w.png differ diff --git a/images/icon/38x.png b/images/icon/38x.png index 265b7c03..a0cbf099 100644 Binary files a/images/icon/38x.png and b/images/icon/38x.png differ diff --git a/images/icon/light/16.png b/images/icon/light/16.png new file mode 100644 index 00000000..3ec57b4e Binary files /dev/null and b/images/icon/light/16.png differ diff --git a/images/icon/light/16w.png b/images/icon/light/16w.png new file mode 100644 index 00000000..6287ce91 Binary files /dev/null and b/images/icon/light/16w.png differ diff --git a/images/icon/light/16x.png b/images/icon/light/16x.png new file mode 100644 index 00000000..4ccc3e50 Binary files /dev/null and b/images/icon/light/16x.png differ diff --git a/images/icon/light/19.png b/images/icon/light/19.png new file mode 100644 index 00000000..3ec57b4e Binary files /dev/null and b/images/icon/light/19.png differ diff --git a/images/icon/light/19w.png b/images/icon/light/19w.png new file mode 100644 index 00000000..6287ce91 Binary files /dev/null and b/images/icon/light/19w.png differ diff --git a/images/icon/light/19x.png b/images/icon/light/19x.png new file mode 100644 index 00000000..4ccc3e50 Binary files /dev/null and b/images/icon/light/19x.png differ diff --git a/images/icon/light/32.png b/images/icon/light/32.png new file mode 100644 index 00000000..82519c1f Binary files /dev/null and b/images/icon/light/32.png differ diff --git a/images/icon/light/32w.png b/images/icon/light/32w.png new file mode 100644 index 00000000..28104ad1 Binary files /dev/null and b/images/icon/light/32w.png differ diff --git a/images/icon/light/32x.png b/images/icon/light/32x.png new file mode 100644 index 00000000..0cc96ca0 Binary files /dev/null and b/images/icon/light/32x.png differ diff --git a/images/icon/light/38.png b/images/icon/light/38.png new file mode 100644 index 00000000..9d06f23e Binary files /dev/null and b/images/icon/light/38.png differ diff --git a/images/icon/light/38w.png b/images/icon/light/38w.png new file mode 100644 index 00000000..fcc351fa Binary files /dev/null and b/images/icon/light/38w.png differ diff --git a/images/icon/light/38x.png b/images/icon/light/38x.png new file mode 100644 index 00000000..ac3d7b3e Binary files /dev/null and b/images/icon/light/38x.png differ diff --git a/options/index.css b/options/index.css index a08485a9..fbc0e803 100644 --- a/options/index.css +++ b/options/index.css @@ -114,6 +114,14 @@ input[type="color"] { height: 2em; } +.iconset { + display: flex; +} + +.iconset input { + display: block; +} + #actions { justify-content: space-around; align-items: stretch; diff --git a/options/index.html b/options/index.html index 5812ddc3..3a7318be 100644 --- a/options/index.html +++ b/options/index.html @@ -13,6 +13,30 @@
+
+

+
+ + +
+
+

diff --git a/options/index.js b/options/index.js index 3b4dce31..decc038d 100644 --- a/options/index.js +++ b/options/index.js @@ -1,6 +1,7 @@ 'use strict'; setupLivePrefs(); +setupRadioButtons(); enforceInputRange($('#popupWidth')); // actions @@ -61,3 +62,26 @@ function checkUpdates() { $('#updates-installed').dataset.value = updated || ''; } } + +function setupRadioButtons() { + const sets = {}; + const onChange = function() { + const newValue = sets[this.name].indexOf(this); + if (newValue >= 0 && prefs.get(this.name) != newValue) { + prefs.set(this.name, newValue); + } + }; + // group all radio-inputs by name="prefName" attribute + for (const el of $$('input[type="radio"][name]')) { + (sets[el.name] = sets[el.name] || []).push(el); + el.addEventListener('change', onChange); + } + // select the input corresponding to the actual pref value + for (const name in sets) { + sets[name][prefs.get(name)].checked = true; + } + // listen to pref changes and update the values + prefs.subscribe((key, value) => { + sets[key][value].checked = true; + }, Object.keys(sets)); +} diff --git a/prefs.js b/prefs.js index a84cb52d..c34a0546 100644 --- a/prefs.js +++ b/prefs.js @@ -47,6 +47,9 @@ var prefs = new function Prefs() { 'editor.autocompleteOnTyping': false, // show autocomplete dropdown on typing a word token 'editor.contextDelete': contextDeleteMissing(), // "Delete" item in context menu + 'iconset': 0, // 0 = dark-themed icon + // 1 = light-themed icon + 'badgeDisabled': '#8B0000', // badge background color when disabled 'badgeNormal': '#006666', // badge background color @@ -61,6 +64,7 @@ var prefs = new function Prefs() { 'disableAll', 'badgeDisabled', 'badgeNormal', + 'iconset', ]; const onChange = {