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-control-other {
23 -moz-padding-end: 5px;
26 #performance-toolbar-controls-detail-views > toolbarbutton {
30 #performance-toolbar-controls-detail-views .toolbarbutton-text {
31 -moz-padding-start: 4px;
32 -moz-padding-end: 8px;
36 list-style-image: url(timeline-filter.svg#filter);
40 #filter-button[disabled] {
41 list-style-image: url(timeline-filter.svg#filter-disabled);
44 #filter-button:not([disabled]):hover,
45 #filter-button:not([disabled]):hover:active,
46 #filter-button[open] {
47 list-style-image: url(timeline-filter.svg#filter-open);
50 #performance-filter-menupopup > menuitem:before {
60 list-style-image: url(timeline-filter.svg#filter);
64 #filter-button[disabled] {
65 list-style-image: url(timeline-filter.svg#filter-disabled);
68 #filter-button[open] {
69 list-style-image: url(timeline-filter.svg#filter-open);
72 #performance-filter-menupopup > menuitem:before {
81 /* Recording Notice */
83 #performance-view .notice-container {
85 background-color: var(--theme-toolbar-background);
86 color: var(--theme-body-color);
90 #performance-view .notice-container button {
96 #performance-view .notice-container vbox {
103 list-style-image: url(profiler-stopwatch-tbutton.svg);
106 #empty-notice > .record-button,
107 .record-button:hover,
108 .record-button:hover:active {
109 list-style-image: url(profiler-stopwatch.svg);
112 .record-button[checked] {
113 list-style-image: url(profiler-stopwatch-checked.svg);
116 .record-button[locked] {
117 pointer-events: none;
120 .record-button .button-icon {
124 .record-button .button-text {
130 #select-waterfall-view {
131 list-style-image: url(performance-icons.svg#details-waterfall);
134 #select-waterfall-view:hover,
135 #select-waterfall-view:hover:active,
136 #select-waterfall-view[checked] {
137 list-style-image: url(performance-icons.svg#details-waterfall-active);
140 #select-js-calltree-view,
141 #select-memory-calltree-view {
142 list-style-image: url(performance-icons.svg#details-call-tree);
145 #select-js-calltree-view:hover,
146 #select-js-calltree-view:hover:active,
147 #select-js-calltree-view[checked],
148 #select-memory-calltree-view:hover,
149 #select-memory-calltree-view:hover:active,
150 #select-memory-calltree-view[checked] {
151 list-style-image: url(performance-icons.svg#details-call-tree-active);
154 #select-js-flamegraph-view,
155 #select-memory-flamegraph-view {
156 list-style-image: url(performance-icons.svg#details-flamegraph);
159 #select-js-flamegraph-view:hover,
160 #select-js-flamegraph-view:hover:active,
161 #select-js-flamegraph-view[checked],
162 #select-memory-flamegraph-view:hover,
163 #select-memory-flamegraph-view:hover:active,
164 #select-memory-flamegraph-view[checked] {
165 list-style-image: url(performance-icons.svg#details-flamegraph-active);
168 /* Profile call tree */
170 .call-tree-cells-container {
171 /* Hack: force hardware acceleration */
172 transform: translateZ(1px);
176 .call-tree-cells-container[categories-hidden] .call-tree-category {
182 padding-top: 2px !important;
183 padding-bottom: 2px !important;
186 .call-tree-header[type="duration"],
187 .call-tree-cell[type="duration"],
188 .call-tree-header[type="self-duration"],
189 .call-tree-cell[type="self-duration"] {
193 .call-tree-header[type="percentage"],
194 .call-tree-cell[type="percentage"],
195 .call-tree-header[type="self-percentage"],
196 .call-tree-cell[type="self-percentage"] {
200 .call-tree-header[type="samples"],
201 .call-tree-cell[type="samples"] {
205 .call-tree-header[type="allocations"],
206 .call-tree-cell[type="allocations"],
207 .call-tree-header[type="self-allocations"],
208 .call-tree-cell[type="self-allocations"] {
212 .call-tree-header[type="function"],
213 .call-tree-cell[type="function"] {
219 -moz-box-align: center;
222 color: var(--theme-body-color);
223 -moz-border-end-color: var(--cell-border-color);
226 .call-tree-header:not(:last-child),
227 .call-tree-cell:not(:last-child) {
228 -moz-border-end-width: 1px;
229 -moz-border-end-style: solid;
232 .call-tree-header:not(:last-child) {
236 .call-tree-cell:not(:last-child) {
241 background-color: var(--theme-tab-toolbar-background);
244 .call-tree-item:last-child:not(:focus) {
245 border-bottom: 1px solid var(--cell-border-color);
248 .call-tree-item:nth-child(2n) {
249 background-color: var(--row-alt-background-color);
252 .call-tree-item:hover {
253 background-color: var(--row-hover-background-color);
256 .call-tree-item:focus {
257 background-color: var(--theme-selection-background);
260 .call-tree-item:focus label {
261 color: var(--theme-selection-color) !important;
264 .call-tree-item:focus .call-tree-cell {
265 -moz-border-end-color: var(--focus-cell-border-color);
268 .call-tree-item:not([origin="content"]) .call-tree-name,
269 .call-tree-item:not([origin="content"]) .call-tree-url,
270 .call-tree-item:not([origin="content"]) .call-tree-line,
271 .call-tree-item:not([origin="content"]) .call-tree-column {
272 /* Style chrome and non-JS nodes differently. */
277 -moz-margin-start: 4px !important;
281 .call-tree-url:hover {
282 text-decoration: underline;
285 .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
286 color: var(--theme-highlight-blue);
289 .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
290 color: var(--theme-highlight-orange);
294 color: var(--theme-highlight-orange);
299 -moz-margin-start: 8px !important;
301 color: var(--theme-content-color2);
304 .call-tree-name[value=""],
305 .call-tree-url[value=""],
306 .call-tree-line[value=""],
307 .call-tree-column[value=""],
308 .call-tree-host[value=""] {
313 -moz-appearance: none;
314 background-color: transparent;
315 background-position: center;
316 background-repeat: no-repeat;
317 background-size: 11px;
319 -moz-margin-start: 8px !important;
324 .theme-dark .call-tree-zoom {
325 background-image: url(magnifying-glass.png);
328 .theme-light .call-tree-zoom {
329 background-image: url(magnifying-glass-light.png);
332 @media (min-resolution: 2dppx) {
333 .theme-dark .call-tree-zoom {
334 background-image: url(magnifying-glass@2x.png);
337 .theme-light .call-tree-zoom {
338 background-image: url(magnifying-glass-light@2x.png);
342 .call-tree-item:hover .call-tree-zoom {
343 transition: opacity 0.3s ease-in;
347 .call-tree-item:hover .call-tree-zoom:hover {
351 .call-tree-category {
352 transform: scale(0.75);
353 transform-origin: center right;
357 * Details Waterfall Styles
360 .waterfall-list-contents {
361 /* Hack: force hardware acceleration */
362 transform: translateZ(1px);
367 .waterfall-header-contents {
371 .waterfall-background-ticks {
372 /* Background created on a <canvas> in js. */
373 /* @see browser/devtools/timeline/widgets/waterfall.js */
374 background-image: -moz-element(#waterfall-background);
375 background-repeat: repeat-y;
376 background-position: -1px center;
379 .waterfall-marker-container[is-spacer] {
380 pointer-events: none;
383 .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
384 background-color: #403400;
387 .waterfall-marker-container:hover {
388 background-color: #FFCF00 !important;
391 .waterfall-marker-item {
396 -moz-border-end: 1px solid var(--theme-splitter-color);
399 .waterfall-marker-container:hover > .waterfall-sidebar {
400 background-color: transparent;
403 .waterfall-header-name {
408 .waterfall-header-tick {
411 transform-origin: left center;
412 color: var(--theme-body-color);
415 .waterfall-header-tick:not(:first-child) {
416 -moz-margin-start: -100px !important; /* Don't affect layout. */
419 .waterfall-marker-bullet {
422 -moz-margin-start: 8px;
423 -moz-margin-end: 6px;
427 .waterfall-marker-name {
429 padding-bottom: 1px !important;
432 .waterfall-marker-bar {
434 transform-origin: left center;
438 .waterfall-marker-container.selected > .waterfall-sidebar,
439 .waterfall-marker-container.selected > .waterfall-marker-item {
440 background-color: var(--theme-selection-background);
441 color: var(--theme-selection-color);
444 .waterfall-marker-location {
448 .waterfall-marker-location:hover,
449 .waterfall-marker-location:focus {
450 text-decoration: underline;
454 -moz-padding-start: 8px;
455 -moz-padding-end: 8px;
460 .marker-details-bullet {
466 #performance-filter-menupopup > menuitem.highlight-pink:before,
467 .marker-details-bullet.highlight-pink,
468 .waterfall-marker-bar.highlight-pink,
469 .waterfall-marker-bullet.highlight-pink {
470 background-color: var(--theme-highlight-pink);
472 #performance-filter-menupopup > menuitem.highlight-bluegrey:before,
473 .marker-details-bullet.highlight-bluegrey,
474 .waterfall-marker-bar.highlight-bluegrey,
475 .waterfall-marker-bullet.highlight-bluegrey {
476 background-color: var(--theme-highlight-bluegrey);
478 #performance-filter-menupopup > menuitem.highlight-green:before,
479 .marker-details-bullet.highlight-green,
480 .waterfall-marker-bar.highlight-green,
481 .waterfall-marker-bullet.highlight-green {
482 background-color: var(--theme-highlight-green);
484 #performance-filter-menupopup > menuitem.highlight-lightorange:before,
485 .marker-details-bullet.highlight-lightorange,
486 .waterfall-marker-bar.highlight-lightorange,
487 .waterfall-marker-bullet.highlight-lightorange {
488 background-color: var(--theme-highlight-lightorange);
490 #performance-filter-menupopup > menuitem.highlight-red:before,
491 .marker-details-bullet.highlight-red,
492 .waterfall-marker-bar.highlight-red,
493 .waterfall-marker-bullet.highlight-red {
494 background-color: var(--theme-highlight-red);
497 #waterfall-details > * {
501 .marker-details-labelname {
502 -moz-padding-end: 4px;
505 .marker-details-type {
510 .marker-details-duration {
514 /* Recording items */
520 .recording-item-title {
524 .recording-item-footer {
529 .recording-item-save {
530 text-decoration: underline;
534 .recording-item-duration,
535 .recording-item-save {
536 color: var(--theme-body-color-alt);
539 #recordings-list .selected label {
540 /* Text inside a selected item should not be custom colored. */
541 color: inherit !important;
544 /* Profile call tree */
546 .call-tree-cells-container {
547 /* Hack: force hardware acceleration */
548 transform: translateZ(1px);
552 .call-tree-cells-container[categories-hidden] .call-tree-category {
556 .call-tree-header[type="duration"],
557 .call-tree-cell[type="duration"],
558 .call-tree-header[type="self-duration"],
559 .call-tree-cell[type="self-duration"] {
563 .call-tree-header[type="percentage"],
564 .call-tree-cell[type="percentage"],
565 .call-tree-header[type="self-percentage"],
566 .call-tree-cell[type="self-percentage"] {
570 .call-tree-header[type="samples"],
571 .call-tree-cell[type="samples"] {
575 .call-tree-header[type="function"],
576 .call-tree-cell[type="function"] {
582 -moz-box-align: center;
587 .call-tree-header:not(:last-child),
588 .call-tree-cell:not(:last-child) {
589 -moz-border-end: 1px solid;
594 -moz-border-end-color: var(--theme-splitter-color);
595 color: var(--theme-body-color);
598 .call-tree-header:not(:last-child) {
602 .call-tree-cell:not(:last-child) {
607 background-color: var(--theme-toolbar-background);
610 .call-tree-item:last-child:not(:focus) {
611 border-bottom: 1px solid var(--theme-splitter-color);
614 .call-tree-item:nth-child(2n) {
615 background-color: var(--theme-contrast-background);
618 .call-tree-item:hover {
619 background-color: var(--theme-hover-background);
620 color: var(--theme-hover-color);
623 .call-tree-item:focus {
624 background-color: var(--theme-selection-background);
627 .call-tree-item:focus label {
628 color: var(--theme-selection-color);
631 .call-tree-item:focus .call-tree-cell {
632 -moz-border-end-color: var(--theme-splitter-color);
635 .call-tree-item:not([origin="content"]) .call-tree-name,
636 .call-tree-item:not([origin="content"]) .call-tree-url,
637 call-tree-item:not([origin="content"]) .call-tree-line {
638 /* Style chrome and non-JS nodes differently. */
643 -moz-margin-start: 4px !important;
647 .call-tree-url:hover {
648 text-decoration: underline;
652 color: var(--theme-text-blue);
656 color: var(--theme-contrast-border);
660 -moz-margin-start: 8px !important;
665 color: ver(--theme-body-color);
668 .call-tree-url[value=""],
669 .call-tree-line[value=""],
670 .call-tree-host[value=""] {
675 -moz-appearance: none;
676 background-color: transparent;
677 background-position: center;
678 background-repeat: no-repeat;
679 background-size: 11px;
681 -moz-margin-start: 8px !important;
687 background-image: url(magnifying-glass.png);
690 @media (min-resolution: 2dppx) {
692 background-image: url(magnifying-glass@2x.png);
696 .call-tree-item:hover .call-tree-zoom {
697 transition: opacity 0.3s ease-in;
701 .call-tree-item:hover .call-tree-zoom:hover {
705 .call-tree-category {
706 transform: scale(0.75);
707 transform-origin: center right;
714 #jit-optimizations-view {
721 /* override default styles for tree widget */
722 #jit-optimizations-view .tree-widget-empty-text {
728 #jit-optimizations-view:not(.empty) .tree-widget-empty-text {
732 #jit-optimizations-toolbar {
734 min-height: 0px; /* override .devtools-toolbar min-height */
737 .jit-optimizations-title {
742 #jit-optimizations-raw-view {
746 /* override default .tree-widget-item line-height */
747 #jit-optimizations-raw-view .tree-widget-item {
748 line-height: 20px !important;
753 #jit-optimizations-raw-view .tree-widget-item[level="1"] {
757 #jit-optimizations-view .opt-ion-type-site {
758 -moz-margin-start: 4px !important;
762 #jit-optimizations-view .opt-outcome::before {
765 color: var(--theme-body-color);
767 #jit-optimizations-view .theme-selected .opt-outcome::before {
768 color: var(--theme-selection-color);
771 #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] {
772 color: var(--theme-highlight-green);
774 #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] {
775 color: var(--theme-highlight-red);
777 #jit-optimizations-view .tree-widget-container {
778 -moz-margin-end: 0px;
780 #jit-optimizations-view .tree-widget-container > li,
781 #jit-optimizations-view .tree-widget-children > li {
787 color: var(--theme-highlight-orange);
789 .theme-selected .opt-line::before {
790 color: var(--theme-selection-color);
792 .opt-line.header-line::before {
793 color: var(--theme-body-color);
795 #jit-optimizations-view.empty .opt-line.header-line::before {
800 -moz-margin-start: 4px !important;
803 text-decoration: underline;
805 .opt-url.debugger-link {
809 #jit-optimizations-view .opt-icon::before {
811 background-image: url(chrome://browser/skin/devtools/webconsole.png);
812 background-repeat: no-repeat;
813 background-size: 48px 40px;
818 display: inline-block;
821 #jit-optimizations-view .opt-icon[severity=warning]::before {
822 background-position: -16px -16px;
825 @media (min-resolution: 2dppx) {
826 #jit-optimizations-view .opt-icon::before {
827 background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);