Move electron app menu bar to UI title instead of electron one #478

ZIMkaRU · 2025-01-15T12:03:44Z

This PR moves the electron app menu bar to the UI title instead of the electron one so that we can customize the electron menu, as the native electron menu API doesn't provide that. It allows us to build the menu in the UI in one small line with the main app title and typical window buttons (minimize, maximize, and close in the top corner). This is very useful as it saves overall space and at the same time constantly displays the menu and does not require the user to press the Alt key to display it (as practice has shown, because of the last one, many inexperienced users do not even know about the existence of menu functions)

It can be safely merged before the implementation of UI, since the default is still using the native menu (we have a special flag for quick switching after the implementation of UI)

The start example of how the menu should look can be taken from the VSCode view

The title should have:

on the left side the menu. On the Mac we have to hide the menu in the UI and show native electron menu bar due to some MacOS specifics, it's not possible to have proper menu item control from the UI
in the center the main title text
on the right the window control buttons (for Mac on the left side)
for Mac, hide the whole title in full-screen mode because Mac hides the window control buttons. For this purpose, there are implemented the corresponding listener to be used in the UI

For test and debug purposes a quite simple menu was implemented in the pure html/css and placed into the main index.html
To understand the common logic of implementation look at styles, html and script in this index.html file: https://github.com/ZIMkaRU/bfx-report-ui/blob/feature/add-test-electronjs-menu-to-html/public/index.html
The live beta release can be found here: https://github.com/ZIMkaRU/bfx-report-electron/releases/tag/v4.32.0-beta.10

Debug layout examples:

Ununtu:
- non-maximized window mode:
- maximized window mode:
Windows:
- non-maximized window mode:
- maximized window mode:
Mac:window.bfxReportElectronApi.setLanguage('en')
- non-maximized window mode:
- full-screen mode:
- native menu and title of the full-screen mode:

Pay attention window control buttons are set over the main window by electronjs and it's not UI implementation. What we can do is enter colors and height for these buttons via the electornjs API. To understand how it works look at this official article https://www.electronjs.org/docs/latest/tutorial/custom-title-bar

API for UI which is provided via context bridge to chromium window object:

// Returns menu data structure to render the menu
window.bfxReportElectronApi.getMenuTemplate()

// Execute menu command using menu item id taken from returned data of getMenuTemplate() method
window.bfxReportElectronApi.execMenuCmd({ id: 'MENU_ITEM_ID_TAKEN_FROM_MENU_DATA_STRUCTURE' })

// Getter for the main menu title which is set in the app
window.bfxReportElectronApi.getTitle()

// Method for adding of a listener to provide state whether the whole menu bar be hidden. The listener returns `args.state`, true if needs to hide the menu bar
window.bfxReportElectronApi.onHideMenuEvent(({ state }) => {})

The method window.bfxReportElectronApi.getMenuTemplate() returns the following data structure on Ubuntu:

{
  "shouldMenuBeHidden": false,
  "menuTemplate": [
    {
      "label": "File",
      "type": "submenu",
      "accelerator": null,
      "enabled": true,
      "visible": true,
      "checked": false,
      "submenu": [
        {
          "label": "Quit",
          "id": "QUIT_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+Q",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        }
      ]
    },
    {
      "label": "Edit",
      "type": "submenu",
      "accelerator": null,
      "enabled": true,
      "visible": true,
      "checked": false,
      "submenu": [
        {
          "label": "Undo",
          "id": "UNDO_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+Z",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Redo",
          "id": "REDO_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+Shift+Z",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "",
          "type": "separator",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Cut",
          "id": "CUT_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+X",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Copy",
          "id": "COPY_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+C",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Paste",
          "id": "PASTE_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+V",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Delete",
          "id": "DELETE_MENU_ITEM",
          "type": "normal",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "",
          "type": "separator",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Select All",
          "id": "SELECT_ALL_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+A",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        }
      ]
    },
    {
      "label": "View",
      "type": "submenu",
      "accelerator": null,
      "enabled": true,
      "visible": true,
      "checked": false,
      "submenu": [
        {
          "label": "Reload",
          "id": "RELOAD_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+R",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Force Reload",
          "id": "FORCE_RELOAD_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+Shift+R",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Toggle Developer Tools",
          "id": "TOGGLE_DEV_TOOLS_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+Shift+I",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "",
          "type": "separator",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Actual Size",
          "id": "RESET_ZOOM_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+0",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Zoom In",
          "id": "ZOOM_IN_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl++",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Zoom Out",
          "id": "ZOOM_OUT_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+-",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "",
          "type": "separator",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Toggle Full Screen",
          "id": "TOGGLE_FULL_SCREEN_MENU_ITEM",
          "type": "normal",
          "accelerator": "F11",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        }
      ]
    },
    {
      "label": "Window",
      "type": "submenu",
      "accelerator": null,
      "enabled": true,
      "visible": true,
      "checked": false,
      "submenu": [
        {
          "label": "Minimize",
          "id": "MINIMIZE_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+M",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Zoom",
          "id": "ZOOM_MENU_ITEM",
          "type": "normal",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Close",
          "id": "CLOSE_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+W",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        }
      ]
    },
    {
      "label": "Tools",
      "type": "submenu",
      "accelerator": null,
      "enabled": true,
      "visible": true,
      "checked": false,
      "submenu": [
        {
          "label": "Data Management",
          "type": "submenu",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": [
            {
              "label": "Export DB",
              "id": "EXPORT_DB_MENU_ITEM",
              "type": "normal",
              "accelerator": "Ctrl+Alt+E",
              "enabled": true,
              "visible": true,
              "checked": false,
              "submenu": null
            },
            {
              "label": "Import DB",
              "id": "IMPORT_DB_MENU_ITEM",
              "type": "normal",
              "accelerator": "Ctrl+Alt+Shift+I",
              "enabled": true,
              "visible": true,
              "checked": false,
              "submenu": null
            },
            {
              "label": "Restore DB",
              "id": "RESTORE_DB_MENU_ITEM",
              "type": "normal",
              "accelerator": "Ctrl+Alt+R",
              "enabled": true,
              "visible": true,
              "checked": false,
              "submenu": null
            },
            {
              "label": "Backup DB",
              "id": "BACKUP_DB_MENU_ITEM",
              "type": "normal",
              "accelerator": "Ctrl+Alt+B",
              "enabled": true,
              "visible": true,
              "checked": false,
              "submenu": null
            },
            {
              "label": "Remove DB",
              "id": "REMOVE_DB_MENU_ITEM",
              "type": "normal",
              "accelerator": "Ctrl+Alt+D",
              "enabled": true,
              "visible": true,
              "checked": false,
              "submenu": null
            },
            {
              "label": "Clear All Data (except user creds)",
              "id": "CLEAR_ALL_DATA_MENU_ITEM",
              "type": "normal",
              "accelerator": "Ctrl+Alt+C",
              "enabled": true,
              "visible": true,
              "checked": false,
              "submenu": null
            }
          ]
        },
        {
          "label": "",
          "type": "separator",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Change Reports Folder",
          "id": "CHANGE_REPORTS_FOLDER_MENU_ITEM",
          "type": "normal",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Change Sync Frequency",
          "id": "CHANGE_SYNC_FREQUENCY_MENU_ITEM",
          "type": "normal",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        }
      ]
    },
    {
      "label": "Help",
      "type": "submenu",
      "accelerator": null,
      "enabled": true,
      "visible": true,
      "checked": false,
      "submenu": [
        {
          "label": "Open new GitHub Issue",
          "id": "REPORT_BUG_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+B",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "",
          "type": "separator",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Check for Updates",
          "id": "CHECK_UPDATE_MENU_ITEM",
          "type": "normal",
          "accelerator": null,
          "enabled": false,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Quit and Install updates",
          "id": "INSTALL_UPDATE_MENU_ITEM",
          "type": "normal",
          "accelerator": null,
          "enabled": true,
          "visible": false,
          "checked": false,
          "submenu": null
        },
        {
          "label": "",
          "type": "separator",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "User Manual",
          "id": "USER_MANUAL_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+H",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "Changelog",
          "id": "SHOW_CHANGE_LOG_MENU_ITEM",
          "type": "normal",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "",
          "type": "separator",
          "accelerator": null,
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        },
        {
          "label": "About Bitfinex Report",
          "id": "ABOUT_MENU_ITEM",
          "type": "normal",
          "accelerator": "Ctrl+O",
          "enabled": true,
          "visible": true,
          "checked": false,
          "submenu": null
        }
      ]
    }
  ]
}

Pay Attention response has shouldMenuBeHidden flag. It's initial state for the menu, should the menu bar be hidden

Also, electronjs provides titlebar-area-height env var to css for getting menu bar height. The example of usage can be found in the above index.html file. CSS should look like this:

:root {
  --fallback-title-bar-height: 40px;
}

