2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
5 * Redistribution and use in source and binary forms, with or without
6 * modification, are permitted provided that the following conditions
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.
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.
30 #timeline-overview-panel {
33 border-bottom: 1px solid rgb(140, 140, 140);
36 #timeline-overview-panel .timeline-graph-bar {
40 .timeline-records-title, .timeline-records-list {
41 background-color: rgb(236, 236, 236);
44 .timeline-records-title {
45 padding: 3px 3px 3px 5px;
47 color: rgb(92, 110, 129); text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
50 .timeline-records-list {
54 #timeline-overview-sidebar {
57 border-right: 1px solid rgb(64%, 64%, 64%);
60 #timeline-overview-grid {
61 background-color: rgb(255, 255, 255);
64 .timeline-frames-view .timeline-records-counter {
68 .timeline-frames-view #timeline-overview-grid {
72 #timeline-overview-grid .resources-dividers-label-bar {
76 .timeline-frames-view .overview-grid-window,
77 .timeline-frames-view .overview-grid-dividers-background,
78 .timeline-frames-view .overview-grid-window-resizer {
82 #timeline-overview-grid #resources-graphs {
91 border-right: 0 none transparent;
96 .timeline-records-view {
97 overflow: hidden !important;
100 .timeline-details-split {
108 .timeline-view-stack {
112 #timeline-container .webkit-html-external-link,
113 #timeline-container .webkit-html-resource-link {
117 .timeline-tree-item {
124 text-overflow: ellipsis;
128 .timeline-tree-item.selected {
129 background-color: rgb(56, 121, 217) !important;
133 .timeline-tree-item.hovered:not(.selected),
134 .timeline-graph-side.hovered {
135 background-color: rgba(0, 0, 0, 0.05) !important;
138 .timeline-expandable {
140 border-left: 1px solid rgb(163, 163, 163);
141 pointer-events: none;
144 .timeline-expandable-left {
150 border-top: 1px solid rgb(163, 163, 163);
151 border-bottom: 1px solid rgb(163, 163, 163);
154 .timeline-tree-item-expand-arrow {
155 display: inline-block;
156 -webkit-user-select: none;
157 -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
158 -webkit-mask-size: 320px 144px;
162 background-color: rgb(110, 110, 110);
168 @media (-webkit-min-device-pixel-ratio: 1.5) {
169 .timeline-tree-item-expand-arrow {
170 -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
174 .timeline-tree-item-expand-arrow.parent {
175 -webkit-mask-position: -4px -96px;
178 .timeline-tree-item-expand-arrow.parent.expanded {
179 -webkit-mask-position: -20px -96px;
182 .timeline-expandable-arrow {
183 background-image: url(Images/statusbarButtonGlyphs.png);
184 background-size: 320px 144px;
193 @media (-webkit-min-device-pixel-ratio: 1.5) {
194 .timeline-expandable-arrow {
195 background-image: url(Images/statusbarButtonGlyphs2x.png);
199 .timeline-expandable-collapsed .timeline-expandable-arrow {
200 background-position: -4px -96px;
203 .timeline-expandable-expanded .timeline-expandable-arrow {
204 background-position: -20px -96px;
207 .timeline-tree-item .type {
211 .timeline-tree-item .count {
215 .timeline-tree-item .timeline-tree-icon {
223 display: inline-block;
226 .timeline-tree-item.background .timeline-tree-icon {
227 background: none !important;
230 .timeline-tree-item-warning {
232 background-image: url(Images/statusbarButtonGlyphs.png);
233 background-size: 320px 144px;
237 background-position: -202px -107px;
242 .timeline-tree-item-child-warning {
246 @media (-webkit-min-device-pixel-ratio: 1.5) {
247 .timeline-tree-item-warning {
248 background-image: url(Images/statusbarButtonGlyphs2x.png);
252 .timeline-tree-item .data.dimmed {
253 color: rgba(0, 0, 0, 0.7);
254 pointer-events: none;
258 .timeline-tree-item.selected .data.dimmed {
259 color: rgba(255, 255, 255, 0.8);
260 pointer-events: auto;
263 .timeline-tree-item.selected .timeline-tree-item-expand-arrow {
264 background-color: white;
267 #timeline-overview-events,
268 #timeline-overview-memory {
277 #timeline-overview-memory {
281 #timeline-overview-pane {
286 #timeline-overview-container {
292 #timeline-overview-container canvas {
297 #timeline-overview-frames canvas {
299 background-color: rgba(255, 255, 255, 0.8);
310 .timeline-graph-side {
316 border-top: 1px solid transparent;
320 .timeline-graph-side.selected {
321 background-color: rgba(56, 121, 217, 0.1) !important;
324 .timeline-graph-bar-area {
330 pointer-events: none;
333 .timeline-graph-bar {
341 pointer-events: visibleFill;
346 .timeline-graph-bar.with-children {
348 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
351 .timeline-graph-bar.cpu {
355 .timeline-graph-side.background .timeline-graph-bar {
356 background: transparent !important;
360 .timeline-aggregated-category {
361 display: inline-block;
371 .popover .timeline-aggregated-category.timeline-loading {
378 list-style-type: none;
381 .garbage-collect-status-bar-item .glyph {
382 -webkit-mask-position: -128px -24px;
385 .glue-async-status-bar-item .glyph {
386 -webkit-mask-position: -128px -48px;
389 .glue-async-status-bar-item.toggled-on:disabled .glyph {
390 background-color: rgba(0, 0, 0, 0.75);
393 #resources-container-content {
406 .resources-graph-side {
412 border-top: 1px solid transparent;
416 .resources-graph-bar-area {
424 #timeline-overview-sidebar .sidebar-tree {
428 #timeline-overview-sidebar .sidebar-tree-item {
435 border-left: 6px solid transparent;
440 #timeline-overview-sidebar .sidebar-tree-item:hover {
444 #timeline-overview-sidebar .sidebar-tree-item.selected {
449 border-left: 6px solid #555;
452 #timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle {
456 #timeline-overview-sidebar .icon {
459 -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
460 -webkit-mask-size: 320px 144px;
461 background-color: black;
464 @media (-webkit-min-device-pixel-ratio: 1.5) {
465 #timeline-overview-sidebar .icon {
466 -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
470 .timeline-overview-sidebar-events .icon {
471 -webkit-mask-position: -192px -48px;
474 .timeline-overview-sidebar-frames .icon {
475 -webkit-mask-position: -160px -48px;
478 .timeline-overview-sidebar-memory .icon {
479 -webkit-mask-position: -224px -48px;
482 .memory-graph-label {
486 color: rgb(50%, 50%, 50%);
490 .max.memory-graph-label {
494 .min.memory-graph-label {
498 #memory-counters-graph {
499 border-right: 1px solid rgb(196, 196, 196);
502 #memory-graphs-canvas-container {
506 #memory-graphs-canvas-container.dom-counters .resources-dividers,
507 #memory-counters-graph {
511 #memory-graphs-container .split-view-contents-first {
512 background-color: rgb(236, 236, 236);
516 #memory-graphs-container .sidebar-tree-section {
520 .memory-counter-sidebar-info {
525 .memory-counter-sidebar-info .swatch{
526 background-image: none;
527 border: 1px solid rgba(0,0,0,0.3);
531 .memory-counter-sidebar-info.bottom-border-visible {
532 border-bottom: 1px solid #AAA;
535 .memory-counter-sidebar-info .title {
539 .memory-counter-value {
543 #counter-values-bar {
544 border-bottom: solid 1px lightgray;
550 .timeline .resources-event-divider {
553 border-left-width: 2px;
554 border-left-style: solid;
556 pointer-events: auto;
559 .resources-red-divider {
560 border-color: rgba(255, 0, 0, 0.5);
563 .resources-blue-divider {
564 border-color: rgba(0, 0, 255, 0.5);
567 .resources-orange-divider {
568 border-color: rgba(255, 178, 23, 0.5);
571 .resources-green-divider {
572 border-color: rgba(0, 130, 0, 0.5);
575 .resources-divider:last-child {
576 border-color: transparent;
579 .timeline .resources-event-divider.timeline-frame-divider {
580 background-color: rgba(180, 180, 180, 0.8);
584 pointer-events: none;
587 .timeline-frame-container {
590 background-color: rgb(220, 220, 220);
596 pointer-events: auto;
599 .timeline-frame-strip {
604 #timeline-grid-header {
605 pointer-events: none;
608 .timeline-utilization-strips {
611 justify-content: center;
614 .timeline-utilization-strip {
621 .timeline-utilization-strip .timeline-graph-bar {
622 border-color: rgb(192, 192, 192);
623 background-color: rgba(0, 0, 0, 0.1);
628 .timeline-utilization-strip.gpu .timeline-graph-bar {
629 background-color: #00a;
635 .timeline-utilization-strip.gpu .timeline-graph-bar.gpu-task-foreign {
636 background-color: #aaa;
639 .timeline-cpu-curtain-left, .timeline-cpu-curtain-right {
640 background-color: rgba(210, 210, 210, 0.5);
647 .timeline-cpu-curtain-left {
651 .timeline-cpu-curtain-right {
655 .image-preview-container {
656 background: transparent;
661 .image-preview-container img {
664 background-image: url(Images/checker.png);
665 -webkit-user-select: text;
666 -webkit-user-drag: auto;
673 .memory-category-value {
677 .highlighted-timeline-record {
678 -webkit-animation: "timeline_record_highlight" 2s 0s;
681 @-webkit-keyframes timeline_record_highlight {
682 from {background-color: rgba(255, 255, 120, 1); }
683 to { background-color: rgba(255, 255, 120, 0); }
686 .timeline-filters-header {
692 -webkit-user-select: text;
696 .timeline-details-title {
697 border-bottom: 1px solid #B8B8B8;
704 .timeline-details-row-title {
710 .timeline-details-row-data {
714 .timeline-details-view {
718 .timeline-details-view-title {
721 border-bottom: 1px solid rgb(202, 202, 202);
722 background-color: rgb(236, 236, 236);
725 color: rgb(92, 110, 129);
726 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
729 .timeline-details-view-body {
736 .timeline-details-view-block {
740 .timeline-details-view-row {
741 padding: 2px 0 2px 6px;
745 .timeline-details-view-row-title {
747 color: rgb(48, 57, 66);
750 .timeline-details-view-row-value {
754 .timeline-details-view-row-details {
758 .timeline-details-view-row-details .image-preview-container {
762 .timeline-details-view-row-stack-trace {
763 padding: 4px 0 4px 20px;
766 .timeline-details-view-row-stack-trace div {
768 text-overflow: ellipsis;
771 .timeline-details-view-row-stack-trace .webkit-html-external-link,
772 .timeline-details-view-row-stack-trace .webkit-html-resource-link {
773 color: #333 !important;
776 .timeline-memory-split {
780 .timeline-memory-split > .split-view-contents-first {
789 .pie-chart-background {
794 background-color: rgb(248, 248, 248);
795 box-shadow: 0 1px 2px;
798 .pie-chart-foreground {
812 clip: rect(0px, 100px, 100px, 50px);
815 .pie-chart-slice-inner {
820 clip: rect(0px, 50px, 100px, 0px);
823 .timeline-aggregated-info {
830 .timeline-aggregated-info-legend > div {
833 text-overflow: ellipsis;
836 .timeline-aggregated-info .pie-chart {