[Firefox] Use nsIDOMWindowUtils.loadSheetUsingURIString() to harden declarative cosmetic filters

[gorhill]

Firefox's API support user stylesheets, which have precedence over web sites' styles, even inline styles.

Investigate using Firefox's user stylesheets to prevent websites from overriding uBO's cosmetic filters.

Test case from uBlockOrigin/uAssets#123:

• Default English settings minus uBlock filters
• Add as custom filters:
  • kinotochka.net###\36 00
  • ||etg.kinotochka.net^$script
• Load page http://kinotochka.net/3552-cherepashki-nindzya-2-2016.html.

Result for Firefox:

• The click bait ads below the video are visible.
• The click bait ads are not visible with ABP -- and the placeholder is properly collapsed.

Result for Chromium:

• The click bait ads are not visible, but the placeholder is not properly collapsed.
  • Because uBO also hides using shadow root on the node. Probably an extra :style filter would solve the placeholder issue.
• The click bait ads are visible with ABP.
  • Because Chromium API does not support injecting CSS styles with higher precedence than those of the page, Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=427527)

Expected result:

• The click bait ads are not visible, and no placeholder is left behind.

Notes:

• In Firefox, when enabling dom.webcomponents.enabled in about:config, the result in Firefox/uBO becomes the same as the result in Chromium/uBO.

[gorhill]

This will work for Firefox 36+: https://bugzilla.mozilla.org/show_bug.cgi?id=1089230.

[gorhill]

To @Drugoy from cadeyrn/newtaboverride#3 (comment):

B/s
[...]
Stylish on Chromium-based browsers works this way too. The order in which the browser allows an extension apply the styles - it's details.

Here is a detail for you:

Enter following custom style this in Stylish for raymondhill.net:

.ADBox {
    display: none !important;
}

Now visit this page: http://raymondhill.net/ublock/adbox.html.

Result on Chromium with Stylish + custom style above:

That's CSS 101: inline style wins over stylesheet styles -- unless the browser supports user stylesheets which actually override inline styles.

For reference, how the page look without Stylish: