resources/mediawiki/mediawiki.debug.js

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