feat: disableCustomScrollbars option

packages/dockview-core/src/__tests__/dockview/components/titlebar/tabs.spec.ts

@@ -0,0 +1,66 @@
+import { Tabs } from '../../../../dockview/components/titlebar/tabs';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
+import { DockviewComponent } from '../../../../dockview/dockviewComponent';
+
+describe('tabs', () => {
+    describe('disableCustomScrollbars', () => {
+        test('enabled by default', () => {
+            const cut = new Tabs(
+                fromPartial<DockviewGroupPanel>({}),
+                fromPartial<DockviewComponent>({
+                    options: {},
+                }),
+                {
+                    showTabsOverflowControl: true,
+                }
+            );
+
+            expect(
+                cut.element.querySelectorAll(
+                    '.dv-scrollable > .dv-tabs-container'
+                ).length
+            ).toBe(1);
+        });
+
+        test('enabled when disabled flag is false', () => {
+            const cut = new Tabs(
+                fromPartial<DockviewGroupPanel>({}),
+                fromPartial<DockviewComponent>({
+                    options: {
+                        scrollbars: 'custom',
+                    },
+                }),
+                {
+                    showTabsOverflowControl: true,
+                }
+            );
+
+            expect(
+                cut.element.querySelectorAll(
+                    '.dv-scrollable > .dv-tabs-container'
+                ).length
+            ).toBe(1);
+        });
+
+        test('disabled when disabled flag is true', () => {
+            const cut = new Tabs(
+                fromPartial<DockviewGroupPanel>({}),
+                fromPartial<DockviewComponent>({
+                    options: {
+                        scrollbars: 'native',
+                    },
+                }),
+                {
+                    showTabsOverflowControl: true,
+                }
+            );
+
+            expect(
+                cut.element.querySelectorAll(
+                    '.dv-scrollable > .dv-tabs-container'
+                ).length
+            ).toBe(0);
+        });
+    });
+});

packages/dockview-core/src/dockview/components/titlebar/tabs.scss

@@ -1,7 +1,7 @@
 .dv-tabs-container {
     display: flex;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
     scrollbar-width: thin; // firefox
 
     &.dv-horizontal {
@@ -35,6 +35,12 @@
     }
 }
 
+.dv-scrollable {
+    > .dv-tabs-container {
+        overflow: hidden;
+    }
+}
+
 .dv-tab {
     -webkit-user-drag: element;
     outline: none;

packages/dockview-core/src/dockview/components/titlebar/tabs.ts

@@ -101,13 +101,17 @@ export class Tabs extends CompositeDisposable {
 
         this.showTabsOverflowControl = options.showTabsOverflowControl;
 
-        const scrollbar = new Scrollbar(this._tabsList);
-        this._element = scrollbar.element;
+        if (accessor.options.scrollbars === 'native') {
+            this._element = this._tabsList;
+        } else {
+            const scrollbar = new Scrollbar(this._tabsList);
+            this._element = scrollbar.element;
+            this.addDisposables(scrollbar);
+        }
 
         this.addDisposables(
             this._onOverflowTabsChange,
             this._observerDisposable,
-            scrollbar,
             this._onWillShowOverlay,
             this._onDrop,
             this._onTabDragStart,

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss

@@ -7,6 +7,10 @@
     font-size: var(--dv-tabs-and-actions-container-font-size);
 
     &.dv-single-tab.dv-full-width-single-tab {
+        .dv-scrollable {
+            flex-grow: 1;
+        }
+
         .dv-tabs-container {
             flex-grow: 1;
 

packages/dockview-core/src/dockview/options.ts

@@ -69,6 +69,13 @@ export interface DockviewOptions {
     noPanelsOverlay?: 'emptyGroup' | 'watermark';
     theme?: DockviewTheme;
     disableTabsOverflowList?: boolean;
+    /**
+     * Select `native` to use built-in scrollbar behaviours and `custom` to use an internal implementation
+     * that allows for improved scrollbar overlay UX.
+     *
+     * This is only applied to the tab header section. Defaults to `custom`.
+     */
+    scrollbars?: 'native' | 'custom';
 }
 
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
@@ -116,6 +123,7 @@ export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
         dndEdges: undefined,
         theme: undefined,
         disableTabsOverflowList: undefined,
+        scrollbars: undefined,
     };
 
     return Object.keys(properties) as (keyof DockviewOptions)[];

packages/dockview-core/src/scrollbar.scss

@@ -1,7 +1,6 @@
 .dv-scrollable {
     position: relative;
     overflow: hidden;
-    width: 100%;
 
     .dv-scrollbar-horizontal {
         position: absolute;