this fixes #820

src/css/popup.css

@@ -183,6 +183,9 @@ body.dirty #refresh:hover {
 #firewallContainer > div:hover {
     background-color: #f0f0f0;
     }
+#firewallContainer.minimized > div.isSubDomain {
+    display: none;
+    }
 #firewallContainer > div > span {
     background-color: transparent;
     border: none;
@@ -200,6 +203,9 @@ body.dirty #refresh:hover {
     height: 18px;
     line-height: 18px;
     }
+#firewallContainer > div:nth-of-type(1) > span:nth-of-type(1) {
+    cursor: pointer;
+    }
 #firewallContainer > div > span:nth-of-type(1) {
     border-right: 1px solid white;
     padding-right: 2px;
@@ -210,16 +216,26 @@ body.dirty #refresh:hover {
     cursor: pointer;
     width: 15%;
     }
-#firewallContainer > div > span:nth-of-type(3) {
+#firewallContainer > div > span:nth-of-type(3),
+#firewallContainer > div > span:nth-of-type(4) {
     border-left: 1px solid white;
     color: #444;
     cursor: pointer;
     text-align: center;
     width: 15%;
     }
+#firewallContainer > div > span:nth-of-type(4) {
+    display: none;
+    }
 #firewallContainer > div.isDomain > span:nth-of-type(1) {
     font-weight: bold;
     }
+#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) {
+    display: none;
+    }
+#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
+    display: inline-block;
+    }
 #firewallContainer > div.allowed > span:nth-of-type(1) {
     background-color: rgba(0, 160, 0, 0.1);
     }

src/js/background.js

@@ -61,6 +61,7 @@ return {
         dynamicFilteringEnabled: false,
         experimentalEnabled: false,
         externalLists: defaultExternalLists,
+        firewallPaneMinimized: false,
         parseAllABPHideFilters: true,
         showIconBadge: true
     },

src/js/messaging.js

