inspector: Add a ruleview

This widget lists all the rules in the current CSS. For now it lives
next to the css editor widget.

8 files changed, 520 insertions, 13 deletions

diff --git a/gtk/inspector/Makefile.inc b/gtk/inspector/Makefile.inc
index 7641d3a9e5..a1be48b14c 100644
--- a/gtk/inspector/Makefile.inc
+++ b/gtk/inspector/Makefile.inc
@@ -4,6 +4,8 @@ inspector_c_sources = 			\
 	inspector/cellrenderergraph.c	\
 	inspector/css-editor.c		\
 	inspector/css-node-tree.c	\
+	inspector/cssruleview.c	        \
+	inspector/cssruleviewrow.c	\
 	inspector/data-list.c		\
 	inspector/general.c		\
 	inspector/gestures.c		\
@@ -35,6 +37,8 @@ inspector_h_sources = 			\
 	inspector/cellrenderergraph.h	\
 	inspector/css-editor.h		\
 	inspector/css-node-tree.h	\
+	inspector/cssruleview.h	        \
+	inspector/cssruleviewrow.h	\
 	inspector/data-list.h		\
 	inspector/general.h		\
 	inspector/gestures.h		\
@@ -63,6 +67,8 @@ inspector_templates =			\
 	inspector/actions.ui 		\
 	inspector/css-editor.ui 	\
 	inspector/css-node-tree.ui	\
+	inspector/cssruleview.ui        \
+	inspector/cssruleviewrow.ui	\
 	inspector/data-list.ui 		\
 	inspector/general.ui 		\
 	inspector/magnifier.ui		\
diff --git a/gtk/inspector/css-editor.c b/gtk/inspector/css-editor.c
index 21da13e8db..d2dec437e8 100644
--- a/gtk/inspector/css-editor.c
+++ b/gtk/inspector/css-editor.c
@@ -25,6 +25,8 @@
 
 #include "css-editor.h"
 
+#include "cssruleview.h"
+
 #include "gtkcssdeclarationprivate.h"
 #include "gtkcssprovider.h"
 #include "gtkcssrbtreeprivate.h"
@@ -76,6 +78,7 @@ struct _GtkCssChunkTokenSource
 struct _GtkInspectorCssEditorPrivate
 {
   GtkWidget *view;
+  GtkWidget *ruleview;
   GtkTextBuffer *text;
   GtkCssRbTree *tokens;
   GtkCssProvider *provider;
@@ -475,6 +478,9 @@ update_style_sheet (GtkInspectorCssEditor *ce)
   gtk_css_style_sheet_parse (priv->style_sheet, source);
 
   gtk_css_token_source_unref (source);
+
+  gtk_inspector_css_rule_view_set_style_sheet (GTK_INSPECTOR_CSS_RULE_VIEW (ce->priv->ruleview),
+                                               ce->priv->style_sheet);
 }
 
 static gboolean
@@ -757,6 +763,9 @@ gtk_inspector_css_editor_init (GtkInspectorCssEditor *ce)
                                           gtk_css_chunk_augment,
                                           gtk_css_chunk_clear,
                                           NULL);
+
+  gtk_inspector_css_rule_view_set_style_sheet (GTK_INSPECTOR_CSS_RULE_VIEW (ce->priv->ruleview),
+                                               ce->priv->style_sheet);
 }
 
 static void
@@ -802,6 +811,7 @@ gtk_inspector_css_editor_class_init (GtkInspectorCssEditorClass *klass)
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gtk/libgtk/inspector/css-editor.ui");
   gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssEditor, text);
   gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssEditor, view);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssEditor, ruleview);
   gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssEditor, disable_button);
   gtk_widget_class_bind_template_callback (widget_class, disable_toggled);
   gtk_widget_class_bind_template_callback (widget_class, save_clicked);
diff --git a/gtk/inspector/css-editor.ui b/gtk/inspector/css-editor.ui
index 115abcd452..b3af2dbca6 100644
--- a/gtk/inspector/css-editor.ui
+++ b/gtk/inspector/css-editor.ui
@@ -107,22 +107,36 @@
       </object>
     </child>
     <child>
-      <object class="GtkScrolledWindow">
+      <object class="GtkPaned">
         <property name="visible">True</property>
