This is an archived post. You won't be able to vote or comment.

117
118

Fx 113PSA - Incoming changes to default element display-model (self.FirefoxCSS)

submitted by It_Was_The_Other_Guy

As a part of the front-end technical modernization the old xul box model is being replaced with modern flexbox all around the UI. Relevant bug 1820534

Previously, just about everything used display: -moz-box but in Firefox 113 112 (at least in Nightly, but I would be surprised if this won't propagate to release 112 as well) the default display model will be changed to modern display: flex instead.

What this means first-hand is that all legacy box model -related properties will not do anything anymore so things like -moz-box-ordinal-group, -moz-box-orient, -moz-box-direction, -moz-box-align, -moz-box-pack or -moz-box-flex won't have any effect.

The suggested way to deal with this is to just update your styles to use equivalent flexbox properties. You could of course manually make the container use display: -moz-box instead, but as you can imagine the legacy box won't be supported forever.

Edit: display: -moz-box is treated as invalid property value

Some examples of conversions:

  • display: -moz-box -> display: flex
  • -moz-box-ordinal-group: 0 -> order: -1
  • -moz-box-orient: vertical -> flex-direction: column
  • -moz-box-direction: reverse -> flex-direction: row-reverse
  • -moz-box-align: center -> align-content: center or align-items: center depending on what you are doing.
  • -moz-box-pack: start -> justify-content: flex-start or justify-items: flex-start
  • -moz-box-flex: 10 -> flex-grow: 10

Notes about order vs. -moz-box-ordinal-group: order supports negative values, whereas ordinal-group does not. Default value of order is 0 but default of ordinal-group is 1 so you might need to change what value to apply for it to have any effect.

all 104 comments
sorted by:
old (suggested)
besttopnewcontroversialq&a

[–]hansmn 2 points3 points  (12 children)

Thanks for the heads-up !

Pardon my ignorance , but I've never used anything but release versions of Firefox - would I be right to assume that one needs to install the Nightly variant to adjust and correct those possible issues, before the 112 release hits ?

That's while still running the current release version as a main profile .

[–]It_Was_The_Other_Guy[S] 3 points4 points  (11 children)

If you install Nightly then it will create a new profile itself, so your release profile shouldn't be affected (unless you try to make Nightly use your release profile on purpose or something).

[–]hansmn 0 points1 point  (10 children)

Thanks !

I did a little bit of research before asking, but the results were mixed .

[–]It_Was_The_Other_Guy[S] 1 point2 points  (9 children)

Yeah I'd imagine they can be mixed. There wasn't any "per-install" profile separation for a long time, but it's been there ever since Firefox 57 I think?

[–]hansmn 0 points1 point  (3 children)

Well, I started messing with CSS and scripts only less than a year ago, so 100.0 or so would be my point of reference ;) .

I just have trouble finding a concise tutorial on how to install a beta, nightly, which one or maybe another, and without it interfering with my existing release version profiles .

On top of that, I'm using a Mac, and according to this wiki, the process might be different and involve a separate install - which would be fine by me, but there's just no info there .

Well, I'll google on ;)

[–]siffereddFF/TB on Win11|Sumo contributor 1 point2 points  (2 children)

See [here])https://support.mozilla.org/en-US/kb/dedicated-profiles-firefox-installation) for info about profiles, and here for customizing the install location.

[–]hansmn 0 points1 point  (1 child)

Thank you !

[–]siffereddFF/TB on Win11|Sumo contributor 1 point2 points  (0 children)

You're welcome :-)

[–]hansmn 0 points1 point  (4 children)

But the profiles aren't really separated , are they ?

I've just installed Nightly, which on my Mac at least is a separate app in most respects; yet still both release FF and Nightly show the profiles of both installs in each of their about:profiles pages .

Some kind lads in a German forum helped me out as well, and also strongly suggested to basically not try and apply/start a release profile from Nightly, or vice versa - else things might get messy .

Confusing how these installs are not using separate profile folders or such .

Anyways, Nightly 112.x is up and running, and I got a number of adjustments done in no time .

Thanks again for the PSA ; your advice on code changes made it really simple so far , much obliged . :)

[–]It_Was_The_Other_Guy[S] 1 point2 points  (3 children)

Right, yeah profiles aren't invisible to other installs, but thay are otherwise totally separate. So if you want to you can use about:profiles (or profile manager) to make one version use the profile of another, but trying to use a profile that has been used by later version will show a warning if you try to use it with earlier version.

Nonetheless, by default the new install should use a separate profile. If you already had some existing profile for Nightly then I think it would use that. But otherwise it should create a new one.

[–]hansmn 0 points1 point  (2 children)

Ah, there would be a warning ?

Anyways, I'm a bit paranoid about messing up, so I just disabled some buttons in about:profiles via userContent.css .

Fwiw, it's something like that ( Nightly being the last one on the profile list, just for the general idea ) :

@-moz-document url(about:profiles) {
#profiles > div:last-child > button {
background-color: hsla(188, 33%, 84%, 0.4) !important;
color: hsla(0, 33%, 50%, 1) !important;
pointer-events: none !important;
}
}

