From 35de0bdcf350e088e6fbd1c52f3b8177cf97b950 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Wed, 29 Oct 2014 00:25:28 +0100
Subject: [PATCH] Remove durations on profiling table and improve the timeline

---
 app/node_views/results.html       | 20 ++----------
 app/public/scripts/resultsCtrl.js | 52 +++++++++++++------------------
 2 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/app/node_views/results.html b/app/node_views/results.html
index e4ab907..c02bb68 100644
--- a/app/node_views/results.html
+++ b/app/node_views/results.html
@@ -724,8 +724,6 @@
             <h2>Javascript Profiler</h2>
             <p>
                 The table below shows the interactions between Javascript and the DOM. It is usefull to understand what's going on when the page loads.
-                <br>
-                The tool is slower than a real browser, so durations are a little exagerated.
             </p>
             <div class="filters">
                 <div>
@@ -733,11 +731,6 @@
                     Filter by
                     <input type="text" ng-model="textFilter" placeholder="search..." class="textFilter" ng-change="textFilterOn = true" />
                 </div>
-                <div>
-                    <input type="checkbox" ng-model="slowRequestsOn" id="slowRequests" />
-                    <label for="slowRequests">Requests slower than</label>
-                    <input type="number" value="5" min="0" ng-model="slowRequestsLimit" class="slowRequestsLimit"> ms
-                </div>
             </div>
             <div class="table">
 
@@ -747,18 +740,16 @@
                     <div>Type</div>
                     <div>Params</div>
                     <div><!-- details --></div>
-                    <div>Duration</div>
                     <div>Timestamp</div>
                 </div>
                 <div ng-repeat="node in javascript.children"
-                     ng-if="(!slowRequestsOn || node.data.time > slowRequestsLimit)
-                            && (!textFilterOn 
+                     ng-if="!textFilterOn 
                                 || !textFilter.length 
                                 || node.data.type.indexOf(textFilter) >= 0 
                                 || node.data.callDetails.arguments[0].indexOf(textFilter) >= 0
                                 || node.data.callDetails.arguments[1].indexOf(textFilter) >= 0
                                 || node.data.callDetails.arguments[2].indexOf(textFilter) >= 0
-                                || node.data.callDetails.arguments[3].indexOf(textFilter) >= 0)"
+                                || node.data.callDetails.arguments[3].indexOf(textFilter) >= 0"
                      ng-class="{
                                     showingDetails: node.data.showDetails,
                                     jsError: node.data.type == 'error' || node.data.type == 'jQuery version change',
@@ -835,12 +826,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="duration" ng-if="node.data.time != undefined">
-                        {{node.data.time}} ms
-                        <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" ng-class="node.data.loadingStep">{{node.data.timestamp | number: 0}}</div>
+                    <div class="startTime" ng-class="node.data.loadingStep">{{node.data.timestamp | number: 0}} ms</div>
                 </div>
             </div>
         </div>
diff --git a/app/public/scripts/resultsCtrl.js b/app/public/scripts/resultsCtrl.js
index ae27f8a..39520f2 100644
--- a/app/public/scripts/resultsCtrl.js
+++ b/app/public/scripts/resultsCtrl.js
@@ -90,8 +90,6 @@ app.controller('ResultsCtrl', function ($scope) {
     }
 
     function initJSTimelineView() {
-        $scope.slowRequestsOn = false;
-        $scope.slowRequestsLimit = 5;
 
         if (!$scope.javascript.children) {
             return;
@@ -129,45 +127,39 @@ app.controller('ResultsCtrl', function ($scope) {
         $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);
-
+        // Pre-fill array of as many elements as there are milleseconds
+        var millisecondsArray = Array.apply(null, new Array($scope.endTime + 1)).map(Number.prototype.valueOf,0);
+        
+        // Create the milliseconds array from the execution tree
         treeRunner($scope.javascript, function(node) {
             
-            if (node.data.time) {
-                
-                // If a node is between two intervals, split it. That's the meaning of the following dirty algorithm.
+            if (node.data.time !== undefined) {
 
-                var startInterval = Math.floor(node.data.timestamp / $scope.timelineIntervalDuration);
-                var endInterval = Math.floor((node.data.timestamp + node.data.time) / $scope.timelineIntervalDuration);
+                // Ignore artefacts (durations > 100ms)
+                var time = Math.min(node.data.time, 100) || 1;
 
-                if (startInterval === endInterval) {
-                    
-                    $scope.timeline[startInterval] += node.data.time;
-
-                } else {
-                    
-                    var timeToDispatch = node.data.time;
-                    
-                    var startIntervalPart = ((startInterval + 1) * $scope.timelineIntervalDuration) - node.data.timestamp;
-                    $scope.timeline[startInterval] += startIntervalPart;
-                    timeToDispatch -= startIntervalPart;
-                    
-                    var currentInterval = startInterval;
-                    while(currentInterval < endInterval && currentInterval + 1 < numberOfIntervals) {
-                        currentInterval ++;
-                        var currentIntervalPart = Math.min(timeToDispatch, $scope.timelineIntervalDuration);
-                        $scope.timeline[currentInterval] = currentIntervalPart;
-                        timeToDispatch -= currentIntervalPart;
-                    }
+                for (var i=node.data.timestamp, max=node.data.timestamp + time ; i<max ; i++) {
+                    millisecondsArray[i] |= 1;
                 }
             }
-            
+
             if (node.data.type !== 'main') {
                 // Don't check the children
                 return false;
             }
         });
+
+        // Pre-fill array of 200 elements
+        $scope.timeline = Array.apply(null, new Array(numberOfIntervals + 1)).map(Number.prototype.valueOf,0);
+
+        // Create the timeline from the milliseconds array
+        millisecondsArray.forEach(function(value, timestamp) {
+            if (value === 1) {
+                $scope.timeline[Math.floor(timestamp / $scope.timelineIntervalDuration)] += 1;
+            }
+        });
+        
+        // Get the maximum value of the array (needed for display)
         $scope.timelineMax = Math.max.apply(Math, $scope.timeline);
     }