| <!doctype html> |
| <html lang='en-us'> |
| <head> |
| <script src="open_perfetto_trace_bundle.js"></script> |
| <style type="text/css"> |
| html { font-family: Roboto, sans-serif; } |
| main {display: flex; flex-direction: column; max-width: 800px;} |
| main > * { margin: 5px; } |
| </style> |
| </head> |
| <body> |
| |
| |
| <main> |
| <select id='trace_source' size='5'> |
| <option>https://storage.googleapis.com/perfetto-misc/example_android_trace_15s</option> |
| <option selected>https://storage.googleapis.com/perfetto-misc/chrome_example_wikipedia.perfetto_trace.gz</option> |
| </select> |
| <label>Or select a local file: <input type="file" id="file"></label> |
| <input type='button' value='Fetch and open selected trace' id='fetch'> |
| <label><input type='checkbox' id='show_progress' checked="checked">Show progress dialog</label> |
| <label><input type='checkbox' id='new_tab'>Open in new tab</label> |
| <label><input type='checkbox' id='hide_sidebar'>Hide sidebar in Perfetto UI</label> |
| |
| </main> |
| |
| <script type='text/javascript'> |
| |
| function getCheckbox(id) { |
| return document.getElementById(id).checked; |
| } |
| |
| document.getElementById('fetch').addEventListener('click', () => { |
| const opts = {}; |
| |
| if (location.host.startsWith('127.0.0.1') || |
| location.host.startsWith('localhost')) { |
| opts.uiUrl = `${location.protocol}//${location.host}`; |
| } |
| |
| opts.statusDialog = getCheckbox('show_progress'); |
| opts.newTab = getCheckbox('new_tab'); |
| opts.hideSidebar = getCheckbox('hide_sidebar'); |
| |
| const fileInput = document.getElementById('file'); |
| let traceSource; |
| if (fileInput.files.length > 0) { |
| traceSource = fileInput.files[0] |
| } else { |
| traceSource = document.getElementById('trace_source').value; |
| } |
| |
| open_perfetto_trace(traceSource, opts); |
| }); |
| |
| </script> |
| </body> |
| </html> |
| |
