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

Assigned To

Authored By

	matmarex
	Dec 16 2017, 9:34 PM

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.

Details

Subject	Repo	Branch	Lines +/-
OOjs UI: Fix z-index and font size for default overlay	mediawiki/skins/Timeless	master	+5 -0
Put menus/popups of infused PHP widgets into the default overlay	mediawiki/core	master	+19 -19
OOjs UI: Fix font size for default overlay	mediawiki/core	master	+6 -4
OOjs UI: Fix font size for default overlay	mediawiki/skins/MonoBook	master	+5 -1
OOjs UI: Fix z-index and font size for default overlay	mediawiki/skins/Vector	master	+7 -0
Put menus/popups of infused PHP widgets into the default overlay	oojs/ui	v0.24.4	+20 -0
Introduce OO.ui.getDefaultOverlay	oojs/ui	v0.24.4	+63 -10
Put menus/popups of infused PHP widgets into the default overlay	oojs/ui	master	+20 -0
Introduce OO.ui.getDefaultOverlay	oojs/ui	master	+63 -10

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	matmarex	T182711 Recent changes: Filter menu opens upwards
Resolved	matmarex	T182602 Vector: Long dropdown menus (e.g. select namespace) overlapped by namespace tabs and personal menu when they open upwards
Resolved	matmarex	T182907 Link inspector overlapped by toolbar and extends past the screen when it opens upwards (only when editing links in tables and references)
Resolved	matmarex	T183296 Echo popups should always open downwards
Resolved	matmarex	T183069 Issues with OOUI menus/popups that open upwards being overlapped by things
Resolved	Volker_E	T183195 Release OOUI v0.24.4 with some backported patches

Event Timeline

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 parent tasks: T182711: Recent changes: Filter menu opens upwards, T182602: Vector: Long dropdown menus (e.g. select namespace) overlapped by namespace tabs and personal menu when they open upwards, T182907: Link inspector overlapped by toolbar and extends past the screen when it opens upwards (only when editing links in tables and references), T182999: Namespace selection dropdown opens in the wrong direction, Special page tab overlaps.Dec 16 2017, 9:35 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

Schnark subscribed.Dec 18 2017, 9:11 AM

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

Volker_E awarded a token.Dec 18 2017, 3:34 PM

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.

matmarex mentioned this in T183195: Release OOUI v0.24.4 with some backported patches.Dec 18 2017, 9:55 PM

matmarex added a subtask: T183195: Release OOUI v0.24.4 with some backported patches.

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

matmarex mentioned this in T183296: Echo popups should always open downwards.Dec 19 2017, 9:09 PM

matmarex added a parent task: T183296: Echo popups should always open downwards.

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

matmarex closed subtask T183195: Release OOUI v0.24.4 with some backported patches as Resolved.Jan 2 2018, 7:48 PM

Updating MediaWiki to use the new OOUI release: https://gerrit.wikimedia.org/r/#/q/topic:upstream-oojs-ui+message:v0.24.4

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

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2018-01-09 (1.31.0-wmf.16)).Jan 2 2018, 10:00 PM

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

matmarex mentioned this in T182602: Vector: Long dropdown menus (e.g. select namespace) overlapped by namespace tabs and personal menu when they open upwards.Jan 2 2018, 11:22 PM

Resolved?

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 mentioned this in T182711: Recent changes: Filter menu opens upwards.Jan 3 2018, 8:42 PM

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

gerritbot added a project: Patch-For-Review.Jan 12 2018, 9:56 PM

Volker_E merged a task: T184848: OOjs-ui's select input overlap vector's top tabs.Jan 14 2018, 1:45 AM

Volker_E removed a project: Patch-For-Review.

Volker_E added a subscriber: 0x010C.

Volker_E removed a subscriber: gerritbot.

Stryn merged a task: T184995: Move page dropdown menu for namespaces opens upside down.Jan 16 2018, 3:10 PM

Stryn added subscribers: Trizek-WMF, Od1n.

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.

Trizek-WMF moved this task from To Triage to Announce in next Tech/News on the User-notice board.Jan 16 2018, 4:17 PM

Framawiki awarded a token.Jan 16 2018, 7:25 PM

Framawiki subscribed.

Od1n unsubscribed.Jan 17 2018, 5:58 PM

Johan moved this task from Announce in next Tech/News to In current Tech/News draft on the User-notice board.Jan 18 2018, 4:45 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

ReleaseTaggerBot edited projects, added MW-1.31-release-notes (WMF-deploy-2018-02-06 (1.31.0-wmf.20)); removed MW-1.31-release-notes (WMF-deploy-2018-01-09 (1.31.0-wmf.16)).Jan 22 2018, 9:00 PM

Johan moved this task from In current Tech/News draft to Already announced/Archive on the User-notice board.Jan 24 2018, 9:09 PM

RandomDSdevel awarded a token.Feb 13 2018, 2:27 AM

RandomDSdevel rescinded a token.