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/. */
6 /* CSS Variables specific to this panel that aren't defined by the themes */
9 --cell-border-color: #A09090;
10 --focus-cell-border-color: #9C9CFF;
11 --row-alt-background-color: #403400;
12 --row-hover-background-color: #544400;
17 #performance-toolbar > tabs,
18 #performance-toolbar {
19 -moz-border-end-color: var(--theme-splitter-color);
22 #performance-toolbar-controls-detail-views > toolbarbutton {
26 #performance-toolbar-controls-detail-views .toolbarbutton-text {
27 -moz-padding-start: 4px;
28 -moz-padding-end: 8px;
31 /* Recording Notice */
33 #performance-view .notice-container {
35 background-color: var(--theme-toolbar-background);
36 color: var(--theme-body-color);
40 #performance-view .notice-container button {
49 list-style-image: url(profiler-stopwatch.svg);
52 .record-button[checked] {
53 list-style-image: url(profiler-stopwatch-checked.svg);
56 .record-button[locked] {
60 .record-button .button-icon {
64 .record-button .button-text {
70 #select-waterfall-view {
71 list-style-image: url(performance-icons.svg#details-waterfall);
74 #select-calltree-view,
75 #select-js-calltree-view,
76 #select-memory-calltree-view {
77 list-style-image: url(performance-icons.svg#details-call-tree);
80 #select-flamegraph-view,
81 #select-js-flamegraph-view,
82 #select-memory-flamegraph-view {
83 list-style-image: url(performance-icons.svg#details-flamegraph);
86 /* Profile call tree */
88 .call-tree-cells-container {
89 /* Hack: force hardware acceleration */
90 transform: translateZ(1px);
94 .call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"],
95 .call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"],
96 .call-tree-cells-container[categories-hidden] .call-tree-category {
102 padding-top: 2px !important;
103 padding-bottom: 2px !important;
106 .call-tree-header[type="duration"],
107 .call-tree-cell[type="duration"],
108 .call-tree-header[type="self-duration"],
109 .call-tree-cell[type="self-duration"] {
113 .call-tree-header[type="percentage"],
114 .call-tree-cell[type="percentage"],
115 .call-tree-header[type="self-percentage"],
116 .call-tree-cell[type="self-percentage"] {
120 .call-tree-header[type="samples"],
121 .call-tree-cell[type="samples"] {
125 .call-tree-header[type="allocations"],
126 .call-tree-cell[type="allocations"],
127 .call-tree-header[type="self-allocations"],
128 .call-tree-cell[type="self-allocations"] {
132 .call-tree-header[type="function"],
133 .call-tree-cell[type="function"] {
139 -moz-box-align: center;
142 color: var(--theme-body-color);
143 -moz-border-end-color: var(--cell-border-color);
146 .call-tree-header:not(:last-child),
147 .call-tree-cell:not(:last-child) {
148 -moz-border-end-width: 1px;
149 -moz-border-end-style: solid;
152 .call-tree-header:not(:last-child) {
156 .call-tree-cell:not(:last-child) {
161 background-color: var(--theme-tab-toolbar-background);
164 .call-tree-item:last-child:not(:focus) {
165 border-bottom: 1px solid var(--cell-border-color);
168 .call-tree-item:nth-child(2n) {
169 background-color: var(--row-alt-background-color);
172 .call-tree-item:hover {
173 background-color: var(--row-hover-background-color);
176 .call-tree-item:focus {
177 background-color: var(--theme-selection-background);
180 .call-tree-item:focus label {
181 color: var(--theme-selection-color) !important;
184 .call-tree-item:focus .call-tree-cell {
185 -moz-border-end-color: var(--focus-cell-border-color);
188 .call-tree-item:not([origin="content"]) .call-tree-name,
189 .call-tree-item:not([origin="content"]) .call-tree-url,
190 .call-tree-item:not([origin="content"]) .call-tree-line,
191 .call-tree-item:not([origin="content"]) .call-tree-column {
192 /* Style chrome and non-JS nodes differently. */
197 -moz-margin-start: 4px !important;
201 .call-tree-url:hover {
202 text-decoration: underline;
206 color: var(--theme-highlight-blue);
210 color: var(--theme-highlight-orange);
214 color: var(--theme-highlight-orange);
219 -moz-margin-start: 8px !important;
221 color: var(--theme-content-color2);
224 .call-tree-name[value=""],
225 .call-tree-url[value=""],
226 .call-tree-line[value=""],
227 .call-tree-column[value=""],
228 .call-tree-host[value=""] {
233 -moz-appearance: none;
234 background-color: transparent;
235 background-position: center;
236 background-repeat: no-repeat;
237 background-size: 11px;
239 -moz-margin-start: 8px !important;
244 .theme-dark .call-tree-zoom {
245 background-image: url(magnifying-glass.png);
248 .theme-light .call-tree-zoom {
249 background-image: url(magnifying-glass-light.png);
252 @media (min-resolution: 2dppx) {
253 .theme-dark .call-tree-zoom {
254 background-image: url(magnifying-glass@2x.png);
257 .theme-light .call-tree-zoom {
258 background-image: url(magnifying-glass-light@2x.png);
262 .call-tree-item:hover .call-tree-zoom {
263 transition: opacity 0.3s ease-in;
267 .call-tree-item:hover .call-tree-zoom:hover {
271 .call-tree-category {
272 transform: scale(0.75);
273 transform-origin: center right;
277 * Details Waterfall Styles
280 .waterfall-list-contents {
281 /* Hack: force hardware acceleration */
282 transform: translateZ(1px);
287 .waterfall-header-contents {
291 .waterfall-background-ticks {
292 /* Background created on a <canvas> in js. */
293 /* @see browser/devtools/timeline/widgets/waterfall.js */
294 background-image: -moz-element(#waterfall-background);
295 background-repeat: repeat-y;
296 background-position: -1px center;
299 .waterfall-marker-container[is-spacer] {
300 pointer-events: none;
303 .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
304 background-color: #403400;
307 .waterfall-marker-container:hover {
308 background-color: #FFCF00 !important;
311 .waterfall-marker-item {
316 -moz-border-end: 1px solid var(--theme-splitter-color);
319 .waterfall-marker-container:hover > .waterfall-sidebar {
320 background-color: transparent;
323 .waterfall-header-name {
328 .waterfall-header-tick {
331 transform-origin: left center;
332 color: var(--theme-body-color);
335 .waterfall-header-tick:not(:first-child) {
336 -moz-margin-start: -100px !important; /* Don't affect layout. */
339 .waterfall-marker-bullet {
342 -moz-margin-start: 8px;
343 -moz-margin-end: 6px;
348 .waterfall-marker-name {
350 padding-bottom: 1px !important;
353 .waterfall-marker-bar {
357 transform-origin: left center;
360 .waterfall-marker-container.selected > .waterfall-sidebar,
361 .waterfall-marker-container.selected > .waterfall-marker-item {
362 background-color: var(--theme-selection-background);
363 color: var(--theme-selection-color);
366 .waterfall-marker-container.selected .waterfall-marker-bullet,
367 .waterfall-marker-container.selected .waterfall-marker-bar {
368 border-color: initial !important;
371 .waterfall-marker-location {
375 .waterfall-marker-location:hover,
376 .waterfall-marker-location:focus {
377 text-decoration: underline;
381 -moz-padding-start: 8px;
382 -moz-padding-end: 8px;
387 .marker-details-bullet {
394 #waterfall-details > * {
398 .marker-details-labelname {
399 -moz-padding-end: 4px;
402 .marker-details-type {
407 .marker-details-duration {
411 /* Recording items */
417 .recording-item-title {
421 .recording-item-footer {
426 .recording-item-save {
427 text-decoration: underline;
431 .recording-item-duration,
432 .recording-item-save {
433 color: var(--theme-body-color-alt);
436 #recordings-list .selected label {
437 /* Text inside a selected item should not be custom colored. */
438 color: inherit !important;
441 /* Profile call tree */
443 .call-tree-cells-container {
444 /* Hack: force hardware acceleration */
445 transform: translateZ(1px);
449 .call-tree-cells-container[categories-hidden] .call-tree-category {
453 .call-tree-header[type="duration"],
454 .call-tree-cell[type="duration"],
455 .call-tree-header[type="self-duration"],
456 .call-tree-cell[type="self-duration"] {
460 .call-tree-header[type="percentage"],
461 .call-tree-cell[type="percentage"],
462 .call-tree-header[type="self-percentage"],
463 .call-tree-cell[type="self-percentage"] {
467 .call-tree-header[type="samples"],
468 .call-tree-cell[type="samples"] {
472 .call-tree-header[type="function"],
473 .call-tree-cell[type="function"] {
479 -moz-box-align: center;
484 .call-tree-header:not(:last-child),
485 .call-tree-cell:not(:last-child) {
486 -moz-border-end: 1px solid;
491 -moz-border-end-color: var(--theme-splitter-color);
492 color: var(--theme-body-color);
495 .call-tree-header:not(:last-child) {
499 .call-tree-cell:not(:last-child) {
504 background-color: var(--theme-toolbar-background);
507 .call-tree-item:last-child:not(:focus) {
508 border-bottom: 1px solid var(--theme-splitter-color);
511 .call-tree-item:nth-child(2n) {
512 background-color: var(--theme-contrast-background);
515 .call-tree-item:hover {
516 background-color: var(--theme-hover-background);
517 color: var(--theme-hover-color);
520 .call-tree-item:focus {
521 background-color: var(--theme-selection-background);
524 .call-tree-item:focus label {
525 color: var(--theme-selection-color);
528 .call-tree-item:focus .call-tree-cell {
529 -moz-border-end-color: var(--theme-splitter-color);
532 .call-tree-item:not([origin="content"]) .call-tree-name,
533 .call-tree-item:not([origin="content"]) .call-tree-url,
534 call-tree-item:not([origin="content"]) .call-tree-line {
535 /* Style chrome and non-JS nodes differently. */
540 -moz-margin-start: 4px !important;
544 .call-tree-url:hover {
545 text-decoration: underline;
549 color: var(--theme-text-blue);
553 color: var(--theme-contrast-border);
557 -moz-margin-start: 8px !important;
562 color: ver(--theme-body-color);
565 .call-tree-url[value=""],
566 .call-tree-line[value=""],
567 .call-tree-host[value=""] {
572 -moz-appearance: none;
573 background-color: transparent;
574 background-position: center;
575 background-repeat: no-repeat;
576 background-size: 11px;
578 -moz-margin-start: 8px !important;
584 background-image: url(magnifying-glass.png);
587 @media (min-resolution: 2dppx) {
589 background-image: url(magnifying-glass@2x.png);
593 .call-tree-item:hover .call-tree-zoom {
594 transition: opacity 0.3s ease-in;
598 .call-tree-item:hover .call-tree-zoom:hover {
602 .call-tree-category {
603 transform: scale(0.75);
604 transform-origin: center right;