Christian Engvall

Now it’s time to look at the Electron frameless window functionality. Using a frameless window removes the menu and menubar in your app. The electron documentation defines it as:

"A frameless window is a window that has no [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome), the parts of the window, like toolbars, that are not a part of the web page."

Alternatives

There are two alternatives to choose between. Either remove the frame for all three platforms using frame: false when initializing the browserwindow in main.js. Or you can use titleBarStyle: ‘hidden’. This alternative is only for macOS. Lets look at them both.

If you remove the frame around your app, the user also looses the ability to move the application around on the desktop. So we need to give that functionality back to the user. We do that with draggable regions. But more on that later.

Frame:false

mainWindow = new BrowserWindow({frame: false, width: 1281, height: 800, minWidth: 1281, minHeight: 800})

This removes all the chrome around the application on all platforms. Then it is up to you to handle how the application closes, minimizes and maximizes. Electron provides api’s for this. so you can add buttons and style them the way you like. and then hook them up to the correct handler. Look at the BrowserWindow class and the methods called minimize, maximize, unmaximize, and close. For macOS you don’t use maximize, instead you use setFullScreen.

This is what the Electron tutorial app would look like when setting frame:false

Electron frame false

titleBarStyle Hidden

This is the macOS only alternative. It removes the titlebar but leaves the stop light buttons.

mainWindow = new BrowserWindow({titleBarStyle: 'hidden', width: 1281, height: 800, minWidth: 1281, minHeight: 800})

Using this setting the app would look like this on macOS from Yosemite(10.10) and newer. On Windows and Linux there will be no change at all.

Electron titlebar hidden

I like the option to remove the titlebar on macOS and leaving it as is on Linux and Windows. So i’m going for the titleBarStyle: ‘hidden’ setting.

Hidden-inset

There is also a titleBarStyle: ‘hidden-inset’. The docs explain it like this:

"results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge."

Draggable region

As said earlier, when using frameless window the user looses the ability to drag your application around the desktop. Let’s fix that. Electron handles this with css.

To make the whole window draggable you can set -webkit-app-region: drag on the body element. To do that in the electron tutorial app open up assets/sass/base/_page.scss and add this to the body.

body {
    -ms-overflow-style: scrollbar;
    -webkit-app-region:drag;
}

This makes our window draggable again. But it makes it a little to much draggable. For example the buttons will be draggable and the user won’t be able to click them. We’ll fix this with -webkit-app-region: no-drag; open up assets/sass/components/_button.scss and that property to button, textarea and input types submit, reset, button and text.

input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="text"],
button,
textarea {
	-webkit-app-region: no-drag;
}

If you implement your own titlebar and the user tries to move your app by dragging it the text in the titlebar may become selected. And we don’t want that. we can set this with -webkit-user-select: none; The electron tutorial app uses h1 as some kind of titlebar. Let’s remove the users ability to select headers.

Open up assets/sass/base/_typography.scss and go down to line 57 where you add this:

h1, h2, h3, h4, h5, h6 {
    -webkit-user-select: none;
    ...

You can read more about Frameless window at the official docs or you can continue this tutorial with the Electron white screen app startup.