Optionally hide tabs when only one open

[smithfred]

The following works for me (the new tab button needs to be moved to the main toolbar via FF's customise UI):

#tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { min-height: initial !important; height: initial !important; }
#tabbrowser-tabs tab { height: 38px; }
#tabbrowser-tabs tab:only-of-type { display: none !important; }
#TabsToolbar .private-browsing-indicator {
    display: none !important;
}

This unfortunately conflicts with using a private browsing indicator on the tab bar; the following replicates the darker private browsing header bar from Web instead:

:root[privatebrowsingmode="temporary"] {
    --gnome-headerbar-bgimage: linear-gradient(to top, #adb8c3, #cbd2d9 3px, #cbd2d9);
    --gnome-headerbar-border-bottom: 1px solid #909fae;
    --gnome-headerbar-box-shadow: none;
    --gnome-headerbar-button-bgimage: linear-gradient(to bottom, #cad1d8, #bfc9d0 60%, #b0bbc5);
    --gnome-headerbar-button-border: 1px solid #909fae;
    --gnome-headerbar-button-border-bottom: 1px solid #758899;
    --gnome-headerbar-button-box-shadow: inset 0 1px #eaedf0;
    --gnome-headerbar-button-hover-bgimage: linear-gradient(to bottom, #dee2e7, #ccd3d9 60%, #bfc8d0);
    --gnome-headerbar-button-active-bgimage: #b9c3cc;
    --gnome-headerbar-button-disabled-bgcolor: #d3d9df;
    --gnome-headerbar-button-disabled-border-bottom: var(--gnome-headerbar-button-border);
    --gnome-headerbar-button-disabled-box-shadow: none;
    --gnome-inactive-headerbar-bgimage: var(--gnome-headerbar-bgimage);
    --gnome-inactive-headerbar-border-bottom: var(--gnome-headerbar-border-bottom);
    --gnome-inactive-headerbar-box-shadow: var(--gnome-headerbar-box-shadow);
    --gnome-inactive-headerbar-button-bgimage: var(--gnome-headerbar-button-disabled-bgcolor);
    --gnome-inactive-headerbar-button-border: 1px solid rgb(168, 168, 168);
    --gnome-inactive-headerbar-button-border-bottom: var(--gnome-headerbar-button-border);
    --gnome-inactive-headerbar-button-box-shadow: var(--gnome-headerbar-button-disabled-box-shadow);
    --gnome-inactive-headerbar-button-disabled-bgcolor: var(--gnome-headerbar-button-disabled-bgcolor);
    --gnome-inactive-headerbar-button-disabled-box-shadow: var(--gnome-headerbar-button-disabled-box-shadow);
    --gnome-urlbar-border: 1px solid #909fae;
    --gnome-urlbar-box-shadow: none;
    --gnome-inactive-urlbar-box-shadow: var(--gnome-urlbar-box-shadow);
}
:root {
    --gnome-headerbar-button-disabled-border-bottom: var(--gnome-headerbar-button-border);
}
#nav-bar toolbarbutton.chromeclass-toolbar-additional[disabled],
#nav-bar toolbarbutton.toolbarbutton-combined[disabled],
#nav-bar #reload-button[disabled],
#nav-bar #stop-button[disabled],
#PanelUI-menu-button[disabled] {
    border-bottom: var(--gnome-headerbar-button-disabled-border-bottom) !important;
}

EDIT: handled private browsing mask indicator preventing tab bar hiding.

EDIT 2: added complete CSS for dark grey header bar (Web uses the same private browsing colour even with "Global Dark Theme"). Only issue with the above is I didn't figure out how to style the top window border so far - it remains light grey (which is a problem I also see with the dark variant of this Firefox theme).

EDIT 3: fixed referencing new var globally, but only specifying it for private browsing :root.

[lunakurame]

Hiding the tab bar when only one tab is open seems to works nicely, I'll add it as an optional feature. That different headerbar looks good for the white theme, but I see no point in adding a white headerbar to the dark theme. I know Epiphany (GNOME Web) does it, but it looks kinda weird when it mixes with dark elements and misses the whole point of having a dark theme. I suspect they just forgot about dark theme users when adding that feature.

I think I could add it as an optional feature too, so dark theme users can just disable it if they don't like it. Do the icons look white for you too when using a dark theme (see the screenshot below)? We can use a filter to invert them if they work consistently on all machines. Also what do you mean by that top window border, which you can't style? Could you post a screenshot?

[smithfred]

See top edge below (only happens when unmaximised), from GNOME 3.26.

Dark 3.26 theme is pretty broken for me (also note unstyled top border - window is not maximised):

• Button icons other than back/forward not inverted
• Address bar background not dark

Global Dark Theme makes no difference.

Private window with dark theme:

The problem with not changing the header bar in private browsing mode, if tabs are hidden, is there's no indication that the window is private (except on the initial private browsing page) when only one tab's open. The following is a private browsing window without my header bar changes, and tabs hidden (light theme):

BTW, I don't think the Web guys forgot about Global Dark Theme, it's just considered entirely unsupported (in fact it's going away entirely in 3.28; apps have to individually implement dark themes).

[smithfred]

TBH I think changing the address bar background colour is actually a much better approach than what the Web guys did:

The below CSS works for me for the above approach (maybe compare to the current dark theme URL bar CSS to fix the dark theme white bar issue in my previous comment?)

:root[privatebrowsingmode="temporary"] .urlbar-textbox-container {
    /* Light theme */
    background-image: linear-gradient(#e6c2ff, #e6c2ff) !important;
    /* Dark theme */
    /*background-image: linear-gradient(#25003e, #25003e) !important; /**/
}

BTW, the dark theme URL bar text style doesn't de-emphasise the non-domain part of the URL like it should.

[smithfred]

Only issue with the above is I didn't figure out how to style the top window border so far - it remains light grey (which is a problem I also see with the dark variant of this Firefox theme).

OK, looks like "Global Dark Theme" in Tweaks doesn't affect Firefox at all, it has to be set to "Adwaita-dark".

And the top edge of the window with CSD is set according to the GTK theme, rather than being styled by Firefox.

So looks like having a custom CSD header bar colour for private browsing is a no-go anyway, since there will always be a standard-colour top border.

Edit: useful for testing without changing the theme account-wide: GTK_THEME=Adwaita:dark firefox

[ghost]

It's worth noting that the 'Global dark theme' switch is going to be removed in GNOME 3.28, so you will need to select 'Adwaita-dark' in any case.

[lunakurame]

Setting global theme works for me and affects Firefox too, maybe that's because I use a pretty old version of GNOME (3.18), but anyway, there isn't much we can do, I already mentioned the GTK_THEME variable in README.

I added both hiding single tabs and coloring the URL bar for private windows, but as two separate features, in case someone wants to use one, but not the other:

• hide-single-tab.css
• private-urlbar.css

I am aware of the fact that hiding single tabs also hides the private browsing indicator, I included a warning in userChrome.css. Code merged from https://github.com/smithfred/firefox-gnome-theme-3.26-layer.

[smithfred]

Just tested on FF58, looks fine.