X
Tap here to go to the mobile version of the site.

Support Forum

Just another 'move tabs and address bar' to the bottom question.

Posted

Hi folks! I spent a significant amount of time trying to move tab and address bar to the bottom of the window including address suggestion popup involved stuff several years ago when Opera was deprecated and pulled out of Gentoo repository completely. My partly working recipe was:

   @namespace "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
   @-moz-document url("chrome://browser/content/browser.xul") {
       #PopupAutoCompleteRichResult {
           /* bindings.xml in the same folder as userChrome.css */
           -moz-binding: url("bindings.xml#urlbar-popup") !important;
       }
       #appMenu-popup {
           -moz-binding: url("bindings.xml#appmenu-popup") !important;
       }
       #navigator-toolbox {
           display: contents !important;
       }
       #nav-bar {
            -moz-box-ordinal-group: 2 !important;
       }
       #TabsToolbar {
            -moz-box-ordinal-group: 3 !important;
       }
   }

While this caused slight overlap of address suggestion window/popup over top of address bar, that was pretty annoying, but still acceptable. Recently, firefox-68.1.0 update rolled in to Gentoo stable repository. That update brought compilation against system libs and caused FF to start with an empty window. After pocking around and messing with plugins, I came to a conclusion, that this is my innocent tweaks that causes FF to start with no windows at all, so I was forced to disable this section and ended up with default layout with address and tab bar at the top of the FF window. Since I have KDE tabs at the top, this make a mess, and make it difficult to figure out whats going on.

Since I'm not really good at CSS things, can anybody give me a hand to do the fallowing:

1) move tab bar to the most bottom of the window;

2) move address bar just above tab bar;

3) make address suggestion window/popup roll UP just above address bar

4) keep main menu (activated by Alt) stay at top where it is by default.

Hi folks! I spent a significant amount of time trying to move tab and address bar to the bottom of the window including address suggestion popup involved stuff several years ago when Opera was deprecated and pulled out of Gentoo repository completely. My partly working recipe was: @namespace "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @-moz-document url("chrome://browser/content/browser.xul") { #PopupAutoCompleteRichResult { /* bindings.xml in the same folder as userChrome.css */ -moz-binding: url("bindings.xml#urlbar-popup") !important; } #appMenu-popup { -moz-binding: url("bindings.xml#appmenu-popup") !important; } #navigator-toolbox { display: contents !important; } #nav-bar { -moz-box-ordinal-group: 2 !important; } #TabsToolbar { -moz-box-ordinal-group: 3 !important; } } While this caused slight overlap of address suggestion window/popup over top of address bar, that was pretty annoying, but still acceptable. Recently, firefox-68.1.0 update rolled in to Gentoo stable repository. That update brought compilation against system libs and caused FF to start with an empty window. After pocking around and messing with plugins, I came to a conclusion, that this is my innocent tweaks that causes FF to start with no windows at all, so I was forced to disable this section and ended up with default layout with address and tab bar at the top of the FF window. Since I have KDE tabs at the top, this make a mess, and make it difficult to figure out whats going on. Since I'm not really good at CSS things, can anybody give me a hand to do the fallowing: 1) move tab bar to the most bottom of the window; 2) move address bar just above tab bar; 3) make address suggestion window/popup roll UP just above address bar 4) keep main menu (activated by Alt) stay at top where it is by default.

Modified by e-pirate

Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

More Information

cor-el
  • Top 10 Contributor
  • Moderator
17534 solutions 158559 answers

Note that display: contents !important; is not a valid property value, so result is undetermined.

Note that your code will be broken completely in Firefox 69 and later.

Note that display: contents !important; is not a valid property value, so result is undetermined. *https://developer.mozilla.org/en-US/docs/Web/CSS/display Note that your code will be broken completely in Firefox 69 and later.
Was this helpful to you?
Quote

Question owner

cor-el said

Note that display: contents !important; is not a valid property value, so result is undetermined. Note that your code will be broken completely in Firefox 69 and later.

This is the line, that causes the problem, actually. If I remove it, FF starts, but all bars return to the original top position. I believe there should be another way to do this.