-        <property name="hscrollbar-policy">automatic</property>
-        <property name="vscrollbar-policy">automatic</property>
-        <property name="expand">True</property>
+        <property name="orientation">horizontal</property>
+        <child>
+          <object class="GtkScrolledWindow">
+            <property name="visible">True</property>
+            <property name="hscrollbar-policy">automatic</property>
+            <property name="vscrollbar-policy">automatic</property>
+            <property name="expand">True</property>
+            <child>
+              <object class="GtkTextView" id="view">
+                <property name="visible">True</property>
+                <property name="buffer">text</property>
+                <property name="wrap-mode">word</property>
+                <property name="monospace">True</property>
+                <property name="has-focus">True</property>
+                <property name="left-margin">6</property>
+                <property name="right-margin">6</property>
+                <property name="has-tooltip">True</property>
+                <signal name="query-tooltip" handler="query_tooltip_cb"/>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="resize">True</property>
+          </packing>
+        </child>
         <child>
-          <object class="GtkTextView" id="view">
+          <object class="GtkInspectorCssRuleView" id="ruleview">
             <property name="visible">True</property>
-            <property name="buffer">text</property>
-            <property name="wrap-mode">word</property>
-            <property name="monospace">True</property>
-            <property name="has-focus">True</property>
-            <property name="left-margin">6</property>
-            <property name="right-margin">6</property>
-            <property name="has-tooltip">True</property>
-            <signal name="query-tooltip" handler="query_tooltip_cb"/>
           </object>
         </child>
       </object>
