Page MenuHomeWildfire Games
Differential D5033 Diff 21879 source/tools/profiler2/profiler2.html

Changeset View

Standalone View

View Options

source/tools/profiler2/profiler2.html

Show All 20 Lines
header nav { height:50px; margin:5px; border:1px solid gray; } header nav { height:50px; margin:5px; border:1px solid gray; }
header nav p { display:inline-block; height:100%; padding: 15px 10px; background:#aaa; cursor:pointer; border-right:1px solid gray; position:relative;} header nav p { display:inline-block; height:100%; padding: 15px 10px; background:#aaa; cursor:pointer; border-right:1px solid gray; position:relative;}
header nav p.loading { background:#ccf; cursor:progress; padding-right:15px; } header nav p.loading { background:#ccf; cursor:progress; padding-right:15px; }
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; } 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; }
header nav p.fail { background:#faa;cursor:not-allowed;} header nav p.fail { background:#faa;cursor:not-allowed;}
header nav p.active { cursor:pointer; background:#eee; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);font-weight:bold;} header nav p.active { cursor:pointer; background:#eee; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);font-weight:bold;}
#tooltip { background: #ffd; padding: 4px; font: 12px sans-serif; border: 1px #880 solid; } #tooltip { background: #ffd; padding: 4px; font: 12px sans-serif; border: 1px #880 solid; }
#tooltip.long { -moz-column-count: 2; } #tooltip.long { -moz-column-count: 2; }
#choices { display: flex; flex-wrap:wrap;} #choices { max-width: 1550px; }
#choices section { position:relative;} #choices section { position:relative; }
#choices section h2 { height:25px; } #choices section h2 { height:25px; }
#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);} #choices section aside { max-width:400px; position:absolute; top: 0px; right : 1px; border-left:1px solid gray;border-bottom:1px solid gray; background:rgba(255,255,255,0.5);}
#choices section aside:hover { opacity:0.2; } #choices section aside:hover { opacity:0.2; }
#choices section aside p { margin:4px 0px 4px 2px; border-left:15px solid; padding-left: 5px; font-size:0.8rem; } #choices section aside p { margin:4px 0px 4px 2px; border-left:15px solid; padding-left: 5px; font-size:0.8rem; }
#choices section input { height:25px; vertical-align:top; } #choices section input { height:25px; vertical-align:top; }
#choices section label { line-height:25px; padding-left:5px; } #choices section label { line-height:25px; padding-left:5px; }
#choices nav { flex-shrink:0; width:300px; height:600px; overflow-y: scroll;} #choices nav {
#choices nav p { margin:2px; cursor:pointer;} flex-grow: 1;
columns: 300px auto;
min-height: 200px;
margin-top: 1rem;
margin-bottom: 1rem;
}
#choices nav h3 {grid-column: 1 / -1; }
#choices nav p { margin:2px; cursor:pointer; background:#fafafa; }
#choices nav p:hover { background:#eee;} #choices nav p:hover { background:#eee; }
#choices nav p.active { background:#fee;} #choices nav p.active { background:#fee; }
#comparison { min-width:400px; } #comparison { min-width:400px; }
#comparison table { border-collapse:collapse; margin: 20px 10px;} #comparison table { border-collapse:collapse; margin: 20px 10px;}
#comparison td,#comparison th { min-width:80px;height:25px;text-align: center;} #comparison td, #comparison th { min-width:80px;height:25px;text-align: center; padding: 0 0.2rem 0 0.2rem; }
#comparison th { border: 1px solid #888; background:#eee; } #comparison th { border: 1px solid #888; background:#eee; }
#comparison td { border: 1px solid #bbb; } #comparison td { border: 1px solid #bbb; }
</style> </style>
</head> </head>
<body> <body>
<button onclick="save_as_file()">Save Live Report to file</button> <button onclick="save_as_file()">Save Live Report to file</button>
<label for="gameport">Port:</label> <label for="gameport">Port:</label>
<input id="gameport" type="text" value="8000" onchange="updatePort()"> <input id="gameport" type="text" value="8000" onchange="updatePort()">
<header> <header>
<h1>Open reports</h1> <h1>Open reports</h1>
<p>Use the input field below to load a new report (from JSON)</p> <p>Use the input field below to load a new report (from JSON)</p>
<input type="file" id="report_load_input" name="files[]" /> <input type="file" id="report_load_input" name="files[]" />
<nav></nav> <nav></nav>
</header> </header>
<p>Click on the following timelines to zoom.</p> <p>Click on the following timelines to zoom.</p>
</a><div id="timelines"></div> </a><div id="timelines"></div>
<div id="choices"> <div id="choices">
<div style="width:100%"> <div style="width:100%; margin-bottom:1rem">
<h1>Analysis</h1> <h1>Analysis</h1>
<p>Click on any of the event names in "choices" to see more details about them. Load more reports to compare.</p> <p>Click on any of the event names in "choices" to see more details about them. Load more reports to compare.</p>
</div> </div>
<div style="display: flex; flex-wrap:wrap-reverse;">
<section id="frequency_graph"> <section id="frequency_graph">
<h2>Frequency Graph</h2> <h2>Frequency Graph</h2>
<input type="checkbox" id="fulln" name="fulln" value="fulln" onchange="update_analysis()"><label for="fulln">Show for all frames</label> <input type="checkbox" id="fulln" name="fulln" value="fulln" onchange="update_analysis()"><label for="fulln">Hide frames without events</label>
<div style="position:relative"> <div style="position:relative">
<aside></aside> <aside></aside>
<canvas id="canvas_frequency" width="600" height="600"></canvas <canvas id="canvas_frequency" width="600" height="600"></canvas
html5 > </div> html5 > </div>
</section> </section>
<section id="history_graph"> <section id="history_graph">
<h2>Frame-by-Frame Graph</h2> <h2>Frame-by-Frame Graph</h2>
<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> <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>
<div style="position:relative"> <div style="position:relative">
<aside></aside> <aside></aside>
<div style="width:602px;overflow:auto;"><canvas id="canvas_history" width="600" height="600"></canvas></div> <div style="width:602px;overflow:auto;"><canvas id="canvas_history" width="600" height="600" style="cursor: pointer;"></canvas></div>
</div> </div>
</section> </section>
<nav> <nav>
<h3>Choices</h3> <h3>Choices</h3>
</nav> </nav>
<div id="comparison"> </div>
<h3>Report Comparison</h3> <div id="comparison" style="margin-top:1rem">
<h2>Report Comparison</h2>
</div> </div>
</div> </div>
<div id="tooltip" style="position: absolute; visibility: hidden"></div> <div id="tooltip" style="position: absolute; visibility: hidden"></div>
<pre id="debug"></pre> <pre id="debug"></pre>
</body> </body>
</html> </html>
Wildfire Games · Phabricator