sidechery

sidebery + chrome = sidechery

vibecoded port of sidebery for chromium. not published anywhere, install from nightly.link

note on side panels in chrome

side panels in chrome look and work kinda ass + it's impossible to properly hide the "stock" chromium tabs on any major chrome-based browsers.

due to limitations of chromium extensions api, you will need to manually open the side panel in every new window, the default shortcut is ctrl+e.

it is currently recommended to use helium, with the following configuration (to hide native tabs, best-effort):

Browser layout: vertical
- Show vertical tabs on right side: on (if you want sidechery to be on the left, to avoid hover-reveal conflicts)
Side panel position -> Helium Panels: Left (i.e. opposite of the above)
Frameless mode: on
- Always show the sidebar: off
(optional) Show a rounded frame around web contents: off

go upvote my helium#2490 issue to hopefully improve the situation!

and these custom styles:

#root.root {
  /* see below for explanation of colors - chrome sadly doesnt expose theme to extensions */
  --frame-bg: #231c2f;
  --toolbar-bg: #3a3346;

  --nav-btn-active-shadow: inset 0 0 0 1px var(--s-accent, rgba(255,255,255,.1));
  --nav-btn-len-margin: 2px;
  --tabs-border-radius: 6px;
}

.Tab[data-pin=false] .fav {
   margin: 0 var(--tabs-inner-gap) 0 var(--tabs-inner-gap);
}

.NavigationBar {
  border-radius: 8px;
}

.top-horizontal-box {
  margin-bottom: 2px;
  margin-left: 2px;
}

.NavigationBar .nav-item {
  border-radius: 7px;
}

.NavigationBar .nav-item .len {
  font-size: .5rem;
}

original firefox-specific readme below:

Firefox extension for managing tabs and bookmarks in sidebar.

Install

(snip)

sidechery can be installed from nightly.link

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 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 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:

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

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

#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:

Build

Prerequisites: latest LTS Node.js and pnpm

Install dependencies: pnpm install
Build the extension: pnpm build
Create the extension archive: pnpm zip

After creating the Add-on archive, you can then use the version in Firefox as follows:

Open Firefox
Go to about:debugging
Go to "This Firefox"
At "Temporary Extensions" click on "Load Temporary Add-on..."
Select the .zip file in the .output directory.
Close the settings tab
Your Firefox now always runs with the development version
For updating: Repeat all steps.

Development

Prerequisites: latest LTS Node.js and pnpm

Install dependencies: pnpm install

Build, watch, and run Firefox: pnpm dev

Build, watch, and run Chrome: pnpm dev:chrome

Donate

You can donate to this project, which will motivate me to answer questions, fix reported bugs, implement requested features and generally will speed up development process.

You can also donate to resolving a specific issue (feature request or bug report). To do this, message me to maxbadryzlov@gmail.com, we discuss the issue and its possible resolution, and I'll spend my time on that issue after donation.

To purchase cryptocurrency you can use any exchange services, e.g.: buy.coingate.com, www.coinbase.com, www.binance.com, www.kraken.com, etc...

Thank you.

Bitcoin (BTC)

bc1q2drx3x5pfl0c68urwztvjrwgksg9u3l7mn4g4m

muse-code	1 · avg 2.0
v0	1 · avg 2.0
claude	48 · avg 1.0
aider	1 · avg 1.0
claude-code	90 · avg 0.9

listed slop	958
in the trough	0
slopsmiths	13
votes	1431
comments	1

sidechery

I'm not calling your project slop! Geeze, it's a joke... Do you own this repo?

Disclosures, inferred by the Cap'm

The Cap'm's log

sidechery

note on side panels in chrome

Install

About

Incompatibility with other addons

How to hide native tabs?

Build

Development

Donate

From the balcony · 0 of 4 clapped

0 comments