[Firefox 65+] 'tabs below' / 'tabs not on top' changes

[Jgr9]

Ok, so I'm here (for the first time) after my Tabs Below the Nav Bar and Bookmark Bar userChrome code has apparently been broken again by the most recent Nightly. 20181106

I've tried yours, and if I've implemented it correctly (I'm kind of a novice), it also doesn't seem to have an effect. I haven't used a css folder and @import before, so I created one in the folder along with my userChrome and put your extra css in it. I uncommented the line in your userChrome, and also just tried the line all by itself. Like the code I have, it doesn't seem to be working anymore on the new Nightly, unless I did something wrong or there is something else that I need to do.

65.0a1 (2018-11-06) - 20181106 - Windows 64 bit

Oh and I'm just realizing now you're the CTR guy... lol

[Aris-t2]

Remove this line https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx65.css#L103

[ArkadiuszMichalski]

Now it's ok, big thx.

[ArkadiuszMichalski]

@Aris-t2 Hello, I see next problem with @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css. Basically I try bring back flexible space to behave like on old Firefox versions. I uncheck "Title bar" in customization mode, so problem apply to #toolbar-menubar. I want put to this bar one icon on center, so put before and after that icon toolbarspring (from pallet). And after this I see bug when we go to customization mode, our toolbarspring don't have outline on menubar so sometimes it's hard to see them. Of course this toolbarspring has fixed size so I change it CSS from your JS code:

#toolbar-menubar toolbarspring {
 -moz-box-flex: 1 !important;
 min-width: 100% !important;
 width: unset !important;
 max-width: unset !important;
 }

But get once another problem, our icon goes below MenuBar, toolbarspring has strange size and brake possibility to click on other icon, etc. Without @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css or with @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css" we get this: Still not in 100% correct because I put only once flexible space between this 2 icon, and second icon don't goes to the end, but better than before? Is there any way to restore 100% correct behavior for flexible space only by using CSS? I want that toolbarspring will take all avalible space, but even if I set min-width to 100% then my icon land on center, not to the right (like you see in screen above)

Edit: about this right space I see some additional element: <spacer xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" flex="1" skipintoolbarset="true" ordinal="1000"/> I don't know where it came from and how it can be removed, from customizing I can't caught it. But it useful, I can set it width to fit min/max/close button by using CSS, so behaviour for toolbarspring is bring back, unless I don't use above problematic file.

[Aris-t2]

@ArkadiuszMichalski You can not get perfect width calculations, if the main item/box is using a "fixed" or "absolute" position rules, what "toolbar-menubar". does in this case.

You can try to tweak it a bit or create own rules (e.g. use different width, if placed two flex spaces side by side).:

#toolbar-menubar toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring] toolbarspring {
  height: 20px !important;
}
#toolbar-menubar toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring] {
  position: relative !important;
  top: -14px !important;
}
#toolbar-menubar toolbarspring + toolbarspring {
  -moz-box-flex: 1 !important;
  min-width: 84px !important;
  width: auto !important;
  max-width: 128px !important;
}

#toolbar-menubar toolbarspring {
  -moz-box-flex: 1 !important;
}

You can also try to adjust toolbar button position, using code like this:

#toolbar-menubar > toolbarbutton {
  margin-top: 4px !important;
}

To be honest I do not recommend using "tabs_below_navigation_toolbar_fx65_v2.css". It has too many side effects causing things not to work properly. Mozilla did a really great job destroying toolbar order in Fx65+.

[stepher1]

Wanted to stop by and say "Thanks!" for this. I've used your files on both Win 10 and Fedora 30 and it works great!! On Win 10 I'm using FF V60.x (esr) adn on Fedora FF is the latest (V66.x).

A side benefit I noticed is that it has cleaned up the function of ColorTabs a bit. Before, the color of the tabs would be the same color of the address bar/bookmarks, buttons, etc. background area. It works slightly better in that no longer happens. However, I get a 1st random color and then any additional tabs that I open are all the same second color.

NBD...but thanks for your efforts....

[Aris-t2]

However, I get a 1st random color and then any additional tabs that I open are all the same second color.

Does this not happen without custom CSS code?

[jra66]

Hi Aris,

I don't know whether this is related to "tabs below", but after updating from FX 67 to 68 beta I noticed a much thicker line below tab bar.

[Aris-t2]

@jra66 Add this to the bottom of your userChrome.css:

#TabsToolbar,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme, 
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme {
  border-bottom: 0 !important;
}

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(0px + var(--tab-min-height_tnot)) !important;
}

