[WebProfilerBundle] Tweak the time view
This commit is contained in:
parent
416a2a46df
commit
d4300b95a5
@ -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,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++) {
|
||||
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];
|
||||
event.periods.forEach(function(period) {
|
||||
|
||||
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();
|
||||
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();
|
||||
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];
|
||||
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 = {
|
||||
@ -272,7 +261,7 @@
|
||||
};
|
||||
|
||||
drawCanvases({{ width }});
|
||||
</script>
|
||||
//]]></script>
|
||||
{% endblock %}
|
||||
|
||||
{% macro dump_request_data(token, profile, events, origin) %}
|
||||
|
Reference in New Issue
Block a user