Add Tree Style Tabs integration

[Zabooby]

I'm curious to know your reasoning for adding TCR integration instead of the much more popular and feature rich Sidebery or even Tree Style Tabs?

[unseen-ninja]

I gotta be honest – I don't really care much about vertical tabs myself. The TCR integration exists because at some point a friend sent me some half-baked code from their setup for it, and I've just polished that for the v3-rework of Cascade. If someone would want to make a working integration for Sidebery or/and TST I wouldn't mind putting it up, but it's also a lot of work I can't really justify for myself as of rn.

[Zabooby]

I am planning to update this Sidebery setup.

Would you then be interested in integrating it into Cascade?

[unseen-ninja]

Oh, yeah! That would be lovely actually. Feel free to reach out and share that once done and then we can make it into a full integration on the repo here. c:

[Zabooby]

I've decided to switch to TST, after updating most of the Sidebery setup I have come across multiple (small) bugs that were annoying my ocd brain.

TST has way less bugs (still a few kinks to figure out) and has a bigger community around it and I'm making quick progress in making a setup similar to the one above.

Would you still be interested in integration?

[unseen-ninja]

Yeah sure! I don't mind either way, and it's not going to be possible to please everyone anyway. So either implementation is fine in my book. ^—^

[Zabooby]

Ok so here is what I have so far, I've tried to keep the code as minimal as possible to avoid conflicts: userChrome.css TST settings

Here are all the issues I'm not sure how to fix:

• Only the first pinned tab is visible when the side bar is collapsed any others are hidden

  • 
  • 

• If an unpinned tabs is playing audio/muted the icon is only visible when sidebar is expanded, not an issue for pinned tabs (not sure if this is meant to be a feature)

  • 
  • 

• There is a weird overlapping effect with pinned tabs when switching to the new tab page, this only happens when switching from any other page to the new tab page only. -

• The right click menu on tabs doesn't match themes or css customisations, but I've opened an issue in the TST repo for this

  • piroor/treestyletab/issues/3322

• Also how do you expand the url bar to fill the space when horizontal tabs are disabled?

Other than that, animations are silky smooth and everything else works as expected!

[unseen-ninja]

Hmm, these are indeed some issues that would need to be ironed out. But apart from that it really does look nice! Thank you so much for this. Could you maybe raise a (drafted) PR for the changes? That way I could take a look and contribute with potential fixes straight to your fork.

Also how do you expand the url bar to fill the space when horizontal tabs are disabled?

I just set it to the full width, and completely hide the Tab Bar.

#TabsToolbar { display: none !important; }
#nav-bar { width: 100vw !important; }

[Zabooby]

Just to clarify, can you reproduce all the issues I mentioned?

[unseen-ninja]

I can, yeah. I also now have issues with the sidebar not collapsing properly at all after I have restarted Firefox.

Okay.. so a Firefox update just completely borked everything for whatever reason.

[Zabooby]

Weird, I just restarted Firefox multiple times and have not seen any additional issues

I'm on version 112.0.1, you?

Also it doesn't look like you added the TST settings from here. Have you copied it here:

[unseen-ninja]

It's getting weirder and weirder. I just updated to 112.0.1 whcich broke it. The CSS for TST also is put in place, but it doesn't load for me rn.

I guess I'll go on a little bit of a debugging hunt! :D

[unseen-ninja]

Okay.. resetting everything and then slowly adding stuff back step by step at least gets me this far. Not quite what you have, but it's a lot better than what I had in the screenshot above.

[Zabooby]

A couple questions:

• Are you on Windows
• Are you still getting the issues I mentioned earlier
• Could you share you're new css files

[unseen-ninja]

I'm not, no. Currently I'm on a Mac, but I can give the whole thing a shot at home on a Windows PC later today. But since the Sidebar doesn't collapse at all for me rn I can't reproduce the issues mentioned above. Juding by the behaviour I get I would assume that they still persist tho.

