DOCSEARCHbyAlgolia
Submit Docs

Sidebery Documentation

repository·v5·Indexed 26 days ago

https://github.com/mbnuqw/sidebery

A highly configurable Firefox extension for managing tabs and bookmarks via a sidebar. Sidebery supports vertical tab panels with tree or flat layouts, history, and bookmarks. The documentation covers installation of stable and nightly versions (v5.6.0.1), building from source using Node.js, and extensive UI customization via the internal Styles editor and Firefox userChrome.css to hide native tabs or modify the sidebar appearance.

Tokens
7.4K
Snippets
13
Records
43
Agent score
89%

What's inside Sidebery

  1. Enable custom stylesheets in Firefox

    v5

    To use userChrome.css for customizing the Firefox UI, you must first enable legacy stylesheet support:

    1. Open about:config in Firefox.
    2. Search for toolkit.legacyUserProfileCustomizations.stylesheets.
    3. Set it to true.

    To apply your styles, create a folder named chrome inside your Firefox Profile Directory and place a userChrome.css file within it.

    To find your Profile Directory: Go to Menu > Help > Troubleshooting Information > Profile Directory.

  2. Donate to Sidebery via Cryptocurrency

    v5

    You can support the development of Sidebery by donating via various cryptocurrencies. Donations help motivate the developer to fix bugs, implement requested features, and speed up the development process.

    Supported networks and addresses:

    • 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

  3. Inspect Sidebery CSS Selectors using the Debugger

    v5

    To find currently available CSS selectors for styling, use the Firefox debugger:

    1. Enter about:debugging in the URL bar.
    2. In the left-hand menu, click This Firefox (or This Nightly).
    3. Click Inspect next to the Sidebery extension.
    4. Select the appropriate frame to inspect:
      • Click the rectangular icon (with three sections) in the top-right area of the debugger page.
      • Select /sidebar/index.html for the sidebar frame.
      • Select /group/group.html for the group page frame.
    5. Browse the Inspector tab to find elements and their classes.

  4. Hide Native Tabs using userChrome.css

    v5

    For a more integrated look, you can use userChrome.css to hide native Firefox UI elements.

    Setup Steps

    1. Enable stylesheets: Open about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true.
    2. Locate Profile Directory: Go to Firefox Menu > Help > Troubleshooting Information > Profile Directory.
    3. Create Chrome Folder: Inside your profile directory, create a folder named chrome.
    4. Create CSS File: Create a file named userChrome.css inside the chrome folder.
    5. Apply Styles: Paste the configuration CSS into the file and restart Firefox.

    Example userChrome.css Configuration

    This snippet hides the sidebar header and the horizontal native tabs toolbar when Sidebery is active (using the titlepreface="." trigger).

    /**
* Hide sidebar-panel-header (sidebar.revamp: true)
*/
#sidebar-panel-header {
  display: none;
}

/**
* Dynamic styles
*/
#main-window[titlepreface="."] {

  /* 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;
  }

  /* Hide sidebar header (sidebar.revamp: false) */
  #sidebar-header {
    display: none !important;
  }
}

  5. Build Sidebery from Source

    v5

    To build the Sidebery extension manually, ensure you have the latest LTS Node.js version installed.

    Build Commands

    1. Install dependencies: npm install
    2. Build all parts: npm run build
    3. Create Add-on archive in ./dist: npm run build.ext

    Loading the Development Build in Firefox

    1. Open Firefox and navigate to about:debugging.
    2. Select "This Firefox".
    3. Under "Temporary Extensions", click "Load Temporary Add-on...".
    4. Select the .zip file located in the dist directory.
    5. To update, repeat the loading steps.
    npm install
npm run build
npm run build.ext

  6. Implement Dynamic Native Tabs (Hide horizontal tabs automatically)

    v5

    You can hide the native Firefox horizontal tabs strip dynamically when Sidebery is active using a Preface value.

    Steps:

    1. In Sidebery, go to Sidebery settings > Help > Preface value.
    2. Set a value (e.g., XXX or an empty unicode sign ​).
    3. Add the corresponding CSS to your userChrome.css.

    Note: Ensure sidebar.verticalTabs is set to false (using native horizontal tabs) for this specific effect.

    /**
 * Dynamic Horizontal Tabs Toolbar (with animations)
 * sidebar.verticalTabs: false (with native horizontal tabs)
 */
#main-window #TabsToolbar > .toolbar-items {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
#main-window #TabsToolbar > .toolbar-items { height: 3em !important; }
#main-window[uidensity="touch"] #TabsToolbar > .toolbar-items { height: 3.35em !important; }
#main-window[uidensity="compact"] #TabsToolbar > .toolbar-items { height: 2.7em !important; }
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="XXX"] #TabsToolbar > .toolbar-items { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="XXX"] #tabbrowser-tabs { z-index: 0 !important; }
/* Hidden state: Hide window buttons in tabs-toolbar */
#main-window[titlepreface*="XXX"] #TabsToolbar .titlebar-spacer,
#main-window[titlepreface*="XXX"] #TabsToolbar .titlebar-buttonbox-container {
  display: none !important;
}

  7. Install Sidebery

    v5

    Sidebery can be installed via the stable release or the nightly build.

    Stable Version

    Nightly Version (v5.6.0.1)

    Note on Manual Updates: If you are manually updating an existing installation, you must open the Add-ons Manager (about:addons) and click the 'Update Now' button on the Sidebery card, or restart the browser.

  8. Hide Native Tabs using Native Vertical Tabs

    v5

    You can minimize the impact of native Firefox tabs by activating native vertical tabs:

    1. Enable Vertical Tabs:
      • Right-click free space on the toolbar/tab-bar and select "Turn on Vertical Tabs".
      • OR Open about:config and enable sidebar.revamp and sidebar.verticalTabs.
    2. Resize: Resize the native sidebar to its minimum width.
    3. Optional: Enable sidebar.revamp.round-content-area in about:config to round the corners of the web page area.

    Note: Due to a Firefox bug, settings to "Hide tabs and sidebar" in the native sidebar settings might be ignored on browser restart or when opening new windows.

  9. Install the Firefox GNOME Theme

    v5

    To apply a GNOME-like look to Firefox, follow these steps within your Firefox profile directory:

    1. Clone the theme repository into a chrome subdirectory: git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git
    2. Ensure userChrome.css and userContent.css exist: [[ -s userChrome.css ]] || echo >> userChrome.css [[ -s userContent.css ]] || echo >> userContent.css
    3. Import the theme at the top of your CSS files: sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css
    4. Symlink the preferences file to your profile root: ln -fs chrome/firefox-gnome-theme/configuration/user.js user.js
    5. Restart Firefox.
    git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git
[[ -s userChrome.css ]] || echo >> userChrome.css
[[ -s userContent.css ]] || echo >> userContent.css
sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css
sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css
cd ..
ln -fs chrome/firefox-gnome-theme/configuration/user.js user.js

  10. Request a specific feature or bug fix via donation

    v5
    If you wish to fund the resolution of a specific issue (such as a feature request or a specific bug report), you can contact the developer directly to discuss the issue and its possible resolution. Once discussed, the developer will prioritize that issue following the donation.

  12. Develop Sidebery

    v5

    For active development, use the following commands (requires latest LTS Node.js):

    • Install dependencies: npm install
    • Build and watch for changes: npm run dev
    • Run browser with the Add-on: npm run dev.run -- <firefox-executable>
    npm install
npm run dev
npm run dev.run -- <firefox-executable>