Fixed selectors with multiple pseudo-classes.

Added support for :focus-within pseudo-class.
Fixed a bug in CSSPropertiesModel.
Fixed a bug in UIWidgetInspector.
Improved CSS syntax definition.
UIEditor: replaced the widget inspector in favor of UIWidgetInspector. Fixed a bug with the find-replace component.

bin/assets/ui/breeze.css

@@ -70,7 +70,7 @@ Menu::item:hover > Menu::RadioButton::icon,
 PushButton:pressed > PushButton::icon,
 SelectButton:pressed > SelectButton::icon,
 SelectButton:selected > SelectButton::icon,
-SelectButton:selectedpressed > SelectButton::icon,
+SelectButton:selected:pressed > SelectButton::icon,
 tableview::row:selected tableview::cell::text,
 treeview::row:selected treeview::cell::text,
 listview::row:selected listview::cell::text,
@@ -166,7 +166,7 @@ ComboBox:focus {
 PushButton:pressed,
 SelectButton:pressed,
 SelectButton:selected,
-SelectButton:selectedpressed {
+SelectButton:selected:pressed {
 	background-color: var(--primary);
 }
 
@@ -551,7 +551,7 @@ Tab:selected {
 	border-top-right-radius: 2dp;
 }
 
-Tab:selectedhover {
+Tab:selected:hover {
 	background-color: var(--tab-active);
 }
 
@@ -1069,7 +1069,7 @@ Menu::item:hover > Menu::RadioButton::icon,
 PushButton:pressed > PushButton::icon,
 SelectButton:pressed > SelectButton::icon,
 SelectButton:selected > SelectButton::icon,
-SelectButton:selectedpressed > SelectButton::icon,
+SelectButton:selected:pressed > SelectButton::icon,
 tableview::row:selected tableview::cell::text,
 treeview::row:selected treeview::cell::text,
 listview::row:selected listview::cell::text,

docs/articles/cssspecification.md

@@ -1566,7 +1566,7 @@ Sets the text shadow color.
 ### skin
 
 Sets the skin (a.k.a. decoration) to an element. Element skins are automatically applied if there's a specific skin for the element
-loaded in the current theme, but new skins can be used and loaded with this property. Skins are the default way
+loaded in the current theme, but new skins can be used and loaded with this property. Skins are a way
 to decorate the widgets, they are loaded from a list of textures or from a texture atlas. Skins are stateful,
 this means that a skin can contain all the possible states that a widget can have for decoration, these are: `normal`, `focus`, `selected`, `hover`, `pressed`, `selectedhover`, `selectedpressed`, `disabled`, `checked`.
 Current UI skin documentation is lacking.
@@ -2284,6 +2284,12 @@ can be used to change a button's color when the user's pointer hovers over it.
 
 Most common pseudo-class selectors are supported. The list is:
 
+* [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
+
+* [:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
+
+* [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)
+
 * [:checked](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)
 
 * [:disabled](https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled)
@@ -2292,12 +2298,12 @@ Most common pseudo-class selectors are supported. The list is:
 
 * [:enabled](https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled)
 
+* [:active or :pressed](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
+
 * [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
 
 * [:first-of-type](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type)
 
-* [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
-
 * [:last-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child)
 
 * [:last-of-type](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type)
@@ -2314,8 +2320,12 @@ Most common pseudo-class selectors are supported. The list is:
 
 * [:only-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child)
 
+* [:only-of-type](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type)
+
 * [:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root)
 
+* :selected Matches when elements are selectable and currently selected.
+
 ## CSS Data Types
 
 CSS data types define typical values (including keywords and units) accepted by CSS properties and functions.

include/eepp/ui/models/csspropertiesmodel.hpp

@@ -54,7 +54,7 @@ class CSSPropertiesModel final : public Model {
 	explicit CSSPropertiesModel( UIWidget* widget ) { setWidget( widget ); }
 
 	virtual ~CSSPropertiesModel() {
-		if ( mCloseCb )
+		if ( mWidget && mCloseCb )
 			mWidget->removeEventListener( mCloseCb );
 	}
 
@@ -70,8 +70,10 @@ class CSSPropertiesModel final : public Model {
 			mProps[prop] = def;
 		}
 		if ( mWidget )
-			mCloseCb = mWidget->addEventListener( Event::OnClose,
+			mCloseCb = mWidget->addEventListener( Event::OnClose, [this]( const Event* ) {
-												  [this]( const Event* ) { mWidget = nullptr; } );
+				mWidget = nullptr;
+				mCloseCb = 0;
+			} );
 	}
 
 	UIWidget* getWidget() const { return mWidget; }

include/eepp/ui/uicodeeditor.hpp

@@ -536,6 +536,8 @@ class EE_API UICodeEditor : public UIWidget, public TextDocument::Client {
 
 	bool unregisterGutterSpace( UICodeEditorPlugin* plugin );
 
+	void showFindReplace();
+
   protected:
 	struct LastXOffset {
 		TextPosition position;
@@ -804,8 +806,6 @@ class EE_API UICodeEditor : public UIWidget, public TextDocument::Client {
 
 	void updateLineCache( const Int64& lineIndex );
 
-	void findReplace();
-
 	bool gutterSpaceExists( UICodeEditorPlugin* plugin ) const;
 };
 

include/eepp/ui/uistate.hpp

@@ -19,6 +19,7 @@ class EE_API UIState {
 		StateSelectedPressed,
 		StateDisabled,
 		StateChecked,
+		StateFocusWithin,
 		StateCount
 	};
 
@@ -32,6 +33,7 @@ class EE_API UIState {
 		StateFlagSelectedPressed = StateFlagSelected | StateFlagPressed,
 		StateFlagDisabled = 1 << StateDisabled,
 		StateFlagChecked = 1 << StateChecked,
+		StateFlagFocusWithin = 1 << StateFocusWithin,
 		StateFlagCount = StateCount
 	};
 

include/eepp/ui/uiwidget.hpp

@@ -292,6 +292,10 @@ class EE_API UIWidget : public UINode {
 
 	virtual void onTabPress();
 
+	virtual Uint32 onFocus();
+
+	virtual Uint32 onFocusLoss();
+
 	void updateAnchors( const Vector2f& sizeChange );
 
 	void alignAgainstLayout();

src/eepp/ui/css/stylesheetselectorrule.cpp

@@ -4,9 +4,8 @@
 
 namespace EE { namespace UI { namespace CSS {
 
-static const char* StatePseudoClasses[] = { "normal",		   "focus",	  "selected",
+static const char* StatePseudoClasses[] = { "focus",	"selected",		"hover", "pressed",
-											"hover",		   "pressed", "selectedhover",
+											"disabled", "focus-within", "active" };
-											"selectedpressed", "disabled" };
 
 static bool isPseudoClassState( const std::string& pseudoClass ) {
 	for ( Uint32 i = 0; i < eeARRAY_SIZE( StatePseudoClasses ); i++ ) {
@@ -123,7 +122,7 @@ void StyleSheetSelectorRule::parseFragment( const std::string& selectorFragment
 
 			if ( !pseudoClass.empty() ) {
 				if ( isPseudoClassState( pseudoClass ) ) {
-					mPseudoClasses.push_back( pseudoClass );
+					mPseudoClasses.push_back( pseudoClass == "active" ? "pressed" : pseudoClass );
 				} else if ( isStructuralPseudoClass( pseudoClass ) ) {
 					mStructuralPseudoClasses.push_back( pseudoClass );
 
@@ -283,12 +282,11 @@ bool StyleSheetSelectorRule::matches( UIWidget* element, const bool& applyPseudo
 
 	if ( applyPseudo ) {
 		if ( !mPseudoClasses.empty() && !element->getStyleSheetPseudoClasses().empty() ) {
-			bool hasPseudoClasses = false;
+			bool hasPseudoClasses = true;
-			const std::vector<std::string>& elPseudoClasses = element->getStyleSheetPseudoClasses();
 
-			for ( const auto& cls : elPseudoClasses ) {
+			for ( const auto& cls : mPseudoClasses ) {
-				if ( hasPseudoClass( cls ) ) {
+				if ( !element->hasPseudoClass( cls ) ) {
-					hasPseudoClasses = true;
+					hasPseudoClasses = false;
 					break;
 				}
 			}

src/eepp/ui/doc/syntaxdefinitionmanager.cpp

@@ -205,12 +205,12 @@ void SyntaxDefinitionManager::addCSS() {
 			   { { "@[%a][%w%_%-]*" }, "keyword2" },
 			   { { "%.[%a%_%-][%w%_%-]*" }, "keyword2" },
 			   { { "(:)(hover)" }, { "normal", "operator", "literal" } },
+			   { { "(:)(focus%-within)" }, { "normal", "operator", "literal" } },
 			   { { "(:)(focus)" }, { "normal", "operator", "literal" } },
-			   { { "(:)(selectedpressed)" }, { "normal", "operator", "literal" } },
-			   { { "(:)(selectedhover)" }, { "normal", "operator", "literal" } },
 			   { { "(:)(selected)" }, { "normal", "operator", "literal" } },
 			   { { "(:)(pressed)" }, { "normal", "operator", "literal" } },
 			   { { "(:)(disabled)" }, { "normal", "operator", "literal" } },
+			   { { "(:)(checked)" }, { "normal", "operator", "literal" } },
 			   { { "(:)(root)" }, { "normal", "operator", "link" } },
 			   { { "(%a+)(%()" }, { "normal", "function", "normal" } },
 			   { { "[%a][%w-]*%s*%f[:]" }, "keyword" },
@@ -218,15 +218,171 @@ void SyntaxDefinitionManager::addCSS() {
 			   { { "[%a_][%w_]*" }, "symbol" },
 		   },
 		   {
-			   { "true", "literal" },	   { "false", "literal" },		 { "white", "literal" },
+			   { "true", "literal" },
-			   { "black", "literal" },	   { "gray", "literal" },		 { "blue", "literal" },
+			   { "false", "literal" },
-			   { "red", "literal" },	   { "purple", "literal" },		 { "green", "literal" },
+			   { "transparent", "literal" },
-			   { "yellow", "literal" },	   { "transparent", "literal" }, { "none", "literal" },
+			   { "none", "literal" },
-			   { "center", "literal" },	   { "arrow", "literal" },		 { "hand", "literal" },
+			   { "center", "literal" },
-			   { "ibeam", "literal" },	   { "wait", "literal" },		 { "crosshair", "literal" },
+			   { "arrow", "literal" },
-			   { "waitarrow", "literal" }, { "sizenwse", "literal" },	 { "sizenesw", "literal" },
+			   { "hand", "literal" },
-			   { "sizewe", "literal" },	   { "sizens", "literal" },		 { "sizeall", "literal" },
+			   { "ibeam", "literal" },
-			   { "nocursor", "literal" },  { "important", "literal" },
+			   { "wait", "literal" },
+			   { "crosshair", "literal" },
+			   { "waitarrow", "literal" },
+			   { "sizenwse", "literal" },
+			   { "sizenesw", "literal" },
+			   { "sizewe", "literal" },
+			   { "sizens", "literal" },
+			   { "sizeall", "literal" },
+			   { "nocursor", "literal" },
+			   { "important", "literal" },
+			   { "aliceblue", "literal" },
+			   { "antiquewhite", "literal" },
+			   { "aqua", "literal" },
+			   { "aquamarine", "literal" },
+			   { "azure", "literal" },
+			   { "beige", "literal" },
+			   { "bisque", "literal" },
+			   { "black", "literal" },
+			   { "blanchedalmond", "literal" },
+			   { "blue", "literal" },
+			   { "blueviolet", "literal" },
+			   { "brown", "literal" },
+			   { "burlywood", "literal" },
+			   { "cadetblue", "literal" },
+			   { "chartreuse", "literal" },
+			   { "chocolate", "literal" },
+			   { "coral", "literal" },
+			   { "cornflowerblue", "literal" },
+			   { "cornsilk", "literal" },
+			   { "crimson", "literal" },
+			   { "cyan", "literal" },
+			   { "darkblue", "literal" },
+			   { "darkcyan", "literal" },
+			   { "darkgoldenrod", "literal" },
+			   { "darkgray", "literal" },
+			   { "darkgreen", "literal" },
+			   { "darkgrey", "literal" },
+			   { "darkkhaki", "literal" },
+			   { "darkmagenta", "literal" },
+			   { "darkolivegreen", "literal" },
+			   { "darkorange", "literal" },
+			   { "darkorchid", "literal" },
+			   { "darkred", "literal" },
+			   { "darksalmon", "literal" },
+			   { "darkseagreen", "literal" },
+			   { "darkslateblue", "literal" },
+			   { "darkslategray", "literal" },
+			   { "darkslategrey", "literal" },
+			   { "darkturquoise", "literal" },
+			   { "darkviolet", "literal" },
+			   { "deeppink", "literal" },
+			   { "deepskyblue", "literal" },
+			   { "dimgray", "literal" },
+			   { "dimgrey", "literal" },
+			   { "dodgerblue", "literal" },
+			   { "firebrick", "literal" },
+			   { "floralwhite", "literal" },
+			   { "forestgreen", "literal" },
+			   { "fuchsia", "literal" },
+			   { "gainsboro", "literal" },
+			   { "ghostwhite", "literal" },
+			   { "gold", "literal" },
+			   { "goldenrod", "literal" },
+			   { "gray", "literal" },
+			   { "green", "literal" },
+			   { "greenyellow", "literal" },
+			   { "grey", "literal" },
+			   { "honeydew", "literal" },
+			   { "hotpink", "literal" },
+			   { "indianred", "literal" },
+			   { "indigo", "literal" },
+			   { "ivory", "literal" },
+			   { "khaki", "literal" },
+			   { "lavender", "literal" },
+			   { "lavenderblush", "literal" },
+			   { "lawngreen", "literal" },
+			   { "lemonchiffon", "literal" },
+			   { "lightblue", "literal" },
+			   { "lightcoral", "literal" },
+			   { "lightcyan", "literal" },
+			   { "lightgoldenrodyellow", "literal" },
+			   { "lightgray", "literal" },
+			   { "lightgreen", "literal" },
+			   { "lightgrey", "literal" },
+			   { "lightpink", "literal" },
+			   { "lightsalmon", "literal" },
+			   { "lightseagreen", "literal" },
+			   { "lightskyblue", "literal" },
+			   { "lightslategray", "literal" },
+			   { "lightslategrey", "literal" },
+			   { "lightsteelblue", "literal" },
+			   { "lightyellow", "literal" },
+			   { "lime", "literal" },
+			   { "limegreen", "literal" },
+			   { "linen", "literal" },
+			   { "magenta", "literal" },
+			   { "maroon", "literal" },
+			   { "mediumaquamarine", "literal" },
+			   { "mediumblue", "literal" },
+			   { "mediumorchid", "literal" },
+			   { "mediumpurple", "literal" },
+			   { "mediumseagreen", "literal" },
+			   { "mediumslateblue", "literal" },
+			   { "mediumspringgreen", "literal" },
+			   { "mediumturquoise", "literal" },
+			   { "mediumvioletred", "literal" },
+			   { "midnightblue", "literal" },
+			   { "mintcream", "literal" },
+			   { "mistyrose", "literal" },
+			   { "moccasin", "literal" },
+			   { "navajowhite", "literal" },
+			   { "navy", "literal" },
+			   { "oldlace", "literal" },
+			   { "olive", "literal" },
+			   { "olivedrab", "literal" },
+			   { "orange", "literal" },
+			   { "orangered", "literal" },
+			   { "orchid", "literal" },
+			   { "palegoldenrod", "literal" },
+			   { "palegreen", "literal" },
+			   { "paleturquoise", "literal" },
+			   { "palevioletred", "literal" },
+			   { "papayawhip", "literal" },
+			   { "peachpuff", "literal" },
+			   { "peru", "literal" },
+			   { "pink", "literal" },
+			   { "plum", "literal" },
+			   { "powderblue", "literal" },
+			   { "purple", "literal" },
+			   { "red", "literal" },
+			   { "rosybrown", "literal" },
+			   { "royalblue", "literal" },
+			   { "saddlebrown", "literal" },
+			   { "salmon", "literal" },
+			   { "sandybrown", "literal" },
+			   { "seagreen", "literal" },
+			   { "seashell", "literal" },
+			   { "sienna", "literal" },
+			   { "silver", "literal" },
+			   { "skyblue", "literal" },
+			   { "slateblue", "literal" },
+			   { "slategray", "literal" },
+			   { "slategrey", "literal" },
+			   { "snow", "literal" },
+			   { "springgreen", "literal" },
+			   { "steelblue", "literal" },
+			   { "tan", "literal" },
+			   { "teal", "literal" },
+			   { "thistle", "literal" },
+			   { "tomato", "literal" },
+			   { "turquoise", "literal" },
+			   { "violet", "literal" },
+			   { "wheat", "literal" },
+			   { "white", "literal" },
+			   { "whitesmoke", "literal" },
+			   { "yellow", "literal" },
+			   { "yellowgreen", "literal" },
 		   } } )
 		.addSymbols( UIWidgetCreator::getWidgetNames(), "keyword" );
 }

src/eepp/ui/tools/uiwidgetinspector.cpp

@@ -1,3 +1,4 @@
+#include <eepp/scene/scenemanager.hpp>
 #include <eepp/ui/models/csspropertiesmodel.hpp>
 #include <eepp/ui/models/widgettreemodel.hpp>
 #include <eepp/ui/tools/uiwidgetinspector.hpp>
@@ -11,6 +12,7 @@
 
 using namespace EE::Window;
 using namespace EE::UI::Models;
+using namespace EE::Scene;
 
 namespace EE { namespace UI { namespace Tools {
 
@@ -114,12 +116,14 @@ UIWindow* UIWidgetInspector::create( UISceneNode* sceneNode, const Float& menuIc
 					eWinEvent->getNode()->removeEventListener( eWinEvent->getCallbackId() );
 				} );
 			uiWin->addEventListener( Event::OnWindowClose, [sceneNode, winRdCb]( const Event* ) {
-				sceneNode->removeEventListener( winRdCb );
+				if ( !SceneManager::instance()->isShootingDown() )
+					sceneNode->removeEventListener( winRdCb );
 			} );
 		}
 	} );
 	uiWin->addEventListener( Event::OnWindowClose, [sceneNode, winCb]( const Event* ) {
-		sceneNode->removeEventListener( winCb );
+		if ( !SceneManager::instance()->isShootingDown() )
+			sceneNode->removeEventListener( winCb );
 	} );
 	return uiWin;
 }

src/eepp/ui/uicodeeditor.cpp

@@ -2702,16 +2702,23 @@ void UICodeEditor::registerCommands() {
 	mDoc->setCommand( "open-containing-folder", [&] { openContainingFolder(); } );
 	mDoc->setCommand( "copy-containing-folder-path", [&] { copyContainingFolderPath(); } );
 	mDoc->setCommand( "copy-file-path", [&] { copyFilePath(); } );
-	mDoc->setCommand( "find-replace", [&] { findReplace(); } );
+	mDoc->setCommand( "find-replace", [&] { showFindReplace(); } );
 	mUnlockedCmd.insert( { "copy", "select-all" } );
 }
 
-void UICodeEditor::findReplace() {
+void UICodeEditor::showFindReplace() {
+	UISceneNode* curSceneNode = SceneManager::instance()->getUISceneNode();
+	if ( mUISceneNode != curSceneNode )
+		SceneManager::instance()->setCurrentUISceneNode( mUISceneNode );
+
 	if ( !mFindReplaceEnabled )
 		return;
 	if ( nullptr == mFindReplace )
 		mFindReplace = UIDocFindReplace::New( this, mDoc );
 	mFindReplace->show();
+
+	if ( mUISceneNode != curSceneNode )
+		SceneManager::instance()->setCurrentUISceneNode( curSceneNode );
 }
 
 void UICodeEditor::registerKeybindings() {

src/eepp/ui/uiconsole.cpp

@@ -820,7 +820,7 @@ void UIConsole::resetCursor() {
 }
 
 Uint32 UIConsole::onFocus() {
-	UINode::onFocus();
+	UIWidget::onFocus();
 
 	resetCursor();
 

src/eepp/ui/uistate.cpp

@@ -3,14 +3,16 @@
 
 namespace EE { namespace UI {
 
-static const char* UIStatesNames[] = {"normal",			 "focus",	 "selected",
+static const char* UIStatesNames[] = { "normal",  "focus",		   "selected",		  "hover",
-									  "hover",			 "pressed",	 "selectedhover",
+									   "pressed", "selectedhover", "selectedpressed", "disabled",
-									  "selectedpressed", "disabled", "checked"};
+									   "checked", "focus-within" };
 
 static const Uint32 UIStateFlags[] = {
-	UIState::StateFlagNormal,		   UIState::StateFlagFocus,	   UIState::StateFlagSelected,
+	UIState::StateFlagNormal,	   UIState::StateFlagFocus,
-	UIState::StateFlagHover,		   UIState::StateFlagPressed,  UIState::StateFlagSelectedHover,
+	UIState::StateFlagSelected,	   UIState::StateFlagHover,
-	UIState::StateFlagSelectedPressed, UIState::StateFlagDisabled, UIState::StateFlagChecked};
+	UIState::StateFlagPressed,	   UIState::StateFlagSelectedHover,
+	UIState::StateFlagFocusWithin, UIState::StateFlagSelectedPressed,
+	UIState::StateFlagDisabled,	   UIState::StateFlagChecked };
 
 const char* UIState::getStateName( const Uint32& State ) {
 	return UIStatesNames[State];

src/eepp/ui/uitextinput.cpp

@@ -149,7 +149,7 @@ void UITextInput::draw() {
 }
 
 Uint32 UITextInput::onFocus() {
-	UINode::onFocus();
+	UIWidget::onFocus();
 
 	if ( mAllowEditing ) {
 		resetWaitCursor();

src/eepp/ui/uiwidget.cpp

@@ -716,6 +716,9 @@ void UIWidget::updatePseudoClasses() {
 	if ( mState & UIState::StateFlagFocus )
 		mPseudoClasses.push_back( "focus" );
 
+	if ( mState & UIState::StateFlagFocusWithin )
+		mPseudoClasses.push_back( "focus-within" );
+
 	if ( mState & UIState::StateFlagSelected )
 		mPseudoClasses.push_back( "selected" );
 
@@ -880,6 +883,32 @@ void UIWidget::popState( const Uint32& State, bool emitEvent ) {
 	}
 }
 
+Uint32 UIWidget::onFocus() {
+	pushState( UIState::StateFocusWithin );
+
+	Node* parent = mParentNode;
+	while ( parent ) {
+		if ( parent->isUINode() )
+			parent->asType<UINode>()->pushState( UIState::StateFocusWithin );
+		parent = parent->getParent();
+	}
+
+	return UINode::onFocus();
+}
+
+Uint32 UIWidget::onFocusLoss() {
+	popState( UIState::StateFocusWithin );
+
+	Node* parent = mParentNode;
+	while ( parent ) {
+		if ( parent->isUINode() )
+			parent->asType<UINode>()->popState( UIState::StateFocusWithin );
+		parent = parent->getParent();
+	}
+
+	return UINode::onFocusLoss();
+}
+
 UIStyle* UIWidget::getUIStyle() const {
 	return mStyle;
 }

src/tests/test_all/test.cpp

@@ -509,8 +509,6 @@ void EETest::createBaseUI() {
 	w->setParent( C )->setSize( 20, 20 )->setPosition( 260, 130 );
 	w->setBackgroundColor( Color::Green );
 	w->setRotation( 45 );
-	// w->setBackgroundColor( UIState::StateFlagHover, Color::Yellow );
-	// w->setBackgroundColor( UIState::StateFlagPressed, Color::Red );
 
 	C = C->getParent()->asType<UINode>();
 

src/tools/uieditor/uieditor.cpp

@@ -165,22 +165,9 @@ FontTrueType* App::loadFont( const std::string& name, std::string fontPath,
 	return FontTrueType::New( name, fontPath );
 }
 
-void App::createWidgetTreeView() {
+void App::createWidgetInspector() {
 	SceneManager::instance()->setCurrentUISceneNode( mAppUISceneNode );
-
+	UIWidgetInspector::create( mUISceneNode, mMenuIconSize );
-	UIWindow* uiWin = UIWindow::NewOpt( UIWindow::LINEAR_LAYOUT );
-	uiWin->setMinWindowSize( 600, 400 );
-	uiWin->setWindowFlags( UI_WIN_DEFAULT_FLAGS | UI_WIN_RESIZEABLE | UI_WIN_MAXIMIZE_BUTTON );
-	UITreeView* widgetTree = UITreeView::New();
-	widgetTree->setLayoutSizePolicy( SizePolicy::MatchParent, SizePolicy::MatchParent );
-	widgetTree->setParent( uiWin );
-	widgetTree->setHeadersVisible( true );
-	widgetTree->setAutoExpandOnSingleColumn( true );
-	widgetTree->setExpanderIconSize( mMenuIconSize );
-	widgetTree->setAutoColumnsWidth( true );
-	widgetTree->setModel( WidgetTreeModel::New( mUIContainer->getContainer() ) );
-	uiWin->center();
-
 	SceneManager::instance()->setCurrentUISceneNode( mUISceneNode );
 }
 
@@ -912,7 +899,7 @@ void App::mainLoop() {
 	}
 
 	if ( mWindow->getInput()->isKeyUp( KEY_F11 ) )
-		createWidgetTreeView();
+		createWidgetInspector();
 
 	if ( mWindow->getInput()->isKeyUp( KEY_F12 ) ) {
 		Clock clock;
@@ -1098,7 +1085,7 @@ void App::fileMenuClick( const Event* event ) {
 	} else if ( "debug-data" == id ) {
 		mUISceneNode->setDrawDebugData( !mUISceneNode->getDrawDebugData() );
 	} else if ( "inspect-widgets" == id ) {
-		createWidgetTreeView();
+		createWidgetInspector();
 	} else if ( "save-doc" == id ) {
 		saveDoc();
 	} else if ( "save-as-doc" == id ) {
@@ -1338,6 +1325,7 @@ void App::init( const Float& pixelDensityConf, const bool& useAppTheme, const st
 			{ "arrow-down-s", 0xea4e },
 			{ "arrow-right-s", 0xea6e },
 			{ "match-case", 0xed8d },
+			{ "cursor-pointer", 0xec09 },
 		};
 		for ( const auto& icon : icons ) {
 			iconTheme->add( UIGlyphIcon::New( icon.first, iconFont, icon.second ) );

src/tools/uieditor/uieditor.hpp

@@ -106,7 +106,7 @@ class App : public UICodeEditorSplitter::Client {
 	FontTrueType* loadFont( const std::string& name, std::string fontPath,
 							const std::string& fallback = "" );
 
-	void createWidgetTreeView();
+	void createWidgetInspector();
 
 	std::string titleFromEditor( UICodeEditor* editor );