Reviews for Better Twitter
Better Twitter by Razvan Caliman
Review by Firefox user 13112025
Rated 5 out of 5
by Firefox user 13112025, 4 years ago/*
The new Twitter interface (circa 2019) uses auto-generated markup
with obfuscated class names which are not guaranteed to be stable over time.
In order to remove unwanted parts of the UI when they appear,
we use CSS selectors in the stylesheet (content.css) to identify
areas of interest, then apply a short fake animation to them.
Here in JavaScript, we listen for all `animationstart` events, check if they match
one of the areas of interest (`AnimationEvent.target` points to the element matched
by the CSS seletor), then mark the target element or one of its ancestors. This marker
then causes a CSS selector from content.css to match and hide the intended element.
This is a convoluted but viable workaround for missing ancestor selectors in CSS.
*/
I used to use Stylus/Stylish filter to achieve my intentions, which are closely the same as what this addon does. However, since the major change introduced in this spring, my solution no longer works. I looked for a working addon to get the same result, but there seemed to be none.
Then, a few months later, I finally found this addon. This method (quoted above as comment) is brilliant!
The new Twitter interface (circa 2019) uses auto-generated markup
with obfuscated class names which are not guaranteed to be stable over time.
In order to remove unwanted parts of the UI when they appear,
we use CSS selectors in the stylesheet (content.css) to identify
areas of interest, then apply a short fake animation to them.
Here in JavaScript, we listen for all `animationstart` events, check if they match
one of the areas of interest (`AnimationEvent.target` points to the element matched
by the CSS seletor), then mark the target element or one of its ancestors. This marker
then causes a CSS selector from content.css to match and hide the intended element.
This is a convoluted but viable workaround for missing ancestor selectors in CSS.
*/
I used to use Stylus/Stylish filter to achieve my intentions, which are closely the same as what this addon does. However, since the major change introduced in this spring, my solution no longer works. I looked for a working addon to get the same result, but there seemed to be none.
Then, a few months later, I finally found this addon. This method (quoted above as comment) is brilliant!
Developer response
posted 4 years agoGlad you found the add-on and the technique described in the code useful.