Use a MenuBar node in the top menu container

I didn't know this was a new node in Godot 4, very cool

src/Autoload/ExtensionsApi.gd

@@ -170,19 +170,19 @@ class MenuAPI:
 	func _get_popup_menu(menu_type: int) -> PopupMenu:
 		match menu_type:
 			FILE:
-				return Global.top_menu_container.file_menu_button.get_popup()
+				return Global.top_menu_container.file_menu
 			EDIT:
-				return Global.top_menu_container.edit_menu_button.get_popup()
+				return Global.top_menu_container.edit_menu
 			SELECT:
-				return Global.top_menu_container.select_menu_button.get_popup()
+				return Global.top_menu_container.select_menu
 			IMAGE:
-				return Global.top_menu_container.image_menu_button.get_popup()
+				return Global.top_menu_container.image_menu
 			VIEW:
-				return Global.top_menu_container.view_menu_button.get_popup()
+				return Global.top_menu_container.view_menu
 			WINDOW:
-				return Global.top_menu_container.window_menu_button.get_popup()
+				return Global.top_menu_container.window_menu
 			HELP:
-				return Global.top_menu_container.help_menu_button.get_popup()
+				return Global.top_menu_container.help_menu
 		return null
 
 	## Adds a menu item of title [param item_name] to the [param menu_type] defined by

src/Classes/Project.gd

@@ -175,7 +175,7 @@ func selection_map_changed() -> void:
 	if has_selection:
 		image_texture = ImageTexture.create_from_image(selection_map)
 	Global.canvas.selection.marching_ants_outline.texture = image_texture
-	var edit_menu_popup: PopupMenu = Global.top_menu_container.edit_menu_button.get_popup()
+	var edit_menu_popup: PopupMenu = Global.top_menu_container.edit_menu
 	edit_menu_popup.set_item_disabled(Global.EditMenu.NEW_BRUSH, !has_selection)
 
 
@@ -245,7 +245,7 @@ func change_project() -> void:
 	Global.canvas.selection.big_bounding_rectangle = selection_map.get_used_rect()
 	Global.canvas.selection.big_bounding_rectangle.position += selection_offset
 	Global.canvas.selection.queue_redraw()
-	var edit_menu_popup: PopupMenu = Global.top_menu_container.edit_menu_button.get_popup()
+	var edit_menu_popup: PopupMenu = Global.top_menu_container.edit_menu
 	edit_menu_popup.set_item_disabled(Global.EditMenu.NEW_BRUSH, !has_selection)
 
 	var i := 0

src/UI/TopMenuContainer/TopMenuContainer.gd

@@ -2,9 +2,6 @@ extends Panel
 # gdlint: ignore=max-line-length
 const CHANGELOG_URL := "https://github.com/Orama-Interactive/Pixelorama/blob/master/CHANGELOG.md#v011---2023-06-13"
 
-var file_menu: PopupMenu
-var view_menu: PopupMenu
-var window_menu: PopupMenu
 var recent_projects := []
 var layouts := [
 	["Default", preload("res://assets/layouts/default.tres")],
@@ -16,13 +13,13 @@ var zen_mode := false
 
 @onready var ui := Global.control.find_child("DockableContainer") as DockableContainer
 @onready var ui_elements := ui.get_children()
-@onready var file_menu_button := $MenuItems/FileMenu
-@onready var edit_menu_button := $MenuItems/EditMenu
-@onready var select_menu_button := $MenuItems/SelectMenu
-@onready var image_menu_button := $MenuItems/ImageMenu
-@onready var view_menu_button := $MenuItems/ViewMenu
-@onready var window_menu_button := $MenuItems/WindowMenu
-@onready var help_menu_button := $MenuItems/HelpMenu
+@onready var file_menu: PopupMenu = $MenuBar/File
+@onready var edit_menu: PopupMenu = $MenuBar/Edit
+@onready var select_menu: PopupMenu = $MenuBar/Select
+@onready var image_menu: PopupMenu = $MenuBar/Image
+@onready var view_menu: PopupMenu = $MenuBar/View
+@onready var window_menu: PopupMenu = $MenuBar/Window
+@onready var help_menu: PopupMenu = $MenuBar/Help
 
 @onready var greyscale_vision: ColorRect = ui.find_child("GreyscaleVision")
 @onready var new_image_dialog: ConfirmationDialog = Global.control.find_child("CreateNewImage")
@@ -59,7 +56,6 @@ func _setup_file_menu() -> void:
 		"Export as...": "export_file_as",
 		"Quit": "quit",
 	}
