Added initial take on SQL queries timeline.

css/laps.css

@@ -28,7 +28,7 @@
 #wpadminbar .laps-timeline .event {
   float: left;
   width: 0%;
-  height: 100%;
+  height: 20px;
   font-size: 12px;
   color: #fff;
   text-align: center;
@@ -38,6 +38,7 @@
   -webkit-transition: width 0.6s ease;
   transition: width 0.6s ease;
   position: absolute;
+  border-left: 1px solid #f5f5f5;
 }
 #wpadminbar .laps-timeline .event-theme {
   background-color: #5cb85c;
@@ -48,6 +49,9 @@
 #wpadminbar .laps-timeline .event-core {
   background-color: #f0ad4e;
 }
+#wpadminbar .laps-timeline .event-query {
+  background-color: #5bc0de;
+}
 #wpadminbar [data-hint]:after {
   font-size: 13px;
   background-color: #464646;

css/laps.less

@@ -40,7 +40,7 @@
 	.laps-timeline .event {
 		float: left;
 		width: 0%;
-		height: 100%;
+		height: 20px;
 		font-size: 12px;
 		color: #fff;
 		text-align: center;
@@ -48,6 +48,7 @@
 		.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
 		.transition(width .6s ease);
 		position: absolute; // disable stacking at start
+		border-left: 1px solid #f5f5f5;
 	}
 
 	.laps-timeline .event-theme {
@@ -62,6 +63,10 @@
 		background-color: #f0ad4e;
 	}
 
+	.laps-timeline .event-query {
+		background-color: #5bc0de;
+	}
+
 	[data-hint]:after {
 		font-size: 13px;
 		background-color: #464646;

src/class-laps.php

@@ -12,6 +12,7 @@ class Laps {
 	/**  @var Stopwatch $stopwatch */
 	public static $stopwatch;
 	public static $events = array();
+	public static $query_starts = array();
 
 	/**
 	 * Start Stopwatch and timing plugin load immediately, then set up core events and needed hooks.
@@ -30,6 +31,9 @@ class Laps {
 		add_action( 'pre_update_site_option_active_sitewide_plugins', array( __CLASS__, 'pre_update_option_active_plugins' ) );
 		add_action( 'after_setup_theme', array( __CLASS__, 'after_setup_theme' ), 15 );
 		add_action( 'init', array( __CLASS__, 'init' ) );
+
+		if ( defined( 'SAVEQUERIES' ) && SAVEQUERIES )
+			add_filter( 'query', array( __CLASS__, 'query' ), 20 );
 	}
 
 	/**
@@ -96,6 +100,26 @@ class Laps {
 		return $input;
 	}
 
+	/**
+	 * Capture SQL queries start times
+	 *
+	 * @param string $query
+	 *
+	 * @return string
+	 */
+	static function query( $query ) {
+
+		global $wpdb;
+
+		if ( empty( self::$query_starts ) && ! empty( $wpdb->queries ) ) {
+			self::$query_starts[count( $wpdb->queries )] = microtime( true ) * 1000;
+		} else {
+			self::$query_starts[] = microtime( true ) * 1000;
+		}
+
+		return $query;
+	}
+
 	/**
 	 * When theme is done possibly add theme-specific events.
 	 */
@@ -136,7 +160,7 @@ class Laps {
 		if ( ! apply_filters( 'laps_can_see', current_user_can( 'manage_options' ) ) )
 			return;
 
-		global $timestart;
+		global $timestart, $wpdb;
 
 		$mustache = new \Mustache_Engine( array(
 			'loader' => new \Mustache_Loader_FilesystemLoader( dirname( __DIR__ ) . '/views' ),
@@ -159,7 +183,33 @@ class Laps {
 			$event_data[] = compact( 'name', 'offset', 'duration', 'width', 'category', 'memory' );
 		}
 
-		$html = $mustache->render( 'laps', array( 'events' => $event_data ) );
+		$query_data     = array();
+		$last_query_end = 0;
+		$category       = 'query';
+
+		if ( defined( 'SAVEQUERIES' ) && SAVEQUERIES ) {
+
+			foreach ( $wpdb->queries as $key => $query ) {
+				$query_start = isset( self::$query_starts[$key] ) ? self::$query_starts[$key] : $last_query_end;
+				list( $sql, $duration, $trace ) = $query;
+				$duration *= 1000;
+				$last_query_end = $query_start + $duration;
+				$offset         = round( ( $query_start - $start ) / $total * 100, 2 );
+				$width          = round( $duration / $total * 100, 2 );
+
+				if ( 0 == $width ) {
+					$width = '2px';
+				} else {
+					$width .= '%';
+				}
+
+				$query_data[] = compact( 'sql', 'duration', 'offset', 'width', 'category' );
+			}
+		}
+
+//		!d( self::$query_starts, $wpdb->queries, $query_data );
+
+		$html = $mustache->render( 'laps', array( 'events' => $event_data, 'queries' => $query_data ) );
 
 		$wp_admin_bar->add_node( array(
 			'id'    => 'laps',

views/laps.mustache

@@ -3,3 +3,8 @@
 		<div class="event event-{{category}} hint--bottom" data-hint="{{name}} - {{duration}} ms - {{memory}} MB" style="width:{{width}}%; left:{{offset}}%;"></div>
 	{{/events}}
 </div>
+<div class="laps-timeline">
+	{{#queries}}
+		<div class="event event-{{category}} hint--bottom" data-hint="{{sql}}" style="width:{{width}}; left:{{offset}}%;"></div>
+	{{/queries}}
+</div>