Refactor tab close handling and maintain scrollbar state

src/browser/base/content/ZenUIManager.mjs

@@ -28,7 +28,7 @@ var gZenUIManager = {
       this._hasLoadedDOM = true;
     });
 
-    window.addEventListener('TabClose', this.updateTabsToolbar.bind(this));
+    window.addEventListener('TabClose', this.onTabClose.bind(this));
   },
 
   updateTabsToolbar() {
@@ -56,6 +56,24 @@ var gZenUIManager = {
     tabs.style.maxHeight = height + 'px';
   },
 
+  get tabsWrapper() {
+    if (this._tabsWrapper) {
+      return this._tabsWrapper;
+    }
+    this._tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
+    return this._tabsWrapper;
+  },
+
+  saveScrollbarState() {
+    this._scrollbarState = this.tabsWrapper.scrollTop;
+  },
+
+  onTabClose(event) {
+    this.updateTabsToolbar();
+    this.tabsWrapper.scrollTop = this._scrollbarState;
+    this._scrollbarState = 0;
+  },
+
   openAndChangeToTab(url, options) {
     if (window.ownerGlobal.parent) {
       const tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options);
@@ -248,7 +266,7 @@ var gZenVerticalTabsManager = {
         aTab.style.removeProperty('opacity');
       });
     gZenUIManager.motion
-      .animate(aTab.querySelector('.tab-stack'), {
+      .animate(aTab.querySelector('.tab-content'), {
         filter: ['blur(1px)', 'blur(0px)'],
       })
       .then(() => {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -1080,7 +1080,7 @@
   position: fixed;
   z-index: 1000;
   background: var(--zen-drag-indicator-bg);
-  transition: top 0.1s ease;
+  transition: top 0.1s ease-out;
   pointer-events: none;
   left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
   border-radius: 5px;