1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name=viewport content="width=device-width, initial-scale=1"> 6 <title>PerfMark Trace UI</title> 7 <base href="/"> 8</head> 9<body> 10 <h1>PerfMark Trace Viewer</h1> 11 <p> 12 This is an example Trace Viewer, using the <a href="https://ui.perfetto.dev">Perfetto UI</a>. 13 </p> 14 <button id="thebutton">Load</button> 15 <br /> 16 <textarea id="logs" cols="80" rows="24"> 17 </textarea> 18 <script> 19 (function() { 20 let origin = "https://ui.perfetto.dev"; 21 let logs = document.getElementById("logs"); 22 let thebutton = document.getElementById("thebutton"); 23 let thewindow = undefined; 24 25 thebutton.addEventListener("click", function (evt) { 26 logs.innerText += "Loading ...\n"; 27 fetch("trace.json").then(function(result) { 28 result.blob().then(function(blob) { 29 blob.arrayBuffer().then(arrayBuffer => { 30 logs.innerText += "Trace JSON fetched.\n"; 31 if (thewindow) { 32 thewindow.postMessage(arrayBuffer, origin); 33 return; 34 } 35 loadWindow(arrayBuffer); 36 }); 37 }); 38 }); 39 }); 40 41 function loadWindow(arrayBuffer) { 42 if (thewindow === undefined) { 43 thewindow = null; 44 } else { 45 return; 46 } 47 logs.innerText += "Loading Perfetto Window\n"; 48 let win = window.open(origin); 49 let thetimer = null; 50 window.addEventListener("message", function(evt) { 51 if (evt.data !== "PONG") { 52 return; 53 } 54 window.clearInterval(thetimer); 55 logs.innerText += "Perfetto Window Ready\n"; 56 thewindow = win; 57 thewindow.postMessage(arrayBuffer, origin); 58 }); 59 thetimer = setInterval(function() { 60 win.postMessage("PING", origin); 61 }, 250); 62 } 63 })(); 64 </script> 65</body> 66</html>