Merge pull request #928 from borglin/896-restore-popout-content-on-blocked-popouts

[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/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

@@ -718,27 +718,11 @@ export class DockviewComponent
                     return false;
                 }
 
-                if (popoutContainer === null) {
-                    popoutWindowDisposable.dispose();
-                    this._onDidBlockPopout.fire();
-                    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 occurrence
                  * of this case is when being called from the `fromJSON(...)` method
@@ -754,8 +738,40 @@ export class DockviewComponent
                     group = options.overridePopoutGroup;
                 } else {
                     group = this.createGroup({ id: groupId });
+                    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(