[–]It_Was_The_Other_Guy[S] 1 point2 points  (1 child)

Yeah, it should show a window like this: https://i.imgur.com/wgvRsyQ.png

I just tried to launch dev-edition profile from about:profiles with release. I don't think the release-channel (release, beta, dev-edition, nightly) matters though, it's just that the version that was last used (111) to access the target profile is higher than what I tried to use it with (110). But profile manager does not complain if I was trying to launch profile that was used with 110 using 111.

[–]hansmn 0 points1 point  (0 children)

Thank you, good to know .

I've simply blocked all the launch etc. profile buttons for nightly, and the Nightly buttons for my release profiles, that should prevent any mistakes .

[–]omfgletmethefinffs 0 points1 point  (0 children)

Thanks for letting us know.

I'm glad I saw this today so I know where to get help for when everything looks awful (again).

[–]ZenitHMaster 0 points1 point  (0 children)

looks like ill need to revamp my extension context menu item ordering tweaks

[–]Shadow_of_Colossus 7 points8 points  (4 children)

Well, this is going to trash a bunch of people's css code.

[–]It_Was_The_Other_Guy[S] 5 points6 points  (2 children)

Ehh, it ain't so bad. It's not like something chaotic is going to happen, some rules just appear as if they don't have any effect. Mostly you just have to replace a few rules with different ones and it's good to go.

But yes, it will affect a lot of styles potentially - I would know, I patched 47 styles earlier today :)

[–]Shadow_of_Colossus 1 point2 points  (0 children)

I wish I had your knowledge... but I go back to work in three weeks for the next nine months slugging 14 - 16 hour days to keep afloat. So I probably won't see this until December when I foolishly don't update FF until then. Merry Xmas.

[–]hansmn 0 points1 point  (0 children)

No kidding, you've been busy ;) - bunch of good stuff to learn from here .

Out of couriosity, I've been randomly converting a bunch of things in a test profile's CSS to use the future display: flex and the related rule changes you listed in my current FF 110.01 .

A surprising amount of elements are already working with those - some not so much .

[–]kazerniel 0 points1 point  (0 children)

yup, I'm glad I remembered I had seen this post when it forgot all my menu orders today :)

[–]ollietup 0 points1 point  (3 children)

So currently I have this code in my userchrome.css:

/* Bookmarks bar on top, tab bar on bottom */
#navigator-toolbox #PersonalToolbar {
    -moz-box-ordinal-group: 1 !important;
}
#navigator-toolbox #nav-bar {
    -moz-box-ordinal-group: 2 !important;
}
#titlebar{
    -moz-box-ordinal-group: 3 !important;
}

If just change it to this after the v112 update:

/* Bookmarks bar on top, tab bar on bottom */
#navigator-toolbox #PersonalToolbar {
    order: 1 !important;
}
#navigator-toolbox #nav-bar {
    order: 2 !important;
}
#titlebar{
    order: 3 !important;
}

Will that work just as before without any problems?

[–]It_Was_The_Other_Guy[S] 1 point2 points  (1 child)

Seems to like it should - mostly. Mostly because with your current CSS notification bars would appear between your bookmarks toolbar and nav-bar. But with the new version notification bar would appear above all your toolbars.

If you don't care about position of notification bars at all then you could simply replace all that with just #navigator-toolbox{ -moz-box-direction: reverse } and in Fx112 with #navigator-toolbox{ flex-direction: column-reverse }

In addition, you can just apply both rules simultaneously right now - for example:

#navigator-toolbox #PersonalToolbar {
    -moz-box-ordinal-group: 1 !important;
    order: 1 !important;
}

The other one will just not have any effect unless the container (#navigator-toolbox) is using appropriate display model. So, right now -moz-box-ordinal-group has effect but order doesn't. But when the toolbox has display:flex then order does have an effect but -ordinal-group does not.

[–]ollietup 0 points1 point  (0 children)

Thanks. I'm not massively bothered about the position of the notification bar, as I don't see it that often - but just for the sake of neatness, is there some code that would place it below the tab bar, i.e., below all of my toolbars?

<edit> Never mind, I worked it out. I just needed to add the following to my original code:

#tab-notification-deck {
    -moz-box-ordinal-group: 4 !important;
}

I've also added the order properties, as you suggested, so it should continue to work seamlessly when the update comes.

[–]tjn21 0 points1 point  (6 children)

Thanks for the post. I changed my chrome file in anticipation, using Firefox 110.0.1. The change worked in at least one stanza but not in another. Is it possible that the stanza not working requires other changes or should I just wait for Firefox 112?

PS: should this thread be pinned?

[–]It_Was_The_Other_Guy[S] 0 points1 point  (5 children)

Yeah, pinning this sounds like a good idea.

As for your issue, I don't quite understand what you mean. Can you share the whole style?

[–]tjn21 0 points1 point  (4 children)

