Page MenuHomePhabricator

OOUI "settings" icon does not display on file pages on production
Closed, InvalidPublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

What happens?:
The 'settings' icon doesn't show. Note that replacing 'settings' with 'error' actually does show the 'error' icon. Also note that the 'settings' icon is displayed when you run the code on:
*https://en.wikipedia.beta.wmflabs.org/wiki/Bert
*https://en.wikipedia.beta.wmflabs.org/wiki/File:Bert_Self-portrait.png
*https://en.wikipedia.org/wiki/Oozlefinch
The problem only exists in production and only in the File: namespace. (maybe other namespaces, I didn't try them all)

What should have happened instead?:
Settings icon should always be displayed.

Event Timeline

matmarex added a subscriber: matmarex.

This is expected. Icons are not all always loaded, they must be loaded by the code that is using them.

To do that, you'd load a ResourceLoader module named oojs-ui.styles.icons-<pack>, where <pack> is chosen from the list at https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons. For example, the 'settings' icon is a part of the 'interactions' pack, so you'd load oojs-ui.styles.icons-interactions. (You can also add the module to dependencies if you're building a gadget.)

Note that you also need to load the ResourceLoader modules for the OOUI code you're using, or just oojs-ui to load them all. When I try your snippet while logged out, I get an error saying that ButtonWidget is undefined.

So, overall, you'll need something like this:

mw.loader.using( [ 'oojs-ui', 'oojs-ui.styles.icons-interactions' ] ).then( function () {
	button = new OO.ui.ButtonWidget( { framed: false, icon: 'settings', label: 'Settings', id: 'test', invisibleLabel: false } );
	$( '.vector-menu-content' ).append(button.$element);
} );

This is expected. Icons are not all always loaded, they must be loaded by the code that is using them.

To do that, you'd load a ResourceLoader module named oojs-ui.styles.icons-<pack>, where <pack> is chosen from the list at https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons. For example, the 'settings' icon is a part of the 'interactions' pack, so you'd load oojs-ui.styles.icons-interactions. (You can also add the module to dependencies if you're building a gadget.)

Note that you also need to load the ResourceLoader modules for the OOUI code you're using, or just oojs-ui to load them all. When I try your snippet while logged out, I get an error saying that ButtonWidget is undefined.

So, overall, you'll need something like this:

mw.loader.using( [ 'oojs-ui', 'oojs-ui.styles.icons-interactions' ] ).then( function () {
	button = new OO.ui.ButtonWidget( { framed: false, icon: 'settings', label: 'Settings', id: 'test', invisibleLabel: false } );
	$( '.vector-menu-content' ).append(button.$element);
} );

Thank you, I had no idea! This likely also explains an issue I found with https://en.wikipedia.org/wiki/User:Enterprisey/script-installer. (unstyled infobox button on the page of one script)