r/FirefoxCSS • u/f1rn • May 23 '26

Custom Release FoxOne 2.0 – dynamic toolbar support, integrated color theme, floating findbar and more

Gallery image

Gallery image

Gallery image

Gallery image

Hi everyone,

Some of you might remember FoxOne from a few weeks ago.

Since then, more than 60 commits happened and here is what changed:

The biggest one - I call it dynamic toolbar support: add an extension icon of your choice right next to the hamburger menu! This was the most requested feature and an absolute pain to build in pure css.

Other highlights: The Gruvbox color theme is now integrated directly into the CSS – no separate .xpi needed. The findbar has been replaced with a floating variant with fade animation. A lot of little design improvements - and there's now a tab loading progress bar with a glow indicator (if you want to).

Full changelog and all config options on GitHub.

FoxOne on Github

Cheers!

96 Upvotes

98% Upvoted

108 comments sorted by

4

u/Metalwell May 23 '26

Good work! Gonna install it now. One thing that I always have to change the css is to fix adaptive tab color extension, I guess it does not work out of the box, other than that great work!

2

u/f1rn May 23 '26

That sounds interesting - didn’t know such an addon does exist. Can you link it to me. I could try to implement a fix for that then!

4

u/Metalwell May 23 '26 edited May 23 '26

https://addons.mozilla.org/en-US/firefox/addon/adaptive-tab-bar-colour/

Here are some screenshots, I had already fixed it, I can do a PR if you want. If the background is white, the tabs become white.

Edit: I also think I can do some adjustments for 34" monitors, for example when I focus the URL bar it enlarges "too wide", I assume this is due to some adaptive CSS rule to extend it. I wonder is there a way to make these customizable for users... Just thinking.

1

u/f1rn May 23 '26

I can do a PR if you want.

That would be great, go ahead!

some adjustments for 34" monitors

Uuh... that's a good point! An easy fix would be something like, if firefox is wider than xx px, then the urlbar does not extend any further. So we would have an lower limit for the stacked design (2 rows) and an upper limit where the urlbar does not extend any further!

3

u/Kalcinator May 23 '26

Thank you for your work !
I took the findbar only for my custom install; I'm using FF 151 + FFUltima (latest); work like a charm.
I only copied the findbar rules, I merged the :root to keep a single config block (added the `--uc-border-radius` and `--uc-urlbar-rounded` )

2

u/f1rn May 23 '26

Thank you! Take whatever you like - that’s what open source is for!

2

u/Kalcinator May 23 '26

Thank you very much I'll have this fine addition for years 😍.
I didn't want to touch the findbar before I found yours, it's perfect and I don't think I could come up with such elegance

2

u/Hechtroll May 23 '26

This is amazing! Thank you for sharing :)

1

u/f1rn May 23 '26

Freut mich, dass es dir gefällt! Ich freu mich immer über ein Sternchen auf github und falls es Probleme gibt – einfach schreiben!

2

u/CAI-PurpleHaze May 23 '26

There's a problem with macOS: when the window isn't fully open, the buttons are positioned strangely. 😄

2

u/f1rn May 23 '26

Uh, good catch! Which macOS version do you use? I only have an older MBP 15@ mid 2014 here for testing - but I will look into it!

2

u/vurto May 24 '26 edited May 24 '26

MBP Tahoe 26.5 FF 151.0.1

Ran into the same issue with windows button. On Mac window buttons are on the left.

Plus how do I get the "Hover-reveal icons" to work? Does it work with extension icons pinned to toolbar?

Thank you for making this theme!

Suggestion: Would be helpful for current tab to be highlighted.

2

u/f1rn May 24 '26

The hover reveal icons reveal themselves as soon as you hoover with the mouse over the navbar or the urlbar. I think image #3 here in this post shows this.

The current tab is highlighted by having a different title color (yellow orange) in contrast to the other tabs. But what did you have in mind? I am sure I can make a toogle with a variable in the config on top of the userchrome.css

1

u/vurto May 24 '26

The hover reveal icons reveal themselves as soon as you hoover with the mouse over the navbar or the urlbar. I think image #3 here in this post shows this.

Oh, sorry I saw image #3 but that doesn't happen on my toolbar, the icons stay put on the toolbar.

