Merge pull request #49774 from pycbouh/editor-theme-editor-overhaul-3.x

[3.x] Overhaul the theme editor and improve user experience

editor/editor_themes.cpp

@@ -904,7 +904,16 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	style_content_panel->set_default_margin(MARGIN_BOTTOM, margin_size_extra * EDSCALE);
 	style_content_panel->set_default_margin(MARGIN_LEFT, margin_size_extra * EDSCALE);
 
-	// this is the stylebox used in 3d and 2d viewports (no borders)
+	// These styleboxes can be used on tabs against the base color background (e.g. nested tabs).
+	Ref<StyleBoxFlat> style_tab_selected_odd = style_tab_selected->duplicate();
+	style_tab_selected_odd->set_bg_color(color_disabled_bg);
+	theme->set_stylebox("tab_selected_odd", "TabContainer", style_tab_selected_odd);
+
+	Ref<StyleBoxFlat> style_content_panel_odd = style_content_panel->duplicate();
+	style_content_panel_odd->set_bg_color(color_disabled_bg);
+	theme->set_stylebox("panel_odd", "TabContainer", style_content_panel_odd);
+
+	// This stylebox is used in 3d and 2d viewports (no borders).
 	Ref<StyleBoxFlat> style_content_panel_vp = style_content_panel->duplicate();
 	style_content_panel_vp->set_default_margin(MARGIN_LEFT, border_width * 2);
 	style_content_panel_vp->set_default_margin(MARGIN_TOP, default_margin_size * EDSCALE);
@@ -913,6 +922,14 @@ 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);
 
+	// This stylebox is used by preview tabs in the Theme Editor.
+	Ref<StyleBoxFlat> style_theme_preview_tab = style_tab_selected_odd->duplicate();
+	style_theme_preview_tab->set_expand_margin_size(MARGIN_BOTTOM, 3 * EDSCALE);
+	theme->set_stylebox("ThemeEditorPreviewFG", "EditorStyles", style_theme_preview_tab);
+	Ref<StyleBoxFlat> style_theme_preview_bg_tab = style_tab_unselected->duplicate();
+	style_theme_preview_bg_tab->set_expand_margin_size(MARGIN_BOTTOM, 2 * EDSCALE);
+	theme->set_stylebox("ThemeEditorPreviewBG", "EditorStyles", style_theme_preview_bg_tab);
+
 	// 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, 0, true));
@@ -1247,6 +1264,15 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	style_info_3d_viewport->set_border_width_all(0);
 	theme->set_stylebox("Information3dViewport", "EditorStyles", style_info_3d_viewport);
 
+	// Theme editor.
+	theme->set_color("preview_picker_overlay_color", "ThemeEditor", Color(0.1, 0.1, 0.1, 0.25));
+	Color theme_preview_picker_bg_color = accent_color;
+	theme_preview_picker_bg_color.a = 0.2;
+	Ref<StyleBoxFlat> theme_preview_picker_sb = make_flat_stylebox(theme_preview_picker_bg_color, 0, 0, 0, 0);
+	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);
+
 	// 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);

editor/plugins/theme_editor_plugin.h

@@ -34,8 +34,10 @@
 #include "scene/gui/margin_container.h"
 #include "scene/gui/option_button.h"
 #include "scene/gui/scroll_container.h"
+#include "scene/gui/tabs.h"
 #include "scene/gui/texture_rect.h"
 #include "scene/resources/theme.h"
+#include "theme_editor_preview.h"
 
 #include "editor/editor_node.h"
 
@@ -253,21 +255,115 @@ public:
 	ThemeItemEditorDialog();
 };
 
