JavaScript-free scrollbar (#2181)

* JavaScript-free scrollbar

Make scrollbar work without JavaScript
https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240804225
Also implies a better support of resize scenarios.
Seems to fix at the same time the occasional glitches
https://github.com/FreshRSS/FreshRSS/pull/2117#issuecomment-447556038

* Firefox 64-66 workaround

Workaround for Gecko bug in Firefox 64-66. Avoid showing the scrollbar
all the time, at the cost of a slight reflow (therefore targetting only
Gecko).

* Improvement of Firefox workaround

* Minor comment

* Unneeded check

* Even better

* Partial Edge fix

* More margin for tree bottom

p/scripts/main.js

@@ -551,7 +551,13 @@ function init_column_categories() {
 			}
 		});
 		$(this).parent().next(".tree-folder-items").slideToggle(300, function () {
-			if (useJsScrollbar && sidebar && typeof(Event) === 'function') { //Refresh JS scrollbar
+			if (!useJsScrollbar &&	//Workaround for Gecko bug in Firefox 64-65(+?):
+				sidebar.scrollHeight > sidebar.clientHeight &&	//if needs scrollbar
+				sidebar.scrollWidth >= sidebar.offsetWidth) {	//but no scrollbar
+				sidebar.style['overflow-y'] = 'scroll';	//then force scrollbar
+				setTimeout(function () { sidebar.style['overflow-y'] = ''; }, 0);
+			}
+			if (useJsScrollbar && typeof(Event) === 'function') { //Refresh JS scrollbar
 				sidebar.querySelector('.ss-content').dispatchEvent(new Event('scroll'));
 			}
 		});
@@ -1279,7 +1285,7 @@ var useJsScrollbar = true;
 try {
 	/*jshint -W018 */
 	useJsScrollbar = sidebar && !CSS.supports('scrollbar-color: auto') &&
-		!(parseInt(getComputedStyle(sidebar, '::-webkit-scrollbar').width) < sidebar.offsetWidth);
+		!(parseInt(getComputedStyle(sidebar, '::-webkit-scrollbar').width) < sidebar.scrollWidth);
 	/*jshint +W018 */
 } catch (ex) {
 }
@@ -1312,12 +1318,10 @@ function init_simple_scrollbar() {
 
 var scrollTimeout;
 function init_sticky_sidebar(){
-	if (!sidebar) {
+	if (!useJsScrollbar) {
 		return;
 	}
-	if (useJsScrollbar) {
-		init_simple_scrollbar();
-	}
+	init_simple_scrollbar();
 	$(window).scroll(function () {
 		if (scrollTimeout) {
 			clearTimeout(scrollTimeout);

p/themes/base-theme/template.css

@@ -435,7 +435,7 @@ a.btn {
 
 @supports (scrollbar-width: thin) {
 	#sidebar {
-		overflow-y: scroll;
+		overflow-y: auto;
 		scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
 		scrollbar-width: thin;
 	}
@@ -462,6 +462,7 @@ a.btn {
 /*=== Tree */
 .tree {
 	margin: 0;
+	max-height: 99vh;
 	list-style: none;
 	text-align: left;
 	overflow-x: hidden;
@@ -496,7 +497,7 @@ a.btn {
 }
 .tree-bottom {
 	visibility: hidden;
-	margin-bottom: 15em;
+	margin-bottom: 18em;
 }
 
 /*=== STRUCTURE */
@@ -536,7 +537,6 @@ a.btn {
 }
 .aside {
 	display: table-cell;
-	height: 100%;
 	width: 300px;
 	vertical-align: top;
 }