diff --git a/gtk/inspector/cssruleview.c b/gtk/inspector/cssruleview.c
new file mode 100644
index 0000000000..ba022303cb
--- /dev/null
+++ b/gtk/inspector/cssruleview.c
@@ -0,0 +1,146 @@
+/*
+ * Copyright (c) 2016 Benjamin Otte <otte@gnome.org>
+ *
+ * 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 "config.h"
+#include <glib/gi18n-lib.h>
+
+#include "cssruleview.h"
+
+#include "cssruleviewrow.h"
+
+#include "gtkcssrulelistprivate.h"
+#include "gtkcssstyleruleprivate.h"
+
+typedef struct _GtkInspectorCssRuleViewPrivate GtkInspectorCssRuleViewPrivate;
+
+struct _GtkInspectorCssRuleViewPrivate
+{
+  GtkCssStyleSheet *style_sheet;
+
+  GtkWidget *list_widget;
+};
+
+G_DEFINE_TYPE_WITH_PRIVATE (GtkInspectorCssRuleView, gtk_inspector_css_rule_view, GTK_TYPE_BIN)
+
+static void
+finalize (GObject *object)
+{
+  GtkInspectorCssRuleView *ruleview = GTK_INSPECTOR_CSS_RULE_VIEW (object);
+
+  gtk_inspector_css_rule_view_set_style_sheet (ruleview, NULL);
+
+  G_OBJECT_CLASS (gtk_inspector_css_rule_view_parent_class)->finalize (object);
+}
+
+static void
+gtk_inspector_css_rule_view_class_init (GtkInspectorCssRuleViewClass *klass)
+{
+  GObjectClass *object_class = G_OBJECT_CLASS (klass);
+  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
+
+  object_class->finalize = finalize;
+
+  gtk_widget_class_set_template_from_resource (widget_class, "/org/gtk/libgtk/inspector/cssruleview.ui");
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssRuleView, list_widget);
+}
+
+static gint
+sort_func (GtkListBoxRow *row1,
+           GtkListBoxRow *row2,
+           gpointer       data)
+{
+  return - gtk_inspector_css_rule_view_row_compare_specificity (GTK_INSPECTOR_CSS_RULE_VIEW_ROW (row1),
+                                                                GTK_INSPECTOR_CSS_RULE_VIEW_ROW (row2));
+}
+
+static void
+gtk_inspector_css_rule_view_init (GtkInspectorCssRuleView *ruleview)
+{
+  GtkInspectorCssRuleViewPrivate *priv;
+
+  gtk_widget_init_template (GTK_WIDGET (ruleview));
+
+  priv = gtk_inspector_css_rule_view_get_instance_private (ruleview);
+  gtk_list_box_set_sort_func (GTK_LIST_BOX (priv->list_widget),
+                              sort_func,
+                              ruleview,
+                              NULL);
+}
+
+void
+gtk_inspector_css_rule_view_set_style_sheet (GtkInspectorCssRuleView *ruleview,
+                                             GtkCssStyleSheet        *style_sheet)
+{
+  GtkInspectorCssRuleViewPrivate *priv;
+  
+  g_return_if_fail (GTK_INSPECTOR_IS_CSS_RULE_VIEW (ruleview));
+  g_return_if_fail (style_sheet == NULL || GTK_IS_CSS_STYLE_SHEET (style_sheet));
+  
+  priv = gtk_inspector_css_rule_view_get_instance_private (ruleview);
+
+  if (priv->style_sheet == style_sheet)
+    return;
+
+  if (priv->style_sheet)
+    {
+      GtkListBoxRow *row;
+      
+      for (row = gtk_list_box_get_row_at_index (GTK_LIST_BOX (priv->list_widget), 0);
+           row != NULL;
+           row = gtk_list_box_get_row_at_index (GTK_LIST_BOX (priv->list_widget), 0))
+        {
+          gtk_container_remove (GTK_CONTAINER (priv->list_widget), GTK_WIDGET (row));
+        }
+
+      g_object_unref (priv->style_sheet);
+    }
+
+  priv->style_sheet = style_sheet;
+
+  if (style_sheet)
+    {
+      GtkCssRuleList *rule_list;
+      GtkCssRule *rule;
+      guint i, j;
+
+      g_object_ref (style_sheet);
+
+      rule_list = gtk_css_style_sheet_get_css_rules (style_sheet);
+
+      for (i = 0; i < gtk_css_rule_list_get_length (rule_list); i++)
+        {
+          rule = gtk_css_rule_list_get_item (rule_list, i);
+
+          if (!GTK_IS_CSS_STYLE_RULE (rule))
+            continue;
+
+          for (j = 0; j < gtk_css_style_rule_get_n_selectors (GTK_CSS_STYLE_RULE (rule)); j++)
+            {
+              GtkWidget *row = gtk_inspector_css_rule_view_row_new (GTK_CSS_STYLE_RULE (rule), j);
+
+              gtk_widget_show (row);
+              gtk_container_add (GTK_CONTAINER (priv->list_widget), row);
+            }
+        }
+    }
+}
+
diff --git a/gtk/inspector/cssruleview.h b/gtk/inspector/cssruleview.h
new file mode 100644
index 0000000000..61ddc7b7a7
--- /dev/null
+++ b/gtk/inspector/cssruleview.h
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2016 Benjamin Otte <otte@gnome.org>
+ *
+ * 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 _GTK_INSPECTOR_CSS_RULE_VIEW_H_
+#define _GTK_INSPECTOR_CSS_RULE_VIEW_H_
+
+#include <gtk/gtk.h>
+#include "gtk/gtkcssstylesheetprivate.h"
+
+#define GTK_TYPE_INSPECTOR_CSS_RULE_VIEW            (gtk_inspector_css_rule_view_get_type())
+#define GTK_INSPECTOR_CSS_RULE_VIEW(obj)            (G_TYPE_CHECK_INSTANCE_CAST((obj), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW, GtkInspectorCssRuleView))
+#define GTK_INSPECTOR_CSS_RULE_VIEW_CLASS(klass)    (G_TYPE_CHECK_CLASS_CAST((klass), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW, GtkInspectorCssRuleViewClass))
+#define GTK_INSPECTOR_IS_CSS_RULE_VIEW(obj)         (G_TYPE_CHECK_INSTANCE_TYPE((obj), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW))
+#define GTK_INSPECTOR_IS_CSS_RULE_VIEW_CLASS(klass) (G_TYPE_CHECK_CLASS_TYPE((klass), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW))
+#define GTK_INSPECTOR_CSS_RULE_VIEW_GET_CLASS(obj)  (G_TYPE_INSTANCE_GET_CLASS((obj), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW, GtkInspectorCssRuleViewClass))
+
+typedef struct _GtkInspectorCssRuleView GtkInspectorCssRuleView;
+typedef struct _GtkInspectorCssRuleViewClass GtkInspectorCssRuleViewClass;
+
+typedef struct _GtkInspectorCssRuleView
+{
+  GtkBin parent;
+} GtkInspectorCssRuleView;
+
+typedef struct _GtkInspectorCssRuleViewClass
+{
+  GtkBinClass parent;
+} GtkInspectorCssRuleViewClass;
+
+G_BEGIN_DECLS
+
+GType           gtk_inspector_css_rule_view_get_type   (void);
+
+void            gtk_inspector_css_rule_view_set_style_sheet     (GtkInspectorCssRuleView        *ruleview,
+                                                                 GtkCssStyleSheet               *style_sheet);
+
+G_END_DECLS
+
+#endif // _GTK_INSPECTOR_CSS_RULE_VIEW_H_
+
+// vim: set et sw=2 ts=2:
diff --git a/gtk/inspector/cssruleviewrow.c b/gtk/inspector/cssruleviewrow.c
new file mode 100644
index 0000000000..b143c2465b
--- /dev/null
+++ b/gtk/inspector/cssruleviewrow.c
@@ -0,0 +1,205 @@
+/*
+ * Copyright (c) 2016 Benjamin Otte <otte@gnome.org>
+ *
+ * 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 "config.h"
+#include <glib/gi18n-lib.h>
+
+#include "cssruleviewrow.h"
+
+#include "gtkcssdeclarationprivate.h"
+#include "gtkcssstylesheetprivate.h"
+
+typedef struct _GtkInspectorCssRuleViewRowPrivate GtkInspectorCssRuleViewRowPrivate;
+
+struct _GtkInspectorCssRuleViewRowPrivate
+{
+  GtkCssStyleRule *rule;
+  guint selector_id;
+
+  GtkWidget *selector_label;
+  GtkWidget *location_button;
+  GtkWidget *style_label;
+};
+
+G_DEFINE_TYPE_WITH_PRIVATE (GtkInspectorCssRuleViewRow, gtk_inspector_css_rule_view_row, GTK_TYPE_LIST_BOX_ROW)
+
+static gboolean
+location_button_clicked (GtkLabel *label,
+                         char     *unused,
+                         gpointer  data)
+{
+  g_print ("Link to %s was clicked.\n", gtk_label_get_text (label));
+
+  return TRUE;
+}
+
+static void
+finalize (GObject *object)
+{
+  GtkInspectorCssRuleViewRow *row = GTK_INSPECTOR_CSS_RULE_VIEW_ROW (object);
+  GtkInspectorCssRuleViewRowPrivate *priv = gtk_inspector_css_rule_view_row_get_instance_private (row);
+
+  g_object_unref (priv->rule);
+
+  G_OBJECT_CLASS (gtk_inspector_css_rule_view_row_parent_class)->finalize (object);
+}
+
+static void
+gtk_inspector_css_rule_view_row_class_init (GtkInspectorCssRuleViewRowClass *klass)
+{
+  GObjectClass *object_class = G_OBJECT_CLASS (klass);
+  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
+
+  object_class->finalize = finalize;
+
+  gtk_widget_class_set_template_from_resource (widget_class, "/org/gtk/libgtk/inspector/cssruleviewrow.ui");
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssRuleViewRow, selector_label);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssRuleViewRow, location_button);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkInspectorCssRuleViewRow, style_label);
+  gtk_widget_class_bind_template_callback (widget_class, location_button_clicked);
+}
+
+static void
+gtk_inspector_css_rule_view_row_init (GtkInspectorCssRuleViewRow *ce)
+{
+  gtk_widget_init_template (GTK_WIDGET (ce));
+}
+
+static GtkCssSelector *
+gtk_inspector_css_rule_view_row_get_selector (GtkInspectorCssRuleViewRow *row)
+{
+  GtkInspectorCssRuleViewRowPrivate *priv = gtk_inspector_css_rule_view_row_get_instance_private (row);
+
+  return gtk_css_style_rule_get_selector (GTK_CSS_STYLE_RULE (priv->rule), priv->selector_id);
+}
+
+static void
+update_selector_label (GtkInspectorCssRuleViewRow *row)
+{
+  GtkInspectorCssRuleViewRowPrivate *priv;
+  GtkCssSelector *selector;
+  GString *string;
+
+  priv = gtk_inspector_css_rule_view_row_get_instance_private (row);
+  selector = gtk_css_style_rule_get_selector (GTK_CSS_STYLE_RULE (priv->rule), priv->selector_id);
+  string = g_string_new (NULL);
+  _gtk_css_selector_print (selector, string);
+  g_string_append (string, " {");
+  gtk_label_set_text (GTK_LABEL (priv->selector_label), string->str);
+  g_string_free (string, TRUE);
+}
+
+static void
+update_style_label (GtkInspectorCssRuleViewRow *row)
+{
+  GtkInspectorCssRuleViewRowPrivate *priv;
+  GtkCssStyleDeclaration *style;
+  GString *string;
+  guint i;
+
+  priv = gtk_inspector_css_rule_view_row_get_instance_private (row);
+  style = gtk_css_style_rule_get_style (GTK_CSS_STYLE_RULE (priv->rule));
+  string = g_string_new (NULL);
+  for (i = 0; i < gtk_css_style_declaration_get_length (style); i++)
+    {
+      GtkCssDeclaration *decl = gtk_css_style_declaration_get_declaration (style, i);
+
+      if (i > 0)
+        g_string_append (string, "\n");
+      g_string_append (string, gtk_css_declaration_get_name (decl));
+      g_string_append (string, ": ");
+      _gtk_css_value_print (gtk_css_declaration_get_value (decl), string);
+      g_string_append (string, ";");
+    }
+  gtk_label_set_text (GTK_LABEL (priv->style_label), string->str);
+  g_string_free (string, TRUE);
+}
+
+static void
+update_location_label (GtkInspectorCssRuleViewRow *row)
+{
+  GtkInspectorCssRuleViewRowPrivate *priv;
+  GtkCssStyleSheet *style_sheet;
+  GString *string;
+  GFile *file;
+
+  priv = gtk_inspector_css_rule_view_row_get_instance_private (row);
+  string = g_string_new ("<a href=\"foo\">");
+  style_sheet = gtk_css_rule_get_parent_style_sheet (GTK_CSS_RULE (priv->rule));
+  file = gtk_css_style_sheet_get_file (style_sheet);
+  if (file)
+    {
+      GFileInfo *info;
+
+      info = g_file_query_info (file, G_FILE_ATTRIBUTE_STANDARD_DISPLAY_NAME, 0, NULL, NULL);
+
+      if (info)
+        {
+          char *escaped = g_markup_escape_text (g_file_info_get_display_name (info), -1);
+          g_string_append (string, escaped);
+          g_free (escaped);
+          g_object_unref (info);
+        }
+      else
+        {
+          g_string_append (string, "&lt;broken file&gt;");
+        }
+    }
+  else
+    {
+      g_string_append (string, "&lt;data&gt;");
+    }
+
+  g_string_append (string, "</a>");
+  gtk_label_set_markup (GTK_LABEL (priv->location_button), string->str);
+  g_string_free (string, TRUE);
+}
+
+GtkWidget *
+gtk_inspector_css_rule_view_row_new (GtkCssStyleRule *rule,
+                                     guint            selector_id)
+{
+  GtkInspectorCssRuleViewRowPrivate *priv;
+  GtkInspectorCssRuleViewRow *row;
+
+  row = g_object_new (GTK_TYPE_INSPECTOR_CSS_RULE_VIEW_ROW, NULL);
+  priv = gtk_inspector_css_rule_view_row_get_instance_private (row);
+
+  priv->rule = g_object_ref (rule);
+  priv->selector_id = selector_id;
+
+  update_selector_label (row);
+  update_location_label (row);
+  update_style_label (row);
+
+  return GTK_WIDGET (row);
+}
+
+gint
+gtk_inspector_css_rule_view_row_compare_specificity (GtkInspectorCssRuleViewRow *row1,
+                                                     GtkInspectorCssRuleViewRow *row2)
+{
+  GtkCssSelector *selector1 = gtk_inspector_css_rule_view_row_get_selector (row1);
+  GtkCssSelector *selector2 = gtk_inspector_css_rule_view_row_get_selector (row2);
+
+  return _gtk_css_selector_compare (selector1, selector2);
+}
diff --git a/gtk/inspector/cssruleviewrow.h b/gtk/inspector/cssruleviewrow.h
new file mode 100644
index 0000000000..4fda852059
--- /dev/null
+++ b/gtk/inspector/cssruleviewrow.h
@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2016 Benjamin Otte <otte@gnome.org>
+ *
+ * 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 _GTK_INSPECTOR_CSS_RULE_VIEW_ROW_H_
+#define _GTK_INSPECTOR_CSS_RULE_VIEW_ROW_H_
+
+#include <gtk/gtk.h>
+#include "gtk/gtkcssstyleruleprivate.h"
+
+#define GTK_TYPE_INSPECTOR_CSS_RULE_VIEW_ROW            (gtk_inspector_css_rule_view_row_get_type())
+#define GTK_INSPECTOR_CSS_RULE_VIEW_ROW(obj)            (G_TYPE_CHECK_INSTANCE_CAST((obj), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW_ROW, GtkInspectorCssRuleViewRow))
+#define GTK_INSPECTOR_CSS_RULE_VIEW_ROW_CLASS(klass)    (G_TYPE_CHECK_CLASS_CAST((klass), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW_ROW, GtkInspectorCssRuleViewRowClass))
+#define GTK_INSPECTOR_IS_CSS_RULE_VIEW_ROW(obj)         (G_TYPE_CHECK_INSTANCE_TYPE((obj), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW_ROW))
+#define GTK_INSPECTOR_IS_CSS_RULE_VIEW_ROW_CLASS(klass) (G_TYPE_CHECK_CLASS_TYPE((klass), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW_ROW))
+#define GTK_INSPECTOR_CSS_RULE_VIEW_ROW_GET_CLASS(obj)  (G_TYPE_INSTANCE_GET_CLASS((obj), GTK_TYPE_INSPECTOR_CSS_RULE_VIEW_ROW, GtkInspectorCssRuleViewRowClass))
+
+typedef struct _GtkInspectorCssRuleViewRow GtkInspectorCssRuleViewRow;
+typedef struct _GtkInspectorCssRuleViewRowClass GtkInspectorCssRuleViewRowClass;
+
+typedef struct _GtkInspectorCssRuleViewRow
+{
+  GtkListBoxRow parent;
+} GtkInspectorCssRuleViewRow;
+
+typedef struct _GtkInspectorCssRuleViewRowClass
+{
+  GtkListBoxRowClass parent;
+} GtkInspectorCssRuleViewRowClass;
+
+G_BEGIN_DECLS
+
+GType           gtk_inspector_css_rule_view_row_get_type    (void);
+
+GtkWidget *     gtk_inspector_css_rule_view_row_new           (GtkCssStyleRule                  *rule,
+                                                               guint                             selector_id);
+
+gint            gtk_inspector_css_rule_view_row_compare_specificity
+                                                              (GtkInspectorCssRuleViewRow       *row1,
+                                                               GtkInspectorCssRuleViewRow       *row2);
+
+G_END_DECLS
+
+#endif // _GTK_INSPECTOR_CSS_RULE_VIEW_ROW_H_
+
+// vim: set et sw=2 ts=2:
diff --git a/gtk/inspector/init.c b/gtk/inspector/init.c
index 53a9b9e472..fa2d408c7b 100644
--- a/gtk/inspector/init.c
+++ b/gtk/inspector/init.c
@@ -28,6 +28,7 @@
 #include "cellrenderergraph.h"
 #include "css-editor.h"
 #include "css-node-tree.h"
+#include "cssruleview.h"
 #include "data-list.h"
 #include "general.h"
 #include "gestures.h"
@@ -61,6 +62,7 @@ gtk_inspector_init (void)
   g_type_ensure (GTK_TYPE_INSPECTOR_ACTIONS);
   g_type_ensure (GTK_TYPE_INSPECTOR_CSS_EDITOR);
   g_type_ensure (GTK_TYPE_INSPECTOR_CSS_NODE_TREE);
+  g_type_ensure (GTK_TYPE_INSPECTOR_CSS_RULE_VIEW);
   g_type_ensure (GTK_TYPE_INSPECTOR_DATA_LIST);
   g_type_ensure (GTK_TYPE_INSPECTOR_GENERAL);
   g_type_ensure (GTK_TYPE_INSPECTOR_GESTURES);