feat(Classic Footer): "Turn reblog buttons back into links"

[AprilSylph]

To do

• Hide the portaled reblog menu, in case it was already open
• Use the portaled reblog menu to open the reblog form (restore green reblog button behaviour)
• Turn reblog link green when reblog button is green
• Update Quick Reblog so that the AlreadyReblogged tick doesn't move when this is activated
• Properly account for E+Click shortcut
• Properly account for W+Click shortcut
• feat(Classic Footer): Enable classic footer on radar posts #1927

---

Description

• resolves Classic Footer: Add option to skip the reblog menu #1920

Adds an on-by-default option in Classic Footer to disable the new reblog menu.

This is achieved, as per the original issue text, creating our own anchor element with the cloned inner HTML of Tumblr's reblog button. This anchor has all the necessary CSS to perfectly visually mimic the original button.

When the reblog link is clicked without any modifier keys active, its event listener will prevent a browser-driven navigation to the reblog form, and instead open Tumblr's reblog menu in order to click the native reblog link; this is different from simply using navigate() in that a successful reblog from this state will turn the reblog button green.

When E or W is held down, the original reblog button is shown instead of the constructed reblog link, so that Fast Reblog or Quick Queue can be used unimpeded.

Quick Reblog's actually works on the reblog link without modification, but the AlreadyReblogged tick was in a slightly different position since the reblog link makes it look like the first variant of the split notes count post footer is active. This PR consolidates the AlreadyReblogged CSS to drop the styles specific to that variant, and make the selector for the shipped variant more greedy. (Notably, this does not actually break anything if that variant is enabled.)

Testing steps

Setup & basic functionality

1. Load the modified addon
2. Enable Classic Footer and Quick Reblog
3. Hover over a post's reblog button
   • Expected result: Your browser indicates that this element is an anchor linking to a /reblog/ URL
   • Expected result: The Quick Reblog popup appears

Click behaviour

1. Command+Click (CTRL+Click on Windows/Linux) a reblog link
   • Expected result: The post's reblog form is opened in a new tab
2. Shift+Click a reblog link
   • Expected result: The post's reblog form is opened in a new window
3. Click a reblog link with no modifier keys
   • Expected result: The post's reblog form is opened in the current session

Button colour mimicking

1. With the new option enabled, finalise a reblog via the reblog form in the current session
   • Expected result: The reblog link for the post you reblogged turns green
2. Toggle the new option off
   • Expected result: The reblog button for the post you reblogged is still green

Reblog menu hiding/unhiding

1. With the new option still off, click a reblog button to open its reblog menu
2. Re-enable the new option
   • Expected result: The opened reblog menu is hidden
3. Disable the new option again
   • Expected result: The opened reblog menu is unhidden
4. Re-enable the new option, and find a post not processed by Classic Footer
   • Expected result: The reblog button is not a link
   • Expected result: Clicking the reblog button successfully opens its reblog menu

Keyboard shortcuts

1. With the new option enabled, attempt to use Tumblr's keyboard shortcuts to reblog/queue posts
   • Expected result: E+Click works as normal
   • Expected result: W+Click works as normal

Quick Reblog

1. Attempt to use Quick Reblog to reblog/queue/draft posts
   • Expected result: Reblogging turns the reblog link green, with a green tick
   • Expected result: Queueing turns the reblog link purple, with a purple tick
   • Expected result: Drafting turns the reblog link red, with a red tick
2. Refresh the feed and find the post(s) you used Quick Reblog on again
   • Expected result: The reblog links for the given posts are green, with a green tick
3. Toggle the new option off, and then back on again
   • Expected result: The position of the AlreadyReblogged tick stays the same

[AprilSylph]

@marcustyphoon I'll work on this more tomorrow; in the meantime, feel free to conduct code review to see if this mess can be written more neatly. Maybe some util extractions would be in order...?

[marcustyphoon]

Have not checked this yet, but note to self and/or you: check behavior both on posts that cannot be reblogged which have no reblogs and posts that cannot be reblogged but which do have reblogs.

edit: looks fine 👍

[marcustyphoon]

.xkit-classic-footer-reblog-link ~ :is(:is([tabindex="-1"][data-id], aside :is(.Q55_h)) article footer :is(.ndAE7, .OKxqZ, .IBIxS, .QF8_K) :is(.rtfvT, .fPlC8, .IivJ4) button:has(svg use:is([href="#managed-icon__ds-reblog-24"], [href="#managed-icon__ds-queue-add-24"]))):not(:has(svg[style="--icon-color-primary: var(--brand-blue);"], svg[style="--icon-color-primary: var(--brand-purple);"])) {

Ah, selector composition :D

[marcustyphoon]

Interesting oddity: things like right clicking a link in Firefox and selecting the option to search the web for the text contents or dragging a link in safari and observing the tooltip will use the contents of the contained style element as the link text. This is probably minor enough to make it not worth bothering moving the style element one level up and making cleanup more annoying, but we could.

[marcustyphoon]

Above lint suggestion aside:

• listed tests work as expected in—for variety—desktop safari 18.5
• works on sponsored posts (that have data ids; those without are ignored by this feature even though they have a footer and can be liked)
• works on blazed posts
• works on "review flagged posts" page
• works on likes page in grid view
• works on private posts as much as redpop itself does, which is to say it opens the reblog interface even though the reblog attempt will error
• correct behavior on posts that cannot be reblogged with no reblogs
• correct behavior on posts that cannot be reblogged that have reblogs
• does not break tumblr tv