From e69cd51b118a5e0549caa099a8501289ecf3ba93 Mon Sep 17 00:00:00 2001
From: ariasuni <perso@hack-libre.org>
Date: Mon, 21 May 2018 16:24:29 +0200
Subject: [PATCH 1/2] Add bottom shadow mirroring top shadow, fix shadow
 (dis)appearing animation

---
 src/sidebar/tabcenter.css  | 24 ++++++++++++++++++------
 src/sidebar/tabcenter.html |  1 +
 src/sidebar/tablist.js     |  9 +++++++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/sidebar/tabcenter.css b/src/sidebar/tabcenter.css
index 7ad89a1..63c6a9e 100644
--- a/src/sidebar/tabcenter.css
+++ b/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 {
diff --git a/src/sidebar/tabcenter.html b/src/sidebar/tabcenter.html
index aaab1c8..589bac6 100644
--- a/src/sidebar/tabcenter.html
+++ b/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>
diff --git a/src/sidebar/tablist.js b/src/sidebar/tablist.js
index 94d1eb5..3596fc5 100644
--- a/src/sidebar/tablist.js
+++ b/src/sidebar/tablist.js
@@ -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) {

From 1e5cae8fb19022c5757c528ffdbb487011e0fdee Mon Sep 17 00:00:00 2001
From: ariasuni <perso@hack-libre.org>
Date: Mon, 21 May 2018 16:29:31 +0200
Subject: [PATCH 2/2] Cleaning and clarifying a few JavaScript

---
 src/sidebar/tab.js     | 18 +++++++-----------
 src/sidebar/tablist.js |  2 +-
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/sidebar/tab.js b/src/sidebar/tab.js
index 6801571..397e49b 100644
--- a/src/sidebar/tab.js
+++ b/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;
diff --git a/src/sidebar/tablist.js b/src/sidebar/tablist.js
index 3596fc5..d9eb48d 100644
--- a/src/sidebar/tablist.js
+++ b/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();