1880101 - Investigate whether the tabstrip can be used vertically

Status: RESOLVED FIXED

(Firefox :: Sidebar, task, P1)

Description

[Sarah Clements [:sclements]]

There's interest in having vertical tabs integrated into the sidebar which would mean it only shows vertically or horizontally (the sidebar launcher will also need to port over to mc, which is the vertical strip housing all icons per this spec), and even though the specs for this are still early days there are a few things we should investigate as to whether this is possible without major refactoring.

A few helpful bits that have been crowdsourced already in this doc:
jhirsch indicated that making the horizontal tabstrip vertical was easy enough by making the hboxes vbox and flipping the arrowscrollbox orientation to vertical But there's a few things we need to investigate getting to work properly without hacky solutions:

• drag n'drop/rearrange of tabs
• the tab overflow menu needing to be reoriented
• how will the scroll overflow arrows in the tabstrip work - with mouse, scroll wheel, and keyboard navigation?
• are there things users can customize with the tab strip that need to still work?
• based on the early-days UX exploration, how does pinned tabs work if they are included separately as part of “shortcuts”?

How will the vertical tabstrip fit into the sidebar-launcher.js lit component (keeping in mind the tabstrip is XUL)? MozXULElement might be an option.
[mstriemer]: MozXULElement is not a Lit component, creating XUL in Lit requires some workarounds but is possible but tedious in most cases. I think you could <slot> the tabstrip into the right place in sidebar-launcher, but it would still be one chunk, pinned tabs then regular tabs, then the + button)
[gijs] could maybe hide the tabstrip or launcher pinned tabs in this case? But then you end up with differing UX on the different elements (ie support for containers / soundplaying / pip indicators, etc. etc.)