[MM-55720] Add menu item to open developer tools for Call Widget window (#2936)

* Add menu item to open developer tools for Call Widget window

* Add dedicated Developer Tools submenu

i18n/en.json

@@ -82,7 +82,9 @@
   "main.menus.app.view.actualSize": "Actual Size",
   "main.menus.app.view.clearCacheAndReload": "Clear Cache and Reload",
   "main.menus.app.view.devToolsAppWrapper": "Developer Tools for Application Wrapper",
+  "main.menus.app.view.devToolsCurrentCallWidget": "Developer Tools for Call Widget",
   "main.menus.app.view.devToolsCurrentServer": "Developer Tools for Current Server",
+  "main.menus.app.view.devToolsSubMenu": "Developer Tools",
   "main.menus.app.view.downloads": "Downloads",
   "main.menus.app.view.find": "Find..",
   "main.menus.app.view.fullscreen": "Toggle Full Screen",

src/main/menus/app.test.js

@@ -10,8 +10,27 @@ import ServerManager from 'common/servers/serverManager';
 
 import ServerViewState from 'app/serverViewState';
 
+import CallsWidgetWindow from 'main/windows/callsWidgetWindow';
+
 import {createTemplate} from './app';
 
+jest.mock('fs-extra', () => ({
+    readFileSync: jest.fn(),
+    writeFileSync: jest.fn(),
+    existsSync: jest.fn(),
+    copySync: jest.fn(),
+}));
+
+jest.mock('electron-extension-installer', () => {
+    return () => ({
+        REACT_DEVELOPER_TOOLS: 'react-developer-tools',
+    });
+});
+
+jest.mock('electron-context-menu', () => {
+    return () => jest.fn();
+});
+
 jest.mock('electron', () => {
     class NotificationMock {
         static isSupported = jest.fn();
@@ -38,6 +57,9 @@ jest.mock('electron', () => {
             removeListener: jest.fn(),
         },
         Notification: NotificationMock,
+        nativeImage: {
+            createFromPath: jest.fn(),
+        },
     };
 });
 jest.mock('fs', () => ({
@@ -67,11 +89,19 @@ jest.mock('main/downloadsManager', () => ({
 jest.mock('main/views/viewManager', () => ({}));
 jest.mock('main/windows/mainWindow', () => ({
     sendToRenderer: jest.fn(),
+    on: jest.fn(),
 }));
 jest.mock('main/windows/settingsWindow', () => ({}));
 jest.mock('common/views/View', () => ({
     getViewDisplayName: (name) => name,
 }));
+jest.mock('main/AutoLauncher', () => ({
+    enable: jest.fn(),
+    disable: jest.fn(),
+}));
+jest.mock('main/windows/callsWidgetWindow', () => ({
+    isOpen: jest.fn(),
+}));
 
 describe('main/menus/app', () => {
     const config = {
@@ -305,4 +335,45 @@ describe('main/menus/app', () => {
         const helpSubmenu = menu.find((subMenu) => subMenu.id === 'help')?.submenu;
         expect(helpSubmenu).toContainObject({id: 'diagnostics'});
     });
+
+    it('should show developer tools submenu', () => {
+        const menu = createTemplate(config);
+
+        const appMenu = menu.find((item) => item.label === 'main.menus.app.view');
+
+        expect(appMenu).not.toBe(undefined);
+
+        const devToolsSubMenu = appMenu.submenu.find((item) => item.label === 'main.menus.app.view.devToolsSubMenu');
+
+        expect(devToolsSubMenu.submenu.length).toBe(2);
+        expect(devToolsSubMenu.submenu[0].label).toBe('main.menus.app.view.devToolsAppWrapper');
+        expect(devToolsSubMenu.submenu[1].label).toBe('main.menus.app.view.devToolsCurrentServer');
+    });
+
+    it('should not show menu item if widget window is not open', () => {
+        const menu = createTemplate(config);
+
+        const appMenu = menu.find((item) => item.label === 'main.menus.app.view');
+        expect(appMenu).not.toBe(undefined);
+
+        const devToolsSubMenu = appMenu.submenu.find((item) => item.label === 'main.menus.app.view.devToolsSubMenu');
+        expect(devToolsSubMenu).not.toBe(undefined);
+
+        const menuItem = devToolsSubMenu.submenu.find((item) => item.label === 'main.menus.app.view.devToolsCurrentCallWidget');
+        expect(menuItem).toBe(undefined);
+    });
+
+    it('should show menu item if widget window is open', () => {
+        CallsWidgetWindow.isOpen = jest.fn(() => true);
+        const menu = createTemplate(config);
+
+        const appMenu = menu.find((item) => item.label === 'main.menus.app.view');
+        expect(appMenu).not.toBe(undefined);
+
+        const devToolsSubMenu = appMenu.submenu.find((item) => item.label === 'main.menus.app.view.devToolsSubMenu');
+        expect(devToolsSubMenu).not.toBe(undefined);
+
+        const menuItem = devToolsSubMenu.submenu.find((item) => item.label === 'main.menus.app.view.devToolsCurrentCallWidget');
+        expect(menuItem).not.toBe(undefined);
+    });
 });

src/main/menus/app.ts

@@ -20,6 +20,7 @@ import downloadsManager from 'main/downloadsManager';
 import Diagnostics from 'main/diagnostics';
 import ViewManager from 'main/views/viewManager';
 import SettingsWindow from 'main/windows/settingsWindow';
+import CallsWidgetWindow from 'main/windows/callsWidgetWindow';
 
 export function createTemplate(config: Config, updateManager: UpdateManager) {
     const separatorItem: MenuItemConstructorOptions = {
@@ -125,6 +126,43 @@ export function createTemplate(config: Config, updateManager: UpdateManager) {
         }],
     });
 
+    const devToolsSubMenu = [
+        {
+            label: localizeMessage('main.menus.app.view.devToolsAppWrapper', 'Developer Tools for Application Wrapper'),
+            accelerator: (() => {
+                if (process.platform === 'darwin') {
+                    return 'Alt+Command+I';
+                }
+                return 'Ctrl+Shift+I';
+            })(),
+            click(item: Electron.MenuItem, focusedWindow?: WebContents) {
+                if (focusedWindow) {
+                    // toggledevtools opens it in the last known position, so sometimes it goes below the browserview
+                    if (focusedWindow.isDevToolsOpened()) {
+                        focusedWindow.closeDevTools();
+                    } else {
+                        focusedWindow.openDevTools({mode: 'detach'});
+                    }
+                }
+            },
+        },
+        {
+            label: localizeMessage('main.menus.app.view.devToolsCurrentServer', 'Developer Tools for Current Server'),
+            click() {
+                ViewManager.getCurrentView()?.openDevTools();
+            },
+        },
+    ];
+
+    if (CallsWidgetWindow.isOpen()) {
+        devToolsSubMenu.push({
+            label: localizeMessage('main.menus.app.view.devToolsCurrentCallWidget', 'Developer Tools for Call Widget'),
+            click() {
+                CallsWidgetWindow.openDevTools();
+            },
+        });
+    }
+
     const viewSubMenu = [{
         label: localizeMessage('main.menus.app.view.find', 'Find..'),
         accelerator: 'CmdOrCtrl+F',
@@ -176,28 +214,8 @@ export function createTemplate(config: Config, updateManager: UpdateManager) {
             return downloadsManager.openDownloadsDropdown();
         },
     }, separatorItem, {
-        label: localizeMessage('main.menus.app.view.devToolsAppWrapper', 'Developer Tools for Application Wrapper'),
+        label: localizeMessage('main.menus.app.view.devToolsSubMenu', 'Developer Tools'),
-        accelerator: (() => {
+        submenu: devToolsSubMenu,
-            if (process.platform === 'darwin') {
-                return 'Alt+Command+I';
-            }
-            return 'Ctrl+Shift+I';
-        })(),
-        click(item: Electron.MenuItem, focusedWindow?: WebContents) {
-            if (focusedWindow) {
-                // toggledevtools opens it in the last known position, so sometimes it goes below the browserview
-                if (focusedWindow.isDevToolsOpened()) {
-                    focusedWindow.closeDevTools();
-                } else {
-                    focusedWindow.openDevTools({mode: 'detach'});
-                }
-            }
-        },
-    }, {
-        label: localizeMessage('main.menus.app.view.devToolsCurrentServer', 'Developer Tools for Current Server'),
-        click() {
-            ViewManager.getCurrentView()?.openDevTools();
-        },
     }];
 
     if (process.platform !== 'darwin' && process.platform !== 'win32') {

src/main/windows/callsWidgetWindow.test.js

@@ -7,7 +7,7 @@ import {BrowserWindow, desktopCapturer, systemPreferences, ipcMain} from 'electr
 
 import ServerViewState from 'app/serverViewState';
 
-import {CALLS_WIDGET_SHARE_SCREEN} from 'common/communication';
+import {CALLS_WIDGET_SHARE_SCREEN, UPDATE_SHORTCUT_MENU} from 'common/communication';
 import {
     MINIMUM_CALLS_WIDGET_WIDTH,
     MINIMUM_CALLS_WIDGET_HEIGHT,
@@ -34,6 +34,7 @@ jest.mock('electron', () => ({
         on: jest.fn(),
         off: jest.fn(),
         handle: jest.fn(),
+        emit: jest.fn(),
     },
     desktopCapturer: {
         getSources: jest.fn(),
@@ -114,6 +115,7 @@ describe('main/windows/callsWidgetWindow', () => {
                 width: MINIMUM_CALLS_WIDGET_WIDTH,
                 height: MINIMUM_CALLS_WIDGET_HEIGHT,
             });
+            expect(ipcMain.emit).toHaveBeenCalledWith(UPDATE_SHORTCUT_MENU);
         });
 
         it('should open dev tools when environment variable is set', async () => {
@@ -796,4 +798,26 @@ describe('main/windows/callsWidgetWindow', () => {
             expect(view.sendToRenderer).toBeCalledWith('some-channel', 'thecallchannelid');
         });
     });
+
+    describe('isOpen', () => {
+        const callsWidgetWindow = new CallsWidgetWindow();
+
+        it('undefined', () => {
+            expect(callsWidgetWindow.isOpen()).toBe(false);
+        });
+
+        it('open', () => {
+            callsWidgetWindow.win = {
+                isDestroyed: jest.fn(() => false),
+            };
+            expect(callsWidgetWindow.isOpen()).toBe(true);
+        });
+
+        it('destroyed', () => {
+            callsWidgetWindow.win = {
+                isDestroyed: jest.fn(() => true),
+            };
+            expect(callsWidgetWindow.isOpen()).toBe(false);
+        });
+    });
 });

src/main/windows/callsWidgetWindow.ts

@@ -28,6 +28,7 @@ import {
     CALLS_WIDGET_SHARE_SCREEN,
     DESKTOP_SOURCES_MODAL_REQUEST,
     GET_DESKTOP_SOURCES,
+    UPDATE_SHORTCUT_MENU,
 } from 'common/communication';
 
 import {MattermostBrowserView} from 'main/views/MattermostBrowserView';
@@ -87,10 +88,18 @@ export class CallsWidgetWindow {
         return this.mainView?.view.server.id;
     }
 
+    public isOpen() {
+        return Boolean(this.win && !this.win.isDestroyed());
+    }
+
     /**
      * Helper functions
      */
 
+    public openDevTools = () => {
+        this.win?.webContents.openDevTools({mode: 'detach'});
+    }
+
     getViewURL = () => {
         return this.mainView?.view.server.url;
     }
@@ -203,6 +212,7 @@ export class CallsWidgetWindow {
      */
 
     private onClosed = () => {
+        ipcMain.emit(UPDATE_SHORTCUT_MENU);
         delete this.win;
         delete this.mainView;
         delete this.options;
@@ -238,9 +248,11 @@ export class CallsWidgetWindow {
         this.win.setMenuBarVisibility(false);
 
         if (process.env.MM_DEBUG_CALLS_WIDGET) {
-            this.win.webContents.openDevTools({mode: 'detach'});
+            this.openDevTools();
         }
 
+        ipcMain.emit(UPDATE_SHORTCUT_MENU);
+
         this.setBounds(initialBounds);
     }