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 --cell-border-color-light: #A09090;
11 --focus-cell-border-color: #9C9CFF;
12 --row-alt-background-color: #403400;
13 --row-hover-background-color: #544400;
17 * A generic class to hide elements, replacing the `element.hidden` attribute
18 * that we use to hide elements that can later be active
28 #performance-toolbar-control-other {
29 -moz-padding-end: 5px;
32 #performance-toolbar-controls-detail-views .toolbarbutton-text {
33 -moz-padding-start: 4px;
34 -moz-padding-end: 8px;
38 list-style-image: url(timeline-filter.svg#filter);
42 #filter-button[disabled] {
43 list-style-image: url(timeline-filter.svg#filter-disabled);
46 #filter-button:not([disabled]):hover,
47 #filter-button:not([disabled]):hover:active,
48 #filter-button[open] {
49 list-style-image: url(timeline-filter.svg#filter-open);
52 #performance-filter-menupopup > menuitem:before {
62 list-style-image: url(timeline-filter.svg);
65 #performance-filter-menupopup > menuitem:before {
74 /* Details panel buttons */
76 #select-waterfall-view {
77 list-style-image: url(performance-icons.svg#details-waterfall);
80 #select-waterfall-view:hover,
81 #select-waterfall-view:hover:active,
82 #select-waterfall-view[checked] {
83 list-style-image: url(performance-icons.svg#details-waterfall-active);
86 #select-js-calltree-view,
87 #select-memory-calltree-view {
88 list-style-image: url(performance-icons.svg#details-call-tree);
91 #select-js-calltree-view:hover,
92 #select-js-calltree-view:hover:active,
93 #select-js-calltree-view[checked],
94 #select-memory-calltree-view:hover,
95 #select-memory-calltree-view:hover:active,
96 #select-memory-calltree-view[checked] {
97 list-style-image: url(performance-icons.svg#details-call-tree-active);
100 #select-js-flamegraph-view,
101 #select-memory-flamegraph-view {
102 list-style-image: url(performance-icons.svg#details-flamegraph);
105 #select-js-flamegraph-view:hover,
106 #select-js-flamegraph-view:hover:active,
107 #select-js-flamegraph-view[checked],
108 #select-memory-flamegraph-view:hover,
109 #select-memory-flamegraph-view:hover:active,
110 #select-memory-flamegraph-view[checked] {
111 list-style-image: url(performance-icons.svg#details-flamegraph-active);
114 #select-optimizations-view {
115 list-style-image: url(images/profiler-stopwatch.svg);
118 /* Recording buttons */
120 #main-record-button {
121 list-style-image: url(images/profiler-stopwatch-tbutton.svg);
124 #empty-notice > .record-button,
125 #main-record-button:hover,
126 #main-record-button:hover:active {
127 list-style-image: url(images/profiler-stopwatch.svg);
130 #main-record-button .button-icon {
134 #main-record-button .button-text {
138 .notice-container .record-button {
139 padding: 5px !important;
142 .notice-container .record-button[checked],
143 .notice-container .record-button[checked] {
144 color: var(--theme-selection-color) !important;
145 background: var(--theme-selection-background) !important;
148 .record-button[locked] {
149 pointer-events: none;
153 /* Sidebar & recording items */
159 .recording-item-title {
163 .recording-item-footer {
168 .recording-item-save {
169 text-decoration: underline;
173 .recording-item-duration,
174 .recording-item-save {
175 color: var(--theme-body-color-alt);
178 #recordings-list .selected label {
179 /* Text inside a selected item should not be custom colored. */
180 color: inherit !important;
184 /* Recording notices */
188 background-color: var(--theme-toolbar-background);
189 color: var(--theme-body-color);
190 padding-bottom: 20vh;
193 .console-profile-command {
194 font-family: monospace;
198 .realtime-disabled-message,
199 .realtime-disabled-on-e10s-message {
203 #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message {
208 #performance-view[e10s="unsupported"] .realtime-disabled-message {
213 .buffer-status-message,
214 .buffer-status-message-full {
218 #details-pane-container[buffer-status="in-progress"] .buffer-status-message {
223 #details-pane-container[buffer-status="full"] .buffer-status-message {
225 color: var(--theme-highlight-red);
230 #details-pane-container[buffer-status="full"] .buffer-status-message-full {
234 /* Profile call tree */
236 .call-tree-cells-container {
240 .call-tree-cells-container[categories-hidden] .call-tree-category {
246 padding-top: 2px !important;
247 padding-bottom: 2px !important;
250 .call-tree-header[type="duration"],
251 .call-tree-cell[type="duration"],
252 .call-tree-header[type="self-duration"],
253 .call-tree-cell[type="self-duration"] {
257 .call-tree-header[type="percentage"],
258 .call-tree-cell[type="percentage"],
259 .call-tree-header[type="self-percentage"],
260 .call-tree-cell[type="self-percentage"] {
264 .call-tree-header[type="samples"],
265 .call-tree-cell[type="samples"] {
269 .call-tree-header[type="count"],
270 .call-tree-cell[type="count"],
271 .call-tree-header[type="self-count"],
272 .call-tree-cell[type="self-count"],
273 .call-tree-header[type="size"],
274 .call-tree-cell[type="size"],
275 .call-tree-header[type="self-size"],
276 .call-tree-cell[type="self-size"],
277 .call-tree-header[type="count-percentage"],
278 .call-tree-cell[type="count-percentage"],
279 .call-tree-header[type="self-count-percentage"],
280 .call-tree-cell[type="self-count-percentage"],
281 .call-tree-header[type="size-percentage"],
282 .call-tree-cell[type="size-percentage"],
283 .call-tree-header[type="self-size-percentage"],
284 .call-tree-cell[type="self-size-percentage"] {
288 .call-tree-header[type="function"],
289 .call-tree-cell[type="function"] {
295 -moz-box-align: center;
298 color: var(--theme-body-color);
299 -moz-border-end-color: var(--cell-border-color);
302 .call-tree-header:not(:last-child),
303 .call-tree-cell:not(:last-child) {
304 -moz-border-end-width: 1px;
305 -moz-border-end-style: solid;
308 .call-tree-header:not(:last-child) {
312 .call-tree-cell:not(:last-child) {
317 background-color: var(--theme-tab-toolbar-background);
320 .call-tree-item:last-child {
321 border-bottom: 1px solid var(--cell-border-color);
324 .call-tree-item:nth-child(2n) {
325 background-color: var(--row-alt-background-color);
328 .call-tree-item:hover {
329 background-color: var(--row-hover-background-color);
332 .call-tree-item:focus {
333 background-color: var(--theme-selection-background);
336 .call-tree-item:focus description {
337 color: var(--theme-selection-color) !important;
340 .call-tree-item:focus .call-tree-cell {
341 -moz-border-end-color: var(--focus-cell-border-color);
344 .call-tree-item:not([origin="content"]) .call-tree-name,
345 .call-tree-item:not([origin="content"]) .call-tree-url,
346 .call-tree-item:not([origin="content"]) .call-tree-line,
347 .call-tree-item:not([origin="content"]) .call-tree-column {
348 /* Style chrome and non-JS nodes differently. */
353 -moz-margin-end: 4px !important;
360 .call-tree-url:hover {
361 text-decoration: underline;
364 .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
365 color: var(--theme-highlight-blue);
368 .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
369 color: var(--theme-highlight-orange);
373 color: var(--theme-highlight-orange);
378 -moz-margin-start: 8px !important;
380 color: var(--theme-content-color2);
383 .call-tree-category {
384 transform: scale(0.75);
385 transform-origin: center right;
389 * Waterfall ticks header
392 .waterfall-header-ticks {
396 .waterfall-header-name {
401 .waterfall-header-tick {
404 transform-origin: left center;
405 color: var(--theme-body-color);
408 .waterfall-header-tick:not(:first-child) {
409 -moz-margin-start: -100px !important; /* Don't affect layout. */
412 .waterfall-background-ticks {
413 /* Background created on a <canvas> in js. */
414 /* @see browser/devtools/timeline/widgets/waterfall.js */
415 background-image: -moz-element(#waterfall-background);
416 background-repeat: repeat-y;
417 background-position: -1px center;
421 * Markers waterfall breakdown
424 #waterfall-breakdown {
429 .waterfall-tree-item:not([level="0"]) {
430 background-image: repeating-linear-gradient(
434 rgba(255,255,255,0.05) 2px,
435 rgba(255,255,255,0.05) 4px
439 .waterfall-tree-item[expandable] .waterfall-marker-bullet,
440 .waterfall-tree-item[expandable] .waterfall-marker-bar {
441 background-image: repeating-linear-gradient(
445 rgba(0,0,0,0.35) 5px,
446 rgba(0,0,0,0.35) 10px
450 .waterfall-tree-item[expanded],
451 .waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] {
452 box-shadow: 0 -1px var(--cell-border-color-light);
455 .waterfall-tree-item:nth-child(2n) > .waterfall-marker {
456 background-color: var(--row-alt-background-color);
459 .waterfall-tree-item:hover {
460 background-color: var(--row-hover-background-color);
463 .waterfall-tree-item:last-child {
464 border-bottom: 1px solid var(--cell-border-color);
467 .waterfall-tree-item:focus {
468 background-color: var(--theme-selection-background);
471 .waterfall-tree-item:focus description {
472 color: var(--theme-selection-color) !important;
476 * Marker left sidebar
480 -moz-border-end: 1px solid var(--cell-border-color);
483 .waterfall-tree-item > .waterfall-sidebar:hover,
484 .waterfall-tree-item:hover > .waterfall-sidebar,
485 .waterfall-tree-item:focus > .waterfall-sidebar {
486 background: transparent;
489 .waterfall-marker-bullet {
492 -moz-margin-start: 8px;
493 -moz-margin-end: 6px;
497 .waterfall-marker-name {
499 padding-bottom: 1px !important;
510 .waterfall-marker-bar {
512 transform-origin: left center;
516 .waterfall-marker > .theme-twisty {
517 /* Don't affect layout. */
519 -moz-margin-end: -14px;
523 * Marker details view
527 -moz-padding-start: 8px;
528 -moz-padding-end: 8px;
534 #waterfall-details > * {
538 .marker-details-bullet {
544 .marker-details-labelname {
545 -moz-padding-end: 4px;
548 .marker-details-type {
553 .marker-details-duration {
557 .marker-details-customcontainer .custom-button {
566 menuitem.marker-color-graphs-green:before,
567 .marker-color-graphs-green {
568 background-color: var(--theme-graphs-green);
571 menuitem.marker-color-graphs-blue:before,
572 .marker-color-graphs-blue {
573 background-color: var(--theme-graphs-blue);
576 menuitem.marker-color-graphs-bluegrey:before,
577 .marker-color-graphs-bluegrey {
578 background-color: var(--theme-graphs-bluegrey);
581 menuitem.marker-color-graphs-purple:before,
582 .marker-color-graphs-purple {
583 background-color: var(--theme-graphs-purple);
586 menuitem.marker-color-graphs-yellow:before,
587 .marker-color-graphs-yellow {
588 background-color: var(--theme-graphs-yellow);
591 menuitem.marker-color-graphs-red:before,
592 .marker-color-graphs-red {
593 background-color: var(--theme-graphs-red);
596 menuitem.marker-color-graphs-grey:before,
597 .marker-color-graphs-grey{
598 background-color: var(--theme-graphs-grey);
601 /* Profile call tree */
603 .call-tree-cells-container {
604 /* Hack: force hardware acceleration */
605 transform: translateZ(1px);
609 .call-tree-cells-container[categories-hidden] .call-tree-category {
613 .call-tree-header[type="duration"],
614 .call-tree-cell[type="duration"],
615 .call-tree-header[type="self-duration"],
616 .call-tree-cell[type="self-duration"] {
620 .call-tree-header[type="percentage"],
621 .call-tree-cell[type="percentage"],
622 .call-tree-header[type="self-percentage"],
623 .call-tree-cell[type="self-percentage"] {
627 .call-tree-header[type="samples"],
628 .call-tree-cell[type="samples"] {
632 .call-tree-header[type="function"],
633 .call-tree-cell[type="function"] {
639 -moz-box-align: center;
644 .call-tree-header:not(:last-child),
645 .call-tree-cell:not(:last-child) {
646 -moz-border-end: 1px solid;
651 -moz-border-end-color: var(--theme-splitter-color);
652 color: var(--theme-body-color);
655 .call-tree-header:not(:last-child) {
659 .call-tree-cell:not(:last-child) {
664 background-color: var(--theme-toolbar-background);
667 .call-tree-item:last-child:not(:focus) {
668 border-bottom: 1px solid var(--theme-splitter-color);
671 .call-tree-item:nth-child(2n) {
672 background-color: var(--theme-contrast-background);
675 .call-tree-item:hover {
676 background-color: var(--theme-hover-background);
677 color: var(--theme-hover-color);
680 .call-tree-item:focus {
681 background-color: var(--theme-selection-background);
684 .call-tree-item:focus label {
685 color: var(--theme-selection-color);
688 .call-tree-item:focus .call-tree-cell {
689 -moz-border-end-color: var(--theme-splitter-color);
692 .call-tree-item:not([origin="content"]) .call-tree-name,
693 .call-tree-item:not([origin="content"]) .call-tree-url,
694 call-tree-item:not([origin="content"]) .call-tree-line {
695 /* Style chrome and non-JS nodes differently. */
700 -moz-margin-end: 4px !important;
707 .call-tree-url:hover {
708 text-decoration: underline;
712 color: var(--theme-text-blue);
716 color: var(--theme-contrast-border);
720 -moz-margin-start: 8px !important;
725 color: ver(--theme-body-color);
729 -moz-appearance: none;
730 background-color: transparent;
731 background-position: center;
732 background-repeat: no-repeat;
733 background-size: 11px;
735 -moz-margin-start: 8px !important;
741 background-image: url(magnifying-glass.png);
744 @media (min-resolution: 1.1dppx) {
746 background-image: url(magnifying-glass@2x.png);
750 .call-tree-item:hover .call-tree-zoom {
751 transition: opacity 0.3s ease-in;
755 .call-tree-item:hover .call-tree-zoom:hover {
759 .call-tree-category {
760 transform: scale(0.75);
761 transform-origin: center right;
768 #jit-optimizations-view {
775 #optimizations-graph {
779 #jit-optimizations-view.empty #optimizations-graph {
780 display: none !important;
783 /* override default styles for tree widget */
784 #jit-optimizations-view .tree-widget-empty-text {
790 #jit-optimizations-view:not(.empty) .tree-widget-empty-text {
794 #jit-optimizations-toolbar {
796 min-height: 0px; /* override .devtools-toolbar min-height */
799 .jit-optimizations-title {
804 #jit-optimizations-raw-view {
808 /* override default .tree-widget-item line-height */
809 #jit-optimizations-raw-view .tree-widget-item {
810 line-height: 20px !important;
815 #jit-optimizations-raw-view .tree-widget-item[level="1"] {
819 #jit-optimizations-view .opt-outcome::before {
822 color: var(--theme-body-color);
824 #jit-optimizations-view .theme-selected .opt-outcome::before {
825 color: var(--theme-selection-color);
828 #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] {
829 color: var(--theme-highlight-green);
831 #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] {
832 color: var(--theme-highlight-red);
834 #jit-optimizations-view .tree-widget-container {
835 -moz-margin-end: 0px;
837 #jit-optimizations-view .tree-widget-container > li,
838 #jit-optimizations-view .tree-widget-children > li {
844 color: var(--theme-highlight-orange);
846 .theme-selected .opt-line::before {
847 color: var(--theme-selection-color);
849 .opt-line.header-line::before {
850 color: var(--theme-body-color);
852 #jit-optimizations-view.empty .opt-line.header-line::before {
857 -moz-margin-start: 4px !important;
860 text-decoration: underline;
862 .opt-url.debugger-link {
868 background-image: url(chrome://devtools/skin/webconsole.svg);
869 background-repeat: no-repeat;
870 background-size: 72px 60px;
871 /* show grey "i" bubble by default */
872 background-position: -36px -36px;
875 display: inline-block;
880 #jit-optimizations-view .opt-icon::before {
883 description.opt-icon {
884 margin: 0px 0px 0px 0px;
886 description.opt-icon::before {
887 margin: 1px 4px 0px 0px;
890 .opt-icon[severity=warning]::before {
891 background-position: -24px -24px;
895 list-style-type: none;
904 ul.frames-list li.selected {
905 background-color: var(--theme-selection-background);
906 color: var(--theme-selection-color);
910 * Configurable Options
912 * Elements can be tagged with a class and visibility is controlled via a
913 * preference being applied or removed.
917 * devtools.performance.ui.experimental
919 menuitem.experimental-option::before {
921 background-image: url(chrome://devtools/skin/webconsole.svg);
922 background-repeat: no-repeat;
923 background-size: 72px 60px;
926 display: inline-block;
928 background-position: -24px -24px;
933 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
934 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {