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 {
81 #timeline-overview-grid #resources-graphs {
90 border-right: 0 none transparent;
95 .timeline-records-view {
96 overflow: hidden !important;
99 .timeline-details-split {
107 .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/statusbarButtonGlyphs_2x.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/statusbarButtonGlyphs_2x.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/statusbarButtonGlyphs_2x.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,
269 #timeline-overview-power {
278 #timeline-overview-memory,
279 #timeline-overview-power {
283 #timeline-overview-pane {
289 #timeline-overview-container {
297 #timeline-overview-container canvas {
302 #timeline-overview-frames canvas {
304 background-color: rgba(255, 255, 255, 0.8);
315 .timeline-graph-side {
321 border-top: 1px solid transparent;
325 .timeline-graph-side.selected {
326 background-color: rgba(56, 121, 217, 0.1) !important;
329 .timeline-graph-bar-area {
335 pointer-events: none;
338 .timeline-graph-bar {
346 pointer-events: visibleFill;
351 .timeline-graph-bar.with-children {
353 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
356 .timeline-graph-bar.cpu {
360 .timeline-graph-side.background .timeline-graph-bar {
361 background: transparent !important;
365 .timeline-aggregated-category {
366 display: inline-block;
376 .popover .timeline-aggregated-category.timeline-loading {
383 list-style-type: none;
386 .garbage-collect-status-bar-item .glyph {
387 -webkit-mask-position: -128px -24px;
390 #resources-container-content {
403 .resources-graph-side {
409 border-top: 1px solid transparent;
413 .resources-graph-bar-area {
421 #timeline-overview-sidebar .sidebar-tree {
425 #timeline-overview-sidebar .sidebar-tree-item {
432 border-left: 6px solid transparent;
437 #timeline-overview-sidebar .sidebar-tree-item:hover {
441 #timeline-overview-sidebar .sidebar-tree-item.selected {
446 border-left: 6px solid #555;
449 #timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle {
453 #timeline-overview-sidebar .icon {
456 -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
457 -webkit-mask-size: 320px 144px;
458 background-color: black;
461 @media (-webkit-min-device-pixel-ratio: 1.5) {
462 #timeline-overview-sidebar .icon {
463 -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
467 .timeline-overview-sidebar-events .icon {
468 -webkit-mask-position: -192px -48px;
471 .timeline-overview-sidebar-frames .icon {
472 -webkit-mask-position: -160px -48px;
475 .timeline-overview-sidebar-memory .icon {
476 -webkit-mask-position: -224px -48px;
479 .timeline-overview-sidebar-power .icon {
480 -webkit-mask-position: -64px -120px;
483 .memory-graph-label {
487 color: rgb(50%, 50%, 50%);
491 .max.memory-graph-label {
495 .min.memory-graph-label {
499 #memory-graphs-canvas-container {
505 #memory-counters-graph {
509 #memory-graphs-canvas-container .memory-counter-marker {
518 #memory-graphs-container .split-view-contents-first {
519 background-color: rgb(236, 236, 236);
523 #memory-graphs-container .sidebar-tree-section {
527 .memory-counter-sidebar-info {
532 .memory-counter-sidebar-info .swatch {
533 background-image: none;
534 border: 1px solid rgba(0,0,0,0.3);
538 .memory-counter-sidebar-info.bottom-border-visible {
539 border-bottom: 1px solid #AAA;
542 .memory-counter-sidebar-info .title {
546 .memory-counter-value {
550 #counter-values-bar {
552 border-bottom: solid 1px lightgray;
558 .timeline .resources-event-divider {
561 border-left-width: 2px;
562 border-left-style: solid;
564 pointer-events: auto;
567 .resources-red-divider {
568 border-color: rgba(255, 0, 0, 0.5);
571 .resources-blue-divider {
572 border-color: rgba(0, 0, 255, 0.5);
575 .resources-orange-divider {
576 border-color: rgba(255, 178, 23, 0.5);
579 .resources-green-divider {
580 border-color: rgba(0, 130, 0, 0.5);
583 .resources-divider:last-child {
584 border-color: transparent;
587 .timeline .resources-event-divider.timeline-frame-divider {
588 background-color: rgba(180, 180, 180, 0.8);
592 pointer-events: none;
595 .timeline-frame-container {
598 background-color: rgb(220, 220, 220);
604 pointer-events: auto;
607 .timeline-frame-strip {
612 #timeline-grid-header {
613 pointer-events: none;
617 #timeline-graph-records-header {
618 pointer-events: none;
621 justify-content: center;
624 .timeline-utilization-strip {
632 .timeline-utilization-strip .timeline-graph-bar {
633 border-color: rgb(192, 192, 192);
634 background-color: rgba(0, 0, 0, 0.1);
639 .timeline-utilization-strip.gpu .timeline-graph-bar {
640 background-color: #00a;
646 .timeline-utilization-strip.gpu .timeline-graph-bar.gpu-task-foreign {
647 background-color: #aaa;
650 .timeline-cpu-curtain-left, .timeline-cpu-curtain-right {
651 background-color: rgba(210, 210, 210, 0.5);
658 .timeline-cpu-curtain-left {
662 .timeline-cpu-curtain-right {
666 .image-preview-container {
667 background: transparent;
672 .image-preview-container img {
675 background-image: url(Images/checker.png);
676 -webkit-user-select: text;
677 -webkit-user-drag: auto;
684 .memory-category-value {
688 .timeline-filters-header {
694 -webkit-user-select: text;
698 .timeline-details-title {
699 border-bottom: 1px solid #B8B8B8;
706 .timeline-details-row-title {
712 .timeline-details-row-data {
716 .timeline-details-view {
721 .timeline-details-view-title {
724 border-bottom: 1px solid rgb(202, 202, 202);
725 background-color: rgb(236, 236, 236);
728 color: rgb(92, 110, 129);
729 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
731 text-overflow: ellipsis;
734 .timeline-details-view-body {
741 .timeline-details-view-block {
745 .timeline-details-view-row {
746 padding: 2px 0 2px 6px;
750 .timeline-details-view-row-title {
752 color: rgb(48, 57, 66);
755 .timeline-details-view-row-value {
759 .timeline-details-view-row-details {
763 .timeline-details-view-row-details .image-preview-container {
767 .timeline-details-view-row-stack-trace {
768 padding: 4px 0 4px 20px;
771 .timeline-details-view-row-stack-trace div {
773 text-overflow: ellipsis;
776 .timeline-details-view-row-stack-trace .webkit-html-external-link,
777 .timeline-details-view-row-stack-trace .webkit-html-resource-link {
778 color: #333 !important;
781 .timeline-memory-split {
785 .timeline-memory-split > .split-view-contents-first {
789 .timeline-aggregated-info {
796 .timeline-aggregated-info-legend > div {
799 text-overflow: ellipsis;
802 .timeline-aggregated-info .pie-chart {
807 .timeline-flamechart-view #timeline-overview-grid {
811 .timeline-flamechart-view .flame-chart-main-pane .resources-divider-label {
815 .timeline-flamechart {
819 .timeline-progress-pane {
826 background-color: rgba(255, 255, 255, 0.8);
830 justify-content: center;