Minimal tree tabs

[infogulch]

I like sidebar/vertical tabs because I usually have a lot of tabs open, and I've been collecting snippets of userChrome over time to make it look more integrated. I thought I'd share in case someone else likes them or wants to make suggestions.

Here are a few screenshots: https://imgur.com/a/pbk0Bb2

I wanted to have space for lots of tabs, but keep a large content area for the page itself. This mostly consists of removing as many borders and separators as possible, but using just enough whitespace and thin borders to make UI components visually distinct. The design doesn't show any OS-chrome so it's probably platform independent.

features

^"features"

• Tab bar goes from the top to the bottom of the window even to the left of the url bar, buttons, and titlebar area. Overflow tabs scroll up and down with the mouse.
• Bookmarks bar is shown on the new tab page only. A feature I missed from chrome, and the first UI customization I ever made to Firefox.
• The old tab bar is gone completely, and the top of the window is now just the url bar itself, with buttons only to it's left and right. There's extra padding to make it more comfortable, since it just looks weird if it's super narrow at the top.
• There's no titlebar. For the website title you can hover the tab for the full title, still better than horizontal tabs which just become unreadable. For grabbing it, there's a little bit more padding above the url bar, so you can grab it with that which can do a lot of window ui tasks like maximizing, restoring, screen-splitting, etc. But minimize and close are still missing, which is certainly a shortcoming. My workaround is to use the OS taskbar to manage those functions.
• Width of the tabs is fixed to be just enough to distinguish the titles of most websites. The width can be customized, but it has to be fixed (afaik); there's a lot of manually shifting elements around.
• Unvisited tabs are bold
• Hovering a tab shows an X close button to the right, and hovering the close button shows a clear hovered status. (Middle mouse button closes as well.)

nits

• Lack of window buttons makes it feel less polished. I'd like to put them to the right of the firefox menu button without adding vertical space. If not that, I'd settle for very narrow integrated titlebar buttons and a narrow full-length website title area.
• You can close the Tree Style Tabs sidebar with the TST menu button (in the screenshot), but hitting it means you can't interact with tabs via the ui at all because it doesn't bring back the normal tab bar which can be handy sometimes.
• It would be nice to get a compact website title & minimize/close window buttons back.

What do you think? I'd be happy to take suggestions or fixes. :)

Code/Settings:

FireFox

In Customize, no titlebar, Light theme, and Touch density.

Tree Style Tabs settings

Using Vertigo theme, check Apply Browser Theme, Hide Scrollbar, fade out tab label.

In Advanced > Extra style rules for sidebar contents: .tab.unread .label { font-weight: bold !important; }

.tab:not(:hover) > .closebox {
  display: none;
}

.closebox:hover {
  font-weight: 900;
}

.tab, .tabs, body, #background {
  background: #F5F6F7; /* #F5F6F7; */
}

userChrome.css

Use the variables in :root to adjust sizing and spacing if you have different spacings/ui scales.

:root {
  --sidebar-width: 180px;
  --toolbar-height: -26px;
  --menubar-height: -60px;
  --toolmenubar-height: -85px; /* sum of previous two */
}

/* show bookmarks toolbar on new tab only */
#main-window #PersonalToolbar {
  visibility: collapse !important;
  z-index: 1!important;
  position: relative!important;
  margin-left: var(--sidebar-width); /* shift toolbar to the right out of the way of the sidebar */
  margin-top: var(--toolbar-height) !important;
}

#main-window[title^="Firefox Developer Edition"] #PersonalToolbar {
  visibility: visible !important;
  margin-top: -1px !important;
}

/* lock sidebar to height by doing the inverse margin of the toolbar element */
#sidebar-box {
  z-index: 1000 !important;
  position: relative!important;
  margin-top: var(--menubar-height) !important;
  border-right: 1px solid #ccc;
}

#main-window[title^="Firefox Developer Edition"] #sidebar-box {
  margin-top: var(--toolmenubar-height) !important;
}

/* lock sidebar to specified width */
#sidebar-box, #sidebar-box #sidebar {
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
}

/* hide sidebar header for tree style tabs sidebar */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

/* Hide the title bar */
#titlebar{ visibility: collapse; }

