1 /* 2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. 3 * Copyright (C) 2009 Anthony Ricaud <rik (at) 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 flex: none; 32 position: relative; 33 border-bottom: 1px solid rgb(140, 140, 140); 34 } 35 36 #timeline-overview-panel .timeline-graph-bar { 37 pointer-events: none; 38 } 39 40 #timeline-overview-panel .split-view-sidebar > label { 41 margin: 6px 0 3px 5px; 42 height: auto; 43 display: flex; 44 } 45 46 #timeline-overview-panel .split-view-sidebar > label > input { 47 margin-right: 6px; 48 } 49 50 .timeline-records-title, .timeline-records-list { 51 background-color: rgb(236, 236, 236); 52 } 53 54 .timeline-records-title { 55 padding: 3px 3px 3px 5px; 56 flex: 0 0 19px; 57 color: rgb(92, 110, 129); text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; 58 } 59 60 .timeline-records-list { 61 flex: auto; 62 } 63 64 #timeline-overview-grid { 65 background-color: rgb(255, 255, 255); 66 } 67 68 .timeline-overview-frames-mode #timeline-overview-grid { 69 display: none; 70 } 71 72 #timeline-overview-grid .resources-dividers-label-bar { 73 pointer-events: auto; 74 } 75 76 .timeline-overview-frames-mode .overview-grid-window, 77 .timeline-overview-frames-mode .overview-grid-dividers-background { 78 height: 100%; 79 } 80 81 #timeline-overview-grid #resources-graphs { 82 position: absolute; 83 top: 0; 84 left: 0; 85 right: 0; 86 height: 80px; 87 } 88 89 #timeline-container { 90 border-right: 0 none transparent; 91 overflow-y: scroll; 92 overflow-x: hidden; 93 } 94 95 .timeline-records-view { 96 overflow: hidden !important; 97 } 98 99 .timeline-details-split { 100 flex: auto; 101 } 102 103 .timeline-view { 104 flex: auto; 105 overflow: hidden; 106 } 107 108 .timeline-view-stack { 109 flex: auto; 110 display: flex; 111 } 112 113 #timeline-container .webkit-html-external-link, 114 #timeline-container .webkit-html-resource-link { 115 color: inherit; 116 } 117 118 .timeline-tree-item { 119 height: 18px; 120 line-height: 15px; 121 padding-right: 5px; 122 padding-left: 5px; 123 padding-top: 2px; 124 white-space: nowrap; 125 text-overflow: ellipsis; 126 overflow: hidden; 127 } 128 129 .timeline-tree-item.selected { 130 background-color: rgb(56, 121, 217) !important; 131 color: white; 132 } 133 134 .timeline-tree-item.hovered:not(.selected), 135 .timeline-graph-side.hovered { 136 background-color: rgba(0, 0, 0, 0.05) !important; 137 } 138 139 .timeline-expandable { 140 position: absolute; 141 border-left: 1px solid rgb(163, 163, 163); 142 pointer-events: none; 143 } 144 145 .timeline-expandable-left { 146 position: absolute; 147 top: 0; 148 bottom: 0; 149 left: 0; 150 width: 3px; 151 border-top: 1px solid rgb(163, 163, 163); 152 border-bottom: 1px solid rgb(163, 163, 163); 153 } 154 155 .timeline-tree-item-expand-arrow { 156 display: inline-block; 157 -webkit-user-select: none; 158 -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); 159 -webkit-mask-size: 320px 144px; 160 width: 10px; 161 height: 10px; 162 content: ""; 163 background-color: rgb(110, 110, 110); 164 position: relative; 165 top: -1px; 166 left: -1px; 167 } 168 169 @media (-webkit-min-device-pixel-ratio: 1.5) { 170 .timeline-tree-item-expand-arrow { 171 -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png); 172 } 173 } /* media */ 174 175 .timeline-tree-item-expand-arrow.parent { 176 -webkit-mask-position: -4px -96px; 177 } 178 179 .timeline-tree-item-expand-arrow.parent.expanded { 180 -webkit-mask-position: -20px -96px; 181 } 182 183 .timeline-expandable-arrow { 184 background-image: url(Images/statusbarButtonGlyphs.png); 185 background-size: 320px 144px; 186 opacity: 0.5; 187 width: 10px; 188 height: 10px; 189 position: relative; 190 top: 3px; 191 left: 2px; 192 } 193 194 @media (-webkit-min-device-pixel-ratio: 1.5) { 195 .timeline-expandable-arrow { 196 background-image: url(Images/statusbarButtonGlyphs_2x.png); 197 } 198 } /* media */ 199 200 .timeline-expandable-collapsed .timeline-expandable-arrow { 201 background-position: -4px -96px; 202 } 203 204 .timeline-expandable-expanded .timeline-expandable-arrow { 205 background-position: -20px -96px; 206 } 207 208 .timeline-tree-item .type { 209 padding-left: 5px; 210 } 211 212 .timeline-tree-item .count { 213 font-weight: bold; 214 } 215 216 .timeline-tree-item .timeline-tree-icon { 217 position: relative; 218 top: -1px; 219 left: 1px; 220 width: 7px; 221 height: 7px; 222 border-radius: 1px; 223 border: solid 1px; 224 display: inline-block; 225 } 226 227 .timeline-tree-item.background .timeline-tree-icon { 228 background: none !important; 229 } 230 231 .timeline-tree-item-warning { 232 display: block; 233 background-image: url(Images/statusbarButtonGlyphs.png); 234 background-size: 320px 144px; 235 width: 10px; 236 height: 10px; 237 float: right; 238 background-position: -202px -107px; 239 position: relative; 240 top: 2px; 241 } 242 243 .timeline-tree-item-child-warning { 244 opacity: 0.6; 245 } 246 247 @media (-webkit-min-device-pixel-ratio: 1.5) { 248 .timeline-tree-item-warning { 249 background-image: url(Images/statusbarButtonGlyphs_2x.png); 250 } 251 } /* media */ 252 253 .timeline-tree-item .data.dimmed { 254 color: rgba(0, 0, 0, 0.7); 255 pointer-events: none; 256 padding-left: 4px; 257 } 258 259 .timeline-tree-item.selected .data.dimmed { 260 color: rgba(255, 255, 255, 0.8); 261 pointer-events: auto; 262 } 263 264 .timeline-tree-item.selected .timeline-tree-item-expand-arrow { 265 background-color: white; 266 } 267 268 #timeline-overview-events, 269 #timeline-overview-memory, 270 #timeline-overview-power { 271 flex: 0 0 60px; 272 z-index: 160; 273 width: 100%; 274 } 275 276 #timeline-overview-memory { 277 flex-basis: 20px; 278 } 279 280 #timeline-overview-frames { 281 flex-basis: 79px; 282 } 283 284 #timeline-overview-pane { 285 flex: none; 286 position: relative; 287 overflow: hidden; 288 } 289 290 #timeline-overview-container { 291 display: flex; 292 flex-direction: column; 293 flex: none; 294 position: relative; 295 overflow: hidden; 296 } 297 298 #timeline-overview-container canvas { 299 width: 100%; 300 height: 100%; 301 } 302 303 #timeline-overview-frames canvas { 304 z-index: 200; 305 background-color: rgba(255, 255, 255, 0.8); 306 } 307 308 #timeline-graphs { 309 position: absolute; 310 left: 0; 311 right: 0; 312 max-height: 100%; 313 top: 20px; 314 } 315 316 .timeline-graph-side { 317 position: relative; 318 height: 18px; 319 padding: 0 5px; 320 white-space: nowrap; 321 margin-top: 0; 322 border-top: 1px solid transparent; 323 overflow: hidden; 324 } 325 326 .timeline-graph-side.selected { 327 background-color: rgba(56, 121, 217, 0.1) !important; 328 } 329 330 .timeline-graph-bar-area { 331 position: absolute; 332 top: 0; 333 bottom: 0; 334 right: 0; 335 left: 3px; 336 pointer-events: none; 337 } 338 339 .timeline-graph-bar { 340 position: absolute; 341 top: -1px; 342 bottom: 0; 343 margin: auto -2px; 344 height: 10px; 345 min-width: 5px; 346 z-index: 180; 347 pointer-events: visibleFill; 348 border-radius: 1px; 349 border: 1px solid; 350 } 351 352 .timeline-graph-bar.with-children { 353 opacity: 0.25; 354 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 355 } 356 357 .timeline-graph-bar.cpu { 358 opacity: 0.7; 359 } 360 361 .timeline-graph-side.background .timeline-graph-bar { 362 background: transparent !important; 363 border-width: 2px; 364 } 365 366 .timeline-aggregated-category { 367 display: inline-block; 368 height: 11px; 369 margin-right: 2px; 370 margin-left: 6px; 371 position: relative; 372 top: 2px; 373 width: 10px; 374 border: solid 1px; 375 } 376 377 .popover .timeline-aggregated-category.timeline-loading { 378 margin-left: 0; 379 } 380 381 .popover ul { 382 margin: 0; 383 padding: 0; 384 list-style-type: none; 385 } 386 387 .timeline-garbage-collect-status-bar-item .glyph { 388 -webkit-mask-position: -128px -24px; 389 } 390 391 .timeline-frames-status-bar-item .glyph { 392 -webkit-mask-position: -160px -48px; 393 } 394 395 .timeline-flame-chart-status-bar-item .glyph { 396 -webkit-mask-position: -192px -48px; 397 } 398 399 #resources-container-content { 400 overflow: hidden; 401 min-height: 100%; 402 } 403 404 #resources-graphs { 405 position: absolute; 406 left: 0; 407 right: 0; 408 max-height: 100%; 409 top: 112px; 410 } 411 412 .resources-graph-side { 413 position: relative; 414 height: 36px; 415 padding: 0 5px; 416 white-space: nowrap; 417 margin-top: 1px; 418 border-top: 1px solid transparent; 419 overflow: hidden; 420 } 421 422 .resources-graph-bar-area { 423 position: absolute; 424 top: 0; 425 bottom: 0; 426 right: 8px; 427 left: 9px; 428 } 429 430 .memory-graph-label { 431 position: absolute; 432 left: 5px; 433 font-size: 9px; 434 color: rgb(50%, 50%, 50%); 435 white-space: nowrap; 436 } 437 438 #memory-graphs-canvas-container { 439 overflow: hidden; 440 flex: auto; 441 position: relative; 442 } 443 444 #memory-counters-graph { 445 flex: auto; 446 } 447 448 #memory-graphs-canvas-container .memory-counter-marker { 449 position: absolute; 450 border-radius: 3px; 451 width: 5px; 452 height: 5px; 453 margin-left: -3px; 454 margin-top: -2px; 455 } 456 457 #memory-graphs-container .split-view-contents-first { 458 background-color: rgb(236, 236, 236); 459 overflow-y: hidden; 460 } 461 462 #memory-graphs-container .sidebar-tree-section { 463 flex: 0 0 24px; 464 padding: 5px 0 0 5px; 465 } 466 467 .memory-counter-sidebar-info { 468 flex: 0 0 18px; 469 margin-left: 5px; 470 white-space: nowrap; 471 } 472 473 .memory-counter-sidebar-info .swatch { 474 background-image: none; 475 border: 1px solid rgba(0,0,0,0.3); 476 opacity: 0.5; 477 } 478 479 .memory-counter-sidebar-info.bottom-border-visible { 480 border-bottom: 1px solid #AAA; 481 } 482 483 .memory-counter-sidebar-info .title { 484 margin: 4px; 485 } 486 487 .memory-counter-value { 488 margin: 4px; 489 } 490 491 #counter-values-bar { 492 flex: 0 0 18px; 493 border-bottom: solid 1px lightgray; 494 width: 100%; 495 overflow: hidden; 496 line-height: 18px; 497 } 498 499 .timeline .resources-event-divider { 500 height: 19px; 501 width: 8px; 502 border-left-width: 2px; 503 border-left-style: solid; 504 bottom: auto; 505 pointer-events: auto; 506 } 507 508 .resources-red-divider { 509 border-color: rgba(255, 0, 0, 0.5); 510 } 511 512 .resources-blue-divider { 513 border-color: rgba(0, 0, 255, 0.5); 514 } 515 516 .resources-orange-divider { 517 border-color: rgba(255, 178, 23, 0.5); 518 } 519 520 .resources-green-divider { 521 border-color: rgba(0, 130, 0, 0.5); 522 } 523 524 .resources-divider:last-child { 525 border-color: transparent; 526 } 527 528 .timeline .resources-event-divider.timeline-frame-divider { 529 background-color: rgba(180, 180, 180, 0.8); 530 border-style: none; 531 width: 1px; 532 height: 100%; 533 pointer-events: none; 534 } 535 536 .timeline-frame-container { 537 height: 19px; 538 overflow: hidden; 539 background-color: rgb(220, 220, 220); 540 opacity: 0.8; 541 color: black; 542 text-align: center; 543 z-index: 220; 544 pointer-events: auto; 545 } 546 547 .timeline-frame-strip { 548 position: absolute; 549 height: 19px; 550 padding-top: 3px; 551 } 552 553 .timeline-frame-strip.selected { 554 background-color: rgb(56, 121, 217); 555 color: white; 556 } 557 558 #timeline-grid-header { 559 pointer-events: none; 560 height: 19px; 561 } 562 563 #timeline-graph-records-header { 564 pointer-events: none; 565 height: 19px; 566 padding: 1px 0; 567 justify-content: center; 568 } 569 570 .timeline-utilization-strip { 571 z-index: 250; 572 overflow: hidden; 573 flex: 0 1 12px; 574 position: relative; 575 height: 9px; 576 } 577 578 .timeline-utilization-strip .timeline-graph-bar { 579 border-color: rgb(192, 192, 192); 580 background-color: rgba(0, 0, 0, 0.1); 581 margin: 1.5px auto; 582 height: auto; 583 } 584 585 .timeline-utilization-strip.gpu .timeline-graph-bar { 586 background-color: #00a; 587 border: none; 588 opacity: 0.3; 589 min-width: 0; 590 } 591 592 .timeline-utilization-strip.gpu .timeline-graph-bar.gpu-task-foreign { 593 background-color: #aaa; 594 } 595 596 .timeline-cpu-curtain-left, .timeline-cpu-curtain-right { 597 background-color: rgba(210, 210, 210, 0.5); 598 position: absolute; 599 top: 0; 600 height: 100%; 601 z-index: 300; 602 } 603 604 .timeline-cpu-curtain-left { 605 left: 0; 606 } 607 608 .timeline-cpu-curtain-right { 609 right: 0; 610 } 611 612 .image-preview-container { 613 background: transparent; 614 text-align: left; 615 border-spacing: 0; 616 } 617 618 .image-preview-container img { 619 max-width: 100px; 620 max-height: 100px; 621 background-image: url(Images/checker.png); 622 -webkit-user-select: text; 623 -webkit-user-drag: auto; 624 } 625 626 .image-container { 627 padding: 0; 628 } 629 630 .memory-category-value { 631 float: right; 632 } 633 634 .timeline-filters-header { 635 flex: 0 0 23px; 636 overflow: hidden; 637 } 638 639 .timeline-details { 640 -webkit-user-select: text; 641 vertical-align: top; 642 } 643 644 .timeline-details-title { 645 border-bottom: 1px solid #B8B8B8; 646 font-weight: bold; 647 padding-bottom: 5px; 648 padding-top: 0; 649 white-space: nowrap; 650 } 651 652 .timeline-details-row-title { 653 font-weight: bold; 654 text-align: right; 655 white-space: nowrap; 656 } 657 658 .timeline-details-row-data { 659 white-space: nowrap; 660 } 661 662 .timeline-details-view { 663 color: #333; 664 overflow: hidden; 665 } 666 667 .timeline-details-view-title { 668 padding: 2px 5px; 669 flex: 0 0 19px; 670 border-bottom: 1px solid rgb(202, 202, 202); 671 background-color: rgb(236, 236, 236); 672 white-space: nowrap; 673 display: flex; 674 color: rgb(92, 110, 129); 675 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; 676 overflow: hidden; 677 text-overflow: ellipsis; 678 } 679 680 .timeline-details-view-body { 681 padding-top: 2px; 682 flex: auto; 683 overflow: auto; 684 position: relative; 685 } 686 687 .timeline-details-view-block { 688 flex: none; 689 } 690 691 .timeline-details-view-row { 692 padding: 2px 0 2px 6px; 693 white-space: nowrap; 694 } 695 696 .timeline-details-view-row-title { 697 font-weight: bold; 698 color: rgb(48, 57, 66); 699 } 700 701 .timeline-details-view-row-value { 702 padding-left: 10px; 703 } 704 705 .timeline-details-view-row-details { 706 padding-left: 10px; 707 } 708 709 .timeline-details-view-row-details .image-preview-container { 710 padding: 10px; 711 } 712 713 .timeline-details-view-row-details table { 714 padding-left: 10px; 715 } 716 717 .timeline-details-view-row-details table td { 718 text-align: left; 719 vertical-align: top; 720 } 721 722 .timeline-details-view-row-details table td .section { 723 margin-top: -1px; 724 } 725 726 .timeline-details-view-row-details table td .section > .header .title { 727 white-space: nowrap; 728 } 729 730 .timeline-details-view-row-stack-trace { 731 padding: 4px 0 4px 20px; 732 } 733 734 .timeline-details-view-row-stack-trace div { 735 white-space: nowrap; 736 text-overflow: ellipsis; 737 } 738 739 .timeline-details-view-row-stack-trace .webkit-html-external-link, 740 .timeline-details-view-row-stack-trace .webkit-html-resource-link { 741 color: #333 !important; 742 } 743 744 .timeline-memory-split { 745 flex: auto; 746 } 747 748 .timeline-memory-split > .split-view-contents-first { 749 overflow: hidden; 750 } 751 752 .timeline-aggregated-info { 753 flex: none; 754 position: relative; 755 margin: 8px; 756 } 757 758 .timeline-range-summary { 759 align-items: center; 760 margin: 6px; 761 } 762 763 .timeline-range-summary > div { 764 flex-shrink: 0; 765 } 766 767 .timeline-aggregated-info-legend > div { 768 overflow: hidden; 769 white-space: nowrap; 770 text-overflow: ellipsis; 771 } 772 773 .timeline-aggregated-info .pie-chart { 774 margin-left: 20px; 775 margin-bottom: 10px; 776 } 777 778 .timeline-flamechart { 779 overflow: hidden; 780 } 781 782 .timeline-progress-pane { 783 position: absolute; 784 top: 0px; 785 right: 0px; 786 bottom: 0px; 787 left: 0px; 788 color: #777; 789 background-color: rgba(255, 255, 255, 0.8); 790 font-size: 30px; 791 z-index: 500; 792 display: flex; 793 justify-content: center; 794 align-items: center; 795 } 796 797 .revealable-link { 798 text-decoration: underline; 799 cursor: pointer; 800 } 801