No auto-shrink for the sidebar

[mlissner]

This is a super important feature for me because I use two monitors. My laptop monitor is small and needs to have the sidebar shrunk so that webpages look at all reasonable. My main monitor is huge, so it's silly to have the sidebar shrunk.

Tabcenter had a button for this, but I've always thought it could be algorithmic, based on the size of the window.

In any case, can we have something back?

[eoger]

The sidebar has a hardcoded min-width and I don't think it can be changed by the HTML page that is displayed, so I will most probably end up being a WONTFIX.

[mlissner]

I guess the other option is to ask for an API for this? Mozilla is willing to provide sidebar APIs, which encourages usages that leave the sidebar open all the time. Maybe Mozilla would consider some sort of auto-shrink API or some sort of resize API? Is it worth adding this to the list of API suggestions this extension is provoking?

[Bo-Duke]

Made an userChrome.css that auto-shrinks the tab center, if you're interested. It isn't as good as the original one but it kind of works :

#tabbrowser-tabs {
    visibility: collapse !important;
}

#sidebar-box {
    overflow-x: hidden;
    min-width: 50px !important;
    max-width: 50px !important;
    transition: all 0.25s ease !important;
}

#sidebar-box:hover {
    min-width: 250px !important;
    max-width: 250px !important;
} 

Or if you want the sidebar to adapt to your screen width you can use the vw unit, 15% of the screen's width works pretty well IMO :

#sidebar-box {
    overflow-x: hidden;
    min-width: 15vw !important;
    max-width: 15vw !important;
}

[mlissner]

I set it to adapt to my screen with 20vw as the width. The sidebar is not adjustable now, but I think it's still a huge improvement! Thank you!

[Smile4ever]

@mlissner

I guess the other option is to ask for an API for this? Mozilla is willing to provide sidebar APIs, which encourages usages that leave the sidebar open all the time. Maybe Mozilla would consider some sort of auto-shrink API or some sort of resize API? Is it worth adding this to the list of API suggestions this extension is provoking?

What you're asking for, is this:
Allow setting min-width and max-width for sidebar
https://bugzilla.mozilla.org/show_bug.cgi?id=1346490 (RESOLVED WONTFIX)

A slightly related bug report is this one:
Make it possible to resize WebExtensions sidebar smaller and wider
https://bugzilla.mozilla.org/show_bug.cgi?id=1374217

[mlissner]

FWIW, I've been rolling with the 20wv width for the past week or so, and I love it. If I'm on my mega monitor, it's great. If I'm on my laptop it's great. Seems like having the width adapt like this could be a nice way forward (though we'd want to ensure it could still be adjusted manually).

[shvchk]

@Bo-Duke, cool, thanks. It is pretty close, but it doesn't float above tab content as in original Tab Center, forcing content width change, which is slow and ugly 😬 So here is a floating version, should be even smoother than original, but it has one downside: you need to manually adjust panel height (see comment in CSS).

• userChrome.css gist
• Video preview

[lkraav]

For some weird reason, a few windows with a lot of tabs fail to display an overflow vertical scrollbar. I can use the keyboard to blindly switch to tabs at the bottom of the window, so I know they're there. Any thoughts on why some windows sidebars might misbehave like this?

[ksesong]

@shvchk I am really nitpicking at this point, but it seems that the sidebar border-right color is different (not equal to #ddd) when shrinked. It has the right color #ddd when expanded.

[shvchk]

@ksesong it's #ddd for me in both states, also tested #f00 for better distinction if it would change, but it doesn't 😃

[eoger]

Can't do much here on my side, but feel free to check the CSS Tweaks wiki page where something similar can be done.

[SoftVision-PaulOiegas]

Is it just me or sidebar auto-hide does not work in the release version of Firefox (Fx70 and Fx71)? It totally works on Nightly channel for me, but not on release.

I have redone the CSS file entirely and copied the last version of the CSS from @shvchk. Also switched all the mandatory prefs needed. Everything else works but not the auto hide. Mine is always fixed and I can only resize it manually.

[SoftVision-PaulOiegas]

This is odd, I've managed to make it work by copying the Nightly css file intro Release Chrome folder. I'm not sure if it was something related to the file or the css example provided by @shvchk is missing something to make it work.
But now I'm stuck with a white margin on the right of the sidebar that has the same size as the shrink sidebar.

Using this right now as css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#main-window {
    --toolbar-background: #31363b !important;
}

#tabbrowser-tabs {
    visibility: collapse !important;
}

#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] {
    overflow: hidden;
    min-width: 32px;
    max-width: 32px;
    position: fixed;
    top: 36px;
    transition: all 0.2s ease;
    border-right: 1px solid #0c0c0d;    
    z-index: 2;
}

#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] #sidebar {
    min-width: 260px !important;
    max-width: 260px !important;
}

#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] #sidebar-header, #sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] ~ #sidebar-splitter {
    display: none;
}

#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] #sidebar-header {
    background-color: #31363b;
    border-bottom: none;
}

#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] #sidebar {
    height: calc(100vh - 94px); 
}

#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:not([hidden="true"]) ~ #sidebar-splitter ~ #appcontent {
    margin-left: 32px;
}

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

[andersjohansson]

I’m also having problems with the recently released FF71. For me, the sidebar shrinks and expands, but not fixed over the page anymore, instead the page is narrowed and reflowed.

Which were the css-files from nightly you copied @SoftVision-PaulOiegas?

The white margin you see should be from this rule:

#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:not([hidden="true"]) ~ #sidebar-splitter ~ #appcontent {
    margin-left: 32px;
}

Maybe removing that works?

[SoftVision-PaulOiegas]

Thanks @andersjohansson, indeed it fixed my white margin issue. Somehow I totally overlooked that part of css. 😄
Regarding the css file you asked. I had one css for my Release version and one in my Nightly version. The one on release wasn't permitting sidebar auto-hide with mostly the same code, while the Nightly one allowed. And since it wasn't something browser or pref related, I took the Nightly one, copied it also for Release and adjusted it for my needs. It's the code I posted above.

Also, I do have the same problem as you. The sidebar is not opening above the web page, but instead resizes the webpage. However, I'm not sure if this can be avoided since the sidebar occupies window space when expanded, so the web view narrows, which forces the page content to readjust.

[andersjohansson]

Great!
Then I see what you mean by css files. I have essentially the same in my userChrome.css.

The thing is that something seems to have changed between FF70 and FF71, because for me, in FF70 the sidebar expanded "above" the page, with no shrinking or reflowing happening. I’ve tried to tweak the userChrome.css without success, and also tried to find what has changed through FF bug-reports and code changes (starting from this search: https://dxr.mozilla.org/mozilla-central/search?q=sidebar&redirect=true). Haven’t found anything yet, but I’ll continue.

[SoftVision-PaulOiegas]

If it's a pref that changed, you could compare the "about:support" page "Important Modified Preferences" sections from both versions. Maybe something jumps up. 😛

[andersjohansson]

I solved it! We just need to add display: block for #sidebar-box (I think it’s a flex item or something by default now). This works for me:

#sidebar-box {
	display: block;
	overflow: hidden;
	min-width: 38px;
	max-width: 38px;
	position: fixed;
	transition: all 0.2s ease;
	border-right: 1px solid #ddd;
}

Maybe this had something to do with the transition from XUL... But I don’t really know. Some of the stuff I looked at to come up with this:
Current layout definitions (previously in browser.xul):
https://dxr.mozilla.org/mozilla-central/source/browser/base/content/browser.xhtml
and some of the used css:
https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/sidebar.inc.css

[SoftVision-PaulOiegas]

Uh, nice, works for me too. However, this needs some adjustment on sidebar size, as it is overlapping some parts of the browser UI now. When I'll have some time I'll throw some dimensions that work for my 22inch screen if anyone is interested. At least you'll know what to update for your screen size.

[SoftVision-PaulOiegas]

Holy guacamole, so many tiny adjustments.
So, first you need to adjust top: 63px; size from #sidebar-box. I have the bookmarks toolbar opened so 63px lowers the sidebar right under the toolbar in my case.

Then I had to add a height: 985px; in #sidebar-box in order to extend the sidebar size till the bottom of the window.

Also, I have adjusted the #sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] #sidebar { height: calc(119vh - 255px); part to the specified dimensions to extend also the content to the size of the sidebar, and to have all the opened tabs in view. If the dimensions are different, I'm not seeing all the opened tabs when scrolling to bottom of the sidebar.

Hope this helps, you really need to manually tweak them to suite your screen.

[andersjohansson]

Sounds strange that you need so specific vertical adjustments. For me the following works perfectly, at different sizes of the firefox window.
Especially your calc(119vh - 255px) seems fragile. Shouldn’t it just work with 100vh (height of FF window) minus the height of the navbar (and possibly bookmark bar and tab bar?)

BTW, I use Tabcenter Reborn
(I use 38px width for perfect fit of the compact view icons when collapsed).

/* HIDE TABS */
#tabbrowser-tabs {
	visibility: collapse !important;
}

/* auto-collapsing sidebar: */
#sidebar-box {
	display: block;
	overflow: hidden;
	min-width: 38px;
	max-width: 38px;
	position: fixed;
	transition: all 0.2s ease;
	border-right: 1px solid #ddd;
}

#sidebar-box:hover,
#sidebar-header,
#sidebar {
	min-width: 20vw !important;
	max-width: 20vw !important;
}

#sidebar-header,
#sidebar-splitter {
	display: none;
}


/*
 * ADJUST!
 * I only have the nav-bar, and in compact mode. That's 29px. Tabbar and bookmark bar is hidden.
 */
#sidebar {
	height: calc(100vh - 29px);
}

#sidebar-box:not([hidden]) ~ #appcontent {
	margin-left: 38px;
}

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

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

[SoftVision-PaulOiegas]

Probably I over complicated my CSS, your variant is more cleaner and works better. Thanks for it!
The only thing that I'll probably need to adjust a bit is the max size of the sidebar. On my 13 inch laptop screen I cannot see the last tab opened and the last but one is only ~80% visible.

[shvchk]

I've updated my gist to support Firefox 71. It now also uses flexbox, so we don't need to take sidebar header into account when calculating sidebar height, only navbar and bookmarks bar (if any). Also flexbox gives an option to easily place sidebar header at the bottom in case someone wants it.

• userChrome.css gist
• Video preview (ancient, but still gives general idea about how this works)

[OhSoGood]

With Firefox 72, the autoshrink that I had (from https://github.com/eoger/tabcenter-redux/wiki/Custom-CSS-tweaks#floating-auto-shrinking-sidebar-103-video-preview ) is broken: the sidebar expands only when I click on a previously unloaded tab, and get skrinked as soon as the page has refreshed/redrawn. If I simply move the mouse over, or click on a loaded tab, the sidebar does not expand.
Any idea?

[rtrbt]

I'm using @andersjohansson's version and adding
z-index: 1;
after
border-right: 1px solid #ddd;
fixed the sidebar expansion with Firefox 72.

[OhSoGood]

@rtrbt : That works, thank you very much!

[SoftVision-PaulOiegas]

Sadly it seems that this CSS breaks each time Firefox updates... Starting to hate this.

[Froggy232]

Hello,
It seems to be broken with firefox 107, does someone have a fix?
I'm unfortunally unable to debug it.
Thanks you a lot

[GrigorijST]

It seems to be broken with firefox 107

The same for me! Auto-shrink stopped to work on 107 version.

[eoger]

Tab Center Redux isn't in active development anymore as I don't have time to maintain it. I suggest using an alternative such as Sidebery