Different styles of extension icons implemented (#52)

core/constants.js

@@ -75,7 +75,7 @@ const Setting = {
     'STATISTIC_DATA': 'statisticData',
     'NEGATE_HTML_FILTER_LIST': 'negateHtmlFilterList',
     'BLOCK_GOOGLE_FONTS': 'blockGoogleFonts',
-    'USE_MONOCHROME_ICONS': 'useMonochromeIcons'
+    'SELECTED_ICON': 'selectedIcon'
 };
 
 const WebRequest = {
@@ -101,8 +101,8 @@ const BrowserType = {
 };
 
 const IconType = {
-    'Enabled': {
-        'Green': {
+    'Default': {
+        'Enabled': {
             '16': chrome.runtime.getURL('icons/action/icon16-default.png'),
             '18': chrome.runtime.getURL('icons/action/icon18-default.png'),
             '19': chrome.runtime.getURL('icons/action/icon19-default.png'),
@@ -111,18 +111,7 @@ const IconType = {
             '38': chrome.runtime.getURL('icons/action/icon38-default.png'),
             '64': chrome.runtime.getURL('icons/action/icon64-default.png')
         },
-        'White': {
-            '16': chrome.runtime.getURL('icons/action/mono/icon16-default.png'),
-            '18': chrome.runtime.getURL('icons/action/mono/icon18-default.png'),
-            '19': chrome.runtime.getURL('icons/action/mono/icon19-default.png'),
-            '32': chrome.runtime.getURL('icons/action/mono/icon32-default.png'),
-            '36': chrome.runtime.getURL('icons/action/mono/icon36-default.png'),
-            '38': chrome.runtime.getURL('icons/action/mono/icon38-default.png'),
-            '64': chrome.runtime.getURL('icons/action/mono/icon64-default.png')
-        }
-    },
-    'Disabled': {
-        'Red': {
+        'Disabled': {
             '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'),
@@ -130,8 +119,39 @@ const IconType = {
             '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')
+        }
+    },
+    'Light': {
+        'Enabled': {
+            '16': chrome.runtime.getURL('icons/action/brighter/icon16-default.png'),
+            '18': chrome.runtime.getURL('icons/action/brighter/icon18-default.png'),
+            '19': chrome.runtime.getURL('icons/action/brighter/icon19-default.png'),
+            '32': chrome.runtime.getURL('icons/action/brighter/icon32-default.png'),
+            '36': chrome.runtime.getURL('icons/action/brighter/icon36-default.png'),
+            '38': chrome.runtime.getURL('icons/action/brighter/icon38-default.png'),
+            '64': chrome.runtime.getURL('icons/action/brighter/icon64-default.png')
         },
-        'White': {
+        'Disabled': {
+            '16': chrome.runtime.getURL('icons/action/brighter/icon16-disabled.png'),
+            '18': chrome.runtime.getURL('icons/action/brighter/icon18-disabled.png'),
+            '19': chrome.runtime.getURL('icons/action/brighter/icon19-disabled.png'),
+            '32': chrome.runtime.getURL('icons/action/brighter/icon32-disabled.png'),
+            '36': chrome.runtime.getURL('icons/action/brighter/icon36-disabled.png'),
+            '38': chrome.runtime.getURL('icons/action/brighter/icon38-disabled.png'),
+            '64': chrome.runtime.getURL('icons/action/brighter/icon64-disabled.png')
+        }
+    },
+    'Monochrome': {
+        'Enabled': {
+            '16': chrome.runtime.getURL('icons/action/mono/icon16-default.png'),
+            '18': chrome.runtime.getURL('icons/action/mono/icon18-default.png'),
+            '19': chrome.runtime.getURL('icons/action/mono/icon19-default.png'),
+            '32': chrome.runtime.getURL('icons/action/mono/icon32-default.png'),
+            '36': chrome.runtime.getURL('icons/action/mono/icon36-default.png'),
+            '38': chrome.runtime.getURL('icons/action/mono/icon38-default.png'),
+            '64': chrome.runtime.getURL('icons/action/mono/icon64-default.png')
+        },
+        'Disabled': {
             '16': chrome.runtime.getURL('icons/action/mono/icon16-disabled.png'),
             '18': chrome.runtime.getURL('icons/action/mono/icon18-disabled.png'),
             '19': chrome.runtime.getURL('icons/action/mono/icon19-disabled.png'),

core/main.js

@@ -43,7 +43,7 @@ main._initializeSettings = function () {
         [Setting.DOMAINS_MANIPULATE_DOM]: {},
         [Setting.NEGATE_HTML_FILTER_LIST]: false,
         [Setting.BLOCK_GOOGLE_FONTS]: true,
-        [Setting.USE_MONOCHROME_ICONS]: false
+        [Setting.SELECTED_ICON]: 'Default'
     };
 
     chrome.storage.sync.get(settingDefaults, function (items) {
@@ -58,10 +58,10 @@ main._initializeSettings = function () {
                 'value': false
             });
         }
-        stateManager.useMonochromeIcons = items.useMonochromeIcons;
+        stateManager.selectedIcon = items.selectedIcon;
         wrappers.setIcon({
-            'path': stateManager.useMonochromeIcons ? IconType.Enabled.White : IconType.Enabled.Green,
-        });
+            'path': stateManager.selectedIcon
+        }, 'Enabled');
 
         chrome.storage.sync.set(items);
     });

core/state-manager.js

@@ -212,8 +212,8 @@ stateManager._handleStorageChanged = function (changes) {
     if (Setting.NEGATE_HTML_FILTER_LIST in changes) {
         stateManager.getInvertOption = changes.negateHtmlFilterList.newValue;
     }
-    if (Setting.USE_MONOCHROME_ICONS in changes) {
-        stateManager.useMonochromeIcons = changes.useMonochromeIcons.newValue;
+    if (Setting.SELECTED_ICON in changes) {
+        stateManager.selectedIcon = changes.selectedIcon.newValue;
     }
 };
 
@@ -252,9 +252,9 @@ stateManager._domainIsListed = function (domain, listname) {
 stateManager._setIconDisabled = function (tabIdentifier) {
 
     wrappers.setIcon({
-        'path': stateManager.useMonochromeIcons ? IconType.Disabled.White : IconType.Disabled.Red,
+        'path': stateManager.selectedIcon,
         'tabId': tabIdentifier
-    });
+    }, 'Disabled');
 };
 
 
@@ -266,7 +266,7 @@ stateManager.requests = {};
 stateManager.tabs = {};
 stateManager.getInvertOption = false;
 stateManager.validHosts = [];
-stateManager.useMonochromeIcons = false;
+stateManager.selectedIcon = 'Default';
 
 for (let mapping in mappings) {
 
@@ -278,13 +278,16 @@ 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.SELECTED_ICON], function (items) {
 
     if (items.showIconBadge === undefined) {
         items.showIconBadge = true;
     }
-
+    if (items.selectedIcon === undefined) {
+        stateManager.selectedIcon = 'Default';
+    }
     stateManager.showIconBadge = items.showIconBadge;
+    stateManager.selectedIcon = items.selectedIcon;
 });
 
 /**

modules/internal/wrappers.js

@@ -44,9 +44,10 @@ wrappers.setBadgeTextColor = function (details) {
     }
 };
 
-wrappers.setIcon = function (details) {
+wrappers.setIcon = function (details, type) {
 
     if (chrome.browserAction.setIcon !== undefined) {
+        details.path = IconType[details.path][type];
         chrome.browserAction.setIcon(details);
     }
 };

pages/options/options.html

@@ -102,15 +102,18 @@
                 </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>
+        </div>
+        <div class="option-group">
             <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> -->
+                <!-- TODO: Add i18n title -->
+                <div class="title-option without-checkbox">Select extension icon style:</div>
+                <select name="selectedIcon" id="selectedIcon" data-option="selectedIcon">
+                    <option value="Default">Default</option>
+                    <option value="Light">Light</option>
+                    <option value="Monochrome">Monochrome</option>
+                </select>
+                <!-- TODO: Add i18n description -->
+                <!-- <div class="description-option" data-i18n-content="selectedIconDescription">(description)</div> -->
             </section>
         </div>
         <div class="option-group">
@@ -170,7 +173,7 @@
                 <div class="notice-message">
                     Your preferred language is not yet fully supported. Please help out by translating this add-on on Weblate.
                 </div>
-                <a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank">
+                <a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank" rel="noopener noreferrer">
                     Translate
                 </a>
             </div>

pages/options/options.js

@@ -70,7 +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;
+    elements.selectedIcon.value = options._optionValues.selectedIcon;
 
     options._registerOptionChangedEventListeners(elements);
     options._registerMiscellaneousEventListeners();
@@ -131,7 +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);
+    elements.selectedIcon.addEventListener('change', options._onOptionChanged);
     let type = elements.ruleSets;
     for(let i = 0; i < type.length; i++) {
         type[i].addEventListener('change', options._openRuleSet);
@@ -185,7 +185,7 @@ options._getOptionElements = function () {
         [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.USE_MONOCHROME_ICONS]: options._getOptionElement(Setting.USE_MONOCHROME_ICONS)
+        [Setting.SELECTED_ICON]: options._getOptionElement(Setting.SELECTED_ICON)
     };
 
     return optionElements;
@@ -293,10 +293,10 @@ options._onOptionChanged = function ({target}) {
         }
     }
 
-    if (optionKey === Setting.USE_MONOCHROME_ICONS) {
+    if (optionKey === Setting.SELECTED_ICON) {
         wrappers.setIcon({
-            'path': optionValue ? IconType.Enabled.White : IconType.Enabled.Green
-        });
+            'path': optionValue
+        }, 'Enabled');
     }
 
     chrome.storage.sync.set({

pages/updates/updates.html

@@ -27,7 +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>Implemented: Different styles for extension 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>
                             <li>Implemented: Collapsible changelog for previous versions(reported by email)</li>
                         </ul>