position: fixed;
bottom: 0;
background-color: #eee;
- border-top: 1px solid #ccc;
+ border-top: 1px solid #aaa;
}
.mw-debug pre {
border: none;
}
+.mw-debug table {
+ border-spacing: 0;
+ width: 100%;
+}
+
+.mw-debug table tr {
+ background-color: #fff;
+}
+
+.mw-debug table tr:nth-child(even) {
+ background-color: #f9f9f9;
+}
+
+.mw-debug table td {
+ padding: 4px 10px;
+ border-bottom: 1px solid #eee;
+}
+
+.mw-debug table td.nr {
+ text-align: right;
+}
+
+.mw-debug table td span.stats {
+ color: #808080;
+}
+
.mw-debug ul {
margin: 0;
list-style: none;
- box-sizing: border-box;
}
.mw-debug li {
- padding: 2px 5px;
+ padding: 4px 0;
width: 100%;
- display: table;
+}
+
+.mw-debug-bits {
+ text-align: center;
+ border-bottom: 1px solid #aaa;
}
.mw-debug-bit {
- min-height: 25px;
display: inline-block;
- padding: 5px;
- border-right: 1px solid #ccc;
+ padding: 10px 5px;
font-size: 13px;
}
+.mw-debug-panelink {
+ background-color: #eee;
+ border-right: 1px solid #ccc;
+}
+
+.mw-debug-panelink:first-child {
+ border-left: 1px solid #ccc;
+}
+
+.mw-debug-panelink:hover {
+ background-color: #fefefe;
+ cursor: pointer;
+}
+.mw-debug-panelink.current {
+ background-color: #dedede;
+
+}
+a.mw-debug-panelabel,
+a.mw-debug-panelabel:visited {
+ color: #000;
+}
+
.mw-debug-pane {
max-height: 300px;
overflow: scroll;
- border-top: 2px solid #ccc;
display: none;
font-size: 11px;
background-color: #e1eff2;
box-sizing: border-box;
}
-.mw-debug-right {
- float: right;
-}
-
-#mw-debug-querylist td {
- padding: 2px 5px;
- border-bottom: 1px solid #ccc;
-}
-
-.mw-debug-query-time {
- color: #808080;
-}
-
+#mw-debug-pane-debuglog,
#mw-debug-pane-request {
padding: 20px;
}
#mw-debug-pane-request td {
background-color: white;
}
-
-#mw-debug-pane-querylist table {
- border-spacing: 0;
-}
-
-#mw-debug-pane-includes li,
-#mw-debug-pane-querylist tr td {
- background-color: #ccc;
-}
-
-#mw-debug-pane-includes li:nth-child(odd),
-#mw-debug-pane-querylist tr:nth-child(odd) td {
- background-color: #ddd;
-}
*/
switchPane: function ( e ) {
var currentPaneId = debug.$container.data( 'currentPane' ),
- requestedPaneId = $(this).parent().attr( 'id' ).substr( 9 ),
+ requestedPaneId = $(this).prop( 'id' ).substr( 9 ),
$currentPane = $( '#mw-debug-pane-' + currentPaneId ),
$requestedPane = $( '#mw-debug-pane-' + requestedPaneId );
- e.preventDefault();
+
+ $( this ).addClass( 'current ')
+ $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ');
+
// Hide the current pane
if ( requestedPaneId === currentPaneId ) {
* Constructs the HTML for the debugging toolbar
*/
buildHtml: function () {
- var $container, panes, id;
+ var $container, $bits, panes, id;
- $container = $( '<div>' )
- .attr({
- id: 'mw-debug-container',
- 'class': 'mw-debug'
- });
+ $container = $( '<div id="mw-debug-container" class="mw-debug"></div>' );
+
+ $bits = $( '<div class="mw-debug-bits"></div>' );
/**
* Returns a jQuery element for a debug-bit div
return $( '<div>' ).attr({
id: 'mw-debug-' + id,
'class': 'mw-debug-bit'
- });
+ })
+ .appendTo( $bits );
}
/**
* @param text
* @return {jQuery}
*/
- function paneLink( id, text ) {
+ function paneLabel( id, text ) {
return $( '<a>' )
.attr({
- href: '#',
- 'class': 'mw-debug-panelink',
- id: 'mw-debug-' + id + '-link'
+ 'class': 'mw-debug-panelabel',
+ href: '#mw-debug-pane-' + id
})
.text( text );
}
+ /**
+ * Returns a jQuery element for a debug-bit div with a for a pane link
+ *
+ * @param id
+ * @return {jQuery}
+ */
+ function paneTriggerBitDiv( id, text ) {
+ return $( '<div>' ).attr({
+ id: 'mw-debug-' + id,
+ 'class': 'mw-debug-bit mw-debug-panelink'
+ })
+ .append( paneLabel( id, text ) )
+ .appendTo( $bits );
+ }
+
+ paneTriggerBitDiv( 'querylist', 'Queries: ' + this.data.queries.length );
+
+ paneTriggerBitDiv( 'debuglog', 'Debug Log (' + this.data.debugLog.length + ' lines)' );
+
+ paneTriggerBitDiv( 'request', 'Request' );
+
+ paneTriggerBitDiv( 'includes', this.data.includes.length + ' Files Included' );
+
bitDiv( 'mwversion' )
.append( $( '<a href="//www.mediawiki.org/"></a>' ).text( 'MediaWiki' ) )
- .append( ': ' + this.data.mwVersion )
- .appendTo( $container );
+ .append( ': ' + this.data.mwVersion );
bitDiv( 'phpversion' )
.append( $( '<a href="//www.php.net/"></a>' ).text( 'PHP' ) )
- .append( ': ' + this.data.phpVersion )
- .appendTo( $container );
+ .append( ': ' + this.data.phpVersion );
bitDiv( 'time' )
- .text( 'Time: ' + this.data.time.toFixed( 5 ) )
- .appendTo( $container );
+ .text( 'Time: ' + this.data.time.toFixed( 5 ) );
+
bitDiv( 'memory' )
.text( 'Memory: ' + this.data.memory )
- .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data.memoryPeak + ')' ) )
- .appendTo( $container );
-
- bitDiv( 'querylist' )
- .append( paneLink( 'query', 'Queries: ' + this.data.queries.length ) )
- .appendTo( $container );
+ .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data.memoryPeak + ')' ) );
+
- bitDiv( 'debuglog' )
- .append( paneLink( 'debuglog', 'Debug Log (' + this.data.debugLog.length + ' lines)' ) )
- .appendTo( $container );
-
- bitDiv( 'request' )
- .append( paneLink( 'request', 'Request' ) )
- .appendTo( $container );
-
- bitDiv( 'includes' )
- .append( paneLink( 'files-includes', this.data.includes.length + ' Files Included' ) )
- .appendTo( $container );
+ $bits.appendTo( $container );
panes = {
querylist: this.buildQueryTable(),
.append( $( '<td>' ).text( i + 1 ) )
.append( $( '<td>' ).text( query.sql ) )
.append( $( '<td>' )
- .append( $( '<span class="mw-debug-query-time"></span>' ).text( '(' + query.time.toFixed( 4 ) + 'ms) ' ) )
+ .append( $( '<span class="stats"></span>' ).text( '(' + query.time.toFixed( 4 ) + 'ms) ' ) )
.append( query['function'] )
)
.appendTo( $table );
* Included files pane
*/
buildIncludesPane: function () {
- var $list, i, len, file;
+ var $table, i, length, file;
- $list = $( '<ul>' );
+ $table = $( '<table>' );
- for ( i = 0, len = this.data.includes.length; i < len; i += 1 ) {
+ for ( i = 0, length = this.data.includes.length; i < length; i += 1 ) {
file = this.data.includes[i];
- $( '<li>' )
- .text( file.name )
- .prepend( $( '<span class="mw-debug-right"></span>' ).text( file.size ) )
- .appendTo( $list );
+ $( '<tr>' )
+ .append( $( '<td>' ).text( file.name ) )
+ .append( $( '<td class="nr">' ).text( file.size ) )
+ .appendTo( $table );
}
- return $list;
+ return $table;
}
};