diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/devtools/performance.css')
| -rw-r--r-- | arc-firefox-theme/chrome/browser/devtools/performance.css | 601 |
1 files changed, 167 insertions, 434 deletions
diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css index 8eafa36..198e56a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance.css +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -1,3 +1,7 @@ +/* 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, @@ -6,7 +10,6 @@ /* 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(29,79,115,0.15); --row-hover-background-color: rgba(29,79,115,0.25); @@ -14,7 +17,6 @@ .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); @@ -22,8 +24,13 @@ /* Toolbar */ -#performance-toolbar-control-other { - -moz-padding-end: 5px; +#performance-toolbar > tabs, +#performance-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +#performance-toolbar-controls-detail-views > toolbarbutton { + min-width: 0; } #performance-toolbar-controls-detail-views .toolbarbutton-text { @@ -31,167 +38,69 @@ -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 */ -/* Details panel buttons */ - -#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); +#performance-view .notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; } -#select-optimizations-view { - list-style-image: url(profiler-stopwatch.svg); +#performance-view .notice-container button { + min-width: 30px; + min-height: 28px; + margin: 0; } -/* Recording buttons */ +/* Overview Panel */ -#main-record-button { +.record-button { list-style-image: url(profiler-stopwatch.svg); } -#main-record-button[checked] { +.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; +.record-button .button-icon { + margin: 0; } -.realtime-disabled-message, -.realtime-disabled-on-e10s-message { +.record-button .button-text { 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; -} +/* Details Panel */ -.buffer-status-message, -.buffer-status-message-full { - display: none; -} - -#details-pane-container[buffer-status="in-progress"] .buffer-status-message { - display: initial; - opacity: 0.5; +#select-waterfall-view { + list-style-image: url(performance-icons.svg#details-waterfall); } -#details-pane-container[buffer-status="full"] .buffer-status-message { - display: initial; - color: var(--theme-highlight-red); - font-weight: bold; - opacity: 1; +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); } -#details-pane-container[buffer-status="full"] .buffer-status-message-full { - display: initial; +#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[allocations-hidden] .call-tree-cell[type="allocations"], +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], .call-tree-cells-container[categories-hidden] .call-tree-category { display: none; } @@ -221,11 +130,11 @@ 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"] { - width: 9vw; +.call-tree-header[type="allocations"], +.call-tree-cell[type="allocations"], +.call-tree-header[type="self-allocations"], +.call-tree-cell[type="self-allocations"] { + width: 7vw; } .call-tree-header[type="function"], @@ -260,7 +169,7 @@ background-color: var(--theme-tab-toolbar-background); } -.call-tree-item:last-child { +.call-tree-item:last-child:not(:focus) { border-bottom: 1px solid var(--cell-border-color); } @@ -276,7 +185,7 @@ background-color: var(--theme-selection-background); } -.call-tree-item:focus description { +.call-tree-item:focus label { color: var(--theme-selection-color) !important; } @@ -292,11 +201,8 @@ opacity: 0.6; } -.call-tree-name { - -moz-margin-end: 4px !important; -} - .call-tree-url { + -moz-margin-start: 4px !important; cursor: pointer; } @@ -304,11 +210,11 @@ text-decoration: underline; } -.call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url { +.call-tree-url { color: var(--theme-highlight-blue); } -.call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line { +.call-tree-line { color: var(--theme-highlight-orange); } @@ -323,131 +229,127 @@ color: var(--theme-content-color2); } -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; +.call-tree-name[value=""], +.call-tree-url[value=""], +.call-tree-line[value=""], +.call-tree-column[value=""], +.call-tree-host[value=""] { + display: none; } -/** - * Waterfall ticks header - */ +.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; +} -.waterfall-header-ticks { - overflow: hidden; +.theme-dark .call-tree-zoom { + background-image: url(magnifying-glass.png); } -.waterfall-header-name { - padding: 2px 4px; - font-size: 90%; +.theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light.png); } -.waterfall-header-tick { - width: 100px; - font-size: 9px; - transform-origin: left center; - color: var(--theme-body-color); +@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); + } } -.waterfall-header-tick:not(:first-child) { - -moz-margin-start: -100px !important; /* Don't affect layout. */ +.call-tree-item:hover .call-tree-zoom { + transition: opacity 0.3s ease-in; + opacity: 1; } -.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; +.call-tree-item:hover .call-tree-zoom:hover { + opacity: 0; +} + +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; } /** - * Markers waterfall breakdown + * Details Waterfall Styles */ -#waterfall-breakdown { +.waterfall-list-contents { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); overflow-x: hidden; overflow-y: auto; } -.theme-light .waterfall-tree-item:not([level="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 - ); +.waterfall-header-contents { + overflow-x: hidden; } -.theme-dark .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-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; } -.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bullet, -.theme-light .waterfall-tree-item[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 - ); +.waterfall-marker-container[is-spacer] { + pointer-events: none; } -.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bullet, -.theme-dark .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 - ); +.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,0.03); } -.waterfall-tree-item[expanded], -.waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] { - box-shadow: 0 -1px var(--cell-border-color-light); +.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); } -.waterfall-tree-item:nth-child(2n) > .waterfall-marker { - background-color: var(--row-alt-background-color); +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; } -.waterfall-tree-item:hover { - background-color: var(--row-hover-background-color); +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !important; } -.waterfall-tree-item:last-child { - border-bottom: 1px solid var(--cell-border-color); +.waterfall-marker-item { + overflow: hidden; } -.waterfall-tree-item:focus { - background-color: var(--theme-selection-background); +.waterfall-sidebar { + -moz-border-end: 1px solid var(--theme-splitter-color); } -.waterfall-tree-item:focus description { - color: var(--theme-selection-color) !important; +.waterfall-marker-container:hover > .waterfall-sidebar { + background-color: transparent; } -/** - * Marker left sidebar - */ +.waterfall-header-name { + padding: 2px 4px; + font-size: 90%; +} -.waterfall-sidebar { - -moz-border-end: 1px solid var(--cell-border-color); +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; + color: var(--theme-body-color); } -.waterfall-tree-item > .waterfall-sidebar:hover, -.waterfall-tree-item:hover > .waterfall-sidebar, -.waterfall-tree-item:focus > .waterfall-sidebar { - background: transparent; +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ } .waterfall-marker-bullet { @@ -455,6 +357,7 @@ height: 8px; -moz-margin-start: 8px; -moz-margin-end: 6px; + border: 1px solid; border-radius: 1px; } @@ -463,48 +366,51 @@ padding-bottom: 1px !important; } -/** - * Marker timebar - */ - -.waterfall-marker { - overflow: hidden; -} - .waterfall-marker-bar { height: 9px; - transform-origin: left center; + border: 1px solid; border-radius: 1px; + transform-origin: left center; } -.waterfall-marker > .theme-twisty { - /* Don't affect layout. */ - width: 14px; - -moz-margin-end: -14px; +.waterfall-marker-container.selected > .waterfall-sidebar, +.waterfall-marker-container.selected > .waterfall-marker-item { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } -/** - * Marker details view - */ +.waterfall-marker-container.selected .waterfall-marker-bullet, +.waterfall-marker-container.selected .waterfall-marker-bar { + border-color: initial !important; +} + +.waterfall-marker-location { + color: -moz-nativehyperlinktext; +} + +.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; - min-width: 50px; -} - -#waterfall-details > * { - padding-top: 3px; } .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; } @@ -518,205 +424,32 @@ font-weight: bold; } -/** - * Marker colors - */ +/* Recording items */ -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); -} - -/** - * 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 */ +.recording-item { + padding: 4px; } -.jit-optimizations-title { - margin: 0px 4px; - font-weight: 600; +.recording-item-title { + font-size: 110%; } -#jit-optimizations-raw-view { +.recording-item-footer { + padding-top: 4px; 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 { +.recording-item-save { text-decoration: underline; -} -.opt-url.debugger-link { - cursor: pointer; -} - -.opt-icon::before { - content: ""; - background-image: url(chrome://browser/skin/devtools/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; -} -.theme-light .opt-icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); -} -.opt-icon[severity=warning]::before { - background-position: -24px -24px; -} -.opt-icon[type=linkable]::before { cursor: pointer; } -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://browser/skin/devtools/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://browser/skin/devtools/webconsole.svg#light-icons); +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); } -#performance-options-menupopup:not(.experimental-enabled) .experimental-option, -#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { - display: none; +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; } |