treeviewcolumn: Redo sort arrows

Instead of hardcoding icon names in the widget, use
sort-indicator.ascending and sort-indicator.descending styles
and set the icon to use with -gtk-icon-source. This lets themes
change the icon that is used here, without forcing all uses of
pan-up/down-symbolic to be treated the same.

Document this in the treeview CSS docs.

Fixes: #3577

3 files changed, 44 insertions, 30 deletions

diff --git a/gtk/gtktreeview.c b/gtk/gtktreeview.c
index 82d5fd97d8..267c90b4fa 100644
--- a/gtk/gtktreeview.c
+++ b/gtk/gtktreeview.c
@@ -143,9 +143,11 @@
  * |[<!-- language="plain" -->
  * treeview.view
  * ├── header
- * │   ├── <column header>
+ * │   ├── button
+ * │   │   ╰── [sort-indicator]
  * ┊   ┊
- * │   ╰── <column header>
+ * │   ╰── button
+ * │       ╰── [sort-indicator]
  * │
  * ├── [rubberband]
  * ╰── [dndtarget]
@@ -155,6 +157,11 @@
  * It has a subnode with name header, which is the parent for all the column
  * header widgets' CSS nodes.
  *
+ * Each column header consists of a button, which among other content, has a
+ * child with name sort-indicator, which carries the .ascending or .descending
+ * style classes when the column header should show a sort indicator. The CSS
+ * is expected to provide a suitable image using the -gtk-icon-source property.
+ *
  * For rubberband selection, a subnode with name rubberband is used.
  *
  * For the drop target location during DND, a subnode with name dndtarget is used.
diff --git a/gtk/gtktreeviewcolumn.c b/gtk/gtktreeviewcolumn.c
index e321bed4b6..d546c994f2 100644
--- a/gtk/gtktreeviewcolumn.c
+++ b/gtk/gtktreeviewcolumn.c
@@ -38,6 +38,7 @@
 #include "gtkgesturedrag.h"
 #include "gtkeventcontrollerfocus.h"
 #include "gtkeventcontrollerkey.h"
+#include "gtkbuiltiniconprivate.h"
 
 #include <string.h>
 
@@ -52,12 +53,13 @@
  *   [GtkTreeView drag-and-drop][gtk3-GtkTreeView-drag-and-drop]
  *
  * The GtkTreeViewColumn object represents a visible column in a #GtkTreeView widget.
- * It allows to set properties of the column header, and functions as a holding pen for
- * the cell renderers which determine how the data in the column is displayed.
+ * It allows to set properties of the column header, and functions as a holding pen
+ * for the cell renderers which determine how the data in the column is displayed.
  *
  * Please refer to the [tree widget conceptual overview][TreeWidget]
- * for an overview of all the objects and data types related to the tree widget and how
- * they work together.
+ * for an overview of all the objects and data types related to the tree widget and
+ * how they work together, and to the #GtkTreeView documentation for specifics about
+ * the CSS node structure for treeviews and their headers.
  */
 
 
@@ -879,7 +881,7 @@ gtk_tree_view_column_create_button (GtkTreeViewColumn *tree_column)
   gtk_widget_set_halign (priv->frame, GTK_ALIGN_START);
 
   hbox = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 2);
-  priv->arrow = gtk_image_new_from_icon_name ("pan-down-symbolic");
+  priv->arrow = gtk_builtin_icon_new ("sort-indicator");
 
   if (priv->child)
     child = priv->child;
@@ -905,7 +907,7 @@ gtk_tree_view_column_create_button (GtkTreeViewColumn *tree_column)
   gtk_button_set_child (GTK_BUTTON (priv->button), hbox);
 }
 
-static void 
+static void
 gtk_tree_view_column_update_button (GtkTreeViewColumn *tree_column)
 {
   GtkTreeViewColumnPrivate *priv = tree_column->priv;
@@ -914,7 +916,6 @@ gtk_tree_view_column_update_button (GtkTreeViewColumn *tree_column)
   GtkWidget *frame;
   GtkWidget *arrow;
   GtkWidget *current_child;
-  const char *icon_name = "missing-image";
   GtkTreeModel *model;
 
   if (priv->tree_view)
@@ -948,17 +949,17 @@ gtk_tree_view_column_update_button (GtkTreeViewColumn *tree_column)
       g_return_if_fail (GTK_IS_LABEL (current_child));
 
       if (priv->title)
-	gtk_label_set_text_with_mnemonic (GTK_LABEL (current_child),
-					  priv->title);
+        gtk_label_set_text_with_mnemonic (GTK_LABEL (current_child),
+                                          priv->title);
       else
-	gtk_label_set_text_with_mnemonic (GTK_LABEL (current_child),
-					  "");
+        gtk_label_set_text_with_mnemonic (GTK_LABEL (current_child),
+                                          "");
     }
 
   if (GTK_IS_TREE_SORTABLE (model))
     gtk_tree_sortable_get_sort_column_id (GTK_TREE_SORTABLE (model),
-					  &sort_column_id,
-					  NULL);
+                                          &sort_column_id,
+                                          NULL);
 
   if (priv->show_sort_indicator)
     {
@@ -971,24 +972,19 @@ gtk_tree_view_column_update_button (GtkTreeViewColumn *tree_column)
       else
         alternative = FALSE;
 
-      switch (priv->sort_order)
+      if ((!alternative && priv->sort_order == GTK_SORT_ASCENDING) ||
+          (alternative && priv->sort_order == GTK_SORT_DESCENDING))
         {
-	  case GTK_SORT_ASCENDING:
-            icon_name = alternative ? "pan-up-symbolic" : "pan-down-symbolic";
-	    break;
-
-	  case GTK_SORT_DESCENDING:
-            icon_name = alternative ? "pan-down-symbolic" : "pan-up-symbolic";
-	    break;
-
-	  default:
-	    g_warning (G_STRLOC": bad sort order");
-	    break;
-	}
+          gtk_widget_remove_css_class (arrow, "descending");
+          gtk_widget_add_css_class (arrow, "ascending");
+        }
+      else
+        {
+          gtk_widget_remove_css_class (arrow, "ascending");
+          gtk_widget_add_css_class (arrow, "descending");
+        }
     }
 
-  gtk_image_set_from_icon_name (GTK_IMAGE (arrow), icon_name);
-
   /* Put arrow on the right if the text is left-or-center justified, and on the
    * left otherwise; do this by packing boxes, so flipping text direction will
    * reverse things
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index b5094c68e6..58d50a1dbe 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1766,6 +1766,17 @@ treeview.view {
         color: $fg_color;
         transition: none; //I shouldn't need this
       }
+      sort-indicator {
+        &.ascending {
+          -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+        }
+        &.descending {
+          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+        }
+
+        min-height: 16px;
+        min-width: 16px;
+      }
     }
   }