merged branch vicb/profiler (PR #3190)
Commits -------b879397[Profiler] Optimize time panel ISd4300b9[WebProfilerBundle] Tweak the time view416a2a4[Stopwatch] Fix some logic8c3505e[Profiler] Tweak PHPDoc3bcd154[HttpKernel] Tweak the Profile class - DRY Discussion ---------- [Profiler] Stopwatch related tweaks * Some fixes in the stopwatch logic, * Some JS fixes, * Make use of modern JS.
This commit is contained in:
Fabien Potencier
commit
a72bf897d3
@ -48,7 +48,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Threshold</th>
|
||||
<td><input type="number" size="3" name="threshold" value="{{ threshold }}" /> ms</td>
|
||||
<td><input type="number" size="3" name="threshold" value="{{ threshold }}" min="0" /> ms</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Width</th>
|
||||
@ -87,174 +87,153 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
function drawCanvas(request, max, threshold, width) {
|
||||
var colors = {
|
||||
{% for name, color in colors %}
|
||||
"{{ name }}": "{{ color }}"{{ loop.last ? '' : ', ' }}
|
||||
{% endfor %}
|
||||
};
|
||||
var space = 10.5;
|
||||
var ratio = (width - space * 2) / max;
|
||||
var height = 0;
|
||||
for (i = 0; i < request.events.length; i++) {
|
||||
if (request.events[i].totaltime < threshold) {
|
||||
continue;
|
||||
}
|
||||
"use strict";
|
||||
var text,
|
||||
ms,
|
||||
xc,
|
||||
mainEvents,
|
||||
colors = {{ colors|json_encode|raw }},
|
||||
space = 10.5,
|
||||
ratio = (width - space * 2) / max,
|
||||
height = 0,
|
||||
h = space,
|
||||
x = request.left * ratio + space,
|
||||
canvas = document.getElementById('timeline_' + request.id),
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
height = height + 38;
|
||||
}
|
||||
var h = space;
|
||||
var x = request.left * ratio + space;
|
||||
request.events = request.events.filter(function(event) {
|
||||
return event.totaltime >= threshold;
|
||||
});
|
||||
|
||||
var canvas = document.getElementById('timeline_' + request.id);
|
||||
height += 38 * request.events.length;
|
||||
canvas.width = width;
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.lineWidth = 0;
|
||||
|
||||
var context = canvas.getContext("2d");
|
||||
context.textBaseline = "middle";
|
||||
context.lineWidth = 0;
|
||||
|
||||
for (i = 0; i < request.events.length; i++) {
|
||||
var event = request.events[i];
|
||||
|
||||
if (event.totaltime < threshold) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (j = 0; j < event.periods.length; j++) {
|
||||
var period = event.periods[j];
|
||||
|
||||
if ('section.child' == event.name) {
|
||||
context.fillStyle = colors.child_sections;
|
||||
context.fillRect(x + period.begin * ratio, 0, (period.end - period.begin) * ratio, height);
|
||||
} else if ('section' == event.category) {
|
||||
context.beginPath();
|
||||
context.strokeStyle = "#dfdfdf";
|
||||
context.moveTo(x + period.begin * ratio, 0);
|
||||
context.lineTo(x + period.begin * ratio, height);
|
||||
context.moveTo(x + period.end * ratio, 0);
|
||||
context.lineTo(x + period.end * ratio, height);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
request.events.forEach(function(event) {
|
||||
event.periods.forEach(function(period) {
|
||||
if ('section.child' === event.name) {
|
||||
ctx.fillStyle = colors.child_sections;
|
||||
ctx.fillRect(x + period.begin * ratio, 0, (period.end - period.begin) * ratio, height);
|
||||
} else if ('section' === event.category) {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "#dfdfdf";
|
||||
ctx.moveTo(x + period.begin * ratio, 0);
|
||||
ctx.lineTo(x + period.begin * ratio, height);
|
||||
ctx.moveTo(x + period.end * ratio, 0);
|
||||
ctx.lineTo(x + period.end * ratio, height);
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
for (i = 0; i < request.events.length; i++) {
|
||||
var event = request.events[i];
|
||||
mainEvents = request.events.filter(function(event) {
|
||||
return 'section.child' !== event.name;
|
||||
});
|
||||
|
||||
if (event.totaltime < threshold || 'section.child' == event.name) {
|
||||
continue;
|
||||
}
|
||||
mainEvents.forEach(function(event) {
|
||||
|
||||
h += 8;
|
||||
|
||||
for (j = 0; j < event.periods.length; j++) {
|
||||
var period = event.periods[j];
|
||||
event.periods.forEach(function(period) {
|
||||
|
||||
if (colors[event.name]) {
|
||||
context.fillStyle = colors[event.name];
|
||||
context.strokeStyle = colors[event.name];
|
||||
ctx.fillStyle = colors[event.name];
|
||||
ctx.strokeStyle = colors[event.name];
|
||||
} else if (colors[event.category]) {
|
||||
context.fillStyle = colors[event.category];
|
||||
context.strokeStyle = colors[event.category];
|
||||
ctx.fillStyle = colors[event.category];
|
||||
ctx.strokeStyle = colors[event.category];
|
||||
} else {
|
||||
context.fillStyle = colors.default;
|
||||
context.strokeStyle = colors.default;
|
||||
ctx.fillStyle = colors['default'];
|
||||
ctx.strokeStyle = colors['default'];
|
||||
}
|
||||
|
||||
if ('section' != event.category) {
|
||||
context.fillRect(x + period.begin * ratio, h + 3, 2, 6);
|
||||
context.fillRect(x + period.begin * ratio, h, (period.end - period.begin) * ratio ? (period.end - period.begin) * ratio : 2, 6);
|
||||
if ('section' !== event.category) {
|
||||
ctx.fillRect(x + period.begin * ratio, h + 3, 2, 6);
|
||||
ctx.fillRect(x + period.begin * ratio, h, (period.end - period.begin) * ratio || 2, 6);
|
||||
} else {
|
||||
context.beginPath();
|
||||
context.moveTo(x + period.begin * ratio, h);
|
||||
context.lineTo(x + period.begin * ratio, h + 11);
|
||||
context.lineTo(x + period.begin * ratio + 8, h);
|
||||
context.lineTo(x + period.begin * ratio, h);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + period.begin * ratio, h);
|
||||
ctx.lineTo(x + period.begin * ratio, h + 11);
|
||||
ctx.lineTo(x + period.begin * ratio + 8, h);
|
||||
ctx.lineTo(x + period.begin * ratio, h);
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(x + period.end * ratio, h);
|
||||
context.lineTo(x + period.end * ratio, h + 11);
|
||||
context.lineTo(x + period.end * ratio - 8, h);
|
||||
context.lineTo(x + period.end * ratio, h);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + period.end * ratio, h);
|
||||
ctx.lineTo(x + period.end * ratio, h + 11);
|
||||
ctx.lineTo(x + period.end * ratio - 8, h);
|
||||
ctx.lineTo(x + period.end * ratio, h);
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(x + period.begin * ratio, h);
|
||||
context.lineTo(x + period.end * ratio, h);
|
||||
context.lineTo(x + period.end * ratio, h + 2);
|
||||
context.lineTo(x + period.begin * ratio, h + 2);
|
||||
context.lineTo(x + period.begin * ratio, h);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + period.begin * ratio, h);
|
||||
ctx.lineTo(x + period.end * ratio, h);
|
||||
ctx.lineTo(x + period.end * ratio, h + 2);
|
||||
ctx.lineTo(x + period.begin * ratio, h + 2);
|
||||
ctx.lineTo(x + period.begin * ratio, h);
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
h += 30;
|
||||
|
||||
context.beginPath();
|
||||
context.strokeStyle = "#dfdfdf";
|
||||
context.moveTo(0, h - 10);
|
||||
context.lineTo(width, h - 10);
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "#dfdfdf";
|
||||
ctx.moveTo(0, h - 10);
|
||||
ctx.lineTo(width, h - 10);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
h = space;
|
||||
|
||||
for (i = 0; i < request.events.length; i++) {
|
||||
var event = request.events[i];
|
||||
mainEvents.forEach(function(event) {
|
||||
|
||||
if (event.totaltime < threshold || 'section.child' == event.name) {
|
||||
continue;
|
||||
}
|
||||
|
||||
context.fillStyle = "#444";
|
||||
context.font = "12px sans-serif";
|
||||
var text = event.name;
|
||||
var ms;
|
||||
if (event.totaltime < 1) {
|
||||
ms = " ~ " + event.totaltime + " ms";
|
||||
} else {
|
||||
ms = " ~ " + parseInt(event.totaltime) + " ms";
|
||||
}
|
||||
if (x + event.starttime * ratio + context.measureText(text + ms).width > width) {
|
||||
context.textAlign = "end";
|
||||
context.font = "10px sans-serif";
|
||||
ctx.fillStyle = "#444";
|
||||
ctx.font = "12px sans-serif";
|
||||
text = event.name;
|
||||
ms = " ~ " + (event.totaltime < 1 ? event.totaltime : parseInt(event.totaltime, 10)) + " ms";
|
||||
if (x + event.starttime * ratio + ctx.measureText(text + ms).width > width) {
|
||||
ctx.textAlign = "end";
|
||||
ctx.font = "10px sans-serif";
|
||||
xc = x + event.endtime * ratio - 1;
|
||||
context.fillText(ms, xc, h);
|
||||
ctx.fillText(ms, xc, h);
|
||||
|
||||
xc = xc - context.measureText(ms).width
|
||||
context.font = "12px sans-serif";
|
||||
context.fillText(text, xc, h);
|
||||
xc -= ctx.measureText(ms).width;
|
||||
ctx.font = "12px sans-serif";
|
||||
ctx.fillText(text, xc, h);
|
||||
} else {
|
||||
context.textAlign = "start";
|
||||
context.font = "12px sans-serif";
|
||||
ctx.textAlign = "start";
|
||||
ctx.font = "12px sans-serif";
|
||||
xc = x + event.starttime * ratio + 1;
|
||||
context.fillText(text, xc, h);
|
||||
ctx.fillText(text, xc, h);
|
||||
|
||||
xc = xc + context.measureText(text).width;
|
||||
context.font = "10px sans-serif";
|
||||
context.fillText(ms, xc, h);
|
||||
xc += ctx.measureText(text).width;
|
||||
ctx.font = "10px sans-serif";
|
||||
ctx.fillText(ms, xc, h);
|
||||
}
|
||||
|
||||
h += 38;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawCanvases(width)
|
||||
{
|
||||
for (k = 0; k < requests_data.requests.length; k++) {
|
||||
drawCanvas(requests_data.requests[k], requests_data.max, {{ threshold }}, width);
|
||||
}
|
||||
"use strict";
|
||||
requests_data.requests.forEach(function(request) {
|
||||
drawCanvas(request, requests_data.max, {{ threshold }}, width);
|
||||
});
|
||||
}
|
||||
|
||||
var requests_data = {
|
||||
@ -272,7 +251,7 @@
|
||||
};
|
||||
|
||||
drawCanvases({{ width }});
|
||||
</script>
|
||||
//]]></script>
|
||||
{% endblock %}
|
||||
|
||||
{% macro dump_request_data(token, profile, events, origin) %}
|
||||
|
||||
@ -76,7 +76,7 @@ class Stopwatch
|
||||
public function start($name, $category = null)
|
||||
{
|
||||
if (!isset($this->events[$name])) {
|
||||
$this->events[$name] = new StopwatchEvent($this->origin, $category);
|
||||
$this->events[$name] = new StopwatchEvent($this->origin ?: microtime(true) * 1000, $category);
|
||||
}
|
||||
|
||||
return $this->events[$name]->start();
|
||||
|
||||
@ -28,10 +28,12 @@ class StopwatchEvent
|
||||
*
|
||||
* @param integer $origin The origin time in milliseconds
|
||||
* @param string $category The event category
|
||||
*
|
||||
* @throws \InvalidArgumentException When the raw time is not valid
|
||||
*/
|
||||
public function __construct($origin, $category = null)
|
||||
{
|
||||
$this->origin = $origin;
|
||||
$this->origin = $this->formatTime($origin);
|
||||
$this->category = is_string($category) ? $category : 'default';
|
||||
$this->started = array();
|
||||
$this->periods = array();
|
||||
@ -132,7 +134,7 @@ class StopwatchEvent
|
||||
*/
|
||||
public function getEndTime()
|
||||
{
|
||||
return count($this->periods) ? $this->periods[count($this->periods) - 1][1] : 0;
|
||||
return ($count = count($this->periods)) ? $this->periods[$count - 1][1] : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -147,11 +149,29 @@ class StopwatchEvent
|
||||
$total += $period[1] - $period[0];
|
||||
}
|
||||
|
||||
return sprintf('%.1f', $total);
|
||||
return $this->formatTime($total);
|
||||
}
|
||||
|
||||
private function getNow()
|
||||
{
|
||||
return sprintf('%.1f', microtime(true) * 1000 - $this->origin);
|
||||
return $this->formatTime(microtime(true) * 1000 - $this->origin);
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a time.
|
||||
*
|
||||
* @param numerical $time A raw time
|
||||
*
|
||||
* @return float The formatted time
|
||||
*
|
||||
* @throws \InvalidArgumentException When the raw time is not valid
|
||||
*/
|
||||
private function formatTime($time)
|
||||
{
|
||||
if (!is_numeric($time)) {
|
||||
throw new \InvalidArgumentException('The time must be a numerical value');
|
||||
}
|
||||
|
||||
return round($time, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,7 +82,7 @@ class MongoDbProfilerStorage implements ProfilerStorageInterface
|
||||
}
|
||||
|
||||
/**
|
||||
* Write data associated with the given token.
|
||||
* Saves a Profile.
|
||||
*
|
||||
* @param Profile $profile A Profile instance
|
||||
*
|
||||
|
||||
@ -18,7 +18,7 @@ use Symfony\Component\HttpKernel\DataCollector\DataCollectorInterface;
|
||||
*
|
||||
* @author Fabien Potencier <fabien@symfony.com>
|
||||
*/
|
||||
class Profile implements \Serializable
|
||||
class Profile
|
||||
{
|
||||
private $token;
|
||||
private $collectors;
|
||||
@ -212,13 +212,8 @@ class Profile implements \Serializable
|
||||
return isset($this->collectors[$name]);
|
||||
}
|
||||
|
||||
public function serialize()
|
||||
public function __sleep()
|
||||
{
|
||||
return serialize(array($this->token, $this->parent, $this->children, $this->collectors, $this->ip, $this->method, $this->url, $this->time));
|
||||
}
|
||||
|
||||
public function unserialize($data)
|
||||
{
|
||||
list($this->token, $this->parent, $this->children, $this->collectors, $this->ip, $this->method, $this->url, $this->time) = unserialize($data);
|
||||
return array('token', 'parent', 'children', 'collectors', 'ip', 'method', 'url', 'time');
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ interface ProfilerStorageInterface
|
||||
function read($token);
|
||||
|
||||
/**
|
||||
* Write data associated with the given token.
|
||||
* Saves a Profile.
|
||||
*
|
||||
* @param Profile $profile A Profile instance
|
||||
*
|
||||
|
||||
@ -31,7 +31,7 @@ class StopwatchEventTest extends \PHPUnit_Framework_TestCase
|
||||
$event = new StopwatchEvent(microtime(true) * 1000);
|
||||
$this->assertEquals('default', $event->getCategory());
|
||||
|
||||
$event = new StopwatchEvent(time(), 'cat');
|
||||
$event = new StopwatchEvent(microtime(true) * 1000, 'cat');
|
||||
$this->assertEquals('cat', $event->getCategory());
|
||||
}
|
||||
|
||||
@ -141,4 +141,12 @@ class StopwatchEventTest extends \PHPUnit_Framework_TestCase
|
||||
$end = $event->getEndTime();
|
||||
$this->assertTrue($end >= 18 && $end <= 30);
|
||||
}
|
||||
|
||||
/**
|
||||
* @expectedException \InvalidArgumentException
|
||||
*/
|
||||
public function testInvalidOriginThrowsAnException()
|
||||
{
|
||||
new StopwatchEvent("abc");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user