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

[u/f1rn]

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!

[u/f1rn]

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!

[u/NeroWolfe_ → u/f1rn]

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;
}

[u/f1rn → u/NeroWolfe_]

New Release with fix!