Creating a settings window that will display beneath the Virtru icon in the tray.

createSettingsUnderTray.js

// Create an icon in the tray.
const createTray = () => {
  tray = new Tray('./images/virtru-mark-black.png');
  tray.on('click', function (event) {
    toggleWindow()
  });
}

// Determine where the tray icon is located so the
// window can be positioned directly below it.
const getWindowPosition = () => {
  const windowBounds = window.getBounds();
  const trayBounds = tray.getBounds();

  // Center window horizontally below the tray icon
  const x = Math.round(trayBounds.x + (trayBounds.width / 2) - (windowBounds.width / 2));

  // Position window 4 pixels vertically below the tray icon
  const y = Math.round(trayBounds.y + trayBounds.height + 4);

  return {x: x, y: y};
}

// Create the window.
const createWindow = () => {
  window = new BrowserWindow({
    width: 320,
    height: 340,
    show: false,
    frame: false,
    fullscreenable: false,
    resizable: false,
    transparent: false,
    webPreferences: {
      backgroundThrottling: false,
      nodeIntegration: true
    }
  })
  window.loadFile(`./pages/settings.html`)

  // Hide the window when it loses focus
  window.on('blur', () => {
    if (!window.webContents.isDevToolsOpened()) {
      window.hide()
    }
  })
}