FF57 Broke Tab Height <Dead Space> .css Help

[jetspeedz]

Frank i gave this a shot just now and it made no difference. It boggles my mind what it could be. Honestly I'm at a loss. If you can't figure it out i doubt anyone else can.

Don't worry about it, have another crack at it with a fresh userChrome.css. I'll take a look at it tonight (about 12 hours from now) and I guarantee I can code small tabs there.

Now, I don't use max-heights on tabs because I want them to flex on large fonts. But, experiment is how you fix stuff and you fine tune from there. For example, your -

Code: Select all

#tabbrowser-tabs {
min-height: 18px !important;
height: 18px !important;}

Why we not trying a max height there and elsewhere?

Thanks for your help Frank. I played around some more with Max heigh and it did not make a difference. I'm going to just start backing out everything slowly and testing it one by one. There should be no reason why this wouldn't work.

[jetspeedz]

No luck, i started with a blank CSS and modified and the dead space is still there.

[Frank Lion]

No luck, i started with a blank CSS and modified and the dead space is still there.

I did this the other day on 57 and the coding is nothing fancy, no neg margin stuff or anything. Usually, I do 25px tabs, but I took these to 18px and they were fine.

I can run you through it sometime, but it's only stuff you already know. Maybe it's not your code, maybe something else is going on there?

http://franklion.co.uk/Screensho57.png

[jetspeedz]

No luck, i started with a blank CSS and modified and the dead space is still there.

I did this the other day on 57 and the coding is nothing fancy, no neg margin stuff or anything. Usually, I do 25px tabs, but I took these to 18px and they were fine.

I can run you through it sometime, but it's only stuff you already know. Maybe it's not your code, maybe something else is going on there?

http://franklion.co.uk/Screensho57.png

Frank did you run my exact code? For a giggle, i uninstalled everything, clean profile, copied the same code i posted and the result is the same. I assume you have copied my code as is and it does not work correct?

If you don't mind share yours and maybe the order in which I have my code is causing a problem possibly?

[jetspeedz]

Frank if you can share your exact CSS from your sceenshot I will copy it and see if it looks identical if it doesn't than I agree it has to be something else, but I'm curious how mine looks when you try my code?

[Negativeions]

Weird. My tabs look nothing like yours on my fx57. My fx56 didn't look like your 56 either. There's never been that much padding on the bottom part of a tab for me. Text has always been centered with little padding. Doesn't seem right.

[Frank Lion]

Frank if you can share your exact CSS from your sceenshot I will copy it and see if it looks identical if it doesn't than I agree it has to be something else, but I'm curious how mine looks when you try my code?

Yours breaks.

To keep things simple, I've just quickly edited your code so as to keep the same style that you are using.

This works -

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*Franks take on jetspeedz tabs on 57....*/

#tabbrowser-tabs {
    min-height: 18px !important;
    height: 18px !important;
}

#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    min-height: 18px !important;
    height: 18px !important;
}

#TabsToolbar {
/* margin-top: 0px !important;
    margin-left: -15px !important;
    margin-right: -20px !important;*/
	height: 18px !important;
 }

tab {
    background-color: rgb(245,245,245) !important;
    color: rgb(105,105,105) !important;
	height: 18px !important;
}

tab:hover {
	text-decoration: underline !important;
}

tab[selected="true"] {
    font-weight: bold !important;
    background-color: black !important;
    color: white !important;
	height: 18px !important;
}

.tab-background {
    opacity: 0 !important;
}

#TabsToolbar {
    -moz-box-ordinal-group : 90000 !important;
}

[firefox008]

* Is there a way to increase the tab size?

I changed the code to change the Browser.TabMinWdith to 110 wide (I utilzie 30 tabs per window) to be able to see text etc

I do not know how to add or modify code that allows the Tab Height to be increased to 80-100 minimum size (not smaller)

Can someone post code to alter the size? I was using Classic theme restorer that enabled this before.

I've added a Chrome Folder in Firefox Profiles: And used a notepad to run a command Code:

