Giter Site home page Giter Site logo

Comments (9)

Izheil avatar Izheil commented on August 12, 2024

I updated multirow now with some minor changes to better support smaller tab heights, but basically what you should change would be these lines:

    #TabsToolbar {
        --tab-min-height: inherit !important;
    }

    /*  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;
    }
    */

As you can see the 2 lower rules are commented out, since they are only useful when making tabs smaller. You will have to play with those values after uncommenting them.

The first step then is uncommenting them removing the starting /* and the ending */ so that it looks like:

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

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

After that, you will have to remove part of the padding of other elements for the tabs to actually resize. to anything smaller than 20px.

--toolbarbutton-inner-padding changes the inner padding of the new tab button. Giving it a value of 3px-0px would make the tabs have a lower height limit.

The .titlebar-buttonbox .titlebar-button paddings will make the min/max/close buttons smaller as well so that the tab bar won't appear "floating".

If you have any other button on the tab bar (like extension buttons), you'll have to place them somewhere else, or they will also limit the min height.

from quantum-nox-firefox-dark-full-theme.

CanIask avatar CanIask commented on August 12, 2024

Thank you Izheil,

I forgot to say that I tried before to uncomment the 2 rules you mentioned (I saw the little explanation above), but without "removing part of the padding of other elements", and of course it didn’t work.

So now I did it again but I must say I don’t really catch what it means to "remove part of the padding of other elements for the tabs"... Should I delete all other rules containing the word "padding"? I believe not...

It seems, as far as I can see, that rows have a little bit reduced except the last one, which has the + for a new tab and which has increased making the all rows taller.

I’ll keep trying !

EDIT : back to previous change ! In fact it seems that compared to before FF96.0.2, this is the gap between each rows that have increased a little, making the total taller.
By the way, when making all these changes, should I leave the "Compact" mode ? Or do these changes of the rules take precedence over the "Compact" mode anyway?

from quantum-nox-firefox-dark-full-theme.

Izheil avatar Izheil commented on August 12, 2024

There are 2 paddings, the one of the + button, and the one around tabs.
The one from --toolbarbutton-inner-padding is the + one, the other 2 paddings are the ones around the tabs (that will just change the padding of the min/max/button, so it should only affect rows when there is only 1 row).

Let's say you want a 15px row of tabs:

#TabsToolbar {
        --tab-min-height: 15px !important;
    }

    /*  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: 0px !important;
        padding-bottom: 0px !important;
    }

^ This will give the most compact way to achieve this.

If you change the --toolbarbutton-inner-padding it will increase the tab size of the last row (where the + button is), since it adapts to the buttons inside that row.

As for using compact mode, it's recommended if you are going below 29px tab height (even if you change it through here), since that way it won't show the "playing" thing on a second row inside each tab, and will always show content in 1 row.

from quantum-nox-firefox-dark-full-theme.

CanIask avatar CanIask commented on August 12, 2024

So I replaced the whole code you kindly provided above and it doesn’t change anything compared to what we have with the "Compact’.
Also, on top of these taller tabs, the distance between each row seems to have increased compared to what was existing before FF96.0.2, which makes the total of rows taller.

It looks like, this new version does not care of what is in the MultiRowTabLiteforFx.uc.js file, at least for the tabs height... :(

from quantum-nox-firefox-dark-full-theme.

Izheil avatar Izheil commented on August 12, 2024

Try using 0px instead of 0 on --toolbarbutton-inner-padding, for me it makes the tabs small with the rest of the code:
SmallTabs

from quantum-nox-firefox-dark-full-theme.

CanIask avatar CanIask commented on August 12, 2024

So good to see that, at least, it can work. But there must be something I do not correctly understand and then replicate.

I inserted the modified code you proposed, changed --toolbarbutton-inner-paddingto 0px

...and it does not change what I can have with the "Compact" mode :(

from quantum-nox-firefox-dark-full-theme.

Izheil avatar Izheil commented on August 12, 2024

Are you using the lastest version from the repository? I added some changes to the repository version to better fit the tab height after the first reply.

from quantum-nox-firefox-dark-full-theme.

CanIask avatar CanIask commented on August 12, 2024

Are you using the lastest version from the repository? I added some changes to the repository version to better fit the tab height after the first reply.

:o That was the reason... Sorry for bothering you on this.

This is all good now. In fact, now, 20px is better than 15 ;)

Thank you very much Izheil. You can keep the explanation in the file as I believe such possibility may interest a lot of people.

Feliz año nuevo ! by the way ;)

from quantum-nox-firefox-dark-full-theme.

Izheil avatar Izheil commented on August 12, 2024

Thanks, happy new year to you too!
I'll add some more explanations on the file.

from quantum-nox-firefox-dark-full-theme.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.