[896] Restore Popout content for blocked popouts and emit onDidBlockPopout event

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -5791,6 +5791,54 @@ describe('dockviewComponent', () => {
             ]);
         });
 
+        describe('when browsers block popups', () => {
+            let container: HTMLDivElement;
+            let dockview: DockviewComponent;
+            let panel: DockviewPanel;
+
+            beforeEach(() => {
+                jest.spyOn(window, 'open').mockReturnValue(null);
+
+                container = document.createElement('div');
+
+                dockview = new DockviewComponent(container, {
+                    createComponent(options) {
+                        switch (options.name) {
+                            case 'default':
+                                return new PanelContentPartTest(
+                                    options.id,
+                                    options.name
+                                );
+                            default:
+                                throw new Error(`unsupported`);
+                        }
+                    },
+                });
+
+                dockview.layout(1000, 500);
+
+                panel = dockview.addPanel({
+                    id: 'panel_1',
+                    component: 'default',
+                });
+            });
+
+            test('onDidBlockPopout event is emitted', async () => {
+                const onDidBlockPopoutHandler = jest.fn();
+                dockview.onDidBlockPopout(onDidBlockPopoutHandler);
+
+                await dockview.addPopoutGroup(panel.group);
+
+                expect(onDidBlockPopoutHandler).toHaveBeenCalledTimes(1);
+            });
+
+            test('popout group is restored to its original position', async () => {
+                await dockview.addPopoutGroup(panel.group);
+
+                expect(panel.group.api.location.type).toBe('grid');
+            });
+        });
+
         test('dispose of dockview instance when popup is open', async () => {
             const container = document.createElement('div');
 

packages/dockview-core/src/api/component.api.ts

@@ -749,6 +749,10 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.onDidPopoutGroupPositionChange;
     }
 
+    get onDidBlockPopout(): Event<void> {
+        return this.component.onDidBlockPopout;
+    }
+
     /**
      * All panel objects.
      */

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

@@ -251,6 +251,9 @@ export class Tabs extends CompositeDisposable {
     delete(id: string): void {
         const index = this.indexOf(id);
         const tabToRemove = this._tabs.splice(index, 1)[0];
+        if (!tabToRemove) {
+            return;
+        }
 
         const { value, disposable } = tabToRemove;
 

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

@@ -226,6 +226,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     readonly onDidPopoutGroupSizeChange: Event<PopoutGroupChangeSizeEvent>;
     readonly onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent>;
+    readonly onDidBlockPopout: Event<void>;
     readonly options: DockviewComponentOptions;
     updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
@@ -319,6 +320,9 @@ export class DockviewComponent
     readonly onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent> =
         this._onDidPopoutGroupPositionChange.event;
 
+    private readonly _onDidBlockPopout = new Emitter<void>();
+    readonly onDidBlockPopout: Event<void> = this._onDidBlockPopout.event;
+
     private readonly _onDidLayoutFromJSON = new Emitter<void>();
     readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutFromJSON.event;
 
@@ -505,6 +509,7 @@ export class DockviewComponent
             this._onDidOptionsChange,
             this._onDidPopoutGroupSizeChange,
             this._onDidPopoutGroupPositionChange,
+            this._onDidBlockPopout,
             this.onDidViewVisibilityChangeMicroTaskQueue(() => {
                 this.updateWatermark();
             }),
@@ -713,28 +718,13 @@ export class DockviewComponent
                     return false;
                 }
 
-                if (popoutContainer === null) {
-                    popoutWindowDisposable.dispose();
-                    return false;
-                }
-
-                const gready = document.createElement('div');
-                gready.className = 'dv-overlay-render-container';
-
-                const overlayRenderContainer = new OverlayRenderContainer(
-                    gready,
-                    this
-                );
-
                 const referenceGroup =
                     itemToPopout instanceof DockviewPanel
                         ? itemToPopout.group
                         : itemToPopout;
 
-                const referenceLocation = itemToPopout.api.location.type;
-
                 /**
-                 * The group that is being added doesn't already exist within the DOM, the most likely occurance
+                 * The group that is being added doesn't already exist within the DOM, the most likely occurrence
                  * of this case is when being called from the `fromJSON(...)` method
                  */
                 const isGroupAddedToDom =
@@ -748,9 +738,41 @@ export class DockviewComponent
                     group = options.overridePopoutGroup;
                 } else {
                     group = this.createGroup({ id: groupId });
-                    this._onDidAddGroup.fire(group);
+                    if (popoutContainer) {
+                      this._onDidAddGroup.fire(group);
+                    }
+                }
+
+                if (popoutContainer === null) {
+                    popoutWindowDisposable.dispose();
+                    this._onDidBlockPopout.fire();
+
+                    // if the popout window was blocked, we need to move the group back to the reference group
+                    // and set it to visible
+                    this.movingLock(() =>
+                        moveGroupWithoutDestroying({
+                            from: group,
+                            to: referenceGroup,
+                        })
+                    );
+
+                    if (!referenceGroup.api.isVisible) {
+                        referenceGroup.api.setVisible(true);
+                    }
+
+                    return false;
                 }
 
+                const gready = document.createElement('div');
+                gready.className = 'dv-overlay-render-container';
+
+                const overlayRenderContainer = new OverlayRenderContainer(
+                    gready,
+                    this
+                );
+
+                const referenceLocation = itemToPopout.api.location.type;
+
                 group.model.renderContainer = overlayRenderContainer;
                 group.layout(
                     _window.window!.innerWidth,

packages/docs/sandboxes/react/dockview/popout-group/src/app.tsx

@@ -143,6 +143,9 @@ export const App = (props: { theme?: string }) => {
 
     const load = (api: DockviewApi) => {
         api.clear();
+        api.onDidBlockPopout(() => {
+            console.log('Popout blocked');
+        });
         if (layout) {
             try {
                 api.fromJSON(layout);