MediaWiki:Gadget-wikidebug.js

/**
	@package wikidebug
	@brief Script for debugging JS scripts

	@section Dependencies
	- jQuery - weakly dependent (might be easily rewritten to use something else); uses the "jQuery" object
	- mediawiki.util - for addPortletLink()
	- oojs-ui-core - for OO.ui.alert()

	@section done Functionality
	- Collect errors in an array.
	- Add a debugger icon.
	- Display an error indicator (different icon).
	- Display number of errors caught near the icon.
	- Show errors and browser info upon click on an icon.
	- Display a list of scripts in the info alert.

	@todo
	- Change info alert to some menu or make a right-click menu.
	- Debugger deactivation when the icon(?) is clicked - or maybe when an option is choose (save in a cookie).
	- Check if window.onerror is actualy working. So far:
		- working in: IE, FF
		- not working in: Opera, Chrome, Safari
	- i18n, titles.
	- styling (ids/classes + CSS)
	- Add a link to start wiki debugging mode (document.cookie="resourceLoaderDebug=1;path=/").
	- Display a list of styles?
*/
(function(){

var errors = [],
	stateIcons = {
		'active': '//upload.wikimedia.org/wikipedia/commons/1/16/Wikidebug_state_bug.png',
		'inactive': '//upload.wikimedia.org/wikipedia/commons/4/44/Wikidebug_state_bug_inactive.png',
		'error': '//upload.wikimedia.org/wikipedia/commons/0/0d/Wikidebug_state_bug_occurred.png'
	},
	currentState = 'active',
	$errorCount = null,
	$errorIcon = null;

window.onerror = function ( message, source, lineno, colno, error ) {
	// https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror#window.onerror
	var errorObject = {
		message: message,
		source: source,
		lineno: lineno,
		colno: colno,
		error: error
	};
	
	currentState = 'error';
	
	errors.push( errorObject );
	mw.hook( 'wikidebug.onerror' ).fire( errorObject );
	refreshErrorIndicators();
	
	return false; // forward to default event handler, log on console
};

function refreshErrorIndicators() {
	if ( $errorCount && $errorIcon ) {
		$errorCount.text( mw.format( '($1)', errors.length ) );
		$errorIcon.attr( 'src', stateIcons[ currentState ] );
	}
}

function getBrowser() {
	return navigator.userAgent;
}

function getScripts() {
	var scripts = document.getElementsByTagName( 'script' );
	
	return Array.prototype.slice.call( scripts ).reduce( function ( arr, el ) {
		return el.src ? arr.concat( el.src ) : arr;
	}, [] );
}

function onPortletClick( evt ) {
	var msg = mw.format(
			'=== Browser ===\n$1\n\n=== Scripts ===\n$2\n\n=== Errors ===\n$3',
			getBrowser(),
			getScripts().map( function ( script ) {
					return '* ' + script;
				} ).join( '\n' ),
			errors.map( function ( err ) {
					return mw.format( '* [$1 @$2] $3', err.source, err.lineno, err.message );
				} ).join( '\n' )
		).trim();
	
	mw.loader.using( 'oojs-ui-core' ).done( function () {
		OO.ui.alert( $( '<textarea>' ).attr( 'rows', 15 ).text( msg ), {
			size: 'large',
			title: 'wikidebug'
		} );
	} );
	
	evt.preventDefault();
}

$( function () {
	$errorCount = $( '<span>' );
	$errorIcon = $( '<img>' );
	
	refreshErrorIndicators();
	
	$( mw.util.addPortletLink( 'p-tb', '#', 'Wikidebug', 'p-wikidebug', 'Błędy JavaScript' ) )
		.append( [ ' ', $errorCount, $errorIcon ] )
		.on( 'click', onPortletClick );
} );

})()