Compact language links' ULS panel shows itself on the right side of the "More" button, which is wrong in some skins
Closed, ResolvedPublic

Description

This is not an RTL bug :)

Try going to https://simple.wikipedia.beta.wmflabs.org/wiki/Florida?useskin=timeless . In the Timeless skin the interlanguage links appear in a sidebar on the right-hand side of the screen. Clicking the "136 more" (languages) button opens the language selection panel on the right-hand side of the button, so most of it is not actually visible. This happens because the common Vector and Monobook skins show the languages list on the left-hand sidebar, so it was assumed that the panel should always be on the right.

In the Timeless skin, and possibly in others, the panel should open itself to the left. To make ULS in general more robust, there should be some algorithm for automatic identification of the best side on which the panel should be shown.

At the moment this is not a high-priority issue for ULS and not a blocker for wider Compact Language Links deployment on WIkimedia sites because this doesn't affect any skin used on Wikimedia sites. However, this is a blocker for deploying Timeless on Wikimedia sites (T154371) if this ever happens, and this should be fixed for better general robustness for ULS.

(This description assumes an LTR wiki. It affects RTL wikis the same way, but the words "left" and "right" are flipped everywhere. When fixing, it must be tested in both RTL and LTR wikis.)

Amire80 created this task.Mar 28 2017, 7:09 AM
Amire80 moved this task from Backlog to Compatibility on the Timeless board.

Ideally the panel should be shown where there is room for it (if it is not reachable, it is not very useful).
By default it makes sense to open in the writing direction (right in right-to-left languages) but in case there is no room, it should open to the other side. It would be great if it worked also for top/bottom positions in case someone wants to use the selector in a header/footer.

It is common for UI controls (such as tooltips, popups, and menus) to have these calculations about which direction is better to expand towards according to the viewport, so maybe the approach to do so can be reused from those, or other components can benefit from it if they lack this behaviour.

Isarra added a subscriber: Isarra.Mar 28 2017, 11:33 PM

Does this use oojs-ui, or its own thing?

Either way, I think some of the oojs widgets have similar problems at times (though maybe those are more just plain not fitting on the screen at all at times, with no scaling down? I haven't really looked.). Assuming it all works, though, they'd ideally be consistent.

Ideally, yes. But ULS is not OOJS :/

As long as the behaviour winds up generally the same, that's fine.

For OOjs UI PopupWidgets, the same issue would be T158934: Automatically change popup direction if there is no space – right now this wouldn't be magically fixed even if you switched to OOjs UI.

matmarex added a comment.EditedMar 29 2017, 8:18 PM

I think this would actually be a pretty simple fix. Right now, ULS decides whether to display that callout to the left or to the right depending on whether the interface language is LTR or RTL. Instead, it should decide depending on whether the "anchor" is in the left or right half of viewport.

Current code, in [mediawiki/extensions/UniversalLanguageSelector]/resources/js/ext.uls.interface.js:

			rtlPage = $( 'body' ).hasClass( 'rtl' ),
...
							if ( rtlPage ) {
								this.left = ulsTriggerOffset.left - this.$window.width() - caretRadius;
							} else {
								this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretRadius;
							}

Rather than rtlPage, you could test for something like ulsTriggerOffset.left > $( window ).width() / 2.

For future reference, screenshot of the problem:

So, er, how do I get this callout to appear in the first place? I've installed ULS, but it only added the one in p-personal, not the one in the languages.

So, er, I got it to appear, but I can't get the suggested change to actually work. This may not mean much.

Change 354378 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/extensions/UniversalLanguageSelector@master] Determine callout directionality based on position as opposed to language

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

Change 354378 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Determine callout directionality based on position as opposed to language

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

Note that the above patch fixes only the ULS language settings and not the compact language links. A similar solution would be needed for compact language links.

There is also a problem of "caret" appearing at the side of scrollbar, which cannot blend into the popout background. Screenshot showing the issue:

...what. Er. Okay.

There is also a problem of "caret" appearing at the side of scrollbar, which cannot blend into the popout background. Screenshot showing the issue

Could you upload a non-cropped version? I'm having trouble replicating this, but I'm probably not even looking in the right place.

Possibly relatedly, I can't get this stuff to show up at all in chrome now. >.>

Which is to say chrome seems to be broken.

Okay, chrome's fine, that had nothing to do with this.

Problem: can't replicate extra caret. Can consistently cause caret to disappear entirely by opening up more languages thing (only thing I could find that causes a scrollbar at all, basically).

Sorry, if I was not clear. The screesnshot is not related to the patch., it is about compact language selector(The bug is mainly about that, even though you fixed the "language settings"). the one that appear when you click the "X more languages" button below the language list.
I was trying a quick solution to see if we can apply the method to that ULS trigger as well. We can, but the caret appear in the same side of a scrollabar. The langauge list will have scrollbar. Showing the caret just near to scrollbar has an issue - It wont feel like something part of the whole popup but something like the above.

Ah. Feck.

Also there's apparently a problem with the logic above with the caret one (settings) anyway, according to matma rex. So it's possible it's related to why the triangle one (compact selector) wouldn't work anyway?

Change 354670 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/extensions/UniversalLanguageSelector@master] Make caret in displaysettings appear correctly like in languagesettings

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

Change 354739 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/extensions/UniversalLanguageSelector@master] Fix directionality of ULS CLL callout

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

Nemo_bis triaged this task as Normal priority.May 20 2017, 4:48 PM

Change 354670 abandoned by Isarra:
Make caret in displaysettings appear correctly like in languagesettings

Reason:
This isn't as good as the other one.

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

Okay, this last one should actually fix everything. >.>

@santhosh Please take a look at 354739 when you can. This is basically all we're waiting on now for deploying Timeless to production (well, testwiki, but still), so if the change is good, let's get it in! And if it isn't, let's fix it..

I went ahead and refactored after the previous one too, and this should now work for all the different sidebar popouts, and also resolves the sidebar issue by making the placement of the CLL caret consistent with the language/display settings..

matmarex added a comment.EditedAug 10 2017, 11:03 PM

I've taken screenshots of hopefully every possible state of the popout in Timeless with the latest version of the patch. They look fine. (They look fine in RTL too but I've had enough of taking screenshots.)

Wide mode (1366px):
Medium mode (1200px):
Narrow mode (1024px):
(not visible)
Mobile mode (800px):
(not visible)

Here are the same situations in Vector:

Change 354739 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Fix directionality of ULS CLL and languageselect callouts when appearing on right side of screen

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

matmarex assigned this task to Isarra.
matmarex closed this task as Resolved.

\o/

Thanks everyone!