Electron zoomFactor not having any effect


#1

I’m very confused. When I run electron using ‘npm start’ where I have a script that starts my node server and then electron: ‘node server/app && electron .’

Everything works fine except the the resolution is incredibly zoomed in. On top of that, setting the zoom factor in my main.js file has essentially no effect.

However, when I manually call ‘electron .’ Everything works as normal. The resolution is fine and electron responds to setting the zoomFactor property.

Here is my main.js file:

var electron = require('electron'),
app = electron.app,
BrowserWindow = electron.BrowserWindow,
Menu = electron.Menu,
ipcMain = electron.ipcMain;


var socketUtil = require('./server/socket/socket-util');
var url = require('url');
var win;
var forceQuit = false;
var menuTemplate = [{
    label: 'Sample',
    submenu: [
        {label: 'About App', click: function(item, focusedWindow){
            focusedWindow.webContents.send('changeState', 'settings.about');
        }},
        {label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() {forceQuit=true; app.quit();}},
        {label: 'Reload', accelerator: 'CmdOrCtrl+R', click: function() {win.reload();}},
        {
            label: 'Toggle Developer Tools',
            accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
            click: function (item, focusedWindow) {
                if (focusedWindow) focusedWindow.webContents.toggleDevTools()
            }
        },
        {label: 'Import Project', click: importProject},
        {
            label: 'Prefs',
            click: function(item, focusedWindow){
                focusedWindow.webContents.send('changeState', 'settings.project');
            }
        }
    ]
}];

var menu = Menu.buildFromTemplate(menuTemplate);

function importProject() {
    win.webContents.send('import:project');
}

function createWindow () {

    win = new BrowserWindow({
        width: 1200,
        height: 750,
        webPreferences: {
            webSecurity: false,
            zoomFactor: 1
        }
    });

    var express = require('./server/app')();

    win.loadURL(url.format({
        pathname: 'http://localhost:9000'
    }));

    win.webContents.openDevTools();

    win.on('closed', function(e) {
        win = null;
    })
}

app.on('before-quit', function (e) {
    console.log('');
    console.log('before-quit');
    if(!forceQuit){
        console.log('no force quit');
        e.preventDefault();
    } else {
        console.log('yes force quit');
        beforeQuitThenQuit();
    }
});

app.on('activate-with-no-open-windows', function(){
    console.log('');
    console.log('activate-with-no-open-windows');
    win.show();
});

app.on('ready', function() {
    Menu.setApplicationMenu(menu);
    createWindow();
});

app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') {
        console.log('quitting app now.');
        forceQuit = true;
        app.quit();
    }
});

app.on('activate', function() {
    if (win === null) {
        createWindow()
    }
});


function beforeQuitThenQuit() {
    socketUtil.resetClientData().then(function() {
        console.log('resetClientData promise resolved');
    });
}

#2

I discovered that the difference I was experiencing was due to the fact that I had electron version 1.3.5 installed globally while locally I was using the latest stable version (and other releases as I tried them). So npm was utilizing the local electron package while when I used the ‘electron .’ command directly, I was utilizing the global package.

However I’m still uncertain why the later versions of electron are not taking the zoomFactor into account.