diff --git a/.eslintrc b/.eslintrc index 50ba07d5..526723f3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -28,6 +28,8 @@ "EncodingTypes": true, "ExtraInfoSpec": true, "MathJaxFiles": true, + "BadgeSetting": true, + "BadgeSettingHTMLFilter": true, "fileGuard": true, "files": true, diff --git a/core/constants.js b/core/constants.js index 9f002dd5..2229507d 100644 --- a/core/constants.js +++ b/core/constants.js @@ -81,8 +81,10 @@ const Setting = { 'DEFAULT_RANGE_STATISTIC': 'defaultRangeStatistic', 'ALLOWED_DOMAINS_GOOGLE_FONTS': 'allowedDomainsGoogleFonts', 'STORAGE_TYPE': 'storageType', - 'BADGE_COLOR': 'badgeColor', - 'BADGE_TEXT_COLOR': 'badgeTextColor', + 'BADGE_DEFAULT_BACKGROUND_COLOR': 'badgeDefaultBackgroundColor', + 'BADGE_DEFAULT_TEXT_COLOR': 'badgeDefaultTextColor', + 'BADGE_HTML_FILTER_BACKGROUND_COLOR': 'badgeHTMLFilterBackgroundColor', + 'BADGE_HTML_FILTER_TEXT_COLOR': 'badgeHTMLfilterTextColor', 'HIDE_DONATION_BUTTON': 'hideDonationButton', 'CHANGE_BADGE_COLOR_MISSING_RESOURCES': 'changeBadgeColorMissingResources', }; @@ -108,8 +110,10 @@ const SettingDefaults = { [Setting.STRIP_METADATA]: true, [Setting.ALLOWLISTED_DOMAINS]: {}, [Setting.XHR_TEST_DOMAIN]: Address.LOCALCDN, - [Setting.BADGE_COLOR]: '#4A826C', - [Setting.BADGE_TEXT_COLOR]: '#FFFFFF', + [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.HIDE_DONATION_BUTTON]: false, [Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES]: false, }; @@ -201,6 +205,28 @@ 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/interceptor.js b/core/interceptor.js index 468464d1..78433428 100644 --- a/core/interceptor.js +++ b/core/interceptor.js @@ -94,10 +94,10 @@ interceptor._handleMissingCandidate = function (requestUrl, tabIdentifier) { if (stateManager.changeBadgeColorMissingResources === true) { missingCount = stateManager.tabs[tabIdentifier].missing || 0; if (missingCount > 0 && injectionCount === 0) { - wrappers.setBadgeMissing(tabIdentifier, injectionCount); + wrappers.setBadgeText(tabIdentifier, injectionCount); } } else { - wrappers.defaultBadge(tabIdentifier, injectionCount); + wrappers.setBadgeText(tabIdentifier, injectionCount); } } diff --git a/core/main.js b/core/main.js index e62426ee..06c789e1 100644 --- a/core/main.js +++ b/core/main.js @@ -72,12 +72,20 @@ main._initializeSettings = function () { 'path': stateManager.selectedIcon }, 'Enabled'); - storageManager.amountInjected = items.amountInjected || 0; - interceptor.xhrTestDomain = items.xhrTestDomain || Address.LOCALCDN; - interceptor.allowedDomainsGoogleFonts = items.allowedDomainsGoogleFonts || {}; - interceptor.blockMissing = items.blockMissing === undefined ? false : items.blockMissing; - interceptor.blockGoogleFonts = items.blockGoogleFonts === undefined ? true : items.blockGoogleFonts; - requestAnalyzer.allowlistedDomains = items.allowlistedDomains || {}; + storageManager.amountInjected = items.amountInjected; + interceptor.xhrTestDomain = items.xhrTestDomain; + interceptor.allowedDomainsGoogleFonts = items.allowedDomainsGoogleFonts; + interceptor.blockMissing = items.blockMissing; + interceptor.blockGoogleFonts = items.blockGoogleFonts; + requestAnalyzer.allowlistedDomains = items.allowlistedDomains; + + wrappers.badgeDefaultTextColor = items.badgeDefaultTextColor; + wrappers.badgeDefaultBackgroundColor = items.badgeDefaultBackgroundColor; + wrappers.badgeHTMLfilterTextColor = items.badgeHTMLfilterTextColor; + wrappers.badgeHTMLFilterBackgroundColor = items.badgeHTMLFilterBackgroundColor; + + wrappers.setBadgeTextColor({'color': items.badgeDefaultTextColor, 'type': 'default'}); + wrappers.setBadgeBackgroundColor({'color': items.badgeDefaultBackgroundColor, 'type': 'default'}); storageManager.type.set(items); }); @@ -101,9 +109,21 @@ main._showReleaseNotes = function (details) { storageManager.type.get(null, function (items) { let mappingUpdate = items.lastMappingUpdate !== mappings.lastMappingUpdate; + // Migrate old keys to new keys https://codeberg.org/nobody/LocalCDN/issues/613 + if (items.badgeDefaultBackgroundColor === undefined) { + items.badgeDefaultBackgroundColor = items.badgeColor; + delete items.badgeColor; + } + + // Migrate old keys to new keys https://codeberg.org/nobody/LocalCDN/issues/613 + if (items.badgeDefaultTextColor === undefined) { + items.badgeDefaultTextColor = items.badgeTextColor; + delete items.badgeTextColor; + } + // Remove old keys for (const key of Object.keys(items)) { - if (!(key in SettingDefaults)) { + if (!(key in SettingDefaults) && key !== undefined) { delete items[key]; } } @@ -113,7 +133,6 @@ main._showReleaseNotes = function (details) { // Updated mappings.js if (mappingUpdate) { items.lastMappingUpdate = mappings.lastMappingUpdate; - storageManager.type.set(items); } if ((mappingUpdate && items.updateNotification === 1) || items.updateNotification === 2) { @@ -123,8 +142,8 @@ main._showReleaseNotes = function (details) { }); } else { // No mappings.js update - } + storageManager.type.set(items); }); } }; diff --git a/core/state-manager.js b/core/state-manager.js index 0450735f..b306eccc 100644 --- a/core/state-manager.js +++ b/core/state-manager.js @@ -30,13 +30,16 @@ var stateManager = {}; * Public Methods */ -stateManager.registerInjection = function (tabIdentifier, injection) { - let injectionIdentifier, registeredTab, injectionCount, missingCount; +stateManager.registerInjection = function (tabIdentifier, injection, url) { + let injectionIdentifier, registeredTab, injectionCount, missingCount, initiatorDomain, listedToManipulateDOM; injectionIdentifier = injection.source + injection.path + injection.version; registeredTab = stateManager.tabs[tabIdentifier]; registeredTab.injections[injectionIdentifier] = injection; + initiatorDomain = helpers.extractDomainFromUrl(url, true) || Address.EXAMPLE; + listedToManipulateDOM = stateManager._domainIsListed(initiatorDomain, 'manipulate-dom'); + injectionCount = Object.keys(registeredTab.injections).length || 0; missingCount = registeredTab.missing || 0; @@ -48,10 +51,13 @@ stateManager.registerInjection = function (tabIdentifier, injection) { } if (stateManager.showIconBadge === true) { if (missingCount > 0 && stateManager.changeBadgeColorMissingResources) { - wrappers.setBadgeMissing(tabIdentifier, injectionCount); + wrappers.setBadgeColoring(tabIdentifier, 'missing'); + } else if (listedToManipulateDOM) { + wrappers.setBadgeColoring(tabIdentifier, 'htmlFilterOn'); } else { - wrappers.defaultBadge(tabIdentifier, injectionCount); + wrappers.setBadgeColoring(tabIdentifier, 'default'); } + wrappers.setBadgeText(tabIdentifier, injectionCount); } if (isNaN(storageManager.amountInjected)) { storageManager.type.get(Setting.AMOUNT_INJECTED, function (items) { @@ -208,14 +214,19 @@ stateManager._handleStorageChanged = function (changes) { stateManager.changeBadgeColorMissingResources = changes.changeBadgeColorMissingResources.newValue; } else if (Setting.LOGGING in changes) { stateManager.logging = changes.enableLogging.newValue; + } else if (Setting.BADGE_DEFAULT_TEXT_COLOR in changes) { + wrappers.badgeDefaultTextColor = changes.badgeDefaultTextColor.newValue; + } else if (Setting.BADGE_DEFAULT_BACKGROUND_COLOR in changes) { + wrappers.badgeDefaultBackgroundColor = changes.badgeDefaultBackgroundColor.newValue; + } else if (Setting.BADGE_HTML_FILTER_TEXT_COLOR in changes) { + wrappers.badgeHTMLfilterTextColor = changes.badgeHTMLfilterTextColor.newValue; + } else if (Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR in changes) { + wrappers.badgeHTMLFilterBackgroundColor = changes.badgeHTMLFilterBackgroundColor.newValue; } }; stateManager._clearBadgeText = function (tabIdentifier) { - wrappers.setBadgeText({ - 'tabId': tabIdentifier, - 'text': '' - }); + wrappers.setBadgeText(tabIdentifier, ''); }; stateManager._removeIconBadgeFromTab = function (tab) { @@ -328,7 +339,11 @@ chrome.webRequest.onErrorOccurred.addListener(function (requestDetails) { chrome.webRequest.onBeforeRedirect.addListener(function (requestDetails) { let knownRequest = stateManager.requests[requestDetails.requestId]; if (knownRequest) { - stateManager.registerInjection(knownRequest.tabIdentifier, knownRequest.targetDetails); + stateManager.registerInjection( + knownRequest.tabIdentifier, + knownRequest.targetDetails, + requestDetails.originUrl + ); delete stateManager.requests[requestDetails.requestId]; } }, {'urls': [Address.ANY]}); diff --git a/core/storage-manager.js b/core/storage-manager.js index a6b06d1a..ba300c2e 100644 --- a/core/storage-manager.js +++ b/core/storage-manager.js @@ -79,8 +79,10 @@ storageManager.migrateData = function (target) { [Setting.STRIP_METADATA]: data.stripMetadata, [Setting.ALLOWLISTED_DOMAINS]: data.allowlistedDomains, [Setting.XHR_TEST_DOMAIN]: data.xhrTestDomain, - [Setting.BADGE_COLOR]: data.badgeColor, - [Setting.BADGE_TEXT_COLOR]: data.badgeTextColor + [Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: data.badgeDefaultBackgroundColor, + [Setting.BADGE_DEFAULT_TEXT_COLOR]: data.badgeDefaultTextColor, + [Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: data.badgeHTMLFilterBackgroundColor, + [Setting.BADGE_HTML_FILTER_TEXT_COLOR]: data.badgeHTMLfilterTextColor }); }); }; @@ -169,6 +171,14 @@ storageManager._validation = function (content) { content.updateNotification = parseInt(content.updateNotification); } + // Migrate badge colors + if (content.badgeDefaultBackgroundColor === undefined) { + content.badgeDefaultBackgroundColor = content.badgeColor; + } + if (content.badgeDefaultTextColor === undefined) { + content.badgeDefaultTextColor = content.badgeTextColor; + } + for (const [key, value] of Object.entries(SettingDefaults)) { // If type the same as default settings if (typeof value === typeof content[key]) { diff --git a/modules/internal/wrappers.js b/modules/internal/wrappers.js index 713884b9..7bb9808d 100644 --- a/modules/internal/wrappers.js +++ b/modules/internal/wrappers.js @@ -30,27 +30,36 @@ var wrappers = {}; */ wrappers.setBadgeBackgroundColor = function (details) { - if (chrome.browserAction.setBadgeBackgroundColor !== undefined) { - chrome.browserAction.setBadgeBackgroundColor(details); - - storageManager.type.set({ - [Setting.BADGE_COLOR]: details.color - }); + if (chrome.browserAction.setBadgeBackgroundColor === undefined) { + return; } -}; - -wrappers.setBadgeText = function (details) { - if (chrome.browserAction.setBadgeText !== undefined) { - chrome.browserAction.setBadgeText(details); + if (details.type === 'default') { + storageManager.type.set({[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: details.color}); + wrappers.badgeDefaultBackgroundColor = details.color; + } else if (details.type === 'html-filter') { + storageManager.type.set({[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: details.color}); + wrappers.badgeColorHTMLfilter = details.color; } }; wrappers.setBadgeTextColor = function (details) { - if (chrome.browserAction.setBadgeTextColor !== undefined) { - chrome.browserAction.setBadgeTextColor(details); + if (chrome.browserAction.setBadgeTextColor === undefined) { + return; + } + if (details.type === 'default') { + storageManager.type.set({[Setting.BADGE_DEFAULT_TEXT_COLOR]: details.color}); + wrappers.badgeDefaultTextColor = details.color; + } else if (details.type === 'html-filter') { + storageManager.type.set({[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: details.color}); + wrappers.badgeDefaultTextColorHTMLfilter = details.color; + } +}; - storageManager.type.set({ - [Setting.BADGE_TEXT_COLOR]: details.color +wrappers.setBadgeText = function (tabId, text) { + if (chrome.browserAction.setBadgeText !== undefined) { + chrome.browserAction.setBadgeText({ + 'tabId': tabId, + 'text': `${text}` }); } }; @@ -62,49 +71,33 @@ wrappers.setIcon = function (details, type) { } }; -wrappers.setBadgeMissing = function (tabIdentifier, counter) { - chrome.browserAction.setBadgeText({ - 'tabId': tabIdentifier, - 'text': `${counter}`, - }); - if (BrowserType.FIREFOX) { - chrome.browserAction.setBadgeTextColor({ - 'tabId': tabIdentifier, - 'color': 'black', - }); - chrome.browserAction.setBadgeBackgroundColor({ - 'tabId': tabIdentifier, - 'color': 'yellow', - }); +wrappers.setBadgeColoring = function (tabId, value) { + let textColor, backgroundColor; + + if (chrome.browserAction.setBadgeBackgroundColor === undefined || + chrome.browserAction.setBadgeTextColor === undefined) { + return; + } + + if (value === 'htmlFilterOn') { + textColor = wrappers.badgeHTMLfilterTextColor; + backgroundColor = wrappers.badgeHTMLFilterBackgroundColor; + } else if (value === 'default') { + textColor = wrappers.badgeDefaultTextColor; + backgroundColor = wrappers.badgeDefaultBackgroundColor; + } else if (value === 'missing') { + textColor = 'white'; + backgroundColor = 'blue'; } else { - chrome.browserAction.setBadgeBackgroundColor({ - 'tabId': tabIdentifier, - 'color': 'red', - }); + return; } -}; -wrappers.defaultBadge = function (tabIdentifier, counter) { - chrome.browserAction.setBadgeText({ - 'tabId': tabIdentifier, - 'text': `${counter}`, + chrome.browserAction.setBadgeTextColor({ + 'tabId': tabId, + 'color': textColor }); - if (BrowserType.FIREFOX) { - chrome.browserAction.setBadgeTextColor({ - 'tabId': tabIdentifier, - 'color': wrappers.textColor - }); - } chrome.browserAction.setBadgeBackgroundColor({ - 'tabId': tabIdentifier, - 'color': wrappers.backgroundColor + 'tabId': tabId, + 'color': backgroundColor }); }; - -storageManager.type.get([Setting.BADGE_COLOR, Setting.BADGE_TEXT_COLOR], function (items) { - wrappers.textColor = items.badgeTextColor || '#FFFFFF'; - wrappers.backgroundColor = items.badgeColor || '#4A826C'; - - wrappers.setBadgeTextColor({'color': wrappers.textColor}); - wrappers.setBadgeBackgroundColor({'color': wrappers.backgroundColor}); -}); diff --git a/pages/options/options-other.js b/pages/options/options-other.js index a996f7c4..0bcf5b4c 100644 --- a/pages/options/options-other.js +++ b/pages/options/options-other.js @@ -27,41 +27,50 @@ var optionsOther = {}; */ optionsOther._renderIconSection = function (opt) { - let url, bgColor, txtColor; + let url, bgColor, txtColor, selectedIcon; if (!chrome.browserAction.setIcon) { document.getElementById('icon-style-div').style.display = 'none'; - } else { - let selectedIcon = opt.selectedIcon; - - if (selectedIcon === 'Default') { - document.getElementById('icon-default').checked = true; - } else if (selectedIcon === 'Grey') { - document.getElementById('icon-grey').checked = true; - } else if (selectedIcon === 'Light') { - document.getElementById('icon-light').checked = true; - } - url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`); - document.getElementById('icon-badge-preview').src = url; - - bgColor = opt.badgeColor || '#4A826C'; - txtColor = opt.badgeTextColor || '#FFFFFF'; - - document.getElementById('counter-preview-badge').style.backgroundColor = bgColor; - document.getElementById('pre-badged-background-color').style.backgroundColor = bgColor; - document.getElementById('badged-background-color').value = bgColor; - - document.getElementById('counter-preview-badge').style.color = txtColor; - document.getElementById('pre-badged-text-color').style.backgroundColor = txtColor; - document.getElementById('badged-text-color').value = txtColor; - - document.getElementById('badged-background-color').addEventListener('keyup', optionsOther._onChangedHexColor); - document.getElementById('badged-text-color').addEventListener('keyup', optionsOther._onChangedHexColor); - document.getElementById('restore-background-color').addEventListener('click', optionsOther._setDefaultColor); - document.getElementById('restore-text-color').addEventListener('click', optionsOther._setDefaultColor); - - optionsOther._colorPicker(); + return; } + + selectedIcon = opt.selectedIcon; + + if (selectedIcon === 'Default') { + document.getElementById('icon-default').checked = true; + } else if (selectedIcon === 'Grey') { + document.getElementById('icon-grey').checked = true; + } else if (selectedIcon === 'Light') { + 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; + + bgColor = opt.badgeDefaultBackgroundColor; + txtColor = opt.badgeDefaultTextColor; + optionsOther._createBadge(BadgeSetting, bgColor, txtColor); + + bgColor = opt.badgeHTMLFilterBackgroundColor; + txtColor = opt.badgeHTMLfilterTextColor; + optionsOther._createBadge(BadgeSettingHTMLFilter, bgColor, txtColor); +}; + +optionsOther._createBadge = function (element, bgColor, txtColor) { + 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; + + 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; + + document.getElementById(element.BADGED_BACKGROUND_COLOR).addEventListener('keyup', optionsOther._onChangedHexColor); + document.getElementById(element.BADGED_TEXT_COLOR).addEventListener('keyup', optionsOther._onChangedHexColor); + document.getElementById(element.RESTORE_BACKGROUND_COLOR).addEventListener('click', optionsOther._setDefaultColor); + document.getElementById(element.RESTORE_TEXT_COLOR).addEventListener('click', optionsOther._setDefaultColor); + + optionsOther._colorPicker(element); }; optionsOther._renderStorageSection = function (opt) { @@ -79,6 +88,7 @@ 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; }; optionsOther._preSelectStorage = function (type) { @@ -100,63 +110,71 @@ optionsOther._onStorageOptionChanged = function ({target}) { } }; -optionsOther._colorPicker = function () { +optionsOther._colorPicker = function (element) { /* eslint-disable no-undef, no-invalid-this */ - const badgeBackgroundColor = new CP(document.getElementById('badged-background-color')); + const badgeBackgroundColor = new CP(document.getElementById(element.BADGED_BACKGROUND_COLOR)); badgeBackgroundColor.on('change', function (r, g, b) { this.source.value = this.color(r, g, b); }); badgeBackgroundColor.on('drag', function (r, g, b) { - options._backgroundColor = this.color(r, g, b); - this.source.value = options._backgroundColor; - wrappers.setBadgeBackgroundColor({'color': options._backgroundColor}); - document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor; - document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor; + let bgColor = this.color(r, g, b); + wrappers.setBadgeBackgroundColor({'color': bgColor, 'type': element.TYPE}); + this.source.value = bgColor; + document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor; + document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor; }); - const badgeTextColor = new CP(document.getElementById('badged-text-color')); - badgeTextColor.on('change', function (r, g, b) { + const badgeDefaultTextColor = new CP(document.getElementById(element.BADGED_TEXT_COLOR)); + badgeDefaultTextColor.on('change', function (r, g, b) { this.source.value = this.color(r, g, b); }); - badgeTextColor.on('drag', function (r, g, b) { - options._textColor = this.color(r, g, b); - this.source.value = options._textColor; - wrappers.setBadgeTextColor({'color': options._textColor}); - document.getElementById('counter-preview-badge').style.color = options._textColor; - document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor; + badgeDefaultTextColor.on('drag', function (r, g, b) { + let txtColor = this.color(r, g, b); + wrappers.setBadgeTextColor({'color': txtColor, 'type': element.TYPE}); + this.source.value = txtColor; + document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor; + document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor; }); /* eslint-enable no-undef, no-invalid-this */ }; optionsOther._setDefaultColor = function ({target}) { - if (target.id === 'restore-text-color') { - options._textColor = '#FFFFFF'; - wrappers.setBadgeTextColor({'color': options._textColor}); - document.getElementById('counter-preview-badge').style.color = options._textColor; - document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor; - document.getElementById('badged-text-color').value = options._textColor; + let element; + if (target.id === 'restore-text-color' || target.id === 'restore-background-color') { + element = BadgeSetting; + } else { + element = BadgeSettingHTMLFilter; + } + if (target.id === element.RESTORE_TEXT_COLOR) { + let txtColor = '#FFFFFF'; + 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') { - options._backgroundColor = '#4A826C'; - wrappers.setBadgeBackgroundColor({'color': options._backgroundColor}); - document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor; - document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor; - document.getElementById('badged-background-color').value = options._backgroundColor; + let bgColor = '#4A826C'; + 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; } }; optionsOther._onChangedHexColor = function ({target}) { + let element; + if (target.id === 'badged-text-color' || target.id === 'badged-background-color') { + element = BadgeSetting; + } else { + element = BadgeSettingHTMLFilter; + } if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) { target.classList.remove('color-error'); - if (target.id === 'badged-text-color') { - options._textColor = target.value; - wrappers.setBadgeTextColor({'color': options._textColor}); - document.getElementById('counter-preview-badge').style.color = options._textColor; - document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor; + 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 { - options._backgroundColor = target.value; - wrappers.setBadgeBackgroundColor({'color': options._backgroundColor}); - document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor; - document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor; + let bgColor = target.value; + document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor; + document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor; } } else { target.classList.add('color-error'); @@ -174,6 +192,12 @@ optionsOther.init = function (opt) { optionsOther._renderIconSection(opt); optionsOther._renderStorageSection(opt); + + document.getElementById('badged-background-color').addEventListener('change', options.onOptionChanged); + document.getElementById('badged-text-color').addEventListener('change', options.onOptionChanged); + + document.getElementById('html-badged-background-color').addEventListener('change', options.onOptionChanged); + document.getElementById('html-badged-text-color').addEventListener('change', options.onOptionChanged); }; optionsOther._platformSupportIcons = true; diff --git a/pages/options/options.css b/pages/options/options.css index 3b647671..84e7739b 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -69,7 +69,7 @@ body { .div-selected-icon { margin-top: 10px; - min-width: 113px; + width: 100%; padding-right: 25px; } @@ -183,21 +183,20 @@ body { .div-icons-badge-colors { display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; } .div-badge { - border-left: 1px solid #bbb; margin-top: 10px; - padding-left: 30px; + padding: 0 30px 0 0; } -#badge-preview-top { +#badge-preview-top, #html-badge-preview-top { position: relative; width: 38px; } -#counter-preview-badge { +#counter-preview-badge, #html-counter-preview-badge { background: black; border-radius: 5px; color: white; @@ -208,13 +207,14 @@ body { top: 0; } -#pre-badged-background-color, #pre-badged-text-color { +#pre-badged-background-color, #pre-badged-text-color, +#html-pre-badged-background-color, #html-pre-badged-text-color { height: 30px; margin-right: 5px; width: 30px; } -#icon-badge-preview { +#icon-badge-preview, #html-icon-badge-preview { margin-top: 5px; } @@ -237,7 +237,8 @@ div[class="color-picker:a"] { color: red; } -#badged-background-color, #badged-text-color { +#badged-background-color, #badged-text-color, +#html-badged-background-color, #html-badged-text-color { max-width: 150px; } @@ -393,21 +394,16 @@ body[dir="rtl"] .input-text { padding-bottom: 0.5rem; } -@media only screen and (max-width: 500px) { - .option-group { - padding: 0.7rem; - } -} - -@media only screen and (max-width: 435px) { - .div-icons-badge-colors { - flex-wrap: wrap; - } - +@media only screen and (max-width: 760px) { .div-badge { border: none; padding-left: 0; - width: 100%; + } +} + +@media only screen and (max-width: 500px) { + .option-group { + padding: 0.7rem; } } diff --git a/pages/options/options.html b/pages/options/options.html index c1718156..bc9471e0 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -271,6 +271,7 @@
+

Default

Default @@ -280,11 +281,30 @@
-
+
- + +
+
+
+
+

HTML filter enabled

+
+
+ Default +
17
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/options/options.js b/pages/options/options.js index 2d81ee1a..d084c4b4 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -84,8 +84,10 @@ options._renderOptionsPanel = function () { other = { 'selectedIcon': options._optionValues.selectedIcon, - 'badgeColor': options._optionValues.badgeColor, - 'badgeTextColor': options._optionValues.badgeTextColor, + 'badgeDefaultBackgroundColor': options._optionValues.badgeDefaultBackgroundColor, + 'badgeDefaultTextColor': options._optionValues.badgeDefaultTextColor, + 'badgeHTMLFilterBackgroundColor': options._optionValues.badgeHTMLFilterBackgroundColor, + 'badgeHTMLfilterTextColor': options._optionValues.badgeHTMLfilterTextColor, 'storageType': options._optionValues.storageType }; diff --git a/pages/updates/updates.html b/pages/updates/updates.html index 70d1b016..744b0be9 100644 --- a/pages/updates/updates.html +++ b/pages/updates/updates.html @@ -71,6 +71,7 @@
  • Examples for the allow list Google Fonts(#585)
  • Unused permission removed (#612)
  • Wildcard support for Google Fonts and HTML filter list (#613)
    • +
  • Customizable badge as HTML filter indicator (#613)