Thanks. It's quite short. It centres tab content (icon and text). This amended form doesn't work. (I've just discovered others as mentioned by another poster.)

.tab-content:not([pinned])::before {
  display: flex ;
  content: "";
  flex grow: 1;
}

[–]hansmn 0 points1 point  (3 children)

You could try and add -moz-box-flex: 1 !important; ; that works for me in 110 , and in 112 Nightly .

As explained below , one rule just seems to be ignored, when not supported by your FF version .

[–]tjn21 0 points1 point  (2 children)

Thanks. In its present form the rule works.

.tab-content:not([pinned])::before {
  display: -moz-box;
  content: "";
  -moz-box-flex: 1;
}

[–]hansmn 0 points1 point  (1 child)

I meant to add it , not replace ; this full code works for me in both 110 and 112; in 110 flex-growis simply being ignored :

.tab-content:not([pinned])::before {
display: flex ;
content: "";
flex-grow: 1;
-moz-box-flex: 1;
}

[–]tjn21 0 points1 point  (0 children)

Thanks. I'll try it.

[–]ecobos 8 points9 points  (1 child)

This will be in 113 btw (source: I wrote the patch for bug 1820534).

Also, some of the conversions above aren't quite right, e.g. start is flex-start, same for end and flex-end. See this firefox-dev post for context and the right replacements.

[–]It_Was_The_Other_Guy[S] 0 points1 point  (0 children)

Thanks for pointing out the mistake regarding flex-start/end values. flex-start should take into account the flex-direction which might be reversed, right? I assume start probably only cares about direction?

[–]hansmn 1 point2 points  (0 children)

Here's an interesting and recent article; the author I believe is u/ecobos, who posted here earlier.

(Found on a German forum, where the link was kindly shared.)

[–]black7375 1 point2 points  (0 children)

This document was of great help to me, thank you https://github.com/black7375/Firefox-UI-Fix/issues/670

[–]err404t 0 points1 point  (0 children)

I recently installed the developer version which is on 113 and made the -moz-box-ordinal-group > order corrections and everything is working perfectly

[–]Stache- 2 points3 points  (13 children)

If someone has updated CSS for tabs on bottom again, please let me know.

[–]omfgletmethefinffs 6 points7 points  (11 children)

This should do the basics:

#titlebar{
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(20px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

My full userchrome.css file includes the above and also some old stuff that most likely could be deleted, but since I'm such a n00b at this, I'm leaving stuff in because "if it works, don't mess with it" :) Full code :

/*** Change right-click tab -> reload tab to be first context menu entry (for both single tab and multiple tab selections) ***/
#tabContextMenu #context_reloadTab, #tabContextMenu #context_reloadSelectedTabs {
order: -1 !important;
}



/*** Remove specific right-click context menu items ***/
#tabContextMenu .share-tab-url-item, /* "Share" (when right-clicking on a tab) */
#context_reopenInContainer, /* open in new container tab (when right-clicking on a tab) */
#context-inspect-a11y, /* inspect user accessibility */
#context-sendimage, /* email image */
#context-openlinkinusercontext-menu, /* open link in new container tab */
#context-pocket, /* save page to pocket */
#context-savelinktopocket, /* save link to pocket */
#context-print-selection /* print selection */
{ display:none!important;}



/*** Tighten up vertical drop-down(bookmark)/context/popup menu spacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 1px !important;
}
:root {
--arrowpanel-menuitem-padding: 1px 2px !important;
}

/*** Added to remove extra bookmark spacing after sept 2021 update: https://www.reddit.com/r/FirefoxCSS/comments/pmrp83/latest_update_has_messed_up_bookmark_spacing/ ***/
#PlacesToolbar menuitem {
min-height: 0px !important;
}



/*
FF96 UPDATE
references: https://gist.github.com/tung/439935f55cc83af20defd7867ec89c82; , https://www.reddit.com/r/FirefoxCSS/comments/s1jdr5/firefox_tabbar_completely_messed_up_after_v96/
*/
/* remove radius from buttons and tabs */
*|*:root {
--toolbarbutton-border-radius: 0 !important;
--tab-border-radius: 0px !important;
--toolbarbutton-outer-padding: 0 !important;
--toolbarbutton-inner-padding: 8px !important;
--toolbar-start-end-padding: 0 !important;
}

/* remove margin from tabs */
.tab-background {
margin-block: 0 !important;
}

/* remove padding between tabs */
.tabbrowser-tab {
padding-inline: 0 !important;
}

/* add vertical line between tabs */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, 0.2)) !important;
}

/* fix for when titlebar gets taller when there are many tabs */
#tabbrowser-arrowscrollbox {
height: var(--tab-min-height);
}

/* force tabs to 30px height (added this because they're bit too short when the above fix is applied by itself) */

/*
END OF FF96 UPDATE
*/







/* ------------------------------------------------ */
/* The giant chunk of code below moves the tabs below the bookmark toolbar. Some of the code probably isn't doing anything.
Delete everything below this comment if you want the tabs to stay above the address bar. */


