Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

src/zen/workspaces/ZenWorkspace.mjs

@@ -49,6 +49,33 @@
       this.initializeAttributeInheritance();
 
       this.scrollbox = this.querySelector('arrowscrollbox');
+      this.scrollbox.smoothScroll = Services.prefs.getBoolPref(
+        'zen.startup.smooth-scroll-in-tabs',
+        false
+      );
+
+      this.scrollbox._getScrollableElements = () => {
+        return gBrowser.tabContainer.ariaFocusableItems.filter(this.scrollbox._canScrollToElement);
+      };
+      this.scrollbox._canScrollToElement = (element) => {
+        if (gBrowser.isTab(element)) {
+          return !element.hasAttribute('zen-essential') && !this.hasAttribute('positionpinnedtabs');
+        }
+        return true;
+      };
+
+      // Override for performance reasons. This is the size of a single element
+      // that can be scrolled when using mouse wheel scrolling. If we don't do
+      // this then arrowscrollbox computes this value by calling
+      // _getScrollableElements and dividing the box size by that number.
+      // However in the tabstrip case we already know the answer to this as,
+      // when we're overflowing, it is always the same as the tab min width or
+      // height. For tab group labels, the number won't exactly match, but
+      // that shouldn't be a problem in practice since the arrowscrollbox
+      // stops at element bounds when finishing scrolling.
+      Object.defineProperty(this.scrollbox, 'lineScrollAmount', {
+        get: () => 36,
+      });
 
       // Add them manually since attribute inheritance doesn't work
       // for multiple layers of shadow DOM.

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2590,6 +2590,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
       for (const workspaceId of workspacesIds) {
         const workspaceElement = this.workspaceElement(workspaceId);
+        if (!workspaceElement) {
+          continue;
+        }
         const arrowScrollbox = workspaceElement.tabsContainer;
         const pinnedContainer = workspaceElement.pinnedTabsContainer;
         const workspaceObject = this.getWorkspaceFromId(workspaceId);

src/zen/workspaces/zen-workspaces.css

@@ -513,9 +513,14 @@ zen-workspace {
   height: 100%;
   overflow: hidden;
 
+  :root:not([zen-sidebar-expanded='true']) & {
+    width: 100%;
+  }
+
   & > arrowscrollbox {
     max-height: 100%;
     overflow: hidden;
+    position: relative;
 
     &::part(scrollbutton-up),
     &::part(scrollbutton-down) {
@@ -524,10 +529,47 @@ zen-workspace {
 
     &::part(scrollbox) {
       scrollbar-width: thin;
-      scrollbar-color: var(--vertical-tabs-scrollbar-color);
+      scrollbar-color: color-mix(in srgb, currentColor 35%, transparent 65%) transparent; /* Custom scrollbar */
       overflow-y: auto;
     }
 
+    &[overflowing] {
+      --zen-scrollbar-overflow-background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.1s;
+        background-color: var(--zen-scrollbar-overflow-background);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.1s;
+        background-color: var(--zen-scrollbar-overflow-background);
+      }
+
+      &:not([scrolledtostart])::before {
+        opacity: 1;
+      }
+
+      &:not([scrolledtoend])::after {
+        opacity: 1;
+      }
+    }
+
     &,
     & .zen-workspace-normal-tabs-section {
       height: 100%;