Issue 5090 - Use user stylesheets for element hiding if possible

lib/css.js

Index: lib/css.js
diff --git a/lib/css.js b/lib/css.js
new file mode 100644
index 0000000000000000000000000000000000000000..db49b244107e892686ff8ecd58e16c566317c73b
--- /dev/null
+++ b/lib/css.js
@@ -0,0 +1,67 @@
+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-2017 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/>.
+ */
+
+/** @module css */
+
+"use strict";
+
+const info = require("info");
+
+/**
+ * Whether user stylesheets are supported on this platform.
+ *
+ * @type {boolean}
+ * @static
+ */
+exports.userStylesheetsSupported = info.platform == "gecko" &&
+                                   info.platformVersion.split(".")[0] >= 53;
+
+/**
+ * Hides elements on the page using the browser.tabs.insertCSS API.
+ *
+ * @param {string} tabId       The ID of the tab in which to hide elements
+ * @param {string} frameId     The ID of the frame in which to hide elements
+ * @param {string[]} selectors The list of selectors for the elements to hide
+ * @param {Function} callback  The function to be called upon completion
+ * @static
+ */
+exports.hideElements = (tabId, frameId, selectors, callback) =>
+{
+  let code = selectors.length > 0 ?
+             selectors.join(", ") + "{display: none !important;}" :
+             "";
+
+  try

[kzar, 2017/04/21 11:20:22]

I guess we don't really need this try catch here any more.

[Manish Jethani, 2017/04/21 13:39:32]

Removed.

+  {
+    chrome.tabs.insertCSS(tabId,
+      {

[kzar, 2017/04/21 11:20:22]

Nit: We'd normally put the semicolon on the above line here. I'm curious, did it
pass linting?

[kzar, 2017/04/21 11:21:57]

Arg, of course I meant `{` not `;`! Like this

chrome.tabs.insertCSS(tabId, {
  ...

[Manish Jethani, 2017/04/21 13:39:32]

It did pass linting. I've seen this style in many other places in the code. In
fact, if I simply move the brace up, it'll fail linting, unless I also remove
one level of indentation from the subsequent lines. I don't feel strongly either
way, but I do have a preference for the style I've used. Let me know if I should
change it.

[kzar, 2017/04/21 14:36:51]

I'll defer to Sebastian there.

+        code,
+        cssOrigin: "user",
+        frameId,
+        matchAboutBlank: true
+      },
+      () =>
+      {
+        callback(chrome.runtime.lastError);
+      }
+    );
+  }
+  catch (error)
+  {
+    callback(error);
+  }
+};