Limit content script CSS variables to Facebook Container elements only

[rschiang]

• Facebook Container Version: 2.3.9
• Firefox Version: 112.0.1 / 114.0a1 (Nightly)

In version 2.3.3, an unexpected CSS variable pollution was rolled out to users. Two patches were proposed to address the situation, namely:

• Fix content-script overriding body css for every page #860 by setting the CSS variables on .fbc-container, and
• Remove overriding CSS values from body #868 by prefixing the CSS variables with --fbc-.

However, only the latter patch was merged as a quick migration to the problem. These variables still apply directly on the document body element of every single webpage, regardless the existence of Facebook pixels:

…which is really problematic for web designers, who need to actively ignore the good chunks of variables when debugging web pages. Limiting these CSS variables to FBC elements only would improve the situation a lot.

Expected behavior

CSS variables only apply to Facebook Container’s own elements.

Possible solutions

• Adopt an alternate, less globally-affecting selector as mentioned in Fix content-script overriding body css for every page #860 (#facebook, .fbc-container)
• Use a CSS preprocessor to bake the CSS variables before release?

Please let me know if we could whip up some quick PR for this. Thanks! :)

[mskocik]

CSS polution is related also to utility classes like .is-hidden. This should be addressed as well when scoping extension styles.

[Levdbas]

I am running into same issues were classes like is-hidden in some sites are overwritten by this extension.

[rschiang]

@groovecoder @maxxcrawford Hi! Is anyone at Mozilla working on this internally? Or should we submit a PR? 😀

[EmSixTeen]

Every time I look in devtools I get a little irritated by this - especially when cycling through my own variables and having to wade through these. Not the biggest deal but it should really be fixed.