Source/WebCore/inspector/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     position: absolute;
  32     top: 0;
  33     left: 0;
  34     right: 0;
  35     height: 80px;
  36 }
  37
  38 #timeline-overview-panel .timeline-graph-bar {
  39     pointer-events: none;
  40 }
  41
  42 .timeline .sidebar {
  43     overflow-y: hidden;
  44     min-height: 100%;
  45     bottom: auto !important;
  46 }
  47
  48 .timeline.split-view-vertical .split-view-resizer {
  49     top: 20px;
  50 }
  51
  52 .timeline-sidebar-background {
  53     top: 90px;
  54     bottom: 0;
  55 }
  56
  57 #timeline-overview-separator {
  58     position: absolute;
  59     top: 80px;
  60     left: 0;
  61     right: 0;
  62     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
  63     border-top: 1px solid rgb(140, 140, 140);
  64     border-bottom: 1px solid rgb(115, 115, 115);
  65     height: 10px;
  66 }
  67
  68 #timeline-overview-sidebar {
  69     position: absolute;
  70     width: 200px;
  71     top: 0px;
  72     bottom: 0px;
  73     left: 0px;
  74     padding-top: 2px;
  75     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
  76     border-right: 1px solid rgb(163, 163, 163);
  77 }
  78
  79 #timeline-overview-grid {
  80     background-color: rgb(255, 255, 255);
  81 }
  82
  83 .timeline-frame-overview #timeline-overview-grid {
  84     display: none;
  85 }
  86
  87 #timeline-overview-grid .resources-dividers-label-bar {
  88     pointer-events: auto;
  89 }
  90
  91 .timeline-frame-overview .overview-grid-window {
  92     bottom: 0;
  93 }
  94
  95 .timeline-frame-overview .overview-grid-dividers-background {
  96     bottom: 0;
  97 }
  98
  99 #timeline-overview-grid #resources-graphs {
 100     position: absolute;
 101     top: 0;
 102     left: 0;
 103     right: 0;
 104     height: 80px;
 105 }
 106
 107 #timeline-container {
 108     position: absolute;
 109     top: 90px;
 110     left: 0;
 111     bottom: 0;
 112     right: 0;
 113     border-right: 0 none transparent;
 114     overflow-y: scroll;
 115     overflow-x: hidden;
 116 }
 117
 118 #timeline-container .split-view-sidebar {
 119     z-index: 1;
 120 }
 121
 122 #timeline-container .webkit-html-external-link,
 123 #timeline-container .webkit-html-resource-link {
 124     color: inherit;
 125 }
 126
 127 .timeline-misc-status-bar-items {
 128     right: 64px;
 129 }
 130
 131 .timeline-misc-status-bar-filters {
 132     display: -webkit-flex;
 133     -webkit-flex-orientation: row;
 134 }
 135
 136 .timeline-category-statusbar-item {
 137     height: 24px;
 138     line-height: 24px;
 139     padding-left: 6px;
 140     white-space: nowrap;
 141     text-overflow: ellipsis;
 142     overflow: hidden;
 143     font-weight: bold;
 144     min-width: 20px;
 145     -webkit-flex: auto 0 1;
 146 }
 147
 148 .timeline-category-statusbar-item,
 149 .timeline-records-counter {
 150     color: rgb(65, 65, 65);
 151 }
 152
 153 .timeline-category-statusbar-item .timeline-category-checkbox {
 154     width: 10px;
 155     height: 11px;
 156     margin: 0 3px 0 9px;
 157     padding: 0;
 158     vertical-align: -2px;
 159     border-radius: 2px;
 160     border: solid 1px;
 161     -webkit-appearance: none;
 162 }
 163
 164 .timeline-category-statusbar-item .timeline-category-checkbox:checked::before {
 165     position: relative;
 166     top: -5px;
 167     content: url(Images/tickMark.png);
 168 }
 169
 170 .timeline-tree-item {
 171     height: 18px;
 172     line-height: 15px;
 173     padding-right: 5px;
 174     padding-left: 5px;
 175     padding-top: 2px;
 176     white-space: nowrap;
 177     text-overflow: ellipsis;
 178     overflow: hidden;
 179 }
 180
 181 .timeline-expandable {
 182     position: absolute;
 183     border-left: 1px solid rgb(163, 163, 163);
 184 }
 185
 186 .timeline-expandable-left {
 187     position: absolute;
 188     top: 0;
 189     bottom: 0;
 190     left: 0;
 191     width: 3px;
 192     border-top: 1px solid rgb(163, 163, 163);
 193     border-bottom: 1px solid rgb(163, 163, 163);
 194 }
 195
 196 .timeline-expandable-collapsed {
 197     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
 198     background-position-x: 1px;
 199     background-position-y: 3px;
 200     background-repeat: no-repeat;
 201 }
 202
 203 .timeline-expandable-expanded {
 204     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
 205     background-position-x: 1px;
 206     background-position-y: 3px;
 207     background-repeat: no-repeat;
 208 }
 209
 210 .timeline-tree-item .type {
 211     padding-left: 14px;
 212 }
 213
 214 .timeline-tree-item .count {
 215     font-weight: bold;
 216 }
 217
 218 .timeline-tree-item .timeline-tree-icon {
 219     display: block;
 220     margin-top: 4px;
 221     margin-left: 2px;
 222     width: 7px;
 223     height: 7px;
 224     border-radius: 1px;
 225     border: solid 1px;
 226     position: absolute;
 227 }
 228
 229 .timeline-tree-item.background .timeline-tree-icon {
 230     background: none !important;
 231 }
 232
 233 .timeline-tree-item.even {
 234     background-color: rgba(0, 0, 0, 0.05);
 235 }
 236
 237 .timeline-tree-item.warning::after,
 238 .timeline-tree-item.child-warning::after {
 239     content: url(Images/warningIcon.png);
 240     float: right;
 241     padding-top: 1px;
 242 }
 243
 244 .timeline-tree-item.child-warning::after {
 245     opacity: 0.5;
 246 }
 247
 248 .timeline-tree-item .data.dimmed {
 249     color: rgba(0, 0, 0, 0.7);
 250 }
 251
 252 #timeline-overview-timelines,
 253 #timeline-overview-memory {
 254     position: absolute;
 255     left: 0;
 256     right: 0;
 257     bottom: 0;
 258     top: 20px;
 259     z-index: 160;
 260 }
 261
 262 .timeline-frame-overview #timeline-overview-memory {
 263     display: none;
 264 }
 265
 266 #timeline-overview-memory > canvas {
 267     position: absolute;
 268     left: 0;
 269     right: 0;
 270     bottom: 0;
 271     top: 5px;
 272 }
 273
 274 #timeline-graphs {
 275     position: absolute;
 276     left: 0;
 277     right: 0;
 278     max-height: 100%;
 279     top: 19px;
 280 }
 281
 282 .timeline-graph-side {
 283     position: relative;
 284     height: 18px;
 285     padding: 0 5px;
 286     white-space: nowrap;
 287     margin-top: 0px;
 288     border-top: 1px solid transparent;
 289     overflow: hidden;
 290     pointer-events: none;
 291 }
 292
 293 .timeline-graph-bar-area {
 294     position: absolute;
 295     top: 0;
 296     bottom: 0;
 297     right: 0;
 298     left: 3px;
 299     pointer-events: none;
 300 }
 301
 302 .timeline-graph-bar {
 303     position: absolute;
 304     top: -1px;
 305     bottom: 0;
 306     margin: auto -2px;
 307     height: 9px;
 308     min-width: 5px;
 309     z-index: 180;
 310     pointer-events: visibleFill;
 311     border-radius: 1px;
 312     border: 1px solid;
 313 }
 314
 315 .timeline-graph-bar.with-children {
 316     opacity: 0.25;
 317     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
 318 }
 319
 320 .timeline-graph-bar.cpu {
 321     opacity: 0.7;
 322 }
 323
 324 .timeline-graph-side.background .timeline-graph-bar {
 325     background: transparent !important;
 326     border-width: 2px;
 327 }
 328
 329 .timeline-graph-side.even {
 330     background-color: rgba(0, 0, 0, 0.05);
 331 }
 332
 333 .timeline-aggregated-category {
 334     display: inline-block;
 335     height: 11px;
 336     margin-right: 2px;
 337     margin-left: 6px;
 338     position: relative;
 339     top: 2px;
 340     width: 10px;
 341     border: solid 1px;
 342 }
 343
 344 .popover .timeline-aggregated-category.timeline-loading {
 345     margin-left: 0px;
 346 }
 347
 348 .garbage-collect-status-bar-item .glyph {
 349     -webkit-mask-position: -128px -24px;
 350 }
 351
 352 .glue-async-status-bar-item .glyph {
 353     -webkit-mask-position: -128px -48px;
 354 }
 355
 356 .timeline-frame-overview-status-bar-item.toggled-on .glyph {
 357     background-color: rgb(66, 129, 235) !important;
 358 }
 359
 360 .timeline-records-stats, .storage-application-cache-status, .storage-application-cache-connectivity {
 361     text-shadow: white 0 1px 0;
 362 }
 363
 364 .timeline-records-stats {
 365     margin-top: 5px;
 366     margin-left: 6px;
 367     -webkit-flex: 1;
 368 }
 369
 370 .timeline-records-stats-container {
 371     display: inline-block;
 372     border-left: 1px solid rgb(202, 202, 202);
 373     height: 24px;
 374     margin-left: 6px;
 375 }
 376
 377 .timeline-frames-stats {
 378     pointer-events: auto;
 379     text-decoration: underline;
 380     cursor: pointer;
 381 }
 382
 383 #resources-container-content {
 384     overflow: visible;
 385     min-height: 100%;
 386 }
 387
 388 #resources-graphs {
 389     position: absolute;
 390     left: 0;
 391     right: 0;
 392     max-height: 100%;
 393     top: 112px;
 394 }
 395
 396 .resources-graph-side {
 397     position: relative;
 398     height: 36px;
 399     padding: 0 5px;
 400     white-space: nowrap;
 401     margin-top: 1px;
 402     border-top: 1px solid transparent;
 403     overflow: hidden;
 404 }
 405
 406 .resources-graph-bar-area {
 407     position: absolute;
 408     top: 0;
 409     bottom: 0;
 410     right: 8px;
 411     left: 9px;
 412 }
 413
 414 #timeline-overview-sidebar .sidebar-tree-item {
 415     line-height: 26px;
 416     height: 24px;
 417 }
 418
 419 #timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle {
 420     top: 5px;
 421 }
 422
 423 #timeline-overview-sidebar .icon {
 424     height: 24px;
 425     margin-top: -1px;
 426     margin-left: 0;
 427     margin-right: 0;
 428     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 429     -webkit-mask-size: 320px 72px;
 430     background-color: black;
 431 }
 432
 433 @media (-webkit-min-device-pixel-ratio: 1.5) {
 434 #timeline-overview-sidebar .icon {
 435     -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
 436 }
 437 }
 438
 439 .timeline-overview-sidebar-events .icon {
 440     -webkit-mask-position: -192px -48px;
 441 }
 442
 443 .timeline-overview-sidebar-frames .icon {
 444     -webkit-mask-position: -160px -48px;
 445 }
 446
 447 .timeline-overview-sidebar-memory .icon {
 448     -webkit-mask-position: -224px -48px;
 449 }
 450
 451 .memory-graph-label {
 452     position: absolute;
 453     left: 5px;
 454     font-size: 9px;
 455     color: rgb(50%, 50%, 50%);
 456     white-space: nowrap;
 457 }
 458
 459 .max.memory-graph-label {
 460     top: 5px;
 461 }
 462
 463 .min.memory-graph-label {
 464     bottom: 5px;
 465 }
 466
 467 #timeline-memory-splitter {
 468     position: absolute;
 469     z-index: 5;
 470     left: 0;
 471     right: 0;
 472     height: 5px;
 473     cursor: ns-resize;
 474 }
 475
 476 #memory-counters-graph {
 477     overflow: hidden;
 478 }
 479
 480 #memory-graphs-container {
 481     border-top: 1px solid #AAA;
 482 }
 483
 484 #memory-graphs-canvas-container {
 485     border-right: 1px solid #AAA;
 486 }
 487
 488 #memory-graphs-canvas-container.dom-counters .resources-dividers {
 489     top: 15px;
 490 }
 491
 492 #memory-graphs-container .split-view-contents {
 493     overflow: hidden;
 494 }
 495
 496 .memory-counter-sidebar-info {
 497     margin: 10px;
 498 }
 499
 500 .memory-counter-sidebar-info .swatch{
 501     background-image: none;
 502 }
 503
 504 .memory-counter-sidebar-info.bottom-border-visible {
 505     border-bottom: 1px solid #AAA;
 506 }
 507
 508 .memory-counter-sidebar-info .title {
 509     margin: 4px;
 510 }
 511
 512 .memory-counter-value {
 513     margin: 4px;
 514 }
 515
 516 #counter-values-bar {
 517     border-bottom: solid 1px lightgray;
 518     min-height: 15px;
 519 }
 520
 521 .timeline-frame-overview-bars {
 522     z-index: 200;
 523     background-color: rgba(255, 255, 255, 0.8);
 524     width: 100%;
 525     height: 100%;
 526 }
 527
 528 .timeline .resources-event-divider {
 529     height: 19px;
 530     width: 8px;
 531     border-left-width: 2px;
 532     border-left-style: solid;
 533     bottom: auto;
 534     pointer-events: auto;
 535 }
 536
 537 .resources-red-divider {
 538     border-color: rgba(255, 0, 0, 0.5);
 539 }
 540
 541 .resources-blue-divider {
 542     border-color: rgba(0, 0, 255, 0.5);
 543 }
 544
 545 .resources-orange-divider {
 546     border-color: rgba(255, 178, 23, 0.5);
 547 }
 548
 549 .resources-divider.last {
 550     border-color: transparent;
 551 }
 552
 553 .timeline .resources-event-divider.timeline-frame-divider {
 554     background-color: rgba(180, 180, 180, 0.8);
 555     border-style: none;
 556     width: 1px;
 557     height: 100%;
 558     pointer-events: none;
 559 }
 560
 561 .sidebar-tree-item .timeline-frame-overview-status-bar-item {
 562     position: absolute;
 563     right: 10px;
 564     top: 4px;
 565 }
 566
 567 .timeline-frame-container {
 568     height: 19px;
 569     overflow: hidden;
 570     background-color: rgb(220, 220, 220);
 571     opacity: 0.6;
 572     color: black;
 573     text-align: center;
 574     padding-top: 3px;
 575     z-index: 350;
 576     pointer-events: auto;
 577 }
 578
 579 .timeline-frame-strip {
 580     position: absolute;
 581     height: 19px;
 582 }
 583
 584 #timeline-grid-header {
 585     position: absolute;
 586     left: 200px;
 587     right: 0;
 588     top: 90px;
 589     bottom: 0;
 590     pointer-events: none;
 591 }
 592
 593 .timeline-cpu-bars {
 594     position: absolute;
 595     top: 0;
 596     height: 19px;
 597     z-index: 350;
 598     width: 100%;
 599     overflow: hidden;
 600 }
 601
 602 .timeline-cpu-bars .timeline-graph-bar {
 603     border-color: rgb(192, 192, 192);
 604     background-color: rgba(0, 0, 0, 0.1);
 605     top: 4px;
 606     bottom: 4px;
 607     height: auto;
 608 }
 609
 610 .timeline-cpu-curtain-left, .timeline-cpu-curtain-right {
 611     background-color: rgba(0, 0, 0, 0.15);
 612     position: absolute;
 613     top: 0;
 614     height: 100%;
 615 }
 616
 617 .timeline-cpu-curtain-left {
 618     left: 0;
 619 }
 620
 621 .timeline-cpu-curtain-right {
 622     right: 0;
 623 }
 624
 625 .image-preview-container {
 626     background: transparent;
 627     text-align: left;
 628     border-spacing: 0;
 629 }
 630
 631 .image-preview-container img {
 632     max-width: 100px;
 633     max-height: 100px;
 634     background-image: url(Images/checker.png);
 635     -webkit-user-select: text;
 636     -webkit-user-drag: auto;
 637 }
 638
 639 .image-container {
 640     padding: 0;
 641 }
 642
 643 .memory-category-value {
 644     float: right;
 645 }
 646
 647 .highlighted-timeline-record {
 648     -webkit-animation: "timeline_record_highlight" 2s 0s;
 649 }
 650
 651 @-webkit-keyframes timeline_record_highlight {
 652     from {background-color: rgba(255, 255, 120, 1); }
 653     to { background-color: rgba(255, 255, 120, 0); }
 654 }