Web Inspector: CPU Usage Timeline - Add legend and graph hover effects
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / CPUUsageCombinedView.css
1 /*
2  * Copyright (C) 2019 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .cpu-usage-combined-view {
27     display: flex;
28     width: 100%;
29     height: calc(var(--cpu-usage-combined-view-height) + var(--cpu-usage-indicator-view-height) + 2px); /* +2 for borders */
30     border-bottom: 1px solid var(--border-color);
31 }
32
33 .cpu-usage-combined-view > .graph,
34 .cpu-usage-combined-view > .graph > :matches(.stacked-area-chart, .range-chart),
35 .cpu-usage-combined-view > .graph > :matches(.stacked-area-chart, .range-chart) > svg {
36     width: 100%;
37     height: 100%;
38 }
39
40 .cpu-usage-combined-view > .graph > .stacked-area-chart {
41     height: calc(var(--cpu-usage-combined-view-height));
42 }
43
44 .cpu-usage-combined-view > .graph > .range-chart {
45     position: relative;
46     z-index: calc(var(--timeline-marker-z-index) + 1);
47     height: calc(var(--cpu-usage-indicator-view-height) + 2px); /* +2 for borders */
48     background-color: var(--background-color-content);
49     border-top: 1px solid var(--border-color);
50     border-bottom: 1px solid var(--border-color);
51 }
52
53 .cpu-usage-combined-view > .details {
54     flex-shrink: 0;
55     width: 150px;
56     padding-top: 10px;
57     -webkit-padding-start: 15px;
58     font-size: 12px;
59     color: var(--text-color-secondary);
60     overflow: hidden;
61     text-overflow: ellipsis;
62
63     --cpu-usage-combined-view-details-border-end: 1px solid var(--border-color);
64 }
65
66 body[dir=ltr] .cpu-usage-combined-view > .details {
67     border-right: var(--cpu-usage-combined-view-details-border-end);
68 }
69
70 body[dir=rtl] .cpu-usage-combined-view > .details {
71     border-left: var(--cpu-usage-combined-view-details-border-end);
72 }
73
74 .cpu-usage-combined-view > :matches(.details, .legend) > .name {
75     color: var(--text-color);
76     white-space: nowrap;
77 }
78
79 .cpu-usage-combined-view > .graph {
80     position: relative;
81 }
82
83 body[dir=rtl] .cpu-usage-combined-view > .graph {
84     transform: scaleX(-1);
85 }
86
87 .cpu-usage-combined-view > .details > .legend-container {
88     font-size: 11px;
89 }
90
91 .cpu-usage-combined-view > .details > .legend-container > .row {
92     display: flex;
93 }
94
95 .cpu-usage-combined-view > .details > .legend-container > .row + .row {
96     margin-top: 4px;
97 }
98
99 .cpu-usage-combined-view > .details > .legend-container > .row > .swatch {
100     width: 1em;
101     height: 1em;
102     margin-top: 1px;
103     -webkit-margin-end: 4px;
104 }
105
106 .cpu-usage-combined-view > .details > .legend-container .swatch.total {
107     background-color: none;
108     border: none;
109 }
110
111 .cpu-usage-combined-view > .details > .legend-container .swatch.other-threads {
112     background-color: var(--cpu-other-thread-fill-color);
113     border: 1px solid var(--cpu-other-thread-stroke-color);
114 }
115
116 .cpu-usage-combined-view > .details > .legend-container .swatch.main-thread {
117     background-color: var(--cpu-main-thread-fill-color);
118     border: 1px solid var(--cpu-main-thread-stroke-color);
119 }
120
121 .cpu-usage-combined-view > .details > .legend-container .swatch.worker-threads {
122     background-color: var(--cpu-worker-thread-fill-color);
123     border: 1px solid var(--cpu-worker-thread-stroke-color);
124 }
125
126 .cpu-usage-combined-view > .graph > .range-chart rect {
127     stroke-opacity: 0.25;
128 }
129
130 .cpu-usage-combined-view > .graph > .range-chart .sample-type-script {
131     stroke: var(--cpu-script-stroke-color);
132     fill: var(--cpu-script-fill-color);
133 }
134
135 .cpu-usage-combined-view > .graph > .range-chart .sample-type-style {
136     stroke: var(--cpu-style-stroke-color);
137     fill: var(--cpu-style-fill-color);
138 }
139
140 .cpu-usage-combined-view > .graph > .range-chart .sample-type-layout {
141     stroke: var(--cpu-layout-stroke-color);
142     fill: var(--cpu-layout-fill-color);
143 }
144
145 .cpu-usage-combined-view > .graph > .range-chart .sample-type-paint {
146     stroke: var(--cpu-paint-stroke-color);
147     fill: var(--cpu-paint-fill-color);
148 }