Add bottom shadow when we can scroll down (mirror top shadow)

src/sidebar/tab.js

@@ -113,14 +113,14 @@ SideTab.prototype = {
     this._hostView.innerText = this.host;
   },
   _updateAudible(audible) {
-    toggleClass(this._iconOverlayView, "sound", audible);
+    this._iconOverlayView.classList.toggle("sound", audible);
   },
   _updatedMuted(muted) {
     this.muted = muted;
-    toggleClass(this._iconOverlayView, "muted", muted);
+    this._iconOverlayView.classList.toggle("muted", muted);
   },
   _updateLoading(isLoading) {
-    toggleClass(this.view, "loading", isLoading);
+    this.view.classList.toggle("loading", isLoading);
     if (isLoading) {
       SideTab._syncThrobberAnimations();
       this._notselectedsinceload = !this.view.classList.contains("active");
@@ -136,7 +136,7 @@ SideTab.prototype = {
     this._burstView.classList.add("bursting");
   },
   updateActive(active) {
-    toggleClass(this.view, "active", active);
+    this.view.classList.toggle("active", active);
     if (active) {
       this._notselectedsinceload = false;
       this.view.removeAttribute("notselectedsinceload");
@@ -166,7 +166,7 @@ SideTab.prototype = {
   },
   updateVisibility(show) {
     this.visible = show;
-    toggleClass(this.view, "hidden", !show);
+    this.view.classList.toggle("hidden", !show);
   },
   _setIcon(favIconUrl) {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1462948
@@ -191,10 +191,10 @@ SideTab.prototype = {
   },
   _updatePinned(pinned) {
     this.pinned = pinned;
-    toggleClass(this.view, "pinned", pinned);
+    this.view.classList.toggle("pinned", pinned);
   },
   _updateDiscarded(discarded) {
-    toggleClass(this.view, "discarded", discarded);
+    this.view.classList.toggle("discarded", discarded);
   },
   _updateThumbnail() {
     requestIdleCallback(async () => {
@@ -345,8 +345,4 @@ function debounce(fn, delay) {
   };
 }
 
-function toggleClass(node, className, boolean) {
-  boolean ? node.classList.add(className) : node.classList.remove(className);
-}
-
 export default SideTab;

src/sidebar/tabcenter.css

@@ -375,19 +375,31 @@ body[platform="win"] #searchbox-input:placeholder-shown {
     border-bottom: 1px solid var(--tab-border-color);
 }
 
-#topshadow {
+#topshadow, #bottomshadow {
     flex-shrink: 0;
-    position: relative;
     width: 100%;
     height: 10px;
-    margin-bottom: -10px;
     z-index: 1;
     pointer-events: none;
-    transition: box-shadow 0.3s cubic-bezier(.07,.95,0,1);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+#topshadow {
+    position: relative;
+    margin-bottom: -10px;
+    box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
 }
 
-#tablist-wrapper.scrolled #topshadow {
-    box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.3);
+#bottomshadow {
+    position: absolute;
+    bottom: 0px;
+    box-shadow: inset 0px -10px 10px -10px rgba(0, 0, 0, 1);
+}
+
+#tablist-wrapper.can-scroll-top #topshadow,
+#tablist-wrapper.can-scroll-bottom #bottomshadow {
+    opacity: 1;
 }
 
 .tab.active {

src/sidebar/tabcenter.html

@@ -22,6 +22,7 @@
       <div id="pinnedtablist"></div>
       <div id="topshadow"></div>
       <div id="tablist"></div>
+      <div id="bottomshadow"></div>
       <div id="moretabs" draggable="true"></div>
       <div id="spacer" draggable="true"></div>
     </div>

src/sidebar/tablist.js

@@ -254,7 +254,7 @@ TabList.prototype = {
   },
   async _hasRecentlyClosedTabs() {
     const undoTabs = await this._getRecentlyClosedTabs();
-    return !!undoTabs.length;
+    return undoTabs.length > 0;
   },
   async _getRecentlyClosedTabs() {
     const sessions = await browser.sessions.getRecentlyClosed();
@@ -273,9 +273,14 @@ TabList.prototype = {
   },
   onScroll() {
     if (this._view.scrollTop === 0) {
-      this._wrapperView.classList.remove("scrolled");
+      this._wrapperView.classList.remove("can-scroll-top");
     } else {
-      this._wrapperView.classList.add("scrolled");
+      this._wrapperView.classList.add("can-scroll-top");
+    }
+    if ((this._view.scrollTop + this._view.clientHeight) >= this._view.scrollHeight) {
+      this._wrapperView.classList.remove("can-scroll-bottom");
+    } else {
+      this._wrapperView.classList.add("can-scroll-bottom");
     }
   },
   _onClick(e) {