Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Sidebery / Tree Style Tabs integration #78

Open
Zabooby opened this issue Apr 8, 2023 · 48 comments
Open

Add Sidebery / Tree Style Tabs integration #78

Zabooby opened this issue Apr 8, 2023 · 48 comments
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@Zabooby
Copy link

Zabooby commented Apr 8, 2023

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?

@Zabooby Zabooby added the enhancement New feature or request label Apr 8, 2023
@unseen-ninja
Copy link
Collaborator

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.

@unseen-ninja unseen-ninja added the help wanted Extra attention is needed label Apr 8, 2023
@Zabooby
Copy link
Author

Zabooby commented Apr 9, 2023

I am planning to update this Sidebery setup.

Would you then be interested in integrating it into Cascade?

@unseen-ninja
Copy link
Collaborator

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 Zabooby changed the title Add Sidebery integration Add Tree Style Tabs integration Apr 13, 2023
@Zabooby
Copy link
Author

Zabooby commented Apr 13, 2023

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
Copy link
Collaborator

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. ^—^

@unseen-ninja unseen-ninja moved this to In Progress in Cascade Apr 14, 2023
@unseen-ninja unseen-ninja assigned Zabooby and unassigned unseen-ninja Apr 14, 2023
@Zabooby
Copy link
Author

Zabooby commented Apr 19, 2023

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
    - image
    - image

  • 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)
    - image
    - image

  • 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.
    -image

  • 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
    - Right click/context menu does not match theme colours or css customisations  piroor/treestyletab#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
Copy link
Collaborator

unseen-ninja commented Apr 19, 2023

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
Copy link
Author

Zabooby commented Apr 19, 2023

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

@unseen-ninja
Copy link
Collaborator

unseen-ninja commented Apr 19, 2023

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.
Screenshot 2023-04-19 at 12 15 05

@Zabooby
Copy link
Author

Zabooby commented Apr 19, 2023

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

image

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:
image

@unseen-ninja
Copy link
Collaborator

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.
Screenshot 2023-04-19 at 12 35 47

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

@unseen-ninja
Copy link
Collaborator

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.
Screenshot 2023-04-19 at 13 11 25

@Zabooby
Copy link
Author

Zabooby commented Apr 19, 2023

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
Copy link
Collaborator

unseen-ninja commented Apr 19, 2023

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.

Screen.Recording.2023-04-19.at.14.07.42.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
Copy link
Author

Zabooby commented Apr 19, 2023

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
Copy link
Collaborator

unseen-ninja commented Apr 19, 2023

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
Copy link
Collaborator

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.
image

Before:
image

After:
Screenshot 2023-04-19 at 15 27 53

@Zabooby
Copy link
Author

Zabooby commented Apr 19, 2023

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.

2023-04-19.14-36-54.online-video-cutter.com.mp4

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

@unseen-ninja
Copy link
Collaborator

unseen-ninja commented Apr 19, 2023

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; }

Screenshot 2023-04-19 at 16 02 48

@Zabooby
Copy link
Author

Zabooby commented Apr 19, 2023

It is vertically centred for me:
image

@unseen-ninja
Copy link
Collaborator

I hate Firefox so much sometimes. FroggySad

@unseen-ninja
Copy link
Collaborator

Proposal tox fix the centering:

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

@unseen-ninja
Copy link
Collaborator

