[MM-49739] Set parent window on calls expanded popout view (#2539)

* Set parent window on calls expanded popout view

* Fix focus on calls popout window

* Unregister event

src/common/communication.ts

@@ -143,6 +143,7 @@ export const CALLS_WIDGET_RESIZE = 'calls-widget-resize';
 export const CALLS_WIDGET_SHARE_SCREEN = 'calls-widget-share-screen';
 export const CALLS_WIDGET_CHANNEL_LINK_CLICK = 'calls-widget-channel-link-click';
 export const CALLS_JOINED_CALL = 'calls-joined-call';
+export const CALLS_POPOUT_FOCUS = 'calls-popout-focus';
 
 export const REQUEST_CLEAR_DOWNLOADS_DROPDOWN = 'request-clear-downloads-dropdown';
 export const CLOSE_DOWNLOADS_DROPDOWN = 'close-downloads-dropdown';

src/main/preload/callsWidget.js

@@ -8,6 +8,7 @@ import {ipcRenderer} from 'electron';
 import {
     CALLS_LEAVE_CALL,
     CALLS_JOINED_CALL,
+    CALLS_POPOUT_FOCUS,
     CALLS_WIDGET_RESIZE,
     CALLS_WIDGET_SHARE_SCREEN,
     CALLS_WIDGET_CHANNEL_LINK_CLICK,
@@ -47,6 +48,7 @@ window.addEventListener('message', ({origin, data = {}} = {}) => {
     case CALLS_WIDGET_CHANNEL_LINK_CLICK:
     case CALLS_WIDGET_RESIZE:
     case CALLS_JOINED_CALL:
+    case CALLS_POPOUT_FOCUS:
     case CALLS_LEAVE_CALL: {
         ipcRenderer.send(type, message);
         break;

src/main/windows/callsWidgetWindow.test.js

@@ -53,6 +53,7 @@ describe('main/windows/callsWidgetWindow', () => {
         baseWindow.setBounds = jest.fn();
         baseWindow.webContents = {
             setWindowOpenHandler: jest.fn(),
+            on: jest.fn(),
         };
 
         beforeEach(() => {
@@ -288,5 +289,46 @@ describe('main/windows/callsWidgetWindow', () => {
             widgetWindow.onJoinedCall(null, message);
             expect(widgetWindow.mainView.view.webContents.send).toHaveBeenCalledWith(CALLS_JOINED_CALL, message);
         });
+
+        it('menubar disabled on popout', () => {
+            const widgetWindow = new CallsWidgetWindow(mainWindow, mainView, widgetConfig);
+            expect(widgetWindow.onPopOutOpen()).toHaveProperty('action', 'allow');
+            expect(widgetWindow.onPopOutOpen().overrideBrowserWindowOptions).toHaveProperty('autoHideMenuBar', true);
+        });
+
+        it('onPopOutFocus', () => {
+            baseWindow.webContents = {
+                ...baseWindow.webContents,
+                send: jest.fn(),
+            };
+
+            let isMinimized = false;
+            baseWindow.restore = jest.fn();
+            baseWindow.isMinimized = jest.fn(() => isMinimized);
+
+            const widgetWindow = new CallsWidgetWindow(mainWindow, mainView, widgetConfig);
+
+            expect(baseWindow.webContents.setWindowOpenHandler).toHaveBeenCalledWith(widgetWindow.onPopOutOpen);
+            expect(baseWindow.webContents.on).toHaveBeenCalledWith('did-create-window', widgetWindow.onPopOutCreate);
+
+            expect(widgetWindow.popOut).toBeNull();
+
+            const popOut = new BrowserWindow();
+            widgetWindow.onPopOutFocus();
+            expect(popOut.focus).not.toHaveBeenCalled();
+            expect(popOut.restore).not.toHaveBeenCalled();
+
+            widgetWindow.onPopOutCreate(popOut);
+            expect(widgetWindow.popOut).toBe(popOut);
+
+            widgetWindow.onPopOutFocus();
+            expect(popOut.focus).toHaveBeenCalled();
+            expect(popOut.restore).not.toHaveBeenCalled();
+
+            isMinimized = true;
+            widgetWindow.onPopOutFocus();
+            expect(popOut.focus).toHaveBeenCalled();
+            expect(popOut.restore).toHaveBeenCalled();
+        });
     });
 });

src/main/windows/callsWidgetWindow.ts

@@ -25,9 +25,10 @@ import {
 } from 'common/utils/constants';
 import Utils from 'common/utils/util';
 import {
+    CALLS_JOINED_CALL,
+    CALLS_POPOUT_FOCUS,
     CALLS_WIDGET_RESIZE,
     CALLS_WIDGET_SHARE_SCREEN,
-    CALLS_JOINED_CALL,
 } from 'common/communication';
 
 type LoadURLOpts = {
@@ -37,6 +38,7 @@ type LoadURLOpts = {
 export default class CallsWidgetWindow extends EventEmitter {
     public win: BrowserWindow;
     private main: BrowserWindow;
+    private popOut: BrowserWindow | null = null;
     private mainView: MattermostView;
     private config: CallsWidgetWindowConfig;
     private boundsErr: Rectangle = {
@@ -81,15 +83,10 @@ export default class CallsWidgetWindow extends EventEmitter {
         ipcMain.on(CALLS_WIDGET_RESIZE, this.onResize);
         ipcMain.on(CALLS_WIDGET_SHARE_SCREEN, this.onShareScreen);
         ipcMain.on(CALLS_JOINED_CALL, this.onJoinedCall);
+        ipcMain.on(CALLS_POPOUT_FOCUS, this.onPopOutFocus);
 
-        this.win.webContents.setWindowOpenHandler(() => {
-            return {
-                action: 'allow',
-                overrideBrowserWindowOptions: {
-                    autoHideMenuBar: true,
-                },
-            };
-        });
+        this.win.webContents.setWindowOpenHandler(this.onPopOutOpen);
+        this.win.webContents.on('did-create-window', this.onPopOutCreate);
 
         this.load();
     }
@@ -125,6 +122,7 @@ export default class CallsWidgetWindow extends EventEmitter {
         ipcMain.off(CALLS_WIDGET_RESIZE, this.onResize);
         ipcMain.off(CALLS_WIDGET_SHARE_SCREEN, this.onShareScreen);
         ipcMain.off(CALLS_JOINED_CALL, this.onJoinedCall);
+        ipcMain.off(CALLS_POPOUT_FOCUS, this.onPopOutFocus);
     }
 
     private getWidgetURL() {
@@ -218,5 +216,28 @@ export default class CallsWidgetWindow extends EventEmitter {
 
         this.setBounds(initialBounds);
     }
+
+    private onPopOutOpen = () => {
+        return {
+            action: 'allow' as const,
+            overrideBrowserWindowOptions: {
+                autoHideMenuBar: true,
+            },
+        };
+    }
+
+    private onPopOutCreate = (win: BrowserWindow) => {
+        this.popOut = win;
+    }
+
+    private onPopOutFocus = () => {
+        if (!this.popOut) {
+            return;
+        }
+        if (this.popOut.isMinimized()) {
+            this.popOut.restore();
+        }
+        this.popOut.focus();
+    }
 }