''cor-el [[#answer-1256420|said]]'' <blockquote> Note that display: contents !important; is not a valid property value, so result is undetermined. *https://developer.mozilla.org/en-US/docs/Web/CSS/display Note that your code will be broken completely in Firefox 69 and later. </blockquote> This is the line, that causes the problem, actually. If I remove it, FF starts, but all bars return to the original top position. I believe there should be another way to do this.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17534 solutions 158559 answers

I had forgotten that the change is for Firefox 65 and later.

In Firefox 65 and later the Menu bar and the Tab bar have been moved to a separate #titlebar container and the Tab bar is no longer in the main #navigator-toolbox container. You need to position the Tab absolutely to get the Tab bar in the lower position. See this thread for updated userChrome.css code for Firefox 65+ to move the Tab bar to the bottom position.

Note that Firefox 69 and later will require browser.xhtml instead of browser.xul in @-moz-document.

I had forgotten that the change is for Firefox 65 and later. In Firefox 65 and later the Menu bar and the Tab bar have been moved to a separate #titlebar container and the Tab bar is no longer in the main #navigator-toolbox container. You need to position the Tab absolutely to get the Tab bar in the lower position. See this thread for updated userChrome.css code for Firefox 65+ to move the Tab bar to the bottom position. *[[/questions/1248277]] Reposition Tabs at bottom, directly above web page in Firefox 65.0? Note that Firefox 69 and later will require browser.xhtml instead of browser.xul in @-moz-document.
Was this helpful to you?
Quote

Question owner

I cut the last recipe to the fallowing:

 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 /* TABS: on bottom - Firefox 65 and later */
 #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
   -moz-box-ordinal-group: 10 !important;
 }
 #TabsToolbar {
   -moz-box-ordinal-group: 1000 !important;
   display: block !important;
   position: absolute !important;
   bottom: 0 !important;
 }
 :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
  #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
   bottom: var(--tab-min-height) !important; 
   padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */
 }
 #tabbrowser-tabs {
   width: 100vw !important;
 }
 :root:not([chromehidden*="toolbar"]) #navigator-toolbox {
   padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */
 }
 #tabbrowser-tabs,
 #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
 .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
   min-height: var(--tab-min-height) !important;
   max-height: var(--tab-min-height) !important;
 }
 #TabsToolbar {
   height: var(--tab-min-height) !important;
   margin-bottom: 1px !important;
   box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
   background-color: var(--toolbar-bgcolor) !important;
   color: var(--toolbar-color) !important;
 }
 /* Override vertical shifts when moving a tab */
 #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
   padding-bottom: unset !important;
 }
 #navigator-toolbox[movingtab] #tabbrowser-tabs {
   padding-bottom: unset !important;
   margin-bottom: unset !important;
 }
 #navigator-toolbox[movingtab] > #nav-bar {
   margin-top: unset !important;
 }

And got address bar above tab bar as I wanted, but both are still at the top of the window. What I'm missing to move them bottom?

I cut the last recipe to the fallowing: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS: on bottom - Firefox 65 and later */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) { -moz-box-ordinal-group: 10 !important; } #TabsToolbar { -moz-box-ordinal-group: 1000 !important; display: block !important; position: absolute !important; bottom: 0 !important; } :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-min-height) !important; padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */ } #tabbrowser-tabs { width: 100vw !important; } :root:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */ } #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* Override vertical shifts when moving a tab */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } And got address bar above tab bar as I wanted, but both are still at the top of the window. What I'm missing to move them bottom?

Modified by e-pirate

Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17534 solutions 158559 answers

If you want the Tab bar at the bottom of the Firefox window then you need a lot more code to get this done properly. You can search the Reddit website as this isn't easy and you can end of with all kind of artifacts like when you open that many tab that the List All Tabs button and scroll arrows appear and possible PB mode mask and not to mention the caption buttons if you hide Menu bar and Title bar).

If you want the Tab bar at the bottom of the Firefox window then you need a lot more code to get this done properly. You can search the Reddit website as this isn't easy and you can end of with all kind of artifacts like when you open that many tab that the List All Tabs button and scroll arrows appear and possible PB mode mask and not to mention the caption buttons if you hide Menu bar and Title bar). *https://www.reddit.com/r/FirefoxCSS/
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.