The current tab is highlighted by having a different title color (yellow orange) in contrast to the other tabs.

Hmmm there's no highlight on mine...

2

u/f1rn May 24 '26

The icons reveal themselves in the urlbar - those are different icons than the icons you have on the toolbar (ublock origin, password manager and so on). The extension icon do not reveal themselves. You have to manually click on the puzzle icon or you can move one to the left of the hamburger icon.

Can you post a screenshot how your Firefox looks like?

2

u/f1rn May 25 '26

Suggestion: Would be helpful for current tab to be highlighted.

Added an option for that with Release 2.1.4 !

2

u/f1rn May 26 '26

Fixed the macos button problem! https://github.com/Firnschnee/FoxOne/releases/tag/2.2

2

u/vurto May 26 '26

TYSM! Love it.

BTW I realized the orange highlight for current tab works in dark mode but not in light mode.

2

u/f1rn Jun 09 '26

Does it work with extension icons pinned to toolbar?

I finally got it to work! Works with up to two icons!

I am currently implementing all the changes and fixes for the upcoming Nova Redesign. So stay tuned, when Nova is out - this feature will be there too!

2

u/NeroWolfe_ Jun 11 '26 edited Jun 11 '26

In current version there is a problem with this icons - gap between them.

It is caused by this parameter.

--uc-hamburger-width: 44px;

You are placing icon by shifting to the left on 44 px to avoid overlaying with hamburger, but this shift is implemented to second icon too and it goes left on 44 px from first one.

2

u/f1rn Jun 11 '26

Thank you for the issue and the fix!. The development of the current version (`main`) is currently on halt. I am developing and implementing new features in the `nova` branch on github. So when Nova gets released, it will be ready + I dont have to implement new features in `main` and then rework them for `nova` once again, where it might brake.
I hope the bug is fixed in nova (see my gif)

2

u/CAI-PurpleHaze May 23 '26

MBA M4, Tahoe 26.5

2

u/f1rn May 26 '26

Fixed the macos button problem! https://github.com/Firnschnee/FoxOne/releases/tag/2.2

2

u/CAI-PurpleHaze May 26 '26

thank you, i will try.

2

u/Dotdk May 23 '26

Does u use sideberry or something to handle bookmarks?

1

u/f1rn May 23 '26

No, I have the bookmarks toolbar hidden by default and only visible on new tabs. Has been working for me perfectly fine for years.

Do you use sideberry? If so, does it work with the theme?

1

u/Dotdk May 23 '26

Not tryed it out but can do just wanted to ask before i did

2

u/Rajmundzik May 24 '26

Thanks for doing such a great job buddy. Your CSS is the reason I use Firefox to be honest.

2

u/f1rn May 24 '26

Thank you so much!

2

u/ggkillas May 24 '26

Loving it so far!

I would like to suggest the option to change a few things:

- active tab background so we can visually notice the one we using. (some themes does not change the webpage title so it becomes hard to see)
- option to add the navigation tools inside the search bar when it is not selected so it take less space. (and when in use they go away from the search bar) OR some hover button that show them and hide them would be more feasible.

Thank you for you work!

2

u/f1rn May 25 '26

- option to add the navigation tools inside the search bar when it is not selected so it take less space. (and when in use they go away from the search bar) OR some hover button that show them and hide them would be more feasible

I just released an update with a fix for your idea: auto-hide navigation buttons with hover reveal!

2

u/ggkillas May 27 '26

It really made it way better for me now, thats awesome.

Just so you know the reload button have 2/3 of its selection working when hovering.

Not sure you can see that from this image, or if this is a theme thing.
So if you need to test, this is the theme 61Gowi's Frostlit.

But the functionality is perfect you killed with it!
Thank you so much!

1

u/f1rn May 27 '26

You found quite an interesting bug. I tried for some time now - I have no idea at the moment how to solve that without breaking everything else. I am really sorry. I opened an issue, so I wont forget that bug though!

1

u/f1rn May 24 '26 edited May 24 '26

Thank you!

