Customisation questions

[Zabooby]

Hi, I'm currently using this css snippet (including the TST settings) from the TST wiki to autohide the sidebar, I tries your css by placing;

:root.left tab-item .sound-button:after {
    transform: translate(30px, -5px); !important;
    transition: all calc(var(--animation-duration)*2.2) var(--ease-out) !important;
}

in TST settings and;

:root.left tab-item:hover .sound-button:after {
  transform: translateX(-25px);
}

based on your screenshots, but it is broken (I'm guessing because of conflicts with the snippet above) any ideas?

Also while using the snippet above, the animation while expanding is smooth but when collapsing just sidebar snaps in. FlyingFox has got buttery smooth animations both when collapsing and expanding, what parts of the css can I use to get the same effect?

P.S. Thanks for reviving FlyingFox!

[Astromations]

The code is just meant to make the "playing/muted" icon hover on top of the favicon of the tab. If your goal is to make the playing icon disappear entirely, just set display to none.

tab-item .sound-button {
    display: none;
}

As for the snippet, the problem is that Firefox is struggling to re-proportion the entire window as it animates the width of the sidebar. Firefox seems to have no trouble compressing the window but it finds it hard expanding it back out to fill in the space left by the sidebar as it collapses. It was only when I set the transition time to 4 seconds that Firefox was able to keep up. I don't think its an issue that can be solved by tweaking the css. You'd need a different method to collapse the sidebar entirely.

I'd recommend just using the one that comes with FlyingFox, that being userChrome-hover. It works by just shoving the sidebar off screen until on the icons show, so that way, Firefox doesn't have to reanimate the whole window, its just a matter of covering and uncovering content. Mind you, it requires the icons to be on the right side, which may or may not be a deal breaker for you
(but if its not, :root.left tab-item tab-favicon { order: 10 !important; }).

All the variables can be customized with root:

:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 50px;
    --transition-time: 0.2s;
    --ease-out: cubic-bezier(.22,.08,.63,.74)
    }

Just put that anywhere in your userChrome and tweak as you see fit.
Here's the content of userChrome-hover:

#sidebar-box {
    z-index: 1000 !important;
    position: relative !important;
    min-width: var(--sidebar-collapsed-width) !important;
    max-width: var(--sidebar-collapsed-width) !important;
}

#sidebar-header,
#sidebar-splitter {
    display: none !important;
}

/* inner width = expanded width & move inner to only show initial-width long section */
#sidebar-box #sidebar {
    position: absolute !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    width: var(--sidebar-width) !important;
    transform: translateX(calc(var(--sidebar-collapsed-width) - var(--sidebar-width)));
    transition: all var(--transition-time) var(--ease-out);
}

/* move inner to show entire sidebar */
#sidebar-box #sidebar:hover {
    transform: translateX(0px) !important;
    /* box-shadow: 2px 0 33px -3px var(--sidebar-shadow-color); */
}

#sidebar-box[sidebarcommand="viewBookmarksSidebar"] #sidebar {
    transform: translateX(0px) !important;
    box-shadow: 2px 0 33px -3px var(--sidebar-shadow-color);
}
/* hide sidebar header for tree style tabs sidebar */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display: none;
}

toolbar {
    border: none !important;
}

/* Hide splitter, when using Tree Style Tab. */
#sidebar-splitter {
    display: none !important;
}

Hope that helps!

[Zabooby]

Thanks for the detailed response, after some tweaking, it's clear that that getting the result I want would take too much work.

I'll just use your fork and customise it instead. Here are some more questions and some small bugs I found:

• With the css I linked above pinned tabs would be animated and fold on each other, (removing the following empty space that is shown when tabs are pinned).
  

Would you be interested in implementing this into FF or are there issues that could arise from it?

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

• Also when a pinned tab is active the background around it is slightly misaligned, the hover effect is also misaligned

• 

• How do I hide the scrollbar?

• All right click menus seem to be bigger and more spaced out than normal how do I reset their size?

• There seems to be a lot of rounding in various parts of the ui, how do I reset rounding for right click and drop-down menus, the url menu and this:

• 

• And finally, how do I reduce the spacing in the sidebar, indicated by the areas in red;

• 

• 

[Astromations]

That's quite the list.

1. I've fixed the alignment for the pinned tabs icons. I was also working on adding some extra padding between them but that's proving to be quite the hassle. Anyway, I'll be pushing that commit not too long from now so look out for that.

2. I really like the idea of the pinned tabs moving back into place when you stop hovering, unfortunately, the snippet you're using collapses the sidebar in a fundamentally different way than FF, so I'd need to come up with a new way to do that if it's even possible.

