10mo ago

How to get Zen-style vertical tabs in Firefox?

I'm a heavy user of Firefox & Tree Style Tabs. Recently, I tried Zen Browser. There's a lot there to like, but I think I'm sticking with FF.

That said... there is one thing from Zen I'd love to bring back to FF: That awesome collapsible sidebar for tabs. It's great: The sidebar is totally usable in its narrow, collapsed state (which only shows a vertical stack of favicons). But if I want to expand it, I just click a button and I can see the favicons + website names.

I've tried to achieve the same thing in FF & TST with the CSS below, but it's not the same: This CSS creates a minimized sidebar that expands whenever I hover over it. That's not as useful as the behavior in Zen. In fact, it gets pretty annoying.

Does anyone know how to get Zen-style vertical tabs? Thank you!!

The CSS I'm currently using in FF:

    
  /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
#sidebar-box {
  --uc-sidebar-width: 60px;
  --uc-sidebar-hover-width: 210px;
  --uc-autohide-sidebar-delay: 100ms; /* Wait 0.6s before hiding sidebar */
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: 1;
  background-color: #110a0d !important;
}

#sidebar-box[positionend] {
  direction: rtl;
}
#sidebar-box[positionend] > * {
  direction: ltr;
}

#sidebar-box[positionend]:-moz-locale-dir(rtl) {
  direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > * {
  direction: rtl;
}

#main-window[sizemode="fullscreen"] #sidebar-box {
  --uc-sidebar-width: 1px;
}

#sidebar-splitter {
  display: none;
}

#sidebar-header {
  overflow: hidden;
  /* color: var(--chrome-color, inherit) !important; */
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after {
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar {
  transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar {
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel {
  /* background-color: transparent !important; */
  /* color: var(--newtab-text-primary-color) !important; */
}

.sidebar-panel #search-box {
  -moz-appearance: none !important;
  /* background-color: rgba(249, 249, 250, 0.1) !important; */
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header {
  background-color: inherit !important;
  border-inline: 1px solid rgb(80, 80, 80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > * {
  border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel {
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label {
  margin-inline: 0px !important;
  border-left-style: solid !important;
}

No comments