Issue 2395 - Added content script for CSS property filters

chrome/content/cssProperties.js

Index: chrome/content/cssProperties.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/chrome/content/cssProperties.js
@@ -0,0 +1,90 @@
+function CSSPropertyFilters(window) {
+  this.window = window;
+  this.load(this.apply.bind(this));
+}
+
+CSSPropertyFilters.prototype = {
+  stringifyStyle: function(style)
+  {
+    var styles = [];
+    for (var i = 0; i < style.length; i++)
+    {
+      var property = style.item(i);
+      var value    = style.getPropertyValue(property);
+      var priority = style.getPropertyPriority(property);
+      styles.push(property + ": " + value + (priority ? " !" + priority : "") + ";");
+    }
+    styles.sort();
+    return styles.join(" ");
+  },
+
+  findSelectors: function(stylesheet, selectors)
+  {
+    var rules = stylesheet.cssRules;
+    if (!rules)
+      return;
+
+    for (var i = 0; i < rules.length; i++)
+    {
+      var rule = rules[i];
+      if (rule.type != this.window.CSSRule.STYLE_RULE)
+        continue;
+
+      var style = this.stringifyStyle(rule.style);
+      for (var j = 0; j < this.patterns.length; j++)
+      {
+        var pattern = this.patterns[j];
+        var regexp = pattern.regexp;
+
+        if (typeof regexp == "string")
+          regexp = pattern.regexp = new RegExp(regexp);
+
+        if (regexp.test(style))
+          selectors.push(pattern.prefix + rule.selectorText + pattern.suffix);
+      }
+    }
+  },
+
+  addSelectors: function(stylesheets)
+  {
+    var selectors = [];
+    for (var i = 0; i < stylesheets.length; i++)
+      this.findSelectors(stylesheets[i], selectors);
+    addElemHideSelectors(selectors);

[kzar, 2015/10/24 09:24:29]

Where does this function come from, I can't find it. 

[Sebastian Noack, 2015/10/24 18:31:14]

This function is supposed to be provided by include.preload.js when integrating
this script for Chrome. Hindsight, I wonder whether it would be better to pass a
function to the CSSPropertyFilters constructor instead.

So we wouldn't call new CSSPropertyFilters(window) at the bottom of this file
but make include.preload.js call the initializing passing a function to add
selectors.

I don't have a strong opinion though. @Wladimir: What do you think?

[Wladimir Palant, 2015/10/26 11:59:27]

Sounds like a good idea, would definitely make this cleaner.

[Sebastian Noack, 2015/11/13 01:16:29]

Done.

+  },
+
+  onLoad: function(event)
+  {
+    var stylesheet = event.target.sheet;
+    if (stylesheet)
+      this.addSelectors([stylesheet]);
+  },
+
+  load: function(callback)
+  {
+    ext.backgroundPage.sendMessage(
+      {
+        type: "filters.get",
+        what: "cssproperties"
+      },
+      function(patterns)
+      {
+        this.patterns = patterns;
+        callback();
+      }.bind(this)
+    );
+  },
+
+  apply: function()

[kzar, 2015/10/24 10:57:09]

Perhaps apply is a bad name for this function, could be confused with
Function.prototype.apply() ?

[Sebastian Noack, 2015/10/24 18:31:14]

I don't see any issues with that. It's a different context here. But do you have
any better name?

+  {
+    if (patterns.length > 0)

[kzar, 2015/10/24 09:24:29]

Should be this.patterns?

[Sebastian Noack, 2015/10/24 18:31:14]

You seem to be right. Fixed. As I said in the first comment on this review, this
code couldn't been tested yet.

+    {
+      var document = this.window.document;
+      this.addSelectors(document.styleSheets);
+      document.addEventListener("load", this.onLoad.bind(this), true);
+    }
+  }
+};
+
+if (typeof window == "object")
+  new CSSPropertyFilters(window);