uBlock Origin rules for new twitter website

ublock-twitterneue.txt

# Block Twitter’s new web font
https://abs.twimg.com/fonts/chirp-bold-web.woff
https://abs.twimg.com/fonts/chirp-heavy-web.woff
https://abs.twimg.com/fonts/chirp-regular-web.woff

# hides engage-y modules from the rightmost sidebar
twitter.com##[data-testid="sidebarColumn"] div[aria-label]
twitter.com##[data-testid="sidebarColumn"] div:has(> aside[aria-label])

# hides promoted tweets
twitter.com##article :has(svg[d="M20.75 2H3.25C2.007 2 1 3.007 1 4.25v15.5C1 20.993 2.007 22 3.25 22h17.5c1.243 0 2.25-1.007 2.25-2.25V4.25C23 3.007 21.993 2 20.75 2zM17.5 13.504c0 .483-.392.875-.875.875s-.875-.393-.875-.876V9.967l-7.547 7.546c-.17.17-.395.256-.62.256s-.447-.086-.618-.257c-.342-.342-.342-.896 0-1.237l7.547-7.547h-3.54c-.482 0-.874-.393-.874-.876s.392-.875.875-.875h5.65c.483 0 .875.39.875.874v5.65z"])

# Hides "so-and-so liked" tweets
# (Grazie, @ phyllisstein! https://gist.github.com/9d78b409c54dd33d6722c0ed5e45c8b2#gistcomment-3084106)
twitter.com##article :has(path[d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12z"]):has(a:has-text(liked))

Highly recommended:

[bad code removed]

oh very good, thanks @phyllisstein! Added in https://gist.github.com/beep/9d78b409c54dd33d6722c0ed5e45c8b2/revisions#diff-b96e86978bbde9a4fcdbdac9369f19b1.

lolo sorry, that also and perversely removes everything you like. Try:

# Hides "so-and-so liked" tweets.
twitter.com##article :has(path[d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12z"]):has(a:has-text(liked))

hm maybe thats okay tho

But seriously, thank you @phyllisstein! And added. (Also, TIL :has-text()!)

This is how I atone for really enjoying CSS-in-JS in my own code. The griminess of using a11y attributes because the classes are so brittle is a gift for you, Ethan, specifically.

twitter.com##div[aria-label^="Timeline: Trending"]
twitter.com##div:has(> aside[aria-label^="Who to follow"])

you are doing yeoman’s work, @phyllisstein, thank you

@phyllisstein Modified your rules ever-so-slightly, to catch a few weird cases that were popping up on tweet detail pages.

twitter.com##[data-testid="sidebarColumn"] div[aria-label]
twitter.com##[data-testid="sidebarColumn"] div:has(> aside[aria-label])

How’s that look to you?

More than anything else, it looks an awful look like an A/B test! I briefly hoped it might restore the old flavor of broken on its own, but they seem to apply that testid attribute to any testable component, rather than some single component under test.

Failing that, I'm all for the version you've got. Un-break my &c.

Blarg, yes, I noticed that tooooooo. I assume this is gonna be very short-lived, but in the short-term I figured the id attribute would provide us with enough granularity to work with, it’s highly gross but also

As I like to tell my team: everything is debt, and the world is very old. (They tolerate me admirably.)