/**
- * Javascript for the new debug toolbar, enabled with $wgDebugToolbar
+ * JavaScript for the new debug toolbar, enabled through $wgDebugToolbar.
*
* @author John Du Hart
* @since 1.19
*/
-( function( $ ) {
+( function ( mw, $ ) {
+ 'use strict';
- var debug = mw.Debug = {
+ var debug,
+ hovzer = $.getFootHovzer();
+
+ debug = mw.Debug = {
/**
* Toolbar container element
*
$container: null,
/**
- * Array containing data for the debug toolbar
+ * Object containing data for the debug toolbar
*
- * @var {Array}
+ * @var {Object}
*/
data: {},
/**
- * Initializes the debugging pane
+ * Initializes the debugging pane.
+ * Shouldn't be called before the document is ready
+ * (since it binds to elements on the page).
*
- * @param {Array} data
+ * @param {Object} data, defaults to 'debugInfo' from mw.config
*/
- init: function( data ) {
- this.data = data;
+ init: function ( data ) {
+
+ this.data = data || mw.config.get( 'debugInfo' );
this.buildHtml();
// Insert the container into the DOM
- $( 'body' ).append( this.$container );
+ hovzer.$.append( this.$container );
+ hovzer.update();
$( '.mw-debug-panelink' ).click( this.switchPane );
},
* @context {Element}
* @param {jQuery.Event} e
*/
- switchPane: function( e ) {
+ switchPane: function ( e ) {
var currentPaneId = debug.$container.data( 'currentPane' ),
- requestedPaneId = $(this).parent().attr( 'id' ).substr( 9 ),
+ requestedPaneId = $(this).prop( 'id' ).substr( 9 ),
$currentPane = $( '#mw-debug-pane-' + currentPaneId ),
- $requestedPane = $( '#mw-debug-pane-' + requestedPaneId );
+ $requestedPane = $( '#mw-debug-pane-' + requestedPaneId ),
+ hovDone = false;
+
+ function updateHov() {
+ if ( !hovDone ) {
+ hovzer.update();
+ hovDone = true;
+ }
+ }
+
+ // Skip hash fragment handling. Prevents screen from jumping.
e.preventDefault();
+ $( this ).addClass( 'current ');
+ $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ');
+
// Hide the current pane
if ( requestedPaneId === currentPaneId ) {
- $currentPane.slideUp();
+ $currentPane.slideUp( updateHov );
debug.$container.data( 'currentPane', null );
return;
}
debug.$container.data( 'currentPane', requestedPaneId );
if ( currentPaneId === undefined || currentPaneId === null ) {
- $requestedPane.slideDown();
+ $requestedPane.slideDown( updateHov );
} else {
$currentPane.hide();
$requestedPane.show();
+ updateHov();
}
},
/**
* Constructs the HTML for the debugging toolbar
*/
- buildHtml: function() {
- this.$container = $( '<div></div>' )
- .attr({
- id: 'mw-debug-container',
- class: 'mw-debug'
- });
-
- var html = '';
-
- html += '<div class="mw-debug-bit" id="mw-debug-mwversion">'
- + '<a href="//www.mediawiki.org/">MediaWiki</a>: '
- + this.data.mwVersion + '</div>';
-
- html += '<div class="mw-debug-bit" id="mw-debug-phpversion">'
- + '<a href="//www.php.net/">PHP</a>: '
- + this.data.phpVersion + '</div>';
-
- html += '<div class="mw-debug-bit" id="mw-debug-time">'
- + 'Time: ' + this.data.time.toFixed( 5 ) + 's</div>';
- html += '<div class="mw-debug-bit" id="mw-debug-memory">'
- + 'Memory: ' + this.data.memory + ' (<span title="Peak usage">'
- + this.data.memoryPeak + '</span>)</div>';
-
- var queryLink = '<a href="#" class="mw-debug-panelink" id="mw-debug-query-link">Queries: '
- + this.data.queries.length + '</a>';
- html += '<div class="mw-debug-bit" id="mw-debug-querylist">'
- + queryLink + '</div>';
-
- var debugLink = '<a href="#" class="mw-debug-panelink" id="mw-debug-debuglog-link">Debug Log ('
- + this.data.debugLog.length + ' lines)</a>';
- html += '<div class="mw-debug-bit" id="mw-debug-debuglog">'
- + debugLink + '</div>';
-
- var requestLink = '<a href="#" class="mw-debug-panelink" id="mw-debug-request-link">Request</a>';
- html += '<div class="mw-debug-bit" id="mw-debug-request">'
- + requestLink + '</div>';
-
- var filesLink = '<a href="#" class="mw-debug-panelink" id="mw-debug-files-includes">'
- + this.data.includes.length + ' Files Included</a>';
- html += '<div class="mw-debug-bit" id="mw-debug-includes">'
- + filesLink + '</div>';
-
- html += '<div class="mw-debug-pane" id="mw-debug-pane-querylist">'
- + this.buildQueryTable() + '</div>';
- html += '<div class="mw-debug-pane" id="mw-debug-pane-debuglog">'
- + this.buildDebugLogTable() + '</div>';
- html += '<div class="mw-debug-pane" id="mw-debug-pane-request">'
- + this.buildRequestPane() + '</div>';
- html += '<div class="mw-debug-pane" id="mw-debug-pane-includes">'
- + this.buildIncludesPane() + '</div>';
-
- this.$container.html( html );
+ buildHtml: function () {
+ var $container, $bits, panes, id, gitInfo;
+
+ $container = $( '<div id="mw-debug-toolbar" class="mw-debug" lang="en" dir="ltr"></div>' );
+
+ $bits = $( '<div class="mw-debug-bits"></div>' );
+
+ /**
+ * Returns a jQuery element for a debug-bit div
+ *
+ * @param id
+ * @return {jQuery}
+ */
+ function bitDiv( id ) {
+ return $( '<div>' ).prop({
+ id: 'mw-debug-' + id,
+ className: 'mw-debug-bit'
+ })
+ .appendTo( $bits );
+ }
+
+ /**
+ * Returns a jQuery element for a pane link
+ *
+ * @param id
+ * @param text
+ * @return {jQuery}
+ */
+ function paneLabel( id, text ) {
+ return $( '<a>' )
+ .prop({
+ className: 'mw-debug-panelabel',
+ href: '#mw-debug-pane-' + id
+ })
+ .text( text );
+ }
+
+ /**
+ * Returns a jQuery element for a debug-bit div with a for a pane link
+ *
+ * @param id CSS id snippet. Will be prefixed with 'mw-debug-'
+ * @param text Text to show
+ * @param count Optional count to show
+ * @return {jQuery}
+ */
+ function paneTriggerBitDiv( id, text, count ) {
+ if ( count ) {
+ text = text + ' (' + count + ')';
+ }
+ return $( '<div>' ).prop({
+ id: 'mw-debug-' + id,
+ className: 'mw-debug-bit mw-debug-panelink'
+ })
+ .append( paneLabel( id, text ) )
+ .appendTo( $bits );
+ }
+
+ paneTriggerBitDiv( 'console', 'Console', this.data.log.length );
+
+ paneTriggerBitDiv( 'querylist', 'Queries', this.data.queries.length );
+
+ paneTriggerBitDiv( 'debuglog', 'Debug log', this.data.debugLog.length );
+
+ paneTriggerBitDiv( 'request', 'Request' );
+
+ paneTriggerBitDiv( 'includes', 'PHP includes', this.data.includes.length );
+
+ gitInfo = '';
+ if ( this.data.gitRevision !== false ) {
+ gitInfo = '(' + this.data.gitRevision.substring( 0, 7 ) + ')';
+ if ( this.data.gitViewUrl !== false ) {
+ gitInfo = $( '<a>' )
+ .attr( 'href', this.data.gitViewUrl )
+ .text( gitInfo );
+ }
+ }
+
+ bitDiv( 'mwversion' )
+ .append( $( '<a href="//www.mediawiki.org/">MediaWiki</a>' ) )
+ .append( document.createTextNode( ': ' + this.data.mwVersion + ' ' ) )
+ .append( gitInfo );
+
+ if ( this.data.gitBranch !== false ) {
+ bitDiv( 'gitbranch' ).text( 'Git branch: ' + this.data.gitBranch );
+ }
+
+ bitDiv( 'phpversion' )
+ .append( $( '<a href="//www.php.net/"></a>' ).text( 'PHP' ) )
+ .append( ': ' + this.data.phpVersion );
+
+ bitDiv( 'time' )
+ .text( 'Time: ' + this.data.time.toFixed( 5 ) );
+
+ bitDiv( 'memory' )
+ .text( 'Memory: ' + this.data.memory + ' (Peak: ' + this.data.memoryPeak + ')' );
+
+ $bits.appendTo( $container );
+
+ panes = {
+ console: this.buildConsoleTable(),
+ querylist: this.buildQueryTable(),
+ debuglog: this.buildDebugLogTable(),
+ request: this.buildRequestPane(),
+ includes: this.buildIncludesPane()
+ };
+
+ for ( id in panes ) {
+ if ( !panes.hasOwnProperty( id ) ) {
+ continue;
+ }
+
+ $( '<div>' )
+ .prop({
+ className: 'mw-debug-pane',
+ id: 'mw-debug-pane-' + id
+ })
+ .append( panes[id] )
+ .appendTo( $container );
+ }
+
+ this.$container = $container;
},
/**
- * Query list pane
+ * Builds the console panel
*/
- buildQueryTable: function() {
- var html = '<table id="mw-debug-querylist">';
-
- for ( var i = 0, length = this.data.queries.length; i < length; i++ ) {
- var query = this.data.queries[i];
+ buildConsoleTable: function () {
+ var $table, entryTypeText, i, length, entry;
+
+ $table = $( '<table id="mw-debug-console">' );
+
+ $( '<colgroup>' ).css( 'width', /* padding = */ 20 + ( 10 * /* fontSize = */ 11 ) ).appendTo( $table );
+ $( '<colgroup>' ).appendTo( $table );
+ $( '<colgroup>' ).css( 'width', 350 ).appendTo( $table );
+
+
+ entryTypeText = function( entryType ) {
+ switch ( entryType ) {
+ case 'log':
+ return 'Log';
+ case 'warn':
+ return 'Warning';
+ case 'deprecated':
+ return 'Deprecated';
+ default:
+ return 'Unknown';
+ }
+ };
- html += '<tr><td>' + ( i + 1 ) + '</td>';
+ for ( i = 0, length = this.data.log.length; i < length; i += 1 ) {
+ entry = this.data.log[i];
+ entry.typeText = entryTypeText( entry.type );
+
+ $( '<tr>' )
+ .append( $( '<td>' )
+ .text( entry.typeText )
+ .addClass( 'mw-debug-console-' + entry.type )
+ )
+ .append( $( '<td>' ).html( entry.msg ) )
+ .append( $( '<td>' ).text( entry.caller ) )
+ .appendTo( $table );
+ }
- html += '<td>' + query.sql + '</td>';
- html += '<td><span class="mw-debug-query-time">(' + query.time.toFixed( 4 ) + 'ms)</span> ' + query.function + '</td>';
+ return $table;
+ },
- html += '</tr>';
+ /**
+ * Query list pane
+ */
+ buildQueryTable: function () {
+ var $table, i, length, query;
+
+ $table = $( '<table id="mw-debug-querylist"></table>' );
+
+ $( '<tr>' )
+ .append( $( '<th>#</th>' ).css( 'width', '4em' ) )
+ .append( $( '<th>SQL</th>' ) )
+ .append( $( '<th>Time</th>' ).css( 'width', '8em' ) )
+ .append( $( '<th>Call</th>' ).css( 'width', '18em' ) )
+ .appendTo( $table );
+
+ for ( i = 0, length = this.data.queries.length; i < length; i += 1 ) {
+ query = this.data.queries[i];
+
+ $( '<tr>' )
+ .append( $( '<td>' ).text( i + 1 ) )
+ .append( $( '<td>' ).text( query.sql ) )
+ .append( $( '<td class="stats">' ).text( ( query.time * 1000 ).toFixed( 4 ) + 'ms' ) )
+ .append( $( '<td>' ).text( query['function'] ) )
+ .appendTo( $table );
}
- html += '</table>';
- return html;
+ return $table;
},
/**
* Legacy debug log pane
*/
- buildDebugLogTable: function() {
- var html = '<ul>';
-
- for ( var i = 0, length = this.data.debugLog.length; i < length; i++ ) {
- var line = this.data.debugLog[i];
- html += '<li>' + line.replace( /\n/g, "<br />\n" ) + '</li>';
+ buildDebugLogTable: function () {
+ var $list, i, length, line;
+ $list = $( '<ul>' );
+
+ for ( i = 0, length = this.data.debugLog.length; i < length; i += 1 ) {
+ line = this.data.debugLog[i];
+ $( '<li>' )
+ .html( mw.html.escape( line ).replace( /\n/g, '<br />\n' ) )
+ .appendTo( $list );
}
- return html + '</ul>';
+ return $list;
},
/**
* Request information pane
*/
- buildRequestPane: function() {
- var buildTable = function( title, data ) {
- var t = '<h2>' + title + '</h2>'
- + '<table> <tr> <th>Key</th> <th>Value</th> </tr>';
+ buildRequestPane: function () {
+
+ function buildTable( title, data ) {
+ var $unit, $table, key;
+
+ $unit = $( '<div>' ).append( $( '<h2>' ).text( title ) );
- for ( var key in data ) {
+ $table = $( '<table>' ).appendTo( $unit );
+
+ $( '<tr>' )
+ .html( '<th>Key</th><th>Value</th>' )
+ .appendTo( $table );
+
+ for ( key in data ) {
if ( !data.hasOwnProperty( key ) ) {
continue;
}
- var value = data[key];
- t += '<tr><th>' + key + '</th><td>' + value + '</td></tr>';
+ $( '<tr>' )
+ .append( $( '<th>' ).text( key ) )
+ .append( $( '<td>' ).text( data[key] ) )
+ .appendTo( $table );
}
- t += '</table>';
- return t;
- };
-
- var html = this.data.request.method + ' ' + this.data.request.url;
- html += buildTable( 'Headers', this.data.request.headers );
- html += buildTable( 'Parameters', this.data.request.params );
+ return $unit;
+ }
- return html;
+ return $( '<div>' )
+ .text( this.data.request.method + ' ' + this.data.request.url )
+ .append( buildTable( 'Headers', this.data.request.headers ) )
+ .append( buildTable( 'Parameters', this.data.request.params ) );
},
/**
* Included files pane
*/
- buildIncludesPane: function() {
- var html = '<ul>';
+ buildIncludesPane: function () {
+ var $table, i, length, file;
+
+ $table = $( '<table>' );
- for ( var i = 0, l = this.data.includes.length; i < l; i++ ) {
- var file = this.data.includes[i];
- html += '<li><span class="mw-debug-right">' + file.size + '</span> ' + file.name + '</li>';
+ for ( i = 0, length = this.data.includes.length; i < length; i += 1 ) {
+ file = this.data.includes[i];
+ $( '<tr>' )
+ .append( $( '<td>' ).text( file.name ) )
+ .append( $( '<td class="nr">' ).text( file.size ) )
+ .appendTo( $table );
}
- html += '</ul>';
- return html;
+ return $table;
}
};
-} )( jQuery );
\ No newline at end of file
+}( mediaWiki, jQuery ) );
dépôts / lhc / web / wiklou.git / blobdiff