PersonalToolbar below Menubar

[Bockeman]

I've been using tabs_on_bottom.css ever since Firefox messed up the order of the bars at the top of the browser window. That has been working great until a few days ago when FF113 got released. I'd accept an update to tabs_on_bottom.css that works with FF113, but that is not really what I am after.

What I really want is a logical order for all the bars at the top, whether that is correct by default or there is a custom way of adjusting, and whether or not specific bars are hidden, auto enabled, or permenantly visible.

For me, this logical order is to have the most fixed at the top, descending to the most frequently changed, and finally below all the bars, the page content which could be dynamically changing. What I am specifically after is the PersonalToolbar (aka bookmark toolbar) immediately below the menubar, because, in my mind, the bookmarks are like an extension to the menubar, they are shortcuts to achieve in one click what could be acheived by several clicks/drags via the menubar. I cannot understand why tabs or urlbar are above the bookmarks becuse the former are frequently changing, yet the bookmarks remain stable/constant as the user selects different tabs. I like to think of tabs as would be in the physical world as protrusions from a drawer of folders or letter indents in a dictionary (admittedly both these metaphors now consigned to history).

My logical order, by example is:

1. Title Bar
2. Menu Bar
3. Bookmark Bar
4. Any other personal or custom bar (this and all above remain static as different tabs are selected)
5. Tab bar
6. URL bar (because that changes according to tab selection) [along with back, forward reload, zoom etc.]
7. page content

Would you be able to create a .css that achieves this? [hopefully quite quickly] And more interestingly, what approach would you suggest to get FireFox to adopt a more consistent approach to their window dressings? [expecting to take a long time]

[MrOtherGuy]

Just use tabs_on_bottom.css with tabs_on_bottom_menubar_on_top_patch.css and then add this snippet for your personal use:

#PersonalToolbar{ order: -1 }
#titlebar{ order: 0 }

And more interestingly, what approach would you suggest to get FireFox to adopt a more consistent approach to their window dressings?

What do you mean by that?

[Bockeman]

Thanks a lot @MrOtherGuy ! Unfortunately, your suggestion:

  @import url(chrome/tabs_on_bottom_230311.css);
  @import url(chrome/tabs_on_bottom_menubar_on_top_patch_230515.css);
  #PersonalToolbar{ order: -1 }
  #titlebar{ order: 0 }

Results in:

1. (I have no titlebar)
2. bookmarks toolbar
3. menubar
4. tab toolbar
5. url bar

But what I want is

1. menubar
2. bookmarks toolbar
3. tab toolbar
4. url bar

I've tried a few variations with the order value, but without success.

[Bockeman]

What do you mean by that? From my perspective the default ordering of bars by FF is inconsistent and not compatible with concept of tabs. I was wondering how you would approach FireFox (from a technical perspective, as opposed to my user perspective) in order to get them to adopt a more consistent and logical ordering of the various bars. (but I'm now not sure I've presented by case well enough even to you)

[MrOtherGuy]

The result I'm seeing is this:

Or this if I disable titlebar:

I'm not sure why you are seeing something different.

As for the other thing I'm not really sure what you are after. I don't think there's really anything technical about it, other than the fact that supporting various toolbar orderings gets really complicated really fast. I can kind of see what you mean by "logical order" (at least I think so), but there are some flaws with it.

