Page MenuHomePhabricator

jquery.textSelection does not scroll textbox in Chromium, works in Firefox
Closed, ResolvedPublic

Description

From T152757#2859176

Linter uses jquery.textSelection to highlight the lint errors it finds. If that selection is not in the visible portion of the textbox, in Firefox it scrolls the textbox to make it visible, but that doesn't work in Chromium - it's highlighted, but not visible.

Example: https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Quick_survey_test_page_without_infobox_nor_image&action=edit&lintid=10

The linter code is as simple as $( '#wpTextbox1' ).focus().textSelection( 'setSelection', { start: location[ 0 ], end: location[ 1 ] } );.

Event Timeline

Legoktm created this task.Dec 9 2016, 3:07 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 9 2016, 3:07 AM

I'd like to work on issue.
I've installed Parsoid and Linter Extension and uncommented linting: true & linterSendAPI: true in config.yml but when I add lintid parameter in URL I get Database DBQueryError

I've installed Parsoid and Linter Extension

Did you run php maintenance/update.php after installing the extension?

Harjotsingh added a comment.EditedDec 10 2016, 3:44 PM

@Arlolra
Thanks for the suggestion, after running maintenance/update.php the DB error was resolved but the error is still not highlighted.

I guess that's just Chrome being terrible. Browsers don't offer any API to scroll to selection in a <textarea>, nor to find out where the selection is rendered onscreen.

jquery.textselection has a 'scrollToCaretPosition' method, but according to comments in its source code "This functions sucks and is off by a few lines most of the time. It should be replaced by something decent".

I searched a little bit, and found this neat StackOverflow suggestion by our very own @Mattflaschen-WMF from five years ago: http://stackoverflow.com/a/7464299 "Basically, the trick is to truncate the textarea, scroll to the end, then restore the second part of the text".

Change 516050 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/Linter@master] Scroll the textbox to selection (error location) on page load

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

matmarex added a subscriber: PMG.Jun 9 2019, 7:42 PM

I completely forgot about this task. I actually implemented the suggestion above in jquery.textselection 'scrollToCaretPosition' method in 2018 (rMWc92dd025f1d3: jquery.textSelection: Rewrite 'scrollToCaretPosition'), as a part of a great cleanup that eventually aimed to allow us to make it compatible with VisualEditor: T185917. Today this was reported to me again by @PMG at a conference and I realized it's simple to fix nowadays thanks to those changes.

Change 516050 merged by jenkins-bot:
[mediawiki/extensions/Linter@master] Scroll the textbox to selection (error location) on page load

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

Legoktm closed this task as Resolved.Jun 10 2019, 3:10 AM
Legoktm assigned this task to matmarex.