/* 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: 1px solid; border-radius: 1px; background-color: var(--bullet-bg); border-color: var(--bullet-border); } /* 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; } /* Overview Panel */ .record-button { list-style-image: url(profiler-stopwatch-tbutton.svg); } #empty-notice > .record-button, .record-button:hover, .record-button:hover:active { list-style-image: url(profiler-stopwatch.svg); } .record-button[checked] { list-style-image: url(profiler-stopwatch-checked.svg); } .record-button[locked] { pointer-events: none; } .record-button .button-icon { margin: 0; } .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-url { -moz-margin-start: 4px !important; cursor: pointer; } .call-tree-url:hover { text-decoration: underline; } .call-tree-url { color: var(--theme-highlight-blue); } .call-tree-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-name[value=""], .call-tree-url[value=""], .call-tree-line[value=""], .call-tree-column[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; } .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: 2dppx) { .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: 1px solid; border-radius: 1px; } .waterfall-marker-name { font-size: 95%; padding-bottom: 1px !important; } .waterfall-marker-bar { height: 9px; border: 1px solid; border-radius: 1px; transform-origin: left center; } .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-marker-container.selected .waterfall-marker-bullet, .waterfall-marker-container.selected .waterfall-marker-bar { border-color: initial !important; } .waterfall-marker-location { color: #3333FF; } .waterfall-marker-location:hover, .waterfall-marker-location:focus { text-decoration: underline; } #waterfall-details { -moz-padding-start: 8px; -moz-padding-end: 8px; padding-top: 2vh; overflow: auto; } .marker-details-bullet { width: 8px; height: 8px; border: 1px solid; border-radius: 1px; } #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: 2dppx) { .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; }