Page MenuHomePhabricator

Text box moves in Vector 2022
Closed, ResolvedPublicBUG REPORT

Description

Reported by User:Ifly6 in https://www.mediawiki.org/wiki/Topic:Xebksmwphrf01zdm

"At certain screen resolutions, the text box view itself seems to move left and right internally. To reset it, you need to go all the way to the left. It is especially annoying because this incorrect behaviour is default on the standard text width in new Vector. If this could be fixed, it would go a great way toward usability."

They provided this video: https://www.youtube.com/watch?v=kUvwP7RsxFs

Video shows this occurring using the 2017 WTE on an iPad accessing the desktop site. Video description says they also see it occurring in Edge and in Safari on macOS.

Event Timeline

"The issue only occurs when making the width of the window something that isn't a full integer multiple of the monospaced text. In such a case, the internal screen moves to show the remainder by moving to the right."

I can't actually trigger this myself thus far.

Good catch on CodeMirror being a factor; I didn't notice it was enabled in the video. With that turned on I can reproduce this. It's something to do with the direct-child of the .CodeMirror-wrap div getting shifted slightly to the left when the caret is at the far-right side of the text.

Here's a video with some relevant tools shown: https://youtu.be/0yfp13Thgnc

It's probably worth starting out by seeing whether updating the CodeMirror library would fix this. It looks like we've got 5.58.3 (2020-11-19) bundled in the extension, and 5.65.13 (2022-12-20) is the most recent version, so there's ~2 years of fixes to catch up on. (Or there's the v6 version of the library, but I assume that'd be a riskier upgrade...)

(Or there's the v6 version of the library, but I assume that'd be a riskier upgrade...)

Risky indeed! I'd estimate it as at least a one-month project, if I were to tackle it on my own. The API is dramatically different so we need to rewrite a lot of things. The tracking task is at T259059: Upgrade to CodeMirror 6. Community Tech plans to work on this in 2023 but we don't have a set timeline yet. It's probably worth it to upgrade to the latest CodeMirror 5 now, if we want to. T258999 was the last upgrade.

Is this bug reproducible in the 2010 editor? If not, I wonder if a simple CSS fix to VE would suffice for now (or a CSS fix to CodeMirror, assuming it doesn't break anything in non-VE). setupSizing() in ext.CodeMirror.js may be at fault here as well, though I doubt it. That code will be reworked a tiny bit in the near future for T323329.

Change 959246 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/CodeMirror@master] Update embedded CodeMirror library to 5.65.15

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

Updating CodeMirror does indeed seem to fix it. After being on my backburner for only four months, even.

Minor note for local testing: reproducing this seemed to also depend on the line numbers being hidden, which isn't the default config.

Anyway, this is sort of a naïve updating, in that I built the lib and copied the relevant files over, but have only done basic testing to made sure there's no obvious breakage / console errors. I'd appreciate someone who knows more about the extension giving it a look-over as well...

Change 959246 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Update embedded CodeMirror library to 5.65.15

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

DLynch moved this task from Backlog to Bugs on the MediaWiki-extensions-CodeMirror board.
DLynch moved this task from Inbox to QA on the Editing-team (Kanban Board) board.
DLynch added a project: Editing QA.

@TheDJ not up to me, it's now in the workboard column where @ppelberg reviews tickets before closing them.