Monochrome icons implemented and moved to SVG (#52)

This commit is contained in:
nobody 2020-07-08 16:37:03 +02:00
parent 49ebac5cb8
commit 3ff4acb1b1
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
27 changed files with 332 additions and 28 deletions

View File

@ -74,7 +74,8 @@ const Setting = {
'DOMAINS_MANIPULATE_DOM': 'domainsManipulateDOM',
'STATISTIC_DATA': 'statisticData',
'NEGATE_HTML_FILTER_LIST': 'negateHtmlFilterList',
'BLOCK_GOOGLE_FONTS': 'blockGoogleFonts'
'BLOCK_GOOGLE_FONTS': 'blockGoogleFonts',
'USE_MONOCHROME_ICONS': 'useMonochromeIcons'
};
const WebRequest = {
@ -99,6 +100,50 @@ const BrowserType = {
'FIREFOX': chrome.runtime.getURL("/").startsWith("moz-extension")
};
const IconType = {
'Enabled': {
'Green': {
'16': chrome.runtime.getURL('icons/enabled.svg'),
'18': chrome.runtime.getURL('icons/enabled.svg'),
'19': chrome.runtime.getURL('icons/enabled.svg'),
'32': chrome.runtime.getURL('icons/enabled.svg'),
'36': chrome.runtime.getURL('icons/enabled.svg'),
'38': chrome.runtime.getURL('icons/enabled.svg'),
'64': chrome.runtime.getURL('icons/enabled.svg')
},
'White': {
'16': chrome.runtime.getURL('icons/enabled-white.svg'),
'18': chrome.runtime.getURL('icons/enabled-white.svg'),
'19': chrome.runtime.getURL('icons/enabled-white.svg'),
'32': chrome.runtime.getURL('icons/enabled-white.svg'),
'36': chrome.runtime.getURL('icons/enabled-white.svg'),
'38': chrome.runtime.getURL('icons/enabled-white.svg'),
'64': chrome.runtime.getURL('icons/enabled-white.svg')
}
},
'Disabled': {
'Red': {
'16': chrome.runtime.getURL('icons/disabled.svg'),
'18': chrome.runtime.getURL('icons/disabled.svg'),
'19': chrome.runtime.getURL('icons/disabled.svg'),
'32': chrome.runtime.getURL('icons/disabled.svg'),
'36': chrome.runtime.getURL('icons/disabled.svg'),
'38': chrome.runtime.getURL('icons/disabled.svg'),
'64': chrome.runtime.getURL('icons/disabled.svg')
},
'White': {
'16': chrome.runtime.getURL('icons/disabled-white.svg'),
'18': chrome.runtime.getURL('icons/disabled-white.svg'),
'19': chrome.runtime.getURL('icons/disabled-white.svg'),
'32': chrome.runtime.getURL('icons/disabled-white.svg'),
'36': chrome.runtime.getURL('icons/disabled-white.svg'),
'38': chrome.runtime.getURL('icons/disabled-white.svg'),
'64': chrome.runtime.getURL('icons/disabled-white.svg')
}
}
};
// Supported charsets for TextDecoder()
// https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/TextDecoder
const EncodingTypes = {

View File

@ -42,7 +42,8 @@ main._initializeSettings = function () {
[Setting.LOGGING]: false,
[Setting.DOMAINS_MANIPULATE_DOM]: {},
[Setting.NEGATE_HTML_FILTER_LIST]: false,
[Setting.BLOCK_GOOGLE_FONTS]: true
[Setting.BLOCK_GOOGLE_FONTS]: true,
[Setting.USE_MONOCHROME_ICONS]: false
};
chrome.storage.sync.get(settingDefaults, function (items) {
@ -57,6 +58,10 @@ main._initializeSettings = function () {
'value': false
});
}
stateManager.useMonochromeIcons = items.useMonochromeIcons;
wrappers.setIcon({
'path': stateManager.useMonochromeIcons ? IconType.Enabled.White : IconType.Enabled.Green,
});
chrome.storage.sync.set(items);
});
@ -128,7 +133,6 @@ main._showReleaseNotes = function (details) {
/**
* Initializations
*/
chrome.runtime.onInstalled.addListener(main._showReleaseNotes);
main._initializeSettings();

View File

@ -249,7 +249,7 @@ stateManager._domainIsListed = function (domain, listname) {
stateManager._setIconDisabled = function (tabIdentifier) {
wrappers.setIcon({
'path': stateManager.disabledIconPath,
'path': stateManager.useMonochromeIcons ? IconType.Disabled.White : IconType.Disabled.Green,
'tabId': tabIdentifier
});
};
@ -261,19 +261,9 @@ stateManager._setIconDisabled = function (tabIdentifier) {
stateManager.requests = {};
stateManager.tabs = {};
stateManager.getInvertOption = false;
stateManager.disabledIconPath = {
'16': chrome.runtime.getURL('icons/action/icon16-disabled.png'),
'18': chrome.runtime.getURL('icons/action/icon18-disabled.png'),
'19': chrome.runtime.getURL('icons/action/icon19-disabled.png'),
'32': chrome.runtime.getURL('icons/action/icon32-disabled.png'),
'36': chrome.runtime.getURL('icons/action/icon36-disabled.png'),
'38': chrome.runtime.getURL('icons/action/icon38-disabled.png'),
'64': chrome.runtime.getURL('icons/action/icon64-disabled.png')
};
stateManager.validHosts = [];
stateManager.useMonochromeIcons = false;
for (let mapping in mappings) {
@ -285,13 +275,17 @@ chrome.tabs.query({}, function (tabs) {
tabs.forEach(stateManager._createTab);
});
chrome.storage.sync.get(Setting.SHOW_ICON_BADGE, function (items) {
chrome.storage.sync.get([Setting.SHOW_ICON_BADGE, Setting.USE_MONOCHROME_ICONS], function (items) {
if (items.showIconBadge === undefined) {
items.showIconBadge = true;
}
if (items.useMonochromeIcons === undefined) {
items.useMonochromeIcons = true;
}
stateManager.showIconBadge = items.showIconBadge;
stateManager.useMonochromeIcons = items.useMonochromeIcons;
});
/**

Binary file not shown.

Before

Width:  |  Height:  |  Size: 571 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 587 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 686 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 687 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 690 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 724 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

120
icons/disabled-white.svg Normal file
View File

@ -0,0 +1,120 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 283.722 283.722"
style="enable-background:new 0 0 283.722 283.722;"
xml:space="preserve"
sodipodi:docname="disabled-white.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata1740"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs1738" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview1736"
showgrid="false"
inkscape:zoom="0.83180019"
inkscape:cx="-93.171416"
inkscape:cy="141.86099"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g1703"
style="fill:#f2f2f2;fill-opacity:1">
<path
d="M184.721,128.156c4.398-14.805,7.516-29.864,8.885-43.783c0.06-0.607-0.276-1.159-0.835-1.373l-70.484-26.932 c-0.152-0.058-0.312-0.088-0.475-0.088c-0.163,0-0.322,0.03-0.474,0.088L50.851,83c-0.551,0.21-0.894,0.775-0.835,1.373 c2.922,29.705,13.73,64.62,28.206,91.12c14.162,25.923,30.457,41.4,43.589,41.4c8.439,0,18.183-6.4,27.828-17.846l-16.375-16.375 c-14.645-14.645-14.645-38.389,0-53.033C147.396,115.509,169.996,115.017,184.721,128.156z"
id="path1697"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="M121.812,236.893c-46.932,0-85.544-87.976-91.7-150.562c-0.94-9.56,4.627-18.585,13.601-22.013l70.486-26.933 c2.451-0.937,5.032-1.405,7.613-1.405c2.581,0,5.162,0.468,7.614,1.405l70.484,26.932c8.987,3.434,14.542,12.439,13.6,22.013 c-1.773,18.028-6.244,38.161-12.826,57.693l11.068,11.068l17.865-17.866c6.907-20.991,11.737-42.285,13.845-61.972 c1.322-12.347-5.53-24.102-16.934-29.017l-93.512-40.3c-7.152-3.082-15.257-3.082-22.409,0l-93.512,40.3 C5.705,51.147-1.159,62.922,0.162,75.255c8.765,81.851,64.476,191.512,121.65,191.512c0.356,0,0.712-0.023,1.068-0.032 c-1.932-10.793,0.888-22.262,8.456-31.06C128.205,236.465,125.029,236.893,121.812,236.893z"
id="path1699"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="M240.037,208.125c7.327-7.326,30.419-30.419,37.827-37.827c7.81-7.811,7.81-20.475,0-28.285 c-7.811-7.811-20.475-7.811-28.285,0c-7.41,7.41-30.5,30.5-37.827,37.827l-37.827-37.827c-7.81-7.811-20.475-7.811-28.285,0 c-7.811,7.811-7.811,20.475,0,28.285l37.827,37.827c-7.326,7.326-30.419,30.419-37.827,37.827c-7.811,7.811-7.811,20.475,0,28.285 c7.809,7.809,20.474,7.811,28.285,0c7.41-7.41,30.5-30.499,37.827-37.827l37.827,37.827c7.809,7.809,20.474,7.811,28.285,0 c7.81-7.81,7.81-20.475,0-28.285L240.037,208.125z"
id="path1701"
style="fill:#f2f2f2;fill-opacity:1" />
</g>
<g
id="g1705"
style="fill:#f2f2f2">
</g>
<g
id="g1707"
style="fill:#f2f2f2">
</g>
<g
id="g1709"
style="fill:#f2f2f2">
</g>
<g
id="g1711"
style="fill:#f2f2f2">
</g>
<g
id="g1713"
style="fill:#f2f2f2">
</g>
<g
id="g1715"
style="fill:#f2f2f2">
</g>
<g
id="g1717"
style="fill:#f2f2f2">
</g>
<g
id="g1719"
style="fill:#f2f2f2">
</g>
<g
id="g1721"
style="fill:#f2f2f2">
</g>
<g
id="g1723"
style="fill:#f2f2f2">
</g>
<g
id="g1725"
style="fill:#f2f2f2">
</g>
<g
id="g1727"
style="fill:#f2f2f2">
</g>
<g
id="g1729"
style="fill:#f2f2f2">
</g>
<g
id="g1731"
style="fill:#f2f2f2">
</g>
<g
id="g1733"
style="fill:#f2f2f2">
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

120
icons/enabled-white.svg Normal file
View File

@ -0,0 +1,120 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 294.361 294.361"
style="enable-background:new 0 0 294.361 294.361;"
xml:space="preserve"
sodipodi:docname="enabled-white.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata2411"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs2409" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview2407"
showgrid="false"
inkscape:zoom="0.80173666"
inkscape:cx="-91.675984"
inkscape:cy="142.19133"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g2374"
style="fill:#f2f2f2;fill-opacity:1">
<path
d="M154.444,127.639l26.045,26.044c6.639-18.818,11.328-38.756,13.101-56.781c0.06-0.608-0.276-1.16-0.835-1.373 l-70.484-26.933c-0.152-0.058-0.312-0.088-0.475-0.088c-0.163,0-0.323,0.029-0.475,0.088L50.836,95.529 c-0.551,0.21-0.894,0.775-0.835,1.373c2.922,29.705,13.73,64.62,28.206,91.12c14.162,25.923,30.457,41.4,43.589,41.4 c5.948,0,12.545-3.184,19.298-9.067l-39.684-39.683c-14.644-14.645-14.644-38.388,0-53.033 C116.056,112.995,139.8,112.995,154.444,127.639z"
id="path2368"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="M155.255,234.516c-10.37,9.333-21.651,14.906-33.459,14.906c-46.932,0-85.544-87.976-91.7-150.562 c-0.94-9.56,4.627-18.585,13.6-22.013l70.486-26.933c2.451-0.937,5.032-1.405,7.614-1.405c2.581,0,5.162,0.468,7.613,1.405 l70.484,26.932c8.987,3.434,14.542,12.439,13.6,22.014c-0.969,9.846-2.742,20.322-5.223,30.984l34.029-34.029 c0.432-2.986,0.814-5.947,1.129-8.869c1.339-12.425-5.599-24.245-17.109-29.112L132.822,18.3c-7.048-2.98-15.002-2.98-22.05,0 L17.273,57.833C5.777,62.694-1.174,74.535,0.164,86.945c8.821,81.833,64.496,191.35,121.633,191.35 c19.371,0,38.571-12.598,55.837-32.427c-7.931-1.024-15.598-4.572-21.69-10.664L155.255,234.516z"
id="path2370"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="M288.504,102.645c-7.811-7.811-20.475-7.811-28.285,0l-77.758,77.759l-40.392-40.391 c-7.811-7.811-20.474-7.81-28.284,0.001c-7.811,7.811-7.809,20.474,0.001,28.284l54.533,54.532 c3.905,3.905,9.023,5.857,14.142,5.857c5.118,0,10.237-1.952,14.143-5.857l91.9-91.9 C296.313,123.12,296.313,110.456,288.504,102.645z"
id="path2372"
style="fill:#f2f2f2;fill-opacity:1" />
</g>
<g
id="g2376"
style="fill:#f2f2f2">
</g>
<g
id="g2378"
style="fill:#f2f2f2">
</g>
<g
id="g2380"
style="fill:#f2f2f2">
</g>
<g
id="g2382"
style="fill:#f2f2f2">
</g>
<g
id="g2384"
style="fill:#f2f2f2">
</g>
<g
id="g2386"
style="fill:#f2f2f2">
</g>
<g
id="g2388"
style="fill:#f2f2f2">
</g>
<g
id="g2390"
style="fill:#f2f2f2">
</g>
<g
id="g2392"
style="fill:#f2f2f2">
</g>
<g
id="g2394"
style="fill:#f2f2f2">
</g>
<g
id="g2396"
style="fill:#f2f2f2">
</g>
<g
id="g2398"
style="fill:#f2f2f2">
</g>
<g
id="g2400"
style="fill:#f2f2f2">
</g>
<g
id="g2402"
style="fill:#f2f2f2">
</g>
<g
id="g2404"
style="fill:#f2f2f2">
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 558 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -14,10 +14,10 @@
"description": "__MSG_extensionDescription__",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"96": "icons/icon96.png",
"128": "icons/icon128.png"
"16": "icons/enabled.svg",
"48": "icons/enabled.svg",
"96": "icons/enabled.svg",
"128": "icons/enabled.svg"
},
"permissions": [
@ -37,13 +37,13 @@
"browser_action": {
"default_icon": {
"16": "icons/action/icon16-default.png",
"18": "icons/action/icon18-default.png",
"19": "icons/action/icon19-default.png",
"32": "icons/action/icon32-default.png",
"36": "icons/action/icon36-default.png",
"38": "icons/action/icon38-default.png",
"64": "icons/action/icon64-default.png"
"16": "icons/enabled.svg",
"18": "icons/enabled.svg",
"19": "icons/enabled.svg",
"32": "icons/enabled.svg",
"36": "icons/enabled.svg",
"38": "icons/enabled.svg",
"64": "icons/enabled.svg"
},
"default_popup": "pages/popup/popup.html",
"browser_style": false

View File

@ -10,6 +10,7 @@
<body>
<script src="../../core/constants.js"></script>
<script src="../../modules/internal/helpers.js"></script>
<script src="../../modules/internal/wrappers.js"></script>
<script defer src="../../core/resources.js"></script>
<script defer src="../../core/mappings.js"></script>
<script src="options.js"></script>
@ -101,6 +102,16 @@
</div>
<div class="description-option" data-i18n-content="hideReleaseNotesDescription">If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.</div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="useMonochromeIcons" type="checkbox">
<span>Use monochrome icons</span>
<div class="b-input"></div>
</label>
</div>
<!-- <div class="description-option" data-i18n-content="useMonochromeIconsDescription">If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.</div> -->
</section>
</div>
<div class="option-group">
<section class="option">

View File

@ -70,6 +70,7 @@ options._renderOptionsPanel = function () {
elements.domainsManipulateDOM.value = domainHtmlFilter;
elements.negateHtmlFilterList.checked = options._optionValues.negateHtmlFilterList;
elements.blockGoogleFonts.checked = options._optionValues.blockGoogleFonts;
elements.useMonochromeIcons.checked = options._optionValues.useMonochromeIcons;
options._registerOptionChangedEventListeners(elements);
options._registerMiscellaneousEventListeners();
@ -130,6 +131,7 @@ options._registerOptionChangedEventListeners = function (elements) {
elements.domainsManipulateDOM.addEventListener('keyup', options._onOptionChanged);
elements.negateHtmlFilterList.addEventListener('change', options._onOptionChanged);
elements.blockGoogleFonts.addEventListener('change', options._onOptionChanged);
elements.useMonochromeIcons.addEventListener('change', options._onOptionChanged);
let type = elements.ruleSets;
for(let i = 0; i < type.length; i++) {
type[i].addEventListener('change', options._openRuleSet);
@ -182,7 +184,8 @@ options._getOptionElements = function () {
['copyRuleSet']: document.getElementById("button-copy-rule-set"),
[Setting.NEGATE_HTML_FILTER_LIST]: options._getOptionElement(Setting.NEGATE_HTML_FILTER_LIST),
[Setting.DOMAINS_MANIPULATE_DOM]: options._getOptionElement(Setting.DOMAINS_MANIPULATE_DOM),
[Setting.BLOCK_GOOGLE_FONTS]: options._getOptionElement(Setting.BLOCK_GOOGLE_FONTS)
[Setting.BLOCK_GOOGLE_FONTS]: options._getOptionElement(Setting.BLOCK_GOOGLE_FONTS),
[Setting.USE_MONOCHROME_ICONS]: options._getOptionElement(Setting.USE_MONOCHROME_ICONS)
};
return optionElements;
@ -290,6 +293,12 @@ options._onOptionChanged = function ({target}) {
}
}
if (optionKey === Setting.USE_MONOCHROME_ICONS) {
wrappers.setIcon({
'path': optionValue ? IconType.Enabled.White : IconType.Enabled.Green
});
}
chrome.storage.sync.set({
[optionKey]: optionValue
});

View File

@ -27,6 +27,7 @@
<li>URLs updated (localcdn.de -> localcdn.org)</li>
<li>Fixed: Popup scrollbar of dark mode (reported by email)</li>
<li>Fixed: Wrong version selection of AngularUI Bootstrap (<a href="https://codeberg.org/nobody/LocalCDN/issues/50">#50</a>)</li>
<li>Implemented: Monochrome icons (<a href="https://codeberg.org/nobody/LocalCDN/issues/52">#52</a>)</li>
<li>Fixed: Bootstrap JS v4.4.1 (<a href="https://codeberg.org/nobody/LocalCDN/issues/54">#54</a>)</li>
</ul>
<div class="topic-label">