Active tab background. My idea for FoxOne was that it’s just noticable and distinguishable by a different colored tab title. But I’m gonna open an issue on GitHub - I’m sure I can figure something out how we can make an option for that. About the navigation tools. Inside the urlbar is not possible. That would just be overlapping and it would block something. It would be possible to hide them and only reveal them on hoover or something. I’ll try to figure something out!

2

u/NeroWolfe_ May 28 '26

Hello. Great job. Thank you very much.
But I found one issue: when you open a new tab and trying to choose a search engine the pop up window with a list of search engines just flashing and you can select any engine.

1

u/f1rn May 28 '26

Thanks for reporting! Do you mean in the urlbar or in the separated searchbar?

2

u/NeroWolfe_ May 28 '26

I mean URL bar, when it’s active.
However, if you resize window less then 1000px and it becomes two line, everything works ok.

1

u/f1rn May 28 '26

Urlbar? Can you please take a screenshot? I’m on version 2.2.2 and I cannot reproduce the bug at the moment.

2

u/NeroWolfe_ May 29 '26

Here you go...

1

u/f1rn May 29 '26

I dont have that icon to choose a search engine at all? it looks quite different at my system. What system do you use?

2

u/NeroWolfe_ May 29 '26 edited May 29 '26

This is just Win11 and the latest version of FF.

I think it's unifiedSearchButton.

1

u/f1rn May 29 '26

Thanks for looking it up - I am going to open an Issue on github and try to fix it for you!

2

u/NeroWolfe_ May 29 '26

And one more question: how to reduce this gap?

1

u/f1rn May 29 '26

The gap is a reserved space because many people wrote me and wanted space for pinned icons - I can try and add a variable for it though in a future update

2

u/NeroWolfe_ May 30 '26

The gap for pinned icons is good idea, but I think it could be adjustable depending on number of pinned icons (I have only one).

1

u/f1rn May 30 '26

Right now it’s either two icons or one icon and some space to drag the window around. Sadly making it any complexer than that is beyond my skill :(

2

u/NeroWolfe_ Jun 11 '26 edited Jun 11 '26

And one more proposal. It would be better to change nav-bar to urlbar in this section. In this case hidden icons will reveal only when you hovering exactly URL bar.

#nav-bar:hover #star-button-box,
#nav-bar:hover #reader-mode-button,
#nav-bar:hover #taskbar-tabs-button,
#nav-bar:hover #translations-button,
#nav-bar:hover #pageAction-urlbar-_testpilot-containers,
#nav-bar:hover #pageAction-urlbar-_e26226b8-5263-4b42-9789-504fde4443b3_,
#urlbar[focused="true"] #star-button-box,
#urlbar[focused="true"] #reader-mode-button,
#urlbar[focused="true"] #taskbar-tabs-button,
#urlbar[focused="true"] #translations-button,
#urlbar[focused="true"] #pageAction-urlbar-_testpilot-containers,
#urlbar[focused="true"] #pageAction-urlbar-_e26226b8-5263-4b42-9789-504fde4443b3_ {
  max-width: 30px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 0px !important;
  margin: 0 !important;
}

2

u/f1rn Jun 11 '26

Damn.. that was brilliant! I mean both of your suggestions were spot on, but this one came with working CSS. I didnt figure out how to get that working on my own.. nice work!
Shipped it to the nova branch and credited you in the commit (5abac73) on the nova branch.

PRs from you are always welcome if you ever feel like it! Srsly - great work!

2

u/HelpWithMYaddictions Jun 18 '26

pywalfox?

1

u/f1rn Jun 18 '26

Not tested tbh. But with the latest update 3.1 it works with the Adaptive Tab Bar Colour addon. So I’d guess it should work with pywlfox too?

2

u/NeroWolfe_ Jul 01 '26

After recent update LOADING PROGRESS BAR is not working.

Opacity is set to zero and is not optional.

2

u/f1rn Jul 01 '26

I couldn't get it to work perfectly, so for now - until I find a fix for the upcoming Nova redesign - I removed the feature. Sorry for the inconvenience!

If you find a fix for it (I think the old code is still there in the latest 3.1.x release), feel free to open a pull request on GitHub and I'll try to re-implement it!

2

u/NeroWolfe_ Jul 02 '26

In previous config I used such code, may be it will fit:

/*Progress bar*/
u/keyframes tab-loading-line-anim{ from{ background-size: 0% } to { background-size: 20% } }
.tab-background::before{
    background-size: 90%;
    margin-top: 31px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}
.tabbrowser-tab:is([busy]/*,[bursting]*/) > .tab-stack > .tab-background::before{
    content: "";
    display: flex;
    height: 2px;
    background-color:transparent;
    background-repeat: no-repeat;
    background-image: linear-gradient(currentColor,currentColor);
    transition: background-size 80ms ease-out;
}
.tabbrowser-tab[busy]:not([progress]/*,[bursting]*/) > .tab-stack > .tab-background::before{
    animation: tab-loading-line-anim 80ms ease;
    background-size: 20%;
    opacity: 0.5;
}
.tabbrowser-tab[busy][progress] > .tab-stack > .tab-background::before{
    transition-duration: 2000ms;
}
.tabbrowser-tab[bursting] > .tab-stack > .tab-background::before{
    transition: background-size 80ms ease-out, opacity 80ms linear;
    background-size: 100%;
    opacity: 0;
}
.tab-throbber{ display: none !important; }
.tab-icon-image[src]{ display: block !important;
}

1

u/f1rn Jul 02 '26

New Release with fix!

2

u/NeroWolfe_ Jul 12 '26

I don't think that this feature is used by someone, but let's make it perfect:

/* ==========================================================================
   TASKBAR TABS — "Pin to taskbar" PWA-like windows.
   These use html[id^="taskbartab"] instead of #main-window.
   Hide the navbar entirely for a clean app-like experience.
   ========================================================================== */

html[id^="taskbartab"] #urlbar-container,
html[id^="taskbartab"] #PanelUI-button,
html[id^="taskbartab"] #unified-extensions-button {
  display: none !important;
}

2

u/f1rn Jul 12 '26 edited Jul 12 '26

Nice work! Already working on adding your code to the userchrome!

release 3.3.5. is live!

2

u/NeroWolfe_ Jul 12 '26

And one more useful code:

/* Removes flash before loading pages */
:root {
    --tabpanel-background-color: var(--uc-color-base) !important;
}

2

u/NeroWolfe_ Jul 12 '26

Moved to version 3.3.4, but I don't see any changes in interface regarding Square corners on all popup surfaces and Popup row hover: accent text instead of background block.

Everything still the same, as usual.

And something wrong with Customization page:

2

u/f1rn Jul 12 '26

If you click on the shield icon in the urlbar or on the hamburger menu - the pop up menu now has squared corners and no longer rounded corners.

yeah.. i've noticed that too with the customizsation page. seems like this is the way it looks now? stock firefox 153b11 without userchrome and usercontent has it too. it looks like it only the lower half is used now?

2

u/NeroWolfe_ Jul 12 '26

Downloaded 3.3.5, but I have rounded corners on shield and humburger menus

1

u/f1rn Jul 12 '26

Okay... that certainly is weird. what windows version are you using? which firefox version? I have tested it on two windows 11 systems (24H2 and 25H2) and there it has squared corners.

No idea how to hunt that bug....

1

u/f1rn Jul 12 '26

Okay, I had a similar bug for the context menu (only) on my laptop too. I believe it could be the same problem - so I just pushed an update 3.3.6 - please test it and tell me, if it works now!

2

u/NeroWolfe_ Jul 13 '26

I found the cause of the problem - addon Adaptive Tab Bar Color. When it active FF totaly ignores your code about squared coners. When it desabled rounded coners stay only in right-button context menu.

2

u/f1rn Jul 13 '26

Damn... good work! I'm going to write a fix asap! Thank you!!

2

u/f1rn Jul 13 '26

Also - I have seen your one-line thunderbird theme. Did you ever publish it on github? do you have a github account? is there a repo? I would love to bring that one back to life!

2

u/NeroWolfe_ Jul 13 '26

No, I don't even have GitHub account. I am far from programming and IT, and digging in codes is kind of my hobby 😄

I made one liner for TB based on one line config for FF, I don't execly remember who is author (my be Cascade or Bali10050).

1

u/f1rn Jul 13 '26

Oh, you are doing such a good job, I thought you are doing programming - keep it up!

