Page MenuHomePhabricator

CodeMirror textarea is non-expandable
Closed, ResolvedPublic1 Story Points

Description

If I turn on CodeMirror, the textarea is no longer resizable. (testing in Firefox and Chromium)

Event Timeline

Quiddity created this task.Jul 18 2017, 1:07 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 18 2017, 1:07 AM
Quiddity triaged this task as Low priority.Jul 22 2017, 5:59 AM

@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.

jeblad added a comment.EditedSep 1 2017, 7:50 PM

@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.

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.

Pastakhov claimed this task.Sep 8 2017, 4:14 AM

I think there should not be a big problem to make it resizable, and there should not be a problem with performance. I'll try to fix it.

About viewport, small article can become big for example by copy/paste or sleeping on keyboard. The viewport is needed for reduce drawing speed when editor are typing the text. I'm sure the text outside of viewport should be processed as a background task, it would be cool to fix it in upstream, but at least we can try to add a crutch that would solve the problem with searching... just have no time for all :( ...

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

Restricted Application added a project: Community-Tech. · View Herald TranscriptNov 6 2017, 11:44 PM
Niharika claimed this task.Nov 6 2017, 11:52 PM
Niharika edited projects, added Community-Tech-Sprint; removed Community-Tech.
Niharika set the point value for this task to 1.
Niharika moved this task from Ready to Needs Review/Feedback on the Community-Tech-Sprint board.

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

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

kaldari closed this task as Resolved.Nov 8 2017, 10:14 PM
kaldari moved this task from Needs Review/Feedback to Q1 2018-19 on the Community-Tech-Sprint board.
DannyH moved this task from Untriaged to Archive on the Community-Tech board.Dec 19 2017, 1:12 AM