Tree Tabs

luetage

Thought I'd share a theme here. Tried to appropriate it for Vivaldi's subtle/light themes (and my own highlight color).

Hadden89

Cool, I'm testing and it works nicely
It only miss an "audio icon" (probably not implemented yet).
On latest stable, I see a glitch in the panel (due dark theme?)
Other web panels are fine.

kroppy

@Hadden89 Ok, should be fixed now.

Hadden89

@kroppy said in Tree Tabs:

@Hadden89 Ok, should be fixed now.

Thanks.
Nice update, the glitch is gone and the audio icon is present.
About that, consider making it clickable (mute/unmute status) and allow to move on the right - so it doesn't overlap tab favicon on left - and add an option to always hide "close button" as I use only middle click for that. Great work.

kroppy

@Hadden89 said in Tree Tabs:

@kroppy said in Tree Tabs:

@Hadden89 Ok, should be fixed now.

Thanks.
Nice update, the glitch is gone and the audio icon is present.
About that, consider making it clickable (mute/unmute status) and allow to move on the right - so it doesn't overlap tab favicon on left - and add an option to always hide "close button" as I use only middle click for that. Great work.

@Hadden89 Audio icons were always there. It's Vivaldi's internal bug that it does not refresh correctly. I just made my own checker for media icons for Vivaldi. I will upload version 0.0.12 in few hours so wait for that. And by the way, media icons are clickable, it just does not give the visual input that you can click on them!
As for options, if time allows me, I will implement that. I will have to ask folks to translate options page for me as well. Hopefully they won't get mad

kroppy

Sorry for delay. Update 0.0.12 is now up. Media icons should now refresh.

kroppy

@luetage Cool Can I add that to my google drive? I will name theme correctly by your nickname if you want.

luetage

@kroppy Sure, upload it. And no, call it whatever you want, my name serves no purpose under these circumstances.

kroppy

@luetage said in Tree Tabs:

@kroppy Sure, upload it. And no, call it whatever you want, my name serves no purpose under these circumstances.