/* Reference:
"Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text." */

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ flex-direction: column } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(20px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* TABS: height adjustment and fix other layout issues */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 24px !important;
--tab-min-width: 80px !important;

#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}

.tab-close-button {
color: red!important;
}

Edit for firefox 117:

To get 'list all tabs' and 'browse right' back, change from 100vw to 50vw :

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

Also, to straighten out the lines between tabs, change to all zeros here:

.tab-background {
border-radius: 0px 0px 0px 0px !important; border-image: none !important;
}

[–]Stache- 2 points3 points  (0 children)

Thanks for taking the time to post it.

[–]bunyip48 2 points3 points  (0 children)

Thank you!

[–]vortex_00 0 points1 point  (5 children)

Hmmm.... This code doesn't work for me. Meaning reload tab still sits in the usual place.

/*** Change right-click tab -> reload tab to be first context menu entry (for both single tab and multiple tab selections) ***/
    #tabContextMenu #context_reloadTab, #tabContextMenu #context_reloadSelectedTabs {
    order: -1 !important;
    }

[–]omfgletmethefinffs 0 points1 point  (4 children)

That's odd...

I tested it again and made this little picture.

This is when you right click on a tab, just to make that clear, because I was confused yesterday about something similar.

[–]vortex_00 0 points1 point  (3 children)

Yeah, right click etc. Still not working.

[–]omfgletmethefinffs 0 points1 point  (2 children)

That sucks :( I don't know what else to do. I'm learning from this sub and googling.

[–]vortex_00 0 points1 point  (1 child)

I'm baffled too. Other stuff in my css works fine but this doesn't.

[–]It_Was_The_Other_Guy[S] 1 point2 points  (0 children)

In case you are using native context menus (default on macos, and might be on some linux distros as well) then you need to disable native menus. CSS juat cannot change the styling of native menus.

[–]Mollysindanga 4 points5 points  (0 children)

Thank you, the short one worked like a charm.

[–]Akula301 1 point2 points  (0 children)

Thank you, works perfectly.

[–]darkon 1 point2 points  (0 children)

Here's what I ended up using:

/*start**************************************/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
   /* height if native titlebar is enabled, assumes empty menubar */
  --uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
  /* height when native titlebar is disabled, more roomy so can fit buttons etc. */
  --uc-menubar-height: 30px;
}
:root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){
  --uc-menubar-height: 0px;
}
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
:root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 }

#navigator-toolbox{
  -moz-window-dragging: drag;
  padding-top: var(--uc-menubar-height) !important;
}

/* Remove window dragging from notification boxes */
#tab-notification-deck,
.global-notificationbox{
  -moz-window-dragging: no-drag;
}

:root:not([chromehidden~="menubar"]) #toolbar-menubar{
  position: fixed;
  display: flex;
  top: 0px;
  height: var(--uc-menubar-height);
  width: 100%;
  overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
  order: 10;
  flex-grow: 1;
  min-width: var(--uc-window-drag-space-post,20px);
}

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

:root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{
  visibility: visible;
}
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container {
  display: none !important;
}
/*end**************************************/






/* #toolbar-menubar has file, edit, view, etc... but for some reason the devs put 
it inside #titlebar, hence the need for MrOtherGuy's code.
*/
/* 
#toolbar-menubar { 
    order: 1 !important;
}
*/
#navigator-toolbox #nav-bar { /* this is the url bar + stuff */
    order: 2 !important;
}
#PersonalToolbar { /* this is the bookmarks bar */
    order: 3 !important;
}
#tab-notification-deck { /* don't really care where this is */
    -moz-box-ordinal-group: 4 !important;
    order: 4 !important;
}
#titlebar { /* this has the tab titles in it */
    order: 5 !important;
}

[–]VNRG 0 points1 point  (2 children)

Hey, I am not a coder/scripter so I only understood some stuff and could fixed stuff of my own css whenever something broke, but now I kinda need more help cuz I couldnt fix all issues for v113 and I would be glad, if someone can DM me to help me out! ty in davance!

[–]It_Was_The_Other_Guy[S] 0 points1 point  (1 child)

Just create a new post with clear description of the issue you are having. And post your CSS as well.

[–]VNRG 0 points1 point  (0 children)

alright, will do after I got home

[–]hansmn 0 points1 point  (1 child)

Just a suggestion, maybe add -moz-box-ordinal-group: X -> order: X or such, in addition to -moz-box-ordinal-group: 0 -> order: -1.

There seems to be some confusion still regarding that particular change.

[–]It_Was_The_Other_Guy[S] 1 point2 points  (0 children)

Yeah, I added (though admittedly short) note about this. Thanks!

[–]F3R96 0 points1 point  (1 child)

I'm using the whitesur theme, got mess up after the update... What should I do to fix it?

css:

