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