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;
76 #clear-button::before {
77 background-image: var(--clear-icon-url);
80 #main-record-button::before {
81 background-image: url(images/profiler-stopwatch-tbutton.svg);
84 #import-button::before {
85 background-image: url(images/import.svg);
88 #main-record-button .button-icon, #import-button .button-icon {
92 #main-record-button .button-text, #import-button .button-text {
96 #main-record-button .button-icon {
100 #main-record-button .button-text {
104 .notice-container .record-button {
105 padding: 5px !important;
108 .notice-container .record-button[checked],
109 .notice-container .record-button[checked] {
110 color: var(--theme-selection-color) !important;
111 background: var(--theme-selection-background) !important;
114 .record-button[locked] {
115 pointer-events: none;
119 /* Sidebar & recording items */
122 border-inline-end: 1px solid var(--theme-splitter-color);
133 .recording-item-title {
137 .recording-item-footer {
142 .recording-item-save {
143 text-decoration: underline;
147 .recording-item-duration,
148 .recording-item-save {
149 color: var(--theme-body-color-alt);
152 #recordings-list .selected label {
153 /* Text inside a selected item should not be custom colored. */
154 color: inherit !important;
157 /* Recording notices */
161 background-color: var(--theme-body-background);
162 color: var(--theme-body-color);
163 padding-bottom: 20vh;
166 .tool-disabled-message {
170 .console-profile-recording-notice,
171 .console-profile-stop-notice {
175 .console-profile-command {
176 font-family: monospace;
180 .realtime-disabled-message,
181 .realtime-disabled-on-e10s-message {
185 #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message,
186 #performance-view[e10s="unsupported"] .realtime-disabled-message {
191 .buffer-status-message,
192 .buffer-status-message-full {
196 #details-pane-container[buffer-status="in-progress"] .buffer-status-message {
201 #details-pane-container[buffer-status="full"] .buffer-status-message {
203 color: var(--theme-highlight-red);
208 #details-pane-container[buffer-status="full"] .buffer-status-message-full {
212 /* Profile call tree */
214 .call-tree-cells-container {
218 .call-tree-cells-container[categories-hidden] .call-tree-category {
224 padding-top: 2px !important;
225 padding-bottom: 2px !important;
228 .call-tree-header[type="duration"],
229 .call-tree-cell[type="duration"],
230 .call-tree-header[type="self-duration"],
231 .call-tree-cell[type="self-duration"] {
236 .call-tree-header[type="percentage"],
237 .call-tree-cell[type="percentage"],
238 .call-tree-header[type="self-percentage"],
239 .call-tree-cell[type="self-percentage"] {
244 .call-tree-header[type="samples"],
245 .call-tree-cell[type="samples"] {
250 .call-tree-header[type="count"],
251 .call-tree-cell[type="count"],
252 .call-tree-header[type="self-count"],
253 .call-tree-cell[type="self-count"],
254 .call-tree-header[type="size"],
255 .call-tree-cell[type="size"],
256 .call-tree-header[type="self-size"],
257 .call-tree-cell[type="self-size"],
258 .call-tree-header[type="count-percentage"],
259 .call-tree-cell[type="count-percentage"],
260 .call-tree-header[type="self-count-percentage"],
261 .call-tree-cell[type="self-count-percentage"],
262 .call-tree-header[type="size-percentage"],
263 .call-tree-cell[type="size-percentage"],
264 .call-tree-header[type="self-size-percentage"],
265 .call-tree-cell[type="self-size-percentage"] {
272 -moz-box-align: center;
274 text-overflow: ellipsis;
276 color: var(--theme-body-color);
277 border-inline-end-color: var(--cell-border-color);
280 .call-tree-header:not(:last-child),
281 .call-tree-cell:not(:last-child) {
282 border-inline-end-width: 1px;
283 border-inline-end-style: solid;
286 .call-tree-header:not(:last-child) {
290 .call-tree-cell:not(:last-child) {
295 background-color: var(--theme-tab-toolbar-background);
298 .call-tree-item .call-tree-cell,
299 .call-tree-item .call-tree-cell[type=function] description {
300 -moz-user-select: text;
301 /* so that optimizations view doesn't break the lines in call tree */
305 .call-tree-item .call-tree-cell::-moz-selection,
306 .call-tree-item .call-tree-cell[type=function] description::-moz-selection {
307 background-color: var(--theme-highlight-orange);
310 .call-tree-item:last-child {
311 border-bottom: 1px solid var(--cell-border-color);
314 .call-tree-item:nth-child(2n) {
315 background-color: var(--row-alt-background-color);
318 .call-tree-item:hover {
319 background-color: var(--row-hover-background-color);
322 .call-tree-item:focus {
323 background-color: var(--theme-selection-background);
326 .call-tree-item:focus description {
327 color: var(--theme-selection-color) !important;
330 .call-tree-item:focus .call-tree-cell {
331 border-inline-end-color: var(--focus-cell-border-color);
334 .call-tree-item:not([origin="content"]) .call-tree-name,
335 .call-tree-item:not([origin="content"]) .call-tree-url,
336 .call-tree-item:not([origin="content"]) .call-tree-line,
337 .call-tree-item:not([origin="content"]) .call-tree-column {
338 /* Style chrome and non-JS nodes differently. */
343 margin-inline-end: 4px !important;
350 .call-tree-url:hover {
351 text-decoration: underline;
354 .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
355 color: var(--theme-highlight-blue);
358 .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
359 color: var(--theme-highlight-orange);
363 color: var(--theme-highlight-orange);
368 margin-inline-start: 8px !important;
370 color: var(--theme-content-color2);
373 .call-tree-category {
374 transform: scale(0.75);
375 transform-origin: center right;
379 * Waterfall ticks header
382 .waterfall-header-ticks {
386 .waterfall-header-name {
391 .waterfall-header-tick {
394 transform-origin: left center;
395 color: var(--theme-body-color);
398 .waterfall-header-tick:not(:first-child) {
399 margin-inline-start: -100px !important; /* Don't affect layout. */
402 .waterfall-background-ticks {
403 /* Background created on a <canvas> in js. */
404 /* @see devtools/client/timeline/widgets/waterfall.js */
405 background-image: -moz-element(#waterfall-background);
406 background-repeat: repeat-y;
407 background-position: -1px center;
411 * Markers waterfall breakdown
414 #waterfall-breakdown {
419 .waterfall-tree-item:not([level="0"]) {
420 background-image: repeating-linear-gradient(
424 rgba(255,255,255,0.05) 2px,
425 rgba(255,255,255,0.05) 4px
429 .waterfall-tree-item[expandable] .waterfall-marker-bullet,
430 .waterfall-tree-item[expandable] .waterfall-marker-bar {
431 background-image: repeating-linear-gradient(
435 rgba(0,0,0,0.35) 5px,
436 rgba(0,0,0,0.35) 10px
440 .waterfall-tree-item[expanded],
441 .waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] {
442 box-shadow: 0 -1px var(--cell-border-color-light);
445 .waterfall-tree-item:nth-child(2n) > .waterfall-marker {
446 background-color: var(--row-alt-background-color);
449 .waterfall-tree-item:hover {
450 background-color: var(--row-hover-background-color);
453 .waterfall-tree-item:last-child {
454 border-bottom: 1px solid var(--cell-border-color);
457 .waterfall-tree-item:focus {
458 background-color: var(--theme-selection-background);
461 .waterfall-tree-item:focus description {
462 color: var(--theme-selection-color) !important;
466 * Marker left sidebar
470 border-inline-end: 1px solid var(--cell-border-color);
473 .waterfall-tree-item > .waterfall-sidebar:hover,
474 .waterfall-tree-item:hover > .waterfall-sidebar,
475 .waterfall-tree-item:focus > .waterfall-sidebar {
476 background: transparent;
479 .waterfall-marker-bullet {
482 margin-inline-start: 8px;
483 margin-inline-end: 6px;
487 .waterfall-marker-name {
489 padding-bottom: 1px !important;
500 .waterfall-marker-bar {
502 transform-origin: left center;
506 .waterfall-marker > .theme-twisty {
507 /* Don't affect layout. */
509 margin-inline-end: -14px;
516 .waterfall-tree-item[otmt=true] .waterfall-marker-bullet,
517 .waterfall-tree-item[otmt=true] .waterfall-marker-bar {
518 background-color: transparent;
524 * Marker details view
528 padding-inline-start: 8px;
529 padding-inline-end: 8px;
535 #waterfall-details > * {
539 .marker-details-bullet {
545 .marker-details-name-label {
546 padding-inline-end: 4px;
549 .marker-details-type {
554 .marker-details-duration {
558 .marker-details-customcontainer .custom-button {
567 menuitem.marker-color-graphs-full-red .menu-iconic-left::after,
568 .marker-color-graphs-full-red {
569 background-color: var(--theme-graphs-full-red);
570 border-color: var(--theme-graphs-full-red);
572 menuitem.marker-color-graphs-full-blue .menu-iconic-left::after,
573 .marker-color-graphs-full-blue {
574 background-color: var(--theme-graphs-full-blue);
575 border-color: var(--theme-graphs-full-blue);
577 menuitem.marker-color-graphs-green .menu-iconic-left::after,
578 .marker-color-graphs-green {
579 background-color: var(--theme-graphs-green);
580 border-color: var(--theme-graphs-green);
582 menuitem.marker-color-graphs-blue .menu-iconic-left::after,
583 .marker-color-graphs-blue {
584 background-color: var(--theme-graphs-blue);
585 border-color: var(--theme-graphs-blue);
587 menuitem.marker-color-graphs-bluegrey .menu-iconic-left::after,
588 .marker-color-graphs-bluegrey {
589 background-color: var(--theme-graphs-bluegrey);
590 border-color: var(--theme-graphs-bluegrey);
592 menuitem.marker-color-graphs-purple .menu-iconic-left::after,
593 .marker-color-graphs-purple {
594 background-color: var(--theme-graphs-purple);
595 border-color: var(--theme-graphs-purple);
597 menuitem.marker-color-graphs-yellow .menu-iconic-left::after,
598 .marker-color-graphs-yellow {
599 background-color: var(--theme-graphs-yellow);
600 border-color: var(--theme-graphs-yellow);
602 menuitem.marker-color-graphs-orange .menu-iconic-left::after,
603 .marker-color-graphs-orange {
604 background-color: var(--theme-graphs-orange);
605 border-color: var(--theme-graphs-orange);
607 menuitem.marker-color-graphs-red .menu-iconic-left::after,
608 .marker-color-graphs-red {
609 background-color: var(--theme-graphs-red);
610 border-color: var(--theme-graphs-red);
612 menuitem.marker-color-graphs-grey .menu-iconic-left::after,
613 .marker-color-graphs-grey{
614 background-color: var(--theme-graphs-grey);
615 border-color: var(--theme-graphs-grey);
619 * Configurable Options
621 * Elements can be tagged with a class and visibility is controlled via a
622 * preference being applied or removed.
626 * devtools.performance.ui.experimental
628 menuitem.experimental-option::before {
630 background-image: url(chrome://devtools/skin/images/webconsole.svg);
631 background-repeat: no-repeat;
632 background-size: 72px 60px;
635 display: inline-block;
637 background-position: -24px -24px;
642 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
643 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
648 description.opt-icon {
649 margin: 0px 0px 0px 0px;
651 description.opt-icon::before {
652 margin: 1px 4px 0px 0px;