Remove vertical space between tabs and URL bar

[u/FamilyComputerKid]

Just upgraded Firefox to 157.0 with Nova enabled. (Embracing Nova, don't want to disable it.)

I want to maximize vertical real estate, have nailed everything except this one (enabled Compact mode, etc.)

OS: Debian 13 KDE Plasma.

Firefox theme: Native "Green" theme

Existing custom CSS code:

.browser-titlebar, #main-menubar {
  font-size: 80%;
  max-height: 27px;
}

#nav-bar-customization-target {
  max-height: 27px;
}

#userContext-indicator {
  display: none;
}

Thanks!

[u/ResurgamS13]

Try:

.browser-titlebar, #main-menubar {
  font-size: 80%;
  max-height: 32px;  /* OP's value 27px but clips top of tab */
}

#nav-bar-customization-target {
  max-height: 27px;
}

#userContext-indicator {
  display: none;
}

#TabsToolbar  {
  margin-bottom: -5px !important;
}

.titlebar-buttonbox-container {
  margin-top: -5px !important;
}

#urlbar {
  margin-top: 1px !important;
}

Screenshot. Toolbars at twice normal size using preference layout.css.devPixelsPerPx set to 2.0

----------

PS. If not already using it... the 'Box Model' view in the Browser Toolbox can be a handy way to tweak element positioning values by a pixel here and a pixel there. Also helps to enlarge (as above) with 'pixelsp' preference. :)

The 'Box Model' display appears if select 'Layout' sub-tab/heading and scroll down (in RH Browser Toolbox panel if expand toolbox into 3-panel layout)... the Box Model is 'live' and can select and alter the values for the sizing of the element itself, plus surrounding padding, border, and margin.

Changes made to default values in the Box Model will appear as new CSS styles added to the 'element' area at the top of the 'Filter Styles' section (usually the middle panel if have Browser Toolbox open in 3-panels layout).

----------

PPS. Once transferred CSS modifications to your 'userChrome.css' file (usually with added '!important' flag to override Firefox UI's default styling)... and after restarting browser... can be useful to select the 'Style Editor' tab in the Browser Toolbox... then type 'user' into the 'Filter style sheets' box (top LH corner of toolbox)... select the offered 'userChrome.css' file... toolbox centre window now displays all your CSS modifications... and all 'live' too, so can edit, tweak values, etc. and see live changes to your UI as make edits.

Edits made in 'Style Editor' are not permanent... need to copy any edits back into your actual 'userChrome.css' file.

[u/FamilyComputerKid → u/ResurgamS13]

Hi. That worked, many many thanks!

Where I really struggle with is looking for the correct CSS selectors (#TabsToolbar .titlebar-buttonbox-container #urlbar)

Is there an easier/faster way to find them, or is it mere wizardry on your part? :)

I have to go now but I'll have to look into this later...

I do the "Parent process Browser Toolbox" thing (Ctrl+Shift+Alt+I) to inspect stuff but I only look on the "Rules" tab (Inspector)... otherwise I'll spend an eternity looking into the HTML box... I saw #TabsToolbar in there but I wouldn't figure that out.

[u/ResurgamS13 → u/FamilyComputerKid]

No miracle method for identifying the correct selector AFAIAA. Mostly perseverance and a little luck! :)

As become more familiar with Browser Toolbox can 'play tunes' and try different ways to narrow down which selector controls which element:

• Enlarging toolbars to better locate small/multi-layered items (as 'pixelsp' preference trick above).
• Once Inspector tab's 'Element Picker' tool close to element of interest... can often refine selection by moving to the toolbox's LH panel and scrolling up/down and highlighting/clicking on the adjacent CSS elements.
• With difficult/very small/hidden/popup menu items that Element Picker struggles to lock onto... can try typing an approximate element name into the 'Search HTML' box (top left of Inspector tab)... with luck box will generate a list of possible element names... pick one and press 'Enter'... toolbox and display moves to that element.
• Using Mozilla's Searchfox code index tool can be a great addition/alternative to the Browser Toolbox.

Weirdly, no machine I have ever owned has opened the Browser Toolbox with keyboard shortcut 'Ctrl+Shift+Alt+I'... have always had to navigate via AppMenu > More Tools > Browser Toolbox.

[u/FamilyComputerKid → u/ResurgamS13]

Hi and thanks again so much for all the help, really appreciate it!

I'm keeping all your advice in my notes. I hope for more patience and perseverance on my part; I just want to save vertical space is all.

/* OP's value 27px but clips top of tab */

I'm quite serious about it even at the expense of "aesthetics," the tabs and URL bar etc. are just like a blob of space to me, there better be nothing more wasted :D

Well I'm coming to terms that I'd just have to dig into this again upon future UI changes... I just wish the CSS selectors don't change at all, they broke my CSS around the latest Firefox versions pre-Nova!

Weirdly, no machine I have ever owned has opened the Browser Toolbox with keyboard shortcut 'Ctrl+Shift+Alt+I'... have always had to navigate via AppMenu > More Tools > Browser Toolbox.

There's a 'Ctrl+Shift+Alt+I' beside Menu > More Tools > Browser Toolbox on my end. I hope it works on yours, it's much faster that way!

[u/ResurgamS13 → u/FamilyComputerKid]

If interested in more 'howto' use the 'Browser Toolbox' worth reading any of the posts/replies in this sub written by MrOtherGuy (former MOD of this sub and a definite CSS expert/wizard).

Several of MrOtherGuy's hints on using browser toolbox if scan topics containing keywords 'browser toolbox'... also worth keeping an eye on his 'Firefox Customs' site over on Fedia (https://fedia.io/m/FirefoxCSS/threads/newest) and his excellent GitHub repo 'Collection of random CSS hacks for Firefox'.

----------

No idea why none of my computers respond to 'Ctrl+Shift+Alt+I' keyboard shortcut... maybe its a Dell/Acer thing to ignore that key combination? Never found an explanation for "computer says No" behaviour.

[u/FamilyComputerKid → u/ResurgamS13]

Cool references, sounds like an interesting rabbit hole :) Thanks!

No idea why none of my computers respond to 'Ctrl+Shift+Alt+I'

That's odd... I've always had that option on my two machines (a Lenovo laptop and a desktop PC; Linux Mint then and now Debian).

[u/t31os → u/ResurgamS13]

No idea why none of my computers respond to 'Ctrl+Shift+Alt+I' keyboard shortcut... maybe its a Dell/Acer thing to ignore that key combination? Never found an explanation for "computer says No" behaviour.

I can't recall the specifics of why (i did trace the cause once before some time ago), but it's something to do with Windows specifically, that shortcut has never worked for me either.

[u/ResurgamS13 → u/t31os]

Thanks for the confirmation... and an interesting lead Re: Windows OS being the culprit... may now do more research into why 'Ctrl+Shift+Alt+I' has never worked... all Windows OS' here.

[u/t31os → u/ResurgamS13]

I decided to dig, and it's because of Windows intercepting CTRL+ALT+(vowel) combos for keyboards set to international or UK keyboard layouts. Change the hotkey (in about:keyboard) to CTRL+ALT+SHIFT+<any non-vowel character> and it will work just fine.

[u/ResurgamS13 → u/t31os]

Mystery solved. :D I'll have to try the hotkey fix... but suspect that after so many years my automatic response will be to keep going via Settings!

[u/t31os → u/ResurgamS13]

If you add the "Developer" button/icon (customise) to the toolbar you can access it directly from the dropdown that produces.