diff --git a/.eslintrc b/.eslintrc index 526723f3..6e5421df 100644 --- a/.eslintrc +++ b/.eslintrc @@ -30,6 +30,7 @@ "MathJaxFiles": true, "BadgeSetting": true, "BadgeSettingHTMLFilter": true, + "BadgeSettingMissingResource": true, "fileGuard": true, "files": true, diff --git a/core/constants.js b/core/constants.js index 2229507d..207b39f8 100644 --- a/core/constants.js +++ b/core/constants.js @@ -60,6 +60,48 @@ const Resource = { 'VERSION_PLACEHOLDER': '{version}' }; +const BadgeSetting = { + 'TYPE': 'default', + 'COUNTER_PREVIEW_BADGE': 'counter-preview-badge', + 'HTML_ICON_BADGE_PREVIEW': 'icon-badge-preview', + 'PRE_BADGED_BACKGROUND_COLOR': 'pre-badged-background-color', + 'BADGED_BACKGROUND_COLOR': 'badged-background-color', + 'PRE_BADGED_TEXT_COLOR': 'pre-badged-text-color', + 'BADGED_TEXT_COLOR': 'badged-text-color', + 'RESTORE_BACKGROUND_COLOR': 'restore-background-color', + 'RESTORE_TEXT_COLOR': 'restore-text-color', + 'HEX_BACKGROUND_COLOR': '#4A826C', + 'HEX_TEXT_COLOR': '#FFFFFF', +}; + +const BadgeSettingHTMLFilter = { + 'TYPE': 'html-filter', + 'COUNTER_PREVIEW_BADGE': 'html-counter-preview-badge', + 'HTML_ICON_BADGE_PREVIEW': 'html-icon-badge-preview', + 'PRE_BADGED_BACKGROUND_COLOR': 'html-pre-badged-background-color', + 'BADGED_BACKGROUND_COLOR': 'html-badged-background-color', + 'PRE_BADGED_TEXT_COLOR': 'html-pre-badged-text-color', + 'BADGED_TEXT_COLOR': 'html-badged-text-color', + 'RESTORE_BACKGROUND_COLOR': 'html-restore-background-color', + 'RESTORE_TEXT_COLOR': 'html-restore-text-color', + 'HEX_BACKGROUND_COLOR': '#FF0000', + 'HEX_TEXT_COLOR': '#FFFFFF', +}; + +const BadgeSettingMissingResource = { + 'TYPE': 'missing-resource', + 'COUNTER_PREVIEW_BADGE': 'missing-counter-preview-badge', + 'HTML_ICON_BADGE_PREVIEW': 'missing-icon-badge-preview', + 'PRE_BADGED_BACKGROUND_COLOR': 'missing-pre-badged-background-color', + 'BADGED_BACKGROUND_COLOR': 'missing-badged-background-color', + 'PRE_BADGED_TEXT_COLOR': 'missing-pre-badged-text-color', + 'BADGED_TEXT_COLOR': 'missing-badged-text-color', + 'RESTORE_BACKGROUND_COLOR': 'missing-restore-background-color', + 'RESTORE_TEXT_COLOR': 'missing-restore-text-color', + 'HEX_BACKGROUND_COLOR': '#0000FF', + 'HEX_TEXT_COLOR': '#FFFFFF', +}; + const Setting = { 'AMOUNT_INJECTED': 'amountInjected', 'BLOCK_MISSING': 'blockMissing', @@ -85,6 +127,8 @@ const Setting = { 'BADGE_DEFAULT_TEXT_COLOR': 'badgeDefaultTextColor', 'BADGE_HTML_FILTER_BACKGROUND_COLOR': 'badgeHTMLFilterBackgroundColor', 'BADGE_HTML_FILTER_TEXT_COLOR': 'badgeHTMLfilterTextColor', + 'BADGE_MISSING_RESOURCE_BACKGROUND_COLOR': 'badgeMissingResourceBackgroundColor', + 'BADGE_MISSING_RESOURCE_TEXT_COLOR': 'badgeMissingResourceTextColor', 'HIDE_DONATION_BUTTON': 'hideDonationButton', 'CHANGE_BADGE_COLOR_MISSING_RESOURCES': 'changeBadgeColorMissingResources', }; @@ -110,10 +154,12 @@ const SettingDefaults = { [Setting.STRIP_METADATA]: true, [Setting.ALLOWLISTED_DOMAINS]: {}, [Setting.XHR_TEST_DOMAIN]: Address.LOCALCDN, - [Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: '#4A826C', - [Setting.BADGE_DEFAULT_TEXT_COLOR]: '#FFFFFF', - [Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: '#4A826C', - [Setting.BADGE_HTML_FILTER_TEXT_COLOR]: '#FFFFFF', + [Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: BadgeSetting.HEX_BACKGROUND_COLOR, + [Setting.BADGE_DEFAULT_TEXT_COLOR]: BadgeSetting.HEX_TEXT_COLOR, + [Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: BadgeSettingHTMLFilter.HEX_BACKGROUND_COLOR, + [Setting.BADGE_HTML_FILTER_TEXT_COLOR]: BadgeSettingHTMLFilter.HEX_TEXT_COLOR, + [Setting.BADGE_MISSING_RESOURCE_BACKGROUND_COLOR]: BadgeSettingMissingResource.HEX_BACKGROUND_COLOR, + [Setting.BADGE_MISSING_RESOURCE_TEXT_COLOR]: BadgeSettingMissingResource.HEX_TEXT_COLOR, [Setting.HIDE_DONATION_BUTTON]: false, [Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES]: false, }; @@ -205,28 +251,6 @@ const IconType = { } }; -const BadgeSetting = { - 'TYPE': 'default', - 'COUNTER_PREVIEW_BADGE': 'counter-preview-badge', - 'PRE_BADGED_BACKGROUND_COLOR': 'pre-badged-background-color', - 'BADGED_BACKGROUND_COLOR': 'badged-background-color', - 'PRE_BADGED_TEXT_COLOR': 'pre-badged-text-color', - 'BADGED_TEXT_COLOR': 'badged-text-color', - 'RESTORE_BACKGROUND_COLOR': 'restore-background-color', - 'RESTORE_TEXT_COLOR': 'restore-text-color', -}; - -const BadgeSettingHTMLFilter = { - 'TYPE': 'html-filter', - 'COUNTER_PREVIEW_BADGE': 'html-counter-preview-badge', - 'PRE_BADGED_BACKGROUND_COLOR': 'html-pre-badged-background-color', - 'BADGED_BACKGROUND_COLOR': 'html-badged-background-color', - 'PRE_BADGED_TEXT_COLOR': 'html-pre-badged-text-color', - 'BADGED_TEXT_COLOR': 'html-badged-text-color', - 'RESTORE_BACKGROUND_COLOR': 'html-restore-background-color', - 'RESTORE_TEXT_COLOR': 'html-restore-text-color', -}; - const Regex = { 'GOOGLE_FONTS': /fonts\.(googleapis|gstatic)\.com\/(?!.*(Material\+Icons|materialicons).*).*/, 'GOOGLE_MATERIAL_ICONS': /fonts\.(googleapis|gstatic)\.com\/.*\?family=.*Material\+Icons/, diff --git a/core/main.js b/core/main.js index 06c789e1..0b83382c 100644 --- a/core/main.js +++ b/core/main.js @@ -83,6 +83,8 @@ main._initializeSettings = function () { wrappers.badgeDefaultBackgroundColor = items.badgeDefaultBackgroundColor; wrappers.badgeHTMLfilterTextColor = items.badgeHTMLfilterTextColor; wrappers.badgeHTMLFilterBackgroundColor = items.badgeHTMLFilterBackgroundColor; + wrappers.badgeMissingResourceTextColor = items.badgeMissingResourceTextColor; + wrappers.badgeMissingResourceBackgroundColor = items.badgeMissingResourceBackgroundColor; wrappers.setBadgeTextColor({'color': items.badgeDefaultTextColor, 'type': 'default'}); wrappers.setBadgeBackgroundColor({'color': items.badgeDefaultBackgroundColor, 'type': 'default'}); diff --git a/core/state-manager.js b/core/state-manager.js index b306eccc..6fd72a80 100644 --- a/core/state-manager.js +++ b/core/state-manager.js @@ -51,11 +51,11 @@ stateManager.registerInjection = function (tabIdentifier, injection, url) { } if (stateManager.showIconBadge === true) { if (missingCount > 0 && stateManager.changeBadgeColorMissingResources) { - wrappers.setBadgeColoring(tabIdentifier, 'missing'); + wrappers.setBadgeColoring(tabIdentifier, BadgeSettingMissingResource.TYPE); } else if (listedToManipulateDOM) { - wrappers.setBadgeColoring(tabIdentifier, 'htmlFilterOn'); + wrappers.setBadgeColoring(tabIdentifier, BadgeSettingHTMLFilter.TYPE); } else { - wrappers.setBadgeColoring(tabIdentifier, 'default'); + wrappers.setBadgeColoring(tabIdentifier, BadgeSetting.TYPE); } wrappers.setBadgeText(tabIdentifier, injectionCount); } diff --git a/core/storage-manager.js b/core/storage-manager.js index ba300c2e..4453ec52 100644 --- a/core/storage-manager.js +++ b/core/storage-manager.js @@ -200,15 +200,10 @@ storageManager._validation = function (content) { } } - // set values directly - wrappers.setIcon({'path': imported['selectedIcon']}, 'Enabled'); - storageManager.amountInjected = imported['amountInjected']; - storageManager.statistics = imported['internalStatisticsData']; - storageManager.type.set(imported); alert(chrome.i18n.getMessage('dialogImportSuccessful')); - chrome.tabs.reload(); + chrome.runtime.reload(); }; storageManager._validateDomainsAndStatistics = function (type, obj) { diff --git a/modules/internal/wrappers.js b/modules/internal/wrappers.js index 7bb9808d..6ab21139 100644 --- a/modules/internal/wrappers.js +++ b/modules/internal/wrappers.js @@ -33,12 +33,16 @@ wrappers.setBadgeBackgroundColor = function (details) { if (chrome.browserAction.setBadgeBackgroundColor === undefined) { return; } - if (details.type === 'default') { + + if (details.type === BadgeSetting.TYPE) { storageManager.type.set({[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: details.color}); wrappers.badgeDefaultBackgroundColor = details.color; - } else if (details.type === 'html-filter') { + } else if (details.type === BadgeSettingHTMLFilter.TYPE) { storageManager.type.set({[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: details.color}); wrappers.badgeColorHTMLfilter = details.color; + } else if (details.type === BadgeSettingMissingResource.TYPE) { + storageManager.type.set({[Setting.BADGE_MISSING_RESOURCE_BACKGROUND_COLOR]: details.color}); + wrappers.badgeMissingResourceBackgroundColor = details.color; } }; @@ -46,12 +50,16 @@ wrappers.setBadgeTextColor = function (details) { if (chrome.browserAction.setBadgeTextColor === undefined) { return; } - if (details.type === 'default') { + + if (details.type === BadgeSetting.TYPE) { storageManager.type.set({[Setting.BADGE_DEFAULT_TEXT_COLOR]: details.color}); wrappers.badgeDefaultTextColor = details.color; - } else if (details.type === 'html-filter') { + } else if (details.type === BadgeSettingHTMLFilter.TYPE) { storageManager.type.set({[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: details.color}); wrappers.badgeDefaultTextColorHTMLfilter = details.color; + } else if (details.type === BadgeSettingMissingResource.TYPE) { + storageManager.type.set({[Setting.BADGE_MISSING_RESOURCE_TEXT_COLOR]: details.color}); + wrappers.badgeMissingResourceTextColor = details.color; } }; @@ -79,15 +87,15 @@ wrappers.setBadgeColoring = function (tabId, value) { return; } - if (value === 'htmlFilterOn') { + if (value === BadgeSettingHTMLFilter.TYPE) { textColor = wrappers.badgeHTMLfilterTextColor; backgroundColor = wrappers.badgeHTMLFilterBackgroundColor; - } else if (value === 'default') { + } else if (value === BadgeSetting.TYPE) { textColor = wrappers.badgeDefaultTextColor; backgroundColor = wrappers.badgeDefaultBackgroundColor; - } else if (value === 'missing') { - textColor = 'white'; - backgroundColor = 'blue'; + } else if (value === BadgeSettingMissingResource.TYPE) { + textColor = wrappers.badgeMissingResourceTextColor; + backgroundColor = wrappers.badgeMissingResourceBackgroundColor; } else { return; } diff --git a/pages/options/options-other.js b/pages/options/options-other.js index 0bcf5b4c..c981e84b 100644 --- a/pages/options/options-other.js +++ b/pages/options/options-other.js @@ -44,8 +44,9 @@ optionsOther._renderIconSection = function (opt) { document.getElementById('icon-light').checked = true; } url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`); - document.getElementById('icon-badge-preview').src = url; - document.getElementById('html-icon-badge-preview').src = url; + document.getElementById(BadgeSetting.HTML_ICON_BADGE_PREVIEW).src = url; + document.getElementById(BadgeSettingHTMLFilter.HTML_ICON_BADGE_PREVIEW).src = url; + document.getElementById(BadgeSettingMissingResource.HTML_ICON_BADGE_PREVIEW).src = url; bgColor = opt.badgeDefaultBackgroundColor; txtColor = opt.badgeDefaultTextColor; @@ -54,6 +55,10 @@ optionsOther._renderIconSection = function (opt) { bgColor = opt.badgeHTMLFilterBackgroundColor; txtColor = opt.badgeHTMLfilterTextColor; optionsOther._createBadge(BadgeSettingHTMLFilter, bgColor, txtColor); + + bgColor = opt.badgeMissingResourceBackgroundColor; + txtColor = opt.badgeMissingResourceTextColor; + optionsOther._createBadge(BadgeSettingMissingResource, bgColor, txtColor); }; optionsOther._createBadge = function (element, bgColor, txtColor) { @@ -87,8 +92,9 @@ optionsOther._renderStorageSection = function (opt) { optionsOther._setIcon = function (optionValue) { wrappers.setIcon({'path': optionValue}, 'Enabled'); let url = chrome.runtime.getURL(`icons/action/${optionValue.toLowerCase()}/icon38-default.png`); - document.getElementById('icon-badge-preview').src = url; - document.getElementById('html-icon-badge-preview').src = url; + document.getElementById(BadgeSetting.HTML_ICON_BADGE_PREVIEW).src = url; + document.getElementById(BadgeSettingHTMLFilter.HTML_ICON_BADGE_PREVIEW).src = url; + document.getElementById(BadgeSettingMissingResource.HTML_ICON_BADGE_PREVIEW).src = url; }; optionsOther._preSelectStorage = function (type) { @@ -139,19 +145,17 @@ optionsOther._colorPicker = function (element) { }; optionsOther._setDefaultColor = function ({target}) { - let element; - if (target.id === 'restore-text-color' || target.id === 'restore-background-color') { - element = BadgeSetting; - } else { - element = BadgeSettingHTMLFilter; - } + let element = optionsOther._getBadgeElement(target.id); + if (target.id === element.RESTORE_TEXT_COLOR) { - let txtColor = '#FFFFFF'; + let txtColor = element.HEX_TEXT_COLOR; + wrappers.setBadgeTextColor({'type': element.TYPE, 'color': txtColor}); document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor; document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor; document.getElementById(element.BADGED_TEXT_COLOR).value = txtColor; - } else if (target.id === 'restore-background-color') { - let bgColor = '#4A826C'; + } else if (target.id === element.RESTORE_BACKGROUND_COLOR) { + let bgColor = element.HEX_BACKGROUND_COLOR; + wrappers.setBadgeBackgroundColor({'type': element.TYPE, 'color': bgColor}); document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor; document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor; document.getElementById(element.BADGED_BACKGROUND_COLOR).value = bgColor; @@ -159,19 +163,15 @@ optionsOther._setDefaultColor = function ({target}) { }; optionsOther._onChangedHexColor = function ({target}) { - let element; - if (target.id === 'badged-text-color' || target.id === 'badged-background-color') { - element = BadgeSetting; - } else { - element = BadgeSettingHTMLFilter; - } + let element = optionsOther._getBadgeElement(target.id); + if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) { target.classList.remove('color-error'); if (target.id === element.BADGED_TEXT_COLOR) { let txtColor = target.value; document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor; document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor; - } else { + } else if (target.id === element.BADGED_BACKGROUND_COLOR) { let bgColor = target.value; document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor; document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor; @@ -181,9 +181,27 @@ optionsOther._onChangedHexColor = function ({target}) { } }; +optionsOther._getBadgeElement = function (targetId) { + switch (targetId) { + case BadgeSetting.RESTORE_TEXT_COLOR: + case BadgeSetting.RESTORE_BACKGROUND_COLOR: + return BadgeSetting; + case BadgeSettingHTMLFilter.RESTORE_TEXT_COLOR: + case BadgeSettingHTMLFilter.RESTORE_BACKGROUND_COLOR: + return BadgeSettingHTMLFilter; + case BadgeSettingMissingResource.RESTORE_TEXT_COLOR: + case BadgeSettingMissingResource.RESTORE_BACKGROUND_COLOR: + return BadgeSettingMissingResource; + default: + return undefined; + } +}; + optionsOther.init = function (opt) { if (BrowserType.CHROMIUM) { document.getElementById('div-badged-text-color').style.display = 'none'; + document.getElementById('html-div-badged-text-color').style.display = 'none'; + document.getElementById('missing-div-badged-text-color').style.display = 'none'; } document.getElementById('icon-default').addEventListener('change', options.onOptionChanged); diff --git a/pages/options/options.css b/pages/options/options.css index 84e7739b..524e9956 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -191,12 +191,16 @@ body { padding: 0 30px 0 0; } -#badge-preview-top, #html-badge-preview-top { +#badge-preview-top, +#html-badge-preview-top, +#missing-badge-preview-top { position: relative; width: 38px; } -#counter-preview-badge, #html-counter-preview-badge { +#counter-preview-badge, +#html-counter-preview-badge, +#missing-counter-preview-badge { background: black; border-radius: 5px; color: white; @@ -208,13 +212,16 @@ body { } #pre-badged-background-color, #pre-badged-text-color, -#html-pre-badged-background-color, #html-pre-badged-text-color { +#html-pre-badged-background-color, #html-pre-badged-text-color, +#missing-pre-badged-background-color, #missing-pre-badged-text-color { height: 30px; margin-right: 5px; width: 30px; } -#icon-badge-preview, #html-icon-badge-preview { +#icon-badge-preview, +#html-icon-badge-preview, +#missing-icon-badge-preview { margin-top: 5px; } @@ -238,7 +245,8 @@ div[class="color-picker:a"] { } #badged-background-color, #badged-text-color, -#html-badged-background-color, #html-badged-text-color { +#html-badged-background-color, #html-badged-text-color, +#missing-badged-background-color, #missing-badged-text-color { max-width: 150px; } diff --git a/pages/options/options.html b/pages/options/options.html index bc9471e0..24a69564 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -308,6 +308,25 @@ +
+

Missing Resource

+
+
+ Default +
17
+
+
+
+
+
+
+
+
+
+ +
+
+
diff --git a/pages/options/options.js b/pages/options/options.js index d084c4b4..7b091e00 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -88,6 +88,8 @@ options._renderOptionsPanel = function () { 'badgeDefaultTextColor': options._optionValues.badgeDefaultTextColor, 'badgeHTMLFilterBackgroundColor': options._optionValues.badgeHTMLFilterBackgroundColor, 'badgeHTMLfilterTextColor': options._optionValues.badgeHTMLfilterTextColor, + 'badgeMissingResourceBackgroundColor': options._optionValues.badgeMissingResourceBackgroundColor, + 'badgeMissingResourceTextColor': options._optionValues.badgeMissingResourceTextColor, 'storageType': options._optionValues.storageType }; diff --git a/pages/updates/updates.html b/pages/updates/updates.html index 241ccf1b..03ada714 100644 --- a/pages/updates/updates.html +++ b/pages/updates/updates.html @@ -74,6 +74,7 @@
  • Unused permission removed (#612)
  • Wildcard support for Google Fonts and HTML filter list (#613)
  • Customizable badge as HTML filter indicator (#613)
    • +
  • Customizable badge for missing resources and some code improvements (#613)