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

Improve timeline

Browse Source
This commit is contained in:
Gaël Métais
2014-09-12 10:19:41 +02:00
parent 3d7ac45e28
commit aa9ba625a1
2 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/node_views/results.html
+5 -2
View File
@@ -134,10 +134,13 @@
domComplete: $index * timelineIntervalDuration >= phantomasResults.metrics.domComplete domComplete: $index * timelineIntervalDuration >= phantomasResults.metrics.domComplete
}"> }">
<div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div> <div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
<div class="tooltip detailsOverlay">
<div>Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms</div>
</div>
</div> </div>
</div> </div>
<div class="startTime">0 ms</div> <div class="startTime">0 ms</div>
<div class="endTime">{{endTime}} ms</div> <div class="endTime">{{endTime | number: 0}} ms</div>
</div> </div>
<div class="legend"> <div class="legend">
<div class="titles"> <div class="titles">
@@ -272,7 +275,7 @@
<span ng-if="node.data.time > slowRequestsLimit" class="icon-warning" title="Slower than {{slowRequestsLimit}} ms"></span> <span ng-if="node.data.time > slowRequestsLimit" class="icon-warning" title="Slower than {{slowRequestsLimit}} ms"></span>
</div> </div>
<div class="duration" ng-if="node.data.time == undefined"></div> <div class="duration" ng-if="node.data.time == undefined"></div>
<div class="startTime">{{node.data.timestamp}}</div> <div class="startTime">{{node.data.timestamp | number: 0}}</div>
</div> </div>
</div> </div>
</div> </div>
app/public/styles/results.css
+18 -1
View File
@@ -145,11 +145,17 @@ h4 {
height: 100px; height: 100px;
width: 0.5%; width: 0.5%;
} }
.timeline .interval > div { .timeline .interval .color {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
.timeline div.interval:hover {
background: #9C4274;
}
.timeline .interval:hover .color {
background: #F04DA7;
}
.timeline .domComplete.interval { .timeline .domComplete.interval {
background: #EDE3FF; background: #EDE3FF;
} }
@@ -174,6 +180,17 @@ h4 {
.timeline .domCreation .color { .timeline .domCreation .color {
background: #FF6600; background: #FF6600;
} }
.timeline .tooltip.detailsOverlay {
position: absolute;
display: none;
width: auto;
padding: 0.5em 1em;
top: 1em;
right: 1em;
}
.timeline .interval:hover .tooltip {
display: block;
}
.timeline .legend { .timeline .legend {
display: table; display: table;