Thank you, Perhelion.

Some general remarks:

• The OOUI icon set is providing general purpose icons which current meaning depends on context. If there is a gear wheel it means some kind of preferences or options for the current environment. If there is a pencil it is some way to change the current value. If there is a trash bin I can delete the current thing.
• The icon for the code marker package is an individual icon for an individual software product. The icon should have the same size like all other icons in a tool bar, but there is no need to be part of the global icon collection. The doumentation pages of this individual software should show the same logo, at least in WMF range.
• The mental link between a marker pen and syntax highlighting requires people to know about marker pens. Young people may be far off from old fashioned paperwork, they should not paint their laptop screens with neon pens. In many countries marker pens may be less common than for some business people or U.S. students.
• Still all marker pen icons do look to me like pencils, and the headline of this task is describing the problem: I cannot distinguish edit icons from syntax highlighting.

The OOUI icon set is providing general purpose icons which current meaning depends on context...

Note that we have to use an OOjs-UI icon for syntax highlighting within the 2017 Wikitext editor. That interface is constructed using OOjs-UI, so the only choices we have are the icons in https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui/images/icons. Of those icons, the highligher icon seemed like the best fit. It also seemed like a good idea to use a similar icon in the regular old Wikitext editor, so that editors migrating from one editor to the other might associate them both with the same feature. Technically, we could use a multicolor icon in the regular old Wikitext editor, but it would have to have a discernible on/off state. Perhelion's suggestions are a nice idea, but they look a bit like a bar chart to me.

I said last month: "If someone has a great idea for an icon that would describe this feature at a glance and fit in visually with the OOJS UI icon set, then I'd be very happy to take a look."

@Perhelion, I don't think that the icon you made describes the feature; I'm not sure what it's supposed to represent. It also doesn't fit in with the existing icon set.

I'm going to close this ticket. I agree that the existing icon is imperfect, but it's the best we have available, and I don't want to waste people's time creating icons that we're not going to use.

In T174145#3553145, @Liuxinyu970226 wrote:

Note: I at least OPPOSE any mentions of "<>" as that really conflicts with SyntaxHighlight , NO MORE Geshi or Pygments hinting here

I OPPOSE this, as in real there is no conflict, in the end it is visual nearly the same thing. So it is also suggestive to have a SIMILAR icon. <> is also used as OOjs icon for the JS codeeditor.
I suggest an icon with:

1. </> (as this is the commonest icons for code highlight) http://www.free-icons-download.net/images/code-icons-75328.png
2. <|> this shows also very effectively the mirror (also a stylized c for code)
3. CM (secondary) simply call the thing by the name
4. [...]
5. maybe a combination with the existing pencil (marker pen)

(@PerfektesChaos and I know all the OOjs icons, because we created the https://commons.wikimedia.org/wiki/OOjs_UI_icons)

! In T174145#3652265, @kaldari wrote:
Note that we have to use an OOjs-UI icon for syntax highlighting within the 2017 Wikitext editor. That interface is constructed using OOjs-UI, so the only choices we have are the icons in https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui/images/icons.

I know a little about OOjs-UI and it seems to me that there is an opportunity (maybe not documented) to use any icon (I mean that not only icons in the set).

In T174145#3657733, @Pastakhov:

I agree.
Here the promised other icon suggestions:

More suggestions only combine existing OOjs icons:

In T174145#3657733, @Pastakhov wrote:

! In T174145#3652265, @kaldari wrote:
Note that we have to use an OOjs-UI icon for syntax highlighting within the 2017 Wikitext editor. That interface is constructed using OOjs-UI, so the only choices we have are the icons in https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui/images/icons.

I know a little about OOjs-UI and it seems to me that there is an opportunity (maybe not documented) to use any icon (I mean that not only icons in the set).

Yes, but the 2017 Wikitext editor enforces monochrome icons. So we can't have colored icons, for consistency.

We have almost 5000 users using this feature on enwiki alone. I don't think it's worth risking confusing all those people by changing the icon, just to satisfy a few.

FYI you can override the icon for yourself or on your wiki using the CSS class .oo-ui-icon-highlight, which is given the .oo-ui-image-progressive class when active.

Just a little side note: I like the last four @Perhelion ideas, but in case of 25px icons ... maybe just one bracket would do:

}/

("/") is the pencil here, I don't have a time to make svg version, so just imagine...

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