Button only visible on hover

I am just starting out with Gtk4 so this might be have an obvious reason, but a button in the PopoverMenu is only visible if you hover over it. This is not my intention and it would be awesome if someone could help me. This phenomenon happens when:

  1. You place a MenuButton inside a ListBox
  2. The user selects the ListBoxRow where the MenuButton is located
  3. Inside the PopoverMenu is a custom item which is a button
  4. The button has the property has-frame=False

Buttons without the has-frame property are always visible. I created some code that demonstrates this all:

import sys
import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk

menu_ui = '''
<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk" version="4.0"/>
  <menu id="test_menu">
    <section>
      <attribute name="display-hint">horizontal-buttons</attribute>
        <item>
            <attribute name="custom">button1</attribute>
        </item>
        <item>
            <attribute name="custom">button2</attribute>
        </item>
    </section>
  </menu>
</interface>
'''

class MainWindow(Gtk.ApplicationWindow):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        scrolled_window = Gtk.ScrolledWindow(hexpand=True, vexpand=True)
        self.set_child(scrolled_window)
        
        list_box = Gtk.ListBox(hexpand=True, vexpand=True)
        scrolled_window.set_child(list_box)
        
        row1 = Gtk.ListBoxRow()
        row1.set_child(Gtk.Label(label="If I am highlighted you can see 2 buttons!"))
        list_box.append(row1)
        
        row = Gtk.ListBoxRow()
        box = Gtk.Box(orientation="horizontal", hexpand=True, vexpand=True)
        box.append(Gtk.Label(label="If I am highlighted you can't see the first button!"))
        row.set_child(box)
        list_box.append(row)
        
        menu_button = Gtk.MenuButton(hexpand=False)
        box.append(menu_button)
        builder = Gtk.Builder().new_from_string(menu_ui, -1)
        menu =builder.get_object("test_menu")
        menu_button.set_menu_model(menu)
        menu_button.get_popover().add_child(Gtk.Button(icon_name="go-top-symbolic", has_frame=False), "button1")
        menu_button.get_popover().add_child(Gtk.Button(icon_name="go-top-symbolic"), "button2")

        

class MyApp(Gtk.Application):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.connect('activate', self.on_activate)

    def on_activate(self, app):
        self.win = MainWindow(application=app)
        self.win.present()

app = MyApp(application_id="com.example.GtkApplication")
app.run(sys.argv)

Sorry for long post but help would be awesome :slight_smile:

What do you mean by “not visible”? Can you show a screenshot?

It sounds like you’re just talking about the outline, i.e. a themeing issue. But that’s expected if you set has-frame to false.

I think it is about the icon color, which gets turned white on a white background in the Default theme because of https://gitlab.gnome.org/GNOME/gtk/-/blob/main/gtk/theme/Default/_common.scss#L621

It is here demonstrated the icon becomes “invisible” after selecting the second row. But as Sebastian mentioned this is because the css color gets changed. Anyway thanks for the help!

Screenshot from 2022-05-13 13-42-57

Screenshot from 2022-05-13 13-43-19

Yes that’s it! Thank you, I would have never found this.

You could file a bug report about this if this in the gtk issue tracker: https://gitlab.gnome.org/GNOME/gtk/-/issues

Yes I created a report: https://gitlab.gnome.org/GNOME/gtk/-/issues/4919