fix https://github.com/gorhill/uBlock/issues/769#issuecomment-229873048 and more completely #762 + dom inspector regressions

src/js/contentscript.js

@@ -387,13 +387,18 @@ vAPI.domFilterer = {
         return function(node) {
             this.hiddenNodeCount += 1;
             node.setAttribute(this.hiddenId, '');
-            var shadow = node.shadowRoot;
+            if ( this.enabled === false ) {
+                return;
+            }
+            // https://github.com/gorhill/uBlock/issues/762
+            // https://github.com/gorhill/uBlock/issues/769#issuecomment-229873048
+            // Always enforce `display: none`.
+            node.style.setProperty('display', 'none', 'important');
             // https://www.chromestatus.com/features/4668884095336448
             // "Multiple shadow roots is being deprecated."
-            if ( shadow !== null ) {
+            var shadow = node.shadowRoot;
-                if ( shadow.className !== this.shadowId ) {
+            if ( shadow ) {
-                    node.style.setProperty('display', 'none', 'important');
+                if ( shadow.className === this.shadowId && shadow.firstElementChild !== null ) {
-                } else if ( shadow.firstElementChild !== null ) {
                     shadow.removeChild(shadow.firstElementChild);
                 }
                 return;
@@ -401,19 +406,25 @@ vAPI.domFilterer = {
             // https://github.com/gorhill/uBlock/pull/555
             // Not all nodes can be shadowed:
             //   https://github.com/w3c/webcomponents/issues/102
-            // https://github.com/gorhill/uBlock/issues/762
-            // Remove display style that might get in the way of the shadow
-            // node doing its magic.
             try {
                 shadow = node.createShadowRoot();
                 shadow.className = this.shadowId;
-                node.style.removeProperty('display');
             } catch (ex) {
-                node.style.setProperty('display', 'none', 'important');
             }
         };
     })(),
 
+    showNode: function(node) {
+        node.style.removeProperty('display');
+        var shadow = node.shadowRoot;
+        if ( shadow && shadow.className === this.shadowId ) {
+            if ( shadow.firstElementChild !== null ) {
+                shadow.removeChild(shadow.firstElementChild);
+            }
+            shadow.appendChild(document.createElement('content'));
+        }
+    },
+
     toggleOff: function() {
         this.enabled = false;
     },
@@ -425,16 +436,27 @@ vAPI.domFilterer = {
     unhideNode: function(node) {
         this.hiddenNodeCount--;
         node.removeAttribute(this.hiddenId);
+        node.style.removeProperty('display');
         var shadow = node.shadowRoot;
         if ( shadow && shadow.className === this.shadowId ) {
             if ( shadow.firstElementChild !== null ) {
                 shadow.removeChild(shadow.firstElementChild);
             }
             shadow.appendChild(document.createElement('content'));
-        } else {
-            node.style.removeProperty('display');
         }
-    }
+    },
+
+    unshowNode: function(node) {
+        node.style.setProperty('display', 'none', 'important');
+        var shadow = node.shadowRoot;
+        if (
+            shadow &&
+            shadow.className === this.shadowId &&
+            shadow.firstElementChild !== null
+        ) {
+            shadow.removeChild(shadow.firstElementChild);
+        }
+    },
 };
 
 

src/js/scriptlets/cosmetic-off.js

@@ -47,22 +47,7 @@
     }
     i = elems.length;
     while ( i-- ) {
-        var elem = elems[i];
+        vAPI.domFilterer.showNode(elems[i]);
-        var shadow = elem.shadowRoot;
-        if ( shadow === undefined ) {
-            style = elem.style;
-            if ( typeof style === 'object' || typeof style.removeProperty === 'function' ) {
-                style.removeProperty('display');
-            }
-            continue;
-        }
-        if (
-            shadow !== null &&
-            shadow.className === vAPI.domFilterer.shadowId &&
-            shadow.firstElementChild === null
-        ) {
-            shadow.appendChild(document.createElement('content'));
-        }
     }
 
     vAPI.domFilterer.toggleOff();

src/js/scriptlets/cosmetic-on.js

@@ -47,22 +47,7 @@
     }
     i = elems.length;
     while ( i-- ) {
-        var elem = elems[i];
+        vAPI.domFilterer.unshowNode(elems[i]);
-        var shadow = elem.shadowRoot;
-        if ( shadow === undefined ) {
-            style = elems[i].style;
-            if ( typeof style === 'object' || typeof style.removeProperty === 'function' ) {
-                style.setProperty('display', 'none', 'important');
-            }
-            continue;
-        }
-        if (
-            shadow !== null &&
-            shadow.className === vAPI.domFilterer.shadowId &&
-            shadow.firstElementChild !== null
-        ) {
-            shadow.removeChild(shadow.firstElementChild);
-        }
     }
 
     vAPI.domFilterer.toggleOn();

src/js/scriptlets/dom-inspector.js

@@ -35,7 +35,6 @@ if ( typeof vAPI !== 'object' || typeof vAPI.domFilterer !== 'object' ) {
 /******************************************************************************/
 
 var sessionId = vAPI.sessionId;
-var shadowId = vAPI.domFilterer.shadowId;
 
 if ( document.querySelector('iframe.dom-inspector.' + sessionId) !== null ) {
     return;
@@ -736,7 +735,7 @@ var cosmeticFilterMapper = (function() {
         i = entries.length;
         while ( i-- ) {
             entry = entries[i];
-            selector = entries.a + ':has(' + entries.b + ')';
+            selector = entry.a + ':has(' + entry.b + ')';
             if (
                 filterMap.has(rootNode) === false &&
                 rootNode[matchesFnName](entry.a) &&
@@ -744,7 +743,7 @@ var cosmeticFilterMapper = (function() {
             ) {
                 filterMap.set(rootNode, selector);
             }
-            nodes = rootNode.querySelectorAll(entries.a);
+            nodes = rootNode.querySelectorAll(entry.a);
             j = nodes.length;
             while ( j-- ) {
                 node = nodes[j];
@@ -762,8 +761,8 @@ var cosmeticFilterMapper = (function() {
         i = entries.length;
         while ( i-- ) {
             entry = entries[i];
-            selector = entries.a + ':has(' + entries.b + ')';
+            selector = entry.a + ':has(' + entry.b + ')';
-            nodes = document.querySelectorAll(entries.a);
+            nodes = document.querySelectorAll(entry.a);
             j = nodes.length;
             while ( j-- ) {
                 node = nodes[j];
@@ -864,7 +863,7 @@ var elementsFromSpecialSelector = function(selector) {
     var out = [], i;
     var matches = /^(.+?):has\((.+?)\)$/.exec(selector);
     if ( matches !== null ) {
-        var nodes = document.querySelector(matches[1]);
+        var nodes = document.querySelectorAll(matches[1]);
         i = nodes.length;
         while ( i-- ) {
             var node = nodes[i];
@@ -1086,39 +1085,18 @@ var toggleNodes = function(nodes, originalState, targetState) {
 /******************************************************************************/
 
 var showNode = function(node, v1, v2) {
-    var shadow = node.shadowRoot;
+    vAPI.domFilterer.showNode(node);
-    if ( shadow === undefined ) {
+    if ( !v1 ) {
-        if ( !v1 ) {
+        node.style.removeProperty('display');
-            node.style.removeProperty('display');
+    } else {
-        } else {
+        node.style.setProperty('display', v1, v2);
-            node.style.setProperty('display', v1, v2);
-        }
-    } else if ( shadow !== null && shadow.className === shadowId && shadow.firstElementChild === null ) {
-        shadow.appendChild(document.createElement('content'));
     }
 };
 
 /******************************************************************************/
 
 var hideNode = function(node) {
-    var shadow = node.shadowRoot;
+    vAPI.domFilterer.unshowNode(node);
-    if ( shadow === undefined ) {
-        node.style.setProperty('display', 'none', 'important');
-        return;
-    }
-    if ( shadow !== null && shadow.className === shadowId ) {
-        if ( shadow.firstElementChild !== null ) {
-            shadow.removeChild(shadow.firstElementChild);
-        }
-        return;
-    }
-    // not all nodes can be shadowed
-    try {
-        shadow = node.createShadowRoot();
-    } catch (ex) {
-        return;
-    }
-    shadow.className = shadowId;
 };
 
 /******************************************************************************/