Issues with OOUI menus/popups that open upwards being overlapped by things
Closed, ResolvedPublic

Description

After change T158934: Automatically change popup direction if there is no space, OOUI menus and popups can open upwards instead of downwards. This was meant to make long dropdowns easier to use, see for example T107036#3796820.

I didn't foresee that various interface elements shown near the top of the page can overlap these menus/popups. This task is about the general solution for this problem, and also tracks all the specific instances that were reported, so that we can verify they're all fixed.

matmarex created this task.Dec 16 2017, 9:34 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 16 2017, 9:34 PM
matmarex added a comment.EditedDec 16 2017, 9:42 PM

The solution for this is to put the menus/popups inside an "overlay" (essentially, a separate "layer" shown on top of everything else on the page – https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays). But there are some caveats:

  • This is currently not be possible for PHP-generated widgets that become infused (https://www.mediawiki.org/wiki/OOjs_UI/Using_OOjs_UI_in_MediaWiki#Infusion). I'm working on a patch to make them always use an overlay (this will fix all PHP widgets everywhere at once).
  • Some things to consider for JS code:
    • The Vector skin has some really weird z-indices set on the personal menu (in top right). You need to set 'z-index: 101' (or higher) on your overlay to display your content above them.
    • Almost all of the skins also have weird font-sizes set on the <body> element, which are later overridden. This makes using overlays annoying :(
    • To resolve this, OOUI should make a default overlay available with all the necessary z-index and font-size overrides already applied, which all applications will be able to use.

Change 398195 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] Introduce OO.ui.getDefaultOverlay

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

Change 398196 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] Put menus/popups of infused PHP widgets into the default overlay

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

Change 398198 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/core@master] OOjs UI: Fix font size for default overlay

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

Change 398199 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Vector@master] OOjs UI: Fix z-index and font size for default overlay

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

matmarex claimed this task.Dec 16 2017, 9:48 PM

Change 398195 merged by jenkins-bot:
[oojs/ui@master] Introduce OO.ui.getDefaultOverlay

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

Change 398196 merged by jenkins-bot:
[oojs/ui@master] Put menus/popups of infused PHP widgets into the default overlay

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

I'd like to backport this fix into MediaWiki ahead of the next OOUI release (but not deployed to Wikimedia wikis, that will happen with the train). The next release is shaping up to be big and breaking and I'll probably have to spend some time after it chasing other unanticipated problems, and I would like to give some more attention to this one. Also, the release will happen in two weeks from now, by which time we're going to completely forget what this was about.

Does that fix also access echo popups becoming completely inaccessible on small screens?

Maybe. Can you file a separate task?

Change 399253 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@v0.24.4] Introduce OO.ui.getDefaultOverlay

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

Change 399253 merged by jenkins-bot:
[oojs/ui@v0.24.4] Introduce OO.ui.getDefaultOverlay

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

Change 399254 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@v0.24.4] Put menus/popups of infused PHP widgets into the default overlay

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

Change 399254 merged by jenkins-bot:
[oojs/ui@v0.24.4] Put menus/popups of infused PHP widgets into the default overlay

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

Change 401571 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/MonoBook@master] OOjs UI: Fix font size for default overlay

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

Change 398198 merged by jenkins-bot:
[mediawiki/core@master] OOjs UI: Fix font size for default overlay

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

Change 398199 merged by jenkins-bot:
[mediawiki/skins/Vector@master] OOjs UI: Fix z-index and font size for default overlay

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

Change 401571 merged by jenkins-bot:
[mediawiki/skins/MonoBook@master] OOjs UI: Fix font size for default overlay

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

Change 401629 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/core@master] Put menus/popups of infused PHP widgets into the default overlay

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

Almost – the last patch is still pending. It's needed to fix some prominent instances of this bug that use custom MW widgets, rather than OOUI widgets, e.g. Special:MovePage and Special:Block.

Side note, I was considering backporting these fixes to wmf.15, but since it turns out it needed 6 patches in several repos, and the upcoming SWAT deployments are already full of things (after the long break), I think I'll give up on this. This issue looks very silly, but doesn't really cause major problems for users of the wikis. (Let's backport T182907 though.)

Change 401629 merged by jenkins-bot:
[mediawiki/core@master] Put menus/popups of infused PHP widgets into the default overlay

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

matmarex closed this task as Resolved.Jan 3 2018, 8:46 PM
matmarex removed a project: Patch-For-Review.

This will be fixed in MediaWiki with wmf.16 (to be deployed next week).

Change 404048 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Timeless@master] OOjs UI: Fix z-index and font size for default overlay

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

Stryn added a subscriber: Stryn.Jan 16 2018, 3:12 PM

Just a note that Wikimedia wikis were restored to version wmf.15 so that layout issue still exists on wikis. So should be fixed with wmf.17 that will go live this week.

Tagged as User-notice to explain the disturbance.

Framawiki added a subscriber: Framawiki.
Od1n removed a subscriber: Od1n.Jan 17 2018, 5:58 PM

Change 404048 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] OOjs UI: Fix z-index and font size for default overlay

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

RandomDSdevel rescinded a token.
RandomDSdevel awarded a token.