Page MenuHomePhabricator

Move the PersonalMenu to the header
Open, LowPublic

Description

Next steps:
T246420: Limit content width, and refine alignment & styling of relevant elements
T249363: Move the existing search to the header in preparation for Vue.js search development

Closely related:
T256895: Simplify logo CSS
T257143: Clean up the technical debt and inconsistencies of notification icon (Echo badge) positioning in different skins
T257144: Clean up user page link icon positioning in Vector

Motivation

As a user I'd like to see the links and gadgets on the top right presented in a way that does not conflict with other elements in the UI.

  • The new layout is responsive, the links should be reasonably positioned on very narrow and very wide screens too.
  • The links and gadgets in PersonalMenu can range from just a few to numerous.
  • Later in the project some user menu links will be gathered into one drop-down menu. The layout should be prepared for this.
Requirements
  • Personal menu is kept within the boundaries of the header.
  • The menu containers's centerline matches the Logo's centerline.
  • The menu items' centerline - if laid out in one row - matches the Logo's centerline.
  • Menu items wrap if the width is restricted.
  • Menu items are aligned to the right edge even when wrapped.

Patch (continuously refined since Apr 3): 585629

Related Objects

Event Timeline

Demian created this task.Jul 1 2020, 4:34 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 1 2020, 4:34 PM

CC @alexhollender Bringing this to your attention in case there's anything you'd like to add to the description.

This change was recognized as helpful to @nray's work in the content-width patch (ref). As that work is now high priority and planned to be merged in 1+ week (IMO early next week), I've readied this patch for merge. As the patch has been finalized 1-2 months ago and kept up-to-date since, I believe it can be merged within a few days max. I've created this task to discuss any final thoughts about this patch.

Change 585629 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [modern] Move the PersonalMenu into the Header

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /585629

Demian added a comment.Jul 1 2020, 5:32 PM

Thanks! Will look into it.

Additional screen from demo to show the expected mid-term outcome (as long as personal menu isn't in place):

Demian added a comment.Jul 3 2020, 3:32 PM

Can't reproduce. The centerline is properly aligned in the demo: http://patchdemo.wmflabs.org/wikis/c5dd0e27a43e84fe7724e7084d6b6cef/w/index.php/Main_Page
Check whether the wrong commit is checked out again. Check the patchdemo, if the issue shows up there: what browser, what's the cause? (it's not happening for me)

Additional screen from demo to show the expected mid-term outcome (as long as personal menu isn't in place):

That's a demo for T249363: Move the existing search to the header in preparation for Vue.js search development
Resizing the header - necessary for the alignment shown in the shot - is in scope for the patch on that ^^ task: 602848.

To avoid scope creep, that's not part of this patch. The target of this task is just moving the PersonalMenu to achieve dynamic layout for later implementing proper responsive breakpoints.

The requests on patch has been answered.

@Demian From the [[ URL | patch demo ]] linked by you above in latest Chrome/macOS:


Same is true for Firefox.

Demian updated the task description. (Show Details)Jul 3 2020, 11:06 PM
Demian moved this task from Incoming to In progress on the User-Demian board.
Demian added a comment.EditedJul 5 2020, 3:26 PM

@Volker_E new PS is uploaded to fix the misalignment.
There was a +0.25em (3px) misalignment between the Logo and PersonalMenu centerline, that I didn't intend to change for the following reasons:

  • It's not noticeable from a distance as the Wordmark vs Tagline imbalance shifts the perceived centerline down.
  • Per previous instruction to not change the PersonalMenu's internals I intentionally avoided doing that.

I've searched for a specification of the alignment requirements in the follow-up task T249363, it's not defined.
These images above the red lines are marking 3 different alignments. It's unclear whether centerline or baseline alignment is the expectation. I prefer not to have to do guesswork as it's a sure path to errors and misunderstandings. I assumed the centerline alignment that was discussed in various threads still stands and aimed for that.
Note that when wrapped, the whole menu's centerline between the two rows is aligned as there is no space for any other layout. Changing the header's size is the scope of the SearchBox patch.

The misalignment was caused by the padding-top: 0.5em !important; rule in patch 467551.
This was a strong code smell, interacting in complex ways with other padding, margin and top rules of menu items to achieve a delicate, fragile alignment.
To remove that one 0.5em rule, I had to clean up and simplify the layout of all menu items. The original layout is preserved in legacy. The changes work there too, testing that and backporting can be done as simply as replacing 'legacy/Menu.less' with 'Menu-modern.less' in 'skin-legacy.less'.
I reckon there's a history there (T207075). Do you want me to pay attention to any specific complications, corner-cases that you're aware of and I'm not?

Tl;dr: the alignment of PersonalMenu items (+ Echo icons) is a big stack of technical debt that I've cleaned up a few times in different POCs. This work should benefit the project, therefore I intend to make a ticket for cleaning up the menu items and Echo icons. Would you endorse such project and review the patches?

Demian updated the task description. (Show Details)Jul 5 2020, 4:11 PM
Demian updated the task description. (Show Details)Jul 5 2020, 4:18 PM
Demian renamed this task from Adjust positioning of PersonalMenu for the new layout to Move the PersonalMenu to the header.Jul 6 2020, 6:28 AM
Demian triaged this task as High priority.
ovasileva lowered the priority of this task from High to Low.Jul 6 2020, 9:51 AM

Change 609801 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [less] Add mediawiki.mixins.flex-align.less

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

Change 609881 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [WIP] [modern] PersonalMenu layout cleanup

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

Demian raised the priority of this task from Low to High.Jul 7 2020, 4:04 PM

@Aron Moving the personal tools into header seems like a reasonable intermediate step if the remaining questions about positioning and code are resolved.

The remaining questions have been resolved swiftly. As the content width patch is high priority, setting this intermediate step to high as well, pending weekly branch split.

Change 610187 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Move the personal tools and search into header

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

Demian added a subscriber: Jdlrobson.EditedJul 7 2020, 11:31 PM

@Jdlrobson There is a fully fleshed-out implementation reviewed by 2 persons that you've promised to review for 2 months. Is there any benefit in working on a competing, half implementation instead of reviewing one that's ready?

Jdlrobson added a comment.EditedJul 8 2020, 5:33 AM

Firstly sorry, that patch should have been associated with T249363. My main focus is turning towards the search and trying to understand the relationship between personal tools and understand the trade offs of moving search without personal tools or moving them together.

Is there any benefit in working on a competing, half implementation instead of reviewing one that's ready?

Yes. Lots of benefit and I highly encourage it. Multiple proposals are always welcomed and help us get to the right solution. I've abandoned plenty of patches in the past for better solutions. Hopefully you can tell me why you feel it's "half implemented" and that will help me with understanding the solutions you've come up to. The end result may be one of them, a hybrid of the two approaches or something completely different. Code review is about collaboration in my mind not a one-way street.

Right now as I am able to turn my attention to the search task a(T249363) and your solution I am struggling to understand the approach taken there. I should note your patch for that task is also a WIP so my understanding was we hadn't come up with a final solution yet.

ovasileva lowered the priority of this task from High to Low.Jul 8 2020, 7:58 AM

Change 585629 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [modern] Move the PersonalMenu into the Header

Reason:
Done in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /610187

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