Electron: DevTools makes application FASTER? - dom

I have electron app i'm developping; I face a strange behaviour which I would like to benifit.
I have a div element thats with overflow:auto, and, inside it, I have a lot of elements. When scrolling with mouse and trackpad, it is kinda choppy, but with the scrollbar it's not.
But as I'm developping it, I noticed that if I open my DevTools once, the app gets smoother, even after it get closed. So my conclusion is: Opening developper tools makes electron faster.
But my app is not going to be in Développement forever. What does opening dev tools triggers that could be triggered by my app?
EDIT
Finally DevTools was resizing the window making it faster). After Investigation, I changed
win.maximize();
win.webContents.on('did-finish-load', (e) => {
win.show();
})
for that (which fixed my app)
win.webContents.on('did-finish-load', (e) => {
win.show();
win.maximize();
})

Related

Escape input key with unity3d WEB GL build

I creating WEB GL game. Game menu is shown by the following code:
Input.GetKeyUp(KeyCode.Escape)
It works fine in unity and in the windows build. In the browser, escape pressing is intercepted by browser and the menu is not displayed.
Is it possible to make this code working in WEB GL build? What is the standart "meny button" for WEB GL games?
It should be working because
From Unity Manual webgl input : By default, Unity WebGL will process all keyboard input send to the page, regardless of whether the WebGL canvas has focus or not.
It could be that you disabled WebGLInput.captureAllKeyboardInput (Which is enabled by default) In that case just enable that and it should work.
The Escape Button is used by default for exiting fullscreen mode, maybe that's causing the issue. I would suggest to use the Input Manager ( https://docs.unity3d.com/Manual/class-InputManager.html ) and define a button using Escape as the positive button.
As #pasotee mentioned, the Escape key could be consumed already. By the Browser, as well as by the Unity Player, as for example the F1 key is used by Chrome to open the Help Tab. Escape is definitely used by the Unity Player to exit its Fullscreen mode.
So the short answer is. No, you can't.
Unity is listening to all key by default, true, but never gets the events when the upper lying application, like the browser, doesn't send it to the Canvas or the executing environment - aka the Unity3d Player doesn't send it down to your code. Or in this case, they should really fix the manual to "[..] all buttons, except Escape and browser related Hotkeys":
https://docs.unity3d.com/Manual/webgl-input.html
The long answer is, you might intercept the 'Escape' key event within JavaScript and pass a function call into the Unity Player like mentioned here:
jQuery
$(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
});
https://jsfiddle.net/MQHVa/1/
Vanilla JS
var msg = document.getElementById('state-msg');
document.body.addEventListener('keypress', function(e) {
if(e.key == "Escape"){
msg.textContent += 'Escape pressed:'
}
});
https://jsfiddle.net/etcjwaf5/
And in the end you'll need this information, to call Unity from Javascript:
SendMessage('MyGameObject', 'MyFunction');
SendMessage('MyGameObject', 'MyFunction', 5);
SendMessage('MyGameObject', 'MyFunction', 'MyString');
https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html
And the very last thing is to have a GameObject in your loaded Scene that provides the function for doing, whatever you desired to be done.
Bare in mind, that if you don't cancel distribution of the Escape key event it will be send to the UnityPlayer which triggers it to exit fullscreen mode! And you might not be able to prevent Unity from consuming this event anyway, so remember WebGLInput.captureAllKeyboardInput member.

Addon SDK way to make a dialog