#electronMenu {
  min-height: env(titlebar-area-height, var(--fallback-title-bar-height));
}

Get more info here:

Also, this PR updates electron version up to 33.3.1 and makes related changes to be able to add native window controls new BrowserWindow({ titleBarStyle: 'hidden' })
https://www.electronjs.org/docs/latest/tutorial/custom-title-bar

Depends on this PR:

Update better-sqlite3 version up to 11.7.2 bfx-facs-db-better-sqlite#11

Release version 4.30.0

Release version 4.31.0

ezewer

lgtm!

ezewer and others added 30 commits November 13, 2024 16:51

Merge pull request bitfinexcom#444 from bitfinexcom/staging

9e8bae7

Release version 4.30.0

Merge pull request bitfinexcom#462 from bitfinexcom/staging

cc2e19b

Release version 4.31.0

Add ability to return menu template

44420c0

Add menu ipc channel handlers

6dcfab5

Add helper to init ipc channel handlers from list

02d1dc7

Init menu ipc channel handlers

5ea28ca

Add menu invoke method names into preload script

4e8268a

Add ability to remove the default title bar

97250d1

Add ability to serialize menu for ipc

dd1bfcb

Add exec menu cmd handler

411be10

Register exec menu cmd handler in preload script

321fd4b

Extend menu item ids

3eba427

Customize menu item template to be serialized for ui

8928d1f

Fix reload menu option

5f1e543

Bump electron up to 33.3.0 to have fix for titleBarStyle

5d81800

Update nodejs version in docker files

ec62c9a

Update nodejs installation script

822eab4

Update nodejs version in gh action workflows

c9d1caf

Adjust backend deps instalation script

a7628d1

Fix folder ownership issue under docker

a750c2e

Setup main window title bar overlay

b6aa8b2

Fix security warning in renderer process

ef241aa

Disable hardware acceleration to fix errors and speed up

cd84da5

Show native title bar by default til ui implementation

2913fb3

Add getTitle method to GeneralIpcChannelHandlers

9d69372

Register getTitle method in context bridge

7a48e4e

Extend native menu options translation support

def9192

Add en trinslations for native menu options

a18add5

Add ru trinslations for native menu options

ee95e66

Add shortcut accelerators to menu

34d746e

ZIMkaRU added 23 commits January 7, 2025 13:15

Remap menu item accelerators separated by platforms

5089709

Add shortcut accelerators separated by platforms to menu

8db8542

Adjust menu item ids for mac

d8ca92a

Adjust menu item accelerators for mac

8e2c771

Adjust menu item for mac

5d56bfa

Enhance en menu translation for mac

a911afc

Enhance ru menu translation for mac

fc95c9b

Unify menu item accelerator key codes

2b0f4be

Fix import menu item accelerator for mac

ae41888

Fix user manual menu item accelerator for mac

a753654

Fix toggle fullscreen menu item accelerator for mac

b23d1e7

Prevent custom menu rendering for mac

a482329

Set title bar overlay height for mac

81b78db

Add ability to send hide-menu event via ipc to renderer

1e5f3d3

Register onHideMenuEvent method in preload script

625e7c1

Send hide menu event if main win full-screen entered-left

e9a0692

Bump electron up to 33.3.1

5ec8211

Fix main win full screen processing

125c8b8

Expose main win full screen state

0b046fa

Set main win full screen after init finished

2b8c132

Drop wrong full screen eneting in window-state-keeper

0066efc

Add ability to hide ui menu bar using electron env var

ded5035

Add electron env var to show native menu bar

40c022f

ezewer approved these changes Jan 16, 2025

View reviewed changes

ezewer merged commit db9fbb5 into bitfinexcom:staging Jan 16, 2025

alexstotsky mentioned this pull request Jan 16, 2025

(improvement) Theme setting flow bitfinexcom/bfx-report-ui#893

Merged

1 task

alexstotsky mentioned this pull request Feb 14, 2025

(feature) Electron app menu integration bitfinexcom/bfx-report-ui#898

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Move electron app menu bar to UI title instead of electron one #478

Move electron app menu bar to UI title instead of electron one #478

Uh oh!

ZIMkaRU commented Jan 15, 2025 •

edited

Loading

Uh oh!

ezewer left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Move electron app menu bar to UI title instead of electron one #478

Move electron app menu bar to UI title instead of electron one #478

Uh oh!

Conversation

ZIMkaRU commented Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ezewer left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ZIMkaRU commented Jan 15, 2025 •

edited

Loading