:has() selector discussion

[fregante]

Feel free to leave a comment (or more) if you think of any features that can be rewritten or enhanced using the has selector.

Live examples:

• Improve readable-title-change-events order #5795
• clean-conversation-sidebar wrongly hides projects #5757 (comment)

But also, maybe:

• hiding tabs that have a zero (the number is often in an attribute as well, so it can be targeted)
• hiding events from the newsfeed
• showing our “update branch” button if the native button doesn’t exist, dynamically, without events! We append the link and just use body:has(native button) .our-button {hide} 🤯

I swear this selector is a game changer for extensions. The only thing it can’t do is alert us of such events (maybe 😏 via empty animationend on these elements + JS listener)

[fregante]

It is August 30th.

All new features and "restored features" can use :has()

Firefox will follow at some point. Tracking issues:

• https://bugzilla.mozilla.org/show_bug.cgi?id=418039
• it seems that it's been implemented, but still buggy and off by default https://news.ycombinator.com/item?id=32533720

[jerone]

Please wait until Firefox has full support for has.
There are already 3 features that use has in CSS.
One of which I wanted to propose, only to found out it already exists, but just doesn't work on Firefox.

[fregante]

We're not going to retroactively break features, so it's ok. As mentioned, new features and bugfixes can already use the new selector. Firefox will get them whenever it becomes ready.

The features you mentioned simply would not exist without :has(), in fact one of them was years old and I implemented it as soon as the selector was available in Safari, in 15 minutes of my time. We're not going to write JS code for new features that are 3 lines of CSS, only for it to be obsolete in 3 months. I hope that makes sense.

[fregante]

Possible new selector usage:

• CSS-only dim-bots, except for its "expand bots" JS listener
• New: hide repeated issue events Collapse large sequences of label, milestone, etc changes #615 (comment)
• Move most logic to CSS in conversation-activity-filter

[FloEdelmann]

@jerone By the way, you can opt-in to Firefox's preliminary implementation by enabling the layout.css.has-selector.enabled rule in about:config (see https://caniuse.com/css-has), which seems to work fine for these three RGH features.

[jtagcat]

Note: layout.css.has-selector.enabled also requires a restart.

unhide-reactions-on-mobile (#6182) now also uses :has.

[pradyunsg]

Hmm... Firefox doesn't seem to have moved any closer on this in the last 6 months; based on the activity on the tracking issue and hide-own-stars' fix is not compatible with Firefox's experiemental implementation.

Is there a suggested workaround for Firefox users, since currently, we're getting a degraded experience (even after enabling the experimental flag)?

[fregante]

Unfortunately not. GitHub has also been making changes to their DOM making it increasingly difficult to target elements reliably, which means I have no choice but use has()

[fregante]

Which probably means 12 more months of no "has"

[fregante]

Upstream bug closed! Coming to Firefox 119 on October 2024 24th

• https://bugzilla.mozilla.org/show_bug.cgi?id=1853701
• https://whattrainisitnow.com/calendar/

We can start fixing all the TODOs (but they won't be merged until that date)

[fregante]

New issue to track:

• https://bugzilla.mozilla.org/show_bug.cgi?id=418039

Apparently on hold until at least Firefox v121, December 19th. It's strange because it already passes the web interop tests 10x faster than Chrome, even.

Anyway presumably this already works well if you enable the layout.css.has-selector.enabled, so if you're here you can already enjoy the latest features. 🚀

See you in 2024 guys

[ChaseKnowlden]

Firefox 121 is released! @fregante

https://archive.mozilla.org/pub/firefox/releases/121.0/

[fregante]

We'll likely still wait a few weeks before releasing a release that breaks Firefox <120.

On January 17 2023 @fregante wrote:

Which probably means 12 more months of no "has"

It turned out just about right 😃

[fregante]

Can be closed. I cleaned up past polyfills and some TODOs. Due to performance issues, :has() cannot be used on large elements. This is quite unfortunate because of the benefits that moving logic to the CSS for extensions and userstyles would bring.