Page MenuHomePhabricator

watchlist collapsible-item markers are now smaller than yesterday and point up instead of right when collapsed
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • the vector legacy 2010 skin
  • at en.wiki I have 'Expand watchlist to show all changes, not just the most recent' checked at Preferences > Watchlist
  • at en.wiki I have 'Use non-JavaScript interface' checked at Preferences > Watchlist
  • Enable "Display green collapsible arrows and green bullets for changed pages in your watchlist, page history and recent changes (unavailable with the improved Watchlist user interface)" gadget
  • Ensure there is at least one article on the watchlist that has only one edit (no collapse icon)

What happens?:

  • My watchlist used points up when the item is collapsed ((multiple changes to the watched item))
  • The arrow for a collapsible item is now smaller (11x11)
  • The timestamp of the article with 1 edit is misaligned.

What should happen*

  • Watchlist icons should point right when collapsed
  • The icons should be 15x15
  • The timestamp of the article with 1 edit should be aligned with other timestamps

Event Timeline

The arrows are replaced with codex one in 727cc444d9ba2a2950ace726e4a8ded8ea9227a9 / T351681, it seems the arrows are not same sized and now misaligned with the non-arrow space (.mw-enhancedchanges-checkbox), see https://de.wikipedia.org/wiki/Datei:Screenshot_2023-12-03_at_22-02-07_Beobachtungsliste_%E2%80%93_Wikipedia.png as reported on dewiki

Have we ruled out caching issues here?

I am currently on a mobile device so will check later. Some links in addition to screenshots would be helpful. Is this only the watchlist or is recent changes also impacted?

Put https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical) on your watchlist and visit https://en.wikipedia.org/wiki/Special:Watchlist?enhanced=1&useskin=vector to see collapse items, add a random page to have a page with just one edit per day as non-collapse item, that does not align on the watchlist.

On enwiki I see also the arrow up, but it is also green, so that seems another image as on dewiki and maybe the "rotate( -90deg )" does not work. Use https://en.wikipedia.org/wiki/Special:Watchlist?enhanced=1&useskin=vector&debug=true&safemode=1 to see the mediawiki default arrows. So there is also something broken locally.

To look at dewiki visit https://de.wikipedia.org/wiki/Spezial:Beobachtungsliste?enhanced=1&useskin=vector&debug=true, you can use the german VP to have collapse items https://de.wikipedia.org/wiki/Wikipedia:Fragen_zur_Wikipedia

So is this only broken on German Wikipedia? Is this not happening in safe mode?

it is broken on en.wiki as I noted in the OP.

There are two issues:

This from my watchlist at en.wiki. All of those arrows should be right-pointing. Apparently the alignment issue noted at de.wiki is somewhat mimicked at en.wiki.

en.wiki_watchlist_markers_2023-12-07.png (186×141 px, 2 KB)

Watchlist arrows pointing up

My watchlist used to show right-pointing arrows for collapsed items (multiple changes to the watched item).
enwiki is using another arrow which is green(?) and showing up

The green and blue arrows pointing up is is a gadget issue. I've patched this gadget. Please hard refresh your browser and clear cache if you are not seeing the fix.

Screenshot 2023-12-07 at 2.39.32 PM.png (860×1 px, 260 KB)

I believe this is caused by this gadget (thank you @Umherirrender for the help):
Screenshot 2023-12-07 at 2.34.08 PM.png (592×1 px, 128 KB)

Flushing

@Umherirrender I'm unable to replicate this myself. Are you sure there's not a gadget at play here? To be clear when you talk about "flushing" are you referring to the alignment between the times?

e.g.

Screenshot 2023-12-07 at 2.40.36 PM.png (180×204 px, 14 KB)

I am not seeing the D and K locally so I'm wondering if there is a gadget injecting those?

image.png (132×446 px, 10 KB)

Could you create a new ticket for this with the contents of Special:Watchlist/raw in the replication steps and follow the instructions since then seems different from the bug being reported here? Even better, if you can use the browser at https://replay.io/ and send me a recording I'll be able to fix this much quicker. Thanks in advance and sorry I am having trouble understanding this one.

D is the marker of a wikidata item and K stands for minor edit in German.

At en.wiki, arrows appear to point in the correct directions now. Thanks.

With "flushing" I am referring to the alignment of the timestamps, all timestamps must align under each other - with arrow or without, with K, D, B or N
"K" is a minor edit and "D" is a wikidata edit, "B" is bot and "N" a new page, but even without the letter everything must be aligned as there are styled in monospace font and missing letters are non-breaking spaces in .mw-enhanced-rc

Change 981405 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Restore fixed width and height of arrow on change list pages

https://gerrit.wikimedia.org/r/981405

