Firefox Compatibility

[hallpell]

A new firefox update seems to have broken woof more. There were previous issues along these lines before (a. la.

WoofJS/woof.js

Line 151 in 4a5b399

// (this shouldn't happen, but firefox

), but this seems to be different than before.

[hallpell]

On firefox, the load event for the iframe displaying the preview on create.html is triggered twice. This causes some issues, which should be fixed in PR #634 and #635 . (While writing this comment explaining #634, I realized the approach in #635 is more elegant and has less possibilities for problems in the future, but leaving some explanation of #634 here to record reasoning).

The relevant lines are:

WoofJS/woof.js

Lines 141 to 144 in 1a67ff0

	setTimeout(() => {
	thisContext.stopped = false;
	thisContext._readys = [];
	}, 0)

which, makes the code that verifies that setup is completed go to the end of the event queue (instead of running immediately).

My current understanding of the sequence of relevant operations (after #634 is merged) is:

1. Page loads/user reloads the preview pane.
2. Two 'load' events are triggered for this element (I suspect some amount of setting the src attribute of the iframe is responsible for this, but haven't investigated enough to nail down where).
3. The first load event fires, creating the main div and various canvases. The end of the load event handler calls runReadys, which connects sprite.onMouseDown calls to the recently-created div. (Before this fix, we would then delete all of the functions that were stored in _readys immediately).
4. Since the second load event is already in queue, it fires before the setTimeout. This deletes the old div/canvases, rendering useless all of the sprite.onMouseDown handlers that were previously connected (the element they are listening to no longer exists). Then the divs/canvases are recreated, and runReadys is called, connecting sprite.onMouseDowns to the proper div.
5. The two setTimeouts fire, deleting the functions in _readys and setting stopped to false, allowing us to start running the project/drawing frames.

For #635, I realized that the issue was deleting the div, and there seems to be no need to re-create the divs and canvases that are already there. So now we just have

WoofJS/woof.js

Lines 150 to 155 in c387d23

	// if the project already exists, we shouldn't do anything
	// (this shouldn't happen, but firefox was firing
	// the load event twice which led to bugs)
	if (document.getElementById('project') != null) {
	return;
	}

Which prevents us from deleting/re-adding the relevant elements. So to revise the above sequence, 1-3 are the same. Then:
4) The last portion of the runReadys happens (now no longer in a setTimeout), deleting the functions in _readys and setting stopped to false.
5) The second load event triggers. Since project already exists, it exits early, doing ~nothing.