LibGUI: Programatically draw table header sorting arrows

These arrows were previously drawn using the code points U+2B06 and
U+2B07. The .png files for these emoji were removed in commit bfe99eb
and added to the Katica Regular 10 font in commit cf62d08. The emoji
were not added to the bold Katica variants that are used by the table
header view. The effect is that a "?" replacement character was
rendered.

Instead of rendering the emoji, we can draw the arrows programatically,
like we do in other GUI components (e.g. the scrollbar).

4 files changed, 32 insertions, 17 deletions

diff --git a/Userland/Libraries/LibGUI/AbstractTableView.cpp b/Userland/Libraries/LibGUI/AbstractTableView.cpp
index eba13fdbeb..99007318fc 100644
--- a/Userland/Libraries/LibGUI/AbstractTableView.cpp
+++ b/Userland/Libraries/LibGUI/AbstractTableView.cpp
@@ -60,7 +60,7 @@ void AbstractTableView::auto_resize_column(int column)
 
     int header_width = m_column_header->font().width(model.column_name(column));
     if (column == m_key_column && model.is_column_sortable(column))
-        header_width += font().width(" \xE2\xAC\x86"sv);
+        header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
 
     int column_width = header_width;
     bool is_empty = true;
@@ -99,7 +99,7 @@ void AbstractTableView::update_column_sizes()
             continue;
         int header_width = m_column_header->font().width(model.column_name(column));
         if (column == m_key_column && model.is_column_sortable(column))
-            header_width += font().width(" \xE2\xAC\x86"sv); // UPWARDS BLACK ARROW
+            header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
         int column_width = header_width;
         for (int row = 0; row < row_count; ++row) {
             auto cell_data = model.index(row, column).data();
diff --git a/Userland/Libraries/LibGUI/HeaderView.cpp b/Userland/Libraries/LibGUI/HeaderView.cpp
index e596387906..40a4b6cc5c 100644
--- a/Userland/Libraries/LibGUI/HeaderView.cpp
+++ b/Userland/Libraries/LibGUI/HeaderView.cpp
@@ -264,22 +264,22 @@ void HeaderView::paint_horizontal(Painter& painter)
         bool pressed = section == m_pressed_section && m_pressed_section_is_pressed;
         bool hovered = section == m_hovered_section && model()->is_column_sortable(section);
         Gfx::StylePainter::paint_button(painter, cell_rect, palette(), Gfx::ButtonStyle::Normal, pressed, hovered);
-        String text;
-        if (is_key_column) {
-            StringBuilder builder;
-            builder.append(model()->column_name(section));
-            if (m_table_view.sort_order() == SortOrder::Ascending)
-                builder.append(" \xE2\xAC\x86"sv); // UPWARDS BLACK ARROW
-            else if (m_table_view.sort_order() == SortOrder::Descending)
-                builder.append(" \xE2\xAC\x87"sv); // DOWNWARDS BLACK ARROW
-            text = builder.to_string();
-        } else {
-            text = model()->column_name(section);
-        }
+
+        auto text = model()->column_name(section);
         auto text_rect = cell_rect.shrunken(m_table_view.horizontal_padding() * 2, 0);
         if (pressed)
             text_rect.translate_by(1, 1);
         painter.draw_text(text_rect, text, font(), section_data.alignment, palette().button_text());
+
+        if (is_key_column && (m_table_view.sort_order() != SortOrder::None)) {
+            Gfx::IntPoint offset { text_rect.x() + font().width(text) + sorting_arrow_offset, sorting_arrow_offset };
+            auto coordinates = m_table_view.sort_order() == SortOrder::Ascending
+                ? ascending_arrow_coordinates.span()
+                : descending_arrow_coordinates.span();
+
+            painter.draw_triangle(offset, coordinates, palette().button_text());
+        }
+
         x_offset += section_width + m_table_view.horizontal_padding() * 2;
     }
 
diff --git a/Userland/Libraries/LibGUI/HeaderView.h b/Userland/Libraries/LibGUI/HeaderView.h
index 333761b743..607543d855 100644
--- a/Userland/Libraries/LibGUI/HeaderView.h
+++ b/Userland/Libraries/LibGUI/HeaderView.h
@@ -41,6 +41,21 @@ public:
 
     Function<void(int section)> on_resize_doubleclick;
 
+    static constexpr auto const sorting_arrow_offset = 3;
+    static constexpr auto const sorting_arrow_width = 6;
+
+    static constexpr auto const ascending_arrow_coordinates = Array {
+        Gfx::IntPoint { 4, 2 },
+        Gfx::IntPoint { 1, 5 },
+        Gfx::IntPoint { 7, 5 },
+    };
+
+    static constexpr auto const descending_arrow_coordinates = Array {
+        Gfx::IntPoint { 1, 3 },
+        Gfx::IntPoint { 7, 3 },
+        Gfx::IntPoint { 4, 6 },
+    };
+
 private:
     HeaderView(AbstractTableView&, Gfx::Orientation);
 
diff --git a/Userland/Libraries/LibGUI/TreeView.cpp b/Userland/Libraries/LibGUI/TreeView.cpp
index 2ad9215da0..ab57d46b59 100644
--- a/Userland/Libraries/LibGUI/TreeView.cpp
+++ b/Userland/Libraries/LibGUI/TreeView.cpp
@@ -644,7 +644,7 @@ void TreeView::auto_resize_column(int column)
 
     int header_width = column_header().font().width(model.column_name(column));
     if (column == m_key_column && model.is_column_sortable(column))
-        header_width += font().width(" \xE2\xAC\x86"sv);
+        header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
     int column_width = header_width;
 
     bool is_empty = true;
@@ -689,7 +689,7 @@ void TreeView::update_column_sizes()
             continue;
         int header_width = column_header().font().width(model.column_name(column));
         if (column == m_key_column && model.is_column_sortable(column))
-            header_width += font().width(" \xE2\xAC\x86"sv);
+            header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
         int column_width = header_width;
         traverse_in_paint_order([&](ModelIndex const& index, Gfx::IntRect const&, Gfx::IntRect const&, int) {
             auto cell_data = model.index(index.row(), column, index.parent()).data();
@@ -710,7 +710,7 @@ void TreeView::update_column_sizes()
 
     int tree_column_header_width = column_header().font().width(model.column_name(tree_column));
     if (tree_column == m_key_column && model.is_column_sortable(tree_column))
-        tree_column_header_width += font().width(" \xE2\xAC\x86"sv);
+        tree_column_header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
     int tree_column_width = tree_column_header_width;
     traverse_in_paint_order([&](ModelIndex const& index, Gfx::IntRect const&, Gfx::IntRect const&, int indent_level) {
         auto cell_data = model.index(index.row(), tree_column, index.parent()).data();