WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve timeline legend

Browse Source
This commit is contained in:
Gaël Métais
2014-09-11 18:59:34 +02:00
parent 2074618fd5
commit d2055287cc
3 changed files with 60 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/node_views/results.html
+27 -15
View File
@@ -122,24 +122,36 @@
</p>
<div class="timeline">
<div class="chart">
<div ng-repeat="duration in timeline track by $index"
class="interval"
ng-class="{
domCreation: $index * timelineIntervalDuration < phantomasResults.metrics.domInteractive,
domContentLoaded: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoaded
&& $index * timelineIntervalDuration < phantomasResults.metrics.domContentLoadedEnd,
domContentLoadedEnd: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoadedEnd
&& $index * timelineIntervalDuration < phantomasResults.metrics.domComplete,
domComplete: $index * timelineIntervalDuration >= phantomasResults.metrics.domComplete
}">
<div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
<div class="chartPoints">
<div ng-repeat="duration in timeline track by $index"
class="interval"
ng-class="{
domCreation: $index * timelineIntervalDuration < phantomasResults.metrics.domInteractive,
domContentLoaded: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoaded
&& $index * timelineIntervalDuration < phantomasResults.metrics.domContentLoadedEnd,
domContentLoadedEnd: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoadedEnd
&& $index * timelineIntervalDuration < phantomasResults.metrics.domComplete,
domComplete: $index * timelineIntervalDuration >= phantomasResults.metrics.domComplete
}">
<div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
</div>
</div>
<div class="startTime">0 ms</div>
<div class="endTime">{{endTime}} ms</div>
</div>
<div class="legend">
<div class="domCreation"><div class="color"></div>DOM creation</div>
<div class="domContentLoaded"><div class="color"></div>DOM content loaded event</div>
<div class="domContentLoadedEnd"><div class="color"></div>Page completion</div>
<div class="domComplete"><div class="color"></div>Page is complete</div>
<div class="titles">
<div class="domCreation"><div class="color"></div>DOM creation</div>
<div class="domContentLoaded"><div class="color"></div>DOM content loaded event</div>
<div class="domContentLoadedEnd"><div class="color"></div>Page completion</div>
<div class="domComplete"><div class="color"></div>Page is complete</div>
</div>
<div class="tips">
<div>Executing Javascript and DOM queries here is a <b>bad practice</b> and slows down the DOM construction.</div>
<div>Also known as "document ready". This is where you should execute <b>top-priority</b> scripts, like binding action buttons or launch a video player.</div>
<div>Here you can execute <b>mid-priority</b> tasks. Loading a script with createElement('script') is one way to do so.</div>
<div>The page is fully loaded, it's time for low <b>priority things</b> : trackers, social plugins, easter egg...</div>
</div>
</div>
</div>
app/public/scripts/resultsCtrl.js
+2 -2
View File
@@ -226,8 +226,8 @@ app.controller('ResultsCtrl', function ($scope) {
// Split the timeline into 200 intervals
var numberOfIntervals = 200;
var lastEvent = $scope.javascript.children[$scope.javascript.children.length - 1];
var endTime = lastEvent.data.timestamp + (lastEvent.data.time || 0);
$scope.timelineIntervalDuration = endTime / numberOfIntervals;
$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);
app/public/styles/results.css
+31 -2
View File
@@ -119,10 +119,26 @@ h4 {
margin: 2em 0 5em;
}
.timeline .chart {
height: 100px;
position: relative;
width: 100%;
border-bottom: 1px solid #000;
}
.timeline .startTime, .timeline .endTime {
position: absolute;
bottom: 0.5em;
font-size: 0.8em;
}
.timeline .startTime {
left: 0em;
}
.timeline .endTime {
right: 0em;
}
.timeline .chartPoints {
height: 100px;
width: 99%;
margin: 0 auto;
}
.timeline .interval {
position: relative;
display: inline-block;
@@ -161,11 +177,24 @@ h4 {
.timeline .legend {
display: table;
width: 100%;
margin-top: 1em;
}
.timeline .legend > div {
display: table-row;
}
.timeline .legend > div > div {
display: table-cell;
margin-top: 1em;
}
.timeline .titles {
font-weight: bold;
}
.timeline .tips {
font-size: 0.7em;
}
.timeline .tips > div {
padding: 1em 1.5em;
}
.timeline .legend .color {
display: inline-block;
position: relative;
@@ -173,7 +202,7 @@ h4 {
height: 1.5em;
width: 1.5em;
border-radius: 0.2em;
margin: 0 0.2em 0 1em;
margin: 0 0.4em 0 1em;
}