Repository navigation
Round menu buttons borrow a shell class that carries no rules in this context #599
Description
Summary
The three round buttons at the top of the popup (Refresh, System Monitor,
Preferences) are St.Buttons built with the class
style_class: 'message-list-clear-button button vitals-button-action'(extension.js, _createRoundButton), and vitals-button-action
re-declares circular geometry / icon style in stylesheet.css by extending
the generic .button.
message-list-clear-button is the shell's own class for the Clear button in
the notification list, where it only carries rules under
.message-list-controls — so in Vitals' popup it contributes nothing, and
the circular look actually comes from vitals-button-action's own geometry.
What the buttons do wear from the theme is the generic .button styling.
Why this matters
The buttons opt into generic .button styling rather than a popup-specific
system class, so any shell extension or theme that restyles popups
(popup-menu / Quick Settings backgrounds) has no semantic hook to style
these buttons consistently — they keep the generic .button look and
visually clash with the rest of the restyled popup.
To be clear, this is not attributed to any particular extension. The
buttons are ordinary popup buttons and are fully capable of matching the
system widgets; it also duplicates, under default GNOME, styling that the
theme already owns.
Fix
Implemented in PR #600 (branch fix/round-menu-button-theme-class, based on
main @ 7108c2a):
- drop the borrowed
message-list-clear-button, keeping the generic
buttonclass — the hook the shell theme styles for background and
interactive states — plusvitals-button-action; vitals-button-actionowns geometry only (radius, padding, min-size)
plus the symbolic icon style;- remove the extension's own hover/focus border, including the transparent
default border added in 2020 to stop size flicker when the border appeared
on hover (the theme's interactive states change background and box-shadow,
not borders, so the flicker does not return).
Buttons keep the same icons, handlers, size and circular shape under the
default theme. The earlier icon-button suggestion in this issue was not
used: icon-button brings its own padding, min-height and icon sizing tuned
for the quick-settings bar, so substituting it would change the buttons'
size and spacing; the minimal change is to drop the borrowed class while
keeping the existing geometry.
Activity
Octopustank commentedon Oct 5, 2026
Behavior on my machine with blur-my-shell (using
refactor/unified-blur-backendbranch):[-]Use the system `icon-button` class for the round menu buttons instead of a custom class extending generic `.button`[/-][+]Round menu buttons borrow a shell class that carries no rules in this context[/+]corecoding commentedon Oct 5, 2026
Do you know how far back this is supported? Vitals targets Gnome 45 as the minimum version
Octopustank commentedon Oct 5, 2026
Looking at the theme source, it should be fine from 45.0 onward — I haven't run it on every version though, sorry about that.
What the patch leans on is three things the default theme already owns:
.button, the generic class that gives a button its background and hover/focus/active statesbutton()/focus_ring()mixins in_drawing.scss— focus looks like an insetbox-shadow, not a bordermessage-list-clear-button— relevant only in that it does not apply hereI pulled the compiled theme CSS out of each release's
gnome-shellRPM (Fedora ships GNOME 1:1: 45=F39, 46=F40, 47=F41, 48=F42, 49=F43, 50=F44) — extracting the RPM, not installing it — so what I looked at is the CSS a shell of that version actually loads:.buttonbackgroundmessage-list-clear-buttonrules#474747#474747st-mix(#ffffff, #353535, 9%)st-mix(#ffffff, #36363a, 9%)st-mix(#ffffff, #36363a, 9%)st-mix(#ffffff, #36363a, 9%)From that, two things look reassuring:
focus_ring()comes out as a box-shadow on every version, and no state seems to change border width. In 45/46 the 1px border belongs to the base state only, and 46 dropped even that. So removing the extension's own transparent border shouldn't bring back the old size flicker.message-list-clear-buttonhas zero rules in 45–48, and from 49.0 on its only rule is.message-list-controls .message-list-clear-button { border-radius: 999px }— under.message-list-controls, which Vitals' popup is not inside, so it likely never applied to these buttons.So
.buttonlooks theme-styled since at least 45.0, and I don't see changes in the parts this patch touches through 50 (main included, from source). I'd be surprised if version-specific handling were needed, but that's a read of the source, not a test.Source reading only, as I said — no time to try it on a live shell per version. If you think it's worth it, a quick check on 45.0 and 48.x would settle it.