Electron/div based title bar

Daeraxa commented 1 year ago

Have you checked for existing feature requests?

[X] Completed

Summary

Currently Pulsar (at least on Windows and Linux) by default uses the system title bar which is perfectly functional but: 1) Looks a bit dated 2) (On Windows at least) has its colour based on the current light/dark theme in the OS, not in Pulsar. 3) Can't really be customised 4) Takes up a lot of vertical space which cannot be shrunk.

Pulsar already includes the ability to have a "hidden" title bar but this simply removes it entirely. Instead of relying on the native system one we could instead create one as part of the actual application as an option.

What benefits does this feature provide?

Allows us to customise and modify the titlebar as we want which could include extra features, buttons, icons etc. without being constrained by the OS
Provides a more "modern" look which we can style along with the rest of the application as it would simply be another div (or similar style-able element).
Allows the title bar to correctly follow the application, rather than the OS, theme.
Provides possibility for community packages to add to or modify data in the title bar.
Could move items currently occupying the bar at the bottom on Pulsar to the top instead to provide some additional vertical space on the window.
Can be made "dynamic" with animations, customisable behaviour/styling based on context etc.

macOS doesn't have a "Window" titlebar but an option could be provided for macOS that still allows the same customisation but simply omits the menus that would be on the system menu bar instead, still providing access to any "new" buttons or items such as a settings "cog" or any info type displays.

Any alternatives?

It seems somebody has indeed made a package for this in the past - https://web.pulsar-edit.dev/packages/atom-windows-titlebar but if we were to do this in the core application we could standardise it to make it easier for package developers and themes to take into account.

Other examples:

VSCode does this by default and therefore has additional options for the pane layouts:

This is also common on other Electron applications (e.g. Discord).

confused-Techie commented 1 year ago

Interesting to see that we could have something to pass this off of.

Although do we want to add it as another Core Package? Would there be any advantage to baking it right into the editor?

Since I think even a package can be extensible to other packages right?

Daeraxa commented 1 year ago

I don't see it as a core package so much as just part of the editor source directly, potentially with a view to making it the default over using the OS menu bar eventually. Having it as an optional package would mean people probably not noticing it or adding support for it into new packages.

confused-Techie commented 1 year ago

@Daeraxa you make a good point there. Just thought it could be core since even the tabs are a core package.

But Also totally open for it being put right into the core of the application then exposing it as an API. So sounds good to me

meadowsys commented 1 year ago

also, on macos, "custom titlebar" in vscode is available, but it doesn't contain any of the menubar items since that is still handled by the OS (though the layout and command centre and other stuff are still available to be put in the title bar)

Daeraxa commented 1 year ago

@autumnblazey

macOS doesn't have a "Window" titlebar but an option could be provided for macOS that still allows the same customisation but simply omits the menus that would be on the system menu bar instead, still providing access to any "new" buttons or items such as a settings "cog" or any info type displays.

Yeah, this is what I was trying to get across with this bit:

macOS doesn't have a "Window" titlebar but an option could be provided for macOS that still allows the same customisation but simply omits the menus that would be on the system menu bar instead, still providing access to any "new" buttons or items such as a settings "cog" or any info type displays.

@confused-Techie

you make a good point there. Just thought it could be core since even the tabs are a core package. But Also totally open for it being put right into the core of the application then exposing it as an API. So sounds good to me

So my main thought here was that as a package, even a core one, it loads after the main editor which just seems a bit weird for something as fundamental as the title bar of the application.

Actually I'm wondering if macOS is already using this, just not in a position right now to look into it. There is already a .title-bar selector and stuff in src/title-bar.js which includes code for maximising/minimising the application so it looks like the framework for this already exists and we might just be able to extend it. I should be able to have a proper look this weekend but it might be that we don't even need to re-invent the wheel here.

pulsar-edit / pulsar