X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fperformance.css;h=e36deb7ff115261d6fbb016773ed861b82a93dec;hp=98acfe047b5ecb9b75ceca193635a6491facc3b5;hb=5497455b20bc5f74484137eae68e957a9d3ef722;hpb=b3bf08b110943f4abc9642b613f0dcb078c22b0b diff --git a/LCARStrek/browser/devtools/performance.css b/LCARStrek/browser/devtools/performance.css index 98acfe04..e36deb7f 100644 --- a/LCARStrek/browser/devtools/performance.css +++ b/LCARStrek/browser/devtools/performance.css @@ -19,6 +19,10 @@ -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; } @@ -28,6 +32,52 @@ -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-radius: 1px; +} + /* Recording Notice */ #performance-view .notice-container { @@ -43,25 +93,96 @@ margin: 0; } -/* Overview Panel */ +#performance-view .notice-container vbox { + text-align: center; +} -.record-button { - list-style-image: url(profiler-stopwatch.svg); +.console-profile-command { + font-family: monospace; + margin: 3px 2px; } -.record-button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); +#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); } .record-button[locked] { pointer-events: none; + opacity: 0.5; } -.record-button .button-icon { +#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-tbutton.svg); +} + +#empty-notice > .record-button, +#main-record-button:hover, +#main-record-button:hover:active { + list-style-image: url(profiler-stopwatch.svg); +} + +#main-record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#main-record-button .button-icon { margin: 0; } -.record-button .button-text { +#main-record-button .button-text { display: none; } @@ -71,16 +192,40 @@ 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 { @@ -89,8 +234,6 @@ 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; } @@ -124,7 +267,7 @@ .call-tree-cell[type="allocations"], .call-tree-header[type="self-allocations"], .call-tree-cell[type="self-allocations"] { - width: 7vw; + width: 9vw; } .call-tree-header[type="function"], @@ -191,8 +334,11 @@ opacity: 0.6; } +.call-tree-name { + -moz-margin-end: 4px !important; +} + .call-tree-url { - -moz-margin-start: 4px !important; cursor: pointer; } @@ -200,11 +346,11 @@ text-decoration: underline; } -.call-tree-url { +.call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url { color: var(--theme-highlight-blue); } -.call-tree-line { +.call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line { color: var(--theme-highlight-orange); } @@ -219,14 +365,6 @@ 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; @@ -247,7 +385,7 @@ background-image: url(magnifying-glass-light.png); } -@media (min-resolution: 2dppx) { +@media (min-resolution: 1.25dppx) { .theme-dark .call-tree-zoom { background-image: url(magnifying-glass@2x.png); } @@ -339,7 +477,6 @@ height: 8px; -moz-margin-start: 8px; -moz-margin-end: 6px; - border: 1px solid; border-radius: 1px; } @@ -350,9 +487,8 @@ .waterfall-marker-bar { height: 9px; - border: 1px solid; - border-radius: 1px; transform-origin: left center; + border-radius: 1px; } .waterfall-marker-container.selected > .waterfall-sidebar, @@ -361,34 +497,50 @@ 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; + min-width: 50px; } .marker-details-bullet { width: 8px; height: 8px; - border: 1px solid; 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; } @@ -534,8 +686,11 @@ call-tree-item:not([origin="content"]) .call-tree-line { opacity: 0.6; } +.call-tree-name { + -moz-margin-end: 4px !important; +} + .call-tree-url { - -moz-margin-start: 4px !important; cursor: pointer; } @@ -560,12 +715,6 @@ call-tree-item:not([origin="content"]) .call-tree-line { 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; @@ -582,7 +731,7 @@ call-tree-item:not([origin="content"]) .call-tree-line { background-image: url(magnifying-glass.png); } -@media (min-resolution: 2dppx) { +@media (min-resolution: 1.25dppx) { .call-tree-zoom { background-image: url(magnifying-glass@2x.png); } @@ -601,3 +750,151 @@ call-tree-item:not([origin="content"]) .call-tree-line { transform: scale(0.75); transform-origin: center right; } + +/** + * 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; +}