Possibly (?) related discussion at https://github.com/codemirror/CodeMirror/issues/4076

In T170906#3461570, @Quiddity wrote:

Possibly (?) related discussion at https://github.com/codemirror/CodeMirror/issues/4076

Correct. T161054#3461460 too.

@jeblad How big a problem is this? It's something that's kinda necessary for performance reasons. We can look into ways for fixing it but I'm afraid we might lose out on the load speed of the highlighter.

@Niharika Could it be lazy-fixed after the highlighter has loaded? The user expect it to be there, but he would probably not discover if it were gone for a short while.

Note that while the connection is fast but with latency, the computer is fairly fast so testing things that depend on a slow computer is difficult. I could although fire up a throttled VBox instance, but that can be done by everyone.

@jeblad So the way CodeMirror works is that it "draws" the area in the textbox and as the user scrolls, it keeps drawing more of the area. This is how it's so performant compared to other highlighters. But the downside of this is that it needs fixed textarea size else it will draw the whole article at once, which will be pretty slow for large articles. This is why NWE is slow with CodeMirror.

@Pastakhov I'm thinking maybe we can set viewportMargin to Infinity if the article size is small and not make the textarea size fixed. I'm not sure the best way to figure out if the article size is "small enough" or the limits we should be looking at but this will solve quite some problems for much of articles.

In T170906#3574099, @jeblad wrote:

Note that while the connection is fast but with latency, the computer is fairly fast so testing things that depend on a slow computer is difficult. I could although fire up a throttled VBox instance, but that can be done by everyone.

Chrome devtools has an option to let you throttle your connection speed. The trickier thing is to test on "slow computers" i.e. low computing power. I borrowed an old laptop for testing this a while back and came up with the stats in T161054#3450375.

It's possible to resize the text-area by clicking on the pencil to disable the highlighting, resize the conventional text-area, and re-enabling the highlighting.

Can this operation be done automatically ? If the size of the area (or parent area) is modified, the highlight is stopped and reloaded with the new size.

@Zebulon84 I think this is a good idea.

@Pastakhov I'm thinking maybe we can set viewportMargin to Infinity if the article size is small and not make the textarea size fixed. I'm not sure the best way to figure out if the article size is "small enough" or the limits we should be looking at but this will solve quite some problems for much of articles.

@Pastakhov could you reply to this? Thank you.

Change 389646 had a related patch set uploaded (by Niharika29; owner: Niharika Kohli):
[mediawiki/extensions/CodeMirror@master] Make textbox height flexible with CodeMirror

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

Change 389646 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Make textbox height flexible with CodeMirror

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