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

It is agreed that one conflict shouldn’t be replaced by another one.

• All icons in OOJS gallery are not appropriate, since they might occur as well somewhere.
• Simple things like [[]] and {{}} have been used for decades now, with any meaning.

What about coloured lines in Tetris style?

• Colours remind hiliting elements.
• If inactive, greyed out with 50 shadows.

There has a lot of debate around the icons already. See T164441: Replace CodeMirror icons with new icons

We were using [[ ]] for the test release but there were several complaints about that not being a meaningful icon and people easily happened to miss it because it was unclear what that would do.

At this point, since the extension has been rolled out across wikis and is being used by a lot of users already, it's not possible to make significant changes to the icon as it'd leave those people confused by the change.
We can attempt to improve the pencil icon though but most likely we'd have to wait for more people to complain about it.

Interesting, the same discussion three months ago. I came in two days ago.

A unique, distinguished logo/icon is needed for new functionality.

All the OOJS and [] and {} and <> things are burnt. They are associated with other effects since 2002 etc.

Today I learnt that the pencil is a marker. Not really a visible difference.

My recent suggestion has been to fill the square with coloured lines, the Tetris way, and the marker might be placed on top for a transition period. Perhaps fading out one day after community used to look at the colours. 50 shades of grey when inactive.

The pencil/marker looks exactly as the edit button at Flow etc. – not really intuitive, I would expect writing rather than highlighting. There is a box at the upper right corner of this page, and the first line is headed by – a pencil. And which functionality is triggered?

If I shall be able to distinguish between pencil and marker the pen needs to become much broader than today. However, there is a cultural problem: In some countries text markers might have been not very common, and young generation did not experience paper work with text markers, nor did they ever touch a circular dial plate on a phone device.

@PerfektesChaos I agree that the current highlighter icon is not very distinct from the pencil, and that the connection between a highlighter pen and the syntax highlighting feature is not a perfect metaphor.

The original icon that the CodeMirror extension was using was a colored "spray" of circles, which you can see in the following screenshot. The inactive state was black-and-white.

https://upload.wikimedia.org/wikipedia/commons/2/25/Test_pride_and_p.png

The design team felt that that icon was too different from the rest of the icons in the toolbars and menus. They asked us to use OOJS style icons, and worked with us to find one that would work.

The second version was a pair of curly brackets, which, as you said, is an overused icon with no real meaning anymore.

The highlighter pen was the third version of the icon, and one that we arrived at as a compromise. You can see the discussion on T164441: Replace CodeMirror icons with new icons.

I think the design team would object to a colorful Tetris-lines icon for the same reason that they did for the original, colorful icon. I agree with you that this icon is not the perfect fit for this feature, but we spent a few months talking about this, and we don't really have any interest in starting over again.

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, but it's not a quest that our team can spend any more time on. Sorry.

And what if the pencil icon would be just changed a little to a highlighter icon with looong drawed line like this:

This is an unresolvable conflict.

• The OOJS-UI icon set has been designed for certain purposes.
• Hiliting is not among them.
• Every existing icon in OOJS has a meaning in its own right, and will be interpreted by users in that way.
• Every double-re-using of icons with a deliberate meaning necessarily leads to an inacceptable situation.
• Design team failed and made a mess of usability, while pretending to make functionality clear and obvious.

@Dvorapa: I am afraid this is not self-explaining and obvious enough, and stll looks like a pencil or signature when at button size.

I asked my fellows to suggest a coloured icon, might arrive next days.

• New functionality – new icons.
• Never re-use icon set with deliberate meaning for entirely other things.
• Each icon needs to be quite different from all siblings; no similar icons with a few distinguishing pixels for other purpose.

@PerfektesChaos: VisualEditor/OOJS-UI doesn't support multi-colored icons. The icon has to be OOJS-UI since we want to be able to load syntax highlighting in the new Wikitext editing mode of VisualEditor as well. So in other words, the icon has to be monochrome (unless we want different icons in different editors).

(drive-by comments)

• OOUI could support colored icons, but so far the design decision was not to use them. The main problem would be with generating the blue/red/white "progressive"/"destructive"/invert variants of them. However, greyscale icons should be possible, if that helps (by using opacity/transparency in the SVG image, rather than grey color).
• A highlighter pen icon in general doesn't sound like a great metaphor. While a "highlighter" for "syntax highlighting" works in English, it wouldn't in other languages. For example, in Polish this type of pen is called a "marker" (we stole that one from English), while "syntax highlighting" is "kolorowanie składni" (literally "syntax coloring"). [rant: I keep seeing these issues in icons. Just don't do visual puns. The silliest one I encountered was a spaceship for a 'betaLaunch' icon. Grumble.]

@matmarex Side note: The metaphor is not in its name but in its usage. Highlighter or marker colors text on paper and MediaWiki-extensions-CodeMirror colors text too, but on computer. But I agree this icon is not really so much different from pencil and not really unique at all.

Here some examples how it could look like (after suggestions by @PerfektesChaos):

looks like a virus :)

@matmarex: CodeMirror performs a very similar function to what highlighters/markers do: it visually highlights text with color. I admit it's not perfect, but I haven't heard any better suggestions yet. Maybe it could be made more visually distinct though (and closer to the OOUI icon).

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.