[adblockpluschrome] Issue 3596 - Added support for CSS property filters to devtools panel

include.preload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 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 216 matching lines @@
       {
         let elements = node.querySelectorAll(selectors[i]);
 
         for (let element of elements)
         {
           // 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")
           {
-            let filter = filters[i] || selectors[i];

[Sebastian Noack, 2017/02/23 11:08:23]

This is no longer necessary. You don't have to consider selectors here anymore.
Since there will always be an entry in filters.

[wspee, 2017/02/23 11:20:21]

Done.

-            matchedSelectors.push(filter.replace(/^.*?##/, ""));
+            matchedSelectors.push(filters[i].replace(/^.*?##/, ""));
             break nodes;
           }
         }
       }
     }
 
     if (matchedSelectors.length > 0)
       ext.backgroundPage.sendMessage({
         type: "devtools.traceElemHide",
         selectors: matchedSelectors
@@ skipping 289 matching lines @@
     //  is! Edge apparently has no such limit.)
     // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69debb75fc1de/Source/WebCore/css/RuleSet.h#L68
     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);
+      this.tracer.addSelectors(selectors, filters || selectors);
   },
 
   apply()
   {
     ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
     {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;
 
       if (this.style && this.style.parentElement)
         this.style.parentElement.removeChild(this.style);
       this.style = null;
 
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
-      this.addSelectors(response.selectors, response.selectors);

[Sebastian Noack, 2017/02/23 11:24:03]

I wonder whether it would be nicer to handle this inside the addSelectors()
method, like that:

  this.tracer.addSelectors(selectors, filters || selectors);

That way we wouldn't have to duplicate the property lookup, and the semantics of
the second argument can be completely ignored, here. Also the code would be
slightly more concise. On the other hand, if we explicitly pass the selectors as
filters here, we avoid a logical condition. Not sure which is more preferable.

[wspee, 2017/02/23 14:24:48]

Done.

-
+      this.addSelectors(response.selectors);
       this.elemHideEmulation.apply();
     });
   }
 };
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   wrapWebSocket();
 
   // This variable is also used by our other content scripts, outside of the
   // current scope.
   var elemhide = new ElemHide();
   elemhide.apply();
 
   document.addEventListener("error", event =>
   {
     checkCollapse(event.target);
   }, true);
 
   document.addEventListener("load", event =>
   {
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }