Autohide scrollbar CSS does not seem to work (+proposed fix)

[lgommans]

On the Custom CSS tweaks wiki page, the Autohide scrollbar tweak does not seem to work anymore. If one replaces #tabbar with #tabbar-wrapper, it seems to work again, but now the horizontal scrollbar is shown. To fix that, we need to move the overflow-x: hidden property to the body element.

Can someone verify that the current code is broken for them as well? I assume Tab Center Redux's html changed and it's not only my computer on which it is broken, but I just wanted to make sure.

If so, please try my new code and let me know if it works:

#tablist-wrapper {
  margin-right: -19px; /* Width of scrollbar in Windows 10 and KDE's Breeze theme; adjust as needed */
  transition: margin-right 0s 1s;
}
#tablist-wrapper:hover {
  margin-right: 0px;
  transition: margin-right 0s 4s;
}
body {
  overflow-x: hidden;
}

[sap7772000zilla]

Hello. I tried the above code as well as maybe 10 more from different sources, auto-shrink simply doesn't work with any, the only option I have is to open and close it, nothing more; using FF Quantum 64.0.2 (64-bit). Thank you.

[xlf1024]

I copied this back when I installed the addon:

.tab {
  max-width: 100vw;
}
#tablist:not(:hover){
  margin-right: -17px;
}
#tablist:hover {
  margin-right: -8px; /* only partial reveal, I don't need full width, set this to 0px for "normal" look*/
}
#tablist-wrapper {
  overflow-x: hidden;
}

which still works in FF64.0 on Win10 64bit I have no transition for performance reasons, especially as I combined this with a userChrome.css which collapses the whole panel on un-hover. (Deactivated that for testing now.)

I haven't yet updated to FF64.0.2 though, as the Updater seems broken since a recent networks driver crash (unrelated to FF and this Add-On). As it is only a minor change, I don't expect that to be the reason.

[sap7772000zilla]

Thank you for your reply but copying the above code made no difference, the tabs are either open or close and I use the button for this. I have no idea what a userChrome.css and I probably don't use one, at least not that I know of. Other settings I use are: Integrate with current theme is checked and Compact Mode is Dynamic, the other 2 options are left unused. Theme is Plasma 5 Breeze Dark Thank you.

[xlf1024]

@sap7772000zilla Could you please describe what you would expect to happen? The above code, both lgommans' and mine, are only meant to hide the scrollbar (i.e. the thing you can drag to scroll), but you sound like you'd want to hide the whole sidebar.

[xlf1024]

@lgommans just tried your code, works for me as well, except for that the animation isn't displayed for me, which might be due to my outdated hardware.

[sap7772000zilla]

@xlf1024 you're right, sorry for being so thick. I used for a long time (the original)Tab Center in FF 4x/5x until I couldn't because of the new versions and after forcibly being moved to Quantum I spent one afternoon trying to find something that works but found nothing like it ...I guess at some point my brain only read "Autohide" and ignored everything else... That being said ... any suggestion please? Thank you and, again, I apologize for the time wasted

[xlf1024]

As far as I know, the box you pasted your CSS in so far can't do that, for the same reasons the addon can't hide the normal tab bar (or couldn't at least back when I installed it). Apparently FF doesn't give permission to addons to change the appearance of the sidebar and the tab strip.

Thus you'll need to use a userChrome.css. If I'm correct, it's a stylesheet that gets applied unfiltered to all parts of the browser interface, thus is very powerful. Thus, it is also quite dangerous, as it could make everything unusable or, worse, be used to disguise malicious stuff by integrating it into the browser UI. Thus, do some research on it first. Also, maybe read #15 .

If you are sure you want to trust me, or if you understand CSS, here's what I have in mine. Again, this is not the CSS box in the addon settings, but the contents of the userChrome.css file you'll have to create first.

@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://browser/content/browser.xul") {
  #TabsToolbar { visibility: collapse !important; }
  #main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar {
    border-right: 140px solid var(--toolbar-bgcolor);
  }
  #titlebar{
    margin-bottom: -29px !important;
  }
  #titlebar-buttonbox{
    height: 29px !important;
    border-bottom: 0px !important;
    vertical-align: middle;
    z-index: 2 !important;
  }

  #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] sidebarheader {
    /*! visibility: collapse !important; */
    display: none !important;
  }
  #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"]{
  overflow: hidden;
  position: fixed !important;
  transition: all 0.2s ease;
  border-right: 1px solid #000;
  top: 41px;
    width: 18em;
}
}

#sidebar-box:not(:hover):not(:focus-within){
  width:29px;
}

/*
 * ADJUST!
 * You need to subtract the height of the panels above sidebar: nav bar,
 * bokmarks bar, sidebar header, etc. -- whichever you have enabled.
 * 
 * 42px subtracted below is the height of the nav bar with default theme.
 * I don't have bookmarks bar enabled, and sidebar header is hidden with
 * CSS above, so this is all I need to do.
 * 
 * Compact theme nav bar height is 29px btw, if you use that.
 */
#sidebar {
  height: calc(100vh - 41px); 
}

#appcontent {
  margin-left: 30px;
}

#main-window[inFullscreen] #appcontent {
  margin-left: 0px;
}

#main-window[inFullscreen] #sidebar {
  height: 100vh;
}

#main-window[inFullscreen] #sidebar-box{
  top: 0px;
  outline: 2em solid transparent;
  transition: width 1s ease-out;
}
#main-window[inFullscreen] #sidebar-box:not(:hover):not(:focus-within){
 width: 0px;
 outline: 5px solid #0ff;
 opacity: 0;
 transition: opacity 5s ease-out, outline-width 0.25s ease-out;
}

I copied this mostly together from some wiki entries and other issues on here and slightly adapted it for my purposes.