[Firefox Developer] After update, does not follow CSS rules

User Help for Mozilla Firefox
Post Reply
onetwotree
Posts: 12
Joined: May 13th, 2019, 8:08 am

[Firefox Developer] After update, does not follow CSS rules

Post by onetwotree »

[Firefox Developer] After update, does not follow CSS rules. Now: Tabs are taller, out of place; Container color indicators gone

Firefox Developer 108.0b6 (64-bit)
On Linux Mint 20.3

I have entered the same CSS rules for both my regular Firefox Browser and Firefox Developer. It's all been good until a recent update on Firefox Developer. (This happened within the last 3 weeks.)

My only objective here is to maximize the vertical dimension of my screen. (Note that the Container icons to the right are also "pushed up." The one that looks like a clock and the drop-down arrow beside it.)

I can't make the tabs vertically shorter.

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

When I press "Alt", the tabs are vertically covering around 1/2 of the menu bar (menu bar is hidden).

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

Below is how my Firefox Browser looks like and what I am aiming for.

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

Note that the horizontal line above the tabs (container color indicators) are now gone on Firefox Developer (after trying to fix this issue since yesterday).

My CSS rules:

Code: Select all

/* Below: For tabs */

#tabbrowser-tabs .tab-text {
 font-size:14pt !important;
}

#TabsToolbar {
height: 34px!important; 
}

.titlebar-button{ padding-block: 0px !important; }
#urlbar-container, #search-container { padding-block: 0px !important; } 

/* Below: Removal of containers' icons */

#userContext-indicator {
display:none !important;
}

/* Below: Test for FF Developer only */

:root{
  --tab-block-margin: 4px 0 !important;
}
TIA!
Last edited by onetwotree on November 28th, 2022, 1:11 am, edited 1 time in total.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: [Firefox Developer] After update, does not follow CSS ru

Post by morat »

You are missing a few id # symbols.

i.e.

#tabbrowser-tabs
#TabsToolbar
#urlbar-container
#userContext-indicator

CSS Selectors
http://www.w3schools.com/cssref/css_selectors.php

Reference
http://searchfox.org/mozilla-beta/searc ... s&path=css
http://searchfox.org/mozilla-beta/searc ... r&path=css

Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.
onetwotree
Posts: 12
Joined: May 13th, 2019, 8:08 am

Re: [Firefox Developer] After update, does not follow CSS ru

Post by onetwotree »

Thanks, @morat.

I don't know what happened there but I just checked and the #'s are actually there in my CSS rules. Maybe I messed up somewhere in copy-pasting here.

toolkit.legacyUserProfileCustomizations.stylesheets has also been set to true.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: [Firefox Developer] After update, does not follow CSS ru

Post by dickvl »

Use the --tab-min-height CSS variable to set the height.

Code: Select all

:root {
 --tab-min-height: 34px !important;
}

#tabbrowser-tabs,
.tab-stack,
.tab-content {
  height: var(--tab-min-height) !important;
}
onetwotree
Posts: 12
Joined: May 13th, 2019, 8:08 am

Re: [Firefox Developer] After update, does not follow CSS ru

Post by onetwotree »

@dickvl that worked, thank you so much! :)

Below are my new CSS rules:

Code: Select all

/* Below: For tabs */

#tabbrowser-tabs .tab-text {
 font-size:14pt !important;
}

#TabsToolbar {
height: 30px!important; 
}

#urlbar-container, #search-container { padding-block: 0px !important; } 

:root{
  --tab-block-margin: 4px !important;
}

:root {
 --tab-min-height: 34px !important;
}

#tabbrowser-tabs,
.tab-stack,
.tab-content {
  height: var(--tab-min-height) !important;
}

/* Below: Removal of containers' icons */

#userContext-indicator {
display:none !important;
}
However, I can't figure out how to make the tabs a teeny bit taller--the vertical alignment of the tabs' text feels awkward, I wish it to be more vertically centered.

https://i.imgur.com/dtU8caO.png
Post Reply