Web Inspector: CPU Usage Timeline - Add legend and graph hover effects
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / CPUTimelineView.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 body .timeline-view.cpu {
27     overflow: scroll;
28 }
29
30 .timeline-view.cpu > .content > .overview {
31     display: flex;
32     justify-content: center;
33     margin-bottom: 10px;
34     padding: 10px;
35     border-bottom: 1px solid var(--border-color);
36 }
37
38 .timeline-view.cpu > .content .subtitle {
39     font-family: -webkit-system-font, sans-serif;
40     font-size: 14px;
41 }
42
43 .timeline-view.cpu > .content .subtitle > .info {
44     display: inline-block;
45     width: 15px;
46     height: 15px;
47     -webkit-margin-start: 7px;
48     font-size: 12px;
49     color: var(--gray-foreground-color);
50     background-color: var(--gray-background-color);
51     border-radius: 50%;
52 }
53
54 .energy-info-popover-content {
55     width: 275px;
56     padding: 0 5px;
57     -webkit-hyphens: auto;
58 }
59
60 .timeline-view.cpu > .content > .details {
61     position: relative;
62 }
63
64 .timeline-view.cpu > .content > .details > .timeline-ruler {
65     position: absolute;
66     top: 5px;
67     bottom: 0;
68     right: 0;
69     left: 0;
70
71     --cpu-timeline-view-details-timeline-ruler-offset-start: 150px;
72 }
73
74 body[dir=ltr] .timeline-view.cpu > .content > .details > .timeline-ruler {
75     left: var(--cpu-timeline-view-details-timeline-ruler-offset-start);
76 }
77
78 body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler {
79     right: var(--cpu-timeline-view-details-timeline-ruler-offset-start);
80 }
81
82 .timeline-view.cpu > .content > .details > .subtitle,
83 .timeline-view.cpu > .content > .details > details > .subtitle {
84     padding: 0 10px 10px;
85     border-bottom: 1px solid var(--border-color);
86 }
87
88 .timeline-view.cpu > .content > .details > details > .subtitle.threads {
89     position: relative;
90     z-index: calc(var(--timeline-marker-z-index) + 1);
91     padding-top: 10px;
92     background-color: var(--background-color-content);
93 }
94
95 .timeline-view.cpu > .content > .overview > .chart {
96     width: 420px;
97     text-align: center;
98 }
99
100 .timeline-view.cpu > .content > .overview > .chart > .subtitle {
101     margin-bottom: 1em;
102 }
103
104 .timeline-view.cpu > .content > .overview > .chart > .container {
105     display: flex;
106     justify-content: center;
107 }
108
109 .timeline-view.cpu > .content > .overview > .divider {
110     margin: 0 5px;
111
112     --cpu-timeline-view-overview-divider-border-end: 1px solid var(--border-color);
113 }
114
115 body[dir=ltr] .timeline-view.cpu > .content > .overview > .divider {
116     border-right: var(--cpu-timeline-view-overview-divider-border-end);
117 }
118
119 body[dir=rtl] .timeline-view.cpu > .content > .overview > .divider {
120     border-left: var(--cpu-timeline-view-overview-divider-border-end);
121 }
122
123 .timeline-view.cpu > .content > .overview .samples,
124 .timeline-view.cpu > .content > .overview .legend .size {
125     margin: auto;
126     color: var(--text-color-secondary);
127 }
128
129 .timeline-view.cpu > .content > .overview .legend {
130     -webkit-padding-start: 20px;
131     text-align: start;
132 }
133
134 .timeline-view.cpu > .content > .overview .legend .row {
135     display: flex;
136 }
137
138 .timeline-view.cpu > .content > .overview .legend .row + .row {
139     margin-top: 4px;
140 }
141
142 .timeline-view.cpu > .content > .overview .legend .swatch {
143     width: 1em;
144     height: 1em;
145     margin-top: 1px;
146     -webkit-margin-end: 8px;
147 }
148
149 .timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-script {
150     border: 1px solid var(--cpu-script-stroke-color);
151     background-color: var(--cpu-script-fill-color);
152 }
153
154 .timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-style {
155     border: 1px solid var(--cpu-style-stroke-color);
156     background-color: var(--cpu-style-fill-color);
157 }
158
159 .timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-layout {
160     border: 1px solid var(--cpu-layout-stroke-color);
161     background-color: var(--cpu-layout-fill-color);
162 }
163
164 .timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-paint {
165     border: 1px solid var(--cpu-paint-stroke-color);
166     background-color: var(--cpu-paint-fill-color);
167 }
168
169 .timeline-view.cpu .circle-chart > svg > path.segment.sample-type-idle {
170     stroke: var(--cpu-idle-stroke-color);
171     fill: var(--cpu-idle-fill-color);
172 }
173
174 .timeline-view.cpu .circle-chart > svg > path.segment.sample-type-script {
175     stroke: var(--cpu-script-stroke-color);
176     fill: var(--cpu-script-fill-color);
177 }
178
179 .timeline-view.cpu .circle-chart > svg > path.segment.sample-type-style {
180     stroke: var(--cpu-style-stroke-color);
181     fill: var(--cpu-style-fill-color);
182 }
183
184 .timeline-view.cpu .circle-chart > svg > path.segment.sample-type-layout {
185     stroke: var(--cpu-layout-stroke-color);
186     fill: var(--cpu-layout-fill-color);
187 }
188
189 .timeline-view.cpu .circle-chart > svg > path.segment.sample-type-paint {
190     stroke: var(--cpu-paint-stroke-color);
191     fill: var(--cpu-paint-fill-color);
192 }
193
194 .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) svg > path {
195     fill: var(--cpu-other-thread-fill-color);
196     stroke: var(--cpu-other-thread-stroke-color);
197 }
198
199 .timeline-view.cpu .main-thread svg > path,
200 .timeline-view.cpu svg > path.main-thread-usage {
201     fill: var(--cpu-main-thread-fill-color);
202     stroke: var(--cpu-main-thread-stroke-color);
203 }
204
205 .timeline-view.cpu .worker-thread svg > path,
206 .timeline-view.cpu svg > path.worker-thread-usage {
207     fill: var(--cpu-worker-thread-fill-color);
208     stroke: var(--cpu-worker-thread-stroke-color);
209 }
210
211 .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers {
212     position: absolute;
213     top: 0;
214     left: 0;
215     right: 0;
216     bottom: 0;
217     pointer-events: none;
218 }
219
220 .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
221     position: absolute;
222     z-index: 10;
223     width: 100%;
224     height: 1px;
225     background-color: hsla(0, 0%, var(--foreground-lightness), 0.07);
226 }
227
228 body[dir=ltr] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
229     text-align: end;
230 }
231
232 body[dir=rtl] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
233     transform: scaleX(-1);
234 }
235
236 .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div > .label {
237     padding: 2px;
238     font-size: 8px;
239     color: var(--text-color-secondary);
240     background-color: var(--background-color-content);
241 }
242
243 .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) circle {
244     r: 3;
245     fill: var(--cpu-overlay-color);
246 }
247
248 .timeline-view.cpu .timeline-ruler > .markers > .marker.timestamp {
249     color: var(--cpu-overlay-color);
250     opacity: 0.8;
251     pointer-events: none;
252 }
253
254 .timeline-view.cpu .timeline-ruler > .markers > .marker.timestamp::after {
255     display: none;
256 }
257
258 .timeline-view.cpu .gauge-chart .low {
259     --gauge-chart-path-fill-color: var(--cpu-low-color);
260     --gauge-chart-path-stroke-color: var(--cpu-low-color);
261 }
262
263 .timeline-view.cpu .gauge-chart .medium {
264     --gauge-chart-path-fill-color: var(--cpu-medium-color);
265     --gauge-chart-path-stroke-color: var(--cpu-medium-color);
266 }
267
268 .timeline-view.cpu .gauge-chart .high {
269     --gauge-chart-path-fill-color: var(--cpu-high-color);
270     --gauge-chart-path-stroke-color: var(--cpu-high-color);
271 }
272
273 .timeline-view.cpu .gauge-chart {
274     --gauge-chart-needle-fill-color: hsla(0, 0%, 36%, 0.85);
275     --gauge-chart-needle-stroke-color: hsla(0, 0%, 36%, 0.85);
276 }
277
278 .timeline-view.cpu .energy {
279     color: hsla(0, 0%, var(--foreground-lightness), 0.85);
280 }
281
282 .timeline-view.cpu .energy .energy-impact {
283     min-width: 140px;
284     margin-top: 15px;
285     font-size: 3em;
286     color: var(--text-color-secondary);
287 }
288
289 .timeline-view.cpu .energy .energy-impact.low {
290     color: var(--cpu-low-color);
291 }
292
293 .timeline-view.cpu .energy .energy-impact.medium {
294     color: var(--cpu-medium-color);
295 }
296
297 .timeline-view.cpu .energy .energy-impact.high {
298     color: var(--cpu-high-color);
299 }
300
301 .timeline-view.cpu .energy .energy-impact-number {
302     font-size: 14px;
303 }
304
305 .timeline-view.cpu > .content > .overview > .chart > .container.stats {
306     padding: 0 5px;
307     white-space: nowrap;
308     -webkit-user-select: text;
309 }
310
311 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table {
312     overflow: hidden;
313 }
314
315 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table > tr > th {
316     text-align: end;
317 }
318
319 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table > tr > td.number {
320     min-width: 25px;
321     padding: 0px 2px;
322     text-align: end;
323 }
324
325 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table > tr > td.label {
326     text-align: start;
327 }
328
329 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table .show-more {
330     cursor: pointer;
331 }
332
333 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table .unknown {
334     color: var(--link-text-color);
335 }
336
337 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table .filter-clear {
338     display: inline-block;
339     width: 13px;
340     height: 13px;
341     font-size: 12px;
342     color: var(--gray-foreground-color);
343     background-color: var(--gray-background-color);
344     border-radius: 50%;
345     line-height: 12px;
346     text-align: center;
347     cursor: pointer;
348 }
349
350 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table .filter {
351     padding: 0 6px 1px;
352     font-size: 10px;
353     background-color: hsl(0, 0%, 85%);
354     border: 1px solid transparent;
355     border-radius: 3px;
356     cursor: pointer;
357 }
358
359 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table :matches(.filter, .filter-clear):hover {
360     opacity: 0.7;
361 }
362
363 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table .filter.active {
364     color: var(--selected-foreground-color);
365     background-color: var(--selected-background-color);
366 }
367
368 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table .filter.active + .filter.active {
369     -webkit-margin-start: 3px;
370 }
371
372 @media (prefers-color-scheme: dark) {
373     .timeline-view.cpu .gauge-chart:not(.empty) > svg > polygon.needle {
374         fill: hsla(0, 0%, var(--foreground-lightness), 0.85);
375         stroke: hsla(0, 0%, var(--foreground-lightness), 0.85);
376     }
377
378     .timeline-view.cpu > .content > .overview > .chart > .container.stats > table .filter {
379         background-color: hsl(0, 0%, 33%);
380     }
381 }