X
點擊此處開啟此網站的行動版。

技術支援討論區

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

已張貼

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.

由 e-pirate 於 修改

引用

額外的系統細節

已安裝的外掛程式

  • Shockwave Flash 32.0 r0

應用程式

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

更多資訊

cor-el
  • Top 10 Contributor
  • Moderator
17540 個解決方法 158604 個答案

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.
這篇文章有幫助嗎?
引用

提出問題者

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.
這篇文章有幫助嗎?
引用
cor-el
  • Top 10 Contributor
  • Moderator
17540 個解決方法 158604 個答案

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.
這篇文章有幫助嗎?
引用

提出問題者

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?

由 e-pirate 於 修改

這篇文章有幫助嗎?
引用
cor-el
  • Top 10 Contributor
  • Moderator
17540 個解決方法 158604 個答案

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/
這篇文章有幫助嗎?
引用
問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題