Commit | Line | Data |
---|---|---|
8c5bee4f RK |
1 | /* vim:set ts=2 sw=2 sts=2 et: */ |
2 | /* This Source Code Form is subject to the terms of the Mozilla Public | |
3 | * License, v. 2.0. If a copy of the MPL was not distributed with this file, | |
4 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
5 | ||
6 | /* CSS Variables specific to this panel that aren't defined by the themes */ | |
7 | .theme-dark, | |
8 | .theme-light { | |
9 | --cell-border-color: #A09090; | |
936e60fe | 10 | --cell-border-color-light: #A09090; |
8c5bee4f RK |
11 | --focus-cell-border-color: #9C9CFF; |
12 | --row-alt-background-color: #403400; | |
13 | --row-hover-background-color: #544400; | |
14 | } | |
15 | ||
ec6b35d8 RK |
16 | /* |
17 | * DE-XUL: Set a sidebar width because inline XUL components will cause the flex | |
18 | * to overflow if dynamically sized. | |
19 | */ | |
20 | .performance-tool { | |
21 | --sidebar-width: 185px; | |
22 | } | |
23 | ||
e9fbfc3a RK |
24 | /** |
25 | * A generic class to hide elements, replacing the `element.hidden` attribute | |
26 | * that we use to hide elements that can later be active | |
27 | */ | |
28 | .hidden { | |
29 | display: none; | |
30 | width: 0px; | |
31 | height: 0px; | |
32 | } | |
33 | ||
8c5bee4f RK |
34 | /* Toolbar */ |
35 | ||
ae90b726 | 36 | #performance-toolbar-control-other { |
dae45075 | 37 | padding-inline-end: 5px; |
ae90b726 RK |
38 | } |
39 | ||
8c5bee4f | 40 | #performance-toolbar-controls-detail-views .toolbarbutton-text { |
dae45075 RK |
41 | padding-inline-start: 4px; |
42 | padding-inline-end: 8px; | |
8c5bee4f RK |
43 | } |
44 | ||
2f2239a0 | 45 | #filter-button { |
1ad21b1f | 46 | list-style-image: url(images/filter.svg); |
ae90b726 RK |
47 | } |
48 | ||
6f751fd1 | 49 | #performance-filter-menupopup > menuitem .menu-iconic-left::after { |
ae90b726 RK |
50 | content: ""; |
51 | display: block; | |
52 | width: 8px; | |
53 | height: 8px; | |
54 | margin: 0 8px; | |
ae90b726 | 55 | border-radius: 1px; |
ae90b726 RK |
56 | } |
57 | ||
936e60fe | 58 | /* Details panel buttons */ |
8c5bee4f | 59 | |
936e60fe | 60 | #select-waterfall-view { |
d0a8de80 | 61 | list-style-image: url(images/performance-icons.svg#details-waterfall); |
8c5bee4f RK |
62 | } |
63 | ||
936e60fe RK |
64 | #select-js-calltree-view, |
65 | #select-memory-calltree-view { | |
d0a8de80 | 66 | list-style-image: url(images/performance-icons.svg#details-call-tree); |
d74db938 RK |
67 | } |
68 | ||
936e60fe RK |
69 | #select-js-flamegraph-view, |
70 | #select-memory-flamegraph-view { | |
d0a8de80 | 71 | list-style-image: url(images/performance-icons.svg#details-flamegraph); |
d74db938 RK |
72 | } |
73 | ||
b336389b | 74 | #select-optimizations-view { |
dadba0f2 | 75 | list-style-image: url(images/profiler-stopwatch.svg); |
b336389b RK |
76 | } |
77 | ||
936e60fe RK |
78 | /* Recording buttons */ |
79 | ||
1e9e1791 | 80 | #recordings-controls { |
60156ae2 RK |
81 | /* background-color: #9C9CFF;*/ |
82 | display: flex; | |
83 | } | |
84 | ||
85 | #recording-controls-mount, | |
86 | #recording-controls-mount > div, | |
87 | #recording-controls-mount > div > .devtools-toolbar { | |
88 | display: flex; | |
89 | flex: 1 1 auto; | |
1e9e1791 RK |
90 | } |
91 | ||
92 | #clear-button::before { | |
93 | background-image: var(--clear-icon-url); | |
94 | } | |
95 | ||
96 | #main-record-button::before { | |
97 | background-image: url(images/profiler-stopwatch-tbutton.svg); | |
98 | } | |
99 | ||
100 | #import-button::before { | |
101 | background-image: url(images/import.svg); | |
102 | } | |
103 | ||
104 | #main-record-button .button-icon, #import-button .button-icon { | |
105 | margin: 0; | |
106 | } | |
107 | ||
108 | #main-record-button .button-text, #import-button .button-text { | |
109 | display: none; | |
d74db938 RK |
110 | } |
111 | ||
936e60fe RK |
112 | #main-record-button .button-icon { |
113 | margin: 0; | |
114 | } | |
d74db938 | 115 | |
936e60fe RK |
116 | #main-record-button .button-text { |
117 | display: none; | |
d74db938 | 118 | } |
936e60fe RK |
119 | |
120 | .notice-container .record-button { | |
121 | padding: 5px !important; | |
d74db938 RK |
122 | } |
123 | ||
ec6b35d8 RK |
124 | .notice-container .record-button.checked, |
125 | .notice-container .record-button.checked { | |
936e60fe RK |
126 | color: var(--theme-selection-color) !important; |
127 | background: var(--theme-selection-background) !important; | |
d74db938 RK |
128 | } |
129 | ||
936e60fe RK |
130 | /* Sidebar & recording items */ |
131 | ||
d0a8de80 RK |
132 | #recordings-pane { |
133 | border-inline-end: 1px solid var(--theme-splitter-color); | |
ec6b35d8 RK |
134 | width: var(--sidebar-width); |
135 | } | |
136 | ||
137 | #recording-controls-mount { | |
138 | width: var(--sidebar-width); | |
139 | } | |
140 | ||
141 | #recording-controls-mount > div { | |
142 | width: var(--sidebar-width); | |
143 | } | |
144 | ||
145 | /* | |
146 | * DE-XUL: The height of the toolbar is not correct without tweaking the line-height. | |
147 | */ | |
148 | #recordings-pane .devtools-toolbar { | |
149 | line-height: 0; | |
d0a8de80 RK |
150 | } |
151 | ||
152 | #recordings-list { | |
153 | max-width: 300px; | |
154 | } | |
155 | ||
936e60fe RK |
156 | .recording-item { |
157 | padding: 4px; | |
d74db938 RK |
158 | } |
159 | ||
936e60fe RK |
160 | .recording-item-title { |
161 | font-size: 110%; | |
d74db938 RK |
162 | } |
163 | ||
936e60fe RK |
164 | .recording-item-footer { |
165 | padding-top: 4px; | |
166 | font-size: 90%; | |
167 | } | |
8c5bee4f | 168 | |
936e60fe RK |
169 | .recording-item-save { |
170 | text-decoration: underline; | |
171 | cursor: pointer; | |
2f2239a0 RK |
172 | } |
173 | ||
936e60fe RK |
174 | .recording-item-duration, |
175 | .recording-item-save { | |
176 | color: var(--theme-body-color-alt); | |
8c5bee4f RK |
177 | } |
178 | ||
936e60fe RK |
179 | #recordings-list .selected label { |
180 | /* Text inside a selected item should not be custom colored. */ | |
181 | color: inherit !important; | |
8c5bee4f RK |
182 | } |
183 | ||
936e60fe RK |
184 | /* Recording notices */ |
185 | ||
186 | .notice-container { | |
187 | font-size: 120%; | |
d0a8de80 | 188 | background-color: var(--theme-body-background); |
936e60fe RK |
189 | color: var(--theme-body-color); |
190 | padding-bottom: 20vh; | |
8c5bee4f RK |
191 | } |
192 | ||
d0a8de80 RK |
193 | .tool-disabled-message { |
194 | text-align: center; | |
195 | } | |
196 | ||
197 | .console-profile-recording-notice, | |
198 | .console-profile-stop-notice { | |
199 | overflow: hidden; | |
200 | } | |
201 | ||
936e60fe RK |
202 | .console-profile-command { |
203 | font-family: monospace; | |
204 | margin: 3px 2px; | |
205 | } | |
206 | ||
207 | .realtime-disabled-message, | |
208 | .realtime-disabled-on-e10s-message { | |
8c5bee4f RK |
209 | display: none; |
210 | } | |
211 | ||
d0a8de80 | 212 | #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message, |
936e60fe RK |
213 | #performance-view[e10s="unsupported"] .realtime-disabled-message { |
214 | display: initial; | |
215 | opacity: 0.5; | |
2f2239a0 RK |
216 | } |
217 | ||
936e60fe RK |
218 | .buffer-status-message, |
219 | .buffer-status-message-full { | |
220 | display: none; | |
8c5bee4f RK |
221 | } |
222 | ||
936e60fe RK |
223 | #details-pane-container[buffer-status="in-progress"] .buffer-status-message { |
224 | display: initial; | |
225 | opacity: 0.5; | |
2f2239a0 RK |
226 | } |
227 | ||
936e60fe RK |
228 | #details-pane-container[buffer-status="full"] .buffer-status-message { |
229 | display: initial; | |
230 | color: var(--theme-highlight-red); | |
231 | font-weight: bold; | |
232 | opacity: 1; | |
8c5bee4f RK |
233 | } |
234 | ||
936e60fe RK |
235 | #details-pane-container[buffer-status="full"] .buffer-status-message-full { |
236 | display: initial; | |
2f2239a0 RK |
237 | } |
238 | ||
8c5bee4f RK |
239 | /* Profile call tree */ |
240 | ||
241 | .call-tree-cells-container { | |
8c5bee4f RK |
242 | overflow: auto; |
243 | } | |
244 | ||
8c5bee4f RK |
245 | .call-tree-cells-container[categories-hidden] .call-tree-category { |
246 | display: none; | |
247 | } | |
248 | ||
249 | .call-tree-header { | |
250 | font-size: 90%; | |
251 | padding-top: 2px !important; | |
252 | padding-bottom: 2px !important; | |
253 | } | |
254 | ||
255 | .call-tree-header[type="duration"], | |
256 | .call-tree-cell[type="duration"], | |
257 | .call-tree-header[type="self-duration"], | |
258 | .call-tree-cell[type="self-duration"] { | |
d0a8de80 | 259 | min-width: 6vw; |
8c5bee4f RK |
260 | width: 6vw; |
261 | } | |
262 | ||
263 | .call-tree-header[type="percentage"], | |
264 | .call-tree-cell[type="percentage"], | |
265 | .call-tree-header[type="self-percentage"], | |
266 | .call-tree-cell[type="self-percentage"] { | |
d0a8de80 | 267 | min-width: 5vw; |
8c5bee4f RK |
268 | width: 5vw; |
269 | } | |
270 | ||
271 | .call-tree-header[type="samples"], | |
272 | .call-tree-cell[type="samples"] { | |
d0a8de80 | 273 | min-width: 4.5vw; |
8c5bee4f RK |
274 | width: 4.5vw; |
275 | } | |
276 | ||
024a65e9 RK |
277 | .call-tree-header[type="count"], |
278 | .call-tree-cell[type="count"], | |
279 | .call-tree-header[type="self-count"], | |
e9fbfc3a RK |
280 | .call-tree-cell[type="self-count"], |
281 | .call-tree-header[type="size"], | |
282 | .call-tree-cell[type="size"], | |
283 | .call-tree-header[type="self-size"], | |
284 | .call-tree-cell[type="self-size"], | |
285 | .call-tree-header[type="count-percentage"], | |
286 | .call-tree-cell[type="count-percentage"], | |
287 | .call-tree-header[type="self-count-percentage"], | |
288 | .call-tree-cell[type="self-count-percentage"], | |
289 | .call-tree-header[type="size-percentage"], | |
290 | .call-tree-cell[type="size-percentage"], | |
291 | .call-tree-header[type="self-size-percentage"], | |
292 | .call-tree-cell[type="self-size-percentage"] { | |
d0a8de80 | 293 | min-width: 6vw; |
e9fbfc3a | 294 | width: 6vw; |
8c5bee4f RK |
295 | } |
296 | ||
8c5bee4f RK |
297 | .call-tree-header, |
298 | .call-tree-cell { | |
299 | -moz-box-align: center; | |
300 | overflow: hidden; | |
d0a8de80 | 301 | text-overflow: ellipsis; |
8c5bee4f RK |
302 | padding: 1px 4px; |
303 | color: var(--theme-body-color); | |
dae45075 | 304 | border-inline-end-color: var(--cell-border-color); |
8c5bee4f RK |
305 | } |
306 | ||
307 | .call-tree-header:not(:last-child), | |
308 | .call-tree-cell:not(:last-child) { | |
dae45075 RK |
309 | border-inline-end-width: 1px; |
310 | border-inline-end-style: solid; | |
8c5bee4f RK |
311 | } |
312 | ||
313 | .call-tree-header:not(:last-child) { | |
314 | text-align: center; | |
315 | } | |
316 | ||
317 | .call-tree-cell:not(:last-child) { | |
318 | text-align: end; | |
319 | } | |
320 | ||
321 | .call-tree-header { | |
322 | background-color: var(--theme-tab-toolbar-background); | |
323 | } | |
324 | ||
d0a8de80 RK |
325 | .call-tree-item .call-tree-cell, |
326 | .call-tree-item .call-tree-cell[type=function] description { | |
327 | -moz-user-select: text; | |
328 | /* so that optimizations view doesn't break the lines in call tree */ | |
329 | white-space: nowrap; | |
330 | } | |
331 | ||
332 | .call-tree-item .call-tree-cell::-moz-selection, | |
333 | .call-tree-item .call-tree-cell[type=function] description::-moz-selection { | |
334 | background-color: var(--theme-highlight-orange); | |
335 | } | |
336 | ||
936e60fe | 337 | .call-tree-item:last-child { |
8c5bee4f RK |
338 | border-bottom: 1px solid var(--cell-border-color); |
339 | } | |
340 | ||
341 | .call-tree-item:nth-child(2n) { | |
342 | background-color: var(--row-alt-background-color); | |
343 | } | |
344 | ||
345 | .call-tree-item:hover { | |
346 | background-color: var(--row-hover-background-color); | |
347 | } | |
348 | ||
349 | .call-tree-item:focus { | |
350 | background-color: var(--theme-selection-background); | |
351 | } | |
352 | ||
936e60fe | 353 | .call-tree-item:focus description { |
8c5bee4f RK |
354 | color: var(--theme-selection-color) !important; |
355 | } | |
356 | ||
357 | .call-tree-item:focus .call-tree-cell { | |
dae45075 | 358 | border-inline-end-color: var(--focus-cell-border-color); |
8c5bee4f RK |
359 | } |
360 | ||
361 | .call-tree-item:not([origin="content"]) .call-tree-name, | |
362 | .call-tree-item:not([origin="content"]) .call-tree-url, | |
363 | .call-tree-item:not([origin="content"]) .call-tree-line, | |
364 | .call-tree-item:not([origin="content"]) .call-tree-column { | |
365 | /* Style chrome and non-JS nodes differently. */ | |
366 | opacity: 0.6; | |
367 | } | |
368 | ||
d74db938 | 369 | .call-tree-name { |
dae45075 | 370 | margin-inline-end: 4px !important; |
d74db938 RK |
371 | } |
372 | ||
8c5bee4f | 373 | .call-tree-url { |
8c5bee4f RK |
374 | cursor: pointer; |
375 | } | |
376 | ||
377 | .call-tree-url:hover { | |
378 | text-decoration: underline; | |
379 | } | |
380 | ||
a5cb6e53 | 381 | .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url { |
8c5bee4f RK |
382 | color: var(--theme-highlight-blue); |
383 | } | |
384 | ||
a5cb6e53 | 385 | .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line { |
8c5bee4f RK |
386 | color: var(--theme-highlight-orange); |
387 | } | |
388 | ||
389 | .call-tree-column { | |
390 | color: var(--theme-highlight-orange); | |
391 | opacity: 0.6; | |
392 | } | |
393 | ||
394 | .call-tree-host { | |
dae45075 | 395 | margin-inline-start: 8px !important; |
8c5bee4f RK |
396 | font-size: 90%; |
397 | color: var(--theme-content-color2); | |
398 | } | |
399 | ||
936e60fe RK |
400 | .call-tree-category { |
401 | transform: scale(0.75); | |
402 | transform-origin: center right; | |
8c5bee4f RK |
403 | } |
404 | ||
936e60fe RK |
405 | /** |
406 | * Waterfall ticks header | |
407 | */ | |
8c5bee4f | 408 | |
936e60fe | 409 | .waterfall-header-ticks { |
d0a8de80 | 410 | overflow: hidden; |
8c5bee4f RK |
411 | } |
412 | ||
936e60fe RK |
413 | .waterfall-header-name { |
414 | padding: 2px 4px; | |
415 | font-size: 90%; | |
8c5bee4f RK |
416 | } |
417 | ||
936e60fe RK |
418 | .waterfall-header-tick { |
419 | width: 100px; | |
420 | font-size: 9px; | |
421 | transform-origin: left center; | |
422 | color: var(--theme-body-color); | |
8c5bee4f RK |
423 | } |
424 | ||
936e60fe | 425 | .waterfall-header-tick:not(:first-child) { |
dae45075 | 426 | margin-inline-start: -100px !important; /* Don't affect layout. */ |
8c5bee4f RK |
427 | } |
428 | ||
936e60fe RK |
429 | .waterfall-background-ticks { |
430 | /* Background created on a <canvas> in js. */ | |
d0a8de80 | 431 | /* @see devtools/client/timeline/widgets/waterfall.js */ |
936e60fe RK |
432 | background-image: -moz-element(#waterfall-background); |
433 | background-repeat: repeat-y; | |
434 | background-position: -1px center; | |
8c5bee4f RK |
435 | } |
436 | ||
437 | /** | |
936e60fe | 438 | * Markers waterfall breakdown |
8c5bee4f RK |
439 | */ |
440 | ||
936e60fe | 441 | #waterfall-breakdown { |
8c5bee4f RK |
442 | overflow-x: hidden; |
443 | overflow-y: auto; | |
444 | } | |
445 | ||
936e60fe RK |
446 | .waterfall-tree-item:not([level="0"]) { |
447 | background-image: repeating-linear-gradient( | |
448 | -45deg, | |
449 | transparent 0px, | |
450 | transparent 2px, | |
451 | rgba(255,255,255,0.05) 2px, | |
452 | rgba(255,255,255,0.05) 4px | |
453 | ); | |
8c5bee4f RK |
454 | } |
455 | ||
936e60fe RK |
456 | .waterfall-tree-item[expandable] .waterfall-marker-bullet, |
457 | .waterfall-tree-item[expandable] .waterfall-marker-bar { | |
458 | background-image: repeating-linear-gradient( | |
459 | -45deg, | |
460 | transparent 0px, | |
461 | transparent 5px, | |
462 | rgba(0,0,0,0.35) 5px, | |
463 | rgba(0,0,0,0.35) 10px | |
464 | ); | |
8c5bee4f RK |
465 | } |
466 | ||
936e60fe RK |
467 | .waterfall-tree-item[expanded], |
468 | .waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] { | |
469 | box-shadow: 0 -1px var(--cell-border-color-light); | |
8c5bee4f RK |
470 | } |
471 | ||
936e60fe RK |
472 | .waterfall-tree-item:nth-child(2n) > .waterfall-marker { |
473 | background-color: var(--row-alt-background-color); | |
8c5bee4f RK |
474 | } |
475 | ||
936e60fe RK |
476 | .waterfall-tree-item:hover { |
477 | background-color: var(--row-hover-background-color); | |
8c5bee4f RK |
478 | } |
479 | ||
936e60fe RK |
480 | .waterfall-tree-item:last-child { |
481 | border-bottom: 1px solid var(--cell-border-color); | |
8c5bee4f RK |
482 | } |
483 | ||
936e60fe RK |
484 | .waterfall-tree-item:focus { |
485 | background-color: var(--theme-selection-background); | |
8c5bee4f RK |
486 | } |
487 | ||
936e60fe RK |
488 | .waterfall-tree-item:focus description { |
489 | color: var(--theme-selection-color) !important; | |
8c5bee4f RK |
490 | } |
491 | ||
936e60fe RK |
492 | /** |
493 | * Marker left sidebar | |
494 | */ | |
8c5bee4f | 495 | |
936e60fe | 496 | .waterfall-sidebar { |
dae45075 | 497 | border-inline-end: 1px solid var(--cell-border-color); |
8c5bee4f RK |
498 | } |
499 | ||
936e60fe RK |
500 | .waterfall-tree-item > .waterfall-sidebar:hover, |
501 | .waterfall-tree-item:hover > .waterfall-sidebar, | |
502 | .waterfall-tree-item:focus > .waterfall-sidebar { | |
503 | background: transparent; | |
8c5bee4f RK |
504 | } |
505 | ||
506 | .waterfall-marker-bullet { | |
507 | width: 8px; | |
508 | height: 8px; | |
dae45075 RK |
509 | margin-inline-start: 8px; |
510 | margin-inline-end: 6px; | |
8c5bee4f RK |
511 | border-radius: 1px; |
512 | } | |
513 | ||
514 | .waterfall-marker-name { | |
515 | font-size: 95%; | |
516 | padding-bottom: 1px !important; | |
517 | } | |
518 | ||
936e60fe RK |
519 | /** |
520 | * Marker timebar | |
521 | */ | |
522 | ||
523 | .waterfall-marker { | |
524 | overflow: hidden; | |
525 | } | |
526 | ||
8c5bee4f RK |
527 | .waterfall-marker-bar { |
528 | height: 9px; | |
8c5bee4f | 529 | transform-origin: left center; |
a5cb6e53 | 530 | border-radius: 1px; |
8c5bee4f RK |
531 | } |
532 | ||
936e60fe RK |
533 | .waterfall-marker > .theme-twisty { |
534 | /* Don't affect layout. */ | |
535 | width: 14px; | |
dae45075 | 536 | margin-inline-end: -14px; |
8c5bee4f RK |
537 | } |
538 | ||
d0a8de80 RK |
539 | /** |
540 | * OTMT markers | |
541 | */ | |
542 | ||
543 | .waterfall-tree-item[otmt=true] .waterfall-marker-bullet, | |
544 | .waterfall-tree-item[otmt=true] .waterfall-marker-bar { | |
545 | background-color: transparent; | |
546 | border-width: 1px; | |
547 | border-style: solid; | |
548 | } | |
549 | ||
936e60fe RK |
550 | /** |
551 | * Marker details view | |
552 | */ | |
553 | ||
8c5bee4f | 554 | #waterfall-details { |
dae45075 RK |
555 | padding-inline-start: 8px; |
556 | padding-inline-end: 8px; | |
8c5bee4f RK |
557 | padding-top: 2vh; |
558 | overflow: auto; | |
d74db938 | 559 | min-width: 50px; |
8c5bee4f RK |
560 | } |
561 | ||
936e60fe RK |
562 | #waterfall-details > * { |
563 | padding-top: 3px; | |
564 | } | |
565 | ||
8c5bee4f RK |
566 | .marker-details-bullet { |
567 | width: 8px; | |
568 | height: 8px; | |
8c5bee4f RK |
569 | border-radius: 1px; |
570 | } | |
571 | ||
d0a8de80 | 572 | .marker-details-name-label { |
dae45075 | 573 | padding-inline-end: 4px; |
936e60fe RK |
574 | } |
575 | ||
576 | .marker-details-type { | |
577 | font-size: 1.2em; | |
578 | font-weight: bold; | |
579 | } | |
580 | ||
581 | .marker-details-duration { | |
582 | font-weight: bold; | |
583 | } | |
584 | ||
e9fbfc3a RK |
585 | .marker-details-customcontainer .custom-button { |
586 | padding: 2px 5px; | |
587 | border-width: 1px; | |
588 | } | |
589 | ||
936e60fe RK |
590 | /** |
591 | * Marker colors | |
592 | */ | |
593 | ||
6f751fd1 | 594 | menuitem.marker-color-graphs-full-red .menu-iconic-left::after, |
d0a8de80 RK |
595 | .marker-color-graphs-full-red { |
596 | background-color: var(--theme-graphs-full-red); | |
597 | border-color: var(--theme-graphs-full-red); | |
598 | } | |
6f751fd1 | 599 | menuitem.marker-color-graphs-full-blue .menu-iconic-left::after, |
d0a8de80 RK |
600 | .marker-color-graphs-full-blue { |
601 | background-color: var(--theme-graphs-full-blue); | |
602 | border-color: var(--theme-graphs-full-blue); | |
603 | } | |
6f751fd1 | 604 | menuitem.marker-color-graphs-green .menu-iconic-left::after, |
e9fbfc3a RK |
605 | .marker-color-graphs-green { |
606 | background-color: var(--theme-graphs-green); | |
d0a8de80 | 607 | border-color: var(--theme-graphs-green); |
d74db938 | 608 | } |
6f751fd1 | 609 | menuitem.marker-color-graphs-blue .menu-iconic-left::after, |
e9fbfc3a RK |
610 | .marker-color-graphs-blue { |
611 | background-color: var(--theme-graphs-blue); | |
d0a8de80 | 612 | border-color: var(--theme-graphs-blue); |
a5cb6e53 | 613 | } |
6f751fd1 | 614 | menuitem.marker-color-graphs-bluegrey .menu-iconic-left::after, |
e9fbfc3a RK |
615 | .marker-color-graphs-bluegrey { |
616 | background-color: var(--theme-graphs-bluegrey); | |
d0a8de80 | 617 | border-color: var(--theme-graphs-bluegrey); |
e9fbfc3a | 618 | } |
6f751fd1 | 619 | menuitem.marker-color-graphs-purple .menu-iconic-left::after, |
e9fbfc3a RK |
620 | .marker-color-graphs-purple { |
621 | background-color: var(--theme-graphs-purple); | |
d0a8de80 | 622 | border-color: var(--theme-graphs-purple); |
a5cb6e53 | 623 | } |
6f751fd1 | 624 | menuitem.marker-color-graphs-yellow .menu-iconic-left::after, |
d74db938 RK |
625 | .marker-color-graphs-yellow { |
626 | background-color: var(--theme-graphs-yellow); | |
d0a8de80 RK |
627 | border-color: var(--theme-graphs-yellow); |
628 | } | |
6f751fd1 | 629 | menuitem.marker-color-graphs-orange .menu-iconic-left::after, |
d0a8de80 RK |
630 | .marker-color-graphs-orange { |
631 | background-color: var(--theme-graphs-orange); | |
632 | border-color: var(--theme-graphs-orange); | |
a5cb6e53 | 633 | } |
6f751fd1 | 634 | menuitem.marker-color-graphs-red .menu-iconic-left::after, |
d74db938 RK |
635 | .marker-color-graphs-red { |
636 | background-color: var(--theme-graphs-red); | |
d0a8de80 | 637 | border-color: var(--theme-graphs-red); |
a5cb6e53 | 638 | } |
6f751fd1 | 639 | menuitem.marker-color-graphs-grey .menu-iconic-left::after, |
e9fbfc3a RK |
640 | .marker-color-graphs-grey{ |
641 | background-color: var(--theme-graphs-grey); | |
d0a8de80 | 642 | border-color: var(--theme-graphs-grey); |
b336389b | 643 | } |
d74db938 RK |
644 | |
645 | /** | |
646 | * Configurable Options | |
647 | * | |
936e60fe RK |
648 | * Elements can be tagged with a class and visibility is controlled via a |
649 | * preference being applied or removed. | |
d74db938 RK |
650 | */ |
651 | ||
652 | /** | |
653 | * devtools.performance.ui.experimental | |
654 | */ | |
655 | menuitem.experimental-option::before { | |
656 | content: ""; | |
d0a8de80 | 657 | background-image: url(chrome://devtools/skin/images/webconsole.svg); |
d74db938 | 658 | background-repeat: no-repeat; |
2e389898 RK |
659 | background-size: 72px 60px; |
660 | width: 12px; | |
661 | height: 12px; | |
d74db938 | 662 | display: inline-block; |
2e389898 RK |
663 | |
664 | background-position: -24px -24px; | |
665 | margin: 2px 5px 0 0; | |
666 | max-height: 12px; | |
d74db938 | 667 | } |
2e389898 | 668 | |
d74db938 RK |
669 | #performance-options-menupopup:not(.experimental-enabled) .experimental-option, |
670 | #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { | |
671 | display: none; | |
672 | } | |
d0a8de80 RK |
673 | |
674 | /* for call tree */ | |
675 | description.opt-icon { | |
676 | margin: 0px 0px 0px 0px; | |
677 | } | |
678 | description.opt-icon::before { | |
679 | margin: 1px 4px 0px 0px; | |
680 | } |