changed devtools menu to use native electron menu to avoid truncation…

… when main window is small
finos · Jun 14, 2022 · 2699e1b · 2699e1b
1 parent 30bbe23
commit 2699e1b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 78 deletions.
diff --git a/packages/main/src/constants.ts b/packages/main/src/constants.ts
@@ -9,6 +9,7 @@ export enum TARGETS {
 }
 
 export enum TOPICS {
+  OPEN_TOOLS_MENU = 'FRAME:openToolsMenu',
   FRAME_READY = 'FRAME:ready',
   SEARCH = 'WORK:search',
   WORKSPACE_INIT = 'WORK:Init',
@@ -19,8 +20,6 @@ export enum TOPICS {
   NEW_TAB = 'WORK:newTab',
   NEW_TAB_CLICK = 'UI:newTab',
   OPEN_CHANNEL_PICKER_CLICK = 'UI:openChannelPicker',
-  OPEN_FRAME_TOOLS_CLICK = 'UI:openFrameTools',
-  OPEN_TAB_TOOLS_CLICK = 'UI:openTabTools',
   SELECT_TAB = 'WORK:selectTab', //tab state changes from event in the main process (i.e. change of focus from new view or intent resolution)
   TAB_SELECTED = 'WORK:tabSelected', //tab is selected by user action in the UI
   CLOSE_TAB = 'WORK:closeTab',

diff --git a/packages/main/src/listeners/listener.ts b/packages/main/src/listeners/listener.ts
@@ -6,8 +6,7 @@ import { Workspace } from '../workspace';
 import { getRuntime } from '../index';
 import { FDC3Message } from '../types/FDC3Message';
 import { DirectoryApp } from '../types/FDC3Data';
-import { Point } from 'electron';
-import { screen } from 'electron';
+import { Point, Menu, screen } from 'electron';
 import utils from '../utils';
 import fetch from 'electron-fetch';
 import { TOPICS, TARGETS } from '../constants';
@@ -111,11 +110,37 @@ export class RuntimeListener {
         workspace.closeTab(args.tabId);
       }
     });
-    //{'source':id,'selected':event.detail.selected});
 
-    /*ipcMain.on(TOPICS.JOIN_CHANNEL, (event, args) => {
-      console.log('join channel', args.channel);
-    });*/
+    ipcMain.on(TOPICS.OPEN_TOOLS_MENU, (event, args) => {
+      //bring selected browserview to front
+      const workspace = this.runtime.getWorkspace(args.source);
+      if (workspace) {
+        const template = [
+          {
+            label: 'Frame Dev Tools',
+            click: () => {
+              if (workspace && workspace.window) {
+                workspace.window.webContents.openDevTools();
+              }
+            },
+          },
+          {
+            label: 'Tab Dev Tools',
+            click: () => {
+              if (workspace && workspace.selectedTab) {
+                const selectedTab = this.runtime.getView(workspace.selectedTab);
+                if (selectedTab && selectedTab.content) {
+                  selectedTab.content.webContents.openDevTools();
+                }
+              }
+            },
+          },
+        ];
+
+        const menu = Menu.buildFromTemplate(template);
+        menu.popup();
+      }
+    });
 
     ipcMain.on(TOPICS.FETCH_FROM_DIRECTORY, (event, args) => {
       console.log('ipcRenderer', event.type);
@@ -154,27 +179,6 @@ export class RuntimeListener {
       });
     });
 
