Scrolling tabs horizontally like in Firefox

Tiamarth

#browser.tabs-top #tabs-container,
#browser.tabs-bottom #tabs-container {
    overflow-y: hidden;
    overflow-x: scroll;
    margin-right: 90px;
    margin-left: 35px;
    padding-left: 0px !important;
}

#browser.tabs-top #tabs-container::-webkit-scrollbar,
#browser.tabs-bottom #tabs-container::-webkit-scrollbar {
    display: none;
}

#browser.tabs-top #tabs-container .tab-strip,
#browser.tabs-bottom #tabs-container .tab-strip {
    display: flex !important;
}

#browser.tabs-top #tabs-container .tab-position,
#browser.tabs-bottom #tabs-container .tab-position {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    min-width: 70px;
}

#browser.tabs-top .tab-position .tab-header .title,
#browser.tabs-bottom .tab-position .tab-header {
    min-width: 70px;
}

#browser.tabs-top #tabs-container .newtab,
#browser.tabs-bottom #tabs-container .newtab {
    padding-left: 70px;
}

#browser.tabs-top #tabs-container .sync-and-trash-container,
#browser.tabs-bottom #tabs-container .sync-and-trash-container {
    padding-left: 40px;
}

[ Edit: I'm not super active on the Vivaldi Forums so I can't guarantee I'll be around to provide support to anyone should they need it and I'm not likely to update the code here if something breaks. Here's a gist, and here's the Reddit post. ]

A lot of users prefer their tabs to scroll horizontally once there's so many open that they reach a small width. It can be easier for some users to differentiate between tabs that have a set minimum width and then scroll the tab bar horizontally than tabs that shrink down into tiny boxes to squeeze into the overflowing tab bar. This is one of the features I've seen requested the most since I first started using Vivaldi, but, as far as I know, no one has written a mod for it before. I've tried a few times before but was never dedicated enough to actually get it working in any usable way. Someone request the feature yet again on the Vivaldi subreddit today, and I had some free time so I tried to get it working again. And I did. And I decided to post it here on the forums as well since the forums are more active than the subreddit, and I thought it may help some people out. It's not perfect, but the biggest problem with this is that you have to hold shift while scrolling in order to scroll.

dude99

Nice mod!

You might wanna limit the mod to top & bottom position tabbar with #tab-container:is(.top, .bottom) or #tab-container:not(.left):not(.right)

Tiamarth

@dude99 Good call, thanks. Updated the op and the gist.

iAN CooG

@Tiamarth Nice idea, but have you tested in Vivaldi 2.5.1525.36 Snapshot? I did now and I don't see much difference with and without it.

Tiamarth

@iAN-CooG Yep, looks like I broke it the last time I edited it. It turns out that #tab-container:is(.top, .bottom) is not a valid selector. It should be #browser:is(.tabs-top) and #browser:is(.tabs-bottom)

I edited it again, should work now. Thanks

iAN CooG

I have no idea what should be the difference, I've opened more than 30 tabs to the point they're all tiny squares with only the icon in it, same as they were pinned, and only the current tab gets full width (I've set active tab minimum width to 180px in settings) when scrolling thru them. Nothing changes with this mod added for me.

Tiamarth

Your tabs should stretch out to take up a minimum width of 70px, and you should be able to hover over them with your mouse, hold shift and use your scroll wheel to scroll through your tabs. I should mention also this only works if the tab bar is on the top or bottom of the window, as it seems pointless to scroll side tabs horizontally.

Also having to hold shift while scrolling can probably be easily fixed with javascript but I'm not the guy for that job.

Here's an mp4 via imgur to illustrate what this css does https://i.imgur.com/g7jfrmE.mp4

iAN CooG

@Tiamarth Nothing happens when I hover on tabs, and I can scroll with mouse wheel when mouse pointer is on any tab, or right-click+wheel when pointer is on the page (no shift needed, I didn't even know it was required). I have in settings Switch tabs by Scrolling enabled. As I said, even with this mod, too many tabs and they get shrunk anyway to small squares. In other words, this mod isn't actually working on Win7, for me at least.

Tiamarth

@iAN-CooG

Nothing happens when I hover on tabs

Nothing should happen when you hover tabs, it's just that your mouse has to be in the tab region in order to scroll them.

and I can scroll with mouse wheel when mouse pointer is on any tab, or right-click+wheel when pointer is on the page (no shift needed,

That's a different feature entirely, one that's already built into Vivaldi. You're talking about switching tabs by scrolling, this mod makes it possible to make tabs scroll like you would scroll a web page, except horizontally. The intent is to improve tab management.

I didn't even know it was required).

I did mention in the original post that holding shift while scrolling is required, specifically that it was the biggest problem with this mod.

I have in settings Switch tabs by Scrolling enabled.

I don't have that enabled and forgot to test it with it enabled, but I did just now and the tabs do still scroll as intended but it's a little jarring because the tab also switches. Unfortunately there's no way that I know of to target the tabs only when user has that disabled, so there's nothing I can do about that.

In other words, this mod isn't actually working on Win7, for me at least.

Sorry about that, I don't have a Windows machine to test it on to debug. I don't see any reason why this shouldn't work on Windows, but maybe the html for tabs is written slightly different depending on platform or something.

luetage

@Tiamarth If you want to, I take a look at the scrolling. Shouldn't be too hard to add an event listener and simulate the shift. It will potentially stop working when you hide and show UI though… which would be another issue to be worked around.

What I can otherwise say is that due to the differences in tab bar styling between Linux and macOS, there seem to be several changes needed to make it work initially. I tested it yesterday and was able to scroll, but had quite some overlapping going on and alignment problems.

luetage

Also, the newest version doesn't work at all for me, imho it should be #browser.tabs-top, at least this is what I am using to specify under what circumstance certain css code should run.

Tiamarth

@luetage Good call, that's a much better way to write it, thanks. Updated.

Also if you were willing to try to get scrolling working properly with javascript that would be amazing. It'd be a much better solution.

@iAN-CooG Does the latest edit work for you? If not could you try adding important modifiers before ever semicolon? Like this: !important;

iAN CooG

@Tiamarth yes, now it's definately working, tabs are not small anymore and shift+scroll definately makes the tab scroll. It's still a bit wonky, I'll try adding !important to all sections to see if it changes anything.
EDIT: not really any great difference that I can tell. At least it does what promised now. I can see an use for tab hoarders, I don't need it personally.

Tiamarth

@iAN-CooG Wonderful, thanks for testing.

And thanks luetage for recommending the better selector that fixed the issue.

mediatorram

It an awesome feature so whether I need to add the codes to the browser or what?

Tiamarth

@mediatorram Here's a guide for installing custom css.

Phosphorus

@Tiamarth OMG I love it
This mod is very awesome, maybe should be a integrate with the browser.
Those who come from Firefox We will be grateful

Tiamarth

@Phosphorus Thanks! Let me know if you run into any issues.

I do wish this functionality was in the browser as a setting, but not with this implementation. This is a horrible hacky way of doing it that's just meant to tide me and other users over until competent people can do it properly

A Former User

Another version of this mod:

(function() {
    const minWidth = 150;
    let isModEnabled = false;
    let isScrollEnabled = false;
    function addStyle() {
        if (isModEnabled) {
            if (!document.querySelector('style#horizontal-tab-scroll-mod')) {
                let style = document.createElement('style');
                style.id = 'horizontal-tab-scroll-mod';
                style.innerHTML = `
                    .tabs-top .tab-strip,
                    .tabs-bottom .tab-strip {
                        display: flex !important;
                        flex-wrap: nowrap;
                        overflow-x: scroll;
                        overflow-y: hidden;
                    }
                    #tabs-container.top .tab-strip {
                        pointer-events: auto;
                    }
                    .tab-strip::-webkit-scrollbar {
                        height: 2px;
                        position: absolute;
                    }
                    .tab-strip::-webkit-scrollbar-button {
                        display: none;
                    }
                    .tab-strip::-webkit-scrollbar-track {
                        background-color: transparent !important;
                        border-width: 0 !important;
                    }
                    .tab-strip::-webkit-scrollbar-thumb {
                        background: var(--colorBorder) !important;
                        border-radius: var(--radius) !important;
                    }
                    .tabs-top .tab-position,
                    .tabs-bottom .tab-position {
                        position: initial !important;
                        transform: none !important;
                        display: inline-flex;
                        min-width: ` + minWidth + `px !important;
                        vertical-align: top;
                    }
                    #tabs-container.top .tab.tab-small.tab-mini .tab-header .title,
                    #tabs-container.bottom .tab.tab-small.tab-mini .tab-header .title {
                        display: flex;
                    }
                    #tabs-container.top .tab.tab-small.tab-mini .tab-header,
                    #tabs-container.bottom .tab.tab-small.tab-mini .tab-header {
                        padding-left: 6px;
                        border-left-width: 0;
                        border-right-width: 0;
                    }
                    .tabs-top .tab-strip .toolbar-tabbar,
                    .tabs-bottom .tab-strip .toolbar-tabbar {
                        display: inline-flex;
                        position: sticky;
                        right: 10px;
                        flex-shrink: 0;
                    }
                    .tabs-top.color-behind-tabs-off .tab-strip .toolbar-tabbar,
                    .tabs-bottom.color-behind-tabs-off .tab-strip .toolbar-tabbar {
                        background: radial-gradient(var(--colorBg) 0%, var(--colorBg) 50%, transparent);
                    }
                    .tabs-top.color-behind-tabs-on .tab-strip .toolbar-tabbar,
                    .tabs-bottom.color-behind-tabs-on .tab-strip .toolbar-tabbar {
                        background: radial-gradient(var(--colorAccentBg) 0%, var(--colorAccentBg) 50%, transparent);
                    }
                    .tabs-top .tab-strip .toolbar-tabbar .newtab,
                    .tabs-bottom .tab-strip .toolbar-tabbar .newtab {
                        left: unset !important;
                    }
                    .tabs-top .tab-strip .toolbar-tabbar .button-toolbar,
                    .tab-bottom .tab-strip .toolbar-tabbar .button-toolbar {
                        flex-shrink: 0;
                    }
                    #tabs-container.top .resize,
                    #tabs-container.bottom .resize {
                        width: calc(100% - 60px);
                        flex: 0 0 calc(100% - 60px) !important;
                    }
                    #tabs-container.top .sync-and-trash-container,
                    #tabs-container.bottom .sync-and-trash-container {
                        flex-grow: 1;
                    }
                    .tab-strip > span:last-of-type {
                        margin-right: 50px;
                    }
                    .tab-strip > span {
                        min-height: 30px;
                    }`;
                document.head.appendChild(style);
            }
        }
    }
    function scroll(e) {
        e.preventDefault();
        let offset = e.deltaY != 0 ? e.deltaY : e.deltaX;
        offset = offset > 0 ? 50 : -50;
        document.querySelector('.tab-strip').scrollBy(offset, 0);
    }
    function resizeTabs() {
        if (isModEnabled) {
            let tabs = document.querySelectorAll('.tab-position > .tab');
            tabs.forEach((tab) => {
                let width = parseInt(tab.parentElement.style.width);
                if (!tab.classList.contains('pinned') && width < 150)
                    tab.parentElement.style.width = minWidth.toString() + 'px';
            });
        }
        setTimeout(resizeTabs, 500);
    }
    function checkIsModEnabled() {
        vivaldi.prefs.get('vivaldi.tabs.visible', function (tabsVisible) {
            if (!tabsVisible) {
                isModEnabled = false;
                isScrollEnabled = false;
            } else {
                vivaldi.prefs.get('vivaldi.tabs.bar.position', function (barPosition) {
                    if(barPosition === 'top' || barPosition === 0 || barPosition === 'bottom' || barPosition === 3) {
                        isModEnabled = true;
                        addStyle();
                        vivaldi.prefs.get('vivaldi.mouse_wheel.tab_switch', function (mouseScrollSwitch) {
                            isScrollEnabled = mouseScrollSwitch ? false : true;
                        });
                    } else {
                        isModEnabled = false;
                        isScrollEnabled = false;
                    }
                });
            }
        });
    }
    function onPrefsChange(pref) {
        if (pref.path === 'vivaldi.tabs.visible'
            || pref.path === 'vivaldi.tabs.bar.position'
            || pref.path === 'vivaldi.mouse_wheel.tab_switch')
            checkIsModEnabled();
    }
    function scrollToActiveTab() {
        if (isModEnabled) {
            let tries = 0;
            (function scroll(){
                let tab = document.querySelector('#tabs-container .tab-strip .tab.active');
                if (tab)
                    tab.scrollIntoViewIfNeeded();
                else if (tries < 10) {
                    tries++;
                    setTimeout(scroll, 10);
                }
            })();
        }
    }
    function doMod() {
        checkIsModEnabled();
        vivaldi.prefs.onChanged.addListener(onPrefsChange);
        chrome.tabs.onActivated.addListener(scrollToActiveTab);
        document.querySelector('.tab-strip').addEventListener('wheel', scroll);
        resizeTabs();
    }
    setTimeout(function wait() {
        let activeTab = document.querySelector('#tabs-container .tab-strip .tab.active');
        if (activeTab)
            doMod();
        else
            setTimeout(wait, 300);
    }, 300);
})();

I'm not sure if resizing the tabs also with JS is useful in any way — it looks like Vivaldi doesn't care about it when moving tabs with mouse.

Edited

dude99

Anyone try this yet?
chrome://flags/#scrollable-tabstrip

I discovered it a while ago, but never use it because I only use vertical tabbar.

Scrolling tabs horizontally like in Firefox

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...