MozillaZine

FF57 Broke Tab Height <Dead Space> .css Help

User Help for Mozilla Firefox
jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 16th, 2017, 2:03 pm

Frank Lion wrote:
jetspeedz wrote: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
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 17th, 2017, 12:44 pm

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

Frank Lion

User avatar
 
Posts: 19509
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 17th, 2017, 2:52 pm

jetspeedz wrote: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
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 17th, 2017, 8:52 pm

Frank Lion wrote:
jetspeedz wrote: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?
Last edited by LIMPET235 on November 18th, 2017, 3:01 am, edited 1 time in total.
Reason: Some slight text editing.

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 17th, 2017, 9:22 pm

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
 
Posts: 238
Joined: September 17th, 2003, 12:07 pm

Post Posted November 17th, 2017, 9:47 pm

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

User avatar
 
Posts: 19509
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 18th, 2017, 6:55 am

jetspeedz wrote: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;
}
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

firefox008
 
Posts: 1
Joined: November 18th, 2017, 2:31 pm

Post Posted November 18th, 2017, 2:55 pm

* 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
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 20th, 2017, 9:49 am

Frank Lion wrote:
jetspeedz wrote: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
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 20th, 2017, 11:21 am

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

User avatar
 
Posts: 19509
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 20th, 2017, 11:30 am

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

No problem.

jetspeedz wrote: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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 20th, 2017, 12:43 pm

Thanks Frank, got it

jetspeedz
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 20th, 2017, 3:33 pm

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:
Image
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
 
Posts: 76
Joined: January 4th, 2013, 12:11 am

Post Posted November 20th, 2017, 4:59 pm

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
 
Posts: 6
Joined: November 15th, 2017, 1:27 pm

Post Posted November 22nd, 2017, 1:42 am

what appen when you drag left/right tabs?

Return to Firefox Support


Who is online

Users browsing this forum: Google [Bot] and 8 guests