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-overview-panel .split-view-sidebar > label {
41 margin: 6px 0 3px 5px;
46 #timeline-overview-panel .split-view-sidebar > label > input {
50 .timeline-records-title, .timeline-records-list {
51 background-color: rgb(236, 236, 236);
54 .timeline-records-title {
55 padding: 3px 3px 3px 5px;
57 color: rgb(92, 110, 129); text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
60 .timeline-records-list {
64 #timeline-overview-grid {
65 background-color: rgb(255, 255, 255);
68 .timeline-overview-frames-mode #timeline-overview-grid {
72 #timeline-overview-grid .resources-dividers-label-bar {
76 .timeline-overview-frames-mode .overview-grid-window,
77 .timeline-overview-frames-mode .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 {
275 #timeline-overview-memory {
279 #timeline-overview-frames {
283 #timeline-overview-pane {
289 #timeline-overview-container {
291 flex-direction: column;
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 .timeline-garbage-collect-status-bar-item .glyph {
387 -webkit-mask-position: -128px -24px;
390 .timeline-frames-status-bar-item .glyph {
391 -webkit-mask-position: -160px -48px;
394 .timeline-flame-chart-status-bar-item .glyph {
395 -webkit-mask-position: -192px -48px;
398 #resources-container-content {
411 .resources-graph-side {
417 border-top: 1px solid transparent;
421 .resources-graph-bar-area {
429 .memory-graph-label {
433 color: rgb(50%, 50%, 50%);
437 #memory-graphs-canvas-container {
443 #memory-counters-graph {
447 #memory-graphs-canvas-container .memory-counter-marker {
456 #memory-graphs-container .split-view-contents-first {
457 background-color: rgb(236, 236, 236);
461 #memory-graphs-container .sidebar-tree-section {
463 padding: 5px 0 0 5px;
466 .memory-counter-sidebar-info {
472 .memory-counter-sidebar-info .swatch {
473 background-image: none;
474 border: 1px solid rgba(0,0,0,0.3);
478 .memory-counter-sidebar-info.bottom-border-visible {
479 border-bottom: 1px solid #AAA;
482 .memory-counter-sidebar-info .title {
486 .memory-counter-value {
490 #counter-values-bar {
492 border-bottom: solid 1px lightgray;
498 .timeline .resources-event-divider {
501 border-left-width: 2px;
502 border-left-style: solid;
504 pointer-events: auto;
507 .resources-red-divider {
508 border-color: rgba(255, 0, 0, 0.5);
511 .resources-blue-divider {
512 border-color: rgba(0, 0, 255, 0.5);
515 .resources-orange-divider {
516 border-color: rgba(255, 178, 23, 0.5);
519 .resources-green-divider {
520 border-color: rgba(0, 130, 0, 0.5);
523 .resources-divider:last-child {
524 border-color: transparent;
527 .timeline .resources-event-divider.timeline-frame-divider {
528 background-color: rgba(180, 180, 180, 0.8);
532 pointer-events: none;
535 .timeline-frame-container {
538 background-color: rgb(220, 220, 220);
543 pointer-events: auto;
546 .timeline-frame-strip {
552 .timeline-frame-strip.selected {
553 background-color: rgb(56, 121, 217);
557 #timeline-grid-header {
558 pointer-events: none;
562 #timeline-graph-records-header {
563 pointer-events: none;
566 justify-content: center;
569 .timeline-utilization-strip {
577 .timeline-utilization-strip .timeline-graph-bar {
578 border-color: rgb(192, 192, 192);
579 background-color: rgba(0, 0, 0, 0.1);
584 .timeline-utilization-strip.gpu .timeline-graph-bar {
585 background-color: #00a;
591 .timeline-utilization-strip.gpu .timeline-graph-bar.gpu-task-foreign {
592 background-color: #aaa;
595 .timeline-cpu-curtain-left, .timeline-cpu-curtain-right {
596 background-color: rgba(210, 210, 210, 0.5);
603 .timeline-cpu-curtain-left {
607 .timeline-cpu-curtain-right {
611 .image-preview-container {
612 background: transparent;
617 .image-preview-container img {
620 background-image: url(Images/checker.png);
621 -webkit-user-select: text;
622 -webkit-user-drag: auto;
629 .memory-category-value {
633 .timeline-filters-header {
639 -webkit-user-select: text;
643 .timeline-details-title {
644 border-bottom: 1px solid #B8B8B8;
651 .timeline-details-row-title {
657 .timeline-details-row-data {
661 .timeline-details-view {
666 .timeline-details-view-title {
669 border-bottom: 1px solid rgb(202, 202, 202);
670 background-color: rgb(236, 236, 236);
673 color: rgb(92, 110, 129);
674 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
676 text-overflow: ellipsis;
679 .timeline-details-view-body {
686 .timeline-details-view-block {
690 .timeline-details-view-row {
691 padding: 2px 0 2px 6px;
695 .timeline-details-view-row-title {
697 color: rgb(48, 57, 66);
700 .timeline-details-view-row-value {
704 .timeline-details-view-row-details {
708 .timeline-details-view-row-details .image-preview-container {
712 .timeline-details-view-row-details table {
716 .timeline-details-view-row-details table td {
721 .timeline-details-view-row-details table td .section {
725 .timeline-details-view-row-details table td .section > .header .title {
729 .timeline-details-view-row-stack-trace {
730 padding: 4px 0 4px 20px;
733 .timeline-details-view-row-stack-trace div {
735 text-overflow: ellipsis;
738 .timeline-details-view-row-stack-trace .webkit-html-external-link,
739 .timeline-details-view-row-stack-trace .webkit-html-resource-link {
740 color: #333 !important;
743 .timeline-memory-split {
747 .timeline-memory-split > .split-view-contents-first {
751 .timeline-aggregated-info {
758 .timeline-aggregated-info-legend > div {
761 text-overflow: ellipsis;
764 .timeline-aggregated-info .pie-chart {
769 .timeline-flamechart {
773 .timeline-progress-pane {
780 background-color: rgba(255, 255, 255, 0.8);
784 justify-content: center;
789 text-decoration: underline;