Topic on Talk:OOUI

I have a peculiar issue. I have a couple of scripts on Wikidata where I've used OOUI buttons. The issue appears with multiple scripts, so I made a script as easy as it gets that still has the problem here: d:User:Jon Harald Søby/testscript.js. The script just puts a button after the page title on user pages.

The problem is that the button only loads when the tab is active while the page is being loaded. That is, if I open a tab that should have a button in the background (with Ctrl+click), the button doesn't appear. If I reload and stay in that tab while the page loads, the button appears. If I reload the page and immediately switch to another tab, the button doesn't appear. This happens in both Chrome and Firefox (I'm on Ubuntu 17.10 if that matters).

You can test it yourself by including that script (on Wikidata) with importScript ( 'User:Jon Harald Søby/testscript.js' ); in your common.js.

Am I doing something wrong in that script?

Your script does not specify a dependency on OOjs UI, which means that it might work or not depending on whether something else on the page has loaded OOjs UI first. Perhaps the browsers load scripts in inactive tabs later or in a different order for some reason.

Try wrapping the entire script in a mw.loader.using call to make it reliable, like this:

( function ( $, OO ) {
	mw.loader.using('oojs-ui').then( function () {
		var button = new OO.ui.ButtonWidget( {
			icon: 'lightbulb',
			label: 'Test button that does nothing',
			flags: [
				'primary',
				'destructive'
			]
		});
		$("body.ns-2 h1").after(button.$element);
	} );
})( jQuery, OO );

Yes, that seems to work! Thanks a lot! :-)