diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/devtools/performance.css')
-rw-r--r-- | arc-firefox-theme/chrome/browser/devtools/performance.css | 695 |
1 files changed, 695 insertions, 0 deletions
diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css new file mode 100644 index 0000000..50c375c --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -0,0 +1,695 @@ +/* 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/. */ + +/* 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); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(29,79,115,0.15); + --row-hover-background-color: rgba(29,79,115,0.25); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --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); +} + +/* 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[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.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-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); +} + +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(performance-icons.svg#details-flamegraph); +} + +/* 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 <canvas> 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; +} + +.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,0.03); +} + +.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); +} + +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; +} + +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !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; +} + +/** + * 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; +} |