| <!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>/trace.json</option>
|
| </select>
|
|
|
| <br />
|
|
|
| <button type="button" id="btn_fetch">Open Perfetto</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 getMtime() {
|
| const mtime_resp = await fetch("/mtime");
|
| const mtime = await mtime_resp.text();
|
| return mtime;
|
| }
|
|
|
| async function fetchAndOpen(traceUrl) {
|
| logs.innerText += `Fetching trace from ${traceUrl}...\n`;
|
| const mtime = await getMtime();
|
| const resp = await fetch(traceUrl);
|
|
|
| const blob = await resp.blob();
|
| const arrayBuffer = await blob.arrayBuffer();
|
| logs.innerText += `fetch() complete, now passing to ui.perfetto.dev\n`;
|
| openTrace(arrayBuffer, traceUrl, mtime);
|
| }
|
|
|
| async function repoll(win, traceUrl, mtime) {
|
| const newMtime = await getMtime();
|
| console.log(newMtime, mtime);
|
| if (newMtime !== mtime) {
|
| logs.innerText += `Trace updated, fetching new version...\n`;
|
| const resp = await fetch(traceUrl);
|
| const blob = await resp.blob();
|
| const arrayBuffer = await blob.arrayBuffer();
|
| logs.innerText += `New trace fetched, opening...\n`;
|
| sendTrace(win, arrayBuffer, traceUrl);
|
| }
|
|
|
| setTimeout(() => repoll(win, traceUrl, newMtime), 500);
|
| }
|
|
|
| function sendTrace(win, arrayBuffer, traceUrl) {
|
| const reopenUrl = new URL(location.href);
|
| reopenUrl.hash = `#reopen=${traceUrl}`;
|
| logs.innerText += `Sending trace to UI\n`;
|
| win.postMessage(
|
| {
|
| perfetto: {
|
| buffer: arrayBuffer,
|
| title: "trace.json",
|
| url: reopenUrl.toString(),
|
| keepApiOpen: true,
|
| },
|
| },
|
| ORIGIN,
|
| );
|
| }
|
|
|
| function openTrace(arrayBuffer, traceUrl, mtime) {
|
| 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;
|
|
|
|
|
| window.clearInterval(timer);
|
| window.removeEventListener("message", onMessageHandler);
|
|
|
| sendTrace(win, arrayBuffer, traceUrl);
|
| setTimeout(() => repoll(win, traceUrl, mtime), 500);
|
| };
|
|
|
| window.addEventListener("message", onMessageHandler);
|
| }
|
|
|
|
|
| if (location.hash.startsWith("#reopen=")) {
|
| const traceUrl = location.hash.substr(8);
|
| fetchAndOpen(traceUrl);
|
| }
|
|
|
| btnFetch.onclick = () =>
|
| fetchAndOpen(document.getElementById("source").value);
|
| </script>
|
| </body>
|
| </html>
|
|
|
