Page MenuHomePhabricator

Investigation: Show line numbers along with syntax highlighting
Closed, ResolvedPublic2 Estimated Story Points

Description

This is split from T254989: Investigation: Highlighting meaningful whitespace. The idea is to highlight linebreaks in an indirect way, not by adding artificial characters, but by showing line numbers.

Investigation questions

  1. What exists in the current editors, both 2017 VE wikitext and 2010 wikitext editors? Is the feature there but disabled? Seems the functionality is there because the text editor in the module namespace already has line numbers.
  2. Are there any particular blocks to enabling line numbers in VE?
  3. What support for there is this in CodeMirror? Seems like it's part of the base functionality, not an add-on. Can it be de-coupled from code folding (out of scope)?

Onwiki module editor with line numbering:

Screen Shot 2020-07-30 at 16.14.48.png (392×445 px, 61 KB)

Event Timeline

It turns out all we need to do is to set lineNumbers: true in 2 places in the MediaWiki-extensions-CodeMirror codebase. This is how it would look like in the wikitext editor:

Screenshot from 2020-07-30 15-43-50.png (782×245 px, 15 KB)

This is how it would look like in VisualEditor, without any extra styling. Note the visualeditor-newwikitext BetaFeature must be enabled to be able to switch to this mode.

Screenshot from 2020-07-30 14-54-00.png (901×322 px, 47 KB)

For comparison, this is how it looks in the code editor that can be enabled on Lua, JavaScript, and CSS pages:

Screenshot from 2020-07-30 15-49-09.png (502×169 px, 13 KB)

Remarks:

  • When dealing with code, tools show error messages like "syntax error in line 42". But this never happens when dealing with wikitext. In other words: The actual numbers are pretty much meaningless. However, …
  • … the numbers indicate where the next line starts. This could as well be done with a symbol, but that could be confused with bullet points. Increasing numbers probably tell a more convincing story.
  • … the numbers allow to see how long an article is. Before, the scaling of the scroll bar was the only indicator – and sometimes not even that, depending on the browser.
  • … it's easier to navigate back to a position. Even if I don't remember the exact number, I usually have a vague idea of how big the number was.

Oops started writing the description before I saw your comment @thiemowmde - very exciting! I'm glad it's so straightforward. It doesn't even look too bad in VE, I would start by simply removing the background and the darker line on the right side so they are just floating light gray numbers and see how that looks. If it could get a bit of padding on the right side (8px?), then even better.

Also, I agree with your remarks analysis of why this would be helpful. I think the main benefit is seeing newlines in an easily recognizable and clear way, the rest are the side benefits that we can predict now, there may be more. It might also help people who are collaborating on the same template code as well.

I suspect all styling can easily done with CSS. Having different styles for the different situations is also possible.

@thiemowmde Can this be easily enabled on the test instance? Would be nice to be able to try it out :)

Change 618737 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/CodeMirror@master] [DNM] Experimentally enable line numbering

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

By hot-patching the code, maybe? I uploaded a patch that can do this. @awight, are you able to apply this to our test machine?

By hot-patching the code, maybe? I uploaded a patch that can do this. @awight, are you able to apply this to our test machine?

Deployed!

Screen Shot 2020-08-06 at 16.15.45.png (634×542 px, 132 KB)

Looks great! And I think already demonstrates how it can be useful.

thiemowmde set the point value for this task to 2.Aug 12 2020, 9:52 AM
Lena_WMDE claimed this task.