2 * JavaScript for the new debug toolbar, enabled through $wgDebugToolbar.
8 ( function ( $, mw, undefined ) {
11 var hovzer = $.getFootHovzer();
13 var debug = mw.Debug = {
15 * Toolbar container element
22 * Object containing data for the debug toolbar
29 * Initializes the debugging pane.
30 * Shouldn't be called before the document is ready
31 * (since it binds to elements on the page).
33 * @param {Object} data, defaults to 'debugInfo' from mw.config
35 init: function ( data ) {
37 this.data = data || mw.config.get( 'debugInfo' );
40 // Insert the container into the DOM
41 hovzer.$.append( this.$container );
44 $( '.mw-debug-panelink' ).click( this.switchPane );
48 * Switches between panes
50 * @todo Store cookie for last pane open
52 * @param {jQuery.Event} e
54 switchPane: function ( e ) {
55 var currentPaneId = debug.$container.data( 'currentPane' ),
56 requestedPaneId = $(this).prop( 'id' ).substr( 9 ),
57 $currentPane = $( '#mw-debug-pane-' + currentPaneId ),
58 $requestedPane = $( '#mw-debug-pane-' + requestedPaneId ),
61 function updateHov() {
68 // Skip hash fragment handling. Prevents screen from jumping.
71 $( this ).addClass( 'current ');
72 $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ');
74 // Hide the current pane
75 if ( requestedPaneId === currentPaneId ) {
76 $currentPane.slideUp( updateHov );
77 debug.$container.data( 'currentPane', null );
81 debug.$container.data( 'currentPane', requestedPaneId );
83 if ( currentPaneId === undefined || currentPaneId === null ) {
84 $requestedPane.slideDown( updateHov );
87 $requestedPane.show();
93 * Constructs the HTML for the debugging toolbar
95 buildHtml: function () {
96 var $container, $bits, panes, id;
98 $container = $( '<div id="mw-debug-toolbar" class="mw-debug"></div>' );
100 $bits = $( '<div class="mw-debug-bits"></div>' );
103 * Returns a jQuery element for a debug-bit div
108 function bitDiv( id ) {
109 return $( '<div>' ).attr({
110 id: 'mw-debug-' + id,
111 'class': 'mw-debug-bit'
117 * Returns a jQuery element for a pane link
123 function paneLabel( id, text ) {
126 'class': 'mw-debug-panelabel',
127 href: '#mw-debug-pane-' + id
133 * Returns a jQuery element for a debug-bit div with a for a pane link
135 * @param id CSS id snippet. Will be prefixed with 'mw-debug-'
136 * @param text Text to show
137 * @param count Optional count to show
140 function paneTriggerBitDiv( id, text, count ) {
142 text = text + ' (' + count + ')';
144 return $( '<div>' ).attr({
145 id: 'mw-debug-' + id,
146 'class': 'mw-debug-bit mw-debug-panelink'
148 .append( paneLabel( id, text ) )
152 paneTriggerBitDiv( 'console', 'Console', this.data.log.length );
154 paneTriggerBitDiv( 'querylist', 'Queries', this.data.queries.length );
156 paneTriggerBitDiv( 'debuglog', 'Debug log', this.data.debugLog.length );
158 paneTriggerBitDiv( 'request', 'Request' );
160 paneTriggerBitDiv( 'includes', 'PHP includes', this.data.includes.length );
162 bitDiv( 'mwversion' )
163 .append( $( '<a href="//www.mediawiki.org/"></a>' ).text( 'MediaWiki' ) )
164 .append( ': ' + this.data.mwVersion );
166 bitDiv( 'phpversion' )
167 .append( $( '<a href="//www.php.net/"></a>' ).text( 'PHP' ) )
168 .append( ': ' + this.data.phpVersion );
171 .text( 'Time: ' + this.data.time.toFixed( 5 ) );
174 .text( 'Memory: ' + this.data.memory )
175 .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data.memoryPeak + ')' ) );
178 $bits.appendTo( $container );
181 console: this.buildConsoleTable(),
182 querylist: this.buildQueryTable(),
183 debuglog: this.buildDebugLogTable(),
184 request: this.buildRequestPane(),
185 includes: this.buildIncludesPane()
188 for ( id in panes ) {
189 if ( !panes.hasOwnProperty( id ) ) {
195 'class': 'mw-debug-pane',
196 id: 'mw-debug-pane-' + id
199 .appendTo( $container );
202 this.$container = $container;
206 * Builds the console panel
208 buildConsoleTable: function () {
209 var $table, entryTypeText, i, length, entry;
211 $table = $( '<table id="mw-debug-console">' );
213 $('<colgroup>').css( 'width', /*padding=*/20 + ( 10*/*fontSize*/11 ) ).appendTo( $table );
214 $('<colgroup>').appendTo( $table );
215 $('<colgroup>').css( 'width', 350 ).appendTo( $table );
218 entryTypeText = function( entryType ) {
219 switch ( entryType ) {
231 for ( i = 0, length = this.data.log.length; i < length; i += 1 ) {
232 entry = this.data.log[i];
233 entry.typeText = entryTypeText( entry.type );
237 .text( entry.typeText )
238 .attr( 'class', 'mw-debug-console-' + entry.type )
240 .append( $( '<td>' ).html( entry.msg ) )
241 .append( $( '<td>' ).text( entry.caller ) )
251 buildQueryTable: function () {
252 var $table, i, length, query;
254 $table = $( '<table id="mw-debug-querylist"></table>' );
257 .append( $('<th>#</th>').css( 'width', '4em' ) )
258 .append( $('<th>SQL</th>') )
259 .append( $('<th>Time</th>').css( 'width', '8em' ) )
260 .append( $('<th>Call</th>').css( 'width', '18em' ) )
263 for ( i = 0, length = this.data.queries.length; i < length; i += 1 ) {
264 query = this.data.queries[i];
267 .append( $( '<td>' ).text( i + 1 ) )
268 .append( $( '<td>' ).text( query.sql ) )
269 .append( $( '<td class="stats">' ).text( ( query.time * 1000 ).toFixed( 4 ) + 'ms' ) )
270 .append( $( '<td>' ).text( query['function'] ) )
279 * Legacy debug log pane
281 buildDebugLogTable: function () {
282 var $list, i, length, line;
285 for ( i = 0, length = this.data.debugLog.length; i < length; i += 1 ) {
286 line = this.data.debugLog[i];
288 .html( mw.html.escape( line ).replace( /\n/g, "<br />\n" ) )
296 * Request information pane
298 buildRequestPane: function () {
300 function buildTable( title, data ) {
301 var $unit, $table, key;
303 $unit = $( '<div>' ).append( $( '<h2>' ).text( title ) );
305 $table = $( '<table>' ).appendTo( $unit );
308 .html( '<th>Key</th><th>Value</th>' )
311 for ( key in data ) {
312 if ( !data.hasOwnProperty( key ) ) {
317 .append( $( '<th>' ).text( key ) )
318 .append( $( '<td>' ).text( data[key] ) )
326 .text( this.data.request.method + ' ' + this.data.request.url )
327 .append( buildTable( 'Headers', this.data.request.headers ) )
328 .append( buildTable( 'Parameters', this.data.request.params ) );
332 * Included files pane
334 buildIncludesPane: function () {
335 var $table, i, length, file;
337 $table = $( '<table>' );
339 for ( i = 0, length = this.data.includes.length; i < length; i += 1 ) {
340 file = this.data.includes[i];
342 .append( $( '<td>' ).text( file.name ) )
343 .append( $( '<td class="nr">' ).text( file.size ) )
351 } )( jQuery, mediaWiki );