1 <!doctype html> 2 <html lang="en-us"> 3 <head> 4 <title>Perfetto - Query</title> 5 <link rel="icon" type="image/png" href="assets/logo.png"> 6 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> 7 <style> 8 * { 9 box-sizing: border-box; 10 } 11 12 #root { 13 margin: 0 auto; 14 max-width: 1200px; 15 } 16 17 input[type=text] { 18 font-size: 150%; 19 width: 100%; 20 } 21 22 .query-list { 23 } 24 25 .query { 26 margin: 2rem 0; 27 border-left: 10px grey; 28 display: grid; 29 grid-template: "text time" 30 "content content"; 31 } 32 33 .query-content { 34 grid-area: content; 35 } 36 37 .query-content:empty { 38 background: grey; 39 } 40 41 .query-text { 42 grid-area: text; 43 font-family: monospace; 44 } 45 46 .query-time{ 47 grid-area: time; 48 } 49 50 table { 51 width: 100%; 52 margin-left: -1rem; 53 } 54 55 tr { 56 } 57 58 tr:hover { 59 background-color: #0000000a; 60 } 61 62 th { 63 font-weight: normal; 64 font-style: italic; 65 } 66 67 td { 68 padding: 0.25rem 0.25rem; 69 } 70 71 tr > td:first-child { 72 padding-left: 1rem; 73 } 74 75 tr > td:last-child { 76 padding-right: 1rem; 77 } 78 </style> 79 </head> 80 <body> 81 <div id="root"></div> 82 <script src="/query_bundle.js"></script> 83 </body> 84 </html> 85
