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..db67b224adf1cb783cfa0db63a7cdb1ac196d866 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,
@@ -596,11 +597,33 @@ ElemHide.prototype = {
     return shadow;
   },
 
-  addSelectors(selectors, filters)
+  addSelectors(selectors, filters, {inject, traceOnly} = {})
   {
-    if (selectors.length == 0)
+    if (!selectors || selectors.length == 0)
+      return;
+
+    if (traceOnly)
+    {
+      if (this.tracer)
+        this.tracer.addSelectors(selectors, filters);
+
       return;
+    }
 
+    inject = this.inject && inject == null || !!inject;
+
+    // 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 (inject)
+    {
       if (!this.style)
       {
         // Create <style> element lazily, only if we add styles. Add it to
@@ -637,10 +660,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)
       {
@@ -653,6 +677,22 @@ ElemHide.prototype = {
 
       if (this.tracer)
         this.tracer.addSelectors(selectors, filters);
+    }
+    else
+    {
+      ext.backgroundPage.sendMessage({type: "hide-elements", selectors},
+      response =>
+      {
+        let options = {};
+
+        if (!response.success)
+          options.inject = true;
+        else
+          options.traceOnly = true;
+
+        this.addSelectors(selectors, filters, options);
+      });
+    }
   },
 
   apply()
@@ -670,7 +710,9 @@ ElemHide.prototype = {
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
-      this.addSelectors(response.selectors);
+      this.inject = response.inject;
+
+      this.addSelectors(response.selectors, null, {traceOnly: !this.inject});
       this.elemHideEmulation.apply();
     });
   }