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