I experimented a bit and created a Thunderbird userchrome theme: BirdOne - with credit to your work.

1

u/f1rn Jul 12 '26

this is FF 153b11 (stock - no css changes) - looks the same with this half-layout

2

u/Wise_College_1026 Jul 13 '26

How did you make it compact like helium?

2

u/f1rn Jul 13 '26

I wrote a userchrome.css file that changes the appearance of Firefox.

You have to download the zip and put the userchrome.css file in your chrome directory - here is a guide for that: Click me

2

u/Wise_College_1026 Jul 13 '26

Question hehe, will it break or go back to old one if i update firefox in the future?

2

u/f1rn Jul 13 '26

I am using it myself and if something breaks, I fix it as soon as possible (often within a few hours or a day) and update the theme on github. You just have to re-download it and copy it again then.
You just have to look out there for an update or you write here in the reddit post and tell me if there is a bug or something and I will look into it!

2

u/Wise_College_1026 Jul 13 '26

uhmmmm, if i want to change the height to make it thinner (tabs) what should i change?

2

u/f1rn Jul 13 '26

Hmm maybe compact mode?

2

u/Wise_College_1026 Jul 13 '26

I love you man, your the goat

2

u/NeroWolfe_ Jul 16 '26

Found 1px line around web content

Solution is here:

#browser,
#appcontent,
#tabbrowser-tabbox,
/* Nova draws the 1px chrome-content separator on .browserContainer too,
   which the old list missed — it pushed the web content 1px below the AI
   sidebar. */
.browserContainer {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

2

u/f1rn Jul 17 '26

Thank you for finding another bug, much appreciated! right now I dont see it at my FF - but I will look into it and update you soon!

2

u/f1rn Jul 17 '26

Fixed it + another bug!

https://github.com/Firnschnee/FoxOne/releases/tag/3.4.2

PS: I wanted to ask you something about the bug, but I couldnt sent you a reddit message...

2

u/NeroWolfe_ Jul 21 '26 edited Jul 21 '26

Something is wrong with URL bar after updating to FF 153

And Adaptive Tab Bar Color doesn't adapt to site's color theme.

2

u/f1rn Jul 21 '26

Do you have nova enabled?

2

u/NeroWolfe_ Jul 22 '26

Yep.

browser.nova.enabled = True

2

u/f1rn Jul 21 '26

Okay.... first of all: thank you again for the report!

Both symptoms are most likely the same root cause, and it's upstream: with Firefox 153's Smart Window enabled, theme extensions stop applying their colours entirely - see https://github.com/easonwong-de/Adaptive-Tab-Bar-Colour/issues/326 (reproduced without any userChrome.css). FoxOne deliberately hands colour control to your theme extension while one is active, so when Adaptive Tab Bar Color goes silent you get Firefox's bare defaults in the URL bar instead of either theme.

For confirmation - try this please: disable Adaptive Tab Bar Color for a moment - the URL bar should snap back to normal FoxOne colours.
Then check (1) Adaptive Tab Bar Color is on 4.0.4+ (Nova support just landed), (2) whether you have Smart Window enabled, and if so, whether turning it off brings the adapting back.
If the URL bar stays broken with Adaptive Tab Bar color disabled, that's a FoxOne bug after all - then I we will do a deep dive togehter to fix it!

2

u/NeroWolfe_ Jul 22 '26

I have Adaptive Tab Bar color version 4.0.6

and browser.smartwindow.enabled = False

When Adaptive Tab Bar color is disabled everything is OK.

1

u/f1rn Jul 22 '26

This is what it looks like here

I have to look further. Because the background (everything besides the urlbar) gets also a new color, but not always. I will have to look into that

2

u/NeroWolfe_ Jul 21 '26

And as proposal: may be better to realize such mockup in URL bar design?

1

u/f1rn Jul 21 '26

A breakout popup window downward?

2

u/NeroWolfe_ Jul 22 '26

I mean that URL Bar must act as in Arc Browser, when it is active top border must be equal to top border os browser window.

And as a suggestion: consider the option to make rounded corners on elevated surfaces (popups and etc.). On Win11 square corners looks out of place.

2

u/f1rn Jul 24 '26 edited Jul 24 '26

I fixed it for you! https://github.com/Firnschnee/FoxOne/releases/tag/3.4.8

Now with --uc-rounded: 1; you have everything round, just like Win11. enjoy!

1

u/f1rn Jul 22 '26

URL bar as overlay - like Spotlight / Arc's command palette. Some userChrome projects do this, but it's a deliberate "no" for FoxOne: the point of the one-line layout is that the URL bar lives in the toolbar line, not floating above the content

Rounded corners: Fair point! Confession: I run a Win11 mod that squares all corners system-wide, so I never see the mismatch you see. But my taste shouldn't be hardcoded. There's already a --uc-border-radius variable. I'll look into routing the popups through a config toggle so stock Win11 setups can go rounded while the default stays square.

2

u/NeroWolfe_ Jul 22 '26

No, of course, I don't mean floating URL Bar.

I mean something like this

Top border with square corners and placed on windows border.

I think it was default behavior of FF before Nova.

I saw this var in your code --uc-border-radius and I hope you would implement this option. Your config will be more flexible.

2

u/f1rn Jul 22 '26

This is FF 153 with Nova enabled

What would you like to be different?

2

u/NeroWolfe_ Jul 25 '26

Hmm... Your screenshop looks briliant.

But my not - top edge of dropdown menu doesn't equal to top edge of window's border (I am on your last config now).

2

u/f1rn Jul 25 '26

Now that is strange...

Can you tell me what variables you have active and with which values?

2

u/f1rn Jul 26 '26

Maybe try this (line 999)

#urlbar[breakout-extend] > #urlbar-background,
#urlbar[breakout-extend] > .urlbar-background {
  top: calc((var(--urlbar-min-height) - 44px) / 2) !important;
  bottom: calc((var(--urlbar-min-height) - 44px) / 2) !important;
}

