inspector: Add css node style properties

Add a per-cssnode view of style properties.

gtk/inspector/css-node-tree.c

@@ -27,29 +27,49 @@
 #include "prop-editor.h"
 
 #include "gtktreemodelcssnode.h"
-#include "gtk/gtktreeview.h"
+#include "gtktreeview.h"
-#include "gtk/gtklabel.h"
+#include "gtklabel.h"
-#include "gtk/gtkpopover.h"
+#include "gtkpopover.h"
 #include "gtk/gtkwidgetprivate.h"
+#include "gtkcssproviderprivate.h"
+#include "gtkcssstylepropertyprivate.h"
+#include "gtkcsssectionprivate.h"
+#include "gtkcssstyleprivate.h"
+#include "gtkcssvalueprivate.h"
+#include "gtkliststore.h"
+#include "gtksettings.h"
+#include "gtktreeview.h"
+#include "gtktreeselection.h"
 
 enum {
-  COLUMN_NAME,
+  COLUMN_NODE_NAME,
-  COLUMN_TYPE,
+  COLUMN_NODE_TYPE,
-  COLUMN_VISIBLE,
+  COLUMN_NODE_VISIBLE,
-  COLUMN_CLASSES,
+  COLUMN_NODE_CLASSES,
-  COLUMN_ID,
+  COLUMN_NODE_ID,
   /* add more */
-  N_COLUMNS
+  N_NODE_COLUMNS
+};
+
+enum
+{
+  COLUMN_PROP_NAME,
+  COLUMN_PROP_VALUE,
+  COLUMN_PROP_LOCATION
 };
 
 struct _GtkInspectorCssNodeTreePrivate
 {
-  GtkWidget *tree_view;
+  GtkWidget *node_tree;
-  GtkTreeModel *model;
+  GtkTreeModel *node_model;
-  GtkTreeViewColumn *name_column;
+  GtkTreeViewColumn *node_name_column;
-  GtkTreeViewColumn *id_column;
+  GtkTreeViewColumn *node_id_column;
-  GtkTreeViewColumn *classes_column;
+  GtkTreeViewColumn *node_classes_column;
   GtkWidget *object_title;
+  GtkListStore *prop_model;
+  GtkWidget *prop_tree;
+  GtkTreeViewColumn *prop_name_column;
+  GHashTable *prop_iters;
 };
 
 G_DEFINE_TYPE_WITH_PRIVATE (GtkInspectorCssNodeTree, gtk_inspector_css_node_tree, GTK_TYPE_BOX)
@@ -67,17 +87,17 @@ row_activated (GtkTreeView             *tv,
   GtkCssNode *node;
   const gchar *prop_name;
 
-  if (col == cnt->priv->name_column)
+  if (col == cnt->priv->node_name_column)
     prop_name = "name";
-  else if (col == cnt->priv->id_column)
+  else if (col == cnt->priv->node_id_column)
     prop_name = "id";
-  else if (col == cnt->priv->classes_column)
+  else if (col == cnt->priv->node_classes_column)
     prop_name = "classes";
   else
     return;
 
-  gtk_tree_model_get_iter (cnt->priv->model, &iter, path);
+  gtk_tree_model_get_iter (cnt->priv->node_model, &iter, path);
-  node = gtk_tree_model_css_node_get_node_from_iter (GTK_TREE_MODEL_CSS_NODE (cnt->priv->model), &iter);
+  node = gtk_tree_model_css_node_get_node_from_iter (GTK_TREE_MODEL_CSS_NODE (cnt->priv->node_model), &iter);
   gtk_tree_view_get_cell_area (tv, path, col, &rect);
   gtk_tree_view_convert_bin_window_to_widget_coords (tv, rect.x, rect.y, &rect.x, &rect.y);
 
@@ -97,30 +117,60 @@ row_activated (GtkTreeView             *tv,
   g_signal_connect (popover, "unmap", G_CALLBACK (gtk_widget_destroy), NULL);
 }
 
+static void populate_properties (GtkInspectorCssNodeTree *cnt);
+
+static void
+selection_changed (GtkTreeSelection *selection, GtkInspectorCssNodeTree *cnt)
+{
+  populate_properties (cnt);
+}
+
 static void
 gtk_inspector_css_node_tree_finalize (GObject *object)
 {
-  //GtkInspectorCssNodeTree *cnt = GTK_INSPECTOR_CSS_NODE_TREE (object);
+  GtkInspectorCssNodeTree *cnt = GTK_INSPECTOR_CSS_NODE_TREE (object);
+
+  g_hash_table_unref (cnt->priv->prop_iters);
 
   G_OBJECT_CLASS (gtk_inspector_css_node_tree_parent_class)->finalize (object);
 }
 
+static void
+ensure_css_sections (void)
+{
+  GtkSettings *settings;
+  gchar *theme_name;
+
+  gtk_css_provider_set_keep_css_sections ();
+
+  settings = gtk_settings_get_default ();
+  g_object_get (settings, "gtk-theme-name", &theme_name, NULL);
+  g_object_set (settings, "gtk-theme-name", theme_name, NULL);
+  g_free (theme_name);
+}
+
 static void
 gtk_inspector_css_node_tree_class_init (GtkInspectorCssNodeTreeClass *klass)
 {
   GObjectClass *object_class = G_OBJECT_CLASS (klass);
   GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
 
+  ensure_css_sections ();
+
   object_class->finalize = gtk_inspector_css_node_tree_finalize;
 
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gtk/libgtk/inspector/css-node-tree.ui");
-  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, tree_view);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, node_tree);
   gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, object_title);
