mulcahey

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;
}```

I use an Android e-reader (the Likebook P6) and I'm so frustrated by the lack of a good read-it-later app. This chart lays out the shortcomings of current apps.

Pocket used to be good but they dropped support for page turning.

Does anyone have a good app for saving and reading articles on e-ink screens?

There's an Omnivore beta app that supports page turning (great!!) but... for some reason, I can't adjust the fonts on my tablet. (I have this issue with the official Ominvore app, too.) And the Omnivore app doesn't auto-download articles?!?! I have to be online to load each article when I open it, and only then can I go offline. Pocket and Wallabag don't work this way; they'll download all your articles at once and you can read them all later, even if offline.

Are there any other options???

There's a great newsletter called nonsense nyc that lists great, off beat events for the coming week.

But it's only available as a newsletter, which is kinda annoying. I'd love to have it as a Google Calendar.

I could manually take the events from nonsense and add each one to my calendar, but that's a chore. Does anyone know a good way to automate it?

For years, I've used a CSS trick to move my window controls (Minimize, Fullscreen, Close) from the Menu Bar into the lower toolbar, right beside my Overflow menu. (I'm on Windows 10, so these are the controls you see in the upper right window)

But suddenly, that doesn't work. My window controls are back up in the Menu Bar. That's unfortunate, because I usually hide my Menu Bar.

Can anyone review my code and tell me what needs to change? Thank you!

/* Move Window Control buttons to Nav Bar */

:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-control-width: 138px; /* Space reserved for window controls (Win10) */
  /* Extra space reserved on both sides of the nav-bar to be able to drag the window */
  --uc-window-drag-space-post: 30px; /* right side*/
}

:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 0px; /* Remove pre space */
}

@media  (-moz-platform: windows-win7),
        (-moz-platform: windows-win8),
        (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8){
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 105px;
  }
}

@media (-moz-gtk-csd-available) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 84px;
  }
}

.titlebar-buttonbox, #window-controls{ color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none }
:root[sizemode="fullscreen"] #navigator-toolbox { position: relative; }

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls{
  position: absolute;
  display: flex;
  top: 0;
  right:0;
  height: 40px;
}

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls{ height: 32px }

#nav-bar{
  border-inline: var(--uc-window-drag-space-pre,0px) solid var(--toolbar-bgcolor);
  border-inline-style: solid !important;
  border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px));
}

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }

#TabsToolbar{ visibility: collapse !important }

:root[sizemode="fullscreen"] #TabsToolbar > :is(#window-controls,.titlebar-buttonbox-container){
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  -moz-box-flex: 1;
  -moz-box-align: stretch;
  background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  background-clip: padding-box;
  border-right: 30px solid transparent;
  border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}