Tree Tabs

kroppy

I'm currently working on Tree Tabs extension, for everyone interested I have an experimental version you can install and test in Vivaldi.

Latest stable repository:
https://gitlab.com/kroppy/TreeTabs

Stable packed zip files (Last Update: 13 December 2018):
https://drive.google.com/open?id=0B3jXQpRtOfvSdkN4RW5XN2tOc3c

Nightly code (Last Update: 13 December 2018):
https://gitlab.com/kroppy/TreeTabsNightly

Nightly packed zip files (Last Update: 13 December 2018):
https://drive.google.com/drive/folders/1jf-8QtsaFlVjvFFBaU3PYcN8C6R7VcJG

Here are themes:
https://drive.google.com/open?id=0B3jXQpRtOfvSelFrTEVHZEx3Nms

Steps to install:

Download the file and unpack zip (somewhere you will always keep the extension)
Go to extensions page in Vivaldi
Turn on Developer mode (at the top) and click on "Load unpacked extension..."
Point to unpacked zip you downloaded at point 1 and extension should show up on the list
Click on blue link "Options" below "Tree Tabs"
Once in Options you can now add the extension as a Web Panel, to do so, copy the Web extension link and simply add a Web panel with that link.
Your link should look like:
chrome-extension://bjnbllmhndfdfhimbfabdhnfhppjegep/sidebar.htm"
But in your case "bjnbllmhndfdfhimbfabdhnfhppjegep" will have some other random letters.

Steps to upgrade:

Download new version from the link to latest stable zip packages
Disable Tree Tabs in Vivaldi from extensions page (uncheck "enabled" checkbox, you can keep Vivaldi on, just minimize it)
Unzip files to the old location where you keep Tree Tabs and overwrite files.
After that just enable Tree Tabs back in Vivaldi and reload web panel so it can "reconnect" to background script.

Remember, this extension is experimental. Use at your own risk.
Known problems:

Expect to occasionally lose Trees at some browser restarts
Sometimes same content can be seen with multiple windows, so you have to refresh web panel in each window

luetage

Well it works. For people who like tree-style tabs this is useful.

If you delete the root of a tree structure, shouldn't all tabs in the structure close?

It seems there is only one layer, if you open a tab from a tab that is already opened from another tab, it won't make another layer.

There doesn't seem to be a way to make a new tab in the original layer, all tabs you open anew (even with the newtab shortcut/button) are a subtab.

kroppy

@luetage Yes, for now. You can arrange them manually. It will be available in options later on.
If you want to change it now, open \scripts\global_variables.js
and change:
var MaxTreeDepth = 1;
to
var MaxTreeDepth = -1;

You can change it as follows:
if MaxTreeDepth is -1, tree level is unlimited, if 0, tabs are placed flat, if any number above 0, when a maximum depth is reached, tabs are placed as siblings of the active tab

kroppy

@luetage said in Tree Tabs:

If you delete the root of a tree structure, shouldn't all tabs in the structure close?

Sorry missed that, same as above, \scripts\global_variables.js
change
var PromoteChildren = true;
to
var PromoteChildren = false;

kroppy

@luetage said in Tree Tabs:

There doesn't seem to be a way to make a new tab in the original layer, all tabs you open anew (even with the newtab shortcut/button) are a subtab.

I didn't implement distinction of the "parent" on tabs creation yet. In most cases Vivaldi's response is slow and once tab is created it may jump around. For now tabs are placed "below" active. I will implement it in the future.

luetage

@kroppy Both fixes work flawlessly. About tab as root parent (not a child of another tab), wouldn't it be possible to place a dummy tab in the structure for now (a tab that I don't need to have existing on my actual tab bar)? As it is now, it works, but I need to keep the tab Vivaldi creates when opening the application around, to place my tabs as root parent from the original tab.

But yeah, if you have it planned it's all good, I think that's what's needed to make it really useable.

luetage

Ahh, sorry -- didn't notice that you can drag and drop tabs to make them parents. It works already without the workaround described above.

kroppy

Added some first options, in options page.
If some options don't work (or extension acts strange) reset options and apply.

kroppy

For now toolbar is half working, I will fix it later on.

luetage

Nice, that's looking promising.

mdekkers

@luetage This looks brilliant! Many thanks for making this. How can i use the Dark theme?

luetage

I don't think the dark theme is finished yet, therefore there is no option to activate it.

I tried switching all files between the folders and renaming the css files from standard to dark and vice versa, I get black settings and a black sidebar and the icons are ready, but the actual tabs seem to need a little more work.

mdekkers

@luetage OK, cool, looking forward to updates, this extension is what I have been missing!

kroppy

@luetage said in Tree Tabs:

I don't think the dark theme is finished yet, therefore there is no option to activate it.

I tried switching all files between the folders and renaming the css files from standard to dark and vice versa, I get black settings and a black sidebar and the icons are ready, but the actual tabs seem to need a little more work.

Not yet. I must polish things up first, and after that I will activate the dark theme.
I have in plans to make selectors for colors, so you could set things up to match your Vivaldi color scheme.
I have updated to new version with a new options for tabs opened from Ctrl+T shortcut.
Unfortunately I had no more time to touch the toolbar.

kroppy

Uploaded new update:

finished toolbar layout
search finally works

To do:

"Unload tabs" button
menu
fix color consistency in light theme
dark theme and custom theme
bug hunting
release on Opera's extensions page

I have to take a break for few days, in the meantime, please test and report if you find any bugs.
Thanks

kroppy

I forgot to add to "To do" list

drag&drop between windows

dvdgsng

Thanks, this is a very promising workaround for the lack of native tree-style tabbing. Is there a github/bitbucket repo? Would be great if we had a proper issue tracker for this.

kroppy

@dvdgsng said in Tree Tabs:

Is there a github/bitbucket repo? Would be great if we had a proper issue tracker for this.

Not yet. I change too much stuff right now, and code is a mess.

kroppy

Update:

almost done with dark theme (matching Opera dark theme colors) you can try it out, but I still have to fix a lot of colors
added menu (not finished yet)

More to do:

another light theme matching opera new light theme
another dark theme matching vivaldi
change colors for "search result"

I'd like to hear your opinion:

search results are selected (green color, I will change it later to something more pleasing), when you click on any tab results tabs will unselect and turn yellow, to select again use ctrl and click on tabs, or re-input search
Question is: do you like search results to be automatically selected? You can drag them around immediately...
Or would it be better to be optional?

kroppy

I made some tests for media icons not working and it results that Vivaldi has a bug.
Reported BUG VB-27080 and we will see when Vivaldi team fixes it.
I could do periodic refresh for all tabs and check if any tab changed its audio status, but it can be a bit heavy....

Fixed blurry titles on tabs. It looks like text is blurry when I use opacity in css, especially on discarded tabs, where opacity was as low as 60%, so I will use only colors in the future, but it will limit favicons to be half transparent unless I change the way how tabs header is arranged.