/* 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; --cell-border-color-light: #A09090; --focus-cell-border-color: #9C9CFF; --row-alt-background-color: #403400; --row-hover-background-color: #544400; } /** * A generic class to hide elements, replacing the `element.hidden` attribute * that we use to hide elements that can later be active */ .hidden { display: none; width: 0px; height: 0px; } /* Toolbar */ #performance-toolbar-control-other { -moz-padding-end: 5px; } #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; } /* Details panel buttons */ #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); } #select-optimizations-view { list-style-image: url(profiler-stopwatch.svg); } /* Recording buttons */ #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 .button-icon { margin: 0; } #main-record-button .button-text { display: none; } .notice-container .record-button { padding: 5px !important; } .notice-container .record-button[checked], .notice-container .record-button[checked] { color: var(--theme-selection-color) !important; background: var(--theme-selection-background) !important; } .record-button[locked] { pointer-events: none; opacity: 0.5; } /* Sidebar & 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; } /* Recording notices */ .notice-container { font-size: 120%; background-color: var(--theme-toolbar-background); color: var(--theme-body-color); padding-bottom: 20vh; } .console-profile-command { font-family: monospace; margin: 3px 2px; } .realtime-disabled-message, .realtime-disabled-on-e10s-message { display: none; } #performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { display: initial; opacity: 0.5; } #performance-view[e10s="unsupported"] .realtime-disabled-message { display: initial; opacity: 0.5; } .buffer-status-message, .buffer-status-message-full { display: none; } #details-pane-container[buffer-status="in-progress"] .buffer-status-message { display: initial; opacity: 0.5; } #details-pane-container[buffer-status="full"] .buffer-status-message { display: initial; color: var(--theme-highlight-red); font-weight: bold; opacity: 1; } #details-pane-container[buffer-status="full"] .buffer-status-message-full { display: initial; } /* Profile call tree */ .call-tree-cells-container { 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="count"], .call-tree-cell[type="count"], .call-tree-header[type="self-count"], .call-tree-cell[type="self-count"], .call-tree-header[type="size"], .call-tree-cell[type="size"], .call-tree-header[type="self-size"], .call-tree-cell[type="self-size"], .call-tree-header[type="count-percentage"], .call-tree-cell[type="count-percentage"], .call-tree-header[type="self-count-percentage"], .call-tree-cell[type="self-count-percentage"], .call-tree-header[type="size-percentage"], .call-tree-cell[type="size-percentage"], .call-tree-header[type="self-size-percentage"], .call-tree-cell[type="self-size-percentage"] { width: 6vw; } .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 { 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 description { 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-category { transform: scale(0.75); transform-origin: center right; } /** * Waterfall ticks header */ .waterfall-header-ticks { overflow: hidden; } .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-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; } /** * Markers waterfall breakdown */ #waterfall-breakdown { overflow-x: hidden; overflow-y: auto; } .waterfall-tree-item:not([level="0"]) { background-image: repeating-linear-gradient( -45deg, transparent 0px, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 4px ); } .waterfall-tree-item[expandable] .waterfall-marker-bullet, .waterfall-tree-item[expandable] .waterfall-marker-bar { background-image: repeating-linear-gradient( -45deg, transparent 0px, transparent 5px, rgba(0,0,0,0.35) 5px, rgba(0,0,0,0.35) 10px ); } .waterfall-tree-item[expanded], .waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] { box-shadow: 0 -1px var(--cell-border-color-light); } .waterfall-tree-item:nth-child(2n) > .waterfall-marker { background-color: var(--row-alt-background-color); } .waterfall-tree-item:hover { background-color: var(--row-hover-background-color); } .waterfall-tree-item:last-child { border-bottom: 1px solid var(--cell-border-color); } .waterfall-tree-item:focus { background-color: var(--theme-selection-background); } .waterfall-tree-item:focus description { color: var(--theme-selection-color) !important; } /** * Marker left sidebar */ .waterfall-sidebar { -moz-border-end: 1px solid var(--cell-border-color); } .waterfall-tree-item > .waterfall-sidebar:hover, .waterfall-tree-item:hover > .waterfall-sidebar, .waterfall-tree-item:focus > .waterfall-sidebar { background: transparent; } .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; } /** * Marker timebar */ .waterfall-marker { overflow: hidden; } .waterfall-marker-bar { height: 9px; transform-origin: left center; border-radius: 1px; } .waterfall-marker > .theme-twisty { /* Don't affect layout. */ width: 14px; -moz-margin-end: -14px; } /** * Marker details view */ #waterfall-details { -moz-padding-start: 8px; -moz-padding-end: 8px; padding-top: 2vh; overflow: auto; min-width: 50px; } #waterfall-details > * { padding-top: 3px; } .marker-details-bullet { width: 8px; height: 8px; border-radius: 1px; } .marker-details-labelname { -moz-padding-end: 4px; } .marker-details-type { font-size: 1.2em; font-weight: bold; } .marker-details-duration { font-weight: bold; } .marker-details-customcontainer .custom-button { padding: 2px 5px; border-width: 1px; } /** * Marker colors */ menuitem.marker-color-graphs-green:before, .marker-color-graphs-green { background-color: var(--theme-graphs-green); } menuitem.marker-color-graphs-blue:before, .marker-color-graphs-blue { background-color: var(--theme-graphs-blue); } menuitem.marker-color-graphs-bluegrey:before, .marker-color-graphs-bluegrey { background-color: var(--theme-graphs-bluegrey); } menuitem.marker-color-graphs-purple:before, .marker-color-graphs-purple { background-color: var(--theme-graphs-purple); } 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-grey:before, .marker-color-graphs-grey{ background-color: var(--theme-graphs-grey); } /* 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-name { -moz-margin-end: 4px !important; } .call-tree-url { 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-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.1dppx) { .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; } #optimizations-graph { height: 30px; } #jit-optimizations-view.empty #optimizations-graph { display: none !important; } /* 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; } .opt-icon::before { content: ""; background-image: url(chrome://devtools/skin/webconsole.svg); background-repeat: no-repeat; background-size: 72px 60px; /* show grey "i" bubble by default */ background-position: -36px -36px; width: 12px; height: 12px; display: inline-block; max-height: 12px; } #jit-optimizations-view .opt-icon::before { margin: 5px 6px 0 0; } description.opt-icon { margin: 0px 0px 0px 0px; } description.opt-icon::before { margin: 1px 4px 0px 0px; } .opt-icon[severity=warning]::before { background-position: -24px -24px; } ul.frames-list { list-style-type: none; padding: 0px; margin: 0px; } ul.frames-list li { cursor: pointer; } ul.frames-list li.selected { background-color: var(--theme-selection-background); color: var(--theme-selection-color); } /** * 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://devtools/skin/webconsole.svg); background-repeat: no-repeat; background-size: 72px 60px; width: 12px; height: 12px; display: inline-block; background-position: -24px -24px; margin: 2px 5px 0 0; max-height: 12px; } #performance-options-menupopup:not(.experimental-enabled) .experimental-option, #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { display: none; }