Popup extended (#1481)

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;
+            if (injectionCount === 0) {
-            blockedCount = stateManager.tabs[tabIdentifier].blocked || 0;
-            if ((missingCount > 0 || blockedCount > 0) && injectionCount === 0) {
                 wrappers.setBadgeText(tabIdentifier, injectionCount);
                 wrappers.setBadgeColoring(tabIdentifier, BadgeSettingMissingResource.TYPE);
             }

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':

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) {

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;

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