Add rounded corners to EditorProperty and EditorSpinSlider

- Adds rounded corners to the EditorProperty child background, EditorSpinSlider label background, and resource sub-inspector borders and background.
- Allows customizing EditorSpinSlider label background through a new Theme StyleBox property, label_bg.
- Makes margins consistent in resource sub-inspectors.
- Removes space between buttons in NodePath, Resource, and multiline string editors.
- Adds space between label background and content for vertical property editors.

5 files changed, 47 insertions, 47 deletions

diff --git a/editor/editor_inspector.cpp b/editor/editor_inspector.cpp
index 9a400eb2bc..1e3ff1afcd 100644
--- a/editor/editor_inspector.cpp
+++ b/editor/editor_inspector.cpp
@@ -62,7 +62,7 @@ Size2 EditorProperty::get_minimum_size() const {
 	Size2 ms;
 	Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree"));
 	int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree"));
-	ms.height = font->get_height(font_size);
+	ms.height = font->get_height(font_size) + 4 * EDSCALE;
 
 	for (int i = 0; i < get_child_count(); i++) {
 		Control *c = Object::cast_to<Control>(get_child(i));
@@ -132,7 +132,7 @@ void EditorProperty::_notification(int p_what) {
 				int child_room = size.width * (1.0 - split_ratio);
 				Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree"));
 				int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree"));
-				int height = font->get_height(font_size);
+				int height = font->get_height(font_size) + 4 * EDSCALE;
 				bool no_children = true;
 
 				//compute room needed
@@ -236,30 +236,24 @@ void EditorProperty::_notification(int p_what) {
 		case NOTIFICATION_DRAW: {
 			Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree"));
 			int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree"));
-			Color dark_color = get_theme_color(SNAME("dark_color_2"), SNAME("Editor"));
 			bool rtl = is_layout_rtl();
 
 			Size2 size = get_size();
 			if (bottom_editor) {
-				size.height = bottom_editor->get_offset(SIDE_TOP);
+				size.height = bottom_editor->get_offset(SIDE_TOP) - get_theme_constant(SNAME("v_separation"));
 			} else if (label_reference) {
 				size.height = label_reference->get_size().height;
 			}
 
-			Ref<StyleBox> sb;
-			if (selected) {
-				sb = get_theme_stylebox(SNAME("bg_selected"));
-			} else {
-				sb = get_theme_stylebox(SNAME("bg"));
-			}
-
+			Ref<StyleBox> sb = get_theme_stylebox(selected ? SNAME("bg_selected") : SNAME("bg"));
 			draw_style_box(sb, Rect2(Vector2(), size));
 
+			Ref<StyleBox> bg_stylebox = get_theme_stylebox(SNAME("child_bg"));
 			if (draw_top_bg && right_child_rect != Rect2()) {
-				draw_rect(right_child_rect, dark_color);
+				draw_style_box(bg_stylebox, right_child_rect);
 			}
 			if (bottom_child_rect != Rect2()) {
-				draw_rect(bottom_child_rect, dark_color);
+				draw_style_box(bg_stylebox, bottom_child_rect);
 			}
 
 			Color color;
@@ -1075,7 +1069,7 @@ void EditorInspectorPlugin::_bind_methods() {
 void EditorInspectorCategory::_notification(int p_what) {
 	switch (p_what) {
 		case NOTIFICATION_DRAW: {
-			Ref<StyleBox> sb = get_theme_stylebox(SNAME("prop_category_style"), SNAME("Editor"));
+			Ref<StyleBox> sb = get_theme_stylebox(SNAME("bg"));
 
 			draw_style_box(sb, Rect2(Vector2(), get_size()));
 
diff --git a/editor/editor_properties.cpp b/editor/editor_properties.cpp
index 880e51660b..00781e2384 100644
--- a/editor/editor_properties.cpp
+++ b/editor/editor_properties.cpp
@@ -172,6 +172,7 @@ void EditorPropertyMultilineText::_bind_methods() {
 
 EditorPropertyMultilineText::EditorPropertyMultilineText() {
 	HBoxContainer *hb = memnew(HBoxContainer);
+	hb->add_theme_constant_override("separation", 0);
 	add_child(hb);
 	set_bottom_editor(hb);
 	text = memnew(TextEdit);
@@ -2948,6 +2949,7 @@ void EditorPropertyNodePath::_bind_methods() {
 
 EditorPropertyNodePath::EditorPropertyNodePath() {
 	HBoxContainer *hbc = memnew(HBoxContainer);
+	hbc->add_theme_constant_override("separation", 0);
 	add_child(hbc);
 	assign = memnew(Button);
 	assign->set_flat(true);
@@ -3134,17 +3136,15 @@ void EditorPropertyResource::_update_property_bg() {
 		count_subinspectors = MIN(15, count_subinspectors);
 
 		add_theme_color_override("property_color", get_theme_color(SNAME("sub_inspector_property_color"), SNAME("Editor")));
-		add_theme_style_override("bg_selected", get_theme_stylebox("sub_inspector_property_bg_selected" + itos(count_subinspectors), SNAME("Editor")));
+		add_theme_style_override("bg_selected", get_theme_stylebox("sub_inspector_property_bg" + itos(count_subinspectors), SNAME("Editor")));
 		add_theme_style_override("bg", get_theme_stylebox("sub_inspector_property_bg" + itos(count_subinspectors), SNAME("Editor")));
 
-		add_theme_constant_override("font_offset", get_theme_constant(SNAME("sub_inspector_font_offset"), SNAME("Editor")));
 		add_theme_constant_override("v_separation", 0);
 	} else {
 		add_theme_color_override("property_color", get_theme_color(SNAME("property_color"), SNAME("EditorProperty")));
 		add_theme_style_override("bg_selected", get_theme_stylebox(SNAME("bg_selected"), SNAME("EditorProperty")));
 		add_theme_style_override("bg", get_theme_stylebox(SNAME("bg"), SNAME("EditorProperty")));
 		add_theme_constant_override("v_separation", get_theme_constant(SNAME("v_separation"), SNAME("EditorProperty")));
-		add_theme_constant_override("font_offset", get_theme_constant(SNAME("font_offset"), SNAME("EditorProperty")));
 	}
 
 	updating_theme = false;
diff --git a/editor/editor_resource_picker.cpp b/editor/editor_resource_picker.cpp
index 34aa7217fa..4d53ddb344 100644
--- a/editor/editor_resource_picker.cpp
+++ b/editor/editor_resource_picker.cpp
@@ -903,6 +903,8 @@ EditorResourcePicker::EditorResourcePicker() {
 	edit_button->connect("pressed", callable_mp(this, &EditorResourcePicker::_update_menu));
 	add_child(edit_button);
 	edit_button->connect("gui_input", callable_mp(this, &EditorResourcePicker::_button_input));
+
+	add_theme_constant_override("separation", 0);
 }
 
 // EditorScriptPicker
diff --git a/editor/editor_spin_slider.cpp b/editor/editor_spin_slider.cpp
index 09e407de57..e719ccd3e4 100644
--- a/editor/editor_spin_slider.cpp
+++ b/editor/editor_spin_slider.cpp
@@ -303,11 +303,11 @@ void EditorSpinSlider::_draw_spin_slider() {
 	Color lc = get_theme_color(is_read_only() ? SNAME("read_only_label_color") : SNAME("label_color"));
 
 	if (flat && !label.is_empty()) {
-		Color label_bg_color = get_theme_color(SNAME("dark_color_3"), SNAME("Editor"));
+		Ref<StyleBox> label_bg = get_theme_stylebox(SNAME("label_bg"), SNAME("EditorSpinSlider"));
 		if (rtl) {
-			draw_rect(Rect2(Vector2(size.width - (sb->get_offset().x * 2 + label_width), 0), Vector2(sb->get_offset().x * 2 + label_width, size.height)), label_bg_color);
+			draw_style_box(label_bg, Rect2(Vector2(size.width - (sb->get_offset().x * 2 + label_width), 0), Vector2(sb->get_offset().x * 2 + label_width, size.height)));
 		} else {
-			draw_rect(Rect2(Vector2(), Vector2(sb->get_offset().x * 2 + label_width, size.height)), label_bg_color);
+			draw_style_box(label_bg, Rect2(Vector2(), Vector2(sb->get_offset().x * 2 + label_width, size.height)));
 		}
 	}
 
diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp
index 0e6bdec08f..92dc3ae808 100644
--- a/editor/editor_themes.cpp
+++ b/editor/editor_themes.cpp
@@ -72,7 +72,7 @@ static Ref<StyleBoxFlat> make_flat_stylebox(Color p_color, float p_margin_left =
 	style->set_bg_color(p_color);
 	// Adjust level of detail based on the corners' effective sizes.
 	style->set_corner_detail(Math::ceil(1.5 * p_corner_width * EDSCALE));
-	style->set_corner_radius_all(p_corner_width);
+	style->set_corner_radius_all(p_corner_width * EDSCALE);
 	style->set_default_margin(SIDE_LEFT, p_margin_left * EDSCALE);
 	style->set_default_margin(SIDE_RIGHT, p_margin_right * EDSCALE);
 	style->set_default_margin(SIDE_BOTTOM, p_margin_bottom * EDSCALE);
@@ -890,6 +890,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_constant("item_start_padding", "PopupMenu", popup_menu_margin_size * EDSCALE);
 	theme->set_constant("item_end_padding", "PopupMenu", popup_menu_margin_size * EDSCALE);
 
+	// Sub-inspectors
 	for (int i = 0; i < 16; i++) {
 		Color si_base_color = accent_color;
 
@@ -897,51 +898,53 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 		si_base_color.set_hsv(Math::fmod(float(si_base_color.get_h() + hue_rotate), float(1.0)), si_base_color.get_s(), si_base_color.get_v());
 		si_base_color = accent_color.lerp(si_base_color, float(EDITOR_GET("docks/property_editor/subresource_hue_tint")));
 
-		Ref<StyleBoxFlat> sub_inspector_bg;
-
-		sub_inspector_bg = make_flat_stylebox(dark_color_1.lerp(si_base_color, 0.08), 2, 0, 2, 2);
-
-		sub_inspector_bg->set_border_width(SIDE_LEFT, 2);
-		sub_inspector_bg->set_border_width(SIDE_RIGHT, 2);
-		sub_inspector_bg->set_border_width(SIDE_BOTTOM, 2);
-		sub_inspector_bg->set_border_width(SIDE_TOP, 2);
-		sub_inspector_bg->set_default_margin(SIDE_LEFT, 3);
-		sub_inspector_bg->set_default_margin(SIDE_RIGHT, 3);
-		sub_inspector_bg->set_default_margin(SIDE_BOTTOM, 10);
-		sub_inspector_bg->set_default_margin(SIDE_TOP, 5);
+		// Sub-inspector background.
+		Ref<StyleBoxFlat> sub_inspector_bg = style_default->duplicate();
+		sub_inspector_bg->set_bg_color(dark_color_1.lerp(si_base_color, 0.08));
+		sub_inspector_bg->set_border_width_all(2 * EDSCALE);
 		sub_inspector_bg->set_border_color(si_base_color * Color(0.7, 0.7, 0.7, 0.8));
-		sub_inspector_bg->set_draw_center(true);
+		sub_inspector_bg->set_default_margin(SIDE_LEFT, 4 * EDSCALE);
+		sub_inspector_bg->set_default_margin(SIDE_RIGHT, 4 * EDSCALE);
+		sub_inspector_bg->set_default_margin(SIDE_BOTTOM, 4 * EDSCALE);
+		sub_inspector_bg->set_default_margin(SIDE_TOP, 4 * EDSCALE);
+		sub_inspector_bg->set_corner_radius(CORNER_TOP_LEFT, 0);
+		sub_inspector_bg->set_corner_radius(CORNER_TOP_RIGHT, 0);
 
 		theme->set_stylebox("sub_inspector_bg" + itos(i), "Editor", sub_inspector_bg);
 
-		Ref<StyleBoxFlat> bg_color;
-		bg_color.instantiate();
-		bg_color->set_bg_color(si_base_color * Color(0.7, 0.7, 0.7, 0.8));
-		bg_color->set_border_width_all(0);
-
-		Ref<StyleBoxFlat> bg_color_selected;
-		bg_color_selected.instantiate();
-		bg_color_selected->set_border_width_all(0);
-		bg_color_selected->set_bg_color(si_base_color * Color(0.8, 0.8, 0.8, 0.8));
+		// EditorProperty background while it has a sub-inspector open.
+		Ref<StyleBoxFlat> bg_color = make_flat_stylebox(si_base_color * Color(0.7, 0.7, 0.7, 0.8), 0, 0, 0, 0, corner_radius);
+		bg_color->set_anti_aliased(false);
+		bg_color->set_corner_radius(CORNER_BOTTOM_LEFT, 0);
+		bg_color->set_corner_radius(CORNER_BOTTOM_RIGHT, 0);
 
 		theme->set_stylebox("sub_inspector_property_bg" + itos(i), "Editor", bg_color);
-		theme->set_stylebox("sub_inspector_property_bg_selected" + itos(i), "Editor", bg_color_selected);
 	}
 
 	theme->set_color("sub_inspector_property_color", "Editor", dark_theme ? Color(1, 1, 1, 1) : Color(0, 0, 0, 1));
-	theme->set_constant("sub_inspector_font_offset", "Editor", 4 * EDSCALE);
 
 	// EditorSpinSlider.
 	theme->set_color("label_color", "EditorSpinSlider", font_color);
 	theme->set_color("read_only_label_color", "EditorSpinSlider", font_readonly_color);
 
+	Ref<StyleBoxFlat> editor_spin_label_bg = style_default->duplicate();
+	editor_spin_label_bg->set_bg_color(dark_color_3);
+	editor_spin_label_bg->set_border_width_all(0);
+	theme->set_stylebox("label_bg", "EditorSpinSlider", editor_spin_label_bg);
+
+	// EditorProperty
 	Ref<StyleBoxFlat> style_property_bg = style_default->duplicate();
 	style_property_bg->set_bg_color(highlight_color);
 	style_property_bg->set_border_width_all(0);
 
+	Ref<StyleBoxFlat> style_property_child_bg = style_default->duplicate();
+	style_property_child_bg->set_bg_color(dark_color_2);
+	style_property_child_bg->set_border_width_all(0);
+
 	theme->set_constant("font_offset", "EditorProperty", 8 * EDSCALE);
 	theme->set_stylebox("bg_selected", "EditorProperty", style_property_bg);
 	theme->set_stylebox("bg", "EditorProperty", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty)));
+	theme->set_stylebox("child_bg", "EditorProperty", style_property_child_bg);
 	theme->set_constant("v_separation", "EditorProperty", (extra_spacing + default_margin_size) * EDSCALE);
 	theme->set_color("warning_color", "EditorProperty", warning_color);
 	theme->set_color("property_color", "EditorProperty", property_color);
@@ -954,6 +957,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	style_property_group_note->set_bg_color(property_group_note_color);
 	theme->set_stylebox("bg_group_note", "EditorProperty", style_property_group_note);
 
+	// EditorInspectorSection
 	Color inspector_section_color = font_color.lerp(Color(0.5, 0.5, 0.5), 0.35);
 	theme->set_color("font_color", "EditorInspectorSection", inspector_section_color);
 
@@ -1056,11 +1060,11 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_color("prop_subsection", "Editor", prop_subsection_color);
 	theme->set_color("drop_position_color", "Tree", accent_color);
 
+	// EditorInspectorCategory
 	Ref<StyleBoxFlat> category_bg = style_default->duplicate();
-	// Make Trees easier to distinguish from other controls by using a darker background color.
 	category_bg->set_bg_color(prop_category_color);
 	category_bg->set_border_color(prop_category_color);
-	theme->set_stylebox("prop_category_style", "Editor", category_bg);
+	theme->set_stylebox("bg", "EditorInspectorCategory", category_bg);
 
 	// ItemList
 	Ref<StyleBoxFlat> style_itemlist_bg = style_default->duplicate();