/* vim:set ts=2 sw=2 sts=2 et: */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-dark, .theme-light { --cell-border-color: #A09090; --focus-cell-border-color: #9C9CFF; --row-alt-background-color: #403400; --row-hover-background-color: #544400; } /* Toolbar */ #performance-toolbar > tabs, #performance-toolbar { -moz-border-end-color: var(--theme-splitter-color); } #performance-toolbar-control-other { -moz-padding-end: 5px; } #performance-toolbar-controls-detail-views > toolbarbutton { min-width: 0; } #performance-toolbar-controls-detail-views .toolbarbutton-text { -moz-padding-start: 4px; -moz-padding-end: 8px; } #filter-button { list-style-image: url(timeline-filter.svg#filter); min-width: 24px; } #filter-button[disabled] { list-style-image: url(timeline-filter.svg#filter-disabled); } #filter-button:not([disabled]):hover, #filter-button:not([disabled]):hover:active, #filter-button[open] { list-style-image: url(timeline-filter.svg#filter-open); } #performance-filter-menupopup > menuitem:before { content: ""; display: block; width: 8px; height: 8px; margin: 0 8px; border-radius: 1px; } #filter-button { list-style-image: url(timeline-filter.svg#filter); min-width: 24px; } #filter-button[disabled] { list-style-image: url(timeline-filter.svg#filter-disabled); } #filter-button[open] { list-style-image: url(timeline-filter.svg#filter-open); } #performance-filter-menupopup > menuitem:before { content: ""; display: block; width: 8px; height: 8px; margin: 0 8px; border-radius: 1px; } /* Recording Notice */ #performance-view .notice-container { font-size: 120%; background-color: var(--theme-toolbar-background); color: var(--theme-body-color); padding-bottom: 20vh; } #performance-view .notice-container button { min-width: 30px; min-height: 28px; margin: 0; } #performance-view .notice-container vbox { text-align: center; } .console-profile-command { font-family: monospace; margin: 3px 2px; } #performance-view .realtime-message { opacity: 0.5; display: block; } #performance-view toolbarbutton.record-button { padding: 5px; } #performance-view toolbarbutton.record-button[checked], #performance-view toolbarbutton.record-button[checked] { color: var(--theme-selection-color); background: var(--theme-selection-background); } #performance-view .realtime-disabled-message, #performance-view .realtime-disabled-on-e10s-message { display: none; /* This label does not want to wrap naturally (based on some combination of it's parents and flex). Quick and dirty way to force it to wrap -> don't let it get bigger than half the screen size */ max-width: 60vw; } #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { display: block; opacity: 0.5; } #performance-view[e10s="unsupported"] .realtime-disabled-message { display: block; opacity: 0.5; } #details-pane-container .buffer-status-message, #details-pane-container .buffer-status-message-full { display: none; } #details-pane-container[buffer-status="in-progress"] .buffer-status-message { display: block; opacity: 0.5; } #details-pane-container[buffer-status="full"] .buffer-status-message { display: block; color: var(--theme-highlight-red); font-weight: bold; opacity: 1; } #details-pane-container[buffer-status="full"] .buffer-status-message-full { display: block; } /* Overview Panel */ #main-record-button { list-style-image: url(profiler-stopwatch-tbutton.svg); } #empty-notice > .record-button, #main-record-button:hover, #main-record-button:hover:active { list-style-image: url(profiler-stopwatch.svg); } #main-record-button[checked] { list-style-image: url(profiler-stopwatch-checked.svg); } #main-record-button[locked] { pointer-events: none; } #main-record-button .button-icon { margin: 0; } #main-record-button .button-text { display: none; } /* Details Panel */ #select-waterfall-view { list-style-image: url(performance-icons.svg#details-waterfall); } #select-waterfall-view:hover, #select-waterfall-view:hover:active, #select-waterfall-view[checked] { list-style-image: url(performance-icons.svg#details-waterfall-active); } #select-js-calltree-view, #select-memory-calltree-view { list-style-image: url(performance-icons.svg#details-call-tree); } #select-js-calltree-view:hover, #select-js-calltree-view:hover:active, #select-js-calltree-view[checked], #select-memory-calltree-view:hover, #select-memory-calltree-view:hover:active, #select-memory-calltree-view[checked] { list-style-image: url(performance-icons.svg#details-call-tree-active); } #select-js-flamegraph-view, #select-memory-flamegraph-view { list-style-image: url(performance-icons.svg#details-flamegraph); } #select-js-flamegraph-view:hover, #select-js-flamegraph-view:hover:active, #select-js-flamegraph-view[checked], #select-memory-flamegraph-view:hover, #select-memory-flamegraph-view:hover:active, #select-memory-flamegraph-view[checked] { list-style-image: url(performance-icons.svg#details-flamegraph-active); } /* Profile call tree */ .call-tree-cells-container { /* Hack: force hardware acceleration */ transform: translateZ(1px); overflow: auto; } .call-tree-cells-container[categories-hidden] .call-tree-category { display: none; } .call-tree-header { font-size: 90%; padding-top: 2px !important; padding-bottom: 2px !important; } .call-tree-header[type="duration"], .call-tree-cell[type="duration"], .call-tree-header[type="self-duration"], .call-tree-cell[type="self-duration"] { width: 6vw; } .call-tree-header[type="percentage"], .call-tree-cell[type="percentage"], .call-tree-header[type="self-percentage"], .call-tree-cell[type="self-percentage"] { width: 5vw; } .call-tree-header[type="samples"], .call-tree-cell[type="samples"] { width: 4.5vw; } .call-tree-header[type="allocations"], .call-tree-cell[type="allocations"], .call-tree-header[type="self-allocations"], .call-tree-cell[type="self-allocations"] { width: 9vw; } .call-tree-header[type="function"], .call-tree-cell[type="function"] { -moz-box-flex: 1; } .call-tree-header, .call-tree-cell { -moz-box-align: center; overflow: hidden; padding: 1px 4px; color: var(--theme-body-color); -moz-border-end-color: var(--cell-border-color); } .call-tree-header:not(:last-child), .call-tree-cell:not(:last-child) { -moz-border-end-width: 1px; -moz-border-end-style: solid; } .call-tree-header:not(:last-child) { text-align: center; } .call-tree-cell:not(:last-child) { text-align: end; } .call-tree-header { background-color: var(--theme-tab-toolbar-background); } .call-tree-item:last-child:not(:focus) { border-bottom: 1px solid var(--cell-border-color); } .call-tree-item:nth-child(2n) { background-color: var(--row-alt-background-color); } .call-tree-item:hover { background-color: var(--row-hover-background-color); } .call-tree-item:focus { background-color: var(--theme-selection-background); } .call-tree-item:focus label { color: var(--theme-selection-color) !important; } .call-tree-item:focus .call-tree-cell { -moz-border-end-color: var(--focus-cell-border-color); } .call-tree-item:not([origin="content"]) .call-tree-name, .call-tree-item:not([origin="content"]) .call-tree-url, .call-tree-item:not([origin="content"]) .call-tree-line, .call-tree-item:not([origin="content"]) .call-tree-column { /* Style chrome and non-JS nodes differently. */ opacity: 0.6; } .call-tree-name { -moz-margin-end: 4px !important; } .call-tree-url { cursor: pointer; } .call-tree-url:hover { text-decoration: underline; } .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url { color: var(--theme-highlight-blue); } .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line { color: var(--theme-highlight-orange); } .call-tree-column { color: var(--theme-highlight-orange); opacity: 0.6; } .call-tree-host { -moz-margin-start: 8px !important; font-size: 90%; color: var(--theme-content-color2); } .call-tree-zoom { -moz-appearance: none; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: 11px; min-width: 11px; -moz-margin-start: 8px !important; cursor: zoom-in; opacity: 0; } .theme-dark .call-tree-zoom { background-image: url(magnifying-glass.png); } .theme-light .call-tree-zoom { background-image: url(magnifying-glass-light.png); } @media (min-resolution: 1.25dppx) { .theme-dark .call-tree-zoom { background-image: url(magnifying-glass@2x.png); } .theme-light .call-tree-zoom { background-image: url(magnifying-glass-light@2x.png); } } .call-tree-item:hover .call-tree-zoom { transition: opacity 0.3s ease-in; opacity: 1; } .call-tree-item:hover .call-tree-zoom:hover { opacity: 0; } .call-tree-category { transform: scale(0.75); transform-origin: center right; } /** * Details Waterfall Styles */ .waterfall-list-contents { /* Hack: force hardware acceleration */ transform: translateZ(1px); overflow-x: hidden; overflow-y: auto; } .waterfall-header-contents { overflow-x: hidden; } .waterfall-background-ticks { /* Background created on a in js. */ /* @see browser/devtools/timeline/widgets/waterfall.js */ background-image: -moz-element(#waterfall-background); background-repeat: repeat-y; background-position: -1px center; } .waterfall-marker-container[is-spacer] { pointer-events: none; } .waterfall-marker-container:not([is-spacer]):nth-child(2n) { background-color: #403400; } .waterfall-marker-container:hover { background-color: #FFCF00 !important; } .waterfall-marker-item { overflow: hidden; } .waterfall-sidebar { -moz-border-end: 1px solid var(--theme-splitter-color); } .waterfall-marker-container:hover > .waterfall-sidebar { background-color: transparent; } .waterfall-header-name { padding: 2px 4px; font-size: 90%; } .waterfall-header-tick { width: 100px; font-size: 9px; transform-origin: left center; color: var(--theme-body-color); } .waterfall-header-tick:not(:first-child) { -moz-margin-start: -100px !important; /* Don't affect layout. */ } .waterfall-marker-bullet { width: 8px; height: 8px; -moz-margin-start: 8px; -moz-margin-end: 6px; border-radius: 1px; } .waterfall-marker-name { font-size: 95%; padding-bottom: 1px !important; } .waterfall-marker-bar { height: 9px; transform-origin: left center; border-radius: 1px; } .waterfall-marker-container.selected > .waterfall-sidebar, .waterfall-marker-container.selected > .waterfall-marker-item { background-color: var(--theme-selection-background); color: var(--theme-selection-color); } #waterfall-details { -moz-padding-start: 8px; -moz-padding-end: 8px; padding-top: 2vh; overflow: auto; min-width: 50px; } .marker-details-bullet { width: 8px; height: 8px; border-radius: 1px; } menuitem.marker-color-graphs-purple:before, .marker-color-graphs-purple { background-color: var(--theme-graphs-purple); } menuitem.marker-color-graphs-grey:before, .marker-color-graphs-grey{ background-color: var(--theme-graphs-grey); } menuitem.marker-color-graphs-green:before, .marker-color-graphs-green { background-color: var(--theme-graphs-green); } menuitem.marker-color-graphs-yellow:before, .marker-color-graphs-yellow { background-color: var(--theme-graphs-yellow); } menuitem.marker-color-graphs-red:before, .marker-color-graphs-red { background-color: var(--theme-graphs-red); } menuitem.marker-color-graphs-blue:before, .marker-color-graphs-blue { background-color: var(--theme-graphs-blue); } #waterfall-details > * { padding-top: 3px; } .marker-details-labelname { -moz-padding-end: 4px; } .marker-details-type { font-size: 1.2em; font-weight: bold; } .marker-details-duration { font-weight: bold; } /* Recording items */ .recording-item { padding: 4px; } .recording-item-title { font-size: 110%; } .recording-item-footer { padding-top: 4px; font-size: 90%; } .recording-item-save { text-decoration: underline; cursor: pointer; } .recording-item-duration, .recording-item-save { color: var(--theme-body-color-alt); } #recordings-list .selected label { /* Text inside a selected item should not be custom colored. */ color: inherit !important; } /* Profile call tree */ .call-tree-cells-container { /* Hack: force hardware acceleration */ transform: translateZ(1px); overflow: auto; } .call-tree-cells-container[categories-hidden] .call-tree-category { display: none; } .call-tree-header[type="duration"], .call-tree-cell[type="duration"], .call-tree-header[type="self-duration"], .call-tree-cell[type="self-duration"] { width: 9em; } .call-tree-header[type="percentage"], .call-tree-cell[type="percentage"], .call-tree-header[type="self-percentage"], .call-tree-cell[type="self-percentage"] { width: 6em; } .call-tree-header[type="samples"], .call-tree-cell[type="samples"] { width: 5em; } .call-tree-header[type="function"], .call-tree-cell[type="function"] { -moz-box-flex: 1; } .call-tree-header, .call-tree-cell { -moz-box-align: center; overflow: hidden; padding: 1px 4px; } .call-tree-header:not(:last-child), .call-tree-cell:not(:last-child) { -moz-border-end: 1px solid; } .call-tree-header, .call-tree-cell { -moz-border-end-color: var(--theme-splitter-color); color: var(--theme-body-color); } .call-tree-header:not(:last-child) { text-align: center; } .call-tree-cell:not(:last-child) { text-align: end; } .call-tree-header { background-color: var(--theme-toolbar-background); } .call-tree-item:last-child:not(:focus) { border-bottom: 1px solid var(--theme-splitter-color); } .call-tree-item:nth-child(2n) { background-color: var(--theme-contrast-background); } .call-tree-item:hover { background-color: var(--theme-hover-background); color: var(--theme-hover-color); } .call-tree-item:focus { background-color: var(--theme-selection-background); } .call-tree-item:focus label { color: var(--theme-selection-color); } .call-tree-item:focus .call-tree-cell { -moz-border-end-color: var(--theme-splitter-color); } .call-tree-item:not([origin="content"]) .call-tree-name, .call-tree-item:not([origin="content"]) .call-tree-url, call-tree-item:not([origin="content"]) .call-tree-line { /* Style chrome and non-JS nodes differently. */ opacity: 0.6; } .call-tree-url { -moz-margin-start: 4px !important; cursor: pointer; } .call-tree-url:hover { text-decoration: underline; } .call-tree-url { color: var(--theme-text-blue); } .call-tree-line { color: var(--theme-contrast-border); } .call-tree-host { -moz-margin-start: 8px !important; font-size: 90%; } .call-tree-host { color: ver(--theme-body-color); } .call-tree-url[value=""], .call-tree-line[value=""], .call-tree-host[value=""] { display: none; } .call-tree-zoom { -moz-appearance: none; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: 11px; min-width: 11px; -moz-margin-start: 8px !important; cursor: zoom-in; opacity: 0; } .call-tree-zoom { background-image: url(magnifying-glass.png); } @media (min-resolution: 1.25dppx) { .call-tree-zoom { background-image: url(magnifying-glass@2x.png); } } .call-tree-item:hover .call-tree-zoom { transition: opacity 0.3s ease-in; opacity: 1; } .call-tree-item:hover .call-tree-zoom:hover { opacity: 0; } .call-tree-category { transform: scale(0.75); transform-origin: center right; } /** * JIT View */ #jit-optimizations-view { width: 350px; overflow-x: hidden; overflow-y: auto; min-width: 200px; } /* override default styles for tree widget */ #jit-optimizations-view .tree-widget-empty-text { font-size: inherit; padding: 0px; margin: 8px; } #jit-optimizations-view:not(.empty) .tree-widget-empty-text { display: none; } #jit-optimizations-toolbar { height: 18px; min-height: 0px; /* override .devtools-toolbar min-height */ } .jit-optimizations-title { margin: 0px 4px; font-weight: 600; } #jit-optimizations-raw-view { font-size: 90%; } /* override default .tree-widget-item line-height */ #jit-optimizations-raw-view .tree-widget-item { line-height: 20px !important; display: block; overflow: hidden; } #jit-optimizations-raw-view .tree-widget-item[level="1"] { font-weight: 600; } #jit-optimizations-view .opt-outcome::before { content: "→"; margin: 4px 0px; color: var(--theme-body-color); } #jit-optimizations-view .theme-selected .opt-outcome::before { color: var(--theme-selection-color); } #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] { color: var(--theme-highlight-green); } #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] { color: var(--theme-highlight-red); } #jit-optimizations-view .tree-widget-container { -moz-margin-end: 0px; } #jit-optimizations-view .tree-widget-container > li, #jit-optimizations-view .tree-widget-children > li { overflow: hidden; } .opt-line::before { content: ":"; color: var(--theme-highlight-orange); } .theme-selected .opt-line::before { color: var(--theme-selection-color); } .opt-line.header-line::before { color: var(--theme-body-color); } #jit-optimizations-view.empty .opt-line.header-line::before { display: none; } .opt-url { -moz-margin-start: 4px !important; } .opt-url:hover { text-decoration: underline; } .opt-url.debugger-link { cursor: pointer; } #jit-optimizations-view .opt-icon::before { content: ""; background-image: url(chrome://browser/skin/devtools/webconsole.png); background-repeat: no-repeat; background-size: 48px 40px; margin: 5px 6px 0 0; width: 8px; height: 8px; max-height: 8px; display: inline-block; } #jit-optimizations-view .opt-icon[severity=warning]::before { background-position: -16px -16px; } @media (min-resolution: 1.25dppx) { #jit-optimizations-view .opt-icon::before { background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); } } /** * Configurable Options * * Elements can be tagged with a class and visibility is controlled via a preference being * applied or removed. */ /** * devtools.performance.ui.experimental */ menuitem.experimental-option::before { content: ""; background-image: url(chrome://browser/skin/devtools/webconsole.png); background-repeat: no-repeat; background-size: 48px 40px; margin: 2px 5px 0 0; width: 8px; height: 8px; max-height: 8px; display: inline-block; background-position: -16px -16px; } @media (min-resolution: 1.25dppx) { menuitem.experimental-option::before { background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); } } #performance-options-menupopup:not(.experimental-enabled) .experimental-option, #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { display: none; }