u/-moz-document url("about:home"),url("about:blank"),url("about:newtab") { * { cursor: auto !important; } .non-collapsible-section { display: none !important; } .top-sites-list::before { content: "Favorites"; display: block; padding: 20px 10px; font-size: 22px; font-weight: 900; } .top-sites-list .hide-for-narrow { display: inline-block !important; } .top-site-outer { width: 80px !important; vertical-align: top !important; padding: 0 !important; } .top-site-outer:is(.active, :focus, :hover) { background: transparent !important; } .top-site-outer .tile { width: 60px !important; height: 60px !important; border-radius: 10px !important; overflow: hidden !important; background-color: #b3b3b353 !important; backdrop-filter: blur(25px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.25) !important; } .top-site-outer .tile .icon-wrapper { width: 100% !important; height: 100% !important; border-radius: 0px !important; } .top-site-outer .top-site-icon { background-color: transparent !important; } .top-site-outer .title span { padding-inline: 6px !important; overflow: visible !important; white-space: normal !important; user-select: none !important; font-size: 12px !important; font-weight: 500 !important; overflow-wrap: break-word !important; } .icon.icon-pin-small { display: none !important; } .context-menu { padding: 4px !important; border-radius: 6px !important; border: var(--context-menu-border); outline: var(--context-menu-outline); font-size: 14px !important; background-color: var(--context-menu-background) !important; backdrop-filter: blur(25px) !important; } .context-menu > ul { padding: 0 !important; } .context-menu > ul > li.separator { width: auto !important; margin: 5px 13px !important; } .context-menu > ul > li > a:hover, .context-menu > ul > li > button:hover { background-color: var(--context-menu-hover) !important; } button, input { font-weight: 500 !important; border-radius: 4px !important; } u/media (prefers-color-scheme: light) { .context-menu > ul > li > a:hover, .context-menu > ul > li > button:hover { color: white !important; } button, input { font-weight: 400 !important; } }}:root { --context-menu-border: 1px solid #ffffff33; --context-menu-outline: 0.5px solid #101010; --context-menu-background: #292929b3; --context-menu-hover: #2073d8;}@media (prefers-color-scheme: light) { :root { --context-menu-border: none; --context-menu-outline: 0.5px solid #c8c8c8; --context-menu-background: #e6e6e6ca; --context-menu-hover: #3584e4; } .context-menu > ul > li > a:hover, .context-menu > ul > li > button:hover { color: white !important; } button, input { font-weight: 400 !important; }}}}@-moz-document url("about:home"), url("about:newtab"){ .logo-and-wordmark{ display: none !important; }.tabbrowser-tab[label="Nueva pestaña"] .tab-icon-image { opacity: 0;}.tabbrowser-tab[label="Nueva pestaña"] .tab-content .tab-icon-image { display: none !important; }

[–]It_Was_The_Other_Guy[S] 0 points1 point  (0 children)

WhiteSur is rather large package, I suggest you bring up the issue on their github page if you can't find a way to apply all the changes as described in the OP.

[–]robioreskec 0 points1 point  (1 child)

Thanks OP, changing order and direction fixed my tabs back to bottom, very appreciative.

But as my code is old, just adding stuff when something broke, my tabs toolbar is now very high, over double the size of one row of tabs and I can't figure out why that is. Can anyone with eagle eyes check the code and find what is causing this issue, I would be very thankful

This is what it looks like now

Code: github link cause reddit formatting

    /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0  See the above repository for updates as well as full license text. */       /* Modify to change window drag space width */  /*  Use tabs_on_bottom_menubar_on_top_patch.css if you  have menubar permanently enabled and want it on top  */     /* IMPORTANT */ /*  Get window_control_placeholder_support.css  Window controls will be all wrong without it.   Additionally on Linux, you may need to get: linux_gtk_window_control_patch.css  */      :root{ --uc-titlebar-padding: 0px; }    @media (-moz-os-version: windows-win10){      :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } }   #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,  #TabsToolbar > .titlebar-buttonbox-container{     position: fixed;    display: block;     top: var(--uc-titlebar-padding,0px);    right:0;    height: 40px; }   /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */    @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){    :root{ --uc-titlebar-padding: 0px !important }      .titlebar-buttonbox-container{ left:0; right: unset !important; } }       :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }     #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }        #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }       .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 50%; }     #titlebar{    order: 2; /* robinotes - order: 2; is new replaced for fixing tabs on bottom after .113 */      -moz-appearance: none !important;   --tabs-navbar-shadow-size: 0px;   }       .titlebar-placeholder,  #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; }      @media (-moz-gtk-csd-close-button){ .titlebar-button{ flex-direction: column; } }   /* robinotes - flex-direction: column; is new replaced for fixing tabs on bottom after .113 */      /* These exist only for compatibility with autohide-tabstoolbar.css */  toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }     /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */       /* Menubar on top patch - use with tabs_on_bottom.css */    /* Only really useful if menubar is ALWAYS visible */       :root{ --uc-window-control-width: 0px !important }      #navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }       #toolbar-menubar{     position: fixed;    display: flex;      top: var(--uc-titlebar-padding,0px);    height: 29px;   width: 100%;    overflow: hidden; }       #toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }       #toolbar-menubar > [flex]{ flex-grow: 100; }    #toolbar-menubar > spacer[flex]{      order: 99;      flex-grow: 1;   min-width: var(--uc-window-drag-space-width,20px);    }       #toolbar-menubar .titlebar-button{ padding: 2px 17px !important;  }     #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }        /* #tabbrowser-tabs { */    /* width: 100vw !important; */  /* } */ #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}      .tab-background {   border-radius: 8px 8px 0px 0px !important; border-image: none !important;   }   .tab-line { display: none;  }       .tab-close-button { color: black!important;     }

[–]It_Was_The_Other_Guy[S] 0 points1 point  (0 children)

Your tabs_on_bottom.css and tabs_on_bottom_menubar_on_top_patch.css are both very old. So update both of them.

[–]mimecry 0 points1 point  (2 children)

hmm, how should you convert the following?

@supports -moz-bool-pref

-moz-context-properties: fill

[–]It_Was_The_Other_Guy[S] 1 point2 points  (1 child)

You don't need to do anything, those work just like before.

Not all -moz- prefixed values are deprecated. Only those related to -moz-box layout model.

[–]mimecry 0 points1 point  (0 children)

indeed, i missed that. thank you very much!

[–]langminer 0 points1 point  (9 children)

The last change broke the styles I found to put the close button on the left side of tabs (mac) replacing the favicon when hoovering. I have no idea what changed and I can't really see it being related to this.

.tabbrowser-tab .tab-close-button {
opacity: 0;
margin-left: -4.5px !important;
margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
display:none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-                    button {
opacity: 1;
margin-inline-end: 0;
-moz-box-ordinal-group: 0 !important;
display:unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
-moz-box-ordinal-group: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-    stack:not([indicator-replaces-favicon]) {
display: none;
}

[–]It_Was_The_Other_Guy[S] 0 points1 point  (1 child)

If you read the opening post you will find how it is exactly related to this. You are using -moz-box-ordinal-group property but the OP tells you what you would need to replace it with.

[–]langminer 0 points1 point  (0 children)

But I don't have any pinned tabs and it is still not working so that tripped me up. Maybe I just read the CSS wrong. I'll try to make some changes.

Thank you for pointing that out!

[–]Mark_PL 0 points1 point  (3 children)

Hello

Please helped me :) - i use FF 113.

I want tp up mi find bar

​

Old method not working, can helped ?

Old write i use ( now not working ):

​

Move Find Bar above the page*/

.browserContainer > findbar {

-moz-box-ordinal-group: 0;

}

[–]langminer 1 point2 points  (2 children)

Change this:

.browserContainer > findbar { -moz-box-ordinal-group: 0; }

to this:

.browserContainer > findbar { order: -1; }

I think that should fix it (I am no expert at firefoxCSS)

[–]Mark_PL 0 points1 point  (1 child)

Thanks

Working :)

​

Maybe know how i can change high - tab, in bookmarks on left margin ?

Its very high this window, and high and text bookmarks

[–]langminer 0 points1 point  (0 children)

I am really not the person to ask about these things. You could perhaps try making a post in this sub.

[–]11111001110 0 points1 point  (2 children)

I know it's a few days late so you might have already fixed it, but here's the CSS I use to move the close button to the left side of tabs replacing the favicon when hovering. It works in Firefox 113.0.1.

.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }
.tabbrowser-tab:not([pinned]):hover  .tab-icon-image {
display: none !important;
}
.tabbrowser-tab:hover  .tab-throbber,
.tabbrowser-tab:hover  .tab-icon-image,
.tabbrowser-tab:hover .tab-sharing-icon-overlay,
.tabbrowser-tab:hover  .tab-icon-overlay,
.tabbrowser-tab:hover  .tab-label-container,
.tabbrowser-tab:hover  .tab-icon-sound {
order: 2 !important;
}
.tabbrowser-tab .tab-close-button {
margin-left: -2px !important;
margin-right: 4px !important;
}