Why not? Anyone deserves some credit for their work. That`s what I think.
Anyway I will reset the toolbar for it, so anyone will be able to start from default and put their own.

luetage

I just noticed you have the names of the others in the download section too. Well, I don't mind either way, do as you please. I just fixed one more thing that bugged me in the theme, so I updated it just now.

kroppy

@luetage Ok. Same link?

luetage

Yep, same link.

kroppy

@jimbo1qaz Yes. I don't sycro them, I save my own tabs order and since tabs are ordered in trees, there is no direct correlation with flat array of tabs on top. The other reason is to avoid compatibility issues with other extensions, like "New tabs at end", "Sort tabs", "Tabs open relative" and similar. All mentioned would mess up your trees. Slowly I will be implementing sorting, closing trees, maybe some saving trees for later and so on. And who knows... groups. All depends how much time I will have this summer.

Njol

Finally a useful tree tabs extension, and I can even style it black/orange like my Vivaldi

For now, I have just one inconvenience to report: The buttons to open/collapse a group are pretty small and thus difficult to click on. I made my own custom CSS file to make them larger (from 6x6px to 10x10px), which makes them much easier to click on. Instead of increasing the actual size of the buttons, one could also only increase the size of the clickable area, which could also be made to fill the whole available space around the button.

Also, for some reason tabs' titles are not vertically centered for me (using the largest tab size available in the options) and changing a tab's vertical-align doesn't seem to help (maybe because the tab title is higher than the tab itself). Adding a margin-top of -1.5px helped center the titles for me, but is a very hacky solution.

I also have suggestions for two new options that I would like to see (and already hacked together for myself) which might or might not be useful for others: a different hover color for the toolbar icons (e.g. using .button:hover:not(.on) .button_img {background-color: var(--button_hover_icons, #808080);}), and an option to disable close buttons altogether (I always close my tabs with the middle mouse button or ctrl+W, making the close button redundant and potentially harmful when misclicking).

PS: here's a screenshot of how it looks with my settings & changes (the pin button is hovered and thus orange):

kroppy

@Njol said in Tree Tabs:

For now, I have just one inconvenience to report: The buttons to open/collapse a group are pretty small and thus difficult to click on. I made my own custom CSS file to make them larger (from 6x6px to 10x10px), which makes them much easier to click on. Instead of increasing the actual size of the buttons, one could also only increase the size of the clickable area, which could also be made to fill the whole available space around the button.

Yeah, you are right, I should scale them with tabs size, but some may not like them bigger.
There is a lot more to just expand_box_size, try modifying defaults.js, you will find in TabsSizeSets below //4, to expand_box_size, you should consider 1px of border for each side, so in reality it's 7x7 px.

"expand_box_size": "5px",
"expand_box_top": "8px",
"expand_box_left": "3px",

"expand_line_h_top": "11px",
"expand_line_h_width": "12px",
"expand_line_h_oc_width": "3px",

"expand_line_v_top": "-11px",
"expand_line_v_left": "0px",
"expand_line_v_last_height": "23px"

expand_line_v, stands for vertical lines, expand_line_h stands for horizontal, lines have positions width and height.
Hard to explain at spot what is what so you just have to play with it...

It's not on top of my priority list, but I might do an option to that.

Also, for some reason tabs' titles are not vertically centered for me (using the largest tab size available in the options) and changing a tab's vertical-align doesn't seem to help (maybe because the tab title is higher than the tab itself). Adding a margin-top of -1.5px helped center the titles for me, but is a very hacky solution.

Like before, try modifying defaults.js, you will find in TabsSizeSets in set //4

"tab_height_line": "27px",

to

"tab_height_line": "26px",

I will fix that as soon as possible.

To see changes after saving defaults.js file, reload options page, set tabs size to be smaller and back to bigger, this way theme will re-save itself, after that refresh webpanel on the side.

I also have suggestions for two new options that I would like to see (and already hacked together for myself) which might or might not be useful for others: a different hover color for the toolbar icons (e.g. using .button:hover:not(.on) .button_img {background-color: var(--button_hover_icons, #808080);}),

Yup, I will consider it.

and an option to disable close buttons altogether (I always close my tabs with the middle mouse button or ctrl+W, making the close button redundant and potentially harmful when misclicking).

Yes, this is already on my to do list.

PS: here's a screenshot of how it looks with my settings & changes (the pin button is hovered and thus orange):

Nice, only expand lines are moved by your mod, but I guess you will be able to fix them

Werkaster

What would you say are the main differences between this extension and the well-developed and hugely successful "Tabs Outliner" for Chrome? I'm interested in both positives and negatives as I'm not choosing sides and I am no expert in what you're doing, not yet anyway. One thing, Tabs Outliner isn't updated at the moment, so that's a big minus, but it does a lot of things right.

For example, I could just drag 1200 tabs from that extension directly into Evernote and everything falls into place without any problem at all, even with formatting left if I remember correctly. That is something I would love in every tab extension.

kroppy

@Werkaster said in Tree Tabs:

What would you say are the main differences between this extension and the well-developed and hugely successful "Tabs Outliner" for Chrome? I'm interested in both positives and negatives as I'm not choosing sides and I am no expert in what you're doing, not yet anyway. One thing, Tabs Outliner isn't updated at the moment, so that's a big minus, but it does a lot of things right.

For example, I could just drag 1200 tabs from that extension directly into Evernote and everything falls into place without any problem at all, even with formatting left if I remember correctly. That is something I would love in every tab extension.

I never really used Outliner, I installed it once, tried it and didn't like it. I don't know the logic of it and how it works, so I made a mess with my session using it. I didn't bother afterwards.

I developed my first vertical tabs extension mainly for myself, and shared it as it grew big and complex. Second one I developed has groups management, and this is the third one, which has trees. In the future I want to merge them all into one, but probably it will be another fork.

It all started 2 years ago. At the beginning it was just my own test working only for Opera to manage my huge session (I talk about 1000+ tabs). Opera back then just released sidepanel in version 29 and I decided to do something just like many vertical tabs extensions for Firefox.
People liked it and asked me if I could add groups management, so I did. Shortly after comments with requests for trees started to pop up, so I started to work on it, but in the meantime I started using Vivaldi, since Vivaldi has a Web panel, in which you can open any website/extension as a sidebar, I made it for both Vivaldi and Opera. Now Firefox started web extensions compatibility, so the idea is to make it 100% compatible with all 3 browsers.
This extension is more similar to what you have in TST rather than in Outliner even if it was not intentional.
I know that people that use TST will complain, for deficiencies, but at least they will have something to manage tabs in Firefox until piro converts his extension. Anyway it was never my intention to compete with anyone and making yet another extension that does same thing as others.
My goal is to make it faster, more stable and pack as much features as I can. I'm always open for propositions, of course within a reason of how much I can change and how much I can do in my limited free time.

So if you want to compare just install it and try it out, don't ask me about the differences as I don't know.
If you like it use it, if you don't don't use it, simple as that.

kroppy

@chronometric said in Tree Tabs:

@JuniorSilva30 said in Tree Tabs:

the extensions that do the same are being abandoned because Firefox will change in version 57

The current plan of both Tree Style Tabs and Vertical Tabs Reloaded is to convert to WebExtensions for continued compatibility. The roadmap issue and the other project support pages do not mention any plans for abandonment at this time...
https://github.com/piroor/treestyletab/issues/1224

@kroppy I just installed so don't have much constructive to say, besides that you've done a very impressive job already ^^ I've been using vertical/hierarchical tabs since the abandoned projects that inspired TST, and I can't picture interacting with web pages without it. Thanks so much for looking out for us

That is good news. People that like my extension will stay with mine, those who will want to go back to TST will go back. I wonder if piroor started to work on it already. It just feels like there is still a lot of time, but actually time flies fast. And TST is huge!

o0beaner

@kroppy, a couple of things:

I am so very appreciative of this plugin. Vivaldi provided everything that I wanted in a browser, minus tree style tab management, and you bridged the gap.
Is the selection of multiple tabs officially a part of the extension? I could almost swear that I've managed to do it a couple of times within the context of Tree Tabs, but 95% of the time, I cannot get it to work. If it is not, is that something that you could implement? Ctrl/Cmd+click to add or remove a tab from the current selection, or shift+clicking to select everything in between the currently highlighted tab and the tab that you are clicking, as is typical of many file management applications.

I would often like to take multiple tabs and nest them under a parent tab, and then there is also a (bug?) scenario in which Tree Tabs loses all of my tabs, and the only way to recover them is to create a new Vivaldi window, turn on the tab bar and drag them from one window to the other. The tabs all re-register in Tree Tabs, but they lose their hierarchy, so I have to re-structure the whole mess. My work often dictates that I have 60-70 tabs open simultaneously, so this can be quite arduous. The ability to select multiple tabs would be a huge help.

At any rate, again, thank you for your hard work.

kroppy

@dLeon Yep