Develop Reference

Unexpected recursions in safari browser

I've tried to implement long polling chat. My chat works correctly, except one browser - safari.
I get new message by this code (here only part, just for understanding recursion):
let errorCounter = 0;
let getChatText = function () {
let options = {
//headers and other configuration, which needed for XMLHttpRequest
};
let responseHandler = function(responseCode, body) {
switch (responseCode) {
//handle response codes
case 200:
errorCounter = 0; //on success response
// other codes handle here
default:
errorCounter++;
}
if (errorCounter >= 30) { // 30 just for testing
endChatSession(true);
} else {
getChatText(); //recursion
}
};
requestCall(options, false, responseHandler);
};
If in some moment I reload the page - it doesn't stop, but tryis to call many times (30 in my case) and endChatSession on too many errors. But in other browsers (chrome, firefox etc.) - its immediately stops recursion, and reload the page.
Here is a console output, before safari page reload (preserve log):
Question: How can I stop recursion on page reload in safari, because it is not a reason to endChatSession

Detect if Chrome NaCl is available

Is there a way to detect if NaCl is available on the current browser?
It seems that checking for chrome.app.isInstalled turns into false positive on some non-Chrome browsers

You can check if the browser handles the NaCl mime type. E.g.:
navigator.mimeTypes['application/x-nacl'] !== undefined.
Similarly, for PNaCl, you can check for 'application/x-pnacl'.

You can check for Chrome and a particular version of Chrome like this:
var have_nacl = false;
var have_pnacl = false;
var index = navigator.userAgent.indexOf('Chrome');
if (index != -1) {
var version = parseFloat(navigator.userAgent.substring(index + 7));
if (31 <= version) have_pnacl = true;
if (14 <= version) have_nacl = true;
}
However, this does not tell the full story. Versions 31+ have PNaCl and it's enabled by default. NaCl is only enabled by default for apps in the Chrome store so you would still need to test if NaCl is enabled. One way to do this is to set a watchdog timer then try to load an NaCl module and capture the load event. In the load event clear the watchdog timer. For example:
var watchdog;
var watchdog_time;
function watchdog_timeout() {
alert('NaCl module failed to load');
}
function watchdog_clear() {
clearTimeout(watchdog);
}
function watchdog_set(time) {
watchdog_time = time;
watchdog = setTimeout(watchdog_timeout, time);
}
watchdog_set(5000); // Timeout in 5 sec
var module = document.getElementById('module'); // Use your module's ID
module.addEventListener('load', function () {
watchdog_clear();
alert('NaCl module loaded');
}, true);
// Inject the module, where module.nmf is your NMF file.
module.innerHTML = '<embed src="module.nmf" type="application/x-nacl"/>';
This requires that you have something like the following somewhere in your HTML:
<div id="module"></div>
If your module takes awhile to download you might also want to capture the loadstart and progress events and extend the watchdog time.
function watchdog_extend() {
watchdog_clear();
watchdog_set(watchdog_time);
}
module.addEventListener('loadstart', watchdog_extend, true);
module.addEventListener('progress', watchdog_extend, true);

JS difference between enter page and refresh page

Is it possible to detect situation when page is entered and when the same page is refreshed
if (entered) alert("hi");
if (refreshed) alert("you've refreshed");
Somehow there are some little differences between page rendering when entered and when refreshed and it would be much easier to detect the case than to debug it for me (if its even possible - maybe some browser optimization stuff is causing it).

This isn't an ideal solution, but if your page can load in under 5 seconds than this will work, and assuming you are not navigation to another page, then returning within 5 seconds.
window.onbeforeunload = function(){
window.sessionStorage.setItem('lastvisit', new Date().getTime());
}
var lastVisit = +window.sessionStorage.getItem('lastvisit');
var isRefresh = (new Date().getTime() - lastVisit) < 5000;
console.log(isRefresh);

