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;
14 --filter-image: url(chrome://devtools/skin/images/timeline-filter.svg);
18 * A generic class to hide elements, replacing the `element.hidden` attribute
19 * that we use to hide elements that can later be active
29 #performance-toolbar-control-other {
30 padding-inline-end: 5px;
33 #performance-toolbar-controls-detail-views .toolbarbutton-text {
34 padding-inline-start: 4px;
35 padding-inline-end: 8px;
39 list-style-image: var(--filter-image);
42 #performance-filter-menupopup > menuitem:before {
51 /* Details panel buttons */
53 #select-waterfall-view {
54 list-style-image: url(images/performance-icons.svg#details-waterfall);
57 #select-js-calltree-view,
58 #select-memory-calltree-view {
59 list-style-image: url(images/performance-icons.svg#details-call-tree);
62 #select-js-flamegraph-view,
63 #select-memory-flamegraph-view {
64 list-style-image: url(images/performance-icons.svg#details-flamegraph);
67 #select-optimizations-view {
68 list-style-image: url(images/profiler-stopwatch.svg);
71 /* Recording buttons */
73 #recordings-controls {
74 background-color: #9C9CFF;
77 #clear-button::before {
78 background-image: var(--clear-icon-url);
81 #main-record-button::before {
82 background-image: url(images/profiler-stopwatch-tbutton.svg);
85 #import-button::before {
86 background-image: url(images/import.svg);
89 #main-record-button .button-icon, #import-button .button-icon {
93 #main-record-button .button-text, #import-button .button-text {
97 #main-record-button .button-icon {
101 #main-record-button .button-text {
105 .notice-container .record-button {
106 padding: 5px !important;
109 .notice-container .record-button[checked],
110 .notice-container .record-button[checked] {
111 color: var(--theme-selection-color) !important;
112 background: var(--theme-selection-background) !important;
115 .record-button[locked] {
116 pointer-events: none;
120 /* Sidebar & recording items */
123 border-inline-end: 1px solid var(--theme-splitter-color);
134 .recording-item-title {
138 .recording-item-footer {
143 .recording-item-save {
144 text-decoration: underline;
148 .recording-item-duration,
149 .recording-item-save {
150 color: var(--theme-body-color-alt);
153 #recordings-list .selected label {
154 /* Text inside a selected item should not be custom colored. */
155 color: inherit !important;
158 /* Recording notices */
162 background-color: var(--theme-body-background);
163 color: var(--theme-body-color);
164 padding-bottom: 20vh;
167 .tool-disabled-message {
171 .console-profile-recording-notice,
172 .console-profile-stop-notice {
176 .console-profile-command {
177 font-family: monospace;
181 .realtime-disabled-message,
182 .realtime-disabled-on-e10s-message {
186 #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message,
187 #performance-view[e10s="unsupported"] .realtime-disabled-message {
192 .buffer-status-message,
193 .buffer-status-message-full {
197 #details-pane-container[buffer-status="in-progress"] .buffer-status-message {
202 #details-pane-container[buffer-status="full"] .buffer-status-message {
204 color: var(--theme-highlight-red);
209 #details-pane-container[buffer-status="full"] .buffer-status-message-full {
213 /* Profile call tree */
215 .call-tree-cells-container {
219 .call-tree-cells-container[categories-hidden] .call-tree-category {
225 padding-top: 2px !important;
226 padding-bottom: 2px !important;
229 .call-tree-header[type="duration"],
230 .call-tree-cell[type="duration"],
231 .call-tree-header[type="self-duration"],
232 .call-tree-cell[type="self-duration"] {
237 .call-tree-header[type="percentage"],
238 .call-tree-cell[type="percentage"],
239 .call-tree-header[type="self-percentage"],
240 .call-tree-cell[type="self-percentage"] {
245 .call-tree-header[type="samples"],
246 .call-tree-cell[type="samples"] {
251 .call-tree-header[type="count"],
252 .call-tree-cell[type="count"],
253 .call-tree-header[type="self-count"],
254 .call-tree-cell[type="self-count"],
255 .call-tree-header[type="size"],
256 .call-tree-cell[type="size"],
257 .call-tree-header[type="self-size"],
258 .call-tree-cell[type="self-size"],
259 .call-tree-header[type="count-percentage"],
260 .call-tree-cell[type="count-percentage"],
261 .call-tree-header[type="self-count-percentage"],
262 .call-tree-cell[type="self-count-percentage"],
263 .call-tree-header[type="size-percentage"],
264 .call-tree-cell[type="size-percentage"],
265 .call-tree-header[type="self-size-percentage"],
266 .call-tree-cell[type="self-size-percentage"] {
273 -moz-box-align: center;
275 text-overflow: ellipsis;
277 color: var(--theme-body-color);
278 border-inline-end-color: var(--cell-border-color);
281 .call-tree-header:not(:last-child),
282 .call-tree-cell:not(:last-child) {
283 border-inline-end-width: 1px;
284 border-inline-end-style: solid;
287 .call-tree-header:not(:last-child) {
291 .call-tree-cell:not(:last-child) {
296 background-color: var(--theme-tab-toolbar-background);
299 .call-tree-item .call-tree-cell,
300 .call-tree-item .call-tree-cell[type=function] description {
301 -moz-user-select: text;
302 /* so that optimizations view doesn't break the lines in call tree */
306 .call-tree-item .call-tree-cell::-moz-selection,
307 .call-tree-item .call-tree-cell[type=function] description::-moz-selection {
308 background-color: var(--theme-highlight-orange);
311 .call-tree-item:last-child {
312 border-bottom: 1px solid var(--cell-border-color);
315 .call-tree-item:nth-child(2n) {
316 background-color: var(--row-alt-background-color);
319 .call-tree-item:hover {
320 background-color: var(--row-hover-background-color);
323 .call-tree-item:focus {
324 background-color: var(--theme-selection-background);
327 .call-tree-item:focus description {
328 color: var(--theme-selection-color) !important;
331 .call-tree-item:focus .call-tree-cell {
332 border-inline-end-color: var(--focus-cell-border-color);
335 .call-tree-item:not([origin="content"]) .call-tree-name,
336 .call-tree-item:not([origin="content"]) .call-tree-url,
337 .call-tree-item:not([origin="content"]) .call-tree-line,
338 .call-tree-item:not([origin="content"]) .call-tree-column {
339 /* Style chrome and non-JS nodes differently. */
344 margin-inline-end: 4px !important;
351 .call-tree-url:hover {
352 text-decoration: underline;
355 .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
356 color: var(--theme-highlight-blue);
359 .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
360 color: var(--theme-highlight-orange);
364 color: var(--theme-highlight-orange);
369 margin-inline-start: 8px !important;
371 color: var(--theme-content-color2);
374 .call-tree-category {
375 transform: scale(0.75);
376 transform-origin: center right;
380 * Waterfall ticks header
383 .waterfall-header-ticks {
387 .waterfall-header-name {
392 .waterfall-header-tick {
395 transform-origin: left center;
396 color: var(--theme-body-color);
399 .waterfall-header-tick:not(:first-child) {
400 margin-inline-start: -100px !important; /* Don't affect layout. */
403 .waterfall-background-ticks {
404 /* Background created on a <canvas> in js. */
405 /* @see devtools/client/timeline/widgets/waterfall.js */
406 background-image: -moz-element(#waterfall-background);
407 background-repeat: repeat-y;
408 background-position: -1px center;
412 * Markers waterfall breakdown
415 #waterfall-breakdown {
420 .waterfall-tree-item:not([level="0"]) {
421 background-image: repeating-linear-gradient(
425 rgba(255,255,255,0.05) 2px,
426 rgba(255,255,255,0.05) 4px
430 .waterfall-tree-item[expandable] .waterfall-marker-bullet,
431 .waterfall-tree-item[expandable] .waterfall-marker-bar {
432 background-image: repeating-linear-gradient(
436 rgba(0,0,0,0.35) 5px,
437 rgba(0,0,0,0.35) 10px
441 .waterfall-tree-item[expanded],
442 .waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] {
443 box-shadow: 0 -1px var(--cell-border-color-light);
446 .waterfall-tree-item:nth-child(2n) > .waterfall-marker {
447 background-color: var(--row-alt-background-color);
450 .waterfall-tree-item:hover {
451 background-color: var(--row-hover-background-color);
454 .waterfall-tree-item:last-child {
455 border-bottom: 1px solid var(--cell-border-color);
458 .waterfall-tree-item:focus {
459 background-color: var(--theme-selection-background);
462 .waterfall-tree-item:focus description {
463 color: var(--theme-selection-color) !important;
467 * Marker left sidebar
471 border-inline-end: 1px solid var(--cell-border-color);
474 .waterfall-tree-item > .waterfall-sidebar:hover,
475 .waterfall-tree-item:hover > .waterfall-sidebar,
476 .waterfall-tree-item:focus > .waterfall-sidebar {
477 background: transparent;
480 .waterfall-marker-bullet {
483 margin-inline-start: 8px;
484 margin-inline-end: 6px;
488 .waterfall-marker-name {
490 padding-bottom: 1px !important;
501 .waterfall-marker-bar {
503 transform-origin: left center;
507 .waterfall-marker > .theme-twisty {
508 /* Don't affect layout. */
510 margin-inline-end: -14px;
517 .waterfall-tree-item[otmt=true] .waterfall-marker-bullet,
518 .waterfall-tree-item[otmt=true] .waterfall-marker-bar {
519 background-color: transparent;
525 * Marker details view
529 padding-inline-start: 8px;
530 padding-inline-end: 8px;
536 #waterfall-details > * {
540 .marker-details-bullet {
546 .marker-details-name-label {
547 padding-inline-end: 4px;
550 .marker-details-type {
555 .marker-details-duration {
559 .marker-details-customcontainer .custom-button {
568 menuitem.marker-color-graphs-full-red:before,
569 .marker-color-graphs-full-red {
570 background-color: var(--theme-graphs-full-red);
571 border-color: var(--theme-graphs-full-red);
573 menuitem.marker-color-graphs-full-blue:before,
574 .marker-color-graphs-full-blue {
575 background-color: var(--theme-graphs-full-blue);
576 border-color: var(--theme-graphs-full-blue);
578 menuitem.marker-color-graphs-green:before,
579 .marker-color-graphs-green {
580 background-color: var(--theme-graphs-green);
581 border-color: var(--theme-graphs-green);
583 menuitem.marker-color-graphs-blue:before,
584 .marker-color-graphs-blue {
585 background-color: var(--theme-graphs-blue);
586 border-color: var(--theme-graphs-blue);
588 menuitem.marker-color-graphs-bluegrey:before,
589 .marker-color-graphs-bluegrey {
590 background-color: var(--theme-graphs-bluegrey);
591 border-color: var(--theme-graphs-bluegrey);
593 menuitem.marker-color-graphs-purple:before,
594 .marker-color-graphs-purple {
595 background-color: var(--theme-graphs-purple);
596 border-color: var(--theme-graphs-purple);
598 menuitem.marker-color-graphs-yellow:before,
599 .marker-color-graphs-yellow {
600 background-color: var(--theme-graphs-yellow);
601 border-color: var(--theme-graphs-yellow);
603 menuitem.marker-color-graphs-orange:before,
604 .marker-color-graphs-orange {
605 background-color: var(--theme-graphs-orange);
606 border-color: var(--theme-graphs-orange);
608 menuitem.marker-color-graphs-red:before,
609 .marker-color-graphs-red {
610 background-color: var(--theme-graphs-red);
611 border-color: var(--theme-graphs-red);
613 menuitem.marker-color-graphs-grey:before,
614 .marker-color-graphs-grey{
615 background-color: var(--theme-graphs-grey);
616 border-color: var(--theme-graphs-grey);
620 * Configurable Options
622 * Elements can be tagged with a class and visibility is controlled via a
623 * preference being applied or removed.
627 * devtools.performance.ui.experimental
629 menuitem.experimental-option::before {
631 background-image: url(chrome://devtools/skin/images/webconsole.svg);
632 background-repeat: no-repeat;
633 background-size: 72px 60px;
636 display: inline-block;
638 background-position: -24px -24px;
643 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
644 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
649 description.opt-icon {
650 margin: 0px 0px 0px 0px;
652 description.opt-icon::before {
653 margin: 1px 4px 0px 0px;