[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]

You have done nothing wrong. Latest update introduced some heavy changes to the top content, which broke some things.

The "titlebar box" is now part of the "navigator-toolbox" and contains menubar and tabs toolbar. This means we can not move tabs toolbar below navigation/bookmarks toolbar without moving menubar too. I have to take a deeper look at it.

[Jgr9]

Well that doesn't sound good if things can't be created with css. Because I still use the old menubar. And nav and bookmark bar as well of course. But if they can't be re-ordered anyways now...

[Aris-t2]

There are still ways to achieve this in CSS, but things got more complicated and require more code adjustments. Wait for an update.

[Aris-t2]

https://github.com/Aris-t2/CustomCSSforFx/releases

[drJeckyll]

on my 65.0a1 (2018-11-07) (64-bit) on Linux Tabs stay on top
put:
@import "./css/tabs/tabs_below_navigation_toolbar.css";
@import "./css/tabs/tabs_below_navigation_toolbar_fx65.css";
together and only _fx65 nothing changes

[Aris-t2]

I have to check this.

Current tests were only run on Windows 7&10.

[Aris-t2]

I've tested this on Ubuntu and it works. Only menubar needs some visual adjustments.

With custom_css_for_fx_v2.2.3.1_test1.zip

[drJeckyll]

That's weird. Have to move @import clause on top of the file before my other custom rules to move tabs on bottom. It almost works. Menu is bit lower, and go over location. I guess I can play with values here. (for some reason can't attach image here).

[Aris-t2]

Drag and drop a jpg or png file into text field. This attaches images to the post.

I don't know about your custom css tweaks, but you always have to test the whole package I provide, so we can compare results.

[drJeckyll]

It's the whole package, I just have some additional rules, but nothing about tabs.

(attachments now work)

[nicolaasjan]

Hi,
Here on Linux Mint 17.3 and 'custom_css_for_fx_v2.2.3.1_test2' it looks like this:

Not quite right it seems...

[BrandtnerKPW]

On Windows 10 with v2.2.3 while watching a video in fullscreen mode, the minimize, maximize and close buttons of the browser are displayed in the upper right corner of the screen.

Firefox Nightly 65.0a1 (2018-11-07) (64-bit)

[Jgr9]

Menubar issue (Windows 10). Other things seem to be ok. (Except for Brandtner's issue as well. ^)

[Aris-t2]

@ALL
Test custom_css_for_fx_v2.2.3.1_test3.zip

@drJeckyll
Test default empty menubar.

@nicolaasjan
Test custom_css_for_fx_v2.2.3.1_test3.zip

@BrandtnerKPW
Test custom_css_for_fx_v2.2.3.1_test3.zip

@Jgr9
I need more info.
Looks like this for me (Win10+lw-theme+tabs-not-on-top(65))

e:

[Jgr9]

Um, I'm not really sure what you need really. Windows 10 scaled at 125% 1680x1050

I might have some old Firefox config setting that I set a long time ago for "1:1" scaling, but I don't remember.

Otherwise, all I have in my userChrome and css is yours, not any of mine.

Edit: Oh, nevermind.... I broke the "one at a time" rule. For some reason I didn't see it in that section and thought multiple would be needed (though.... expected not to need the Mac ones).

[drJeckyll]

with test3 it looks OK - just need to remove that ugly line under menu

[BrandtnerKPW]

My problem is solved. Thank you!

[Jgr9]

Hmm, really? I fixed my issue, but I'm still getting the min/max & Close buttons on my Fullscreen with test3 What specific file is that related to?

Edit: Oh, nvm. Not video, just F11 it's still there. So is my scrollbar, but in reality, those might not be such bad things really, unless I really wanted something fullscreen with nothing else.

[nicolaasjan]

This last test build (custom_css_for_fx_v2.2.3.1_test3) makes it look much better:

Thanks!

[Aris-t2]

@drJeckyll
Could you experiment with this code and tell me, if the border is gone?

#nav-bar,
#navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

@Jgr9
The fullscreen caption buttons will be gone too on next upate.

@nicolaasjan @BrandtnerKPW
Good to hear.

Sadly different Linux distributions use different height values for menubar making universal adjustments impossible.

[nicolaasjan]

< --- >
snip
< --- >

@nicolaasjan @BrandtnerKPW
Good to hear.

Sadly different Linux distributions use different height values for menubar making universal adjustments impossible.

Ah, I see.

What can be changed in 'tabs_below_navigation_toolbar_fx65.css' when something like this happens again?

[drJeckyll]

@Aris-t2 That piece works. Thank you.
Any idea how to remove line bellow tabs?

[Aris-t2]

@nicolaasjan
The are no guarantees with Mozilla whether something like this is happening again or not. No way to know how of if this will be changeable then in the future.

@drJeckyll
This works on Windows (not tested on Linux yet):

#TabsToolbar {
  border-bottom: unset !important;
} 

[drJeckyll]

@Aris-t2 that works too. Thanks again

[Juvencus]

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

[Juvencus]

@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.

[Aris-t2]

Without the code I get this glitch:

Leaving the code shows things correctly:

[ArkadiuszMichalski]

Yes, in stable version, but like wrote above I use last Nightly74, don't know if this change will be needed in 73 or 74 (probably in 74 because for long time everything was ok, few days ago this appear).

[Aris-t2]

Overlooked that while testing on W7. ;-)

[Aris-t2]

I think we might get it working for all versions by modifying the code.

Change this:

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

to this:

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

[ArkadiuszMichalski]

If this one rule also work in FX72/73 then yes, I check flex rule in Nightly 74 and looks good, the same as block.

[ryuukenzenkou]

hey i want to request some help. i was using firefox 71 and everything was smooth, then updated to v72 and using your v3.0.0 CSS and the nightmare began. broken addon toolbar at bottom, tabs not working as they should, had to go through the code to fix firefox app button and so on...
have a look here...

i've tried everything that i could to fix these 2 issues, but no luck, so please help... the tab and the addon bar at bottom are the only thing that bug me.. (pun intended).. but if there's a way to fix it, ill be glad to know. btw ill share the CSS code in order to let you inspect it and check whats wrong.
chrome.zip
im not a programmer, but i do know a bit about the stuff as i am currently an student. please help.

edit: ill keep reading and trying to fix it on my own.
edit2: using windows 7 pro x64, firefox v72 x64, default dark theme with aero enabled and no other tab addon installed. was working fine until firefox stable/release v71

[Aris-t2]

You initial screenshot pointed out, that layout.css.xul-box-display-values.survive-blockification.enabled was set to false on your system. This causes major issues even on default configuration without any modifications. Verify that pref is set to true inside about:config.

[fbnk]

Hi,
is there any setting to get a bit more space between tabs and the fav bar? Plus there is a little space below the tabs, like they are "floating".

At the moment, this is the only tab related setting which is imported:
@import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_default_tabs.css"; /**/

Thanks!

FF 72.0.2
macOS 10.15
CustomCSSforFx 3.0.0

[Aris-t2]

Please use tabs_below_navigation_toolbar_fx65_macOS.css as workaround. Not sure what exactly changed on macOS atm, but it seems like tabs_below_navigation_toolbar_fx65_macOS_default_tabs.css might not be required anymore.

This code will increase the space between bookmarks toolbar and tabs toolbar in your config:

#navigator-toolbox #personal-bookmarks {
  padding-bottom: 20px !important;
}

[fbnk]

Thx for the quick reply! I guess the space is just fine now, after the switch :)
And thx for the continuous development as well!

[ryuukenzenkou]

@Aris-t2 I'll change the values as you mentioned and see what happens. I'll reply soon as possible.

[Aris-t2]

I think we can close this one now.
Fx 65 release was a long time ago ;-)