-
-
Save chromy/170c11ce30d9084957d7f3aa065e89f8 to your computer and use it in GitHub Desktop.
| <!doctype html> | |
| <html lang="en-us"> | |
| <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> | |
| <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'); | |
| 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, traceUrl); | |
| } | |
| function openTrace(arrayBuffer, traceUrl) { | |
| const win = window.open(ORIGIN); | |
| if (!win) { | |
| btnFetch.style.background = '#f3ca63'; | |
| btnFetch.onclick = () => openTrace(arrayBuffer); | |
| logs.innerText += `Popups blocked, you need to manually click the button`; | |
| btnFetch.innerText = 'Popups blocked, click here to open the trace file'; | |
| return; | |
| } | |
| const timer = setInterval(() => win.postMessage('PING', ORIGIN), 50); | |
| const onMessageHandler = (evt) => { | |
| if (evt.data !== 'PONG') return; | |
| // We got a PONG, the UI is ready. | |
| window.clearInterval(timer); | |
| window.removeEventListener('message', onMessageHandler); | |
| const reopenUrl = new URL(location.href); | |
| reopenUrl.hash = `#reopen=${traceUrl}`; | |
| win.postMessage({ | |
| perfetto: { | |
| buffer: arrayBuffer, | |
| title: 'The Trace Title', | |
| url: reopenUrl.toString(), | |
| }}, ORIGIN); | |
| }; | |
| window.addEventListener('message', onMessageHandler); | |
| } | |
| // This is triggered when following the link from the Perfetto UI's sidebar. | |
| if (location.hash.startsWith('#reopen=')) { | |
| const traceUrl = location.hash.substr(8); | |
| fetchAndOpen(traceUrl); | |
| } | |
| btnFetch.onclick = () => 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