Some menu items from Astal-tray.TrayItem are unusable

[Lengyue57]

Have you read through the documentation?

• Astal docs
• Library references
• FAQ this page is 404

Describe what have you tried so far

• used tray_item.menu_model with Gtk.PopoverMenu directly.
• built an intermediate Gio.Menu to Gtk.PopoverMenu.
• forwarded actions in tray_item.action_group and created missing actions.

Describe your question

versions:

• Ags: 5347d21
• Astal: 344a6dc

Some menu items are unusable in my tray app menu. and they work normally in Waybar.

The "A" submenu is gray

Initially, I built the Menu in the following way:

// in my widget
this.popover = new Gtk.PopoverMenu();
this.popover.set_parent(this);
// menu model
this.tray_item.bind_property("menu-model", this.popover, "menu-model", GObject.BindingFlags.SYNC_CREATE);
// action group
this.popover.insert_action_group("dbusmenu", this.tray_item.action_group);
this.tray_item.connect("notify::action-group", (tray_item) => {
  this.popover.insert_action_group("dbusmenu", tray_item.action_group);
});

Later, I tried to recursive traversal tray_item.menu_model and build an intermediate Gio.Menu:

function updateMenuFromModel(menu: Gio.Menu, model: Gio.MenuModel) {
  // ... recursive traversal `tray_item.menu_model` and update menu
}

// in my widget
const menu = new Gio.Menu();
updateMenuFromModel(menu, this.tray_item.menu_model);
this.tray_item.connect("notify::menu-model", (tray_item) => {
  updateMenuFromModel(menu, tray_item.menu_model);
});

this.popover = new Gtk.PopoverMenu({ menu_model: menu });
this.popover.set_parent(this);
// action group
this.popover.insert_action_group("dbusmenu", this.tray_item.action_group);
this.tray_item.connect("notify::action-group", (tray_item) => {
  this.popover.insert_action_group("dbusmenu", tray_item.action_group);
});

The problem remains, but during my investigation, I discovered:
The menu_model has action dbusmenu.id-305 and dbusmenu.submenu-305, but
action_group only contains dbusmenu.submenu-305.

I am not sure if this is expected, so I tried to create the missing action:

// find all action in model that are missing in action_group and create Gio.Action
function menuMissingActions(action_group: Gio.ActionGroup, model: Gio.MenuModel): Gio.Action[] {
  const actions: Gio.Action[] = [];
  for (let i = 0, items_count = model.get_n_items(); i < items_count; ++i) {
    const action_name = model.get_item_attribute_value(i, Gio.MENU_ATTRIBUTE_ACTION, new GLib.VariantType("s"))?.get_string()[0]?.replace(/^dbusmenu./, "") ?? null;
    if (action_name && !action_group.has_action(action_name)) {
      const props: Partial<Gio.SimpleAction.ConstructorProps> = {};
      const parameter_type = model.get_item_attribute_value(i, Gio.MENU_ATTRIBUTE_TARGET, null)?.get_type() ?? null;

      props.name = action_name;
      if (parameter_type)
        props.parameter_type = parameter_type;

      actions.push(new Gio.SimpleAction(props));
    }

    // recursive
    const link = model.get_item_link(i, Gio.MENU_LINK_SUBMENU) ?? model.get_item_link(i, Gio.MENU_LINK_SECTION);
    if (link) {
      actions.push(...menuMissingActions(action_group, link));
    }
  }
  return actions;
}

function fixedTrayItemActionGroup(tray_item: AstalTray.TrayItem) {
  const action_group = new Gio.SimpleActionGroup();

  for (const action_name of tray_item.action_group.list_actions()) {
    const action_info = tray_item.action_group.query_action(action_name);
    const action = new Gio.SimpleAction({ /* ... */ });
    action.connect("activate", (action, parameter) => tray_item.action_group.activate_action(action_name, parameter));

    action_group.add_action(action);
  }

  const menu_missing_actions = menuMissingActions(tray_item.action_group, tray_item.menu_model);
  for (const action of menu_missing_actions) {
    action_group.add_action(action);
  }

  return action_group;
}

// in my widget
this.popover = new Gtk.PopoverMenu();
this.popover.set_parent(this);
this.tray_item.bind_property("menu-model", this.popover, "menu-model", GObject.BindingFlags.SYNC_CREATE);
this.popover.insert_action_group("dbusmenu", fixedTrayItemActionGroup(this.tray_item));
this.tray_item.connect("notify::action-group", (tray_item) => {
  this.popover.insert_action_group("dbusmenu", fixedTrayItemActionGroup(tray_item));
});

The menu item became usable after this, but program always crashes shortly after.

Is this a bug in Astal?
What should I do to make it work normally?

[kotontrion]

The menus are completely handled by appmenu-glib-translator, so you should report the issue there.

Whats your version of that lib?
Please provide steps to reproduce, like which tray app causes this issue and are there others with the same issue?
While it makes no difference for most apps, generally you should call about_to_show before opening the menu.

[Lengyue57]

The menus are completely handled by appmenu-glib-translator, so you should report the issue there.

Thank you for the direction, I will file an issue there.

Whats your version of that lib?

This is my found.

~ $ sudo find /usr -type f | grep -E appmenu-glib-translator
/usr/local/lib/pkgconfig/appmenu-glib-translator.pc
/usr/local/lib/libappmenu-glib-translator.so.25.04
/usr/local/share/vala/vapi/appmenu-glib-translator.vapi
/usr/local/share/vala/vapi/appmenu-glib-translator.deps
/usr/local/include/appmenu-glib-translator/importer.h
~ $ cat /usr/local/lib/pkgconfig/appmenu-glib-translator.pc
prefix=/usr/local
includedir=${prefix}/include
libdir=${prefix}/lib

