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 padding-inline-end: 5px;
32 #performance-toolbar-controls-detail-views .toolbarbutton-text {
33 padding-inline-start: 4px;
34 padding-inline-end: 8px;
38 list-style-image: url(images/filter.svg);
41 #performance-filter-menupopup > menuitem .menu-iconic-left::after {
50 /* Details panel buttons */
52 #select-waterfall-view {
53 list-style-image: url(images/performance-icons.svg#details-waterfall);
56 #select-js-calltree-view,
57 #select-memory-calltree-view {
58 list-style-image: url(images/performance-icons.svg#details-call-tree);
61 #select-js-flamegraph-view,
62 #select-memory-flamegraph-view {
63 list-style-image: url(images/performance-icons.svg#details-flamegraph);
66 #select-optimizations-view {
67 list-style-image: url(images/profiler-stopwatch.svg);
70 /* Recording buttons */
72 #recordings-controls {
73 /* background-color: #9C9CFF;*/
77 #recording-controls-mount,
78 #recording-controls-mount > div,
79 #recording-controls-mount > div > .devtools-toolbar {
84 #clear-button::before {
85 background-image: var(--clear-icon-url);
88 #main-record-button > image,
89 #main-record-button::before {
90 background-image: url(images/profiler-stopwatch-tbutton.svg);
93 #import-button > image,
94 #import-button::before {
95 background-image: url(images/import.svg);
98 #main-record-button .button-icon, #import-button .button-icon {
102 #main-record-button .button-text, #import-button .button-text {
106 #main-record-button .button-icon {
110 #main-record-button .button-text {
114 .notice-container .record-button {
115 padding: 5px !important;
118 .notice-container .record-button[checked],
119 .notice-container .record-button[checked] {
120 color: var(--theme-selection-color) !important;
121 background: var(--theme-selection-background) !important;
124 .record-button[locked] {
125 pointer-events: none;
129 /* Sidebar & recording items */
132 border-inline-end: 1px solid var(--theme-splitter-color);
143 .recording-item-title {
147 .recording-item-footer {
152 .recording-item-save {
153 text-decoration: underline;
157 .recording-item-duration,
158 .recording-item-save {
159 color: var(--theme-body-color-alt);
162 #recordings-list .selected label {
163 /* Text inside a selected item should not be custom colored. */
164 color: inherit !important;
167 /* Recording notices */
171 background-color: var(--theme-body-background);
172 color: var(--theme-body-color);
173 padding-bottom: 20vh;
176 .tool-disabled-message {
180 .console-profile-recording-notice,
181 .console-profile-stop-notice {
185 .console-profile-command {
186 font-family: monospace;
190 .realtime-disabled-message,
191 .realtime-disabled-on-e10s-message {
195 #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message,
196 #performance-view[e10s="unsupported"] .realtime-disabled-message {
201 .buffer-status-message,
202 .buffer-status-message-full {
206 #details-pane-container[buffer-status="in-progress"] .buffer-status-message {
211 #details-pane-container[buffer-status="full"] .buffer-status-message {
213 color: var(--theme-highlight-red);
218 #details-pane-container[buffer-status="full"] .buffer-status-message-full {
222 /* Profile call tree */
224 .call-tree-cells-container {
228 .call-tree-cells-container[categories-hidden] .call-tree-category {
234 padding-top: 2px !important;
235 padding-bottom: 2px !important;
238 .call-tree-header[type="duration"],
239 .call-tree-cell[type="duration"],
240 .call-tree-header[type="self-duration"],
241 .call-tree-cell[type="self-duration"] {
246 .call-tree-header[type="percentage"],
247 .call-tree-cell[type="percentage"],
248 .call-tree-header[type="self-percentage"],
249 .call-tree-cell[type="self-percentage"] {
254 .call-tree-header[type="samples"],
255 .call-tree-cell[type="samples"] {
260 .call-tree-header[type="count"],
261 .call-tree-cell[type="count"],
262 .call-tree-header[type="self-count"],
263 .call-tree-cell[type="self-count"],
264 .call-tree-header[type="size"],
265 .call-tree-cell[type="size"],
266 .call-tree-header[type="self-size"],
267 .call-tree-cell[type="self-size"],
268 .call-tree-header[type="count-percentage"],
269 .call-tree-cell[type="count-percentage"],
270 .call-tree-header[type="self-count-percentage"],
271 .call-tree-cell[type="self-count-percentage"],
272 .call-tree-header[type="size-percentage"],
273 .call-tree-cell[type="size-percentage"],
274 .call-tree-header[type="self-size-percentage"],
275 .call-tree-cell[type="self-size-percentage"] {
282 -moz-box-align: center;
284 text-overflow: ellipsis;
286 color: var(--theme-body-color);
287 border-inline-end-color: var(--cell-border-color);
290 .call-tree-header:not(:last-child),
291 .call-tree-cell:not(:last-child) {
292 border-inline-end-width: 1px;
293 border-inline-end-style: solid;
296 .call-tree-header:not(:last-child) {
300 .call-tree-cell:not(:last-child) {
305 background-color: var(--theme-tab-toolbar-background);
308 .call-tree-item .call-tree-cell,
309 .call-tree-item .call-tree-cell[type=function] description {
310 -moz-user-select: text;
311 /* so that optimizations view doesn't break the lines in call tree */
315 .call-tree-item .call-tree-cell::-moz-selection,
316 .call-tree-item .call-tree-cell[type=function] description::-moz-selection {
317 background-color: var(--theme-highlight-orange);
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 border-inline-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 margin-inline-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 margin-inline-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 margin-inline-start: -100px !important; /* Don't affect layout. */
412 .waterfall-background-ticks {
413 /* Background created on a <canvas> in js. */
414 /* @see devtools/client/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 border-inline-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 margin-inline-start: 8px;
493 margin-inline-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 margin-inline-end: -14px;
526 .waterfall-tree-item[otmt=true] .waterfall-marker-bullet,
527 .waterfall-tree-item[otmt=true] .waterfall-marker-bar {
528 background-color: transparent;
534 * Marker details view
538 padding-inline-start: 8px;
539 padding-inline-end: 8px;
545 #waterfall-details > * {
549 .marker-details-bullet {
555 .marker-details-name-label {
556 padding-inline-end: 4px;
559 .marker-details-type {
564 .marker-details-duration {
568 .marker-details-customcontainer .custom-button {
577 menuitem.marker-color-graphs-full-red .menu-iconic-left::after,
578 .marker-color-graphs-full-red {
579 background-color: var(--theme-graphs-full-red);
580 border-color: var(--theme-graphs-full-red);
582 menuitem.marker-color-graphs-full-blue .menu-iconic-left::after,
583 .marker-color-graphs-full-blue {
584 background-color: var(--theme-graphs-full-blue);
585 border-color: var(--theme-graphs-full-blue);
587 menuitem.marker-color-graphs-green .menu-iconic-left::after,
588 .marker-color-graphs-green {
589 background-color: var(--theme-graphs-green);
590 border-color: var(--theme-graphs-green);
592 menuitem.marker-color-graphs-blue .menu-iconic-left::after,
593 .marker-color-graphs-blue {
594 background-color: var(--theme-graphs-blue);
595 border-color: var(--theme-graphs-blue);
597 menuitem.marker-color-graphs-bluegrey .menu-iconic-left::after,
598 .marker-color-graphs-bluegrey {
599 background-color: var(--theme-graphs-bluegrey);
600 border-color: var(--theme-graphs-bluegrey);
602 menuitem.marker-color-graphs-purple .menu-iconic-left::after,
603 .marker-color-graphs-purple {
604 background-color: var(--theme-graphs-purple);
605 border-color: var(--theme-graphs-purple);
607 menuitem.marker-color-graphs-yellow .menu-iconic-left::after,
608 .marker-color-graphs-yellow {
609 background-color: var(--theme-graphs-yellow);
610 border-color: var(--theme-graphs-yellow);
612 menuitem.marker-color-graphs-orange .menu-iconic-left::after,
613 .marker-color-graphs-orange {
614 background-color: var(--theme-graphs-orange);
615 border-color: var(--theme-graphs-orange);
617 menuitem.marker-color-graphs-red .menu-iconic-left::after,
618 .marker-color-graphs-red {
619 background-color: var(--theme-graphs-red);
620 border-color: var(--theme-graphs-red);
622 menuitem.marker-color-graphs-grey .menu-iconic-left::after,
623 .marker-color-graphs-grey{
624 background-color: var(--theme-graphs-grey);
625 border-color: var(--theme-graphs-grey);
629 * Configurable Options
631 * Elements can be tagged with a class and visibility is controlled via a
632 * preference being applied or removed.
636 * devtools.performance.ui.experimental
638 menuitem.experimental-option::before {
640 background-image: url(chrome://devtools/skin/images/webconsole.svg);
641 background-repeat: no-repeat;
642 background-size: 72px 60px;
645 display: inline-block;
647 background-position: -24px -24px;
652 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
653 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
658 description.opt-icon {
659 margin: 0px 0px 0px 0px;
661 description.opt-icon::before {
662 margin: 1px 4px 0px 0px;