Hide empty ad space improvements (#187)

* element hiding improvements
* stop storing any data on dom elements, refinements to hiding technique derived from extensive testing

Author: dharb

Sources/ContentScopeScripts/dist/contentScope.js

@@ -3812,78 +3812,229 @@
   });
 
   let adLabelStrings = [];
+  const parser = new DOMParser();
+  let hiddenElements = new WeakMap();
+  let appliedRules = new Set();
 
-  function collapseDomNode (element, type) {
+  /**
+   * Hide DOM element if rule conditions met
+   * @param {HTMLElement} element
+   * @param {Object} rule
+   * @param {HTMLElement} [previousElement]
+   */
+  function collapseDomNode (element, rule, previousElement) {
       if (!element) {
           return
       }
+      const type = rule.type;
+      const alreadyHidden = hiddenElements.has(element);
+
+      if (alreadyHidden) {
+          return
+      }
 
       switch (type) {
       case 'hide':
-          if (!element.hidden) {
-              hideNode(element);
-          }
+          hideNode(element);
           break
       case 'hide-empty':
-          if (!element.hidden && isDomNodeEmpty(element)) {
+          if (isDomNodeEmpty(element)) {
               hideNode(element);
+              appliedRules.add(rule);
           }
           break
       case 'closest-empty':
-          // if element already hidden, continue onto parent element
-          if (element.hidden) {
-              collapseDomNode(element.parentNode, type);
-              break
+          // hide the outermost empty node so that we may unhide if ad loads
+          if (isDomNodeEmpty(element)) {
+              collapseDomNode(element.parentNode, rule, element);
+          } else if (previousElement) {
+              hideNode(previousElement);
+              appliedRules.add(rule);
           }
+          break
+      }
+  }
 
-          if (isDomNodeEmpty(element)) {
-              hideNode(element);
-              collapseDomNode(element.parentNode, type);
+  /**
+   * Unhide previously hidden DOM element if content loaded into it
+   * @param {HTMLElement} element
+   * @param {Object} rule
+   * @param {HTMLElement} [previousElement]
+   */
+  function expandNonEmptyDomNode (element, rule, previousElement) {
+      if (!element) {
+          return
+      }
+      const type = rule.type;
+
+      const alreadyHidden = hiddenElements.has(element);
+
+      switch (type) {
+      case 'hide':
+          // only care about rule types that specifically apply to empty elements
+          break
+      case 'hide-empty':
+      case 'closest-empty':
+          if (alreadyHidden && !isDomNodeEmpty(element)) {
+              unhideNode(element);
+          } else if (type === 'closest-empty') {
+              // iterate upwards from matching DOM elements until we arrive at previously
+              // hidden element. Unhide element if it contains visible content.
+              expandNonEmptyDomNode(element.parentNode, rule);
           }
           break
-      default:
-          console.log(`Unsupported rule: ${type}`);
       }
   }
 
+  /**
+   * Hide DOM element
+   * @param {HTMLElement} element
+   */
   function hideNode (element) {
+      // maintain a reference to each hidden element along with the properties
+      // that are being overwritten
+      const cachedDisplayProperties = {
+          display: element.style.display,
+          'min-height': element.style.minHeight,
+          height: element.style.height
+      };
+      hiddenElements.set(element, cachedDisplayProperties);
+
+      // apply styles to hide element
       element.style.setProperty('display', 'none', 'important');
+      element.style.setProperty('min-height', '0px', 'important');
+      element.style.setProperty('height', '0px', 'important');
       element.hidden = true;
   }
 
+  /**
+   * Show previously hidden DOM element
+   * @param {HTMLElement} element
+   */
+  function unhideNode (element) {
+      const cachedDisplayProperties = hiddenElements.get(element);
+      if (!cachedDisplayProperties) {
+          return
+      }
+
+      for (const prop in cachedDisplayProperties) {
+          element.style.setProperty(prop, cachedDisplayProperties[prop]);
+      }
+      hiddenElements.delete(element);
+      element.hidden = false;
+  }
+
+  /**
+   * Check if DOM element contains visible content
+   * @param {HTMLElement} node
+   */
   function isDomNodeEmpty (node) {
-      const visibleText = node.innerText.trim().toLocaleLowerCase();
-      const mediaContent = node.querySelector('video,canvas');
-      const frameElements = [...node.querySelectorAll('iframe')];
+      // no sense wasting cycles checking if the page's body element is empty
+      if (node.tagName === 'BODY') {
+          return false
+      }
+      // use a DOMParser to remove all metadata elements before checking if
+      // the node is empty.
+      const parsedNode = parser.parseFromString(node.outerHTML, 'text/html').documentElement;
+      parsedNode.querySelectorAll('base,link,meta,script,style,template,title,desc').forEach((el) => {
+          el.remove();
+      });
+
+      const visibleText = parsedNode.innerText.trim().toLocaleLowerCase().replace(/:$/, '');
+      const mediaContent = parsedNode.querySelector('video,canvas,picture');
+      const frameElements = [...parsedNode.querySelectorAll('iframe')];
       // 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')
       });
+
       if ((visibleText === '' || adLabelStrings.includes(visibleText)) &&
           noFramesWithContent && mediaContent === null) {
           return true
       }
       return false
   }
 
-  function hideMatchingDomNodes (rules) {
+  /**
+   * Apply relevant hiding rules to page at set intervals
+   * @param {Object[]} rules
+   * @param {string} rules[].selector
+   * @param {string} rules[].type
+   */
+  function applyRules (rules) {
+      // several passes are made to hide & unhide elements. this is necessary because we're not using
+      // a mutation observer but we want to hide/unhide elements as soon as possible, and ads
+      // frequently take from several hundred milliseconds to several seconds to load
+      // check at 0ms, 100ms, 200ms, 300ms, 400ms, 500ms, 1000ms, 1500ms, 2000ms, 2500ms, 3000ms
+      hideAdNodes(rules);
+      let immediateHideIterations = 0;
+      const immediateHideInterval = setInterval(function () {
+          immediateHideIterations += 1;
+          if (immediateHideIterations === 4) {
+              clearInterval(immediateHideInterval);
+          }
+          hideAdNodes(rules);
+      }, 100);
+
+      let delayedHideIterations = 0;
+      const delayedHideInterval = setInterval(function () {
+          delayedHideIterations += 1;
+          if (delayedHideIterations === 4) {
+              clearInterval(delayedHideInterval);
+          }
+          hideAdNodes(rules);
+      }, 500);
+
+      // check previously hidden ad elements for contents, unhide if content has loaded after hiding.
+      // we do this in order to display non-tracking ads that aren't blocked at the request level
+      // check at 750ms, 1500ms, 2250ms, 3000ms
+      let unhideIterations = 0;
+      const unhideInterval = setInterval(function () {
+          unhideIterations += 1;
+          if (unhideIterations === 3) {
+              clearInterval(unhideInterval);
+          }
+          unhideLoadedAds();
+      }, 750);
+
+      // clear appliedRules and hiddenElements caches once all checks have run
+      setTimeout(function () {
+          appliedRules = new Set();
+          hiddenElements = new WeakMap();
+      }, 3100);
+  }
+
+  /**
+   * Apply list of active element hiding rules to page
+   * @param {Object[]} rules
+   * @param {string} rules[].selector
+   * @param {string} rules[].type
+   */
+  function hideAdNodes (rules) {
       const document = globalThis.document;
 
-      function hideMatchingNodesInner () {
-          rules.forEach((rule) => {
-              const matchingElementArray = [...document.querySelectorAll(rule.selector)];
-              matchingElementArray.forEach((element) => {
-                  collapseDomNode(element, rule.type);
-              });
+      rules.forEach((rule) => {
+          const matchingElementArray = [...document.querySelectorAll(rule.selector)];
+          matchingElementArray.forEach((element) => {
+              collapseDomNode(element, rule);
           });
-      }
-      // wait 300ms before hiding ad containers so ads have a chance to load
-      setTimeout(hideMatchingNodesInner, 300);
+      });
+  }
 
-      // handle any ad containers that weren't added to the page within 300ms of page load
-      setTimeout(hideMatchingNodesInner, 1000);
+  /**
+   * Iterate over previously hidden elements, unhiding if content has loaded into them
+   */
+  function unhideLoadedAds () {
+      const document = globalThis.document;
+
+      appliedRules.forEach((rule) => {
+          const matchingElementArray = [...document.querySelectorAll(rule.selector)];
+          matchingElementArray.forEach((element) => {
+              expandNonEmptyDomNode(element, rule);
+          });
+      });
   }
 
   function init$c (args) {
@@ -3918,26 +4069,23 @@
       // now have the final list of rules to apply, so we apply them when document is loaded
       if (document.readyState === 'loading') {
           window.addEventListener('DOMContentLoaded', (event) => {
-              hideMatchingDomNodes(activeRules);
+              applyRules(activeRules);
           });
       } else {
-          hideMatchingDomNodes(activeRules);
+          applyRules(activeRules);
       }
       // single page applications don't have a DOMContentLoaded event on navigations, so
-      // we use proxy/reflect on history.pushState and history.replaceState to call hideMatchingDomNodes
-      // on page navigations, and listen for popstate events that indicate a back/forward navigation
-      const methods = ['pushState', 'replaceState'];
-      for (const methodName of methods) {
-          const historyMethodProxy = new DDGProxy(featureName, History.prototype, methodName, {
-              apply (target, thisArg, args) {
-                  hideMatchingDomNodes(activeRules);
-                  return DDGReflect.apply(target, thisArg, args)
-              }
-          });
-          historyMethodProxy.overload();
-      }
+      // we use proxy/reflect on history.pushState to call applyRules on page navigations
+      const historyMethodProxy = new DDGProxy(featureName, History.prototype, 'pushState', {
+          apply (target, thisArg, args) {
+              applyRules(activeRules);
+              return DDGReflect.apply(target, thisArg, args)
+          }
+      });
+      historyMethodProxy.overload();
+      // listen for popstate events in order to run on back/forward navigations
       window.addEventListener('popstate', (event) => {
-          hideMatchingDomNodes(activeRules);
+          applyRules(activeRules);
       });
   }