+class ThemeTypeEditor : public MarginContainer {
+	GDCLASS(ThemeTypeEditor, MarginContainer);
+
+	Ref<Theme> edited_theme;
+	String edited_type;
+	bool updating = false;
+
+	struct LeadingStylebox {
+		bool pinned = false;
+		StringName item_name;
+		Ref<StyleBox> stylebox;
+		Ref<StyleBox> ref_stylebox;
+	};
+
+	LeadingStylebox leading_stylebox;
+
+	OptionButton *theme_type_list;
+	Button *add_type_button;
+	ConfirmationDialog *add_type_dialog;
+	LineEdit *add_type_filter;
+	ItemList *add_type_options;
+
+	CheckButton *show_default_items_button;
+
+	TabContainer *data_type_tabs;
+	VBoxContainer *color_items_list;
+	VBoxContainer *constant_items_list;
+	VBoxContainer *font_items_list;
+	VBoxContainer *icon_items_list;
+	VBoxContainer *stylebox_items_list;
+
+	Vector<Control *> focusables;
+	Timer *update_debounce_timer;
+
+	VBoxContainer *_create_item_list(Theme::DataType p_data_type);
+	void _update_type_list();
+	void _update_type_list_debounced();
+	void _update_add_type_options(const String &p_filter = "");
+	OrderedHashMap<StringName, bool> _get_type_items(String p_type_name, void (Theme::*get_list_func)(StringName, List<StringName> *) const, bool include_default);
+	HBoxContainer *_create_property_control(Theme::DataType p_data_type, String p_item_name, bool p_editable);
+	void _add_focusable(Control *p_control);
+	void _update_type_items();
+
+	void _list_type_selected(int p_index);
+	void _select_type(String p_type_name);
+	void _add_type_button_cbk();
+	void _add_type_filter_cbk(const String &p_value);
+	void _add_type_options_cbk(int p_index);
+	void _add_type_dialog_confirmed();
+	void _add_type_dialog_entered(const String &p_value);
+	void _add_type_dialog_activated(int p_index);
+	void _add_default_type_items();
+
+	void _item_add_cbk(int p_data_type, Control *p_control);
+	void _item_add_lineedit_cbk(String p_value, int p_data_type, Control *p_control);
+	void _item_override_cbk(int p_data_type, String p_item_name);
+	void _item_remove_cbk(int p_data_type, String p_item_name);
+	void _item_rename_cbk(int p_data_type, String p_item_name, Control *p_control);
+	void _item_rename_confirmed(int p_data_type, String p_item_name, Control *p_control);
+	void _item_rename_entered(String p_value, int p_data_type, String p_item_name, Control *p_control);
+	void _item_rename_canceled(int p_data_type, String p_item_name, Control *p_control);
+
+	void _color_item_changed(Color p_value, String p_item_name);
+	void _constant_item_changed(float p_value, String p_item_name);
+	void _edit_resource_item(RES p_resource);
+	void _font_item_changed(Ref<Font> p_value, String p_item_name);
+	void _icon_item_changed(Ref<Texture> p_value, String p_item_name);
+	void _stylebox_item_changed(Ref<StyleBox> p_value, String p_item_name);
+	void _pin_leading_stylebox(Control *p_editor, String p_item_name);
+	void _unpin_leading_stylebox();
+	void _update_stylebox_from_leading();
+
+protected:
+	void _notification(int p_what);
+	static void _bind_methods();
+
+public:
+	void set_edited_theme(const Ref<Theme> &p_theme);
+	void select_type(String p_type_name);
+
+	ThemeTypeEditor();
+};
+
 class ThemeEditor : public VBoxContainer {
 	GDCLASS(ThemeEditor, VBoxContainer);
 
 	Ref<Theme> theme;
-	double time_left = 0;
 
+	Tabs *preview_tabs;
+	PanelContainer *preview_tabs_content;
+	Button *add_preview_button;
+	EditorFileDialog *preview_scene_dialog;
+
+	ThemeTypeEditor *theme_type_editor;
+
+	Label *theme_name;
 	ThemeItemEditorDialog *theme_edit_dialog;
 
+	void _theme_save_button_cbk(bool p_save_as);
 	void _theme_edit_button_cbk();
 
-	Panel *main_panel;
-	MarginContainer *main_container;
-
-	void _propagate_redraw(Control *p_at);
-	void _refresh_interval();
+	void _add_preview_button_cbk();
+	void _preview_scene_dialog_cbk(const String &p_path);
+	void _add_preview_tab(ThemeEditorPreview *p_preview_tab, const String &p_preview_name, const Ref<Texture> &p_icon);
+	void _change_preview_tab(int p_tab);
+	void _remove_preview_tab(int p_tab);
+	void _remove_preview_tab_invalid(Node *p_tab_control);
+	void _update_preview_tab(Node *p_tab_control);
+	void _preview_control_picked(String p_class_name);
 
 protected:
 	void _notification(int p_what);
@@ -275,6 +371,7 @@ protected:
 
 public:
 	void edit(const Ref<Theme> &p_theme);
+	Ref<Theme> get_edited_theme();
 
 	ThemeEditor();
 };

