bookmarklet.js

window.__resourcesTimeline||function(){function t(e,i,n){if('object'!=typeof i)e.setAttribute(i,n);else for(var r in i)i.hasOwnProperty(r)&&t(e,r,i[r])}function e(t){return document.createElementNS(o,t)}function i(t){return'number'==typeof t}function n(i){this.container=e('svg'),this.margin=[0,0,0,0],this.markSpacing=0,t(this.container,'xmlns','http://www.w3.org/2000/svg'),this.container.setAttributeNS(o,'xlink','http://www.w3.org/1999/xlink'),i=i||document.body,i.appendChild(this.container)}function r(){var t=document.createElement('div');return t.style.cssText='position: fixed; overflow: auto; top: 0; left: 0; background: #fff; font-family: Helvetica; padding: 0.5em; z-index:9999999; border-width: 0 2px 2px 0; border-style: solid; border-color: #999; max-height: 100%;',document.body.appendChild(t),t}function a(t){var e='border: 1px solid #ddd; background: #fff; text-decoration: none; color: #000; font-size: 0.8em; vertical-align: middle; cursor: pointer; padding: 0.2em 0.5em; display: inline-block; margin: 0.1em;',i=document.createElement('div'),n=document.createElement('a'),r=document.createElement('a'),a=t.innerHTML;i.style.cssText='position: absolute; top: 0.5em; right: 0.5em;',n.textContent='save',n.style.cssText=e,n.href='data:image/svg+xml,'+a,n.download='Resources loading timeline.svg',i.appendChild(n),r.textContent='close',r.style.cssText=e,r.addEventListener('click',function(e){t.parentNode.removeChild(t),e.preventDefault()}),i.appendChild(r),t.appendChild(i)}function s(t){t.innerHTML='<span>This browser doesn\'t support Resource Timing API :(</span>'}var o='http://www.w3.org/2000/svg',h=function(){var t=document.createElement('a'),e=/^\/[^\/]+$/;return function(i){t.href=i;var n=t.pathname;return'/'===n?t.hostname:e.test(n)?n.slice(1):(n=n.split('/'),n[n.length-1])}}();return n.prototype={padding:.1,style:{column:{fill:'#B891DB',rx:8},label:{dy:'0.5ex','font-size':14,'font-family':'Helvetica'},markLabel:{dy:'1.5ex','text-anchor':'end','font-size':12}},setSize:function(e,i,n,r){this.box={width:n,height:r,x:e,y:i},t(this.container,{viewBox:[e,i,n,r].join(' '),width:n,height:r})},setMargin:function(t,e,i,n){this.margin=[t,e,i,n]},updatePlotBox:function(){this.plotBox={width:this.box.width-(this.margin[1]+this.margin[3]),height:this.box.height-(this.margin[0]+this.margin[2]),x:this.margin[3],y:this.margin[0]}},updateScale:function(){this.updatePlotBox(),this.scaleY=this.plotBox.width/this.extremes[1],this.scaleX=this.plotBox.height/this.data.length},setData:function(t){this.data=t,this.extremes=[];var e=t.reduce(this.getExtremes);this.extremes[0]=i(this.min)&&this.min<e[0]?this.min:e[0],this.extremes[1]=i(this.max)&&this.max>e[1]?this.max:e[1],this.extremes[1]=100*Math.ceil(this.extremes[1]/100),this.updateScale()},getExtremes:function(t,e,i){var n=e[0].concat(1===i?t[0]:t),r=Math.max.apply(null,n),a=Math.min.apply(null,n);return[a,r]},setExtremes:function(t,e){i(t)&&(this.min=t),i(e)&&(this.max=e)},getTextBBox:function(i){return this._textHelper||(this._textHelper=e('text'),this.container.appendChild(this._textHelper),t(this._textHelper,{opacity:0})),this._textHelper.textContent=i,this._textHelper.getBBox()},cleanUp:function(){this._textHelper&&this.container.removeChild(this._textHelper)},render:function(){var i=e('g'),n=document.createDocumentFragment(),r=this.plotBox.width;t(i,'transform','translate('+this.plotBox.x+','+this.plotBox.y+')'),this.data.forEach(function(e,i){var a,s=e[1].duration.toFixed(2)+'ms',o=this.scaleY*e[0][0]+5,h=this.scaleX*(i+.5);n.appendChild(this.renderColumn(e[0],i)),a=this.renderLabel(o,h,s),r<o+this.getTextBBox(s).width&&t(a,{'text-anchor':'end',x:o-10}),n.appendChild(a)},this),i.appendChild(n),this.container.appendChild(i)},renderColumn:function(i,n){var r=e('g'),a=e('rect'),s=e('rect');return t(a,this.style.column),t(a,{fill:'#E0CEF0',x:this.scaleY*i[0],y:this.scaleX*(n+this.padding),width:this.scaleY*(i[2]-i[0]),height:this.scaleX*(1-2*this.padding)}),t(s,this.style.column),t(s,{x:this.scaleY*i[1],y:this.scaleX*(n+this.padding),width:this.scaleY*(i[2]-i[1]),height:this.scaleX*(1-2*this.padding)}),r.appendChild(a),r.appendChild(s),r},renderLabels:function(i){var n,r=e('g'),a=document.createDocumentFragment(),s=this.margin[3],o=this.margin[0];i.forEach(function(t,e){var i=this.scaleX*(e+.5)+o;a.appendChild(this.renderLabel(0,i,t.slice(0,20)))},this),t(r,'transform','translate('+s+',0)'),r.appendChild(a),this.container.appendChild(r),n=r.getBBox(),this.margin[3]=s+n.width+10},renderLabel:function(i,n,r){var a=e('text');return t(a,{x:i,y:n}),t(a,this.style.label),a.textContent=r,a},renderHeader:function(){var i=e('text');t(i,{x:10,y:25,'font-size':20,'font-family':'Helvetica'}),i.textContent='Resources loading timeline',this.container.appendChild(i)},renderMark:function(i,n,r){var a=e('path'),s=this.margin,o=s[3]+i*this.scaleY,h=s[0]+this.plotBox.height;t(a,{d:['M',o,s[0],'V',h+this.markSpacing+15].join(' '),'stroke-width':2,stroke:r}),this.container.appendChild(a);var d=this.renderLabel(o-5,h+2+this.markSpacing,n);t(d,this.style.markLabel),this.container.appendChild(d),this.markSpacing+=15},renderStripes:function(){var i,n,r=document.createDocumentFragment(),a=this.box.width,s=this.scaleX,o=this.margin[0],h=this.data.length;for(n=0;h>n;n+=2)i=e('rect'),t(i,{x:0,y:o+this.scaleX*n,width:a,height:s,fill:'#eee'}),r.appendChild(i);this.container.insertBefore(r,this.container.firstChild)}},window.__resourcesTimeline=function(){var t=window.performance,e=t&&t.getEntriesByType&&t.getEntriesByType('resource'),i=r();if(!e)return s(i);var o=t.timing,d=o.navigationStart,l=o.domInteractive-d,c=o.loadEventStart-d,p=e.map(function(t){return[[t.startTime,t.responseStart||t.startTime,t.responseEnd],t]});p.unshift([[0,o.responseStart-d,o.domLoading-d],{duration:o.domLoading-d,initiatorType:'other',name:'document'}]);var m=p.map(function(t){return h(t[1].name)}),u=p.map(function(t){return t[1].initiatorType}),x=new n(i);x.setExtremes(0,o.loadEventEnd-o.navigationStart),x.setSize(0,0,800,22*p.length+80),x.setMargin(35,10,50,10),x.setData(p),x.renderHeader(),x.renderLabels(m),x.renderLabels(u),x.updateScale(),x.render(),x.renderMark(0,'Navigation start: 0ms','rgba(0,255,0,0.7)'),x.renderMark(l,'DOM Complete: '+l+'ms','rgba(0,0,255,0.7)'),x.renderMark(c,'Loaded: '+c+'ms','rgba(255,0,0,0.7)'),x.renderStripes(),x.cleanUp(),a(i)},window.__resourcesTimeline}(),window.__resourcesTimeline();