Implement unified app header

What should we do?

Implement unified app header for Windows and Linux as specified in https://github.com/camunda/camunda-modeler-design/issues/45.

Why should we do it?

Part of our ongoing UI overhaul.

---

Solution Sketch

• Use frameless window provided by electron and build our very own custom title bar for Windows and Linux
  • Implement keyboard accessibility (navigation, Alt + shortcut behavior, …)
  • Implement menus (reuse electron context menu?)
  • Implement title bar look and feel (window controls?, draggable to move window)
  • Implement frame?
• Architecture: Add a switch between MacOS and Windows/Linux
  • Different headers
  • Different keyboards shortcut handling
• Architecture: Menu construction
  • Move fully to client
  • Re-use menu definition in app header (Windows/Linux) as well as to create native menu (MacOS)

Detailed steps outlined in this tutorial.

As an alternative we could try to re-use existing libraries that implement such feature (cf. https://github.com/camunda/camunda-modeler/issues/2519#issuecomment-950837212).

---

See feature spec, overall design spec.

[nikku]

Haha, basically exactly my assessment. We don’t need to synchronize regarding this anymore then 😃.

[barmac]

My old (Nov 2020) research results:

1. You can customize the title bar and remove the menu bar in Electron.
2. Advanced customization relies on removal of the title bar completely (so-called frameless window) and then re-creating it with HTML & co. This is how it works in GitHub Desktop, which is also an Electron app.
3. It is some effort but we have a great control over what and how we display.
4. Alternatively, we can also just enable autohiding of the menu bar. In that case, it’s displayed only when user presses Alt.

Demo of what is easily achievable:

Draggable region -> if you disable the title bar, you have to manually set the area where you can grab the window to move it around. This is customizable too 🙂