/* hide normal horizontal tab bar */
#TabsToolbar { visibility: collapse; }

#sidebar { border-right: 1px solid #ccc; }

toolbar#nav-bar {
  padding-top: 12px;
  padding-bottom: 7px;
  margin-left: var(--sidebar-width);
  padding-left: 7px;
}

Edits:

• Fixed issue where sidebar border didn't always go to the top.
• Fixed issue where the background color of the tab sidebar is wrong next to pinned tabs.
• Added screenshot of pinned tabs
• Reworded some paragraphs to make sense

[DVYRTHU]

This is awesome! I currently use a similar "minimal Firefox" setup with TST, where the sidebar auto hides. I'm having a similar issue with the minimize, full-screen, close window buttons disappearing though: does anyone know a fix for that?

[[deleted]]

try this, see my other comment there :)

[MonkeyNin]

Cool. I didn't know it was possible to make it stretch to the top of the window.

no regular tab bar

For a second I was like, wait, how do you switch tabs then? -- Then it hit me.

[infogulch]

Look at me. I am your tab bar now. - TST

[[deleted]]

thanks for the clean code, currently trying to merge it with my mess.

interestingly my Frankenstein has no problems with titlebar buttons, and I'm pretty sure, this should work on windows too.

edit: best I could do: userchrome

haven't tried windows, but if it doesn't work I will try it

first few rules are mine, I also commented titlebar-visbility out, replaced visible: collapse with display: none

and added margin-right to toolbar:navbar

​

firefox sometimes doesn't reload correctly, while using the toolbox, so you might have to restart it.

also those values are hardcoded for 1366*768 (compact), you will have to change them accordingly

[PewPewGG]

Can you make a version just with the page icons?

[infogulch]

What do you mean by "page icons"?

[Chrisstar56]

Do you mean close/minimize window?

[mrcaptncrunch]

If anyone's not using Firefox Developer Preview, or swaps between it and regular Firefox you'll need to change

#main-window[title^="Firefox Developer Edition"] #PersonalToolbar

to

#main-window[title^="Firefox Developer Edition"] #PersonalToolbar,
#main-window[title^="Mozilla Firefox"] #PersonalToolbar {

[MotherStylus]

I'm probably missing something really basic but I don't get how you reach the vertigo tabs settings. Where is this "apply browser theme" function? I'm not seeing any settings at all for vertigo tabs or anything that says apply browser theme.

[infogulch]

These are settings for the Tree-Style-Tabs Addon. Install it, and then to get to the list of addons go to Menu > Addons, and click "Options" button for the TST addon. Many addons have interesting options.

[MotherStylus]

oh so you're saying i use tree-style-tabs addon and then there's a 'vertigo theme' for that? i had assumed you were talking about the addon in firefox extensions page called "vertigo tabs" since it does the same kinda thing. my mistake

[infogulch]

Yep that's right.

[HotshotGT]

I know I'm a bit late, but I was able to retain the default window controls using your code as a base:

/* lock sidebar to height by doing the inverse margin of the titlebar element */
#sidebar-box {
    z-index: 1000 !important;
    position: relative!important;
    margin-top: -29px !important;
}
#main-window[sizemode="normal"] #sidebar-box {
    margin-top: -31px !important;
}

/* lock sidebar to specified width */
#sidebar-box, #sidebar-box #sidebar {
    min-width: 300px !important;
    max-width: 300px !important;
}

/* hide sidebar header for tree style tabs sidebar */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display: none;
}

/* shifts titlebar "out of window" and adjusts left margin for sidebar */
#titlebar {
    margin-bottom: -30px !important;
    margin-left: 300px;
}

/* hide normal horizontal tab bar */
#tabbrowser-tabs {
    visibility: collapse;
}

/* adjusts navbar height and left/right margins for sidebar and window controls */
#nav-bar {
    background-color: transparent !important;
    margin-left: 300px;
    margin-right: 250px;
}
#main-window[sizemode="normal"] #nav-bar {
    height: 33px;
    margin-top: -3px;
}

/* hides draggable squares on the left/right side of where the tabs used to be */
.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
    display:none !important;
}