Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

[WebProfilerBundle] Tweak the time view

  • Loading branch information...
commit d4300b95a563e39be0f8746a15cb0668e9e47374 1 parent 416a2a4
@vicb vicb authored
View
239 src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig
@@ -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++) {

isn't length being re-calculated each iteration ?

@stof Collaborator
stof added a note

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

oO right,nvm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
- 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 = {
@@ -272,7 +261,7 @@
};
drawCanvases({{ width }});
- </script>
+ //]]></script>
{% endblock %}
{% macro dump_request_data(token, profile, events, origin) %}
Please sign in to comment.
Something went wrong with that request. Please try again.