Issue 4298 - Enforce 'display: none' for ElemHide

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 enforceStyleSheetRules(style)
+{
+  style.id = id;
+  injectJS(
+    function(id)
+    {
+      var style = document.getElementById(id) ||
+                  document.documentElement.shadowRoot.getElementById(id);
+      style.removeAttribute("id");
+
+      Object.defineProperty(style.sheet, "disabled",

[Sebastian Noack, 2016/08/04 20:44:23]

Where did the code go, that addressed deleteRule and removeRule?

[kzar, 2016/08/05 11:01:57]

This review is based upon the changes in a couple of other reviews. They're
listed in this review's description. That stuff is somewhere near line 400 here,
you'll have to expand the code to see it. Equally if it's easier these changes
are in GitHub too:
https://github.com/kzar/adblockpluschrome/commits/4298-enforce-display-none

I would be happy to combine this review with the review for 4191 since they're
very similar and things are getting confusing. Any objections?

+                            {value: false, enumerable: true});
+
+      for (var i = 0; i < style.sheet.rules.length; i += 1)
+        Object.defineProperty(style.sheet.rules[i].style, "display",

[Sebastian Noack, 2016/08/04 20:44:23]

How about overriding style.sheet.rules (and sheet.cssRules) so that it always
returns an empty array? That way we wouldn't have to monkey-patch every single
rule which might cause performance issues.

[kzar, 2016/08/05 11:01:57]

Cool idea, but I actually had to overwrite the getter on
CSSStyleSheet.prototype. 

(It also turns out my old implementation only happened to work for the website
in question by luck. Setting a rule's style to read only doesn't do anything
apparently, it's still writable!)

+                              {value: "none", enumerable: true});
+    }, id
+  );
+}
+
 function reinjectStyleSheetWhenRemoved(document, style)
 {
   if (!MutationObserver)
     return null;
 
   var rules = style.sheet.rules;
   var parentNode = style.parentNode;
   var observer = new MutationObserver(function()
   {
     if (style.parentNode != parentNode)
     {
       parentNode.appendChild(style);
 
       if (style.sheet.rules.length == 0)
       {
         for (var i = 0; i < rules.length; i += 1)
-          style.sheet.addRule(rules[i].selectorText, "display: none !important;");
+          style.sheet.addRule(rules[i].selectorText);
 
-        style.id = id;
-        injectJS(
-          function(id)
-          {
-            var style = document.getElementById(id) ||
-                        document.documentElement.shadowRoot.getElementById(id);
-            style.removeAttribute("id");
-            Object.defineProperty(style.sheet, "disabled",
-                                  {value: false, enumerable: true});
-          }, id
-        );
+        enforceStyleSheetRules(style);
       }
     }
   });
 
   observer.observe(parentNode, {childList: true});
   return observer;
 }
 
 function injectJS(f)
 {
@@ skipping 212 matching lines @@
     }
 
     // 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 (var i = 0; i < selectors.length; i += SELECTOR_GROUP_SIZE)
     {
       var selector = selectors.slice(i, i + SELECTOR_GROUP_SIZE).join(", ");
-      style.sheet.addRule(selector, "display: none !important;");
+      style.sheet.addRule(selector);
     }
+    enforceStyleSheetRules(style);
   };
 
   var updateStylesheet = function()
   {
     var selectors = null;
     var CSSPropertyFiltersLoaded = false;
 
     var checkLoaded = function()
     {
       if (!selectors || !CSSPropertyFiltersLoaded)
@@ skipping 75 matching lines @@
   }, true);
 
   return updateStylesheet;
 }
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   window.updateStylesheet = init(document);
 }