This is how things are with just the default Cascade Stuff, and the TST CSS added on top.

https://user-images.githubusercontent.com/35840154/233070187-a9bce523-0a80-4fe1-a4f8-152a5934d6c8.mov

Turns out I had some of the TCR Styles enabled on my end, which caused some weird behaviour in the beginning. Not having that results in what can be seen above. And on my machine nothing from your userChrome.css seems to have any effect on how the Sidebar behaves. o:

[Zabooby]

So from line 47 till the end is in the addons settings, correct?

Is your userChrome empty other than the Cascade stuff?

This is the code for autohiding the sidebar (add to userChrome):

/* Shrink sidebar until hovered, when using Tree Style Tab */
:root {
  --thin-tab-width: 30px;
  --wide-tab-width: 200px;
}

#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
  min-width: var(--wide-tab-width) !important;
  max-width: none !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.2s var(--tst-sidepanel-hide-delay) !important;
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  z-index: 2;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  transition-delay: 0s !important;
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  z-index: 1;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

does everything break when you add it?

[unseen-ninja]

The stuff from this file is in my userChrome.css file, and these are in the TST-Addon settings; right? It seems to look like that's the way is should be, both from your description and the code itself.

Okay.. Update! I've once again started from a blank slate (new FF profile) and with this it does in fact work like intended! So something is borked with my default profile. I can now (again) reproduce all the mentioned issues aside from:

There is a weird overlapping effect with pinned tabs when switching to the new tab page, this only happens when switching from any other page to the new tab page only.

[unseen-ninja]

Only the first pinned tab is visible when the side bar is collapsed any others are hidden

For fixing this I'd opt to prompt the users to just disable the faviconisation for pinned tabs in the addon settings. That results in them just being treated like normal tabs displaywise.

Before:

After:

[Zabooby]

I like you're solution as it also stops the weird overlapping effect, but then there is no way to discern if a tab is pinned or not, could there be a way to keep pinned tabs distinct maybe using a separator?

Also I found a related bug to the overlapping effect, if you have bookmarks toolbar enabled, as well as pinned tabs, switching to the ntp causes them to overlap.

https://user-images.githubusercontent.com/78969986/233093983-33d8c39a-744e-4193-b930-8daa3713e192.mp4

In the clip I switched from the tst tab to a new tab.

[unseen-ninja]

Hmm.. I still cant reproduce the weird clipping behaviour at all. It might be something that happens only because of the windows config? I'll check on that later.

Regarding the pinned tabs – I'm struggeling a little to select the last pinned tab, as it won't work with :last-of-type or :nth-last-child etc. But we can always just take the first non-pinned tab via .tab.pinned + :not(.tab.pinned) and give it a border on top or something similar. What annoys me a little is that the tab content isn't vertically centered in it's surrounding box.

.tab.pinned + :not(.tab.pinned) { background: pink; }

[Zabooby]

It is vertically centred for me:

[unseen-ninja]

I hate Firefox so much sometimes.

[unseen-ninja]

Proposal tox fix the centering:

.tab,
.tab.pinned {
-  height: 2.8em;
+  padding: .6rem 0;
}

[Zabooby]

It looks fine to me.

[unseen-ninja]

/*** Hide fake context menu, when right clicking empty area***/
ul[id="tabContextMenu"] {
  display: none;
}

This part of the CSS seems to have some unintended side effects that break the usability of the integration, as it still opens the context menu – it's just not visible. Resulting in a non-hovered yet hovered state.

https://user-images.githubusercontent.com/35840154/233112215-7e28e5b7-f0b0-451a-b501-2342c0e0a11a.mov

[Zabooby]

Ok we should remove that line then, I will also mention it in the issue I opened in the tst repo.

[unseen-ninja]

Another thing I've found is that if the cursor is right between two pinned tabs it does not count as hovered for the #tabbar as well. :/

https://user-images.githubusercontent.com/35840154/233141924-eb1786d6-46fb-47b9-aec7-e4873b372749.mov