editor/plugins/theme_editor_preview.cpp

@@ -0,0 +1,472 @@
+/*************************************************************************/
+/*  theme_editor_preview.cpp                                             */
+/*************************************************************************/
+/*                       This file is part of:                           */
+/*                           GODOT ENGINE                                */
+/*                      https://godotengine.org                          */
+/*************************************************************************/
+/* Copyright (c) 2007-2021 Juan Linietsky, Ariel Manzur.                 */
+/* Copyright (c) 2014-2021 Godot Engine contributors (cf. AUTHORS.md).   */
+/*                                                                       */
+/* Permission is hereby granted, free of charge, to any person obtaining */
+/* a copy of this software and associated documentation files (the       */
+/* "Software"), to deal in the Software without restriction, including   */
+/* without limitation the rights to use, copy, modify, merge, publish,   */
+/* distribute, sublicense, and/or sell copies of the Software, and to    */
+/* permit persons to whom the Software is furnished to do so, subject to */
+/* the following conditions:                                             */
+/*                                                                       */
+/* The above copyright notice and this permission notice shall be        */
+/* included in all copies or substantial portions of the Software.       */
+/*                                                                       */
+/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,       */
+/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF    */
+/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.*/
+/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY  */
+/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,  */
+/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE     */
+/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                */
+/*************************************************************************/
+
+#include "theme_editor_preview.h"
+
+#include "core/math/math_funcs.h"
+#include "core/os/input.h"
+#include "scene/resources/packed_scene.h"
+
+#include "editor/editor_scale.h"
+
+void ThemeEditorPreview::set_preview_theme(const Ref<Theme> &p_theme) {
+	preview_content->set_theme(p_theme);
+}
+
+void ThemeEditorPreview::add_preview_overlay(Control *p_overlay) {
+	preview_overlay->add_child(p_overlay);
+	p_overlay->hide();
+}
+
+void ThemeEditorPreview::_propagate_redraw(Control *p_at) {
+	p_at->notification(NOTIFICATION_THEME_CHANGED);
+	p_at->minimum_size_changed();
+	p_at->update();
+	for (int i = 0; i < p_at->get_child_count(); i++) {
+		Control *a = Object::cast_to<Control>(p_at->get_child(i));
+		if (a) {
+			_propagate_redraw(a);
+		}
+	}
+}
+
+void ThemeEditorPreview::_refresh_interval() {
+	// In case the project settings have changed.
+	preview_bg->set_frame_color(GLOBAL_GET("rendering/environment/default_clear_color"));
+
+	_propagate_redraw(preview_bg);
+	_propagate_redraw(preview_content);
+}
+
+void ThemeEditorPreview::_preview_visibility_changed() {
+	set_process(is_visible());
+}
+
+void ThemeEditorPreview::_picker_button_cbk() {
+	picker_overlay->set_visible(picker_button->is_pressed());
+}
+
+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++) {
+		Control *cc = Object::cast_to<Control>(p_parent->get_child(i));
+		if (!cc || !cc->is_visible()) {
+			continue;
+		}
+
+		Rect2 crect = cc->get_rect();
+		if (crect.has_point(p_mouse_position)) {
+			// Check if there is a child control under mouse.
+			if (cc->get_child_count() > 0) {
+				found = _find_hovered_control(cc, p_mouse_position - cc->get_position());
+			}
+
+			// If there are no applicable children, use the control itself.
+			if (!found) {
+				found = cc;
+			}
+			break;
+		}
+	}
+
+	return found;
+}
+
+void ThemeEditorPreview::_draw_picker_overlay() {
+	if (!picker_button->is_pressed()) {
+		return;
+	}
+
+	picker_overlay->draw_rect(Rect2(Vector2(0.0, 0.0), picker_overlay->get_size()), get_color("preview_picker_overlay_color", "ThemeEditor"));
+	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);
+	}
+}
+
+void ThemeEditorPreview::_gui_input_picker_overlay(const Ref<InputEvent> &p_event) {
+	if (!picker_button->is_pressed()) {
+		return;
+	}
+
+	Ref<InputEventMouseButton> mb = p_event;
+
+	if (mb.is_valid() && mb->is_pressed() && mb->get_button_index() == BUTTON_LEFT) {
+		if (hovered_control) {
+			StringName theme_type = hovered_control->get_class_name();
+
+			emit_signal("control_picked", theme_type);
+			picker_button->set_pressed(false);
+			picker_overlay->set_visible(false);
+		}
+	}
+
+	Ref<InputEventMouseMotion> mm = p_event;
+
+	if (mm.is_valid()) {
+		Vector2 mp = preview_content->get_local_mouse_position();
+		hovered_control = _find_hovered_control(preview_content, mp);
+		picker_overlay->update();
+	}
+}
+
+void ThemeEditorPreview::_notification(int p_what) {
+	switch (p_what) {
+		case NOTIFICATION_ENTER_TREE: {
+			if (is_visible_in_tree()) {
+				set_process(true);
+			}
+
+			connect("visibility_changed", this, "_preview_visibility_changed");
+			FALLTHROUGH;
+		}
+		case NOTIFICATION_THEME_CHANGED: {
+			picker_button->set_icon(get_icon("ColorPick", "EditorIcons"));
+		} break;
+		case NOTIFICATION_PROCESS: {
+			time_left -= get_process_delta_time();
+			if (time_left < 0) {
+				time_left = 1.5;
+				_refresh_interval();
+			}
+		} break;
+	}
+}
+
+void ThemeEditorPreview::_bind_methods() {
+	// Internal binds.
+	ClassDB::bind_method("_picker_button_cbk", &ThemeEditorPreview::_picker_button_cbk);
+	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);
+
+	// Public binds.
+	ADD_SIGNAL(MethodInfo("control_picked", PropertyInfo(Variant::STRING, "class_name")));
+}
+
+ThemeEditorPreview::ThemeEditorPreview() {
+	preview_toolbar = memnew(HBoxContainer);
+	add_child(preview_toolbar);
+
+	picker_button = memnew(Button);
+	preview_toolbar->add_child(picker_button);
+	picker_button->set_flat(true);
+	picker_button->set_toggle_mode(true);
+	picker_button->set_tooltip(TTR("Toggle the control picker, allowing to visually select control types for edit."));
+	picker_button->connect("pressed", this, "_picker_button_cbk");
+
+	MarginContainer *preview_body = memnew(MarginContainer);
+	preview_body->set_custom_minimum_size(Size2(480, 0) * EDSCALE);
+	preview_body->set_v_size_flags(SIZE_EXPAND_FILL);
+	add_child(preview_body);
+
+	ScrollContainer *preview_container = memnew(ScrollContainer);
+	preview_container->set_enable_v_scroll(true);
+	preview_container->set_enable_h_scroll(true);
+	preview_body->add_child(preview_container);
+
+	MarginContainer *preview_root = memnew(MarginContainer);
+	preview_container->add_child(preview_root);
+	preview_root->set_theme(Theme::get_default());
+	preview_root->set_clip_contents(true);
+	preview_root->set_custom_minimum_size(Size2(450, 0) * EDSCALE);
+	preview_root->set_v_size_flags(SIZE_EXPAND_FILL);
+	preview_root->set_h_size_flags(SIZE_EXPAND_FILL);
+
+	preview_bg = memnew(ColorRect);
+	preview_bg->set_anchors_and_margins_preset(PRESET_WIDE);
+	preview_bg->set_frame_color(GLOBAL_GET("rendering/environment/default_clear_color"));
+	preview_root->add_child(preview_bg);
+
+	preview_content = memnew(MarginContainer);
+	preview_root->add_child(preview_content);
+	preview_content->add_constant_override("margin_right", 4 * EDSCALE);
+	preview_content->add_constant_override("margin_top", 4 * EDSCALE);
+	preview_content->add_constant_override("margin_left", 4 * EDSCALE);
+	preview_content->add_constant_override("margin_bottom", 4 * EDSCALE);
+
+	preview_overlay = memnew(MarginContainer);
+	preview_overlay->set_mouse_filter(MOUSE_FILTER_IGNORE);
+	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");
+}
+
+DefaultThemeEditorPreview::DefaultThemeEditorPreview() {
+	Panel *main_panel = memnew(Panel);
+	preview_content->add_child(main_panel);
+
+	MarginContainer *main_mc = memnew(MarginContainer);
+	main_mc->add_constant_override("margin_right", 4 * EDSCALE);
+	main_mc->add_constant_override("margin_top", 4 * EDSCALE);
+	main_mc->add_constant_override("margin_left", 4 * EDSCALE);
+	main_mc->add_constant_override("margin_bottom", 4 * EDSCALE);
+	preview_content->add_child(main_mc);
+
+	HBoxContainer *main_hb = memnew(HBoxContainer);
+	main_mc->add_child(main_hb);
+	main_hb->add_constant_override("separation", 20 * EDSCALE);
+
+	VBoxContainer *first_vb = memnew(VBoxContainer);
+	main_hb->add_child(first_vb);
+	first_vb->set_h_size_flags(SIZE_EXPAND_FILL);
+	first_vb->add_constant_override("separation", 10 * EDSCALE);
+
+	first_vb->add_child(memnew(Label("Label")));
+
+	first_vb->add_child(memnew(Button("Button")));
+	Button *bt = memnew(Button);
+	bt->set_text(TTR("Toggle Button"));
+	bt->set_toggle_mode(true);
+	bt->set_pressed(true);
+	first_vb->add_child(bt);
+	bt = memnew(Button);
+	bt->set_text(TTR("Disabled Button"));
+	bt->set_disabled(true);
+	first_vb->add_child(bt);
+	Button *tb = memnew(Button);
+	tb->set_flat(true);
+	tb->set_text("Button");
+	first_vb->add_child(tb);
+
+	CheckButton *cb = memnew(CheckButton);
+	cb->set_text("CheckButton");
+	first_vb->add_child(cb);
+	CheckBox *cbx = memnew(CheckBox);
+	cbx->set_text("CheckBox");
+	first_vb->add_child(cbx);
+
+	MenuButton *test_menu_button = memnew(MenuButton);
+	test_menu_button->set_text("MenuButton");
+	test_menu_button->get_popup()->add_item(TTR("Item"));
+	test_menu_button->get_popup()->add_item(TTR("Disabled Item"));
+	test_menu_button->get_popup()->set_item_disabled(1, true);
+	test_menu_button->get_popup()->add_separator();
+	test_menu_button->get_popup()->add_check_item(TTR("Check Item"));
+	test_menu_button->get_popup()->add_check_item(TTR("Checked Item"));
+	test_menu_button->get_popup()->set_item_checked(4, true);
+	test_menu_button->get_popup()->add_separator();
+	test_menu_button->get_popup()->add_radio_check_item(TTR("Radio Item"));
+	test_menu_button->get_popup()->add_radio_check_item(TTR("Checked Radio Item"));
+	test_menu_button->get_popup()->set_item_checked(7, true);
+	test_menu_button->get_popup()->add_separator(TTR("Named Separator"));
+
+	PopupMenu *test_submenu = memnew(PopupMenu);
+	test_menu_button->get_popup()->add_child(test_submenu);
+	test_submenu->set_name("submenu");
+	test_menu_button->get_popup()->add_submenu_item(TTR("Submenu"), "submenu");
+	test_submenu->add_item(TTR("Subitem 1"));
+	test_submenu->add_item(TTR("Subitem 2"));
+	first_vb->add_child(test_menu_button);
+
+	OptionButton *test_option_button = memnew(OptionButton);
+	test_option_button->add_item("OptionButton");
+	test_option_button->add_separator();
+	test_option_button->add_item(TTR("Has"));
+	test_option_button->add_item(TTR("Many"));
+	test_option_button->add_item(TTR("Options"));
+	first_vb->add_child(test_option_button);
+	first_vb->add_child(memnew(ColorPickerButton));
+
+	VBoxContainer *second_vb = memnew(VBoxContainer);
+	second_vb->set_h_size_flags(SIZE_EXPAND_FILL);
+	main_hb->add_child(second_vb);
+	second_vb->add_constant_override("separation", 10 * EDSCALE);
+	LineEdit *le = memnew(LineEdit);
+	le->set_text("LineEdit");
+	second_vb->add_child(le);
+	le = memnew(LineEdit);
+	le->set_text(TTR("Disabled LineEdit"));
+	le->set_editable(false);
+	second_vb->add_child(le);
+	TextEdit *te = memnew(TextEdit);
+	te->set_text("TextEdit");
+	te->set_custom_minimum_size(Size2(0, 100) * EDSCALE);
+	second_vb->add_child(te);
+	second_vb->add_child(memnew(SpinBox));
+
+	HBoxContainer *vhb = memnew(HBoxContainer);
+	second_vb->add_child(vhb);
+	vhb->set_custom_minimum_size(Size2(0, 100) * EDSCALE);
+	vhb->add_child(memnew(VSlider));
+	VScrollBar *vsb = memnew(VScrollBar);
+	vsb->set_page(25);
+	vhb->add_child(vsb);
+	vhb->add_child(memnew(VSeparator));
+	VBoxContainer *hvb = memnew(VBoxContainer);
+	vhb->add_child(hvb);
+	hvb->set_alignment(BoxContainer::ALIGN_CENTER);
+	hvb->set_h_size_flags(SIZE_EXPAND_FILL);
+	hvb->add_child(memnew(HSlider));
+	HScrollBar *hsb = memnew(HScrollBar);
+	hsb->set_page(25);
+	hvb->add_child(hsb);
+	HSlider *hs = memnew(HSlider);
+	hs->set_editable(false);
+	hvb->add_child(hs);
+	hvb->add_child(memnew(HSeparator));
+	ProgressBar *pb = memnew(ProgressBar);
+	pb->set_value(50);
+	hvb->add_child(pb);
+
+	VBoxContainer *third_vb = memnew(VBoxContainer);
+	third_vb->set_h_size_flags(SIZE_EXPAND_FILL);
+	third_vb->add_constant_override("separation", 10 * EDSCALE);
+	main_hb->add_child(third_vb);
+
+	TabContainer *tc = memnew(TabContainer);
+	third_vb->add_child(tc);
+	tc->set_custom_minimum_size(Size2(0, 135) * EDSCALE);
+	Control *tcc = memnew(Control);
+	tcc->set_name(TTR("Tab 1"));
+	tc->add_child(tcc);
+	tcc = memnew(Control);
+	tcc->set_name(TTR("Tab 2"));
+	tc->add_child(tcc);
+	tcc = memnew(Control);
+	tcc->set_name(TTR("Tab 3"));
+	tc->add_child(tcc);
+	tc->set_tab_disabled(2, true);
+
+	Tree *test_tree = memnew(Tree);
+	third_vb->add_child(test_tree);
+	test_tree->set_custom_minimum_size(Size2(0, 175) * EDSCALE);
+
+	TreeItem *item = test_tree->create_item();
+	item->set_text(0, "Tree");
+	item = test_tree->create_item(test_tree->get_root());
+	item->set_text(0, "Item");
+	item = test_tree->create_item(test_tree->get_root());
+	item->set_editable(0, true);
+	item->set_text(0, TTR("Editable Item"));
+	TreeItem *sub_tree = test_tree->create_item(test_tree->get_root());
+	sub_tree->set_text(0, TTR("Subtree"));
+	item = test_tree->create_item(sub_tree);
+	item->set_cell_mode(0, TreeItem::CELL_MODE_CHECK);
+	item->set_editable(0, true);
+	item->set_text(0, "Check Item");
+	item = test_tree->create_item(sub_tree);
+	item->set_cell_mode(0, TreeItem::CELL_MODE_RANGE);
+	item->set_editable(0, true);
+	item->set_range_config(0, 0, 20, 0.1);
+	item->set_range(0, 2);
+	item = test_tree->create_item(sub_tree);
+	item->set_cell_mode(0, TreeItem::CELL_MODE_RANGE);
+	item->set_editable(0, true);
+	item->set_text(0, TTR("Has,Many,Options"));
+	item->set_range(0, 2);
+}
+
+void SceneThemeEditorPreview::_reload_scene() {
+	if (loaded_scene.is_null()) {
+		return;
+	}
+
+	if (loaded_scene->get_path().empty() || !ResourceLoader::exists(loaded_scene->get_path())) {
+		EditorNode::get_singleton()->show_warning(TTR("Invalid path, the PackedScene resource was probably moved or removed."));
+		emit_signal("scene_invalidated");
+		return;
+	}
+
+	for (int i = preview_content->get_child_count() - 1; i >= 0; i--) {
+		Node *node = preview_content->get_child(i);
+		node->queue_delete();
+		preview_content->remove_child(node);
+	}
+
+	Node *instance = loaded_scene->instance();
+	if (!instance || !Object::cast_to<Control>(instance)) {
+		EditorNode::get_singleton()->show_warning(TTR("Invalid PackedScene resource, must have a Control node at its root."));
+		emit_signal("scene_invalidated");
+		return;
+	}
+
+	preview_content->add_child(instance);
+	emit_signal("scene_reloaded");
+}
+
+void SceneThemeEditorPreview::_notification(int p_what) {
+	switch (p_what) {
+		case NOTIFICATION_ENTER_TREE:
+		case NOTIFICATION_THEME_CHANGED: {
+			reload_scene_button->set_icon(get_icon("Reload", "EditorIcons"));
+		} break;
+	}
+}
+
+void SceneThemeEditorPreview::_bind_methods() {
+	// Internal binds.
+	ClassDB::bind_method("_reload_scene", &SceneThemeEditorPreview::_reload_scene);
+
+	// Public binds.
+	ADD_SIGNAL(MethodInfo("scene_invalidated"));
+	ADD_SIGNAL(MethodInfo("scene_reloaded"));
+}
+
+bool SceneThemeEditorPreview::set_preview_scene(const String &p_path) {
+	loaded_scene = ResourceLoader::load(p_path);
+	if (loaded_scene.is_null()) {
+		EditorNode::get_singleton()->show_warning(TTR("Invalid file, not a PackedScene resource."));
+		return false;
+	}
+
+	Node *instance = loaded_scene->instance();
+	if (!instance || !Object::cast_to<Control>(instance)) {
+		EditorNode::get_singleton()->show_warning(TTR("Invalid PackedScene resource, must have a Control node at its root."));
+		return false;
+	}
+
+	preview_content->add_child(instance);
+	return true;
+}
+
+String SceneThemeEditorPreview::get_preview_scene_path() const {
+	if (loaded_scene.is_null()) {
+		return "";
+	}
+
+	return loaded_scene->get_path();
+}
+
+SceneThemeEditorPreview::SceneThemeEditorPreview() {
+	preview_toolbar->add_child(memnew(VSeparator));
+
+	reload_scene_button = memnew(Button);
+	reload_scene_button->set_flat(true);
+	reload_scene_button->set_tooltip(TTR("Reload the scene to reflect its most actual state."));
+	preview_toolbar->add_child(reload_scene_button);
+	reload_scene_button->connect("pressed", this, "_reload_scene");
+}

