Improve timeline legend

app/node_views/results.html

@@ -122,24 +122,36 @@
             </p>
             <div class="timeline">
                 <div class="chart">
-                    <div ng-repeat="duration in timeline track by $index"
-                         class="interval"
-                         ng-class="{
-                                    domCreation: $index * timelineIntervalDuration < phantomasResults.metrics.domInteractive,
-                                    domContentLoaded: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoaded
-                                                    && $index * timelineIntervalDuration < phantomasResults.metrics.domContentLoadedEnd,
-                                    domContentLoadedEnd: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoadedEnd
-                                                    && $index * timelineIntervalDuration < phantomasResults.metrics.domComplete,
-                                    domComplete: $index * timelineIntervalDuration >= phantomasResults.metrics.domComplete
-                         }">
-                        <div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
+                    <div class="chartPoints">
+                        <div ng-repeat="duration in timeline track by $index"
+                             class="interval"
+                             ng-class="{
+                                        domCreation: $index * timelineIntervalDuration < phantomasResults.metrics.domInteractive,
+                                        domContentLoaded: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoaded
+                                                        && $index * timelineIntervalDuration < phantomasResults.metrics.domContentLoadedEnd,
+                                        domContentLoadedEnd: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoadedEnd
+                                                        && $index * timelineIntervalDuration < phantomasResults.metrics.domComplete,
+                                        domComplete: $index * timelineIntervalDuration >= phantomasResults.metrics.domComplete
+                             }">
+                            <div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
+                        </div>
                     </div>
+                    <div class="startTime">0 ms</div>
+                    <div class="endTime">{{endTime}} ms</div>
                 </div>
                 <div class="legend">
-                    <div class="domCreation"><div class="color"></div>DOM creation</div>
-                    <div class="domContentLoaded"><div class="color"></div>DOM content loaded event</div>
-                    <div class="domContentLoadedEnd"><div class="color"></div>Page completion</div>
-                    <div class="domComplete"><div class="color"></div>Page is complete</div>
+                    <div class="titles">
+                        <div class="domCreation"><div class="color"></div>DOM creation</div>
+                        <div class="domContentLoaded"><div class="color"></div>DOM content loaded event</div>
+                        <div class="domContentLoadedEnd"><div class="color"></div>Page completion</div>
+                        <div class="domComplete"><div class="color"></div>Page is complete</div>
+                    </div>
+                    <div class="tips">
+                        <div>Executing Javascript and DOM queries here is a <b>bad practice</b> and slows down the DOM construction.</div>
+                        <div>Also known as "document ready". This is where you should execute <b>top-priority</b> scripts, like binding action buttons or launch a video player.</div>
+                        <div>Here you can execute <b>mid-priority</b> tasks. Loading a script with createElement('script') is one way to do so.</div>
+                        <div>The page is fully loaded, it's time for low <b>priority things</b> : trackers, social plugins, easter egg...</div>
+                    </div>
                 </div>
             </div>
 

app/public/scripts/resultsCtrl.js

@@ -226,8 +226,8 @@ app.controller('ResultsCtrl', function ($scope) {
         // Split the timeline into 200 intervals
         var numberOfIntervals = 200;
         var lastEvent = $scope.javascript.children[$scope.javascript.children.length - 1];
-        var endTime =  lastEvent.data.timestamp + (lastEvent.data.time || 0);
-        $scope.timelineIntervalDuration = endTime / numberOfIntervals;
+        $scope.endTime =  lastEvent.data.timestamp + (lastEvent.data.time || 0);
+        $scope.timelineIntervalDuration = $scope.endTime / numberOfIntervals;
         
         // Pre-filled array of 100 elements
         $scope.timeline = Array.apply(null, new Array(numberOfIntervals)).map(Number.prototype.valueOf,0);

app/public/styles/results.css

@@ -119,10 +119,26 @@ h4 {
     margin: 2em 0 5em;
 }
 .timeline .chart {
-    height: 100px;
+    position: relative;
     width: 100%;
     border-bottom: 1px solid #000;
 }
+.timeline .startTime, .timeline .endTime {
+    position: absolute;
+    bottom: 0.5em;
+    font-size: 0.8em;
+}
+.timeline .startTime {
+    left: 0em;
+}
+.timeline .endTime {
+    right: 0em;
+}
+.timeline .chartPoints {
+    height: 100px;
+    width: 99%;
+    margin: 0 auto;
+}
 .timeline .interval {
     position: relative;
     display: inline-block;
@@ -161,11 +177,24 @@ h4 {
 .timeline .legend {
     display: table;
     width: 100%;
+    margin-top: 1em;
 }
 .timeline .legend > div {
+    display: table-row;
+}
+.timeline .legend > div > div {
     display: table-cell;
     margin-top: 1em;
 }
+.timeline .titles {
+    font-weight: bold;
+}
+.timeline .tips {
+    font-size: 0.7em;
+}
+.timeline .tips > div {
+    padding: 1em 1.5em;
+}
 .timeline .legend .color {
     display: inline-block;
     position: relative;
@@ -173,7 +202,7 @@ h4 {
     height: 1.5em;
     width: 1.5em;
     border-radius: 0.2em;
-    margin: 0 0.2em 0 1em;
+    margin: 0 0.4em 0 1em;
 }