[Zabooby]

I think that's happening because of this:

.tab,
.tab.pinned {
  padding: .6rem 0;
}

Without it I can't hover between tabs.

Also have you checked out the snippets from the wiki there might be some helpful stuff?

Maybe this alternate method to hide the sidebar could fix some issues?

[Zabooby]

I spent some time testing the alternate method to hide the sidebar (taken from the wiki), at it seems to fix the pinned tab issues, they are now all visible when auto hiding.

https://user-images.githubusercontent.com/78969986/233316857-bc26e7ce-3c22-4541-a0d6-706e5378fc11.mp4

This method can also fix the sound/mute icon issue, but it still needs some tweaking.

The icon overlapping effect doesn't happen and although the bookmarks toolbar still overlaps it slides down to fix itself.

Now the only problem I occasionally get is this weird diagonal effect with pinned tabs.

Other than that I have no other issues.

[unseen-ninja]

Lovely; that really does look primising! Could you update the repo with your code like it is now? c:

I still think that while the pinned tabs may work like this (most of the time) it's still cleaner to use the settings to not faviconise them. They take up the vertical space anyway, so why not just have them be there all the way.

Regarding the sound icon … I'm wondering if it's possible to recreate the icon Cascade uses for the regular tabs? As this would positioned on top of the favicon by default it wouldn't cause issues with the collapsed sidebar.

[Zabooby]

Fair enough, do you have the code to have a border to separate them?

Sounds like a great idea, but remember to have the icon in the same position as they appear with pinned tabs.

[Zabooby]

This fork of FlyingFox has the sound icon visible with autohide:

It also has way smoother animations, could we just copy these things over?

[unseen-ninja]

Oh! They are using the right-aligned setting for TST. That is such a smart move actually! We def. can build on that idea, yeah. And since FlyingFox also is MIT licensed, so we can take part of the code and work it into Cascade – ofc giving credits when we do so. c:

[kubakakauko]

What's this bar on the right called? I'm trying to get rid of it with no avail yet.

First i thought this was some sort of a sidebar however I came to the realization that it must be something else.

It is gone when the hover animation is triggered.

[kubakakauko]

What's this bar on the right called? I'm trying to get rid of it with no avail yet.

First i thought this was some sort of a sidebar however I came to the realization that it must be something else.

It is gone when the hover animation is triggered.

I found out the answer! Its a splitter. After adding the code below to userChrome.css the issue is gone.

/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}

[devxan]

Is this still planed as an Integration? :monocle_face: I'd love to try out TST with cascade

[Zabooby]

Unfortunately I've been super busy with exams. I've also switched to this theme.

@andreasgrafen I've unassigined myself from this issue, but I'll keep it open if anyone else is interested in coming up with a solution.

[Mikilio]

I just happened to make a relatively aesthetic setup with sidebery and just wanted to share it.

Sideberry conf: sidebery-data-2024.01.30-08.31.36.json

userChrome.css snippet:

#TabsToolbar { display: none !important; }
#nav-bar { width: 100vw !important; }

#browser { position: relative; }
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header { display: none; }

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) {

  display: block;

  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;

  min-width: 30px !important; max-width: 30px !important;

  border-right: none;

  transition: all 0.2s ease;

  overflow: hidden;

}

[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
  min-width: 10vw !important;
  width: 30vw !important;
  max-width: 250px !important;
}

[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
  height: 100%;
  max-height: 100%;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) ~ #appcontent {
  margin-left: 30px;
}
#main-window[inFullscreen][inDOMFullscreen] #appcontent {
  margin-left: 0;
}
/* Removes gap between active tab highlight and edge of bar */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] ~ #sidebar-splitter {
    display: none;
}

Thank you for Cascade! I hope this helps!

[Mikilio]

I just stole most of the logic from the tcr integration and I am a CSS-noob, so take this solution with a grain of salt.