Replace CodeMirror icons with new icons
Closed, ResolvedPublic3 Story Points

Description

Per the design review, let replace the CodeMirror active and inactive icons with new icons that are more intuitive.

The new design is as seen here: https://wikimedia.invisionapp.com/share/25BK644SD#/232930653_default

Inactive state:

Active toggle state:

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

@Jdforrester-WMF
yeah we will use the same icon and highlight but the background would be different given the context of a 3d toolbar in old wikitext.

https://wikimedia.invisionapp.com/share/25BK644SD#/232930653_default

wait for 1s when you click on the link. a popover with first time user shows up explaining what's the new tool. you can say try it or no thank to set expectation around what the feature does

DannyH updated the task description. (Show Details)May 11 2017, 1:18 AM
DannyH updated the task description. (Show Details)
DannyH added a subscriber: DannyH.

Updated the ticket with the new designs by @Nirzar from T163919: Design review for CodeMirror extension

Buttonns in classic toolbar:

Buttons in WikiEditor toolbar are smaller than on the mock. I can hack it, but not sure that it is good idea.

Is it ok?

Change 353493 had a related patch set uploaded (by Pastakhov; owner: Pastakhov):
[mediawiki/extensions/CodeMirror@master] Replace CodeMirror icons with new icons

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

These look good to me. @Nirzar, any thoughts?

Looking good

Two things -

  • Use #36C (foundation blue) for highlight of the icon when selected?
  • The selected background is padded, it should be flush. as in the same height as the toolbar. < this is for advance wikitext editor

@Nirzar

  • I use mirrored background of toolbar, should I use one color #36C?
  • This is not possible by standard way since buttons are padded. As I wrote, I can try to hack it but seems it not good idea.

This is not possible by standard way since buttons are padded. As I wrote, I can try to hack it but seems it not good idea.

oh looks like i missed your earlier comment.

about the blue color.. let's do 36C as when we tweak the colors in actual syntax highlighting we will be using 36C. I will create subtask for text styles

Thank you for working on this :)