Name: appmenu-glib-translator
Description: A translator from DBusMenu to GMenuModel
Version: 25.04
Requires: gio-unix-2.0 >= 2.52.0
Requires.private: gdk-pixbuf-2.0
Libs: -L${libdir} -lappmenu-glib-translator
Cflags: -I${includedir} -I${includedir}/appmenu-glib-translator

Please provide steps to reproduce, like which tray app causes this issue and are there others with the same issue?
While it makes no difference for most apps, generally you should call about_to_show before opening the menu.

Here is the complete code of my widget. After opening the menu, it displays as shown in the screenshot above:

namespace TrayItem {
  export interface ConstructorProps extends
    Gtk.Widget.ConstructorProps,
    Gtk.Buildable.ConstructorProps
  {
    tray_item: AstalTray.TrayItem;
  }
}
export const TrayItem = GObject.registerClass({
  CssName: "tray_item",
  Implements: [Gtk.Buildable],
  Properties: {
    "tray-item": GObject.ParamSpec.object(
      "tray-item", "Tray Item", "Tray item info",
      GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
      AstalTray.TrayItem.$gtype,
    ),
  },
}, class TrayItem extends Gtk.Widget {
  private popover;
  private icon;

  private _tray_item?: AstalTray.TrayItem;
  get tray_item() {
    if (!this._tray_item)
      throw Error("TrayItem widget requires the \"tray-item\"");
    return this._tray_item;
  }
  set tray_item(value) {
    if (this._tray_item === value)
      return;
    this._tray_item = value;
    this.notify("tray-item");
  }

  static new_from_tray_item(tray_item: AstalTray.TrayItem) {
    return new TrayItem({ tray_item });
  }

  constructor(props: Partial<TrayItem.ConstructorProps> = {}) {
    super(props);

    this.popover = new Gtk.PopoverMenu();
    this.popover.set_parent(this);
    this.tray_item.bind_property("menu-model", this.popover, "menu-model", GObject.BindingFlags.SYNC_CREATE);
    this.popover.insert_action_group("dbusmenu", this.tray_item.action_group));
    this.tray_item.connect("notify::action-group", (tray_item) => {
      this.popover.insert_action_group("dbusmenu", tray_item.action_group);
    });

    this.icon = new Gtk.Image();
    this.icon.set_parent(this);
    this.tray_item.bind_property("gicon", this.icon, "gicon", GObject.BindingFlags.SYNC_CREATE);

    const click_gesture = new Gtk.GestureClick({ button: 0 });
    this.add_controller(click_gesture);
    click_gesture.connect("released", (gesture, press, x, y) => {
      if (!gesture.widget.contains(x, y))
        return;

      switch (gesture.get_current_button()) {
      case 1:
        this.tray_item.activate(x, y);
        break;
      case 2:
        this.tray_item.secondary_activate(x, y);
        break;
      case 3:
        this.tray_item.about_to_show();
        this.popover.popup();
        break;
      default:
        break;
      }
    });
  }

  vfunc_dispose(): void {
    this.icon.unparent();
    this.popover.unparent();
    this.vfunc_dispose();
  }

  vfunc_add_child(builder: Gtk.Builder, child: GObject.Object, type?: string | null): void {
    if (child instanceof Gtk.Widget)
      throw Error("TrayItem is not allowed to add children");
    super.vfunc_add_child(builder, child, type);
  }

  vfunc_measure(orientation: Gtk.Orientation, for_size: number): [number, number, number, number] {
    return this.icon.measure(orientation, for_size);
  }

  vfunc_size_allocate(width: number, height: number, baseline: number): void {
    this.icon.allocate(width, height, baseline, null);
    super.vfunc_size_allocate(width, height, baseline);
  }
});

Currently, this issue only occurs with fcitx5. I haven't found other applications with dynamic submenus to confirm if this is specific to fcitx5 or a more general issue. Additionally, fcitx5 works normally when I use Waybar.

[Lengyue57]

I temporarily resolved the issue with the following approach:

function copyMenuModel(model: Gio.MenuModel) {
  const menu = new Gio.Menu();

  for (let i = 0, items_count = model.get_n_items(); i < items_count; ++i) {
    const item = Gio.MenuItem.new_from_model(model, i);
    const submenu = model.get_item_link(i, Gio.MENU_LINK_SUBMENU);
    if (submenu) {
      item.set_attribute_value(Gio.MENU_ATTRIBUTE_ACTION, null);
      item.set_submenu(copyMenuModel(submenu));
    }
    const section = model.get_item_link(i, Gio.MENU_LINK_SECTION);
    if (section) {
      item.set_section(copyMenuModel(section));
    }
    menu.append_item(item);
  }

  return menu;
}

// in my widget
this.popover = new Gtk.PopoverMenu();
this.popover.set_parent(this);
this.tray_item.bind_property_full(
  "menu-model",
  this.popover,
  "menu-model",  
  GObject.BindingFlags.SYNC_CREATE,
  (binding, from) => [true, copyMenuModel(from)],
  null
);
this.popover.insert_action_group("dbusmenu", this.tray_item.action_group);
this.tray_item.connect("notify::action-group", (tray_item) => {
  this.popover.insert_action_group("dbusmenu", tray_item.action_group);
});