3. The scrollbar can be hidden with the following:

#tabbar.overflow {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; 
}

Just paste that in your treestyletabs' css and it should be gone.

4. Regarding the new menu width, its was a rather opinionated change. I get you and others might prefer to the old design so I'm going to make it an editable value in variables.css. Default is gonna be 10px and 3px so you can turn them down or up until you find a width that you like.
   

5. Regrettably, rounding isn't actually all covered under one variable. For the individual elements you've mentioned:

• Urlbar rounding can be found in line 144 of urlbar.css:
  

• Popup rounding can be found on line 52 of popup.css:
  

• And the window rounding can be found on line 18 of navbar.css:
  

5. I'm not actually sure why that spacing appears for you. For me, tabs pretty much hug the left side of the sidebar. Make sure you've not only installed the treestyletab css but also the config file. You can do that by importing it under the Development section. As for the padding on the left, just edit the --distance-from-edge variable in the treestyletabs.css editor. It's on line 47:
   

Any other questions?

[Zabooby]

Thanks for all the solutions!

For the spacing issue I tried using the .json file but I still get the issue, I also haven't tweaked any settings other than the ones mentioned above in the chome folder. I will try a fresh profile tomorrow and report back.

Two more questions:

Is the url bar the only menu that has a visible border?
This is probably super nitpicky but I found the only parts of the ui not matching the FlyingFox theme is tooltips and the footer.

[Astromations]

Yeah the urlbar is the only menu with a border. It's easy to remove though. Just remove like 203 of urlbar.css

I'll look into making tooltips integrate better with the rest of the theme. Can't say I know what you mean by footer though.

[Zabooby]

I might be using the wrong term but it's the little box that appears in the bottom left corner when hovering over links:

[Astromations]

Ahhh. I'll see what I can do. I've already drawn up some css to update the tooltips. What do you think?

[Astromations]

Mind you, my colors are a bit different. I edited my config.css for a more muted color scheme.

[Zabooby]

Looks great!

[Astromations]

Thanks for the feedback, pushing the commit to interfaces.css right now.

[Zabooby]

Ok I made a fresh profile and I found the spacing issue is happening when switching the sidebar position from right to left.

Untitled.video.-.Made.with.Clipchamp.mp4

[Zabooby]

In the readme in the tst folder it says to have right side selected for "Style of contents for the sidebar position". Is this true even if the sidebar is on the left,

In the video above the side bar has icons on the wrong side when using the right side setting.

I tried setting --distance-from-edge to 2px while using the left side option but it has no effect.

[Astromations]

I'm yet to update the readme files. I'll fix that but for now they're just switched.
Go to this line in your treestyletab css and make sure the second and last pixel settings are identical:

[Zabooby]

Instead of trying to change margins of the actual tab I think the padding before the text is what I'm actually after

Also where can I change the collapsed sidebar width?

[Astromations]

That can be changed here:

You can also add a negative margin-left to push it further.

[Astromations]

Sidebar width can be changed in config.css

[Zabooby]

Ok no more questions (for now lol) I just have to tweak colours and everything will be set up.

Thanks for being so patient and answering all my questions!

[Zabooby]

@Astromations after some more tweaking I found two more things I couldn't figure out how to change:

• How do I remove dimming in the bookmarks panel
• How do I shrink the top bar, I've tried browser.compactmode.show but it doesn't seem to have any effect?

I also opened an issue (#2) related to bookmarks/history in the sidebar a few days ago.

Other than that I've been enjoying FlyingFox a lot!

[Astromations]

1. Remove this bit of code on line 137 of navbar.css
   
2. Change line 7 to the property height instead of min-height. From there, you can change the height and fiddle with the padding and urlbar height (line 163 urlbar.css) until you find something you like.
   

Been a bit busy so I missed your issue. I'll take a look.

[Zabooby]

No problem take as long as you need, it's only a minor issue anyway.

Thanks for the solutions as always!

[Zabooby]

@Astromations Some quick questions:

• How do I change the colour of the loading dot?
• Although the splitter in the sidebar is set to be hidden it is still visible for me, similarly I have set the border for the status panel to be zero but it's still seen.
  • border: 0px solid var(--toolbar-field-focus-border-color) !important;
    
    (zoom in)

[Astromations]

Instead of setting the border to 0px, set it to the background color of the status panel and sidebar so it doesn't show. I'll have to look into the loading dot later.

[Zabooby]

Works like a charm!

[Zabooby]

@Astromations Have you found out how to change the colour of the loading dot yet?