In T174145#4542977, @thiemowmde wrote:

Instead of bothering you with another duplicate of this ticket, I'm going to reopen it, because I find the icon heavily misleading and actually stressful.

I totally agree with that.

There is more annoying accordance with some other old usual icons, similar to any signing feature.

Also, the very similar editor switch icon could be replaced by a cut mix from Visual and Source editing.

The origin for the suggestion for this icon was clear better T164441#3280047 (from @kaldari). It has a marker line. So I suggest this icon:

I agree that the current icon is completely unintuitive. This is my suggestion for the best way to indicate highlighting without using any color:

(No idea why this happened.)

UI standardisation tasks shouldn't be tagged against the OOUI library until a decision has been made that specifically something should change there, rather than just "somewhere".

This is not about "somewhere" but about two icons that are both part of OOUI: https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop#demo-section-editing-styling

In T305424#7857095, @MusikAnimal wrote:

... In either case, T174145: Our standard highlight icon (used to enable/disable CodeMirror) cdxIconHighlight looks too much like our standard edit icon, cdxIconEdit should be addressed first. Community Tech has its own designer now so we can see what he thinks.

@MusikAnimal Is there any update on this?

In T174145#8154506, @SD0001 wrote:

In T305424#7857095, @MusikAnimal wrote:

... In either case, T174145: Our standard highlight icon (used to enable/disable CodeMirror) cdxIconHighlight looks too much like our standard edit icon, cdxIconEdit should be addressed first. Community Tech has its own designer now so we can see what he thinks.

@MusikAnimal Is there any update on this?

I did present this to him as a "extracurricular task" so-to-speak, and I guess he didn't have time for it. He's no longer with the team, unfortunately.

At any rate, Community Tech isn't shielding this icon from being changed. I suspect so long as we advertise the change, most aren't going to care what the icon is. In my opinion T174145#4559190 seems like the best candidate, since it's somewhat similar to what we have now and thus is easier to adjust to. What do others think?

The remaining to-dos involve a small patch (and perhaps another for VE), which I'm happy to review, then adding a note into Tech News.

I've re-titled and re-done the description to be more accurate in explaining what change is wanted.

I've re-titled and re-done the description to be more accurate in explaining what change is wanted.

Thanks!

In my opinion T174145#4559190 seems like the best candidate, since it's somewhat similar to what we have now and thus is easier to adjust to. What do others think?

I'm watching this for a long time. With the knowledge I have today my recommendation is:

1. Add a text label to the button, e.g. 🖍 Syntax. Or remove the icon altogether: Syntax. We will just never find an icon that is universally understood on it's own. This is a common problem and we know how to fix it: just add a label.
2. Make the minor change originally suggested in T174145#3574340 and later repeated in T174145#4559190. I think this helps a lot.

Make sure the later is not only done to MediaWiki-extensions-CodeMirror but to the icon collection in the OOUI lib and possibly Codex as well.

I strongly think 1. would be more goal-oriented.
The icon in 2. has too many details, also we're never featuring it that big, on 20x20 it gets even harder to decipher.

@Volker_E, ok, I see. I gave it a try. Here is a version I re-created from scratch to a) look as pixel-perfect as possible at the 20x20px default size and b) avoid the cutter knife impression I talked about in T174145#4542977.

It is an impossible task to match all conditions.

• That implies that it is not possible to find any sufficient solution by keeping all requirements.
• The basic approach needs to be changed.
• The target is to reach usability for all.
• German Wikipedia is comforting users on regular base that something happened and they cannot edit any longer, like this.

What are the pitfalls?

• A textmarker is culturally dependant. This technique may be known in the US and in Western Europe schools, but not common in other regions. It is based on some academic paperwork, but kids are using eLearning and tablets in class room today. What is that, a pencil case, a textmarker?
• 10 % of users have bad eyes and difficulties to distinguish similar icons, or in rush and hit first intuitive click. Those writing devices have been learnt to trigger some editing. Even worse on low solution.
• The effect is not widely known. First you have to be familiar with the technique of syntax markup. This goes for developers and experts, but not the broad audience. Then you need to connect two English or European wordings, markup and marker. How is that connection in Japanese, Chinese, Suaheli? Who would understand a search light for highlighting?
• If clicked by accident, there is no clue what happened and what to do for returning back to usual appearance. Since jQuery.textSelection does not communicate with this input mode, none of the helpers for text insertion work any longer. Nobody will understand that a blue pencil does mean active highlighting, and another click will change into black pencil and turn off.
• The effect is to bring colours into syntax, but design rules permit monochrome only, here black (blue) and white. Even grey is not possible and does not work with 20×20. Black and white graphical icons only cannot explain what will happen.