@@ -110,9 +110,9 @@ var µb = µBlock;
 /******************************************************************************/
 
 var getHostnameDict = function(hostnameToCountMap) {
-    var r = {};
+    var r = {}, de;
     var domainFromHostname = µb.URI.domainFromHostname;
-    var domain, counts;
+    var domain, counts, blockCount, allowCount;
     for ( var hostname in hostnameToCountMap ) {
         if ( hostnameToCountMap.hasOwnProperty(hostname) === false ) {
             continue;
@@ -122,19 +122,31 @@ var getHostnameDict = function(hostnameToCountMap) {
         }
         domain = domainFromHostname(hostname) || hostname;
         counts = hostnameToCountMap[domain] || 0;
-        r[domain] = {
+        blockCount = counts & 0xFFFF;
-            domain: domain,
+        allowCount = counts >>> 16 & 0xFFFF;
-            blockCount: counts & 0xFFFF,
+        if ( r.hasOwnProperty(domain) === false ) {
-            allowCount: counts >>> 16 & 0xFFFF
+            de = r[domain] = {
-        };
+                domain: domain,
+                blockCount: blockCount,
+                allowCount: allowCount,
+                totalBlockCount: 0,
+                totalAllowCount: 0
+            };
+        } else {
+            de = r[domain];
+        }
+        counts = hostnameToCountMap[hostname] || 0;
+        blockCount = counts & 0xFFFF;
+        allowCount = counts >>> 16 & 0xFFFF;
+        de.totalBlockCount += blockCount;
+        de.totalAllowCount += allowCount;
         if ( hostname === domain ) {
             continue;
         }
-        counts = hostnameToCountMap[hostname] || 0;
         r[hostname] = {
             domain: domain,
-            blockCount: counts & 0xFFFF,
+            blockCount: blockCount,
-            allowCount: counts >>> 16 & 0xFFFF
+            allowCount: allowCount
         };
     }
     return r;
@@ -182,6 +194,7 @@ var getStats = function(tabId) {
         appVersion: vAPI.app.version,
         cosmeticFilteringSwitch: false,
         dfEnabled: µb.userSettings.dynamicFilteringEnabled,
+        firewallPaneMinimized: µb.userSettings.firewallPaneMinimized,
         globalAllowedRequestCount: µb.localSettings.allowedRequestCount,
         globalBlockedRequestCount: µb.localSettings.blockedRequestCount,
         netFilteringSwitch: false,

src/js/popup.js

@@ -152,7 +152,9 @@ var addFirewallRow = function(des) {
 
     var hnDetails = popupData.hostnameDict[des] || {};
 
-    row.toggleClass('isDomain', des === hnDetails.domain);
+    var isDomain = des === hnDetails.domain;
+    row.toggleClass('isDomain', isDomain);
+    row.toggleClass('isSubDomain', !isDomain);
     row.toggleClass('allowed', hnDetails.allowCount !== 0);
     row.toggleClass('blocked', hnDetails.blockCount !== 0);
     row.appendTo('#firewallContainer');
@@ -220,17 +222,34 @@ var updateFirewallCell = function(scope, des, type, rule) {
     var hnDetails = popupData.hostnameDict[des];
     var aCount = hnDetails.allowCount;
     var bCount = hnDetails.blockCount;
-    if ( aCount === 0 && bCount === 0 ) {
+    if ( aCount !== 0 || bCount !== 0 ) {
+        // https://github.com/gorhill/uBlock/issues/471
+        aCount = Math.min(Math.ceil(Math.log(aCount + 1) / Math.LN10), 3);
+        bCount = Math.min(Math.ceil(Math.log(bCount + 1) / Math.LN10), 3);
+        textNode.nodeValue = threePlus.slice(0, aCount) +
+                             sixSpace.slice(aCount + bCount) +
+                             threeMinus.slice(0, bCount);
+    } else {
         textNode.nodeValue = ' ';
+    }
+
+    if ( hnDetails.domain !== des ) {
         return;
     }
 
-    // https://github.com/gorhill/uBlock/issues/471
+    textNode = cell.nodeAt(1).firstChild;
-    aCount = Math.min(Math.ceil(Math.log(aCount + 1) / Math.LN10), 3);
+    aCount = hnDetails.totalAllowCount;
-    bCount = Math.min(Math.ceil(Math.log(bCount + 1) / Math.LN10), 3);
+    bCount = hnDetails.totalBlockCount;
-    textNode.nodeValue = threePlus.slice(0, aCount) +
+    if ( aCount !== 0 || bCount !== 0 ) {
-                         sixSpace.slice(aCount + bCount) +
+        // https://github.com/gorhill/uBlock/issues/471
-                         threeMinus.slice(0, bCount);
+        aCount = Math.min(Math.ceil(Math.log(aCount + 1) / Math.LN10), 3);
+        bCount = Math.min(Math.ceil(Math.log(bCount + 1) / Math.LN10), 3);
+        textNode.nodeValue = threePlus.slice(0, aCount) +
+                             sixSpace.slice(aCount + bCount) +
+                             threeMinus.slice(0, bCount);
+    } else {
+        textNode.nodeValue = ' ';
+    }
 };
 
 /******************************************************************************/
@@ -397,6 +416,7 @@ var renderPopup = function() {
     var dfPaneVisible = popupData.dfEnabled && popupData.advancedUserEnabled;
 
     uDom('#panes').toggleClass('dfEnabled', dfPaneVisible);
+    uDom('#firewallContainer').toggleClass('minimized', popupData.firewallPaneMinimized);
 
     // Build dynamic filtering pane only if in use
     if ( dfPaneVisible ) {
@@ -572,6 +592,19 @@ var reloadTab = function() {
 
 /******************************************************************************/
 
+var toggleMinimize = function() {
+    var elem = uDom('#firewallContainer');
+    elem.toggleClass('minimized');
+    popupData.firewallPaneMinimized = elem.hasClass('minimized');
+    messager.send({
+        what: 'userSettings',
+        name: 'firewallPaneMinimized',
+        value: popupData.firewallPaneMinimized
+    });
+};
+
+/******************************************************************************/
+
 var saveFirewallRules = function() {
     messager.send({
         what: 'saveFirewallRules',
@@ -658,6 +691,7 @@ uDom.onLoad(function() {
     uDom('h2').on('click', toggleFirewallPane);
     uDom('#refresh').on('click', reloadTab);
     uDom('#saveRules').on('click', saveFirewallRules);
+    uDom('[data-i18n="popupAnyRulePrompt"]').on('click', toggleMinimize);
 });
 
 /******************************************************************************/

src/popup.html

@@ -40,7 +40,7 @@
     </div>
 
 <div id="templates" style="display: none">
-    <div><span></span><span data-src="/" data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span></div>
+    <div><span></span><span data-src="/" data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span></div>
     <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
     <div id="hotspotTip"></div>
     </div>