From 839bfd4756d3ad9c0519cdf40fb0d16b894d721a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Fri, 13 Feb 2015 11:53:10 +0100 Subject: [PATCH 1/3] Use shorten-url for backtraces --- front/src/css/timeline.css | 1 + front/src/js/controllers/timelineCtrl.js | 28 ++++++++++++++---------- front/src/less/timeline.less | 1 + front/src/views/timeline.html | 2 +- 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/front/src/css/timeline.css b/front/src/css/timeline.css index 53d22e9..2621d27 100644 --- a/front/src/css/timeline.css +++ b/front/src/css/timeline.css @@ -173,6 +173,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..f1dc3b3 100644 --- a/front/src/js/controllers/timelineCtrl.js +++ b/front/src/js/controllers/timelineCtrl.js @@ -89,19 +89,25 @@ 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; } diff --git a/front/src/less/timeline.less b/front/src/less/timeline.less index 1f189fc..4c4b20d 100644 --- a/front/src/less/timeline.less +++ b/front/src/less/timeline.less @@ -191,6 +191,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..9eee05b 100644 --- a/front/src/views/timeline.html +++ b/front/src/views/timeline.html @@ -130,7 +130,7 @@
{{trace.fnName || '(anonymous)'}}
-
{{trace.fileName || 'HTML'}}:{{trace.line}}
+
:{{trace.line}}
can't find any backtrace :/
From f63fa9faf256614db7ea1ac0d4c24112cce321b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Fri, 13 Feb 2015 16:32:58 +0100 Subject: [PATCH 2/3] Filter timeline by script --- front/src/css/timeline.css | 13 ++++++++ front/src/js/controllers/timelineCtrl.js | 42 +++++++++++++++++++++--- front/src/less/timeline.less | 17 ++++++++++ front/src/views/timeline.html | 7 ++++ 4 files changed, 74 insertions(+), 5 deletions(-) diff --git a/front/src/css/timeline.css b/front/src/css/timeline.css index 2621d27..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; } diff --git a/front/src/js/controllers/timelineCtrl.js b/front/src/js/controllers/timelineCtrl.js index f1dc3b3..419e7b1 100644 --- a/front/src/js/controllers/timelineCtrl.js +++ b/front/src/js/controllers/timelineCtrl.js @@ -19,16 +19,48 @@ 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 && node.data.backtrace && + node.data.backtrace.indexOf($scope.selectedScript.fullPath + ':') === -1) { + 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 +73,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 @@ -112,8 +142,10 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', 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 4c4b20d..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; } diff --git a/front/src/views/timeline.html b/front/src/views/timeline.html index 9eee05b..cd6f978 100644 --- a/front/src/views/timeline.html +++ b/front/src/views/timeline.html @@ -1,5 +1,12 @@
+
+ Filter timeline and profiler by script: + +
+

Javascript Timeline

This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.

From 62602a88bc560c756fe0e63b95ee3a41d946997e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Wed, 18 Feb 2015 23:44:30 +0100 Subject: [PATCH 3/3] Remove jQuery from timeline when it's filtered --- front/src/js/controllers/timelineCtrl.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/front/src/js/controllers/timelineCtrl.js b/front/src/js/controllers/timelineCtrl.js index 419e7b1..602129d 100644 --- a/front/src/js/controllers/timelineCtrl.js +++ b/front/src/js/controllers/timelineCtrl.js @@ -57,9 +57,13 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', originalExecutions.forEach(function(node) { // Filter by script (if enabled) - if ($scope.selectedScript && node.data.backtrace && - node.data.backtrace.indexOf($scope.selectedScript.fullPath + ':') === -1) { - return; + 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