[TraditionalOk] checkboxes and radio buttons blurry in menus

[uezedri]

Fedora 26 MATE 1.18.0 mate-themes 3.22.12-1

the checkboxes and radio buttons look right in most contexts, however, in the menus they look blurry ...

Here's what they look like in the menus (screen capture from gtk3-widget factory):

Here's how they look (correct) everywhere else (from gtk3-widget-factory):

Also notice that, in the menus only, one of the radio buttons is inside a square instead of inside a circle. Maybe the graphics need to be brought into sync?

[mrnhmath]

Not sure if it's related but the slider button is big/blurry and the blue area seems blurry too

[lukefromdc]

While I am not the maintainer of the Traditional themes, from the themes I do maintain I know that checks and radios in menus are easily split out by using (for GTK 3.20/22)

menuitem check, menuitem radio,
menuitem .check, menuitem .radio 

so it stands to reason they would be different. My guess is that some image used is just not scaling nicely and ends up blurry.

[raveit65]

Guys, gtk3-widget-factory draw his own checkboxes and radiobuttons. But Traditional themes use images to draw those widgets. So, you can't compare that. To mention here the slider is complete offtopic. Btw. what you see here is the slider from GTK+ itself, which you see if a theme don't use images for this widget.

[raveit65]

The check and radio buttons are set up here. https://github.com/mate-desktop/mate-themes/blob/master/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets-img.css#L295 We can try to replace ie.

menu menuitem check {
    -gtk-icon-source: url("img/menuitem-checkbox.png");
}

with

menu menuitem check {
    -gtk-icon-source: -gtk-scaled(url("img/menuitem-checkbox.png"));
}

But my eyes are really to bad to see a different :-) Maybe -gtk-scaled works only with a .svg image ? Disabling using an image here will drop the widgets from menus.

[uezedri]

@lukefromdc yes, it's using different images. the menus use e.g. gtk-3.0/img/menuitem-checkbox-checked.png , whereas most/everything else uses e.g gtk-3.0/img/checkbox-checked.png

the difference is that the menu images don't have some padding that's included in the regular checkbox images (the padding would make the checkbox look very small in the menus, since the visible checkbox would be a smaller proportion of the available menu space as the image with padding gets scaled down).

the current menu versions are also only 10x10, whereas the menus display the images at 12x12, which helps to explain blurriness.

it's easy enough to make a new copy of the menu versions of these images by copying the regular version, then cropping out the extra padding (including a border shadow), which also happens to reduce the image dimensions to the exact correct dimensions of 12x12.

I tested this by producing a new gtk-3.0/img/menuitem-checkbox-checked.png from gtk-3.0/img/checkbox-checked.png , then reloading the theme and checking the result in gtk3-widget-factory -- the result looks a lot better to me ...

take a look (the first checkbox is the one that's replaced):

here's the edited image:

I can produce all of the menu versions this way if it will help.

@raveit65

Guys, gtk3-widget-factory draw his own checkboxes and radiobuttons. But Traditional themes use images to draw those widgets. So, you can't compare that.

unless i'm misunderstanding you, what you're saying isn't accurate ... gtk3-widget-factory's menu checkboxes reflect the theme's, which can be confirmed by changing themes while gtk3-widget-factory is open.

in any case, the issue described applies to all gtk3 applications, e.g. pluma (this is without any image adjustments described above):

Disabling using an image here will drop the widgets from menus.

we wouldn't want to do that, since the checkboxes in the menus show the current state (option checked vs unchecked)

[sc0w]

@uezedri

Also notice that, in the menus only, one of the radio buttons is inside a square instead of inside a circle.

Fixed in https://github.com/mate-desktop/mate-themes/commit/a6fd5de5c7900183a66692f82dce0a094cec4576