Tabs in two or more Rows (like TabMixPro) in Quantum?


(Randomnt) #14

For new release, it’s needed to replace ‘.tabbrowser-tabs’ by ‘#tabbrowser-tabs’ (at 4 places)


#15

Thanks for the update!


(Paft) #16

Can you explain a little more, please? I don’t see ‘.tabbrowser-tabs’.


(Kevin Osborne) #17

Go to about:support in FF, then by the ‘Profile Folder’ setting (about 8th from the top) click the ‘Open Folder’ button. Create the ‘chrome’ subfolder, if you don’t already have one. Inside that folder create a file called ‘userChrome.css’, inside that file paste the text from https://github.com/andreicristianpetcu/UserChrome-Tweaks/blob/09fa38a304af88b685f4086bc8ea9997dd7db0fd/tabs/multi_row_tabs_firefox_v57.css

Update that text to replace ‘.tabbrowser-tabs’ with ‘#tabbrowser-tabs’. I didn’t have to worry about the ‘.tabbrowser-tab’ entries, it still seemed to work.

Restart FF and you should have multi row tabs


(Paft) #18

Sorted, thanks.

Mozzie needs to set multi row tabs as default or at least a option. Scrolling though tabs is awful. That and a run/open download option.


(Rcornmesser) #19

Thank you so much for easy instructions. Worked perfect for me.


#20

I made a version which works much better for me - in which all tabs are smaller and not expanded on the last row. Instructions;

  1. Type about:support in url field of firefox, hit enter.
  2. On the ‘Profile Folder’ setting (about 8th from the top) click the ‘Open Folder’ button.
  3. Create the ‘chrome’ subfolder, if you don’t already have one.
  4. Inside that folder create a file called ‘userChrome.css’ (right click > new > text document - make sure to name the file userChrome.css and not userChrome.css.txt or something)
  5. Open the file for editing and paste the contents of this file;
    https://gist.githubusercontent.com/forexhill/b0446cc31e5001c9e87754df83f0f1ca/raw/f4f1a807d43434a1f10908364dec56ecdf08422c/gistfile1.txt
    Into it.
  6. Restart FF and you should have multi row tabs
  7. Enjoy!

Btw, there is still a small problem (also in the original as far as I can see); it’s not possible to drag tabs well from one row to another. Any Firefox GUI expert who can fix this?

God bless!


(Tony) #21

Just applied your version and it works like a charm…only had to changed the Tabs Margin Left to 1 to suit my liking!
Thanks for the share.


(Deyx9999) #22

My decision was to stick with 56v to keep all my addons. The missing multirow just turned me off. Disabled all updates and its still working.
You can also use the long term service version https://www.mozilla.org/en-US/firefox/organizations/all/


(Tom) #23

Amazing work! Finally I can again see I have all too many tabs open. Now we just need someone to make this work as an extension!


(Bob Bressler) #24

thanks fh1. Simple easy to follow, except I still have the standard 1 long row. Does this need to be enabled to work? Are there other add-ons that might be preventing it from working?


#25

Where to download updated version?


How to modify appearance of tabs themselves with WebExtension?
#26

What would be fun now is a way to navigate via keyboard vertically through the tab rows. You use ctl pgup and ctl pgdn to move right and left. So how about ctrl home/end to go down one plus over one left/right and wrap top from the bottom, and ctrl insert/delete to go up one plus left or right one wrap bottom from the first line? I know, off topic here, but we don’t get the family together that often. :slight_smile:

With alcohol you get all the confidence and none of the competence.


#28

Thanks, this is very useful.

Only thing is, the tabs are to narrow for me. I tried to change
.tabbrowser-tab:not([pinned]) {min-width:35px;max-width:35px;}
to
.tabbrowser-tab:not([pinned]) {min-width:35px;max-width:70px;}, but it didn’t seem to work for me. Could you give me any pointers?

Also, the native functionality that starts with wide tabs and shrinks them if they start to be many is cool. Would there be a way to keep this while having several tabs, when the native display starts to use some scrolling? That’s a pity that Mozilla doesn’t offer an option to switch to multilines instead of scrolling.


(Mina Mikhail) #29

To increase tabs width modify “browser.tabs.tabMinWidth” in about:config


#31

If you find it does not work, make sure that your chrome folder is inside the folder which opens when clicking the ‘Open Folder’ button in step 2 of instructions I gave above. Some addons or operating systems may move this folder elsewhere it seems.

As for the small tab width, try setting min-width to 70 as well, that way all tabs are bigger “as a minimum”. But note that I previously found (an older) version of FF to work faster if the tab width is really small.


#32

it is possible to limit the rows?


(Stzokev) #33

This script causes serious slowness of sites being loaded in Firefox 61.0.2. Removing the script and restarting browser causes the sites to open immediately like usual.


(Lydia Fillingham) #34

Having trouble using this script on my Mac. (Maybe because I’m using Nightly?)

When I open folder in step two, it opens my finder. Then I create a text file, but I only have Text Edit to do that, which gives it an ODT file extension. Then I remove the extension when I’ve saved it to the Chrome folder.

When I restart Firefox nothing is different, only one row I have to scroll right on.

Am I doing something wrong?


(jscher2000) #35

Hi Lydia, here are two possible workarounds for the problem creating a new userChrome.css file.

(1) Download a blank one. This was created in Windows, but should work on Mac:

https://www.userchrome.org/samples/userChrome.css

(2) Paste your CSS to the following page and download userChrome.css with your rules in it:

https://www.userchrome.org/download-userchrome-css.html

Hopefully one of those will be convenient for you.

And if you haven’t seen my terribly boring video from the brief time where I had hands on a Mac: https://vimeo.com/245560075

Bonus workaround:

(3) Download the the file from Github, if you’re using one of those, rename the file to userChrome.css, and move it into your chrome folder.