Several visual improvements.

Added proper label sizing
Improved text editor status bar
Fixed some issues with ItemList and also some style fixes
Added background to color picker samples (the mrcdk fix)
Fixed slider ticks.
Added VS breakpoint and error styleboxes.

1 files changed, 85 insertions, 31 deletions

diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp
index b33c36867..19518fb25 100644
--- a/editor/editor_themes.cpp
+++ b/editor/editor_themes.cpp
@@ -37,9 +37,9 @@
 #include "modules/svg/image_loader_svg.h"
 #include "time.h"
 
-static Ref<StyleBoxTexture> make_stylebox(Ref<Texture> texture, float p_left, float p_top, float p_right, float p_botton, float p_margin_left = -1, float p_margin_top = -1, float p_margin_right = -1, float p_margin_botton = -1, bool p_draw_center = true) {
+static Ref<StyleBoxTexture> make_stylebox(Ref<Texture> p_texture, float p_left, float p_top, float p_right, float p_botton, float p_margin_left = -1, float p_margin_top = -1, float p_margin_right = -1, float p_margin_botton = -1, bool p_draw_center = true) {
 	Ref<StyleBoxTexture> style(memnew(StyleBoxTexture));
-	style->set_texture(texture);
+	style->set_texture(p_texture);
 	style->set_margin_size(MARGIN_LEFT, p_left * EDSCALE);
 	style->set_margin_size(MARGIN_RIGHT, p_right * EDSCALE);
 	style->set_margin_size(MARGIN_BOTTOM, p_botton * EDSCALE);
@@ -61,9 +61,9 @@ static Ref<StyleBoxEmpty> make_empty_stylebox(float p_margin_left = -1, float p_
 	return style;
 }
 
-static Ref<StyleBoxFlat> make_flat_stylebox(Color color, float p_margin_left = -1, float p_margin_top = -1, float p_margin_right = -1, float p_margin_bottom = -1) {
+static Ref<StyleBoxFlat> make_flat_stylebox(Color p_color, float p_margin_left = -1, float p_margin_top = -1, float p_margin_right = -1, float p_margin_bottom = -1) {
 	Ref<StyleBoxFlat> style(memnew(StyleBoxFlat));
-	style->set_bg_color(color);
+	style->set_bg_color(p_color);
 	style->set_default_margin(MARGIN_LEFT, p_margin_left * EDSCALE);
 	style->set_default_margin(MARGIN_RIGHT, p_margin_right * EDSCALE);
 	style->set_default_margin(MARGIN_BOTTOM, p_margin_bottom * EDSCALE);
@@ -71,12 +71,12 @@ static Ref<StyleBoxFlat> make_flat_stylebox(Color color, float p_margin_left = -
 	return style;
 }
 
-static Ref<StyleBoxLine> make_line_stylebox(Color color, int thickness = 1, float grow = 1, bool vertical = false) {
+static Ref<StyleBoxLine> make_line_stylebox(Color p_color, int p_thickness = 1, float p_grow = 1, bool p_vertical = false) {
 	Ref<StyleBoxLine> style(memnew(StyleBoxLine));
-	style->set_color(color);
-	style->set_grow(grow);
-	style->set_thickness(thickness);
-	style->set_vertical(vertical);
+	style->set_color(p_color);
+	style->set_grow(p_grow);
+	style->set_thickness(p_thickness);
+	style->set_vertical(p_vertical);
 	return style;
 }
 
@@ -86,7 +86,7 @@ static Ref<StyleBoxFlat> change_border_color(Ref<StyleBoxFlat> p_style, Color p_
 	return style;
 }
 
-Ref<ImageTexture> editor_generate_icon(int p_index, bool convert_color, float p_scale = EDSCALE, bool force_filter = false) {
+Ref<ImageTexture> editor_generate_icon(int p_index, bool p_convert_color, float p_scale = EDSCALE, bool p_force_filter = false) {
 
 	Ref<ImageTexture> icon = memnew(ImageTexture);
 	Ref<Image> img = memnew(Image);
@@ -94,9 +94,9 @@ Ref<ImageTexture> editor_generate_icon(int p_index, bool convert_color, float p_
 	// dumb gizmo check
 	bool is_gizmo = String(editor_icons_names[p_index]).begins_with("Gizmo");
 
-	ImageLoaderSVG::create_image_from_string(img, editor_icons_sources[p_index], p_scale, true, convert_color);
+	ImageLoaderSVG::create_image_from_string(img, editor_icons_sources[p_index], p_scale, true, p_convert_color);
 
-	if ((p_scale - (float)((int)p_scale)) > 0.0 || is_gizmo || force_filter)
+	if ((p_scale - (float)((int)p_scale)) > 0.0 || is_gizmo || p_force_filter)
 		icon->create_from_image(img); // in this case filter really helps
 	else
 		icon->create_from_image(img, 0);
@@ -108,11 +108,11 @@ Ref<ImageTexture> editor_generate_icon(int p_index, bool convert_color, float p_
 #define ADD_CONVERT_COLOR(dictionary, old_color, new_color) dictionary[Color::html(old_color)] = Color::html(new_color)
 #endif
 
-void editor_register_and_generate_icons(Ref<Theme> p_theme, bool dark_theme = true, int p_thumb_size = 32, bool only_thumbs = false) {
+void editor_register_and_generate_icons(Ref<Theme> p_theme, bool p_dark_theme = true, int p_thumb_size = 32, bool p_only_thumbs = false) {
 
 #ifdef SVG_ENABLED
 	Dictionary dark_icon_color_dictionary;
-	if (!dark_theme) {
+	if (!p_dark_theme) {
 		//convert color:                              FROM       TO
 		ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#e0e0e0", "#4f4f4f"); // common icon color
 		ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#ffffff", "#000000"); // white
@@ -179,7 +179,7 @@ void editor_register_and_generate_icons(Ref<Theme> p_theme, bool dark_theme = tr
 	ImageLoaderSVG::set_convert_colors(&dark_icon_color_dictionary);
 
 	// generate icons
-	if (!only_thumbs)
+	if (!p_only_thumbs)
 		for (int i = 0; i < editor_icons_count; i++) {
 			List<String>::Element *is_exception = exceptions.find(editor_icons_names[i]);
 			if (is_exception) exceptions.erase(is_exception);
@@ -195,7 +195,7 @@ void editor_register_and_generate_icons(Ref<Theme> p_theme, bool dark_theme = tr
 			int index = editor_bg_thumbs_indices[i];
 			List<String>::Element *is_exception = exceptions.find(editor_icons_names[index]);
 			if (is_exception) exceptions.erase(is_exception);
-			Ref<ImageTexture> icon = editor_generate_icon(index, !dark_theme && !is_exception, scale, force_filter);
+			Ref<ImageTexture> icon = editor_generate_icon(index, !p_dark_theme && !is_exception, scale, force_filter);
 			p_theme->set_icon(editor_icons_names[index], "EditorIcons", icon);
 		}
 	} else {
@@ -204,7 +204,7 @@ void editor_register_and_generate_icons(Ref<Theme> p_theme, bool dark_theme = tr
 			int index = editor_md_thumbs_indices[i];
 			List<String>::Element *is_exception = exceptions.find(editor_icons_names[index]);
 			if (is_exception) exceptions.erase(is_exception);
-			Ref<ImageTexture> icon = editor_generate_icon(index, !dark_theme && !is_exception, scale, force_filter);
+			Ref<ImageTexture> icon = editor_generate_icon(index, !p_dark_theme && !is_exception, scale, force_filter);
 			p_theme->set_icon(editor_icons_names[index], "EditorIcons", icon);
 		}
 	}
@@ -250,7 +250,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 			preset_contrast = default_contrast;
 		} break;
 		case 1: { // Grey
-			preset_accent_color = Color::html("#3e3e3e");
+			preset_accent_color = Color::html("#b8e4ff");
 			preset_base_color = Color::html("#3d3d3d");
 			preset_contrast = 0.2;
 		} break;
@@ -269,6 +269,11 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 			preset_base_color = Color::html("#ffffff");
 			preset_contrast = 0.08;
 		} break;
+		case 5: { // Alien
+			preset_accent_color = Color::html("#1bfe99");
+			preset_base_color = Color::html("#2f373f");
+			preset_contrast = 0.25;
+		}
 		default: { // Custom
 			accent_color = EDITOR_DEF("interface/theme/accent_color", Color::html("#699ce8"));
 			base_color = EDITOR_DEF("interface/theme/base_color", Color::html("#323b4f"));
@@ -276,7 +281,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 		}
 	}
 
-	if (preset != 5) {
+	if (preset != 6) {
 		accent_color = preset_accent_color;
 		base_color = preset_base_color;
 		contrast = preset_contrast;
@@ -331,7 +336,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_color("mono_color", "Editor", mono_color);
 
 	Color success_color = accent_color.linear_interpolate(Color(0.2, 1, 0.2), 0.6) * 1.2;
-	Color warning_color = accent_color.linear_interpolate(Color(1, 1, 0), 0.7);
+	Color warning_color = accent_color.linear_interpolate(Color(1, 1, 0), 0.7) * 1.2;
 	Color error_color = accent_color.linear_interpolate(Color(1, 0, 0), 0.8) * 1.7;
 	if (!dark_theme) {
 		// yellow on white themes is a P.I.T.A.
@@ -413,16 +418,22 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 
 	// style for windows, popups, etc..
 	Ref<StyleBoxFlat> style_popup = style_default->duplicate();
-	style_popup->set_default_margin(MARGIN_LEFT, default_margin_size * EDSCALE * 2);
-	style_popup->set_default_margin(MARGIN_TOP, default_margin_size * EDSCALE * 2);
-	style_popup->set_default_margin(MARGIN_RIGHT, default_margin_size * EDSCALE * 2);
-	style_popup->set_default_margin(MARGIN_BOTTOM, default_margin_size * EDSCALE * 2);
+	const int popup_margin_size = default_margin_size * EDSCALE * 2;
+	style_popup->set_default_margin(MARGIN_LEFT, popup_margin_size);
+	style_popup->set_default_margin(MARGIN_TOP, popup_margin_size);
+	style_popup->set_default_margin(MARGIN_RIGHT, popup_margin_size);
+	style_popup->set_default_margin(MARGIN_BOTTOM, popup_margin_size);
 	style_popup->set_border_color_all(contrast_color_1);
 	style_popup->set_border_width_all(MAX(EDSCALE, border_width));
 	const Color shadow_color = Color(0, 0, 0, dark_theme ? 0.3 : 0.1);
 	style_popup->set_shadow_color(shadow_color);
 	style_popup->set_shadow_size(4 * EDSCALE);
 
+	Ref<StyleBoxLine> style_popup_separator(memnew(StyleBoxLine));
+	style_popup_separator->set_color(separator_color);
+	style_popup_separator->set_grow(popup_margin_size - MAX(EDSCALE, border_width));
+	style_popup_separator->set_thickness(MAX(EDSCALE, border_width));
+
 	Ref<StyleBoxEmpty> style_empty = make_empty_stylebox(default_margin_size, default_margin_size, default_margin_size, default_margin_size);
 
 	// Tabs
@@ -461,7 +472,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_stylebox("ScriptEditor", "EditorStyles", make_empty_stylebox(0, 0, 0, 0));
 
 	// Play button group
-	theme->set_stylebox("PlayButtonPanel", "EditorStyles", style_empty); //make_stylebox(theme->get_icon("GuiPlayButtonGroup", "EditorIcons"), 16, 16, 16, 16, 8, 4, 8, 4));
+	theme->set_stylebox("PlayButtonPanel", "EditorStyles", style_empty);
 
 	//MenuButton
 	Ref<StyleBoxFlat> style_menu_hover_border = style_widget->duplicate();
@@ -556,7 +567,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	// PopupMenu
 	Ref<StyleBoxFlat> style_popup_menu = style_popup;
 	theme->set_stylebox("panel", "PopupMenu", style_popup_menu);
-	theme->set_stylebox("separator", "PopupMenu", make_line_stylebox(separator_color, MAX(EDSCALE, border_width), 8 - MAX(EDSCALE, border_width)));
+	theme->set_stylebox("separator", "PopupMenu", style_popup_separator);
 	theme->set_color("font_color", "PopupMenu", font_color);
 	theme->set_color("font_color_hover", "PopupMenu", font_color_hl);
 	theme->set_color("font_color_accel", "PopupMenu", font_color_disabled);
@@ -574,23 +585,32 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	style_tree_bg->set_border_color_all(dark_color_3);
 	theme->set_stylebox("bg", "Tree", style_tree_bg);
 
+	const Color guide_color = Color(mono_color.r, mono_color.g, mono_color.b, 0.05);
 	// Tree
 	theme->set_icon("checked", "Tree", theme->get_icon("GuiChecked", "EditorIcons"));
 	theme->set_icon("unchecked", "Tree", theme->get_icon("GuiUnchecked", "EditorIcons"));
 	theme->set_icon("arrow", "Tree", theme->get_icon("GuiTreeArrowDown", "EditorIcons"));
 	theme->set_icon("arrow_collapsed", "Tree", theme->get_icon("GuiTreeArrowRight", "EditorIcons"));
 	theme->set_icon("select_arrow", "Tree", theme->get_icon("GuiDropdown", "EditorIcons"));
+	theme->set_icon("select_option", "Tree", theme->get_icon("GuiTreeOption", "EditorIcons"));
 	theme->set_stylebox("bg_focus", "Tree", style_focus);
 	theme->set_stylebox("custom_button", "Tree", make_empty_stylebox());
 	theme->set_stylebox("custom_button_pressed", "Tree", make_empty_stylebox());
 	theme->set_stylebox("custom_button_hover", "Tree", style_widget);
 	theme->set_color("custom_button_font_highlight", "Tree", font_color_hl);
 	theme->set_color("font_color", "Tree", font_color);
-	theme->set_color("font_color_selected", "Tree", font_color);
+	theme->set_color("font_color_selected", "Tree", mono_color);
 	theme->set_color("title_button_color", "Tree", font_color);
-	theme->set_color("guide_color", "Tree", Color(mono_color.r, mono_color.g, mono_color.b, 0.05));
+	theme->set_color("guide_color", "Tree", guide_color);
 	theme->set_color("drop_position_color", "Tree", accent_color);
 	theme->set_constant("vseparation", "Tree", (extra_spacing + default_margin_size) * EDSCALE);
+	theme->set_constant("hseparation", "Tree", (extra_spacing + default_margin_size) * EDSCALE);
+	theme->set_constant("guide_width", "Tree", border_width);
+	theme->set_constant("item_margin", "Tree", 3 * default_margin_size * EDSCALE);
+	theme->set_constant("button_margin", "Tree", default_margin_size * EDSCALE);
+	theme->set_constant("draw_relationship_lines", "Tree", 0);
+	theme->set_constant("scroll_border", "Tree", default_margin_size * EDSCALE);
+	theme->set_constant("scroll_speed", "Tree", 12);
 
 	Ref<StyleBoxFlat> style_tree_btn = style_default->duplicate();
 	style_tree_btn->set_bg_color(contrast_color_1);
@@ -643,8 +663,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_stylebox("selected", "ItemList", style_tree_selected);
 	theme->set_stylebox("bg_focus", "ItemList", style_focus);
 	theme->set_stylebox("bg", "ItemList", style_itemlist_bg);
-	theme->set_constant("vseparation", "ItemList", (extra_spacing + default_margin_size) * EDSCALE);
 	theme->set_color("font_color", "ItemList", font_color);
+	theme->set_color("font_color_selected", "ItemList", mono_color);
+	theme->set_color("guide_color", "ItemList", guide_color);
+	theme->set_constant("vseparation", "ItemList", 2);
+	theme->set_constant("hseparation", "ItemList", 2);
+	theme->set_constant("icon_margin", "ItemList", default_margin_size * EDSCALE);
+	theme->set_constant("line_separation", "ItemList", 2 * EDSCALE);
 
 	// Tabs & TabContainer
 	theme->set_stylebox("tab_fg", "TabContainer", style_tab_selected);
@@ -684,7 +709,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_stylebox("panel", "TabContainer", style_content_panel);
 	theme->set_stylebox("Content", "EditorStyles", style_content_panel_vp);
 
-	// Separators (no separators)
+	// Separators
 	theme->set_stylebox("separator", "HSeparator", make_line_stylebox(separator_color, border_width));
 	theme->set_stylebox("separator", "VSeparator", make_line_stylebox(separator_color, border_width, 0, true));
 
@@ -829,7 +854,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_stylebox("panel", "Panel", make_flat_stylebox(dark_color_1, 6, 4, 6, 4));
 
 	// Label
+	theme->set_stylebox("normal", "Label", style_empty);
 	theme->set_color("font_color", "Label", font_color);
+	theme->set_color("font_color_shadow", "Label", Color(0, 0, 0, 0));
+	theme->set_constant("shadow_offset_x", "Label", 1 * EDSCALE);
+	theme->set_constant("shadow_offset_y", "Label", 1 * EDSCALE);
+	theme->set_constant("shadow_as_outline", "Label", 0 * EDSCALE);
+	theme->set_constant("line_spacing", "Label", 3 * EDSCALE);
 
 	// TooltipPanel
 	Ref<StyleBoxFlat> style_tooltip = style_popup->duplicate();
@@ -868,7 +899,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	Ref<StyleBoxFlat> graphsb = make_flat_stylebox(Color(0, 0, 0, 0.3), gn_margin_side, 24, gn_margin_side, 5);
 	graphsb->set_border_width_all(border_width);
 	graphsb->set_border_color_all(Color(1, 1, 1, 0.9));
-	Ref<StyleBoxFlat> graphsbselected = make_flat_stylebox(Color(0, 0, 0, 0.4), gn_margin_side, 24, gn_margin_side, 5);
+	Ref<StyleBoxFlat> graphsbselected = make_flat_stylebox(Color(0, 0, 0, 0.6), gn_margin_side, 24, gn_margin_side, 5);
 	graphsbselected->set_border_width_all(border_width);
 	graphsbselected->set_border_color_all(Color(accent_color.r, accent_color.g, accent_color.b, 0.9));
 	graphsbselected->set_shadow_size(8 * EDSCALE);
@@ -879,6 +910,14 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	Ref<StyleBoxFlat> graphsbcommentselected = make_flat_stylebox(Color(0, 0, 0, 0.4), gn_margin_side, 24, gn_margin_side, 5);
 	graphsbcommentselected->set_border_width_all(border_width);
 	graphsbcommentselected->set_border_color_all(Color(1, 1, 1, 0.9));
+	Ref<StyleBoxFlat> graphsbbreakpoint = graphsbselected->duplicate();
+	graphsbbreakpoint->set_draw_center(false);
+	graphsbbreakpoint->set_border_color_all(warning_color);
+	graphsbbreakpoint->set_shadow_color(warning_color * Color(1.0, 1.0, 1.0, 0.1));
+	Ref<StyleBoxFlat> graphsbposition = graphsbselected->duplicate();
+	graphsbposition->set_draw_center(false);
+	graphsbposition->set_border_color_all(error_color);
+	graphsbposition->set_shadow_color(error_color * Color(1.0, 1.0, 1.0, 0.2));
 
 	if (use_gn_headers) {
 		graphsb->set_border_width(MARGIN_TOP, 24 * EDSCALE);
@@ -891,6 +930,8 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_stylebox("selectedframe", "GraphNode", graphsbselected);
 	theme->set_stylebox("comment", "GraphNode", graphsbcomment);
 	theme->set_stylebox("commentfocus", "GraphNode", graphsbcommentselected);
+	theme->set_stylebox("breakpoint", "GraphNode", graphsbbreakpoint);
+	theme->set_stylebox("position", "GraphNode", graphsbposition);
 	theme->set_constant("port_offset", "GraphNode", 14 * EDSCALE);
 	theme->set_constant("title_h_offset", "GraphNode", -16 * EDSCALE);
 	theme->set_constant("close_h_offset", "GraphNode", 20 * EDSCALE);
@@ -903,8 +944,21 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_constant("vseperation", "GridContainer", (extra_spacing + default_margin_size) * EDSCALE);
 
 	// FileDialog
+	theme->set_icon("folder", "FileDialog", theme->get_icon("Folder", "EditorIcons"));
 	theme->set_color("files_disabled", "FileDialog", font_color_disabled);
 
+	// color picker
+	theme->set_constant("margin", "ColorPicker", popup_margin_size);
+	theme->set_constant("sv_width", "ColorPicker", 256 * EDSCALE);
+	theme->set_constant("sv_height", "ColorPicker", 256 * EDSCALE);
+	theme->set_constant("h_width", "ColorPicker", 30 * EDSCALE);
+	theme->set_constant("label_width", "ColorPicker", 10 * EDSCALE);
+	theme->set_icon("screen_picker", "ColorPicker", theme->get_icon("ColorPick", "EditorIcons"));
+	theme->set_icon("add_preset", "ColorPicker", theme->get_icon("Add", "EditorIcons"));
+	theme->set_icon("preset_bg", "ColorPicker", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
+
+	theme->set_icon("bg", "ColorPickerButton", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
+
 	// adaptive script theme constants
 	// for comments and elements with lower relevance
 	const Color dim_color = Color(font_color.r, font_color.g, font_color.b, 0.5);