I'm unable to reproduce this issue with following steps:

1. Open default app
2. Open devtools and detach it
3. Close the main window

Does this issue only happen within your app?

Well. The quick-start application works for me too (updated to 10.0.0-beta.21)

But my application still has that effect and, maybe it's related, the DOM element hightlighting does not work anymore in my app. Like when I hover over a node in the Elements view in inspect mode, there's no highlighting, no tooltips on the browser window.

I try to replicate it now on the quick start by adding code that I use in my app one by one, checking if that cause the trouble but I'm pretty lost this time, as I don't really know which feature/API could potentially block the communication between browser window and devtools. Could be some electron code or it could also be an incompatible npm module.

At least, it's on all of my browser windows, of which some have svelte apps and some (most) simply show web pages from our external intranet applications. So it's one thing all browser windows have in common or it's something with the general electron app setup.

Found the issue - it's the custom-electron-titlebar which is not compatible with electron 10 and to make things worse, they just archived it so I need to fix it myself :/

To reproduce:

• use the electron quickstart
• remove the content security metas from the index.html
• add custom-electron-titlebar via package.json
• add enableRemoteModule: true to the webPreferences (it uses the remote module)
• add this to the preload, inside the listener:

  const {Color, Titlebar} = require("custom-electron-titlebar");
  new Titlebar({
    backgroundColor: Color.fromHex('#f5f5f5'),
    unfocusEffect: false,
    minimizable: true,
    maximizable: true,
    menu: null,
    shadow: false,
  });

Now, if we set frame:false on the BrowserWindow options, we can't close the windows while devtools are open. Otherwise, with frame: true, it works.

Note that typing window.close() in the devtools console also does not close the window. There is no error message observed. As if some close listener was setup with 'prevent default'

I can't tell if this is an incompatible 3rd party lib or if that lib reveals a bug in electron 10, so I keep this issue open.

Unfortunately, this doesn't seem to be responsible for the 'highlight on hover' issue that I also have with electron 10.

Finally I found the cause and it's an error in electron. This show the problem w/o a custom library. To reproduce:

1. create a project with the quickstart app
2. add enableRemoteModule: true to the webPreferences (it uses the remote module)
3. set frame: false on the browser window options
4. add a button on the index.html with id closeButton
5. for the preload, use the following script:

const {remote} = require('electron');

function onFocus() {
  console.log('dummy');
}
remote.getCurrentWindow().on('focus', onFocus);

window.addEventListener('beforeunload', () => {
  // removing listeners from the browser window that we get via remote
  // prevents closing the window only if the dev tools are shown.
  remote.getCurrentWindow().removeListener('focus', onFocus);
})

window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('closeButton').addEventListener('click', () => {
    remote.getCurrentWindow().close();
  })
})

Start the app, open the dev tools (any mode).

Expected behavior:
if we click the button on the screen, the window is closed

Observed behavior
if we click the button on the screen, the window is not closed. We need to close the devtools first.

Hope that helps!

Thanks for debugging this issue, I can confirm it is a bug of Electron.

Also confirmed it is a Windows-only bug, it can be reproduced with this app:
https://gist.github.com/zcbenz/d8a36146cf57706959cf00252746d4a1

I may look into this, is that ok for you?

So this is an issue only for the Windows OS or does this happen on other OS's as well? I wouldn't mind helping out if it's Windows only as I use Windows daily. Let me know.

In case if you are handling the close in Windows may be below can help,

const currentWindow = window.require('electron').remote.getCurrentWindow();
if (currentWindow.isDevToolsOpened()) {
currentWindow.closeDevTools();
}
currentWindow.close();

In case if you are handling the close in Windows may be below can help,

const currentWindow = window.require('electron').remote.getCurrentWindow();
if (currentWindow.isDevToolsOpened()) {
currentWindow.closeDevTools();
}
currentWindow.close();

Wow. This is an excellent solution in a temporary development environment

I am new to electron but have C++ and Java experience. Can I take this issue?