refined-github
refined-github copied to clipboard
refined-github
:has() selector discussion
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:
- https://github.com/refined-github/refined-github/pull/5795
- https://github.com/refined-github/refined-github/issues/5757#issuecomment-1177997611
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)
Chrome will see this on August 30, version 105:
- https://chromestatus.com/feature/5794378545102848
- https://chromiumdash.appspot.com/schedule
Also new has-only feature coming:
- https://github.com/refined-github/refined-github/pull/5858
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
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.
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.
Possible new selector usage:
- [ ] CSS-only
dim-bots, except for its "expand bots" JS listener - [ ] New: hide repeated issue events https://github.com/refined-github/refined-github/issues/615#issuecomment-507524375
- [ ] Move most logic to CSS in
conversation-activity-filter
@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.
Note: layout.css.has-selector.enabled also requires a restart.
unhide-reactions-on-mobile (#6182) now also uses :has.
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)?
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()
it works if I do this for the moment:
about:config ->
until firefox will support :has :)
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)
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
FWIW: the usage of :has() in the current code breaks the Refined GitHub extension for all Firefox users.
An error message doesn't mean the whole extension is broken. It's just an error message, other features are not affected.
Reported in https://github.com/refined-github/refined-github/issues/7035 and https://github.com/refined-github/refined-github/issues/7012#issuecomment-1793935350
I'll push a fix to silence the message next week
For me it does render all code differently, because for some reason it falls back to a sans-serif font instead of monospace. When I disable the extension, code is rendered correctly with a monospace font as expected. I haven't dug in deeper as to why though to be fair. The :has() selector error is the only one that seems somewhat relevant.
it does render all code differently, because for some reason it falls back to a sans-serif font instead of monospace.
I'd like to see a full bug report for that and whether it works after you enable the flag in about:config
Firefox 121 is released! @fregante
https://archive.mozilla.org/pub/firefox/releases/121.0/
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 😃