/* 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; --filter-image: url(chrome://devtools/skin/images/timeline-filter.svg); } /** * 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 { padding-inline-end: 5px; } #performance-toolbar-controls-detail-views .toolbarbutton-text { padding-inline-start: 4px; padding-inline-end: 8px; } #filter-button { list-style-image: var(--filter-image); } #performance-filter-menupopup > menuitem .menu-iconic-left::after { content: ""; display: block; width: 8px; height: 8px; margin: 0 8px; border-radius: 1px; } /* Details panel buttons */ #select-waterfall-view { list-style-image: url(images/performance-icons.svg#details-waterfall); } #select-js-calltree-view, #select-memory-calltree-view { list-style-image: url(images/performance-icons.svg#details-call-tree); } #select-js-flamegraph-view, #select-memory-flamegraph-view { list-style-image: url(images/performance-icons.svg#details-flamegraph); } #select-optimizations-view { list-style-image: url(images/profiler-stopwatch.svg); } /* Recording buttons */ #recordings-controls { background-color: #9C9CFF; } #clear-button::before { background-image: var(--clear-icon-url); } #main-record-button::before { background-image: url(images/profiler-stopwatch-tbutton.svg); } #import-button::before { background-image: url(images/import.svg); } #main-record-button .button-icon, #import-button .button-icon { margin: 0; } #main-record-button .button-text, #import-button .button-text { display: none; } #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 */ #recordings-pane { border-inline-end: 1px solid var(--theme-splitter-color); } #recordings-list { max-width: 300px; } .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-body-background); color: var(--theme-body-color); padding-bottom: 20vh; } .tool-disabled-message { text-align: center; } .console-profile-recording-notice, .console-profile-stop-notice { overflow: hidden; } .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, #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"] { min-width: 6vw; width: 6vw; } .call-tree-header[type="percentage"], .call-tree-cell[type="percentage"], .call-tree-header[type="self-percentage"], .call-tree-cell[type="self-percentage"] { min-width: 5vw; width: 5vw; } .call-tree-header[type="samples"], .call-tree-cell[type="samples"] { min-width: 4.5vw; 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"] { min-width: 6vw; width: 6vw; } .call-tree-header, .call-tree-cell { -moz-box-align: center; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; color: var(--theme-body-color); border-inline-end-color: var(--cell-border-color); } .call-tree-header:not(:last-child), .call-tree-cell:not(:last-child) { border-inline-end-width: 1px; border-inline-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 .call-tree-cell, .call-tree-item .call-tree-cell[type=function] description { -moz-user-select: text; /* so that optimizations view doesn't break the lines in call tree */ white-space: nowrap; } .call-tree-item .call-tree-cell::-moz-selection, .call-tree-item .call-tree-cell[type=function] description::-moz-selection { background-color: var(--theme-highlight-orange); } .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 { border-inline-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 { margin-inline-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 { margin-inline-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) { margin-inline-start: -100px !important; /* Don't affect layout. */ } .waterfall-background-ticks { /* Background created on a in js. */ /* @see devtools/client/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 { border-inline-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; margin-inline-start: 8px; margin-inline-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; margin-inline-end: -14px; } /** * OTMT markers */ .waterfall-tree-item[otmt=true] .waterfall-marker-bullet, .waterfall-tree-item[otmt=true] .waterfall-marker-bar { background-color: transparent; border-width: 1px; border-style: solid; } /** * Marker details view */ #waterfall-details { padding-inline-start: 8px; padding-inline-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-name-label { padding-inline-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-full-red .menu-iconic-left::after, .marker-color-graphs-full-red { background-color: var(--theme-graphs-full-red); border-color: var(--theme-graphs-full-red); } menuitem.marker-color-graphs-full-blue .menu-iconic-left::after, .marker-color-graphs-full-blue { background-color: var(--theme-graphs-full-blue); border-color: var(--theme-graphs-full-blue); } menuitem.marker-color-graphs-green .menu-iconic-left::after, .marker-color-graphs-green { background-color: var(--theme-graphs-green); border-color: var(--theme-graphs-green); } menuitem.marker-color-graphs-blue .menu-iconic-left::after, .marker-color-graphs-blue { background-color: var(--theme-graphs-blue); border-color: var(--theme-graphs-blue); } menuitem.marker-color-graphs-bluegrey .menu-iconic-left::after, .marker-color-graphs-bluegrey { background-color: var(--theme-graphs-bluegrey); border-color: var(--theme-graphs-bluegrey); } menuitem.marker-color-graphs-purple .menu-iconic-left::after, .marker-color-graphs-purple { background-color: var(--theme-graphs-purple); border-color: var(--theme-graphs-purple); } menuitem.marker-color-graphs-yellow .menu-iconic-left::after, .marker-color-graphs-yellow { background-color: var(--theme-graphs-yellow); border-color: var(--theme-graphs-yellow); } menuitem.marker-color-graphs-orange .menu-iconic-left::after, .marker-color-graphs-orange { background-color: var(--theme-graphs-orange); border-color: var(--theme-graphs-orange); } menuitem.marker-color-graphs-red .menu-iconic-left::after, .marker-color-graphs-red { background-color: var(--theme-graphs-red); border-color: var(--theme-graphs-red); } menuitem.marker-color-graphs-grey .menu-iconic-left::after, .marker-color-graphs-grey{ background-color: var(--theme-graphs-grey); border-color: var(--theme-graphs-grey); } /** * 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/images/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; } /* for call tree */ description.opt-icon { margin: 0px 0px 0px 0px; } description.opt-icon::before { margin: 1px 4px 0px 0px; }