[WebProfilerBundle] Tweak the time view
This commit is contained in:
parent
416a2a46df
commit
d4300b95a5
@ -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) %}
|
||||||
|
Reference in New Issue
Block a user