primiano · June 6, 2024 13:44
diff --git a/Perfetto UI postmessage + plugin args b/Perfetto UI postmessage + plugin args
 <!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 = 'http://localhost:10000';

 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(),
        pluginArgs: {
          'com.example.Skeleton': {
            'foo': 'bar',
            'time': Date.now(),
          }
        }
    }}, 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>
	<!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 = 'http://localhost:10000';

	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(),
	pluginArgs: {
	'com.example.Skeleton': {
	'foo': 'bar',
	'time': Date.now(),
	}
	}
	}}, 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>