diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[WebProfilerBundle] Tweak the time view

Browse Source
This commit is contained in:
Victor Berchet 2012-01-25 17:44:25 +01:00
parent 416a2a46df
commit d4300b95a5
1 changed files with 111 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig
View File

@ -48,7 +48,7 @@
</tr> </tr>
<tr> <tr>
<th>Threshold</th> <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>
<tr> <tr>
<th>Width</th> <th>Width</th>
@ -87,174 +87,163 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<script type="text/javascript"> <script type="text/javascript">//<![CDATA[
function drawCanvas(request, max, threshold, width) { function drawCanvas(request, max, threshold, width) {
var colors = { "use strict";
{% for name, color in colors %} var text,
"{{ name }}": "{{ color }}"{{ loop.last ? '' : ', ' }} ms,
{% endfor %} xc,
}; colors = {{ colors|json_encode|raw }},
var space = 10.5; space = 10.5,
var ratio = (width - space * 2) / max; ratio = (width - space * 2) / max,
var height = 0; height = 0,
for (i = 0; i < request.events.length; i++) { h = space,
if (request.events[i].totaltime < threshold) { x = request.left * ratio + space,
continue; 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; canvas.width = width;
ctx.textBaseline = "middle";
ctx.lineWidth = 0;
var context = canvas.getContext("2d"); request.events.forEach(function(event) {
context.textBaseline = "middle";
context.lineWidth = 0;
for (i = 0; i < request.events.length; i++) {
var event = request.events[i];
if (event.totaltime < threshold) { if (event.totaltime < threshold) {
continue; return;
} }
for (j = 0; j < event.periods.length; j++) { event.periods.forEach(function(period) {
var period = event.periods[j];
if ('section.child' == event.name) { if ('section.child' === event.name) {
context.fillStyle = colors.child_sections; ctx.fillStyle = colors.child_sections;
context.fillRect(x + period.begin * ratio, 0, (period.end - period.begin) * ratio, height); ctx.fillRect(x + period.begin * ratio, 0, (period.end - period.begin) * ratio, height);
} else if ('section' == event.category) { } else if ('section' === event.category) {
context.beginPath(); ctx.beginPath();
context.strokeStyle = "#dfdfdf"; ctx.strokeStyle = "#dfdfdf";
context.moveTo(x + period.begin * ratio, 0); ctx.moveTo(x + period.begin * ratio, 0);
context.lineTo(x + period.begin * ratio, height); ctx.lineTo(x + period.begin * ratio, height);
context.moveTo(x + period.end * ratio, 0); ctx.moveTo(x + period.end * ratio, 0);
context.lineTo(x + period.end * ratio, height); ctx.lineTo(x + period.end * ratio, height);
context.fill(); ctx.fill();
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
} }
} });
} });
for (i = 0; i < request.events.length; i++) { request.events.forEach(function(event) {
var event = request.events[i];
if (event.totaltime < threshold || 'section.child' == event.name) { if (event.totaltime < threshold || 'section.child' === event.name) {
continue; return;
} }
h += 8; h += 8;
for (j = 0; j < event.periods.length; j++) { event.periods.forEach(function(period) {
var period = event.periods[j];
if (colors[event.name]) { if (colors[event.name]) {
context.fillStyle = colors[event.name]; ctx.fillStyle = colors[event.name];
context.strokeStyle = colors[event.name]; ctx.strokeStyle = colors[event.name];
} else if (colors[event.category]) { } else if (colors[event.category]) {
context.fillStyle = colors[event.category]; ctx.fillStyle = colors[event.category];
context.strokeStyle = colors[event.category]; ctx.strokeStyle = colors[event.category];
} else { } else {
context.fillStyle = colors.default; ctx.fillStyle = colors['default'];
context.strokeStyle = colors.default; ctx.strokeStyle = colors['default'];
} }
if ('section' != event.category) { if ('section' !== event.category) {
context.fillRect(x + period.begin * ratio, h + 3, 2, 6); ctx.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); ctx.fillRect(x + period.begin * ratio, h, (period.end - period.begin) * ratio || 2, 6);
} else { } else {
context.beginPath(); ctx.beginPath();
context.moveTo(x + period.begin * ratio, h); ctx.moveTo(x + period.begin * ratio, h);
context.lineTo(x + period.begin * ratio, h + 11); ctx.lineTo(x + period.begin * ratio, h + 11);
context.lineTo(x + period.begin * ratio + 8, h); ctx.lineTo(x + period.begin * ratio + 8, h);
context.lineTo(x + period.begin * ratio, h); ctx.lineTo(x + period.begin * ratio, h);
context.fill(); ctx.fill();
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
context.beginPath(); ctx.beginPath();
context.moveTo(x + period.end * ratio, h); ctx.moveTo(x + period.end * ratio, h);
context.lineTo(x + period.end * ratio, h + 11); ctx.lineTo(x + period.end * ratio, h + 11);
context.lineTo(x + period.end * ratio - 8, h); ctx.lineTo(x + period.end * ratio - 8, h);
context.lineTo(x + period.end * ratio, h); ctx.lineTo(x + period.end * ratio, h);
context.fill(); ctx.fill();
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
context.beginPath(); ctx.beginPath();
context.moveTo(x + period.begin * ratio, h); ctx.moveTo(x + period.begin * ratio, h);
context.lineTo(x + period.end * ratio, h); ctx.lineTo(x + period.end * ratio, h);
context.lineTo(x + period.end * ratio, h + 2); ctx.lineTo(x + period.end * ratio, h + 2);
context.lineTo(x + period.begin * ratio, h + 2); ctx.lineTo(x + period.begin * ratio, h + 2);
context.lineTo(x + period.begin * ratio, h); ctx.lineTo(x + period.begin * ratio, h);
context.fill(); ctx.fill();
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
} }
} });
h += 30; h += 30;
context.beginPath(); ctx.beginPath();
context.strokeStyle = "#dfdfdf"; ctx.strokeStyle = "#dfdfdf";
context.moveTo(0, h - 10); ctx.moveTo(0, h - 10);
context.lineTo(width, h - 10); ctx.lineTo(width, h - 10);
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
} });
h = space; h = space;
for (i = 0; i < request.events.length; i++) { request.events.forEach(function(event) {
var event = request.events[i];
if (event.totaltime < threshold || 'section.child' == event.name) { if (event.totaltime < threshold || 'section.child' === event.name) {
continue; return;
} }
context.fillStyle = "#444"; ctx.fillStyle = "#444";
context.font = "12px sans-serif"; ctx.font = "12px sans-serif";
var text = event.name; text = event.name;
var ms; ms = " ~ " + (event.totaltime < 1 ? event.totaltime : parseInt(event.totaltime, 10)) + " ms";
if (event.totaltime < 1) { if (x + event.starttime * ratio + ctx.measureText(text + ms).width > width) {
ms = " ~ " + event.totaltime + " ms"; ctx.textAlign = "end";
} else { ctx.font = "10px sans-serif";
ms = " ~ " + parseInt(event.totaltime) + " ms";
}
if (x + event.starttime * ratio + context.measureText(text + ms).width > width) {
context.textAlign = "end";
context.font = "10px sans-serif";
xc = x + event.endtime * ratio - 1; xc = x + event.endtime * ratio - 1;
context.fillText(ms, xc, h); ctx.fillText(ms, xc, h);
xc = xc - context.measureText(ms).width xc -= ctx.measureText(ms).width;
context.font = "12px sans-serif"; ctx.font = "12px sans-serif";
context.fillText(text, xc, h); ctx.fillText(text, xc, h);
} else { } else {
context.textAlign = "start"; ctx.textAlign = "start";
context.font = "12px sans-serif"; ctx.font = "12px sans-serif";
xc = x + event.starttime * ratio + 1; xc = x + event.starttime * ratio + 1;
context.fillText(text, xc, h); ctx.fillText(text, xc, h);
xc = xc + context.measureText(text).width; xc += ctx.measureText(text).width;
context.font = "10px sans-serif"; ctx.font = "10px sans-serif";
context.fillText(ms, xc, h); ctx.fillText(ms, xc, h);
} }
h += 38; h += 38;
} });
} }
function drawCanvases(width) function drawCanvases(width)
{ {
for (k = 0; k < requests_data.requests.length; k++) { "use strict";
drawCanvas(requests_data.requests[k], requests_data.max, {{ threshold }}, width); requests_data.requests.forEach(function(request) {
} drawCanvas(request, requests_data.max, {{ threshold }}, width);
});
} }
var requests_data = { var requests_data = {
@ -272,7 +261,7 @@
}; };
drawCanvases({{ width }}); drawCanvases({{ width }});
</script> //]]></script>
{% endblock %} {% endblock %}
{% macro dump_request_data(token, profile, events, origin) %} {% macro dump_request_data(token, profile, events, origin) %}