editor/plugins/theme_editor_preview.h

@@ -0,0 +1,118 @@
+/*************************************************************************/
+/*  theme_editor_preview.h                                               */
+/*************************************************************************/
+/*                       This file is part of:                           */
+/*                           GODOT ENGINE                                */
+/*                      https://godotengine.org                          */
+/*************************************************************************/
+/* Copyright (c) 2007-2021 Juan Linietsky, Ariel Manzur.                 */
+/* Copyright (c) 2014-2021 Godot Engine contributors (cf. AUTHORS.md).   */
+/*                                                                       */
+/* Permission is hereby granted, free of charge, to any person obtaining */
+/* a copy of this software and associated documentation files (the       */
+/* "Software"), to deal in the Software without restriction, including   */
+/* without limitation the rights to use, copy, modify, merge, publish,   */
+/* distribute, sublicense, and/or sell copies of the Software, and to    */
+/* permit persons to whom the Software is furnished to do so, subject to */
+/* the following conditions:                                             */
+/*                                                                       */
+/* The above copyright notice and this permission notice shall be        */
+/* included in all copies or substantial portions of the Software.       */
+/*                                                                       */
+/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,       */
+/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF    */
+/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.*/
+/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY  */
+/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,  */
+/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE     */
+/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                */
+/*************************************************************************/
+
+#ifndef THEME_EDITOR_PREVIEW_H
+#define THEME_EDITOR_PREVIEW_H
+
+#include "scene/gui/box_container.h"
+#include "scene/gui/check_box.h"
+#include "scene/gui/check_button.h"
+#include "scene/gui/color_picker.h"
+#include "scene/gui/color_rect.h"
+#include "scene/gui/label.h"
+#include "scene/gui/margin_container.h"
+#include "scene/gui/menu_button.h"
+#include "scene/gui/option_button.h"
+#include "scene/gui/panel.h"
+#include "scene/gui/progress_bar.h"
+#include "scene/gui/scroll_container.h"
+#include "scene/gui/separator.h"
+#include "scene/gui/spin_box.h"
+#include "scene/gui/tab_container.h"
+#include "scene/gui/text_edit.h"
+#include "scene/gui/tree.h"
+#include "scene/resources/theme.h"
+
+#include "editor/editor_node.h"
+
+class ThemeEditorPreview : public VBoxContainer {
+	GDCLASS(ThemeEditorPreview, VBoxContainer);
+
+	ColorRect *preview_bg;
+	MarginContainer *preview_overlay;
+	Control *picker_overlay;
+	Control *hovered_control = nullptr;
+
+	double time_left = 0;
+
+	void _propagate_redraw(Control *p_at);
+	void _refresh_interval();
+	void _preview_visibility_changed();
+
+	void _picker_button_cbk();
+	Control *_find_hovered_control(Control *p_parent, Vector2 p_mouse_position);
+
+	void _draw_picker_overlay();
+	void _gui_input_picker_overlay(const Ref<InputEvent> &p_event);
+
+protected:
+	HBoxContainer *preview_toolbar;
+	MarginContainer *preview_content;
+	Button *picker_button;
+
+	void add_preview_overlay(Control *p_overlay);
+
+	void _notification(int p_what);
+	static void _bind_methods();
+
+public:
+	void set_preview_theme(const Ref<Theme> &p_theme);
+
+	ThemeEditorPreview();
+};
+
+class DefaultThemeEditorPreview : public ThemeEditorPreview {
+	GDCLASS(DefaultThemeEditorPreview, ThemeEditorPreview);
+
+public:
+	DefaultThemeEditorPreview();
+};
+
+class SceneThemeEditorPreview : public ThemeEditorPreview {
+	GDCLASS(SceneThemeEditorPreview, ThemeEditorPreview);
+
+	Ref<PackedScene> loaded_scene;
+
+	Button *reload_scene_button;
+
+	void _reload_scene();
+
+protected:
+	void _notification(int p_what);
+	static void _bind_methods();
+
+public:
+	bool set_preview_scene(const String &p_path);
+	String get_preview_scene_path() const;
+
+	SceneThemeEditorPreview();
+};
+
+#endif // THEME_EDITOR_PREVIEW_H

scene/resources/theme.h

@@ -45,6 +45,7 @@ class Theme : public Resource {
 #ifdef TOOLS_ENABLED
 	friend class ThemeItemImportTree;
 	friend class ThemeItemEditorDialog;
+	friend class ThemeTypeEditor;
 #endif
 
 public: