search

mozilla / contain-facebook

Facebook Container isolates your Facebook activity from the rest of your web activity in order to prevent Facebook from tracking you outside of the Facebook website via third party cookies.
Mozilla Public License 2.0
974 stars 176 forks source link

Facebook container introduces some styles for <body> that show up in devtools and impact rendering if you happen to use the right variable name #971

Open dholbert opened 1 week ago

dholbert commented 1 week ago

Actual behavior

Facebook Container adds a style rule that applies to the <body> element in all web content, as shown in DevTools. (This style rule has 10 declarations and takes up a substantial amount of space in the DevTools rules view, which makes it feel slightly cluttery; and it impacts the page behavior if the page happens to use these variables.)

Expected behavior

Facebook Container shouldn't add any styles for <body>, for regular web content.

Steps to reproduce

  1. Visit https://example.org/ (or any page)
  2. Open DevTools inspector (e.g. right-click and choose "inspect element")
  3. Focus the element in the devtools inspector.
  4. Look at the specified styles on the right side of the devtools inspector.

Notes

Here's a screenshot showing the unexpected styles shown in devtools: image

dholbert commented 1 week ago

This style rule lives here in the code: https://github.com/mozilla/contain-facebook/blob/da5ee2e04b7a2a34dd5c08f0dccf7145eac98fe8/src/content_script.css#L1-L12

git blame indicates that these styles were added here, where they seem to have been intended to target some of the addon's UI rather than actual web content: https://github.com/mozilla/contain-facebook/commit/00ded7623f2615a3a81271907b8feecf011acfbb

That commit included some regular CSS properties, too (like font-family: ... and overflow: hidden;) which presumably broke/impacted body rendering in lots of cases -- those were removed (or moved to another rule, for font-family) in subsequent commits like: https://github.com/mozilla/contain-facebook/commit/9503ba93455207dac37d99f2a23db71cef8b625e https://github.com/mozilla/contain-facebook/commit/3e6dc514fedd85eed3a5a40365c3db976a996802

...but these CSS variables remain as being specified on body. Maybe they can move to the .fbc-container CSS rule, like the font-family declaration did in that last commit?