Show progress indicator while JS loading

[samreid]

From #68 we would like to show progress of the JS loading. For this part, we will get discrete steps, roughly N+M, where N is the number of screens and M is the number of other non-screen steps.

[samreid]

I demonstrated a prototype of this in #68 and am interested in taking next steps toward production. A built version for energy-skate-park-basics is here: http://www.colorado.edu/physics/phet/dev/html/energy-skate-park-basics/1.2.0-dev.3/energy-skate-park-basics_en.html

This will require the following steps:

• Check in proposed changes to a branch (done)
• Code review from another developer, possibly @schmitzware @jbphet or @pixelzoom. Perhaps @mattpen could review the HTML part.
• Prepare built and requirejs versions for the QA team to test.
• Functional testing from QA team to make sure the requirejs and built versions launch properly
• Support from the design team to decide exactly what it should look like
• Fine tuning and pixel polishing.
• Will it look awkward for 1-screen sims or sims that are already quick to launch?
• Make sure it looks good for PhET-iO brand and Adapted From PhET Brand
• Update the template for generate-development-html see Show progress indicator while JS loading #348 (comment)
• Run grunt generate-development-html for each simulation.
• Update the phet-io startup sequence to accommodate the new loading progress bar (looks like startup sequence is removing the progress indicator before screens are loaded).

[samreid]

OK, with the 2 commits above (in progress-indicator branches for chipper + joist), builds will include a loading progress indicator. To show the loading progress indicator for requirejs mode, you will need to include the svg code from chipper/templates/sim.html into the sim.

<div id="progressBar" style="position:absolute;top:50%;left:50%;margin-left:-120px;margin-top:120px;width:200px;height:10px">
  <svg>
    <rect id="progressBarBackground" x="10" y="10" width="200" height="10" rx="8" ry="15"
          style="stroke: white;"></rect>
    <rect id="progressBarForeground" x="10" y="10" width="0" height="10" rx="8" ry="15" style="fill:#fee105;"></rect>
  </svg>
</div>

I'll add a todo to the above steps to update the generate-development-html template with this as well.

[samreid]

I'm happy with the progress in the branches and the code is ready for review. @ariel-phet can you please review the steps in #348 (comment) to see what work remains, who will need to be involved--and let us know your recommendations for scheduling next steps?

[samreid]

Specific review questions (in addition to general review):

1. Is there a better way to position the progress bar?
2. Should the progress bar styling be provided through CSS classes, or inline style=...
3. Should we try to add a workItem (see Sim.js) for any work that happens before SimLauncher is called?

[ariel-phet]

@samreid I suggest doing a simple version (ideally without the word loading and only your progress bar) and showing at status meeting to get some quick designer feedback. I think we want to keep this animation simple and clear, nothing fancy.

[ariel-phet]

Also marking for dev meeting so we can discuss a bit more (and decide on review and such).

[samreid]

@jbphet volunteered to review the changes to Sim.js

[samreid]

I will hold off work until @jbphet completes his review and/or we get the branch back to master. @jbphet please reassign to me when the review is complete.

[jbphet]

I've reviewed the changes to Sim.js, and they look good for the most part. Here are some minor suggestions:

• document where the value for PROGRESS_BAR_INDICATOR comes from (e.g. // intended to be slightly larger than logo)
• suggest naming runItem to runWorkItem or doWorkItem

I'd also like to test this a bit in some different situations before "signing off" on it, but was unable to run sims when switching joist to the progress-indicator branch. I suspect that this is due to some recent changes to the master branch of joist. Assigning to @samreid to decide whether to pull those changes on master into progress-indicator so that this can be tested. I have a strong preference to do this testing, but @samreid can argue against if the thinks it will be too time consuming and/or tricky to pull in the changes from master that will enable this to run.

[samreid]

I merged the 3 branches and generated new development html.

A few things left to do here: #348 (comment) and I need to delete the remote branches from these repos.

[samreid]

Branches deleted, closing.