1<!doctype html> 2<html lang='en-us'> 3<head> 4 <script src="open_perfetto_trace_bundle.js"></script> 5 <style type="text/css"> 6 html { font-family: Roboto, sans-serif; } 7 main {display: flex; flex-direction: column; max-width: 800px;} 8 main > * { margin: 5px; } 9 </style> 10</head> 11<body> 12 13 14<main> 15 <select id='trace_source' size='5'> 16 <option>https://storage.googleapis.com/perfetto-misc/example_android_trace_15s</option> 17 <option selected>https://storage.googleapis.com/perfetto-misc/chrome_example_wikipedia.perfetto_trace.gz</option> 18 </select> 19 <label>Or select a local file: <input type="file" id="file"></label> 20 <input type='button' value='Fetch and open selected trace' id='fetch'> 21 <label><input type='checkbox' id='show_progress' checked="checked">Show progress dialog</label> 22 <label><input type='checkbox' id='new_tab'>Open in new tab</label> 23 <label><input type='checkbox' id='hide_sidebar'>Hide sidebar in Perfetto UI</label> 24 25</main> 26 27<script type='text/javascript'> 28 29function getCheckbox(id) { 30 return document.getElementById(id).checked; 31} 32 33document.getElementById('fetch').addEventListener('click', () => { 34 const opts = {}; 35 36 if (location.host.startsWith('127.0.0.1') || 37 location.host.startsWith('localhost')) { 38 opts.uiUrl = `${location.protocol}//${location.host}`; 39 } 40 41 opts.statusDialog = getCheckbox('show_progress'); 42 opts.newTab = getCheckbox('new_tab'); 43 opts.hideSidebar = getCheckbox('hide_sidebar'); 44 45 const fileInput = document.getElementById('file'); 46 let traceSource; 47 if (fileInput.files.length > 0) { 48 traceSource = fileInput.files[0] 49 } else { 50 traceSource = document.getElementById('trace_source').value; 51 } 52 53 open_perfetto_trace(traceSource, opts); 54}); 55 56</script> 57</body> 58</html> 59 60