Merge pull request #50519 from pycbouh/editor-theme-fixup-3.x

[3.x] Fix control picker in the Theme editor

editor/editor_themes.cpp

@@ -1273,6 +1273,10 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme_preview_picker_sb->set_border_color(accent_color);
 	theme_preview_picker_sb->set_border_width_all(1.0 * EDSCALE);
 	theme->set_stylebox("preview_picker_overlay", "ThemeEditor", theme_preview_picker_sb);
+	Color theme_preview_picker_label_bg_color = accent_color;
+	theme_preview_picker_label_bg_color.set_hsv(theme_preview_picker_label_bg_color.get_h(), theme_preview_picker_label_bg_color.get_s(), 0.5);
+	Ref<StyleBoxFlat> theme_preview_picker_label_sb = make_flat_stylebox(theme_preview_picker_label_bg_color, 4.0, 1.0, 4.0, 3.0);
+	theme->set_stylebox("preview_picker_label", "ThemeEditor", theme_preview_picker_label_sb);
 
 	// adaptive script theme constants
 	// for comments and elements with lower relevance

editor/plugins/theme_editor_plugin.cpp

@@ -3074,7 +3074,7 @@ ThemeEditor::ThemeEditor() {
 
 	theme_type_editor = memnew(ThemeTypeEditor);
 	main_hs->add_child(theme_type_editor);
-	theme_type_editor->set_custom_minimum_size(Size2(360, 0) * EDSCALE);
+	theme_type_editor->set_custom_minimum_size(Size2(280, 0) * EDSCALE);
 }
 
 void ThemeEditorPlugin::edit(Object *p_node) {

editor/plugins/theme_editor_preview.cpp

@@ -76,7 +76,7 @@ void ThemeEditorPreview::_picker_button_cbk() {
 Control *ThemeEditorPreview::_find_hovered_control(Control *p_parent, Vector2 p_mouse_position) {
 	Control *found = nullptr;
 
-	for (int i = 0; i < p_parent->get_child_count(); i++) {
+	for (int i = p_parent->get_child_count() - 1; i >= 0; i--) {
 		Control *cc = Object::cast_to<Control>(p_parent->get_child(i));
 		if (!cc || !cc->is_visible()) {
 			continue;
@@ -105,12 +105,31 @@ void ThemeEditorPreview::_draw_picker_overlay() {
 		return;
 	}
 
-	picker_overlay->draw_rect(Rect2(Vector2(0.0, 0.0), picker_overlay->get_size()), get_color("preview_picker_overlay_color", "ThemeEditor"));
+	picker_overlay->draw_rect(Rect2(Vector2(0.0, 0.0), picker_overlay->get_size()), theme_cache.preview_picker_overlay_color);
 	if (hovered_control) {
 		Rect2 highlight_rect = hovered_control->get_global_rect();
 		highlight_rect.position = picker_overlay->get_global_transform().affine_inverse().xform(highlight_rect.position);
-
-		picker_overlay->draw_style_box(get_stylebox("preview_picker_overlay", "ThemeEditor"), highlight_rect);
+		picker_overlay->draw_style_box(theme_cache.preview_picker_overlay, highlight_rect);
+
+		String highlight_name = hovered_control->get_class_name();
+		Rect2 highlight_label_rect = highlight_rect;
+		highlight_label_rect.size = theme_cache.preview_picker_font->get_string_size(highlight_name);
+
+		int margin_top = theme_cache.preview_picker_label->get_margin(MARGIN_TOP);
+		int margin_left = theme_cache.preview_picker_label->get_margin(MARGIN_LEFT);
+		int margin_bottom = theme_cache.preview_picker_label->get_margin(MARGIN_BOTTOM);
+		int margin_right = theme_cache.preview_picker_label->get_margin(MARGIN_RIGHT);
+		highlight_label_rect.size.x += margin_left + margin_right;
+		highlight_label_rect.size.y += margin_top + margin_bottom;
+
+		highlight_label_rect.position.x = CLAMP(highlight_label_rect.position.x, 0.0, picker_overlay->get_size().width);
+		highlight_label_rect.position.y = CLAMP(highlight_label_rect.position.y, 0.0, picker_overlay->get_size().height);
+		picker_overlay->draw_style_box(theme_cache.preview_picker_label, highlight_label_rect);
+
+		Point2 label_pos = highlight_label_rect.position;
+		label_pos.y += highlight_label_rect.size.y - margin_bottom;
+		label_pos.x += margin_left;
+		picker_overlay->draw_string(theme_cache.preview_picker_font, label_pos, highlight_name);
 	}
 }
 
@@ -140,6 +159,11 @@ void ThemeEditorPreview::_gui_input_picker_overlay(const Ref<InputEvent> &p_even
 	}
 }
 
+void ThemeEditorPreview::_reset_picker_overlay() {
+	hovered_control = nullptr;
+	picker_overlay->update();
+}
+
 void ThemeEditorPreview::_notification(int p_what) {
 	switch (p_what) {
 		case NOTIFICATION_ENTER_TREE: {
@@ -152,6 +176,11 @@ void ThemeEditorPreview::_notification(int p_what) {
 		}
 		case NOTIFICATION_THEME_CHANGED: {
 			picker_button->set_icon(get_icon("ColorPick", "EditorIcons"));
+
+			theme_cache.preview_picker_overlay = get_stylebox("preview_picker_overlay", "ThemeEditor");
+			theme_cache.preview_picker_overlay_color = get_color("preview_picker_overlay_color", "ThemeEditor");
+			theme_cache.preview_picker_label = get_stylebox("preview_picker_label", "ThemeEditor");
+			theme_cache.preview_picker_font = get_font("status_source", "EditorFonts");
 		} break;
 		case NOTIFICATION_PROCESS: {
 			time_left -= get_process_delta_time();
@@ -169,6 +198,7 @@ void ThemeEditorPreview::_bind_methods() {
 	ClassDB::bind_method("_preview_visibility_changed", &ThemeEditorPreview::_preview_visibility_changed);
 	ClassDB::bind_method("_draw_picker_overlay", &ThemeEditorPreview::_draw_picker_overlay);
 	ClassDB::bind_method("_gui_input_picker_overlay", &ThemeEditorPreview::_gui_input_picker_overlay);
+	ClassDB::bind_method("_reset_picker_overlay", &ThemeEditorPreview::_reset_picker_overlay);
 
 	// Public binds.
 	ADD_SIGNAL(MethodInfo("control_picked", PropertyInfo(Variant::STRING, "class_name")));
@@ -217,12 +247,14 @@ ThemeEditorPreview::ThemeEditorPreview() {
 
 	preview_overlay = memnew(MarginContainer);
 	preview_overlay->set_mouse_filter(MOUSE_FILTER_IGNORE);
+	preview_overlay->set_clip_contents(true);
 	preview_body->add_child(preview_overlay);
 
 	picker_overlay = memnew(Control);
 	add_preview_overlay(picker_overlay);
 	picker_overlay->connect("draw", this, "_draw_picker_overlay");
 	picker_overlay->connect("gui_input", this, "_gui_input_picker_overlay");
+	picker_overlay->connect("mouse_exited", this, "_reset_picker_overlay");
 }
 
 DefaultThemeEditorPreview::DefaultThemeEditorPreview() {

editor/plugins/theme_editor_preview.h

@@ -60,6 +60,13 @@ class ThemeEditorPreview : public VBoxContainer {
 	Control *picker_overlay;
 	Control *hovered_control = nullptr;
 
+	struct ThemeCache {
+		Ref<StyleBox> preview_picker_overlay;
+		Color preview_picker_overlay_color;
+		Ref<StyleBox> preview_picker_label;
+		Ref<Font> preview_picker_font;
+	} theme_cache;
+
 	double time_left = 0;
 
 	void _propagate_redraw(Control *p_at);
@@ -71,6 +78,7 @@ class ThemeEditorPreview : public VBoxContainer {
 
 	void _draw_picker_overlay();
 	void _gui_input_picker_overlay(const Ref<InputEvent> &p_event);
+	void _reset_picker_overlay();
 
 protected:
 	HBoxContainer *preview_toolbar;