Reduce navigation bar height in FF 91

[videobruce]

I tried a number of searches, but no luck due to bad, outdated, or just poor instructions as to where look or what to enter. This is the URL bar, NOT the tab bar which I was able to find the 'fix' for that.

I need to reduce the height of the address/navigation bar (which ever you want to call it) so it doesn't take up as much vertical space. I created the Chrome folder in the Profile folder and created the userChrome.css file with the script to reduce the tab bar height. What/where has to be done to change the height??

Why Mozilla keeps on changing stuff usually to the worst is beyond me (the if it ain't broke don't fix it).

[lenny2]

I created the Chrome folder in the Profile folder and created the userChrome.css file with the script to reduce the tab bar height. What/where has to be done to change the height??

To make the userChrome.css file accepted by your browser, in about:config you should set
toolkit.legacyUserProfileCustomizations.stylesheets = true instead = false
Then you can use numbers to set the desired width of the address bar. If you make changes to userChrome.css when Firefox is open, you need to restart the browser to achieve the effect.

[videobruce]

It's not the width, it's the height! The file is working for the tab bar, that isn't the problem, there isn't any script for the URL bar to modify the height.

[lenny2]

there isn't any script for the URL bar to modify the height.

Code: Select all

#urlbar,#searchbar,
.searchbar-textbox {
  margin: 1px !important;
  min-height: 0px !important;
  height: 24px !important;
}

or full code https://github.com/Aris-t2/CustomCSSfor ... height.css

[videobruce]

Ok, do I need just what you have above, or the 'full' code version?

Also, exactly where in that css file is this pasted, beginning, end or exactly where? This is what I have now:

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

/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/s ... bs.inc.css */
/* https://raw.githubusercontent.com/Aris- ... r_fx89.css */
/* https://developer.mozilla.org/en-US/doc ... er_Toolbox */

/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */
/* you can use the Browser Toolbox to get the toolbar heights */

*|*:root {
--tab-toolbar-navbar-overlap: 0px !important;

--tab-min-height: 25px !important;
--tab-min-width: 60px !important;

--tab-adjust: 0px; /* adjust tab bar - only for 68-73 */
--tab-caption: 5px; /* caption buttons on tab bar */
}

/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}

#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 50vw !important;
}

#tabbrowser-tabs {
width: 100vw !important;
}

/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
position: relative !important; /*89+*/
padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~
#TabsToolbar{
bottom: var(--tab-adjust); /*ADJUST*/
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
/* z-index: 1 !important; */
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
position: absolute !important;
display: block !important;
right: 0px !important;
bottom: 0px !important;
width: 14px !important;
pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

[lenny2]

Insert this code at the very end of your userChrome.css file and you can specify your own value of 20px, 28px, 32px etc.

Code: Select all

/* urlbar height */
#urlbar,#searchbar,
.searchbar-textbox {
  margin: 1px !important;
  min-height: 0px !important;
  height: 24px !important;
}

Checked with Firefox v101.0.1, the code works.

[videobruce]

It changes just the URL window where the address shows, not the entire URL/Address bar

[lenny2]

This code will enlarge the navigation bar icons on the left and right of the address bar (16x16px by default)

Code: Select all

/* Icons size in navigation bar */
toolbar:not(#PersonalToolbar) .toolbarbutton-1 > .toolbarbutton-icon,
toolbar:not(#PersonalToolbar) .toolbarbutton-1 > .toolbarbutton-badge-stack {
padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important;
}
toolbar:not(#PersonalToolbar) .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
width: 20px !important;
height: 20px !important;
}

[videobruce]

I appreciate the help, but it seems you are missing what I'm talking about.
It's the entire width of the area between the Menu Bar and the Tab Bar (which is at the bottom where it should of been in the 1st place). Not just icons.

[lenny2]

I may have misunderstood you. You can globally enlarge or reduce the entire Firefox interface (buttons, menu text, page content...) without using css.
about:config >> layout.css.devPixelsPerPx = -1.0 (by default)
If 0.8 - 80%, 0.95 - 95%, 1.05 -105%, 1.15 - 115% etc.

[videobruce]

That doesn't help. I need something that does the same to the address bar as it did to the tab bar. That's all.

[jscher2000]

Have you considered using Compact density? https://support.mozilla.org/kb/compact- ... nd-firefox

[videobruce]

Doesn't that shrink everything?

[jscher2000]

Doesn't that shrink everything?

Compact density reduces the heights of toolbars and tabs, and affects menu spacing. It's easy to experiment with through about:config. You can switch browser.uidensity between 0 (Normal) and 1 (Compact) and back again.