[go: up one dir, main page]

Page MenuHomePhabricator

Move titlebar above toolbar
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
alexhollender_WMF
Mar 10 2022, 7:02 PM
Referenced Files
F35179827: Screen Shot 2022-05-26 at 3.24.15 PM.png
May 26 2022, 7:26 PM
F35179829: Screen Shot 2022-05-26 at 3.24.08 PM.png
May 26 2022, 7:26 PM
F35106586: image.png
May 6 2022, 9:24 PM
F35106594: image.png
May 6 2022, 9:24 PM
F35106584: image.png
May 6 2022, 9:24 PM
F35098086: image.png
May 3 2022, 5:55 PM
F35073566: image.png
Apr 29 2022, 3:59 PM
F35072263: image.png
Apr 28 2022, 5:35 PM
Tokens
"Love" token, awarded by Volker_E."Love" token, awarded by Rexogamer.

Description

Description

image.png (420×2 px, 153 KB)

Currently, in legacy Vector, the toolbar (sometimes called the tab-bar) is above the titlebar. This approach, which follows from Monobook, helps create a frame around the content, separating it from the various navigation/menus/links that surround it. In new Vector we are taking a different approach to separating the content from the navigation/menu/links and no longer have the same need as previous skins for the toolbar to be above the titlebar. So we asked the question: should the toolbar remain above the titlebar? For the following reasons we think it makes sense to flip the order, so that the titlebar is above the toolbar:

  • In general we see the titlebar being useful to all users, whereas the toolbar is more relevant to experienced users and contributors. Therefore we think it makes sense to have the titlebar come first, and the toolbar below
    • Specific example: the titlebar now has the language switcher in it, and we think language switching is more valuable to most people visiting the site than the items in the toolbar
    • Possible future example: in the future we're hoping to add additional reader tools to the interface (such as Share, Font settings, etc.) and plan on putting them in the titlebar, next to the language switcher
  • From an information architecture standpoint the links and tools in the toolbar are related to the page you are on, so it makes sense to have the title above and the related links and tools below
  • From a readability standpoint it's nice to have the page title be the first thing you see
  • Our mobile skin, Minerva, shows the titlebar above the toolbar, and it's generally a best practice to be consistent when possible

Possible supporting evidence:

  • Timeless and Winter both place the titlebar above the toolbar
  • Google Docs places the page title above the toolbar

Design

image.png (380×1 px, 139 KB)

(no need to change any visual design at this stage)

Acceptance criteria

  • Make feature flag for the change and disable by default
  • Switch the titlebar above toolbar as per the design requirements above
  • Ensure banners appear above both title and toolbar
  • Ensure banners are full-width (should match the width of the site header, mock)
  • On special pages if there is only one tab, hide the whole tab bar
  • Create follow-up tasks for design refinements of tabs

Related Objects

Event Timeline

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

Yeh that's why I've moved this to blocked and assigned to myself while I work that out.

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

[mediawiki/skins/Vector@master] [Layout] Move tabs under title

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

@RHo @ovasileva @Jdlrobson another banner consideration: article-width, or full-width:

article widthfull width
image.png (1×2 px, 768 KB)
image.png (1×2 px, 1 MB)

My preference is for full width since the article width seems to slightly imply a relationship between the banner and the article which is not the case.

@Pcoombe - wanted to draw your attention to this task and see if the fundraising team has any specific requirements around width, positioning, etc

Jdlrobson renamed this task from Move titlebar above toolbar to [Feature flagged] Move titlebar above toolbar.May 3 2022, 5:44 PM
Jdlrobson updated the task description. (Show Details)
ovasileva renamed this task from [Feature flagged] Move titlebar above toolbar to Move titlebar above toolbar.May 3 2022, 5:44 PM
ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)

I think moving centralnotice & sitenotice banners above the title and tabs definitely makes more conceptual sense, and is also how it works on Minerva. The only downside I can see is it might slightly increase Cumulative Layout shift score, as a larger fraction of the viewport gets shifted by the banner bump. This would be pretty minor though, and I don't think it's a blocker.

For fundraising banners we might still want to A/B test injecting them at different positions in future, but we can handle that ourselves.

Re: full-width vs article width: full-width would be my preference. As Rita says, it makes the banner more distinct from the article, and we can probably reduce the height of many banners (and hence CLS) if we have the full width to play with. My only question is how it would interact with opening/closing the sidebar tools?

Change 789207 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [HTML] Refactor article tools and Content header templates

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

