Allow to inspect widget style from widget inspector.

bin/assets/ui/breeze.css

@@ -49,6 +49,9 @@
 	--theme-error: #ff4040;
 	--theme-warning: #ffff40;
 	--theme-success: #40ff40;
+}
+
+TabWidget {
 	droppable-hovering-color: #FFFFFF20;
 }
 
@@ -1248,6 +1251,9 @@ DiffView > SelectButton:focus {
 	--theme-error: #cc0000;
 	--theme-warning: #cccc00;
 	--theme-success: #00cc00;
+}
+
+TabWidget {
 	droppable-hovering-color: #00000020;
 }
 

include/eepp/ui/uistyle.hpp

@@ -85,6 +85,8 @@ class EE_API UIStyle : public UIState {
 
 	void applyInheritedProperties();
 
+	const std::shared_ptr<CSS::ElementDefinition> getDefinition() const { return mDefinition; }
+
   protected:
 	UIWidget* mWidget;
 	std::shared_ptr<CSS::StyleSheetStyle> mElementStyle;

src/eepp/ui/tools/uiwidgetinspector.cpp

@@ -1,9 +1,12 @@
 #include <eepp/scene/scenemanager.hpp>
+#include <eepp/ui/doc/syntaxdefinitionmanager.hpp>
 #include <eepp/ui/models/csspropertiesmodel.hpp>
 #include <eepp/ui/models/widgettreemodel.hpp>
 #include <eepp/ui/tools/uiwidgetinspector.hpp>
 #include <eepp/ui/uicheckbox.hpp>
+#include <eepp/ui/uicodeeditor.hpp>
 #include <eepp/ui/uiscenenode.hpp>
+#include <eepp/ui/uistyle.hpp>
 #include <eepp/ui/uitableview.hpp>
 #include <eepp/ui/uitreeview.hpp>
 #include <eepp/ui/uiwindow.hpp>
@@ -42,14 +45,19 @@ UIWindow* UIWidgetInspector::create( UISceneNode* sceneNode, const Float& menuIc
 			<PushButton id="open-texture-viewer" lh="18dp" text="@string(texture_viewer, Texture Viewer)" margin-left="8dp" />
 		</hbox>
 		<Splitter layout_width="match_parent" lh="fixed" lw8="1" splitter-partition="50%">
-			<treeview lw="fixed" lh="mp" />
-			<tableview lw="fixed" lh="mp" />
+			<TreeView id="widget_inspector_nodetree" lw="fixed" lh="mp" />
+			<TabWidget lw="fixed" lh="mp">
+				<TableView id="widget_inspector_computed" class="computed" lw="mp" lh="mp" />
+				<CodeEditor id="widget_inspector_style" lw="mp" lh="mp" />
+				<Tab id="widget_inspector_tab_computed" text="@string(computed, Computed)" owns="widget_inspector_computed" />
+				<Tab id="widget_inspector_tab_style" text="@string(style, Style)" owns="widget_inspector_style" />
+			</TabWidget>
 		</Splitter>
 	</vbox>
 	)xml";
 	UIWidget* cont = sceneNode->loadLayoutFromString( WIDGET_LAYOUT, uiWin->getContainer() );
-	UITreeView* widgetTree = cont->findByType<UITreeView>( UI_TYPE_TREEVIEW );
-	widgetTree->on( Event::OnRowCreated, [sceneNode]( const Event* event ) {
+	UITreeView* nodeTree = cont->find<UITreeView>( "widget_inspector_nodetree" );
+	nodeTree->on( Event::OnRowCreated, [sceneNode]( const Event* event ) {
 		UITableRow* row = event->asRowCreatedEvent()->getRow();
 		row->on( Event::MouseOver, [row, sceneNode]( const Event* ) {
 			if ( lastModelIndex.isValid() && lastModelIndex != row->getCurIndex() &&
@@ -68,21 +76,48 @@ UIWindow* UIWidgetInspector::create( UISceneNode* sceneNode, const Float& menuIc
 				row->getCurIndex().ref<UINode>()->unsetFlags( UI_HIGHLIGHT );
 		} );
 	} );
-	widgetTree->setHeadersVisible( true );
-	widgetTree->setExpanderIconSize( menuIconSize );
-	widgetTree->setAutoColumnsWidth( true );
+	nodeTree->setHeadersVisible( true );
+	nodeTree->setExpanderIconSize( menuIconSize );
+	nodeTree->setAutoColumnsWidth( true );
 	auto model = WidgetTreeModel::New( sceneNode );
-	widgetTree->setModel( model );
-	widgetTree->tryOpenModelIndex( model->getRoot() );
-	UITableView* tableView = cont->findByType<UITableView>( UI_TYPE_TABLEVIEW );
-	tableView->setAutoColumnsWidth( true );
-	tableView->setHeadersVisible( true );
-	widgetTree->setOnSelection( [tableView]( const ModelIndex& index ) {
+	nodeTree->setModel( model );
+	nodeTree->tryOpenModelIndex( model->getRoot() );
+
+	UICodeEditor* stylesEditor = cont->find<UICodeEditor>( "widget_inspector_style" );
+	stylesEditor->setLocked( true );
+	stylesEditor->setShowLineNumber( false );
+	stylesEditor->setShowFoldingRegion( false );
+	stylesEditor->setLineWrapType( LineWrapType::Viewport );
+	stylesEditor->setLineWrapMode( LineWrapMode::Word );
+	stylesEditor->setLineWrapKeepIndentation( true );
+	stylesEditor->setColorScheme( sceneNode->getColorSchemePreference() ==
+										  ColorSchemePreference::Dark
+									  ? SyntaxColorScheme::getDefaultDark()
+									  : SyntaxColorScheme::getDefaultLight() );
+
+	UITableView* computedView = cont->find<UITableView>( "widget_inspector_computed" );
+	computedView->setAutoColumnsWidth( true );
+	computedView->setHeadersVisible( true );
+	nodeTree->setOnSelection( [computedView, stylesEditor]( const ModelIndex& index ) {
 		Node* node = static_cast<Node*>( index.internalData() );
+		computedView->setModel( node->isWidget()
+									? CSSPropertiesModel::create( node->asType<UIWidget>() )
+									: CSSPropertiesModel::create() );
+
+		stylesEditor->getDocument().reset();
+		stylesEditor->getDocument().setSyntaxDefinition(
+			SyntaxDefinitionManager::instance()->getByLSPName( "css" ) );
+
 		if ( node->isWidget() ) {
-			tableView->setModel( node->isWidget()
-									 ? CSSPropertiesModel::create( node->asType<UIWidget>() )
-									 : CSSPropertiesModel::create() );
+			UIWidget* widget = node->asType<UIWidget>();
+			const auto& styles = widget->getUIStyle()->getDefinition()->getStyles();
+			String elemStyle;
+			for ( const auto& style : styles ) {
+				if ( style->getSelector().getName() != ":root" ||
+					 widget->getElementTag() == ":root" )
+					elemStyle += style->build( false, false );
+			}
+			stylesEditor->getDocument().textInput( elemStyle );
 		}
 	} );
 
@@ -96,13 +131,13 @@ UIWindow* UIWidgetInspector::create( UISceneNode* sceneNode, const Float& menuIc
 			button->setIcon( cursorPointer, true );
 	}
 
-	button->on( Event::MouseClick, [sceneNode, widgetTree, tableView]( const Event* event ) {
+	button->on( Event::MouseClick, [sceneNode, nodeTree, computedView]( const Event* event ) {
 		if ( event->asMouseEvent()->getFlags() & EE_BUTTON_LMASK ) {
 			bool wasHighlightOver = sceneNode->getHighlightOver();
 			sceneNode->setHighlightOver( true );
 			sceneNode->getEventDispatcher()->setDisableMousePress( true );
-			sceneNode->runOnMainThread( [sceneNode, widgetTree, tableView, wasHighlightOver]() {
-				checkWidgetPick( sceneNode, widgetTree, wasHighlightOver, tableView );
+			sceneNode->runOnMainThread( [sceneNode, nodeTree, computedView, wasHighlightOver]() {
+				checkWidgetPick( sceneNode, nodeTree, wasHighlightOver, computedView );
 			} );
 		}
 	} );
@@ -139,16 +174,16 @@ UIWindow* UIWidgetInspector::create( UISceneNode* sceneNode, const Float& menuIc
 		} );
 
 	cont->find<UIPushButton>( "widget-tree-search-collapse" )
-		->on( Event::MouseClick, [widgetTree]( const Event* event ) {
+		->on( Event::MouseClick, [nodeTree]( const Event* event ) {
 			if ( event->asMouseEvent()->getFlags() & EE_BUTTON_LMASK ) {
-				widgetTree->collapseAll();
+				nodeTree->collapseAll();
 			}
 		} );
 
 	cont->find<UIPushButton>( "widget-tree-search-expand" )
-		->on( Event::MouseClick, [widgetTree]( const Event* event ) {
+		->on( Event::MouseClick, [nodeTree]( const Event* event ) {
 			if ( event->asMouseEvent()->getFlags() & EE_BUTTON_LMASK ) {
-				widgetTree->expandAll();
+				nodeTree->expandAll();
 			}
 		} );
 

src/tools/ecode/colorschemetranslator.cpp

@@ -74,8 +74,6 @@ static const auto BASE_UI_THEME = R"css(
 	--theme-error: error;
 	--theme-warning: warning;
 	--theme-success: function;
-
-	droppable-hovering-color: minimap_visible_area;
 }
 
 )css";