lib/har/viewer/scripts/tabs/harStats.js

Summary

Maintainability
A
0 mins
Test Coverage
/* See license.txt for terms of usage */

define("tabs/harStats",["domplate/domplate","core/lib","i18n!nls/harStats","preview/harSchema","preview/harModel","core/cookies","domplate/infoTip","core/trace"],function(Domplate,Lib,Strings,HarSchema,HarModel,Cookies,InfoTip,Trace){with(Domplate){function PieBase(){}PieBase.prototype={data:[],title:"",getLabelTooltipText:function(e){return e.label+": "+Lib.formatSize(e.value)},cleanUp:function(){for(var e=0;e<this.data.length;e++)this.data[e].value=0,this.data[e].count=0}};function TimingPie(){}TimingPie.prototype=Lib.extend(PieBase.prototype,{title:"Summary of request times.",data:[{value:0,label:Strings.pieLabelBlocked,color:"rgb(228, 214, 193)"},{value:0,label:Strings.pieLabelDNS,color:"rgb(119, 192, 203)"},{value:0,label:Strings.pieLabelSSL,color:"rgb(168, 196, 173)"},{value:0,label:Strings.pieLabelConnect,color:"rgb(179, 222, 93)"},{value:0,label:Strings.pieLabelSend,color:"rgb(224, 171, 157)"},{value:0,label:Strings.pieLabelWait,color:"rgb(163, 150, 190)"},{value:0,label:Strings.pieLabelReceive,color:"rgb(194, 194, 194)"}],getLabelTooltipText:function(e){return e.label+": "+Lib.formatTime(e.value)}});function ContentPie(){}ContentPie.prototype=Lib.extend(PieBase.prototype,{title:"Summary of content types.",data:[{value:0,label:Strings.pieLabelHTMLText,color:"rgb(174, 234, 218)"},{value:0,label:Strings.pieLabelJavaScript,color:"rgb(245, 230, 186)"},{value:0,label:Strings.pieLabelCSS,color:"rgb(212, 204, 219)"},{value:0,label:Strings.pieLabelImage,color:"rgb(220, 171, 181)"},{value:0,label:Strings.pieLabelFlash,color:"rgb(166, 156, 222)"},{value:0,label:Strings.pieLabelOthers,color:"rgb(229, 171, 255)"}],getLabelTooltipText:function(e){return e.count+"x"+" "+e.label+": "+Lib.formatSize(e.value)}});function TrafficPie(){}TrafficPie.prototype=Lib.extend(PieBase.prototype,{title:"Summary of sent and received bodies & headers.",data:[{value:0,label:Strings.pieLabelHeadersSent,color:"rgb(247, 179, 227)"},{value:0,label:Strings.pieLabelBodiesSent,color:"rgb(226, 160, 241)"},{value:0,label:Strings.pieLabelHeadersReceived,color:"rgb(166, 232, 166)"},{value:0,label:Strings.pieLabelBodiesReceived,color:"rgb(168, 196, 173)"}]});function CachePie(){}CachePie.prototype=Lib.extend(PieBase.prototype,{title:"Comparison of downloaded data from the server and browser cache.",data:[{value:0,label:Strings.pieLabelDownloaded,color:"rgb(182, 182, 182)"},{value:0,label:Strings.pieLabelPartial,color:"rgb(218, 218, 218)"},{value:0,label:Strings.pieLabelFromCache,color:"rgb(239, 239, 239)"}],getLabelTooltipText:function(e){return e.count+"x"+" "+e.label+": "+Lib.formatSize(e.value)}});var timingPie=new TimingPie,contentPie=new ContentPie,trafficPie=new TrafficPie,cachePie=new CachePie,jsTypes={"text/javascript":1,"text/jscript":1,"application/javascript":1,"application/x-javascript":1,"text/js":1},htmlTypes={"text/plain":1,"text/html":1},cssTypes={"text/css":1},imageTypes={"image/png":1,"image/jpeg":1,"image/gif":1},flashTypes={"application/x-shockwave-flash":1},jsonTypes={"text/x-json":1,"text/x-js":1,"application/json":1,"application/x-js":1},xmlTypes={"application/xml":1,"application/xhtml+xml":1,"application/vnd.mozilla.xul+xml":1,"text/xml":1,"text/xul":1,"application/rdf+xml":1},unknownTypes={"text/xsl":1,"text/sgml":1,"text/rtf":1,"text/x-setext":1,"text/richtext":1,"text/tab-separated-values":1,"text/rdf":1,"text/xif":1,"text/ecmascript":1,"text/vnd.curl":1,"text/vbscript":1,"view-source":1,"view-fragment":1,"application/x-httpd-php":1,"application/ecmascript":1,"application/http-index-format":1};function Stats(e,t){this.model=e,this.timeline=t,this.timeline.addListener(this)}Stats.prototype=domplate({element:null,tag:DIV({"class":"pageStatsBody",style:"height: auto; display: none"}),update:function(e){if(!this.isVisible())return;this.cleanUp();var t=HarSchema.timingsType.properties;e.length||e.push(null);for(var n=0;n<e.length;n++){var r=e[n],i=r?this.model.getPageEntries(r):this.model.getAllEntries();for(var s=0;s<i.length;s++){var o=i[s];if(!o.timings)continue;timingPie.data[0].value+=o.timings.blocked,timingPie.data[1].value+=o.timings.dns,timingPie.data[2].value+=o.timings.ssl>0?o.timings.ssl:0,timingPie.data[3].value+=o.timings.connect,timingPie.data[4].value+=o.timings.send,timingPie.data[5].value+=o.timings.wait,timingPie.data[6].value+=o.timings.receive,o.timings.ssl>0&&(timingPie.data[3].value-=o.timings.ssl);var u=o.response,a=u.bodySize>0?u.bodySize:0,f=u.content.mimeType,l=f?f.match(/^([^;]+)/)[1]:null,f=l?l:u.content.mimeType;htmlTypes[f]?(contentPie.data[0].value+=a,contentPie.data[0].count++):jsTypes[f]?(contentPie.data[1].value+=a,contentPie.data[1].count++):cssTypes[f]?(contentPie.data[2].value+=a,contentPie.data[2].count++):imageTypes[f]?(contentPie.data[3].value+=a,contentPie.data[3].count++):flashTypes[f]?(contentPie.data[4].value+=a,contentPie.data[4].count++):(contentPie.data[5].value+=a,contentPie.data[5].count++),trafficPie.data[0].value+=o.request.headersSize>0?o.request.headersSize:0,trafficPie.data[1].value+=o.request.bodySize>0?o.request.bodySize:0,trafficPie.data[2].value+=o.response.headersSize>0?o.response.headersSize:0,trafficPie.data[3].value+=a,o.response.status==206?(cachePie.data[1].value+=a,cachePie.data[1].count++):o.response.status==304?(cachePie.data[2].value+=a,cachePie.data[2].count++):a>0&&(cachePie.data[0].value+=a,cachePie.data[0].count++)}}Pie.draw(Lib.$(this.timingPie,"pieGraph"),timingPie),Pie.draw(Lib.$(this.contentPie,"pieGraph"),contentPie),Pie.draw(Lib.$(this.trafficPie,"pieGraph"),trafficPie),Pie.draw(Lib.$(this.cachePie,"pieGraph"),cachePie)},cleanUp:function(){timingPie.cleanUp(),contentPie.cleanUp(),trafficPie.cleanUp(),cachePie.cleanUp()},showInfoTip:function(e,t,n,r){return Pie.showInfoTip(e,t,n,r)},onSelectionChange:function(e){this.update(e)},show:function(e){if(this.isVisible())return;InfoTip.addListener(this),Lib.setClass(this.element,"opened"),e?$(this.element).slideDown():this.element.style.display="block";var t=this.timeline.getSelection();this.update(t)},hide:function(e){if(!this.isVisible())return;InfoTip.removeListener(this),Lib.removeClass(this.element,"opened"),e?$(this.element).slideUp():this.element.style.display="none"},isVisible:function(){return Lib.hasClass(this.element,"opened")},toggle:function(e){this.isVisible()?this.hide(e):this.show(e)},render:function(e){return this.element=this.tag.replace({},e),this.timingPie=Pie.render(timingPie,this.element),this.contentPie=Pie.render(contentPie,this.element),this.trafficPie=Pie.render(trafficPie,this.element),this.cachePie=Pie.render(cachePie,this.element),this.cachePie.style.borderRight=0,this.element}});var Pie=domplate({tag:TABLE({"class":"pagePieTable",cellpadding:0,cellspacing:0,_repObject:"$pie"},TBODY(TR(TD({"class":"pieBox",title:"$pie.title"}),TD(FOR("item","$pie.data",DIV({"class":"pieLabel",_repObject:"$item"},SPAN({"class":"box",style:"background-color: $item.color"},"&nbsp;"),SPAN({"class":"label"},"$item.label"))))))),render:function(e,t){var n=this.tag.append({pie:e},t),r=Lib.$(n,"pieBox"),i=document.createElement("canvas");return i.setAttribute("class","pieGraph "),i.setAttribute("height","100"),i.setAttribute("width","100"),r.appendChild(i),typeof G_vmlCanvasManager!="undefined"&&G_vmlCanvasManager.initElement(i),n},draw:function(e,t){if(!e||!e.getContext)return;var n=e.getContext("2d"),r=Math.min(e.width,e.height)/2,i=[e.width/2,e.height/2];n.clearRect(0,0,e.width,e.height);var s=0,o=t.data,u=0;for(var a in o)u+=o[a].value;if(!u){n.beginPath(),n.moveTo(i[0],i[1]),n.arc(i[0],i[1],r,0,Math.PI*2,!1),n.closePath(),n.fillStyle="rgb(229,236,238)",n.lineStyle="lightgray",n.fill();return}for(var a=0;a<o.length;a++){var f=o[a].value/u;n.beginPath(),n.moveTo(i[0],i[1]),n.arc(i[0],i[1],r,Math.PI*(-0.5+2*s),Math.PI*(-0.5+2*(s+f)),!1),n.lineTo(i[0],i[1]),n.closePath(),n.fillStyle=o[a].color,n.fill(),s+=f}},showInfoTip:function(e,t,n,r){var i=Lib.getAncestorByClass(t,"pagePieTable");if(!i)return!1;var s=Lib.getAncestorByClass(t,"pieLabel");if(s)return PieInfoTip.render(i.repObject,s.repObject,e),!0}}),PieInfoTip=domplate({tag:DIV({"class":"pieLabelInfoTip"},"$text"),getText:function(e){return e.label+": "+formatTime(e.value)},render:function(e,t,n){var r=e.getLabelTooltipText(t);this.tag.replace({text:r},n)}});return Stats}});