2
MOG Multi-row tabs (fedia.io)
submitted 10 months ago by to c/FirefoxCSS@fedia.io
6 comments fedilink hide all child comments
 

Have been using mog multi-row_tabs_below_content.css (and also mog fake_status_bar_w_bookmarksbar.css) with Firefox ESR 128.

Now updating to Firefox ESR 140, and to my surprise, almost all the CSS continues to work. The only issue is that the menu bar has disappeared, and won't come back.

There was something to do with menu bar in multi-row_tabs_below_content.css, so I replaced that file with the latest versions of the two new replacement files, multi-row_tabs.css and tabs_below_content_v2.css. This did indeed restore the menu bar, but it broke tab bar scrolling (and a few other incidentals).

Do I need some intermediate version of those files? OR, if I go back to the original configuration, is there some way to restore the menu bar?

all 6 comments

sorted by: hot top controversial new old
[–] 2 points 10 months ago (5 children)

There was something to do with menu bar in multi-row_tabs_below_content.css, so I replaced that file with the latest versions of the two new replacement files, multi-row_tabs.css and tabs_below_content_v2.css. This did indeed restore the menu bar, but it broke tab bar scrolling (and a few other incidentals).

multi-row_tabs.css + tabs_below_content_v2.css is indeed the intended method to achieve what you are after (at least, if you are using my styles). I don't have normal ESR 140 installed, but with Tor browser, which is based on it, when tabs span over the maximum number of lines then they scroll as intended using mouse wheel. What are the "few other incidentals"? Perhaps that might yield a clue about why it isn't working on your system.

  • permalink
  • fedilink
  • source
  • hideshow 5 child comments
    •
  • [–] [S] 1 point 10 months ago (4 children)

    Thanks for reply. So, primarily, there is a empty, gray horizontal band directly below the navigation bar, the entire width of the window. It is about the same height as the navigation bar. That, and the missing menu bar, were the real issues that I noticed yesterday. The status bar at the bottom seems correct; it has my extension icons on the right, and displays loading addresses on the left. However, today I also noticed that, although multi-row_tabs.css has --multirow-n-rows: 3; which is what I wish, yet I'm only seeing two rows of tabs at the bottom--it appears that the third row of tabs is hidden behind the status bar?

    My userChrome.css is quite simple: it calls my_appearance_settings.css to set tab colours, and it then calls, in order, your three styles: multi-row_tabs.css tabs_below_content_v2.css fake_statusbar_w_bookmarksbar.css

    If I comment out the fake_statusbar_w_bookmarksbar.css line, then the statusbar is of course gone, and that gray band at the top now has the extension icons (although they are near the left end rather than the right). Also, there are now three rows of tabs, and the scrolling seems correct. So perhaps the fake statusbar style is interfering with the tabs styles?

    Hope that information helps.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 4 child comments
    •
  • [–] 2 points 10 months ago (3 children)

    Oh right, I missed that you were also using fake_statusbar_w_bookmarksbar.css - that's totally not compatible with tabs_below_content_v2.css

    You can add this bit to make them behave together:

    #PersonalToolbar{
  position: static;
  grid-row: 11/12;
}
:root:not([inFullscreen]) > body::after{
 content: none; 
}

    Or if you want tabs to be below that fake statusbar then add this as well:

    #TabsToolbar{
  grid-row: 12/13;
}
  • permalink
  • fedilink
  • source
  • parent
  • hideshow 3 child comments
    •
  • [–] [S] 1 point 10 months ago* (last edited 10 months ago) (2 children)

    So I'm not sure where that should be added; I tried adding it at the top of fake_statusbar_w_bookmarksbar.css, so the beginning code of that file, including some original code, now looks like this:
    ` #PersonalToolbar{ position: static; grid-row: 11/12; } :root:not([inFullscreen]) > body::after{ content: none; }

    :root:not([inFullscreen]) > body{ --uc-statusbar-button-padding: 4px; --uc-browser-base-padding: calc(2 * var(--uc-statusbar-button-padding) + 16px + 4px); --uc-statusbar-text-vertical-position: 5px; } ` But it didn't change anything regarding tabs and statusbar, although the menubar is now back? Also, the gray bar at the top is still there. Then I tried adding that code to tabs_below_content_v2.css. with the same result.

    So I moved the code back to fake_statusbar_w_bookmarksbar.css, and then in that same file I commented out this bit of code: /*:root:not([inFullscreen]) > body::after{ content: ""; display: flex; margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important; order: 2; /* To make this really the bottom-most toolbar even with custom toolbar order */ }*/ Now things seem to be pretty much correct, although some of the sizing seems to be a little off. Previously, the tabs were slightly less tall. So now, with the tabs slightly taller, the tab rows don't completely fit within the height of the tab bar. How can I slightly reduce the height of the tabs?

    Also, is what I did above the correct solution?

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 2 points 10 months ago* (last edited 10 months ago) (1 child)

    If you are using @import statements in your userChrome.css to load the other files, then I would put these extra rules at the end of userChrome.css after the imports.

    For the tab heights, none of the styles should be modifying the tab height, they should be as tall as they are in Firefox normally. Make sure you are not setting tab height related properties in my_appearance_settings.css.

    Edit: I mean, you can edit tab heights, you just need to do it in a manner that is compatible with multi-row_tabs.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •