Page MenuHomePhabricator

Add line numbering to syntax highlighting (CodeMirror extension)
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
ECohen_WMDE
Nov 16 2020, 10:34 AM
Referenced Files
F34671637: image.png
Oct 4 2021, 11:18 AM
F34671633: image.png
Oct 4 2021, 11:18 AM
F34286345: Screenshot from 2021-04-08 10-16-48.png
Apr 8 2021, 8:22 AM
F34275616: image.png
Apr 7 2021, 3:27 PM
F34275561: image.png
Apr 7 2021, 3:04 PM
F34259336: image.png
Apr 6 2021, 11:20 AM
F34111738: VE Line numbering.png
Feb 18 2021, 8:45 AM
F34111741: VE Line numbering-specs.png
Feb 18 2021, 8:45 AM
Tokens
"Like" token, awarded by Marsupium.

Description

Background
This feature is part of the WMDE TechWish project "Making working with templates easier". It is specifically about improving template syntax and the ability to create and maintain templates. It will be implemented as a part of the syntax highlighter of the CodeMirror extension. Line numbering helps to easily and quickly display where line breaks are in a standard format.

Implementation plan:

  • The change should be merged by 9 April, so that it goes out with the train in the week commencing 12 April, 2021
  • Deployment initially to template namespace only

Requirements

  • Enable line numbering in both 2010 and 2017 wikitext editors in the syntax highlighter (CodeMirror extension)
  • In the 2017 wikitext editor, update styling to remove the background gray and add padding (see below).
  • In the 2010 wikitext editor, match styling to CodeEditor line numbering
  • Fix styling issues in 2017 wikitext editor (check implementation on test instance, see https://gitlab.com/wmde/mediawiki-extensions-CodeMirror/-/commit/7b4ad47e9c1cc8ca2cd02d4e7b9934b1eec61f24)
  • Enable in syntax highlighter by default
  • No feature flag
  • Configure on template namespace only on all wikis

Mocks and Specs
Wikitext 2010 editor: match CodeEditor line numbering styling but without the added space needed for code folding arrows. No outline on right-hand size of numbered area. (Note the number color may be updated. If so, match: T271956: De-emphasise line numbers when showing code)

2010 Wikitext editor.png (523×758 px, 124 KB)

Wikitext 2017 editor (VE): Numbers should be Base 70 with 8px padding between them and the wikitext. (Matches iOS editor implementation)

VE Line numbering.png (616×777 px, 152 KB)
VE Line numbering-specs.png (616×777 px, 153 KB)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Lena_WMDE renamed this task from Add line numbering to wikitext editors to Add line numbering to wikitext editors on first wikis.Nov 16 2020, 10:38 AM
Lena_WMDE updated the task description. (Show Details)
Lena_WMDE renamed this task from Add line numbering to wikitext editors on first wikis to Add line numbering to syntax highlighting in wikitext editors on first wikis.Nov 16 2020, 10:47 AM
Lena_WMDE updated the task description. (Show Details)
Lena_WMDE updated the task description. (Show Details)
Lena_WMDE updated the task description. (Show Details)
Lena_WMDE renamed this task from Add line numbering to syntax highlighting in wikitext editors on first wikis to Add line numbering to syntax highlighting (CodeMirror extension) on first wikis.Nov 16 2020, 1:00 PM
Lena_WMDE updated the task description. (Show Details)
Lena_WMDE set the point value for this task to 5.
Lena_WMDE renamed this task from Add line numbering to syntax highlighting (CodeMirror extension) on first wikis to Add line numbering to syntax highlighting (CodeMirror extension).Feb 16 2021, 11:35 AM

eh question.. enable line number specifically for Template namespace ? Or for all non-CodeEditor namespaces ?

Hi @TheDJ, the current thinking is to enable line numbering for all namespaces, but only when the syntax highlighter is enabled (so that it's toggled on and off with that setting). The reason is that we believe it could be helpful in situations beyond template creation/maintenance, for example to see where there are line breaks on a page. Line numbering is also already enabled by default in iOS for article pages and has been found to be generally useful for editing there (or at least not disruptive). Open to feedback on that though, if you have any?

Lena_WMDE updated the task description. (Show Details)
awight removed awight as the assignee of this task.Apr 1 2021, 9:38 AM
awight moved this task from Doing to Sprint Backlog on the WMDE-TechWish-Sprint-2021-03-31 board.
awight added a subscriber: awight.

Change 618737 had a related patch set uploaded (by Awight; author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/CodeMirror@master] [WIP] Experimentally enable line numbering

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

@ECohen_WMDE What should we do when syntax highlighting is enabled on a wikitext content page? The behavior as specificied is going to look like,

image.png (559×524 px, 59 KB)

@awight I'm not sure I completely understand the question. Do you mean should the numbers show on article pages? The answer would be yes. We are not hiding/showing based on namespaces. Preview looks good!

@awight I'm not sure I completely understand the question. Do you mean should the numbers show on article pages? The answer would be yes. We are not hiding/showing based on namespaces. Preview looks good!

Thanks, yes that was my question :-)

Random feature request for the future: each line number is a permalink to that (revid, line number).

awight removed awight as the assignee of this task.Apr 7 2021, 9:48 AM
awight moved this task from Doing to Review on the WMDE-TechWish-Sprint-2021-03-31 board.

It's challenging to implement the 8px padding in a non-hacky way. Here's what it looks like now in the 2017 wikitext editor,

image.png (153×243 px, 10 KB)

I tested the changes locally and they look good, @awight. I was only wondering if the spacing on the left side of the line numbers should also be discussed. Currently it looks a bit larger than in the mock:

Screenshot from 2021-04-08 10-16-48.png (744×1 px, 382 KB)

I guess the spacing is there to leave enough space for possible large numbers, but maybe those could also overlap the title to save some space for the main content? @ECohen_WMDE do you have an opinion on this?

Change 618737 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Enable line numbering

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

Change 677849 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/CodeMirror@master] Reposition line numbering to be flush with the title

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

