Page MenuHomePhabricator

VisualEditor on mobile: Toolbar should be reduced in height
Open, Needs TriagePublic

Description

Current toolbar features 48px height 3em, which isn't only more than necessary in our own touch action requirements, but also seems to be choosen only as approximation.
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blame/master/resources/mobile.editor.ve/editor.ve.less#L51

Proposal

Proposed is to reduce the toolbar to OOUI normal mobile toolbar pattern size of maximum 40px, while retaining the label at 16px font-size.

Event Timeline

Volker_E created this task.Nov 8 2018, 1:26 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 8 2018, 1:26 AM

Change 472370 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] [WIP] Reduce editor toolbar size

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

This is also the size non-OOUI ovelays in MobileFrontend. Seems like a pretty big change with lots of knock on effects, but in principle I think we should be considering if we can get away with smaller buttons. By comparison the tools in GoogleDocs mobile app are much smaller than ours.

Current toolbar features 48px height 3em, which (…) seems to be choosen only as approximation.

No, it's actually supposed to be exactly 3em high, because VE's desktop toolbar is also 3em high, and we would have to very carefully override a whole bunch of weird ugly CSS if we wanted the mobile one to have a different height. See T190596 / https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/450580. I guess you're discovering now how weird and ugly it is :)

This is also the size non-OOUI ovelays in MobileFrontend. Seems like a pretty big change with lots of knock on effects (…)

All other mobile overlay headers (including the mobile wikitext editor) use height of 3.35em / 53px (no idea where this value comes from). So changing this one shouldn't affect other ones. But it's still difficult/a lot of work due to having to override nasty VE toolbar styles.

pmiazga moved this task from Needs triage to Triaged on the Mobile board.Nov 9 2018, 8:35 PM

[…] on target sizes

Yes, we were there – in T101409.
Let's compare with interaction elements in mobile browser header bar (Firefox) and with keys on open keyboard on a modern Android phone latest Android and high-density display:

Latter with dramatization for better insight. Those buttons are fulfilling those requirements on one axis. We should, given the very small vertical space left, do not more than that. And with 5 buttons that seems reasonable even when we're taking even smaller devices into account.

Update 2019-03-19:


8px padding for the edit area, 16px for the buttons in the toolbar resulting in 56px height!

The wikitext editor toolbar (seen in this screenshot) has always been larger than the visual editor toolbar (discussed previously). See T215426.