Review splash.js and related code

[samreid]

In #382 the splash screen was revised to support dynamically resizing.

From #382 (comment)

A developer needs to review the changes in the "splash-script" branches for joist, chipper and brand and do basic tests (run generate-development-html and test in requirejs, and test a built sim).

Please keep in mind that this solution must support Chrome => "Save As..." and iOS Reading Mode, each of which saves part of the DOM. You'll see code that supports this by checking for the existence of DOM elements before creating/adding them to the document.

In #382 (comment) @ariel-phet recommended @jonathanolson for the review.

EDIT: added the branch name

[jonathanolson]

It wasn't immediately clear how the progress bar was updated (by the ID progressBarForeground, used in Joist).

I'd recommend references in both locations (splash.js and in Sim.js).

There seem to be other IDs that aren't used anywhere else, e.g. 'progressBarBackground', 'progressBar'.

Additionally, is there a place with documentation about the restrictions we need to follow for the "Save As" and Reading Mode? I don't want to break those in Scenery changes.

[samreid]

It wasn't immediately clear how the progress bar was updated (by the ID progressBarForeground, used in Joist).

I'd recommend references in both locations (splash.js and in Sim.js).

I added docs in the preceding commits.

There seem to be other IDs that aren't used anywhere else, e.g. 'progressBarBackground', 'progressBar'.

While developing this, I thought of removing the unused IDs but realized they may come in handy if someone is trying to understand the DOM (say, in the dev tools). Still, based on your point, I removed the IDs and tested that it works nicely without them.

Additionally, is there a place with documentation about the restrictions we need to follow for the "Save As" and Reading Mode? I don't want to break those in Scenery changes.

I don't have a thorough understanding of "Save As" and "Reading Mode", or know where they are documented. What I have observed are these workarounds in Sim.js:

    // check to see if the sim div already exists in the DOM under the body. This is the case for https://github.com/phetsims/scenery/issues/174 (iOS offline reading list)
    if ( document.getElementById( 'sim' ) && document.getElementById( 'sim' ).parentNode === document.body ) {
      document.body.removeChild( document.getElementById( 'sim' ) );
    }

            // Support iOS Reading Mode, which saves a DOM snapshot after the progressBarForeground has already been
            // removed from the document, see https://github.com/phetsims/joist/issues/389
            if ( document.getElementById( 'progressBarForeground' ) ) {

For instance, see phetsims/scenery#174 which I believe is our first sighting and most thorough record of Reading List related problems. You and I also spoke about the requirejs synchronousity problem @phet-steele discovered that was causing problems for "Save As" in phetsims/chipper#499 (comment)

[jonathanolson]

Ok, looks good to me. Thanks!

[samreid]

Thanks @jonathanolson, I'll continue in #382