Aapo Rantalainen's blog

Experiences with Information Technology and Open source

Multi row tabs on Firefox 57

Posted by Aapo Rantalainen on November 19, 2017

Firefox 57 disabled legacy plugins and now Webextension is the only way to use plugins.

For me there was only one thing missing: Multi row tabs. And here is now at least partial solution using userChrome.css

(Check next post about Firefox 66)

I used TabMixPlus for Multi row tabs, but it is not Webextension ready [2017-11-19].

I can live without another features of the TabMixPlus, but missing multi row is a show stopper.

multirowtabs
Here comes one (not yet finalized) solution.

*Create folder named chrome in your firefox profile folder. If you don’t know where is your profile folder, use firefox and go to the address about:support add click ‘open profile folder’. (It is possible you have this chrome folder already).
*Create new text document on chrome folder, named userChrome.css (If you have it already, you should know why you have it already, and then try to merge modifications)
*Copy+paste this to the userChrome.css:

/* multi row tabs */

/* titlebar buttons */
#titlebar-buttonbox {
vertical-align: top !important;
display: block !important;
}
.tabbrowser-arrowscrollbox scrollbox {
overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
display: block !important;
}
/* titlebar button height */
toolbarbutton.titlebar-button {
min-height: 31px !important;
}
/* tabs right position */
.tabbrowser-tabs {
margin-right: -41px !important;
}
/* tab size */
.tabbrowser-tab:not([pinned]) {
min-width: 120px;
min-height: 26px !important;
max-height: 26px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
vertical-align: top !important;
-moz-box-sizing: border-box !important;
min-height: 26px !important;
max-height: 26px !important;
}

/* Button for scrolling tabs to the left */
.scrollbutton-up{
display: none;
}

/* Button for scrolling tabs to the right */
.scrollbutton-down{
display: none;
}

/*Drop-down menu for all tabs */
#alltabs-button{
display: none;
}

/* Optional: Hover makes X-button visible */
.tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
visibility: collapse !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
visibility: visible !important;
display: block !important;
}

/* Optional: Remove fading */
.tab-label-container[textoverflow]:not([pinned]) {
mask-image: unset !important;
}

Issues:
* This solution breaks moving tabs by dragging.

Credits:
* https://github.com/Timvde/UserChrome-Tweaks
* https://vimeo.com/242120210
* https://github.com/Aris-t2/CustomCSSforFx/
* https://00.bulog.jp/archives/1476

P.S. If you want address bar top of the tabrows, add this to the userChrome.css:

/* toolbar order (start) ************************************/
#print-preview-toolbar,
#printedit-toolbar,
#titlebar {
  -moz-box-ordinal-group: 0 !important;
}
#navigator-toolbox #toolbar-menubar {
  -moz-box-ordinal-group: 1 !important;
}
/* navigation toolbar */
#navigator-toolbox #nav-bar {
  -moz-box-ordinal-group: 2 !important;
}
/* bookmarks toolbar */
#navigator-toolbox #PersonalToolbar {
  -moz-box-ordinal-group: 3 !important;
}
/* 3rd party toolbars */
#navigator-toolbox toolbar {
  -moz-box-ordinal-group: 10 !important;
}
/* tabs toolbar */
#navigator-toolbox #TabsToolbar {
  -moz-box-ordinal-group: 100 !important;
}
/* toolbar order (end) **************************************/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: