I am trying to create an application using Electron, When I call Menu.setApplicationMenu(null) to hide the app menu, I found that the close button in the upper right corner is also invalid, My event listener code is as follows:
In CreateWindow Function:
Menu.setApplicationMenu(null);
...
mainWindow.on('close', (e) ->
{
trace("close");
if (!forceClose)
{
trace("forceClose");
mainWindow.webContents.send('quit');
e.preventDefault();
}
});
IpcMain.on('quit', (e) ->
{
trace("quit");
forceClose = true;
mainWindow.close();
});
mainWindow.on('closed', (e) ->
{
trace("closed");
mainWindow = null;
});
when i hide the menu bar, I got the print queue: close, forceClose, quit, close and app doesn't close properly, after comment outMenu.setApplicationMenu(null);, I can close the app by pressing the top right button and got print: close, forceClose, quit, close, closed. I would like to know if setting the menu to be empty will impress the behavior of close button?
Related
I want to make my Electron app toggle developer tools in response to F12.
In the renderer page, I added:
const currentWebContents = require("electron").remote.getCurrentWebContents();
window.addEventListener("keydown", (e: KeyboardEvent) => {
if (e.keyCode === 123) { // F12
currentWebContents.toggleDevTools();
}
});
This works when I'm focused on the main page. However, immediately after the dev tools opens up, focus goes to the dev tools, so F12 is no longer detected.
I tried fixing this by adding a listener to the devtools webcontents right after calling toggleDevTools() like so:
if (currentWebContents.devToolsWebContents) {
currentWebContents.devToolsWebContents.on("before-input-event", (event: Electron.Event, input: Electron.Input) => {
if (input.type === "keyDown" && input.key === "F12") {
currentWebContents.toggleDevTools();
}
});
}
However, currentWebContents.devToolsWebContents is null right after opening it. My first question is how to ensure that it isn't null - is there a way to wait until it's fully opened?
I worked around this by putting the if (currentWebContents.devToolsWebContents) code into a setTimeout(..., 1000);
However, upon doing that, my before-input-event handler does not get triggered when pressing keys while focused on the devtools.
Does anybody know why that is?
There is no easy way to do this.
As per this issue, you can't detect input from devtools.
An Electron developer posted a comment here:
I think this is because the toggleDevTools menu role doesn't properly check for the 'parent' window of a devtools window. it would probably be possible to have the toggleDevTools menu role check to see if the currently focused window is a devtools window, and if so, call toggleDevTools on the webcontents for which the devtools is opened, instead of on the devtools window itself.
In any case, this requires Electron development to solve.
Update: Someone here suggested this workaround - I haven't tried it myself:
mainWindow.webContents.on("before-input-event", (e, input) => {
if (input.type === "keyDown" && input.key === "F12") {
mainWindow.webContents.toggleDevTools();
mainWindow.webContents.on('devtools-opened', () => {
// Can't use mainWindow.webContents.devToolsWebContents.on("before-input-event") - it just doesn't intercept any events.
mainWindow.webContents.devToolsWebContents.executeJavaScript(`
new Promise((resolve)=> {
addEventListener("keydown", (event) => {
if (event.key === "F12") {
resolve();
}
}, { once: true });
})
`)
.then(() => {
mainWindow.webContents.toggleDevTools();
});
});
}
});
I've followed MDN's document to create a toggle button addon.
Everything works fine except one problem:
Open a second browser window (cmd+n or ctrl+n) and click on the toggle button there
Click on the toggle button on the original browser window without closing the toggle button on the second window
the toggle button's panel becomes blank with the following error message:
JavaScript error: resource:///modules/WindowsPreviewPerTab.jsm, line 406: NS_ERR
OR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIT
askbarTabPreview.invalidate]
// ./lib/main.js
var { ToggleButton } = require("sdk/ui/button/toggle");
var panels = require("sdk/panel");
var self = require("sdk/self");
var buttonIndex = 0;
var lastKnownButtonIndex = 0;
var button = ToggleButton({
id: "button",
label: "my button",
icon: {
"16": "./icon-16.png"
},
onClick: handleChange,
});
var panel = panels.Panel({
contentURL: self.data.url("menu.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
function assignButtonIndex() {
return (buttonIndex++).toString();
}
The complete addon is here: https://goo.gl/9N3jle
To reproduce: Extract the zip file and $ cd testButton; cfx run and follow the above steps.
I really hope someone can help me with this. Thank you in advance!
It's a bug; you're not doing anything wrong. It's a racing condition between the windows' focus events, and the panel's event, that prevent somehow the panel's hidden event to be emitted properly.
You can try to mitigate with a workaround the issue until is properly fixed. I added some explanation in the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1174425#c2 but in short, you can try to add a setTimeout to delay a bit when the panel is shown, in order to avoid the racing condition with the window's focus. Something like:
const { setTimeout } = require("sdk/timers");
/* ... your code here ... */
function handleChange(state) {
if (state.checked) {
setTimeout(() => panel.show({ position: button }), 100);
}
}
I am currently using a workaround where I dynamically create a new Panel every time the user presses the toolbar button.
It is faster than the 100ms workaround and also handles a scenario where the user outright closes one of the browser windows while the panel is open. (The 100ms workaround fails in this case and a blank panel is still displayed.)
It works like this:
let myPanel = null;
const toolbarButton = ToggleButton({
...,
onChange: function (state) {
if (state.checked) {
createPanel();
}
}
});
function createPanel(){
// Prevent memory leaks
if(myPanel){
myPanel.destroy();
}
// Create a new instance of the panel
myPanel = Panel({
...,
onHide: function(){
// Destroy the panel instead of just hiding it.
myPanel.destroy();
}
});
// Display the panel immediately
myPanel.show();
}
I am opening a bootbox dialog box when the user click inside select-2 input box using the following code
$("#categoryfinder").on("select2-open", function () {
bootbox.confirm("Are you sure?", function (result) {
Example.show("Confirm result: " + result);
});
});
Once it is opened, the popup window is not active and I have to click twice to close or to trigger any event on the popup
Please let me know if there is any solution for this.
EDIT: when I click inside 1, the popup is not active at 1,2,3, I have to click once to make it active.
I fixed this issue by doing the following changes
$("#allergenfinder").on("select2-opening", function (e) {
e.preventDefault();
excludeAllergenPrompt();
});
When I click the back button on the browser, my popup closes but the listener events brought me back to the previous page, I want in my function an element that closes the popup without me go back. While keeping the history listener to other pages (don't stop in the whole of the application)
$(document).on("pageshow", "#member", function (){
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
$("#mypopup").popup("close");
}
});
});
I try with
$(document).bind("mobileinit", function () {
$.mobile.hashListeningEnabled = false;
});
But don't working
I've created a simple interaction in Titanium where the user opens an Option Dialog and then selects "Take photo", which opens up the camera.
The problem here is that the app crashes if you do the following:
Open Option Dialog and select "Take photo" which opens up the camera
Hit Cancel
Open the Option Dialog again and select "Take photo" again
Hit Cancel again - the app crashes.
I get the following messages in the console:
Dismissing a view controller when it is not the top presented view
controller. Will probably crash now.
attempt to dismiss modal view controller whose view does not
currently appear. self = modalViewController =
CoreAnimation: warning, deleted thread with uncommitted CATransaction;
set CA_DEBUG_TRANSACTIONS=1 in environment to log backtraces.
MPUSystemMediaControls] Updating supported commands for now playing
application.
It looks like this issue has been fixed in native iOS development in Objective C in this Stackoverflow Question, but how can I fixed this with Titanium?
Here is my code
$.imageView.addEventListener("click", function (e) {
$.imageDialog.cancel = 1;
$.imageDialog.show();
$.imageDialog.addEventListener("click", function (event) {
if (event.index === 0) {
$.imageDialog.hide();
Titanium.Media.showCamera({
success: function (e) {
if (e.mediaType === Ti.Media.MEDIA_TYPE_PHOTO) {
$.beerImage.image = e.media;
theImage = e.media;
$.cameraImage.opacity = 0.5;
}
},
cancel: function (e) { console.log('Action was cancelled'); },
error: function (e) { console.log('An error happened'); },
allowEditing: true,
mediaTypes: [Titanium.Media.MEDIA_TYPE_PHOTO],
videoQuality: Titanium.Media.QUALITY_HIGH
});
}
});
});
I have no problems at all if I do not use the Option Dialog and go straight to the Camera. Is is not possible to use both the Option Dialog and the Camera without having this issue? Or have a made a mistake in my code?
I found a work around for this.
The trick is to create a new OptionDialog each time the Camera needs to be opened. In the code below, the Option Dialog gets created when the button is clicked to open the camera. Therefore a new OptionDialog is created, the event listers are added to it and then it is opened.
$.imageView.addEventListener("click", function (e) {
var opts = {
cancel: 2,
options: ['Take Photo', 'Choose from gallery', 'Cancel'],
destructive: 0,
title: 'Choose'
};
var dialog = Ti.UI.createOptionDialog(opts);
dialog.addEventListener("click", function (event) {
if (event.index === 0) {
Titanium.Media.showCamera({
success: function () { ... },
cancel: function () { ... },
error: function () { ... },
allowEditing: true,
mediaTypes: [Titanium.Media.MEDIA_TYPE_PHOTO],
videoQuality: Titanium.Media.QUALITY_HIGH
});
}
$.addBeerWin.remove(dialog);
});
dialog.show();
});