From: Krinkle <krinkle@users.mediawiki.org>
Date: Fri, 30 Dec 2011 01:08:57 +0000 (+0000)
Subject: [mediawiki.debug] highlight current pane and styling
X-Git-Tag: 1.31.0-rc.0~25680
X-Git-Url: https://git.cyclocoop.org/%27.%24link.%27?a=commitdiff_plain;h=a01f187a778780019f63dc7a0752f10278dd2d43;p=lhc%2Fweb%2Fwiklou.git

[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 d2716d631f..fdaf9fd269 100644
--- 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 4f4f06b9da..b446b59975 100644
--- 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;
 		}
 	};