Merge tag '0.1.0-prerelease.20200618175748' into scratch-desktop

Pull revert from VM
Merge pull request #5901 from LLK/dependabot/npm_and_yarn/scratch-blocks-0.1.0-prerelease.20200617163252
2020-06-22 10:42:52 -07:00 · 2020-06-18 13:53:00 -04:00 · 2020-06-17 22:34:03 +00:00 · 2020-06-17 22:16:42 +00:00 · 2020-06-17 22:13:53 +00:00 · 2020-06-17 22:02:57 +00:00
52 changed files with 22814 additions and 12963 deletions
@@ -12,6 +12,7 @@
 *.svg binary

 # Prefer LF for most file types
+*.css text eol=lf
 *.frag text eol=lf
 *.htm text eol=lf
 *.html text eol=lf
@@ -1,11 +1,64 @@
 ## Contributing
 The development of Scratch is an ongoing process, and we love to have people in the Scratch and open source communities help us along the way.

-If you're interested in contributing, please take a look at the [issues](https://github.com/LLK/scratch-gui/issues) on this repository.
-Two great ways of helping are by identifying bugs and documenting them as issues, or fixing issues and creating pull requests. When looking for bugs to fix, please look for the ["Help Wanted" label](https://github.com/LLK/scratch-gui/issues?q=label%3A%22help+wanted%22). Bugs with this label have been specifically set aside for Open Source contributors. Issues without the label can also be worked on but we ask that you comment on the issue prior to starting work. When submitting pull requests please be patient -- it can take a while to find time to review them. The organization and class structures can't be radically changed without significant coordination and collaboration from the Scratch Team, so these types of changes should be avoided.
+### Ways to Help

-It's been said that the Scratch Team spends about one hour of design discussion for every pixel in Scratch, but some think that estimate is a little low. While we welcome suggestions for new features in our [suggestions forum](https://scratch.mit.edu/discuss/1/) (especially ones that come with mockups), we are unlikely to accept PRs with new features that haven't been thought through and discussed as a group. Why? Because we have a strong belief in the value of keeping things simple for new users. To learn more about our design philosophy, see [the Scratch Developers page](https://scratch.mit.edu/developers), or [this paper](http://web.media.mit.edu/~mres/papers/Scratch-CACM-final.pdf).
+* **Documenting bugs**
+  * If you've identified a bug in Scratch you should first check to see if it's been filed as an issue, if not you can file one.  Make sure you follow the issue template.
+  * It's important that we can consistently reproduce issues. When writing an issue, be sure to follow our [reproduction step guidelines](https://github.com/LLK/scratch-gui/wiki/Writing-good-repro-steps).
+    * Some issues are marked "Needs Repro". Adding a comment with good reproduction steps to those issues is a great way to help.
+  * If you don't have an issue in mind already, you can look through the [Bugs & Glitches forum.](https://scratch.mit.edu/discuss/3/) Look for users reporting problems, reproduce the problem yourself, and file new issues following our guidelines. 

+* **Fixing bugs**
+  * You can request to fix a bug in a comment on the issue if you at mention the repo coordinator, who for this repo is @chrisgarrity.
+    * If the issue is marked "Help Wanted" you can go ahead and start working on it!
+  * **We will only accept Pull Requests for bugs that have an issue filed that has a priority label** 
+    * If you're interested in fixing a bug with no issue, file the issue first and wait for it to have a priority added to it.
+  
+  * We are not looking for Pull Requests ("PR") for every issue and may deny a PR if it doesn't fit our criteria.
+    * We are far more likely to accept a PR if it is for an issue marked with Help Wanted.
+    * We will not accept PRs for issues marked with "Needs Discussion" or "Needs Design."
+    * Wait until the Repo Coordinator assigns the issue to you before you begin work or submit a PR.
+
+### Learning Git and Github
+
+If you want to work on fixing issues, you should be familiar with Git and Github.
+
+* [Learn Git branching](https://learngitbranching.js.org/) includes an introduction to basic git commands and useful branching features.
+* Here's a general introduction to [contributing to an open source project](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
+
+**Important:** we follow the [Github Flow process](https://guides.github.com/introduction/flow/) as our development process.
+
+### How to Fix Bugs
+1. Identify which Github issue you are working on. Leave a comment on the issue to let us (and other contributors) know you're working on it.
+2. Make sure you have a fork of this repo (see [Github's forking a repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) for details)
+3. Switch to the `develop` branch, and pull down the latest changes from upstream
+4. Run the code, and reproduce the problem
+5. Create your branch from the `develop` branch
+6. Make code changes to fix the problem
+7. Run `npm test` to make sure that your changes pass our tests
+8. Commit your changes
+9. Push your branch to your fork
+10. Create your pull request
+    1. Make sure to follow the template in the PR description
+    1. Remember to check the “[Allow edits from maintainers](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/allowing-changes-to-a-pull-request-branch-created-from-a-fork)” box
+
+When submitting pull requests keep in mind:
+* please be patient -- it can take a while to find time to review them
+* try to change the least amount of code necessary to fix the bug
+* the code can't be radically changed without significant coordination with the Scratch Team, so these types of changes should be avoided
+* if you find yourself changing a substantial amount of code or considering radical changes, please ask for clarification -- we may have envisioned a different approach, or underestimated the amount of effort
+
+### Suggestions
+![Block sketch](https://user-images.githubusercontent.com/3431616/77192550-1dcebe00-6ab3-11ea-9606-8ecd8500c958.png)
+
+Please note: **_we are unlikely to accept PRs with new features that haven't been thought through and discussed as a group_**.
+
+Why? Because we have a strong belief in the value of keeping things simple for new users. It's been said that the Scratch Team spends about one hour of design discussion for every pixel in Scratch. To learn more about our design philosophy, see [the Scratch Developers page](https://scratch.mit.edu/developers), or [this paper](http://web.media.mit.edu/~mres/papers/Scratch-CACM-final.pdf).
+
+We welcome suggestions! If you want to suggest a feature, please post in our [suggestions forum](https://scratch.mit.edu/discuss/1/). Your suggestion will be helped if you include a mockup design; this can be simple, even hand-drawn.
+
+### Other resources
 Beyond this repo, there are also some other resources that you might want to take a look at:
 * [Community Guidelines](https://github.com/LLK/scratch-www/wiki/Community-Guidelines) (we find it important to maintain a constructive and welcoming community, just like on Scratch)
 * [Open Source forum](https://scratch.mit.edu/discuss/49/) on Scratch
@@ -14,6 +14,6 @@ npm-*
 /dist
 /.opt-in

-# generated translation files
+# Generated translation files
 /translations
 /locale
@@ -5,8 +5,11 @@
 /node_modules
 npm-*

-# Double copies of all the static assets and tutorial gifs
-/src
+# TO REVERT: the scratch-desktop branch wants to build scratch-gui from source.
+# To support that we need to un-ignore the /src directory.
+# Once we merge the scratch-desktop branch into develop we should re-ignore /src here.
+# We can also do that by omitting or reverting this commit during the merge.
+# /src

 # Testing
 /.nyc_output
@@ -4,7 +4,7 @@ dist: xenial
 addons:
    chrome: stable
 node_js:
- 8
+- 10
 env:
  global:
  - CHROMEDRIVER_VERSION=LATEST
@@ -54,7 +54,7 @@ deploy:
 - provider: script
  on:
    all_branches: true
-    condition: $TRAVIS_EVENT_TYPE != cron && ! $TRAVIS_BRANCH =~ ^greenkeeper/
+    condition: $TRAVIS_EVENT_TYPE != cron && ! $TRAVIS_BRANCH =~ ^dependabot/
    tags: false # Don't push tags to gh-pages
  skip_cleanup: true
  script: npm run deploy -- -x -e $TRAVIS_BRANCH -r https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
@@ -18,6 +18,8 @@ cd scratch-gui
 npm install
 ```

+**You may want to add `--depth=1` to the `git clone` command because there are some [large files in the git repository history](https://github.com/LLK/scratch-gui/issues/5140).**
+
 ## Getting started
 Running the project requires Node.js to be installed.

@@ -74,7 +76,7 @@ See [jest cli docs](https://facebook.github.io/jest/docs/en/cli.html#content) fo

 *NOTE: If you're a windows user, please run these scripts in Windows `cmd.exe`  instead of Git Bash/MINGW64.*

-Before running any test, make sure you have run `npm install` from this (scratch-gui) repository's top level.
+Before running any tests, make sure you have run `npm install` from this (scratch-gui) repository's top level.

 #### Main testing command

@@ -194,5 +196,60 @@ Further reading: [Stack Overflow](https://stackoverflow.com/questions/46602286/n
 You can publish the GUI to github.io so that others on the Internet can view it.
 [Read the wiki for a step-by-step guide.](https://github.com/LLK/scratch-gui/wiki/Publishing-to-GitHub-Pages)

+## Understanding the project state machine
+
+Since so much code throughout scratch-gui depends on the state of the project, which goes through many different phases of loading, displaying and saving, we created a "finite state machine" to make it clear which state it is in at any moment. This is contained in the file src/reducers/project-state.js .
+
+It can be hard to understand the code in src/reducers/project-state.js . There are several types of data and functions used, which relate to each other:
+
+### Loading states
+
+These include state constant strings like:
+
+* `NOT_LOADED` (the default state),
+* `ERROR`,
+* `FETCHING_WITH_ID`,
+* `LOADING_VM_WITH_ID`,
+* `REMIXING`,
+* `SHOWING_WITH_ID`,
+* `SHOWING_WITHOUT_ID`,
+* etc.
+
+### Transitions
+
+These are names for the action which causes a state change. Some examples are:
+
+* `START_FETCHING_NEW`,
+* `DONE_FETCHING_WITH_ID`,
+* `DONE_LOADING_VM_WITH_ID`,
+* `SET_PROJECT_ID`,
+* `START_AUTO_UPDATING`,
+
+### How transitions relate to loading states
+
+As this diagram of the project state machine shows, various transition actions can move us from one loading state to another:
+
+![Project state diagram](docs/project_state_diagram.svg)
+
+_Note: for clarity, the diagram above excludes states and transitions relating to error handling._
+
+#### Example
+
+Here's an example of how states transition.
+
+Suppose a user clicks on a project, and the page starts to load with url https://scratch.mit.edu/projects/123456 .
+
+Here's what will happen in the project state machine:
+
+![Project state example](docs/project_state_example.png)
+
+1. When the app first mounts, the project state is `NOT_LOADED`.
+2. The `SET_PROJECT_ID` redux action is dispatched (from src/lib/project-fetcher-hoc.jsx), with `projectId` set to `123456`. This transitions the state from `NOT_LOADED` to `FETCHING_WITH_ID`.
+3. The `FETCHING_WITH_ID` state. In src/lib/project-fetcher-hoc.jsx, the `projectId` value `123456` is used to request the data for that project from the server.
+4. When the server responds with the data, src/lib/project-fetcher-hoc.jsx dispatches the `DONE_FETCHING_WITH_ID` action, with `projectData` set. This transitions the state from `FETCHING_WITH_ID` to `LOADING_VM_WITH_ID`.
+5. The `LOADING_VM_WITH_ID` state. In src/lib/vm-manager-hoc.jsx, we load the `projectData` into Scratch's virtual machine ("the vm").
+6. When loading is done, src/lib/vm-manager-hoc.jsx dispatches the `DONE_LOADING_VM_WITH_ID` action. This transitions the state from `LOADING_VM_WITH_ID` to `SHOWING_WITH_ID`
+7. The `SHOWING_WITH_ID` state. Now the project appears normally and is playable and editable.
+
 ## Donate
 We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1381px" height="1012px" viewBox="-0.5 -0.5 1381 1012" content="&lt;mxfile host=&quot;www.draw.io&quot; modified=&quot;2020-02-04T16:31:44.889Z&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36&quot; etag=&quot;8a2X5Jj65jOGG04xBBh1&quot; version=&quot;12.6.4&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;58cdce13-f638-feb5-8d6f-7d28b1aa9fa0&quot;&gt;7V1Zd6O4Ev41OffJHImdRydxujOT7XSSXuYlh9g4YcY2GUw6yfz6KxYBEqtBErjbeYkthMCo9FXVV6XiSDlZv3/y7ZfnS2/hrI5ksHg/Uk6PZBmqEKJ/YctH0gKBFrc8+e4iacsabt3/nKQRJK2v7sLZEh0Dz1sF7gvZOPc2G2ceEG2273tvZLeltyKv+mI/JVcEWcPt3F45hW7f3EXwnP6MXPfPjvv0nFza1JIDj/b8nyffe90k1zuSlWX0Fx9e23ispP/22V54b7kmZXaknPieF8Sf1u8nzip8uPixxeedVRxN79t3NkGbExRTfrTgo6ZB+LgAS2OSjPDTXr06+CdENxp84IeDRkDzgL4cPwfrFWqD6CP6IS/h8W1g+8FtYAfh8aW7Wp14K8+PTlRA9Bd2DnzvHyd3ZLlMjkSPzllkg8ZPJzw099buPPm8sh+d1XH6rPFIG28TXdbbBGf22l2F4vfV8Rf2xk6aE1GDcvK97O7slfu0QW1z9AwddPB44fpIyFwvbNx6r+EUHhcfNH5yjh8477mm5MF/cry1E/gfqEtyVMeLIlklE6gnUvGWyZySND3npA232YmUP6VDZzONPiSTXT7x/z3CCw98/uv8z5/G2fftuxxsLieqWZzsBVoYyVfPD569J29jr2ZZ6/H81f+ZzljW5cLzXpLGv50g+EievP0aeKTkOO9u8D2cV0lLvv3IHTl9T6Y8+vKBv2zQz82dFH79kT+WnRZ9w+dVzhqaVn/uVKyJZJqQZD85Qc3jS55e+Mhq5993Vnbg/iSxps9knn9Tzq//Mh+Xp856onvw6uz934lSspL1VZAIPjHL+r+vHj4w2UYTNUUdIHh5zw6iT0/h/9Prq9nDxfX09Pzq08PXy4dv53efH85P8eDoXuPx494FgUKLIyAFoLDewiXkIjCeJgfW7mIRiZrvoJuzH6Ohwul88dxNED037fhIO60GhgyG8R0VlmmqTJLx87ohE5eaZVO5zidAUlVFjQdrPffJcDfhT8zGope+t1xukUzSspLeRCvxqRL4StHBUxu3bV/sTStxgmXiVCtJ8dDk5R59uqWtPFtl11959mIbzrLv/Y1m/9QO7PDRbBBMoSewrhTrqptpkn9Sw709u4Fz+2JH2POGrClqafjzBDdltahPQ4Ge1+vTkWhQBtoyXY4f1PecskwVaF5b6ry0JSzMbbOy7KUfIdDzGlICWGGyVZKEQg9HvHF8Fz2ycCZ7aFG9qEULfQzWGjQ6der79keuQ6I2KkFW0wxC1CBlQxcwGdR0Rx/i63dF51LZM3RG2j2eT7ByN84Er5roaLi8tCJc3s7uHm6+XP8xO7nLQXUGg28uWowpmp4vwivIur0OgS0BxPBxdUXPkVgPjSZBFbxVWRl1xoNpQtJPMJiYEhMKUHUOlkXps1E64CapNQV5GcxwrvQxyEN5C+WAUub4jxVQ0E2E97HXQIJM27m7eUKtentYwT5db1hBLommkvSDzAZVVBKrhKGKJsgaY2VUxWOYxg6kB09TrNyx5WKOFWTG1EmhgbpGDhHfaHJWJjq72nW6SbkQ9XadpdZ152TXyYxguACzd9Mvd3na5uz8YvZwfxO27A1mtkRJTF+wML5kA1DCyQYmddLFmMgWB6CsWvjMpevqOpatWWtZOtAg3WgQjQKlSRqTGowHMfbFnhcbNTCKSraKaB1JxICX7okiBmezu5PPoe6hWN7MdEd4VyBi90oxsYwpGE2KSVGxrZAiQT/NxFfzGA2yxTKkUCVqYgIKTyViDJa+tw5HdJAX4B9iCiNRpnRMQbMGVqVQeEyhk/ZUCO0pAWjs5P2Gh9g4sjhfqNGTxR25u7IK6S0otF1f4cp2gNhSFW7ygdnWiQDX93ddALffjZCGQ0oR5vjB1jfidlUFZtmNIRNi4wVJD3SXQUj4kTf67PhOOKnbzf/C6yBjwdlubSQDWrUrlTYX7nYPeVD2phOsB31kO2mqbpJOPWDi1dNxGgnIVv5PhIuPfwpzKz630q9m3x5OZ2fT+4u7/mu6Z1ZGu3V9sKDE0BFCszJkW3mcyxqw50ugQ2MxsTpYT7l5rX/6zmYxDVOLw5FenE3ckjx3s3a6W84bnp+VswzqZqfeImrBOuhDsQ6lcK13mLTxhoPrQr21k8LeQu3FBbEKB9dzQZVKpJoLOpg4eM3UWjgQ9qSDsEvMwWapWyNCPJdU/koMGaEk0cJZ2q+roCXreTBuhjVuBqeHtC700C+3P6MuVWEAIqhf7Kwp1Z4fOVOlbMv4k71Vus25AiwzNTUyIiP308BpqgBJK1ADMNHI5eHAIXeDwRzWAMmoz3QvXdI9cIQdLYxza4FMnsIoowlCi/K/k9Spqpymwgl452rhhPLjvbOeyiXNEoSCd9cPt9Ovsz0DsY6eQ82irgMxS4MWISITyAbIdIlKeoKKKOdCrZSvfo5EYz6dAFeCySAU3xq6JhTlKu3slrCNpVylgRSSE/Yekxt2w/vfOFF8HURyJCB8cnCturlWpj4gb1zuGHThIflYO2239RGeVeZoMfetzJa+lczatepkE6kGKVpqw/Y9ur9p8Td4qvXRXm22QVAhowcA4uTyPKu2944j04B0I11r6NhZxHkjChOTS5MlqsaIbIiyubQu+/x+D7KqNaCOq6IIbEri7Lc55f7mdHoX4sfx7Oz6y+zh5Mss/n5yffPjN4aPeCFVwgeSWquUIerJWfDgmcqDWYOy2oTlBRWlHVRACQCTtL+Sc2sAo2wDX/dkyF7Igl38sSALK4OoHFkup1f304sUYPYGS7I9wnJ6gucvHD/X+Sz64wI8emMiHTAU0m7BPkBfzlshRwWSZYL8nyoMnIa1YgAgXUNdV9vaMqZMARQAewRQeMCxAFR1nK4fgxgD1PT+7roMnkj6cGzwJB6Q6i2hsNCabJDQwahWClQhWlC5VF4yf1hXJCis0oHepdQBO0gKK8VkkBQqgYg9bGM07UZYda530M8yYl6Dqh/wVJdxZAE8X2aX598PmNO42uq8L6iRkMOm0qMmqSTGTFS00oRhTJdN3b0xJjNeZDZMTLOZwdwPKp9NhdppqKpUHCPGr94JAfR1tAbyWzNr+/Nhv3E8WTSPlOOlR+/6cQCyxi3lumlSLLTOBMp0XbLIyL/Ox1wqlbYucT1moTy5ZSyPMo2MJtuIgNpSCGNmJZVv5Rce1VNIoFKs+kQnuj9MKAOuwMaNH2dZdPPXhr5qCKh1Gy1QWvK1fzU8HvW6y5UqKMykSK/QVOUc8IX0eEuiikI+ubtXyAsA+eWJ7mzdaWQ0VwP11h1M5bjrCeiSAuxBXpvNfqGidyzhEDaXHFYBmQPKiEfT0AKnCoRaEhCWBtpUHaNrwaHbz9ffyusNHZIHBZTtUbATO9zGrC7Kt4e+jVjXPA2LlqzSkoUFkmVRBXySc2u0biaqlTGhneha3nyLphiSSiKNKsuSBXMMPrW1tYKBKSphw5TMXDRS2e0yjHZ+aJR/o8pK7V039Oe0r4NXLZJoX0cZr1O3qW1vMxKFc95ac1lcgHc0Mao+iIkhUaZA044jlvUIKwhIAXtDts6mfFtHtKkDVyM8KV6dLGIYP8zDtvRxmD/0tvThzR+1S+GdvuYPnRhj1Js/JdYJadRUzkwjZyCquKCB43+pDqcmlJFtUXUdvrYCr53wMQmwl0Eg4Yo/XsiVyEPVt4Ogp9LHm8Go/aZAMpR82TwML/ytAmPYbD/iZSCgHs8yd84gYuUpn8p810LrYqsqazjsV2KDb27xL8EuNpcjZ/jmIRz6ZeQ54CAzRViaHDCjXHENsnG0R05dcdtDQ5S6dDmzwxA+AeailqFSXRSDsp4YpeAYNDvZEKku9K+qyJFy6P36i9jfKh8i4eMM/cjNW1Flk0xnZAPPikZX/5hwKf9R/ir0YeumQbmDXbdrRhDnuHhr409mAd67Ym4B2xsw0TD69ReSTYS3VnFK/S7brj/69G/2iKjUk21o9aoGm+A3lVqhwBQR+Tu2LKrCN4a+Cy9/ONC/AkrnDE//6uMpndNQKDDHmuS2a7fZYsB4GyQseTtcXcrKSHYjydVcCoN3yTRuRsqs/a7XYXO3VbHl0atP8bunGv0NXQEUH6SxcTiIQXmwQbULu88KKVW0OywOsmXh/mxzVX61BXcMQlfEl1Fz9EtG9uN2D5TTP+RgFjExi7IX4WIGePCSgro8pF2EX8uX2kZKhxB5DwtH0M5KOhlUbVlqmRnVWb1Bm0GO296VrBFvYVQQTpmFAS2TTNHsyWgKMCKqs9P6GRFxIaQGE6IfIVAQWcZvhmtnTRxeDzdOpTwCskIdUCkDyQL5WECYyAa6lfs1x1BurnWdhZHRGNXMOgedvYcZ5xzUdMWGyVzgUaNSOLDQ9CUCoCQT42qSQtSSE1ZUJcVP1mo9LB92UOoLine truncated
@@ -6,7 +6,7 @@
  "scripts": {
    "build": "npm run clean && webpack --progress --colors --bail",
    "clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
-    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
+    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1) [skip ci]\"",
    "prune": "./prune-gh-pages.sh",
    "i18n:push": "tx-push-src scratch-editor interface translations/en.json",
    "i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/ && npm run i18n:push",
@@ -44,7 +44,7 @@
    "babel-loader": "^8.0.4",
    "base64-loader": "1.0.0",
    "bowser": "1.9.4",
-    "chromedriver": "78.0.1",
+    "chromedriver": "83.0.0",
    "classnames": "2.2.6",
    "computed-style-to-inline-style": "3.0.0",
    "copy-webpack-plugin": "^4.5.1",
@@ -78,9 +78,9 @@
    "lodash.pick": "4.4.0",
    "lodash.throttle": "4.0.1",
    "minilog": "3.1.0",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.3",
    "omggif": "1.0.9",
-    "papaparse": "4.6.2",
+    "papaparse": "5.1.1",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-simple-vars": "^5.0.1",
@@ -108,14 +108,14 @@
    "redux-mock-store": "^1.2.3",
    "redux-throttle": "0.1.1",
    "rimraf": "^2.6.1",
-    "scratch-audio": "0.1.0-prerelease.20190925183642",
-    "scratch-l10n": "3.6.20191120161253",
-    "scratch-blocks": "0.1.0-prerelease.1574180945",
-    "scratch-paint": "0.2.0-prerelease.20191114200704",
-    "scratch-render": "0.1.0-prerelease.20191106204814",
-    "scratch-storage": "1.3.2",
-    "scratch-svg-renderer": "0.2.0-prerelease.20191104164753",
-    "scratch-vm": "0.2.0-prerelease.20191119203901",
+    "scratch-audio": "0.1.0-prerelease.20200528195344",
+    "scratch-blocks": "0.1.0-prerelease.20200617163252",
+    "scratch-l10n": "3.10.20200617210158",
+    "scratch-paint": "0.2.0-prerelease.20200615150428",
+    "scratch-render": "0.1.0-prerelease.20200617185826",
+    "scratch-storage": "1.3.3",
+    "scratch-svg-renderer": "0.2.0-prerelease.20200610220938",
+    "scratch-vm": "0.2.0-prerelease.20200618162938",
    "selenium-webdriver": "3.6.0",
    "startaudiocontext": "1.2.1",
    "style-loader": "^0.23.0",
@@ -140,7 +140,8 @@
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
+      "editor-msgs(\\.js)?$": "<rootDir>/test/__mocks__/editor-msgs-mock.js"
    }
  }
 }
@@ -15,6 +15,7 @@
    padding-right: 1rem;
    margin-bottom: 7px;
    min-height: 1.5rem;
+    pointer-events: all;
 }

 .alert.warn {
@@ -309,6 +309,7 @@ $fade-out-distance: 15px;
    z-index: $z-index-alerts;
    position: absolute;
    margin-top: 53px;
+    pointer-events: none;
 }

 /*
@@ -89,6 +89,7 @@ const GUIComponent = props => {
        loading,
        logo,
        renderLogin,
+        onClickAbout,
        onClickAccountNav,
        onCloseAccountNav,
        onLogOut,
@@ -105,6 +106,7 @@ const GUIComponent = props => {
        onRequestCloseTelemetryModal,
        onSeeCommunity,
        onShare,
+        onShowPrivacyPolicy,
        onTelemetryModalCancel,
        onTelemetryModalOptIn,
        onTelemetryModalOptOut,
@@ -162,6 +164,7 @@ const GUIComponent = props => {
                        onOptIn={onTelemetryModalOptIn}
                        onOptOut={onTelemetryModalOptOut}
                        onRequestClose={onRequestCloseTelemetryModal}
+                        onShowPrivacyPolicy={onShowPrivacyPolicy}
                    />
                ) : null}
                {loading ? (
@@ -218,6 +221,7 @@ const GUIComponent = props => {
                    logo={logo}
                    renderLogin={renderLogin}
                    showComingSoon={showComingSoon}
+                    onClickAbout={onClickAbout}
                    onClickAccountNav={onClickAccountNav}
                    onClickLogo={onClickLogo}
                    onCloseAccountNav={onCloseAccountNav}
@@ -388,6 +392,7 @@ GUIComponent.propTypes = {
    onActivateCostumesTab: PropTypes.func,
    onActivateSoundsTab: PropTypes.func,
    onActivateTab: PropTypes.func,
+    onClickAbout: PropTypes.func,
    onClickAccountNav: PropTypes.func,
    onClickLogo: PropTypes.func,
    onCloseAccountNav: PropTypes.func,
@@ -399,6 +404,7 @@ GUIComponent.propTypes = {
    onRequestCloseTelemetryModal: PropTypes.func,
    onSeeCommunity: PropTypes.func,
    onShare: PropTypes.func,
+    onShowPrivacyPolicy: PropTypes.func,
    onTabSelect: PropTypes.func,
    onTelemetryModalCancel: PropTypes.func,
    onTelemetryModalOptIn: PropTypes.func,
@@ -49,21 +49,35 @@ const getAssetTypeForFileExtension = function (fileExtension) {
 };

 /**
- * Figure out an `imageSource` (URI or asset ID & type) for a library item's icon.
+ * Figure out one or more icon(s) for a library item.
+ * If it's an animated thumbnail, this will return an array of `imageSource`.
+ * Otherwise it'll return just one `imageSource`.
 * @param {object} item - either a library item or one of a library item's costumes.
- * @returns {object} - an `imageSource` ready to be passed to a `ScratchImage`.
+ *   The latter is used internally as part of processing an animated thumbnail.
+ * @returns {LibraryItem.PropTypes.icons} - an `imageSource` or array of them, ready for `LibraryItem` & `ScratchImage`
 */
-const getItemImageSource = function (item) {
+const getItemIcons = function (item) {
+    const costumes = (item.json && item.json.costumes) || item.costumes;
+    if (costumes) {
+        return costumes.map(getItemIcons);
+    }
+
    if (item.rawURL) {
        return {
            uri: item.rawURL
        };
    }

-    // TODO: adjust libraries to be more storage-friendly; don't use split() here.
-    const md5 = item.md5 || item.baseLayerMD5;
-    if (md5) {
-        const [assetId, fileExtension] = md5.split('.');
+    if (item.assetId && item.dataFormat) {
+        return {
+            assetId: item.assetId,
+            assetType: getAssetTypeForFileExtension(item.dataFormat)
+        };
+    }
+
+    const md5ext = item.md5ext || item.md5 || item.baseLayerMD5;
+    if (md5ext) {
+        const [assetId, fileExtension] = md5ext.split('.');
        return {
            assetId: assetId,
            assetType: getAssetTypeForFileExtension(fileExtension)
@@ -251,8 +265,7 @@ class LibraryComponent extends React.Component {
                    ref={this.setFilteredDataRef}
                >
                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => {
-                        const iconSource = getItemImageSource(dataItem);
-                        const icons = dataItem.json && dataItem.json.costumes.map(getItemImageSource);
+                        const icons = getItemIcons(dataItem);
                        return (<LibraryItem
                            bluetoothRequired={dataItem.bluetoothRequired}
                            collaborator={dataItem.collaborator}
@@ -261,7 +274,6 @@ class LibraryComponent extends React.Component {
                            extensionId={dataItem.extensionId}
                            featured={dataItem.featured}
                            hidden={dataItem.hidden}
-                            iconSource={iconSource}
                            icons={icons}
                            id={index}
                            insetIconURL={dataItem.insetIconURL}
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M10 2c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm-.072 10.42c-.256 0-.472.076-.648.227-.176.151-.264.338-.264.56 0 .25.091.445.273.584.182.139.395.209.639.209.236 0 .444-.07.624-.211s.27-.335.27-.581c0-.222-.086-.409-.258-.56-.172-.151-.384-.227-.636-.227zm.144-6.42c-.624 0-1.17.113-1.638.338-.468.225-.824.51-1.068.853-.244.343-.366.683-.366 1.017 0 .162.077.313.231.452.154.139.343.209.567.209.38 0 .638-.199.774-.597.144-.38.32-.668.528-.864.208-.196.532-.293.972-.293.376 0 .683.097.921.291.238.194.357.432.357.713 0 .144-.039.278-.117.402-.078.123-.174.235-.288.336-.114.1-.299.249-.555.446-.292.225-.524.42-.696.584-.172.164-.31.354-.414.571-.104.217-.156.473-.156.769 0 .236.071.414.213.534.142.12.317.18.525.18.4 0 .638-.183.714-.55l.099-.362.093-.206.183-.227.327-.288c.492-.387.833-.663 1.023-.827.19-.164.354-.358.492-.584.138-.225.207-.488.207-.787 0-.38-.121-.733-.363-1.057-.242-.324-.585-.58-1.029-.769-.444-.188-.956-.283-1.536-.283z" id="a"/></defs><g transform="translate(-2 -2)" fill="none"><mask><use xlink:href="#a"/></mask><use fill="#fff" xlink:href="#a"/></g></svg>
@@ -218,3 +218,9 @@
 .mystuff > a {
  background-image: url("/images/mystuff.png");
 }
+
+.about-icon {
+    height: 1.25rem;
+    margin: 0.5rem;
+    vertical-align: middle;
+}
@@ -69,6 +69,7 @@ import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
+import aboutIcon from './icon--about.svg';

 import scratchLogo from './scratch-logo.svg';

@@ -141,6 +142,19 @@ MenuItemTooltip.propTypes = {
    isRtl: PropTypes.bool
 };

+const AboutButton = props => (
+    <Button
+        className={classNames(styles.menuBarItem, styles.hoverable)}
+        iconClassName={styles.aboutIcon}
+        iconSrc={aboutIcon}
+        onClick={props.onClick}
+    />
+);
+
+AboutButton.propTypes = {
+    onClick: PropTypes.func.isRequired
+};
+
 class MenuBar extends React.Component {
    constructor (props) {
        super(props);
@@ -311,6 +325,8 @@ class MenuBar extends React.Component {
                {remixMessage}
            </Button>
        );
+        // Show the About button only if we have a handler for it (like in the desktop app)
+        const aboutButton = this.props.onClickAbout ? <AboutButton onClick={this.props.onClickAbout} /> : null;
        return (
            <Box
                className={classNames(
@@ -689,6 +705,8 @@ class MenuBar extends React.Component {
                        </React.Fragment>
                    )}
                </div>
+
+                {aboutButton}
            </Box>
        );
    }
@@ -722,6 +740,7 @@ MenuBar.propTypes = {
    locale: PropTypes.string.isRequired,
    loginMenuOpen: PropTypes.bool,
    logo: PropTypes.string,
+    onClickAbout: PropTypes.func,
    onClickAccount: PropTypes.func,
    onClickEdit: PropTypes.func,
    onClickFile: PropTypes.func,
@@ -94,7 +94,6 @@ class ScratchImage extends React.PureComponent {
    }
    render () {
        const {
-            src: _src,
            imageSource: _imageSource,
            ...imgProps
        } = this.props;
@@ -109,8 +108,8 @@ class ScratchImage extends React.PureComponent {
                        ScratchImage.loadPendingImages();
                        return (
                            <img
-                                src={this.state.imageURI}
-                                {...imgProps}
+                                {...imgProps} // do this first in case it contains `src`
+                                src={this.state.imageURI} // overrides imgProps.src if present
                            />
                        );
                    }
@@ -66,7 +66,6 @@

    overflow: hidden;
    display: flex;
-    align-items: center;
    justify-content: center;
 }

@@ -133,7 +132,6 @@ to adjust for the border using a different method */
 }

 .frame {
-    box-sizing: content-box !important;
    background: $motion-transparent;
    border: 2px solid $motion-primary;
    border-radius: 0.5rem;
@@ -101,6 +101,9 @@ class TelemetryModal extends React.PureComponent {
                            privacyPolicyLink: (<a
                                className={styles.privacyPolicyLink}
                                href="https://scratch.mit.edu/privacy_policy/"
+                                onClick={this.props.onShowPrivacyPolicy}
+                                target="_blank"
+                                rel="noopener noreferrer"
                            >
                                <FormattedMessage {...messages.privacyPolicyLink} />
                            </a>)
@@ -134,7 +137,8 @@ TelemetryModal.propTypes = {
    onCancel: PropTypes.func,
    onOptIn: PropTypes.func.isRequired,
    onOptOut: PropTypes.func.isRequired,
-    onRequestClose: PropTypes.func
+    onRequestClose: PropTypes.func,
+    onShowPrivacyPolicy: PropTypes.func
 };

 export default injectIntl(TelemetryModal);
@@ -338,7 +338,7 @@ class Blocks extends React.Component {
            const stageCostumes = stage.getCostumes();
            const targetCostumes = target.getCostumes();
            const targetSounds = target.getSounds();
-            const dynamicBlocksXML = this.props.vm.runtime.getBlocksXML();
+            const dynamicBlocksXML = this.props.vm.runtime.getBlocksXML(target);
            return makeToolboxXML(target.isStage, target.id, dynamicBlocksXML,
                targetCostumes[targetCostumes.length - 1].name,
                stageCostumes[stageCostumes.length - 1].name,
@@ -21,6 +21,7 @@ class LibraryItem extends React.PureComponent {
            'startRotatingIcons',
            'stopRotatingIcons'
        ]);
+        this.hasIconsArray = Array.isArray(props.icons);
        this.state = {
            iconIndex: 0,
            isRotatingIcon: false
@@ -53,7 +54,7 @@ class LibraryItem extends React.PureComponent {
        // only show hover effects on the item if not showing a play button
        if (!this.props.showPlayButton) {
            this.props.onMouseEnter(this.props.id);
-            if (this.props.icons && this.props.icons.length) {
+            if (this.hasIconsArray) {
                this.stopRotatingIcons();
                this.setState({
                    isRotatingIcon: true
@@ -65,7 +66,7 @@ class LibraryItem extends React.PureComponent {
        // only show hover effects on the item if not showing a play button
        if (!this.props.showPlayButton) {
            this.props.onMouseLeave(this.props.id);
-            if (this.props.icons && this.props.icons.length) {
+            if (this.hasIconsArray) {
                this.setState({
                    isRotatingIcon: false
                }, this.stopRotatingIcons);
@@ -92,13 +93,18 @@ class LibraryItem extends React.PureComponent {
        this.setState({iconIndex: nextIconIndex});
    }
    curIconSource () {
-        if (this.props.icons &&
-            this.state.isRotatingIcon &&
-            this.state.iconIndex < this.props.icons.length &&
-            this.props.icons[this.state.iconIndex]) {
-            return this.props.icons[this.state.iconIndex];
+        if (this.hasIconsArray) {
+            if (this.state.isRotatingIcon &&
+                this.state.iconIndex < this.props.icons.length &&
+                this.props.icons[this.state.iconIndex]) {
+                // multiple icons, currently animating: show current frame
+                return this.props.icons[this.state.iconIndex];
+            }
+            // multiple icons, not currently animating: show first frame
+            return this.props.icons[0];
        }
-        return this.props.iconSource;
+        // single icon
+        return this.props.icons;
    }
    render () {
        const iconSource = this.curIconSource();
@@ -142,8 +148,10 @@ LibraryItem.propTypes = {
    extensionId: PropTypes.string,
    featured: PropTypes.bool,
    hidden: PropTypes.bool,
-    iconSource: LibraryItemComponent.propTypes.iconSource, // single icon
-    icons: PropTypes.arrayOf(LibraryItemComponent.propTypes.iconSource), // rotating icons
+    icons: PropTypes.oneOfType([
+        LibraryItemComponent.propTypes.iconSource, // single icon
+        PropTypes.arrayOf(LibraryItemComponent.propTypes.iconSource) // rotating icons
+    ]),
    id: PropTypes.number.isRequired,
    insetIconURL: PropTypes.string,
    internetConnectionRequired: PropTypes.bool,
@@ -6,7 +6,12 @@ import VM from 'scratch-vm';

 import {connect} from 'react-redux';

-import {computeChunkedRMS, encodeAndAddSoundToVM, SOUND_BYTE_LIMIT} from '../lib/audio/audio-util.js';
+import {
+    computeChunkedRMS,
+    encodeAndAddSoundToVM,
+    downsampleIfNeeded,
+    dropEveryOtherSample
+} from '../lib/audio/audio-util.js';
 import AudioEffects from '../lib/audio/audio-effects.js';
 import SoundEditorComponent from '../components/sound-editor/sound-editor.jsx';
 import AudioBufferPlayer from '../lib/audio/audio-buffer-player.js';
@@ -39,7 +44,8 @@ class SoundEditor extends React.Component {
            'paste',
            'handleKeyPress',
            'handleContainerClick',
-            'setRef'
+            'setRef',
+            'resampleBufferToRate'
        ]);
        this.state = {
            copyBuffer: null,
@@ -132,45 +138,32 @@ class SoundEditor extends React.Component {
        });
    }
    submitNewSamples (samples, sampleRate, skipUndo) {
-        // Encode the new sound into a wav so that it can be stored
-        let wavBuffer = null;
-        try {
-            wavBuffer = WavEncoder.encode.sync({
-                sampleRate: sampleRate,
-                channelData: [samples]
+        return downsampleIfNeeded({samples, sampleRate}, this.resampleBufferToRate)
+            .then(({samples: newSamples, sampleRate: newSampleRate}) =>
+                WavEncoder.encode({
+                    sampleRate: newSampleRate,
+                    channelData: [newSamples]
+                }).then(wavBuffer => {
+                    if (!skipUndo) {
+                        this.redoStack = [];
+                        if (this.undoStack.length >= UNDO_STACK_SIZE) {
+                            this.undoStack.shift(); // Drop the first element off the array
+                        }
+                        this.undoStack.push(this.getUndoItem());
+                    }
+                    this.resetState(newSamples, newSampleRate);
+                    this.props.vm.updateSoundBuffer(
+                        this.props.soundIndex,
+                        this.audioBufferPlayer.buffer,
+                        new Uint8Array(wavBuffer));
+                    return true; // Edit was successful
+                })
+            )
+            .catch(e => {
+                // Encoding failed, or the sound was too large to save so edit is rejected
+                log.error(`Encountered error while trying to encode sound update: ${e}`);
+                return false; // Edit was not applied
            });
-
-            if (wavBuffer.byteLength > SOUND_BYTE_LIMIT) {
-                // Cancel the sound update by setting to null
-                wavBuffer = null;
-                log.error(`Refusing to encode sound larger than ${SOUND_BYTE_LIMIT} bytes`);
-            }
-        } catch (e) {
-            // This error state is mostly for the mock sounds used during testing.
-            // Any incorrect sound buffer trying to get interpretd as a Wav file
-            // should yield this error.
-            // This can also happen if the sound is too be allocated in memory.
-            log.error(`Encountered error while trying to encode sound update: ${e}`);
-        }
-
-        // Do not submit sound if it could not be encoded (i.e. if too large)
-        if (wavBuffer) {
-            if (!skipUndo) {
-                this.redoStack = [];
-                if (this.undoStack.length >= UNDO_STACK_SIZE) {
-                    this.undoStack.shift(); // Drop the first element off the array
-                }
-                this.undoStack.push(this.getUndoItem());
-            }
-            this.resetState(samples, sampleRate);
-            this.props.vm.updateSoundBuffer(
-                this.props.soundIndex,
-                this.audioBufferPlayer.buffer,
-                new Uint8Array(wavBuffer));
-
-            return true; // Update succeeded
-        }
-        return false; // Update failed
    }
    handlePlay () {
        this.audioBufferPlayer.stop();
@@ -209,13 +202,15 @@ class SoundEditor extends React.Component {
            newSamples.set(firstPart, 0);
            newSamples.set(secondPart, firstPart.length);
        }
-        this.submitNewSamples(newSamples, sampleRate);
-        this.setState({
-            trimStart: null,
-            trimEnd: null
+        this.submitNewSamples(newSamples, sampleRate).then(() => {
+            this.setState({
+                trimStart: null,
+                trimEnd: null
+            });
        });
    }
    handleDeleteInverse () {
+        // Delete everything outside of the trimmers
        const {samples, sampleRate} = this.copyCurrentBuffer();
        const sampleCount = samples.length;
        const startIndex = Math.floor(this.state.trimStart * sampleCount);
@@ -224,10 +219,13 @@ class SoundEditor extends React.Component {
        if (clippedSamples.length === 0) {
            clippedSamples = new Float32Array(1);
        }
-        this.submitNewSamples(clippedSamples, sampleRate);
-        this.setState({
-            trimStart: null,
-            trimEnd: null
+        this.submitNewSamples(clippedSamples, sampleRate).then(success => {
+            if (success) {
+                this.setState({
+                    trimStart: null,
+                    trimEnd: null
+                });
+            }
        });
    }
    handleUpdateTrim (trimStart, trimEnd) {
@@ -257,14 +255,15 @@ class SoundEditor extends React.Component {
        effects.process((renderedBuffer, adjustedTrimStart, adjustedTrimEnd) => {
            const samples = renderedBuffer.getChannelData(0);
            const sampleRate = renderedBuffer.sampleRate;
-            const success = this.submitNewSamples(samples, sampleRate);
-            if (success) {
-                if (this.state.trimStart === null) {
-                    this.handlePlay();
-                } else {
-                    this.setState({trimStart: adjustedTrimStart, trimEnd: adjustedTrimEnd}, this.handlePlay);
+            this.submitNewSamples(samples, sampleRate).then(success => {
+                if (success) {
+                    if (this.state.trimStart === null) {
+                        this.handlePlay();
+                    } else {
+                        this.setState({trimStart: adjustedTrimStart, trimEnd: adjustedTrimEnd}, this.handlePlay);
+                    }
                }
-            }
+            });
        });
    }
    tooLoud () {
@@ -287,16 +286,22 @@ class SoundEditor extends React.Component {
        this.redoStack.push(this.getUndoItem());
        const {samples, sampleRate, trimStart, trimEnd} = this.undoStack.pop();
        if (samples) {
-            this.submitNewSamples(samples, sampleRate, true);
-            this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+            return this.submitNewSamples(samples, sampleRate, true).then(success => {
+                if (success) {
+                    this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+                }
+            });
        }
    }
    handleRedo () {
        const {samples, sampleRate, trimStart, trimEnd} = this.redoStack.pop();
        if (samples) {
            this.undoStack.push(this.getUndoItem());
-            this.submitNewSamples(samples, sampleRate, true);
-            this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+            return this.submitNewSamples(samples, sampleRate, true).then(success => {
+                if (success) {
+                    this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+                }
+            });
        }
    }
    handleCopy () {
@@ -322,25 +327,39 @@ class SoundEditor extends React.Component {
        });
    }
    resampleBufferToRate (buffer, newRate) {
-        return new Promise(resolve => {
-            if (window.OfflineAudioContext) {
-                const sampleRateRatio = newRate / buffer.sampleRate;
-                const newLength = sampleRateRatio * buffer.samples.length;
-                const offlineContext = new window.OfflineAudioContext(1, newLength, newRate);
-                const source = offlineContext.createBufferSource();
-                const audioBuffer = offlineContext.createBuffer(1, buffer.samples.length, buffer.sampleRate);
-                audioBuffer.getChannelData(0).set(buffer.samples);
-                source.buffer = audioBuffer;
-                source.connect(offlineContext.destination);
-                source.start();
-                offlineContext.startRendering();
-                offlineContext.oncomplete = ({renderedBuffer}) => {
-                    resolve({
-                        samples: renderedBuffer.getChannelData(0),
-                        sampleRate: newRate
-                    });
-                };
+        return new Promise((resolve, reject) => {
+            const sampleRateRatio = newRate / buffer.sampleRate;
+            const newLength = sampleRateRatio * buffer.samples.length;
+            let offlineContext;
+            // Try to use either OfflineAudioContext or webkitOfflineAudioContext to resample
+            // The constructors will throw if trying to resample at an unsupported rate
+            // (e.g. Safari/webkitOAC does not support lower than 44khz).
+            try {
+                if (window.OfflineAudioContext) {
+                    offlineContext = new window.OfflineAudioContext(1, newLength, newRate);
+                } else if (window.webkitOfflineAudioContext) {
+                    offlineContext = new window.webkitOfflineAudioContext(1, newLength, newRate);
+                }
+            } catch {
+                // If no OAC available and downsampling by 2, downsample by dropping every other sample.
+                if (newRate === buffer.sampleRate / 2) {
+                    return resolve(dropEveryOtherSample(buffer));
+                }
+                return reject('Could not resample');
            }
+            const source = offlineContext.createBufferSource();
+            const audioBuffer = offlineContext.createBuffer(1, buffer.samples.length, buffer.sampleRate);
+            audioBuffer.getChannelData(0).set(buffer.samples);
+            source.buffer = audioBuffer;
+            source.connect(offlineContext.destination);
+            source.start();
+            offlineContext.startRendering();
+            offlineContext.oncomplete = ({renderedBuffer}) => {
+                resolve({
+                    samples: renderedBuffer.getChannelData(0),
+                    sampleRate: newRate
+                });
+            };
        });
    }
    paste () {
@@ -351,8 +370,11 @@ class SoundEditor extends React.Component {
            const newSamples = new Float32Array(newLength);
            newSamples.set(samples, 0);
            newSamples.set(this.state.copyBuffer.samples, samples.length);
-            this.submitNewSamples(newSamples, this.props.sampleRate, false);
-            this.handlePlay();
+            this.submitNewSamples(newSamples, this.props.sampleRate, false).then(success => {
+                if (success) {
+                    this.handlePlay();
+                }
+            });
        } else {
            // else replace the selection with the pasted sound
            const trimStartSamples = this.state.trimStart * samples.length;
@@ -371,11 +393,14 @@ class SoundEditor extends React.Component {
            const newDurationSeconds = newSamples.length / this.state.copyBuffer.sampleRate;
            const adjustedTrimStart = trimStartSeconds / newDurationSeconds;
            const adjustedTrimEnd = trimEndSeconds / newDurationSeconds;
-            this.submitNewSamples(newSamples, this.props.sampleRate, false);
-            this.setState({
-                trimStart: adjustedTrimStart,
-                trimEnd: adjustedTrimEnd
-            }, this.handlePlay);
+            this.submitNewSamples(newSamples, this.props.sampleRate, false).then(success => {
+                if (success) {
+                    this.setState({
+                        trimStart: adjustedTrimStart,
+                        trimEnd: adjustedTrimEnd
+                    }, this.handlePlay);
+                }
+            });
        }
    }
    handlePaste () {
@@ -1,10 +1,23 @@
 import GoogleAnalytics from 'react-ga';

-GoogleAnalytics.initialize(process.env.GA_ID || window.GA_ID, {
-    debug: (process.env.NODE_ENV !== 'production'),
-    titleCase: true,
-    sampleRate: (process.env.NODE_ENV === 'production') ? 100 : 0,
-    forceSSL: true
-});
+import log from './log';
+
+const GA_ID = (process.env.GA_ID || window.GA_ID);
+if (GA_ID) {
+    GoogleAnalytics.initialize(GA_ID, {
+        debug: (process.env.NODE_ENV !== 'production'),
+        titleCase: true,
+        sampleRate: (process.env.NODE_ENV === 'production') ? 100 : 0,
+        forceSSL: true
+    });
+} else {
+    log.info('Disabling GA because GA_ID is not set.');
+    window.ga = () => {
+        // The `react-ga` module calls this function to implement all Google Analytics calls. Providing an empty
+        // function effectively disables `react-ga`. This is similar to the `testModeAPI` feature of `react-ga` except
+        // that `testModeAPI` logs the arguments of every call into an array. That's nice for testing purposes but
+        // would look like a memory leak in a live program.
+    };
+}

 export default GoogleAnalytics;
@@ -59,9 +59,57 @@ const encodeAndAddSoundToVM = function (vm, samples, sampleRate, name, callback)
    });
 };

+/**
+ @typedef SoundBuffer
+ @type {Object}
+ @property {Float32Array} samples Array of audio samples
+ @property {number} sampleRate Audio sample rate
+ */
+
+/**
+ * Downsample the given buffer to try to reduce file size below SOUND_BYTE_LIMIT
+ * @param {SoundBuffer} buffer - Buffer to resample
+ * @param {function(SoundBuffer):Promise<SoundBuffer>} resampler - resampler function
+ * @returns {SoundBuffer} Downsampled buffer with half the sample rate
+ */
+const downsampleIfNeeded = (buffer, resampler) => {
+    const {samples, sampleRate} = buffer;
+    const duration = samples.length / sampleRate;
+    const encodedByteLength = samples.length * 2; /* bitDepth 16 bit */
+    // Resolve immediately if already within byte limit
+    if (encodedByteLength < SOUND_BYTE_LIMIT) {
+        return Promise.resolve({samples, sampleRate});
+    }
+    // If encodeable at 22khz, resample and call submitNewSamples again
+    if (duration * 22050 * 2 < SOUND_BYTE_LIMIT) {
+        return resampler({samples, sampleRate}, 22050);
+    }
+    // Cannot save this sound at 22khz, refuse to edit
+    // In the future we could introduce further compression here
+    return Promise.reject('Sound too large to save, refusing to edit');
+};
+
+/**
+ * Drop every other sample of an audio buffer as a last-resort way of downsampling.
+ * @param {SoundBuffer} buffer - Buffer to resample
+ * @returns {SoundBuffer} Downsampled buffer with half the sample rate
+ */
+const dropEveryOtherSample = buffer => {
+    const newLength = Math.floor(buffer.samples.length / 2);
+    const newSamples = new Float32Array(newLength);
+    for (let i = 0; i < newLength; i++) {
+        newSamples[i] = buffer.samples[i * 2];
+    }
+    return {
+        samples: newSamples,
+        sampleRate: buffer.sampleRate / 2
+    };
+};
+
 export {
    computeRMS,
    computeChunkedRMS,
    encodeAndAddSoundToVM,
-    SOUND_BYTE_LIMIT
+    downsampleIfNeeded,
+    dropEveryOtherSample
 };
@@ -2,10 +2,22 @@ import StartAudioContext from 'startaudiocontext';
 import bowser from 'bowser';

 let AUDIO_CONTEXT;
-if (!bowser.msie) {
-    AUDIO_CONTEXT = new (window.AudioContext || window.webkitAudioContext)();

-    StartAudioContext(AUDIO_CONTEXT);
+if (!bowser.msie) {
+    /**
+     * AudioContext can be initialized only when user interaction event happens
+     */
+    const event =
+        typeof document.ontouchstart === 'undefined' ?
+            'mousedown' :
+            'touchstart';
+    const initAudioContext = () => {
+        document.removeEventListener(event, initAudioContext);
+        AUDIO_CONTEXT = new (window.AudioContext ||
+            window.webkitAudioContext)();
+        StartAudioContext(AUDIO_CONTEXT);
+    };
+    document.addEventListener(event, initAudioContext);
 }

 /**
@@ -54,13 +54,10 @@ const cloudManagerHOC = function (WrappedComponent) {
        canUseCloud (props) {
            return !!(props.cloudHost && props.username && props.vm && props.projectId && props.hasCloudPermission);
        }
-        shouldNotModifyCloudData (props) {
-            return (props.hasEverEnteredEditor && !props.canSave);
-        }
        shouldConnect (props) {
            return !this.isConnected() && this.canUseCloud(props) &&
                props.isShowingWithId && props.vm.runtime.hasCloudData() &&
-                !this.shouldNotModifyCloudData(props);
+                props.canModifyCloudData;
        }
        shouldDisconnect (props, prevProps) {
            return this.isConnected() &&
@@ -70,7 +67,7 @@ const cloudManagerHOC = function (WrappedComponent) {
                    (props.projectId !== prevProps.projectId) ||
                    (props.username !== prevProps.username) ||
                    // Editing someone else's project
-                    this.shouldNotModifyCloudData(props)
+                    !props.canModifyCloudData
                );
        }
        isConnected () {
@@ -102,11 +99,11 @@ const cloudManagerHOC = function (WrappedComponent) {
        render () {
            const {
                /* eslint-disable no-unused-vars */
+                canModifyCloudData,
                cloudHost,
                projectId,
                username,
                hasCloudPermission,
-                hasEverEnteredEditor,
                isShowingWithId,
                onShowCloudInfo,
                /* eslint-enable no-unused-vars */
@@ -124,23 +121,30 @@ const cloudManagerHOC = function (WrappedComponent) {
    }

    CloudManager.propTypes = {
-        canSave: PropTypes.bool.isRequired,
+        canModifyCloudData: PropTypes.bool.isRequired,
        cloudHost: PropTypes.string,
        hasCloudPermission: PropTypes.bool,
-        hasEverEnteredEditor: PropTypes.bool,
-        isShowingWithId: PropTypes.bool,
+        isShowingWithId: PropTypes.bool.isRequired,
        onShowCloudInfo: PropTypes.func,
        projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        username: PropTypes.string,
        vm: PropTypes.instanceOf(VM).isRequired
    };

-    const mapStateToProps = state => {
+    CloudManager.defaultProps = {
+        cloudHost: null,
+        hasCloudPermission: false,
+        onShowCloudInfo: () => {},
+        username: null
+    };
+
+    const mapStateToProps = (state, ownProps) => {
        const loadingState = state.scratchGui.projectState.loadingState;
        return {
-            hasEverEnteredEditor: state.scratchGui.mode.hasEverEnteredEditor,
            isShowingWithId: getIsShowingWithId(loadingState),
-            projectId: state.scratchGui.projectState.projectId
+            projectId: state.scratchGui.projectState.projectId,
+            // if you're editing someone else's project, you can't modify cloud data
+            canModifyCloudData: (!state.scratchGui.mode.hasEverEnteredEditor || ownProps.canSave)
        };
    };

@@ -8,11 +8,23 @@ export default (filename, blob) => {
        return;
    }

-    const url = window.URL.createObjectURL(blob);
-    downloadLink.href = url;
-    downloadLink.download = filename;
-    downloadLink.type = blob.type;
-    downloadLink.click();
-    window.URL.revokeObjectURL(url);
-    document.body.removeChild(downloadLink);
+    if ('download' in HTMLAnchorElement.prototype) {
+        const url = window.URL.createObjectURL(blob);
+        downloadLink.href = url;
+        downloadLink.download = filename;
+        downloadLink.type = blob.type;
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+        window.URL.revokeObjectURL(url);
+    } else {
+        // iOS Safari, open a new page and set href to data-uri
+        let popup = window.open('', '_blank');
+        const reader = new FileReader();
+        reader.onloadend = function () {
+            popup.location.href = reader.result;
+            popup = null;
+        };
+        reader.readAsDataURL(blob);
+    }
+
 };
@@ -78,7 +78,7 @@ const DropAreaHOC = function (dragTypes) {
                }
            }
            render () {
-                const componentProps = omit(this.props, ['onDrop', 'dragInfo']);
+                const componentProps = omit(this.props, ['onDrop', 'dragInfo', 'componentRef']);
                return (
                    <WrappedComponent
                        containerRef={this.setRef}
@@ -178,7 +178,7 @@
    },
    {
        "name": "Blue Sky 2 ",
-        "md5": "5a906c2f272b77f59f0ef207857a8b3a.svg",
+        "md5": "8eb8790be5507fdccf73e7c1570bbbab.svg",
        "type": "backdrop",
        "tags": [
            "outdoors",
@@ -286,7 +286,7 @@
    },
    {
        "name": "Circles",
-        "md5": "4e29033ec2b891a8f1ca21242811d403.svg",
+        "md5": "c9847be305920807c5597d81576dd0c4.svg",
        "type": "backdrop",
        "tags": [
            "patterns"
@@ -491,7 +491,7 @@
    },
    {
        "name": "Hearts",
-        "md5": "26d3418b2fbc1af2c5fea82e1c3df1db.svg",
+        "md5": "f98526ccb0eec3ac7d6c8f8ab502825e.svg",
        "type": "backdrop",
        "tags": [
            "patterns"
@@ -1050,7 +1050,7 @@
    },
    {
        "name": "Underwater 1",
-        "md5": "fb907f72b310acc8b95cbf2d2cccabc9.svg",
+        "md5": "d3344650f594bcecdf46aa4a9441badd.svg",
        "type": "backdrop",
        "tags": [
            "ocean",
@@ -1175,7 +1175,7 @@
    },
    {
        "name": "Witch House",
-        "md5": "597b9a9813fe5d8d387283138a0b8f2b.svg",
+        "md5": "30085b2d27beb5acdbe895d8b3e64b04.svg",
        "type": "backdrop",
        "tags": [
            "fantasy",
@@ -1190,7 +1190,7 @@
    },
    {
        "name": "Woods",
-        "md5": "d26cfd278999c9e37d6af75c296a58df.svg",
+        "md5": "f3eb165d6f3fd23370f97079f2e631bf.svg",
        "type": "backdrop",
        "tags": [
            "fantasy",
@@ -13,7 +13,8 @@ const loadSpanish = () =>
        .then(({esImages: imageData}) => imageData);

 const translations = {
-    es: () => loadSpanish()
+    'es': () => loadSpanish(),
+    'es-419': () => loadSpanish()
 };

 const loadImageData = locale => {
@@ -251,6 +251,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
                    if (id && this.props.onUpdateProjectThumbnail) {
                        this.storeProjectThumbnail(id);
                    }
+                    this.reportTelemetryEvent('projectDidSave');
                    return response;
                })
                .catch(err => {
@@ -291,9 +292,15 @@ const ProjectSaverHOC = function (WrappedComponent) {
         */
        // TODO make a telemetry HOC and move this stuff there
        reportTelemetryEvent (event) {
-            if (this.props.onProjectTelemetryEvent) {
-                const metadata = collectMetadata(this.props.vm, this.props.reduxProjectTitle, this.props.locale);
-                this.props.onProjectTelemetryEvent(event, metadata);
+            try {
+                if (this.props.onProjectTelemetryEvent) {
+                    const metadata = collectMetadata(this.props.vm, this.props.reduxProjectTitle, this.props.locale);
+                    this.props.onProjectTelemetryEvent(event, metadata);
+                }
+            } catch (e) {
+                log.error('Telemetry error', event, e);
+                // This is intentionally fire/forget because a failure
+                // to report telemetry should not block saving
            }
        }

@@ -433,7 +440,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
        onShowCreatingRemixAlert: () => showAlertWithTimeout(dispatch, 'creatingRemix'),
        onShowSaveSuccessAlert: () => showAlertWithTimeout(dispatch, 'saveSuccess'),
        onShowSavingAlert: () => showAlertWithTimeout(dispatch, 'saving'),
-        onUpdatedProject: (projectId, loadingState) => dispatch(doneUpdatingProject(projectId, loadingState)),
+        onUpdatedProject: loadingState => dispatch(doneUpdatingProject(loadingState)),
        setAutoSaveTimeoutId: id => dispatch(setAutoSaveTimeoutId(id))
    });
    // Allow incoming props to override redux-provided props. Used to mock in tests.
@@ -4,8 +4,8 @@ const randomizeSpritePosition = spriteObject => {
    const randomY = Math.floor((100 * Math.random()) - 50);
    if (spriteObject.hasOwnProperty('json')) {
        // Library sprite object
-        spriteObject.json.scratchX = randomX;
-        spriteObject.json.scratchY = randomY;
+        spriteObject.json.x = randomX;
+        spriteObject.json.y = randomY;
    } else if (spriteObject.hasOwnProperty('x') && spriteObject.hasOwnProperty('y')) {
        // Scratch 3 sprite object
        spriteObject.x = randomX;
@@ -26,7 +26,9 @@ const supportedBrowser = () => {
 *   always returns false
 */

-const recommendedBrowser = () => !bowser.isUnsupportedBrowser(minVersions, true);
+const recommendedBrowser = () =>
+    !bowser.isUnsupportedBrowser(minVersions, true) ||
+    window.navigator.userAgent.toLowerCase().indexOf('googlebot') !== -1;

 export {
    supportedBrowser as default,
@@ -3,7 +3,10 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';

-import {getIsShowingWithoutId} from '../reducers/project-state';
+import {
+    getIsAnyCreatingNewState,
+    getIsShowingWithoutId
+} from '../reducers/project-state';
 import {setProjectTitle} from '../reducers/project-title';

 const messages = defineMessages({
@@ -27,6 +30,12 @@ const TitledHOC = function (WrappedComponent) {
            if (this.props.projectTitle !== prevProps.projectTitle) {
                this.handleReceivedProjectTitle(this.props.projectTitle);
            }
+            // if project is a new default project, and has loaded,
+            if (this.props.isShowingWithoutId && prevProps.isAnyCreatingNewState) {
+                // reset title to default
+                const defaultProjectTitle = this.handleReceivedProjectTitle();
+                this.props.onUpdateProjectTitle(defaultProjectTitle);
+            }
            // if the projectTitle hasn't changed, but the reduxProjectTitle
            // HAS changed, we need to report that change to the projectTitle's owner
            if (this.props.reduxProjectTitle !== prevProps.reduxProjectTitle &&
@@ -40,11 +49,13 @@ const TitledHOC = function (WrappedComponent) {
                newTitle = this.props.intl.formatMessage(messages.defaultProjectTitle);
            }
            this.props.onChangedProjectTitle(newTitle);
+            return newTitle;
        }
        render () {
            const {
                /* eslint-disable no-unused-vars */
                intl,
+                isAnyCreatingNewState,
                isShowingWithoutId,
                onChangedProjectTitle,
                // for children, we replace onUpdateProjectTitle with our own
@@ -66,6 +77,7 @@ const TitledHOC = function (WrappedComponent) {

    TitledComponent.propTypes = {
        intl: intlShape,
+        isAnyCreatingNewState: PropTypes.bool,
        isShowingWithoutId: PropTypes.bool,
        onChangedProjectTitle: PropTypes.func,
        onUpdateProjectTitle: PropTypes.func,
@@ -80,6 +92,7 @@ const TitledHOC = function (WrappedComponent) {
    const mapStateToProps = state => {
        const loadingState = state.scratchGui.projectState.loadingState;
        return {
+            isAnyCreatingNewState: getIsAnyCreatingNewState(loadingState),
            isShowingWithoutId: getIsShowingWithoutId(loadingState),
            reduxProjectTitle: state.scratchGui.projectTitle
        };
@@ -17,7 +17,7 @@ const START_AUTO_UPDATING = 'scratch-gui/project-state/START_AUTO_UPDATING';
 const START_CREATING_NEW = 'scratch-gui/project-state/START_CREATING_NEW';
 const START_ERROR = 'scratch-gui/project-state/START_ERROR';
 const START_FETCHING_NEW = 'scratch-gui/project-state/START_FETCHING_NEW';
-const START_LOADING_VM_FILE_UPLOAD = 'scratch-gui/project-state/START_LOADING_FILE_UPLOAD';
+const START_LOADING_VM_FILE_UPLOAD = 'scratch-gui/project-state/START_LOADING_VM_FILE_UPLOAD';
 const START_MANUAL_UPDATING = 'scratch-gui/project-state/START_MANUAL_UPDATING';
 const START_REMIXING = 'scratch-gui/project-state/START_REMIXING';
 const START_UPDATING_BEFORE_CREATING_COPY = 'scratch-gui/project-state/START_UPDATING_BEFORE_CREATING_COPY';
@@ -413,32 +413,31 @@ const onFetchedProjectData = (projectData, loadingState) => {
 };

 const onLoadedProject = (loadingState, canSave, success) => {
-    if (success) {
-        switch (loadingState) {
-        case LoadingState.LOADING_VM_WITH_ID:
-            return {
-                type: DONE_LOADING_VM_WITH_ID
-            };
-        case LoadingState.LOADING_VM_FILE_UPLOAD:
-            if (canSave) {
-                return {
-                    type: DONE_LOADING_VM_TO_SAVE
-                };
-            }
-            return {
-                type: DONE_LOADING_VM_WITHOUT_ID
-            };
-        case LoadingState.LOADING_VM_NEW_DEFAULT:
-            return {
-                type: DONE_LOADING_VM_WITHOUT_ID
-            };
-        default:
-            return;
+    switch (loadingState) {
+    case LoadingState.LOADING_VM_WITH_ID:
+        if (success) {
+            return {type: DONE_LOADING_VM_WITH_ID};
        }
+        // failed to load project; just keep showing current project
+        return {type: RETURN_TO_SHOWING};
+    case LoadingState.LOADING_VM_FILE_UPLOAD:
+        if (success) {
+            if (canSave) {
+                return {type: DONE_LOADING_VM_TO_SAVE};
+            }
+            return {type: DONE_LOADING_VM_WITHOUT_ID};
+        }
+        // failed to load project; just keep showing current project
+        return {type: RETURN_TO_SHOWING};
+    case LoadingState.LOADING_VM_NEW_DEFAULT:
+        if (success) {
+            return {type: DONE_LOADING_VM_WITHOUT_ID};
+        }
+        // failed to load default project; show error
+        return {type: START_ERROR};
+    default:
+        return;
    }
-    return {
-        type: RETURN_TO_SHOWING
-    };
 };

 const doneUpdatingProject = loadingState => {
@@ -14,7 +14,10 @@ export default class MockAudioEffects {
        this.buffer = buffer;
        this.name = name;
        this.process = jest.fn(done => {
-            this._finishProcessing = renderedBuffer => done(renderedBuffer, 0, 1);
+            this._finishProcessing = renderedBuffer => {
+                done(renderedBuffer, 0, 1);
+                return new Promise(resolve => setTimeout(resolve));
+            };
        });
        MockAudioEffects.instance = this;
    }
@@ -0,0 +1,3 @@
+export default {
+    en: {}
+};
@@ -19,6 +19,7 @@ class SeleniumHelper {
            'clickText',
            'clickButton',
            'clickXpath',
+            'clickBlocksCategory',
            'elementIsVisible',
            'findByText',
            'findByXpath',
@@ -28,6 +29,8 @@ class SeleniumHelper {
            'loadUri',
            'rightClickText'
        ]);
+
+        this.Key = webdriver.Key; // map Key constants, for sending special keys
    }

    elementIsVisible (element, timeoutMessage = 'elementIsVisible timed out') {
@@ -122,6 +125,17 @@ class SeleniumHelper {
        return this.findByText(text, scope).then(el => el.click());
    }

+    async clickBlocksCategory (categoryText) {
+        // The toolbox is destroyed and recreated several times, so avoid clicking on a nonexistent element and erroring
+        // out. First we wait for the block pane itself to appear, then wait 100ms for the toolbox to finish refreshing,
+        // then finally click the toolbox text.
+
+        await this.findByXpath('//div[contains(@class, "blocks_blocks")]');
+        await this.driver.sleep(100);
+        await this.clickText(categoryText, 'div[contains(@class, "blocks_blocks")]');
+        await this.driver.sleep(500); // Wait for scroll to finish
+    }
+
    rightClickText (text, scope) {
        return this.findByText(text, scope).then(el => this.driver.actions()
            .click(el, Button.RIGHT)
@@ -3,12 +3,14 @@ import SeleniumHelper from '../helpers/selenium-helper';

 const {
    clickText,
+    clickBlocksCategory,
    clickButton,
    clickXpath,
    findByText,
    findByXpath,
    getDriver,
    getLogs,
+    Key,
    loadUri,
    rightClickText,
    scope
@@ -30,8 +32,7 @@ describe('Working with the blocks', () => {
    test('Blocks report when clicked in the toolbox', async () => {
        await loadUri(uri);
        await clickText('Code');
-        await clickText('Operators', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Operators');
        await clickText('join', scope.blocksTab); // Click "join <hello> <world>" block
        await findByText('apple banana', scope.reportedValue); // Tooltip with result
        const logs = await getLogs();
@@ -40,14 +41,13 @@ describe('Working with the blocks', () => {

    test('Switching sprites updates the block menus', async () => {
        await loadUri(uri);
-        await clickText('Sound', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Sound');
        // "Meow" sound block should be visible
        await findByText('Meow', scope.blocksTab);
        await clickText('Backdrops'); // Switch to the backdrop
        // Now "pop" sound block should be visible and motion blocks hidden
        await findByText('pop', scope.blocksTab);
-        await clickText('Motion', scope.blocksTab);
+        await clickBlocksCategory('Motion');
        await findByText('Stage selected: no motion blocks');

        const logs = await getLogs();
@@ -57,8 +57,7 @@ describe('Working with the blocks', () => {
    test('Creating variables', async () => {
        await loadUri(uri);
        await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');

        // Expect a default variable "my variable" to be visible
        await clickText('my\u00A0variable', scope.blocksTab);
@@ -74,8 +73,7 @@ describe('Working with the blocks', () => {
        await clickButton('OK');

        // Make sure reporting works on a new variable
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');
        await clickText('score', scope.blocksTab);
        await findByText('0', scope.reportedValue); // Tooltip with result

@@ -99,8 +97,7 @@ describe('Working with the blocks', () => {
    test('Creating a list', async () => {
        await loadUri(uri);
        await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');

        await clickText('Make a List');
        let el = await findByXpath("//input[@name='New list name:']");
@@ -132,8 +129,7 @@ describe('Working with the blocks', () => {

    test('Custom procedures', async () => {
        await loadUri(uri);
-        await clickText('My Blocks');
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('My Blocks');
        await clickText('Make a Block');
        // Click on the "add an input" buttons
        await clickText('number or text', scope.modal);
@@ -164,8 +160,7 @@ describe('Working with the blocks', () => {
    test('Record option from sound block menu opens sound recorder', async () => {
        await loadUri(uri);
        await clickText('Code');
-        await clickText('Sound', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Sound');
        await clickText('Meow', scope.blocksTab); // Click "play sound <Meow> until done" block
        await clickText('record'); // Click "record..." option in the block's sound menu
        // Access has been force denied, so close the alert that comes up
@@ -185,11 +180,14 @@ describe('Working with the blocks', () => {
        await clickText('costume2', scope.costumesTab);
        const el = await findByXpath("//input[@value='costume2']");
        await el.sendKeys('newname');
+        await el.sendKeys(Key.ENTER);
+        // wait until the updated costume appears in costume item list panel
+        await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
+            "//div[contains(text(), 'newname')]");

        // Make sure it is updated in the block menu
        await clickText('Code');
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
        await clickText('newname', scope.blocksTab);
    });

@@ -201,22 +199,24 @@ describe('Working with the blocks', () => {
        await clickText('costume2', scope.costumesTab);
        const el = await findByXpath("//input[@value='costume2']");
        await el.sendKeys('<NewCostume>');
+        await el.sendKeys(Key.ENTER);
+        // wait until the updated costume appears in costume item list panel
+        await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
+            "//div[contains(text(), '<NewCostume>')]");

        // Make sure it is updated in the block menu
        await clickText('Code');
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
        await clickText('<NewCostume>', scope.blocksTab);

-        await clickText('Sound', scope.blocksTab);
+        await clickBlocksCategory('Sound');
    });

    test('Adding costumes DOES update the default costume name in the toolbox', async () => {
        await loadUri(uri);

        // By default, costume2 is in the costume tab
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
        await clickText('costume2', scope.blocksTab);

        // Also check that adding a new costume does update the list
@@ -226,6 +226,9 @@ describe('Working with the blocks', () => {
            .perform();
        await driver.sleep(500); // Wait for thermometer menu to come up
        await clickXpath('//button[@aria-label="Paint"]');
+        // wait until the new costume appears in costume item list panel
+        await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
+            "//div[contains(text(), 'costume3')]");
        await clickText('costume3', scope.costumesTab);
        // Check that the menu has been updated
        await clickText('Code');
@@ -233,14 +236,16 @@ describe('Working with the blocks', () => {
    });

    // Skipped because it was flakey on travis, but seems to run locally ok
-    test.skip('Adding a sound DOES update the default sound name in the toolbox', async () => {
+    test('Adding a sound DOES update the default sound name in the toolbox', async () => {
        await loadUri(uri);
        await clickText('Sounds');
        await clickXpath('//button[@aria-label="Choose a Sound"]');
        await clickText('A Bass', scope.modal); // Should close the modal
+        // wait until the selected sound appears in sounds item list panel
+        await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
+            "//div[contains(text(), 'A Bass')]");
        await clickText('Code');
-        await clickText('Sound', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Sound');
        await clickText('A\u00A0Bass', scope.blocksTab); // Need &nbsp; for block text
    });

@@ -249,15 +254,13 @@ describe('Working with the blocks', () => {
        const playerUri = path.resolve(__dirname, '../../build/player.html');
        await loadUri(playerUri);
        await clickText('See inside');
-        await clickText('Variables');
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Variables');
        await clickText('my\u00A0variable');

        await clickText('See Project Page');
        await clickText('See inside');

-        await clickText('Variables');
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Variables');
        await clickText('my\u00A0variable');
    });

@@ -266,8 +269,7 @@ describe('Working with the blocks', () => {
        await loadUri(uri);
        await clickText('Costumes');
        await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll
+        await clickBlocksCategory('Variables');
        await clickText('Make a List');
        const el = await findByXpath("//input[@name='New list name:']");
        await el.sendKeys('list1');
@@ -25,16 +25,12 @@ describe('Localization', () => {
    });

    test('Switching languages', async () => {
-        await driver.quit();
-        driver = getDriver();
        await loadUri(uri);

        // Add a sprite to make sure it stays when switching languages
-        await clickText('Costumes');
        await clickXpath('//button[@aria-label="Choose a Sprite"]');
        await clickText('Apple', scope.modal); // Closes modal

-        await clickText('Code');
        await clickXpath('//*[@aria-label="language selector"]');
        await clickText('Deutsch');
        await new Promise(resolve => setTimeout(resolve, 1000)); // wait for blocks refresh
@@ -0,0 +1,45 @@
+import path from 'path';
+import SeleniumHelper from '../helpers/selenium-helper';
+
+const {
+    clickText,
+    clickXpath,
+    findByXpath,
+    getDriver,
+    Key,
+    loadUri
+} = new SeleniumHelper();
+
+const uri = path.resolve(__dirname, '../../build/index.html');
+
+let driver;
+
+describe('Project state', () => {
+    beforeAll(() => {
+        driver = getDriver();
+    });
+
+    afterAll(async () => {
+        await driver.quit();
+    });
+
+    test('File->New resets project title', async () => {
+        const defaultProjectTitle = 'Scratch Project';
+        await loadUri(uri);
+        const inputEl = await findByXpath(`//input[@value="${defaultProjectTitle}"]`);
+        for (let i = 0; i < defaultProjectTitle.length; i++) {
+            inputEl.sendKeys(Key.BACK_SPACE);
+        }
+        inputEl.sendKeys('Changed title of project');
+        await clickText('Costumes'); // just to blur the input
+        // verify that project title has changed
+        await clickXpath('//input[@value="Changed title of project"]');
+        await clickXpath(
+            '//div[contains(@class, "menu-bar_menu-bar-item") and ' +
+            'contains(@class, "menu-bar_hoverable")][span[text()="File"]]'
+        );
+        await clickXpath('//li[span[text()="New"]]');
+        // project title should be default again
+        await clickXpath(`//input[@value="${defaultProjectTitle}"]`);
+    });
+});
@@ -0,0 +1,52 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers';
+import MenuBar from '../../../src/components/menu-bar/menu-bar';
+import {menuInitialState} from '../../../src/reducers/menus';
+import {LoadingState} from '../../../src/reducers/project-state';
+
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+import VM from 'scratch-vm';
+
+
+describe('MenuBar Component', () => {
+    const store = configureStore()({
+        locales: {
+            isRtl: false,
+            locale: 'en-US'
+        },
+        scratchGui: {
+            menus: menuInitialState,
+            projectState: {
+                loadingState: LoadingState.NOT_LOADED
+            },
+            vm: new VM()
+        }
+    });
+
+    const getComponent = function (props = {}) {
+        return <Provider store={store}><MenuBar {...props} /></Provider>;
+    };
+
+    test('menu bar with no About handler has no About button', () => {
+        const menuBar = mountWithIntl(getComponent());
+        const button = menuBar.find('AboutButton');
+        expect(button.exists()).toBe(false);
+    });
+
+    test('menu bar with an About handler has an About button', () => {
+        const onClickAbout = jest.fn();
+        const menuBar = mountWithIntl(getComponent({onClickAbout}));
+        const button = menuBar.find('AboutButton');
+        expect(button.exists()).toBe(true);
+    });
+
+    test('clicking on About button calls the handler', () => {
+        const onClickAbout = jest.fn();
+        const menuBar = mountWithIntl(getComponent({onClickAbout}));
+        const button = menuBar.find('AboutButton');
+        expect(onClickAbout).toHaveBeenCalledTimes(0);
+        button.simulate('click');
+        expect(onClickAbout).toHaveBeenCalledTimes(1);
+    });
+});
@@ -97,7 +97,7 @@ describe('Sound Editor Container', () => {
        expect(vm.renameSound).toHaveBeenCalledWith(soundIndex, 'hello');
    });

-    test('it handles an effect by submitting the result and playing', () => {
+    test('it handles an effect by submitting the result and playing', async () => {
        const wrapper = mountWithIntl(
            <SoundEditor
                soundIndex={soundIndex}
@@ -106,7 +106,7 @@ describe('Sound Editor Container', () => {
        );
        const component = wrapper.find(SoundEditorComponent);
        component.props().onReverse(); // Could be any of the effects, just testing the end result
-        mockAudioEffects.instance._finishProcessing(soundBuffer);
+        await mockAudioEffects.instance._finishProcessing(soundBuffer);
        expect(mockAudioBufferPlayer.instance.play).toHaveBeenCalled();
        expect(vm.updateSoundBuffer).toHaveBeenCalled();
    });
@@ -202,7 +202,7 @@ describe('Sound Editor Container', () => {
        expect(mockAudioEffects.instance.process).toHaveBeenCalled();
    });

-    test('undo/redo stack state', () => {
+    test('undo/redo stack state', async () => {
        const wrapper = mountWithIntl(
            <SoundEditor
                soundIndex={soundIndex}
@@ -216,40 +216,40 @@ describe('Sound Editor Container', () => {

        // Submitting new samples should make it possible to undo
        component.props().onFaster();
-        mockAudioEffects.instance._finishProcessing(soundBuffer);
+        await mockAudioEffects.instance._finishProcessing(soundBuffer);
        wrapper.update();
        component = wrapper.find(SoundEditorComponent);
        expect(component.prop('canUndo')).toEqual(true);
        expect(component.prop('canRedo')).toEqual(false);

        // Undoing should make it possible to redo and not possible to undo again
-        component.props().onUndo();
+        await component.props().onUndo();
        wrapper.update();
        component = wrapper.find(SoundEditorComponent);
        expect(component.prop('canUndo')).toEqual(false);
        expect(component.prop('canRedo')).toEqual(true);

        // Redoing should make it possible to undo and not possible to redo again
-        component.props().onRedo();
+        await component.props().onRedo();
        wrapper.update();
        component = wrapper.find(SoundEditorComponent);
        expect(component.prop('canUndo')).toEqual(true);
        expect(component.prop('canRedo')).toEqual(false);

        // New submission should clear the redo stack
-        component.props().onUndo(); // Undo to go back to a state where redo is enabled
+        await component.props().onUndo(); // Undo to go back to a state where redo is enabled
        wrapper.update();
        component = wrapper.find(SoundEditorComponent);
        expect(component.prop('canRedo')).toEqual(true);
        component.props().onFaster();
-        mockAudioEffects.instance._finishProcessing(soundBuffer);
+        await mockAudioEffects.instance._finishProcessing(soundBuffer);

        wrapper.update();
        component = wrapper.find(SoundEditorComponent);
        expect(component.prop('canRedo')).toEqual(false);
    });

-    test('undo and redo submit new samples and play the sound', () => {
+    test('undo and redo submit new samples and play the sound', async () => {
        const wrapper = mountWithIntl(
            <SoundEditor
                soundIndex={soundIndex}
@@ -260,12 +260,12 @@ describe('Sound Editor Container', () => {

        // Set up an undoable state
        component.props().onFaster();
-        mockAudioEffects.instance._finishProcessing(soundBuffer);
+        await mockAudioEffects.instance._finishProcessing(soundBuffer);
        wrapper.update();
        component = wrapper.find(SoundEditorComponent);

        // Undo should update the sound buffer and play the new samples
-        component.props().onUndo();
+        await component.props().onUndo();
        expect(mockAudioBufferPlayer.instance.play).toHaveBeenCalled();
        expect(vm.updateSoundBuffer).toHaveBeenCalled();

@@ -274,7 +274,7 @@ describe('Sound Editor Container', () => {
        mockAudioBufferPlayer.instance.play.mockClear();

        // Undo should update the sound buffer and play the new samples
-        component.props().onRedo();
+        await component.props().onRedo();
        expect(mockAudioBufferPlayer.instance.play).toHaveBeenCalled();
        expect(vm.updateSoundBuffer).toHaveBeenCalled();
    });
@@ -92,99 +92,181 @@ test('onFetchedProjectData new loads project data into vm', () => {
    expect(resultState.projectData).toBe('1010101');
 });

-test('onLoadedProject upload, with canSave false, shows without id', () => {
-    const initialState = {
-        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
-    };
-    const action = onLoadedProject(initialState.loadingState, false, true);
-    const resultState = projectStateReducer(initialState, action);
-    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
-});
+// onLoadedProject: LOADING_VM_WITH_ID

-test('onLoadedProject upload, with canSave true, prepares to save', () => {
-    const initialState = {
-        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
-    };
-    const action = onLoadedProject(initialState.loadingState, true, true);
-    const resultState = projectStateReducer(initialState, action);
-    expect(resultState.loadingState).toBe(LoadingState.AUTO_UPDATING);
-});
-
-test('onLoadedProject with id shows with id', () => {
+test('onLoadedProject(LOADING_VM_WITH_ID, true, true) results in state SHOWING_WITH_ID', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.LOADING_VM_WITH_ID
    };
    const action = onLoadedProject(initialState.loadingState, true, true);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
 });

-test('onLoadedProject new shows without id', () => {
+test('onLoadedProject(LOADING_VM_WITH_ID, false, true) results in state SHOWING_WITH_ID', () => {
    const initialState = {
-        loadingState: LoadingState.LOADING_VM_NEW_DEFAULT
+        projectId: '100',
+        loadingState: LoadingState.LOADING_VM_WITH_ID
+    };
+    const action = onLoadedProject(initialState.loadingState, false, true);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
+});
+
+// case where we started out viewing a project with a projectId, then
+// started to load another project; but loading fails. We go back to
+// showing the original project.
+test('onLoadedProject(LOADING_VM_WITH_ID, false, false), with project id, ' +
+    'results in state SHOWING_WITH_ID', () => {
+    const initialState = {
+        projectId: '100',
+        loadingState: LoadingState.LOADING_VM_WITH_ID
+    };
+    const action = onLoadedProject(initialState.loadingState, false, false);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
+});
+
+// case where we started out viewing a project with default projectId, then
+// started to load one with an id, such as in standalone mode when user adds
+// '#PROJECT_ID_NUMBER' to the URI; but loading fails. We go back to
+// showing the original project.
+test('onLoadedProject(LOADING_VM_WITH_ID, false, false), with no project id, ' +
+    'results in state SHOWING_WITHOUT_ID', () => {
+    const initialState = {
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_WITH_ID
+    };
+    const action = onLoadedProject(initialState.loadingState, false, false);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
+});
+
+// onLoadedProject: LOADING_VM_FILE_UPLOAD
+
+test('onLoadedProject(LOADING_VM_FILE_UPLOAD, true, true) prepares to save', () => {
+    const initialState = {
+        projectId: '100',
+        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
+    };
+    const action = onLoadedProject(initialState.loadingState, true, true);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.AUTO_UPDATING);
+    expect(resultState.projectId).toBe('100');
+});
+
+test('onLoadedProject(LOADING_VM_FILE_UPLOAD, false, true) results in state SHOWING_WITHOUT_ID', () => {
+    const initialState = {
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
    };
    const action = onLoadedProject(initialState.loadingState, false, true);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
 });

-test('onLoadedProject new, to save shows without id', () => {
+test('onLoadedProject(LOADING_VM_FILE_UPLOAD, false, false), when we know project id, ' +
+    'results in state SHOWING_WITH_ID', () => {
    const initialState = {
+        projectId: '100',
+        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
+    };
+    const action = onLoadedProject(initialState.loadingState, false, false);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
+});
+
+test('onLoadedProject(LOADING_VM_FILE_UPLOAD, false, false), when we ' +
+    'don\'t know project id, results in state SHOWING_WITHOUT_ID', () => {
+    const initialState = {
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
+    };
+    const action = onLoadedProject(initialState.loadingState, false, false);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
+});
+
+// onLoadedProject: LOADING_VM_NEW_DEFAULT
+
+test('onLoadedProject(LOADING_VM_NEW_DEFAULT, true, true) results in state SHOWING_WITHOUT_ID', () => {
+    const initialState = {
+        projectId: '0',
        loadingState: LoadingState.LOADING_VM_NEW_DEFAULT
    };
    const action = onLoadedProject(initialState.loadingState, true, true);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
 });

-test('onLoadedProject with success false, no project id, shows without id', () => {
+test('onLoadedProject(LOADING_VM_NEW_DEFAULT, false, true) results in state SHOWING_WITHOUT_ID', () => {
    const initialState = {
-        loadingState: LoadingState.LOADING_VM_WITH_ID,
-        projectId: null
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_NEW_DEFAULT
    };
-    const action = onLoadedProject(initialState.loadingState, false, false);
+    const action = onLoadedProject(initialState.loadingState, false, true);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
 });

-test('onLoadedProject with success false, valid project id, shows with id', () => {
+test('onLoadedProject(LOADING_VM_NEW_DEFAULT, false, false) results in ERROR state', () => {
    const initialState = {
-        loadingState: LoadingState.LOADING_VM_WITH_ID,
-        projectId: '12345'
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_NEW_DEFAULT
    };
    const action = onLoadedProject(initialState.loadingState, false, false);
    const resultState = projectStateReducer(initialState, action);
-    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.loadingState).toBe(LoadingState.ERROR);
+    expect(resultState.projectId).toBe('0');
 });

-test('doneUpdatingProject with id shows with id', () => {
+// doneUpdatingProject
+
+test('doneUpdatingProject with id results in state SHOWING_WITH_ID', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.MANUAL_UPDATING
    };
    const action = doneUpdatingProject(initialState.loadingState);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
 });

-test('doneUpdatingProject with id, before copy, creates copy', () => {
+test('doneUpdatingProject with id, before copy occurs, results in state CREATING_COPY', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.UPDATING_BEFORE_COPY
    };
    const action = doneUpdatingProject(initialState.loadingState);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.CREATING_COPY);
+    expect(resultState.projectId).toBe('100');
 });

-test('doneUpdatingProject with id, before new, fetches default project', () => {
+test('doneUpdatingProject with id, before new, results in state FETCHING_NEW_DEFAULT', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.UPDATING_BEFORE_NEW
    };
    const action = doneUpdatingProject(initialState.loadingState);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.FETCHING_NEW_DEFAULT);
+    expect(resultState.projectId).toBe('0'); // resets id
 });

-test('setProjectId, with same id as before, should show with id, not fetch', () => {
+test('calling setProjectId, using with same id as already showing, ' +
+    'results in state SHOWING_WITH_ID', () => {
    const initialState = {
        projectId: '100',
        loadingState: LoadingState.SHOWING_WITH_ID
@@ -195,7 +277,8 @@ test('setProjectId, with same id as before, should show with id, not fetch', ()
    expect(resultState.projectId).toBe('100');
 });

-test('setProjectId, with different id as before, should fetch with id, not show with id', () => {
+test('calling setProjectId, using different id from project already showing, ' +
+    'results in state FETCHING_WITH_ID', () => {
    const initialState = {
        projectId: 99,
        loadingState: LoadingState.SHOWING_WITH_ID
@@ -206,7 +289,8 @@ test('setProjectId, with different id as before, should fetch with id, not show
    expect(resultState.projectId).toBe('100');
 });

-test('setProjectId, with same id as before, but not same type, should fetch because not ===', () => {
+test('setProjectId, with same id as before, but not same type, ' +
+    'results in FETCHING_WITH_ID because the two projectIds are not strictly equal', () => {
    const initialState = {
        projectId: '100',
        loadingState: LoadingState.SHOWING_WITH_ID
@@ -217,85 +301,104 @@ test('setProjectId, with same id as before, but not same type, should fetch beca
    expect(resultState.projectId).toBe(100);
 });

-test('requestNewProject, when can\'t create new, should fetch default project without id', () => {
+test('requestNewProject, when can\'t create/save, results in FETCHING_NEW_DEFAULT', () => {
    const initialState = {
+        projectId: '0',
        loadingState: LoadingState.SHOWING_WITHOUT_ID
    };
    const action = requestNewProject(false);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.FETCHING_NEW_DEFAULT);
+    expect(resultState.projectId).toBe('0');
 });

-test('requestNewProject, when can create new, should save and prepare to fetch default project', () => {
+test('requestNewProject, when can create/save, results in UPDATING_BEFORE_NEW ' +
+    '(in order to save before fetching default project)', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.SHOWING_WITH_ID
    };
    const action = requestNewProject(true);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.UPDATING_BEFORE_NEW);
+    expect(resultState.projectId).toBe('100');
 });

-test('requestProjectUpload when project not loaded should load', () => {
+test('requestProjectUpload when project not loaded results in state LOADING_VM_FILE_UPLOAD', () => {
    const initialState = {
+        projectId: null,
        loadingState: LoadingState.NOT_LOADED
    };
    const action = requestProjectUpload(initialState.loadingState);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.LOADING_VM_FILE_UPLOAD);
+    expect(resultState.projectId).toBe(null);
 });

-test('requestProjectUpload when showing project with id should load', () => {
+test('requestProjectUpload when showing project with id results in state LOADING_VM_FILE_UPLOAD', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.SHOWING_WITH_ID
    };
    const action = requestProjectUpload(initialState.loadingState);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.LOADING_VM_FILE_UPLOAD);
+    expect(resultState.projectId).toBe('100');
 });

-test('requestProjectUpload when showing project without id should load', () => {
+test('requestProjectUpload when showing project without id results in state LOADING_VM_FILE_UPLOAD', () => {
    const initialState = {
+        projectId: null,
        loadingState: LoadingState.SHOWING_WITHOUT_ID
    };
    const action = requestProjectUpload(initialState.loadingState);
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.LOADING_VM_FILE_UPLOAD);
+    expect(resultState.projectId).toBe(null);
 });

 test('manualUpdateProject should prepare to update', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.SHOWING_WITH_ID
    };
    const action = manualUpdateProject();
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.MANUAL_UPDATING);
+    expect(resultState.projectId).toBe('100');
 });

 test('autoUpdateProject should prepare to update', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.SHOWING_WITH_ID
    };
    const action = autoUpdateProject();
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.AUTO_UPDATING);
+    expect(resultState.projectId).toBe('100');
 });

 test('saveProjectAsCopy should save, before preparing to save as a copy', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.SHOWING_WITH_ID
    };
    const action = saveProjectAsCopy();
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.UPDATING_BEFORE_COPY);
+    expect(resultState.projectId).toBe('100');
 });

 test('remixProject should prepare to remix', () => {
    const initialState = {
+        projectId: '100',
        loadingState: LoadingState.SHOWING_WITH_ID
    };
    const action = remixProject();
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.REMIXING);
+    expect(resultState.projectId).toBe('100');
 });

 test('projectError from various states should show error', () => {
@@ -314,11 +417,13 @@ test('projectError from various states should show error', () => {
    for (const startState of startStates) {
        const initialState = {
            error: null,
+            projectId: '100',
            loadingState: startState
        };
        const action = projectError('Error string');
        const resultState = projectStateReducer(initialState, action);
        expect(resultState.error).toEqual('Error string');
+        expect(resultState.projectId).toBe('100');
    }
 });

@@ -332,11 +437,13 @@ test('fatal projectError should show error state', () => {
    for (const startState of startStates) {
        const initialState = {
            error: null,
+            projectId: '100',
            loadingState: startState
        };
        const action = projectError('Error string');
        const resultState = projectStateReducer(initialState, action);
        expect(resultState.loadingState).toBe(LoadingState.ERROR);
+        expect(resultState.projectId).toBe('100');
    }
 });

@@ -351,15 +458,18 @@ test('non-fatal projectError should show normal state', () => {
    for (const startState of startStates) {
        const initialState = {
            error: null,
+            projectId: '100',
            loadingState: startState
        };
        const action = projectError('Error string');
        const resultState = projectStateReducer(initialState, action);
        expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+        expect(resultState.projectId).toBe('100');
    }
 });

-test('projectError when creating new while viewing project with id should show project with id', () => {
+test('projectError when creating new while viewing project with id should ' +
+    'go back to state SHOWING_WITH_ID', () => {
    const initialState = {
        error: null,
        loadingState: LoadingState.CREATING_NEW,
@@ -368,9 +478,11 @@ test('projectError when creating new while viewing project with id should show p
    const action = projectError('Error string');
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('12345');
 });

-test('projectError when creating new while logged out, looking at default project should show default project', () => {
+test('projectError when creating new while logged out, looking at default project ' +
+    'should go back to state SHOWING_WITHOUT_ID', () => {
    const initialState = {
        error: null,
        loadingState: LoadingState.CREATING_NEW,
@@ -379,15 +491,19 @@ test('projectError when creating new while logged out, looking at default projec
    const action = projectError('Error string');
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
 });

-test('projectError from showing project should show error', () => {
+test('projectError encountered while in state FETCHING_WITH_ID results in ' +
+    'ERROR state', () => {
    const initialState = {
        error: null,
+        projectId: null,
        loadingState: LoadingState.FETCHING_WITH_ID
    };
    const action = projectError('Error string');
    const resultState = projectStateReducer(initialState, action);
    expect(resultState.loadingState).toBe(LoadingState.ERROR);
+    expect(resultState.projectId).toBe(null);
    expect(resultState.error).toEqual('Error string');
 });
@@ -0,0 +1,25 @@
+import 'web-audio-test-api';
+import SharedAudioContext from '../../../src/lib/audio/shared-audio-context';
+
+describe('Shared Audio Context', () => {
+    const audioContext = new AudioContext();
+
+    test('returns empty object without user gesture', () => {
+        const sharedAudioContext = new SharedAudioContext();
+        expect(sharedAudioContext).toMatchObject({});
+    });
+
+    test('returns AudioContext when mousedown is triggered', () => {
+        const sharedAudioContext = new SharedAudioContext();
+        const event = new Event('mousedown');
+        document.dispatchEvent(event);
+        expect(sharedAudioContext).toMatchObject(audioContext);
+    });
+
+    test('returns AudioContext when touchstart is triggered', () => {
+        const sharedAudioContext = new SharedAudioContext();
+        const event = new Event('touchstart');
+        document.dispatchEvent(event);
+        expect(sharedAudioContext).toMatchObject(audioContext);
+    });
+});
@@ -1,4 +1,9 @@
-import {computeRMS, computeChunkedRMS} from '../../../src/lib/audio/audio-util';
+import {
+    computeRMS,
+    computeChunkedRMS,
+    downsampleIfNeeded,
+    dropEveryOtherSample
+} from '../../../src/lib/audio/audio-util';

 describe('computeRMS', () => {
    test('returns 0 when given no samples', () => {
@@ -49,3 +54,48 @@ describe('computeChunkedRMS', () => {
        expect(chunkedLevels).toEqual([Math.sqrt(1 / 0.55), Math.sqrt(1 / 0.55)]);
    });
 });
+
+describe('downsampleIfNeeded', () => {
+    const samples = {length: 1};
+    const sampleRate = 44100;
+    test('returns given data when no downsampling needed', async () => {
+        samples.length = 1;
+        const res = await downsampleIfNeeded({samples, sampleRate}, null);
+        expect(res.samples).toEqual(samples);
+        expect(res.sampleRate).toEqual(sampleRate);
+    });
+    test('downsamples to 22050 if that puts it under the limit', async () => {
+        samples.length = 44100 * 3 * 60;
+        const resampler = jest.fn(() => 'TEST');
+        const res = await downsampleIfNeeded({samples, sampleRate}, resampler);
+        expect(resampler).toHaveBeenCalledWith({samples, sampleRate}, 22050);
+        expect(res).toEqual('TEST');
+    });
+    test('fails if resampling would not put it under the limit', async () => {
+        samples.length = 44100 * 4 * 60;
+        try {
+            await downsampleIfNeeded({samples, sampleRate}, null);
+        } catch (e) {
+            expect(e).toEqual('Sound too large to save, refusing to edit');
+        }
+    });
+});
+
+describe('dropEveryOtherSample', () => {
+    const buffer = {
+        samples: [1, 0, 2, 0, 3, 0],
+        sampleRate: 2
+    };
+    test('result is half the length', () => {
+        const {samples} = dropEveryOtherSample(buffer);
+        expect(samples.length).toEqual(Math.floor(buffer.samples.length / 2));
+    });
+    test('result contains only even-index items', () => {
+        const {samples} = dropEveryOtherSample(buffer);
+        expect(samples).toEqual(new Float32Array([1, 2, 3]));
+    });
+    test('result sampleRate is given sampleRate / 2', () => {
+        const {sampleRate} = dropEveryOtherSample(buffer);
+        expect(sampleRate).toEqual(buffer.sampleRate / 2);
+    });
+});
@@ -60,7 +60,6 @@ describe('CloudManagerHOC', () => {

        mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -80,7 +79,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                store={store}
                username="user"
@@ -98,7 +96,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -115,7 +112,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={stillLoadingStore}
@@ -132,7 +128,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        mount(
            <WrappedComponent
-                canSave
                cloudHost="nonEmpty"
                hasCloudPermission={false}
                store={store}
@@ -153,7 +148,6 @@ describe('CloudManagerHOC', () => {

        const mounted = mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={stillLoadingStore}
@@ -182,7 +176,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        const mounted = mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={stillLoadingStore}
@@ -209,7 +202,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        const mounted = mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -235,7 +227,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        const mounted = mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -262,7 +253,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        const mounted = mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -293,7 +283,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -315,7 +304,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -343,7 +331,6 @@ describe('CloudManagerHOC', () => {
        const WrappedComponent = cloudManagerHOC(Component);
        mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -364,12 +351,11 @@ describe('CloudManagerHOC', () => {
    });

    // Editor Mode Connection/Disconnection Tests
-    test('Entering editor mode and can\'t save project should disconnect cloud provider # 1', () => {
+    test('Entering editor mode and can\'t save project should disconnect cloud provider', () => {
        const Component = () => <div />;
        const WrappedComponent = cloudManagerHOC(Component);
        const mounted = mount(
            <WrappedComponent
-                canSave
                hasCloudPermission
                cloudHost="nonEmpty"
                store={store}
@@ -382,34 +368,7 @@ describe('CloudManagerHOC', () => {
        const requestCloseConnection = mockCloudProviderInstance.requestCloseConnection;

        mounted.setProps({
-            canSave: false,
-            hasEverEnteredEditor: true
-        });
-
-        expect(vm.setCloudProvider.mock.calls.length).toBe(2);
-        expect(vm.setCloudProvider).toHaveBeenCalledWith(null);
-        expect(requestCloseConnection).toHaveBeenCalledTimes(1);
-    });
-
-    test('Entering editor mode and can\'t save project should disconnect cloud provider # 2', () => {
-        const Component = () => <div />;
-        const WrappedComponent = cloudManagerHOC(Component);
-        const mounted = mount(
-            <WrappedComponent
-                hasCloudPermission
-                canSave={false}
-                cloudHost="nonEmpty"
-                store={store}
-                username="user"
-                vm={vm}
-            />
-        );
-
-        expect(CloudProvider).toHaveBeenCalled();
-        const requestCloseConnection = mockCloudProviderInstance.requestCloseConnection;
-
-        mounted.setProps({
-            hasEverEnteredEditor: true
+            canModifyCloudData: false
        });

        expect(vm.setCloudProvider.mock.calls.length).toBe(2);
@@ -56,7 +56,7 @@ describe('projectSaverHOC', () => {
        expect(mockedUpdateProject).toHaveBeenCalled();
    });

-    test('if canSave is alreatdy true and we show a project with an id, project will NOT be saved', () => {
+    test('if canSave is already true and we show a project with an id, project will NOT be saved', () => {
        const mockedSaveProject = jest.fn();
        const Component = () => <div />;
        const WrappedComponent = projectSaverHOC(Component);
				`@@ -0,0 +1 @@`
				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M10 2c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm-.072 10.42c-.256 0-.472.076-.648.227-.176.151-.264.338-.264.56 0 .25.091.445.273.584.182.139.395.209.639.209.236 0 .444-.07.624-.211s.27-.335.27-.581c0-.222-.086-.409-.258-.56-.172-.151-.384-.227-.636-.227zm.144-6.42c-.624 0-1.17.113-1.638.338-.468.225-.824.51-1.068.853-.244.343-.366.683-.366 1.017 0 .162.077.313.231.452.154.139.343.209.567.209.38 0 .638-.199.774-.597.144-.38.32-.668.528-.864.208-.196.532-.293.972-.293.376 0 .683.097.921.291.238.194.357.432.357.713 0 .144-.039.278-.117.402-.078.123-.174.235-.288.336-.114.1-.299.249-.555.446-.292.225-.524.42-.696.584-.172.164-.31.354-.414.571-.104.217-.156.473-.156.769 0 .236.071.414.213.534.142.12.317.18.525.18.4 0 .638-.183.714-.55l.099-.362.093-.206.183-.227.327-.288c.492-.387.833-.663 1.023-.827.19-.164.354-.358.492-.584.138-.225.207-.488.207-.787 0-.38-.121-.733-.363-1.057-.242-.324-.585-.58-1.029-.769-.444-.188-.956-.283-1.536-.283z" id="a"/></defs><g transform="translate(-2 -2)" fill="none"><mask><use xlink:href="#a"/></mask><use fill="#fff" xlink:href="#a"/></g></svg>