Essentially, you just want a setup where bookmarks toolbar is moved above tabs. (you don't necessarily need any CSS for that though, you could instead just use customize mode and move "bookmarks toolbar items" into menubar - not quite the same, but pretty close). But most people don't want menubar to be visible (nor titlebar for that matter, but I don't count that as being a toolbar). With normal toolbar order the tabs toolbar is the top-most one - which is really important for usability because then selecting tabs is easier since tabs have essentially infinite height, although this assumes that window is maximized and that there aren't other monitors above the one where Firefox window is, but that's the majority of users so it's fine to assume that. Also, it would be pretty weird to have bookmarks toolbar at top, remember that toolbar may be set to be enabled, disabled or be shown only on new tabs. If it is above other toolbars then it will cause a pretty annoying shift in the toolbars below it when you open new tabs. Besides, users would probably just find it plain weird if was at top (not that I have anything to back this up, it's just my intuition based on the fact that no other browser does that.)

That isn't to say that you are wrong. If you prefer particular toolbar order then just do that and start browsing. I have very little interest in telling anybody what kind of layout they "should" prefer - this should be evident with the multitude of styles this repository has, most of them are something I would personally never use - but apparently some folks like them.

[Bockeman]

The snaps you attached demonstrate that you can get exactly what I want:

1. menubar (my choice) or titlebar
2. bookmarks toolbar
3. tab toolbar
4. url bar

What I get is: Which is really wierd as the drag/move window handle is below the top, as are the iconize,maximise and close buttons. Can you suggest something in my environment that be different for me, and which I could adjust to get what I want inside FF?

I had previously tried simply customising the toolbar, but I could not get it to sit on a separate horizontal space between the menubar. I get this at the customise step: which gives me this, where the tabs are essentially lost on the right and not even accessible:

It's interesting to hear about some of the complications. I also appreciate and support, as you do, the concept that any user preference is valid (neither right nor wrong). Even though my argument is that there is a logical and consistent ordering of bars (though possibily dependent on the meaning/concept/definition of what a tab is), and I don't understand why FF is not like this (though prior to circa FF75, it used to be), I'll have to accept that what I am after appears like a user preference.

However, I am still unable to achieve what I want (i.e. either of the two snaps you included above). I'd even accept a compromise with the old tabs_on_bottom.css. But that stopped working for me when FF113 got released.

Any suggestions?

[MrOtherGuy]

I was thinking about this and if that is the order of toolbars you want to achieve then you don't actually need tabs_on_bottom.css at all. You would only use tabs_on_bottom_menubar_on_top_patch.css with the one simple rule earlier:

#PersonalToolbar{ order: -1 }

That still won't explain why it doesn't seem to be working for you - but at least it would rule out that something in tabs_on_bottom.css is messing things up.

In your second image it looks like you moved "bookmarks toolbar items" to tabs toolbar. Try moving them to menubar instead.

[Bockeman]

Thank you.

  @import url(chrome/tabs_on_bottom_menubar_on_top_patch_230515.css);
  #PersonalToolbar{ order: -1 }

Does not fix things for me. However

  @import url(chrome/tabs_on_bottom_menubar_on_top_patch_230515.css);
  #PersonalToolbar{ order: -1 }
  #TabsToolbar{ order: 0 }

does give the bar ordering that I requested.

I remembered from Win10 installation that I had reduced the height of all title bars using:

  Winaero Tweaker | Advanced Appearance Settings
    Window Border Width 3   was 1
    Window Border Pad   1   was 4
    Window Title Bars   10  was 22
      Font Segoe UI 8   was 9

and just wondered if that might be the key difference in my environment. Of course, that Windows tweak only affects regular windows with a title bar, unlike FF (and others) where the title bar is disabled.

Furthmore, I have (by trial and error -- having near zero knowledge of css) reduced the userChrome.css to:

#navigator-toolbox{ padding-top: 20px}
#toolbar-menubar{ position: fixed; top: 0px; width: 100% }
#PersonalToolbar{ order: -1 }
#TabsToolbar{ order: 0 }

Perhaps you might suggest a more robust revision that would be more generally applicable to other users (and perhaps an explanation for the order: values especially -1).

[Bockeman]

In your second image it looks like you moved "bookmarks toolbar items" to tabs toolbar. Try moving them to menubar instead. I tried that, but it has some undesirable effects:

1. I've lost the Windows space-drag bar
2. I've much less horizontal space so several book marks now appear in an overflow

Nonetheless, it is a simple step that other users might prefer.

[MrOtherGuy]

@import url(chrome/tabs_on_bottom_menubar_on_top_patch_230515.css);

PersonalToolbar{ order: -1 }

TabsToolbar{ order: 0 }

Honestly that doesn't make any sense to me. It's as if #TabsToolbar and #toolbar-menubar are not inside #titlebar element on your system. Because if they are then #TabsToolbar{ order: 0 } doesn't have any effect. But how? Well that's beyond me. It would simultaneously explain why tabs_on_bottom.css didn't work if that is indeed the case.

I really don't know what your environment is doing but it sounds it's doing something quite weird - it even more odd if that is indeed doing something to Firefox's internal DOM to remove the #titlebar element (this isn't the same thing as native titlebar by the way).

[Bockeman]

You have successfully pointed the way to get the PersonalToolbar (aka bookmarks bar) just below the Menubar, which is what I originally requested: I wonder if there is a more general way, applicable to many different users, where the order of each of the bars can be selected according to user preference. Specifically, now that I have seen this, and looking at posts elsewhere, there is an argument for having the URL bar above the tabs bar. This is more an aesthetic preference because darker tab bar better delineates the bars from the page contents.

Is there a simple addition to the lines that already work for me to switch the order of TabsToolbar and URLbar? _(Essentially that reverts to the original aim of "tabs_onbottom", but which does not work for me [reason unknown]).

[MrOtherGuy]

I think you missed my main point. That is your setup is abnormal - based on what you have described it sounds to me that the internal structure (DOM) of your Firefox is different than it normally. CSS doesn't change the structure, it just changes the layout - or how that structure is drawn. But if the structure is different then you cannot assume anything about how some piece of CSS is going to affect it. As an example, if the window structure is different then I would not count any of the styles in this repository to do what they are supposed to do. Its as if you were using some completely different program.

I'm not 100% about this of course, you can only debug it yourself using browser toolbox. But IF the window structure is in fact different than normal then really don't see any point even trying to help you. Not because I don't want to, but because I simply have no idea what I'm working with.

[Bockeman]

Understood. Thanks for your insight, help and advice.

Just to double-check, could the structure have changed in a minor version of FF? For instance, I know there was a significant change (sorry, I don't know details, just recalling what I've seen elsewhere) between 113.0.0 and 113.0.1. Which version are you on?

[MrOtherGuy]

Could the structure have changed in a minor version of FF?

Unlikely, the main structure, at least regarding the whole toolbox area has stayed pretty much the same for couple of years I think and far longer to just the #titlebar element. It's the same in current release 113.0.1 and in Nightly 115. I'm pretty sure the structure is a bit different on MacOS, but you said you were using Windows10 so that isn't a problem.

[Bockeman]

Ok, I went round the loop again: What used to work, no longer works:

@import url(chrome/tabs_on_bottom_menubar_on_top_patch_230515.css);
#PersonalToolbar{ order: -1 }
#TabsToolbar{ order: 0 }

(with and without the #TabsToolbar{ order: 0 } )

But as you pointed out, the #TabsToolbar{ order: 0 } should be redundant, so I tried:

#navigator-toolbox{ padding-top: 20px}
#toolbar-menubar{ position: fixed; top: 0px; width: 100% }
#PersonalToolbar{ order: -1 }

and this works.

This puts me (and no doubt you as well) in a real quandry. What on earth can happen that makes a few lines of .css work earlier in the day, and not now? [I keep meticulous notes, and double checked what I did. I'm fairly certain what I have reported is accurate, but even now I am beginning to doubt myself!]

Things that might have had an impact between earlier in the day and now:

1. I've closed and restarted FF multiple times.
2. I enabled the browser toolbox, as you suggested, but turned it all back off to eliminate. [gripe: the instructions for browser toolbox related to an earlier version of FF. There are no "Developer Tools Settings", instead I guessed "More Tools" then "Web Developer Tools".]

I now think this is definitely going above and beyond any help that I could reasonably expect from you, so I am thinking of giving up and subsequently marking this as solved. (But still willing to try things out if you think would help the wider community)

[MrOtherGuy]

navigator-toolbox{ padding-top: 20px}

toolbar-menubar{ position: fixed; top: 0px; width: 100% }

This sounds correct. It's basically the core of what tabs_on_bottom_menubar_on_top_patch.css does.

No idea what was going on earlier, the only way to tell really is to use browser toolbox and dig around if that happens again.

As for the previous question - if your Firefox UI is now behaving as expected:

Is there a simple addition to the lines that already work for me to switch the order of TabsToolbar and URLbar?

Certainly, this would be achieved by this:

@import url(chrome/tabs_on_bottom.css);
@import url(chrome/tabs_on_bottom_menubar_on_top_patch.css);
#PersonalToolbar{ order: -1 }

Then your toolbar order should be:

1. menubar
2. bookmarks toolbar
3. nav-bar
4. tabs toolbar

[Bockeman]

Just on a hunch, I tried this:

@import url(tabs_on_bottom_230311.css);
@import url(tabs_on_bottom_menubar_on_top_patch_230515.css);
#PersonalToolbar{ order: -1 }

and it worked! Notice I dropped the chrome/ path prefix.

Now, if you could suggest why sometimes the chrome/ path prefix does or does have any effect, then I am hopeful of my sanity being restored :-)

[MrOtherGuy]

Umm. It should always make a difference. It's the relative path where Firefox looks for that css file.

Suppose you have a profile folder like this:

<profile_folder>
  |___chrome
  |   |___userChrome.css
  |   |___chrome
  |   |   |___tabs_on_bottom.css
  |   |___tabs_on_bottom_menubar_on_top_patch.css
  |___<bunch of other files>

Now suppose you have this in your userChrome.css:

@import url(chrome/tabs_on_bottom.css);
@import url(chrome/tabs_on_bottom_menubar_on_top_patch.css);

Then, Firefox will find that tabs_on_bottom.css. But it does not find that tabs_on_bottom_menubar_on_top_patch.css because the file is in the same directory where userChrome.css itself is, but you have told Firefox to look for it in "chrome" sub-directory.

[Bockeman]

Your argument is valid, were I to have ever had another chrome directory underneath the chrome directory where userChrome.css lives.

But I've never had an extra chrome directory, and yet sometimes, specifying the chrome/ in the path used to work (to me it's as if somehow, sometimes, is in the search path).