[jra66]

Great, now the thick line is gone, everything is like it was before updating to 68 beta.

Thanks a lot, Aris!

[rathord1912]

@Aris-t2

I have enabled tabs_below_main_content_fx65.css (best fitted for not messing up firefox button and menu bar background) and placed bookmarks and navigation bar to the bottom as well with

`#main-window,

navigator-toolbox {

-moz-box-direction: reverse;
padding-bottom: -4px !important;

}`

What is the easiest way to put the tabs bar on top of all 3 bars?

tabs bookmarks navigation

Can you assist?

[Aris-t2]

It does not work like this.

Try to only use this code without enabling tabs_below_main_content_fx65.css:

#main-window { 
-moz-box-direction: reverse;
}

[rathord1912]

Thx Aris. 1 step for and 2 backwards.

I can fix the menu bar and buttonbox position with the code of tabs_below_navigation_toolbar_fx65_v2.css

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
-moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
position: fixed !important;
width: 100vw !important;
-moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
position: fixed !important;
right: 0 !important;
visibility: visible !important;
display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
top: 0px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
top: 0px !important;
}

But I have no clue how to get a background for Firefox button and title bar, as well as how to switch positions of navigation and bookmarks bar.

PS: Menu bar is enabled and title bar disabled.

[rathord1912]

Okay found the solution.

#main-window[sizemode="normal"] #content-deck {
    margin-top: 24px !important;
}

#main-window[sizemode="maximized"] #content-deck {
    margin-top: 32px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 9px !important;
}

/* menubar postion in normal mode after moving to the top */
#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
    top: 3px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: 6px !important;
}

/* caption button position in normal mode after moving to the top */
#main-window[tabsintitlebar][sizemode="normal"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: 1px !important;
}

Thx again Aris for pointing in the right direction and thanks for this project as well as CTR.

[jsrfo]

Let me preface this with the following: I am completely new at anything to do with userChrome.css, and any sort of coding. I previously got tabs on the bottom, and large buttons on a now dead laptop which ran Version 65, and just downloaded Firefox Quantum 67 on this new one.

I tried to replicate the steps taken to put the tabs on the bottom (where they belong), however, I have been completely unable to find ANY solution on the internet, including some posted here, that will work to restore my tabs on the bottom.

I have been pasting various codes into the chrome folder under username/Appdata/Roaming/Mozilla/Firefox/Profiles/profile folder which ends in .default-release, and none seem to work with Version 67.

However, I assume that this is user error, due to my lack of understanding. Any help resolving this would be appreciated.

[Aris-t2]

@jsrfo Latest files Where to put the files... Edit userChrome.css and enable this on Fx 65-67: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L375 on Fx 68+: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L377

[AzureBerylBlue]

I used to use this script to hide the tab bar when there is only 1 tab. https://gist.github.com/BenoitAverty/af633ee20e27f48f9ba7178451432206 This was compatible with tabs_below_navigation_toolbar.css, but is no longer compatible with tabs_below_navigation_toolbar_fx68.css. Would it be possible to add a auto hide tab bar option to CustomCSSforFx?

[Aris-t2]

CSS can not achieve this feature properly. Even the "old" script had to remove the 'new tab' tab/button to workaround this problem.

[AzureBerylBlue]

Never mind, that auto hide script actually still works if I use tabs_below_navigation_toolbar_fx65_v2.css instead of tabs_below_navigation_toolbar_fx68.css, even though I'm on FF68.

[drJeckyll]

It seems latest firefox broke #urlbar-results and now active tab is visible over #urlbar-results. If I set z-index on #urlbar-results to 100 it is back to normal. May be have something to do with: https://bugzilla.mozilla.org/show_bug.cgi?id=1569180

[Aris-t2]

Thanks for the tip. I will add the fix to tabs_below_navigation_toolbar_fx68.css file.

[drJeckyll]

From today tabs on bottom are broken again. These is some setting layout.css.xul-box-display-values.survive-blockification.enabled which is enabled by default. If it is reverted to false everything is back to normal. Have to do something with this: https://bugzilla.mozilla.org/show_bug.cgi?id=1582530

Have no idea what blockification is, but I can see in comments in bug, that setting will be removed in the future, so ...

[Aris-t2]

Thanks for the note. We all knew custom CSS/JS tweaks were only temporary anyways. Most likely most features of this project have to go in the near future.

[Jgr9]

So is it now completely impossible to get tabs on bottom?

On Sat, Sep 28, 2019 at 2:56 PM Aris notifications@github.com wrote:

