resources/mediawiki/mediawiki.debug.js

   1 /**
   2  * JavaScript for the new debug toolbar, enabled through $wgDebugToolbar.
   3  *
   4  * @author John Du Hart
   5  * @since 1.19
   6  */
   7
   8 ( function ( $, mw, undefined ) {
   9 "use strict";
  10
  11         var hovzer = $.getFootHovzer();
  12
  13         var debug = mw.Debug = {
  14                 /**
  15                  * Toolbar container element
  16                  *
  17                  * @var {jQuery}
  18                  */
  19                 $container: null,
  20
  21                 /**
  22                  * Object containing data for the debug toolbar
  23                  *
  24                  * @var {Object}
  25                  */
  26                 data: {},
  27
  28                 /**
  29                  * Initializes the debugging pane.
  30                  * Shouldn't be called before the document is ready
  31                  * (since it binds to elements on the page).
  32                  *
  33                  * @param {Object} data, defaults to 'debugInfo' from mw.config
  34                  */
  35                 init: function ( data ) {
  36
  37                         this.data = data || mw.config.get( 'debugInfo' );
  38                         this.buildHtml();
  39
  40                         // Insert the container into the DOM
  41                         hovzer.$.append( this.$container );
  42                         hovzer.update();
  43
  44                         $( '.mw-debug-panelink' ).click( this.switchPane );
  45                 },
  46
  47                 /**
  48                  * Switches between panes
  49                  *
  50                  * @todo Store cookie for last pane open
  51                  * @context {Element}
  52                  * @param {jQuery.Event} e
  53                  */
  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 ),
  59                                 hovDone = false;
  60
  61                         function updateHov() {
  62                                 if ( !hovDone ) {
  63                                         hovzer.update();
  64                                         hovDone = true;
  65                                 }
  66                         }
  67
  68                         // Skip hash fragment handling. Prevents screen from jumping.
  69                         e.preventDefault();
  70
  71                         $( this ).addClass( 'current ');
  72                         $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ');
  73
  74                         // Hide the current pane
  75                         if ( requestedPaneId === currentPaneId ) {
  76                                 $currentPane.slideUp( updateHov );
  77                                 debug.$container.data( 'currentPane', null );
  78                                 return;
  79                         }
  80
  81                         debug.$container.data( 'currentPane', requestedPaneId );
  82
  83                         if ( currentPaneId === undefined || currentPaneId === null ) {
  84                                 $requestedPane.slideDown( updateHov );
  85                         } else {
  86                                 $currentPane.hide();
  87                                 $requestedPane.show();
  88                                 updateHov();
  89                         }
  90                 },
  91
  92                 /**
  93                  * Constructs the HTML for the debugging toolbar
  94                  */
  95                 buildHtml: function () {
  96                         var $container, $bits, panes, id;
  97
  98                         $container = $( '<div id="mw-debug-toolbar" class="mw-debug"></div>' );
  99
 100                         $bits = $( '<div class="mw-debug-bits"></div>' );
 101
 102                         /**
 103                          * Returns a jQuery element for a debug-bit div
 104                          *
 105                          * @param id
 106                          * @return {jQuery}
 107                          */
 108                         function bitDiv( id ) {
 109                                 return $( '<div>' ).attr({
 110                                         id: 'mw-debug-' + id,
 111                                         'class': 'mw-debug-bit'
 112                                 })
 113                                 .appendTo( $bits );
 114                         }
 115
 116                         /**
 117                          * Returns a jQuery element for a pane link
 118                          *
 119                          * @param id
 120                          * @param text
 121                          * @return {jQuery}
 122                          */
 123                         function paneLabel( id, text ) {
 124                                 return $( '<a>' )
 125                                         .attr({
 126                                                 'class': 'mw-debug-panelabel',
 127                                                 href: '#mw-debug-pane-' + id
 128                                         })
 129                                         .text( text );
 130                         }
 131
 132                         /**
 133                          * Returns a jQuery element for a debug-bit div with a for a pane link
 134                          *
 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
 138                          * @return {jQuery}
 139                          */
 140                         function paneTriggerBitDiv( id, text, count ) {
 141                                 if( count ) {
 142                                         text = text + ' (' + count + ')';
 143                                 }
 144                                 return $( '<div>' ).attr({
 145                                         id: 'mw-debug-' + id,
 146                                         'class': 'mw-debug-bit mw-debug-panelink'
 147                                 })
 148                                 .append( paneLabel( id, text ) )
 149                                 .appendTo( $bits );
 150                         }
 151
 152                         paneTriggerBitDiv( 'console', 'Console', this.data.log.length );
 153
 154                         paneTriggerBitDiv( 'querylist', 'Queries', this.data.queries.length );
 155
 156                         paneTriggerBitDiv( 'debuglog', 'Debug log', this.data.debugLog.length );
 157
 158                         paneTriggerBitDiv( 'request', 'Request' );
 159
 160                         paneTriggerBitDiv( 'includes', 'PHP includes', this.data.includes.length );
 161
 162                         var gitInfo = '';
 163                         if ( this.data.gitRevision != false ) {
 164                                 gitInfo = '(' + this.data.gitRevision.substring( 0, 7 ) + ')';
 165                                 if ( this.data.gitViewUrl != false ) {
 166                                         gitInfo = $( '<a></a>' ).attr( 'href', this.data.gitViewUrl ).text( gitInfo );
 167                                 }
 168                         }
 169
 170                         bitDiv( 'mwversion' )
 171                                 .append( $( '<a href="//www.mediawiki.org/"></a>' ).text( 'MediaWiki' ) )
 172                                 .append( ': ' + this.data.mwVersion + ' ' )
 173                                 .append( gitInfo );
 174
 175                         if ( this.data.gitBranch != false ) {
 176                                 bitDiv( 'gitbranch' ).text( 'Git branch: ' + this.data.gitBranch );
 177                         }
 178
 179                         bitDiv( 'phpversion' )
 180                                 .append( $( '<a href="//www.php.net/"></a>' ).text( 'PHP' ) )
 181                                 .append( ': ' + this.data.phpVersion );
 182
 183                         bitDiv( 'time' )
 184                                 .text( 'Time: ' + this.data.time.toFixed( 5 ) );
 185
 186                         bitDiv( 'memory' )
 187                                 .text( 'Memory: ' + this.data.memory )
 188                                 .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data.memoryPeak + ')' ) );
 189
 190
 191                         $bits.appendTo( $container );
 192
 193                         panes = {
 194                                 console: this.buildConsoleTable(),
 195                                 querylist: this.buildQueryTable(),
 196                                 debuglog: this.buildDebugLogTable(),
 197                                 request: this.buildRequestPane(),
 198                                 includes: this.buildIncludesPane()
 199                         };
 200
 201                         for ( id in panes ) {
 202                                 if ( !panes.hasOwnProperty( id ) ) {
 203                                         continue;
 204                                 }
 205
 206                                 $( '<div>' )
 207                                         .attr({
 208                                                 'class': 'mw-debug-pane',
 209                                                 id: 'mw-debug-pane-' + id
 210                                         })
 211                                         .append( panes[id] )
 212                                         .appendTo( $container );
 213                         }
 214
 215                         this.$container = $container;
 216                 },
 217
 218                 /**
 219                  * Builds the console panel
 220                  */
 221                 buildConsoleTable: function () {
 222                         var $table, entryTypeText, i, length, entry;
 223
 224                         $table = $( '<table id="mw-debug-console">' );
 225
 226                         $('<colgroup>').css( 'width', /*padding=*/20 + ( 10*/*fontSize*/11 ) ).appendTo( $table );
 227                         $('<colgroup>').appendTo( $table );
 228                         $('<colgroup>').css( 'width', 350 ).appendTo( $table );
 229
 230
 231                         entryTypeText = function( entryType ) {
 232                                 switch ( entryType ) {
 233                                         case 'log':
 234                                                 return 'Log';
 235                                         case 'warn':
 236                                                 return 'Warning';
 237                                         case 'deprecated':
 238                                                 return 'Deprecated';
 239                                         default:
 240                                                 return 'Unknown';
 241                                 }
 242                         };
 243
 244                         for ( i = 0, length = this.data.log.length; i < length; i += 1 ) {
 245                                 entry = this.data.log[i];
 246                                 entry.typeText = entryTypeText( entry.type );
 247
 248                                 $( '<tr>' )
 249                                         .append( $( '<td>' )
 250                                                 .text( entry.typeText )
 251                                                 .attr( 'class', 'mw-debug-console-' + entry.type )
 252                                         )
 253                                         .append( $( '<td>' ).html( entry.msg ) )
 254                                         .append( $( '<td>' ).text( entry.caller ) )
 255                                         .appendTo( $table );
 256                         }
 257
 258                         return $table;
 259                 },
 260
 261                 /**
 262                  * Query list pane
 263                  */
 264                 buildQueryTable: function () {
 265                         var $table, i, length, query;
 266
 267                         $table = $( '<table id="mw-debug-querylist"></table>' );
 268
 269                         $( '<tr>' )
 270                                 .append( $('<th>#</th>').css( 'width', '4em' )    )
 271                                 .append( $('<th>SQL</th>') )
 272                                 .append( $('<th>Time</th>').css( 'width', '8em'  ) )
 273                                 .append( $('<th>Call</th>').css( 'width', '18em' ) )
 274                         .appendTo( $table );
 275
 276                         for ( i = 0, length = this.data.queries.length; i < length; i += 1 ) {
 277                                 query = this.data.queries[i];
 278
 279                                 $( '<tr>' )
 280                                         .append( $( '<td>' ).text( i + 1 ) )
 281                                         .append( $( '<td>' ).text( query.sql ) )
 282                                         .append( $( '<td class="stats">' ).text( ( query.time * 1000 ).toFixed( 4 ) + 'ms' ) )
 283                                         .append( $( '<td>' ).text( query['function'] ) )
 284                                 .appendTo( $table );
 285                         }
 286
 287
 288                         return $table;
 289                 },
 290
 291                 /**
 292                  * Legacy debug log pane
 293                  */
 294                 buildDebugLogTable: function () {
 295                         var $list, i, length, line;
 296                         $list = $( '<ul>' );
 297
 298                         for ( i = 0, length = this.data.debugLog.length; i < length; i += 1 ) {
 299                                 line = this.data.debugLog[i];
 300                                 $( '<li>' )
 301                                         .html( mw.html.escape( line ).replace( /\n/g, "<br />\n" ) )
 302                                         .appendTo( $list );
 303                         }
 304
 305                         return $list;
 306                 },
 307
 308                 /**
 309                  * Request information pane
 310                  */
 311                 buildRequestPane: function () {
 312
 313                         function buildTable( title, data ) {
 314                                 var $unit, $table, key;
 315
 316                                 $unit = $( '<div>' ).append( $( '<h2>' ).text( title ) );
 317
 318                                 $table = $( '<table>' ).appendTo( $unit );
 319
 320                                 $( '<tr>' )
 321                                         .html( '<th>Key</th><th>Value</th>' )
 322                                         .appendTo( $table );
 323
 324                                 for ( key in data ) {
 325                                         if ( !data.hasOwnProperty( key ) ) {
 326                                                 continue;
 327                                         }
 328
 329                                         $( '<tr>' )
 330                                                 .append( $( '<th>' ).text( key ) )
 331                                                 .append( $( '<td>' ).text( data[key] ) )
 332                                                 .appendTo( $table );
 333                                 }
 334
 335                                 return $unit;
 336                         }
 337
 338                         return $( '<div>' )
 339                                 .text( this.data.request.method + ' ' + this.data.request.url )
 340                                 .append( buildTable( 'Headers', this.data.request.headers ) )
 341                                 .append( buildTable( 'Parameters', this.data.request.params ) );
 342                 },
 343
 344                 /**
 345                  * Included files pane
 346                  */
 347                 buildIncludesPane: function () {
 348                         var $table, i, length, file;
 349
 350                         $table = $( '<table>' );
 351
 352                         for ( i = 0, length = this.data.includes.length; i < length; i += 1 ) {
 353                                 file = this.data.includes[i];
 354                                 $( '<tr>' )
 355                                         .append( $( '<td>' ).text( file.name ) )
 356                                         .append( $( '<td class="nr">' ).text( file.size ) )
 357                                         .appendTo( $table );
 358                         }
 359
 360                         return $table;
 361                 }
 362         };
 363
 364 } )( jQuery, mediaWiki );