Collapse tab titles so that entire vertical sidebar can be a narrow list of favicons, or clarify in Settings if already possible

[MxVerda]

Description

A bit like https://github.com/mbnuqw/sidebery/discussions/1217 but just removing the text entirely would be nice. My ideal outcome is a vertical list of tabs. Only the favicon is visible, or some stylised first letter as placeholder image. Hovering the mouse cursor over this icon unfolds the full website tab title for readable text. (The format of this would be nice to change, idk, idc.) The sidebar panel thing itself would have a much smaller minimum width, like a little wider than the pinned tabs' favicons. I hope that's what details this submission needs. Thanks either way; awesome work.

[SunnyZebra]

That is not possible purely from inside sidebery

You would need to change firefox's userchrome.css to shrink/expand sidebar depending if hovered or not too.

Haven't seen how to keep dynamic sized sidebar with dragable width handle yet and haven't tried out more. So i'll just forward two info dumps.

First if not done already userChrome.css needs to be activated.

https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css)

Starting with Firefox 69 you have to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config.

Besides sidebery styles you need to insert styles into userChrome.css

Here is a good full example with sidebery css (sideberyTweaksv5.txt) and userchrome.css (sideberyMods.css or sideberyModsLEFT.css) values: https://github.com/Redundakitties/colorful-minimalist

Just tried out a bit. These should be the minimal styles needed to insert into userchrome.css to auto shrink/expand the sidebar. You need to experiment with the pixel values depending on your corresponding sidebery css style values.

:root {
    --autohide-sidebar-extended: 320px; /* width of panel extended */
    --autohide-sidebar-collapsed: 32px; /* width of panel collapsed */
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]  {
  width: var(--autohide-sidebar-collapsed) !important;
  transition: all 0.2s ease-in-out;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
  width: var(--autohide-sidebar-extended)  !important;
  transition: all 0.2s ease-in-out; 
}