Revert top bar changes, switch to nativeWindowOpen=true

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/main/initializers/init-ipc-main-handlers/init-ipc-main-handlers.ts

@@ -150,13 +150,12 @@ export const initIpcMainHandlers = ({ electronMenuItems, directoryForLensLocalSt
 
   ipcMainOn(windowOpenAppMenuAsContextMenuChannel, async (event) => {
     const menu = Menu.buildFromTemplate(getAppMenu(WindowManager.getInstance(), electronMenuItems.get()));
-    const options = {
+
+    menu.popup({
       ...BrowserWindow.fromWebContents(event.sender),
       // Center of the topbar menu icon
       x: 20,
       y: 20,
-    } as Electron.PopupOptions;
+    });
-
-    menu.popup(options);
   });
 };

src/main/window-manager.ts

@@ -74,6 +74,7 @@ export class WindowManager extends Singleton {
           nodeIntegrationInSubFrames: true,
           webviewTag: true,
           contextIsolation: false,
+          nativeWindowOpen: true,
         },
       });
       this.windowState.manage(this.mainWindow);
@@ -131,7 +132,8 @@ export class WindowManager extends Singleton {
 
           // Always disable Node.js integration for all webviews
           webPreferences.nodeIntegration = false;
-        }).setWindowOpenHandler((details) => {
+        })
+        .setWindowOpenHandler((details) => {
           shell.openExternal(details.url);
 
           return { action: "deny" };
@@ -247,6 +249,7 @@ export class WindowManager extends Singleton {
           nodeIntegration: true,
           contextIsolation: false,
           nodeIntegrationInSubFrames: true,
+          nativeWindowOpen: true,
         },
       });
       await this.splashWindow.loadURL("static://splash.html");

src/renderer/components/layout/top-bar/top-bar.tsx

@@ -20,7 +20,6 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import type { TopBarRegistration } from "./top-bar-registration";
 import { emitOpenAppMenuAsContextMenu, requestWindowAction } from "../../../ipc";
 import { WindowAction } from "../../../../common/ipc/window";
-import { useToggle } from "../../../hooks";
 
 interface Props extends React.HTMLAttributes<any> {}
 
@@ -40,16 +39,10 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
 });
 
 const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies) => {
-  const [isAppContextMenuOpen, toggleIsAppContextMenuOpen] = useToggle(false);
   const elem = useRef<HTMLDivElement>();
 
-  const toggleAppContextMenu = () => {
+  const openAppContextMenu = () => {
-    toggleIsAppContextMenuOpen();
+    emitOpenAppMenuAsContextMenu();
-
-    if (!isAppContextMenuOpen) {
-      // This is done when the current value is false as that is the rising edge
-      emitOpenAppMenuAsContextMenu();
-    }
   };
 
   const goHome = () => {
@@ -92,8 +85,12 @@ const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies)
       <div className={styles.tools}>
         {(isWindows || isLinux) && (
           <div className={styles.winMenu}>
-            <div onClick={toggleAppContextMenu} data-testid="window-menu">
+            <div onClick={openAppContextMenu} data-testid="window-menu">
-              <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges"><path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/><path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/><path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/></svg>
+              <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges">
+                <path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/>
+                <path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/>
+                <path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/>
+              </svg>
             </div>
           </div>
         )}
@@ -125,12 +122,19 @@ const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies)
         {(isWindows || isLinux) && (
           <div className={cssNames(styles.windowButtons, { [styles.linuxButtons]: isLinux })}>
             <div className={styles.minimize} data-testid="window-minimize" onClick={minimizeWindow}>
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="9"></rect></svg></div>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                <rect fill="currentColor" width="10" height="1" x="1" y="9" />
+              </svg>
+            </div>
             <div className={styles.maximize} data-testid="window-maximize" onClick={toggleMaximize}>
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                <rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor" />
+              </svg>
             </div>
             <div className={styles.close} data-testid="window-close" onClick={closeWindow}>
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                <polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1" />
+              </svg>
             </div>
           </div>
         )}