Patch Set 3: use the color `#36С for the enabled button
Animated (3s)


Patch Set 1: used standard color of progressive icons: #0000da

looks good to me!

Quiddity added a comment.EditedMay 16 2017, 6:51 PM

I'm still concerned that using {} as the label, will make editors think that the button's function is to either add the raw "{}" text to the text-area, or to open a template-wizard.
(In the WikiEditor toolbar, the mockup places the button next to the "Reference" insertion wizard, hence especially confusing)

I hesitantly suggest using {[< or something like that - anything that is not a standard wikitext string, but alludes to a variety of wikitext features.

@Quiddity I'm not really worried about that. It's a beta feature, there's a tooltip, and there's an explanatory popup when you first turn it on. Even then, if somebody clicks it without understanding what it is, it's an easily reversible change. I appreciate that you're watching out for these things, but I think this time we've got it covered.

Change 353493 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Replace CodeMirror icons with new icons (#36C)

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

If folks do object to the {} icon, I would suggest revisiting the highlighter icon:

This is very similar to the icon that Apple uses for highlighting:

We also already have it in OOUI (we use it in RC Filters), so it's pretty trivial to switch to if wanted.

kaldari added a comment.EditedMay 26 2017, 4:55 PM

@Nirzar: Small problem. There is a very similar icon being used for the refToolbar Gadget (when wizards are turned off):


The actual icon is https://en.wikipedia.org/wiki/File:Curly_Brackets.svg.

Someone should suggest the ref gadget use a better icon, like the quotes we use for Cite.

Niharika reopened this task as Open.Jun 12 2017, 5:36 PM
Niharika moved this task from Archive to To be estimated/discussed on the Community-Tech board.

@Nirzar: Small problem. There is a very similar icon being used for the refToolbar Gadget (when wizards are turned off):


The actual icon is https://en.wikipedia.org/wiki/File:Curly_Brackets.svg.

This is a valid problem.

DannyH closed this task as Resolved.Jun 14 2017, 8:15 PM

It turns out that the refToolbar Gadget has been deprecated by the Editing team; we're not using it anymore. There's no problem with using the bracket icon. Closing the ticket as resolved.

DannyH moved this task from Epic backlog to Archive on the Community-Tech board.Jun 14 2017, 8:16 PM

@DannyH And do we need that switch on the edit bar? I think just checkbox in user preferences will do nicely. How often will users switch highlighting behavior - how often will they click on this?

@DannyH And do we need that switch on the edit bar? I think just checkbox in user preferences will do nicely. How often will users switch highlighting behavior - how often will they click on this?

Codemirror can potentially have issues on large articles. We haven't so far seen anything like it but it's possible. Also it can potentially have problems with the New Wikitext editor. The switch on the toolbar is important for that reason.

@DannyH And do we need that switch on the edit bar? I think just checkbox in user preferences will do nicely. How often will users switch highlighting behavior - how often will they click on this?

Codemirror can potentially have issues on large articles. We haven't so far seen anything like it but it's possible. Also it can potentially have problems with the New Wikitext editor. The switch on the toolbar is important for that reason.

I see, thank you for explanation

Not reopening this yet, but I talked with a volunteer yesterday and they could not figure out for a good few minutes which is the right icon. Here's a bit of my communication:

<drewmutt> This is what I'm seeing.. http://imgur.com/wC4XYWC
<Niharika> drewmutt: Click on the button with curly brace. { }
<Niharika> To the left of "Advanced"
<drewmutt> Ohhh..
<drewmutt> Man that's obscure.

And we got one comment here about it: https://meta.wikimedia.org/wiki/Talk:Community_Tech/Wikitext_editor_syntax_highlighting#Change_button_icon

I'm hesitant to rollout CodeMirror more widely without addressing this.

Niharika reopened this task as Open.Jul 20 2017, 10:45 PM
Niharika moved this task from Archive to Epic backlog on the Community-Tech board.

Hi and thank you for the reopening.

@DannyH And do we need that switch on the edit bar? I think just checkbox in user preferences will do nicely. How often will users switch highlighting behavior - how often will they click on this?

We really need edit bar switch, because sometimes it's better without highlighting. At the other hand I don't understand why do you need preferences checkbox. For me, it's 1. redundant, 2. harmful - a lot of people will not use the feature. It's better to remove this checkbox, or at least make it default.

We talked about the icon, and decided it was best to go with the Highlighter icon that Kaldari suggested. I'm putting this ticket into the sprint so we can switch the icon.

@Nirzar based on feedback and follow-up discussions, we've decided to switch to using the highlighter icon (Option C in your earlier list T164441#3240304). Can you please give us the new images for the icon (both on and off state)?

I'm aware that the highlighter icon is in OOUI library and we can construct the button in such a way that it uses the icon from the library but much of the current code relies on external images and I don't see any obvious advantages in spending time to refactor it for this.

@Niharika @Pginer-WMF is designing the highligher icon as we speak. just a coincidence, but we can start using it in product right away.. you will have the fresh icon :P

Hah, nice! Any chance we can get a sneak peek at how it's gonna look? :)

this is pau's mock

we were discussing it but he should have a final version today

this is pau's mock

we were discussing it but he should have a final version today

Looks nice. Thanks for sharing!

Here it is the SVG version for the icon:

...and in case an RTL version is needed:

Eventually this should replace the "highlight" icon in the icon repo.

@Amire80, is an RTL version needed?

Here it is the SVG version for the icon:

...and in case an RTL version is needed:

Eventually this should replace the "highlight" icon in the icon repo.

Thanks @Pginer-WMF! @Nirzar we'd want a blue-color version of these for the 'on' state. Can you help with those? Thanks!

Any changes to the icon should be pushed to the OOUI icon pack first, as the new wikitext editor is using OOUI icons. Once there we can duplicate the asset to WikiEditor if required.

How's that a blocker? These icons don't seem to have the teardrop stylistic detail so why can't we switch the old ones for these (or just add these to the pack)?

not a blocker for codemirror.. blocker for adding it to OOJSUI . we would like to do the batch update of all icons in OOJS UI when T147494 is resolved. or we can do ad-hoc but we have a process going on to update the icon sets and I would like to avoid one of changes to OOJS UI but if it's absolutely necessary I'll defer to @Volker_E

Given that the current state is already inconsistent, I'd say that it shouldn't be a blocker. Unless the process is very close to completion we should be able to continue making changes to the icons.

Nirzar added a subscriber: RHo.Jul 25 2017, 9:18 PM

that's possible. the process is not near completion. we will just have to keep an extra record of what has been shipped mid way. i guess that's not a big deal. waiting for reply from @Volker_E cc @RHo

It's fine for me to update just specific icons in OOjs UI before making them blockers for bigger issues. What I like to avoid is having updated icons outside OOjs UI before they are accepted and merged I the library.
As @Pginer-WMF is updating highlight icon I'm sure he's aware of RCFilters implied changes as well.

I think it is ok to update individual icons when needed. My main concern is not about the change in their shapes but the change in the canvas size. We are moving from a 24x24px canvas with a 20x20px effective area (including always a 2px margin around) to a 20x20px canvas were no additional margins for the icon shape are considered in the canvas (other than for optical adjustments).

Since the resulting shapes will be of equivalent size, there should not be much difference, but existing components need to consider the lack of internal margins to avoid icons becoming misplaced. Having old and new icons coexisting together adds some more complexity when dealing with this, but @Volker_E may have ideas on how to better deal with this already.

It looks like the icons Pau has supplied have the margin, so they should work fine with the existing icon scheme, AFAICT.

@Niharika: Here are blue and black versions (for the on and off states):


@Niharika: Here are blue and black versions (for the on and off states):


Thanks. Apparently I also need icons which conform to the classic editor icon styling. See https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/master/resources/images/old-cm-off.png and https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/master/resources/ext.CodeMirror.less#L24

Niharika claimed this task.
kaldari removed Niharika as the assignee of this task.Aug 1 2017, 11:06 PM
kaldari moved this task from In Development to Ready on the Community-Tech-Sprint board.
DannyH triaged this task as High priority.Aug 1 2017, 11:07 PM
DannyH lowered the priority of this task from High to Normal.Aug 1 2017, 11:58 PM
kaldari set the point value for this task to 3.Aug 1 2017, 11:59 PM

Change 369587 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[mediawiki/extensions/CodeMirror@master] Switch icons to 'highlighter' symbol

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

Samwilson claimed this task.Aug 2 2017, 3:23 AM
Samwilson moved this task from Ready to Needs Review/Feedback on the Community-Tech-Sprint board.
Samwilson added a subscriber: Samwilson.

I've added the new highlighter shape into the 5 different icons and generated the raster versions.

The PNG versions were created with inkscape --export-png=cm-icon.png cm-icon.svg etc.

I made a video:

kaldari closed this task as Resolved.Aug 2 2017, 5:18 PM

Change 369587 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Switch icons to 'highlighter' symbol

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

Change 370066 had a related patch set uploaded (by MaxSem; owner: Samwilson):
[mediawiki/extensions/CodeMirror@wmf/1.30.0-wmf.12] Switch icons to 'highlighter' symbol

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

Change 370066 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@wmf/1.30.0-wmf.12] Switch icons to 'highlighter' symbol

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

DannyH moved this task from Epic backlog to Archive on the Community-Tech board.