Thanks for the note. We all knew custom CSS/JS tweaks were only temporary anyways. Most likely most features of this project have to go in the near future.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Aris-t2/CustomCSSforFx/issues/164?email_source=notifications&email_token=AGH53OYRNW2CA477T5KZLNLQL6SEBA5CNFSM4GCH65KKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD73AIJA#issuecomment-536216612, or mute the thread https://github.com/notifications/unsubscribe-auth/AGH53OYDGMFE4CATUCVCKRDQL6SEBANCNFSM4GCH65KA .

[drJeckyll]

@Jgr9 Still possible - just flip layout.css.xul-box-display-values.survive-blockification.enabled to false and restart FF. But I guess soon it will be removed.

P.S. Found https://www.reddit.com/r/FirefoxCSS/comments/da72wv/psa_for_nightly_users_potential_breakage_or_even/ - may be it still will be possible, but I'm not sure.

[Jgr9]

That worked for me, at least until they remove it.... (By the way, I was talking about Tabs below the URL and Bookmark bars, not the bottom of the browser.)

And I was just checking out my other options... ugh. As far as I can see, Vivaldi is the only one that still bothers to have user-friendly tab location options, including the bottom of the browser, but still won't do below the URL bar. Brave went to Chromium I think, so that's also out of the picture for this issue. Not sure about Opera possibilities. Not sure, but I'd guess Waterfox would get it removed along with Firefox updates as well? Basilisk? Pale Moon? (Older-Gecko-based ones?) idk. Current Ublock Origin support would probably mean I couldn't really go back like that anyways, among other things. I don't necessarily know what I'm talking about, but it seems like the options to get tabs where I want them could be nearly gone at this point. Chrome has to ruin everything I guess.

[drJeckyll]

Well ... it may actually work this way. In tabs_below_navigation_toolbar_fx65.css -> #TabsToolbar add: display: block !important; This move back tabs bellow, so no need to set layout.css.xul-box-display-values.survive-blockification.enabled to false.

[Aris-t2]

I will add the "display block" rule to all of this projects CSS files (where necessary) on next update. An enabled or disabled layout.css.xul-box-display-values.survive-blockification.enabled should not be an issue anymore then.

[ArkadiuszMichalski]

https://github.com/Aris-t2/CustomCSSforFx/issues/164#issuecomment-495370187 This was not defaulut behaviour? This line separate tabs and content, now without them this both area is less readable. I see that line was set in init file tabs_below_navigation_toolbar.css (which is imported by others):

TabsToolbar{

margin-bottom: 0px !important; border-bottom: 1px solid #5f7181 !important; } so why for FX68 are you overwriting it now:

TabsToolbar,

main-window:not([style*='--lwt-header-image']):-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme,

main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme {

border-bottom: 0 !important; }

I don't know why jra66 don't see this line previouse, but in my set it always was visible. Any other reason why this line is not visible by default in FX68 + by default?

[Aris-t2]

Different configuration, theme etc.?

[ghost]

Firefox 68 ESR:

The "new tab" button became really small:

I use this:

@import "./css/tabs/tabs_below_navigation_toolbar_fx68.css";

[Aris-t2]

@Lyberta The icon messes around with tabs toolbar when using default settings on this project. For your configuration it is enough to add this code to userChrome.css::

:-moz-any(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon {
  padding: 4px !important;
  margin: 0px !important;
  width: 24px !important;
  height: 24px !important;
}

[ghost]

I have an issue on my Mac, that the titlebar doesn't actually hide when I disable it in Customization mode. It just looks different but multirow tabs still clip in the webpage.

[Aris-t2]

Titlebar option on macOS and Linux is unstable and should not be used when customizing user interface with tab changes like multirow tabs.

[ghost]

@Aris-t2 Ok, that worked. But then I realized that importing "tabs below" css really messed up my colors. I had to mess with it for a while until I've found a fix:

#nav-bar:not(:-moz-lwtheme) {
  -moz-appearance: none !important;
  /*background: var(--general_toolbar_color_navbar, inherit) !important; Lyberta*/
}

toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  -moz-appearance: none !important;
  /*background: var(--general_toolbar_color_toolbars, inherit) !important; Lyberta*/
}
#TabsToolbar:not(:-moz-lwtheme){
  /*-moz-appearance: none !important; Lyberta */
  background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important;
}

But then I've realized that my status bar reverted to default. I use this code to have proper status bar:

/* Status bar for Firefox 68+ */
/* Most of the code taken from: */
/* https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css */
/* Changed border color to #CCC */

