resources/src/mediawiki/mediawiki.debug.js

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