Electron open new full-screen window from menubar

Question

I have an electron app that runs in the menubar.

Code is currently heavily based on an existing pomodoro app ( https://github.com/G07cha/pomodoro )

When the timer hits a certain point, it opens up a message box:

ipc.on('end-timer', function() {
    $('.timer').circleProgress('value', 1);

    var isRelaxTime = remote.getGlobal('isRelaxTime');

    dialog.showMessageBox({
        type: 'info',
        title: 'Pomodoro',
        message: (isRelaxTime) ? 'Timer ended it\'s time to relax' : 'Back to work',
        buttons: ['OK'],
        noLink: true
    }, function() {
        if(isRelaxTime) {
            $('.timer').circleProgress({fill: { gradient: ["blue", "skyblue"]}});
        } else {
            $('#counter').text(remote.getGlobal('pomodoroCount'));
            $('.timer').circleProgress({fill: { gradient: ["orange", "yellow"]}});
        }

        ipc.send('start-timer');
    });
});

Is it possible to open a new window instead of the message box, and make it full screen?

Basically, making sure the user sees it and it fills the screen when the timer is up and allowing customization of the page that comes up with css and such.

Answer 1

It depends if you want to fire a new renderer from an existing renderer or if you want to spin it up from the Main Process.

Either way its as easy as creating a new BrowserWindow instance and loading a URL to an HTMl file you want to load.

If you want to spin up a renderer from an existing renderer you will need to require the remote module first. Here is an example:

const remote = require('remote');

// create a new BrowserWindow and pass it an object of options
var msgWindow = new remote.BrowserWindow({
  // full width & height of monitor without going into kiosk mode
  width: remote.screen.getPrimaryDisplay().size.width, 
  height: remote.screen.getPrimaryDisplay().size.height
  //, other options
});

// load your message file into new browserwindow
msgWindow.loadURL('file://' + __dirname + '/index.html');

// set variable to null when window is closed to clean it up
msgWindow.on('close', () => {
  msgWindow = null;
});

If you did this from the the Main Process, then replace const remote = require('remote'); with:

const electron = require('electron');
const BrowserWindow = electron.BrowserWindow;