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
);
163 if ( this.data
.gitRevision
!= false ) {
164 gitInfo
= ' (' + this.data
.gitRevision
.substring( 0, 7 ) + ')';
167 bitDiv( 'mwversion' )
168 .append( $( '<a href="//www.mediawiki.org/"></a>' ).text( 'MediaWiki' ) )
169 .append( ': ' + this.data
.mwVersion
+ gitInfo
);
171 if ( this.data
.gitBranch
!= false ) {
172 bitDiv( 'gitbranch' ).text( 'Git branch: ' + this.data
.gitBranch
);
175 bitDiv( 'phpversion' )
176 .append( $( '<a href="//www.php.net/"></a>' ).text( 'PHP' ) )
177 .append( ': ' + this.data
.phpVersion
);
180 .text( 'Time: ' + this.data
.time
.toFixed( 5 ) );
183 .text( 'Memory: ' + this.data
.memory
)
184 .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data
.memoryPeak
+ ')' ) );
187 $bits
.appendTo( $container
);
190 console
: this.buildConsoleTable(),
191 querylist
: this.buildQueryTable(),
192 debuglog
: this.buildDebugLogTable(),
193 request
: this.buildRequestPane(),
194 includes
: this.buildIncludesPane()
197 for ( id
in panes
) {
198 if ( !panes
.hasOwnProperty( id
) ) {
204 'class': 'mw-debug-pane',
205 id
: 'mw-debug-pane-' + id
208 .appendTo( $container
);
211 this.$container
= $container
;
215 * Builds the console panel
217 buildConsoleTable: function () {
218 var $table
, entryTypeText
, i
, length
, entry
;
220 $table
= $( '<table id="mw-debug-console">' );
222 $('<colgroup>').css( 'width', /*padding=*/20 + ( 10*/
*fontSize*/
11 ) ).appendTo( $table
);
223 $('<colgroup>').appendTo( $table
);
224 $('<colgroup>').css( 'width', 350 ).appendTo( $table
);
227 entryTypeText = function( entryType
) {
228 switch ( entryType
) {
240 for ( i
= 0, length
= this.data
.log
.length
; i
< length
; i
+= 1 ) {
241 entry
= this.data
.log
[i
];
242 entry
.typeText
= entryTypeText( entry
.type
);
246 .text( entry
.typeText
)
247 .attr( 'class', 'mw-debug-console-' + entry
.type
)
249 .append( $( '<td>' ).html( entry
.msg
) )
250 .append( $( '<td>' ).text( entry
.caller
) )
260 buildQueryTable: function () {
261 var $table
, i
, length
, query
;
263 $table
= $( '<table id="mw-debug-querylist"></table>' );
266 .append( $('<th>#</th>').css( 'width', '4em' ) )
267 .append( $('<th>SQL</th>') )
268 .append( $('<th>Time</th>').css( 'width', '8em' ) )
269 .append( $('<th>Call</th>').css( 'width', '18em' ) )
272 for ( i
= 0, length
= this.data
.queries
.length
; i
< length
; i
+= 1 ) {
273 query
= this.data
.queries
[i
];
276 .append( $( '<td>' ).text( i
+ 1 ) )
277 .append( $( '<td>' ).text( query
.sql
) )
278 .append( $( '<td class="stats">' ).text( ( query
.time
* 1000 ).toFixed( 4 ) + 'ms' ) )
279 .append( $( '<td>' ).text( query
['function'] ) )
288 * Legacy debug log pane
290 buildDebugLogTable: function () {
291 var $list
, i
, length
, line
;
294 for ( i
= 0, length
= this.data
.debugLog
.length
; i
< length
; i
+= 1 ) {
295 line
= this.data
.debugLog
[i
];
297 .html( mw
.html
.escape( line
).replace( /\n/g, "<br />\n" ) )
305 * Request information pane
307 buildRequestPane: function () {
309 function buildTable( title
, data
) {
310 var $unit
, $table
, key
;
312 $unit
= $( '<div>' ).append( $( '<h2>' ).text( title
) );
314 $table
= $( '<table>' ).appendTo( $unit
);
317 .html( '<th>Key</th><th>Value</th>' )
320 for ( key
in data
) {
321 if ( !data
.hasOwnProperty( key
) ) {
326 .append( $( '<th>' ).text( key
) )
327 .append( $( '<td>' ).text( data
[key
] ) )
335 .text( this.data
.request
.method
+ ' ' + this.data
.request
.url
)
336 .append( buildTable( 'Headers', this.data
.request
.headers
) )
337 .append( buildTable( 'Parameters', this.data
.request
.params
) );
341 * Included files pane
343 buildIncludesPane: function () {
344 var $table
, i
, length
, file
;
346 $table
= $( '<table>' );
348 for ( i
= 0, length
= this.data
.includes
.length
; i
< length
; i
+= 1 ) {
349 file
= this.data
.includes
[i
];
351 .append( $( '<td>' ).text( file
.name
) )
352 .append( $( '<td class="nr">' ).text( file
.size
) )
360 } )( jQuery
, mediaWiki
);