@namespace url(http://www.mozilla.org/keymaster/gateke ... s.only.xul);

.tabbrowser-tabs *|tab {

font-size: 12px !important;
height: 50px !important;
min-width: 8px !important }

* The Code should increase the height to 50px (Is the notepad doc named incorrectly?) Named as userchrome.css

[jetspeedz]

Frank if you can share your exact CSS from your sceenshot I will copy it and see if it looks identical if it doesn't than I agree it has to be something else, but I'm curious how mine looks when you try my code?

Yours breaks.

To keep things simple, I've just quickly edited your code so as to keep the same style that you are using.

This works -

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*Franks take on jetspeedz tabs on 57....*/

#tabbrowser-tabs {
    min-height: 18px !important;
    height: 18px !important;
}

#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    min-height: 18px !important;
    height: 18px !important;
}

#TabsToolbar {
/* margin-top: 0px !important;
    margin-left: -15px !important;
    margin-right: -20px !important;*/
	height: 18px !important;
 }

tab {
    background-color: rgb(245,245,245) !important;
    color: rgb(105,105,105) !important;
	height: 18px !important;
}

tab:hover {
	text-decoration: underline !important;
}

tab[selected="true"] {
    font-weight: bold !important;
    background-color: black !important;
    color: white !important;
	height: 18px !important;
}

.tab-background {
    opacity: 0 !important;
}

#TabsToolbar {
    -moz-box-ordinal-group : 90000 !important;
}

Hi Frank,

This works with the exception of losing the Compact Dark theme it works perfectly. Really appreciate your help. I can live without the compact dark theme but I'm going to tinker with it to see if I can get that back and have it all working together. The trick was to roll back to FF56 with this add-in than upgrade and it retained it. oddly with the CSS change it is no longer there as an option but that is something I will mess with.

Frank I don't think this is possible to combine the forward and back button to the URL bar like FF56 and prior via CSS correct?

[jetspeedz]

Ok i figured out the compact Dark theme issues. the simplest fix is to just add this and it will emulate the same look given the old add-on is not FF57 compatible

Code: Select all

toolbarbutton {
  padding-top: 0px !important;
  padding-bottom: 0px !important;} 
  
  #toolbar-menubar {
min-height: 17px !important;
max-height: 17px !important;}

[Frank Lion]

This works with the exception of losing the Compact Dark theme it works perfectly. Really appreciate your help.

No problem.

Frank I don't think this is possible to combine the forward and back button to the URL bar like FF56 and prior via CSS correct?

Technically, it's possible. You position the Back and Forward buttons to the immediate left of the urlbar and then the fun begins.

In practice, to be honest, it's not easy, partly because you need a lot of theming experience, but mainly because they got rid of the DOM Inspector and 'replaced' it with their Browser Toolbox, which is utterly hopeless...which would make things very difficult, to anyone not already familiar with this stuff..

When I say it's possible, here's a good example on a theme I'm working on right now -
http://franklion.co.uk/578.png - the Back and Forward buttons appear to be joined as one, but they're not, I made the images to look like that, but in reality the buttons can be completely separated, if needed (would look a bit odd then) I'm also using coding to move the images to exactly where I want them.

The idea of joining, or appearing to join, the Back/Forward to the urlbar would work in a similar way.

[jetspeedz]

Thanks Frank, got it

[jetspeedz]

A little more clean up for those wanting to shrink. This minimizes the padding on the Navigation tool bar. This is about as compact as you can get for a clean simple look.

How it looks:

https://i.imgur.com/jA55xIx.png

Code: Select all

 /* Reduce the padding between the URL bar and the tabs/content */
#nav-bar-customization-target {
    margin-top: -5px !important;
    margin-bottom: -5px !important;
}  

[jetspeedz]

It appear any type of convergence from Franks code has some odd side affects. The few changes I've made to compact it more and show the close button when you hover over the tab is below.

With these changes and franks code you will get a compact and fully functional code.

Code: Select all

  /* Reduce the padding between the URL bar and the tabs/content */
#nav-bar-customization-target {
    margin-top: -5px !important;
    margin-bottom: -5px !important;
}  

/*i added these from original to test*/
  #toolbar-menubar {
min-height: 17px !important;
max-height: 17px !important;}

toolbarbutton {
  padding-top: 1px !important;
  padding-bottom: 1px !important;} 
  
  /*this shows the x on tabs*/
  tab:hover .tab-close-button
{display: -moz-box !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  }

Happy Turkey day everyone

[JonnyOne]

what appen when you drag left/right tabs?