Monochrome icons implemented and moved to SVG (#52)

core/constants.js

@@ -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 = {

core/main.js

@@ -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();
 

core/state-manager.js

@@ -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;
 });
 
 /**

icons/disabled-white.svg

@@ -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>

icons/enabled-white.svg

@@ -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>

manifest.json

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

pages/options/options.html

@@ -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">

pages/options/options.js

@@ -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
     });

pages/updates/updates.html

@@ -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">