From fc134259e84787a2f9e9c85cad8af5e982260e91 Mon Sep 17 00:00:00 2001 From: nobody Date: Thu, 13 Jul 2023 09:07:02 +0200 Subject: [PATCH] Popup extended (#1481) --- core/interceptor.js | 9 ++++++--- core/messenger.js | 6 +++++- core/state-manager.js | 2 +- pages/popup/popup.css | 4 ++-- pages/popup/popup.js | 36 ++++++++++++++++++++++++++++++++++-- 5 files changed, 48 insertions(+), 9 deletions(-) diff --git a/core/interceptor.js b/core/interceptor.js index 32bbb224..83fec9f3 100644 --- a/core/interceptor.js +++ b/core/interceptor.js @@ -136,10 +136,13 @@ interceptor._handleMissingCandidate = function (requestUrl, tabIdentifier) { if (stateManager.showIconBadge === true) { injectionCount = Object.keys(stateManager.tabs[tabIdentifier].injections).length || 0; + missingCount = stateManager.tabs[tabIdentifier].missing || 0; + blockedCount = stateManager.tabs[tabIdentifier].blocked || 0; + + injectionCount = injectionCount + missingCount + blockedCount; + if (stateManager.changeBadgeColorMissingResources === true) { - missingCount = stateManager.tabs[tabIdentifier].missing || 0; - blockedCount = stateManager.tabs[tabIdentifier].blocked || 0; - if ((missingCount > 0 || blockedCount > 0) && injectionCount === 0) { + if (injectionCount === 0) { wrappers.setBadgeText(tabIdentifier, injectionCount); wrappers.setBadgeColoring(tabIdentifier, BadgeSettingMissingResource.TYPE); } diff --git a/core/messenger.js b/core/messenger.js index 969bf217..39c0380b 100644 --- a/core/messenger.js +++ b/core/messenger.js @@ -41,7 +41,11 @@ messenger._handleMessageReceived = function (message, sender, sendResponse) { switch (topic) { case 'tab:fetch-injections': - sendResponse({'value': stateManager.tabs[value].injections}); + sendResponse({'value': { + 'injections': stateManager.tabs[value].injections, + 'blockedCounter': stateManager.tabs[value].blocked, + 'missingCounter': stateManager.tabs[value].missing + }}); return MessageResponse.SYNCHRONOUS; case 'tab:inject': diff --git a/core/state-manager.js b/core/state-manager.js index be1710a4..770745b4 100644 --- a/core/state-manager.js +++ b/core/state-manager.js @@ -65,7 +65,7 @@ stateManager.registerInjection = function (tabIdentifier, injection, url) { } else { wrappers.setBadgeColoring(tabIdentifier, BadgeSetting.TYPE); } - wrappers.setBadgeText(tabIdentifier, injectionCount); + wrappers.setBadgeText(tabIdentifier, (injectionCount + missingCount + blockedCount)); } if (isNaN(storageManager.amountInjected)) { storageManager.type.get(Setting.AMOUNT_INJECTED, function (items) { diff --git a/pages/popup/popup.css b/pages/popup/popup.css index 8a93b06a..4808fd24 100644 --- a/pages/popup/popup.css +++ b/pages/popup/popup.css @@ -48,7 +48,7 @@ header { .panel-overflow { margin-left: 0; - max-height: 300px; + max-height: 285px; overflow: auto; padding-left: 0; } @@ -284,7 +284,7 @@ footer { } .counter { - font-size: 36px; + font-size: 26px; font-weight: 600; margin-top: 4px; text-align: center; diff --git a/pages/popup/popup.js b/pages/popup/popup.js index 5cff400f..f968612a 100644 --- a/pages/popup/popup.js +++ b/pages/popup/popup.js @@ -90,12 +90,17 @@ popup._renderNonContextualContents = function () { }; popup._renderContextualContents = function () { + let isVisible = false; if (popup._domain !== null) { popup._renderDomainAllowlistPanel(); document.getElementById('testing-utility-link').style.display = 'block'; } - if (Object.keys(popup._resourceInjections).length > 0) { + isVisible = Object.keys(popup._resourceInjections).length > 0 || + popup._blockedCounter > 0 || + popup._missingCounter > 0; + + if (isVisible) { popup._renderInjectionPanel(popup._resourceInjections); } }; @@ -166,7 +171,10 @@ popup._renderInjectionPanel = function (groupedInjections) { websiteContextElement = document.getElementById('website-context'); injectionOverviewElement = popup._createInjectionOverviewElement(groupedInjections); injectionOverviewElement.setAttribute('class', 'panel-overflow'); + websiteContextElement.append(injectionOverviewElement); + websiteContextElement.append(popup._renderBlockedAndMissingElementHeader(popup._blockedCounter, 'Blocked')); + websiteContextElement.append(popup._renderBlockedAndMissingElementHeader(popup._missingCounter, 'Missing')); }; popup._enableProtection = function () { @@ -289,7 +297,10 @@ popup._determineResourceInjections = function () { }; chrome.runtime.sendMessage(message, function (response) { - let groupedInjections = popup._groupResourceInjections(response.value); + popup._blockedCounter = response.value.blockedCounter; + popup._missingCounter = response.value.missingCounter; + + let groupedInjections = popup._groupResourceInjections(response.value.injections); popup._resourceInjections = groupedInjections; resolve(); @@ -480,6 +491,25 @@ popup._renderLocaleNotice = function () { localeNoticeElement.appendChild(nameTextNode); }; +popup._renderBlockedAndMissingElementHeader = function (counter, type) { + let parent, typeElem, counterElem, typeElemTextNode, counterElemTextNode; + + parent = document.createElement('div'); + + typeElemTextNode = document.createTextNode(`${type}: `); + typeElem = document.createElement('span'); + typeElem.appendChild(typeElemTextNode); + + counterElemTextNode = document.createTextNode(counter); + counterElem = document.createElement('span'); + counterElem.appendChild(counterElemTextNode); + + parent.appendChild(typeElem); + parent.appendChild(counterElem); + + return parent; +}; + /** * Event Handlers @@ -623,5 +653,7 @@ popup.negateHtmlFilterList = true; popup._statisticsStatus = false; popup._loggingStatus = false; popup._blockGoogleFonts = true; +popup._blockedCounter = 0; +popup._missingCounter = 0; document.addEventListener('DOMContentLoaded', popup._onDocumentLoaded);