There is no perfect way of tracking reloads verses new page loads but this solution works in most situations. Use sessionStorage in combination with an unload event:
(function (win) {
'use strict';
var reloaded = false,
ss = win.sessionStorage,
offset = 1000, // 1 second, may need tweaking if
// your page takes a long time to load/where
// this code is located in your page
now = function () {
return (new Date()).getTime();
},
lastUnload = ss.getItem('lastunload'),
loadStatus = document.getElementById('status');
// sessionStorage returns null if nothing was stored
if (lastUnload !== null) {
// sessionStorage returns a string, +lastUnload
// coerces the string held in lastUnload into an integer
// see https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29
if (+lastUnload + offset > now()) {
reloaded = true;
}
}
win.addEventListener('unload', function () {
ss.setItem('lastunload', now());
}, false);
if (lastUnload === null) {
loadStatus.innerHTML = 'First visit of session.';
} else if (reloaded) {
loadStatus.innerHTML = 'Page was reloaded.';
} else {
loadStatus.innerHTML = 'Navigated back to page after leaving';
}
}(window));
This code defines a page reload as returning to the page within 1 second of leaving it, so there could be false positives if someone leaves the page and immediately hits the back button but with normal browsing behavior that really shouldn't happen. You can modify the offset variable if you want to give more or less leeway, but 1 second seems to be a good default.
After developing this code I also found this similar answer.

If sessionStorage is available, you can use that.
if (!window.sessionStorage.getItem('visited')) {
//entered
window.sessionStorage.setItem('visited', true);
}
else {
//refreshed
}
More on sessionStorage

Navigating in a WinJS app always throws an exception

Every time I try to perform a navigation in the ready function of a page, the application crashes.
Specifically, it fails at the WinJS.Navigation.navigate("/pages/login/login.html", {}); line below:
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var listView = element.querySelector(".groupeditemslist").winControl;
listView.groupHeaderTemplate = element.querySelector(".headertemplate");
listView.itemTemplate = element.querySelector(".itemtemplate");
listView.oniteminvoked = this._itemInvoked.bind(this);
// Set up a keyboard shortcut (ctrl + alt + g) to navigate to the
// current group when not in snapped mode.
listView.addEventListener("keydown", function (e) {
if (appView.value !== appViewState.snapped && e.ctrlKey && e.keyCode === WinJS.Utilities.Key.g && e.altKey) {
var data = listView.itemDataSource.list.getAt(listView.currentItem.index);
this.navigateToGroup(data.group.key);
e.preventDefault();
e.stopImmediatePropagation();
}
}.bind(this), true);
this._initializeLayout(listView, appView.value);
listView.element.focus();
initialize();
}
function initialize() {
// Check if user is logged in
if (is_logged_in !== true) {
WinJS.Navigation.navigate("/pages/login/login.html", {});
}
else {
// TODO: Replace the data with your real data.
// You can add data from asynchronous sources whenever it becomes available.
generateSampleData().forEach(function (item) {
list.push(item);
});
}
}
Anyone know why this happens?

There are a couple routes you could take here:
Catch the unhandled exception and ignore it
Structure your code to avoid setting up the error condition
To ignore the error you can setup a WinJS.Application.onerror handler that can deal with unhandled exceptions. Here's a forum post that guides you in this solution: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/686188b3-852d-45d5-a376-13115dbc889d
In general, I'd say you're better off avoiding the exception all together. To that end - What's happening here is that only one navigation event (promise) can occur at a time. The navigation promise used to navigate to groupedItems is still running when you're inside of the ready function. When you call initialize, which then calls WinJS.Navigation.navigate("/pages/login/login.html", {}); it sees this and tries to first cancel the currently running navigation promise which results in the exception you're seeing.
Instead, you can use the window.setImmediate function to setup your call to initialize() to run after the current script block exits. To do this, replace your call to initialize() with:
window.setImmediate(this.initialize.bind(this));