@alexhollender_WMF - wanted to highlight @Pcoombe's question on how the wider banner would interact with the main menu if it's at full width

Change 789207 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [HTML] Refactor Content header templates

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

@alexhollender_WMF - wanted to highlight @Pcoombe's question on how the wider banner would interact with the main menu if it's at full width

ah thanks for pointing that out, I missed it. I think it would work something like this:

floating menu overlaps bannerpinned menu is below banner
image.png (1×2 px, 1 MB)
image.png (1×2 px, 1 MB)

another state that I hadn't considered previously, though doesn't seem like an issue, is an article without a table of contents:

image.png (1×2 px, 1 MB)

@alexhollender_WMF - wanted to highlight @Pcoombe's question on how the wider banner would interact with the main menu if it's at full width

ah thanks for pointing that out, I missed it. I think it would work something like this:

floating menu overlaps bannerpinned menu is below banner
image.png (1×2 px, 1 MB)
image.png (1×2 px, 1 MB)

another state that I hadn't considered previously, though doesn't seem like an issue, is an article without a table of contents:

image.png (1×2 px, 1 MB)

@alexhollender_WMF - could you show an example of the current state? We'll be ready with this change before any changes are made to the main menu. Would the expectation still be that the main menu opens over the banner?

Change 790714 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Create feature flag for TitleAboveTabs feature

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

Change 790722 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Move page title above tabs

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

Jdrewniak subscribed.

Change 787800 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] [Layout] Move tabs under title

Reason:

FYI Jan

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

Change 790714 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Create feature flag for VectorTitleAboveTabs feature

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

@alexhollender_WMF - could you show an example of the current state? We'll be ready with this change before any changes are made to the main menu. Would the expectation still be that the main menu opens over the banner?

for the current state, when the menu is open it would be like this:

pinned menu is below banner
image.png (1×2 px, 1 MB)

Change 800111 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Move page title above article toolbar menus

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

Change 790722 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] [WIP] Move page title above tabs

Reason:

Abandon in favour of 800111

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

Jdlrobson claimed this task.
2) some special pages only have one element in the toolbar/tab-bar area
  • it seems like we have a choice to make here...can we safely remove it?
beforeafter (option 1)after (option 2)
image.png (1×2 px, 826 KB)
image.png (1×2 px, 874 KB)
image.png (1×2 px, 957 KB)

Just in case, some gadgets can be tied to this element. For example, https://ru.wikipedia.org/wiki/MediaWiki:Gadget-watchlist.js#L-498.

Notes from our sync just now:

  • We'd like the feature flag here to be shortlived
  • Alex will review patchdemo, and decide what is the minimum needed to ship this
  • Jon will code review and make roll out plan for testing this on some opt in wikis first to check if there are any bad gadget interactions.

While the change per se is needed and important, it looks bad combined with the gradients :( If this goes live in fawiki, I'll probably deploy a css change to remove the gradients until you remove those.

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

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/4c04867857/w/

@Ladsgroup we were just discussing that today, I think @alexhollender_WMF mentioned that we might want update the design before we deploy.
This first change is really about getting it into a production environment under a feature flag to see what breaks

@alexhollender_WMF This patchdemo shows the change with the TOC
https://patchdemo.wmflabs.org/wikis/4c04867857/wiki/Paris?useskin=vector-2022&titleabovetabs=1&tableofcontents=1
The position of the ToC has moved compared to the previous arrangement:
https://patchdemo.wmflabs.org/wikis/4c04867857/wiki/Paris?useskin=vector-2022&titleabovetabs=0&tableofcontents=1

Screen Shot 2022-05-26 at 3.24.15 PM.png (396×524 px, 61 KB)
Screen Shot 2022-05-26 at 3.24.08 PM.png (389×561 px, 63 KB)

but the TOC is still positioned below the title.

@Jdrewniak awesome, thanks for the patchdemo. looks like a great start.

I've setup the styling task and will add details next week: T309398: Article toolbar styling

cc @Jdlrobson @Ladsgroup @ovasileva

Change 800111 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Move page title above article toolbar menus

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

This can skip QA and design review as that will be done in T309398.

The feature shouldn't be enabled in beta cluster or production.
For sign off, please verify that this is true and that there are no visual regressions on pixel.wmcloud.org/

ovasileva claimed this task.

Confirming and signing off.

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

https://patchdemo.wmflabs.org/wikis/a40dc16d47/w/

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

https://patchdemo.wmflabs.org/wikis/4c04867857/w/