Skip to content

Commit bfceec4

Browse files
author
Michael Mrowetz
committed
#87 add new (unmodified) HARs to dev preview
1 parent 7d4c8ed commit bfceec4

1 file changed

Lines changed: 88 additions & 83 deletions

File tree

‎src/index.html‎

Lines changed: 88 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,99 +2,104 @@
22
<html class="no-js" lang="">
33

44
<head>
5-
<meta charset="utf-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7-
<title>PerfCascade - HAR and more Waterfall viewer</title>
8-
<meta name="description" content="">
9-
<meta name="viewport" content="width=device-width, initial-scale=1">
10-
11-
<!-- import PerfCascade styles /-->
12-
<link rel="stylesheet" href="/build/stage/perf-cascade-demo.css">
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<title>PerfCascade - HAR and more Waterfall viewer</title>
8+
<meta name="description" content="">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
11+
<!-- import PerfCascade styles /-->
12+
<link rel="stylesheet" href="/build/stage/perf-cascade-demo.css">
13+
<style>
14+
h1 {display: inline-block; font-size:1em; vertical-align: text-bottom; padding: 1em 3em 0 0; margin: 0;}
15+
input[type=file] {display: inline-block; vertical-align: text-bottom; padding: 1em 0 0; margin: 0;}
16+
</style>
1317
</head>
1418

1519
<body>
1620

17-
<div id="legendHolder"></div>
21+
<div id="legendHolder"></div>
22+
<h1>Chrome HAR</h1> <input type="file" id="fileinput" />
23+
<select id="page-selector" class="page-selector"></select>
24+
<div id="output" class="output"></div>
1825

19-
<input type="file" id="fileinput" />
20-
<select id="page-selector" class="page-selector"></select>
21-
<div id="output" class="output"></div>
26+
<h1>WPT HAR</h1>
27+
<input type="file" id="fileinput2" />
28+
<select id="page-selector2" class="page-selector"></select>
29+
<div id="output2" class="output"></div>
2230

23-
<input type="file" id="fileinput2" />
24-
<select id="page-selector2" class="page-selector"></select>
25-
<div id="output2" class="output"></div>
31+
<!-- import PerfCascade JS /-->
32+
<script src="/build/stage/perf-cascade.js"></script>
33+
<script src="/build/stage/perf-cascade-file-reader.js"></script>
34+
<script src="https://raw.githubusercontent.com/github/fetch/master/fetch.js"></script>
2635

