Implemented initial HTTP timeline

css/laps.css

@@ -52,6 +52,9 @@
 #wpadminbar .laps-timeline .event-query {
   background-color: #5bc0de;
 }
+#wpadminbar .laps-timeline .event-http {
+  background-color: #d9534f;
+}
 #wpadminbar .tooltip {
   position: absolute;
   z-index: 100000;

css/laps.less

@@ -69,6 +69,10 @@
 		background-color: @event-info-color;
 	}
 
+	.laps-timeline .event-http {
+		background-color: @event-warning-color;
+	}
+
 	@import "tooltip.less";
 
 	.tooltip.in {

src/class-laps.php

@@ -30,6 +30,8 @@ class Laps {
 
 		add_action( 'pre_update_option_active_plugins', array( __CLASS__, 'pre_update_option_active_plugins' ) );
 		add_action( 'pre_update_site_option_active_sitewide_plugins', array( __CLASS__, 'pre_update_option_active_plugins' ) );
+		add_action( 'pre_http_request', array( __CLASS__, 'pre_http_request' ), 10, 3 );
+		add_action( 'http_api_debug', array( __CLASS__, 'http_api_debug' ), 10, 5 );
 		add_action( 'after_setup_theme', array( __CLASS__, 'after_setup_theme' ), 15 );
 		add_action( 'init', array( __CLASS__, 'init' ) );
 
@@ -125,6 +127,20 @@ class Laps {
 		return $query;
 	}
 
+	static function pre_http_request( $false, $args, $url ) {
+
+		self::$stopwatch->start( $url, 'http' );
+
+		return $false;
+	}
+
+	static function http_api_debug( $response, $type, $class, $args, $url ) {
+
+		self::$stopwatch->stop( $url );
+
+		return $response;
+	}
+
 	/**
 	 * When theme is done possibly add theme-specific events.
 	 */
@@ -198,6 +214,7 @@ class Laps {
 		$end        = microtime( true ) * 1000;
 		$total      = $end - $start;
 		$event_data = array();
+		$http_data  = array();
 
 		foreach ( $events as $name => $event ) {
 
@@ -205,6 +222,12 @@ class Laps {
 			$duration = $event->getDuration();
 			$width    = round( $duration / $total * 100, 2 );
 			$category = $event->getCategory();
+
+			if ( 'http' == $category ) {
+				$http_data[] = compact( 'name', 'offset', 'duration', 'width', 'category' );
+				continue;
+			}
+
 			$memory = $event->getMemory() / 1024 / 1024;
 
 			$event_data[] = compact( 'name', 'offset', 'duration', 'width', 'category', 'memory' );
@@ -265,6 +288,8 @@ class Laps {
 				'events'      => $event_data,
 				'queries'     => $query_data,
 				'savequeries' => defined( 'SAVEQUERIES' ) && SAVEQUERIES,
+				'http'        => $http_data,
+				'savehttp'    => ! empty( $http_data ),
 			)
 		);
 

views/laps.mustache

@@ -11,3 +11,11 @@
 	{{/queries}}
 </div>
 {{/savequeries}}
+
+{{#savehttp}}
+<div class="laps-timeline">
+	{{#http}}
+		<div class="event event-{{category}}" title="{{name}} - {{duration}} ms" style="width:{{width}}%; left:{{offset}}%;"></div>
+	{{/http}}
+</div>
+{{/savehttp}}