f81afef3f52cadfd22a3d2cc652d0bb3762c049a
[WebKit-https.git] / Source / WebCore / inspector / front-end / timelinePanel.css
1 /*
2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
4  *
5  * Redistribution and use in source and binary forms, with or without
6  * modification, are permitted provided that the following conditions
7  * are met:
8  *
9  * 1.  Redistributions of source code must retain the above copyright
10  *     notice, this list of conditions and the following disclaimer.
11  * 2.  Redistributions in binary form must reproduce the above copyright
12  *     notice, this list of conditions and the following disclaimer in the
13  *     documentation and/or other materials provided with the distribution.
14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
15  *     its contributors may be used to endorse or promote products derived
16  *     from this software without specific prior written permission.
17  *
18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28  */
29
30 #timeline-overview-panel {
31     position: absolute;
32     top: 0;
33     left: 0;
34     right: 0;
35     height: 80px;
36 }
37
38 #timeline-overview-panel .timeline-graph-bar {
39     pointer-events: none;
40 }
41
42 .timeline .sidebar {
43     overflow-y: hidden;
44     min-height: 100%;
45     bottom: auto;
46 }
47
48 .timeline-sidebar-background {
49     top: 90px;
50     bottom: 0;
51 }
52
53 #timeline-overview-separator {
54     position: absolute;
55     top: 80px;
56     left: 0;
57     right: 0;
58     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
59     border-top: 1px solid rgb(140, 140, 140);
60     border-bottom: 1px solid rgb(115, 115, 115);
61     height: 10px;
62 }
63
64 #timeline-overview-sidebar {
65     position: absolute;
66     width: 200px;
67     top: 0px;
68     bottom: 0px;
69     left: 0px;
70     padding-top: 2px;
71     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
72     border-right: 1px solid rgb(163, 163, 163);
73 }
74
75 #timeline-overview-grid {
76     position: absolute;
77     top: 0px;
78     bottom: 0px;
79     left: 200px;
80     right: 0px;
81     background-color: rgb(255, 255, 255);
82 }
83
84 .timeline-window-selector {
85     position: absolute;
86     top: 0;
87     bottom: 0;
88     background-color: rgba(125, 173, 217, 0.5);
89     z-index: 250;
90 }
91
92 #timeline-overview-window {
93     background-color: white;
94     position: absolute;
95     left: 0;
96     right: 0;
97     top: 0;
98     bottom: 60px;
99     z-index: 150;
100 }
101
102 .timeline-overview-dividers-background {
103     left: 0%;
104     right: 0%;
105     top: 0px;
106     bottom: 60px;
107     background-color: black;
108     position: absolute;
109 }
110
111 .timeline-overview-window-rulers {
112     top: 0;
113     bottom: 0;
114     position: absolute;
115     opacity: 0.2;
116     border-right: 1px solid black;
117     border-left: 1px solid black;
118     z-index: 150;
119 }
120
121 .timeline-window-resizer {
122     position: absolute;
123     top: 0px;
124     bottom: 60px;
125     width: 5px;
126     margin-left: -3px;
127     margin-right: -2px;
128     background-color: rgb(153, 153, 153);
129     z-index: 500;
130     cursor: ew-resize;
131     -webkit-border-radius: 2px;
132     -webkit-box-shadow: white 1px 0 0, white -1px 0 0, white 0 1px 0, white 0 -1px 0;
133 }
134
135 #timeline-overview-grid #resources-graphs {
136     position: absolute;
137     top: 0;
138     left: 0;
139     right: 0;
140     height: 80px;
141 }
142
143 #timeline-container {
144     position: absolute;
145     top: 90px;
146     left: 0;
147     bottom: 0;
148     right: 0;
149     border-right: 0 none transparent;
150     overflow-y: auto;
151     overflow-x: hidden;
152 }
153
154 #timeline-container .split-view-sidebar-left {
155     z-index: 1;
156 }
157
158 .timeline-category-statusbar-item {
159     height: 24px;
160     line-height: 24px;
161     padding-left: 6px;
162     white-space: nowrap;
163     text-overflow: ellipsis;
164     overflow: hidden;
165     font-weight: bold;
166 }
167
168 .timeline-category-statusbar-item .timeline-category-checkbox {
169     width: 10px;
170     height: 11px;
171     margin: 0 3px 0 5px;
172     padding: 0;
173     background-image: url(Images/timelineCheckmarks.png);
174     background-repeat: no-repeat;
175     background-position: 0 -66px;
176     vertical-align: -1px;
177     -webkit-appearance: none;
178 }
179
180 .timeline-category-statusbar-item .timeline-category-checkbox:checked {
181     background-position-x: -10px;
182 }
183
184 .timeline-category-statusbar-item.timeline-category-loading .timeline-category-checkbox {
185     background-position-y: 0;
186 }
187
188 .timeline-category-statusbar-item.timeline-category-scripting .timeline-category-checkbox {
189     background-position-y: -33px;
190 }
191
192 .timeline-category-statusbar-item.timeline-category-rendering .timeline-category-checkbox {
193     background-position-y: -11px;
194 }
195
196 .timeline-tree-item {
197     height: 18px;
198     line-height: 15px;
199     padding-right: 5px;
200     padding-left: 10px;
201     padding-top: 2px;
202     white-space: nowrap;
203     text-overflow: ellipsis;
204     overflow: hidden;
205 }
206
207 .timeline-expandable {
208     position: absolute;
209     border-left: 1px solid rgb(163, 163, 163);
210 }
211
212 .timeline-expandable-left {
213     position: absolute;
214     top: 0;
215     bottom: 0;
216     left: 0;
217     width: 3px;
218     border-top: 1px solid rgb(163, 163, 163);
219     border-bottom: 1px solid rgb(163, 163, 163);
220 }
221
222 .timeline-expandable-collapsed {
223     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
224     background-position-x: 1px;
225     background-position-y: 2px;
226     background-repeat: no-repeat;
227 }
228
229 .timeline-expandable-expanded {
230     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
231     background-position-x: 1px;
232     background-position-y: 3px;
233     background-repeat: no-repeat;
234 }
235
236 .timeline-tree-item .type {
237     padding-left: 14px;
238 }
239
240 .timeline-tree-item .count {
241     font-family: Helvetica, Arial, sans-serif;
242     font-weight: bold;
243 }
244
245 .timeline-tree-item .timeline-tree-icon {
246     background-image: url(Images/timelineDots.png);
247     margin-top: 2px;
248     width: 12px;
249     height: 12px;
250     position: absolute;
251 }
252
253 .timeline-tree-item.even {
254     background-color: rgba(0, 0, 0, 0.05);
255 }
256
257 .timeline-tree-item .data.dimmed {
258     color: rgba(0, 0, 0, 0.7);
259 }
260
261 #timeline-overview-timelines,
262 #timeline-overview-memory {
263     position: absolute;
264     left: 0;
265     right: 0;
266     bottom: 0;
267     top: 20px;
268     z-index: 160;
269 }
270
271 #timeline-overview-memory > canvas {
272     position: absolute;
273     left: 0;
274     right: 0;
275     bottom: 0;
276     top: 5px;
277 }
278
279
280 #timeline-graphs {
281     position: absolute;
282     left: 0;
283     right: 0;
284     max-height: 100%;
285     top: 19px;
286 }
287
288 .timeline-graph-side {
289     position: relative;
290     height: 18px;
291     padding: 0 5px;
292     white-space: nowrap;
293     margin-top: 0px;
294     border-top: 1px solid transparent;
295     overflow: hidden;
296     pointer-events: none;
297 }
298
299 .timeline-overview-graph-side {
300     height: 20px;
301     z-index: 170;
302     pointer-events: none;
303 }
304
305 .timeline-overview-graph-side .timeline-graph-bar {
306     height: 13px;
307 }
308
309 .timeline-graph-bar-area {
310     position: absolute;
311     top: 0;
312     bottom: 0;
313     right: 0;
314     left: 3px;
315     pointer-events: none;
316 }
317
318 .timeline-graph-bar {
319     position: absolute;
320     top: 0;
321     bottom: 0;
322     margin: auto -2px;
323     border-width: 4px 4px 5px;
324     height: 9px;
325     min-width: 5px;
326     opacity: 0.8;
327     -webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
328     z-index: 180;
329     pointer-events: visibleFill;
330 }
331
332 .timeline-graph-bar.with-children {
333     opacity: 0.2;
334 }
335
336 .timeline-graph-bar.cpu {
337     opacity: 0.6;
338 }
339
340 .timeline-graph-side.even {
341     background-color: rgba(0, 0, 0, 0.05);
342 }
343
344 .timeline-category-loading .timeline-graph-bar {
345     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
346 }
347
348 .timeline-category-scripting .timeline-graph-bar {
349     -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
350 }
351
352 .timeline-category-rendering .timeline-graph-bar {
353     -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
354 }
355
356 .timeline-aggregated-category {
357     display: inline-block;
358     height: 11px;
359     margin-right: 2px;
360     margin-left: 6px;
361     position: relative;
362     top: 2px;
363     width: 10px;
364 }
365
366 .timeline-loading {
367     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
368 }
369
370 .timeline-scripting {
371     -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
372 }
373
374 .timeline-rendering {
375     -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
376 }
377
378 .popover .timeline-aggregated-category.timeline-loading {
379     margin-left: 0px;
380 }
381
382 .timeline-category-loading .timeline-tree-icon {
383     background-position-y: 0px;
384 }
385
386 .timeline-category-scripting .timeline-tree-icon {
387     background-position-y: 48px;
388 }
389
390 .timeline-category-rendering .timeline-tree-icon {
391     background-position-y: 72px;
392 }
393
394 .timeline-details {
395     -webkit-user-select: text;
396     vertical-align: top;
397 }
398
399 .timeline-function-name {
400     text-align: right;
401 }
402
403 .timeline-stacktrace-title {
404     padding-top: 4px;
405 }
406
407 .timeline-details-row-title {
408     font-weight: bold;
409     text-align: right;
410     white-space: nowrap;
411 }
412
413 .timeline-details-row-data {
414     white-space: nowrap;
415 }
416
417 .timeline-details-title {
418     border-bottom: 1px solid #B8B8B8;
419     font-size: 11px;
420     font-weight: bold;
421     padding-bottom: 5px;
422     padding-top: 0px;
423     white-space: nowrap;
424 }
425
426 .timeline-filter-status-bar-item .glyph {
427     -webkit-mask-position: -32px -48px;
428 }
429
430 .timeline-filter-status-bar-item.toggled-on .glyph {
431     background-color: rgb(66, 129, 235) !important;
432 }
433
434 .garbage-collect-status-bar-item .glyph {
435     -webkit-mask-position: -128px -24px;
436 }
437
438 .timeline-records-counter, .storage-application-cache-status, .storage-application-cache-connectivity {
439     font-size: 11px;
440     text-shadow: white 0 1px 0;
441 }
442
443 #main-status-bar > .timeline-records-counter {
444     float: right;
445     margin-top: 4px;
446     margin-right: 25px;
447 }
448
449 #counters > .timeline-records-counter {
450     float: left;
451     margin-top: -2px;
452 }
453
454 #resources-container-content {
455     overflow: visible;
456     min-height: 100%;
457 }
458
459 #resources-graphs {
460     position: absolute;
461     left: 0;
462     right: 0;
463     max-height: 100%;
464     top: 112px;
465 }
466
467 .resources-graph-side {
468     position: relative;
469     height: 36px;
470     padding: 0 5px;
471     white-space: nowrap;
472     margin-top: 1px;
473     border-top: 1px solid transparent;
474     overflow: hidden;
475 }
476
477 .resources-graph-bar-area {
478     position: absolute;
479     top: 0;
480     bottom: 0;
481     right: 8px;
482     left: 9px;
483 }
484
485 .resources-time-graph-sidebar-item .icon {
486     content: url(Images/resourcesTimeGraphIcon.png);
487 }
488
489 .resources-size-graph-sidebar-item .icon {
490     content: url(Images/resourcesSizeGraphIcon.png);
491 }
492
493 .resources-size-graph-sidebar-item .icon {
494     content: url(Images/resourcesSizeGraphIcon.png);
495 }
496
497 .memory-graph-label {
498     position: absolute;
499     top: 5px;
500     left: 5px;
501     font-size: 9px;
502     color: rgb(50%, 50%, 50%);
503     white-space: nowrap;
504 }
505
506 #timeline-memory-splitter {
507     position: absolute;
508     z-index: 5;
509     left: 0;
510     right: 0;
511     height: 5px;
512     cursor: ns-resize;
513 }
514
515 #memory-counters-graph {
516     overflow: hidden;
517 }
518
519 #memory-graphs-container {
520     border-top: 1px solid #AAA;
521 }
522
523 #memory-graphs-container .split-view-contents {
524     overflow: hidden;
525 }
526
527 .timeline-marker {
528     position: absolute;
529     left: 0;
530     top: 0;
531     bottom: 0;
532     border-left: 1px solid #AAA;
533 }
534
535 .memory-counter-sidebar-info {
536     position: absolute;
537     top: 0;
538     left: 0;
539     right: 0;
540 }
541
542 .memory-counter-sidebar-info.bottom-border-visible {
543     border-bottom: 1px solid #AAA;
544 }