Page MenuHomePhabricator

Align issues on watchlist page with the icons/links
Closed, ResolvedPublic

Description

Reproduce:

  • Open a wiki where the flagged revision are enabled (for example de.wikipedia.org, fi.wikipedia.org) - it looks better on the English Wikipedia, there's some space between the MediaWiki:Flaggedrevs-watched-pending and the MediaWiki:Watchlist-summary messages.
  • Add some article with pending changes to your watchlist
  • Open your watchlist
  • "Edit watchlist" and "Preferences" links/icons almost overlaps with the Flaggedrevs-watched-pending message message

Another style problem, in Finnish language the text of edit watchlist is quite long, so it almost overlaps with the preferences icon.

Screenshot 2025-05-30 at 10-26-21 Tarkkailulista – Wikipedia.png (203×1 px, 32 KB)

Screenshot 2025-05-30 at 10-26-44 Watchlist - Wikipedia.png (187×1 px, 31 KB)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

I think I have addressed all comments on this ticket and on T395741: "Edit Watchlist" and "Preferences" links should be side by side when on left side. I will spin up a Patch Demo so you can test this. Let me know if you see any further issues.

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/ea8394e3b4/w/

Test wiki created on Patch demo by KGraessle-WMF using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/31ac51ff0f/w/

The patch demo looks pretty good to me, I can merge this in but would like @OTichonova to take a look too. Moving to design review.

Test wiki on Patch demo by KGraessle-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/31ac51ff0f/w/

Kgraessle changed the task status from In Progress to Open.Jun 6 2025, 5:02 PM

It looks like on the patch demo we're still seeing some word wrapping occur:

Screenshot 2025-06-06 at 11.57.40 AM.png (1×1 px, 189 KB)

Also, I think the icons are a bit too close together? I think there's 12px between the font, but not the icons.

Screenshot 2025-06-06 at 12.01.47 PM.png (104×197 px, 8 KB)

Change #1153694 merged by jenkins-bot:

[mediawiki/core@master] Watchlist - Fix alignment issues on preferences and edit buttons

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

It looks like on the patch demo we're still seeing some word wrapping occur:

Screenshot 2025-06-06 at 11.57.40 AM.png (1×1 px, 189 KB)

Also, I think the icons are a bit too close together? I think there's 12px between the font, but not the icons.

Screenshot 2025-06-06 at 12.01.47 PM.png (104×197 px, 8 KB)

I'll do this on a follow-up patch!

Change #1154355 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/core@master] Watchlist: Change margins and alignment for different skins

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

Test wiki created on Patch demo by KGraessle-WMF using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/cc4a35dac2/w/

This looks good to me, moving to design review so @OTichonova can give it a final review, thanks for all your work!

Change #1154355 merged by jenkins-bot:

[mediawiki/core@master] Watchlist: Change margins and alignment for different skins

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

This looks good to me, moving to design review so @OTichonova can give it a final review, thanks for all your work!

Thanks @Kgraessle, it is looking great! One small thing. Would it be possible to have the distance between the buttons and text be 16pts, right now the distance is pretty wide.

CurrentDesign
Group 13.png (381×909 px, 84 KB)
Frame 39.png (202×924 px, 24 KB)

This looks good to me, moving to design review so @OTichonova can give it a final review, thanks for all your work!

Thanks @Kgraessle, it is looking great! One small thing. Would it be possible to have the distance between the buttons and text be 16pts, right now the distance is pretty wide.

CurrentDesign
Group 13.png (381×909 px, 84 KB)
Frame 39.png (202×924 px, 24 KB)

The problem is that we need to keep that space because in other languages, the buttons' text is longer and takes most of the space there.

English

Screenshot 2025-06-10 at 11.52.53.png (178×982 px, 34 KB)

German

Screenshot 2025-06-10 at 11.53.06.png (204×971 px, 46 KB)

Finnish

Screenshot 2025-06-10 at 11.58.22.png (184×991 px, 40 KB)

Russian

Screenshot 2025-06-10 at 11.58.35.png (202×986 px, 45 KB)

Based on this, I see we still have to adjust the CSS to adapt to languages like Russian. I'll move this back to In Progress to see what I can do.