/*** 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.

Screen.Recording.2023-04-19.at.16.44.25.mov

@Zabooby
Copy link
Author

Zabooby commented Apr 19, 2023

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

@unseen-ninja
Copy link
Collaborator

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. :/

Screen.Recording.2023-04-19.at.18.35.31.mov

@Zabooby
Copy link
Author

Zabooby commented Apr 19, 2023

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
Copy link
Author

Zabooby commented Apr 20, 2023

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.

2023-04-20.10-02-35.online-video-cutter.com.mp4

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

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.
image

Other than that I have no other issues.

@unseen-ninja
Copy link
Collaborator

unseen-ninja commented Apr 20, 2023

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
Copy link
Author

Zabooby commented Apr 20, 2023

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
Copy link
Author

Zabooby commented Apr 20, 2023

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

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

@unseen-ninja
Copy link
Collaborator

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:

@QuantumKuba
Copy link

QuantumKuba commented Apr 26, 2023

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.
image

It is gone when the hover animation is triggered.
image

@QuantumKuba
Copy link

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. image

It is gone when the hover animation is triggered. image

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
Copy link

devxan commented Jun 2, 2023

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

@Zabooby Zabooby removed their assignment Jun 3, 2023
@Zabooby
Copy link
Author

Zabooby commented Jun 3, 2023

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
Copy link

Mikilio commented Jan 30, 2024

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
Copy link

Mikilio commented Jan 30, 2024

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.

@42willow 42willow self-assigned this Jan 28, 2025
@shadow-absorber
Copy link

tree style tabs in this would be lovely... though so far not even migrated to using either tst or cascadefox yet

@evesdropper
Copy link

evesdropper commented Mar 8, 2025

This would be good to add - I've just heard about tree style tabs, and I'm hoping to start using it. Is there a file of the current progress on such an integration?

Update: I pieced together a rough solution based on this; code below

tree style tabs custom css:

:root {

  /* These colours are (mainly) used by the
     Container Tabs Plugin */
     --uc-identity-colour-blue:      #7ED6DF;
     --uc-identity-colour-turquoise: #55E6C1;
     --uc-identity-colour-green:     #B8E994;
     --uc-identity-colour-yellow:    #F7D794;
     --uc-identity-colour-orange:    #F19066;
     --uc-identity-colour-red:       #FC5C65;
     --uc-identity-colour-pink:      #F78FB3;
     --uc-identity-colour-purple:    #786FA6;

     /*  Cascades main Colour Scheme */
     --uc-base-colour:               #1E2021;
     --uc-highlight-colour:          #191B1C;
     --uc-inverted-colour:           #FAFAFC;
     --uc-muted-colour:              #AAAAAC;
     --uc-accent-colour:             var(--uc-identity-colour-purple);
     --uc-shadow-colour:             #000000;

}

/* This adjusts the container tab marker. */
.contextual-identity-marker {
  --position: absolute !important;
  --pointer-events: none;Full Auto-show/hide Theme
  --z-index: 0;
  
  left: 0px !important;
  top: 4px !important;
  width: 3px !important;  
  height: 30px !important; 
  opacity: .50;
}

/* Hide .twisty and adjust margins so favicons have 7px on left. */
.tab .twisty {
  visibility: hidden;
  margin-left: -7px;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
.tab .label {
  margin-left: 15px;
}

/* 'new tab' button. */
.newtab-button {
  height: 40px;
  padding-left: 5px !important;
  border-bottom: 0px !important;
}

/* Theme */

:root, #background{
  background: var(--uc-base-colour);
}

:root {
  --tab-surface-active: var(--uc-highlight-color);
  --tab-surface-active-hover: rgb(112,112,124);
  --tab-surface-hover: var(--uc-highlight-color);
}

/* Remove closebox */
#tabbar tab-item tab-item-substance tab-closebox {
  display: none;
}


:root.left .tab .contextual-identity-marker {
  right: 0;
  top: 0;
  width: calc(var(--favicon-size) / 6);
}

.tab {
  height: 40px;
  color: var(--uc-inverted-colour) !important;
}

/* hide scrollbar */
#tabbar { scrollbar-width: none; }

/* indent only when hovered/opened */
#tabbar:not(:hover) .tab tab-item-substance {
  margin-left: 0px !important;
};

:root.sidebar tab-label {
  z-index: 1000;
}

userChrome.css:

/* Hide Tab Toolbar */

#nav-bar { width: 100vw !important; }
/* #browser { position: relative; } */

:root{
  --uc-window-control-width: 138px; /* Space reserved for window controls */
  --uc-window-drag-space-width: 4px; /* Extra space reserved on both sides of the nav-bar to be able to drag the window */
  --uc-toolbar-height: 32px;
}

/* #nav-bar::before, */
/* #nav-bar::after{ */
/*   content: ""; */
/*   display: -moz-box; */
/*   width: var(--uc-window-drag-space-width); */
/* } */

toolbar#nav-bar::after{ width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-width,0px)) }

:root:not([uidensity="compact"]){--uc-toolbar-height: 38px}

#TabsToolbar{ visibility: collapse !important }

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height));
}

#toolbar-menubar{
  min-height:unset !important;
  height:var(--uc-toolbar-height) !important;
  position: relative;
}

#main-menubar{
  -moz-box-flex: 1;
  background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  background-clip: padding-box;
  border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[inactive] > #menubar-items {
	opacity: 0;
	pointer-events: none;
	margin-left: var(--uc-window-drag-space-width,0px)
}

#navigator-toolbox {
  border-bottom: none !important;
}


/* Autohide Sidebar */
/* Sidebar min and max width removal */
/#sidebar {
	max-width: none !important;
	min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
	display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
	visibility: collapse;
}
/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
	--thin-tab-width: 40px;
	--wide-tab-width: 250px;
}
#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 300ms !important;
	min-width: var(--thin-tab-width) !important;
	max-width: var(--thin-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
	transition: all 300ms !important;
	min-width: var(--wide-tab-width) !important;
	max-width: var(--wide-tab-width) !important;

	/* Negative right-margin to keep page from being pushed to the side. */
	margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    z-index: 3;
}

