option to switch toolbar icon sets
tophf
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
}, () => {
|
||||
|
|
|
|||
9
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() {
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 294 B After Width: | Height: | Size: 617 B |
|
Before Width: | Height: | Size: 296 B After Width: | Height: | Size: 676 B |
|
Before Width: | Height: | Size: 262 B After Width: | Height: | Size: 583 B |
|
Before Width: | Height: | Size: 744 B After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 781 B After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 752 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 854 B After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 891 B After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 845 B After Width: | Height: | Size: 1.6 KiB |
BIN
images/icon/light/16.png
Normal file
|
After Width: | Height: | Size: 654 B |
BIN
images/icon/light/16w.png
Normal file
|
After Width: | Height: | Size: 671 B |
BIN
images/icon/light/16x.png
Normal file
|
After Width: | Height: | Size: 358 B |
BIN
images/icon/light/19.png
Normal file
|
After Width: | Height: | Size: 654 B |
BIN
images/icon/light/19w.png
Normal file
|
After Width: | Height: | Size: 671 B |
BIN
images/icon/light/19x.png
Normal file
|
After Width: | Height: | Size: 358 B |
BIN
images/icon/light/32.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/icon/light/32w.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/icon/light/32x.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/icon/light/38.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
images/icon/light/38w.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
images/icon/light/38x.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -114,6 +114,14 @@ input[type="color"] {
|
|||
height: 2em;
|
||||
}
|
||||
|
||||
.iconset {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.iconset input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#actions {
|
||||
justify-content: space-around;
|
||||
align-items: stretch;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,30 @@
|
|||
<body>
|
||||
<div id="options">
|
||||
|
||||
<div class="block">
|
||||
<h1 i18n-text="optionsCustomizeIcon"></h1>
|
||||
<div class="items">
|
||||
<label>
|
||||
<span i18n-text="optionsIconDark"></span>
|
||||
<div class="iconset">
|
||||
<input type="radio" name="iconset">
|
||||
<img src="/images/icon/16.png">
|
||||
<img src="/images/icon/16w.png">
|
||||
<img src="/images/icon/16x.png">
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="optionsIconLight"></span>
|
||||
<div class="iconset">
|
||||
<input type="radio" name="iconset">
|
||||
<img src="/images/icon/light/16.png">
|
||||
<img src="/images/icon/light/16w.png">
|
||||
<img src="/images/icon/light/16x.png">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<h1 i18n-text="optionsCustomizeBadge"></h1>
|
||||
<div class="items">
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
4
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 = {
|
||||
|
|
|
|||