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 * DE-XUL: Set a sidebar width because inline XUL components will cause the flex
18 * to overflow if dynamically sized.
21 --sidebar-width: 185px;
25 * A generic class to hide elements, replacing the `element.hidden` attribute
26 * that we use to hide elements that can later be active
36 #performance-toolbar-control-other {
37 padding-inline-end: 5px;
40 #performance-toolbar-controls-detail-views .toolbarbutton-text {
41 padding-inline-start: 4px;
42 padding-inline-end: 8px;
46 list-style-image: url(images/filter.svg);
49 #performance-filter-menupopup > menuitem .menu-iconic-left::after {
58 /* Details panel buttons */
60 #select-waterfall-view {
61 list-style-image: url(images/performance-icons.svg#details-waterfall);
64 #select-js-calltree-view,
65 #select-memory-calltree-view {
66 list-style-image: url(images/performance-icons.svg#details-call-tree);
69 #select-js-flamegraph-view,
70 #select-memory-flamegraph-view {
71 list-style-image: url(images/performance-icons.svg#details-flamegraph);
74 #select-optimizations-view {
75 list-style-image: url(images/profiler-stopwatch.svg);
78 /* Recording buttons */
80 #recordings-controls {
81 /* background-color: #9C9CFF;*/
85 #recording-controls-mount,
86 #recording-controls-mount > div,
87 #recording-controls-mount > div > .devtools-toolbar {
92 #clear-button::before {
93 background-image: var(--clear-icon-url);
96 #main-record-button::before {
97 background-image: url(images/profiler-stopwatch-tbutton.svg);
100 #import-button::before {
101 background-image: url(images/import.svg);
104 #main-record-button .button-icon, #import-button .button-icon {
108 #main-record-button .button-text, #import-button .button-text {
112 #main-record-button .button-icon {
116 #main-record-button .button-text {
120 .notice-container .record-button {
121 padding: 5px !important;
124 .notice-container .record-button.checked,
125 .notice-container .record-button.checked {
126 color: var(--theme-selection-color) !important;
127 background: var(--theme-selection-background) !important;
130 /* Sidebar & recording items */
133 border-inline-end: 1px solid var(--theme-splitter-color);
134 width: var(--sidebar-width);
137 #recording-controls-mount {
138 width: var(--sidebar-width);
141 #recording-controls-mount > div {
142 width: var(--sidebar-width);
146 * DE-XUL: The height of the toolbar is not correct without tweaking the line-height.
148 #recordings-pane .devtools-toolbar {
160 .recording-item-title {
164 .recording-item-footer {
169 .recording-item-save {
170 text-decoration: underline;
174 .recording-item-duration,
175 .recording-item-save {
176 color: var(--theme-body-color-alt);
179 #recordings-list .selected label {
180 /* Text inside a selected item should not be custom colored. */
181 color: inherit !important;
184 /* Recording notices */
188 background-color: var(--theme-body-background);
189 color: var(--theme-body-color);
190 padding-bottom: 20vh;
193 .tool-disabled-message {
197 .console-profile-recording-notice,
198 .console-profile-stop-notice {
202 .console-profile-command {
203 font-family: monospace;
207 .realtime-disabled-message,
208 .realtime-disabled-on-e10s-message {
212 #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message,
213 #performance-view[e10s="unsupported"] .realtime-disabled-message {
218 .buffer-status-message,
219 .buffer-status-message-full {
223 #details-pane-container[buffer-status="in-progress"] .buffer-status-message {
228 #details-pane-container[buffer-status="full"] .buffer-status-message {
230 color: var(--theme-highlight-red);
235 #details-pane-container[buffer-status="full"] .buffer-status-message-full {
239 /* Profile call tree */
241 .call-tree-cells-container {
245 .call-tree-cells-container[categories-hidden] .call-tree-category {
251 padding-top: 2px !important;
252 padding-bottom: 2px !important;
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"] {
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"] {
271 .call-tree-header[type="samples"],
272 .call-tree-cell[type="samples"] {
277 .call-tree-header[type="count"],
278 .call-tree-cell[type="count"],
279 .call-tree-header[type="self-count"],
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"] {
299 -moz-box-align: center;
301 text-overflow: ellipsis;
303 color: var(--theme-body-color);
304 border-inline-end-color: var(--cell-border-color);
307 .call-tree-header:not(:last-child),
308 .call-tree-cell:not(:last-child) {
309 border-inline-end-width: 1px;
310 border-inline-end-style: solid;
313 .call-tree-header:not(:last-child) {
317 .call-tree-cell:not(:last-child) {
322 background-color: var(--theme-tab-toolbar-background);
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 */
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);
337 .call-tree-item:last-child {
338 border-bottom: 1px solid var(--cell-border-color);
341 .call-tree-item:nth-child(2n) {
342 background-color: var(--row-alt-background-color);
345 .call-tree-item:hover {
346 background-color: var(--row-hover-background-color);
349 .call-tree-item:focus {
350 background-color: var(--theme-selection-background);
353 .call-tree-item:focus description {
354 color: var(--theme-selection-color) !important;
357 .call-tree-item:focus .call-tree-cell {
358 border-inline-end-color: var(--focus-cell-border-color);
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. */
370 margin-inline-end: 4px !important;
377 .call-tree-url:hover {
378 text-decoration: underline;
381 .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
382 color: var(--theme-highlight-blue);
385 .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
386 color: var(--theme-highlight-orange);
390 color: var(--theme-highlight-orange);
395 margin-inline-start: 8px !important;
397 color: var(--theme-content-color2);
400 .call-tree-category {
401 transform: scale(0.75);
402 transform-origin: center right;
406 * Waterfall ticks header
409 .waterfall-header-ticks {
413 .waterfall-header-name {
418 .waterfall-header-tick {
421 transform-origin: left center;
422 color: var(--theme-body-color);
425 .waterfall-header-tick:not(:first-child) {
426 margin-inline-start: -100px !important; /* Don't affect layout. */
429 .waterfall-background-ticks {
430 /* Background created on a <canvas> in js. */
431 /* @see devtools/client/timeline/widgets/waterfall.js */
432 background-image: -moz-element(#waterfall-background);
433 background-repeat: repeat-y;
434 background-position: -1px center;
438 * Markers waterfall breakdown
441 #waterfall-breakdown {
446 .waterfall-tree-item:not([level="0"]) {
447 background-image: repeating-linear-gradient(
451 rgba(255,255,255,0.05) 2px,
452 rgba(255,255,255,0.05) 4px
456 .waterfall-tree-item[expandable] .waterfall-marker-bullet,
457 .waterfall-tree-item[expandable] .waterfall-marker-bar {
458 background-image: repeating-linear-gradient(
462 rgba(0,0,0,0.35) 5px,
463 rgba(0,0,0,0.35) 10px
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);
472 .waterfall-tree-item:nth-child(2n) > .waterfall-marker {
473 background-color: var(--row-alt-background-color);
476 .waterfall-tree-item:hover {
477 background-color: var(--row-hover-background-color);
480 .waterfall-tree-item:last-child {
481 border-bottom: 1px solid var(--cell-border-color);
484 .waterfall-tree-item:focus {
485 background-color: var(--theme-selection-background);
488 .waterfall-tree-item:focus description {
489 color: var(--theme-selection-color) !important;
493 * Marker left sidebar
497 border-inline-end: 1px solid var(--cell-border-color);
500 .waterfall-tree-item > .waterfall-sidebar:hover,
501 .waterfall-tree-item:hover > .waterfall-sidebar,
502 .waterfall-tree-item:focus > .waterfall-sidebar {
503 background: transparent;
506 .waterfall-marker-bullet {
509 margin-inline-start: 8px;
510 margin-inline-end: 6px;
514 .waterfall-marker-name {
516 padding-bottom: 1px !important;
527 .waterfall-marker-bar {
529 transform-origin: left center;
533 .waterfall-marker > .theme-twisty {
534 /* Don't affect layout. */
536 margin-inline-end: -14px;
543 .waterfall-tree-item[otmt=true] .waterfall-marker-bullet,
544 .waterfall-tree-item[otmt=true] .waterfall-marker-bar {
545 background-color: transparent;
551 * Marker details view
555 padding-inline-start: 8px;
556 padding-inline-end: 8px;
562 #waterfall-details > * {
566 .marker-details-bullet {
572 .marker-details-name-label {
573 padding-inline-end: 4px;
576 .marker-details-type {
581 .marker-details-duration {
585 .marker-details-customcontainer .custom-button {
594 menuitem.marker-color-graphs-full-red .menu-iconic-left::after,
595 .marker-color-graphs-full-red {
596 background-color: var(--theme-graphs-full-red);
597 border-color: var(--theme-graphs-full-red);
599 menuitem.marker-color-graphs-full-blue .menu-iconic-left::after,
600 .marker-color-graphs-full-blue {
601 background-color: var(--theme-graphs-full-blue);
602 border-color: var(--theme-graphs-full-blue);
604 menuitem.marker-color-graphs-green .menu-iconic-left::after,
605 .marker-color-graphs-green {
606 background-color: var(--theme-graphs-green);
607 border-color: var(--theme-graphs-green);
609 menuitem.marker-color-graphs-blue .menu-iconic-left::after,
610 .marker-color-graphs-blue {
611 background-color: var(--theme-graphs-blue);
612 border-color: var(--theme-graphs-blue);
614 menuitem.marker-color-graphs-bluegrey .menu-iconic-left::after,
615 .marker-color-graphs-bluegrey {
616 background-color: var(--theme-graphs-bluegrey);
617 border-color: var(--theme-graphs-bluegrey);
619 menuitem.marker-color-graphs-purple .menu-iconic-left::after,
620 .marker-color-graphs-purple {
621 background-color: var(--theme-graphs-purple);
622 border-color: var(--theme-graphs-purple);
624 menuitem.marker-color-graphs-yellow .menu-iconic-left::after,
625 .marker-color-graphs-yellow {
626 background-color: var(--theme-graphs-yellow);
627 border-color: var(--theme-graphs-yellow);
629 menuitem.marker-color-graphs-orange .menu-iconic-left::after,
630 .marker-color-graphs-orange {
631 background-color: var(--theme-graphs-orange);
632 border-color: var(--theme-graphs-orange);
634 menuitem.marker-color-graphs-red .menu-iconic-left::after,
635 .marker-color-graphs-red {
636 background-color: var(--theme-graphs-red);
637 border-color: var(--theme-graphs-red);
639 menuitem.marker-color-graphs-grey .menu-iconic-left::after,
640 .marker-color-graphs-grey{
641 background-color: var(--theme-graphs-grey);
642 border-color: var(--theme-graphs-grey);
646 * Configurable Options
648 * Elements can be tagged with a class and visibility is controlled via a
649 * preference being applied or removed.
653 * devtools.performance.ui.experimental
655 menuitem.experimental-option::before {
657 background-image: url(chrome://devtools/skin/images/webconsole.svg);
658 background-repeat: no-repeat;
659 background-size: 72px 60px;
662 display: inline-block;
664 background-position: -24px -24px;
669 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
670 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
675 description.opt-icon {
676 margin: 0px 0px 0px 0px;
678 description.opt-icon::before {
679 margin: 1px 4px 0px 0px;