Created
November 22, 2021 14:17
-
-
Save octaviantu/0fa8464aa0bdd0666341061e08eba648 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en-us"> | |
<body> | |
<style> | |
pre { | |
border: 1px solid #eee; | |
margin: 10px 0; | |
font-family: monospace; | |
font-size: 10px; | |
min-height: 100px; | |
} | |
body > * { margin: 20px; } | |
#btn_fetch { font-size: 14px; } | |
</style> | |
<select id="source" size=4> | |
<option selected>https://storage.googleapis.com/perfetto-misc/example_android_trace_15s</option> | |
<option>https://storage.googleapis.com/perfetto-misc/example_chrome_trace_10s.json</option> | |
<option>https://storage.googleapis.com/perfetto-misc/example_chrome_trace_4s_1.json</option> | |
</select> | |
<br> | |
<button type="button" id="btn_fetch">Fetch and open trace</button> | |
<br> | |
<pre id="logs" cols="80" rows="20"></pre> | |
<script type="text/javascript"> | |
const ORIGIN = 'https://ui.perfetto.dev'; | |
const logs = document.getElementById('logs'); | |
const btnFetch = document.getElementById('btn_fetch'); | |
let traceBlob = null; | |
let timer; | |
let onMessageCallback = null; | |
async function fetchAndOpen(traceUrl) { | |
logs.innerText += `Fetching trace from ${traceUrl}...\n`; | |
const resp = await fetch(traceUrl); | |
// Error checcking is left as an exercise to the reader. | |
const blob = await resp.blob(); | |
const arrayBuffer = await blob.arrayBuffer(); | |
logs.innerText += `fetch() complete, now passing to ui.perfetto.dev\n`; | |
openTrace(arrayBuffer); | |
} | |
function openTrace(arrayBuffer) { | |
const win = window.open(ORIGIN); | |
if (!win) { | |
btnFetch.style.background = '#f3ca63'; | |
btnFetch.onclick = () => openTrace(arrayBuffer); | |
logs.innerText += `Popups are blocked, you need to manually re-click the button`; | |
btnFetch.innerText = 'Popups blocked, click this button to open the trace file'; | |
return; | |
} | |
onMessageCallback = evt => onMessage(evt, win, arrayBuffer); | |
window.addEventListener('message', onMessageCallback); | |
timer = setInterval(() => win.postMessage('PING', ORIGIN), 50); | |
} | |
function onMessage(evt, win, arrayBuffer, traceTitle) { | |
if (evt.data !== 'PONG') return; | |
// We got a PONG, the UI is ready. | |
window.clearInterval(timer); | |
win.postMessage({ | |
perfetto: { | |
buffer: arrayBuffer, | |
title: 'Trace Title', | |
url: 'https://jsfiddle.net/primiano/1hd0a4wj/4/' | |
}}, ORIGIN); | |
window.removeEventListener('message', onMessageCallback); | |
} | |
if (location.hash.startsWith('#reopen=')) { | |
const traceUrl = location.hash.substr(8); | |
fetchAndOpen(traceUrl); | |
} | |
btnFetch.addEventListener('click', () => fetchAndOpen(document.getElementById('source').value)); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment