Page MenuHomePhabricator

OOUI styles aren't available separately for certain modules
Closed, ResolvedPublic

Description

The JavaScript of the module oojs-ui-widgets generates the HTML for the tabs and that module also provides the styling for those tabs. If you wish to manually create those tabs, either to prevent a FOUC or to show navigation to users without JavaScript, you can manually build the tabs based on the HTML generated by the widget, but you'll be left without any styling. There should be a way to obtain the styling, even when JavaScript is disabled.

This can be resolved by adding a new module, for example oojs-ui-widgets.styles, that only contains the style-related content, similar to oojs-ui-core.styles. It would look something like this:

'oojs-ui-widgets.styles' => [
	'class' => ResourceLoaderOOUIFileModule::class,
	'themeStyles' => 'widgets',
	'targets' => [ 'desktop', 'mobile' ],
],

I've added it to Resources.php, and that does the trick.

This is most likely going to occur for T117781: Convert Special:Preferences to OOUI as well, as the patch for that task hasn't yet resolved the TODO related to the FOUC for the fake tabs.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 10 2018, 9:14 AM
matmarex added a subscriber: matmarex.EditedApr 25 2018, 11:02 PM

Is there any other use case for this? If not, let's merge T192769 and this task please. (nevermind, let's make this a subtask)

I was just reviewing https://gerrit.wikimedia.org/r/c/428326 and I don't think this is a good idea. In that patch, Ed implemented pretty much the same thing you propose here, so let me copy my comment from there:

You hardcode the HTML structure of IndexLayout/TabPanelLayout/TabSelectWidget/TabOptionWidget, but use the "normal" CSS. If the structure changes and the CSS is updated, Special:Preferences will break. I think copy-pasting the CSS we need to mediawiki.special.preferences.styles.css would actually be less bad than this.
But really, if we want to be able to render these classes from PHP code, then we should implement PHP versions of them in OOUI (and move them, and their styles, from 'widgets' module to 'core' module), and then use that here. This would be easy to do, but very boring, but then sometimes you gotta make sacrifices :(
Also, as written, this causes the styles for the entire 'oojs-ui-widgets' module to be loaded twice. If you really want to go this way, you could remove 'themeStyles' => 'widgets', from 'oojs-ui-widgets' and instead add a dependency on 'oojs-ui-widgets.styles'; but I think we should drop this approach and instead do one of the options I described above.

Change 428326 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] Special:Preferences: Construct fake tabs to avoid FOUC

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

Volker_E moved this task from Backlog to Doing on the OOUI board.May 7 2018, 9:57 PM

Meh, I guess this is getting merged anyway. Please never use this module though. You're just asking for an unintentional OOUI change to break your thing.

Change 428326 merged by jenkins-bot:
[mediawiki/core@master] Special:Preferences: Construct fake tabs to avoid FOUC

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

Jdforrester-WMF closed this task as Resolved.May 18 2018, 6:51 PM
Jdforrester-WMF assigned this task to Esanders.