-  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, name_column);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, node_name_column);
-  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, id_column);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, node_id_column);
-  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, classes_column);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, node_classes_column);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, prop_name_column);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, prop_model);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssNodeTree, prop_name_column);
 
   gtk_widget_class_bind_template_callback (widget_class, row_activated);
+  gtk_widget_class_bind_template_callback (widget_class, selection_changed);
 }
 
 static int
@@ -155,19 +205,19 @@ gtk_inspector_css_node_tree_get_node_value (GtkTreeModelCssNode *model,
 
   switch (column)
     {
-    case COLUMN_NAME:
+    case COLUMN_NODE_NAME:
       g_value_set_string (value, gtk_css_node_get_name (node));
       break;
 
-    case COLUMN_TYPE:
+    case COLUMN_NODE_TYPE:
       g_value_set_string (value, g_type_name (gtk_css_node_get_widget_type (node)));
       break;
 
-    case COLUMN_VISIBLE:
+    case COLUMN_NODE_VISIBLE:
       g_value_set_boolean (value, gtk_css_node_get_visible (node));
       break;
 
-    case COLUMN_CLASSES:
+    case COLUMN_NODE_CLASSES:
       strv = gtk_css_node_get_classes (node);
       strv_sort (strv);
       s = g_strjoinv (" ", strv);
@@ -175,7 +225,7 @@ gtk_inspector_css_node_tree_get_node_value (GtkTreeModelCssNode *model,
       g_strfreev (strv);
       break;
 
-    case COLUMN_ID:
+    case COLUMN_NODE_ID:
       g_value_set_string (value, gtk_css_node_get_id (node));
       break;
 
@@ -189,20 +239,42 @@ static void
 gtk_inspector_css_node_tree_init (GtkInspectorCssNodeTree *cnt)
 {
   GtkInspectorCssNodeTreePrivate *priv;
+  gint i;
 
   cnt->priv = gtk_inspector_css_node_tree_get_instance_private (cnt);
   gtk_widget_init_template (GTK_WIDGET (cnt));
   priv = cnt->priv;
 
-  priv->model = gtk_tree_model_css_node_new (gtk_inspector_css_node_tree_get_node_value,
+  priv->node_model = gtk_tree_model_css_node_new (gtk_inspector_css_node_tree_get_node_value,
-                                             N_COLUMNS,
+                                                  N_NODE_COLUMNS,
                                                   G_TYPE_STRING,
                                                   G_TYPE_STRING,
                                                   G_TYPE_BOOLEAN,
                                                   G_TYPE_STRING,
                                                   G_TYPE_STRING);
-  gtk_tree_view_set_model (GTK_TREE_VIEW (priv->tree_view), priv->model);
+  gtk_tree_view_set_model (GTK_TREE_VIEW (priv->node_tree), priv->node_model);
-  g_object_unref (priv->model);
+  g_object_unref (priv->node_model);
+
+  gtk_tree_sortable_set_sort_column_id (GTK_TREE_SORTABLE (cnt->priv->prop_model),
+                                        COLUMN_PROP_NAME,
+                                        GTK_SORT_ASCENDING);
+
+  priv->prop_iters = g_hash_table_new_full (g_str_hash, g_str_equal,
+                                            NULL, (GDestroyNotify) gtk_tree_iter_free);
+
+  for (i = 0; i < _gtk_css_style_property_get_n_properties (); i++)
+    {
+      GtkCssStyleProperty *prop;
+      GtkTreeIter iter;
+      const gchar *name;
+
+      prop = _gtk_css_style_property_lookup_by_id (i);
+      name = _gtk_style_property_get_name (GTK_STYLE_PROPERTY (prop));
+
+      gtk_list_store_append (cnt->priv->prop_model, &iter);
+      gtk_list_store_set (cnt->priv->prop_model, &iter, COLUMN_PROP_NAME, name, -1);
+      g_hash_table_insert (cnt->priv->prop_iters, (gpointer)name, gtk_tree_iter_copy (&iter));
+    }
 }
 
 void
@@ -221,12 +293,62 @@ gtk_inspector_css_node_tree_set_object (GtkInspectorCssNodeTree *cnt,
 
   if (!GTK_IS_WIDGET (object))
     {
-      gtk_tree_model_css_node_set_root_node (GTK_TREE_MODEL_CSS_NODE (priv->model), NULL);
+      gtk_tree_model_css_node_set_root_node (GTK_TREE_MODEL_CSS_NODE (priv->node_model), NULL);
       return;
     }
 
-  gtk_tree_model_css_node_set_root_node (GTK_TREE_MODEL_CSS_NODE (priv->model),
+  gtk_tree_model_css_node_set_root_node (GTK_TREE_MODEL_CSS_NODE (priv->node_model),
                                          gtk_widget_get_css_node (GTK_WIDGET (object)));
 }
 
+static void
+populate_properties (GtkInspectorCssNodeTree *cnt)
+{
+  GtkInspectorCssNodeTreePrivate *priv = cnt->priv;
+  GtkTreeSelection *selection;
+  GtkTreeIter titer;
+  GtkCssNode *node;
+  GtkCssStyle *style;
+  gint i;
+
+  selection = gtk_tree_view_get_selection (GTK_TREE_VIEW (priv->node_tree));
+  if (!gtk_tree_selection_get_selected (selection, NULL, &titer))
+    return;
+
+  node = gtk_tree_model_css_node_get_node_from_iter (GTK_TREE_MODEL_CSS_NODE (priv->node_model), &titer);
+  style = gtk_css_node_get_style (node);
+
+  for (i = 0; i < _gtk_css_style_property_get_n_properties (); i++)
+    {
+      GtkCssStyleProperty *prop;
+      const gchar *name;
+      GtkTreeIter *iter;
+      GtkCssSection *section;
+      gchar *location;
+      gchar *value;
+
+      prop = _gtk_css_style_property_lookup_by_id (i);
+      name = _gtk_style_property_get_name (GTK_STYLE_PROPERTY (prop));
+
+      iter = (GtkTreeIter *)g_hash_table_lookup (priv->prop_iters, name);
+
+      value = _gtk_css_value_to_string (gtk_css_style_get_value (style, i));
+
+      section = gtk_css_style_get_section (style, i);
+      if (section)
+        location = _gtk_css_section_to_string (section);
+      else
+        location = NULL;
+
+      gtk_list_store_set (priv->prop_model,
+                          iter,
+                          COLUMN_PROP_VALUE, value,
+                          COLUMN_PROP_LOCATION, location,
+                          -1);
+
+      g_free (location);
+      g_free (value);
+    }
+}
+
 // vim: set et sw=2 ts=2:

gtk/inspector/css-node-tree.ui

@@ -1,30 +1,49 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface domain="gtk30">
+  <object class="GtkListStore" id="prop_model">
+    <columns>
+      <column type="gchararray"/>
+      <column type="gchararray"/>
+      <column type="gchararray"/>
+      <column type="gchararray"/>
+      <column type="gint"/>
+    </columns>
+  </object>
   <template class="GtkInspectorCssNodeTree" parent="GtkBox">
     <property name="orientation">vertical</property>
     <child>
       <object class="GtkLabel" id="object_title">
-        <property name="visible">True</property>
+        <property name="visible">1</property>
-        <property name="halign">fill</property>
         <property name="valign">center</property>
         <property name="margin-top">12</property>
         <property name="margin-bottom">12</property>
       </object>
     </child>
     <child>
-      <object class="GtkScrolledWindow">
+      <object class="GtkPaned">
-        <property name="visible">True</property>
+        <property name="visible">1</property>
-        <property name="hscrollbar-policy">never</property>
+        <property name="orientation">vertical</property>
-        <property name="vscrollbar-policy">automatic</property>
-        <property name="expand">True</property>
         <child>
-          <object class="GtkTreeView" id="tree_view">
+          <object class="GtkScrolledWindow">
-            <property name="visible">True</property>
+            <property name="visible">1</property>
-            <property name="enable-search">False</property>
+            <property name="hscrollbar-policy">never</property>
+            <property name="expand">1</property>
+            <property name="min-content-height">100</property>
+            <child>
+              <object class="GtkTreeView" id="node_tree">
+                <property name="visible">1</property>
+                <property name="search-column">0</property>
+                <property name="enable-search">0</property>
                 <signal name="row-activated" handler="row_activated"/>
+                <child internal-child="selection">
+                  <object class="GtkTreeSelection">
+                    <property name="mode">single</property>
+                    <signal name="changed" handler="selection_changed"/>
+                  </object>
+                </child>
                 <child>
                   <object class="GtkTreeViewColumn">
-                <property name="resizable">True</property>
+                    <property name="resizable">1</property>
                     <property name="title" translatable="yes">Type</property>
                     <child>
                       <object class="GtkCellRendererText"/>
@@ -36,8 +55,8 @@
                   </object>
                 </child>
                 <child>
-              <object class="GtkTreeViewColumn" id="name_column">
+                  <object class="GtkTreeViewColumn" id="node_name_column">
-                <property name="resizable">True</property>
+                    <property name="resizable">1</property>
                     <property name="title" translatable="yes">Name</property>
                     <child>
                       <object class="GtkCellRendererText"/>
@@ -49,8 +68,8 @@
                   </object>
                 </child>
                 <child>
-              <object class="GtkTreeViewColumn" id="id_column">
+                  <object class="GtkTreeViewColumn" id="node_id_column">
-                <property name="resizable">True</property>
+                    <property name="resizable">1</property>
                     <property name="title" translatable="yes">ID</property>
                     <child>
                       <object class="GtkCellRendererText"/>
@@ -62,8 +81,8 @@
                   </object>
                 </child>
                 <child>
-              <object class="GtkTreeViewColumn" id="classes_column">
+                  <object class="GtkTreeViewColumn" id="node_classes_column">
-                <property name="resizable">True</property>
+                    <property name="resizable">1</property>
                     <property name="title" translatable="yes">Classes</property>
                     <child>
                       <object class="GtkCellRendererText"/>
@@ -78,5 +97,69 @@
             </child>
           </object>
         </child>
+        <child>
+          <object class="GtkScrolledWindow">
+            <property name="visible">1</property>
+            <property name="expand">1</property>
+            <property name="hscrollbar-policy">never</property>
+            <child>
+              <object class="GtkTreeView" id="prop_tree">
+                <property name="visible">1</property>
+                <property name="model">prop_model</property>
+                <property name="search-column">0</property>
+                <property name="enable-search">0</property>
+                <child>
+                  <object class="GtkTreeViewColumn" id="prop_name_column">
+                    <property name="title" translatable="yes">Property</property>
+                    <property name="resizable">1</property>
+                    <property name="sort-column-id">0</property>
+                    <child>
+                      <object class="GtkCellRendererText">
+                        <property name="scale">0.8</property>
+                      </object>
+                      <attributes>
+                        <attribute name="text">0</attribute>
+                      </attributes>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkTreeViewColumn">
+                    <property name="title" translatable="yes">Value</property>
+                    <property name="resizable">1</property>
+                    <child>
+                      <object class="GtkCellRendererText">
+                        <property name="scale">0.8</property>
+                        <property name="width-chars">20</property>
+                        <property name="ellipsize">end</property>
+                      </object>
+                      <attributes>
+                        <attribute name="text">1</attribute>
+                      </attributes>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkTreeViewColumn">
+                    <property name="title" translatable="yes">Location</property>
+                    <property name="resizable">1</property>
+                    <child>
+                      <object class="GtkCellRendererText">
+                        <property name="scale">0.8</property>
+                        <property name="width-chars">20</property>
+                        <property name="ellipsize">end</property>
+                      </object>
+                      <attributes>
+                        <attribute name="text">2</attribute>
+                      </attributes>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
   </template>
 </interface>