resources/src/mediawiki.debug/debug.js

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