Addon menus/details are hidden when placing tabs and address bar below webpage

[willcl-ark]

I am using the following to move tabs and address bar to the bottom:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*
tabs to bottom
source: https://github.com/Arty2/userstyles/blob/master/tabs_to_bottom.userchrome.css
*/

/* bring the browser window to the top */
#browser {
    -moz-box-ordinal-group: 0 !important;
}
/*Address Bar next */
#nav-bar{
    -moz-box-ordinal-group: 1;
}

/*Tabs at the bottom*/
#titlebar{
    -moz-box-ordinal-group: 2;
}

:root[sizemode="normal"] #browser {
    padding-top: 8px;
}

/* hide tab toolbar when fullscreen */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen] {
    display: none;
}

/* hide titlebar buttons */
#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}

/* remove gaps in tab bar start and end */
.titlebar-spacer[type="pre-tabs"] {
    display: none !important;
}

.titlebar-spacer[type="post-tabs"] {
    width: 8px !important;
}

...which works great (thanks!). However when I click an addon icon in the address bar, e.g. uBlock, the popup window is displayed below (and behind) the address and tab bars.

I thought perhaps modifying https://github.com/Aris-t2/CustomCSSforFx/blob/master/fx60-90/css/aboutaddons/details_page_alternative_content_order.css might allow be to pop it "upwards" into the browser window, but could not get it working.

Any ideas appreciated :)

[Arty2]

This is most likely an older version, that has some minor differences. I am also using uBlock and don't have this issue. Unless you're trying to have the tabs appear below the address bar?

See the current version here: https://github.com/Arty2/userstyles/blob/master/tabs_to_bottom.userchrome.css

The one thing that still remains out of view is the auto-suggest drop-down on the address bar. I don’t particularly use this, hence unlike to troubleshoot that particular one.

[willcl-ark]

@Arty2 thanks for replying. I did indeed have my tabs below address bar, however using both my style and your linked (updated) style I still have addon popup boxes obscured due to populating downwards, like so:

Do you know what exactly those popup boxes are called? Perhaps I can have a look around at what setting are available for them if I knew what they were called :P

[gon555551]

I think this approach works to fix this. Full disclaimer, this includes a bunch of small differences from Arty2's original code, but just go and change it to your liking, should be reasonably readable (I hope)...

#tracking-protection-icon-container,
#page-action-buttons,
#firefox-view-button,
#alltabs-button,
#PanelUI-button,
#identity-box,
.titlebar-spacer {
    display: none !important;
}

#TabsToolbar {
    margin-left: 25vw !important;
}

#nav-bar {
    background: transparent !important;
    margin-right: 75vw !important;
    margin-top: -36px !important;
}

#urlbar-container {
    width: auto !important;
}

#urlbar {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

#urlbar[breakout-extend] {
    width: 75vw !important;
}

#navigator-toolbox {
    border: 0px !important;
}

*|*:root[sizemode="normal"] #navigator-toolbox {
    max-height: 100vh;
    overflow: visible;
    transition: none;
}

/* PUT THE BAR ON THE BOTTOM */

#browser {
    -moz-box-ordinal-group: 0 !important;
    order: 0 !important;
}

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

/* ON MAX */
*|*:root[sizemode="maximized"] #navigator-toolbox {
    border-top: 0.01vh solid transparent !important;
    overflow: visible; /* MAJOR FIX */
}

#urlbar[open]{
    flex-direction: column-reverse;
    display: flex !important;
    bottom: -2px !important;
    top: auto !important;
}

Bar on the bottom, one-line, extension pop-up menus (and all pop-up menus, for that matter) render upward. Hope it helps. @Arty2 @willcl-ark

[willcl-ark]

Oh wow, thanks. I'll try that. I did find out that FF had switched to flexbox, and had managed to get something working with this:

code

```css @-moz-document url(chrome://browser/content/browser.xhtml) { /* tabs on bottom of window */ /* requires that you set * toolkit.legacyUserProfileCustomizations.stylesheets = true * in about:config */ /* Now moved to flexbox: * https://groups.google.com/a/mozilla.org/g/firefox-dev/c/9sGpF1TNbLk/m/QpU3oTUuAgAJ */ #mainPopupSet ~ toolbox { order: 2; } #titlebar { order: 2; } #urlbar { top: unset !important; bottom: calc( (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 ) !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; } #urlbar-input-container { order: 2; } #urlbar > .urlbarView { order: 1; border-bottom: 1px solid #666; } #urlbar-results { display: flex; flex-direction: column-reverse; } /* need this to have the menu bar pop up from the bottom on Ubuntu! */ .panel-viewstack { max-height: unset !important; } .search-one-offs { display: none !important; } .tab-background { border-top: none !important; } #navigator-toolbox::after { border: none; } #TabsToolbar .tabbrowser-arrowscrollbox, #tabbrowser-tabs, .tab-stack { min-height: 28px !important; } .tabbrowser-tab { font-size: 80%; } .tab-content { padding: 0 5px; } .tab-close-button .toolbarbutton-icon { width: 12px !important; height: 12px !important; } toolbox[inFullscreen="true"] { display: none; } } /* START -- https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#full-auto-showhide-theme */ /* Sidebar min and max width removal */ #sidebar { max-width: none !important; min-width: 0px !important; } /* Hide splitter, when using Tree Style Tab. */ #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter { display: none !important; } /* Hide sidebar header, when using Tree Style Tab. */ #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { visibility: collapse; } /* END */ ```

But it appears to have just broken TODAY, so great timing with your comment!

When I use your version, the urlbar is joined with the tabbar, which I don't like as it takes up tab space. But in mine, after some FF update, menus are still rising up but the bookmarks, url and tabbar is at the top.

Is there a way to split the urlbar into it's own bar in yours?

[gon555551]

Oh nice! This issue got mentioned on Reddit when I shared my personal userChrome.css file so I just thought I'd give it a try, glad to be of use.

And yes, that is possible! Here:

*|*:root[sizemode="normal"] #navigator-toolbox {
    max-height: 100vh;
    overflow: visible;
    transition: none;
}

*|*:root[sizemode="maximized"] #navigator-toolbox {
    overflow: visible;
}

#browser {
    -moz-box-ordinal-group: 0 !important;
    order: 0 !important;
}

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

#urlbar[open]{
    flex-direction: column-reverse;
    display: flex !important;
    bottom: -2px !important;
    top: auto !important;
}

This just puts the bars on the bottom of the window. Hopefully that's what you wanted, give it a try and feel free to let me know!

[willcl-ark]

My guy! This was exactly as I wanted it, thanks! I really wish I understand all this stuff so I could change it myself, but even with GPT4 I was struggling with it.

Going to close this now as completed.