configurable native menu

app/src/electron.js

@@ -15,7 +15,8 @@ const path = require('path');
 const url = require('url');
 const mainMenuDefinition = require('./mainMenuDefinition');
 
-let isNativeMenu = true;
+let useNativeMenu = true;
+let useNativeMenuSpecified = null;
 
 // require('@electron/remote/main').initialize();
 
@@ -184,6 +185,9 @@ ipcMain.on('set-title', async (event, arg) => {
 ipcMain.on('open-link', async (event, arg) => {
   electron.shell.openExternal(arg);
 });
+ipcMain.on('set-use-native-menu', async (event, arg) => {
+  useNativeMenuSpecified = arg;
+});
 ipcMain.on('window-action', async (event, arg) => {
   switch (arg) {
     case 'minimize':
@@ -226,23 +230,28 @@ ipcMain.handle('showItemInFolder', async (event, path) => {
 ipcMain.handle('openExternal', async (event, url) => {
   electron.shell.openExternal(url);
 });
-ipcMain.handle('isNativeMenu', async () => {
-  return isNativeMenu;
+ipcMain.handle('useNativeMenu', async () => {
+  return useNativeMenu;
 });
 
 function createWindow() {
   const bounds = initialConfig['winBounds'];
-  isNativeMenu = os.platform() == 'darwin' ? true : false;
-  if (initialConfig['menuStyle'] == 'native') isNativeMenu = true;
-  if (initialConfig['menuStyle'] == 'client') isNativeMenu = false;
-  // isNativeMenu = true;
+  useNativeMenu = os.platform() == 'darwin' ? true : false;
+  if (initialConfig['useNativeMenu'] === true) {
+    useNativeMenu = true;
+    useNativeMenuSpecified = true;
+  }
+  if (initialConfig['useNativeMenu'] === false) {
+    useNativeMenu = false;
+    useNativeMenuSpecified = false;
+  }
 
   mainWindow = new BrowserWindow({
     width: 1200,
     height: 800,
     title: 'DbGate',
-    frame: isNativeMenu,
-    titleBarStyle: isNativeMenu ? undefined : 'hidden',
+    frame: useNativeMenu,
+    titleBarStyle: useNativeMenu ? undefined : 'hidden',
     ...bounds,
     icon: os.platform() == 'win32' ? 'icon.ico' : path.resolve(__dirname, '../icon.png'),
     webPreferences: {
@@ -274,6 +283,7 @@ function createWindow() {
           JSON.stringify({
             winBounds: mainWindow.getBounds(),
             winIsMaximized: mainWindow.isMaximized(),
+            useNativeMenu: useNativeMenuSpecified,
           }),
           'utf-8'
         );

app/src/mainMenuDefinition.js

@@ -45,7 +45,9 @@ module.exports = [
       { command: 'app.toggleDevTools', hideDisabled: true },
       { command: 'app.toggleFullScreen', hideDisabled: true },
       { command: 'app.minimize', hideDisabled: true },
+      { divider: true },
       { command: 'theme.changeTheme', hideDisabled: true },
+      { command: 'settings.show' },
     ],
   },
   {

packages/web/src/App.svelte

@@ -17,6 +17,7 @@
   import { apiCall } from './utility/api';
   import { getUsedApps } from './utility/metadataLoaders';
   import AppTitleProvider from './utility/AppTitleProvider.svelte';
+  import { initTitleBarVisibility } from './utility/common';
 
   let loadedApi = false;
 
@@ -26,6 +27,8 @@ import AppTitleProvider from './utility/AppTitleProvider.svelte';
     //   return;
     // }
 
+    await initTitleBarVisibility();
+
     try {
       // console.log('************** LOADING API');
 

packages/web/src/Screen.svelte

@@ -24,18 +24,12 @@
   import dragDropFileTarget from './utility/dragDropFileTarget';
   import TitleBar from './widgets/TitleBar.svelte';
   import { onMount } from 'svelte';
-  import { shouldDrawTitleBar } from './utility/common';
+  import { getTitleBarVisibility } from './utility/common';
   
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
   let domTabs;
 
-  let drawTitleBar = false;
-  onMount(async () => {
-    drawTitleBar = await shouldDrawTitleBar();
-    document.documentElement.style.setProperty('--dim-visible-titlebar', drawTitleBar ? 1 : 0);
-  });
-
   function handleTabsWheel(e) {
     if (!e.shiftKey) {
       e.preventDefault();
@@ -57,7 +51,7 @@
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
 >
-  {#if drawTitleBar}
+  {#if getTitleBarVisibility()}
     <div class="titlebar">
       <TitleBar />
     </div>

packages/web/src/settings/SettingsModal.svelte

@@ -3,6 +3,7 @@
 
   import FormButton from '../forms/FormButton.svelte';
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormProvider from '../forms/FormProvider.svelte';
 
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
@@ -14,6 +15,9 @@
   import { closeCurrentModal } from '../modals/modalTools';
   import { getCurrentSettings, getVisibleToolbar, getZoomKoef, visibleToolbar, zoomKoef } from '../stores';
   import { apiCall } from '../utility/api';
+  import { getTitleBarVisibility } from '../utility/common';
+  import getElectron from '../utility/getElectron';
+  import { showSnackbarInfo } from '../utility/snackbar';
 
   function handleOk(e) {
     apiCall(
@@ -22,8 +26,14 @@
     );
     visibleToolbar.set(!!e.detail[':visibleToolbar']);
     zoomKoef.set(e.detail[':zoomKoef']);
+    if (electron && !getTitleBarVisibility() != !!e.detail[':useNativeMenu']) {
+      electron.send('set-use-native-menu', !!e.detail[':useNativeMenu']);
+      showSnackbarInfo('Native menu settings will be applied after app restart');
+    }
     closeCurrentModal();
   }
+
+  const electron = getElectron();
 </script>
 
 <FormProvider
@@ -31,6 +41,7 @@
     ...getCurrentSettings(),
     ':visibleToolbar': getVisibleToolbar(),
     ':zoomKoef': getZoomKoef(),
+    ':useNativeMenu': !getTitleBarVisibility(),
   }}
 >
   <ModalBase {...$$restProps}>
@@ -39,6 +50,9 @@
     <FormValues let:values>
       <div class="heading">Appearance</div>
       <FormCheckboxField name=":visibleToolbar" label="Show toolbar" defaultValue={true} />
+      {#if electron}
+        <FormCheckboxField name=":useNativeMenu" label="Use system native menu" />
+      {/if}
       <FormSelectField
         name=":zoomKoef"
         label="Zoom"

packages/web/src/utility/common.ts

@@ -40,13 +40,23 @@ export async function asyncFilter(arr, predicate) {
   return arr.filter((_v, index) => results[index]);
 }
 
-export async function shouldDrawTitleBar() {
+async function computeTitleBarVisibility() {
   const electron = getElectron();
   if (!electron) {
     return false;
   }
-  if (await electron.isNativeMenu()) {
+  if (await electron.useNativeMenu()) {
     return false;
   }
   return true;
 }
+
+let titleBarVisibility = false;
+export async function initTitleBarVisibility() {
+  titleBarVisibility = await computeTitleBarVisibility();
+  document.documentElement.style.setProperty('--dim-visible-titlebar', titleBarVisibility ? '1' : '0');
+}
+
+export function getTitleBarVisibility() {
+  return titleBarVisibility;
+}

packages/web/src/utility/getElectron.ts

@@ -26,8 +26,8 @@ class ElectronApi {
     await this.ipcRenderer.invoke('openExternal', url);
   }
 
-  async isNativeMenu() {
-    const res = await this.ipcRenderer.invoke('isNativeMenu');
+  async useNativeMenu() {
+    const res = await this.ipcRenderer.invoke('useNativeMenu');
     return res;
   }
 

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import { currentDropDownMenu, selectedWidget, visibleCommandPalette } from '../stores';
-  import { shouldDrawTitleBar } from '../utility/common';
+  import { getTitleBarVisibility } from '../utility/common';
   import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
 
   let domSettings;
@@ -78,15 +78,10 @@
     const items = mainMenuDefinition;
     currentDropDownMenu.set({ left, top, items });
   }
-
-  let showMainMenu = false;
-  onMount(async () => {
-    showMainMenu = !(await shouldDrawTitleBar());
-  });
 </script>
 
 <div class="main">
-  {#if showMainMenu}
+  {#if !getTitleBarVisibility()}
     <div class="wrapper mb-3" on:click={handleMainMenu} bind:this={domMainMenu}>
       <FontIcon icon="icon menu" />
     </div>