Izheil/Quantum-Nox-Firefox-Dark-Full-Theme

[BUG/FEATURE REQUEST] Inner-padding lowered for more compact rows

Closed this issue · 9 comments

Thrakk commented

Describe the bug
There is essentially two places you can customize in the MultirowTab script. :root and #TabsToolbar {
I use 2 max tab rows in :root and my other customization is this:

 #TabsToolbar {
    --tab-min-height: 16px !important; /* default inherit */
    /* You don't need to change this last one but I did */
    --toolbarbutton-inner-padding: 1px !important; } /* default inherit */

The problem is that editing inner padding to be more compact will force max tab rows to stay at 'X' (2 in my case) even when you only have 1 rows of tabs. What this looks like is a blank row beneath a single row of tabs that would normally have been automatically compressed away if I left inner-padding as 'inherit'.

Desktop: Windows
Firefox: 92.0.
Proton disabled through chrome and about:config (to be more compact)

Izheil commented

The inner padding variable isn't intended to be changed, which is why it says "you don't need to change this", and also why there isn't any explanation of it on the instructions above that fragment.

20px is the minimum height on the --tab-min-height variable that won't give you any trouble as far as you have compact mode enabled on about:config, which is already quite small.

Editting past that would require many more fixes than just the padding, like changing the favicon sizing, the close/max/min buttons which would keep the size of the tabs row bigger than the tabs, and eventually needing to change the font size.

I don't see much reason to implement that, given that 20px already gives enough small size, and that I'd have to add too many alterations for each range of size that people wanted to add.

Either way, I'll add the clarifications on the details of multirow tabs.

Thrakk commented

Thanks for responding. I do like how compact everything is already. I always use [menu bar / bookmark toolbar items] as one row, and I magnify everything in Windows to 150% because of my eyesight / laptop screen size.

I checked and 150% is 28 pixels larger than 125%. Maybe you get why I like Firefox to be extra compact. Things are pretty good the way I have them so I will keep the empty row and 16px min height. Thanks for keeping the multirow script up-to-date!

Izheil commented

Well, I checked it before I tried to see if I could do something similar to another issue like this that happened when having just one row with only pinned tabs without any luck, but I decided to take another look to see if I could do something different, and looks like this time it's working right (at least with the 16px sizing you were using on the example).

I added the updated version to the repo, so you should now be able to do the same changes you did before and they should work without creating an empty row.
I'll recompile the patchers in a little while, so if you want to update now, get the multirow files from the multirow tabs folder.

You will need to uncomment the lines related to buttons padding for smaller tabs for them to apply, so instead of:

    /*  These below control the padding of the new tab button and min/max/close buttons respectively.
        YOU DON'T NEED TO CHANGE THESE unless you want to use values of --tab-min-height lower than 20px. 
        Before changing them, you need to UNCOMMENT the 2 rules below for them TO TAKE EFFECT. */

    /*
    #TabsToolbar {
        --toolbarbutton-inner-padding: inherit !important;
    }

    .titlebar-buttonbox .titlebar-button {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    */

Once uncommented and changes made it should look like:

    /*  These below control the padding of the new tab button and min/max/close buttons respectively.
        YOU DON'T NEED TO CHANGE THESE unless you want to use values of --tab-min-height lower than 20px. 
        Before changing them, you need to UNCOMMENT the 2 rules below for them TO TAKE EFFECT. */

    #TabsToolbar {
        --toolbarbutton-inner-padding: 0 !important;
    }

    .titlebar-buttonbox .titlebar-button {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

The reason why it's commented by default even when they have the default values that Firefox uses is that those could cause issues in different OS's, since not all of them have the same padding around the min/max/close buttons, and the inner-padding isn't really needed to be changed unless you want more compact tabs.

  • 👍1
Thrakk commented 
        css +=`
		#tabbrowser-tabs > arrowscrollbox {
		  overflow: visible; 
		  display: block;
          height: var(--tab-min-height); }

You found the bugger. Everything works better than ever now.

  • 👍1
Izheil commented

Glad it's working good for you now!
Since it's fixed, I'll close this then.

Thrakk commented

UNTITLEDGIF
Is it possible to make it so the scrollbar doesn't add height when it shows up (it shows up when I have more tabs than what fits in my my max rows)?

Thrakk commented

I should also report something else I noticed on my setup. When you use the middle mouse wheel to scroll tab rows, it often wouldn't work (ie scrollbar frozen) depending on what I had for 'browser.tabs.tabMinWidth' and the amount of varaible-width tabs I had open in the bottom row. I fixed this issue by messing around with the size of the new tab button (+ sign) and its margins.

Example custom code I'm using for the fix (some of it is cosmetic):
#tabs-newtab-button.toolbarbutton-1 .toolbarbutton-icon { border-radius: 0px !important; width: 22px !important; height: 22px !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-left: 2px !important; padding-right: 2px !important; margin-left: 4px !important; margin-right: 4px !important; margin-top: 0px !important; margin-bottom: 0px !important; }

Izheil commented

I guess you mean width for the scrollbars, but that's part of how the scrollbars render automatically. If you don't want the scrollbar to take any height, you will have to change the scrollbarSize variable on top of the file to "none", which will keep scrollability, but will hide the scrollbar completelly.
The reason why they add some more height to the visible rows is because the --max-tab-rows variable uses the value of --tab-min-height to calculate how many pixels should it show. Since your display is over 100%, you will have to play around with the --max-tab-rows to get the row size right.

As for the middle mouse button issue, I can't seem to replicate it, but if someone has your same setup and has that issue, I'll send them to your fix post.

Thrakk commented 
 // This is a fix for FF89+ (Proton)
        if (document.documentElement.hasAttribute("proton") || tabsHavePadding) {
            style.innerHTML += `
            scrollbox {
                max-height: 40px !important; //calc((var(--tab-min-height) + 8px) * var(--max-tab-rows));
            }
            `;

I changed max-height under the FF89+ (Proton) section and it fixed my issue

  • 👍1