After Firefox recently allowed for vertical tabs to be used I wanted to try it out but had two major gripes:
- Grabbing the window to move it to another screen won't work if you click above any interactable element
- The sound/playback icons on the tabs are too large making it diffcult to switch tabs when enabled
I've since then found out about being able to customize the underlying HTML firefox uses.
Check out https://www.userchrome.org/how-create-userchrome-css.html for how to enable CSS customization. From my experience userChrome.css is the file that is actually being read.
This is something that took me some time to figure out. The best solution I found was to enable the browser toolbox. With that you can inspect firefox like any other webpage and derive the various css properties that interest us that we want to override.
Issue one was easily fixed by adding a margin to the navbar.
#nav-bar-customization-target {
margin-top: 1px;
}This allows us to yet again move our mouse all the way at the top of the firefox window and grab it. While this works great when snapping the window to 50% size on a monitor, due to windows things, we can't grab the window easily since it will instead resize it. One could try increasing the size of the margin but at some point we loose the main advantage of using vertical tabs to begin with
The second issue was a bit more troublesome to resolve but I setteled on the following css changes:
/* Enlarges the collapsed tabs to the set size */
:root {
--tab-collapsed-background-width: 45px !important
}
/* Moves the playback icons (and potentially others) to the right hand side **WITHOUT** increasing the tab bar size (hence translation) */
.tab-icon-overlay {
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
&[pinned]:not([crashed]) *{
transform: translateX(15px) translateY(-7px);
}
}
/* Makes the tab icons bigger */
.tab-icon-image {
scale: 110%;
}Visual example:
The complete css can be found at the bottom too! I hope this helps some people out :)