| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="profiler.js"></script> |
| <script src="chrome://resources/js/util.js"></script> |
| |
| <style> |
| |
| body { |
| font-family: sans-serif; |
| font-size: 80%; |
| } |
| |
| /* |
| * The following styles are for a TABLE that uses a thin collapsed border, and |
| * has a blue heading. When you hover over rows, they turn yellow. |
| */ |
| table.results-table { |
| border-collapse:collapse; |
| } |
| |
| table.results-table, |
| .results-table th, |
| .results-table td { |
| border: 1px solid #777; |
| padding-right: 4px; |
| padding-left: 4px; |
| } |
| |
| .results-table th { |
| background: rgb(224,236,255); |
| } |
| |
| .results-table tbody tr:hover { |
| background-color:#ffb; |
| } |
| |
| /* |
| * Make the column headers change the mouse to a "hand" cursor, sine they are |
| * clickable. |
| */ |
| .results-table th { |
| cursor: pointer; |
| } |
| |
| /* |
| * This is row which displays aggregate totals for each column. |
| */ |
| .results-table .aggregator-row { |
| background: #FFCC99; |
| } |
| |
| /* |
| * This is the row at the end of tables which explains how many rows were shown, |
| * and how many were hidden. |
| */ |
| .results-table .truncation-row { |
| background: #eee; |
| } |
| |
| /*---------------------------------------------------------------------------*/ |
| |
| /* |
| * When grouping data, the table for each bucket is wrapped in a DIV with this |
| * class. Used to add a bit of spacing between groups. |
| */ |
| .group-container { |
| margin-top: 2ex; |
| margin-bottom: 2ex; |
| } |
| |
| /* |
| * The title for each group is enclosed in a DIV of the following class. |
| */ |
| .group-title-container { |
| font-size: 140%; |
| margin-bottom: 1ex; |
| } |
| |
| /* Styling to make a span look like a clickable link */ |
| .pseudo-link { |
| color: blue; |
| cursor: pointer; |
| text-decoration: underline; |
| } |
| |
| .selected_snapshot { |
| font-weight: bold; |
| color: purple; |
| } |
| |
| #snapshot-selection-summary { |
| margin-top: 1ex; |
| font-weight: bold; |
| font-style: italic; |
| color: green; |
| } |
| |
| .errormsg { |
| color: red; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <b>Save:</b><button id=save-snapshots-button>Save</button> |
| <b>Restore:</b> <input type=file id=snapshot-file-loader> |
| <span id=file-load-error hidden class=errormsg></span> |
| |
| <hr> |
| |
| <table width=100%> |
| <tr> |
| <td> |
| <b>Group by: </b> <span id=group-by-container></span> |
| <b>Sort by: </b> <span id=sort-by-container></span> |
| </td> |
| <td align=right> |
| <span id=snapshots-link class=pseudo-link>[snapshots]</span> |
| <span id=edit-columns-link class=pseudo-link>[columns]</span> |
| <input type='search' incremental id='filter-search'> |
| </td> |
| </tr> |
| <tr id=edit-columns-row style='display:none'> |
| <td colspan=2> |
| <div> |
| <b>Merge: </b><span id=column-merge-toggles-container></span> |
| <label><input type=checkbox id='merge-similar-threads-checkbox' checked> |
| Merge similar threads.</label> |
| </div> |
| <div> |
| <b>Show: </b><span id=column-toggles-container></span> |
| </div> |
| </td> |
| </tr> |
| <tr id=snapshots-row style='display:none'> |
| <td colspan=2> |
| <button id=take-snapshot-button>Add snapshot</button> |
| <table><tbody id=snapshots-tbody></tbody></table> |
| <div id=snapshot-selection-summary></div> |
| </td> |
| </tr> |
| </table> |
| |
| <hr> |
| |
| <div id='results-div'></div> |
| |
| <!-- TODO(eroman): This should only be a short-lived solution, |
| which will eventually be superceded by snapshotting --> |
| <span id=reset-data-link class=pseudo-link>[Reset tracking data]</span> |
| |
| <a style="display: none" id="download-anchor" download="profile.json"></a> |
| </body> |
| </html> |