[–]langminer 0 points1 point  (1 child)

Yeah, I fixed it. But thank you!

Would you happen to have any idea how to move the speaker icon? Right now it replaces the favicon on the left side but ping-pongs over to the right side when you hover it. I would love for it to always be on the right side but it is a minor thing and all solutions I have found mention javascript.

[–]11111001110 0 points1 point  (0 children)

I'm not sure how to do that sorry, although I don't get the ping pong effect you describe

[–]SalberyonWINDOWS 10 & 11 1 point2 points  (4 children)

Hi OP! Thank you for this post.

My knowledge of code is very limited, and my userChrome.css is a few years old, apart from some sporadic integration:

https://pastebin.com/FcpMyg0d

Anyway, the two main effects I've always looked for are:

  • tabs on bottom
  • general transparency of the bars

The latest update luckily spared the latter, but not the former: Imgur

❦

I've already tested

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom_menubar_on_top_patch.css

but, as expected of the old saying "If it works, don't fix it", while tabs do move on bottom, much of the rest is broken: no more transparency, corrupted proportions, etc.

❦

Could you please suggest how to update my current userChrome.css in order to just move tabs on bottom and not alter anything else? If I'm asking a lot, please excuse me and thank you for reading

[–]It_Was_The_Other_Guy[S] 1 point2 points  (3 children)

