Issue 5117 - Identify ElemHideEmulationFilters based on the filter text in the devtools panel

include.preload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2017 eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 169 matching lines @@
 function checkSitekey()
 {
   let attr = document.documentElement.getAttribute("data-adblockkey");
   if (attr)
     ext.backgroundPage.sendMessage({type: "filters.addKey", token: attr});
 }
 
 function ElementHidingTracer()
 {
   this.selectors = [];
-  this.filters = [];
-
   this.changedNodes = [];
   this.timeout = null;
-
   this.observer = new MutationObserver(this.observe.bind(this));
   this.trace = this.trace.bind(this);
 
   if (document.readyState == "loading")
     document.addEventListener("DOMContentLoaded", this.trace);
   else
     this.trace();
 }
 ElementHidingTracer.prototype = {
   addSelectors(selectors, filters)
   {
+    let pairs = selectors.map((sel, i) => [sel, filters && filters[i]]);
+
     if (document.readyState != "loading")
-      this.checkNodes([document], selectors, filters);
+      this.checkNodes([document], pairs);
 
-    this.selectors.push(...selectors);
-    this.filters.push(...filters);
+    this.selectors.push(...pairs);
   },
 
-  checkNodes(nodes, selectors, filters)
+  checkNodes(nodes, pairs)
   {
-    let matchedSelectors = [];
+    let selectors = [];
+    let filters = [];
 
-    for (let i = 0; i < selectors.length; i++)
+    for (let [selector, filter] of pairs)
     {
       nodes: for (let node of nodes)
       {
-        let elements = node.querySelectorAll(selectors[i]);
-
-        for (let element of elements)
+        for (let element of node.querySelectorAll(selector))
         {
           // Only consider selectors that actually have an effect on the
           // computed styles, and aren't overridden by rules with higher
           // priority, or haven't been circumvented in a different way.
           if (getComputedStyle(element).display == "none")
           {
-            matchedSelectors.push(filters[i].replace(/^.*?##/, ""));
+            // For regular element hiding, we don't know the exact filter,
+            // but the background page can find it with the given selector.
+            // In case of element hiding emulation, the generated selector
+            // we got here is different from the selector part of the filter,
+            // but in this case we can send the whole filter text instead.
+            if (filter)
+              filters.push(filter);
+            else
+              selectors.push(selector);
+
             break nodes;
           }
         }
       }
     }
 
-    if (matchedSelectors.length > 0)
+    if (selectors.length > 0 || filters.length > 0)
     {
       ext.backgroundPage.sendMessage({
         type: "devtools.traceElemHide",
-        selectors: matchedSelectors
+        selectors, filters
       });
     }
   },
 
   onTimeout()
   {
-    this.checkNodes(this.changedNodes, this.selectors, this.filters);
+    this.checkNodes(this.changedNodes, this.selectors);
     this.changedNodes = [];
     this.timeout = null;
   },
 
   observe(mutations)
   {
     // Forget previously changed nodes that are no longer in the DOM.
     for (let i = 0; i < this.changedNodes.length; i++)
     {
       if (!document.contains(this.changedNodes[i]))
@@ skipping 41 matching lines @@
 
     // Check only nodes whose descendants have changed, and not more often
     // than once a second. Otherwise large pages with a lot of DOM mutations
     // (like YouTube) freeze when the devtools panel is active.
     if (this.timeout == null)
       this.timeout = setTimeout(this.onTimeout.bind(this), 1000);
   },
 
   trace()
   {
-    this.checkNodes([document], this.selectors, this.filters);
+    this.checkNodes([document], this.selectors);
 
     this.observer.observe(
       document,
       {
         childList: true,
         attributes: true,
         subtree: true
       }
     );
   },
@@ skipping 210 matching lines @@
     for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
     {
       let selector = preparedSelectors.slice(
         i, i + this.selectorGroupSize
       ).join(", ");
       this.style.sheet.insertRule(selector + "{display: none !important;}",
                                   this.style.sheet.cssRules.length);
     }
 
     if (this.tracer)
-      this.tracer.addSelectors(selectors, filters || selectors);
+      this.tracer.addSelectors(selectors, filters);
   },
 
   apply()
   {
     ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
     {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;
 
@@ skipping 23 matching lines @@
     checkCollapse(event.target);
   }, true);
 
   document.addEventListener("load", event =>
   {
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }