Issue 5090 - Use user stylesheets for element hiding if possible

include.preload.js

Index: include.preload.js
diff --git a/include.preload.js b/include.preload.js
index 92a6212f9929bddc8654ffdb7a80b136cc5b1f41..5b25cf3d00627051be55910d374755708021ced8 100644
--- a/include.preload.js
+++ b/include.preload.js
@@ -534,6 +534,7 @@ function ElemHide()
   this.shadow = this.createShadowTree();

[kzar, 2017/04/13 07:56:24]

I guess the shadowTree and related hacks aren't necessary if we can use
insertCSS? Just be careful if you're messing with this code, since the wrapping
code (see the runInPageContext call) needs to run immediately if it's being
used, otherwise the page's scripts might get a chance to mess with the API
before we wrap it!

[Manish Jethani, 2017/04/18 09:25:04]

I don't think we can avoid creating the shadow tree here because it's only later
that we know if insertCSS is supported. This information is cached in the
background page, but it would require a roundtrip.

   this.style = null;
   this.tracer = null;
+  this.inject = true;
 
   this.elemHideEmulation = new ElemHideEmulation(
     window,
@@ -544,7 +545,29 @@ function ElemHide()
         what: "elemhideemulation"
       }, callback);
     },
-    this.addSelectors.bind(this)
+    (selectors, filters) =>
+    {
+      if (this.inject)
+      {
+        this.addSelectors(selectors, filters);
+      }
+      else
+      {
+        ext.backgroundPage.sendMessage(
+          {
+            type: "hide-elements",
+            selectors
+          },
+          response =>
+          {
+            if (!response.success)
+              this.inject = true;
+
+            this.addSelectors(selectors, filters);
+          }
+        );
+      }
+    }
   );
 }
 ElemHide.prototype = {
@@ -598,9 +621,11 @@ ElemHide.prototype = {
 
   addSelectors(selectors, filters)
   {
-    if (selectors.length == 0)
+    if (!selectors || selectors.length == 0)
       return;
 
+    if (this.inject)

[kzar, 2017/04/13 07:56:24]

I think there should be a comment here to explain why we sometimes don't need to
inject the stylesheets. Or perhaps why sometimes we _do_. I think it should be
specific about platforms and if possible versions, to help the next person know
when the code can be simplified in the future.

[Manish Jethani, 2017/04/18 09:25:04]

I've added a comment.

+    {
       if (!this.style)
       {
         // Create <style> element lazily, only if we add styles. Add it to
@@ -637,10 +662,11 @@ ElemHide.prototype = {
         preparedSelectors = selectors;
       }
 
-    // Safari only allows 8192 primitive selectors to be injected at once[1], we
-    // therefore chunk the inserted selectors into groups of 200 to be safe.
-    // (Chrome also has a limit, larger... but we're not certain exactly what it
-    //  is! Edge apparently has no such limit.)
+      // Safari only allows 8192 primitive selectors to be injected at once[1],
+      // we therefore chunk the inserted selectors into groups of 200 to be
+      // safe.
+      // (Chrome also has a limit, larger... but we're not certain exactly what
+      // it 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)
       {
@@ -650,6 +676,7 @@ ElemHide.prototype = {
         this.style.sheet.insertRule(selector + "{display: none !important;}",
                                     this.style.sheet.cssRules.length);
       }
+    }
 
     if (this.tracer)
       this.tracer.addSelectors(selectors, filters);
@@ -670,6 +697,8 @@ ElemHide.prototype = {
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
+      this.inject = response.inject;
+
       this.addSelectors(response.selectors);
       this.elemHideEmulation.apply();
     });