[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

[yochaym]

hi aris, i would suggest doing it the other way around using position absolute on TabsToolbar and pushing it to the bottom of the navigator-toolbox (it has position relative). this will save you the adjustments on the toolbar-menubar and will keep the show/hide functionality...

[Aris-t2]

I don't think it works like that. Using "position absolute" or "fixed" on tabs toolbar would move tabs toolbar either to windows top or bottom depending on top/bottom rule, but never to the bottom of navigation toolbox. Am I wrong? Anyway moving tabs toolbar to the bottom (like one of the options already does) opens a lot of new issues. Tabs do not keep their actual predefined size anymore and button paddings/margins on tabs toolbar also have to be reduced to not break tabs toolbar in overflow mode.

Unfortunately there is no perfect solution, because Mozilla moved tabs toolbar into a sub-node (#titlebar). If they would have kept everything on same level (#navigator toolbox > menubar, tabs toolbar, nav-bar, bookmarks toolbar) everything would work fine without the issues mentioned above.

If there is a better solution for all this, I would like to include it.

Edit Looks like I was wrong. Position absolute indeed keeps tabs toolbar within navigator toolbox.

I have to run some test. For now it looks like this (but, tab minimum size is broken like mentioned above):

[Aris-t2]

@all

Could you run some more tests?

Instead of @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css use @import "./css/tabs/tabs_below_navigation_toolbar.css

and add this to the bottom of userChrome.css:

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

#TabsToolbar {
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* make sure button icon colors set correctly */
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
  fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
  color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
  display: none !important;
}
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #TabsToolbar {
 -moz-padding-start: 0px !important;
}
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button {
  display: none !important;
}

#main-window #TabsToolbar #window-controls {
  display: none !important;
}

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

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

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
      top: 0px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
      top: 8px !important;
    }
}

/* Windows 7 extra tweaks */
@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {

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

  }
  @media not all and (-moz-windows-compositor) {

    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
      top: -8px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
      top: 0px !important;
    }

  }
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

Thanks to yochaym for the idea.

Edit v1 Added more tweaks

Edit v2 Added support for 'chromehidden' toolbars

[drJeckyll]

except of the line under menu (I know, I know), and colors which I commented in tabs_below_navigation_toolbar.css it looks good to me

[drJeckyll]

btw there is one problem with popup windows without tabs - it looks like tab bar is still present even not any tabs are shown.

[Aris-t2]

@drJeckyll Test the updated code above (->edit v2)

[drJeckyll]

Link: http://f1.f-e-n.net/test.html (click on Click me)

With latest changes (don't even have top line! yahoo! btw still have bottom line under tabs, but I put fixes anyway)

[drJeckyll]

Popup tab bar looks fixed now (hidden or whatever)

[Acid-Crash]

Not sure if this is still needed (Nightly Win10).

[Aris-t2]

All of todays changes and more fixes are now online and included in 2.2.5 release: https://github.com/Aris-t2/CustomCSSforFx/releases/

[Aris-t2]

@Acid-Crash

I don't see a question in your post. ;-)

[Speravir]

Ping @Aris-t2 : CSS-Code für Tabs unter der URL-Bar in Nightly ohne Funktion (Camp Firefox, German). I’ve pointed to your rules from here.

[Jgr9]

I'm wondering if/thinking I actually liked it better without the line between the tabs and main content/window, which is how it was in my own for a while. Could I still get rid of that and how?

[drJeckyll]

@Jgr9 see: https://github.com/Aris-t2/CustomCSSforFx/issues/164#issuecomment-436984293

[Jgr9]

Is there anything (hopefully not extreme) that can be done about the toolbars shrinking while attempting to drag a tab somewhere (with tabs not on top)?

Though I am only using small bits of the userChrome, so I'm not sure if it doesn't happen with more of it.

Actually, it looks like the Nav bar might just be elevating, but only while dragging a tab. Should I be using Higher Position Navbar? (Not sure if I want to.)

Edit: Same problem there, it looks like.

[Aris-t2]

@Jgr9 This will be fixed on next update.

[marty60]

Using "tabs_below_navigation_toolbar_fx65_v2" is good except the menu bar doesn't show in full screen, is it possible? I tried this with a new profile and with different tweaks but no luck.

[Jgr9]

Oh it's so nice not having toolbars elevate while dragging tabs anymore. I had it like that for so long lol.

[Aris-t2]

@marty60 I will look into it and add a second "menubar in fullscreen" mode option for this case.

[runrunrirun]

So this seems kind of messed up on macOS with the current Beta channel. I disabled all of the non-tabbar related options.

On 65.0b2 this looks like this with the following options:

@import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; // / only for multi-lined tabs support, causes glitches with disabled menubar / @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix.css"; // / <-- macOS fix Fx65+ /

And like this with the default options: @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /*/ / <-- tabs not on top Fx65+ / / @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; // / only for multi-lined tabs support, causes glitches with disabled menubar / @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix.css"; // / <-- macOS fix Fx65+ /

The tabs are placed over the Bookmark bar.

[Aris-t2]

I will upload a fixed version soon.

The file tabs_below_navigation_toolbar_fx65_macOS_fix.css is not meant to be used with tabs_below_navigation_toolbar_fx65_v2.css. I will add a note for that.

[ramasaig]

I've only just arrived at this conversation. I have the same problem with Fx Dev Edition 65.0b2 (64 bit) running in Win 10. I tried to follow the advice given above, but ended up with no tabs at all (or perhaps just the last one showing at the right hand end of the Address bar). Could you please set out clearly what should now be in the 'userChrome.css' file, and if there are any '@imports', where the files for import should be (I'm assuming in the 'chrome' folder', but is that right)? userChrome.zip

[Aris-t2]

I only tested Firefox 65 Nightly not the dev edition and it works fine for me on Windows, Linux and macOS.

Make sure you are using the latest files

Inside userChrome.css you need to import tabs_below_navigation_toolbar_fx65.css: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L328

macOS users also need to import tabs_below_navigation_toolbar_fx65_macOS_fix.css: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L329

[runrunrirun]

Better, but still not quite there on macOS on 65.0b2.

• Height seems too low on default tab bar by default, as before, the currently selected tab sticks out below the tab bar. See my original first screen shot.

• The window manager now doesn't appear to consider the titlebar as the titlebar - I can't click on the titlebar at all to grab it. I have to grab the nav bar area beneath the visible titlebar to move the window. The close/minimize/maximize buttons all work normally though.

• If the window is maximized (not full-screen - option-click the green button), the toolbars look like my second screenshot. It is fine in full-screen, though.

[Aris-t2]

I see, my fixes were all for classic squared tabs. I will add another file for default tabs. Alternatively you can open tabs_below_navigation_toolbar_fx65_macOS_fix.css file and replace

#tabbrowser-tabs .tabbrowser-arrowscrollbox {
  margin-top: 5px !important;
  margin-bottom: -5px !important;
}

with

#tabbrowser-tabs .tabbrowser-arrowscrollbox {
  margin-bottom: -3px !important;
}

Don't use Firefox titlebar on macOS, if using 'tabs not on top'. Customizing mode > Titlebar > checked causes less trouble.

[runrunrirun]

For me, -1px seems to be the answer, the selected tab still was too tall at -3px.

I forgot about the titlebar option actually, and using native titlebar does eliminate those issues 👍 Unfortunately Firefox doesn't support macOS dark mode yet :/