Just noting that test wiki looks good except that I can still see some funkiness on the mobile view with the finnish language:

image.png (394×1 px, 38 KB)

I wonder if we could just relocate the new "Preferences" link, into the top-bar beside the other links?
(And remove the new "Edit Watchlist" link+icon as that is a duplicate of the existing "View and edit watchlist" link in the top-bar?).
I.e. on narrow and wide screens:

image.png (489×450 px, 42 KB)
and
image.png (217×1 px, 36 KB)

It could potentially even completely-replace the "Clear the watchlist" link entirely, as that function is included on the Preferences page (at least on Meta-wiki! I assume it's there in default MediaWiki, too?), and I'd guess it is very rarely used(?).

I like Quiddity's idea of moving those two icon-links to the tab section, but I also thought of a couple challenges:

  1. Vector 2010 doesn't have watchlist tabs. So older skins would need some thought about what to do with the icon-links.
  1. If the tools menu is open in Vector 2022, it narrows the screen quite a bit. And I'm not sure wrapping tabs is a great visual look.

image.png (685×2 px, 147 KB)

I'm not opposed to some sort of implementation of this, but food for thought.

Oh, now I see that's where the duplicate "Edit" link is coming from - we already had it duplicated, and we're trying to make this additional "Preferences" link work with both Vector-2022 and Vector-legacy/Monobook/etc.
I wonder if the "Edit watchlist" link could simply be removed and implicitly replaced by the "Preferences" link in those skins?

E.g. I checked at the site https://wikiconference.org/wiki/Special:Watchlist (which is using older MediaWiki version) and at our wikis with ?useskin=vector (and monobook), and it seems like it could work design-wise, and still provides the same function for watchlist-editing (it's just one click further away, and I don't think it's core to anyone's daily-workflow which would necessitate direct access)? I.e. [EDIT: the top example should be labeled "vector-2022"]

image.png (926×1 px, 215 KB)

Oh, now I see that's where the duplicate "Edit" link is coming from - we already had it duplicated, and we're trying to make this additional "Preferences" link work with both Vector-2022 and Vector-legacy/Monobook/etc.
I wonder if the "Edit watchlist" link could simply be removed and implicitly replaced by the "Preferences" link in those skins?

E.g. I checked at the site https://wikiconference.org/wiki/Special:Watchlist (which is using older MediaWiki version) and at our wikis with ?useskin=vector (and monobook), and it seems like it could work design-wise, and still provides the same function for watchlist-editing (it's just one click further away, and I don't think it's core to anyone's daily-workflow which would necessitate direct access)? I.e. [EDIT: the top example should be labeled "vector-2022"]

image.png (926×1 px, 215 KB)

I could see this as a better solution, considering how I've been struggling to get just the right width for all languages. Question: Why would Monobook not have the`Edit Watchlist` button? I don't see any way to navigate to Special:EditWatchlist without that button.

Question: Why would Monobook not have the`Edit Watchlist` button? I don't see any way to navigate to Special:EditWatchlist without that button.

Ah, sorry, I think that's just my incomplete set of screenshots/annotations/notes being confusing.
I mean (if feasible):

  • In Vector-legacy & Monobook & etc, Do both of:
    • Leave the new "Preferences" link+icon where it is at the side.
    • And also remove the existing [old] "Edit watchlist" link, because that it now accessible via the Special:Preferences page itself, and isn't (AFAIK) a daily-use feature for anyone. That will save space. It's essentially a link-swap.
  • In Vector-2022: Either:
    1. Do the same thing.
    2. Or if it's easy to do unique things in that skin, then consider my earlier two suggestions. [I.e. Either (a) move the "Preferences" link to the top-bar (which would leave nothing behind, as the duplicate "Edit watchlist" could be removed), or (b) if space is needed, then do the same but also remove the old "clear the watchlist" button.]

E.g. mockups (edited-screenshots, where I've either deleted or cut&pasted things around...) -- 1, 2a, 2b:

image.png (892×1 px, 201 KB)

2a.png (892×1 px, 221 KB)

2b.png (892×1 px, 219 KB)

[Edit:] I.e. All of the Watchlist pages will have the "Preferences" link, and the top of that preferences page has all 3 feature-links:

image.png (261×1 px, 35 KB)

Question: Why would Monobook not have the`Edit Watchlist` button? I don't see any way to navigate to Special:EditWatchlist without that button.

Ah, sorry, I think that's just my incomplete set of screenshots/annotations/notes being confusing.
I mean (if feasible):

  • In Vector-legacy & Monobook & etc, Do both of:
    • Leave the new "Preferences" link+icon where it is at the side.
    • And also remove the existing [old] "Edit watchlist" link, because that it now accessible via the Special:Preferences page itself, and isn't (AFAIK) a daily-use feature for anyone. That will save space. It's essentially a link-swap.
  • In Vector-2022: Either:
    1. Do the same thing.
    2. Or if it's easy to do unique things in that skin, then consider my earlier two suggestions. [I.e. Either (a) move the "Preferences" link to the top-bar (which would leave nothing behind, as the duplicate "Edit watchlist" could be removed), or (b) if space is needed, then do the same but also remove the old "clear the watchlist" button.]

E.g. mockups (edited-screenshots, where I've either deleted or cut&pasted things around...) -- 1, 2a, 2b:

image.png (892×1 px, 201 KB)

2a.png (892×1 px, 221 KB)

2b.png (892×1 px, 219 KB)

[Edit:] I.e. All of the Watchlist pages will have the "Preferences" link, and the top of that preferences page has all 3 feature-links:

image.png (261×1 px, 35 KB)

I'm not sure we should remove the Edit Watchlist button on every skin, but I would love @OTichonova's input on this. I will upload a patch with my changes, where I experiment with removing the button in some skins. I'll create a PatchDemo so you can play around. Let me know what you think.

Change #1156605 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/core@master] PoC: Remove Edit Watchlist button on some skins

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

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/58ec1f9ca2/w/

Question: Why would Monobook not have the`Edit Watchlist` button? I don't see any way to navigate to Special:EditWatchlist without that button.

Ah, sorry, I think that's just my incomplete set of screenshots/annotations/notes being confusing.
I mean (if feasible):

  • In Vector-legacy & Monobook & etc, Do both of:
    • Leave the new "Preferences" link+icon where it is at the side.
    • And also remove the existing [old] "Edit watchlist" link, because that it now accessible via the Special:Preferences page itself, and isn't (AFAIK) a daily-use feature for anyone. That will save space. It's essentially a link-swap.
  • In Vector-2022: Either:
    1. Do the same thing.
    2. Or if it's easy to do unique things in that skin, then consider my earlier two suggestions. [I.e. Either (a) move the "Preferences" link to the top-bar (which would leave nothing behind, as the duplicate "Edit watchlist" could be removed), or (b) if space is needed, then do the same but also remove the old "clear the watchlist" button.]

E.g. mockups (edited-screenshots, where I've either deleted or cut&pasted things around...) -- 1, 2a, 2b:

image.png (892×1 px, 201 KB)

2a.png (892×1 px, 221 KB)

2b.png (892×1 px, 219 KB)

[Edit:] I.e. All of the Watchlist pages will have the "Preferences" link, and the top of that preferences page has all 3 feature-links:

image.png (261×1 px, 35 KB)

Hello @Quiddity, thank you for all the suggestions and input!
For Vector-legacy & Monobook: I agree that the button is redundant on the page. However, I was hesitant to remove it since we don't know how frequently it is used and why it was brought out onto the page previously. We could try and see if there is any pushback.

For Vector-2022: If preferences were moved into the tabs the the whole preferences would be inside of the watchlist page, which I wouldn't recommend since there are 10 tabs inside preferences, unless we are able to show just the watchlist preferences page under that specific tab. Also, if I remember correctly, there was some complexity around moving preferences into the tabs when this was discussed at the beginning of this task.

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/58ec1f9ca2/w/

Hi @Scardenasmolinar, thanks for the patchdemo. A couple of things.

  1. Can the distance between the icon and link be 8pts (it is a little less now)?
  2. Is it possible to align the button fully to the right side? Or in the case of RTL languages to the left? And there is a lot of space around it in Arabic.
EnglishArabic
Screenshot 2025-06-13 at 11.18.21.png (342×1 px, 83 KB)
Screenshot 2025-06-13 at 11.51.26.png (278×1 px, 61 KB)
  1. With a smaller screen the button moves. Can it be aligned to the left?
Screenshot 2025-06-13 at 11.47.17.png (1×2 px, 318 KB)
Iniquity added a subscriber: Scardenasmolinar.

Hi! I have a question, is it possible to use codex styles for these buttons? Because now:

  • the icon is not aligned with the text
  • there are no styles on hover
  • the distance between the buttons is wrong

image.png (140×348 px, 4 KB)

Hi! I have a question, is it possible to use codex styles for these buttons? Because now:

  • the icon is not aligned with the text
  • there are no styles on hover
  • the distance between the buttons is wrong

image.png (140×348 px, 4 KB)

This interface is already pretty messy to work with, so I would not suggest mixing and matching elements from different ui libraries. We definitively have an interest in taking advantage of codex, though!

@Scardenasmolinar is currently working on removing that edit watchlist link where it is redundant (eg. in new skins that already provide it). We'll try to address the issues with the preferences link, though.

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/ea8394e3b4/w/

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/58ec1f9ca2/w/

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/58ec1f9ca2/w/

Hi @Scardenasmolinar, thanks for the patchdemo. A couple of things.

  1. Can the distance between the icon and link be 8pts (it is a little less now)?
  2. Is it possible to align the button fully to the right side? Or in the case of RTL languages to the left? And there is a lot of space around it in Arabic.
EnglishArabic
Screenshot 2025-06-13 at 11.18.21.png (342×1 px, 83 KB)
Screenshot 2025-06-13 at 11.51.26.png (278×1 px, 61 KB)
  1. With a smaller screen the button moves. Can it be aligned to the left?
Screenshot 2025-06-13 at 11.47.17.png (1×2 px, 318 KB)

Thanks for pointing those errors out! I have uploaded the fixes to the patch, but patchdemo won't let me create a new patchdemo. I'll try again tomorrow morning. Meanwhile, this change is ready for engineering review!

Ok, I have tested this locally since patch demo is having issues.
I'm still seeing some word wrapping occur using de and ru:

Screenshot 2025-06-17 at 11.01.36 AM.png (1×1 px, 273 KB)

Screenshot 2025-06-17 at 11.00.42 AM.png (1×1 px, 268 KB)

But the icon alignment looks pretty good to me.

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/02f1802da7/w/

Test wiki on Patch demo by KGraessle-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/cc4a35dac2/w/

Ok, I have tested this locally since patch demo is having issues.
I'm still seeing some word wrapping occur using de and ru:

Screenshot 2025-06-17 at 11.01.36 AM.png (1×1 px, 273 KB)

Screenshot 2025-06-17 at 11.00.42 AM.png (1×1 px, 268 KB)

But the icon alignment looks pretty good to me.

I've adjusted some margins and widths and I think this is about as good as it will get. The main issue is that in some languages, the styling will look weird, but it's only in a small range of screen sizes.

Perhaps always putting the two buttons horizontal (one line, inline blocks) would simplify the code and solve the various issues. Now that the whitespace I was concerned about a few comments ago is fixed, I think that's a decent option (for any that aren't moved to tabs).

image.png (686×1 px, 63 KB)

Test wiki created on Patch demo by KGraessle-WMF using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/536c0d020d/w/

Change #1156605 merged by jenkins-bot:

[mediawiki/core@master] PoC: Remove Edit Watchlist button on some skins

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

Test wiki created on Patch demo by KGraessle-WMF using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/092a75f0bf/w/

Test wiki on Patch demo by KGraessle-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/092a75f0bf/w/

Test wiki on Patch demo by KGraessle-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/536c0d020d/w/

Scardenasmolinar moved this task from QA to Done on the Moderator-Tools-Team (Kanban) board.

Tested this on testwiki and everything is looking good. Will address remaining issues on T395741: "Edit Watchlist" and "Preferences" links should be side by side when on left side

Can anyone draft what changed, so that we can announce it in Tech News, please?

Can anyone draft what changed, so that we can announce it in Tech News, please?

@Trizek-WMF There is a short summary here under 'Access Preferences'.

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/02f1802da7/w/