-	file_menu = file_menu_button.get_popup()
 	var i := 0
 	for item in file_menu_items:
 		if item == "Recent projects":
@@ -105,7 +101,6 @@ func _setup_edit_menu() -> void:
 		"New Brush": "new_brush",
 		"Preferences": "preferences"
 	}
-	var edit_menu: PopupMenu = edit_menu_button.get_popup()
 	var i := 0
 	for item in edit_menu_items:
 		var echo := false
@@ -133,7 +128,6 @@ func _setup_view_menu() -> void:
 		"Display Layer Effects": &"display_layer_effects",
 		"Snap To": "",
 	}
-	view_menu = view_menu_button.get_popup()
 	for i in view_menu_items.size():
 		var item: String = view_menu_items.keys()[i]
 		if item == "Tile Mode":
@@ -213,7 +207,6 @@ func _setup_window_menu() -> void:
 		"Zen Mode": "zen_mode",
 		"Fullscreen Mode": "toggle_fullscreen",
 	}
-	window_menu = window_menu_button.get_popup()
 	var i := 0
 	for item in window_menu_items:
 		if item == "Panels":
@@ -298,7 +291,6 @@ func _setup_image_menu() -> void:
 		"Gradient Map": "gradient_map",
 		# "Shader": ""
 	}
-	var image_menu: PopupMenu = image_menu_button.get_popup()
 	var i := 0
 	for item in image_menu_items:
 		_set_menu_shortcut(image_menu_items[item], image_menu, i, item)
@@ -315,7 +307,6 @@ func _setup_select_menu() -> void:
 		"Invert": "invert_selection",
 		"Tile Mode": ""
 	}
-	var select_menu: PopupMenu = select_menu_button.get_popup()
 	for i in select_menu_items.size():
 		var item: String = select_menu_items.keys()[i]
 		if item == "Tile Mode":
@@ -335,7 +326,6 @@ func _setup_help_menu() -> void:
 		"Changelog": "changelog",
 		"About Pixelorama": "about_pixelorama",
 	}
-	var help_menu: PopupMenu = help_menu_button.get_popup()
 	var i := 0
 	for item in help_menu_items:
 		_set_menu_shortcut(help_menu_items[item], help_menu, i, item)
