Working on an SVG version of the profiler request graph.

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.css.twig

@@ -0,0 +1,62 @@
+svg .label {
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: normal;
+    color: black;
+}
+
+svg .label .sublabel {
+    margin-left: 1em;
+    fill: grey;
+}
+
+svg .background {
+    fill: #fff;
+    stroke: #e0e0e0;
+}
+
+svg .border {
+    stroke: #e0e0e0;
+}
+
+/* Timeline periods */
+
+svg .default .period {
+    stroke: #777;
+    marker-start: url(#marker-default);
+}
+svg .section .period {
+    stroke: #999;
+    marker-start: url(#marker-section-start);
+    marker-end: url(#marker-section-end);
+}
+svg .event_listener .period {
+    stroke: #00B8F5;
+    marker-start: url(#marker-event_listener);
+}
+svg .template .period {
+    stroke: #66CC00;
+    marker-start: url(#marker-template);
+}
+svg .doctrine .period {
+    stroke: #FF6633;
+    marker-start: url(#marker-doctrine);
+}
+svg .messenger-middleware .period {
+    stroke: #BDB81E;
+    marker-start: url(#marker-messenger-middleware);
+}
+svg .controller-argument_value_resolver .period {
+    stroke: #8c5de6;
+    marker-start: url(#marker-controller-argument_value_resolver);
+}
+
+/* Markers */
+
+svg #marker-default { stroke: #777; }
+svg #marker-section-start, svg #marker-section-end { fill: #999; }
+svg #marker-event_listener { stroke: #00B8F5; }
+svg #marker-template { stroke: #66CC00; }
+svg #marker-doctrine { stroke: #FF6633; }
+svg #marker-messenger-middleware { stroke: #BDB81E; }
+svg #marker-controller-argument_value_resolver { stroke: #8c5de6; }

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig

@@ -14,7 +14,6 @@
     } %}
 {% endif %}
 
-
 {% block toolbar %}
     {% set has_time_events = collector.events|length > 0 %}
 
@@ -128,7 +127,7 @@
         </h3>
     {% endif %}
 
-    {{ helper.display_timeline('timeline_' ~ token, colors) }}
+    {{ helper.display_timeline(token, colors, collector.events) }}
 
     {% if profile.children|length %}
         <p class="help">Note: sections with a striped background correspond to sub-requests.</p>
@@ -142,10 +141,12 @@
                 <small>{{ events.__section__.duration }} ms</small>
             </h4>
 
-            {{ helper.display_timeline('timeline_' ~ child.token, colors) }}
+            {{ helper.display_timeline(child.token, colors, events) }}
         {% endfor %}
     {% endif %}
 
+
+
     <script>{% autoescape 'js' %}//<![CDATA[
         /**
          * In-memory key-value cache manager
@@ -513,51 +514,81 @@
         }, 50);
 
     //]]>{% endautoescape %}</script>
+<script>{% autoescape 'js' %}
+
+{% endautoescape %}</script>
+
+<script>{% autoescape 'js' %}{% include '@WebProfiler/Collector/time.js.twig' %}{% endautoescape %}</script>
 {% endblock %}
 
 {% macro dump_request_data(token, events, origin) %}
 {% autoescape 'js' %}
 {% from _self import dump_events %}
-                {
-                    "id": "{{ token }}",
-                    "left": {{ "%F"|format(events.__section__.origin - origin) }},
-                    "events": [
-{{ dump_events(events) }}
-                    ]
-                }
+{
+    id: "{{ token }}",
+    left: {{ "%F"|format(events.__section__.origin - origin) }},
+    events: [ {{ dump_events(events) }} ],
+},
 {% endautoescape %}
 {% endmacro %}
 
 {% macro dump_events(events) %}
 {% autoescape 'js' %}
 {% for name, event in events %}
 {% if '__section__' != name %}
-                        {
-                            "name": "{{ name }}",
-                            "category": "{{ event.category }}",
-                            "origin": {{ "%F"|format(event.origin) }},
-                            "starttime": {{ "%F"|format(event.starttime) }},
-                            "endtime": {{ "%F"|format(event.endtime) }},
-                            "duration": {{ "%F"|format(event.duration) }},
-                            "memory": {{ "%.1F"|format(event.memory / 1024 / 1024) }},
-                            "periods": [
-                                {%- for period in event.periods -%}
-                                    {"start": {{ "%F"|format(period.starttime) }}, "end": {{ "%F"|format(period.endtime) }}}{{ loop.last ? '' : ', ' }}
-                                {%- endfor -%}
-                            ]
-                        }{{ loop.last ? '' : ',' }}
+{
+    name: "{{ name }}",
+    category: "{{ event.category }}",
+    origin: {{ "%F"|format(event.origin) }},
+    starttime: {{ "%F"|format(event.starttime) }},
+    endtime: {{ "%F"|format(event.endtime) }},
+    duration: {{ "%F"|format(event.duration) }},
+    memory: {{ "%.1F"|format(event.memory / 1024 / 1024) }},
+    periods: [
+        {%- for period in event.periods -%}
+        {
+            start: {{ "%F"|format(period.starttime) }},
+            end: {{ "%F"|format(period.endtime) }}
+        },
+        {%- endfor -%}
+    ],
+},
 {% endif %}
 {% endfor %}
 {% endautoescape %}
 {% endmacro %}
 
-{% macro display_timeline(id, colors) %}
+{% macro display_timeline(token, colors, events) %}
+
+{% set classnames = {
+    'section': 'section',
+    'event_listener': 'event_listener',
+    'template': 'template',
+    'doctrine': 'doctrine',
+    'messenger.middleware': 'messenger-middleware',
+    'controller.argument_value_resolver': 'controller-argument_value_resolver',
+} %}
+
+{% import _self as helper %}
     <div class="sf-profiler-timeline">
         <div class="legends">
             {% for category, color in colors %}
-                <span data-color="{{ color }}">{{ category }}</span>
+                <span style="b-color: {{ color }};" data-color="{{ color }}">{{ category }}</span>
             {% endfor %}
         </div>
-        <canvas width="680" height="" id="{{ id }}" class="timeline"></canvas>
+        <canvas width="680" height="" id="timeline_{{ token }}" class="timeline"></canvas>
+        <svg style="width: 100%;" id="timeline-{{ token }}-svg" class="timeline">
+            <style type="text/css">{% autoescape 'css' %}{% include '@WebProfiler/Collector/time.css.twig' %}{% endautoescape %}</style>
+        </svg>
+        <script>{% autoescape 'js' %}
+            window.addEventListener('load', () => {
+                new TimelineEngine(
+                    new SvgRenderer(document.getElementById('timeline-{{ token }}-svg')),
+                    {{ helper.dump_request_data(token, events, events.__section__.origin) }}
+                    {{ '%F'|format(events.__section__.endtime) }},
+                    {{ classnames|json_encode|raw }}
+                );
+            });
+        {% endautoescape %}</script>
     </div>
 {% endmacro %}