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 -moz-padding-end: 5px;
33 #performance-toolbar-controls-detail-views .toolbarbutton-text {
34 -moz-padding-start: 4px;
35 -moz-padding-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 */
74 list-style-image: url(images/profiler-stopwatch.svg);
77 #main-record-button .button-icon {
81 #main-record-button .button-text {
85 .notice-container .record-button {
86 padding: 5px !important;
89 .notice-container .record-button[checked],
90 .notice-container .record-button[checked] {
91 color: var(--theme-selection-color) !important;
92 background: var(--theme-selection-background) !important;
95 .record-button[locked] {
100 /* Sidebar & recording items */
103 border-inline-end: 1px solid var(--theme-splitter-color);
114 .recording-item-title {
118 .recording-item-footer {
123 .recording-item-save {
124 text-decoration: underline;
128 .recording-item-duration,
129 .recording-item-save {
130 color: var(--theme-body-color-alt);
133 #recordings-list .selected label {
134 /* Text inside a selected item should not be custom colored. */
135 color: inherit !important;
138 /* Recording notices */
142 background-color: var(--theme-body-background);
143 color: var(--theme-body-color);
144 padding-bottom: 20vh;
147 .tool-disabled-message {
151 .console-profile-recording-notice,
152 .console-profile-stop-notice {
156 .console-profile-command {
157 font-family: monospace;
161 .realtime-disabled-message,
162 .realtime-disabled-on-e10s-message {
166 #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message,
167 #performance-view[e10s="unsupported"] .realtime-disabled-message {
172 .buffer-status-message,
173 .buffer-status-message-full {
177 #details-pane-container[buffer-status="in-progress"] .buffer-status-message {
182 #details-pane-container[buffer-status="full"] .buffer-status-message {
184 color: var(--theme-highlight-red);
189 #details-pane-container[buffer-status="full"] .buffer-status-message-full {
193 /* Profile call tree */
195 .call-tree-cells-container {
199 .call-tree-cells-container[categories-hidden] .call-tree-category {
205 padding-top: 2px !important;
206 padding-bottom: 2px !important;
209 .call-tree-header[type="duration"],
210 .call-tree-cell[type="duration"],
211 .call-tree-header[type="self-duration"],
212 .call-tree-cell[type="self-duration"] {
217 .call-tree-header[type="percentage"],
218 .call-tree-cell[type="percentage"],
219 .call-tree-header[type="self-percentage"],
220 .call-tree-cell[type="self-percentage"] {
225 .call-tree-header[type="samples"],
226 .call-tree-cell[type="samples"] {
231 .call-tree-header[type="count"],
232 .call-tree-cell[type="count"],
233 .call-tree-header[type="self-count"],
234 .call-tree-cell[type="self-count"],
235 .call-tree-header[type="size"],
236 .call-tree-cell[type="size"],
237 .call-tree-header[type="self-size"],
238 .call-tree-cell[type="self-size"],
239 .call-tree-header[type="count-percentage"],
240 .call-tree-cell[type="count-percentage"],
241 .call-tree-header[type="self-count-percentage"],
242 .call-tree-cell[type="self-count-percentage"],
243 .call-tree-header[type="size-percentage"],
244 .call-tree-cell[type="size-percentage"],
245 .call-tree-header[type="self-size-percentage"],
246 .call-tree-cell[type="self-size-percentage"] {
253 -moz-box-align: center;
255 text-overflow: ellipsis;
257 color: var(--theme-body-color);
258 -moz-border-end-color: var(--cell-border-color);
261 .call-tree-header:not(:last-child),
262 .call-tree-cell:not(:last-child) {
263 -moz-border-end-width: 1px;
264 -moz-border-end-style: solid;
267 .call-tree-header:not(:last-child) {
271 .call-tree-cell:not(:last-child) {
276 background-color: var(--theme-tab-toolbar-background);
279 .call-tree-item .call-tree-cell,
280 .call-tree-item .call-tree-cell[type=function] description {
281 -moz-user-select: text;
282 /* so that optimizations view doesn't break the lines in call tree */
286 .call-tree-item .call-tree-cell::-moz-selection,
287 .call-tree-item .call-tree-cell[type=function] description::-moz-selection {
288 background-color: var(--theme-highlight-orange);
291 .call-tree-item:last-child {
292 border-bottom: 1px solid var(--cell-border-color);
295 .call-tree-item:nth-child(2n) {
296 background-color: var(--row-alt-background-color);
299 .call-tree-item:hover {
300 background-color: var(--row-hover-background-color);
303 .call-tree-item:focus {
304 background-color: var(--theme-selection-background);
307 .call-tree-item:focus description {
308 color: var(--theme-selection-color) !important;
311 .call-tree-item:focus .call-tree-cell {
312 -moz-border-end-color: var(--focus-cell-border-color);
315 .call-tree-item:not([origin="content"]) .call-tree-name,
316 .call-tree-item:not([origin="content"]) .call-tree-url,
317 .call-tree-item:not([origin="content"]) .call-tree-line,
318 .call-tree-item:not([origin="content"]) .call-tree-column {
319 /* Style chrome and non-JS nodes differently. */
324 -moz-margin-end: 4px !important;
331 .call-tree-url:hover {
332 text-decoration: underline;
335 .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
336 color: var(--theme-highlight-blue);
339 .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
340 color: var(--theme-highlight-orange);
344 color: var(--theme-highlight-orange);
349 -moz-margin-start: 8px !important;
351 color: var(--theme-content-color2);
354 .call-tree-category {
355 transform: scale(0.75);
356 transform-origin: center right;
360 * Waterfall ticks header
363 .waterfall-header-ticks {
367 .waterfall-header-name {
372 .waterfall-header-tick {
375 transform-origin: left center;
376 color: var(--theme-body-color);
379 .waterfall-header-tick:not(:first-child) {
380 -moz-margin-start: -100px !important; /* Don't affect layout. */
383 .waterfall-background-ticks {
384 /* Background created on a <canvas> in js. */
385 /* @see devtools/client/timeline/widgets/waterfall.js */
386 background-image: -moz-element(#waterfall-background);
387 background-repeat: repeat-y;
388 background-position: -1px center;
392 * Markers waterfall breakdown
395 #waterfall-breakdown {
400 .waterfall-tree-item:not([level="0"]) {
401 background-image: repeating-linear-gradient(
405 rgba(255,255,255,0.05) 2px,
406 rgba(255,255,255,0.05) 4px
410 .waterfall-tree-item[expandable] .waterfall-marker-bullet,
411 .waterfall-tree-item[expandable] .waterfall-marker-bar {
412 background-image: repeating-linear-gradient(
416 rgba(0,0,0,0.35) 5px,
417 rgba(0,0,0,0.35) 10px
421 .waterfall-tree-item[expanded],
422 .waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] {
423 box-shadow: 0 -1px var(--cell-border-color-light);
426 .waterfall-tree-item:nth-child(2n) > .waterfall-marker {
427 background-color: var(--row-alt-background-color);
430 .waterfall-tree-item:hover {
431 background-color: var(--row-hover-background-color);
434 .waterfall-tree-item:last-child {
435 border-bottom: 1px solid var(--cell-border-color);
438 .waterfall-tree-item:focus {
439 background-color: var(--theme-selection-background);
442 .waterfall-tree-item:focus description {
443 color: var(--theme-selection-color) !important;
447 * Marker left sidebar
451 -moz-border-end: 1px solid var(--cell-border-color);
454 .waterfall-tree-item > .waterfall-sidebar:hover,
455 .waterfall-tree-item:hover > .waterfall-sidebar,
456 .waterfall-tree-item:focus > .waterfall-sidebar {
457 background: transparent;
460 .waterfall-marker-bullet {
463 -moz-margin-start: 8px;
464 -moz-margin-end: 6px;
468 .waterfall-marker-name {
470 padding-bottom: 1px !important;
481 .waterfall-marker-bar {
483 transform-origin: left center;
487 .waterfall-marker > .theme-twisty {
488 /* Don't affect layout. */
490 -moz-margin-end: -14px;
497 .waterfall-tree-item[otmt=true] .waterfall-marker-bullet,
498 .waterfall-tree-item[otmt=true] .waterfall-marker-bar {
499 background-color: transparent;
505 * Marker details view
509 -moz-padding-start: 8px;
510 -moz-padding-end: 8px;
516 #waterfall-details > * {
520 .marker-details-bullet {
526 .marker-details-name-label {
527 -moz-padding-end: 4px;
530 .marker-details-type {
535 .marker-details-duration {
539 .marker-details-customcontainer .custom-button {
548 menuitem.marker-color-graphs-full-red:before,
549 .marker-color-graphs-full-red {
550 background-color: var(--theme-graphs-full-red);
551 border-color: var(--theme-graphs-full-red);
553 menuitem.marker-color-graphs-full-blue:before,
554 .marker-color-graphs-full-blue {
555 background-color: var(--theme-graphs-full-blue);
556 border-color: var(--theme-graphs-full-blue);
558 menuitem.marker-color-graphs-green:before,
559 .marker-color-graphs-green {
560 background-color: var(--theme-graphs-green);
561 border-color: var(--theme-graphs-green);
563 menuitem.marker-color-graphs-blue:before,
564 .marker-color-graphs-blue {
565 background-color: var(--theme-graphs-blue);
566 border-color: var(--theme-graphs-blue);
568 menuitem.marker-color-graphs-bluegrey:before,
569 .marker-color-graphs-bluegrey {
570 background-color: var(--theme-graphs-bluegrey);
571 border-color: var(--theme-graphs-bluegrey);
573 menuitem.marker-color-graphs-purple:before,
574 .marker-color-graphs-purple {
575 background-color: var(--theme-graphs-purple);
576 border-color: var(--theme-graphs-purple);
578 menuitem.marker-color-graphs-yellow:before,
579 .marker-color-graphs-yellow {
580 background-color: var(--theme-graphs-yellow);
581 border-color: var(--theme-graphs-yellow);
583 menuitem.marker-color-graphs-orange:before,
584 .marker-color-graphs-orange {
585 background-color: var(--theme-graphs-orange);
586 border-color: var(--theme-graphs-orange);
588 menuitem.marker-color-graphs-red:before,
589 .marker-color-graphs-red {
590 background-color: var(--theme-graphs-red);
591 border-color: var(--theme-graphs-red);
593 menuitem.marker-color-graphs-grey:before,
594 .marker-color-graphs-grey{
595 background-color: var(--theme-graphs-grey);
596 border-color: var(--theme-graphs-grey);
600 * Configurable Options
602 * Elements can be tagged with a class and visibility is controlled via a
603 * preference being applied or removed.
607 * devtools.performance.ui.experimental
609 menuitem.experimental-option::before {
611 background-image: url(chrome://devtools/skin/images/webconsole.svg);
612 background-repeat: no-repeat;
613 background-size: 72px 60px;
616 display: inline-block;
618 background-position: -24px -24px;
623 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
624 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
629 description.opt-icon {
630 margin: 0px 0px 0px 0px;
632 description.opt-icon::before {
633 margin: 1px 4px 0px 0px;