@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

Love it.

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!

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.

+1 to @DannyH

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.

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

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

Not very related but WikiCite happens to use the same logo.

@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?

In T164441#3393091, @Dvorapa wrote:

@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.

In T164441#3393147, @Niharika wrote:

In T164441#3393091, @Dvorapa wrote:

@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.

Hi and thank you for the reopening.

In T164441#3393091, @Dvorapa wrote:

@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

In T164441#3470471, @Nirzar wrote:

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?

In T164441#3470634, @Pginer-WMF wrote:

Here it is the SVG version for the icon:

Highlight.svg332 BDownload

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

Highlight-RTL.svg337 BDownload

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.

:( though ideal, it's kinda blocked on T147494: Refine WMF icon set to remove teardrop stylistic detail

In T164441#3471755, @Nirzar wrote:

:( though ideal, it's kinda blocked on T147494: Refine WMF icon set to remove teardrop stylistic detail

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.

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):

In T164441#3479621, @kaldari wrote:

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

Highlight-on.svg398 BDownload

Highlight-off.svg398 BDownload

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

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

Nice!

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