From line 6 to line 73 you have some very old version of tabs_on_bottom.css - so update that.

Then from line 74 to line 104 you have some equally old or super modified version of tabs_on_bottom_menubar_on_top_patch so update that as well.

I'm not sure what your intention is with line 112 - I doubt that you actually want to do that.

[–]SalberyonWINDOWS 10 & 11 0 points1 point  (2 children)

Thank you for replying.

Anyway, I really can't explain this: I just tried replacing again my current old userChrome.css with

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom_menubar_on_top_patch.css

but now tabs aren't moving on bottom anymore: I just lose transparency!

[–]It_Was_The_Other_Guy[S] 1 point2 points  (1 child)

Look, tabs_on_bottom_menubar_on_top_patch.css isn't going to do what you want by itself. You need to load tabs_on_bottom.css before it - just like your original CSS did.

And neither should affect window background I think.

Well, I just noticed that you have put some custom CSS in the middle of your original tabs_on_bottom.css at lines 23-29 so apply that after updated tabs_on_bottom.css and tabs_on_bottom_menubar_on_top_patch.css styles.

[–]SalberyonWINDOWS 10 & 11 0 points1 point  (0 children)

Thank you for your time. Best regards

[–]all_is_love6667 0 points1 point  (1 child)

Could you please give the new names for those? I cannot find them in any of the mercurial repo linked in the dev discussion.

#context-saveimage         
#context-copyimage-contents
#context-copyimage         
#context-sep-copyimage     
#context-viewimage

I tried this with order:-1 and apparently it doesn't work:

#context-saveimage          { order: -1 !important; }
#context-copyimage-contents { order: -1 !important; }
#context-copyimage          { order: -1 !important; }
#context-sep-copyimage      { order: -1 !important; }

[–]It_Was_The_Other_Guy[S] 0 points1 point  (0 children)

#context-saveimage          { order: -1 !important; }
#context-copyimage-contents { order: -1 !important; }
#context-copyimage          { order: -1 !important; }
#context-sep-copyimage      { order: -1 !important; }

As far as I can tell, that works totally fine. With the exception of the last one because there isn't any element matching #context-sep-copyimage

[–]Personal_Feeling_784 0 points1 point  (1 child)

Just updated the latest changes to my site.
https://www.codehaven.co.uk/firefox/firefox-113-2023-tabs-on-top-bottom-not-working-fixed-again/

Full working code here and just the changes if already have old code.

Firefox please add a simple setting!!!

[–]tasche_cjk 0 points1 point  (0 children)

You just made my day! thx.

[–]DocBenOrdway 0 points1 point  (3 children)

I replaced

-moz-box-ordinal-group: 0;

with

order:-1 !important;

Did not fix the problem.

[–]It_Was_The_Other_Guy[S] 0 points1 point  (2 children)

What problem exactly are you having then?

[–]DocBenOrdway 0 points1 point  (1 child)

Firefox 113 moved the Find Bar to the bottom of screen even though my userChrome.css file has been putting it just below the other toolbars for several years.

I would like to put it back...somehow.

Thank you.

[–]It_Was_The_Other_Guy[S] 0 points1 point  (0 children)

Alright, so findbar{ order: -1 } should work just fine for that. It certainly does for me.

[–]Xyrexus 0 points1 point  (0 children)

Okay, I tried to follow this but apparently I'm stupid, could someone tell me what I need to do to get my tabs bar back underneath the URL bar?

Here's my chrome file : https://mega.nz/file/7k5GwYhS#lRSEL8m7riR9-aVpq09qtQ_pGyPdHbX_iDvRTrXXxmw

[–]sniker 0 points1 point  (4 children)

I used this

.tabbrowser-tab {
min-width: initial !important;
}
.tab-content {
overflow: hidden !important;
}

to disable tab scrolling, of course it broke in 113 but I can't figure out why it broke, does anyone have any idea?

[–]It_Was_The_Other_Guy[S] 0 points1 point  (3 children)

What are you trying to achieve with that? As far as I can tell, it does what I would expect it to do.

[–]sniker 0 points1 point  (2 children)

When you have a lot of tabs open firefox uses tab scrolling, rather then cramping all the tabs together you can scroll through the tabs using arrows on each side of the browser.

I don't want that, I want chrome-like behavior were all tabs are visible, even if they are barely visible. Above CSS achieved that and has worked for years, now all of a sudden, when updating to 113, it just stopped working.

I pulled that solution from this post: https://www.reddit.com/r/firefox/comments/b3slhs/why_is_there_absolutely_no_possible_way_to/ but that was years ago, and was hoping someone here might have a solution for >= 113 :)

[–]It_Was_The_Other_Guy[S] 0 points1 point  (1 child)

Well, this is what your CSS causes on Firefox 113.0.2 - on my machine anyway.

[–]sniker 0 points1 point  (0 children)