Jdlrobson renamed this task from watchlist collapsible-item markers are now smaller than yesterday and point up instead of right when collaped to watchlist collapsible-item markers are now smaller than yesterday and point up instead of right when collapsed.Dec 7 2023, 11:19 PM
Jdlrobson updated the task description. (Show Details)

Possibly related: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Triangles_in_Special:Watchlist_too_big_and_pointing_wrong_way

enwiki arrows are always pointing DOWN and have doubled in size, as of about an hour ago (WP:ITSTHURSDAY), on Vector and Vector 2022 skins

image.png (1×425 px, 40 KB)

There has been no deploy today.

Disabling that gadget with ?debug=1 to make sure it's refreshed fixes the issue. Maybe we should think about reverting?

The OP's problem, as illustrated in the image uploaded on 7 December, is fixed at en.WP now. Thanks!

@Novem_Linguae it is more than likely my change. If we revert my change the bug here will be back again.. i am not sure what is the preferable state and the gadget doesn't seem to have an active maintainer to make that call. [If someone can judge that and wants to revert there is no objectioj from me].

I do not have access to my staff account right now but if you can wait 12 hours I will take another look tomorrow. I can see a safer way to fix this now. I think rather than using !important those rules could be moved alongside all the existing background-image definitions.

Apologies for the disruption and thanks for your patience.

The village pump thread isn't blowing up. Can probably wait 12 hours on this one. Have a good night! :)

I think I fixed it with these two changes: https://en.wikipedia.org/w/index.php?title=MediaWiki%3AGadget-WatchlistGreenIndicators.css&diff=1188922324&oldid=1188825350

The original problem (arrows being slightly too small) was not related to the gadget, and should be fixed by the MediaWiki patch (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/981405). I don't really understand why added a workaround for this to the gadget, but I kept it.

The second problem (arrows pointing up) was an incompatibility between the gadget and the new MediaWiki styles, and was fixed by Jon's edits there.

The third problem (arrows being much too large) was caused by the changes to the gadget trying to work around the first problem, and it happened because the gadget is loaded by default, but it's only supposed to have an effect when "Watchlist → Use non-JavaScript interface" is selected in preferences. The newly added rules always applied, and they were not compatible with standard MediaWiki watchlist styling (only with the gadget's).

@Trappist_the_monk @Novem_Linguae after the latest changes by @matmarex is this now working for you?

The flushing/alignment problem will be addressed in the core software as part of https://gerrit.wikimedia.org/r/c/mediawiki/core/+/981405

Change 981405 merged by jenkins-bot:

[mediawiki/core@master] Restore fixed width and height, direction of arrow on change list pages

https://gerrit.wikimedia.org/r/981405

Change 982244 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@wmf/1.42.0-wmf.9] Restore fixed width and height, direction of arrow on change list pages

https://gerrit.wikimedia.org/r/982244

Change 982244 merged by jenkins-bot:

[mediawiki/core@wmf/1.42.0-wmf.9] Restore fixed width and height, direction of arrow on change list pages

https://gerrit.wikimedia.org/r/982244

