suricactus / sidebery

Firefox extension for managing tabs and bookmarks in sidebar.

Sidebery

About

Sidebery combines vertical layout of tabs with Firefox's containers to provide the more convenient way of working with a big amount of open pages. It aims to be fast and beautiful and gives a lot of options for customizing. Some of the key features:

Vertical tabs layout (flat or tree)

You can use a simple flat list of tabs or tree structure. Tree layout allows you to fold sub-tries, creates groups with a custom name to organize open pages.

Bookmarks panel

Simple catalogs of your bookmarks. You can drag and drop links or tabs to create bookmarks and vice-versa. Basic operations: open in new window / create / edit / delete.

Other bookmarks features:

• Automatically delete an open bookmark from "Other Bookmarks" folder.
• Highlight open bookmarks and activate its tab instead of opening new on clicking.

Advanced containers management

Isolate your internet activity with Firefox's containers. Sidebery separates containered tabs by panels and allows you to switch between them with the mouse or keyboard shortcuts.

Containers proxy, include and exclude rules

With this addon, you also can set proxy for different containers, use "include" and "exclude" rules to control what page should be open in which container.

Customizable context menu

Sidebery allows you to change the context menu for tabs and bookmarks. You can enable/disable/move different options, create sub-menus/separators.

Multi-selection with right mouse button or keyboard shortcuts

You can select multiple tabs or bookmarks only with the mouse - push right mouse button and then move the cursor to adjust selection range.
note: This feature is not working with the native context menu.

Also, you can use ctrl+click/shift+click method or use keyboard shortcuts.

Customizable styles

Sidebery provides full control of styles for sidebar and group page via variables and custom CSS.
note: css selectors can be changed in the next version

Snapshots

You can setup auto snapshots that will keep info about open windows and tabs.

---

Usage

Open sidebery
Shortcut ctrl+E (default) or click on Sidebery button.

Create new tab
ctrl+T - In default container.
ctrl+space - In active panel.
ctrl+shift+space - after active tab.
Also "Middle click on panel", "Left click on panel's icon" and other configurable methods...

Switch between containers
alt+Comma(<) - to previous panel
alt+Period(>) - to next panel
Scroll on navigation strip - (optional)
Horizontal scroll - (optional)

Switch between tabs
ctrl+PgUp/PgDown - firefox's defaults
alt+Up/Down + alt+space - select tab and activate it
Scroll - (optional)

Open dashboard of panel
Right-click on panel's icon

Expand/Fold parent tab
Click on favicon of target tab.

Expand/Fold tabs or bookmarks while dragging elements
Move mouse cursor to pointer's triangle.

Select all descendants of tab
Right click on favicon.

Close whole tabs branch
Right click on close button.

Switch panel while dragging elements
Move mouse cursor to panel's icon.

---

Tips and Tricks

userChrome.css

In 'Profile Directory' (Menu > Help > Troubleshooting Information > Profile Directory) create folder chrome with file userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* ...your css here... */

To find and inspect browser's selectors open Browser Toolbox.

Completely hide tabs strip

#TabsToolbar {
  display: none;
}

Hide tabs strip only in fullscreen

#TabsToolbar[inFullscreen="true"] {
  display: none;
}

Hide sidebar top-menu

#sidebar-header {
  display: none;
}

Dynamic sidebar
Thanks @ongots

• Set navigation button width to 30px (Settings/Styles/Navigation Strip)
• Set width of pinned tabs to 30px (Settings/Styles/Sidebar css):

  .PinnedTab {
    width: 30px;
  }

• Add in userChrome.css

  #sidebar-header {
    display: none;
  }
  #sidebar-splitter {
    width: 0 !important;
  }
  #main-window #appcontent {
    margin-left: 30px
  }
  #main-window #sidebar-box {
    position: fixed;
    display: block;
    min-width: 0px !important;
    max-width: none !important;
    width: 30px !important;
    height: calc(100% - 61px); /* 61px - height of #navigator-toolbox */
    overflow: hidden;
    box-shadow: 0 0 8px 0 #00000064, 1px 0 0 0 #212121;
    transition: all 0.12s;
  }
  #main-window #sidebar {
    position: absolute;
    min-width: 0px !important;
    max-width: none !important;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    width: 30px;
    height: 100%;
  }
  
  /* Completely (almost) hide in fullscreen */
  #main-window[inFullscreen] #appcontent {
    margin-left: 1px
  }
  #main-window[inFullscreen] #sidebar-box,
  #main-window[inFullscreen] #sidebar {
    width: 1px !important;
  }
  
  /* Show on hover */
  #main-window #sidebar-box:hover,
  #main-window[inFullscreen] #sidebar-box:hover,
  #main-window #sidebar-box:hover #sidebar,
  #main-window[inFullscreen] #sidebar-box:hover #sidebar {
    height: 100% !important;
    width: 250px !important;
  }
  #main-window #sidebar-box:hover #sidebar:before {
    transform: translateX(-100%);
  }

---

Build

Framework: Vue
Bundler: Parcel
Tests: Jest

Install dependencies: npm install
Build all parts of addon: npm run build
Create addon archive in ./dist: npm run build.ext

---

Licence

MIT