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/

Change #1153694 merged by jenkins-bot:

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

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

In T395646#10891731, @Kgraessle wrote:

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

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

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

In T395646#10895537, @Kgraessle wrote:

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.

Current	Design

In T395646#10900102, @OTichonova wrote:

In T395646#10895537, @Kgraessle wrote:

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.

Current	Design

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

German

Finnish

Russian

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.

@Scardenasmolinar Okay, thank you!

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

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:

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.

2. 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.

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"]

In T395646#10911161, @Quiddity wrote:

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"]

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:

[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:

In T395646#10911657, @Quiddity wrote:

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:

[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:

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/

In T395646#10911657, @Quiddity wrote:

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:

[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:

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.

In T395646#10911789, @PatchDemoBot wrote:

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.

English	Arabic

3. With a smaller screen the button moves. Can it be aligned to the left?

In T395646#10915327, @Iniquity wrote:

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

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/

In T395646#10913484, @OTichonova wrote:

In T395646#10911789, @PatchDemoBot wrote:

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.

English	Arabic

3. With a smaller screen the button moves. Can it be aligned to the left?

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:

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/

In T395646#10924471, @Kgraessle wrote:

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

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).

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/

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

In T395646#10973093, @Trizek-WMF wrote:

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'.

Thank you, added.

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

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