[Feature Request] Add RTL layout support to the sidebar

[WiseFerret]

Abstract

RTL users can move the sidebar to the right hand side of the firefox window, but its inner layout is still LTR, which is uncomfortable and unintuitive. We need an RTL layout support for the sidebar.

Steps to see the situation

1. Use RTL system interface (Arabic, Farsi, Hebrew, Urdu, Amharic, etc.) on linux or windows (haven't tested macOS).
2. Start Firefox with clean profile.
3. Install TST.

Expected result

The pinned tabs should be aligned to the right.
The icon on each tab should be on its right.
The triangle for spreading a parent tab should be on its right.
Nested tabs should be moved slightly to the left.
The X closing button on each tab should be on its left.

Actual (present) result

The pinned tabs are aligned to the left.
The icon on each tab is on its left.
The triangle for spreading a parent tab is on its left.
Nested tabs are moved slightly to the right.
The X closing button on each tab is on its right.

Environment

• Platform (OS): Ubuntu 24.10, Windows 11
• Version of Firefox: 133.03
• Version (or revision) of Tree Style Tab: 4.0.25

[piroor]

Could you try this?

1. Go to TST options.
2. Appearance => Style of contents for the sidebar position => choose "Right side"
3. Advanced => User Style Sheet => set as:

   .tabs.pinned,
   tab-item-substance .caption {
     direction: rtl;
   }
   tab-item-substance .caption > * {
     order: 0;
   }

This workaround should be added to the code snippets for now, if it is effective enough,

[piroor]

And I hope to put this code into TST as a built-in, if it is possible to detect the global direction of the browser UI. Hmm, how should we do that...?

[WiseFerret]

The addition to the user style sheet seems to solve the problem! Thank you.
I'm sure that firefox gives an environment variable regarding global direction - doesn't it?

[WiseFerret]

Two bugs I noticed with this implementation, though:

1. Dragging and dropping pinned tabs brings unexpected results. The tabs are moved to a location different than that of the mouse cursor.
2. The spacing between the icons and the beginning of text (when the tab title is in rtl language or is ltr but very short) is too tight,

[piroor]

I've researched how Firefox itself applies RTL layout. It uses :-moz-locale-dir(rtl) pseud class selector for the root element. Sadly the selector does not available in sidebar contents of extensions...

[piroor]

I've introduced some changes to support RTL environment. Could you try the latest development build and remove the CSS hack I posted before?
https://github.com/piroor/treestyletab?tab=readme-ov-file#development-builds

[piroor]

Screenshot with the latest development build:

[WiseFerret]

Looking very good!

[piroor]

I've pushed more changes to improve RTL support. I'm waiting for your more feedback!

[piroor]

Reminder:

• Mispositioned icons in the Container chooser

[piroor]

Helper addons (tst-* repositories) also need to be updated to support RTL.

[WiseFerret]

It seems that I'll need to replace my entire firefox installation in order to install an unsigned addon, as the one that is produced by the automated build...

[piroor]

Automated unsigned builds can be loaded temporarily with about:debugging, on regular releases of Firefox. Anyway I've uploaded a new release 4.1.1 including this change. Please wait until it is published after reviewed.