Change 677849 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Reposition line numbering to be flush with the title

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

We are not hiding/showing based on namespaces.

Templates seem fine, but I'm not sure how the editing team feels about adding line numbers to the content editing experience. CC @ppelberg, @iamjessklein

A less serious issue is that the act of enabling syntax highlighting now changes the width of the editor. If you are half way down a content page with wrapping lines, this will result in your scroll position being lost.

...I'm not sure how the editing team feels about adding line numbers to the content editing experience. CC @ppelberg, @iamjessklein

Thank you for the bump, @Esanders.

@Lena_WMDE: I sent you an email with a question about modifying next week's planned deployment.

A less serious issue is that the act of enabling syntax highlighting now changes the width of the editor. If you are half way down a content page with wrapping lines, this will result in your scroll position being lost.

Good point! I was able to verify that the bug already exists in the 2010 and 2017 wikitext editors without line numbering, so have split that off into T279768. It's very possible that line numbering will make the jump worse, but I expect that any potential fix will equally apply with or without the line numbering.

Test wiki created on Patch Demo by PPelberg (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/648abb13e9/w/

Change 678568 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/CodeMirror@master] Enable line numbering only on configured namespaces

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

Change 678568 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Enable line numbering only on configured namespaces

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

Change 678606 had a related patch set uploaded (by Awight; author: Awight):

[operations/mediawiki-config@master] [beta] Enable line numbering on all namespaces

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

Change 678606 merged by jenkins-bot:

[operations/mediawiki-config@master] [beta] Enable line numbering on all namespaces

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

Mentioned in SAL (#wikimedia-cloud) [2021-04-13T07:46:05Z] <awight> enable syntax highlighting line numbering on all namespaces (T267911)

Change 679491 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/CodeMirror@master] Reflect new event name as it was upstreamed

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

Here is a code snippet everybody can copy-paste to their own https://de.wikipedia.org/wiki/Special:MyPage/common.css page in case they want to hide the line numbers.

/* Hide line numbers in both the 2010 and 2017 wikitext editors */
.CodeMirror-gutters, .CodeMirror-gutter-wrapper {
    display: none;
}
.CodeMirror-sizer, .ve-ce-attachedRootNode {
    margin-left: 0 !important;
}

@JStrodt_WMDE and WMDE-Tech-Communication, we briefly talked about this.

Here is a code snippet everybody can copy-paste to their own https://de.wikipedia.org/wiki/Special:MyPage/common.css page in case they want to hide the line numbers.

@thiemowmde Thanks, we'll take care of it.

In the 2017 wikitext editor, update styling to remove the background gray and add padding (see below).

What is the reasoning behind this? Personally I think it is more readable with a background and border like in the 2010 editor:

image.png (497×529 px, 45 KB)
image.png (508×518 px, 45 KB)

This was a decision by our UX team, together with PM @Lena_WMDE. Personally I think the gray box looks out of place, like a debugging layer that is not meant to be there for regular users.

Test wiki on Patch demo by PPelberg (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/648abb13e9/w/