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..9eebd2172f028bf7bf2e51fb1d58a7e8b636b3dd 100644
--- a/include.preload.js
+++ b/include.preload.js
@@ -534,6 +534,7 @@ function ElemHide()
   this.shadow = this.createShadowTree();
   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

[Sebastian Noack, 2017/04/29 22:11:03]

The duplication here isn't great. Couldn't we handle this diverge within
elemHide.addSelectors() in a more graceful way?

[Manish Jethani, 2017/05/01 23:18:05]

OK, I've added two new options to the addSelectors function.

+      {
+        ext.backgroundPage.sendMessage(
+          {
+            type: "hide-elements",
+            selectors
+          },
+          response =>
+          {
+            if (!response.success)
+              this.inject = true;
+
+            this.addSelectors(selectors, filters);
+          }
+        );
+      }
+    }
   );
 }
 ElemHide.prototype = {
@@ -598,9 +621,21 @@ ElemHide.prototype = {
 
   addSelectors(selectors, filters)
   {
-    if (selectors.length == 0)
+    if (!selectors || selectors.length == 0)
       return;
 
+    // Insert the style rules inline if we have been instructed by the
+    // background page to do so. This is usually the case, except on platforms
+    // that do support user stylesheets via the chrome.tabs.insertCSS API
+    // (Firefox 53 onwards for now and possibly Chrome in the near future).
+    // Once all supported platforms have implemented this API, we can remove
+    // the code below.
+    // See issue #5090.
+    // Related Chrome and Firefox issues:
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
+    if (this.inject)
+    {
       if (!this.style)
       {
         // Create <style> element lazily, only if we add styles. Add it to
@@ -637,10 +672,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 +686,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 +707,8 @@ ElemHide.prototype = {
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
+      this.inject = response.inject;
+
       this.addSelectors(response.selectors);
       this.elemHideEmulation.apply();
     });