Hide tab when only one is open

[vredesbyrd]

I made a Vivaldi theme that sort of follows Epiphany (gnomes web browser) styling. Not HIG, but the general layout. Tabs sit below the address bar, and they span to fit the window size. Which is the behavior for all Gnome apps with tabs. Nautilus, Gedit etc. There is one thing I am stumped on: If there is only a single tab open, I would like to hide the tab bar completely.

more than one tab.

single tab, currently.

As you can see, with this type of tab layout it does not make any sense to display the tab bar when only a single tab is open, and looks rather ridiculous. I rarely have a single tab open so it has not really bothered me much. But I have had other people request the theme so I am trying to iron out an rough edges, details, padding issues etc.

I have tried a wide variety of things to hide the tab-bar with little success. Obligatory 'i am not a programmer'...but I thought something like this should do it:

#tabs-container.bottom:only-of-type,
#tabs-container.bottom .tab:only-of-type {  
    display: none !important; 
} 

Oddly, (i think?) using last-of-type will hide the tab bar completely, but does not display again when 2 or more tabs are open.

#tabs-container.bottom:last-of-type,
#tabs-container.bottom .tab:last-of-type {  
    display: none !important;
}

Here is everything relevant from my custom.css. https://pastebin.com/AXcTzRhF

I know there is a lot going on under the hood with tabs in vivaldi that could make this difficult, or impossible. But if anyone has any ideas on accomplishing this I would love to here them! I am stumped

[luetage]

@vredesbyrd This approach can't work. The only-of-type selector is about the type of child. Also, all .tab would need to be siblings for this to function, which they aren't. E.g. following example works, but it hides the only remaining tab itself, nothing more: .tab-strip span:only-of-type {display: none;}

This is because you can't style a parent dependent on its child, therefore letting the tabs container disappear isn't possible with css. Your best bet is javascript with mutation observers.

[vredesbyrd]

@luetage

Thanks for explanation. I had hunch I would not be able to entirely hide the tabs-container itself with css, but was not sure why.

.tab-strip span:only-of-type {display: none;} does indeed hide the solo tab which is a big improvement than before. I am not using any custom js yet, but perhaps it would be worth it if I could get it to remove the entire container. I'll see what I can figure out. Thanks much.

[luetage]

Try this

function toggleTabBar() {
    if (tabStrip.childNodes.length === 2) {
        tabsContainer.style.height = '1px';
        tabsContainer.style.opacity = '0';
    }
    else {
        tabsContainer.style.height = '30px';
        tabsContainer.style.opacity = '1';
    }
};

function observeTabs() {
    toggleTabBar();
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(toggleTabBar);
    });
    var observerConfig = {
        childList: true
    };
    observer.observe(tabStrip, observerConfig);
};

setTimeout(function wait() {
    tabsContainer = document.getElementById('tabs-container');
    tabStrip = document.querySelector('.tab-strip');
    if (tabStrip) {
       observeTabs();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

[vredesbyrd]

@luetage

Perfect. That works great Thanks a ton for the help!

[Phosphorus]

Awesome I love this.

[ch3f]

@luetage I just tired this, works almost perfect, only issue is that I have a strip across the entire window where the tab bar was. Curiously, I cant inspect it to find out what it is.

[luetage]

I can’t remember writing this mod and I’m amazed it still works. Where do you have the tabbar? Hiding it completely only makes sense when it isn’t combined with the window controls and the menu.

[ch3f]

@luetage I have it set to bottom due to a tab multi-line mod Im using and even the tabs are set to bottom they appear at the top.

[luetage]

@ch3f This will work, just needed to hide the main container. Will only work well with setting tabs to bottom (no matter where the bottom tabs are being shown).

{
    function toggleTabBar() {
        if (tabStrip.childNodes.length === 2) {
            tabsContainer.style.height = '0px';
            tabsContainer.style.opacity = '0';
            tabsContainer.style.padding = '0'
        }
        else {
            tabsContainer.style.height = '30px';
            tabsContainer.style.opacity = '1';
            tabsContainer.style.padding = '0 0 4px 0';
        }
    }

    function observeTabs() {
        toggleTabBar();
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(toggleTabBar);
        })
        var observerConfig = {
            childList: true
        }
        observer.observe(tabStrip, observerConfig);
    }

    setTimeout(function wait() {
        tabsContainer = document.getElementById('tabs-tabbar-container');
        tabStrip = document.querySelector('.tab-strip');
        if (tabStrip) {
        observeTabs();
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
}

basically changed just one variable ^^

[ch3f]

@luetage still have a maybe 5px gap at the top, checked with various websites to make sure, other than that ir works perfect. Thank You.

[luetage]

@ch3f That’s the padding, I edited it in above. You shouldn’t see anything now. If you still do, test without other mods.

[ch3f]

still have gap:

I doubled checked with chromium, it dies sit flush to the top margin.

[luetage]

@ch3f Chromium? Check without any other mods with tabs at bottom in Vivaldi. I can’t help you if we don’t share the same baseline.

[ch3f]

Just discovered if I sent tabs to "Top" its perfect, just need to find what's tripped it up.

[ch3f]

right this is the offending code

#tabs-tabbar-container.bottom {
    order: -2; 
    border: 1px solid #626261 !important;
    padding-bottom: 0px !important;
	background-color: transparent !important;
	background: none !important;
	padding-top: -1px !important; 
	z-index: 2 !important;
	
	
}

Its part of the "Tabs Below UrlBar Mod" here

/* Tabs below urlbar */

#tabs-tabbar-container.bottom {
    order: -2; 
    border: 1px solid #626261 !important;
    padding-bottom: 0px !important;
	background-color: transparent !important;
	background: none !important;
	padding-top: -1px !important; 
	z-index: 2 !important;
	
	
}

/* bookmarks bar above tabs */
.bookmark-bar {
    order: -3;
}

.toolbar.UrlBar {
    order: -2; 
	height: 25px !important;
	/* top: -3px !important; */
	border: 1px solid #626261 !important;
}

/* required for 3.6 */
.tabs.bottom .tab.active:not(.marked):not(.tab-mini):after {
  transform: unset;
	border: 1px solid #626261 !important;
}

#tabs-subcontainer.bottom { 
  order: 2; /* this can also be set to a value of 2 */ 
} 

/* tab group indicators*/
.tabs.bottom .tab-strip .tab-group-indicator {
    bottom: 20px !important;
}
/* Remove line between address bar and bookmark bar */
.address-top .toolbar-mainbar:after { 
    content: unset; 
} 

/* Remove line between bookmark bar and tabs */
.bookmark-bar { 
    border-bottom-width: 0px !important; 
} 

.bookmark-bar {
    background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
    background-color: var(--colorAccentBg);
}

.color-behind-tabs-on .bookmark-bar {
    background-color: var(--colorBg);
}
.color-behind-tabs-on .bookmark-bar button {
    background-color: var(--colorBg);
}

.stacks-on.tabs-bottom { 
	order: -1 !important; 
	top: 130px !important; 
} 

If I remove the offending code, it works perfectly but I have no tabs at all.

[tordenflesk]

Any luck?