source/tools/profiler2/profiler2.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4 <meta charset="utf-8"/>
   5 <title>0 A.D. profiler UI</title>
   6 <script src="jquery-1.6.4.js"></script>
   7 <script src="utilities.js"></script>
   8 <script src="ReportDraw.js"></script>
   9 <script src="Profiler2Report.js"></script>
  10 <script src="profiler2.js"></script>
  11 <style>
  12 @keyframes rotate
  13 {
  14         0% {transform:translateY(-50%) rotate(0deg);}
  15         100% {transform:translateY(-50%) rotate(360deg);}
  16 }
  17 html { font-size: 14px; font-family: "Source Code Pro", monospace; padding:10px;}
  18 * { box-sizing:border-box; margin:0; padding: 0; }
  19 canvas { border: 1px #ddd solid; display:block;}
  20 header h1 { font-size:2em; }
  21 header nav { height:50px; margin:5px; border:1px solid gray; }
  22 header nav p { display:inline-block; height:100%; padding: 15px 10px; background:#aaa; cursor:pointer; border-right:1px solid gray; position:relative;}
  23 header nav p.loading { background:#ccf; cursor:progress; padding-right:15px; }
  24 header nav p.loading:after { content:""; position:absolute; right:5px; top:50%; transform:translateY(-50%); height:5px;width:5px;background:#ccc;border:1px solid gray; animation:rotate 2s infinite; }
  25 header nav p.fail { background:#faa;cursor:not-allowed;}
  26 header nav p.active { cursor:pointer; background:#eee; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);font-weight:bold;}
  27 #tooltip { background: #ffd; padding: 4px; font: 12px sans-serif; border: 1px #880 solid; }
  28 #tooltip.long { -moz-column-count: 2; }
  29 #choices { display: flex; flex-wrap:wrap;}
  30 #choices section { position:relative;}
  31 #choices section h2 { height:25px; }
  32 #choices section aside { width:200px; position:absolute; top: 0px; right : 1px; border-left:1px solid gray;border-bottom:1px solid gray; background:rgba(255,255,255,0.5);}
  33 #choices section aside:hover { opacity:0.2; }
  34 #choices section aside p { margin:4px 0px 4px 2px; border-left:15px solid; padding-left: 5px; font-size:0.8rem; }
  35 #choices section input { height:25px; vertical-align:top; }
  36 #choices section label { line-height:25px; padding-left:5px; }
  37 #choices nav { flex-shrink:0; width:300px; height:600px; overflow-y: scroll;}
  38 #choices nav p { margin:2px; cursor:pointer;}
  39 #choices nav p:hover { background:#eee;}
  40 #choices nav p.active { background:#fee;}
  41 #comparison { min-width:400px; }
  42 #comparison table { border-collapse:collapse; margin: 20px 10px;}
  43 #comparison td,#comparison th { min-width:80px;height:25px;text-align: center;}
  44 #comparison th { border: 1px solid #888; background:#eee; }
  45 #comparison td { border: 1px solid #bbb; }
  46 </style>
  47 </head>
  48 <body>
  49 <button onclick="save_as_file()">Save Live Report to file</button>
  50 <label for="gameport">Port:</label>
  51 <input id="gameport" type="text" value="8000" onchange="updatePort()">
  52
  53 <header>
  54         <h1>Open reports</h1>
  55         <p>Use the input field below to load a new report (from JSON)</p>
  56         <input type="file" id="report_load_input" name="files[]" />
  57         <nav></nav>
  58 </header>
  59
  60 <p>Click on the following timelines to zoom.</p>
  61 </a><div id="timelines"></div>
  62
  63 <div id="choices">
  64         <div style="width:100%">
  65                 <h1>Analysis</h1>
  66                 <p>Click on any of the event names in "choices" to see more details about them. Load more reports to compare.</p>
  67         </div>
  68         <section id="frequency_graph">
  69                 <h2>Frequency Graph</h2>
  70                 <input type="checkbox" id="fulln" name="fulln" value="fulln" onchange="update_analysis()"><label for="fulln">Show for all frames</label>
  71                 <div style="position:relative">
  72                         <aside></aside>
  73                         <canvas id="canvas_frequency" width="600" height="600"></canvas
  74 html5 >         </div>
  75         </section>
  76         <section id="history_graph">
  77                 <h2>Frame-by-Frame Graph</h2>
  78                 <input type="range" id="smooth" name="smooth" onchange="update_analysis()" min="0" max="10" step="1" value="3"/><label for="smooth">Degree of smoothing</label>
  79                 <div style="position:relative">
  80                         <aside></aside>
  81                         <div style="width:602px;overflow:auto;"><canvas id="canvas_history" width="600" height="600"></canvas></div>
  82                 </div>
  83         </section>
  84         <nav>
  85                 <h3>Choices</h3>
  86         </nav>
  87         <div id="comparison">
  88                 <h3>Report Comparison</h3>
  89         </div>
  90 </div>
  91 <div id="tooltip" style="position: absolute; visibility: hidden"></div>
  92
  93 <pre id="debug"></pre>
  94 </body>
  95 </html>