Firefox extension for managing tabs and bookmarks in sidebar.
## Install
**Stable**:
[Release page](https://github.com/mbnuqw/sidebery/releases/latest) |
[Addon page](https://addons.mozilla.org/firefox/addon/sidebery/) (reviewed by Mozilla)
**Nightly** (v5.6.0.1):
[Install](https://github.com/mbnuqw/sidebery/releases/download/v5.6.0/sidebery-5.6.0.1.xpi)
> [!NOTE]
> Nightly release is a signed build created via [github actions](https://github.com/mbnuqw/sidebery/actions/workflows/nightly-release.yml). It supports auto-updates and is designed for testing new features. A few previous nightly releases can be found in the Assets section of the latest [release notes](https://github.com/mbnuqw/sidebery/releases).
>
> If you're manually updating an already installed Sidebery version you also need to open the Add-ons Manager (about:addon) and click on the 'Update Now' button in the Sidebery card or restart the browser.
## About
Sidebery is a highly configurable sidebar with panels of different types. Some of the key features:
- Vertical tabs panels with tree or flat layout
- Bookmarks panels
- History panel
- Search in panels
- Customizable context menu
- Customizable styles
- Snapshots (saved windows/panels/tabs)
- ...and more
## Incompatibility with other addons
Sidebery may conflict with addons that handle position of new tabs (e.g. Tree Style Tabs) or addons that move/sort tabs, which may result in unexpected behavior or broken tabs state at initialization. To avoid potential issues, please, disable such addons in Add-ons Manager page (about:addons).
## How to hide native tabs?
Option 1 (Activating native vertical tabs)
Enable native vertical tabs. This can be done in one of the following ways:
- Right-click on the free space of the toolbar or tab-bar and click on the "Turn on Vertical Tabs".
- Open `about:config` and enable these settings: `sidebar.revamp`, `sidebar.verticalTabs`.
Then resize the native sidebar (with the vertical tabs) to its minimum.
Optionally, you can round the corner of the web page area by enabling `sidebar.revamp.round-content-area` in `about:config`.
This will save vertical space, but the native tabs will still be showed and Firefox's sidebar header will take some space from Sidebery.
You can also try to hide vertical native tabs and sidebar: Right-click on the free space of the native sidebar, then in the "Sidebar settings" section enable "Vertical tabs" and "Hide tabs and sidebar" settings, then open Sidebery. But due to [a Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1962904) this setting might be ignored on the next browser start or on the opening a new window.
Option 2 (Using userChrome.css)
- Learn how to [comment/uncomment](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Syntax/Comments) parts of your CSS.
- Enable `toolkit.legacyUserProfileCustomizations.stylesheets` in `about:config`.
- In 'Profile Directory' `(Firefox Menu > Help > Troubleshooting Information > Profile Directory)`
create folder `chrome` with file `userChrome.css`.
- Paste, edit (to your needs) and save this code in `userChrome.css` file:
```css
/**
* Hide sidebar-panel-header (sidebar.revamp: true)
*/
#sidebar-panel-header {
display: none;
}
/**
* Dynamic styles
*
* Choose when styles below will be activated (comment/uncomment line)
* - When Sidebery set title preface "."
* - When Sidebery sidebar is active
*/
#main-window[titlepreface="."] {
/* #main-window:has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][checked="true"]) { */
/* Hide horizontal native tabs toolbar */
#TabsToolbar > * {
display: none !important;
}
/* Hide top window border */
#nav-bar {
border-color: transparent !important;
}
/* Hide new Firefox sidebar, restyle addon's sidebar */
#sidebar-main, #sidebar-container, #sidebar-launcher-splitter {
display: none !important;
}
#sidebar-box {
padding: 0 !important;
}
#sidebar-box #sidebar {
box-shadow: none !important;
border: none !important;
outline: none !important;
border-radius: 0 !important;
}
#sidebar-splitter {
--splitter-width: 3px !important;
min-width: var(--splitter-width) !important;
width: var(--splitter-width) !important;
padding: 0 !important;
margin: 0 calc(-1*var(--splitter-width) + 1px) 0 0 !important;
border: 0 !important;
opacity: 0 !important;
}
/* Update background color of the #browser area (it's visible near the
rounded corner of the web page) so it blends with sidebery color with
vertical nav-bar. */
/* #browser {
background-color: var(--lwt-accent-color) !important;
background-image: none !important;
} */
/* Hide sidebar header (sidebar.revamp: false) */
#sidebar-header {
display: none !important;
}
/* Uncomment the block below to show window buttons in Firefox nav-bar
(maybe, I didn't test it on non-linux-tiled-wm env) */
/* #nav-bar > .titlebar-buttonbox-container,
#nav-bar > .titlebar-buttonbox-container > .titlebar-buttonbox {
display: flex !important;
} */
/* Uncomment one of the lines below if you need space near window buttons */
/* #nav-bar > .titlebar-spacer[type="pre-tabs"] { display: flex !important; } */
/* #nav-bar > .titlebar-spacer[type="post-tabs"] { display: flex !important; } */
}
```
- Restart the browser
- Optionally, try to turn on/off native vertical tabs to know how it changes the color of the browser toolbar.
Result:
- Optionally, add some bells and whistles (add to Sidebery styles editor):
Rounded corner for vertical nav bar
```css
/* Do not apply the border from Firefox theme */
.Notifications + .main-box .central-box {
height: calc(100% - var(--general-margin));
margin-top: var(--general-margin);
}
.NavigationBar {
box-shadow: none;
}
.NavigationBar.-vert {
padding: var(--nav-btn-margin) 0 0
}
#root[data-pinned-tabs-position="left"]:not([data-nav-layout="horizontal"]) .PinnedTabsBar,
#root[data-pinned-tabs-position="right"]:not([data-nav-layout="horizontal"]) .PinnedTabsBar {
padding: var(--general-margin) 0 calc(var(--tabs-margin) * 2);
}
#root[data-pinned-tabs-position="left"][data-nav-layout="left"][data-drag="true"] .PinnedTabsBar,
#root[data-pinned-tabs-position="right"][data-nav-layout="right"][data-drag="true"] .PinnedTabsBar {
padding: var(--general-margin) 0 16px
}
/* Rounded transition between Sidebery nav-bar and Firefox toolbar */
.main-box {
--rounding: calc(var(--general-border-radius) + var(--general-margin));
}
#root[data-nav-layout="left"] .main-box:before {
content: '';
position: absolute;
top: 0;
left: var(--nav-btn-width);
width: var(--rounding);
height: var(--rounding);
z-index: 1000;
pointer-events: none;
background-image: radial-gradient(
circle at 100% 100%,
#00000000,
#00000000 var(--rounding),
var(--toolbar-bg) calc(var(--rounding) + 0.5px),
var(--toolbar-bg)
);
}
```
Full width pinned tabs
```css
#root.root {--tabs-pinned-height: 32px;}
#root.root {--tabs-pinned-width: 36px;}
#root.root .PinnedTabsBar .tab-wrapper {
width: auto;
flex-grow: 1;
}
#root.root .PinnedTabsBar .tab-wrapper .Tab {
--tabs-activated-shadow: inset 0 0 0 1px #fff2;
--tabs-activated-bg: #fff2;
width: 100%;
min-width: var(--tabs-pinned-width);
}
#root.root .PinnedTabsBar .tab-wrapper .Tab .body {
--tabs-normal-bg: #ffffff0f;
}
#root.root .PinnedTabsBar .tab-wrapper .Tab[data-discarded="true"] .body {
--tabs-normal-bg: #ffffff06;
}
```
That's basically all custom styles I use myself. I'll try to keep this `userChrome` snippet updated (relative to the beta version of Firefox).
For more features and other styling options/themes check out these resources:
- https://github.com/search?q=sidebery+language%3ACSS&type=repositories&s=stars&o=desc
- https://www.reddit.com/r/FirefoxCSS/search?q=sidebery&restrict_sr=on&sort=relevance&t=all
- https://trickypr.github.io/FirefoxCSS-Store.github.io/index.html
Bitcoin (BTC)
```
bc1q2drx3x5pfl0c68urwztvjrwgksg9u3l7mn4g4m
```
Ethereum (ETH), USDT (ERC20), USDC (ERC20)
```
0x11667D20AB328194AEEc68F9385CCcf713607929
```
Tron (TRX), USDT (TRC20), USDC (TRC20)
```
TJEdp1TnsN7Jfhfi9Db8yXKDK8NEUovCZb
```
Litecoin (LTC)
```
ltc1qpv4c4kaahdzhcwzj8yyrwlvnfcw2hw5qpxqr62
```
Solana (SOL)
```
GdWipUmnhdDa7kqkF3SJm5jTYqp3UsTdbcGCC1xLbVJf
```
TON
```
UQAxwOfvZQz1YR4qieiE-J4wHiz3zrMXAyxDiRJQQXIDX8MH
```
