Page MenuHomePhabricator
Create Task
Maniphest T348286

Move the default OOUI overlay and window manager inside the MediaWiki teleport target
Closed, ResolvedPublic
Actions

Description

As suggested by @Jdlrobson in T339058#9201151, we should move the default OOUI overlay and window manager (OO.ui.getDefaultOverlay() and OO.ui.getWindowManager()) inside the MediaWiki teleport target (require( 'mediawiki.page.ready' ).teleportTarget). This will allow skins to style the dialogs/dropdowns/etc. provided by OOUI, Codex and any future libraries with just one CSS override (or one line of JS). See T347199: Apply skin body styles to teleported elements for context.

We could add an overridable method in OOUI, which would be used by these two methods, and overridden in MediaWiki here: https://gerrit.wikimedia.org/g/mediawiki/core/ /master/resources/src/ooui-local.js. (I considered just overriding these two methods in MediaWiki directly, to avoid depending on a new OOUI release, but it was ugly, and there's no hurry.)

OOUI itself shouldn't have any references to MediaWiki teleport target, since it's supposed to be independent of MediaWiki.

Details

SubjectRepoBranchLines /-
Use standard 'teleportTarget' for OOUImediawiki/coremaster 4 -0
Add OO.ui.getTeleportTarget() to allow it to be overriddenoojs/uimaster 15 -2
Customize query in gerrit

Related Objects
Search...

Event Timeline

matmarex created this task.Oct 5 2023, 11:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 5 2023, 11:29 PM
matmarex mentioned this in T348287: Migrate all skin styles for .oo-ui-windowManager and .oo-ui-defaultOverlay to #mw-teleport-target.Oct 5 2023, 11:29 PM
matmarex mentioned this in T348288: Move VisualEditor overlays and window managers inside the MediaWiki teleport target, remove uses of 'vector-body'.
matmarex added a parent task: T348287: Migrate all skin styles for .oo-ui-windowManager and .oo-ui-defaultOverlay to #mw-teleport-target.
matmarex mentioned this in T348289: Migrate Vector skin styles for .oo-ui-windowManager and .oo-ui-defaultOverlay to #mw-teleport-target.
matmarex added a parent task: T348289: Migrate Vector skin styles for .oo-ui-windowManager and .oo-ui-defaultOverlay to #mw-teleport-target.
gerritbot added a comment.Oct 6 2023, 12:04 AM

Change 963846 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[oojs/ui@master] Add OO.ui.getTeleportTarget() to allow it to be overridden

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

gerritbot added a project: Patch-For-Review.Oct 6 2023, 12:04 AM

Change 963847 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/core@master] Use standard 'teleportTarget' for OOUI

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

matmarex added a project: OOUI.Oct 6 2023, 12:09 AM
matmarex updated the task description. (Show Details)
DLynch subscribed.Oct 6 2023, 4:27 AM
gerritbot added a comment.Oct 7 2023, 10:36 AM

Change 963846 merged by jenkins-bot:

[oojs/ui@master] Add OO.ui.getTeleportTarget() to allow it to be overridden

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

gerritbot added a comment.Oct 10 2023, 8:16 PM

Change 964977 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Simplify teleport styles

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

Jdlrobson added a project: Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 1).Oct 10 2023, 8:18 PM
Jdlrobson removed a project: Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 1).
egardner added a project: Design-System-Team (Roadmap).Oct 10 2023, 10:56 PM
egardner edited projects, added Design-System-Team; removed Design-System-Team (Roadmap).
egardner moved this task from Inbox to Following on the Design-System-Team board.
matmarex claimed this task.Oct 12 2023, 10:14 PM
gerritbot added a comment.Oct 27 2023, 8:43 PM

Change 963847 merged by jenkins-bot:

[mediawiki/core@master] Use standard 'teleportTarget' for OOUI

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.3; 2023-10-31).Oct 27 2023, 9:00 PM
Jdforrester-WMF closed this task as Resolved.Oct 30 2023, 1:04 PM
Nardog mentioned this in T332120: Replace deprecated WikimediaUI Base aliases with current Codex design tokens.Nov 4 2023, 10:01 AM
Nardog subscribed.Nov 4 2023, 10:11 AM

So WindowManager, PopupElement, etc. all need to be attached to OO.ui.getTeleportTarget() instead of <body> to have the proper styling now? That seems like such a breaking change it deserves to be on at least wikitech-l, if not also Tech News (especially given we don't have the frontend mailing list yet). Documentation on MWWiki and gadgets also need fixing.

matmarex added a comment.Nov 9 2023, 7:35 PM

@Nardog When it comes to PopupElement etc. that has always been the case, except that before we had OO.ui.getTeleportTarget(), you had to attach your popups to OO.ui.getDefaultOverlay() (or inside #mw-content-text etc.), otherwise they would have the wrong font size in most MediaWiki skins.

When it comes to WindowManager, it actually had special styling before so it worked when attached to <body>, and I made a mistake in removing it. It has been restored now in https://phabricator.wikimedia.org/T350544. Sorry about that (and sorry I didn't see your comment earlier).

The documentation at https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays is correct, as far as I can tell. If you point me to anything that is wrong or unclear, I'll fix it.

Nardog added a comment.Nov 9 2023, 8:07 PM

@matmarex No problem! One thing that remains unclear to me is when one should attach a WindowManager to OO.ui.getTeleportTarget() and when to <body>. I see T350467 has not been undone, so is the recommended practice going forward to use the teleport target? Or is there something specific about these elements that warrants the use of the teleport target?

matmarex added a comment.Nov 9 2023, 8:21 PM

Yes, always attach them to OO.ui.getTeleportTarget() from now on. In the past we've had a hard time keeping the special WindowManager styles in sync with the normal styles for the content, particularly on Vector (this was one of my motivations for this change), so if that happens again, you'll avoid problems.

DLynch mentioned this in T373875: New default font size for logged out user causes some UI components to scale (VE, DiscussionTools, WikiEditor, ...).Sep 11 2024, 6:45 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