From 7f9c01d38f67789c880b1ce3e702c6b0306d02bb Mon Sep 17 00:00:00 2001 From: gorhill Date: Fri, 1 Jul 2016 08:09:48 -0400 Subject: [PATCH] fix https://github.com/gorhill/uBlock/issues/769#issuecomment-229873048 and more completely #762 + dom inspector regressions --- src/js/contentscript.js | 48 ++++++++++++++++++++++-------- src/js/scriptlets/cosmetic-off.js | 17 +---------- src/js/scriptlets/cosmetic-on.js | 17 +---------- src/js/scriptlets/dom-inspector.js | 44 +++++++-------------------- 4 files changed, 48 insertions(+), 78 deletions(-) diff --git a/src/js/contentscript.js b/src/js/contentscript.js index 181271a4e..0eaa7b2db 100644 --- a/src/js/contentscript.js +++ b/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 ) { - if ( shadow.className !== this.shadowId ) { - node.style.setProperty('display', 'none', 'important'); - } else if ( shadow.firstElementChild !== null ) { + var shadow = node.shadowRoot; + if ( shadow ) { + if ( shadow.className === this.shadowId && 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); + } + }, }; diff --git a/src/js/scriptlets/cosmetic-off.js b/src/js/scriptlets/cosmetic-off.js index 80c5cfd9f..02557e8be 100644 --- a/src/js/scriptlets/cosmetic-off.js +++ b/src/js/scriptlets/cosmetic-off.js @@ -47,22 +47,7 @@ } i = elems.length; while ( i-- ) { - var elem = 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.showNode(elems[i]); } vAPI.domFilterer.toggleOff(); diff --git a/src/js/scriptlets/cosmetic-on.js b/src/js/scriptlets/cosmetic-on.js index 7f2314a00..3a5eea1a0 100644 --- a/src/js/scriptlets/cosmetic-on.js +++ b/src/js/scriptlets/cosmetic-on.js @@ -47,22 +47,7 @@ } i = elems.length; while ( i-- ) { - var elem = 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.unshowNode(elems[i]); } vAPI.domFilterer.toggleOn(); diff --git a/src/js/scriptlets/dom-inspector.js b/src/js/scriptlets/dom-inspector.js index 1d680679f..b58a45fa6 100644 --- a/src/js/scriptlets/dom-inspector.js +++ b/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 + ')'; - nodes = document.querySelectorAll(entries.a); + selector = entry.a + ':has(' + entry.b + ')'; + 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; - if ( shadow === undefined ) { - if ( !v1 ) { - node.style.removeProperty('display'); - } else { - node.style.setProperty('display', v1, v2); - } - } else if ( shadow !== null && shadow.className === shadowId && shadow.firstElementChild === null ) { - shadow.appendChild(document.createElement('content')); + vAPI.domFilterer.showNode(node); + if ( !v1 ) { + node.style.removeProperty('display'); + } else { + node.style.setProperty('display', v1, v2); } }; /******************************************************************************/ var hideNode = function(node) { - var shadow = node.shadowRoot; - 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; + vAPI.domFilterer.unshowNode(node); }; /******************************************************************************/