[mediawiki.debug] highlight current pane and styling

* wrapping bits in container and centering tabs
* letting includes-pane use same markup and styling as queries
* move appendTo action into common function (more DRY)

diff --git a/resources/mediawiki/mediawiki.debug.css b/resources/mediawiki/mediawiki.debug.css
index d2716d6..fdaf9fd 100644 (file)
--- a/resources/mediawiki/mediawiki.debug.css
+++ b/resources/mediawiki/mediawiki.debug.css
@@ -4,7 +4,7 @@
        position: fixed;
        bottom: 0;
        background-color: #eee;
-       border-top: 1px solid #ccc;
+       border-top: 1px solid #aaa;
 }
 
 .mw-debug pre {
@@ -16,49 +16,85 @@
        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;
 }
@@ -91,17 +127,3 @@
 #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;
-}

diff --git a/resources/mediawiki/mediawiki.debug.js b/resources/mediawiki/mediawiki.debug.js
index 4f4f06b..b446b59 100644 (file)
--- a/resources/mediawiki/mediawiki.debug.js
+++ b/resources/mediawiki/mediawiki.debug.js
@@ -47,10 +47,13 @@
                 */
                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 ) {
@@ -73,13 +76,11 @@
                 * 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
@@ -91,7 +92,8 @@
                                return $( '<div>' ).attr({
                                        id: 'mw-debug-' + id,
                                        'class': 'mw-debug-bit'
-                               });
+                               })
+                               .appendTo( $bits );
                        }
 
                        /**
@@ -101,49 +103,55 @@
                         * @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(),
@@ -184,7 +192,7 @@
                                        .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 );
@@ -250,19 +258,19 @@
                 * 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;
                }
        };