Improved the design of the metrics in the profiler

Author: javiereguiluz

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

@@ -60,10 +60,19 @@
             <span class="label">Symfony initialization</span>
         </div>
 
+        {% if profile.collectors.memory %}
+            <div class="metric">
+                <span class="value">{{ '%.2f'|format(profile.collectors.memory.memory / 1024 / 1024) }} <span class="unit">MB</span></span>
+                <span class="label">Peak memory usage</span>
+            </div>
+        {% endif %}
+
         {% if profile.children|length > 0 %}
+            <div class="metric-divider"></div>
+
             <div class="metric">
                 <span class="value">{{ profile.children|length }}</span>
-                <span class="label">Sub-Requests</span>
+                <span class="label">Sub-Request{{ profile.children|length > 1 ? 's' }}</span>
             </div>
 
             {% set subrequests_time = 0 %}
@@ -73,14 +82,7 @@
 
             <div class="metric">
                 <span class="value">{{ subrequests_time }} <span class="unit">ms</span></span>
-                <span class="label">Sub-Requests time</span>
-            </div>
-        {% endif %}
-
-        {% if profile.collectors.memory %}
-            <div class="metric">
-                <span class="value">{{ '%.2f'|format(profile.collectors.memory.memory / 1024 / 1024) }} <span class="unit">MB</span></span>
-                <span class="label">Peak memory usage</span>
+                <span class="label">Sub-Request{{ profile.children|length > 1 ? 's' }} time</span>
             </div>
         {% endif %}
     </div>

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

@@ -250,12 +250,12 @@ table tbody ul {
 {# Metrics
    ------------------------------------------------------------------------- #}
 .metrics {
-    margin: 1em 0;
+    margin: 1em 0 0;
     overflow: auto;
 }
 .metrics .metric {
     float: left;
-    margin-right: 1em;
+    margin: 0 1em 1em 0;
 }
 
 .metric {
@@ -310,6 +310,12 @@ table tbody ul {
     vertical-align: middle;
 }
 
+.metric-divider {
+    float: left;
+    margin: 0 1em;
+    min-height: 1px; {# required to apply 'margin' to an empty 'div' #}
+}
+
 {# Cards
    ------------------------------------------------------------------------- #}
 .card {