Home | History | Annotate | Download | only in profiler 
      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <script src="profiler.js"></script>
      6 <script src="chrome://resources/js/util.js"></script>
      7 
      8 <style>
      9 
     10 body {
     11   font-family: sans-serif;
     12   font-size: 80%;
     13 }
     14 
     15 /*
     16  * The following styles are for a TABLE that uses a thin collapsed border, and
     17  * has a blue heading. When you hover over rows, they turn yellow.
     18  */
     19 table.results-table {
     20   border-collapse:collapse;
     21 }
     22 
     23 table.results-table,
     24 .results-table th,
     25 .results-table td {
     26   border: 1px solid #777;
     27   padding-right: 4px;
     28   padding-left: 4px;
     29 }
     30 
     31 .results-table th {
     32   background: rgb(224,236,255);
     33 }
     34 
     35 .results-table tbody tr:hover {
     36   background-color:#ffb;
     37 }
     38 
     39 /*
     40  * Make the column headers change the mouse to a "hand" cursor, sine they are
     41  * clickable.
     42  */
     43 .results-table th {
     44   cursor: pointer;
     45 }
     46 
     47 /*
     48  * This is row which displays aggregate totals for each column.
     49  */
     50 .results-table .aggregator-row {
     51   background: #FFCC99;
     52 }
     53 
     54 /*
     55  * This is the row at the end of tables which explains how many rows were shown,
     56  * and how many were hidden.
     57  */
     58 .results-table .truncation-row {
     59   background: #eee;
     60 }
     61 
     62 /*---------------------------------------------------------------------------*/
     63 
     64 /*
     65  * When grouping data, the table for each bucket is wrapped in a DIV with this
     66  * class. Used to add a bit of spacing between groups.
     67  */
     68 .group-container {
     69   margin-top: 2ex;
     70   margin-bottom: 2ex;
     71 }
     72 
     73 /*
     74  * The title for each group is enclosed in a DIV of the following class.
     75  */
     76 .group-title-container {
     77   font-size: 140%;
     78   margin-bottom: 1ex;
     79 }
     80 
     81 /* Styling to make a span look like a clickable link */
     82 .pseudo-link {
     83   color: blue;
     84   cursor: pointer;
     85   text-decoration: underline;
     86 }
     87 
     88 .selected_snapshot {
     89   font-weight: bold;
     90   color: purple;
     91 }
     92 
     93 #snapshot-selection-summary {
     94   margin-top: 1ex;
     95   font-weight: bold;
     96   font-style: italic;
     97   color: green;
     98 }
     99 
    100 .errormsg {
    101   color: red;
    102 }
    103 
    104 </style>
    105 </head>
    106 <body>
    107   <b>Save:</b><button id=save-snapshots-button>Save</button>
    108   <b>Restore:</b> <input type=file id=snapshot-file-loader>
    109   <span id=file-load-error hidden class=errormsg></span>
    110 
    111   <hr>
    112 
    113   <table width=100%>
    114     <tr>
    115       <td>
    116         <b>Group by: </b> <span id=group-by-container></span> 
    117         <b>Sort by: </b> <span id=sort-by-container></span> 
    118       </td>
    119       <td align=right>
    120         <span id=snapshots-link class=pseudo-link>[snapshots]</span>
    121         <span id=edit-columns-link class=pseudo-link>[columns]</span>
    122         <input type='search' incremental id='filter-search'>
    123       </td>
    124     </tr>
    125     <tr id=edit-columns-row style='display:none'>
    126       <td colspan=2>
    127         <div>
    128           <b>Merge: </b><span id=column-merge-toggles-container></span>
    129             <label><input type=checkbox id='merge-similar-threads-checkbox' checked>
    130                Merge similar threads.</label>
    131         </div>
    132         <div>
    133           <b>Show: </b><span id=column-toggles-container></span>
    134         </div>
    135       </td>
    136     </tr>
    137     <tr id=snapshots-row style='display:none'>
    138       <td colspan=2>
    139         <button id=take-snapshot-button>Add snapshot</button>
    140         <table><tbody id=snapshots-tbody></tbody></table>
    141         <div id=snapshot-selection-summary></div>
    142       </td>
    143     </tr>
    144   </table>
    145 
    146   <hr>
    147 
    148   <div id='results-div'></div>
    149 
    150   <!-- TODO(eroman): This should only be a short-lived solution,
    151        which will eventually be superceded by snapshotting -->
    152   <span id=reset-data-link class=pseudo-link>[Reset tracking data]</span>
    153 
    154   <a style="display: none" id="download-anchor" download="profile.json"></a>
    155 </body>
    156 </html>
    157