Marcel Kapfer

Firefox tab bar on mouse over

2018-03-01

205 words, ~ 1 min reading time

linux css firefox web linux

Since Firefox 57 I’m using wiki of Tab Center Redux:

#tabbrowser-tabs {
    visibility: collapse !important;
}

I found this solution quite useful over the last months, but recently I got some web design to do and split my screen horizontally in half. In this mode the width of the sidebar used to much space. Disabling it with F1 also didn’t really help because then I had no tab list at all.

Today I got the idea of only showing the default tab bar, when necessary. Since I can’t capture keys with CSS (and I didn’t find a way to create a user JS file like userChrome.css) and pressing a key to show and hide would be too much work, I got the idea of showing the tabbar when hovering.

The trick is to show a small rest of the tab bar above the address bar by default (in this case 5px). Only when the mouse cursor hovers this area, the full tab bar is shown. The following CSS code does this:

#TabsToolbar {
    min-height: 5px !important;
    max-height: 5px !important;
    opacity: 0 !important;
}

#TabsToolbar:hover {
    max-height: inherit !important;
    opacity: 1 !important;
}

To use this, you have to paste this CSS code in your file.

If you would like to comment on this post, feel free to write me a mail at comment(at)mmk2410(dot)org!