diff --git a/front/src/css/timeline.css b/front/src/css/timeline.css index 53d22e9..d79a3f8 100644 --- a/front/src/css/timeline.css +++ b/front/src/css/timeline.css @@ -2,6 +2,19 @@ .execution { text-align: center; } +.selectScript { + padding-bottom: 2em; + font-size: 0.9em; +} +.selectScript select { + max-width: 30em; +} +.selectScript.empty { + font-size: 0.8em; +} +.selectScript.empty select { + width: 10em; +} .timeline { margin: 2em 0 5em; } @@ -173,6 +186,7 @@ input.textFilter { } .table > div > .index { color: #bbb; + word-break: normal; } .table > div > .type { white-space: nowrap; diff --git a/front/src/js/controllers/timelineCtrl.js b/front/src/js/controllers/timelineCtrl.js index 6ea6a0c..602129d 100644 --- a/front/src/js/controllers/timelineCtrl.js +++ b/front/src/js/controllers/timelineCtrl.js @@ -19,16 +19,52 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', } function render() { + initScriptFiltering(); initExecutionTree(); initTimeline(); $timeout(initProfiler, 100); } + function initScriptFiltering() { + var offenders = $scope.result.rules.jsCount.offendersObj.list; + $scope.scripts = []; + + offenders.forEach(function(script) { + var filePath = script.file; + + if (filePath.length > 100) { + filePath = filePath.substr(0, 98) + '...'; + } + + var scriptObj = { + fullPath: script.file, + shortPath: filePath + }; + + $scope.scripts.push(scriptObj); + }); + } + function initExecutionTree() { var originalExecutions = $scope.result.javascriptExecutionTree.children || []; - $scope.executionTree = []; + + // Detect the last event of all (before filtering) and read time + var lastEvent = originalExecutions[originalExecutions.length - 1]; + $scope.endTime = lastEvent.data.timestamp + (lastEvent.data.time || 0); + // Filter and calculate the search index + $scope.executionTree = []; originalExecutions.forEach(function(node) { + + // Filter by script (if enabled) + if ($scope.selectedScript) { + if (node.data.backtrace && node.data.backtrace.indexOf($scope.selectedScript.fullPath + ':') === -1) { + return; + } + if (node.data.type === "jQuery loaded" || node.data.type === "jQuery version change") { + return; + } + } // Prepare a faster angular search by creating a kind of search index node.searchIndex = (node.data.callDetails) ? [node.data.type].concat(node.data.callDetails.arguments).join('°°') : node.data.type; @@ -41,8 +77,6 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', // Split the timeline into 200 intervals var numberOfIntervals = 199; - var lastEvent = $scope.executionTree[$scope.executionTree.length - 1]; - $scope.endTime = lastEvent.data.timestamp + (lastEvent.data.time || 0); $scope.timelineIntervalDuration = $scope.endTime / numberOfIntervals; // Pre-fill array of as many elements as there are milleseconds @@ -89,25 +123,33 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', var out = []; var splited = str.split(' / '); splited.forEach(function(trace) { - var result = /^(\S*)\s?\(?(https?:\/\/\S+):(\d+)\)?$/g.exec(trace); - if (result && result[2].length > 0) { - var filePath = result[2]; - var chunks = filePath.split('/'); - var fileName = chunks[chunks.length - 1]; + var fnName = null, fileAndLine; - out.push({ - fnName: result[1], - fileName: fileName, - filePath: filePath, - line: result[3] - }); + var withFnResult = /^([^\s\(]+) \((.+:\d+)\)$/.exec(trace); + if (withFnResult === null) { + fileAndLine = trace; + } else { + fnName = withFnResult[1]; + fileAndLine = withFnResult[2]; } + + var fileAndLineSplit = /^(.*):(\d+)$/.exec(fileAndLine); + var filePath = fileAndLineSplit[1]; + var line = fileAndLineSplit[2]; + + out.push({ + fnName: fnName, + filePath: filePath, + line: line + }); }); return out; } - $scope.filter = function(textFilter, scriptName) { - + $scope.changeScript = function() { + initExecutionTree(); + initTimeline(); + initProfiler(); }; $scope.onNodeDetailsClick = function(node) { diff --git a/front/src/less/timeline.less b/front/src/less/timeline.less index 1f189fc..54dfcbe 100644 --- a/front/src/less/timeline.less +++ b/front/src/less/timeline.less @@ -14,6 +14,23 @@ text-align: center; } +.selectScript { + padding-bottom: 2em; + font-size: 0.9em; + + select { + max-width: 30em; + } + + &.empty { + font-size: 0.8em; + + select { + width: 10em; + } + } +} + .timeline { margin: 2em 0 5em; } @@ -191,6 +208,7 @@ input.textFilter { .table > div > .index { color: #bbb; + word-break: normal; } .table > div > .type { diff --git a/front/src/views/timeline.html b/front/src/views/timeline.html index 33bbedd..cd6f978 100644 --- a/front/src/views/timeline.html +++ b/front/src/views/timeline.html @@ -1,5 +1,12 @@
This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.
@@ -130,7 +137,7 @@