Web Inspector: Fonts refactoring
[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 !important;
46 }
47
48 .timeline.split-view-vertical .split-view-resizer {
49     top: 20px;
50 }
51
52 .timeline-sidebar-background {
53     top: 90px;
54     bottom: 0;
55 }
56
57 #timeline-overview-separator {
58     position: absolute;
59     top: 80px;
60     left: 0;
61     right: 0;
62     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
63     border-top: 1px solid rgb(140, 140, 140);
64     border-bottom: 1px solid rgb(115, 115, 115);
65     height: 10px;
66 }
67
68 #timeline-overview-sidebar {
69     position: absolute;
70     width: 200px;
71     top: 0px;
72     bottom: 0px;
73     left: 0px;
74     padding-top: 2px;
75     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
76     border-right: 1px solid rgb(163, 163, 163);
77 }
78
79 #timeline-overview-grid {
80     background-color: rgb(255, 255, 255);
81 }
82
83 .timeline-frame-overview #timeline-overview-grid {
84     display: none;
85 }
86
87 #timeline-overview-grid .resources-dividers-label-bar {
88     pointer-events: auto;
89 }
90
91 .timeline-frame-overview .overview-grid-window {
92     bottom: 0;
93 }
94
95 .timeline-frame-overview .overview-grid-dividers-background {
96     bottom: 0;
97 }
98
99 #timeline-overview-grid #resources-graphs {
100     position: absolute;
101     top: 0;
102     left: 0;
103     right: 0;
104     height: 80px;
105 }
106
107 #timeline-container {
108     position: absolute;
109     top: 90px;
110     left: 0;
111     bottom: 0;
112     right: 0;
113     border-right: 0 none transparent;
114     overflow-y: scroll;
115     overflow-x: hidden;
116 }
117
118 #timeline-container .split-view-sidebar {
119     z-index: 1;
120 }
121
122 #timeline-container .webkit-html-external-link,
123 #timeline-container .webkit-html-resource-link {
124     color: inherit;
125 }
126
127 .timeline-misc-status-bar-items {
128     right: 64px;
129 }
130
131 .timeline-misc-status-bar-filters {
132     display: -webkit-flex;
133     -webkit-flex-orientation: row;
134 }
135
136 .timeline-category-statusbar-item {
137     height: 24px;
138     line-height: 24px;
139     padding-left: 6px;
140     white-space: nowrap;
141     text-overflow: ellipsis;
142     overflow: hidden;
143     font-weight: bold;
144     min-width: 20px;
145     -webkit-flex: auto 0 1;
146 }
147
148 .timeline-category-statusbar-item,
149 .timeline-records-counter {
150     color: rgb(65, 65, 65);
151 }
152
153 .timeline-category-statusbar-item .timeline-category-checkbox {
154     width: 10px;
155     height: 11px;
156     margin: 0 3px 0 9px;
157     padding: 0;
158     vertical-align: -2px;
159     border-radius: 2px;
160     border: solid 1px;
161     -webkit-appearance: none;
162 }
163
164 .timeline-category-statusbar-item .timeline-category-checkbox:checked::before {
165     position: relative;
166     top: -5px;
167     content: url(Images/tickMark.png);
168 }
169
170 .timeline-tree-item {
171     height: 18px;
172     line-height: 15px;
173     padding-right: 5px;
174     padding-left: 5px;
175     padding-top: 2px;
176     white-space: nowrap;
177     text-overflow: ellipsis;
178     overflow: hidden;
179 }
180
181 .timeline-expandable {
182     position: absolute;
183     border-left: 1px solid rgb(163, 163, 163);
184 }
185
186 .timeline-expandable-left {
187     position: absolute;
188     top: 0;
189     bottom: 0;
190     left: 0;
191     width: 3px;
192     border-top: 1px solid rgb(163, 163, 163);
193     border-bottom: 1px solid rgb(163, 163, 163);
194 }
195
196 .timeline-expandable-collapsed {
197     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
198     background-position-x: 1px;
199     background-position-y: 3px;
200     background-repeat: no-repeat;
201 }
202
203 .timeline-expandable-expanded {
204     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
205     background-position-x: 1px;
206     background-position-y: 3px;
207     background-repeat: no-repeat;
208 }
209
210 .timeline-tree-item .type {
211     padding-left: 14px;
212 }
213
214 .timeline-tree-item .count {
215     font-weight: bold;
216 }
217
218 .timeline-tree-item .timeline-tree-icon {
219     display: block;
220     margin-top: 4px;
221     margin-left: 2px;
222     width: 7px;
223     height: 7px;
224     border-radius: 1px;
225     border: solid 1px;
226     position: absolute;
227 }
228
229 .timeline-tree-item.background .timeline-tree-icon {
230     background: none !important;
231 }
232
233 .timeline-tree-item.even {
234     background-color: rgba(0, 0, 0, 0.05);
235 }
236
237 .timeline-tree-item.warning::after,
238 .timeline-tree-item.child-warning::after {
239     content: url(Images/warningIcon.png);
240     float: right;
241     padding-top: 1px;
242 }
243
244 .timeline-tree-item.child-warning::after {
245     opacity: 0.5;
246 }
247
248 .timeline-tree-item .data.dimmed {
249     color: rgba(0, 0, 0, 0.7);
250 }
251
252 #timeline-overview-timelines,
253 #timeline-overview-memory {
254     position: absolute;
255     left: 0;
256     right: 0;
257     bottom: 0;
258     top: 20px;
259     z-index: 160;
260 }
261
262 .timeline-frame-overview #timeline-overview-memory {
263     display: none;
264 }
265
266 #timeline-overview-memory > canvas {
267     position: absolute;
268     left: 0;
269     right: 0;
270     bottom: 0;
271     top: 5px;
272 }
273
274 #timeline-graphs {
275     position: absolute;
276     left: 0;
277     right: 0;
278     max-height: 100%;
279     top: 19px;
280 }
281
282 .timeline-graph-side {
283     position: relative;
284     height: 18px;
285     padding: 0 5px;
286     white-space: nowrap;
287     margin-top: 0px;
288     border-top: 1px solid transparent;
289     overflow: hidden;
290     pointer-events: none;
291 }
292
293 .timeline-graph-bar-area {
294     position: absolute;
295     top: 0;
296     bottom: 0;
297     right: 0;
298     left: 3px;
299     pointer-events: none;
300 }
301
302 .timeline-graph-bar {
303     position: absolute;
304     top: -1px;
305     bottom: 0;
306     margin: auto -2px;
307     height: 9px;
308     min-width: 5px;
309     z-index: 180;
310     pointer-events: visibleFill;
311     border-radius: 1px;
312     border: 1px solid;
313 }
314
315 .timeline-graph-bar.with-children {
316     opacity: 0.25;
317     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
318 }
319
320 .timeline-graph-bar.cpu {
321     opacity: 0.7;
322 }
323
324 .timeline-graph-side.background .timeline-graph-bar {
325     background: transparent !important;
326     border-width: 2px;
327 }
328
329 .timeline-graph-side.even {
330     background-color: rgba(0, 0, 0, 0.05);
331 }
332
333 .timeline-aggregated-category {
334     display: inline-block;
335     height: 11px;
336     margin-right: 2px;
337     margin-left: 6px;
338     position: relative;
339     top: 2px;
340     width: 10px;
341     border: solid 1px;
342 }
343
344 .popover .timeline-aggregated-category.timeline-loading {
345     margin-left: 0px;
346 }
347
348 .garbage-collect-status-bar-item .glyph {
349     -webkit-mask-position: -128px -24px;
350 }
351
352 .glue-async-status-bar-item .glyph {
353     -webkit-mask-position: -128px -48px;
354 }
355
356 .timeline-frame-overview-status-bar-item.toggled-on .glyph {
357     background-color: rgb(66, 129, 235) !important;
358 }
359
360 .timeline-records-stats, .storage-application-cache-status, .storage-application-cache-connectivity {
361     text-shadow: white 0 1px 0;
362 }
363
364 .timeline-records-stats {
365     margin-top: 5px;
366     margin-left: 6px;
367     -webkit-flex: 1;
368 }
369
370 .timeline-records-stats-container {
371     display: inline-block;
372     border-left: 1px solid rgb(202, 202, 202);
373     height: 24px;
374     margin-left: 6px;
375 }
376
377 .timeline-frames-stats {
378     pointer-events: auto;
379     text-decoration: underline;
380     cursor: pointer;
381 }
382
383 #resources-container-content {
384     overflow: visible;
385     min-height: 100%;
386 }
387
388 #resources-graphs {
389     position: absolute;
390     left: 0;
391     right: 0;
392     max-height: 100%;
393     top: 112px;
394 }
395
396 .resources-graph-side {
397     position: relative;
398     height: 36px;
399     padding: 0 5px;
400     white-space: nowrap;
401     margin-top: 1px;
402     border-top: 1px solid transparent;
403     overflow: hidden;
404 }
405
406 .resources-graph-bar-area {
407     position: absolute;
408     top: 0;
409     bottom: 0;
410     right: 8px;
411     left: 9px;
412 }
413
414 #timeline-overview-sidebar .sidebar-tree-item {
415     line-height: 26px;
416     height: 24px;
417 }
418
419 #timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle {
420     top: 5px;
421 }
422
423 #timeline-overview-sidebar .icon {
424     height: 24px;
425     margin-top: -1px;
426     margin-left: 0;
427     margin-right: 0;
428     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
429     -webkit-mask-size: 320px 72px;
430     background-color: black;
431 }
432
433 @media (-webkit-min-device-pixel-ratio: 1.5) {
434 #timeline-overview-sidebar .icon {
435     -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
436 }
437 }
438
439 .timeline-overview-sidebar-events .icon {
440     -webkit-mask-position: -192px -48px;
441 }
442
443 .timeline-overview-sidebar-frames .icon {
444     -webkit-mask-position: -160px -48px;
445 }
446
447 .timeline-overview-sidebar-memory .icon {
448     -webkit-mask-position: -224px -48px;
449 }
450
451 .memory-graph-label {
452     position: absolute;
453     left: 5px;
454     font-size: 9px;
455     color: rgb(50%, 50%, 50%);
456     white-space: nowrap;
457 }
458
459 .max.memory-graph-label {
460     top: 5px;
461 }
462
463 .min.memory-graph-label {
464     bottom: 5px;
465 }
466
467 #timeline-memory-splitter {
468     position: absolute;
469     z-index: 5;
470     left: 0;
471     right: 0;
472     height: 5px;
473     cursor: ns-resize;
474 }
475
476 #memory-counters-graph {
477     overflow: hidden;
478 }
479
480 #memory-graphs-container {
481     border-top: 1px solid #AAA;
482 }
483
484 #memory-graphs-canvas-container {
485     border-right: 1px solid #AAA;
486 }
487
488 #memory-graphs-canvas-container.dom-counters .resources-dividers {
489     top: 15px;
490 }
491
492 #memory-graphs-container .split-view-contents {
493     overflow: hidden;
494 }
495
496 .memory-counter-sidebar-info {
497     margin: 10px;
498 }
499
500 .memory-counter-sidebar-info .swatch{
501     background-image: none;
502 }
503
504 .memory-counter-sidebar-info.bottom-border-visible {
505     border-bottom: 1px solid #AAA;
506 }
507
508 .memory-counter-sidebar-info .title {
509     margin: 4px;
510 }
511
512 .memory-counter-value {
513     margin: 4px;
514 }
515
516 #counter-values-bar {
517     border-bottom: solid 1px lightgray;
518     min-height: 15px;
519 }
520
521 .timeline-frame-overview-bars {
522     z-index: 200;
523     background-color: rgba(255, 255, 255, 0.8);
524     width: 100%;
525     height: 100%;
526 }
527
528 .timeline .resources-event-divider {
529     height: 19px;
530     width: 8px;
531     border-left-width: 2px;
532     border-left-style: solid;
533     bottom: auto;
534     pointer-events: auto;
535 }
536
537 .resources-red-divider {
538     border-color: rgba(255, 0, 0, 0.5);
539 }
540
541 .resources-blue-divider {
542     border-color: rgba(0, 0, 255, 0.5);
543 }
544
545 .resources-orange-divider {
546     border-color: rgba(255, 178, 23, 0.5);
547 }
548
549 .resources-divider.last {
550     border-color: transparent;
551 }
552
553 .timeline .resources-event-divider.timeline-frame-divider {
554     background-color: rgba(180, 180, 180, 0.8);
555     border-style: none;
556     width: 1px;
557     height: 100%;
558     pointer-events: none;
559 }
560
561 .sidebar-tree-item .timeline-frame-overview-status-bar-item {
562     position: absolute;
563     right: 10px;
564     top: 4px;
565 }
566
567 .timeline-frame-container {
568     height: 19px;
569     overflow: hidden;
570     background-color: rgb(220, 220, 220);
571     opacity: 0.6;
572     color: black;
573     text-align: center;
574     padding-top: 3px;
575     z-index: 350;
576     pointer-events: auto;
577 }
578
579 .timeline-frame-strip {
580     position: absolute;
581     height: 19px;
582 }
583
584 #timeline-grid-header {
585     position: absolute;
586     left: 200px;
587     right: 0;
588     top: 90px;
589     bottom: 0;
590     pointer-events: none;
591 }
592
593 .timeline-cpu-bars {
594     position: absolute;
595     top: 0;
596     height: 19px;
597     z-index: 350;
598     width: 100%;
599     overflow: hidden;
600 }
601
602 .timeline-cpu-bars .timeline-graph-bar {
603     border-color: rgb(192, 192, 192);
604     background-color: rgba(0, 0, 0, 0.1);
605     top: 4px;
606     bottom: 4px;
607     height: auto;
608 }
609
610 .timeline-cpu-curtain-left, .timeline-cpu-curtain-right {
611     background-color: rgba(0, 0, 0, 0.15);
612     position: absolute;
613     top: 0;
614     height: 100%;
615 }
616
617 .timeline-cpu-curtain-left {
618     left: 0;
619 }
620
621 .timeline-cpu-curtain-right {
622     right: 0;
623 }
624
625 .image-preview-container {
626     background: transparent;
627     text-align: left;
628     border-spacing: 0;
629 }
630
631 .image-preview-container img {
632     max-width: 100px;
633     max-height: 100px;
634     background-image: url(Images/checker.png);
635     -webkit-user-select: text;
636     -webkit-user-drag: auto;
637 }
638
639 .image-container {
640     padding: 0;
641 }
642
643 .memory-category-value {
644     float: right;
645 }
646
647 .highlighted-timeline-record {
648     -webkit-animation: "timeline_record_highlight" 2s 0s;
649 }
650
651 @-webkit-keyframes timeline_record_highlight {
652     from {background-color: rgba(255, 255, 120, 1); }
653     to { background-color: rgba(255, 255, 120, 0); }
654 }