5 hovzer
= $.getFootHovzer();
10 * Enabled server-side through `$wgDebugToolbar`.
14 * @author John Du Hart
19 * Toolbar container element
26 * Object containing data for the debug toolbar
33 * Initialize the debugging pane
35 * Shouldn't be called before the document is ready
36 * (since it binds to elements on the page).
38 * @param {Object} [data] Defaults to 'debugInfo' from mw.config
40 init: function ( data
) {
42 this.data
= data
|| mw
.config
.get( 'debugInfo' );
45 // Insert the container into the DOM
46 hovzer
.$.append( this.$container
);
49 $( '.mw-debug-panelink' ).click( this.switchPane
);
53 * Switch between panes
55 * Should be called with an HTMLElement as its thisArg,
56 * because it's meant to be an event handler.
58 * TODO: Store cookie for last pane open.
60 * @param {jQuery.Event} e
62 switchPane: function ( e
) {
63 var currentPaneId
= debug
.$container
.data( 'currentPane' ),
64 requestedPaneId
= $( this ).prop( 'id' ).slice( 9 ),
65 $currentPane
= $( '#mw-debug-pane-' + currentPaneId
),
66 $requestedPane
= $( '#mw-debug-pane-' + requestedPaneId
),
69 function updateHov() {
76 // Skip hash fragment handling. Prevents screen from jumping.
79 $( this ).addClass( 'current ' );
80 $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ' );
82 // Hide the current pane
83 if ( requestedPaneId
=== currentPaneId
) {
84 $currentPane
.slideUp( updateHov
);
85 debug
.$container
.data( 'currentPane', null );
89 debug
.$container
.data( 'currentPane', requestedPaneId
);
91 if ( currentPaneId
=== undefined || currentPaneId
=== null ) {
92 $requestedPane
.slideDown( updateHov
);
95 $requestedPane
.show();
101 * Construct the HTML for the debugging toolbar
103 buildHtml: function () {
104 var $container
, $bits
, panes
, id
, gitInfo
;
106 $container
= $( '<div id="mw-debug-toolbar" class="mw-debug" lang="en" dir="ltr"></div>' );
108 $bits
= $( '<div class="mw-debug-bits"></div>' );
111 * Returns a jQuery element for a debug-bit div
117 function bitDiv( id
) {
118 return $( '<div>' ).prop( {
119 id
: 'mw-debug-' + id
,
120 className
: 'mw-debug-bit'
121 } ).appendTo( $bits
);
125 * Returns a jQuery element for a pane link
129 * @param {string} text
132 function paneLabel( id
, text
) {
135 className
: 'mw-debug-panelabel',
136 href
: '#mw-debug-pane-' + id
142 * Returns a jQuery element for a debug-bit div with a for a pane link
145 * @param {string} id CSS id snippet. Will be prefixed with 'mw-debug-'
146 * @param {string} text Text to show
147 * @param {string} count Optional count to show
150 function paneTriggerBitDiv( id
, text
, count
) {
152 text
= text
+ ' (' + count
+ ')';
154 return $( '<div>' ).prop( {
155 id
: 'mw-debug-' + id
,
156 className
: 'mw-debug-bit mw-debug-panelink'
158 .append( paneLabel( id
, text
) )
162 paneTriggerBitDiv( 'console', 'Console', this.data
.log
.length
);
164 paneTriggerBitDiv( 'querylist', 'Queries', this.data
.queries
.length
);
166 paneTriggerBitDiv( 'debuglog', 'Debug log', this.data
.debugLog
.length
);
168 paneTriggerBitDiv( 'request', 'Request' );
170 paneTriggerBitDiv( 'includes', 'PHP includes', this.data
.includes
.length
);
173 if ( this.data
.gitRevision
!== false ) {
174 gitInfo
= '(' + this.data
.gitRevision
.slice( 0, 7 ) + ')';
175 if ( this.data
.gitViewUrl
!== false ) {
177 .attr( 'href', this.data
.gitViewUrl
)
182 bitDiv( 'mwversion' )
183 .append( $( '<a href="//www.mediawiki.org/">MediaWiki</a>' ) )
184 .append( document
.createTextNode( ': ' + this.data
.mwVersion
+ ' ' ) )
187 if ( this.data
.gitBranch
!== false ) {
188 bitDiv( 'gitbranch' ).text( 'Git branch: ' + this.data
.gitBranch
);
191 bitDiv( 'phpversion' )
192 .append( $( this.data
.phpEngine
=== 'HHVM' ?
193 '<a href="http://hhvm.com/">HHVM</a>' :
194 '<a href="https://php.net/">PHP</a>'
196 .append( ': ' + this.data
.phpVersion
);
199 .text( 'Time: ' + this.data
.time
.toFixed( 5 ) );
202 .text( 'Memory: ' + this.data
.memory
+ ' (Peak: ' + this.data
.memoryPeak
+ ')' );
204 $bits
.appendTo( $container
);
207 console
: this.buildConsoleTable(),
208 querylist
: this.buildQueryTable(),
209 debuglog
: this.buildDebugLogTable(),
210 request
: this.buildRequestPane(),
211 includes
: this.buildIncludesPane()
214 for ( id
in panes
) {
215 if ( !panes
.hasOwnProperty( id
) ) {
221 className
: 'mw-debug-pane',
222 id
: 'mw-debug-pane-' + id
224 .append( panes
[ id
] )
225 .appendTo( $container
);
228 this.$container
= $container
;
232 * Build the console panel
234 * @return {jQuery} Console panel
236 buildConsoleTable: function () {
237 var $table
, entryTypeText
, i
, length
, entry
;
239 $table
= $( '<table id="mw-debug-console">' );
241 $( '<colgroup>' ).css( 'width', /* padding = */ 20 + ( 10 * /* fontSize = */ 11 ) ).appendTo( $table
);
242 $( '<colgroup>' ).appendTo( $table
);
243 $( '<colgroup>' ).css( 'width', 350 ).appendTo( $table
);
245 entryTypeText = function ( entryType
) {
246 switch ( entryType
) {
258 for ( i
= 0, length
= this.data
.log
.length
; i
< length
; i
+= 1 ) {
259 entry
= this.data
.log
[ i
];
260 entry
.typeText
= entryTypeText( entry
.type
);
264 .text( entry
.typeText
)
265 .addClass( 'mw-debug-console-' + entry
.type
)
267 .append( $( '<td>' ).html( entry
.msg
) )
268 .append( $( '<td>' ).text( entry
.caller
) )
276 * Build query list pane
280 buildQueryTable: function () {
281 var $table
, i
, length
, query
;
283 $table
= $( '<table id="mw-debug-querylist"></table>' );
286 .append( $( '<th>#</th>' ).css( 'width', '4em' ) )
287 .append( $( '<th>SQL</th>' ) )
288 .append( $( '<th>Time</th>' ).css( 'width', '8em' ) )
289 .append( $( '<th>Call</th>' ).css( 'width', '18em' ) )
292 for ( i
= 0, length
= this.data
.queries
.length
; i
< length
; i
+= 1 ) {
293 query
= this.data
.queries
[ i
];
296 .append( $( '<td>' ).text( i
+ 1 ) )
297 .append( $( '<td>' ).text( query
.sql
) )
298 .append( $( '<td class="stats">' ).text( ( query
.time
* 1000 ).toFixed( 4 ) + 'ms' ) )
299 .append( $( '<td>' ).text( query
[ 'function' ] ) )
307 * Build legacy debug log pane
311 buildDebugLogTable: function () {
312 var $list
, i
, length
, line
;
315 for ( i
= 0, length
= this.data
.debugLog
.length
; i
< length
; i
+= 1 ) {
316 line
= this.data
.debugLog
[ i
];
318 .html( mw
.html
.escape( line
).replace( /\n/g, '<br />\n' ) )
326 * Build request information pane
330 buildRequestPane: function () {
332 function buildTable( title
, data
) {
333 var $unit
, $table
, key
;
335 $unit
= $( '<div>' ).append( $( '<h2>' ).text( title
) );
337 $table
= $( '<table>' ).appendTo( $unit
);
340 .html( '<th>Key</th><th>Value</th>' )
343 for ( key
in data
) {
344 if ( !data
.hasOwnProperty( key
) ) {
349 .append( $( '<th>' ).text( key
) )
350 .append( $( '<td>' ).text( data
[ key
] ) )
358 .text( this.data
.request
.method
+ ' ' + this.data
.request
.url
)
359 .append( buildTable( 'Headers', this.data
.request
.headers
) )
360 .append( buildTable( 'Parameters', this.data
.request
.params
) );
364 * Build included files pane
368 buildIncludesPane: function () {
369 var $table
, i
, length
, file
;
371 $table
= $( '<table>' );
373 for ( i
= 0, length
= this.data
.includes
.length
; i
< length
; i
+= 1 ) {
374 file
= this.data
.includes
[ i
];
376 .append( $( '<td>' ).text( file
.name
) )
377 .append( $( '<td class="nr">' ).text( file
.size
) )
389 }( mediaWiki
, jQuery
) );