A caveat is that the container tabs don't have the cascade colors, and I'm not sure how to fix that. I looked into both the css that was in TCR as well as changing the container tab colors based on mozilla reference on container tab colors, but neither worked. Could be a good starting point for anyone who wants to tinker, CSS is not really my strong suit so I might just leave it as is for now as it looks good enough for me.

@42willow
Copy link
Member

42willow commented Mar 9, 2025

Hi @evesdropper 👋

Thanks for your contribution :)
I've recently taken over as the maintainer, and I haven't had the chance to have a look at this yet. How does this look with nested and pinned tabs?

@evesdropper
Copy link

evesdropper commented Mar 9, 2025

Not sure if I got the term for nested right (I assume the indented tabs within the tree), but for that the indent is set to 0 when not hovered, then indented upon hover:

Hovered:
Image
Not hovered:
Image

Pinned tabs seem to be a tricky spot, as it is not amazing in the TCR integration either. It is however a lot less polished in TST as I hadn't considered it.
TCR, hovered and unhovered:
Image
Image

TST, hovered and unhovered:
Image
Image

@42willow
Copy link
Member

42willow commented Mar 9, 2025

thanks! yeah the pinned tabs for TCR need to be fixed too, I just don't know how easy it'd be to animate it. It might be easier just to keep them full width like the other tabs with a separator in between.

@evesdropper
Copy link

evesdropper commented Mar 9, 2025

Another possible idea, not sure how feasible/usable it would be depending on how many pinned tabs you have, would probably be to adjust the spacing through some margin tweaking and keep pinned tabs as is. I like how they're at the top and the highlighting makes more sense in TCR vs TST (of which I sort of hacked a solution together, so it's not as clean), but it also hides most pinned tabs. I think at least for TST it might require a bit fewer lines of code if that's already the default layout, not sure about TCR. The separator solution also works well, and it doesn't hide any pinned tabs.

hacked together something quick for TST using this idea:
Image

added one with a line as well:
Image

code: I'm not a CSS expert, so all the pixel values feel like guessing coordinates when tikzing and hoping it looks right - hopefully it could get cleaned up in the future

tab-item.pinned {
  margin-left: 7px; 
}

tab-item.pinned .contextual-identity-marker {
  --position: absolute !important;
  --pointer-events: none;Full Auto-show/hide Theme
  --z-index: 0;
  
  left: 0px !important;
  top: 26px !important;
  width: unset !important;  
  height: 2px !important; 
  opacity: .50;
}

/* code for line */
#pinned-tabs-container {
  top: 2px !important;
  padding-bottom: 30px !important;
  border-bottom: 1.5px solid var(--uc-muted-colour);
}

a bit of a caveat: the line seems to persist even without pinned tabs as it's set for the container, so maybe not the best solution?

@42willow
Copy link
Member

42willow commented Mar 9, 2025

a bit of a caveat: the line seems to persist even without pinned tabs as it's set for the container, so maybe not the best solution?

no problem, we can use :has() for that


I guess it is subjective, but I prefer to be able to see all the icons in the collapsed state. I've also just had a quick look at tree style tabs and sidebery and I prefer sidebery :/ it has a much cleaner and more feature-rich UI and seems to be under more active development compared to TST

I've always been a fan of how vivaldi approaches tab management, here's how it does it
Image
Image

@42willow
Copy link
Member

42willow commented Mar 9, 2025

bundling the integration by default would also be neat, then users can toggle between native tabs and sidebery/TST tabs dynamically, and don't need to worry about copying the integration and updating the userchrome
https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css)#dynamic-native-tabs-for-hiding-native-horizontal-tabs

@evesdropper
Copy link

I guess it is subjective, but I prefer to be able to see all the icons in the collapsed state.

I think that's also a valid argument and probably one of my caveats with the pinned tabs in TCR/TST right now.

I've also just had a quick look at tree style tabs and sidebery and I prefer sidebery :/ it has a much cleaner and more feature-rich UI and seems to be under more active development compared to TST

I'd be okay with a Sidebery integration as well. I've only just swapped to TST and heard about it a handful of days ago.

@42willow
Copy link
Member

so many options! firefox's native vertical tabs seem to be coming along too, would be nice to theme these out of the box as they're builtin. I've opened a new issue to track that (#142)

Image

@42willow 42willow changed the title Add Tree Style Tabs integration Add Sidebery integration Mar 10, 2025
@42willow 42willow changed the title Add Sidebery integration Add Sidebery / Tree Style Tabs integration Mar 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

8 participants