@@ -364,9 +354,9 @@ func _set_menu_shortcut(
 	menu.set_item_text(index, text)
 
 
-func _handle_metadata(id: int, menu_button: MenuButton) -> void:
+func _handle_metadata(id: int, popup_menu: PopupMenu) -> void:
 	# Used for extensions that want to add extra menu items
-	var metadata = menu_button.get_popup().get_item_metadata(id)
+	var metadata = popup_menu.get_item_metadata(id)
 	if metadata:
 		if metadata is Object:
 			if metadata.has_method(&"menu_item_clicked"):
@@ -399,7 +389,7 @@ func file_menu_id_pressed(id: int) -> void:
 		Global.FileMenu.QUIT:
 			Global.control.show_quit_dialog()
 		_:
-			_handle_metadata(id, file_menu_button)
+			_handle_metadata(id, file_menu)
 
 
 func _on_new_project_file_menu_option_pressed() -> void:
@@ -482,7 +472,7 @@ func edit_menu_id_pressed(id: int) -> void:
 		Global.EditMenu.PREFERENCES:
 			_popup_dialog(Global.preferences_dialog)
 		_:
-			_handle_metadata(id, edit_menu_button)
+			_handle_metadata(id, edit_menu)
 
 
 func view_menu_id_pressed(id: int) -> void:
@@ -508,7 +498,7 @@ func view_menu_id_pressed(id: int) -> void:
 		Global.ViewMenu.DISPLAY_LAYER_EFFECTS:
 			Global.display_layer_effects = not Global.display_layer_effects
 		_:
-			_handle_metadata(id, view_menu_button)
+			_handle_metadata(id, view_menu)
 
 	Global.canvas.queue_redraw()
 
@@ -527,7 +517,7 @@ func window_menu_id_pressed(id: int) -> void:
 		Global.WindowMenu.FULLSCREEN_MODE:
 			_toggle_fullscreen()
 		_:
-			_handle_metadata(id, window_menu_button)
+			_handle_metadata(id, window_menu)
 
 
 func _tile_mode_submenu_id_pressed(id: Tiles.MODE) -> void:
@@ -748,7 +738,7 @@ func image_menu_id_pressed(id: int) -> void:
 #			_popup_dialog(Global.control.get_node("Dialogs/ImageEffects/ShaderEffect"))
 
 		_:
-			_handle_metadata(id, image_menu_button)
+			_handle_metadata(id, image_menu)
 
 
 func select_menu_id_pressed(id: int) -> void:
@@ -762,11 +752,11 @@ func select_menu_id_pressed(id: int) -> void:
 		Global.SelectMenu.INVERT:
 			Global.canvas.selection.invert()
 		Global.SelectMenu.TILE_MODE:
-			var state = select_menu_button.get_popup().is_item_checked(id)
+			var state = select_menu.is_item_checked(id)
 			Global.canvas.selection.flag_tilemode = !state
-			select_menu_button.get_popup().set_item_checked(id, !state)
+			select_menu.set_item_checked(id, !state)
 		_:
-			_handle_metadata(id, select_menu_button)
+			_handle_metadata(id, select_menu)
 
 
 func help_menu_id_pressed(id: int) -> void:
@@ -788,4 +778,4 @@ func help_menu_id_pressed(id: int) -> void:
 		Global.HelpMenu.ABOUT_PIXELORAMA:
 			_popup_dialog(Global.control.get_node("Dialogs/AboutDialog"))
 		_:
-			_handle_metadata(id, help_menu_button)
+			_handle_metadata(id, help_menu)

src/UI/TopMenuContainer/TopMenuContainer.tscn

@@ -9,53 +9,25 @@ offset_right = 1280.0
 offset_bottom = 28.0
 script = ExtResource("2")
 
-[node name="MenuItems" type="HBoxContainer" parent="."]
-layout_mode = 0
+[node name="MenuBar" type="MenuBar" parent="."]
+layout_mode = 2
 offset_left = 7.0
-offset_top = 4.0
-offset_right = 1010.0
+offset_right = 356.0
+offset_bottom = 27.0
 
-[node name="FileMenu" type="MenuButton" parent="MenuItems"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "File"
-switch_on_hover = true
+[node name="File" type="PopupMenu" parent="MenuBar"]
 
-[node name="EditMenu" type="MenuButton" parent="MenuItems"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "Edit"
-switch_on_hover = true
+[node name="Edit" type="PopupMenu" parent="MenuBar"]
 
-[node name="SelectMenu" type="MenuButton" parent="MenuItems"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "Select"
-switch_on_hover = true
+[node name="Select" type="PopupMenu" parent="MenuBar"]
 
-[node name="ImageMenu" type="MenuButton" parent="MenuItems"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "Image"
-switch_on_hover = true
+[node name="Image" type="PopupMenu" parent="MenuBar"]
 
-[node name="ViewMenu" type="MenuButton" parent="MenuItems"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "View"
-switch_on_hover = true
+[node name="View" type="PopupMenu" parent="MenuBar"]
 
-[node name="WindowMenu" type="MenuButton" parent="MenuItems"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "Window"
-switch_on_hover = true
+[node name="Window" type="PopupMenu" parent="MenuBar"]
 
-[node name="HelpMenu" type="MenuButton" parent="MenuItems"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "Help"
-switch_on_hover = true
+[node name="Help" type="PopupMenu" parent="MenuBar"]
 
 [node name="TopLabels" type="HBoxContainer" parent="."]
 layout_mode = 0
@@ -117,7 +89,7 @@ anchor_top = 0.5
 anchor_right = 1.0
 anchor_bottom = 0.5
 offset_left = -330.0
-offset_top = -10.0
+offset_top = -14.0
 offset_right = 0.00012207
 offset_bottom = 13.0
 grow_horizontal = 2