Page MenuHomePhabricator

Add syntax highlighting to wiki diff of source code pages (like Gerrit)
Open, Needs TriagePublic

Description

Problem

When we editing pages containing Lua, JavaScript or CSS code, we can't easily see what has changed due to a lack of syntax highlighting. Many times that needs a a lot of mental concentration.

Who would benefit

All Lua, JavaScript ... coders.

Proposed solution

When we edit Lua or JavaScript code, highlight differences like in Gerrit ( - + parts of line).
Do this when we explicitly ask differences, but also as option in any change from the previous version.

Description of the task

The way used in gerrit to display changes in source code seems better than some others.
In code panels, for old and new codes, gerrit colorises them in red and green for each changed character.
Then we could use it for other source codes: javascript for gadgets and user scripts, Lua modules, Lisp for templates.

Enhancements in short

This change could "colors for each character", displays "in codes panels", "highlights" better than actual MediaWiki use cases, select or not each of ways for highlights, and "the user chooses these ways for each code panel", for any code sources, even wikitext. Highlight from the last change or from the last "Preview". See below.

Some chooses to select

Guerrit uses 2 ways, which mode use?
In the mixing way, gerrit mixes the old and the new code lines, identify them with - and + signs, and highlights them with red and green colors for each character.
In the columns way, gerrit put the old code in left and the new code in right column, and highlights them with red and green colors for each character.

This styles also interfere with the usual highlight of each code.

Where to use these display ways?
Perhaps also in wikitext for wikicontent?
Perhaps also when we display a revision-diff = "Difference between revisions"?
Even in VisualEditor?

How to use these display ways?
Each time when we edit a script or a module or a template and then clic on "show changes".
Also when we clic "Preview" to see the effect on a test page?
Highlight the comparison to the last identified change or between the 2 last clicks on "Preview".
Begin to offer these ways for codes panels, and later extend them to other places?

When to activate these ways and modes?
When the user chooses these ways for each code panel?
When the user chooses them in his preferences?

Event Timeline

Rical created this task.Jan 23 2017, 6:49 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 23 2017, 6:49 PM
Tgr added a subscriber: Tgr.Jan 24 2017, 12:13 AM

Are you asking for changes in how the diff is presented when you click "show changes", or should some change information be shown outside of that view? How exactly?

Rical added a comment.Feb 3 2017, 9:02 PM

@Tgr yes, each time when we edit a script or a module or a template and then clic on "Preview" or "show changes",
in the code panel, use the hight-light and the mixed mode with + and - as in gerrit.
Perhaps also when we edit a panel of wikitext?
Perhaps also when we display a revision-diff = "Difference between revisions"?
A preference option permit to ask this way to display diffs. Perhaps others options for revision-diffs and wikitext?
This style also interferes with the usual hight-lights.

Rical added a comment.Feb 3 2017, 9:10 PM

@Tgr yes, each time when we edit a script or a module or a template and then clic on "show changes".
Also when we clic "Preview"?

This proposal is selected for the Developer-Wishlist voting round and will be added to a MediaWiki page very soon. To the subscribers, or proposer of this task: please help modify the task description: add a brief summary (10-12 lines) of the problem that this proposal raises, topics discussed in the comments, and a proposed solution (if there is any yet). Remember to add a header with a title "Description," to your content. Please do so before February 5th, 12:00 pm UTC.

Tgr added a comment.Feb 4 2017, 6:20 AM

So how is that different from what's MediaWiki already does?

gerritMediaWiki

While MediaWiki is a lot uglier, they show the same information.

Rical renamed this task from When we edit Lua or JavaScript code, display differences like in Gerrit to Display changes in sources codes like in Gerrit in red and green.Feb 4 2017, 6:57 AM
Rical updated the task description. (Show Details)
Tgr added a comment.Feb 4 2017, 8:40 PM

It's still not clear to me what changes you are asking for in the already-existing MediaWiki diff display.

This would be an accessibility issue, since there are people who have Deuteranopia (red/green color blindness). This ticket would require introducing a new setting in Special:Preferences which would allow choosing the colors for viewing the diff colors in a revision (where blue/yellow would be the default so it can still be accessible).

Rical added a comment.Feb 5 2017, 12:05 AM

@Tgr : this proposition "colors for each character", and displays "in codes panels", and "hightlights" better than actual "MediaWiki is a lot uglier" use cases, and select 2 ways for hightlights, and "the user chooses these ways for each code panel". And you continue to ask.

Tgr moved this task from Frontend to Backend on the Developer-Wishlist (2017) board.
Rical updated the task description. (Show Details)Feb 6 2017, 7:52 AM
Krinkle renamed this task from Display changes in sources codes like in Gerrit in red and green to Add syntax highlighting to wiki diff of source code pages (like Gerrit).Feb 6 2017, 7:47 PM
Krinkle updated the task description. (Show Details)
Tgr added a comment.Feb 15 2017, 10:11 AM

This was the eighth most popular item in the Developer Wishlist results.

I think the first step here is to set clearer targets: describe exactly what changes would be needed from the current diff UI.

a simple feeling:
Yes to colors for accessibility.
Yes to line numbers to distingish folded long lines.
Yes to single column diff option then each coder can choose for each window/screen size.
Yes to standard syntax text coloring for each coding language.
Yes to background colors only for changes.

Adding some relevant tags (per my earlier comment)

FNDE awarded a token.May 17 2017, 9:32 PM
Qgil added a subscriber: Qgil.Sep 12 2017, 8:35 AM

In relation to T158149: Find an owner for top 10 Developer Wishlist 2017 proposals, I dare to ask: what is the current status? :)