Wikipedysta:BartekChom/wikidebug.js

/**
	@package wikidebug
	@brief Script for debugging JS scripts
	
	@section Dependencies
	- jQuery - weakly depenedent (might be easily rewritten to use something else); uses the "jQuery" object
	- sftJSmsg - used for nice alerts

	@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?
*/

/**
	@brief Class for debugging
*/
function wikiDbgClass()
{
	//! Version of class
	this.ver = this.version = '1.0.1';

	//! @brief Array of errors that were caught
	//! this is an array of objects: {strErrMsg:'error message', strFileName:'some.script.name.js', intLine:123}
	this.arrErrors = new Array();
	
	//! <private> variable containing an object of the class
	var self = this;

	//! <private> Icons urls depending on state of the debugger
	var oStateIcons = {
		'active' : 'http://upload.wikimedia.org/wikipedia/commons/1/16/Wikidebug_state_bug.png',
		'inactive' : 'http://upload.wikimedia.org/wikipedia/commons/4/44/Wikidebug_state_bug_inactive.png',
		'error' : 'http://upload.wikimedia.org/wikipedia/commons/3/39/Wikidebug_state_bug_occured.png'
	};
	// test ver.
	if (location.hostname == 'localhost')
	{
		oStateIcons = {
			'active' : 'img/bug.png',
			'inactive' : 'img/bug_inactive.png',
			'error' : 'img/bug_occured.png'
		};
	}
	
	//! <private> state of the debugger
	var strState = 'active';	// for now always active

	//! <private> Main container element
	var elContainer = null;
	//! <private> Icon element
	var elIcon = null;
	//! <private> Number of bugs indicator element
	var elNumBugs = null;
	
	/**
		@brief <private> Error handler to be run onerror
	*/
	function errorHandler(strErrMsg, strFileName, intLine)
	{
		strState = 'error';
		self.arrErrors.push({
			'strErrMsg':strErrMsg, 'strFileName':strFileName, 'intLine':intLine
		})
		return true;
	}

	/**
		@brief <private> Init stuff that needs to have the page ready
	*/
	function pageReady()
	{
		// add container for info and icons
		elContainer = document.createElement('div');
		var elParent = document.getElementById('p-personal');
		if (!elParent)
		{
			elParent = document.body;
			//elContainer.style.cssText = 'position:absolute; right:0; top:0; z-index:10000; background-color:white;';
		}
		else
		{
			//elContainer.style.cssText = 'position:relative; z-index:10000; background-color:white;';
		}
		elContainer.setAttribute('id', 'wikidebug-container');
		elParent.appendChild(elContainer);
		
		// add num of bugs
		elNumBugs = document.createElement('span');
		if (self.arrErrors.length)
		{
			elNumBugs.innerHTML = self.arrErrors.length;
		}
		elContainer.appendChild(elNumBugs);
		
		// add bugs icon
		elIcon = document.createElement('img');
		elIcon.src = oStateIcons[strState];
		elIcon.setAttribute('alt', 'bug:'+strState);
		elIcon.onclick = function() {self.showInfo()};
		elContainer.appendChild(elIcon);
	}

	/**
		@brief <private> Get browser details
	*/
	function getBrowser()
	{
		return navigator.userAgent;
	}

	/**
		@brief <private> Get loaded scripts
	*/
	function getScripts()
	{
		var arrScripts = new Array();
		//var reShortenScriptUrl = /^http:\/\/([^\/]+).+?[?&]title=([^?&]+).+/;
		jQuery('script').each(function()
		{
			var url = this.src;
			/*
			if (url.search(reShortenScriptUrl)>=0)
			{
				url = url.replace(reShortenScriptUrl, '$1/$2');
			}
			*/
			if (url && url.length)	// external script
			{
				arrScripts.push(url);
			}
		});
		return arrScripts;
	}

	/**
		@brief Init debugging
	*/
	this.init = function ()
	{
		if (strState == 'active')
		{
			window.onerror = errorHandler;
		}
		jQuery(document).ready(pageReady);
	}

	/**
		@brief Show debug info
	*/
	this.showInfo = function()
	{
		// conv. errors
		var strErrors = '';
		for (var i in self.arrErrors)
		{
			strErrors += '\n* ['+self.arrErrors[i].strFileName+' @'+self.arrErrors[i].intLine+'] '
				+self.arrErrors[i].strErrMsg
			;
		}
		// show
		jsAlert(''
			+'<div><textarea rows="10" style="width:100%">'
				+'=== Browser ===\n'
				+getBrowser()
				+'\n\n'
				+'=== Scripts ===\n'
				+'\n* '+getScripts().join('\n* ')
				+'\n\n'
				+'=== Errors ===\n'
				+strErrors
				+'\n\n'
			+'</textarea></div>'
		);
	}
}

//
// Init debugger object
//
var wikidbg = new wikiDbgClass();
// this should start debugging
wikidbg.init();
// EOF