FirefoxSidebar/readme.md
2022-02-23 23:46:23 -06:00

88 lines
4.3 KiB
Markdown

# Firefox Sidebar / Edge-like Vertical Tabs (but better!)
**Note:** This repo was originally a subdirectory of [drannex42/linux-utils](https://github.com/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](https://github.com/drannex42/utils).
## Example
Video of the extension in action: [https://i.imgur.com/HaLvkFc.mp4](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)
- Built in CSS Extension Management
## Updates
Release notes have migrated to [here](https://github.com/drannex42/FirefoxSidebar/releases). You can find prior release notes before v12021.12.22 [here](https://github.com/drannex42/FirefoxSidebar/releases/tag/v12021.12.22).
# How to use
To use FirefoxSidebar you will need to clone this repo into your firefox profile as the `chrome` folder and then follow the Sideberry section below. Both are outlined below in how to do so.
## 1. userChrome.css
Follow the instructions for adding this repository to your Firefox Profile.
1. Navigate to `about:profiles` in your address bar
2. Click on the 'open root folder` button for your current profile
3. Open this folder in your terminal
4. Clone this repo with the following command: `git clone https://github.com/drannex42/FirefoxSidebar.git "chrome"`
5. In Firefox navigate to `about:config` in your address bar
6. change the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
7. Restart Firefox
You could skip the clone step entirely if you manually add the FirefoxSidebar files to the "chrome" folder in your Firefox Profile (you will need to make a `chrome` folder if it doesn't exist!).
Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you are confused or have any questions.
## 2. Sideberry
Load the `sideberry-data.json` file into 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.
### Extensions
All extensions can be found in `/extensions`.
In version 2022.02.23 we broke up the components into extensions using css imports. This makes adding and removing features incredibly easy.
**The following extensions are added:**
- [Window Controls / Client Side Decorations (CSD)](/extensions/window_controls.css)
- This adds the window controls to be inline with your address bar.
- [Superbox Removal](/extensions/superbox_removal.css)
- This removes the superbox and fixes the address bar padding.
- [Bookmark Arrows](/extensions/bookmark_arrow.css)
- This adds a nice little arrow next to your bookmark folders.
## User Settings
Please backup the `prefs.css` and the `custom.css` files before updating to a new versionof FirefoxSidebar. There may be new additions to these files, so you will need to re-add your preferencess to the file accordingly. These files should be updated *far less* than the other files, but just to make sure please save them.
### Preferences
There are a number of preferences you can enable or disable in the `prefs.css` file. There are examples and descriptions of the different preferences within that file.
### Custom Tweaks
For ease of use I suggest using the `custom.css` file to for your personal tweaks.
### If you use FF without the bookmarks bar
Then the sidebar switcher will be missing, you need to add this to your custom.css
```
#sidebar-box {
--menubar-height: -42px !important;
}
```
## TreeStyleTabs (Legacy)
Either add the firefox/treestyletabs.css to your TST addon preferences or import the treestyletabs-\*.json preferences to your TST addon (_prefered_)