this fixes #7

_locales/de/messages.json

@@ -43,6 +43,10 @@
     },
 
 
+    "settingsCollapseBlockedPrompt" : {
+        "message": "Hide placeholders of blocked elements",
+        "description": "English: Hide placeholders of blocked elements"
+    },
     "settingsIconBadgePrompt" : {
         "message": "Zeige die Zahl der blockierten Anforderungen auf dem Icon",
         "description": "English: Show the number of blocked requests on the icon"

_locales/en/messages.json

@@ -43,6 +43,10 @@
     },
 
 
+    "settingsCollapseBlockedPrompt" : {
+        "message": "Hide placeholders of blocked elements",
+        "description": "English: Hide placeholders of blocked elements"
+    },
     "settingsIconBadgePrompt" : {
         "message": "Show the number of blocked requests on the icon",
         "description": "English: Show the number of blocked requests on the icon"

_locales/fr/messages.json

@@ -43,6 +43,10 @@
     },
 
 
+    "settingsCollapseBlockedPrompt" : {
+        "message": "Cacher les espaces réservés des éléments bloqués",
+        "description": "English: Hide placeholders of blocked elements"
+    },
     "settingsIconBadgePrompt" : {
         "message": "Afficher le nombre de requêtes bloquées sur l'icône",
         "description": "English: Show the number of blocked requests on the icon"

_locales/ru/messages.json

@@ -43,6 +43,10 @@
     },
 
 
+    "settingsCollapseBlockedPrompt" : {
+        "message": "Hide placeholders of blocked elements",
+        "description": "English: Hide placeholders of blocked elements"
+    },
     "settingsIconBadgePrompt" : {
         "message": "Show the number of blocked requests on the icon",
         "description": "English: Show the number of blocked requests on the icon"

_locales/zh_CN/messages.json

@@ -43,6 +43,10 @@
     },
 
 
+    "settingsCollapseBlockedPrompt" : {
+        "message": "Hide placeholders of blocked elements",
+        "description": "English: Hide placeholders of blocked elements"
+    },
     "settingsIconBadgePrompt" : {
         "message": "Show the number of blocked requests on the icon",
         "description": "English: Show the number of blocked requests on the icon"

background.html

@@ -21,9 +21,9 @@
 <script src="js/profiler.js"></script>
 <script src="js/storage.js"></script>
 <script src="js/pagestore.js"></script>
+<script src="js/uritools.js"></script>
 <script src="js/tab.js"></script>
 <script src="js/traffic.js"></script>
-<script src="js/uritools.js"></script>
 <script src="js/messaging-handlers.js"></script>
 <script src="js/start.js"></script>
 </body>

js/background.js

@@ -31,9 +31,10 @@ return {
     manifest: chrome.runtime.getManifest(),
 
     userSettings: {
-        showIconBadge: true,
+        collapseBlocked: true,
         parseAllABPHideFilters: true,
-        netExceptionList: {}
+        netExceptionList: {},
+        showIconBadge: true
     },
     localSettings: {
         blockedRequestCount: 0,

js/contentscript-end.js

@@ -335,13 +335,60 @@ var cosmeticFiltering = new CosmeticFiltering();
 
 /******************************************************************************/
 
+// https://github.com/gorhill/uBlock/issues/7
+
+var hideBlockedElements = function(elems, details) {
+    var blockedRequests = details.blockedRequests;
+    var collapse = details.collapse;
+    var i = elems.length;
+    var elem;
+    while ( i-- ) {
+        elem = elems[i];
+        if ( !elem.src ) {
+            continue;
+        }
+        if ( blockedRequests[elem.src] ) {
+            elem.style.visibility = 'hidden';
+            if ( collapse ) {
+                elem.style.width = '0';
+                elem.style.height = '0';
+            }
+        }
+    }
+};
+
+var hideBlockedElementAddedNodes = function(nodes) {
+    var onBlockedRequestsReceived = function(details) {
+        hideBlockedElements(nodes, details);
+        var i = nodes.length;
+        var elem;
+        while ( i-- ) {
+            elem = nodes[i];
+            if ( elem.querySelectorAll ) {
+                hideBlockedElements(elem.querySelectorAll('img,iframe'), details);
+            }
+        }
+    };
+    messaging.ask({ what: 'blockedRequests' }, onBlockedRequestsReceived);
+};
+
+(function() {
+    var onBlockedRequestsReceived = function(details) {
+        hideBlockedElements(document.querySelectorAll('img,iframe'), details);
+    };
+    messaging.ask({ what: 'blockedRequests' }, onBlockedRequestsReceived);
+})();
+
+/******************************************************************************/
+
 var mutationObservedHandler = function(mutations) {
     var iMutation = mutations.length;
     var mutation;
     while ( iMutation-- ) {
         mutation = mutations[iMutation];
         if ( mutation.addedNodes ) {
             cosmeticFiltering.allFromNodeList(mutation.addedNodes);
+            hideBlockedElementAddedNodes(mutation.addedNodes);
         }
     }
 
@@ -364,8 +411,12 @@ if ( /^https?:\/\/./.test(window.location.href) === false ) {
     return;
 }
 
+/******************************************************************************/
+
 cosmeticFiltering.onDOMContentLoaded();
 
+/******************************************************************************/
+
 // Observe changes in the DOM
 
 // This fixes http://acid3.acidtests.org/

js/messaging-handlers.js

@@ -90,7 +90,7 @@ var onMessage = function(request, sender, callback) {
 
 /******************************************************************************/
 
-// content scripts
+// contentscript-start.js
 
 (function() {
 
@@ -115,18 +115,58 @@ var onMessage = function(request, sender, callback) {
             response = µBlock.abpHideFilters.retrieveDomainSelectors(tabHostname, request);
             break;
 
+        default:
+            return µBlock.messaging.defaultHandler(request, sender, callback);
+    }
+
+    callback(response);
+};
+
+µBlock.messaging.listen('contentscript-start.js', onMessage);
+
+})();
+
+/******************************************************************************/
+
+// contentscript-end.js
+
+(function() {
+
+var onMessage = function(request, sender, callback) {
+    // Async
+    switch ( request.what ) {
+        default:
+            break;
+    }
+
+    // Sync
+    var response;
+
+    var pageStore;
+    if ( sender && sender.tab ) {
+        pageStore = µBlock.pageStoreFromTabId(sender.tab.id);
+    }
+    var tabHostname = pageStore ? pageStore.pageHostname : '';
+
+    switch ( request.what ) {
         case 'retrieveGenericCosmeticSelectors':
             response = µBlock.abpHideFilters.retrieveGenericSelectors(tabHostname, request);
             break;
 
+        case 'blockedRequests':
+            response = {
+                collapse: µBlock.userSettings.collapseBlocked,
+                blockedRequests: pageStore ? pageStore.blockedRequests : {}
+            }
+            break;
+
         default:
             return µBlock.messaging.defaultHandler(request, sender, callback);
     }
 
     callback(response);
 };
 
-µBlock.messaging.listen('contentscript-start.js', onMessage);
 µBlock.messaging.listen('contentscript-end.js', onMessage);
 
 })();

js/pagestore.js

@@ -59,6 +59,7 @@ function PageStore(tabId, pageURL) {
     this.pageDomain = '';
     this.perLoadBlockedRequestCount = 0;
     this.perLoadAllowedRequestCount = 0;
+    this.blockedRequests = {};
     this.disposeTime = 0;
     this.init(tabId, pageURL);
 }
@@ -72,6 +73,7 @@ PageStore.prototype.init = function(tabId, pageURL) {
     this.pageDomain = µb.URI.domainFromHostname(this.pageHostname);
     this.perLoadBlockedRequestCount = 0;
     this.perLoadAllowedRequestCount = 0;
+    this.blockedRequests = {};
     this.disposeTime = 0;
     return this;
 };
@@ -99,13 +101,18 @@ PageStore.prototype.recordRequest = function(type, url, block) {
     // the page is no longer visible in a browser tab.
     µb.updateBadge(this.tabId);
 
-    if ( block !== false ) {
-        this.perLoadBlockedRequestCount++;
-        µb.localSettings.blockedRequestCount++;
-    } else {
+    if ( block === false ) {
         this.perLoadAllowedRequestCount++;
         µb.localSettings.allowedRequestCount++;
+        return;
     }
+
+    this.perLoadBlockedRequestCount++;
+    µb.localSettings.blockedRequestCount++;
+
+    // https://github.com/gorhill/uBlock/issues/7
+    // https://github.com/gorhill/uBlock/issues/12
+    this.blockedRequests[url] = true;
 };
 
 /******************************************************************************/
@@ -117,6 +124,9 @@ PageStore.prototype.recordRequest = function(type, url, block) {
 // notifying me, and this causes internal cached state to be out of sync.
 
 PageStore.prototype.updateBadge = function() {
+    // https://github.com/gorhill/uBlock/issues/19
+    // TODO: need to check with µb object to see whether tab still exists.
+
     var netFilteringSwitch = µb.getNetFilteringSwitch(this.pageHostname);
     var iconPath = netFilteringSwitch ? 'img/browsericons/icon19.png' : 'img/browsericons/icon19-off.png';
 

js/settings.js

@@ -41,7 +41,15 @@ var changeUserSettings = function(name, value) {
 
 /******************************************************************************/
 
+// TODO: use data-* to declare simple settings
+
 var onUserSettingsReceived = function(details) {
+    $('#collapse-blocked')
+        .attr('checked', details.collapseBlocked === true)
+        .on('change', function(){
+            changeUserSettings('collapseBlocked', $(this).is(':checked'));
+        });
+
     $('#icon-badge')
         .attr('checked', details.showIconBadge === true)
         .on('change', function(){

js/tab.js

@@ -89,7 +89,7 @@
         return uri.normalizedURI();
     }
     return '';
-}
+};
 
 /******************************************************************************/
 

js/traffic.js

@@ -19,7 +19,6 @@
     Home: https://github.com/gorhill/uBlock
 */
 
-/* jshint multistr: true */
 /* global chrome, µBlock */
 
 /******************************************************************************/
@@ -50,8 +49,8 @@ var onBeforeRequestHandler = function(details) {
         return;
     }
 
-    var µburi = µb.URI;
-    var requestURL = µburi.set(details.url).normalizedURI();
+    var requestURL = details.url;
+    var µburi = µb.URI.set(details.url);
 
     // Ignore non-http schemes
     var requestScheme = µburi.scheme;
@@ -79,7 +78,9 @@ var onBeforeRequestHandler = function(details) {
 
     var reason = false;
     if ( µb.getNetFilteringSwitch(pageStore.pageHostname) ) {
+        //quickProfiler.start('abpFilters.matchString');
         reason = µb.abpFilters.matchString(pageStore, requestURL, requestType, requestHostname);
+        //quickProfiler.stop();
     }
     // Record what happened.
     if ( pageStore.recordRequest ) {

manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "__MSG_extName__",
     "short_name": "µBlock",
-    "version": "0.1.0.11",
+    "version": "0.1.0.12",
     "description": "__MSG_extShortDesc__",
     "icons": {
         "16": "img/icon_16.png",

settings.html

@@ -6,13 +6,18 @@
 <link rel="stylesheet" type="text/css" href="css/common.css">
 <link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
 <style>
+ul {
+    list-style-type: none;
+    }
 </style>
 </head>
 
 <body>
 
-<input id="icon-badge" type="checkbox"> <span data-i18n="settingsIconBadgePrompt"></span>
-
+<ul>
+    <li><input id="collapse-blocked" type="checkbox"> <span data-i18n="settingsCollapseBlockedPrompt"></span>
+    <li><input id="icon-badge" type="checkbox"> <span data-i18n="settingsIconBadgePrompt"></span>
+</ul>
 
 <script src="lib/jquery-2.min.js"></script>
 <script src="js/i18n.js"></script>