Solved Horizontal Tab Scrolling Instead of Shrinking
-
I agree, I have a friend who wants to have this feature, it is remarkable that having so many options (including customizing the width of the tab used) this has not been implemented. I hope it will be included in some next version, this post has plenty of time.
-
+1
/agree
-
I need this feature. I think right now I have around 130 tabs that will read later.
Here is one more workaround for switching between tabs:
Right-click + Wheel scroll, in Vivaldi it is done better than in Waterfox + Mouse Gestures Suite extension as here, all tabs are visible and there is the scrollbar!However, I want to try to mod Vivaldi and find some workaround. Please, tell me at which line of the code and what file I need to check to start.
If it is very hard to implement buttons to scroll the tabs, why can't we shrunk the tabs a little and add a horizontal scrollbar?
https://pasteboard.co/JpqDHX0.png -
Unfortunatly right click + wheel is just impossible (try) by left handed folk (like me)
-
@StephaneA Try Ctrl+Tab instead.
-
@Pesala
I can't use my right hand -
@StephaneA The Tab key is on the left; so is the Ctrl key.
-
Oh you mean use a shortcut instead of the mouse, sorry I did not understand.
Won't do. What we ask here is a confortable option to use the mouse instead of the keyboard. -
@StephaneA
Hi, I don´t understand your problem with right click + wheel.
I am right handed but use the mouse with the left hand since a few weeks.
Need some days to get familiar with it but I don´t have problems to use right mouse button and scroll with the middle mouse wheel with my left hand as right handed person.Cheers, mib
-
@StephaneA The other method with just the mouse is to roll the scrollwheel on the Tab Bar.
-
Yes you are right you can scroll tabs wtih the mouse wheel but things get uggly when you've got 130 tabs for example, that's all the point of this thread.
The two things: using the wheel to scroll tabs and tab shrinking are linked. The first one is useless at a certain point if you don't have the second one. -
Hello everyone.
So, I was able to find a workaround by adding a scrollbar to the tab stackbar.
Instead of adding the buttons to scroll the tab stack element, you can add a scrollbar and quickly scroll to the position you need. And the tabs don't shrink at all!
Here is the screenshot:
First, here is the guide for modding Vivaldi:
https://forum.vivaldi.net/topic/10549/modding-vivaldi/8
Proceed only after you sure that you're ready.Here is a small guide:
- Open the
bundle.js
file. - Find the
flexDirection
string. - Right after that string, there will be the
width
parameter. Add+20000
after thea
variable. That will add maximal width for the tab stackbar.
- Now you need to add custom CSS. The link above describes how to do that.
Adding these style rules should be enough:
/* to actually show the scrollbar */ .tab-strip{ overflow-x: scroll; overflow-y: hidden; } /* to have the minimal tab width and properly see the tabs' names and icons */ #tabs-container{ min-height: 40px; }
Enjoy!
P.S. There is an issue with this approach. If you open a new tab, the scrollbar position doesn't change, so if the default position of the new tab is "most right after all other tabs", you need to manually scroll to that tab.
- Open the
-
@ryukusu
It doesn't work for me. The scrollbar doesn't scroll, it doesn't shrink when I add tabs, the navigation arrows left and right to the scrollbar don't respond at all either.
I've followed your instructions and I think I did all well. I did the process a second time this time I reseted all my settings to the default ones just to be sure but still it doesn't work properly. -
@StephaneA
Which operating system and Vivaldi's version do you use? Did you restart the browser or open a new window to test the changes?I use Linux and my Vivaldi version is 3.2.1967.41.
Just in case, here are the files:
https://yadi.sk/d/AWuROKV8VFATmQ?w=1 -
@ryukusu
I am on Windows 10 and Vivaldi 3.2.1967.47 -
@StephaneA, @ryukusu: I can confirm the problem with Windows 10 and Vivaldi Snapshot 3.3.2022.35, the scrollbar does not work as intended, it does not work at all.
-
@patrickweiden, @StephaneA
Thank you for the clarification.
The workaround should work on Windows:
But the issue seems to be related to the "Appearance => Use Native Scroll" option. I have this option checked because I need the "Close" button on the left side.I think we need to add an event listener to the scrollbar to prevent the window drag and make the scrollbar work.
-
@ryukusu: Using "Appearance => Use Native Window" results in a working scrollbar here!
Is there a way to have the scrollbar
(a) in a non-native window appearance ("event listener")?
(b) focusing on the currently activated tab?
(c) to exclude the pinned tabs? (Pinned tabs should not be scrollable...)
(d) "lift" the new-tab-plus-sign a bit in order to not be covered by the scrollbar itself? (Or maybe even have the new-tab-plus-sign outside of the scrollbar?)Thanks and best regards!
-
(c) to exclude the pinned tabs? (Pinned tabs should not be scrollable...)
It may be a nice idea for visual design, but there are a lot of things to do.
The best way would be to create an additional container for it and move the pinned tabs there.
You can create a javascript file, connect it in thebrowser.html
file, and add the following code to the JS file:add_pinned_tabs() function add_pinned_tabs(){ var pinned_tabs_root = document.createElement("div"); pinned_tabs_root.style.zIndex = 999999; pinned_tabs_root.className = "pinned_tabs_root"; setInterval(function(){ var resize = document.querySelector(".resize"); if (resize && resize.firstChild && resize.firstChild.className != "pinned_tabs_root"){ resize.insertBefore(pinned_tabs_root, resize.firstChild) } var pinned_tabs = resize.querySelectorAll(".tab.pinned"); for (var i = 0; i < pinned_tabs.length; i++){ pinned_tabs[i].children[1].style.visibility = 'hidden'; pinned_tabs_root.appendChild(pinned_tabs[i].parentNode.parentNode); } }, 3000) }
Here is the JS file with that code:
https://yadi.sk/d/v2BW4-dAA0Q-UA(d) "lift" the new-tab-plus-sign a bit in order to not be covered by the scrollbar itself? (Or maybe even have the new-tab-plus-sign outside of the scrollbar?)
That can be easily done with CSS:
.newtab{ top: 0px !important; right: 30px !important; left: unset !important; position: fixed !important; z-index: 9999 !important; }
The plus button will be over the most right tab.
Here is the updated CSS file:
https://yadi.sk/d/maWrsUBThZnAOwFor now, the solutions above work only for the "Native Window".
Is there a way to have the scrollbar
(a) in a non-native window appearance ("event listener")?
(b) focusing on the currently activated tab?Today I didn't have time to find a solution, but I will check it tomorrow.
-
Hello everyone,
I have good news!Is there a way to have the scrollbar
(a) in a non-native window appearance ("event listener")?It seems, that can be done with pure CSS! You just need to add the
-webkit-app-region: no-drag;
line to thetab-strip
element:.tab-strip{ overflow-x: scroll; overflow-y: hidden; -webkit-app-region: no-drag; }
(b) focusing on the currently activated tab?
That should require using Javascript. But as I already connected a custom JS file, I decided that I don't want to reverse-engineer Vivaldi's JS files. So, I added the following code:
var active_tab_position = 0; setInterval(function(){ var resize = document.querySelector(".resize") var active_tab = resize.querySelector(".active").parentNode; var new_active_tab_position = active_tab.offsetLeft; if (active_tab_position != new_active_tab_position){ active_tab_position = new_active_tab_position; document.querySelector(".tab-strip").scrollTo(active_tab_position,0) } },400)
If you want, you can decrease the interval, but I didn't test how it will work.
By the way, I noticed that the plus button is placed right above the Maximize button in the "non-native window" appearance.
I tried adding it near the trash icon with Javascript, but it breaks Vivaldi. Probably because it opens a new tab in an unexpected position.
Then I tried adding a custom HTML element and call the click event of thenewbutton
elements, but the click event doesn't work. And the new tab is not opened bywindow.open
! Here, we need to get the "current window" object, in Waterfox it wasgBrowser
, inPalemoon
and oldFirefox
it was something else. So, I leave that part for the dev team.For now, I found, that you just need to choose which view you prefer and adjust the
top
parameter:.newtab{ /*native window:*/ /* top: 0px !important;*/ /*non-native window:*/ top:20px !important; position: fixed !important; right: 30px !important; left: unset !important; z-index: 9999 !important; }
Here are the latest versions of the customization files:
https://yadi.sk/d/AWuROKV8VFATmQ?w=1