option to switch toolbar icon sets
|
@ -215,7 +215,7 @@ rules:
|
||||||
no-unreachable: [2]
|
no-unreachable: [2]
|
||||||
no-unsafe-finally: [2]
|
no-unsafe-finally: [2]
|
||||||
no-unsafe-negation: [2]
|
no-unsafe-negation: [2]
|
||||||
no-unused-expressions: [2]
|
no-unused-expressions: [1]
|
||||||
no-unused-labels: [0]
|
no-unused-labels: [0]
|
||||||
no-unused-vars: [1, {args: after-used, vars: local, argsIgnorePattern: ^_}]
|
no-unused-vars: [1, {args: after-used, vars: local, argsIgnorePattern: ^_}]
|
||||||
no-use-before-define: [2, nofunc]
|
no-use-before-define: [2, nofunc]
|
||||||
|
|
|
@ -681,6 +681,15 @@
|
||||||
"optionsUpdateImportNote": {
|
"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."
|
"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": {
|
"optionsCustomizeBadge": {
|
||||||
"message": "Badge on the toolbar icon"
|
"message": "Badge on the toolbar icon"
|
||||||
},
|
},
|
||||||
|
|
|
@ -258,15 +258,17 @@ function updateIcon(tab, styles) {
|
||||||
const postfix = disableAll ? 'x' : numStyles == 0 ? 'w' : '';
|
const postfix = disableAll ? 'x' : numStyles == 0 ? 'w' : '';
|
||||||
const color = prefs.get(disableAll ? 'badgeDisabled' : 'badgeNormal');
|
const color = prefs.get(disableAll ? 'badgeDisabled' : 'badgeNormal');
|
||||||
const text = prefs.get('show-badge') && numStyles ? String(numStyles) : '';
|
const text = prefs.get('show-badge') && numStyles ? String(numStyles) : '';
|
||||||
|
const iconset = ['', 'light/'][prefs.get('iconset')] || '';
|
||||||
|
const path = 'images/icon/' + iconset;
|
||||||
chrome.browserAction.setIcon({
|
chrome.browserAction.setIcon({
|
||||||
tabId: tab.id,
|
tabId: tab.id,
|
||||||
path: {
|
path: {
|
||||||
// Material Design 2016 new size is 16px
|
// Material Design 2016 new size is 16px
|
||||||
16: `images/icon/16${postfix}.png`,
|
16: `${path}16${postfix}.png`,
|
||||||
32: `images/icon/32${postfix}.png`,
|
32: `${path}32${postfix}.png`,
|
||||||
// Chromium forks or non-chromium browsers may still use the traditional 19px
|
// Chromium forks or non-chromium browsers may still use the traditional 19px
|
||||||
19: `images/icon/19${postfix}.png`,
|
19: `${path}19${postfix}.png`,
|
||||||
38: `images/icon/38${postfix}.png`,
|
38: `${path}38${postfix}.png`,
|
||||||
// TODO: add Edge preferred sizes: 20, 25, 30, 40
|
// 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
|
// add favicon in Firefox
|
||||||
if (/Firefox/.test(navigator.userAgent)) {
|
navigator.userAgent.includes('Firefox') && setTimeout(() => {
|
||||||
for (const size of [128, 38, 32, 19, 16]) {
|
const iconset = ['', 'light/'][prefs.get('iconset')] || '';
|
||||||
|
for (const size of [38, 32, 19, 16]) {
|
||||||
document.head.appendChild($element({
|
document.head.appendChild($element({
|
||||||
tag: 'link',
|
tag: 'link',
|
||||||
rel: 'icon',
|
rel: 'icon',
|
||||||
href: `/images/icon/${size}.png`,
|
href: `/images/icon/${iconset}${size}.png`,
|
||||||
sizes: size + 'x' + size,
|
sizes: size + 'x' + size,
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
|
|
||||||
function onDOMready() {
|
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;
|
height: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.iconset {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconset input {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
#actions {
|
#actions {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
|
@ -13,6 +13,30 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="options">
|
<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">
|
<div class="block">
|
||||||
<h1 i18n-text="optionsCustomizeBadge"></h1>
|
<h1 i18n-text="optionsCustomizeBadge"></h1>
|
||||||
<div class="items">
|
<div class="items">
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
setupLivePrefs();
|
setupLivePrefs();
|
||||||
|
setupRadioButtons();
|
||||||
enforceInputRange($('#popupWidth'));
|
enforceInputRange($('#popupWidth'));
|
||||||
|
|
||||||
// actions
|
// actions
|
||||||
|
@ -61,3 +62,26 @@ function checkUpdates() {
|
||||||
$('#updates-installed').dataset.value = updated || '';
|
$('#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.autocompleteOnTyping': false, // show autocomplete dropdown on typing a word token
|
||||||
'editor.contextDelete': contextDeleteMissing(), // "Delete" item in context menu
|
'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
|
'badgeDisabled': '#8B0000', // badge background color when disabled
|
||||||
'badgeNormal': '#006666', // badge background color
|
'badgeNormal': '#006666', // badge background color
|
||||||
|
|
||||||
|
@ -61,6 +64,7 @@ var prefs = new function Prefs() {
|
||||||
'disableAll',
|
'disableAll',
|
||||||
'badgeDisabled',
|
'badgeDisabled',
|
||||||
'badgeNormal',
|
'badgeNormal',
|
||||||
|
'iconset',
|
||||||
];
|
];
|
||||||
|
|
||||||
const onChange = {
|
const onChange = {
|
||||||
|
|