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 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