Issue 4191 - Restore rules for reinjected stylesheets

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 316 matching lines @@
   },
 
   disconnect: function()
   {
     this.document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
-function reinjectStyleSheetWhenRemoved(document, style)
-{
-  if (!MutationObserver)
-    return null;
-
-  var parentNode = style.parentNode;
-  var observer = new MutationObserver(function()
-  {
-    if (style.parentNode != parentNode)
-      parentNode.appendChild(style);
-  });
-
-  observer.observe(parentNode, {childList: true});
-  return observer;
-}
-
 function runInPage(fn, arg)
 {
   var script = document.createElement("script");
   script.type = "application/javascript";
   script.async = false;
   script.textContent = "(" + fn + ")(" + JSON.stringify(arg) + ");";
   document.documentElement.appendChild(script);
   document.documentElement.removeChild(script);
 }
 
-function protectStyleSheet(document, style)
-{
-  style.id = id;

[Sebastian Noack, 2016/08/11 12:38:57]

Since the id is only used once (for the WebSocket) now, mind moving the code
creating it, from the global scope to where it is used.

[kzar, 2016/08/11 12:48:18]

Done.

-
-  runInPage(function(id)
-  {
-    var style = document.getElementById(id) ||
-                document.documentElement.shadowRoot.getElementById(id);
-    style.removeAttribute("id");
-
-    var disableables = [style, style.sheet];
-    for (var i = 0; i < disableables.length; i++)
-      Object.defineProperty(disableables[i], "disabled",
-                            {value: false, enumerable: true});
-
-    ["deleteRule", "removeRule"].forEach(function(method)
-    {
-      var original = CSSStyleSheet.prototype[method];
-      CSSStyleSheet.prototype[method] = function(index)
-      {
-        if (this != style.sheet)
-          original.call(this, index);
-      };
-    });
-  }, id);
-}
-
 // Neither Chrome[1] nor Safari allow us to intercept WebSockets, and therefore
 // some ad networks are misusing them as a way to serve adverts and circumvent
 // us. As a workaround we wrap WebSocket, preventing blocked WebSocket
 // connections from being opened.
 // [1] - https://bugs.chromium.org/p/chromium/issues/detail?id=129353
 function wrapWebSocket()
 {
   if (typeof WebSocket == "undefined")
     return;
 
@@ skipping 92 matching lines @@
   // However, creating a shadow root breaks running CSS transitions. So we
   // have to create the shadow root before transistions might start (#452).
   //
   // Also, using shadow DOM causes issues on some Google websites,
   // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
   if ("createShadowRoot" in document.documentElement &&
       !/\.(?:google|blogger)\.com$/.test(document.domain))
   {
     shadow = document.documentElement.createShadowRoot();
     shadow.appendChild(document.createElement("shadow"));
+
+    // Stop the website from messing with our shadowRoot
+    runInPage(function()

[Sebastian Noack, 2016/08/11 12:48:11]

You have to pass the document to runInPage(), to make sure that it gets injected
into the right document.

[kzar, 2016/08/11 13:04:46]

Done.

+    {
+      var ourShadowRoot = document.documentElement.shadowRoot;
+      var desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoot");
+      var shadowRoot = Function.prototype.call.bind(desc.get);
+
+      Object.defineProperty(Element.prototype, "shadowRoot", {
+        conifgurable: true, enumerable: true, get: function()
+        {
+          var shadow = shadowRoot(this);
+          return shadow === ourShadowRoot ? null : shadow;

[Sebastian Noack, 2016/08/11 12:38:57]

Nit: As per Mozilla's coding practices, we prefer === over ==.

[Sebastian Noack, 2016/08/11 12:42:37]

(The other way around, I meant, == is preferred over ===)

[kzar, 2016/08/11 12:48:18]

Done.

+        }
+      });
+    }, "");

[Sebastian Noack, 2016/08/11 12:38:57]

Nit: I'd rather pass null, than creating an empty string.

[kzar, 2016/08/11 12:48:18]

Done.

   }
 
   function addElemHideSelectors(selectors)
   {
     if (selectors.length == 0)
       return;
 
     if (!style)
     {
       // Create <style> element lazily, only if we add styles. Add it to
       // the shadow DOM if possible. Otherwise fallback to the <head> or
       // <html> element. If we have injected a style element before that
       // has been removed (the sheet property is null), create a new one.
       style = document.createElement("style");
       (shadow || document.head || document.documentElement).appendChild(style);
 
       // It can happen that the frame already navigated to a different
       // document while we were waiting for the background page to respond.
       // In that case the sheet property will stay null, after addind the
       // <style> element to the shadow DOM.
       if (!style.sheet)
         return;
-
-      observer = reinjectStyleSheetWhenRemoved(document, style);
-      protectStyleSheet(document, style);
     }
 
     // If using shadow DOM, we have to add the ::content pseudo-element
     // before each selector, in order to match elements within the
     // insertion point.
     if (shadow)
     {
       var preparedSelectors = [];
       for (var i = 0; i < selectors.length; i++)
       {
@@ skipping 102 matching lines @@
   }, true);
 
   return updateStylesheet;
 }
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   window.updateStylesheet = init(document);
 }