different javascript errors in Safari and FireFox

[ChasTheSpaz]

Using hand-coded script src includes of jquery-cookie.js, jquery.js (version 1.7.1) and sketch.js, the following code gets tagged by the Safari html inspector:

"Line 4097:18 $.cookie is not a function"

`/** Logging utilities ***** / Haskell.log = function () { if ($.cookie('Haskell.log.enabled') === "true") // ( ** THE OFFENDER ***) window.console.log.apply(window.console, arguments); } };

Haskell.log.enable = function (bool) { $.cookie('Haskell.log.enabled', bool.toString()); };`

Firefox reports different errors:

'Use of getPreventDefault() is deprecated. Use defaultPrevented instead.'

'Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/'

'TypeError: $(...).sketch is not a function' // it IS a function, but something ahead of the sketch file is having a problem

[ChasTheSpaz]

After intense experimenting for a few days, I have concluded there may be memory as well as other issues in Threepenny, FireFox and Safari.:

1. Threepenny will randomly disconnect the server connection after serving up a few bunches of images. This has been an outstanding issue since the beginning of using Threepenny.
2. To get Threepenny to allow a scripted local copy of jquery.js, I had to cut and paste Threepenny library's cookie extension into Threepenny's copy of jquery.js to resolve a function reference that clobbered the local script include. After this was done my jquery.js and other includes showed up in the Header portion of the HTML code.
3. Firefox, when showing scaled-down images of image/bmp, turns the image upside down upon display on the web page. Also FireFox cannot show image/tif files at all. I know these are not your problem, but it is good to know anyway. Firefox's javascript inspector can get confused if retry/reloaded too many times.
4. Safari can show all image file types correctly, but seems to have a serious bug in its' Javascript interpreter that prevents the sketch.js code from working - specifically it can't refer to an inner function reference to an outer variable. It's javascript inspector also can get confused from re-trying page loading.

I shall continue pounding away on this code until more information comes up...

[HeinrichApfelmus]

I'm sorry that the sailing is not as smooth as you had probably hoped for. Concerning the individual issues:

1. That sounds weird. Could you elaborate on that, i.e. make a new issue and supply a small test case? I have noticed some issues with serving static data myself, but couldn't pinpoint anything precise yet.
2. Right now, Threepenny supplies a pinned version of jQuery, so including another version of the library may be tricky. If I remember correctly, jQuery supports multiple versions, but I forgot how to set this up correctly.

[ChasTheSpaz]

I am pleasantly surprised you responded at all, as many developers of all kinds routinely ignore problems in their code after two or more years post-release. You seem to be one of the few who care.

I have doggedly continued to work on the code and went back to first principles of debugging practise via small code test cases. The upshot of all the work:

• Including extra copies of jquery (or other javascript source files) into the Threepenny application source is only a problem if there is an error in a prior source file include. It also depends on the browser being used and its' own javascript interpreter implementation. Threepenny is quite sensitive to errors in included javascript files. I think this should be clearly documented for the benefit of other newbies.
• You should complete the Widget documentation.

I was able to get things working by three means:

1. Fixing stupid source text errors (the worst is confusing hyphen and underscore, which is VERY hard to spot in dense code sequences)
2. Modifying other people's javascript code. This was required to work around an interpreter bug in one case (a commented-out statement at the end of a minimised javascript file had to be removed). Not all external javascript source files are correct, nor are all browser javascript interpreters!
3. Removing an offending javascript source and replacing it with something else entirely.

I was trying to use a simple canvas-related graphics package that did very little real work, but caused the greatest pain. I also included a javascript colour-picker that worked, but couldn't figure out how to connect the javascript colour-picker output data to the HTML5 data. Thus both canvas and colour-picker sources were summarily dropped.

I dug down into the HTML5 canvas tag and discovered it already had a relatively sophisticated colour-picker built into it, as well as image data fetch functions available from javascript. Ultimately I replaced the canvas and colour-picker tool sources to something called "literally canvas", and after getting over teething problems with that, finally got everything to go. "Literally Canvas" does NOT require jquery to work, so jquery was elided from the haskell source. JQuery was replaced by a version-pinned javascript reactive programming library that is required (the up-to-date version does not work) and customised to work with the "Literally Canvas" code. The reactive library had the "commented-out code" bug referred to earlier.

The only research question now is how to pass the current Canvas image data back to the haskell source that is attached to a button-pressed event. I am assuming for the time being that I can call javascript directly from the haskell code, as lightly mentioned in the Threepenny documentation.

As for the current issue #125 I would change/rename this bug to deal with the only outstanding issue to date that is closely related: the connection random drop-out problem. If I had the debugging tools, I would put a watch on the connection variable, then halt and check back on the stack when it changes. The bug should be reproducible - all I did was create an HTML /div id'd as "divMatches" which holds a single HTML /p (paragraph) which is then populated with 20 directory images, triggered by a button on the screen. Pressing the populate button a number of times will usually trigger the bug.

CSS-
img {
  width: auto;
  height: auto;
  max-width: 64px;
  max-height: 64px;
  margin: 3px;
  border: 1px;
  border-style: dashed;
  border-color: white;
}

#divMatches {
  position: absolute;top:8px;
  width: 360px;
  height: 335px;
  background: black;
}

Again, thanks for the interest. If I get the code working to my satisfaction, I will will happily add my project to your list of Threepenny projects if you so desire.