Page MenuHomePhabricator
Create Task
Maniphest T183069

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

Assigned To
matmarex
Authored By
matmarex
Dec 16 2017, 9:34 PM
Tags
Referenced Files
F11934548: image.png
Dec 19 2017, 3:20 PM
F11772717: Movepage-issue.png
Dec 16 2017, 9:34 PM
F11069616: image.png
Dec 16 2017, 9:34 PM
Subscribers
0x010C
Aklapper
Framawiki
Jdforrester-WMF
matmarex
Nikerabbit
Schnark
View All 9 Subscribers
Tokens
"Piece of Eight" token, awarded by RandomDSdevel."Love" token, awarded by Framawiki."Like" token, awarded by Volker_E.

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.

image.png (980×1 px, 202 KB)

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.

Movepage-issue.png (605×634 px, 51 KB)

Details

SubjectRepoBranchLines /-
OOjs UI: Fix z-index and font size for default overlaymediawiki/skins/Timelessmaster 5 -0
Put menus/popups of infused PHP widgets into the default overlaymediawiki/coremaster 19 -19
OOjs UI: Fix font size for default overlaymediawiki/coremaster 6 -4
OOjs UI: Fix font size for default overlaymediawiki/skins/MonoBookmaster 5 -1
OOjs UI: Fix z-index and font size for default overlaymediawiki/skins/Vectormaster 7 -0
Put menus/popups of infused PHP widgets into the default overlayoojs/uiv0.24.4 20 -0
Introduce OO.ui.getDefaultOverlayoojs/uiv0.24.4 63 -10
Put menus/popups of infused PHP widgets into the default overlayoojs/uimaster 20 -0
Introduce OO.ui.getDefaultOverlayoojs/uimaster 63 -10
Customize query in gerrit

Related Objects
Search...

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
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.
gerritbot subscribed.Dec 16 2017, 9:43 PM

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

gerritbot added a project: Patch-For-Review.Dec 16 2017, 9:43 PM

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

gerritbot added a comment.Dec 16 2017, 9:46 PM

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

gerritbot added a comment.Dec 16 2017, 9:46 PM

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
gerritbot added a comment.Dec 18 2017, 2:22 PM

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

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

gerritbot added a comment.Dec 18 2017, 2:40 PM

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
matmarex added a comment.Dec 18 2017, 9:15 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.
Nikerabbit subscribed.Dec 19 2017, 3:20 PM

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

image.png (819×2 px, 323 KB)

matmarex added a comment.Dec 19 2017, 4:01 PM

Maybe. Can you file a separate task?

gerritbot added a comment.Dec 19 2017, 8:33 PM

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

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

gerritbot added a comment.Dec 19 2017, 8:44 PM

Change 399253 merged by jenkins-bot:
[oojs/[email protected]] Introduce OO.ui.getDefaultOverlay

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

gerritbot added a comment.Dec 19 2017, 8:45 PM

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

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

gerritbot added a comment.Dec 19 2017, 8:56 PM

Change 399254 merged by jenkins-bot:
[oojs/[email protected]] 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.
gerritbot added a comment.Jan 2 2018, 6:22 PM

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
matmarex added a comment.Jan 2 2018, 8:18 PM

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

gerritbot added a comment.Jan 2 2018, 9:58 PM

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

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

gerritbot added a comment.Jan 2 2018, 9:58 PM

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

gerritbot added a comment.Jan 2 2018, 9:58 PM

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
gerritbot added a comment.Jan 2 2018, 10:46 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
Jdforrester-WMF subscribed.Jan 3 2018, 12:47 AM

Resolved?

matmarex added a comment.Jan 3 2018, 3:29 PM

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.

matmarex removed a parent task: T182999: Namespace selection dropdown opens in the wrong direction, Special page tab overlaps.Jan 3 2018, 3:34 PM

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.)

gerritbot added a comment.Jan 3 2018, 8:24 PM

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
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).

gerritbot added a comment.Jan 12 2018, 9:56 PM

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.
Stryn subscribed.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.

Trizek-WMF added a project: User-notice.Jan 16 2018, 4:16 PM

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
gerritbot added a comment.Jan 22 2018, 8:16 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.
RandomDSdevel awarded a token.
Ladsgroup edited projects, added User-notice-archive; removed User-notice.Aug 13 2022, 1:53 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits