src/third_party/WebKit/Source/devtools/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     flex: 0 0 81px;
  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-sidebar {
  55     flex: none;
  56     padding-right: 10px;
  57     border-right: 1px solid rgb(64%, 64%, 64%);
  58 }
  59
  60 #timeline-overview-grid {
  61     background-color: rgb(255, 255, 255);
  62 }
  63
  64 .timeline-frames-view .timeline-records-counter {
  65     display: none;
  66 }
  67
  68 .timeline-frames-view #timeline-overview-grid {
  69     display: none;
  70 }
  71
  72 #timeline-overview-grid .resources-dividers-label-bar {
  73     pointer-events: auto;
  74 }
  75
  76 .timeline-frames-view .overview-grid-window,
  77 .timeline-frames-view .overview-grid-dividers-background,
  78 .timeline-frames-view .overview-grid-window-resizer {
  79     height: 15px;
  80 }
  81
  82 #timeline-overview-grid #resources-graphs {
  83     position: absolute;
  84     top: 0;
  85     left: 0;
  86     right: 0;
  87     height: 80px;
  88 }
  89
  90 #timeline-container {
  91     border-right: 0 none transparent;
  92     overflow-y: scroll;
  93     overflow-x: hidden;
  94 }
  95
  96 .timeline-records-view {
  97     overflow: hidden !important;
  98 }
  99
 100 .timeline-details-split {
 101     flex: auto;
 102 }
 103
 104 .timeline-view {
 105     flex: auto;
 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     position: absolute;
 271     left: 0;
 272     right: 0;
 273     bottom: 0;
 274     top: 20px;
 275     z-index: 160;
 276 }
 277
 278 #timeline-overview-memory  {
 279     top: 25px;
 280 }
 281
 282 #timeline-overview-pane {
 283     flex: auto;
 284     position: relative;
 285 }
 286
 287 #timeline-overview-container {
 288     display: flex;
 289     flex: auto;
 290     position: relative;
 291     height: 80px;
 292 }
 293
 294 #timeline-overview-container canvas {
 295     width: 100%;
 296     height: 100%;
 297 }
 298
 299 #timeline-overview-frames canvas {
 300     z-index: 200;
 301     background-color: rgba(255, 255, 255, 0.8);
 302 }
 303
 304 #timeline-graphs {
 305     position: absolute;
 306     left: 0;
 307     right: 0;
 308     max-height: 100%;
 309     top: 20px;
 310 }
 311
 312 .timeline-graph-side {
 313     position: relative;
 314     height: 18px;
 315     padding: 0 5px;
 316     white-space: nowrap;
 317     margin-top: 0;
 318     border-top: 1px solid transparent;
 319     overflow: hidden;
 320 }
 321
 322 .timeline-graph-side.selected {
 323     background-color: rgba(56, 121, 217, 0.1) !important;
 324 }
 325
 326 .timeline-graph-bar-area {
 327     position: absolute;
 328     top: 0;
 329     bottom: 0;
 330     right: 0;
 331     left: 3px;
 332     pointer-events: none;
 333 }
 334
 335 .timeline-graph-bar {
 336     position: absolute;
 337     top: -1px;
 338     bottom: 0;
 339     margin: auto -2px;
 340     height: 10px;
 341     min-width: 5px;
 342     z-index: 180;
 343     pointer-events: visibleFill;
 344     border-radius: 1px;
 345     border: 1px solid;
 346 }
 347
 348 .timeline-graph-bar.with-children {
 349     opacity: 0.25;
 350     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
 351 }
 352
 353 .timeline-graph-bar.cpu {
 354     opacity: 0.7;
 355 }
 356
 357 .timeline-graph-side.background .timeline-graph-bar {
 358     background: transparent !important;
 359     border-width: 2px;
 360 }
 361
 362 .timeline-aggregated-category {
 363     display: inline-block;
 364     height: 11px;
 365     margin-right: 2px;
 366     margin-left: 6px;
 367     position: relative;
 368     top: 2px;
 369     width: 10px;
 370     border: solid 1px;
 371 }
 372
 373 .popover .timeline-aggregated-category.timeline-loading {
 374     margin-left: 0;
 375 }
 376
 377 .popover ul {
 378     margin: 0;
 379     padding: 0;
 380     list-style-type: none;
 381 }
 382
 383 .garbage-collect-status-bar-item .glyph {
 384     -webkit-mask-position: -128px -24px;
 385 }
 386
 387 .glue-async-status-bar-item .glyph {
 388     -webkit-mask-position: -128px -48px;
 389 }
 390
 391 .glue-async-status-bar-item.toggled-on:disabled .glyph {
 392     background-color: rgba(0, 0, 0, 0.75);
 393 }
 394
 395 #resources-container-content {
 396     overflow: hidden;
 397     min-height: 100%;
 398 }
 399
 400 #resources-graphs {
 401     position: absolute;
 402     left: 0;
 403     right: 0;
 404     max-height: 100%;
 405     top: 112px;
 406 }
 407
 408 .resources-graph-side {
 409     position: relative;
 410     height: 36px;
 411     padding: 0 5px;
 412     white-space: nowrap;
 413     margin-top: 1px;
 414     border-top: 1px solid transparent;
 415     overflow: hidden;
 416 }
 417
 418 .resources-graph-bar-area {
 419     position: absolute;
 420     top: 0;
 421     bottom: 0;
 422     right: 8px;
 423     left: 9px;
 424 }
 425
 426 #timeline-overview-sidebar .sidebar-tree {
 427     height: 100%;
 428 }
 429
 430 #timeline-overview-sidebar .sidebar-tree-item {
 431     height: auto;
 432     flex: auto;
 433     margin: 1px 0 1px 0;
 434     border-top: none;
 435     display: flex;
 436     align-items: center;
 437     border-left: 6px solid transparent;
 438     padding-left: 0;
 439     color: #666;
 440 }
 441
 442 #timeline-overview-sidebar .sidebar-tree-item:hover {
 443     color: inherit;
 444 }
 445
 446 #timeline-overview-sidebar .sidebar-tree-item.selected {
 447     font-weight: bold;
 448     color: inherit;
 449     text-shadow: none;
 450     background: none;
 451     border-left: 6px solid #555;
 452 }
 453
 454 #timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle {
 455     top: initial;
 456 }
 457
 458 #timeline-overview-sidebar .icon {
 459     height: 24px;
 460     margin: 0;
 461     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 462     -webkit-mask-size: 320px 144px;
 463     background-color: black;
 464 }
 465
 466 @media (-webkit-min-device-pixel-ratio: 1.5) {
 467 #timeline-overview-sidebar .icon {
 468     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 469 }
 470 } /* media */
 471
 472 .timeline-overview-sidebar-events .icon {
 473     -webkit-mask-position: -192px -48px;
 474 }
 475
 476 .timeline-overview-sidebar-frames .icon {
 477     -webkit-mask-position: -160px -48px;
 478 }
 479
 480 .timeline-overview-sidebar-memory .icon {
 481     -webkit-mask-position: -224px -48px;
 482 }
 483
 484 .memory-graph-label {
 485     position: absolute;
 486     left: 5px;
 487     font-size: 9px;
 488     color: rgb(50%, 50%, 50%);
 489     white-space: nowrap;
 490 }
 491
 492 .max.memory-graph-label {
 493     top: 5px;
 494 }
 495
 496 .min.memory-graph-label {
 497     bottom: 5px;
 498 }
 499
 500 #memory-counters-graph {
 501     border-right: 1px solid rgb(196, 196, 196);
 502 }
 503
 504 #memory-graphs-canvas-container {
 505     overflow: hidden;
 506 }
 507
 508 #memory-graphs-canvas-container.dom-counters .resources-dividers,
 509 #memory-counters-graph {
 510     top: 17px;
 511 }
 512
 513 #memory-graphs-container .split-view-contents-first {
 514     background-color: rgb(236, 236, 236);
 515     overflow-y: hidden;
 516 }
 517
 518 #memory-graphs-container .sidebar-tree-section {
 519     padding-left: 5px;
 520 }
 521
 522 .memory-counter-sidebar-info {
 523     margin: 5px;
 524     white-space: nowrap;
 525 }
 526
 527 .memory-counter-sidebar-info .swatch{
 528     background-image: none;
 529     border: 1px solid rgba(0,0,0,0.3);
 530     opacity: 0.5;
 531 }
 532
 533 .memory-counter-sidebar-info.bottom-border-visible {
 534     border-bottom: 1px solid #AAA;
 535 }
 536
 537 .memory-counter-sidebar-info .title {
 538     margin: 4px;
 539 }
 540
 541 .memory-counter-value {
 542     margin: 4px;
 543 }
 544
 545 #counter-values-bar {
 546     border-bottom: solid 1px lightgray;
 547     width: 100%;
 548     height: 17px;
 549     overflow: hidden;
 550 }
 551
 552 .timeline .resources-event-divider {
 553     height: 19px;
 554     width: 8px;
 555     border-left-width: 2px;
 556     border-left-style: solid;
 557     bottom: auto;
 558     pointer-events: auto;
 559 }
 560
 561 .resources-red-divider {
 562     border-color: rgba(255, 0, 0, 0.5);
 563 }
 564
 565 .resources-blue-divider {
 566     border-color: rgba(0, 0, 255, 0.5);
 567 }
 568
 569 .resources-orange-divider {
 570     border-color: rgba(255, 178, 23, 0.5);
 571 }
 572
 573 .resources-green-divider {
 574     border-color: rgba(0, 130, 0, 0.5);
 575 }
 576
 577 .resources-divider:last-child {
 578     border-color: transparent;
 579 }
 580
 581 .timeline .resources-event-divider.timeline-frame-divider {
 582     background-color: rgba(180, 180, 180, 0.8);
 583     border-style: none;
 584     width: 1px;
 585     height: 100%;
 586     pointer-events: none;
 587 }
 588
 589 .timeline-frame-container {
 590     height: 19px;
 591     overflow: hidden;
 592     background-color: rgb(220, 220, 220);
 593     opacity: 0.8;
 594     color: black;
 595     text-align: center;
 596     padding-top: 3px;
 597     z-index: 220;
 598     pointer-events: auto;
 599 }
 600
 601 .timeline-frame-strip {
 602     position: absolute;
 603     height: 19px;
 604 }
 605
 606 #timeline-grid-header {
 607     pointer-events: none;
 608 }
 609
 610 .timeline-utilization-strips {
 611     height: 19px;
 612     padding: 1px 0;
 613     justify-content: center;
 614 }
 615
 616 .timeline-utilization-strip {
 617     z-index: 250;
 618     overflow: hidden;
 619     flex: 0 1 12px;
 620     position: relative;
 621 }
 622
 623 .timeline-utilization-strip .timeline-graph-bar {
 624     border-color: rgb(192, 192, 192);
 625     background-color: rgba(0, 0, 0, 0.1);
 626     margin: 1.5px auto;
 627     height: auto;
 628 }
 629
 630 .timeline-utilization-strip.gpu .timeline-graph-bar {
 631     background-color: #00a;
 632     border: none;
 633     opacity: 0.3;
 634     min-width: 0;
 635 }
 636
 637 .timeline-utilization-strip.gpu .timeline-graph-bar.gpu-task-foreign {
 638     background-color: #aaa;
 639 }
 640
 641 .timeline-cpu-curtain-left, .timeline-cpu-curtain-right {
 642     background-color: rgba(210, 210, 210, 0.5);
 643     position: absolute;
 644     top: 0;
 645     height: 100%;
 646     z-index: 300;
 647 }
 648
 649 .timeline-cpu-curtain-left {
 650     left: 0;
 651 }
 652
 653 .timeline-cpu-curtain-right {
 654     right: 0;
 655 }
 656
 657 .image-preview-container {
 658     background: transparent;
 659     text-align: left;
 660     border-spacing: 0;
 661 }
 662
 663 .image-preview-container img {
 664     max-width: 100px;
 665     max-height: 100px;
 666     background-image: url(Images/checker.png);
 667     -webkit-user-select: text;
 668     -webkit-user-drag: auto;
 669 }
 670
 671 .image-container {
 672     padding: 0;
 673 }
 674
 675 .memory-category-value {
 676     float: right;
 677 }
 678
 679 .highlighted-timeline-record {
 680     -webkit-animation: "timeline_record_highlight" 2s 0s;
 681 }
 682
 683 @-webkit-keyframes timeline_record_highlight {
 684     from {background-color: rgba(255, 255, 120, 1); }
 685     to { background-color: rgba(255, 255, 120, 0); }
 686 }
 687
 688 .timeline-filters-header {
 689     flex: 0 0 23px;
 690     overflow: hidden;
 691 }
 692
 693 .timeline-details {
 694     -webkit-user-select: text;
 695     vertical-align: top;
 696 }
 697
 698 .timeline-details-title {
 699     border-bottom: 1px solid #B8B8B8;
 700     font-weight: bold;
 701     padding-bottom: 5px;
 702     padding-top: 0;
 703     white-space: nowrap;
 704 }
 705
 706 .timeline-details-row-title {
 707     font-weight: bold;
 708     text-align: right;
 709     white-space: nowrap;
 710 }
 711
 712 .timeline-details-row-data {
 713     white-space: nowrap;
 714 }
 715
 716 .timeline-details-view {
 717     color: #333;
 718 }
 719
 720 .timeline-details-view-title {
 721     padding: 2px 5px;
 722     flex: 0 0 19px;
 723     border-bottom: 1px solid rgb(202, 202, 202);
 724     background-color: rgb(236, 236, 236);
 725     white-space: nowrap;
 726     display: flex;
 727     color: rgb(92, 110, 129);
 728     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 729     overflow: hidden;
 730     text-overflow: ellipsis;
 731 }
 732
 733 .timeline-details-view-body {
 734     padding-top: 2px;
 735     flex: auto;
 736     overflow: auto;
 737     position: relative;
 738 }
 739
 740 .timeline-details-view-block {
 741     flex: none;
 742 }
 743
 744 .timeline-details-view-row {
 745     padding: 2px 0 2px 6px;
 746     white-space: nowrap;
 747 }
 748
 749 .timeline-details-view-row-title {
 750     font-weight: bold;
 751     color: rgb(48, 57, 66);
 752 }
 753
 754 .timeline-details-view-row-value {
 755     padding-left: 10px;
 756 }
 757
 758 .timeline-details-view-row-details {
 759     padding-left: 10px;
 760 }
 761
 762 .timeline-details-view-row-details .image-preview-container {
 763     padding: 10px;
 764 }
 765
 766 .timeline-details-view-row-stack-trace {
 767     padding: 4px 0 4px 20px;
 768 }
 769
 770 .timeline-details-view-row-stack-trace div {
 771     white-space: nowrap;
 772     text-overflow: ellipsis;
 773 }
 774
 775 .timeline-details-view-row-stack-trace .webkit-html-external-link,
 776 .timeline-details-view-row-stack-trace .webkit-html-resource-link {
 777     color: #333 !important;
 778 }
 779
 780 .timeline-memory-split {
 781     flex: auto;
 782 }
 783
 784 .timeline-memory-split > .split-view-contents-first {
 785     overflow: hidden;
 786 }
 787
 788 .pie-chart {
 789     width: 100px;
 790     height: 110px;
 791 }
 792
 793 .pie-chart-background {
 794     position: absolute;
 795     width: 100px;
 796     height: 100px;
 797     border-radius: 50px;
 798     background-color: rgb(248, 248, 248);
 799     box-shadow: 0 1px 2px;
 800 }
 801
 802 .pie-chart-foreground {
 803     position: absolute;
 804     width: 100px;
 805     height: 100px;
 806     text-align: center;
 807     line-height: 100px;
 808     z-index: 10;
 809 }
 810
 811 .pie-chart-slice {
 812     position: absolute;
 813     width: 100px;
 814     height: 100px;
 815     border-radius: 50px;
 816     clip: rect(0px, 100px, 100px, 50px);
 817 }
 818
 819 .pie-chart-slice-inner {
 820     position: absolute;
 821     width: 100px;
 822     height: 100px;
 823     border-radius: 50px;
 824     clip: rect(0px, 50px, 100px, 0px);
 825 }
 826
 827 .timeline-aggregated-info {
 828     flex: none;
 829     position: relative;
 830     margin: 8px 2px;
 831     width: 160px;
 832 }
 833
 834 .timeline-aggregated-info-legend > div {
 835     overflow: hidden;
 836     white-space: nowrap;
 837     text-overflow: ellipsis;
 838 }
 839
 840 .timeline-aggregated-info .pie-chart {
 841     margin-left: 20px;
 842 }