chrome/browser/resources/profiler/profiler.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   6 <script src="profiler.js"></script>
   7 <script src="chrome://resources/js/util.js"></script>
   8
   9 <style>
  10
  11 body {
  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>