diff options
Diffstat (limited to 'devtools/client/themes/performance.css')
| -rw-r--r-- | devtools/client/themes/performance.css | 794 |
1 files changed, 794 insertions, 0 deletions
diff --git a/devtools/client/themes/performance.css b/devtools/client/themes/performance.css new file mode 100644 index 000000000..5ed3b6352 --- /dev/null +++ b/devtools/client/themes/performance.css @@ -0,0 +1,794 @@ +/* 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 { + --cell-border-color: rgba(255,255,255,0.15); + --cell-border-color-light: rgba(255,255,255,0.1); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(86, 117, 185, 0.15); + --row-hover-background-color: rgba(86, 117, 185, 0.25); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --cell-border-color-light: rgba(0,0,0,0.1); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); +} + +.theme-firebug { + --cell-border-color: rgba(0,0,0,0.15); + --cell-border-color-light: rgba(0,0,0,0.1); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); +} + +/* + * DE-XUL: Set a sidebar width because inline XUL components will cause the flex + * to overflow if dynamically sized. + */ +.performance-tool { + --sidebar-width: 185px; +} + +/** + * 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: url(chrome://devtools/skin/images/filter.svg); +} + +#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 */ + +#clear-button::before { + background-image: var(--clear-icon-url); +} + +#main-record-button::before { + background-image: url(images/profiler-stopwatch.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; +} + +.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; +} + +/* Sidebar & recording items */ + +#recordings-pane { + border-inline-end: 1px solid var(--theme-splitter-color); + width: var(--sidebar-width); +} + +#recording-controls-mount { + width: var(--sidebar-width); +} + +#recording-controls-mount > div { + width: var(--sidebar-width); +} + +/* + * DE-XUL: The height of the toolbar is not correct without tweaking the line-height. + */ +#recordings-pane .devtools-toolbar { + line-height: 0; +} + +.theme-sidebar { + position: relative; +} + +/** + * DE-XUL: This is probably only needed for the html:div inside of a vbox. + */ +#recordings-list > div { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +.recording-list { + width: var(--sidebar-width); + min-width: var(--sidebar-width); + margin: 0; + padding: 0; + background-color: var(--theme-sidebar-background); + border-inline-end: 1px solid var(--theme-splitter-color); +} + +.recording-list-item { + display: flex; + flex-direction: column; + color: var(--theme-body-color); + border-bottom: 1px solid rgba(128,128,128,0.15); + padding: 8px; + cursor: default; +} + +.recording-list-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.recording-list-empty { + padding: 8px; +} + +.recording-list-item-label { + font-size: 110%; +} + +.recording-list-item-footer { + padding-top: 4px; + font-size: 90%; + display: flex; + justify-content: space-between; +} + +.recording-list-item-save { + background: none; + border: none; + text-decoration: underline; + cursor: pointer; + font-size: 90%; + padding:0; +} + +.recording-list-item-duration, +.recording-list-item-save { + color: var(--theme-body-color-alt); +} + +.recording-list-item.selected .recording-list-item-duration, +.recording-list-item.selected .recording-list-item-save { + color: var(--theme-body-color-alt); + color: var(--theme-selection-color); +} + +#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 markers tree + */ + +#waterfall-tree { + /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */ + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; +} + +.waterfall-markers { + /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */ + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; +} + +.waterfall-header { + display: flex; +} + +.waterfall-header-ticks { + display: flex; + flex: auto; + align-items: center; + 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 <canvas> in js. */ + /* @see devtools/client/performance/modules/widgets/waterfall-ticks.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; +} + +/** + * Markers waterfall breakdown + */ + +.waterfall-markers .tree { + /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */ + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; + overflow-x: hidden; + overflow-y: auto; + --waterfall-tree-row-height: 15px; +} + +.waterfall-markers .tree-node { + display: flex; + height: var(--waterfall-tree-row-height); + line-height: var(--waterfall-tree-row-height); +} + +.waterfall-tree-item { + display: flex; + flex: auto; +} + +.theme-light .waterfall-markers .tree-node:not([data-depth="0"]) { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 2px, + rgba(0,0,0,0.025) 2px, + rgba(0,0,0,0.025) 4px + ); +} + +.theme-dark .waterfall-markers .tree-node:not([data-depth="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 + ); +} + +.theme-light .waterfall-tree-item[data-expandable] .waterfall-marker-bullet, +.theme-light .waterfall-tree-item[data-expandable] .waterfall-marker-bar { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 5px, + rgba(255,255,255,0.35) 5px, + rgba(255,255,255,0.35) 10px + ); +} + +.theme-dark .waterfall-tree-item[data-expandable] .waterfall-marker-bullet, +.theme-dark .waterfall-tree-item[data-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-markers .tree-node[data-expanded], +.waterfall-markers .tree-node:not([data-depth="0"]) + .tree-node[data-depth="0"] { + box-shadow: 0 -1px var(--cell-border-color-light); +} + +.tree-node-odd .waterfall-marker { + background-color: var(--row-alt-background-color); +} + +.waterfall-markers .tree-node:hover { + background-color: var(--row-hover-background-color); +} + +.waterfall-markers .tree-node-last { + border-bottom: 1px solid var(--cell-border-color); +} + +.waterfall-tree-item.focused { + background-color: var(--theme-selection-background); +} + +/** + * Marker left sidebar + */ + +.waterfall-sidebar { + display: flex; + align-items: center; + box-sizing: border-box; + border-inline-end: 1px solid var(--cell-border-color); +} + +.waterfall-tree-item > .waterfall-sidebar:hover, +.waterfall-tree-item:hover > .waterfall-sidebar, +.waterfall-tree-item.focused > .waterfall-sidebar { + background: transparent; +} + +.waterfall-tree-item.focused > .waterfall-sidebar { + color: var(--theme-selection-color); +} + +.waterfall-marker-bullet { + width: 8px; + height: 8px; + margin-inline-start: 8px; + margin-inline-end: 6px; + border-radius: 1px; + box-sizing: border-box; +} + +.waterfall-marker-name { + font-size: 95%; + padding-bottom: 1px !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/** + * Marker timebar + */ + +.waterfall-marker { + display: flex; + flex: auto; + overflow: hidden; +} + +.waterfall-marker-wrap { + display: flex; + align-items: center; + transform-origin: left center; +} + +.waterfall-marker-bar { + height: 9px; + border-radius: 1px; + box-sizing: border-box; +} + +/** + * OTMT markers + */ + +.waterfall-tree-item[data-otmt=true] .waterfall-marker-bullet, +.waterfall-tree-item[data-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; +} +.theme-light menuitem.experimental-option::before { + background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); +} + +#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; +} |