Skip to content
This repository
Browse code

[WebProfilerBundle] Tweak the time view

  • Loading branch information...
commit d4300b95a563e39be0f8746a15cb0668e9e47374 1 parent 416a2a4
Victor Berchet authored January 25, 2012
239  src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig
@@ -48,7 +48,7 @@
48 48
             </tr>
49 49
             <tr>
50 50
                 <th>Threshold</th>
51  
-                <td><input type="number" size="3" name="threshold" value="{{ threshold }}" /> ms</td>
  51
+                <td><input type="number" size="3" name="threshold" value="{{ threshold }}" min="0" /> ms</td>
52 52
             </tr>
53 53
             <tr>
54 54
                 <th>Width</th>
@@ -87,174 +87,163 @@
87 87
         {% endfor %}
88 88
     {% endif %}
89 89
 
90  
-    <script type="text/javascript">
  90
+    <script type="text/javascript">//<![CDATA[
91 91
         function drawCanvas(request, max, threshold, width) {
92  
-            var colors = {
93  
-                {% for name, color in colors %}
94  
-                    "{{ name }}": "{{ color }}"{{ loop.last ? '' : ', ' }}
95  
-                {% endfor %}
96  
-            };
97  
-            var space = 10.5;
98  
-            var ratio = (width - space * 2) / max;
99  
-            var height = 0;
100  
-            for (i = 0; i < request.events.length; i++) {
101  
-                if (request.events[i].totaltime < threshold) {
102  
-                    continue;
  92
+            "use strict";
  93
+            var text,
  94
+                ms,
  95
+                xc,
  96
+                colors = {{ colors|json_encode|raw }},
  97
+                space = 10.5,
  98
+                ratio = (width - space * 2) / max,
  99
+                height = 0,
  100
+                h = space,
  101
+                x = request.left * ratio + space,
  102
+                canvas = document.getElementById('timeline_' + request.id),
  103
+                ctx = canvas.getContext("2d");
  104
+
  105
+            request.events.forEach(function(event) {
  106
+                if (event.totaltime >= threshold) {
  107
+                    height += 38;
103 108
                 }
  109
+            });
104 110
 
105  
-                height = height + 38;
106  
-            }
107  
-            var h = space;
108  
-            var x = request.left * ratio + space;
109  
-
110  
-            var canvas = document.getElementById('timeline_' + request.id);
111 111
             canvas.width = width;
  112
+            ctx.textBaseline = "middle";
  113
+            ctx.lineWidth = 0;
112 114
 
113  
-            var context = canvas.getContext("2d");
114  
-            context.textBaseline = "middle";
115  
-            context.lineWidth = 0;
116  
-
117  
-            for (i = 0; i < request.events.length; i++) {
118  
-                var event = request.events[i];
  115
+            request.events.forEach(function(event) {
119 116
 
120 117
                 if (event.totaltime < threshold) {
121  
-                    continue;
  118
+                    return;
122 119
                 }
123 120
 
124  
-                for (j = 0; j < event.periods.length; j++) {
125  
-                    var period = event.periods[j];
126  
-
127  
-                    if ('section.child' == event.name) {
128  
-                        context.fillStyle = colors.child_sections;
129  
-                        context.fillRect(x + period.begin * ratio, 0, (period.end - period.begin) * ratio, height);
130  
-                    } else if ('section' == event.category) {
131  
-                        context.beginPath();
132  
-                        context.strokeStyle = "#dfdfdf";
133  
-                        context.moveTo(x + period.begin * ratio, 0);
134  
-                        context.lineTo(x + period.begin * ratio, height);
135  
-                        context.moveTo(x + period.end * ratio, 0);
136  
-                        context.lineTo(x + period.end * ratio, height);
137  
-                        context.fill();
138  
-                        context.closePath();
139  
-                        context.stroke();
  121
+                event.periods.forEach(function(period) {
  122
+
  123
+                    if ('section.child' === event.name) {
  124
+                        ctx.fillStyle = colors.child_sections;
  125
+                        ctx.fillRect(x + period.begin * ratio, 0, (period.end - period.begin) * ratio, height);
  126
+                    } else if ('section' === event.category) {
  127
+                        ctx.beginPath();
  128
+                        ctx.strokeStyle = "#dfdfdf";
  129
+                        ctx.moveTo(x + period.begin * ratio, 0);
  130
+                        ctx.lineTo(x + period.begin * ratio, height);
  131
+                        ctx.moveTo(x + period.end * ratio, 0);
  132
+                        ctx.lineTo(x + period.end * ratio, height);
  133
+                        ctx.fill();
  134
+                        ctx.closePath();
  135
+                        ctx.stroke();
140 136
                     }
141  
-                }
142  
-            }
  137
+                });
  138
+            });
143 139
 
144  
-            for (i = 0; i < request.events.length; i++) {
145  
-                var event = request.events[i];
  140
+            request.events.forEach(function(event) {
146 141
 
147  
-                if (event.totaltime < threshold || 'section.child' == event.name) {
148  
-                    continue;
  142
+                if (event.totaltime < threshold || 'section.child' === event.name) {
  143
+                    return;
149 144
                 }
150 145
 
151 146
                 h += 8;
152 147
 
153  
-                for (j = 0; j < event.periods.length; j++) {
154  
-                    var period = event.periods[j];
  148
+                event.periods.forEach(function(period) {
155 149
 
156 150
                     if (colors[event.name]) {
157  
-                        context.fillStyle = colors[event.name];
158  
-                        context.strokeStyle = colors[event.name];
  151
+                        ctx.fillStyle = colors[event.name];
  152
+                        ctx.strokeStyle = colors[event.name];
159 153
                     } else if (colors[event.category]) {
160  
-                        context.fillStyle = colors[event.category];
161  
-                        context.strokeStyle = colors[event.category];
  154
+                        ctx.fillStyle = colors[event.category];
  155
+                        ctx.strokeStyle = colors[event.category];
162 156
                     } else {
163  
-                        context.fillStyle = colors.default;
164  
-                        context.strokeStyle = colors.default;
  157
+                        ctx.fillStyle = colors['default'];
  158
+                        ctx.strokeStyle = colors['default'];
165 159
                     }
166 160
 
167  
-                    if ('section' != event.category) {
168  
-                        context.fillRect(x + period.begin * ratio, h + 3, 2, 6);
169  
-                        context.fillRect(x + period.begin * ratio, h, (period.end - period.begin) * ratio ? (period.end - period.begin) * ratio : 2, 6);
  161
+                    if ('section' !== event.category) {
  162
+                        ctx.fillRect(x + period.begin * ratio, h + 3, 2, 6);
  163
+                        ctx.fillRect(x + period.begin * ratio, h, (period.end - period.begin) * ratio || 2, 6);
170 164
                     } else {
171  
-                        context.beginPath();
172  
-                        context.moveTo(x + period.begin * ratio, h);
173  
-                        context.lineTo(x + period.begin * ratio, h + 11);
174  
-                        context.lineTo(x + period.begin * ratio + 8, h);
175  
-                        context.lineTo(x + period.begin * ratio, h);
176  
-                        context.fill();
177  
-                        context.closePath();
178  
-                        context.stroke();
179  
-
180  
-                        context.beginPath();
181  
-                        context.moveTo(x + period.end * ratio, h);
182  
-                        context.lineTo(x + period.end * ratio, h + 11);
183  
-                        context.lineTo(x + period.end * ratio - 8, h);
184  
-                        context.lineTo(x + period.end * ratio, h);
185  
-                        context.fill();
186  
-                        context.closePath();
187  
-                        context.stroke();
188  
-
189  
-                        context.beginPath();
190  
-                        context.moveTo(x + period.begin * ratio, h);
191  
-                        context.lineTo(x + period.end * ratio, h);
192  
-                        context.lineTo(x + period.end * ratio, h + 2);
193  
-                        context.lineTo(x + period.begin * ratio, h + 2);
194  
-                        context.lineTo(x + period.begin * ratio, h);
195  
-                        context.fill();
196  
-                        context.closePath();
197  
-                        context.stroke();
  165
+                        ctx.beginPath();
  166
+                        ctx.moveTo(x + period.begin * ratio, h);
  167
+                        ctx.lineTo(x + period.begin * ratio, h + 11);
  168
+                        ctx.lineTo(x + period.begin * ratio + 8, h);
  169
+                        ctx.lineTo(x + period.begin * ratio, h);
  170
+                        ctx.fill();
  171
+                        ctx.closePath();
  172
+                        ctx.stroke();
  173
+
  174
+                        ctx.beginPath();
  175
+                        ctx.moveTo(x + period.end * ratio, h);
  176
+                        ctx.lineTo(x + period.end * ratio, h + 11);
  177
+                        ctx.lineTo(x + period.end * ratio - 8, h);
  178
+                        ctx.lineTo(x + period.end * ratio, h);
  179
+                        ctx.fill();
  180
+                        ctx.closePath();
  181
+                        ctx.stroke();
  182
+
  183
+                        ctx.beginPath();
  184
+                        ctx.moveTo(x + period.begin * ratio, h);
  185
+                        ctx.lineTo(x + period.end * ratio, h);
  186
+                        ctx.lineTo(x + period.end * ratio, h + 2);
  187
+                        ctx.lineTo(x + period.begin * ratio, h + 2);
  188
+                        ctx.lineTo(x + period.begin * ratio, h);
  189
+                        ctx.fill();
  190
+                        ctx.closePath();
  191
+                        ctx.stroke();
198 192
                     }
199  
-                }
  193
+                });
200 194
 
201 195
                 h += 30;
202 196
 
203  
-                context.beginPath();
204  
-                context.strokeStyle = "#dfdfdf";
205  
-                context.moveTo(0, h - 10);
206  
-                context.lineTo(width, h - 10);
207  
-                context.closePath();
208  
-                context.stroke();
209  
-            }
  197
+                ctx.beginPath();
  198
+                ctx.strokeStyle = "#dfdfdf";
  199
+                ctx.moveTo(0, h - 10);
  200
+                ctx.lineTo(width, h - 10);
  201
+                ctx.closePath();
  202
+                ctx.stroke();
  203
+            });
210 204
 
211 205
             h = space;
212 206
 
213  
-            for (i = 0; i < request.events.length; i++) {
214  
-                var event = request.events[i];
  207
+            request.events.forEach(function(event) {
215 208
 
216  
-                if (event.totaltime < threshold || 'section.child' == event.name) {
217  
-                    continue;
  209
+                if (event.totaltime < threshold || 'section.child' === event.name) {
  210
+                    return;
218 211
                 }
219 212
 
220  
-                context.fillStyle = "#444";
221  
-                context.font = "12px sans-serif";
222  
-                var text = event.name;
223  
-                var ms;
224  
-                if (event.totaltime < 1) {
225  
-                    ms = " ~ " + event.totaltime + " ms";
226  
-                } else {
227  
-                    ms = " ~ " + parseInt(event.totaltime) + " ms";
228  
-                }
229  
-                if (x + event.starttime * ratio + context.measureText(text + ms).width > width) {
230  
-                    context.textAlign = "end";
231  
-                    context.font = "10px sans-serif";
  213
+                ctx.fillStyle = "#444";
  214
+                ctx.font = "12px sans-serif";
  215
+                text = event.name;
  216
+                ms = " ~ " + (event.totaltime < 1 ? event.totaltime : parseInt(event.totaltime, 10)) + " ms";
  217
+                if (x + event.starttime * ratio + ctx.measureText(text + ms).width > width) {
  218
+                    ctx.textAlign = "end";
  219
+                    ctx.font = "10px sans-serif";
232 220
                     xc = x + event.endtime * ratio - 1;
233  
-                    context.fillText(ms, xc, h);
  221
+                    ctx.fillText(ms, xc, h);
234 222
 
235  
-                    xc = xc - context.measureText(ms).width
236  
-                    context.font = "12px sans-serif";
237  
-                    context.fillText(text, xc, h);
  223
+                    xc -= ctx.measureText(ms).width;
  224
+                    ctx.font = "12px sans-serif";
  225
+                    ctx.fillText(text, xc, h);
238 226
                 } else {
239  
-                    context.textAlign = "start";
240  
-                    context.font = "12px sans-serif";
  227
+                    ctx.textAlign = "start";
  228
+                    ctx.font = "12px sans-serif";
241 229
                     xc = x + event.starttime * ratio + 1;
242  
-                    context.fillText(text, xc, h);
  230
+                    ctx.fillText(text, xc, h);
243 231
 
244  
-                    xc = xc + context.measureText(text).width;
245  
-                    context.font = "10px sans-serif";
246  
-                    context.fillText(ms, xc, h);
  232
+                    xc += ctx.measureText(text).width;
  233
+                    ctx.font = "10px sans-serif";
  234
+                    ctx.fillText(ms, xc, h);
247 235
                 }
248 236
 
249 237
                 h += 38;
250  
-            }
  238
+            });
251 239
         }
252 240
 
253 241
         function drawCanvases(width)
254 242
         {
255  
-            for (k = 0; k < requests_data.requests.length; k++) {
256  
-                drawCanvas(requests_data.requests[k], requests_data.max, {{ threshold }}, width);
257  
-            }
  243
+            "use strict";
  244
+            requests_data.requests.forEach(function(request) {
  245
+                drawCanvas(request, requests_data.max, {{ threshold }}, width);
  246
+            });
258 247
         }
259 248
 
260 249
         var requests_data = {
@@ -272,7 +261,7 @@
272 261
         };
273 262
 
274 263
         drawCanvases({{ width }});
275  
-    </script>
  264
+    //]]></script>
276 265
 {% endblock %}
277 266
 
278 267
 {% macro dump_request_data(token, profile, events, origin) %}

0 notes on commit d4300b9

Please sign in to comment.
Something went wrong with that request. Please try again.