27-
<!-- import PerfCascade JS /-->
28-
<script src="/build/stage/perf-cascade.js"></script>
29-
<script src="/build/stage/perf-cascade-file-reader.js"></script>
30-
<script src="https://raw.githubusercontent.com/github/fetch/master/fetch.js"></script>
31-
32-
<script>
33-
/**
36+
<script>
37+
/**
3438
* functionality for example page
3539
* `perfCascade` is a global object if not running in AMD or CommonJS context
3640
*/
37-
(function(perfCascade){
38-
39-
/** holder DOM element to render PerfCascade into */
40-
var outputHolderEl = document.getElementById("output")
41-
var pageSelectorEl = document.getElementById("page-selector")
42-
var outputHolder2El = document.getElementById("output2")
43-
var pageSelector2El = document.getElementById("page-selector2")
44-
var legendHolderEl = document.getElementById("legendHolder")
45-
46-
function setup(options, fileinputId, outputHolder) {
47-
/**
48-
* This is where the magic happens
49-
*/
50-
function renderPerfCascadeChart(logData) {
51-
/** remove all children of `outputHolderEl`,
52-
* so you can upload new HAR files and get a new SVG */
53-
while (outputHolder.childNodes.length > 0) {
54-
outputHolder.removeChild(outputHolder.childNodes[0])
55-
}
56-
57-
/** pass HAR and options to `newPerfCascadeHar` to generate the SVG element*/
58-
var perfCascadeSvg = perfCascade.fromHar(logData, options)
59-
60-
/** append SVG to page - that's it */
61-
outputHolder.appendChild(perfCascadeSvg)
62-
}
63-
64-
65-
/** handle client side file upload via file-reader */
66-
function onFileSubmit(evt) {
67-
var files = evt.target.files
68-
if (!files) {
69-
alert("Failed to load HAR file")
70-
return
71-
}
72-
73-
// Just needed for gzipped *.zhar files, you can use the standard FileReader api for normal .har files
74-
perfCascadeFileReader.readFile(files[0], evt.target.value, function(error, data){
75-
if(error){
76-
console.error(error)
77-
}else{
78-
renderPerfCascadeChart(data)
79-
}
80-
})
81-
}
82-
83-
if (window["fetch"]) {/** load an initial HAR when opening the page */
84-
//Source: http://www.webpagetest.org/result/151226_X7_b43d35e592fab70e0ba012fe11a41020/
85-
// window["fetch"]("test-data/www.bbc.co.uk.160529_8V_7R3.har")
86-
// window["fetch"]("test-data/www.bbc.com.har")
87-
window["fetch"]("test-data/github.com.MODIFIED.151226_X7_b43d35e592fab70e0ba012fe11a41020.har")
88-
.then(f => f.json().then(j => renderPerfCascadeChart(j.log)))}
89-
90-
/** hook up file input events */
91-
document.getElementById(fileinputId).addEventListener("change", onFileSubmit, false)
92-
}
93-
94-
setup({pageSelector: pageSelectorEl, legendHolder: legendHolderEl}, "fileinput", outputHolderEl);
95-
setup({pageSelector: pageSelector2El}, "fileinput2", outputHolder2El);
96-
})(window.perfCascade)
41+
(function (perfCascade) {
42+
43+
/** holder DOM element to render PerfCascade into */
44+
var outputHolderEl = document.getElementById("output")
45+
var pageSelectorEl = document.getElementById("page-selector")
46+
var outputHolder2El = document.getElementById("output2")
47+
var pageSelector2El = document.getElementById("page-selector2")
48+
var legendHolderEl = document.getElementById("legendHolder")
49+
50+
function setup(options, fileinputId, outputHolder, harUrl) {
51+
/**
52+
* This is where the magic happens
53+
*/
54+
function renderPerfCascadeChart(logData) {
55+
/** remove all children of `outputHolderEl`,
56+
* so you can upload new HAR files and get a new SVG */
57+
while (outputHolder.childNodes.length > 0) {
58+
outputHolder.removeChild(outputHolder.childNodes[0])
59+
}
60+
61+
/** pass HAR and options to `newPerfCascadeHar` to generate the SVG element*/
62+
var perfCascadeSvg = perfCascade.fromHar(logData, options)
63+
64+
/** append SVG to page - that's it */
65+
outputHolder.appendChild(perfCascadeSvg)
66+
}
67+
68+
69+
/** handle client side file upload via file-reader */
70+
function onFileSubmit(evt) {
71+
var files = evt.target.files
72+
if (!files) {
73+
alert("Failed to load HAR file")
74+
return
75+
}
76+
77+
// Just needed for gzipped *.zhar files, you can use the standard FileReader api for normal .har files
78+
perfCascadeFileReader.readFile(files[0], evt.target.value, function (error, data) {
79+
if (error) {
80+
console.error(error)
81+
} else {
82+
renderPerfCascadeChart(data)
83+
}
84+
})
85+
}
86+
87+
if (window["fetch"]) {/** load an initial HAR when opening the page */
88+
window["fetch"](harUrl)
89+
.then(f => f.json().then(j => renderPerfCascadeChart(j.log)))
90+
}
91+
92+
/** hook up file input events */
93+
document.getElementById(fileinputId).addEventListener("change", onFileSubmit, false)
94+
}
95+
96+
//Source: http://www.webpagetest.org/result/151226_X7_b43d35e592fab70e0ba012fe11a41020/
97+
// window["fetch"]("test-data/www.bbc.co.uk.160529_8V_7R3.har")
98+
// window["fetch"]("test-data/www.bbc.com.har")
99+
setup({ pageSelector: pageSelectorEl, legendHolder: legendHolderEl }, "fileinput", outputHolderEl, "test-data/chrome_enorm-magazin.de.har");
100+
setup({ pageSelector: pageSelector2El }, "fileinput2", outputHolder2El, "test-data/wpt_github.com.151226_X7_b43d35e592fab70e0ba012fe11a41020.har");
101+
})(window.perfCascade)
97102
</script>
98103
</body>
99104

100-
</html>
105+
</html>

0 commit comments

Comments
 (0)