-    ipcMain.on(TOPICS.FRAME_DEV_TOOLS, (event, args) => {
-      //for now, just assume one view per workspace, and open that
-      console.log('ipc-event', event.type);
-      const sourceWS = runtime.getWorkspace(args.source);
-      if (sourceWS && sourceWS.window) {
-        sourceWS.window.webContents.openDevTools();
-      }
-    });
-
-    ipcMain.on(TOPICS.TAB_DEV_TOOLS, (event, args) => {
-      //for now, just assume one view per workspace, and open that
-      console.log('ipc-event', event.type);
-      const sourceWS = runtime.getWorkspace(args.source);
-      if (sourceWS && sourceWS.selectedTab) {
-        const selectedTab = this.runtime.getView(sourceWS.selectedTab);
-        if (selectedTab && selectedTab.content) {
-          selectedTab.content.webContents.openDevTools();
-        }
-      }
-    });
-
     ipcMain.on(TOPICS.RES_LOAD_RESULTS, (event, args) => {
       console.log('ipc-event', event.type);
       const sourceWS = runtime.getWorkspace(args.source);

diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
@@ -59,6 +59,13 @@ ipcRenderer.on(TOPICS.CHANNEL_SELECTED, async (event, args) => {
   );
 });
 
+document.addEventListener(TOPICS.OPEN_TOOLS_MENU, ((event: CustomEvent) => {
+  ipcRenderer.send(TOPICS.OPEN_TOOLS_MENU, {
+    source: id,
+    data: event.detail,
+  });
+}) as EventListener);
+
 document.addEventListener(TOPICS.JOIN_CHANNEL, ((event: CustomEvent) => {
   ipcRenderer.send(TOPICS.JOIN_WORKSPACE_TO_CHANNEL, {
     source: id,
@@ -127,14 +134,6 @@ document.addEventListener(TOPICS.OPEN_CHANNEL_PICKER_CLICK, ((
   });
 }) as EventListener);
 
-document.addEventListener(TOPICS.OPEN_FRAME_TOOLS_CLICK, () => {
-  ipcRenderer.send(TOPICS.FRAME_DEV_TOOLS, { source: id });
-});
-
-document.addEventListener(TOPICS.OPEN_TAB_TOOLS_CLICK, () => {
-  ipcRenderer.send(TOPICS.TAB_DEV_TOOLS, { source: id });
-});
-
 document.addEventListener(TOPICS.FRAME_READY, () => {
   frameReady = true;
 });

diff --git a/packages/renderer/src/Frame.tsx b/packages/renderer/src/Frame.tsx
@@ -4,8 +4,6 @@ import {
   TextField,
   InputAdornment,
   IconButton,
-  Menu,
-  MenuItem,
   ButtonGroup,
   Tabs,
   Tab,
@@ -140,22 +138,6 @@ export class Frame extends React.Component<
 
   render() {
     const open = Boolean(this.state.anchorEl);
-    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-      this.setState({ anchorEl: event.currentTarget });
-    };
-    const handleClose = () => {
-      this.setState({ anchorEl: null });
-    };
-
-    const openViewTools = () => {
-      document.dispatchEvent(new CustomEvent(TOPICS.OPEN_TAB_TOOLS_CLICK));
-      this.setState({ anchorEl: null });
-    };
-
-    const openFrameTools = () => {
-      document.dispatchEvent(new CustomEvent(TOPICS.OPEN_FRAME_TOOLS_CLICK));
-      this.setState({ anchorEl: null });
-    };
 
     const debounce = (callback: any, wait: number) => {
       let timeoutId: number | undefined = undefined;
@@ -180,6 +162,14 @@ export class Frame extends React.Component<
       }
     }, 400);
 
+    const devToolsClick = (event: MouseEvent) => {
+      document.dispatchEvent(
+        new CustomEvent(TOPICS.OPEN_TOOLS_MENU, {
+          detail: { clientX: event.clientX, clientY: event.clientY },
+        }),
+      );
+    };
+
     return (
       <ThemeProvider theme={darkTheme}>
         <Paper>
@@ -220,32 +210,10 @@ export class Frame extends React.Component<
                       aria-controls={open ? 'more' : undefined}
                       aria-haspopup="true"
                       aria-expanded={open ? 'true' : undefined}
-                      onClick={handleClick}
+                      onClick={devToolsClick}
                     >
                       <MoreVert />
                     </IconButton>
-                    <Menu
-                      id="moreMenu"
-                      aria-labelledby="menuButton"
-                      anchorEl={this.state.anchorEl}
-                      open={open}
-                      onClose={handleClose}
-                      anchorOrigin={{
-                        vertical: 'top',
-                        horizontal: 'left',
-                      }}
-                      transformOrigin={{
-                        vertical: 'top',
-                        horizontal: 'left',
-                      }}
-                    >
-                      <MenuItem key="frameTools" onClick={openFrameTools}>
-                        DevTools - Frame
-                      </MenuItem>
-                      <MenuItem key="viewTools" onClick={openViewTools}>
-                        DevTools - View
-                      </MenuItem>
-                    </Menu>
                   </ButtonGroup>
                 </Stack>
               </div>