Page MenuHomePhabricator

Remove borders from toolbars in WMUI
Closed, ResolvedPublic

Assigned To
Authored By
Esanders
Sep 4 2019, 3:34 PM
Referenced Files
F31546592: image.png
Feb 4 2020, 1:43 AM
F30200353: image.png
Sep 6 2019, 12:19 PM
F30200343: image.png
Sep 6 2019, 12:19 PM
F30200349: image.png
Sep 6 2019, 12:19 PM
F30200346: image.png
Sep 6 2019, 12:19 PM
F30200355: image.png
Sep 6 2019, 12:19 PM
F30200340: image.png
Sep 6 2019, 12:19 PM
F30229780: image.png
Sep 5 2019, 1:23 PM
Tokens
"Like" token, awarded by Jdforrester-WMF.

Description

When VE toolbars were upstreamed to OOUI it was with the Apex theme which doesn't show any borders by default (only on hover):

image.png (61×590 px, 5 KB)

At some point this was replaced with the edge to edge square tools of MediaWikiUI (now WMUI), which added vertical borders between all tool groups, however in VE-MW, almost every tool is in its own group (the exception being undo/redo):

image.png (59×597 px, 5 KB)

Various teams have independently come to the conclusion that these borders just add clutter. First in Flow:

image.png (195×179 px, 4 KB)

And recently the editing team on mobile: T231815 - the comparative analysis on that ticket shows it is more common to have fewer borders in editing toolbars.

Removing the borders results in a cleaner look that is still mostly visually parseable:

image.png (58×980 px, 8 KB)

The one case that might be questionable is the "Paragraph" dropdown, where the label becomes slightly disconnected from the dropdown indicator.

Event Timeline

I think removing borders could be a reasonable approach in the current way grouping is done, with exceptions, the label only elements “Paragraph” and “Insert”.
Specifically Paragraph with its width and indicator being closer to the text styles tool might result in more confusion.
For example we have to deal with such treatment:

image.png (174×1 px, 17 KB)

This is what I meant by

The one case that might be questionable is the "Paragraph" dropdown, where the label becomes slightly disconnected from the dropdown indicator.

I don't think "Insert" (or list tool groups) needs special treatment, but "Paragraph" (a menu tool group) needs to be fixed width as the displayed value can change, so may need different treatment.

One option would be keeping the borders on MenuToolGroups:

image.png (67×980 px, 7 KB)

I think it might be clearer to leave the border on the right of special character and the borders for all four items on the right in.

I don't think the action toolbar tools (on the right) need borders, see other page-level toolbars (top rows):

Comparative analysis:

Google docsMS WordDropbox paper
image.png (80×566 px, 5 KB)
image.png (63×540 px, 5 KB)
image.png (51×536 px, 5 KB)
image.png (60×538 px, 7 KB)
image.png (66×540 px, 2 KB)
image.png (69×539 px, 9 KB)
JTannerWMF moved this task from Incoming to Investigating on the VisualEditor (Current work) board.
JTannerWMF subscribed.

Putting this in investigating since @Esanders is still getting input on it

I think it would be more consistent to remove borders from all tool groups (except menus) by default, then if individual products have use cases to add them back in they can. We could even add an API for manual spacers.

Change 565373 had a related patch set uploaded (by Esanders; owner: Esanders):
[oojs/ui@master] WMUI: Remove border from all toolGroups except 'menu'

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

Like I've shared in T232003#5465798 it's not uncommon to have nothing in the format toolgroup and the dropdown indicator would be the only thing?
I feel putting a border to the right of undo/redo to separate the whitespace there and possible one at the end seems more like a „clean“ (how do we settle on what's clean? ;) ) version that is clearer to users…

Like I've shared in T232003#5465798 it's not uncommon to have nothing in the format toolgroup and the dropdown indicator would be the only thing?

This happens when you select across multiple sections (heading + paragraph). It looks fine to me:

image.png (67×980 px, 6 KB)

I feel putting a border to the right of undo/redo to separate the whitespace there and possible one at the end seems more like a „clean“ (how do we settle on what's clean? ;) ) version that is clearer to users…

Not sure I understand what you are describing. There is a border to the right of redo in the current proposal:

image.png (67×980 px, 7 KB)

Change 565373 merged by jenkins-bot:
[oojs/ui@master] WMUI: Remove border from all toolGroups except 'menu'

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

Change 570418 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.36.4

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

Change 570418 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.36.4

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

Change 570482 had a related patch set uploaded (by Esanders; owner: Esanders):
[VisualEditor/VisualEditor@master] Change toolbar border hack to add borders instead of remove them

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

TODO: Remove border:0 overrides in various projects (VE mobile, Flow, DiscussionTools, CX?)

Change 570482 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Change toolbar border hack to add borders instead of remove them

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

Change 570512 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Flow@master] Remove unnecessary toolbar overrides

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

Change 570513 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/ContentTranslation@master] Remove unnecessary border:0 overrides

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

Change 570512 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Remove unnecessary toolbar overrides

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

Change 570513 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Remove unnecessary border:0 overrides

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

Change 570686 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (624ec74b7)

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

Change 570686 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (624ec74b7)

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

Volker_E assigned this task to Esanders.
Volker_E triaged this task as Medium priority.
Volker_E moved this task from Backlog to OOUI-0.36.4 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.36.4); removed OOUI.

Seems fully resolved now.