OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. | 2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. |
3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> | 3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> |
4 * | 4 * |
5 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
6 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
7 * are met: | 7 * are met: |
8 * | 8 * |
9 * 1. Redistributions of source code must retain the above copyright | 9 * 1. Redistributions of source code must retain the above copyright |
10 * notice, this list of conditions and the following disclaimer. | 10 * notice, this list of conditions and the following disclaimer. |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
67 | 67 |
68 .timeline-frames-view #timeline-overview-grid { | 68 .timeline-frames-view #timeline-overview-grid { |
69 display: none; | 69 display: none; |
70 } | 70 } |
71 | 71 |
72 #timeline-overview-grid .resources-dividers-label-bar { | 72 #timeline-overview-grid .resources-dividers-label-bar { |
73 pointer-events: auto; | 73 pointer-events: auto; |
74 } | 74 } |
75 | 75 |
76 .timeline-frames-view .overview-grid-window, | 76 .timeline-frames-view .overview-grid-window, |
77 .timeline-frames-view .overview-grid-dividers-background, | 77 .timeline-frames-view .overview-grid-dividers-background { |
78 .timeline-frames-view .overview-grid-window-resizer { | 78 height: 100%; |
79 height: 15px; | |
80 } | 79 } |
81 | 80 |
82 #timeline-overview-grid #resources-graphs { | 81 #timeline-overview-grid #resources-graphs { |
83 position: absolute; | 82 position: absolute; |
84 top: 0; | 83 top: 0; |
85 left: 0; | 84 left: 0; |
86 right: 0; | 85 right: 0; |
87 height: 80px; | 86 height: 80px; |
88 } | 87 } |
89 | 88 |
(...skipping 10 matching lines...) Expand all Loading... |
100 .timeline-details-split { | 99 .timeline-details-split { |
101 flex: auto; | 100 flex: auto; |
102 } | 101 } |
103 | 102 |
104 .timeline-view { | 103 .timeline-view { |
105 flex: auto; | 104 flex: auto; |
106 } | 105 } |
107 | 106 |
108 .timeline-view-stack { | 107 .timeline-view-stack { |
109 flex: auto; | 108 flex: auto; |
| 109 display: flex; |
110 } | 110 } |
111 | 111 |
112 #timeline-container .webkit-html-external-link, | 112 #timeline-container .webkit-html-external-link, |
113 #timeline-container .webkit-html-resource-link { | 113 #timeline-container .webkit-html-resource-link { |
114 color: inherit; | 114 color: inherit; |
115 } | 115 } |
116 | 116 |
117 .timeline-tree-item { | 117 .timeline-tree-item { |
118 height: 18px; | 118 height: 18px; |
119 line-height: 15px; | 119 line-height: 15px; |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
160 height: 10px; | 160 height: 10px; |
161 content: ""; | 161 content: ""; |
162 background-color: rgb(110, 110, 110); | 162 background-color: rgb(110, 110, 110); |
163 position: relative; | 163 position: relative; |
164 top: -1px; | 164 top: -1px; |
165 left: -1px; | 165 left: -1px; |
166 } | 166 } |
167 | 167 |
168 @media (-webkit-min-device-pixel-ratio: 1.5) { | 168 @media (-webkit-min-device-pixel-ratio: 1.5) { |
169 .timeline-tree-item-expand-arrow { | 169 .timeline-tree-item-expand-arrow { |
170 -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png); | 170 -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png); |
171 } | 171 } |
172 } /* media */ | 172 } /* media */ |
173 | 173 |
174 .timeline-tree-item-expand-arrow.parent { | 174 .timeline-tree-item-expand-arrow.parent { |
175 -webkit-mask-position: -4px -96px; | 175 -webkit-mask-position: -4px -96px; |
176 } | 176 } |
177 | 177 |
178 .timeline-tree-item-expand-arrow.parent.expanded { | 178 .timeline-tree-item-expand-arrow.parent.expanded { |
179 -webkit-mask-position: -20px -96px; | 179 -webkit-mask-position: -20px -96px; |
180 } | 180 } |
181 | 181 |
182 .timeline-expandable-arrow { | 182 .timeline-expandable-arrow { |
183 background-image: url(Images/statusbarButtonGlyphs.png); | 183 background-image: url(Images/statusbarButtonGlyphs.png); |
184 background-size: 320px 144px; | 184 background-size: 320px 144px; |
185 opacity: 0.5; | 185 opacity: 0.5; |
186 width: 10px; | 186 width: 10px; |
187 height: 10px; | 187 height: 10px; |
188 position: relative; | 188 position: relative; |
189 top: 3px; | 189 top: 3px; |
190 left: 2px; | 190 left: 2px; |
191 } | 191 } |
192 | 192 |
193 @media (-webkit-min-device-pixel-ratio: 1.5) { | 193 @media (-webkit-min-device-pixel-ratio: 1.5) { |
194 .timeline-expandable-arrow { | 194 .timeline-expandable-arrow { |
195 background-image: url(Images/statusbarButtonGlyphs2x.png); | 195 background-image: url(Images/statusbarButtonGlyphs_2x.png); |
196 } | 196 } |
197 } /* media */ | 197 } /* media */ |
198 | 198 |
199 .timeline-expandable-collapsed .timeline-expandable-arrow { | 199 .timeline-expandable-collapsed .timeline-expandable-arrow { |
200 background-position: -4px -96px; | 200 background-position: -4px -96px; |
201 } | 201 } |
202 | 202 |
203 .timeline-expandable-expanded .timeline-expandable-arrow { | 203 .timeline-expandable-expanded .timeline-expandable-arrow { |
204 background-position: -20px -96px; | 204 background-position: -20px -96px; |
205 } | 205 } |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
238 position: relative; | 238 position: relative; |
239 top: 2px; | 239 top: 2px; |
240 } | 240 } |
241 | 241 |
242 .timeline-tree-item-child-warning { | 242 .timeline-tree-item-child-warning { |
243 opacity: 0.6; | 243 opacity: 0.6; |
244 } | 244 } |
245 | 245 |
246 @media (-webkit-min-device-pixel-ratio: 1.5) { | 246 @media (-webkit-min-device-pixel-ratio: 1.5) { |
247 .timeline-tree-item-warning { | 247 .timeline-tree-item-warning { |
248 background-image: url(Images/statusbarButtonGlyphs2x.png); | 248 background-image: url(Images/statusbarButtonGlyphs_2x.png); |
249 } | 249 } |
250 } /* media */ | 250 } /* media */ |
251 | 251 |
252 .timeline-tree-item .data.dimmed { | 252 .timeline-tree-item .data.dimmed { |
253 color: rgba(0, 0, 0, 0.7); | 253 color: rgba(0, 0, 0, 0.7); |
254 pointer-events: none; | 254 pointer-events: none; |
255 padding-left: 4px; | 255 padding-left: 4px; |
256 } | 256 } |
257 | 257 |
258 .timeline-tree-item.selected .data.dimmed { | 258 .timeline-tree-item.selected .data.dimmed { |
259 color: rgba(255, 255, 255, 0.8); | 259 color: rgba(255, 255, 255, 0.8); |
260 pointer-events: auto; | 260 pointer-events: auto; |
261 } | 261 } |
262 | 262 |
263 .timeline-tree-item.selected .timeline-tree-item-expand-arrow { | 263 .timeline-tree-item.selected .timeline-tree-item-expand-arrow { |
264 background-color: white; | 264 background-color: white; |
265 } | 265 } |
266 | 266 |
267 #timeline-overview-events, | 267 #timeline-overview-events, |
268 #timeline-overview-memory { | 268 #timeline-overview-memory, |
| 269 #timeline-overview-power { |
269 position: absolute; | 270 position: absolute; |
270 left: 0; | 271 left: 0; |
271 right: 0; | 272 right: 0; |
272 bottom: 0; | 273 bottom: 0; |
273 top: 20px; | 274 top: 20px; |
274 z-index: 160; | 275 z-index: 160; |
275 } | 276 } |
276 | 277 |
277 #timeline-overview-memory { | 278 #timeline-overview-memory, |
| 279 #timeline-overview-power { |
278 top: 25px; | 280 top: 25px; |
279 } | 281 } |
280 | 282 |
281 #timeline-overview-pane { | 283 #timeline-overview-pane { |
282 flex: auto; | 284 flex: 0 0 80px; |
283 position: relative; | 285 position: relative; |
| 286 overflow: hidden; |
284 } | 287 } |
285 | 288 |
286 #timeline-overview-container { | 289 #timeline-overview-container { |
| 290 display: flex; |
287 flex: auto; | 291 flex: auto; |
288 position: relative; | 292 position: relative; |
289 height: 80px; | 293 height: 80px; |
| 294 overflow: hidden; |
290 } | 295 } |
291 | 296 |
292 #timeline-overview-container canvas { | 297 #timeline-overview-container canvas { |
293 width: 100%; | 298 width: 100%; |
294 height: 100%; | 299 height: 100%; |
295 } | 300 } |
296 | 301 |
297 #timeline-overview-frames canvas { | 302 #timeline-overview-frames canvas { |
298 z-index: 200; | 303 z-index: 200; |
299 background-color: rgba(255, 255, 255, 0.8); | 304 background-color: rgba(255, 255, 255, 0.8); |
(...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
375 .popover ul { | 380 .popover ul { |
376 margin: 0; | 381 margin: 0; |
377 padding: 0; | 382 padding: 0; |
378 list-style-type: none; | 383 list-style-type: none; |
379 } | 384 } |
380 | 385 |
381 .garbage-collect-status-bar-item .glyph { | 386 .garbage-collect-status-bar-item .glyph { |
382 -webkit-mask-position: -128px -24px; | 387 -webkit-mask-position: -128px -24px; |
383 } | 388 } |
384 | 389 |
385 .glue-async-status-bar-item .glyph { | |
386 -webkit-mask-position: -128px -48px; | |
387 } | |
388 | |
389 .glue-async-status-bar-item.toggled-on:disabled .glyph { | |
390 background-color: rgba(0, 0, 0, 0.75); | |
391 } | |
392 | |
393 #resources-container-content { | 390 #resources-container-content { |
394 overflow: hidden; | 391 overflow: hidden; |
395 min-height: 100%; | 392 min-height: 100%; |
396 } | 393 } |
397 | 394 |
398 #resources-graphs { | 395 #resources-graphs { |
399 position: absolute; | 396 position: absolute; |
400 left: 0; | 397 left: 0; |
401 right: 0; | 398 right: 0; |
402 max-height: 100%; | 399 max-height: 100%; |
(...skipping 12 matching lines...) Expand all Loading... |
415 | 412 |
416 .resources-graph-bar-area { | 413 .resources-graph-bar-area { |
417 position: absolute; | 414 position: absolute; |
418 top: 0; | 415 top: 0; |
419 bottom: 0; | 416 bottom: 0; |
420 right: 8px; | 417 right: 8px; |
421 left: 9px; | 418 left: 9px; |
422 } | 419 } |
423 | 420 |
424 #timeline-overview-sidebar .sidebar-tree { | 421 #timeline-overview-sidebar .sidebar-tree { |
425 height: 100%; | 422 flex: auto; |
426 } | 423 } |
427 | 424 |
428 #timeline-overview-sidebar .sidebar-tree-item { | 425 #timeline-overview-sidebar .sidebar-tree-item { |
429 height: auto; | 426 height: auto; |
430 flex: auto; | 427 flex: auto; |
431 margin: 1px 0 1px 0; | 428 margin: 1px 0 1px 0; |
432 border-top: none; | 429 border-top: none; |
433 display: flex; | 430 display: flex; |
434 align-items: center; | 431 align-items: center; |
435 border-left: 6px solid transparent; | 432 border-left: 6px solid transparent; |
(...skipping 20 matching lines...) Expand all Loading... |
456 #timeline-overview-sidebar .icon { | 453 #timeline-overview-sidebar .icon { |
457 height: 24px; | 454 height: 24px; |
458 margin: 0; | 455 margin: 0; |
459 -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); | 456 -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); |
460 -webkit-mask-size: 320px 144px; | 457 -webkit-mask-size: 320px 144px; |
461 background-color: black; | 458 background-color: black; |
462 } | 459 } |
463 | 460 |
464 @media (-webkit-min-device-pixel-ratio: 1.5) { | 461 @media (-webkit-min-device-pixel-ratio: 1.5) { |
465 #timeline-overview-sidebar .icon { | 462 #timeline-overview-sidebar .icon { |
466 -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png); | 463 -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png); |
467 } | 464 } |
468 } /* media */ | 465 } /* media */ |
469 | 466 |
470 .timeline-overview-sidebar-events .icon { | 467 .timeline-overview-sidebar-events .icon { |
471 -webkit-mask-position: -192px -48px; | 468 -webkit-mask-position: -192px -48px; |
472 } | 469 } |
473 | 470 |
474 .timeline-overview-sidebar-frames .icon { | 471 .timeline-overview-sidebar-frames .icon { |
475 -webkit-mask-position: -160px -48px; | 472 -webkit-mask-position: -160px -48px; |
476 } | 473 } |
477 | 474 |
478 .timeline-overview-sidebar-memory .icon { | 475 .timeline-overview-sidebar-memory .icon { |
479 -webkit-mask-position: -224px -48px; | 476 -webkit-mask-position: -224px -48px; |
480 } | 477 } |
481 | 478 |
| 479 .timeline-overview-sidebar-power .icon { |
| 480 -webkit-mask-position: -64px -120px; |
| 481 } |
| 482 |
482 .memory-graph-label { | 483 .memory-graph-label { |
483 position: absolute; | 484 position: absolute; |
484 left: 5px; | 485 left: 5px; |
485 font-size: 9px; | 486 font-size: 9px; |
486 color: rgb(50%, 50%, 50%); | 487 color: rgb(50%, 50%, 50%); |
487 white-space: nowrap; | 488 white-space: nowrap; |
488 } | 489 } |
489 | 490 |
490 .max.memory-graph-label { | 491 .max.memory-graph-label { |
491 top: 5px; | 492 top: 5px; |
492 } | 493 } |
493 | 494 |
494 .min.memory-graph-label { | 495 .min.memory-graph-label { |
495 bottom: 5px; | 496 bottom: 5px; |
496 } | 497 } |
497 | 498 |
498 #memory-counters-graph { | |
499 border-right: 1px solid rgb(196, 196, 196); | |
500 } | |
501 | |
502 #memory-graphs-canvas-container { | 499 #memory-graphs-canvas-container { |
503 overflow: hidden; | 500 overflow: hidden; |
| 501 flex: auto; |
| 502 position: relative; |
504 } | 503 } |
505 | 504 |
506 #memory-graphs-canvas-container.dom-counters .resources-dividers, | |
507 #memory-counters-graph { | 505 #memory-counters-graph { |
508 top: 17px; | 506 flex: auto; |
| 507 } |
| 508 |
| 509 #memory-graphs-canvas-container .memory-counter-marker { |
| 510 position: absolute; |
| 511 border-radius: 3px; |
| 512 width: 5px; |
| 513 height: 5px; |
| 514 margin-left: -3px; |
| 515 margin-top: -2px; |
509 } | 516 } |
510 | 517 |
511 #memory-graphs-container .split-view-contents-first { | 518 #memory-graphs-container .split-view-contents-first { |
512 background-color: rgb(236, 236, 236); | 519 background-color: rgb(236, 236, 236); |
513 overflow-y: hidden; | 520 overflow-y: hidden; |
514 } | 521 } |
515 | 522 |
516 #memory-graphs-container .sidebar-tree-section { | 523 #memory-graphs-container .sidebar-tree-section { |
517 padding-left: 5px; | 524 padding-left: 5px; |
518 } | 525 } |
519 | 526 |
520 .memory-counter-sidebar-info { | 527 .memory-counter-sidebar-info { |
521 margin: 5px; | 528 margin: 5px; |
522 white-space: nowrap; | 529 white-space: nowrap; |
523 } | 530 } |
524 | 531 |
525 .memory-counter-sidebar-info .swatch{ | 532 .memory-counter-sidebar-info .swatch { |
526 background-image: none; | 533 background-image: none; |
527 border: 1px solid rgba(0,0,0,0.3); | 534 border: 1px solid rgba(0,0,0,0.3); |
528 opacity: 0.5; | 535 opacity: 0.5; |
529 } | 536 } |
530 | 537 |
531 .memory-counter-sidebar-info.bottom-border-visible { | 538 .memory-counter-sidebar-info.bottom-border-visible { |
532 border-bottom: 1px solid #AAA; | 539 border-bottom: 1px solid #AAA; |
533 } | 540 } |
534 | 541 |
535 .memory-counter-sidebar-info .title { | 542 .memory-counter-sidebar-info .title { |
536 margin: 4px; | 543 margin: 4px; |
537 } | 544 } |
538 | 545 |
539 .memory-counter-value { | 546 .memory-counter-value { |
540 margin: 4px; | 547 margin: 4px; |
541 } | 548 } |
542 | 549 |
543 #counter-values-bar { | 550 #counter-values-bar { |
| 551 flex: 0 0 18px; |
544 border-bottom: solid 1px lightgray; | 552 border-bottom: solid 1px lightgray; |
545 width: 100%; | 553 width: 100%; |
546 height: 17px; | |
547 overflow: hidden; | 554 overflow: hidden; |
| 555 line-height: 18px; |
548 } | 556 } |
549 | 557 |
550 .timeline .resources-event-divider { | 558 .timeline .resources-event-divider { |
551 height: 19px; | 559 height: 19px; |
552 width: 8px; | 560 width: 8px; |
553 border-left-width: 2px; | 561 border-left-width: 2px; |
554 border-left-style: solid; | 562 border-left-style: solid; |
555 bottom: auto; | 563 bottom: auto; |
556 pointer-events: auto; | 564 pointer-events: auto; |
557 } | 565 } |
(...skipping 27 matching lines...) Expand all Loading... |
585 } | 593 } |
586 | 594 |
587 .timeline-frame-container { | 595 .timeline-frame-container { |
588 height: 19px; | 596 height: 19px; |
589 overflow: hidden; | 597 overflow: hidden; |
590 background-color: rgb(220, 220, 220); | 598 background-color: rgb(220, 220, 220); |
591 opacity: 0.8; | 599 opacity: 0.8; |
592 color: black; | 600 color: black; |
593 text-align: center; | 601 text-align: center; |
594 padding-top: 3px; | 602 padding-top: 3px; |
595 z-index: 350; | 603 z-index: 220; |
596 pointer-events: auto; | 604 pointer-events: auto; |
597 } | 605 } |
598 | 606 |
599 .timeline-frame-strip { | 607 .timeline-frame-strip { |
600 position: absolute; | 608 position: absolute; |
601 height: 19px; | 609 height: 19px; |
602 } | 610 } |
603 | 611 |
604 #timeline-grid-header { | 612 #timeline-grid-header { |
605 pointer-events: none; | 613 pointer-events: none; |
| 614 height: 19px; |
606 } | 615 } |
607 | 616 |
608 .timeline-utilization-strips { | 617 #timeline-graph-records-header { |
| 618 pointer-events: none; |
609 height: 19px; | 619 height: 19px; |
610 padding: 1px 0; | 620 padding: 1px 0; |
611 justify-content: center; | 621 justify-content: center; |
612 } | 622 } |
613 | 623 |
614 .timeline-utilization-strip { | 624 .timeline-utilization-strip { |
615 z-index: 350; | 625 z-index: 250; |
616 overflow: hidden; | 626 overflow: hidden; |
617 flex: 0 1 12px; | 627 flex: 0 1 12px; |
618 position: relative; | 628 position: relative; |
| 629 height: 9px; |
619 } | 630 } |
620 | 631 |
621 .timeline-utilization-strip .timeline-graph-bar { | 632 .timeline-utilization-strip .timeline-graph-bar { |
622 border-color: rgb(192, 192, 192); | 633 border-color: rgb(192, 192, 192); |
623 background-color: rgba(0, 0, 0, 0.1); | 634 background-color: rgba(0, 0, 0, 0.1); |
624 margin: 1.5px auto; | 635 margin: 1.5px auto; |
625 height: auto; | 636 height: auto; |
626 } | 637 } |
627 | 638 |
628 .timeline-utilization-strip.gpu .timeline-graph-bar { | 639 .timeline-utilization-strip.gpu .timeline-graph-bar { |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
667 } | 678 } |
668 | 679 |
669 .image-container { | 680 .image-container { |
670 padding: 0; | 681 padding: 0; |
671 } | 682 } |
672 | 683 |
673 .memory-category-value { | 684 .memory-category-value { |
674 float: right; | 685 float: right; |
675 } | 686 } |
676 | 687 |
677 .highlighted-timeline-record { | |
678 -webkit-animation: "timeline_record_highlight" 2s 0s; | |
679 } | |
680 | |
681 @-webkit-keyframes timeline_record_highlight { | |
682 from {background-color: rgba(255, 255, 120, 1); } | |
683 to { background-color: rgba(255, 255, 120, 0); } | |
684 } | |
685 | |
686 .timeline-filters-header { | 688 .timeline-filters-header { |
687 flex: 0 0 23px; | 689 flex: 0 0 23px; |
688 overflow: hidden; | 690 overflow: hidden; |
689 } | 691 } |
690 | 692 |
691 .timeline-details { | 693 .timeline-details { |
692 -webkit-user-select: text; | 694 -webkit-user-select: text; |
693 vertical-align: top; | 695 vertical-align: top; |
694 } | 696 } |
695 | 697 |
(...skipping 10 matching lines...) Expand all Loading... |
706 text-align: right; | 708 text-align: right; |
707 white-space: nowrap; | 709 white-space: nowrap; |
708 } | 710 } |
709 | 711 |
710 .timeline-details-row-data { | 712 .timeline-details-row-data { |
711 white-space: nowrap; | 713 white-space: nowrap; |
712 } | 714 } |
713 | 715 |
714 .timeline-details-view { | 716 .timeline-details-view { |
715 color: #333; | 717 color: #333; |
| 718 overflow: hidden; |
716 } | 719 } |
717 | 720 |
718 .timeline-details-view-title { | 721 .timeline-details-view-title { |
719 padding: 2px 5px; | 722 padding: 2px 5px; |
720 flex: 0 0 19px; | 723 flex: 0 0 19px; |
721 border-bottom: 1px solid rgb(202, 202, 202); | 724 border-bottom: 1px solid rgb(202, 202, 202); |
722 background-color: rgb(236, 236, 236); | 725 background-color: rgb(236, 236, 236); |
723 white-space: nowrap; | 726 white-space: nowrap; |
724 display: flex; | 727 display: flex; |
725 color: rgb(92, 110, 129); | 728 color: rgb(92, 110, 129); |
726 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; | 729 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; |
| 730 overflow: hidden; |
| 731 text-overflow: ellipsis; |
727 } | 732 } |
728 | 733 |
729 .timeline-details-view-body { | 734 .timeline-details-view-body { |
730 padding-top: 2px; | 735 padding-top: 2px; |
731 flex: auto; | 736 flex: auto; |
732 overflow: auto; | 737 overflow: auto; |
733 position: relative; | 738 position: relative; |
734 } | 739 } |
735 | 740 |
736 .timeline-details-view-block { | 741 .timeline-details-view-block { |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
774 } | 779 } |
775 | 780 |
776 .timeline-memory-split { | 781 .timeline-memory-split { |
777 flex: auto; | 782 flex: auto; |
778 } | 783 } |
779 | 784 |
780 .timeline-memory-split > .split-view-contents-first { | 785 .timeline-memory-split > .split-view-contents-first { |
781 overflow: hidden; | 786 overflow: hidden; |
782 } | 787 } |
783 | 788 |
784 .pie-chart { | |
785 width: 100px; | |
786 height: 110px; | |
787 } | |
788 | |
789 .pie-chart-background { | |
790 position: absolute; | |
791 width: 100px; | |
792 height: 100px; | |
793 border-radius: 50px; | |
794 background-color: rgb(248, 248, 248); | |
795 box-shadow: 0 1px 2px; | |
796 } | |
797 | |
798 .pie-chart-foreground { | |
799 position: absolute; | |
800 width: 100px; | |
801 height: 100px; | |
802 text-align: center; | |
803 line-height: 100px; | |
804 z-index: 10; | |
805 } | |
806 | |
807 .pie-chart-slice { | |
808 position: absolute; | |
809 width: 100px; | |
810 height: 100px; | |
811 border-radius: 50px; | |
812 clip: rect(0px, 100px, 100px, 50px); | |
813 } | |
814 | |
815 .pie-chart-slice-inner { | |
816 position: absolute; | |
817 width: 100px; | |
818 height: 100px; | |
819 border-radius: 50px; | |
820 clip: rect(0px, 50px, 100px, 0px); | |
821 } | |
822 | |
823 .timeline-aggregated-info { | 789 .timeline-aggregated-info { |
824 flex: none; | 790 flex: none; |
825 position: relative; | 791 position: relative; |
826 margin: 8px 2px; | 792 margin: 8px 2px; |
827 width: 160px; | 793 width: 200px; |
828 } | 794 } |
829 | 795 |
830 .timeline-aggregated-info-legend > div { | 796 .timeline-aggregated-info-legend > div { |
831 overflow: hidden; | 797 overflow: hidden; |
832 white-space: nowrap; | 798 white-space: nowrap; |
833 text-overflow: ellipsis; | 799 text-overflow: ellipsis; |
834 } | 800 } |
835 | 801 |
836 .timeline-aggregated-info .pie-chart { | 802 .timeline-aggregated-info .pie-chart { |
837 margin-left: 20px; | 803 margin-left: 20px; |
| 804 margin-bottom: 10px; |
838 } | 805 } |
| 806 |
| 807 .timeline-flamechart-view #timeline-overview-grid { |
| 808 display: none; |
| 809 } |
| 810 |
| 811 .timeline-flamechart-view .flame-chart-main-pane .resources-divider-label { |
| 812 text-align: center; |
| 813 } |
| 814 |
| 815 .timeline-flamechart { |
| 816 overflow: hidden; |
| 817 } |
| 818 |
| 819 .timeline-progress-pane { |
| 820 position: absolute; |
| 821 top: 0px; |
| 822 right: 0px; |
| 823 bottom: 0px; |
| 824 left: 0px; |
| 825 color: #777; |
| 826 background-color: rgba(255, 255, 255, 0.8); |
| 827 font-size: 30px; |
| 828 z-index: 500; |
| 829 display: flex; |
| 830 justify-content: center; |
| 831 align-items: center; |
| 832 } |
OLD | NEW |