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 debug = mw.Debug = {
  12                 /**
  13                  * Toolbar container element
  14                  *
  15                  * @var {jQuery}
  16                  */
  17                 $container: null,
  18
  19                 /**
  20                  * Object containing data for the debug toolbar
  21                  *
  22                  * @var {Object}
  23                  */
  24                 data: {},
  25
  26                 /**
  27                  * Initializes the debugging pane
  28                  *
  29                  * @param {Object} data
  30                  */
  31                 init: function ( data ) {
  32                         this.data = data;
  33                         this.buildHtml();
  34
  35                         // Insert the container into the DOM
  36                         $( 'body' ).append( this.$container );
  37
  38                         $( '.mw-debug-panelink' ).click( this.switchPane );
  39                 },
  40
  41                 /**
  42                  * Switches between panes
  43                  *
  44                  * @todo Store cookie for last pane open
  45                  * @context {Element}
  46                  * @param {jQuery.Event} e
  47                  */
  48                 switchPane: function ( e ) {
  49                         var currentPaneId = debug.$container.data( 'currentPane' ),
  50                                 requestedPaneId = $(this).parent().attr( 'id' ).substr( 9 ),
  51                                 $currentPane = $( '#mw-debug-pane-' + currentPaneId ),
  52                                 $requestedPane = $( '#mw-debug-pane-' + requestedPaneId );
  53                         e.preventDefault();
  54
  55                         // Hide the current pane
  56                         if ( requestedPaneId === currentPaneId ) {
  57                                 $currentPane.slideUp();
  58                                 debug.$container.data( 'currentPane', null );
  59                                 return;
  60                         }
  61
  62                         debug.$container.data( 'currentPane', requestedPaneId );
  63
  64                         if ( currentPaneId === undefined || currentPaneId === null ) {
  65                                 $requestedPane.slideDown();
  66                         } else {
  67                                 $currentPane.hide();
  68                                 $requestedPane.show();
  69                         }
  70                 },
  71
  72                 /**
  73                  * Constructs the HTML for the debugging toolbar
  74                  */
  75                 buildHtml: function () {
  76                         var $container, panes, id;
  77
  78                         $container = $( '<div>' )
  79                                 .attr({
  80                                         id: 'mw-debug-container',
  81                                         'class': 'mw-debug'
  82                                 });
  83
  84                         /**
  85                          * Returns a jQuery element for a debug-bit div
  86                          *
  87                          * @param id
  88                          * @return {jQuery}
  89                          */
  90                         function bitDiv( id ) {
  91                                 return $( '<div>' ).attr({
  92                                         id: 'mw-debug-' + id,
  93                                         'class': 'mw-debug-bit'
  94                                 });
  95                         }
  96
  97                         /**
  98                          * Returns a jQuery element for a pane link
  99                          *
 100                          * @param id
 101                          * @param text
 102                          * @return {jQuery}
 103                          */
 104                         function paneLink( id, text ) {
 105                                 return $( '<a>' )
 106                                         .attr({
 107                                                 href: '#',
 108                                                 'class': 'mw-debug-panelink',
 109                                                 id: 'mw-debug-' + id + '-link'
 110                                         })
 111                                         .text( text );
 112                         }
 113
 114                         bitDiv( 'mwversion' )
 115                                 .append( $( '<a href="//www.mediawiki.org/"></a>' ).text( 'MediaWiki' ) )
 116                                 .append( ': ' + this.data.mwVersion )
 117                                 .appendTo( $container );
 118
 119                         bitDiv( 'phpversion' )
 120                                 .append( $( '<a href="//www.php.net/"></a>' ).text( 'PHP' ) )
 121                                 .append( ': ' + this.data.phpVersion )
 122                                 .appendTo( $container );
 123
 124                         bitDiv( 'time' )
 125                                 .text( 'Time: ' + this.data.time.toFixed( 5 ) )
 126                                 .appendTo( $container );
 127                         bitDiv( 'memory' )
 128                                 .text( 'Memory: ' + this.data.memory )
 129                                 .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data.memoryPeak + ')' ) )
 130                                 .appendTo( $container );
 131
 132                         bitDiv( 'querylist' )
 133                                 .append( paneLink( 'query', 'Queries: ' + this.data.queries.length ) )
 134                                 .appendTo( $container );
 135
 136                         bitDiv( 'debuglog' )
 137                                 .append( paneLink( 'debuglog', 'Debug Log (' + this.data.debugLog.length + ' lines)' ) )
 138                                 .appendTo( $container );
 139
 140                         bitDiv( 'request' )
 141                                 .append( paneLink( 'request', 'Request' ) )
 142                                 .appendTo( $container );
 143
 144                         bitDiv( 'includes' )
 145                                 .append( paneLink( 'files-includes', this.data.includes.length + ' Files Included' ) )
 146                                 .appendTo( $container );
 147
 148                         panes = {
 149                                 querylist: this.buildQueryTable(),
 150                                 debuglog: this.buildDebugLogTable(),
 151                                 request: this.buildRequestPane(),
 152                                 includes: this.buildIncludesPane()
 153                         };
 154
 155                         for ( id in panes ) {
 156                                 if ( !panes.hasOwnProperty( id ) ) {
 157                                         continue;
 158                                 }
 159
 160                                 $( '<div>' )
 161                                         .attr({
 162                                                 'class': 'mw-debug-pane',
 163                                                 id: 'mw-debug-pane-' + id
 164                                         })
 165                                         .append( panes[id] )
 166                                         .appendTo( $container );
 167                         }
 168
 169                         this.$container = $container;
 170                 },
 171
 172                 /**
 173                  * Query list pane
 174                  */
 175                 buildQueryTable: function () {
 176                         var $table, i, length, query;
 177
 178                         $table = $( '<table id="mw-debug-querylist"></table>' );
 179
 180                         for ( i = 0, length = this.data.queries.length; i < length; i += 1 ) {
 181                                 query = this.data.queries[i];
 182
 183                                 $( '<tr>' )
 184                                         .append( $( '<td>' ).text( i + 1 ) )
 185                                         .append( $( '<td>' ).text( query.sql ) )
 186                                         .append( $( '<td>' )
 187                                                 .append( $( '<span class="mw-debug-query-time"></span>' ).text( '(' + query.time.toFixed( 4 ) + 'ms) ' ) )
 188                                                 .append( query['function'] )
 189                                         )
 190                                         .appendTo( $table );
 191                         }
 192
 193                         return $table;
 194                 },
 195
 196                 /**
 197                  * Legacy debug log pane
 198                  */
 199                 buildDebugLogTable: function () {
 200                         var $list, i, length, line;
 201                         $list = $( '<ul>' );
 202
 203                         for ( i = 0, length = this.data.debugLog.length; i < length; i += 1 ) {
 204                                 line = this.data.debugLog[i];
 205                                 $( '<li>' )
 206                                         .html( mw.html.escape( line ).replace( /\n/g, "<br />\n" ) )
 207                                         .appendTo( $list );
 208                         }
 209
 210                         return $list;
 211                 },
 212
 213                 /**
 214                  * Request information pane
 215                  */
 216                 buildRequestPane: function () {
 217
 218                         function buildTable( title, data ) {
 219                                 var $unit, $table, key;
 220
 221                                 $unit = $( '<div>' ).append( $( '<h2>' ).text( title ) );
 222
 223                                 $table = $( '<table>' ).appendTo( $unit );
 224
 225                                 $( '<tr>' )
 226                                         .html( '<th>Key</th><th>Value</th>' )
 227                                         .appendTo( $table );
 228
 229                                 for ( key in data ) {
 230                                         if ( !data.hasOwnProperty( key ) ) {
 231                                                 continue;
 232                                         }
 233
 234                                         $( '<tr>' )
 235                                                 .append( $( '<th>' ).text( key ) )
 236                                                 .append( $( '<td>' ).text( data[key] ) )
 237                                                 .appendTo( $table );
 238                                 }
 239
 240                                 return $unit;
 241                         }
 242
 243                         return $( '<div>' )
 244                                 .text( this.data.request.method + ' ' + this.data.request.url )
 245                                 .append( buildTable( 'Headers', this.data.request.headers ) )
 246                                 .append( buildTable( 'Parameters', this.data.request.params ) );
 247                 },
 248
 249                 /**
 250                  * Included files pane
 251                  */
 252                 buildIncludesPane: function () {
 253                         var $list, i, len, file;
 254
 255                         $list = $( '<ul>' );
 256
 257                         for ( i = 0, len = this.data.includes.length; i < len; i += 1 ) {
 258                                 file = this.data.includes[i];
 259                                 $( '<li>' )
 260                                         .text( file.name )
 261                                         .prepend( $( '<span class="mw-debug-right"></span>' ).text( file.size ) )
 262                                         .appendTo( $list );
 263                         }
 264
 265                         return $list;
 266                 }
 267         };
 268
 269 } )( jQuery, mediaWiki );