Browsers which allow the address bar to be placed above the tabs

SPB said:

Well it is only a small part of my userChrome tweaks.
In order to keep the Windows buttons in the upper right corner, some more changes are necessary.
I forgot to mention that in my first post. Let me redo it.

Thanks, that's interesting. But for me it would simply duplicate the X which is directly above it in the File, Edit... bar which I want to retain.

I'll have a play around with this and other suggestions this morning.

SPB said:

No, it will not duplicate the X because the file menu would be be below the address (URL) bar and the Windows buttons (minimize, restore, maximize, X) would be below the address (URL) bar as well.

Ah. I thought you had simply cropped out the file menu bar (with the Windows buttons) in your screen shot. The layout I'm after preserves it at the top of the window, as shown in the image I posted yesterday.

I added two screenshots to post #13 while you replied.
They show the windows buttons when my related changes as per post #11 are not being made.
If you want to keep the file menu at the top, then my 'sorting order' tweak will not work.
#toolbar-menubar is the identifier of the file menu ...

SPB said:

If you want to keep the file menu at the top, then my 'sorting order' tweak will not work.
#toolbar-menubar is the identifier of the file menu ...

Thanks. This is the layout I'm after:

OK, I see.
#titlebar is the container or box that contains both the file menu and the tab-bar (or tab-container).
And unfortunately

Code:

/*  (3) file menu and tabs  */
#titlebar {order: 3 !important;}

puts them both in the 3rd sorting order. They are treated as one bloc.
So the file menu and the tabs need to be taken care of individually ... to get your desired result.
(1) file menu (without the tabs)
(2) navigation area, URL bar, search bar ...
(3) tabs
...
(I may reply later in the evening, if I find a fix)

SPB said:

(I may reply later in the evening, if I find a fix)

I'd certainly appreciate that; thanks for looking into it.

The identifier of the tab bar is #TabsToolbar, but it won't 'cooperate' with my simple sorting code.

Just try the following code.
It is made by aris-t2, I think @Ghot probably uses this as his browser looks similar to what you would like to have.
Today is a public holiday in the USA, let's see what @Ghot advises.

Code:

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


:root {
  --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);
  --tab-min-height_tnot: 32px;
  --tab_below_navigation_toolbar_bottom_padding: calc( var(--tab-min-height_tnot) + 5px );
}

#TabsToolbar {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100vw;
  background-clip: padding-box;
  color: var(--toolbar-color);
  z-index: 2;
}

/* overrides other settings too */
#main-window:not(:-moz-lwtheme) #navigator-toolbox #TabsToolbar:not(:-moz-lwtheme){
  appearance: none;
  background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important;
}

#main-window:not([tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme){
  appearance: none !important;
}

#tabbrowser-tabs {
  width: 100%;
}

#navigator-toolbox {
  position: relative;
  padding-bottom: var(--tab_below_navigation_toolbar_bottom_padding);
}

#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #titlebar,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
  height: 26px;
}

/* prevent possible item overlapping with caption buttons */
#main-window[tabsintitlebar] #toolbar-menubar {
  padding-inline-end: 140px;
}

/* move caption buttons to windows top right position */
.titlebar-buttonbox-container {
  position: fixed;
  right: 0;
  visibility: visible;
  display: block;
}

#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none;
}

/* lw themes support */
#nav-bar {
  box-shadow: unset !important;
}

/* remove color overlay for lw-themes */
#main-window[style*='--lwt-header-image'] :is(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
  background: unset !important;
}

/* adjust background color */
#main-window:not([style*='--lwt-header-image']) #TabsToolbar:-moz-lwtheme {
  appearance: none !important;
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
}

/* Fixes for projects other settings */
/* remove application/hamburger button in titlebar and tab toolbars start padding */
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button {
  visibility: collapse;
}

/* override code inside appbutton in titlebar code */
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:is([sizemode="normal"],[sizemode="maximized"],[sizemode="fullscreen"]) #navigator-toolbox #TabsToolbar {
  padding-inline-start: 0px !important;
  margin-inline-start: 0px !important;
}

/* remove restored border between navigation toolbar and tabs toolbar */
#nav-bar:not(:-moz-lwtheme) {
  box-shadow: unset !important;
}

/* notification position */
#tab-notification-deck {
  position: absolute;
  display: block;
  bottom: calc( -2 * var(--tab_below_navigation_toolbar_bottom_padding) + 8px );
  width: 100vw;
}
/*
#TabsToolbar #tabbrowser-arrowscrollbox {
  margin-top: 1px !important;
  margin-bottom: -1px !important;
}
*/

/* Fx 105+ */
:root:not([privatebrowsingmode=temporary]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs,
:root[privatebrowsingmode=temporary] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) + #tabbrowser-tabs {
  border-inline-start: 0px solid color-mix(in srgb, currentColor 25%, transparent) !important;
}

:root:not([privatebrowsingmode=temporary]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button) + #tabbrowser-tabs:not([overflow="true"]) {
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}

/* Fx 106+ */					
#private-browsing-indicator-with-label {
  display: none !important;
}

This is what I get



1) file menu #toolbar-menubar
2) navigation menu #nav-bar
3) bookmarks #PersonalToolbar (can be toggled on/off with CTRL Shift B)
4) tabs #TabsToolbar

SPB said:

Just try the following code.

Thanks for that. As you might have seen @Ghot did point me to the thread with that code in it.

Forgive this very basic question but what exactly do I do with it? Should I save your code as a text file then place it in a new folder called userchrome.css? And then put that folder to another new folder called Chrome, which I must add to

C:\Users\xxxx\AppData\Local\Mozilla\Firefox\Profiles\ ?

If that's right, should I also add it to

C:\Users\xxxx\AppData\Roaming\Mozilla\Firefox\Profiles\ ?

Many thanks.