inspector: Style the property list

Make the property list look more like a list.

diff --git a/gtk/gen-gtk-gresources-xml.py b/gtk/gen-gtk-gresources-xml.py
index cd42ce616934cb530ab9424293df05cb6097748d..846b27dd0b4f99bf76334a226d051b7b7ffcded8 100644 (file)
--- a/gtk/gen-gtk-gresources-xml.py
+++ b/gtk/gen-gtk-gresources-xml.py
@@ -70,6 +70,7 @@ for f in get_files('inspector', '.ui'):
 
 xml += '''
     <file>inspector/logo.png</file>
+    <file>inspector/inspector.css</file>
     <file>emoji/emoji.data</file>
   </gresource>
 </gresources>'''

diff --git a/gtk/inspector/inspector.css b/gtk/inspector/inspector.css
new file mode 100644 (file)
index 0000000..70b777d
--- /dev/null
+++ b/gtk/inspector/inspector.css
@@ -0,0 +1,35 @@
+/* some style for the inspector */
+
+.header {
+  background: lightgray;
+  border: 1px solid gray;
+}
+
+.header>* {
+  padding: 2px;
+  font-weight: bold;
+}
+
+.header sort_indicator {
+  min-width: 16px;
+}
+
+.header>*:not(:last-child) {
+  border-right: 1px solid gray;
+}
+
+.list .cell {
+  font-size: smaller;
+  padding: 0 2px;
+  min-height: 24px;
+}
+
+.list .cell entry,
+.list .cell spinbutton,
+.list .cell button,
+.list .cell combobox
+ {
+  min-height: 24px;
+  min-width: 0;
+  padding: 0 4px;
+}

diff --git a/gtk/inspector/prop-list.c b/gtk/inspector/prop-list.c
index fc1996f95d0101b76ce47e2328bbfcfd6ceb8c8a..70543d1eb9bead86e54d75bc303d45cd2abf01f3 100644 (file)
--- a/gtk/inspector/prop-list.c
+++ b/gtk/inspector/prop-list.c
@@ -43,6 +43,7 @@
 #include "gtksizegroup.h"
 #include "gtkroot.h"
 #include "gtkgesturemultipress.h"
+#include "gtkstylecontext.h"
 
 enum
 {
@@ -105,17 +106,13 @@ apply_sort (GtkInspectorPropList *pl,
 
   if (column == COLUMN_NAME)
     {
-      gtk_widget_hide (pl->priv->origin_sort_indicator);
-      gtk_widget_show (pl->priv->name_sort_indicator);
-
+      gtk_image_clear (GTK_IMAGE (pl->priv->origin_sort_indicator));
       gtk_image_set_from_icon_name (GTK_IMAGE (pl->priv->name_sort_indicator),
                                     icon_name);
     }
   else
     {
-      gtk_widget_show (pl->priv->origin_sort_indicator);
-      gtk_widget_hide (pl->priv->name_sort_indicator);
-
+      gtk_image_clear (GTK_IMAGE (pl->priv->name_sort_indicator));
       gtk_image_set_from_icon_name (GTK_IMAGE (pl->priv->origin_sort_indicator),
                                     icon_name);
     }
@@ -540,24 +537,28 @@ gtk_inspector_prop_list_create_row (GtkInspectorPropList *pl,
   gtk_container_add (GTK_CONTAINER (row), box);
 
   label = gtk_label_new (prop->name);
+  gtk_style_context_add_class (gtk_widget_get_style_context (label), "cell");
   gtk_widget_set_sensitive (label, writable);
   gtk_label_set_xalign (GTK_LABEL (label), 0);
   gtk_size_group_add_widget (pl->priv->names, label);
   gtk_container_add (GTK_CONTAINER (box), label);
 
   label = gtk_label_new (type ? type : "");
+  gtk_style_context_add_class (gtk_widget_get_style_context (label), "cell");
   gtk_widget_set_sensitive (label, writable);
   gtk_label_set_xalign (GTK_LABEL (label), 0);
   gtk_size_group_add_widget (pl->priv->types, label);
   gtk_container_add (GTK_CONTAINER (box), label);
 
   label = gtk_label_new (g_type_name (prop->owner_type));
+  gtk_style_context_add_class (gtk_widget_get_style_context (label), "cell");
   gtk_widget_set_sensitive (label, writable);
   gtk_label_set_xalign (GTK_LABEL (label), 0);
   gtk_size_group_add_widget (pl->priv->origins, label);
   gtk_container_add (GTK_CONTAINER (box), label);
 
   widget = gtk_inspector_prop_editor_new (pl->priv->object, prop->name, pl->priv->values);
+  gtk_style_context_add_class (gtk_widget_get_style_context (widget), "cell");
   gtk_container_add (GTK_CONTAINER (box), widget);
   g_signal_connect (widget, "show-object", G_CALLBACK (show_object), pl);
 

diff --git a/gtk/inspector/prop-list.ui b/gtk/inspector/prop-list.ui
index a7aff1d0710ae1d4a1575205c1a1f8467f465963..290bf15bd46c59c58f1832949d06cc7139eee0de 100644 (file)
--- a/gtk/inspector/prop-list.ui
+++ b/gtk/inspector/prop-list.ui
@@ -15,6 +15,7 @@
             </style>
             <child>
               <object class="GtkBox" id="name_heading">
+                <property name="hexpand">0</property>
                 <child>
                   <object class="GtkGestureMultiPress">
                     <signal name="pressed" handler="sort_changed" swapped="no"/>
@@ -30,6 +31,9 @@
                 </child>
                 <child>
                   <object class="GtkImage" id="name_sort_indicator">
+                    <style>
+                      <class name="sort_indicator"/>
+                    </style>
                   </object>
                 </child>
               </object>
@@ -42,6 +46,7 @@
             </child>
             <child>
               <object class="GtkBox" id="origin_heading">
+                <property name="hexpand">0</property>
                 <child>
                   <object class="GtkGestureMultiPress">
                     <signal name="pressed" handler="sort_changed" swapped="no"/>
@@ -57,6 +62,9 @@
                 </child>
                 <child>
                   <object class="GtkImage" id="origin_sort_indicator">
+                    <style>
+                      <class name="sort_indicator"/>
+                    </style>
                   </object>
                 </child>
               </object>
@@ -65,9 +73,7 @@
               <object class="GtkLabel" id="value_heading">
                 <property name="label">Value</property>
                 <property name="xalign">0</property>
-                <property name="hexpand">1</property>
-                <property name="margin-start">6</property>
-                <property name="margin-end">6</property>
+                <property name="hexpand">0</property>
               </object>
             </child>
           </object>
@@ -78,6 +84,9 @@
             <property name="hscrollbar-policy">never</property>
             <child>
               <object class="GtkListBox" id="list2">
+                <style>
+                  <class name="list"/>
+                </style>
                 <property name="selection-mode">none</property>
               </object>
             </child>
@@ -87,21 +96,25 @@
     </child>
   </template>
   <object class="GtkSizeGroup" id="names">
+    <property name="mode">horizontal</property>
     <widgets>
       <widget name="name_heading"/>
     </widgets>
   </object>
   <object class="GtkSizeGroup" id="types">
+    <property name="mode">horizontal</property>
     <widgets>
       <widget name="type_heading"/>
     </widgets>
   </object>
   <object class="GtkSizeGroup" id="origins">
+    <property name="mode">horizontal</property>
     <widgets>
       <widget name="origin_heading"/>
     </widgets>
   </object>
   <object class="GtkSizeGroup" id="values">
+    <property name="mode">horizontal</property>
     <widgets>
       <widget name="value_heading"/>
     </widgets>

diff --git a/gtk/inspector/window.c b/gtk/inspector/window.c
index e7c9ee9fb1fe9a0c7b1676db8671896179deb7ec..683a95f079619e0d01947b249ecc9ae0f31406d4 100644 (file)
--- a/gtk/inspector/window.c
+++ b/gtk/inspector/window.c
@@ -54,6 +54,9 @@
 #include "gtkwindowgroup.h"
 #include "gtkrevealer.h"
 #include "gtklayoutmanager.h"
+#include "gtkcssprovider.h"
+#include "gtkstylecontext.h"
+
 
 G_DEFINE_TYPE (GtkInspectorWindow, gtk_inspector_window, GTK_TYPE_WINDOW)
 
@@ -290,11 +293,19 @@ static void
 gtk_inspector_window_realize (GtkWidget *widget)
 {
   GskRenderer *renderer;
+  GtkCssProvider *provider;
 
   GTK_WIDGET_CLASS (gtk_inspector_window_parent_class)->realize (widget);
 
   renderer = gtk_root_get_renderer (GTK_ROOT (widget));
   gsk_renderer_set_debug_flags (renderer, 0);
+
+  provider = gtk_css_provider_new ();
+  gtk_css_provider_load_from_resource (provider, "/org/gtk/libgtk/inspector/inspector.css");
+  gtk_style_context_add_provider_for_display (gtk_widget_get_display (widget),
+                                              GTK_STYLE_PROVIDER (provider),
+                                              800);
+  g_object_unref (provider);
 }
 
 static void