Use OOUI icons in WikiEditor
Closed, ResolvedPublic

Description

We have icons for all of these actions in the wikimediaui theme, and WikiEditor now supports OOUI icons.

Before
After
Esanders created this task.Mar 29 2018, 2:53 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 29 2018, 2:53 PM

Change 422943 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/WikiEditor@master] Use OOUI icons for advanced format & size tools

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

The above patch just changes the format and size tools:

Change 423049 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/WikiEditor@master] Use OOUI icons for bold & italic

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

Bold & italic:

Change 422943 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Use OOUI icons for advanced format & size tools

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

Change 424036 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/WikiEditor@master] Convert remaining tools to OOUI

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

And the rest:

Note that the reference tool is using the 'book' icon, to minimise disruption, however this is not consistent with VE.

matmarex updated the task description. (Show Details)Apr 4 2018, 7:30 PM

This is a duplicate of T91467: Use consistent icons for same/similar functions between editors. I'm not sure which way is more convenient to merge them.

T148281: Redesign WikiEditor to look like VisualEditor might also be a duplicate, but it has unclear scope.

Change 423049 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Use OOUI icons for bold & italic

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

They both broader in scope than this task.

stjn awarded a token.Apr 10 2018, 11:40 AM
stjn added a subscriber: stjn.Apr 10 2018, 11:43 AM

Saw some of these changes on Translatewiki, is there an expected time when this will be deployed on Wikipedias?

TheDJ added a subscriber: TheDJ.Apr 10 2018, 12:09 PM

Speaking of.. the look on monobook at translatewiki.net, looks substantially different to me from @Esanders his screenshots..

That seems as if it might be unintentional. Also I note that the new elements don't have textual content, only a title= attribute. As such this is a reduction in accessibility from before.

stjn added a comment.Apr 10 2018, 12:14 PM

It seems like Translatewiki uses old OOUI icons and Esanders uses new ones (see M229). Old ones have padding around them so they generally look smaller in such settings. Probably should be fixed on Translatewiki's end.

Looks like we just forgot to override some margin on OOUI buttons that is only present in Apex theme (used by MonoBook).

Change 425315 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/WikiEditor@master] Fix margin on OOUI icon buttons in Apex theme (MonoBook)

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

Also I note that the new elements don't have textual content, only a title= attribute. As such this is a reduction in accessibility from before.

You should raise that upstream in OOUI with @Volker_E. I don't know what the latest best practices are for accessible buttons.

Also if you are referring to some icons being different in Apex that's because they are, but that will soon change with T169890.

Change 425315 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Fix margin on OOUI icon buttons in Apex theme (MonoBook)

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

Margin of the top bar icons should be a bit increased.

Change 424036 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Convert remaining tools to OOUI

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

Deskana triaged this task as Normal priority.Apr 16 2018, 2:08 PM
Deskana closed this task as Resolved.

The syntax highlighting icon (not shown in the images at the top of the task) and the switch-to-visual-editing icon look very similar. When we tell people to "click the pencil icon", they're going to get confused

See this screenshot, from https://en.wikipedia.org/w/index.php?title=Testing&redirect=no&action=submit

@Whatamidoing-WMF I don't see any good solution on the icon side of things, both are the best possible outcome we've got following our design principles. “Click the black pencil in the corner” would be my first response.

@Whatamidoing-WMF Previously discussed on T174145: Use more individual icon than pencil… Maybe we should reopen that.

I don't think this would lead to any improvement…

Elitre added a subscriber: Elitre.May 2 2018, 2:27 PM

I don't think this would lead to any improvement…

TBH the highlighter icon in B&W doesn't seem so clear to me. I feel like I'd understand it more if I saw just the tip and the large ink mark such markers leave. A quick search engine lookup also seems to just show how conceptually a highlighter seems more tied to a larger and peculiar shape.