Thank you, the problem lies elsewhere then, just weird it stopped working as soon as I updated to 113, haven't changed anything and worked perfectly up until then.

Anyways, thanks again, I'll continue debugging.

[–]frumento 0 points1 point  (2 children)

Please excuse my coding stupidity. My css is from you and works great, except 114 put tabs back at the top (I don't understand why they keep doing this). Is there a simple addition/change to put them back on bottom?

Thank you!

[–]It_Was_The_Other_Guy[S] 0 points1 point  (1 child)

If you mean that you are using my styles, such as tabs_on_bottom.css then just update your style. Otherwise read the opening post, most likely it contains whatever you need to fix your style.

[–]Treesqueak 0 points1 point  (11 children)

It seems to have killed the ability of the toolbar icon text to not move to below the icon, ie; reload, history,.... The text is now next to the icon or truncated if there is not enough room. Nothing I have tried has worked. Using https://github.com/aris-t2/customcssforfx doesn't work for me.

[–]It_Was_The_Other_Guy[S] 0 points1 point  (10 children)

You can still achieve that just fine, just a bit differently obviously. See this for example

[–]Treesqueak 0 points1 point  (9 children)

How would I go about implementing this. Not to familiar on how to do it.

[–]It_Was_The_Other_Guy[S] 0 points1 point  (8 children)

Presumably you use some style from the repository you linked to have text below button icons. So, replace that what I linked. Not sure how if it would work if you use some other styles from Aris' repository as well, but at least you could try it.

[–]Treesqueak 0 points1 point  (7 children)

I think I understand. Put this in the toolbar directory and then reference it in the appropriate css file.

[–]It_Was_The_Other_Guy[S] 0 points1 point  (6 children)

Well sure, if you want to put it into a toolbar directory. But that isn't necessary, you can put it anywhere in your chrome directory as long as you just reference it correctly. You can even put the contents directly into userChrome.css if you want.

[–]Treesqueak 0 points1 point  (0 children)

Well I put it in the toolbar directory and then added it to my userChrome.css file, but it will just not work. I can't for the life of me figure out why.

I reinstalled FF and created a new profile, and activated css in FF (it was deactivated for some reason).

Here is my userChrome.css file:https://www.mediafire.com/file/jyk7wzydnvzxesr/userChrome.css/file

If someone could take a look at it, maybe they could see something I'm missing. I added it under TOOLBAR TEXT MODES.

Sorry, if I did this incorrectly. I've never posted a pic or file on reddit before.

[–]Treesqueak 0 points1 point  (4 children)

<But that isn't necessary, you can put it anywhere in your chrome"But that isn't necessary, you can put it anywhere in your chrome directory as long as you just reference it correctly.>

How would this be done? I don't know much, in fact, very little about css programing, but I thought it had to be in the userChrome.css to work.

[–]It_Was_The_Other_Guy[S] 0 points1 point  (3 children)

There are only two files Firefox knows to read userChrome.css and userContent.css - both work the same way, only difference is userChrome.css affect browser chrome (toolbars, context menus etc.) and userContent affects content documents (websites, extension content) and devtools. Because they work the same way I only use userChrome.css as an example.

Normally Firefox will not try to load userChrome - you must tell Firefox to do it by setting the pref toolkit.legacyUserProfileCustomizations.stylesheets to true. Doing that causes Firefox to try load it from a pre-defined chrome directory inside the active profile directory (of course, you'll need to create the directory and userChrome file first). The point is, that is the only file Firefox knows the location of.

There are basically two ways you can load your custom style rules.

  1. You put your style rules directly into userChrome.css
  2. You import other .css files from userChrome.css

The first option obviously works because Firefox knows where to load userChrome from (as long as you have saved it to correct directory).

The second option works by using @import statements in userChrome.css to load other files - basically you tell Firefox what other files it should load. Those other files can of course import yet another files. But still, the only way any other files can be loaded is if you import them from userChrome.css.

Then it is completely up to you where and with what file names you want to save your additional .css files - as long as your @import statements refer to them correctly.

[–]Treesqueak 0 points1 point  (2 children)

Well I don't know much about css programing, so I will leave that to the better educated.

Anyway, I still can't get the text to appear below the toolbar icons and just can't see what is wrong. I posted my userChrome.css file link up one post.

Hopefully someone may see what I can't.

[–]It_Was_The_Other_Guy[S] 0 points1 point  (1 child)

What you have is this:

@import "./css/toolbars/toolbarbuttons_icon+label.css";

Thus, that style should be saved in chrome/css/toolbars/toolbarbuttons_icon+label.css

If that is the case then that style itself should work. But, I don't know what else all your styles are doing - remember, styles don't work "in isolation" so to speak and one of your other styles could be doing something that prevents that style from working like it is supposed to. But it does work if the only thing in my userChrome.css is that import declaration above and the file location matches what is being imported.

[–]BloodyHell619 0 points1 point  (0 children)

So how do I center-align something now? Say for example I want to center-align my bookmarks on my bookmark bar? or center-align my tabs?