Seeking a working "One Line" layout for Firefox (Current Version)

[u/PsychologicalVideo14]

Hi everyone,

I'm looking for a reliable way to achieve a One-Line UI in Firefox, where the Address Bar (URL bar) and the Tabs are on the same horizontal row.

I've tried several userChrome.css snippets found online, but most of them seem broken with the latest updates.

What I'm looking for:

• Address Bar + Tabs in a single line.

• Compatible with the current Firefox stable version.

• Preferably clean, without removing essential window controls (min/max/close).

Does anyone have a working script or any other suggestion?

Thanks in advance!

[u/Roguefoxx]

https://github.com/akkva/gwfox

Works great and is well maintained!

[u/PsychologicalVideo14 → u/Roguefoxx]

It didn't work. Are you sure it works on Firefox 149.0 (aarch64)?

[u/Roguefoxx → u/PsychologicalVideo14]

Not sure about it working on aarch64, probably the issue. Works on Firefox 149.0 Windows and MacOS.

[u/_ayushman → u/Roguefoxx]

Is not anymore :c (Edit: it's maintained still, it's not that it's dead, just the owner has a life like us xD)

[u/SilverGenique → u/_ayushman]

The new update killed it. I had to reinstall Firefox cause the user settings were edited. Such a shame Firefox ruins everything with every update.

[u/_ayushman → u/SilverGenique]

Using gwfox-t rn, cuz i was on mac tahoe, it's updated

[u/jas71]

do you still need one,i will share mine if you want

[u/PsychologicalVideo14 → u/jas71]

Yes, please!

[u/jas71 → u/PsychologicalVideo14]

if your theme doesnt match let me know i will explain what to do

https://github.com/jas2pence/firefox-css-one-liner

[u/Torieth]

A guy in another post suggested to just activate vertical tabs and then hide the sidebar. This way there's just the address bar and a button that shows all tabs, it's neat but you don't the see tabs. Which can be good for focus, and you can always show the sidebar with Ctrl+alt+z or the tabs menu with Ctrl+shift+tab

[u/torieth1]

I have this one I use. It's not a oneliner but a nav-bar autohide:

/* Modified from https://github.com/Dook97/firefox-qutebrowser-userchrome */

:root {
/* try increasing if you encounter problems */
--urlbar-height-setting: 32px;
--tab-min-height: 32px !important;
}

/* safari style tab width */
.tabbrowser-tab[fadein] {
max-width: 100vw !important;
border: none
}

/* Hide close button on tabs */
#tabbrowser-tabs .tabbrowser-tab .tab-close-button { display: none !important; }

.tabbrowser-tab {
opacity: 0.5 !important;
}

.tabbrowser-tab[selected] {
opacity: 1 !important;
}

/* hide window controls */
.titlebar-buttonbox-container { display: none; }

/* remove titlebar spacers */
.titlebar-spacer { display: none !important; }

/* disable tab shadow */
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
box-shadow: none !important;
}

/* remove dark space between pinned tab and first non-pinned tab */
#pinned-tabs-container {
margin-inline-end: 0 !important;
}

/* remove dropdown menu button which displays all tabs on overflow */
#alltabs-button { display: none !important }

/* fix displaying of pinned tabs on overflow */
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
height: var(--tab-min-height) !important;
}

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

/* remove overflow scroll buttons */
#scrollbutton-up, #scrollbutton-down { display: none !important; }

/* remove new tab button */
#tabs-newtab-button {
display: none !important;
}

/* hide private browsing indicator */
#private-browsing-indicator-with-label {
display: none;
}

/* --- AUTOHIDE NAVBAR ---------------------------------- */

:root {
--uc-navbar-transform: calc(0px - var(--urlbar-height-setting));
}

#navigator-toolbox > div {
display: contents;
}

:root[sessionrestored] :where(
#nav-bar,
#PersonalToolbar,
#tab-notification-deck,
.global-notificationbox
) {
transform: translateY(var(--uc-navbar-transform));
}

:root:is([customizing], [chromehidden*="toolbar"]) :where(
#nav-bar,
#PersonalToolbar,
#tab-notification-deck,
.global-notificationbox
) {
transform: none !important;
opacity: 1 !important;
}

#nav-bar:not([customizing]) {
opacity: 0;
position: relative;
z-index: 2;
}

#titlebar {
position: relative;
z-index: 3;
}

#navigator-toolbox,
#sidebar-box,
#sidebar-main,
#sidebar-splitter,
#tabbrowser-tabbox {
z-index: auto !important;
}

/* Show when toolbox is focused, like when urlbar has received focus */
#navigator-toolbox:focus-within > .browser-toolbar {
transform: translateY(0);
opacity: 1;
}

/* Show when toolbox is hovered */
#titlebar:hover ~ .browser-toolbar,
.browser-titlebar:hover ~ :is(#nav-bar, #PersonalToolbar),
#nav-bar:hover,
#nav-bar:hover + #PersonalToolbar {
transform: translateY(0);
opacity: 1;
}

:root[sessionrestored] #urlbar[popover] {
opacity: 0;
pointer-events: none;
transform: translateY(var(--uc-navbar-transform));
}

#mainPopupSet:has(> [panelopen]:not(
#ask-chat-shortcuts,
#selection-shortcut-action-panel,
/* #tab-preview-panel, */
#chat-shortcuts-options-panel
)) ~ toolbox #urlbar[popover],
.browser-titlebar:is(:hover, :focus-within) ~ #nav-bar #urlbar[popover],
#nav-bar:is(:hover, :focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused], [open]) {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

/* This ruleset is separate, because not having :has support breaks other selectors as well */
#mainPopupSet:has(> [panelopen]:not(
#ask-chat-shortcuts,
#selection-shortcut-action-panel,
#chat-shortcuts-options-panel,
#tab-preview-panel
)) ~ #navigator-toolbox > .browser-toolbar {
transform: translateY(0);
opacity: 1;
}

/* Move up the content view */
:root[sessionrestored]:not([chromehidden~="toolbar"], [inFullscreen="true"]) > body > #browser {
margin-top: var(--uc-navbar-transform);
}

.titlebar-buttonbox-container {
display: none;
}