Firefox Sidebar / Edge-like Vertical Tabs (but better!)

Note: This repo was originally a subdirectory of drannex42/linux-utils, but has now become a standalone repo for my Firefox Sidebar CSS and Utilities. The original linux-utils files can be found here.

Example

Video of the extension in action: https://i.imgur.com/HaLvkFc.mp4

Features:

Edge-like vertical tab design
Tree style tab layout support (works with Sideberry & TST (legacy) version)
Dynamic Indentation
Automatic theme configuration for light and dark themes
Custom theme configuration using Sideberry
Support for tab groups
Support for Tab Containers with visual identification
Pinned tabs (right click to close)

Updates

Release notes have migrated to here. You can find prior release notes before v12021.12.22 here.

How to use

To use my custom styles you will need to copy the userChrome.css to your firefox profile and then follow the Sideberry section below. Both are outlined below in how to do so.

1. Sideberry

Add the sideberry-data-*.json file to your Sideberry addon by using the 'import' section under 'Help'.

If you dislike any of the theme presets for dark or light themes, or you have a particular color scheme in mind then navigate to Sideberry Settings > Style Editor (found at the end of the settings sidebar). The preference is to replace the values in the right panel, not in the theme editor to the left - this way you can easily update to newer versions in the future.

To change the color:

--tabs-font :: Changes the default font (uses system font by default) to change the font size.

I recommend changing it via Sideberry Settings > Appearance > Font Size
default: 1rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

--tabs-fg :: Changes the tabs text color

default: #000

--tabs-bg-hover :: Changes the hover background color for tabs

default: #dedddaff

--tabs-activated-bg :: This is the active tab background color

default: #fff

--tabs-activated-shadow :: Changes the active tabs shadow color

default: rgba(0,0,0,0.15);

2. userChrome.css

Follow the instructions for adding a userChrome.css file to your Firefox Profile.

Navigate to [about:profiles] in your address bar
Click on the 'open root folder` button for your current profile
Create a 'chrome' folder (all lowercase)
Add the userChrome.css file to that folder
In firefox navigate to [about:config] in your address bar
change the characteristic toolkit.legacyUserProfileCustomizations.stylesheets to true
Restart Firefox
Visit userchrome.org if you are confused or have any questions.

If you use FF without the bookmarks bar

Then the sidebar switcher will be missing, you need to add this to your userChrome.css

#sidebar-box {
  --menubar-height: -40px !important;
}

Other Considerations

If you dislike some of my my other changes to FF (added vivaldi's folder icon, removed the superbox, cleaned up the borders, removed the titlebar) then remove everything below CUSTOM MODIFICATIONS in userChrome.css

TreeStyleTabs (Legacy)

Either add the treestyletabs.css to your TST addon preferences or import the treestyletabs-*.json preferences to your TST addon (prefered)

3.6 KiB Raw Blame History