Conclusion:

• Either not black and white icon only, but colours with some <>[]
• or explicit textual label.
• A ToggleSwitch element outside the icon bar would be much more comprehensive with L10N text or syntax characters with colours/grey if active.
• It is simply not possible to teach regular editors on possible highlighting technique by 20×20 monochrome pixels.
• The current design is not acceptable. This doesn’t work.

T259059: Upgrade to CodeMirror 6 is coming soon. It'd be awesome to finally resolve this as part of that effort.

In T174145#8172734, @thiemowmde wrote:

@Volker_E, ok, I see. I gave it a try. Here is a version I re-created from scratch to a) look as pixel-perfect as possible at the 20x20px default size and b) avoid the cutter knife impression I talked about in T174145#4542977.

highlight_Thiemo_2022-08-22.svg308 BDownload

@Volker_E does this look okay to you?

Barring objections, I will go this route of using the updated icon and having a label. Is just "Syntax" okay as a label? To be completely unambiguous I assume we'd want to say "Syntax highlighting", but that of course takes up more real estate in the UI.

I think anything is an improvement at this point. It's very easy to refine it later if necessary.

Change #1060950 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: use new icon and add text to toggle button

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

r1060950 gives us the following:

Active state, also with Realtime Preview turned on, for comparison:

There came another accessibility issue from users:

• Some have difficulties with distinguishing blue and black.
• Some are not aware that it has an important effect when something in the toolbar is changing from black to blue. They do not know that they triggered unintentionally this mode, and they come to village pump crying that they cannot work any more.

The activated effect should be more obvious than just changing text colour.

• It should be inverted, whether icon only or both icon and text.
• It should be (dark) blue background for the entire field, and white icon and text if active.
• We do a similar thing with ticbox. They are a white square with black or blue borders if not active, and a blue square with white ticmark when activated.
• This change of background colour is very obvious, even if you are less aware or not equipped with best eyes.

An explicit text is better explaining than text markers which have cultural limitations to know such tool in real life nor connecting such unknown device with syntax analysis presentation.

@PerfektesChaos, that's a completely different issue, unfortunately, technically unrelated to MediaWiki-extensions-CodeMirror. Can you please open another ticket for this and link it to WikiEditor (2010)?

I think this suggestion is already in some ticket. Just reminding here.

T359548, apparently. Why not just link to that?

Change #1060950 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: use new icon and add text to toggle button

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

In T174145#10053457, @MusikAnimal wrote:

r1060950 gives us the following:

Active state, also with Realtime Preview turned on, for comparison:

Definitely an improvement over status quo for our users! 👍🏼

Merged! Thanks to all for the years of input!

I plan to deploy this with and only with CodeMirror 6. Refer to the rollout task (T357795) for more information. I plan to rollout to all of group0 next week.

We got the +1 from @Volker_E about this change. I'm not sure if that's enough to officially change the icon in OOUI/Codex? Until that happens, this task shouldn't be closed.

Consider a combination of these icons... .

or try Noun Project https://thenounproject.com/ or Material Design https://commons.wikimedia.org/w/index.php?search=deepcat%3A%22Material+Design+icons%22+filemime%3Aimage%2Fsvg%2Bxml&title=Special%3ASearch&profile=advanced&fulltext=1&advancedSearch-current=%7B%22fields%22%3A%7B%22filetype%22%3A%22image%2Fsvg%2Bxml%22%2C%22deepcategory%22%3A%5B%22Material+Design+icons%22%5D%7D%7D&ns6=1

In T174145#11018889, @MusikAnimal wrote:

Stalled until CM5 is removed, as we want the new icon (and text) to be an indicator that CM6 is being used.

Does that mean this task can be closed now?

We need to upstream the new icon to Codex/OOUI.

Change #1303622 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: use the upstream icon in the toolbar button

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

Change #1303622 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: use the upstream icon in the toolbar button

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

Should we now close this task, or are we keeping it open to discuss potential changes to the upstream icon? If we keep this open, it should be moved out of the "CodeMirror 6 migration" vertical on the CodeMirror board.