MozillaZine


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

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

Post Posted November 27th, 2022, 3:17 am

[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: 5428
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 27th, 2022, 8:38 am

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/search?q=tabbrowser-tabs&path=css
http://searchfox.org/mozilla-beta/search?q=TabsToolbar&path=css

Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.

onetwotree
 
Posts: 12
Joined: May 13th, 2019, 8:08 am

Post Posted November 28th, 2022, 1:16 am

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.

dickvl

User avatar
 
Posts: 53851
Joined: July 18th, 2005, 3:25 am

Post Posted November 28th, 2022, 9:12 am

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

Post Posted November 30th, 2022, 2:03 am

@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

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 3 guests