If your running your code on the RTM version after coming from the Release Preview this should sort your problem.
function initialize() {
// Check if user is logged in
if (is_logged_in !== true) {
WinJS.Navigation.navigate("/pages/login/login.html", {});
}
else {
// TODO: Replace the data with your real data.
// You can add data from asynchronous sources whenever it becomes available.
generateSampleData().forEach(function (item) {
list.push(item);
});
}
}
var markSupportedForProcessing = WinJS.Utilities.markSupportedForProcessing;
var requireSupportedForProcessing = WinJS.Utilities.requireSupportedForProcessing;
markSupportedForProcessing(initialize);
requireSupportedForProcessing(initialize);
You should probably take a look at the migration docs which details what the above is actually for and why: http://www.microsoft.com/en-us/download/details.aspx?id=30706

Setting a preference at startup in firefox

Thanks to everyone in advance -
I need to load a preference before any windows are loaded at startup. Below is some /component code I have been working with. The SetPreference method seems to fail when it is called (nothing executes afterwords either) - I am assuming because the resources that it needs are not available at the time of execution...or I am doing something wrong. Any suggestions with this code or another approach to setting a preference at startup?
Thanks again,
Sam
For some reason the code formatting for SO is not working properly - here is a link to the code as well - http://samingrassia.com/_FILES/startup.js
Components.utils.import('resource://gre/modules/XPCOMUtils.jsm');
const Cc = Components.classes;
const Ci = Components.interfaces;
const ObserverService = Cc['#mozilla.org/observer-service;1'].getService(Ci.nsIObserverService);
function MyStartupService() {};
MyStartupService.prototype = {
observe : function(aSubject, aTopic, aData) {
switch (aTopic) {
case 'xpcom-startup':
this.SetPreference("my.extension.is_running", "false");
break;
case 'app-startup':
this.SetPreference("my.extension.is_running", "false");
ObserverService.addObserver(this, 'final-ui-startup', false);
break;
case 'final-ui-startup':
//make sure is_running is set to false
this.SetPreference("my.extension.is_running", "false");
ObserverService.removeObserver(this, 'final-ui-startup');
const WindowWatcher = Cc['#mozilla.org/embedcomp/window-watcher;1'].getService(Ci.nsIWindowWatcher);
WindowWatcher.registerNotification(this);
break;
case 'domwindowopened':
this.initWindow(aSubject);
break;
}
},
SetPreference : function(Token, Value) {
var prefs = Components.classes["#mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService);
var str = Components.classes["#mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
str.data = Value;
prefs.setComplexValue(Token, Components.interfaces.nsISupportsString, str);
//save preferences
var prefService = Components.classes["#mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService);
prefService.savePrefFile(null);
},
initWindow : function(aWindow) {
if (aWindow != '[object ChromeWindow]') return;
aWindow.addEventListener('load', function() {
aWindow.removeEventListener('load', arguments.callee, false);
aWindow.document.title = 'domwindowopened!';
// for browser windows
var root = aWindow.document.documentElement;
root.setAttribute('title', aWindow.document.title);
root.setAttribute('titlemodifier', aWindow.document.title);
}, false);
},
classDescription : 'My Startup Service',
contractID : '#mystartupservice.com/startup;1',
classID : Components.ID('{770825e7-b39c-4654-94bc-008e5d6d57b7}'),
QueryInterface : XPCOMUtils.generateQI([Ci.nsIObserver]),
_xpcom_categories : [{ category : 'app-startup', service : true }]
};
function NSGetModule(aCompMgr, aFileSpec) {
return XPCOMUtils.generateModule([MyStartupService]);
}

To answer your real question, which is
I have code that loads on every window load and I need to make sure that only gets executed once every time firefox starts up.
..you should just use a module, in the load handler that you wish to execute once, check a flag on the object exported from (i.e. "living in") the module, then after running the code you need, set the flag.
Since the module is shared across all windows, the flag will remain set until you close Firefox.
As for your intermediate problem, I'd suggest wrapping the code inside observe() in a try { ... } catch(e) {dump(e)} (you'll need to set a pref and run Firefox in a special way in order to see the output) and check the error returned.
I guess xpcom-startup and app-startup is too early to mess with preferences (I think you need a profile for that), note that you don't register to get xpcom-startup notification anyway. You probably want to register for profile-after-change instead.