Adjust the width of the timeline in the profiler dynamically when the (browser) window is resized.
This commit is contained in:
parent
1541fe26e4
commit
06cc9ff32d
@ -455,4 +455,20 @@ td.main, td.menu {
|
|||||||
background: transparent url(../images/profiler/spinner.gif) scroll no-repeat 50% 50%;
|
background: transparent url(../images/profiler/spinner.gif) scroll no-repeat 50% 50%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sf-profiler-timeline .legends {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sf-profiler-timeline .legends span {
|
||||||
|
border-left-width: 10px;
|
||||||
|
border-left-style: solid;
|
||||||
|
padding: 0 10px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sf-profiler-timeline canvas {
|
||||||
|
border: 1px solid #999;
|
||||||
|
border-width: 1px 0;
|
||||||
|
}
|
||||||
|
@ -37,10 +37,7 @@
|
|||||||
{% block panel %}
|
{% block panel %}
|
||||||
<h2>Timeline</h2>
|
<h2>Timeline</h2>
|
||||||
|
|
||||||
{% set threshold = app.request.query.get('threshold', 1) %}
|
<form id="timeline-control" action="" method="get">
|
||||||
{% set width = app.request.query.get('width', 680) %}
|
|
||||||
|
|
||||||
<form action="" method="get" style="display: inline">
|
|
||||||
<input type="hidden" name="panel" value="time" />
|
<input type="hidden" name="panel" value="time" />
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
@ -53,15 +50,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Threshold</th>
|
<th>Threshold</th>
|
||||||
<td><input type="number" size="3" name="threshold" value="{{ threshold }}" min="0" /> ms</td>
|
<td><input type="number" size="3" name="threshold" value="1" min="0" /> ms</td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Width</th>
|
|
||||||
<td><input type="range" name="width" min="0" max="1200" step="10" value="{{ width }}" onChange="drawCanvases(this.value);" /> px</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th> </th>
|
|
||||||
<td><input type="submit" value="refresh" /></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</form>
|
</form>
|
||||||
@ -71,174 +60,319 @@
|
|||||||
<small>
|
<small>
|
||||||
- {{ collector.events.__section__.totaltime }} ms
|
- {{ collector.events.__section__.totaltime }} ms
|
||||||
{% if profile.parent %}
|
{% if profile.parent %}
|
||||||
- <a href="{{ path('_profiler', { 'token': profile.parent.token, 'panel': 'time', 'threshold': threshold, 'width': width }) }}">parent</a>
|
- <a href="{{ path('_profiler', { 'token': profile.parent.token, 'panel': 'time' }) }}">parent</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</small>
|
</small>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
{% set max = collector.events.__section__.endtime %}
|
{% set max = collector.events.__section__.endtime %}
|
||||||
|
|
||||||
{{ _self.display_timeline('timeline_' ~ token, collector.events, threshold, colors, width) }}
|
{{ _self.display_timeline('timeline_' ~ token, collector.events, colors) }}
|
||||||
|
|
||||||
{% if profile.children|length %}
|
{% if profile.children|length %}
|
||||||
{% for child in profile.children %}
|
{% for child in profile.children %}
|
||||||
{% set events = child.getcollector('time').events %}
|
{% set events = child.getcollector('time').events %}
|
||||||
<h3>
|
<h3>
|
||||||
Sub-request "<a href="{{ path('_profiler', { 'token': child.token, 'panel': 'time', 'threshold': threshold, 'width': width }) }}">{{ child.getcollector('request').requestattributes.get('_controller') }}</a>"
|
Sub-request "<a href="{{ path('_profiler', { 'token': child.token, 'panel': 'time' }) }}">{{ child.getcollector('request').requestattributes.get('_controller') }}</a>"
|
||||||
<small> - {{ events.__section__.totaltime }} ms</small>
|
<small> - {{ events.__section__.totaltime }} ms</small>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
{{ _self.display_timeline('timeline_' ~ child.token, events, threshold, colors, width) }}
|
{{ _self.display_timeline('timeline_' ~ child.token, events, colors) }}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<script type="text/javascript">//<![CDATA[
|
<script type="text/javascript">//<![CDATA[
|
||||||
function drawCanvas(request, max, threshold, width) {
|
/**
|
||||||
|
* In-memory key-value cache manager
|
||||||
|
*/
|
||||||
|
var cache = new function() {
|
||||||
"use strict";
|
"use strict";
|
||||||
var text,
|
var dict = {};
|
||||||
ms,
|
|
||||||
xc,
|
|
||||||
mainEvents,
|
|
||||||
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 = request.events.filter(function(event) {
|
this.get = function(key) {
|
||||||
return event.totaltime >= threshold;
|
return dict.hasOwnProperty(key)
|
||||||
});
|
? dict[key]
|
||||||
|
: null;
|
||||||
height += 38 * request.events.length;
|
|
||||||
canvas.width = width;
|
|
||||||
ctx.textBaseline = "middle";
|
|
||||||
ctx.lineWidth = 0;
|
|
||||||
|
|
||||||
request.events.forEach(function(event) {
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
mainEvents = request.events.filter(function(event) {
|
|
||||||
return '__section__.child' !== event.name;
|
|
||||||
});
|
|
||||||
|
|
||||||
mainEvents.forEach(function(event) {
|
|
||||||
|
|
||||||
h += 8;
|
|
||||||
|
|
||||||
event.periods.forEach(function(period) {
|
|
||||||
|
|
||||||
if (colors[event.name]) {
|
|
||||||
ctx.fillStyle = colors[event.name];
|
|
||||||
ctx.strokeStyle = colors[event.name];
|
|
||||||
} else if (colors[event.category]) {
|
|
||||||
ctx.fillStyle = colors[event.category];
|
|
||||||
ctx.strokeStyle = colors[event.category];
|
|
||||||
} else {
|
|
||||||
ctx.fillStyle = colors['default'];
|
|
||||||
ctx.strokeStyle = colors['default'];
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
|
||||||
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;
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.strokeStyle = "#dfdfdf";
|
|
||||||
ctx.moveTo(0, h - 10);
|
|
||||||
ctx.lineTo(width, h - 10);
|
|
||||||
ctx.closePath();
|
|
||||||
ctx.stroke();
|
|
||||||
});
|
|
||||||
|
|
||||||
h = space;
|
|
||||||
|
|
||||||
mainEvents.forEach(function(event) {
|
|
||||||
|
|
||||||
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;
|
|
||||||
ctx.fillText(ms, xc, h);
|
|
||||||
|
|
||||||
xc -= ctx.measureText(ms).width;
|
|
||||||
ctx.font = "12px sans-serif";
|
|
||||||
ctx.fillText(text, xc, h);
|
|
||||||
} else {
|
|
||||||
ctx.textAlign = "start";
|
|
||||||
ctx.font = "12px sans-serif";
|
|
||||||
xc = x + event.starttime * ratio + 1;
|
|
||||||
ctx.fillText(text, xc, h);
|
|
||||||
|
|
||||||
xc += ctx.measureText(text).width;
|
|
||||||
ctx.font = "10px sans-serif";
|
|
||||||
ctx.fillText(ms, xc, h);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h += 38;
|
this.set = function(key, value) {
|
||||||
});
|
dict[key] = value;
|
||||||
}
|
|
||||||
|
|
||||||
function drawCanvases(width)
|
return value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Query an element with a CSS selector.
|
||||||
|
*
|
||||||
|
* @param string selector a CSS-selector-compatible query string.
|
||||||
|
*
|
||||||
|
* @return DOMElement|null
|
||||||
|
*/
|
||||||
|
function query(selector)
|
||||||
{
|
{
|
||||||
"use strict";
|
"use strict";
|
||||||
requests_data.requests.forEach(function(request) {
|
var key = 'SELECTOR: ' + selector;
|
||||||
drawCanvas(request, requests_data.max, {{ threshold }}, width);
|
|
||||||
});
|
return cache.get(key) || cache.set(key, document.querySelector(selector));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Canvas Manager
|
||||||
|
*/
|
||||||
|
function CanvasManager(requests, maxRequestTime) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var _drawingColors = {{ colors|json_encode|raw }},
|
||||||
|
_storagePrefix = 'sf2/profiler/timeline',
|
||||||
|
_threshold = 1,
|
||||||
|
_requests = requests,
|
||||||
|
_maxRequestTime = maxRequestTime;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check whether this event is a child event.
|
||||||
|
*
|
||||||
|
* @return true if it is.
|
||||||
|
*/
|
||||||
|
function isChildEvent(event)
|
||||||
|
{
|
||||||
|
return '__section__.child' === event.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check whether this event is categorized in 'section'.
|
||||||
|
*
|
||||||
|
* @return true if it is.
|
||||||
|
*/
|
||||||
|
function isSectionEvent(event)
|
||||||
|
{
|
||||||
|
return 'section' === event.category;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the width of the container.
|
||||||
|
*/
|
||||||
|
function getContainerWidth()
|
||||||
|
{
|
||||||
|
return query('#collector_content h2').clientWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draw one canvas.
|
||||||
|
*
|
||||||
|
* @param request the request object
|
||||||
|
* @param max <subjected for removal>
|
||||||
|
* @param threshold the threshold (lower bound) of the length of the timeline (in miliseconds).
|
||||||
|
* @param width the width of the canvas.
|
||||||
|
*/
|
||||||
|
this.drawOne = function(request, max, threshold, width)
|
||||||
|
{
|
||||||
|
"use strict";
|
||||||
|
var text,
|
||||||
|
ms,
|
||||||
|
xc,
|
||||||
|
drawableEvents,
|
||||||
|
mainEvents,
|
||||||
|
elementId = 'timeline_' + request.id,
|
||||||
|
canvasHeight = 0,
|
||||||
|
gapPerEvent = 38,
|
||||||
|
colors = _drawingColors,
|
||||||
|
space = 10.5,
|
||||||
|
ratio = (width - space * 2) / max,
|
||||||
|
h = space,
|
||||||
|
x = request.left * ratio + space, // position
|
||||||
|
canvas = cache.get(elementId) || cache.set(elementId, document.getElementById(elementId)),
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
// Filter events whose total time is below the threshold.
|
||||||
|
drawableEvents = request.events.filter(function(event) {
|
||||||
|
return event.totaltime >= threshold;
|
||||||
|
});
|
||||||
|
|
||||||
|
canvasHeight += gapPerEvent * drawableEvents.length;
|
||||||
|
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = canvasHeight;
|
||||||
|
|
||||||
|
ctx.textBaseline = "middle";
|
||||||
|
ctx.lineWidth = 0;
|
||||||
|
|
||||||
|
// For each event, draw a line.
|
||||||
|
ctx.strokeStyle = "#dfdfdf";
|
||||||
|
|
||||||
|
drawableEvents.forEach(function(event) {
|
||||||
|
event.periods.forEach(function(period) {
|
||||||
|
var timelineHeadPosition = x + period.begin * ratio;
|
||||||
|
|
||||||
|
if (isChildEvent(event)) {
|
||||||
|
ctx.fillStyle = colors.child_sections;
|
||||||
|
ctx.fillRect(timelineHeadPosition, 0, (period.end - period.begin) * ratio, canvasHeight);
|
||||||
|
} else if (isSectionEvent(event)) {
|
||||||
|
var timelineTailPosition = x + period.end * ratio;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(timelineHeadPosition, 0);
|
||||||
|
ctx.lineTo(timelineHeadPosition, canvasHeight);
|
||||||
|
ctx.moveTo(timelineTailPosition, 0);
|
||||||
|
ctx.lineTo(timelineTailPosition, canvasHeight);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter for main events.
|
||||||
|
mainEvents = drawableEvents.filter(function(event) {
|
||||||
|
return ! isChildEvent(event)
|
||||||
|
});
|
||||||
|
|
||||||
|
// For each main event, draw the visual presentation of timelines.
|
||||||
|
mainEvents.forEach(function(event) {
|
||||||
|
|
||||||
|
h += 8;
|
||||||
|
|
||||||
|
// For each sub event, ...
|
||||||
|
event.periods.forEach(function(period) {
|
||||||
|
// Set the drawing style.
|
||||||
|
ctx.fillStyle = colors['default'];
|
||||||
|
ctx.strokeStyle = colors['default'];
|
||||||
|
|
||||||
|
if (colors[event.name]) {
|
||||||
|
ctx.fillStyle = colors[event.name];
|
||||||
|
ctx.strokeStyle = colors[event.name];
|
||||||
|
} else if (colors[event.category]) {
|
||||||
|
ctx.fillStyle = colors[event.category];
|
||||||
|
ctx.strokeStyle = colors[event.category];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw the timeline
|
||||||
|
var timelineHeadPosition = x + period.begin * ratio;
|
||||||
|
|
||||||
|
if ( ! isSectionEvent(event)) {
|
||||||
|
ctx.fillRect(timelineHeadPosition, h + 3, 2, 6);
|
||||||
|
ctx.fillRect(timelineHeadPosition, h, (period.end - period.begin) * ratio || 2, 6);
|
||||||
|
} else {
|
||||||
|
var timelineTailPosition = x + period.end * ratio;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(timelineHeadPosition, h);
|
||||||
|
ctx.lineTo(timelineHeadPosition, h + 11);
|
||||||
|
ctx.lineTo(timelineHeadPosition + 8, h);
|
||||||
|
ctx.lineTo(timelineHeadPosition, h);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(timelineTailPosition, h);
|
||||||
|
ctx.lineTo(timelineTailPosition, h + 11);
|
||||||
|
ctx.lineTo(timelineTailPosition - 8, h);
|
||||||
|
ctx.lineTo(timelineTailPosition, h);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(timelineHeadPosition, h);
|
||||||
|
ctx.lineTo(timelineTailPosition, h);
|
||||||
|
ctx.lineTo(timelineTailPosition, h + 2);
|
||||||
|
ctx.lineTo(timelineHeadPosition, h + 2);
|
||||||
|
ctx.lineTo(timelineHeadPosition, h);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
h += 30;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "#dfdfdf";
|
||||||
|
ctx.moveTo(0, h - 10);
|
||||||
|
ctx.lineTo(width, h - 10);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.stroke();
|
||||||
|
});
|
||||||
|
|
||||||
|
h = space;
|
||||||
|
|
||||||
|
// For each event, draw the label.
|
||||||
|
mainEvents.forEach(function(event) {
|
||||||
|
|
||||||
|
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;
|
||||||
|
ctx.fillText(ms, xc, h);
|
||||||
|
|
||||||
|
xc -= ctx.measureText(ms).width;
|
||||||
|
ctx.font = "12px sans-serif";
|
||||||
|
ctx.fillText(text, xc, h);
|
||||||
|
} else {
|
||||||
|
ctx.textAlign = "start";
|
||||||
|
ctx.font = "12px sans-serif";
|
||||||
|
xc = x + event.starttime * ratio + 1;
|
||||||
|
ctx.fillText(text, xc, h);
|
||||||
|
|
||||||
|
xc += ctx.measureText(text).width;
|
||||||
|
ctx.font = "10px sans-serif";
|
||||||
|
ctx.fillText(ms, xc, h);
|
||||||
|
}
|
||||||
|
|
||||||
|
h += gapPerEvent;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.drawAll = function(width, threshold)
|
||||||
|
{
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
width = width || getContainerWidth();
|
||||||
|
threshold = threshold || this.getThreshold();
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
_requests.forEach(function(request) {
|
||||||
|
self.drawOne(request, maxRequestTime, threshold, width);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.getThreshold = function() {
|
||||||
|
var threshold = localStorage.getItem(_storagePrefix + '/threshold');
|
||||||
|
|
||||||
|
if (threshold === null) {
|
||||||
|
return _threshold;
|
||||||
|
}
|
||||||
|
|
||||||
|
_threshold = parseInt(threshold);
|
||||||
|
|
||||||
|
return _threshold;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setThreshold = function(threshold)
|
||||||
|
{
|
||||||
|
_threshold = threshold;
|
||||||
|
|
||||||
|
localStorage.setItem(_storagePrefix + '/threshold', threshold);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function canvasAutoUpdateOnResizeAndSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
canvasManager.drawAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function canvasAutoUpdateOnThresholdChange(e) {
|
||||||
|
canvasManager
|
||||||
|
.setThreshold(query('input[name="threshold"]').value)
|
||||||
|
.drawAll();
|
||||||
}
|
}
|
||||||
|
|
||||||
var requests_data = {
|
var requests_data = {
|
||||||
@ -255,7 +389,31 @@
|
|||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
drawCanvases({{ width }});
|
var canvasManager = new CanvasManager(requests_data.requests, requests_data.max);
|
||||||
|
|
||||||
|
query('input[name="threshold"]').value = canvasManager.getThreshold();
|
||||||
|
canvasManager.drawAll();
|
||||||
|
|
||||||
|
// Update the colors of legends.
|
||||||
|
var timelineLegends = document.querySelectorAll('.sf-profiler-timeline > .legends > span[data-color]');
|
||||||
|
|
||||||
|
for (var i = 0; i < timelineLegends.length; ++i) {
|
||||||
|
var timelineLegend = timelineLegends[i];
|
||||||
|
|
||||||
|
timelineLegend.style.borderLeftColor = timelineLegend.getAttribute('data-color');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bind event handlers
|
||||||
|
var elementTimelineControl = query('#timeline-control'),
|
||||||
|
elementThresholdControl = query('input[name="threshold"]');
|
||||||
|
|
||||||
|
window.onresize = canvasAutoUpdateOnResizeAndSubmit;
|
||||||
|
elementTimelineControl.onsubmit = canvasAutoUpdateOnResizeAndSubmit;
|
||||||
|
|
||||||
|
elementThresholdControl.onclick = canvasAutoUpdateOnThresholdChange;
|
||||||
|
elementThresholdControl.onchange = canvasAutoUpdateOnThresholdChange;
|
||||||
|
elementThresholdControl.onkeyup = canvasAutoUpdateOnThresholdChange;
|
||||||
|
|
||||||
//]]></script>
|
//]]></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
@ -289,19 +447,13 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
{% macro display_timeline(id, events, threshold, colors, width) %}
|
{% macro display_timeline(id, events, colors) %}
|
||||||
{% set height = 0 %}
|
<div class="sf-profiler-timeline">
|
||||||
{% for name, event in events if '__section__' != name and event.totaltime >= threshold %}
|
<div class="legends">
|
||||||
{% set height = height + 38 %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<small>
|
|
||||||
{% for category, color in colors %}
|
{% for category, color in colors %}
|
||||||
<span style="background-color: {{ color }}"> </span> {{ category }}
|
<span data-color="{{ color }}">{{ category }}</span>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</small>
|
</div>
|
||||||
|
<canvas width="680" height="" id="{{ id }}" class="timeline"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<canvas width="{{ width }}" height="{{ height }}" id="{{ id }}" class="timeline"></canvas>
|
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
Reference in New Issue
Block a user