Improve timeline

app/node_views/results.html

@@ -134,10 +134,13 @@
                                         domComplete: $index * timelineIntervalDuration >= phantomasResults.metrics.domComplete
                              }">
                             <div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
+                            <div class="tooltip detailsOverlay">
+                                <div>Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms</div>
+                            </div>
                         </div>
                     </div>
                     <div class="startTime">0 ms</div>
-                    <div class="endTime">{{endTime}} ms</div>
+                    <div class="endTime">{{endTime | number: 0}} ms</div>
                 </div>
                 <div class="legend">
                     <div class="titles">
@@ -272,7 +275,7 @@
                         <span ng-if="node.data.time > slowRequestsLimit" class="icon-warning" title="Slower than {{slowRequestsLimit}} ms"></span>
                     </div>
                     <div class="duration" ng-if="node.data.time == undefined"></div>
-                    <div class="startTime">{{node.data.timestamp}}</div>
+                    <div class="startTime">{{node.data.timestamp | number: 0}}</div>
                 </div>
             </div>
         </div>

app/public/styles/results.css

@@ -145,11 +145,17 @@ h4 {
     height: 100px;
     width: 0.5%;
 }
-.timeline .interval > div {
+.timeline .interval .color {
     position: absolute;
     bottom: 0;
     width: 100%;
 }
+.timeline div.interval:hover {
+    background: #9C4274;
+}
+.timeline .interval:hover .color {
+    background: #F04DA7;
+}
 .timeline .domComplete.interval {
     background: #EDE3FF;
 }
@@ -174,6 +180,17 @@ h4 {
 .timeline .domCreation .color {
     background: #FF6600;
 }
+.timeline .tooltip.detailsOverlay {
+    position: absolute;
+    display: none;
+    width: auto;
+    padding: 0.5em 1em;
+    top: 1em;
+    right: 1em;
+}
+.timeline .interval:hover .tooltip {
+    display: block;
+}
 
 .timeline .legend {
     display: table;