[legacy] Show close button on the left, then twisty & favicon.

[sumyungguy]

Short description

On the Mac, the close button goes on the left. Until now I've been using "invert tab contents" pref in legacy TST, which then puts the twisty and favicon on the right. In TST 2, it's possible to move the close button to the left, with the twisty/favicon just to the right of that, which I prefer. I'd like to do that in legacy TST too.

I found the secret pref "extensions.treestyletab.tabbar.invertClosebox". However, this puts the favicon on the left, with the close button to the right of it. Is there any way, for example using userChrome.css, to change the order? I tried but was not successful. Or maybe there's a simple change to the TST source code? I looked at it but I couldn't understand, since I'm not a Javascript programmer.

Steps to reproduce

1. Start Firefox 56 with clean profile.
2. Install legacy TST.
3. Set about:config extensions.treestyletab.tabbar.invertClosebox true

Expected result

Close button is on leftmost side of tab.

Actual result

Close button is to the right of the favicon.

Environment

• Platform (OS): macOS
• Version of Firefox: 56
• Version (or revision) of Tree Style Tab: 1.9

[piroor]

Sorry I have no plan to any new configuration for this. Instead please use custom user styles. See also:
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#put-closebox-left-side-even-if-i-choose-left-side-style and #1725 (comment)

[sumyungguy]

@piroor, thanks, but the question was about legacy TST, on Firefox/Waterfox 56.

Testing with TST 2 on Firefox Quantum, I am already able to accomplish exactly what I want with custom user styles: close box on left, then combined favicon&twisty, then tab title. I'm happy about that!

Unfortunately I must stay on 56 for daily use. So I hoped to do the same styling with legacy TST. I can already style many things with userChrome.css, like:

/* Display close button only on hover */
#TabsToolbar #tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab:not([pinned]):not([protected]):not(:hover) .tab-close-button {
     visibility: hidden !important;
}
/* Favicon */
#TabsToolbar #tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab .tab-icon-image {
  margin-left: 4px !important;
}

But I can't understand how to control the left-right order of the objects, or if it's possible. Is it? It seems it's done with Javascript, that I can't control from css. Maybe from userChrome.js?

[piroor]

TST 0.19.x is already obsolete, so I close this.