diff --git a/lib/plugins/browsertime/index.js b/lib/plugins/browsertime/index.js index 8575f98cd..d166edc68 100644 --- a/lib/plugins/browsertime/index.js +++ b/lib/plugins/browsertime/index.js @@ -147,6 +147,18 @@ module.exports = { }) .tap((results) => { results.browserScripts.forEach((run, runIndex) => { + + // take the HAR from this run and add it to the + // run data + const runHar = api.pickAPage(results.har, runIndex); + run.har = runHar; + + // if we have firstPaint, add it to the HAR(s) + if (run.timings.firstPaint) { + run.har.log.pages[0].pageTimings._firstPaint = run.timings.firstPaint; + results.har.log.pages[runIndex].pageTimings._firstPaint = run.timings.firstPaint; + } + // Kind of ugly way to add visualMetrics to a run // it's outside of browserScripts today // we could instead pass browsertime.visualMetrics maybe diff --git a/lib/plugins/html/assets/css/index.css b/lib/plugins/html/assets/css/index.css index b78600044..cac40867e 100644 --- a/lib/plugins/html/assets/css/index.css +++ b/lib/plugins/html/assets/css/index.css @@ -957,3 +957,433 @@ ul.menu { .hidden-small { display: inline; } +#page-selector { + display: none; + clear: both; + margin: 1em 0; } + +* { + box-sizing: border-box; } + +#output { + margin: 2em 0; + font-size: 12px; + line-height: 1em; } + +.water-fall-holder { + fill: #ccc; } + +svg.water-fall-chart { + width: 100%; + overflow: visible; } + +.water-fall-chart .left-fixed-holder { + overflow: visible; } + +.water-fall-chart .marker-holder { + width: 100%; } + +.water-fall-chart .line-holder { + stroke-width: 1; + stroke: #ccc; + stroke-opacity: 0.5; } + +.water-fall-chart .line-holder.active { + stroke: #69009e; + stroke-width: 2; + stroke-opacity: 1; } + +.water-fall-chart .type-onload .line-holder { + stroke: #c0c0ff; } + +.water-fall-chart .type-oncontentload .line-holder { + stroke: #d888df; } + +.water-fall-chart .labels { + width: 100%; } + +.water-fall-chart .labels .inner-label { + pointer-events: none; } + +.water-fall-chart .time-block.active { + opacity: 0.8; } + +.water-fall-chart .line-end, +.water-fall-chart .line-start { + display: none; + stroke-width: 1; + stroke-opacity: 0.5; + stroke: #000; } + +.water-fall-chart .line-end.active, +.water-fall-chart .line-start.active { + display: block; } + +.water-fall-chart .mark-holder text { + -webkit-writing-mode: tb; + writing-mode: vertical-lr; + writing-mode: tb; } + +.left-fixed-holder .label-full-bg { + fill: #fff; + opacity: 0.9; } + +.time-scale line { + stroke: #0cc; + stroke-width: 1; } + +.time-scale text { + font-weight: bold; } + +.row-item .even { + fill: #ccc; + opacity: 0.05; } + +.row-item .odd { + fill: #000; + opacity: 0.05; } + +.row-item:hover .odd, +.row-item:hover .even { + fill: #000; + opacity: 0.1; } + +.row-item .rect-holder text { + fill: #aaa; } + +.row-item.status5xx .even { + fill: #f66; } + +.row-item.status5xx .odd { + fill: #f00; } + +.row-item.status4xx .even { + fill: #c33; } + +.row-item.status4xx .odd { + fill: #c00; } + +.row-item.status3xx .even { + fill: #ff6; } + +.row-item.status3xx .odd { + fill: #ff0; } + +.row-item.status5xx .even, +.row-item.status5xx .odd, +.row-item.status4xx .even, +.row-item.status4xx .odd, +.row-item.status3xx .even, +.row-item.status3xx .odd { + opacity: 0.3; } + +.row-item.status5xx:hover .even, +.row-item.status5xx:hover .odd, +.row-item.status4xx:hover .even, +.row-item.status4xx:hover .odd, +.row-item.status3xx:hover .even, +.row-item.status3xx:hover .odd { + opacity: 0.5; } + +.lables { + overflow: hidden; } + +/*block colours*/ +.block-css { + fill: #a6d18f; } + +.block-iframe, +.block-html, +.block-svg, +.block-internal { + fill: #82a8de; } + +.block-img, +.block-image { + fill: #b394cf; } + +.block-script, +.block-javascript, +.block-js { + fill: #e0b483; } + +.block-link { + fill: #89afe6; } + +.block-swf, +.block-flash { + fill: #42aab1; } + +.block-font { + fill: #e15d4e; } + +.block-xmlhttprequest, +.block-ajax { + fill: #f00; } + +/*remove?*/ +.block-plain, +.block-other { + fill: #b3b3b3; } + +.block-total { + fill: #ccc; } + +.block-unload { + fill: #909; } + +.block-redirect { + fill: #ffff60; } + +.block-appcache { + fill: #1f831f; } + +.block-dns { + fill: #1f7c83; } + +.block-tcp { + fill: #e58226; } + +.block-ttfb { + fill: #1fe11f; } + +.block-response { + fill: #1977dd; } + +.block-dom { + fill: #9cc; } + +.block-dom-content-loaded { + fill: #d888df; } + +.block-onload { + fill: #c0c0ff; } + +.block-ssl { + fill: #c141cd; } + +.block-ms-first-paint-event { + fill: #8fbc83; } + +.block-dom-interactive-event { + fill: #d888df; } + +.block-network-server { + fill: #8cd18c; } + +.block-custom-measure { + fill: #f00; } + +.block-navigation-api-total { + fill: #ccc; } + +.block-blocking, +.block-blocked { + fill: #cdcdcd; } + +.block-undefined { + fill: #0f0; } + +.block-blocked { + fill: #ccc; } + +/*TODO: define colour*/ +.block-dns { + fill: #1f7c83; } + +.block-connect { + fill: #e58226; } + +.block-ssl { + fill: #c141cd; } + +.block-send { + fill: #1fe110; } + +/*TODO: define colour*/ +.block-wait { + fill: #1fe11f; } + +/*TODO: define colour*/ +.block-receive { + fill: #1977dd; } + +/* Info overlay SVG - wrapper */ +.info-overlay { + fill: #fff; + stroke: #cdcdcd; } + +.info-overlay-close-btn { + fill: rgba(205, 205, 205, 0.5); + transform: translate(-23px, -23px); + cursor: pointer; } + +.info-overlay-close-btn text { + fill: #111; + pointer-events: none; } + +.info-overlay-close-btn:focus { + border: solid 1px #36c; } + +/* Info overlay HTML - types */ +.type-css { + background: #406B29; } + +/*a6d18f - 40%*/ +.type-iframe, +.type-html, +.type-svg, +.type-internal { + background: #1C4278; } + +/*82a8de - 40%*/ +.type-img, +.type-image { + background: #4D2E69; } + +/*b394cf - 40%*/ +.type-script, +.type-javascript, +.type-js { + background: #7A4E1D; } + +/*e0b483 - 40%*/ +.type-link { + background: #89afe6; } + +/*89afe6 - 40%*/ +.type-swf, +.type-flash { + background: #234980; } + +/*#42aab1 - 40%*/ +.type-font { + background: #AE2A1B; } + +/*#e15d4e - 40%*/ +.type-xmlhttprequest, +.type-ajax { + background: #CC0000; } + +/* f00 40%*/ +.type-plain, +.type-other { + background: #808080; } + +/*#b3b3b3 - 40%*/ +/* Info overlay HTML - base */ +.info-overlay-holder * { + padding: 0; + margin: 0; + font-size: 12px; } + +.info-overlay-holder body { + position: relative; + height: 450px; + clear: both; + padding: 0; + margin: 0; + width: 100%; + background: #fff; + color: #666; } + +.info-overlay-holder body .wrapper { + height: 450px; + width: 100%; + overflow: scroll; } + +/* Info overlay HTML - header */ +.info-overlay-holder header { + color: #fff; + box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.25); } + +.info-overlay-holder .requestID { + font-weight: bold; } + +.info-overlay-holder h3 { + font-size: 1.1em; + padding: 1em; + margin: 0; + font-weight: normal; } + +.info-overlay-holder h3 strong { + font-size: 1.1em; } + +.info-overlay-holder .tab-nav ul { + margin: 0; + padding: 0; } + +.info-overlay-holder .tab-nav li { + margin: 0; + padding: 0; + display: inline-block; } + +.info-overlay-holder button { + background: transparent; + outline: 0; + border: 0; + border-bottom: solid 2px transparent; + padding: 0.5em 1em; + margin: 0 0.25em; } + +.info-overlay-holder li:first-child button { + margin-left: 1em; } + +.info-overlay-holder button:focus, .info-overlay-holder button:hover { + border-color: rgba(255, 255, 255, 0.6); } + +.info-overlay-holder button.active { + border-color: #fff; + cursor: default; } + +/* Info overlay HTML - content */ +.info-overlay-holder dt { + float: left; + clear: both; + margin-top: 0.5em; + width: 25%; + text-align: right; + font-weight: bold; } + +.info-overlay-holder dd { + float: left; + width: 73%; + margin: 0.5em 0 0 2%; + padding: 0 0 0.5em 0; } + +.info-overlay-holder dt:after { + content: ":"; } + +.info-overlay-holder pre { + font-size: 11px; + line-height: 23px; + border-radius: 0; + background: #f6f3f3; } + +.info-overlay-holder .tab { + float: left; + width: 100%; + height: 350px; + padding: 12px 12px 24px; } + +.info-overlay-holder .tab h2 { + font-size: 1.2em; + margin: 0.5em 0 0; + padding: 0.5em 0 0.5em 1em; + clear: both; + border-top: solid 1px #efefef; } + +.info-overlay-holder .tab pre { + overflow-y: hidden; } + +.info-overlay-holder .tab .preview { + width: auto; + max-width: 100%; + max-height: 500px; + border: solid 1px #666; } + +.info-overlay-holder .tab dl:after { + content: ""; + display: table; + clear: both; } + diff --git a/lib/plugins/html/assets/css/index.min.css b/lib/plugins/html/assets/css/index.min.css index 9b3e9e6ce..dc20356be 100644 --- a/lib/plugins/html/assets/css/index.min.css +++ b/lib/plugins/html/assets/css/index.min.css @@ -1 +1 @@ -/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */progress,sub,sup{vertical-align:baseline}*,:after,:before,legend{box-sizing:border-box}ol,ul{margin-top:0;padding-left:0}button,hr,input{overflow:visible}article,aside,details,figcaption,figure,footer,header,label,legend,main,menu,nav,section,summary{display:block}h1,h2,h3{letter-spacing:-.1rem}code,tr:nth-child(odd){background:#fafafa}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#0095d2}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}.button,.nav a{text-decoration:none}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px 2.5rem}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}.button,ul.menu{text-transform:uppercase}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px}legend{color:inherit;max-width:100%;padding:0;white-space:normal}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}body,h6{line-height:1.6}form,ol,ul{margin-bottom:2.5rem}ul{list-style:circle inside}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:.9rem}ol{list-style:decimal inside}.nav ul,ul.menu{list-style:none}li{margin-bottom:1rem}footer{text-align:center}hr{box-sizing:content-box;height:0;margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #e1e1e1}.column,.columns,.container{width:100%;box-sizing:border-box}fieldset,input,select,textarea{margin-bottom:1.5rem}input[type=url],input[type=password],input[type=number],input[type=search],input[type=email],input[type=text],input[type=tel],select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #e1e1e1;border-radius:4px;box-shadow:none}input[type=url],input[type=password],input[type=number],input[type=search],input[type=email],input[type=text],input[type=tel]{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{overflow:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:65px;padding-top:6px;padding-bottom:6px}input[type=url]:focus,input[type=password]:focus,input[type=number]:focus,input[type=search]:focus,input[type=email]:focus,input[type=text]:focus,input[type=tel]:focus,select:focus,textarea:focus{border:1px solid #0095d2;outline:0}label,legend{margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}.container:after,.row:after{content:"";display:table;clear:both}.container{position:relative;max-width:960px;margin:0 auto;padding:0 20px}blockquote,dl,p,pre,table{margin-bottom:2.5rem}.column,.columns{float:left}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}table{width:100%;border-collapse:separate;border-spacing:1px;background-color:#e1e1e1}td,th{padding:4px 1rem;vertical-align:top;text-align:left}td:first-child,th:first-child{padding-left:1rem}td:last-child,th:last-child{padding-right:1rem}tr:nth-child(even){background:#fff}th{background:#f1fbff}td.number{text-align:right}td.url{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;-moz-hyphens:auto;hyphens:auto}td.assetsurl{max-width:400px}td.pagesurl{max-width:350px}td.offendingurl{max-width:900px}@media only screen and (max-width:800px){.responsive table,.responsive tbody,.responsive td,.responsive th,.responsive thead,.responsive tr{display:block}.hidden-small,.responsive tr.u-hideable{display:none}.responsive thead tr{position:absolute;top:-9999px;left:-9999px}.responsive tr{border:4px solid #e1e1e1}.responsive td{border:none;border-bottom:1px solid #e1e1e1;position:relative;padding-left:50%;white-space:normal;text-align:left;max-width:none}.responsive td:before{position:absolute;top:6px;left:6px;width:30%;padding-right:10px;white-space:nowrap;text-align:left;font-weight:700;content:attr(data-title)}}.button,.label,code{white-space:nowrap}.navgrid,.u-full-width{width:100%}.button,.label,.logo,.nav ul{text-align:center}html{font-size:15px}body{font-size:1em;font-weight:400;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:3rem;line-height:1.2}h2{font-size:2.8rem;line-height:1.25}h3{font-size:2.6rem;line-height:1.3}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;letter-spacing:0}p{margin-top:0}a:hover{color:#00719f}code{padding:.2rem .5rem;margin:0 .2rem;font-size:.9rem;border:1px solid #e1e1e1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}.u-max-full-width{max-width:100%}.u-pull-right{float:right}.u-pull-left{float:left}.u-cf{content:"";display:table;clear:both}.u-hideable{display:none}.button{display:inline-block;height:38px;padding:0 30px;margin-bottom:1rem;color:#222;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;background-color:transparent;border-radius:4px;border:1px solid #e1e1e1;cursor:pointer}.label,.summarynumber{font-weight:700;line-height:1}.button:active,.button:focus,.button:hover{color:#222;border-color:#aeaeae;outline:0}.button--primary{color:#fff;background-color:#0095d2;border-color:#0095d2}.button--primary:active,.button--primary:focus,.button--primary:hover{color:#fff;background-color:#0087be;border-color:#0087be}.navgrid{min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:10px}.nav{background:#0095d2}.nav ul{padding:0;margin:0;background-color:#0095d2}.nav a.active,.nav a:hover{background-color:#0073b0}.nav li{font-size:1em;line-height:40px;height:40px;border-bottom:none;margin-bottom:0}.nav a{color:#fff;display:block}.nav a.active{color:#fff;cursor:default}.logo{background-color:#0095d2}.navbar-brand{padding:0;font-size:18px;max-width:250px}@media screen and (min-width:820px){.nav,.nav ul{background-color:#0095d2}body{padding-top:50px}.navgrid{width:100%;max-width:1140px;min-width:755px;margin:0 auto;overflow:hidden}.nav{height:50px;width:100%;position:fixed;z-index:10;top:0}.navbar-brand{padding:0;font-size:18px;float:left;max-width:250px}.nav li{border-bottom:none;height:50px;line-height:50px;font-size:1em;float:left;display:inline-block;margin-right:0}.nav a{padding-left:20px;padding-right:20px;text-decoration:none;color:#fff;display:block}.nav ul{list-style:none;text-align:center;padding:0;margin:0}}.hidden-small,.label{display:inline}table[data-sortable] th[data-sorted=true]{color:#3a87ad;background:#d9edf7;border-bottom-color:#bce8f1}table[data-sortable] th:not([data-sortable=false]){cursor:pointer;color:#222;text-decoration:underline}.summarybox{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.summarybox.ok{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.summarybox.warning{color:#c09853;background-color:#fcf8e3;border-color:#fbeed5}.summarybox.error{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.summarybox.info{background-color:#D9EDF7;border-color:#BCE8F1;color:#3A87AD}.summarynumber{font-size:2rem}.summarysmall{font-size:1rem;line-height:1}.label{padding:.2em .6em .3em;font-size:75%;color:#fff;vertical-align:baseline;border-radius:.25em}.ok{background-color:#468847}.warning{background-color:#f0ad4e}.error{background-color:#d9534f}ul.menu{font-size:125%}.errors{margin-bottom:1.333em;background:#ffb6c1}.large{font-size:1.333rem;line-height:1.333rem} \ No newline at end of file +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */progress,sub,sup{vertical-align:baseline}ol,ul{margin-top:0;padding-left:0}button,hr,input{overflow:visible}article,aside,details,figcaption,figure,footer,header,label,legend,main,menu,nav,section,summary{display:block}.column,.columns,.container{width:100%;box-sizing:border-box}h1,h2,h3{letter-spacing:-.1rem}code,tr:nth-child(odd){background:#fafafa}*,.column,.columns,.container,:after,:before,legend{box-sizing:border-box}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#0095d2}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}.button,.nav a{text-decoration:none}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px 2.5rem}button,input,optgroup,select,textarea{font:inherit;margin:0}.info-overlay-holder .requestID,.label,.summarynumber,.time-scale text,optgroup{font-weight:700}button,select{text-transform:none}.button,ul.menu{text-transform:uppercase}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px}legend{color:inherit;max-width:100%;padding:0;white-space:normal}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}body,h6{line-height:1.6}form,ol,ul{margin-bottom:2.5rem}ul{list-style:circle inside}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:.9rem}ol{list-style:decimal inside}.nav ul,ul.menu{list-style:none}li{margin-bottom:1rem}footer{text-align:center}hr{box-sizing:content-box;height:0;margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #e1e1e1}fieldset,input,select,textarea{margin-bottom:1.5rem}input[type=url],input[type=password],input[type=number],input[type=search],input[type=email],input[type=text],input[type=tel],select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #e1e1e1;border-radius:4px;box-shadow:none}input[type=url],input[type=password],input[type=number],input[type=search],input[type=email],input[type=text],input[type=tel]{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{overflow:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:65px;padding-top:6px;padding-bottom:6px}input[type=url]:focus,input[type=password]:focus,input[type=number]:focus,input[type=search]:focus,input[type=email]:focus,input[type=text]:focus,input[type=tel]:focus,select:focus,textarea:focus{border:1px solid #0095d2;outline:0}label,legend{margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}.container:after,.row:after{content:"";display:table;clear:both}.container{position:relative;max-width:960px;margin:0 auto;padding:0 20px}blockquote,dl,p,pre,table{margin-bottom:2.5rem}.column,.columns{float:left}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}table{width:100%;border-collapse:separate;border-spacing:1px;background-color:#e1e1e1}td,th{padding:4px 1rem;vertical-align:top;text-align:left}td:first-child,th:first-child{padding-left:1rem}td:last-child,th:last-child{padding-right:1rem}tr:nth-child(even){background:#fff}th{background:#f1fbff}td.number{text-align:right}td.url{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;-moz-hyphens:auto;hyphens:auto}td.assetsurl{max-width:400px}td.pagesurl{max-width:350px}td.offendingurl{max-width:900px}@media only screen and (max-width:800px){.responsive table,.responsive tbody,.responsive td,.responsive th,.responsive thead,.responsive tr{display:block}.hidden-small,.responsive tr.u-hideable{display:none}.responsive thead tr{position:absolute;top:-9999px;left:-9999px}.responsive tr{border:4px solid #e1e1e1}.responsive td{border:none;border-bottom:1px solid #e1e1e1;position:relative;padding-left:50%;white-space:normal;text-align:left;max-width:none}.responsive td:before{position:absolute;top:6px;left:6px;width:30%;padding-right:10px;white-space:nowrap;text-align:left;font-weight:700;content:attr(data-title)}}html{font-size:15px}body{font-size:1em;font-weight:400;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:3rem;line-height:1.2}h2{font-size:2.8rem;line-height:1.25}h3{font-size:2.6rem;line-height:1.3}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;letter-spacing:0}p{margin-top:0}a:hover{color:#00719f}code{padding:.2rem .5rem;margin:0 .2rem;font-size:.9rem;white-space:nowrap;border:1px solid #e1e1e1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}.button,.label{text-align:center;white-space:nowrap}.u-full-width{width:100%}.u-max-full-width{max-width:100%}.u-pull-right{float:right}.u-pull-left{float:left}.u-cf{content:"";display:table;clear:both}.u-hideable{display:none}.button{display:inline-block;height:38px;padding:0 30px;margin-bottom:1rem;color:#222;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;background-color:transparent;border-radius:4px;border:1px solid #e1e1e1;cursor:pointer}.button:active,.button:focus,.button:hover{color:#222;border-color:#aeaeae;outline:0}.button--primary{color:#fff;background-color:#0095d2;border-color:#0095d2}.button--primary:active,.button--primary:focus,.button--primary:hover{color:#fff;background-color:#0087be;border-color:#0087be}.navgrid{width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:10px}.nav{background:#0095d2}.nav ul{text-align:center;padding:0;margin:0;background-color:#0095d2}.nav a.active,.nav a:hover{background-color:#0073b0}.nav li{font-size:1em;line-height:40px;height:40px;border-bottom:none;margin-bottom:0}.nav a{color:#fff;display:block}.nav a.active{color:#fff;cursor:default}.logo{text-align:center;background-color:#0095d2}.navbar-brand{padding:0;font-size:18px;max-width:250px}@media screen and (min-width:820px){.nav,.nav ul{background-color:#0095d2}body{padding-top:50px}.navgrid{width:100%;max-width:1140px;min-width:755px;margin:0 auto;overflow:hidden}.nav{height:50px;width:100%;position:fixed;z-index:10;top:0}.navbar-brand{padding:0;font-size:18px;float:left;max-width:250px}.nav li{border-bottom:none;height:50px;line-height:50px;font-size:1em;float:left;display:inline-block;margin-right:0}.nav a{padding-left:20px;padding-right:20px;text-decoration:none;color:#fff;display:block}.nav ul{list-style:none;text-align:center;padding:0;margin:0}}.hidden-small,.label{display:inline}table[data-sortable] th[data-sorted=true]{color:#3a87ad;background:#d9edf7;border-bottom-color:#bce8f1}table[data-sortable] th:not([data-sortable=false]){cursor:pointer;color:#222;text-decoration:underline}.summarybox{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.summarybox.ok{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.summarybox.warning{color:#c09853;background-color:#fcf8e3;border-color:#fbeed5}.summarybox.error{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.summarybox.info{background-color:#D9EDF7;border-color:#BCE8F1;color:#3A87AD}.summarynumber{font-size:2rem;line-height:1}.summarysmall{font-size:1rem;line-height:1}.label{padding:.2em .6em .3em;font-size:75%;line-height:1;color:#fff;vertical-align:baseline;border-radius:.25em}.ok{background-color:#468847}.warning{background-color:#f0ad4e}.error{background-color:#d9534f}ul.menu{font-size:125%}.errors{margin-bottom:1.333em;background:#ffb6c1}.large{font-size:1.333rem;line-height:1.333rem}#page-selector{display:none;clear:both;margin:1em 0}#output{margin:2em 0;font-size:12px;line-height:1em}.water-fall-holder{fill:#ccc}svg.water-fall-chart{width:100%;overflow:visible}.water-fall-chart .left-fixed-holder{overflow:visible}.water-fall-chart .marker-holder{width:100%}.water-fall-chart .line-holder{stroke-width:1;stroke:#ccc;stroke-opacity:.5}.water-fall-chart .line-holder.active{stroke:#69009e;stroke-width:2;stroke-opacity:1}.water-fall-chart .type-onload .line-holder{stroke:#c0c0ff}.water-fall-chart .type-oncontentload .line-holder{stroke:#d888df}.water-fall-chart .labels{width:100%}.water-fall-chart .labels .inner-label{pointer-events:none}.water-fall-chart .time-block.active{opacity:.8}.water-fall-chart .line-end,.water-fall-chart .line-start{display:none;stroke-width:1;stroke-opacity:.5;stroke:#000}.water-fall-chart .line-end.active,.water-fall-chart .line-start.active{display:block}.water-fall-chart .mark-holder text{-webkit-writing-mode:tb;writing-mode:vertical-lr;writing-mode:tb}.left-fixed-holder .label-full-bg{fill:#fff;opacity:.9}.time-scale line{stroke:#0cc;stroke-width:1}.row-item .even{fill:#ccc;opacity:.05}.row-item .odd{fill:#000;opacity:.05}.row-item:hover .even,.row-item:hover .odd{fill:#000;opacity:.1}.row-item .rect-holder text{fill:#aaa}.row-item.status5xx .even{fill:#f66}.row-item.status5xx .odd{fill:red}.row-item.status4xx .even{fill:#c33}.row-item.status4xx .odd{fill:#c00}.row-item.status3xx .even{fill:#ff6}.row-item.status3xx .odd{fill:#ff0}.row-item.status3xx .even,.row-item.status3xx .odd,.row-item.status4xx .even,.row-item.status4xx .odd,.row-item.status5xx .even,.row-item.status5xx .odd{opacity:.3}.row-item.status3xx:hover .even,.row-item.status3xx:hover .odd,.row-item.status4xx:hover .even,.row-item.status4xx:hover .odd,.row-item.status5xx:hover .even,.row-item.status5xx:hover .odd{opacity:.5}.lables{overflow:hidden}.block-css{fill:#a6d18f}.block-html,.block-iframe,.block-internal,.block-svg{fill:#82a8de}.block-image,.block-img{fill:#b394cf}.block-javascript,.block-js,.block-script{fill:#e0b483}.block-link{fill:#89afe6}.block-flash,.block-swf{fill:#42aab1}.block-font{fill:#e15d4e}.block-ajax,.block-xmlhttprequest{fill:red}.block-other,.block-plain{fill:#b3b3b3}.block-total{fill:#ccc}.block-unload{fill:#909}.block-redirect{fill:#ffff60}.block-appcache{fill:#1f831f}.block-tcp{fill:#e58226}.block-ttfb{fill:#1fe11f}.block-response{fill:#1977dd}.block-dom{fill:#9cc}.block-dom-content-loaded{fill:#d888df}.block-onload{fill:#c0c0ff}.block-ms-first-paint-event{fill:#8fbc83}.block-dom-interactive-event{fill:#d888df}.block-network-server{fill:#8cd18c}.block-custom-measure{fill:red}.block-navigation-api-total{fill:#ccc}.block-blocked,.block-blocking{fill:#cdcdcd}.block-undefined{fill:#0f0}.block-blocked{fill:#ccc}.block-dns{fill:#1f7c83}.block-connect{fill:#e58226}.block-ssl{fill:#c141cd}.block-send{fill:#1fe110}.block-wait{fill:#1fe11f}.block-receive{fill:#1977dd}.info-overlay{fill:#fff;stroke:#cdcdcd}.info-overlay-close-btn{fill:rgba(205,205,205,.5);transform:translate(-23px,-23px);cursor:pointer}.info-overlay-close-btn text{fill:#111;pointer-events:none}.info-overlay-close-btn:focus{border:1px solid #36c}.type-css{background:#406B29}.type-html,.type-iframe,.type-internal,.type-svg{background:#1C4278}.type-image,.type-img{background:#4D2E69}.type-javascript,.type-js,.type-script{background:#7A4E1D}.type-link{background:#89afe6}.type-flash,.type-swf{background:#234980}.type-font{background:#AE2A1B}.type-ajax,.type-xmlhttprequest{background:#C00}.type-other,.type-plain{background:grey}.info-overlay-holder *{padding:0;margin:0;font-size:12px}.info-overlay-holder body{position:relative;height:450px;clear:both;padding:0;margin:0;width:100%;background:#fff;color:#666}.info-overlay-holder body .wrapper{height:450px;width:100%;overflow:scroll}.info-overlay-holder header{color:#fff;box-shadow:0 0 2px 2px rgba(0,0,0,.25)}.info-overlay-holder h3{font-size:1.1em;padding:1em;margin:0;font-weight:400}.info-overlay-holder h3 strong{font-size:1.1em}.info-overlay-holder .tab-nav ul{margin:0;padding:0}.info-overlay-holder .tab-nav li{margin:0;padding:0;display:inline-block}.info-overlay-holder button{background:0 0;outline:0;border:0;border-bottom:solid 2px transparent;padding:.5em 1em;margin:0 .25em}.info-overlay-holder li:first-child button{margin-left:1em}.info-overlay-holder button:focus,.info-overlay-holder button:hover{border-color:rgba(255,255,255,.6)}.info-overlay-holder button.active{border-color:#fff;cursor:default}.info-overlay-holder dt{float:left;clear:both;margin-top:.5em;width:25%;text-align:right;font-weight:700}.info-overlay-holder dd{float:left;width:73%;margin:.5em 0 0 2%;padding:0 0 .5em}.info-overlay-holder dt:after{content:":"}.info-overlay-holder pre{font-size:11px;line-height:23px;border-radius:0;background:#f6f3f3}.info-overlay-holder .tab{float:left;width:100%;height:350px;padding:12px 12px 24px}.info-overlay-holder .tab h2{font-size:1.2em;margin:.5em 0 0;padding:.5em 0 .5em 1em;clear:both;border-top:solid 1px #efefef}.info-overlay-holder .tab pre{overflow-y:hidden}.info-overlay-holder .tab .preview{width:auto;max-width:100%;max-height:500px;border:1px solid #666}.info-overlay-holder .tab dl:after{content:"";display:table;clear:both} \ No newline at end of file diff --git a/lib/plugins/html/assets/js/perf-cascade.min.js b/lib/plugins/html/assets/js/perf-cascade.min.js new file mode 100644 index 000000000..f0199df46 --- /dev/null +++ b/lib/plugins/html/assets/js/perf-cascade.min.js @@ -0,0 +1,3 @@ +/*! github.com/micmro/PerfCascade Version:0.1.4 (11/06/2016) */ +!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.perfCascade=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g0;)a.removeChild(a.childNodes[0])}function e(a,b){Array.prototype.forEach.call(a,b)}function f(a,b){return Array.prototype.filter.call(a,b)}c.removeAllChildren=d,c.forEach=e,c.filter=f},{}],2:[function(a,b,c){"use strict";function d(a,b){return a.response.headers.filter(function(a){return a.name.toLowerCase()===b.toLowerCase()})[0]}function e(a,b){var c=d(a,b);return void 0!==c?c.value:""}function f(a,b,c){return a.response.status>=b&&a.response.status<=c}function g(a){var b=a.rawResource,c=1e3;if(b.response.bodySize-1||"no-cache"===e(b,"Pragma"):!1}function i(a){return void 0===d(a.rawResource,"Content-Encoding")&&h(a)}function j(a){return void 0===d(a.rawResource,"Content-Encoding")&&g(a)}function k(a){return 0===a.name.indexOf("https://")}var l=a("./misc");c.getResponseHeader=d,c.getResponseHeaderValue=e,c.isInStatusCodeRange=f,c.hasCacheIssue=i,c.hasCompressionIssue=j,c.isSecure=k},{"./misc":4}],3:[function(a,b,c){"use strict";function d(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-lock",d,'\n \n \n \n ')}function e(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-no-tls",d,'\n \n \n \n \n ')}function f(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-redirect",d,'\n \n \n \n \n \n ')}function g(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-4xx",d,'\n \n \n \n \n \n \n \n ')}function h(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-5xx",d,' \n \n \n \n \n \n \n \n ')}function i(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-no-cache",d,'\n \n \n \n \n \n \n \n ')}function j(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-no-gzip",d,'\n \n \n \n \n \n \n \n \n \n \n \n ')}function k(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-plain",d,'\n \n \n \n \n \n \n \n \n \n ')}function l(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-other",d,'\n \n \n \n \n \n \n \n ')}function m(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-js",d,'\n \n \n \n \n \n \n \n \n ')}function n(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-image",d,'\n \n \n \n \n \n \n ')}function o(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-html",d,'\n \n \n \n \n \n \n \n \n ')}function p(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-css",d,'\n \n \n \n \n \n \n ')}function q(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-warning",d,'\n \n \n \n ')}function r(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-font",d,'\n \n \n \n \n \n \n \n \n \n ')}function s(a,b,c,d){return void 0===d&&(d=1),t(a,b,c,"icon-flash",d,'\n \n \n \n \n \n ')}var t=function(a,b,c,d,e,f){var g=new DOMParser,h=g.parseFromString('\n \n '+f+"\n "+c+"\n \n ","image/svg+xml");return h.firstChild};c.lock=d,c.noTls=e,c.err3xx=f,c.err4xx=g,c.err5xx=h,c.noCache=i,c.noGzip=j,c.plain=k,c.other=l,c.javascript=m,c.image=n,c.html=o,c.css=p,c.warning=q,c.font=r,c.flash=s},{}],4:[function(a,b,c){"use strict";function d(a){var b=RegExp("^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\\?([^#]*))?(#(.*))?"),c=a.match(b);return{scheme:c[2],authority:c[4],path:c[5],query:c[7],fragment:c[9]}}function e(a,b){return a.filter(function(a){return a===b}).length>0}function f(a,b){if(a.lengthe?c.authority.substr(0,e)+"..."+g[g.length-1].substr(-f):c.authority+"..."+g[g.length-1].substr(-f)}function g(a,b){return Math.round(a*Math.pow(10,b))/Math.pow(10,b)}function h(a){for(var b=[],c=1;ca||a>=d())throw new Error("Page does not exist - Invalid pageIndex selected");k=a;var b=j.getDocs().pages[k];l.forEach(function(a){a(k,b)})}}function h(a){return d()>1?l.push(a):void 0}function i(a){d()<=1||(j.getDocs().pages.forEach(function(b,c){var d=new Option(b.title,c.toString(),c===k);a.add(d)}),a.style.display="block",a.addEventListener("change",function(a){var b=parseInt(a.target.value,10);g(b)}))}var j=a("../state/waterfall-docs-service"),k=0,l=[];c.getPageCount=d,c.getSelectedPage=e,c.getSelectedPageIndex=f,c.setSelectedPageIndex=g,c.onPageUpdate=h,c.initPagingSelectBox=i},{"../state/waterfall-docs-service":9}],8:[function(a,b,c){"use strict";function d(a){f=a}function e(){return f}var f;c.init=d,c.getOptions=e},{}],9:[function(a,b,c){"use strict";function d(a){f=a}function e(){return f}var f;c.storeDocs=d,c.getDocs=e},{}],10:[function(a,b,c){"use strict";var d=a("../typing/time-block"),e=a("./styling-converters"),f=function(){function a(){}return a.transformDoc=function(a){var b=this,c=void 0!==a.log?a.log:a;console.log("HAR created by %s(%s) %s page(s)",c.creator.name,c.creator.version,c.pages.length);var d={pages:c.pages.map(function(a,d){return b.transformPage(c,d)})};return d},a.transformPage=function(a,b){var c=this;void 0===b&&(b=0);var f=void 0!==a.log?a.log:a,g=b,h=f.pages[g],i=new Date(h.startedDateTime).getTime(),j=h.pageTimings;console.log("%s: %s of %s page(s)",h.title,b+1,f.pages.length);var k=0,l=f.entries.filter(function(a){return a.pageref===h.id}).map(function(a){var b=new Date(a.startedDateTime).getTime()-i;return k=0}).sort(function(a,b){return j[a]>j[b]?1:-1}).map(function(a){var b=j[a];return{name:a.replace(/^[_]/,"")+" ("+b+"ms)",startTime:b}});return{durationMs:k,blocks:l,marks:m,lines:[],title:h.title}},a.buildDetailTimingBlocks=function(a,b){var c=this,e=b.timings;return["blocked","dns","connect","send","wait","receive"].reduce(function(f,g){var h=c.getTimePair(g,b,f,a);if(h.end&&h.start>=h.end)return f;if("connect"===g&&e.ssl&&-1!==e.ssl){var i=parseInt(b._ssl_start,10)||h.start,j=parseInt(b._ssl_end,10)||h.start+e.ssl,k=parseInt(b._ssl_start,10)?h.start:j;return f.concat([new d["default"]("ssl",i,j,"block-ssl")]).concat([new d["default"](g,k,h.end,"block-"+g)])}return f.concat([new d["default"](g,h.start,h.end,"block-"+g)])},[])},a.getTimePair=function(a,b,c,d){var e;switch(a){case"wait":e="ttfb";break;case"receive":e="download";break;default:e=a}var f=parseInt(b["_"+e+"_start"],10),g=parseInt(b["_"+e+"_end"],10),h=isNaN(f)?c.length>0?c[c.length-1].end:d:f,i=isNaN(g)?h+b.timings[a]:g;return{start:h,end:i}},a}();Object.defineProperty(c,"__esModule",{value:!0}),c["default"]=f},{"../typing/time-block":12,"./styling-converters":11}],11:[function(a,b,c){"use strict";function d(a){var b=a.split("/"),c=b[1];switch(void 0!==c&&(c=c.indexOf(";")>-1?c.split(";")[0]:c),b[0]){case"image":return"image";case"font":return"font"}switch(c){case"svg+xml":return"svg";case"xml":case"html":return"html";case"plain":return"plain";case"css":return"css";case"vnd.ms-fontobject":case"font-woff":case"font-woff2":case"x-font-truetype":case"x-font-opentype":case"x-font-woff":return"font";case"javascript":case"x-javascript":case"script":case"json":return"javascript";case"x-shockwave-flash":return"flash"}return"other"}function e(a){return"block-"+d(a)}c.mimeToRequestType=d,c.mimeToCssClass=e},{}],12:[function(a,b,c){"use strict";var d=function(){function a(a,b,c,d,e,f,g){void 0===d&&(d=""),void 0===e&&(e=[]),this.name=a,this.start=b,this.end=c,this.cssClass=d,this.segments=e,this.rawResource=f,this.requestType=g,this.total="number"!=typeof b||"number"!=typeof c?void 0:c-b}return a}();Object.defineProperty(c,"__esModule",{value:!0}),c["default"]=d},{}],13:[function(a,b,c){"use strict";function d(a,b){var c=b.rawResource,d=function(a,b){return"number"!=typeof a||0>=a?void 0:b(a)},e=function(a){return d(a,function(a){return a+" byte (~"+Math.round(a/1024*10)/10+"kb)"})},f=function(a){return d(a,function(a){return a+"ms"})},g=function(a){if(!a)return"";var b=new Date(a);return a+"
(local time: "+b.toLocaleString()+")"},h=function(a){var b=c.request.headers.filter(function(b){return b.name.toLowerCase()===a.toLowerCase()})[0];return b?b.value:""},i=function(a){var b=c.response.headers.filter(function(b){return b.name.toLowerCase()===a.toLowerCase()})[0];return b?b.value:""},j=function(){var a=i("Content-Type");return c._contentType&&c._contentType!==a?a+" | "+c._contentType:a},k=function(a){return c[a]||c["_"+a]||c.request[a]||c.request["_"+a]||""},l=function(a){var b=k(a);return"0"!==b?b:""},m=function(a){var b=parseInt(k(a),10);return isNaN(b)||0>=b?"":e(b)},n=function(a){var b=k(a+"_ms").toString(),c=k(a+"_start"),d=k(a+"_end"),e=[];return c&&d&&d>c&&e.push(c+"ms - "+d+"ms"),b&&"-1"!==b&&e.push("("+b+"ms)"),e.join(" ")};return{general:{"Request Number":"#"+a,Started:new Date(c.startedDateTime).toLocaleString()+" ("+f(b.start)+" after page reqest started)",Duration:f(c.time),"Error/Status Code":c.response.status+" "+c.response.statusText,"Server IPAddress":c.serverIPAddress,Connection:c.connection,"Browser Priority":k("priority")||k("initialPriority"),"Initiator (Loaded by)":k("initiator"),"Initiator Line":k("initiator_line"),Host:h("Host"),IP:k("ip_addr"),"Client Port":l("client_port"),Expires:k("expires"),"Cache Time":k("cache_time"),"CDN Provider":k("cdn_provider"),ObjectSize:k("objectSize"),"Bytes In (downloaded)":m("bytesIn"),"Bytes Out (uploaded)":m("bytesOut"),"JPEG Scan Count":l("jpeg_scan_count"),"Gzip Total":m("gzip_total"),"Gzip Save":m("gzip_safe"),"Minify Total":m("minify_total"),"Minify Save":m("minify_save"),"Image Total":m("image_total"),"Image Save":m("image_save")},timings:{"Server RTT":n("server_rtt"),"all (combined)":n("all"),DNS:n("dns"),Connect:n("connect"),"TLS/SSL":n("ssl"),Load:n("load"),TTFB:n("ttfb"),Download:n("download")},request:{Method:c.request.method,"HTTP Version":c.request.httpVersion,"Headers Size":e(c.request.headersSize),"Body Size":e(c.request.bodySize),Comment:c.request.comment,"User-Agent":h("User-Agent"),Host:h("Host"),Connection:h("Connection"),Accept:h("Accept"),"Accept-Encoding":h("Accept-Encoding"),Expect:h("Expect"),Forwarded:h("Forwarded"),"If-Modified-Since":h("If-Modified-Since"),"If-Range":h("If-Range"),"If-Unmodified-Since":h("If-Unmodified-Since"),"Querystring parameters count":c.request.queryString.length,"Cookies count":c.request.cookies.length},response:{Status:c.response.status+" "+c.response.statusText,"HTTP Version":c.response.httpVersion,"Header Size":e(c.response.headersSize),"Body Size":e(c.response.bodySize),"Content-Type":j(),"Cache-Control":i("Cache-Control"),"Content-Encoding":i("Content-Encoding"),Expires:g(i("Expires")),"Last-Modified":g(i("Last-Modified")),Pragma:i("Pragma"),"Content-Length":i("Content-Length"),"Content Size":c.response.content.size,"Content Compression":c.response.content.compression,Connection:i("Connection"),ETag:i("ETag"),"Accept-Patch":i("Accept-Patch"),Age:i("Age"),Allow:i("Allow"),"Content-Disposition":i("Content-Disposition"),Location:i("Location"),"Strict-Transport-Security":i("Strict-Transport-Security"),"Trailer (for chunked transfer coding)":i("Trailer"),"Transfer-Encoding":i("Transfer-Encoding"),Upgrade:i("Upgrade"),Vary:i("Vary"),"Timing-Allow-Origin":i("Timing-Allow-Origin"),"Redirect URL":c.response.redirectURL,Comment:c.response.comment}}}c.getKeys=d},{}],14:[function(a,b,c){"use strict";function d(a,b){void 0===b&&(b=!1);var c=function(a){if(!b)return"";var c=a.toLowerCase().replace(/[^a-z-]/g,"");return'class="'+(c||"no-colour")+'"'};return Object.keys(a).filter(function(b){return void 0!==a[b]&&-1!==a[b]&&0!==a[b]&&""!==a[b]}).map(function(b){return"\n
"+b+"
\n
"+a[b]+"
\n "}).join("")}function e(a,b){if(void 0===b&&(b=!0),""===a.trim())return"";var c=b?"
"+a+"
":a;return'
\n '+c+"\n
"}function f(a,b){if("image"!==b.requestType)return"";var c='';return e(c,!1)}function g(a,b){return b?'
    • ":""}function h(a,b,c){var h=document.createElement("html"),j=document.createElement("body");j.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns","http://www.w3.org/2000/xmlns/");var k=i.getKeys(a,b),l=e(d(k.general)),m=e(d(k.timings,!0)),n=d(k.request),o=d(b.rawResource.request.headers.reduce(function(a,b){return a[b.name]=b.value,a},{})),p=d(k.response),q=d(b.rawResource.response.headers.reduce(function(a,b){return a[b.name]=b.value,a},{})),r=f(c,b);return j.innerHTML='\n
    \n
    \n

    #'+a+" "+b.name+'

    \n \n
    \n '+r+"\n "+l+'\n
    \n
    \n '+n+"\n
    \n

    All Request Headers

    \n
    \n "+o+'\n
    \n
    \n
    \n
    \n '+p+"\n
    \n

    All Response Headers

    \n
    \n "+q+"\n
    \n
    \n "+m+'\n
    \n \n 
    '+JSON.stringify(b.rawResource,null,2)+"
    \n     \n
    \n
    \n ", +h.appendChild(j),h}var i=a("./extract-details-keys");c.createDetailsBody=h},{"./extract-details-keys":13}],15:[function(a,b,c){"use strict";function d(a){f.push(a)}function e(a){f.forEach(function(b){return b(a)})}c.eventTypes={OPEN:"open",CLOSE:"closed"};var f=[];c.subscribeToOvelayChanges=d,c.publishToOvelayChanges=e},{}],16:[function(a,b,c){"use strict";function d(){return l.reduce(function(a,b){return a+b.height},0)}function e(a){return l.reduce(function(b,c){return c.index0||(l.push({index:a,defaultY:c,block:f,onClose:function(){n.closeOvelay(a,null,g,b,e,j,m)}}),i(b,e,g,m),k.publishToOvelayChanges({type:k.eventTypes.OPEN,openOverlays:l,combinedOverlayHeight:d()}),h(j))}function h(a){a.forEach(function(a,b){var c=e(b);a.style.transform="translate(0, "+c+"px)"})}function i(a,b,c,d){for(;c.firstChild;)c.removeChild(c.firstChild);var e=0;l.sort(function(a,b){return a.index>b.index?1:-1}).forEach(function(f){var g=f.defaultY+e,h=j.createRowInfoOverlay(f.index,a,g,b,f.block,f.onClose,d),i=h.querySelector("img.preview");i&&!i.src&&i.setAttribute("src",i.attributes.getNamedItem("data-src").value),c.appendChild(h);var k=h.getBoundingClientRect().height;return e+=k,f.actualY=g,f.height=k,f})}var j=a("./svg-details-overlay"),k=a("./overlay-changes-pub-sub"),l=[];c.getCombinedOverlayHeight=d,c.getOverlayOffset=e,c.closeOvelay=f,c.openOverlay=g},{"./overlay-changes-pub-sub":15,"./svg-details-overlay":17}],17:[function(a,b,c){"use strict";function d(a){var b=g.newEl("a",{"class":"info-overlay-close-btn"});return b.appendChild(g.newEl("rect",{width:23,height:23,x:"100%",y:a})),b.appendChild(g.newEl("text",{width:23,height:23,x:"100%",y:a,dx:7,dy:16,fill:"#111",text:"X",textAnchor:"middle"})),b.appendChild(g.newEl("title",{text:"Close Overlay"})),b}function e(a,b){var c=g.newG("info-overlay-holder",{width:"100%"}),d=g.newEl("rect",{width:"100%",height:b,x:"0",y:a,rx:2,ry:2,"class":"info-overlay"});return c.appendChild(d),c}function f(a,b,c,f,j,k,l){var m=parseInt(j.rawResource._index,10)||a,n=g.newG("outer-info-overlay-holder",{width:"100%"}),o=e(c,f),p=g.newEl("foreignObject",{width:"100%",height:f,x:"0",y:c,dy:"5",dx:"5"}),q=d(c);q.addEventListener("click",function(b){return k(a,o)});var r=i.createDetailsBody(m,j,f),s=r.getElementsByClassName("tab-button"),t=r.getElementsByClassName("tab"),u=function(a){h.forEach(t,function(b,c){b.style.display=a===c?"block":"none",s.item(c).classList.toggle("active",a===c)})};return h.forEach(s,function(a,b){a.addEventListener("click",function(){u(b)})}),u(0),p.appendChild(r),o.appendChild(p),o.appendChild(q),n.appendChild(o),n}var g=a("../../helpers/svg"),h=a("../../helpers/dom"),i=a("./html-details-body");c.createRowInfoOverlay=f},{"../../helpers/dom":1,"../../helpers/svg":5,"./html-details-body":14}],18:[function(a,b,c){"use strict";function d(a,b){var c=20,d=a.rawResource,f=[],g=3,h=function(a,b){f.push({type:a,x:g,title:b}),g+=c};if(h(a.requestType,a.requestType),d.response.redirectURL){var i=encodeURI(d.response.redirectURL.split("?")[0]||"");h("err3xx",d.response.status+" response status: Redirect to "+i+"...")}return!b&&e.isSecure(a)?h("lock","Secure Connection"):b&&!e.isSecure(a)&&h("noTls","Insecure Connection"),e.hasCacheIssue(a)&&h("noCache","Response not cached"),e.hasCompressionIssue(a)&&h("noGzip","no gzip"),e.isInStatusCodeRange(d,400,499)&&h("err4xx",d.response.status+" response status: "+d.response.statusText),e.isInStatusCodeRange(d,500,599)&&h("err5xx",d.response.status+" response status: "+d.response.statusText),!d.response.content.mimeType&&e.isInStatusCodeRange(d,200,299)&&h("warning","No MIME Type defined"),f}var e=a("../../helpers/heuristics");c.getIndicators=d},{"../../helpers/heuristics":2}],19:[function(a,b,c){"use strict";function d(a,b){var c=a.height-1,d=o.newEl("rect",{width:p.roundNumber(a.width/a.unit,2)+"%",height:c,x:p.roundNumber(a.x/a.unit,2)+"%",y:a.y,"class":b});return a.label&&d.appendChild(o.newEl("title",{text:a.label})),a.showOverlay&&a.hideOverlay&&(d.addEventListener("mouseenter",a.showOverlay(a)),d.addEventListener("mouseleave",a.hideOverlay(a))),d}function e(a,b){return{width:a.total,height:b.height-6,x:a.start||.001,y:b.y,cssClass:a.cssClass,label:a.name+" ("+Math.round(a.start)+"ms - "+Math.round(a.end)+"ms | total: "+Math.round(a.total)+"ms)",unit:b.unit,showOverlay:b.showOverlay,hideOverlay:b.hideOverlay}}function f(a,b,c){var d=500,e=5/d*100,f=a.y+a.height/1.5,g=(a.x+a.width)/a.unit+e,h=o.newTextEl(b+"ms",f,p.roundNumber(g,2)+"%"),i=8*(b+"ms").length;return g+i/d*100>100&&(g=c/a.unit-e,h=o.newTextEl(b+"ms",f,p.roundNumber(g,2)+"%",{textAnchor:"end"})),h}function g(a,b,c){var g=d(a,"time-block "+(a.cssClass||"block-other")),h=o.newEl("g",{"class":"rect-holder"}),i=a.x;return h.appendChild(g),b&&b.length>0&&(b.forEach(function(b){if(b.total>0&&"number"==typeof b.start){var c=e(b,a),f=d(c,"segment "+c.cssClass);i=Math.min(i,c.x),h.appendChild(f)}}),h.appendChild(f(a,c,i))),h}function h(a,b,c,d,e){var f=j(a,b,c,d);return f.style.clipPath="url(#titleClipPath)",f}function i(a,b,c,d){var e=j(a,b,c,d),f=o.newG("full-lable");return f.appendChild(o.newEl("rect",{"class":"label-full-bg",x:a-3,y:b+3,width:o.getNodeTextWidth(e),height:d-4,rx:5,ry:5})),f.appendChild(e),f}function j(a,b,c,d){var e=p.ressourceUrlFormater(c,125),f=o.newTextEl(e,b+Math.round(d/2)+5);return f.appendChild(o.newEl("title",{text:c})),f.setAttribute("x",a.toString()),f.style.opacity=c.match(/js.map$/)?"0.5":"1",f}function k(a,b,c){var d=c.getElementsByTagName("rect")[0],e=c.getElementsByTagName("text")[0];c.style.display="none",c.style.visibility="hidden",a.appendChild(b),a.appendChild(c),a.addEventListener("mouseenter",function(){c.style.display="block",b.style.display="none",c.style.visibility="visible",d.style.width=(e.clientWidth+10).toString()}),a.addEventListener("mouseleave",function(){b.style.display="block",c.style.display="none",c.style.visibility="hidden"})}function l(a,b,c){return o.newEl("rect",{width:"100%",height:b,x:0,y:a,"class":c?"even":"odd"})}function m(a,b,c,d){var e=o.newEl("g",{"class":"row row-fixed"});return e.appendChild(o.newEl("rect",{width:"100%",height:b,x:"0",y:a,opacity:"0"})),e.addEventListener("click",c),e}function n(a,b,c){var d=o.newEl("g",{"class":"row row-flex"});return d.appendChild(o.newEl("rect",{width:"100%",height:b,x:"0",y:a,opacity:"0"})),d.addEventListener("click",c),d}var o=a("../../helpers/svg"),p=a("../../helpers/misc");c.createRect=g,c.createRequestLabelClipped=h,c.createRequestLabelFull=i,c.appendRequestLabels=k,c.createBgStripe=l,c.createNameRowBg=m,c.createRowBg=n},{"../../helpers/misc":4,"../../helpers/svg":5}],20:[function(a,b,c){"use strict";function d(a,b,c,d,l,m,n){var o=b.y,p=b.height,q=l.leftColumnWith,r=["row-item"];h.isInStatusCodeRange(c.rawResource,500,599)&&r.push("status5xx"),h.isInStatusCodeRange(c.rawResource,400,499)?r.push("status4xx"):304!==c.rawResource.response.status&&h.isInStatusCodeRange(c.rawResource,300,399)&&r.push("status3xx");var s=e.newG(r.join(" ")),t=e.newSvg("left-fixed-holder",{x:"0",width:q+"%"}),u=e.newSvg("flex-scale-waterfall",{x:q+"%",width:100-q+"%"}),v=i.createRect(b,c.segments,c.total),w=i.createRequestLabelClipped(d,o,g.ressourceUrlFormater(c.name,40),p,"clipPath"),x=i.createRequestLabelFull(d,o,c.name,p),y=i.createNameRowBg(o,p,n,q),z=i.createRowBg(o,p,n),A=i.createBgStripe(o,p,a%2===0);return z.appendChild(v),l.showIndicatorIcons&&j.getIndicators(c,m).forEach(function(a){y.appendChild(f[a.type](a.x,o+3,a.title))}),i.appendRequestLabels(y,w,x),u.appendChild(z),t.appendChild(k.cloneNode(!0)),t.appendChild(y),s.appendChild(A),s.appendChild(u),s.appendChild(t),s}var e=a("../../helpers/svg"),f=a("../../helpers/icons"),g=a("../../helpers/misc"),h=a("../../helpers/heuristics"),i=a("./svg-row-subcomponents"),j=a("./svg-indicators"),k=e.newEl("clipPath",{id:"titleClipPath"});k.appendChild(e.newEl("rect",{width:"100%",height:"100%"})),c.createRow=d},{"../../helpers/heuristics":2,"../../helpers/icons":3,"../../helpers/misc":4,"../../helpers/svg":5,"./svg-indicators":18,"./svg-row-subcomponents":19}],21:[function(a,b,c){"use strict";function d(a){return{endline:f.newEl("line",{x1:"0",y1:"0",x2:"0",y2:a,"class":"line-end"}),startline:f.newEl("line",{x1:"0",y1:"0",x2:"0",y2:a,"class":"line-start"})}}function e(a){return{onMouseEnterPartial:function(){return function(b){var c=b.target;f.addClass(c,"active");var d=c.x.baseVal.valueInSpecifiedUnits+c.width.baseVal.valueInSpecifiedUnits+"%",e=c.x.baseVal.valueInSpecifiedUnits+"%";a.endline.x1.baseVal.valueAsString=d,a.endline.x2.baseVal.valueAsString=d,a.startline.x1.baseVal.valueAsString=e,a.startline.x2.baseVal.valueAsString=e,f.addClass(a.endline,"active"),f.addClass(a.startline,"active")}},onMouseLeavePartial:function(){return function(b){var c=b.target;f.removeClass(c,"active"),f.removeClass(a.endline,"active"),f.removeClass(a.startline,"active")}}}}var f=a("../../helpers/svg");c.createAlignmentLines=d,c.makeHoverEvtListeners=e},{"../../helpers/svg":5}],22:[function(a,b,c){"use strict";function d(a,b){for(var c=f.newEl("g",{"class":"time-scale full-width"}),d=0,e=a/1e3,h=100/e;e>=d;d++)!function(a,d,e){var h=f.newTextEl(a+"sec",b);a>d-.2?(h.setAttribute("x",e*a-.5+"%"),h.setAttribute("text-anchor","end")):h.setAttribute("x",e*a+.5+"%");var i=f.newEl("line",{x1:e*a+"%",y1:"0",x2:e*a+"%",y2:b});g.subscribeToOvelayChanges(function(a){var c=a.combinedOverlayHeight,d=(b+c)/b;i.setAttribute("transform","scale(1, "+d+")"),h.setAttribute("transform","translate(0, "+c+")")}),c.appendChild(i),c.appendChild(h)}(d,e,h);return c}function e(a,b,c){var d=f.newEl("rect",{width:(a.total||1)/b+"%",height:c,x:(a.start||.001)/b+"%",y:0,"class":a.cssClass||"block-other"});return d.appendChild(f.newEl("title",{text:a.name})),d}var f=a("../../helpers/svg"),g=a("../details-overlay/overlay-changes-pub-sub");c.createTimeScale=d,c.createBgRect=e},{"../../helpers/svg":5,"../details-overlay/overlay-changes-pub-sub":15}],23:[function(a,b,c){"use strict";function d(a,b,c){var d=e.newEl("g",{transform:"scale(1, 1)","class":"marker-holder"});return a.forEach(function(g,h){var i=g.startTime/b,j=e.newEl("g",{"class":"mark-holder type-"+g.name.toLowerCase()}),k=e.newEl("g",{"class":"line-holder"}),l=e.newEl("g",{"class":"line-label-holder",x:i+"%"});g.x=i;var m=e.newTextEl(g.name,c+25);m.setAttribute("x",i+"%"),m.setAttribute("stroke","");var n=e.newEl("line",{x1:i+"%",y1:0,x2:i+"%",y2:c}),o=a[h-1];o&&g.x-o.x<1&&(m.setAttribute("x",o.x+1+"%"),g.x=o.x+1);var p=e.newEl("line",{x1:i+"%",y1:c,x2:g.x+"%",y2:c+23});k.appendChild(n),k.appendChild(p),f.subscribeToOvelayChanges(function(a){var b=a.combinedOverlayHeight,d=(c+b)/c;n.setAttribute("transform","scale(1, "+d+")"),l.setAttribute("transform","translate(0, "+b+")"),p.setAttribute("transform","translate(0, "+b+")")});var q=!1,r=function(a){q||(q=!0,e.addClass(k,"active"),j.parentNode.appendChild(j))},s=function(a){q=!1,e.removeClass(k,"active")};m.addEventListener("mouseenter",r),m.addEventListener("mouseleave",s),l.appendChild(m),j.appendChild(e.newEl("title",{text:g.name+" ("+Math.round(g.startTime)+"ms)"})),j.appendChild(k),j.appendChild(l),d.appendChild(j)}),d}var e=a("../../helpers/svg"),f=a("../details-overlay/overlay-changes-pub-sub");c.createMarks=d},{"../../helpers/svg":5,"../details-overlay/overlay-changes-pub-sub":15}],24:[function(a,b,c){"use strict";function d(a,b,c){var d=a.reduce(function(a,b){return Math.max(a,f.getNodeTextWidth(f.newTextEl(b.name,0),!0))},0);return Math.floor(c+d+35)}function e(a){function b(){return(u+l.getCombinedOverlayHeight()).toString()+"px"}function c(a,b){var c=a.total||1,d=p.rowHeight*b,e=a.start||.001,f=450,g={width:c,height:p.rowHeight,x:e,y:d,cssClass:a.cssClass,label:a.name+" ("+a.start+"ms - "+a.end+"ms | total: "+a.total+"ms)",unit:q,showOverlay:p.showAlignmentHelpers?o.onMouseEnterPartial:void 0,hideOverlay:p.showAlignmentHelpers?o.onMouseLeavePartial:void 0},h=function(c){l.openOverlay(b,e,d+p.rowHeight,f,a,w,B,q)},i=j.createRow(b,g,a,A,p,s,h);B.push(i),y.appendChild(i)}var e,o,p=n.getOptions(),q=a.durationMs/100,r=a.blocks.filter(function(a){return"number"==typeof a.start&&"number"==typeof a.total}).sort(function(a,b){return(a.start||0)-(b.start||0)}),s=0===a.blocks[0].name.indexOf("https://"),t=(r.length+1)*p.rowHeight,u=d(a.marks,r,t),v=f.newSvg("water-fall-chart",{height:u}),w=f.newG("overlays"),x=f.newSvg("scale-and-marks-holder",{x:p.leftColumnWith+"%",width:100-p.leftColumnWith+"%"}),y=f.newG("rows-holder");if(p.showAlignmentHelpers){e=f.newG("hover-overlays");var z=h.createAlignmentLines(t);e.appendChild(z.startline),e.appendChild(z.endline),o=h.makeHoverEvtListeners(z)}x.appendChild(g.createTimeScale(a.durationMs,t)),x.appendChild(i.createMarks(a.marks,q,t)),a.lines.forEach(function(a,b){v.appendChild(g.createBgRect(a,q,t))});var A;A=p.showIndicatorIcons?r.reduce(function(a,b){var c=k.getIndicators(b,s),d=c[c.length-1],e=d?d.x+d.x/Math.max(c.length-1,1):0;return Math.max(a,e)},5):5;var B=[];return m.subscribeToOvelayChanges(function(a){v.style.height=b()}),r.forEach(c),p.showAlignmentHelpers&&x.appendChild(e),v.appendChild(x),v.appendChild(y),v.appendChild(w),v}var f=a("../helpers/svg"),g=a("./sub-components/svg-general-components"),h=a("./sub-components/svg-alignment-helper"),i=a("./sub-components/svg-marks"),j=a("./row/svg-row"),k=a("./row/svg-indicators"),l=a("./details-overlay/svg-details-overlay-manager"),m=a("./details-overlay/overlay-changes-pub-sub"),n=a("../state/global-state");c.createWaterfallSvg=e},{"../helpers/svg":5,"../state/global-state":8,"./details-overlay/overlay-changes-pub-sub":15,"./details-overlay/svg-details-overlay-manager":16,"./row/svg-indicators":18,"./row/svg-row":20,"./sub-components/svg-alignment-helper":21,"./sub-components/svg-general-components":22,"./sub-components/svg-marks":23}]},{},[6])(6)}); diff --git a/lib/plugins/html/htmlBuilder.js b/lib/plugins/html/htmlBuilder.js index fa6629ce7..bac1fb13b 100644 --- a/lib/plugins/html/htmlBuilder.js +++ b/lib/plugins/html/htmlBuilder.js @@ -111,6 +111,7 @@ class HTMLBuilder { menu: 'pages', pageTitle: name + ' ' + url, pageDescription: '', + showWaterfallSummary: locals.options.html.showWaterfallSummary, headers: this.summaryPages, h: helpers }, locals); diff --git a/lib/plugins/html/src/sass/components/waterfall.scss b/lib/plugins/html/src/sass/components/waterfall.scss new file mode 100644 index 000000000..b14faa0ce --- /dev/null +++ b/lib/plugins/html/src/sass/components/waterfall.scss @@ -0,0 +1,167 @@ +#page-selector {display: none; clear: both; margin: 1em 0;} + +* {box-sizing: border-box;} + +#output {margin: 2em 0; font-size: 12px; line-height: 1em;} + +.water-fall-holder {fill:#ccc;} + +svg.water-fall-chart {width:100%; overflow: visible;} +.water-fall-chart .left-fixed-holder {overflow: visible;} +.water-fall-chart .marker-holder {width:100%;} +.water-fall-chart .line-holder {stroke-width:1; stroke: #ccc; stroke-opacity:0.5;} +.water-fall-chart .line-holder.active {stroke: #69009e; stroke-width:2; stroke-opacity:1;} +.water-fall-chart .type-onload .line-holder {stroke: #c0c0ff;} +.water-fall-chart .type-oncontentload .line-holder {stroke: #d888df;} + +.water-fall-chart .labels {width:100%;} +.water-fall-chart .labels .inner-label {pointer-events: none;} +.water-fall-chart .time-block.active {opacity: 0.8;} +.water-fall-chart .line-end, +.water-fall-chart .line-start {display: none; stroke-width:1; stroke-opacity:0.5; stroke: #000;} +.water-fall-chart .line-end.active, +.water-fall-chart .line-start.active {display: block;} + +.water-fall-chart .mark-holder text {-webkit-writing-mode: tb; writing-mode:vertical-lr; writing-mode: tb;} + +.left-fixed-holder .label-full-bg {fill: #fff; opacity: 0.9} + +.time-scale line {stroke:#0cc; stroke-width:1;} +.time-scale text {font-weight:bold;} + +.row-item .even {fill: #ccc; opacity: 0.05;} +.row-item .odd {fill: #000; opacity: 0.05;} +.row-item:hover .odd, +.row-item:hover .even {fill: #000; opacity: 0.1} +.row-item .rect-holder text {fill: #aaa} +.row-item.status5xx .even {fill: #f66;} +.row-item.status5xx .odd {fill: #f00;} +.row-item.status4xx .even{fill: #c33;} +.row-item.status4xx .odd {fill: #c00;} +.row-item.status3xx .even {fill: #ff6;} +.row-item.status3xx .odd {fill: #ff0;} + +.row-item.status5xx .even, +.row-item.status5xx .odd, +.row-item.status4xx .even, +.row-item.status4xx .odd, +.row-item.status3xx .even, +.row-item.status3xx .odd {opacity: 0.3} +.row-item.status5xx:hover .even, +.row-item.status5xx:hover .odd, +.row-item.status4xx:hover .even, +.row-item.status4xx:hover .odd, +.row-item.status3xx:hover .even, +.row-item.status3xx:hover .odd {opacity: 0.5} + + +.lables { overflow: hidden;} + +/*block colours*/ +.block-css {fill: #a6d18f;} +.block-iframe, +.block-html, +.block-svg, +.block-internal {fill: #82a8de;} +.block-img, +.block-image {fill: #b394cf;} +.block-script, +.block-javascript, +.block-js {fill: #e0b483;} +.block-link {fill: #89afe6;} +.block-swf, +.block-flash {fill: #42aab1;} +.block-font {fill: #e15d4e;} +.block-xmlhttprequest, +.block-ajax {fill: #f00;} /*remove?*/ +.block-plain, +.block-other {fill: #b3b3b3;} + +.block-total {fill: #ccc;} +.block-unload {fill: #909;} +.block-redirect {fill: #ffff60;} +.block-appcache {fill: #1f831f;} +.block-dns {fill: #1f7c83;} +.block-tcp {fill: #e58226;} +.block-ttfb {fill: #1fe11f;} +.block-response {fill: #1977dd;} +.block-dom {fill: #9cc;} +.block-dom-content-loaded {fill: #d888df;} +.block-onload {fill: #c0c0ff;} + +.block-ssl {fill: #c141cd; } +.block-ms-first-paint-event {fill: #8fbc83; } +.block-dom-interactive-event {fill: #d888df; } +.block-network-server {fill: #8cd18c; } +.block-custom-measure {fill: #f00; } + +.block-navigation-api-total {fill: #ccc;} +.block-blocking, +.block-blocked {fill: #cdcdcd;} + +.block-undefined {fill: #0f0;} + + +.block-blocked {fill: #ccc;} /*TODO: define colour*/ +.block-dns {fill: #1f7c83;} +.block-connect {fill: #e58226;} +.block-ssl {fill:#c141cd;} +.block-send {fill: #1fe110;} /*TODO: define colour*/ +.block-wait {fill: #1fe11f;} /*TODO: define colour*/ +.block-receive {fill: #1977dd;} + +/* Info overlay SVG - wrapper */ +.info-overlay {fill: #fff; stroke: #cdcdcd; } +.info-overlay-close-btn {fill: rgba(205, 205, 205, 0.5); transform: translate(-23px, -23px); cursor: pointer;} +.info-overlay-close-btn text {fill: #111; pointer-events: none;} +.info-overlay-close-btn:focus {border: solid 1px #36c;} + +/* Info overlay HTML - types */ +.type-css {background: #406B29;}/*a6d18f - 40%*/ +.type-iframe, +.type-html, +.type-svg, +.type-internal {background: #1C4278;} /*82a8de - 40%*/ +.type-img, +.type-image {background: #4D2E69;} /*b394cf - 40%*/ +.type-script, +.type-javascript, +.type-js {background: #7A4E1D;} /*e0b483 - 40%*/ +.type-link {background: #89afe6;} /*89afe6 - 40%*/ +.type-swf, +.type-flash {background: #234980;} /*#42aab1 - 40%*/ +.type-font {background: #AE2A1B;} /*#e15d4e - 40%*/ +.type-xmlhttprequest, +.type-ajax {background: #CC0000;} /* f00 40%*/ +.type-plain, +.type-other {background: #808080;} /*#b3b3b3 - 40%*/ + +/* Info overlay HTML - base */ +.info-overlay-holder * { padding: 0; margin:0; font-size: 12px;} +.info-overlay-holder body { position: relative; height: 450px; clear: both; padding: 0; margin:0; width:100%; background: #fff; color: #666;} +.info-overlay-holder body .wrapper { height: 450px; width: 100%; overflow: scroll;} + +/* Info overlay HTML - header */ +.info-overlay-holder header {color: #fff; box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.25);} +.info-overlay-holder .requestID {font-weight: bold;} +.info-overlay-holder h3 {font-size: 1.1em; padding: 1em; margin:0; font-weight: normal;} +.info-overlay-holder h3 strong {font-size: 1.1em;} +.info-overlay-holder .tab-nav ul {margin: 0; padding: 0;} +.info-overlay-holder .tab-nav li {margin: 0; padding: 0; display: inline-block;} +.info-overlay-holder button { background: transparent; outline:0; border:0; border-bottom: solid 2px transparent; + padding: 0.5em 1em; margin:0 0.25em;} +.info-overlay-holder li:first-child button {margin-left: 1em;} +.info-overlay-holder button:focus,.info-overlay-holder button:hover {border-color: rgba(255,255,255, 0.6);} +.info-overlay-holder button.active {border-color: #fff; cursor: default;} + +/* Info overlay HTML - content */ +.info-overlay-holder dt {float: left; clear: both; margin-top: 0.5em; width: 25%; text-align: right; font-weight: bold; } +.info-overlay-holder dd {float: left; width:73%; margin: 0.5em 0 0 2%; padding: 0 0 0.5em 0;} +.info-overlay-holder dt:after { content: ":"; } +.info-overlay-holder pre {font-size: 11px; line-height: 23px; border-radius: 0; background: #f6f3f3;} + +.info-overlay-holder .tab {float: left; width:100%; height: 350px; padding:12px 12px 24px;} +.info-overlay-holder .tab h2 {font-size: 1.2em; margin:0.5em 0 0; padding: 0.5em 0 0.5em 1em; clear: both; border-top: solid 1px #efefef;} +.info-overlay-holder .tab pre {overflow-y: hidden;} +.info-overlay-holder .tab .preview {width: auto; max-width: 100%; max-height: 500px; border: solid 1px #666;} +.info-overlay-holder .tab dl:after {content: ""; display: table; clear: both;} diff --git a/lib/plugins/html/src/sass/main.scss b/lib/plugins/html/src/sass/main.scss index 4c0d72551..beb3d25ed 100644 --- a/lib/plugins/html/src/sass/main.scss +++ b/lib/plugins/html/src/sass/main.scss @@ -33,3 +33,4 @@ @import 'components/sortable'; @import 'components/summarybox'; @import 'components/misc'; +@import 'components/waterfall'; diff --git a/lib/plugins/html/templates/url/browsertime/index.pug b/lib/plugins/html/templates/url/browsertime/index.pug index b29d9be6a..4aa12cd88 100644 --- a/lib/plugins/html/templates/url/browsertime/index.pug +++ b/lib/plugins/html/templates/url/browsertime/index.pug @@ -31,7 +31,7 @@ table td First Visual Change (visual metric) td.number #{visualMetrics.FirstVisualChange.toFixed(1)} tr - td Last Visual Change (visual metric) + td Last Visual Change (visual metric) td.number #{visualMetrics.LastVisualChange.toFixed(1)} if (Object.keys(timings.userTimings.marks).length > 0) each value, name in timings.userTimings.marks diff --git a/lib/plugins/html/templates/url/index.pug b/lib/plugins/html/templates/url/index.pug index af777902d..b3e4118ec 100644 --- a/lib/plugins/html/templates/url/index.pug +++ b/lib/plugins/html/templates/url/index.pug @@ -27,6 +27,8 @@ block content li: a(href='#coach') Coach if d.browsertime && d.browsertime.pageSummary li: a(href='#timings') Timings + if d.browsertime && d.browsertime.har + li: a(href='#waterfall') Waterfall if d.pagexray && d.pagexray.pageSummary li: a(href='#pagexray') Info if d.webpagetest @@ -38,6 +40,9 @@ block content if d.browsertime && d.browsertime.pageSummary include ./browsertime/index.pug + if ( d.browsertime.har && showWaterfallSummary) + include ./waterfall/index.pug + if d.pagexray && d.pagexray.pageSummary include ./pagexray/index.pug diff --git a/lib/plugins/html/templates/url/run.pug b/lib/plugins/html/templates/url/run.pug index 9a601d7a2..8836b767f 100644 --- a/lib/plugins/html/templates/url/run.pug +++ b/lib/plugins/html/templates/url/run.pug @@ -19,6 +19,8 @@ block content li: a(href='#coach') Advice if d.browsertime && d.browsertime.run li: a(href='#timings') Timing + if d.browsertime.run.har + li: a(href='#waterfall') Waterfall if d.webpagetest && d.webpagetest.run li: a(href='#webpagetest') WebPageTest @@ -30,6 +32,8 @@ block content if d.browsertime && d.browsertime.run include ./browsertime/index.pug + if d.browsertime.run.har + include ./waterfall/index.pug if d.webpagetest && d.webpagetest.run include ./webpagetest/run.pug diff --git a/lib/plugins/html/templates/url/waterfall/index.pug b/lib/plugins/html/templates/url/waterfall/index.pug new file mode 100644 index 000000000..be4b8bdf8 --- /dev/null +++ b/lib/plugins/html/templates/url/waterfall/index.pug @@ -0,0 +1,25 @@ +a#waterfall +h3 Waterfall +if (pageInfo.data.browsertime.run && pageInfo.data.browsertime.run.har) + - var dahar = pageInfo.data.browsertime.run.har +else + - var dahar = pageInfo.data.browsertime.har + +if (dahar.log.pages.length > 1) + p Choose HAR: +select#page-selector +#output +script(src='../../js/perf-cascade.min.js') +script(type='text/javascript'). + var outputHolderEl = document.getElementById("output"); + var pageSelectorEl = document.getElementById("page-selector"); + var options = { + rowHeight: 20, //default: 23 + showAlignmentHelpers : true, //default: true + showIndicatorIcons: false, //default: true + leftColumnWith: 30 ,//default: 25 + pageSelector: pageSelectorEl + }; + var har = !{JSON.stringify(dahar.log)}; + var perfCascadeSvg = perfCascade.fromHar(har, options); + outputHolderEl.appendChild(perfCascadeSvg); diff --git a/lib/support/cli.js b/lib/support/cli.js index 0b8ade45b..9332ed324 100644 --- a/lib/support/cli.js +++ b/lib/support/cli.js @@ -209,9 +209,16 @@ module.exports.parseCommandLine = function parseCommandLine() { default: false, group: 'Budget' }) + /** Html options */ + .option('html.showWaterfallSummary', { + describe: 'Set to true to show waterfalls on summary HTML report', + default: false, + type: 'boolean', + group: 'HTML' + }) /* .option('html.generateHTML', { describe: 'Generate HTML results. You may skip it when you store the data elsewhere.',