#browser-bottombox { height: 20px; border-top: solid 1px #CCC; }
#statuspanel { width: 100% !important; left: 0px !important; bottom: 0px !important; padding: 0px !important; transition-duration: 0s !important; transition-delay: 0s !important; transition-property: none !important; }
#statuspanel-label { top: 0px !important; margin-left: 0px !important; margin-top: 0px !important; border: none !important; padding: 0px !important; }

window[inFullscreen="true"] #browser-bottombox { display:none !important; }
window[inFullscreen="true"] #statuspanel { display:none !important; }

It doesn't work if I enable "tabs below" css.

[ghost]

Titlebar option on macOS and Linux is unstable and should not be used when customizing user interface with tab changes like multirow tabs.

Multirow tabs clip into the webpage regardless of the titlebar being on or off in Customize

[Aris-t2]

@Lyberta

I don't see what is broken on your end when trying to use the statusbar code. Could you post some screenshots of how it has to look and how it looks with this projects files?

By "tabs below" you mean tabs below navigation bar, right? Because tabs below main content of course breaks any other browser bottom modifications.

[Aris-t2]

@Juvencus

Using this combination on macOS is a different story. After running some tests I found the issue. Next update will offer a new option to be used on macOS.

2.8.2 tabs_below_navigation_toolbar_fx65_v2_macOS.css + tabs_multiple_lines_fx71.css

[ghost]

@Juvencus

Using this combination on macOS is a different story. After running some tests I found the issue. Next update will offer a new option to be used on macOS.

2.8.2 tabs_below_navigation_toolbar_fx65_v2_macOS.css + tabs_multiple_lines_fx71.css

As always, amazing. Thanks for your work!

[ghost]

@Lyberta

I don't see what is broken on your end when trying to use the statusbar code. Could you post some screenshots of how it has to look and how it looks with this projects files?

/* STATUS BAR */

@import "./StatusBar.css";

/* Remove the Hamburger Button */
#PanelUI-menu-button {display: none;}

/* TABS ON BOTTOM */

@import "./css/tabs/tabs_below_navigation_toolbar_fx68.css";

:-moz-any(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon {
  padding: 4px !important;
  margin: 0px !important;
  width: 24px !important;
  height: 24px !important;
}

/* STATUS BAR */

@import "./StatusBar.css";

/* Remove the Hamburger Button */
#PanelUI-menu-button {display: none;}

The content of StatusBar.css is in my previous post.

EDIT: By messing with debugger and searching I've found that all imports must go first so I put fix for new tab button inside tabs_below_navigation_toolbar_fx68.css and it works.

[Aris-t2]

Try to add the code from "statusbar.css" to the end of your userChrome.css for testing purposes, it does the job for me:

[ghost]

Yes, my problem was that I've had a regular CSS rule before the import. CSS forbids that.

[rathord1912]

It does not work like this.

Try to only use this code without enabling tabs_below_main_content_fx65.css:

#main-window { 
-moz-box-direction: reverse;
}

Hi Aris,

in FF72+ the reverse code, to place all toolbars below the content area, doesn't work anymore. Is there another way?

[Aris-t2]

Try this:

#appMenu-viewCache + box {
  -moz-box-ordinal-group: 1000 !important;
}

[rathord1912]

Perfect. It's just working fine.

[Aris-t2]

I don't know how long this code will work. Devs like to move things into id-free boxes lately.

[ArkadiuszMichalski]

Last Nightly 74, when using @import "./css/tabs/tabs_below_navigation_toolbar_fx72.css" and Title bar off (via Firefox setting) my button min/back/close in right corner is visible in 1/3 size, look: In first img when @import "./css/tabs/tabs_below_navigation_toolbar_fx72.css" is on, and in second when off. Only I have this problem? Problem not exist when I have Title bar on in Customization...

[Aris-t2]

I will look into this.

Problem not exist when I have Title bar on in Customization...

In this case the OS titlebar is used. It does not get styled by themes and therefore does not create such overlapping issues.

[ArkadiuszMichalski]

Problem make lwt: https://addons.mozilla.org/en-US/firefox/addon/pinstripe-blue/ If off then buttons are visible.

[Aris-t2]

It might have something to do with the following code:

#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]):-moz-lwtheme #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container {
  display: block !important;
  margin-top: -13px !important;
}

I can not troubleshoot on Win 7 atm, try to modify the above value.

[ArkadiuszMichalski]

Yes, removing margin-top... fix problem, looks like its not necessary now, thx.