diff --git a/front/src/css/timeline.css b/front/src/css/timeline.css index d79a3f8..9c3a0cd 100644 --- a/front/src/css/timeline.css +++ b/front/src/css/timeline.css @@ -52,6 +52,9 @@ bottom: 0; width: 100%; } +.timeline .interval .color.clickable { + cursor: pointer; +} .timeline div.interval:hover { background: #9C4274; } @@ -184,6 +187,15 @@ input.textFilter { .table > div.showingDetails > div { background: #f1c40f; } +.table > div.highlight > div.startTime { + background-color: #C0F090; +} +.table > div.highlight-remove { + transition: 3s; +} +.table > div.highlight-remove > div.startTime { + transition: background-color 3s ease-in; +} .table > div > .index { color: #bbb; word-break: normal; diff --git a/front/src/js/app.js b/front/src/js/app.js index 923e474..8a601df 100644 --- a/front/src/js/app.js +++ b/front/src/js/app.js @@ -1,6 +1,7 @@ var yltApp = angular.module('YellowLabTools', [ 'ngRoute', 'ngSanitize', + 'ngAnimate', 'indexCtrl', 'dashboardCtrl', 'queueCtrl', diff --git a/front/src/js/controllers/timelineCtrl.js b/front/src/js/controllers/timelineCtrl.js index 602129d..4351ae6 100644 --- a/front/src/js/controllers/timelineCtrl.js +++ b/front/src/js/controllers/timelineCtrl.js @@ -152,6 +152,24 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', initProfiler(); }; + $scope.findLineIndexByTimestamp = function(timestamp) { + var lineIndex = 0; + + for (var i = 0; i < $scope.executionTree.length; i ++) { + var delta = $scope.executionTree[i].data.timestamp - timestamp; + + if (delta < $scope.timelineIntervalDuration) { + lineIndex = i; + } + + if (delta > 0) { + break; + } + } + + return lineIndex; + }; + $scope.onNodeDetailsClick = function(node) { var isOpen = node.showDetails; if (!isOpen) { @@ -179,4 +197,28 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', loadResults(); -}]); \ No newline at end of file +}]); + +timelineCtrl.directive('scrollOnClick', ['$animate', '$timeout', function($animate, $timeout) { + return { + restrict: 'A', + link: function (scope, element, attributes) { + // When the user clicks on the timeline, find the right profiler line and scroll to it + element.on('click', function() { + var lineIndex = scope.findLineIndexByTimestamp(attributes.scrollOnClick); + var lineElement = angular.element(document.getElementById('line_' + lineIndex)); + + // Animate the background color to "flash" the row + lineElement.addClass('highlight'); + $timeout(function() { + $animate.removeClass(lineElement, 'highlight'); + scope.$digest(); + }, 50); + + + window.scrollTo(0, lineElement[0].offsetTop); + console.log(lineElement[0]); + }); + } + }; +}]); diff --git a/front/src/less/timeline.less b/front/src/less/timeline.less index 54dfcbe..dea012e 100644 --- a/front/src/less/timeline.less +++ b/front/src/less/timeline.less @@ -66,6 +66,10 @@ position: absolute; bottom: 0; width: 100%; + + &.clickable { + cursor: pointer; + } } .timeline div.interval:hover { background: #9C4274; @@ -206,6 +210,19 @@ input.textFilter { background: #f1c40f; } +.table > div.highlight { + > div.startTime { + background-color: #C0F090; + } +} +.table > div.highlight-remove { + transition: 3s; + + > div.startTime { + transition: background-color 3s ease-in; + } +} + .table > div > .index { color: #bbb; word-break: normal; diff --git a/front/src/main.html b/front/src/main.html index 083d943..ccc57e7 100644 --- a/front/src/main.html +++ b/front/src/main.html @@ -23,6 +23,7 @@ + diff --git a/front/src/views/timeline.html b/front/src/views/timeline.html index cd6f978..4a8c0bd 100644 --- a/front/src/views/timeline.html +++ b/front/src/views/timeline.html @@ -25,9 +25,11 @@ && $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domComplete, domComplete: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domComplete }"> -
+
-
Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms
+
+ Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms +
@@ -82,7 +84,7 @@ showingDetails: node.showDetails, jsError: node.error, windowPerformance: node.windowPerformance - }"> + }" id="line_{{$index}}">
{{$index + 1}}