Skip to content

Commit

Permalink
[WebProfilerBundle] Tweak the time view
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicb
vicb committed Jan 25, 2012
1 parent 416a2a4 commit d4300b9
Showing 1 changed file with 114 additions and 125 deletions.
239 changes: 114 additions & 125 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -87,174 +87,163 @@
{% 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++) {

This comment has been minimized.

Sign in to view

Copy link
@vendethiel

vendethiel Jan 30, 2012

isn't length being re-calculated each iteration ?

This comment has been minimized.

Sign in to view

Copy link
@stof

stof Jan 30, 2012

Member

why commenting the code that is being removed in this PR ?

This comment has been minimized.

Sign in to view

Copy link
@vendethiel

vendethiel Jan 30, 2012

oO right,nvm
if (request.events[i].totaltime < threshold) {
continue;
"use strict";
var text,
ms,
xc,
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");
request.events.forEach(function(event) {
if (event.totaltime >= threshold) {
height += 38;
}
});
height = height + 38;
}
var h = space;
var x = request.left * ratio + space;
var canvas = document.getElementById('timeline_' + request.id);
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];
request.events.forEach(function(event) {
if (event.totaltime < threshold) {
continue;
return;
}
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();
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];
request.events.forEach(function(event) {
if (event.totaltime < threshold || 'section.child' == event.name) {
continue;
if (event.totaltime < threshold || 'section.child' === event.name) {
return;
}
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();
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();
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.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();
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();
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];
request.events.forEach(function(event) {
if (event.totaltime < threshold || 'section.child' == event.name) {
continue;
if (event.totaltime < threshold || 'section.child' === event.name) {
return;
}
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 = {
Expand All @@ -272,7 +261,7 @@
};
drawCanvases({{ width }});
</script>
//]]></script>
{% endblock %}

{% macro dump_request_data(token, profile, events, origin) %}
Expand Down

0 comments on commit d4300b9

Please sign in to comment.