2 * JavaScript for the new debug toolbar, enabled through $wgDebugToolbar.
12 hovzer
= $.getFootHovzer();
16 * Toolbar container element
23 * Object containing data for the debug toolbar
30 * Initializes the debugging pane.
31 * Shouldn't be called before the document is ready
32 * (since it binds to elements on the page).
34 * @param {Object} data, defaults to 'debugInfo' from mw.config
36 init: function ( data
) {
38 this.data
= data
|| mw
.config
.get( 'debugInfo' );
41 // Insert the container into the DOM
42 hovzer
.$.append( this.$container
);
45 $( '.mw-debug-panelink' ).click( this.switchPane
);
49 * Switches between panes
51 * @todo Store cookie for last pane open
53 * @param {jQuery.Event} e
55 switchPane: function ( e
) {
56 var currentPaneId
= debug
.$container
.data( 'currentPane' ),
57 requestedPaneId
= $(this).prop( 'id' ).substr( 9 ),
58 $currentPane
= $( '#mw-debug-pane-' + currentPaneId
),
59 $requestedPane
= $( '#mw-debug-pane-' + requestedPaneId
),
62 function updateHov() {
69 // Skip hash fragment handling. Prevents screen from jumping.
72 $( this ).addClass( 'current ');
73 $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ');
75 // Hide the current pane
76 if ( requestedPaneId
=== currentPaneId
) {
77 $currentPane
.slideUp( updateHov
);
78 debug
.$container
.data( 'currentPane', null );
82 debug
.$container
.data( 'currentPane', requestedPaneId
);
84 if ( currentPaneId
=== undefined || currentPaneId
=== null ) {
85 $requestedPane
.slideDown( updateHov
);
88 $requestedPane
.show();
94 * Constructs the HTML for the debugging toolbar
96 buildHtml: function () {
97 var $container
, $bits
, panes
, id
, gitInfo
;
99 $container
= $( '<div id="mw-debug-toolbar" class="mw-debug"></div>' );
101 $bits
= $( '<div class="mw-debug-bits"></div>' );
104 * Returns a jQuery element for a debug-bit div
109 function bitDiv( id
) {
110 return $( '<div>' ).prop({
111 id
: 'mw-debug-' + id
,
112 className
: 'mw-debug-bit'
118 * Returns a jQuery element for a pane link
124 function paneLabel( id
, text
) {
127 className
: 'mw-debug-panelabel',
128 href
: '#mw-debug-pane-' + id
134 * Returns a jQuery element for a debug-bit div with a for a pane link
136 * @param id CSS id snippet. Will be prefixed with 'mw-debug-'
137 * @param text Text to show
138 * @param count Optional count to show
141 function paneTriggerBitDiv( id
, text
, count
) {
143 text
= text
+ ' (' + count
+ ')';
145 return $( '<div>' ).prop({
146 id
: 'mw-debug-' + id
,
147 className
: 'mw-debug-bit mw-debug-panelink'
149 .append( paneLabel( id
, text
) )
153 paneTriggerBitDiv( 'console', 'Console', this.data
.log
.length
);
155 paneTriggerBitDiv( 'querylist', 'Queries', this.data
.queries
.length
);
157 paneTriggerBitDiv( 'debuglog', 'Debug log', this.data
.debugLog
.length
);
159 paneTriggerBitDiv( 'request', 'Request' );
161 paneTriggerBitDiv( 'includes', 'PHP includes', this.data
.includes
.length
);
164 if ( this.data
.gitRevision
!== false ) {
165 gitInfo
= '(' + this.data
.gitRevision
.substring( 0, 7 ) + ')';
166 if ( this.data
.gitViewUrl
!== false ) {
168 .attr( 'href', this.data
.gitViewUrl
)
173 bitDiv( 'mwversion' )
174 .append( $( '<a href="//www.mediawiki.org/">MediaWiki</a>' ) )
175 .append( document
.createTextNode( ': ' + this.data
.mwVersion
+ ' ' ) )
178 if ( this.data
.gitBranch
!== false ) {
179 bitDiv( 'gitbranch' ).text( 'Git branch: ' + this.data
.gitBranch
);
182 bitDiv( 'phpversion' )
183 .append( $( '<a href="//www.php.net/"></a>' ).text( 'PHP' ) )
184 .append( ': ' + this.data
.phpVersion
);
187 .text( 'Time: ' + this.data
.time
.toFixed( 5 ) );
190 .text( 'Memory: ' + this.data
.memory
)
191 .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data
.memoryPeak
+ ')' ) );
194 $bits
.appendTo( $container
);
197 console
: this.buildConsoleTable(),
198 querylist
: this.buildQueryTable(),
199 debuglog
: this.buildDebugLogTable(),
200 request
: this.buildRequestPane(),
201 includes
: this.buildIncludesPane()
204 for ( id
in panes
) {
205 if ( !panes
.hasOwnProperty( id
) ) {
211 className
: 'mw-debug-pane',
212 id
: 'mw-debug-pane-' + id
215 .appendTo( $container
);
218 this.$container
= $container
;
222 * Builds the console panel
224 buildConsoleTable: function () {
225 var $table
, entryTypeText
, i
, length
, entry
;
227 $table
= $( '<table id="mw-debug-console">' );
229 $( '<colgroup>' ).css( 'width', /* padding = */ 20 + ( 10 * /* fontSize = */ 11 ) ).appendTo( $table
);
230 $( '<colgroup>' ).appendTo( $table
);
231 $( '<colgroup>' ).css( 'width', 350 ).appendTo( $table
);
234 entryTypeText = function( entryType
) {
235 switch ( entryType
) {
247 for ( i
= 0, length
= this.data
.log
.length
; i
< length
; i
+= 1 ) {
248 entry
= this.data
.log
[i
];
249 entry
.typeText
= entryTypeText( entry
.type
);
253 .text( entry
.typeText
)
254 .addClass( 'mw-debug-console-' + entry
.type
)
256 .append( $( '<td>' ).html( entry
.msg
) )
257 .append( $( '<td>' ).text( entry
.caller
) )
267 buildQueryTable: function () {
268 var $table
, i
, length
, query
;
270 $table
= $( '<table id="mw-debug-querylist"></table>' );
273 .append( $( '<th>#</th>' ).css( 'width', '4em' ) )
274 .append( $( '<th>SQL</th>' ) )
275 .append( $( '<th>Time</th>' ).css( 'width', '8em' ) )
276 .append( $( '<th>Call</th>' ).css( 'width', '18em' ) )
279 for ( i
= 0, length
= this.data
.queries
.length
; i
< length
; i
+= 1 ) {
280 query
= this.data
.queries
[i
];
283 .append( $( '<td>' ).text( i
+ 1 ) )
284 .append( $( '<td>' ).text( query
.sql
) )
285 .append( $( '<td class="stats">' ).text( ( query
.time
* 1000 ).toFixed( 4 ) + 'ms' ) )
286 .append( $( '<td>' ).text( query
['function'] ) )
295 * Legacy debug log pane
297 buildDebugLogTable: function () {
298 var $list
, i
, length
, line
;
301 for ( i
= 0, length
= this.data
.debugLog
.length
; i
< length
; i
+= 1 ) {
302 line
= this.data
.debugLog
[i
];
304 .html( mw
.html
.escape( line
).replace( /\n/g, '<br />\n' ) )
312 * Request information pane
314 buildRequestPane: function () {
316 function buildTable( title
, data
) {
317 var $unit
, $table
, key
;
319 $unit
= $( '<div>' ).append( $( '<h2>' ).text( title
) );
321 $table
= $( '<table>' ).appendTo( $unit
);
324 .html( '<th>Key</th><th>Value</th>' )
327 for ( key
in data
) {
328 if ( !data
.hasOwnProperty( key
) ) {
333 .append( $( '<th>' ).text( key
) )
334 .append( $( '<td>' ).text( data
[key
] ) )
342 .text( this.data
.request
.method
+ ' ' + this.data
.request
.url
)
343 .append( buildTable( 'Headers', this.data
.request
.headers
) )
344 .append( buildTable( 'Parameters', this.data
.request
.params
) );
348 * Included files pane
350 buildIncludesPane: function () {
351 var $table
, i
, length
, file
;
353 $table
= $( '<table>' );
355 for ( i
= 0, length
= this.data
.includes
.length
; i
< length
; i
+= 1 ) {
356 file
= this.data
.includes
[i
];
358 .append( $( '<td>' ).text( file
.name
) )
359 .append( $( '<td class="nr">' ).text( file
.size
) )
367 }( mediaWiki
, jQuery
) );