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