Issue 3823 - Split up message responder code

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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 var SELECTOR_GROUP_SIZE = 20;
 
 var typeMap = {
   "img": "IMAGE",
   "input": "IMAGE",
   "picture": "IMAGE",
   "audio": "MEDIA",
   "video": "MEDIA",
   "frame": "SUBDOCUMENT",
   "iframe": "SUBDOCUMENT",
@@ skipping 92 matching lines @@
   {
     if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
       urls.splice(i--, 1);
   }
 
   return urls;
 }
 
 function checkCollapse(element)
 {
-  var tag = element.localName;
-  if (tag in typeMap)
-  {
-    // This element failed loading, did we block it?
-    var urls = getURLsFromElement(element);
-    if (urls.length == 0)
-      return;
-
-    ext.backgroundPage.sendMessage(
-      {
-        type: "should-collapse",
-        urls: urls,
-        mediatype: typeMap[tag],
-        baseURL: document.location.href
-      },
-
-      function(response)
-      {
-        if (response && element.parentNode)
-        {
-          var property = "display";
-          var value = "none";
-
-          // <frame> cannot be removed, doing that will mess up the frameset
-          if (tag == "frame")
-          {
-            property = "visibility";
-            value = "hidden";
-          }
-
-          // <input type="image"> elements try to load their image again
-          // when the "display" CSS property is set. So we have to check
-          // that it isn't already collapsed to avoid an infinite recursion.
-          if (element.style.getPropertyValue(property) != value ||
-              element.style.getPropertyPriority(property) != "important")
-            element.style.setProperty(property, value, "important");
-        }
-      }
-    );
-  }
-
   window.collapsing = true;
+
+  var mediatype = typeMap[element.localName];
+  if (!mediatype)
+    return;
+
+  var urls = getURLsFromElement(element);
+  if (urls.length == 0)
+    return;
+
+  ext.backgroundPage.sendMessage(
+    {
+      type: "should-collapse",
+      urls: urls,
+      mediatype: mediatype,
+      baseURL: document.location.href
+    },
+
+    function(collapse)
+    {
+      function collapseElement()
+      {
+        if (element.localName == "frame")
+          element.style.setProperty("visibility", "hidden", "important");
+        else
+          element.style.setProperty("display", "none", "important");
+      }
+
+      if (collapse && !element._collapsed)
+      {
+        collapseElement();
+        element._collapsed = true;
+
+        if (MutationObserver)
+          new MutationObserver(collapseElement).observe(
+            element, {
+              attributes: true,
+              attributeFilter: ["style"]
+            }
+          );
+      }
+    }
+  );
 }
 
 function checkSitekey()
 {
   var attr = document.documentElement.getAttribute("data-adblockkey");
   if (attr)
     ext.backgroundPage.sendMessage({type: "filter.addKey", token: attr});
 }
 
 function getContentDocument(element)
@@ skipping 142 matching lines @@
   },
 
   disconnect: function()
   {
     this.document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
-function reinjectRulesWhenRemoved(document, style)
-{
-  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+function reinjectStyleSheetWhenRemoved(document, style)
+{
   if (!MutationObserver)
-    return;
-
-  var observer = new MutationObserver(function(mutations)
-  {
-    var isStyleRemoved = false;
-    for (var i = 0; i < mutations.length; i++)
-    {
-      if ([].indexOf.call(mutations[i].removedNodes, style) != -1)
-      {
-        isStyleRemoved = true;
-        break;
-      }
-    }
-    if (!isStyleRemoved)
-      return;
-
-    observer.disconnect();
-
-    var n = document.styleSheets.length;
-    if (n == 0)
-      return;
-
-    var stylesheet = document.styleSheets[n - 1];
-    ext.backgroundPage.sendMessage(
-      {type: "get-selectors"},
-
-      function(response)
-      {
-        var selectors = response.selectors;
-        while (selectors.length > 0)
-        {
-          var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", ");
-
-          // Using non-standard addRule() here. This is the only way
-          // to add rules at the end of a cross-origin stylesheet
-          // because we don't know how many rules are already in there
-          stylesheet.addRule(selector, "display: none !important;");
-        }
-      }
-    );
+    return null;
+
+  var parentNode = style.parentNode;
+  var observer = new MutationObserver(function()
+  {
+    if (style.parentNode != parentNode)
+      parentNode.appendChild(style);
   });
 
-  observer.observe(style.parentNode, {childList: true});
+  observer.observe(parentNode, {childList: true});
   return observer;
+}
+
+function protectStyleSheet(document, style)
+{
+  var id = Math.random().toString(36).substr(2)
+  style.id = id;
+
+  var code = [
+    "(function()",
+    "{",
+    '  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++)
+  {
+    code.push("  Object.defineProperty(" + disableables[i] + ', "disabled", '
+                                         + "{value: false, enumerable: true});");
+  }
+
+  var methods = ["deleteRule", "removeRule"];
+  for (var j = 0; j < methods.length; j++)
+  {
+    var method = methods[j];
+    if (method in CSSStyleSheet.prototype)
+    {
+      var origin = "CSSStyleSheet.prototype." + method;
+      code.push("  var " + method + " = " + origin + ";",
+                "  " + origin + " = function(index)",
+                "  {",
+                "    if (this != style.sheet)",
+                "      " + method + ".call(this, index);",
+                "  }");
+    }
+  }
+
+  code.push("})();");
+
+  var script = document.createElement("script");
+  script.async = false;
+  script.textContent = code.join("\n");
+  document.documentElement.appendChild(script);
+  document.documentElement.removeChild(script);
 }
 
 function init(document)
 {
   var shadow = null;
   var style = null;
   var observer = null;
   var tracer = null;
   var propertyFilters = new CSSPropertyFilters(window, addElemHideSelectors);
 
   // Use Shadow DOM if available to don't mess with web pages that rely on
   // the order of their own <style> tags (#309).
   //
   // 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 and Gmail (#1770, #2602).
-  if ("createShadowRoot" in document.documentElement && !/\.google\.com$/.test(document.domain))
+  // 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"));
   }
 
   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 = reinjectRulesWhenRemoved(document, style);
+      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 99 matching lines @@
   }, true);
 
   return updateStylesheet;
 }
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   window.updateStylesheet = init(document);
 }