github/reddit
1
1
Fork 0
mirror of https://github.com/reddit-archive/reddit.git synced 2026-01-29 00:38:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

Use consistent scaling on the timings graph

Browse Source 
This lets one, at a glance, get a feel for how long a page took
to load. Timing data is scaled such that browser-width is 8 seconds
(unless the page took longer than 8 seconds). Clicking on the timings
will zoom the graph in for better investigation of what parts took
what amounts of time.
This commit is contained in:
Keith Mitchell
2013-03-04 15:31:58 -08:00
committed by Max Goodman
parent ec442456fd
commit e4a45f5d1a
2 changed files with 36 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
r2/r2/public/static/css/adminbar.less
View File

@@ -225,6 +225,15 @@
right: 0;
top: 0;
bottom: 0;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
&.zoomed {
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
}

31
r2/r2/public/static/js/adminbar.js
View File

@@ -8,6 +8,7 @@ r.adminbar.AdminBar = Backbone.View.extend({
'click .hide-button': 'toggleVisibility',
'click .timings-button': 'toggleTimings',
'click .expand-button': 'toggleFullTimings',
'click .timelines': 'toggleZoom',
'click .admin-off': 'adminOff'
},
@@ -15,6 +16,8 @@ r.adminbar.AdminBar = Backbone.View.extend({
this.hidden = store.get('adminbar.hidden') == true
this.showTimings = store.get('adminbar.timings.show') == true
this.showFullTimings = store.get('adminbar.timings.full') == true
this.zoomTimings = store.get('adminbar.timings.zoom') != false
this.timingScale = store.get('adminbar.timings.scale') || 8.0
this.serverTimingGraph = new r.adminbar.TimingBarGraph({
collection: r.adminbar.timings,
@@ -48,17 +51,30 @@ r.adminbar.AdminBar = Backbone.View.extend({
this.$('.timings-bar .expand-button')
.text(this.showFullTimings ? '-' : '+')
this.$('.timelines').toggleClass('zoomed', this.zoomTimings)
this.$el.parent().css('height', this.$el.outerHeight())
if (r.adminbar.timings.isEmpty()) {
return
}
var bt = r.adminbar.browserTimings
var bt = r.adminbar.browserTimings,
browserEndBound = bt.endTime
if (!this.zoomTimings && (bt.endTime - bt.startTime) < this.timingScale) {
browserEndBound = bt.startTime + this.timingScale
}
this.browserTimingGraph.setBounds(bt.startTime, browserEndBound)
if (this.showFullTimings && !bt.isEmpty()) {
this.serverTimingGraph.setBounds(bt.startTime, bt.endTime)
this.serverTimingGraph.setBounds(bt.startTime, browserEndBound)
} else {
this.serverTimingGraph.setBounds()
var scaleStart = r.adminbar.timings.startTime,
scaleEnd = r.adminbar.timings.endTime
if (!this.zoomTimings && (scaleEnd - scaleStart) < this.timingScale) {
scaleEnd = scaleStart + this.timingScale
}
this.serverTimingGraph.setBounds(scaleStart, scaleEnd)
}
// if showing full times, avoid rendering until both timelines loaded
@@ -85,6 +101,12 @@ r.adminbar.AdminBar = Backbone.View.extend({
this.showFullTimings = !this.showFullTimings
store.set('adminbar.timings.full', this.showFullTimings)
this.render()
},
toggleZoom: function(value) {
this.zoomTimings = !this.zoomTimings
store.set('adminbar.timings.zoom', this.zoomTimings)
this.render()
}
})
@@ -118,10 +140,11 @@ r.adminbar.TimingBarGraph = Backbone.View.extend({
return
}
var eventDuration = (timing.get('end') - timing.get('start')).toFixed(2)
eventsEl.append($('<li class="event">')
.addClass(keyParts[0])
.addClass(keyParts[1])
.attr('title', key)
.attr('title', key + ': ' + eventDuration + 's')
.css({
left: pos(timing.get('start') - startBound) + '%',
right: pos(endBound - timing.get('end')) + '%'