Mentioned in SAL (#wikimedia-operations) [2023-12-13T21:50:52Z] <jhuneidi@deploy2002> Started scap: Backport for [[gerrit:982244|Restore fixed width and height, direction of arrow on change list pages (T352456 T353099)]]

Mentioned in SAL (#wikimedia-operations) [2023-12-13T21:52:18Z] <jhuneidi@deploy2002> jhuneidi and jdlrobson: Backport for [[gerrit:982244|Restore fixed width and height, direction of arrow on change list pages (T352456 T353099)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2023-12-13T22:01:21Z] <jhuneidi@deploy2002> Finished scap: Backport for [[gerrit:982244|Restore fixed width and height, direction of arrow on change list pages (T352456 T353099)]] (duration: 10m 28s)

Apparently not fully fixed. Configuration same as stated in the OP. Here are some images

In this image the arrow is correctly formed

en.wiki_watchlist_markers_2023-12-22a.png (50×356 px, 3 KB)

I then click the arrow to get the expand list of changes; also correctly formed:
en.wiki_watchlist_markers_2023-12-22b.png (47×361 px, 3 KB)

If I do not click on a specific change but instead click on the Wikipedia:Village pump (technical) link, I get this as a brief flash before MediaWiki serves me the WP:VPT page:
en.wiki_watchlist_markers_2023-12-22c.png (50×361 px, 3 KB)

That is not correct. When I return to my watchlist from WP:VPT, the big black arrow is still present and the list of changes still expanded. Clicking on the big black arrow collapses the list but the big black arrow remains as a down-pointing big black arrow.

Watchlist arrows are broken again. The fix for the comment above has broken the watchlist arrows for me. Please see https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Watchlist_arrows_broken_again. Thanks for your help!

if you could comment on the ticket with details about what gadgets and scripts you have installed maybe we can get to the bottom of this

  • vector 2010

image.png (651×1 px, 109 KB)

en.wikipedia.org_wiki_Special_Preferences (1).png (2×1 px, 549 KB)

image.png (1×1 px, 278 KB)

The obvious difference between my settings and Editor Novem_Linguae's settings is that I have checked 'Use non-JavaScript interface' and Novem_Linguae has not.

I also see the large, downward-facing black triangle after clicking directly on https://en.wikipedia.org/wiki/User:AnomieBOT/TPERTable when it is listed in my Watchlist as having changes.

  • Vector 2022
  • Watchlist set to "expand to show all changes", "Use non-Javascript", "Display green collapsible arrows and green bullets", and somewhere I'm pretty sure I checked a box to group changes (which frustratingly groups changes to the same page by calendar day, but that's a different bug / feature request)

Screen Shot 2023-12-22 at 21.48.36 .png (184×1 px, 105 KB)

I can reproduce that. Please refer to my previous comment for the settings needed to replicate the problem (T352456#9393072).

Change 985408 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/core@master] Fix classes when marking Special:Watchlist entries as seen

https://gerrit.wikimedia.org/r/985408

Change 985408 merged by jenkins-bot:

[mediawiki/core@master] Fix classes when marking Special:Watchlist entries as seen

https://gerrit.wikimedia.org/r/985408

Thanks for review @Jdforrester-WMF. The follow-up fix will be deployed next week on the usual schedule, reaching English Wikipedia on Thursday, 11 January. It's only fixing a minor cosmetic problem so I don't think it's worth scheduling a separate deployment for it.

And broken once again... Please stop fixing stuff that ain't broke.

This image shows two arrow indicators. The top arrow is pointing down when it should be pointing right (it should be dark). The bottom arrow is a mix of dark and green; should be green pointing right:

broken_watchlist_indicators_2024-02-29.PNG (101×327 px, 4 KB)

This image is more-or-less same as the previous image except at 250% zoom. The bottom arrow shows that there is a green right-pointing arrow there:

broken_watchlist_indicators_2024-02-29_zoomed.PNG (233×798 px, 23 KB)

@Trappist_the_monk Can the new problem be reproduced without the enwiki gadgets (e.g. using the safemode=1 parameter: https://www.mediawiki.org/wiki/Manual:Safemode)?

If not, can you report it on the village pump there instead?

apparently it has now been fixed (thank you) so reclosing

! In T352456#9589102, @Novem_Linguae wrote:

Likely root cause: https://en.wikipedia.org/w/index.php?title=MediaWiki:Gadget-WatchlistGreenIndicators.css&curid=46816769&diff=1211100372&oldid=1191327813

@Jdlrobson

Not root cause. I fixed this.

@Trappist_the_monk please assume good faith. Nobody is intentionally breaking things here. The reason this is breaking is this is a gadget made 9 years ago that nobody other than Wikimedia staff is maintaining.

If you care about this gadget (and it sounds like you do given this has come up a few times) I would highly recommend starting a discussion on the village technical pump asking someone on wiki to step up to become a maintainer. The gadget can likely be greatly simplified from the code that was created back in 2015.

@Jdlrobson

Not root cause. I fixed this.

Ah, I see. I apologize for jumping to conclusions. Thank you for fixing it!

No problem. For context, the regression here related to the platform improvement (T356540) which allows us to easily color SVGs using background color. If I was the maintainer of the gadget, I would propose removing all the use of background-images in that gadget.

Currently this looks like

Screenshot 2024-03-01 at 8.34.11 AM.png (146×460 px, 13 KB)

and requires the following CSS:

.mw-rcfilters-disabled .mw-enhancedchanges-arrow-space {
    transform: none !important;
    background-size: auto !important;
}

.mw-rcfilters-disabled .mw-enhancedchanges-checkbox:not(:checked) + .mw-changeslist-line-watched .mw-enhancedchanges-arrow {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/0/03/Vector_right_arrow_changed.svg);
    mask-image: none;
    -webkit-mask-image: none;
    background-color: transparent;
}

To look like

Screenshot 2024-03-01 at 8.35.21 AM.png (230×1 px, 72 KB)

would only be one line of CSS:

..mw-rcfilters-disabled .mw-enhancedchanges-checkbox:not(:checked) + .mw-changeslist-line-watched .mw-enhancedchanges-arrow {
  background:green;
}

Screenshot 2024-03-01 at 8.33.27 AM.png (92×94 px, 4 KB)