Topbar nav buttons are flipped on RTL locales

The topbar navigation buttons are flipped on right-to-left (rtl) locales.
On this version of GTK, we manually select the corresponding -rtl icon names.

Notice that styling is also flipped.

2 files changed, 27 insertions, 2 deletions

diff --git a/data/css/endless-widgets.css b/data/css/endless-widgets.css
index 569f3c1..28a9f3d 100644
--- a/data/css/endless-widgets.css
+++ b/data/css/endless-widgets.css
@@ -111,6 +111,15 @@ EosWindow {
     border-bottom-right-radius: 5px;
 }
 
+.top-bar .forward.rtl {
+    border-radius: 5px 0 0 5px;
+    border-right: 0px none;
+}
+
+.top-bar .back.rtl {
+    border-radius: 0 5px 5px 0;
+}
+
 .top-bar .endless-search-box {
     background-color: #4d4d4d;
     color: #eeeeec;
diff --git a/overrides/endless_private/topbar_nav_button.js b/overrides/endless_private/topbar_nav_button.js
index 541b122..ef79094 100644
--- a/overrides/endless_private/topbar_nav_button.js
+++ b/overrides/endless_private/topbar_nav_button.js
@@ -23,14 +23,30 @@ const TopbarNavButton = new Lang.Class({
         props.orientation = Gtk.Orientation.HORIZONTAL;
         this.parent(props);
 
-        this._back_button = Gtk.Button.new_from_icon_name('topbar-go-previous-symbolic',
+        let back_button_image;
+        let forward_button_image;
+        let is_rtl = this.get_default_direction() === Gtk.TextDirection.RTL ? true : false;
+        if (is_rtl) {
+            back_button_image = 'topbar-go-previous-rtl-symbolic';
+            forward_button_image = 'topbar-go-next-rtl-symbolic';
+        } else {
+            back_button_image = 'topbar-go-previous-symbolic';
+            forward_button_image = 'topbar-go-next-symbolic';
+        }
+
+        this._back_button = Gtk.Button.new_from_icon_name(back_button_image,
             Gtk.IconSize.SMALL_TOOLBAR);
-        this._forward_button = Gtk.Button.new_from_icon_name('topbar-go-next-symbolic',
+        this._forward_button = Gtk.Button.new_from_icon_name(forward_button_image,
             Gtk.IconSize.SMALL_TOOLBAR);
 
         this._back_button.get_style_context().add_class('back');
         this._forward_button.get_style_context().add_class('forward');
 
+        if (is_rtl) {
+            this._back_button.get_style_context().add_class('rtl');
+            this._forward_button.get_style_context().add_class('rtl');
+        }
+
         [this._back_button, this._forward_button].forEach(function (button) {
             button.can_focus = false;
             button.add_events(Gdk.EventMask.ENTER_NOTIFY_MASK |