-
-
Save chromy/170c11ce30d9084957d7f3aa065e89f8 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"> | |
| <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