improve element hiding empty check to avoid potentially hiding visible content

Author: dharb

src/features/element-hiding.js

@@ -137,17 +137,27 @@ function isDomNodeEmpty (node) {
     })
 
     const visibleText = parsedNode.innerText.trim().toLocaleLowerCase().replace(/:$/, '')
-    const mediaContent = parsedNode.querySelector('video,canvas,picture')
+    const mediaContent = parsedNode.querySelector('video,canvas,embed,object,audio,map')
+    const formContent = parsedNode.querySelector('form,input,textarea,select,option,button')
     const frameElements = [...parsedNode.querySelectorAll('iframe')]
+    // query original node instead of parsedNode for img elements since heuristic relies
+    // on size of image elements
+    const imageElements = [...node.querySelectorAll('img,svg')]
     // about:blank iframes don't count as content, return true if:
     // - node doesn't contain any iframes
     // - node contains iframes, all of which are hidden or have src='about:blank'
     const noFramesWithContent = frameElements.every((frame) => {
         return (frame.hidden || frame.src === 'about:blank')
     })
+    // ad containers often contain tracking pixels and other small images (eg adchoices logo).
+    // these should be treated as empty and hidden, but real images should not.
+    const visibleImages = imageElements.some((image) => {
+        return (image.getBoundingClientRect().width > 20 || image.getBoundingClientRect().height > 20)
+    })
 
     if ((visibleText === '' || adLabelStrings.includes(visibleText)) &&
-        noFramesWithContent && mediaContent === null) {
+        mediaContent === null && formContent === null &&
+        noFramesWithContent && !visibleImages) {
         return true
     }
     return false
@@ -224,7 +234,9 @@ function extractTimeoutRules (rules) {
  * @param {string} rules[].type
  */
 function injectStyleTag (rules) {
-    const styleTag = document.createElement('style')
+    const styleTag = document.createElement('link')
+    styleTag.setAttribute('rel', 'stylesheet')
+    styleTag.setAttribute('type', 'text/css')
     let styleTagContents = ''
 
     rules.forEach((rule, i) => {
@@ -236,7 +248,7 @@ function injectStyleTag (rules) {
     })
 
     styleTagContents = styleTagContents.concat('{display:none!important;min-height:0!important;height:0!important;}')
-    styleTag.innerText = styleTagContents
+    styleTag.href = 'data:text/css,' + encodeURIComponent(styleTagContents)
 
     document.head.appendChild(styleTag)
 }