What is the proper way to use the SDK to make a dialog (which is not anchored to the add-on bar, etc. but shows centered on screen)? It doesn't seem like there is any API for this important capability. I do see windows/utils has open but I have two problems with that:
The dialog opening seems to require "chrome" privs to get it to be centered on the screen (and I'd be expectant of add-on reviewers complaining of chrome privs, and even if not, I'd like to try to stick to the SDK way).
While I can get the DOM window reference of the new window/utils' open() dialog, I'm not sure how to attach a content script so I can respond to user interaction in a way that prompts (and can respond to) privileged behavior ala postMessage or port.emit (without again, directly working with chrome privs).
Ok, this answer should have been pretty obvious for anyone with a little experience with the SDK. I realized I can just use a panel. In my defense, the name "panel" is not as clear as "dialog" in conjuring up this idea, and I am so used to using panels with widgets, that it hadn't occurred to me that I could use it independently!
Edit
Unfortunately, as per Bug 595040, these dialogs are not persistent, meaning if the panel loses focus, the "dialog" is gone... So panel looks like it is not a suitable candidate after all... :(
Edit 2
I've since moved on and have gotten things working mostly to my satisfaction with sdk/window/utils and openDialog on whose returned window I add a load listener and then call tabs.activeTab.on('ready', and then set tabs.activeTab.url to my add-on local HTML file so the ready event will get a tab to which I can attach a worker. There is still the problem with chrome privs I suppose, but at least the main communications are using SDK processes.
Update to Edit 2:
Code sample provided by request:
var data = require('sdk/self').data,
tabs = require('sdk/tabs');
var win = require('sdk/window/utils').openDialog({
// No "url" supplied here in this case as we add it below (in order to have a ready listener in place before load which can give us access to the tab worker)
// For more, see https://developer.mozilla.org/en-US/docs/Web/API/window.open#Position_and_size_features
features: Object.keys({
chrome: true, // Needed for centerscreen per docs
centerscreen: true, // Doesn't seem to be working for some reason (even though it does work when calling via XPCOM)
resizable: true,
scrollbars: true
}).join() + ',width=850,height=650',
name: "My window name"
// parent:
// args:
});
win.addEventListener('load', function () {
tabs.activeTab.on('ready', function (tab) {
var worker = tab.attach({
contentScriptFile: ....
// ...
});
// Use worker.port.on, worker.port.emit, etc...
});
tabs.activeTab.url = data.url('myHTMLFile.html');
});
if the panel loses focus, the "dialog" is gone...
It doesn't get destroyed, just hides, right? If so, depending on why it's getting hidden, you can just call show() on it again.
You'd want to make sure it's not being hidden for a good reason before calling show again. If there's a specific situation in which it's losing focus where you don't want it to, create a listener for that situation, then call if (!panel.isShown) panel.show();
For example, if it's losing focus because a user clicks outside the box, then that's probably the expected behaviour and nothing should be done. If it's losing focus when the browser/tab loses focus, just register a tab.on('activate', aboveFunction)
Simply adding ",screenX=0,screenY=0" (or any values, the zeroes seem to be meaningless) to the features screen seems to fix centerscreen.

Prevent iPhones webkit from opening a new browser window (and thus exiting fullscreen) when clicking an `rel="external"` link

Opening my mobile webpage from my homescreen (after adding it to my homescreen), it starts in fullscreen mode, so far so good.
After logging in (form/submitbutton), the 'app' is still in fullscreen mode, which is also the desired result.
Now, when I click a link that has the rel="external" attribute, webkit opens a new window in Safari, so it exits the fullscreen 'app' I started from my homscreen, I would like it to stay in fullscreen mode.
data-ajax="false" has te same result. Removing data-ajax="false" and rel="external" will not exit fullscreen, but this way you can't link to a multi-page document (1 document with different data-role="page").
Does anyone has the same problem, or even better, a solution?
I do not really care about the transitions, I just want the webpage to remain in fullscreen mode, (the user has to log in again when the new window has opened).
iPhone 3gs
M_webkit / 5.0.2
Why not create a script that pulls out the href and goes to the new url via javascript.
If you use jQuery it's as simple as:
$("a[rel='external']").bind("click",
function() {
if (this.href) {
location.href = this.href;
return false;
}
});
Without jquery you'll need to use object detection and attach a click event to it with the same logic inside the anonymous function above.

iOS Safari flag for stopping page motion?

I'm curious if anyone has found a solution to disabling the default spring-loaded iOS page move when a user drags their finger across the page. For pages that are completely visible (i.e., no scrolling is necessary) the page moves and springs back into place.
I've found that disabling the "touchstart" will effectively fix this, but then it breaks all click events!?! For example:
document.addEventListener('touchstart', function(e) {
e.preventDefault();
}, false);
I've tried other touch / mouse events but no luck. I'm guessing someone out there knows a secret webkit CSS or JavaScript property which can disable this feature.
Edit: as an example of what I'm looking for, here is a similar answer for disabling other default iOS Webkit behaviors via CSS. Unfortunately these don't seem to apply to my question:
Prevent default Press but not default Drag in iOS MobileSafari?
I could have sworn I tried this, but it appears "touchmove" does the trick?
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
Update: After more testing, yes this does in fact do the trick. It seems as though one should never e.preventDefault() on 'touchstart' as that also prevents all other mouse events that follow.

Prevent cached iPhone webapp from reloading (scrolling to top)

I have an iPhone webapp that uses a cache manifest to work offline. I add the webapp to my home screen, use it (say scroll to a certain location on a page), then go back to homescreen.
When I open the app again, for a brief moment I see where I used to be (at that scrolled location on that page), but then the app "reloads" and I get scrolled to the top of the mainpage. Is there a way to prevent this "reloading"? This happens even in airplane mode (ie everything is working off the cache).
You're just seeing the default startup image, which is just a screenshot of the last place you were at. It's not "reloading"; the app wasn't loaded to begin with.
Search for "apple-touch-startup-image" to set a real loading image.
What I'm struggling with here is that the app actually seems to stay "in memory" longer if I use regular Safari as opposed to running in "apple-mobile-web-app-capable" mode. In the later case something as simple as pressing the home button, then task-switching back to the app causes a reload. Doing the same thing just in Safari often does not reload. So I'm worse off by using "apple-mobile-web-app-capable".
I don't believe there is a real 'reload' event. onload and onunload are all we get.
the onload handler starts up as if it is your first time coming to the page.
the onunload handler is the key to clearing out old content.
I like to provide alternate content for people who are coming back to my web app.
window.onunload=function(){
document.getElementsByTagName('body')[0].className+=' unloading'
}
And let the CSS do the dirty work to hide most of the body and show alternate content.
(this answer does not rely on jQuery or other frameworks)
// on load
window.scroll(0,0);
To ensure no old content is displayed while launching I use this in my page:
window.addEventListener('unload', function() { $('body').hide(); } );
Thus the last state of the page is empty and is what is shown to the user when the page is opened again.