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