Put pinned tabs above navigation bar

[Akryum]

Description

Have the option to put pinned tabs above the navigation bar (where usually there are the panes). This would allow to better represent that pinned tabs are global to the panes.

For example:

Before:

After:

[real-felix]

I cannot access the HTML, and I never used vue, but this is the bar's class: .PinnedTabsBar.

Trying changing the order only does some weird thing:

.PinnedTabsBar {
  order: 1;
}

EDIT: I could debug the HTML, with this link: moz-extension://<extension URL>/sidebar/sidebar.html.

Unfortunately, for some reason, the groups tab is one block with class top-horizontal-box while the pinned tabs are within the big box with class main-box. So it's not trivial to make this change (at least for me). I wonder what was the reason for doing that, instead of having a flat structure.

[real-felix]

OK, I did it:

.PinnedTabsBar {
  position: fixed;
  top: 0;
  left: 0;
}

.top-horizontal-box {
  margin-top: var(--tabs-pinned-height);
}

It's crappy and brittle (may break in a further update), but it does the job currently.

Note that it won't work if you have your pinned tabs on several lines. If you have 2 lines, the margin must be calc(2 * var(--tabs-pinned-height)), etc.

[dvogel]

I'd like to second this enhancement request. I tried the workaround above with v5.1.1 and it seems to no longer work. For me it creates a space above the navigation bar that is the height of the pinned tabs but the pinned tabs themselves are not in it.

[No2515]

I'd also like this option

[andsofine]

related #1007