|
1 | | -# Firefox Sidebar (Edge-Like Vertical Tabs) |
2 | | - |
3 | | -## Example |
4 | | - |
5 | | -https://user-images.githubusercontent.com/4322153/205100497-f56637c4-1d46-4c15-b349-d0b53f2838a0.mp4 |
6 | | - |
7 | | -The above *is* an older version, but the effect and design is still generally the same. |
| 1 | +# Firefox Sidebar (w/ Dynamic Indentation) |
8 | 2 |
|
| 3 | +https://github.com/user-attachments/assets/ebc7cf1b-340e-47a1-8029-f583738b190a |
9 | 4 |
|
10 | 5 | ## Features: |
11 | 6 |
|
12 | | - - Edge-like vertical tab design |
13 | | - - Tree style tab layout support (works with Sideberry & TST) |
14 | | - - *Dynamic Indentation* |
15 | | - - Automatic theme configuration for light and dark themes |
16 | | - - Custom theme configuration using Sidebery, or any other. |
17 | | - - Support for tab groups |
18 | | - - Support for Tab Containers with visual identification |
19 | | - - Pinned tabs (right click to close) |
20 | | - - Simplified design (smallest compared to any other) by using Firefox 133, for older versions. |
21 | | - - Longest lasting and oldest (and first?) major dynamic firefox sidebar extension w/ regular updates. |
22 | | - |
| 7 | + - Longest lasting, oldest, and possibly first, major dynamic Firefox sidebar w/ regular updates. |
| 8 | + - *Dynamic Indentation*: Unfurls tab names and indentations on hover of the sidebar, saving you space while you browse. |
| 9 | + - Native Vertical Tabs: Now built on top of the native Firefox vertical tab system. |
| 10 | + - Tree style tabs: Tree style tab support by using Sidebery & TreeStyleTabs (legacy) |
| 11 | + - Automatic themes: Automatically matches your Firefox theme colors! |
| 12 | + - Custom theming: Custom theme configuration using Sidebery, or any other |
| 13 | + - Tab Power Features: Tab groups and tab containers (both with visual identifiers), bookmarks, history, and more. |
| 14 | + - Pinned Tabs: Pinned tabs stay at the top (right click to close) |
| 15 | + - Sidebar Switching: switch between different sidebars by hovering over the switcher at the bottom. |
| 16 | + - Cross-Platform: Should work on Windows, Linux, and Mac. |
23 | 17 |
|
24 | | -## Note as of 2025.02.09 |
25 | | -This version is now available in (at least) the developer-edition, unknown in stable. The activation of the new native vertical tab subsystem is now even easier, the instructions below are updated. **This overrides the default vertical tab subsystem, replaces it with Sidebery (or TST), and allows for *dynamic indentation***. |
| 18 | +**Note as of 2025.02.09**: This is now using (and replaces!) the new built in Firefox 134+ vertical tabs, make sure you have updated. If you are still on an older version of Firefox, please check the releases page for the older versions. |
26 | 19 |
|
27 | | -- This is now using (and replaces!) the new built in Firefox 134<?>+ vertical tabs, make sure you are updated. |
28 | | -- This allows you to replace it with any of your preferred vertical tab extension options: |
29 | | - - Sidebery (preferred), TreeStyleTabs, etc. |
30 | | -- If you are still on an older version of Firefox, please check the releases page for the older versions. |
| 20 | +# Instructions (guide/setup) |
31 | 21 |
|
32 | | -# Instructions (setup) |
| 22 | +The instructions may seem like quite a lot, but the entire proces takes less than a few minutes and does not require you to be overly technical. Most guides will entirely skip the first three main steps and expect you to know what you are doing, I don't, so I hope this helps as much as possible. |
33 | 23 |
|
34 | | -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. |
35 | | - |
36 | | -1. Activate experimental sidebar |
| 24 | +1. Activate vertical tabs and install sidebery: |
37 | 25 | 1. Right click on any open space on the tab bar |
38 | 26 | 2. Select "Turn on vertical tabs" |
39 | | - |
40 | | -2. Update userChrome.css |
41 | | - 1. Navigate to [about:profiles](about:profiles) `(about:profiles)`in your address bar |
42 | | - 2. Click on the 'open root folder` button for your current profile |
43 | | - 3. Open this folder in your terminal |
44 | | - 4. Clone this repo with the following command: `git clone https://github.com/wizrdsh/FirefoxSidebar.git "chrome"` |
45 | | - |
46 | | -3. Activate userChrome.css modification flag |
47 | | - 1. In Firefox navigate to [about:config](about:config) in your address bar |
48 | | - 2. Search for the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets` |
49 | | - 3. Double click, or change this to `true` |
50 | | - 4. Restart Firefox |
| 27 | + 3. [Install Sidebery from Firefox Addons](https://addons.mozilla.org/en-US/firefox/addon/sidebery/) |
51 | 28 |
|
52 | | -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!). |
| 29 | +2. Allow modifying your Firefox appearance: |
| 30 | + 1. In Firefox navigate to `about:config` in your address bar |
| 31 | + 2. Search for `toolkit.legacyUserProfileCustomizations.stylesheets` |
| 32 | + 3. Double click or manually change this to `true` |
53 | 33 |
|
54 | | -Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you have any questions. |
| 34 | +3. Add the FirefoxSidebar settings: |
| 35 | + 1. Navigate to `(about:profiles)`in your address bar |
| 36 | + 2. Click on the `open root folder` button for your current profile |
| 37 | + 3. Open this folder location in your terminal |
| 38 | + 4. Clone this repo with the following command: `git clone https://github.com/wizrdsh/FirefoxSidebar.git "chrome"` |
| 39 | + 1. *You may need to install `git` for this to work* -> [Git Downloads](https://git-scm.com/downloads) |
| 40 | + 2. If installing `git` is not possible, then download the latest `Source Code (zip)` files from [Releases](https://github.com/drannex/FirefoxSidebar/releases), create a folder called `chrome` inside your current profile, unzip and move the files into that folder. |
55 | 41 |
|
56 | | -4. Load the custom sidebery theme and settings (optional, suggested!) |
57 | | - 1. Navigate to sidebery settings - [moz-extension://d6dfc617-d672-45b6-8293-f37e07a55dce/page.setup/setup.html#settings_appearance](moz-extension://d6dfc617-d672-45b6-8293-f37e07a55dce/page.setup/setup.html#settings_appearance) |
58 | | - 2. Click on "Help" in the sidebar |
| 42 | +4. Load the custom Sidebery theme and settings *(optional, suggested!)*: |
| 43 | + 1. Navigate to Sidebery settings (Right click on the Sidebery extension icon > "Open Settings") |
| 44 | + 2. Click on "Help" in the sidebar (Settings > Help) |
59 | 45 | 3. Click on "Import addon data" |
60 | | - 4. Load the `sidebery-data.json` file |
| 46 | + 4. Select and load the `sidebery-data.json` file located in your 'chrome' folder from step 3. |
61 | 47 |
|
62 | | -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. |
| 48 | +5. Restart Firefox, and click on the 'Sidebery' extension, everything should now be working as expected. |
63 | 49 |
|
64 | | -## How to use |
| 50 | +# FAQ |
65 | 51 |
|
66 | | -1. Follow the installation instructions above |
67 | | -2. To switch your sidebar choice, hover over the bottom "settings" icon in the sidebar. |
| 52 | +## Sidebery Themes |
68 | 53 |
|
| 54 | +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 `Sidebery Settings > Style Editor` (found at the end of the settings sidebar). |
69 | 55 |
|
70 | 56 | ## Custom Modifications |
71 | 57 |
|
72 | | -Add any additional Firefox modifications into `custom.css`, these will not be overwritten on future sidebar updates. |
73 | | - |
74 | | -## Extensions & Preferences |
| 58 | +Add any additional Firefox modifications into `custom.css`, these will not be overwritten on future sidebar updates (when using `git pull`) |
75 | 59 |
|
76 | | -These have been removed as of v2.2025.01.07. |
| 60 | +Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you have any questions. |
77 | 61 |
|
78 | 62 | ## TreeStyleTabs (Legacy) |
79 | 63 |
|
80 | 64 | Either add the firefox/treestyletabs.css to your TST addon preferences or import the treestyletabs-\*.json preferences to your TST addon. |
81 | 65 |
|
| 66 | +This is a legacy support theme and not often changed. |
| 67 | + |
82 | 68 | ## Updates |
83 | 69 |
|
84 | | -Release notes have migrated to [here](https://github.com/wizrdsh/FirefoxSidebar/releases). You can find prior release notes before v12021.12.22 [here](https://github.com/wizrdsh/FirefoxSidebar/releases/tag/v12021.12.22). |
| 70 | +Release notes have migrated to [here](https://github.com/wizrdsh/FirefoxSidebar/releases). |
| 71 | + |
| 72 | +You can find prior release notes before v12021.12.22 [here](https://github.com/wizrdsh/FirefoxSidebar/releases/tag/v12021.12.22). |
0 commit comments