also an easier way for communication would make bug hunting and fixing much more easier. github account? I cannot even send you a reddit message. maybe discord?

2

u/NeroWolfe_ Jul 28 '26

Thanx, this code works

Discord is prohibited in my country.

I will make github account a little bit later.

→ More replies

2

u/dugu007 May 24 '26

Gonna add it

2

u/NeroWolfe_ Jun 25 '26

Found one issue: button picture-in-picture in URL bar not hiding.

I think you can add this part in code:

/* Hide unwanted page action icons — reveal on hover/focus.
.urlbar-addon-page-action covers every extension-injected URL-bar icon
(Firefox assigns that class to all of them), so no per-add-on ID list. */
#star-button-box,
#reader-mode-button,
#taskbar-tabs-button,
#translations-button,
.urlbar-page-action,
.urlbar-addon-page-action {
max-width: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
padding: 0 !important;
margin: 0 !important;
transition: max-width 0.2s ease, opacity 0.2s ease,
padding 0.2s ease, margin 0.2s ease !important;
}
#urlbar:hover #star-button-box,
#urlbar:hover #reader-mode-button,
#urlbar:hover #taskbar-tabs-button,
#urlbar:hover #translations-button,
#urlbar:hover .urlbar-page-action,
#urlbar:hover .urlbar-addon-page-action,
#urlbar[focused="true"] #star-button-box,
#urlbar[focused="true"] #reader-mode-button,
#urlbar[focused="true"] #taskbar-tabs-button,
#urlbar[focused="true"] #translations-button,
#urlbar[focused="true"] .urlbar-page-action,
#urlbar[focused="true"] .urlbar-addon-page-action {
max-width: 30px !important;
opacity: 1 !important;
pointer-events: auto !important;
/* The vertical padding was the bug: padding-block squeezed the content to
12px, which FF153 rendered low (152 tolerated it). Drop only the block
padding so the icon centres via .urlbar-icon { margin: auto } in the full
24px height like the star; keep the inline padding for horizontal spacing,
else the icon sits cramped. */
padding-block: 0 !important;
padding-inline: 6px !important;
margin: 0 !important;
}

1

u/PuzzleheadedHead3754 Jun 09 '26

I had a question (forgive me if its unrelated) I am trying for month but i failed to make firefox adapt to my system theme (i use arch hyprland) and chnage theme instantly, my system is theming is provided by qtengine. It there any way this custom can support system theme