Changes to match TW/desktop

These do not make sense in desktop.

.babelrc

@@ -7,7 +7,7 @@
             "messagesDir": "./translations/messages/"
         }]],
     "presets": [
-        ["@babel/preset-env", {"targets": {"browsers": ["last 3 versions", "Safari >= 8", "iOS >= 8"]}}],
+        ["@babel/preset-env"],
         "@babel/preset-react"
     ]
 }

.browserslistrc

@@ -1,3 +1,6 @@
-last 3 versions
-Safari >= 8
-iOS >= 8
+chrome >= 70
+chromeandroid >= 70
+ios >= 12
+safari >= 12
+edge >= 18
+firefox >= 68

.circleci/config.yml

@@ -4,43 +4,43 @@ aliases:
     save_cache:
       paths:
         - .git
-      key: v1-git-{{ .Revision }}
+      key: v2-git-{{ .Revision }}
   - &restore_git_cache
     restore_cache:
       keys:
-        - v1-git-{{ .Revision }}
-        - v1-git-
+        - v2-git-{{ .Revision }}
+        - v2-git-
   - &save_build_cache
     save_cache:
       paths:
         - build
-      key: v1-build-{{ .Revision }}
+      key: v2-build-{{ .Revision }}
   - &restore_build_cache
     restore_cache:
       keys:
-        - v1-build-{{ .Revision }}
+        - v2-build-{{ .Revision }}
   - &save_dist_cache
     save_cache:
       paths:
         - dist
-      key: v1-dist-{{ .Revision }}
+      key: v2-dist-{{ .Revision }}
   - &restore_dist_cache
     restore_cache:
       keys:
-        - v1-dist-{{ .Revision }}
+        - v2-dist-{{ .Revision }}
   - &save_npm_cache
     save_cache:
       paths:
         - node_modules
-      key: v1-npm-{{ checksum "package-lock.json" }}
+      key: v2-npm-{{ checksum "package-lock.json" }}
   - &restore_npm_cache
     restore_cache:
       keys:
-        - v1-npm-{{ checksum "package-lock.json" }}
-        - v1-npm-
+        - v2-npm-{{ checksum "package-lock.json" }}
+        - v2-npm-
   - &defaults
     docker:
-      - image: circleci/node:8.16-browsers
+      - image: circleci/node:10-browsers
     working_directory: ~/repo
 
 jobs:
@@ -76,7 +76,7 @@ jobs:
           name: Unit
           environment:
               JEST_JUNIT_OUTPUT_DIR: test-results/unit
-          command: npm run test:unit -- --reporters="default" --reporters="jest-junit" --coverage --coverageReporters=text --coverageReporters=lcov
+          command: npm run test:unit -- --reporters="default" --reporters="jest-junit" --coverage --coverageReporters=text --coverageReporters=lcov --maxWorkers="2"
       - store_artifacts:
           path: coverage
       - store_test_results:
@@ -123,7 +123,7 @@ jobs:
               JEST_JUNIT_OUTPUT_DIR: test-results/integration
           command: |
             export TESTFILES=$(circleci tests glob "test/integration/*.test.js" | circleci tests split --split-by=timings)
-            $(npm bin)/jest ${TESTFILES} --reporters="default" --reporters="jest-junit"
+            $(npm bin)/jest ${TESTFILES} --reporters="default" --reporters="jest-junit" --runInBand
       - store_test_results:
           path: test-results
 
@@ -137,12 +137,12 @@ jobs:
       - checkout
       - run: |
           echo export RELEASE_VERSION="0.1.0-prerelease.$(date +'%Y%m%d%H%M%S')" >> $BASH_ENV
-          echo export NPM_TAG=circlelatest >> $BASH_ENV
+          echo export NPM_TAG=latest >> $BASH_ENV
           if [ "$CIRCLE_BRANCH" == "master" ]
-            then echo export NPM_TAG=circlestable >> $BASH_ENV
+            then echo export NPM_TAG=stable >> $BASH_ENV
           fi
           if [[ "$CIRCLE_BRANCH" == hotfix/* ]] # double brackets are important for matching the wildcard
-            then echo export NPM_TAG=circlehotfix >> $BASH_ENV
+            then echo export NPM_TAG=hotfix >> $BASH_ENV
           fi
       - run: npm version --no-git-tag-version $RELEASE_VERSION
       - run: |
@@ -162,9 +162,31 @@ jobs:
           git config --global user.email $(git log --pretty=format:"%ae" -n1)
           git config --global user.name $(git log --pretty=format:"%an" -n1)
       - run: npm run deploy -- -e $CIRCLE_BRANCH
-      
+  push-translations:
+    <<: *defaults
+    steps:
+      - *restore_git_cache
+      - checkout
+      - *restore_npm_cache
+      - run: npm run i18n:src
+      - run: npm run i18n:push
+
 workflows:
   version: 2
+  push-translations:
+    triggers:
+      - schedule:
+          cron: 0 0 * * * # daily at 12 UTC, 8 ET
+          filters:
+            branches:
+              only:
+                - develop
+    jobs:
+      - setup
+      - push-translations:
+          requires:
+              - setup
+
   build-test-deploy:
     jobs:
       - setup
@@ -186,22 +208,26 @@ workflows:
       - store_dist:
           requires:
             - build
-      # Disable deployment while running in parallel with Travis
-      # - deploy-npm:
-      #     requires:
-      #       - lint
-      #       - unit
-      #       - integration
-      #       - build
-      #     filters:
-      #       branches:
-      #         only:
-      #           - master
-      #           - develop
-      #           - /^hotfix\/.*/
-      # - deploy-gh-pages:
-      #     requires:
-      #       - lint
-      #       - unit
-      #       - integration
-      #       - build
+      - deploy-npm:
+          requires:
+            - lint
+            - unit
+            - integration
+            - build
+          filters:
+            branches:
+              only:
+                - master
+                - develop
+                - /^hotfix\/.*/
+      - deploy-gh-pages:
+          requires:
+            - lint
+            - unit
+            - integration
+            - build
+          filters:
+            branches:
+              ignore:
+                - /^dependabot/.*/
+                - /^pull/.*/ # don't deploy to  gh pages on PRs.

.gitattributes

@@ -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

.github/CONTRIBUTING.md

@@ -1,13 +1,92 @@
+## Contributing
+
+### Bugs
+
+If you found a bug in TurboWarp, you should check to see if the bug occurs in Scratch itself. Bugs that exist in Scratch are Scratch bugs and should be submitted to Scratch, not to TurboWarp. If the bug only exists in TurboWarp, check to see if an issue has already been created for it, and if not you can file one.
+
+Being able to consistently reproduce issues is very important. Please see [Scratch's reproduction step guidelines](https://github.com/LLK/scratch-gui/wiki/Writing-good-repro-steps) when writing issues. Some issues are marked "Needs Repro". Adding a comment with good reproduction steps to those issues is a great way to help.
+
+TurboWarp bugs should *never* be reported to the Scratch "Bugs & Glitches" forum.
+
+### Pull requests
+
+Pull requests will be accepted for pretty much any open issue that isn't labeled "wontfix" or "upstream". Pull requests, especially small ones, don't necessarily need to have a matching issue, but it doesn't hurt to open an issue if one doesn't exist.
+
+Pull requests that should be included in Scratch itself should be submitted to Scratch, not to TurboWarp. This means that things like Scratch bug fixes, refactorings, or cleanups should *not* be submitted to TurboWarp.
+
+When submitting the pull request, make sure that you set the base repository to the TurboWarp fork, not to Scratch itself, as GitHub is sometimes inconsistent about this. For example, a pull request to the TurboWarp VM should be made against TurboWarp/scratch-vm, not LLK/scratch-vm.
+
+Guidelines for pull requests:
+ * Make the minimal amount of changes possible to Scratch code to make conflicts when pulling upstream code less painful.
+ * It might take a while for pull requests to get reviewed.
+
+<!--
+
 ## 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
 * [Suggestions forum](https://scratch.mit.edu/discuss/1/) on Scratch
 * [Bugs & Glitches forum](https://scratch.mit.edu/discuss/3/) on Scratch
+
+-->

.npmignore

@@ -5,9 +5,6 @@
 /node_modules
 npm-*
 
-# Double copies of all the static assets and tutorial gifs
-/src
-
 # Testing
 /.nyc_output
 /coverage

.travis.yml

@@ -1,66 +0,0 @@
-language: node_js
-sudo: required
-dist: xenial
-addons:
-    chrome: stable
-node_js:
-- 8
-env:
-  global:
-  - CHROMEDRIVER_VERSION=LATEST
-  - NODE_ENV=production
-  - NODE_OPTIONS=--max-old-space-size=7250
-  - NPM_TAG=latest
-  - RELEASE_VERSION="0.1.0-prerelease.$(date +'%Y%m%d%H%M%S')"
-cache:
-  directories:
-  - node_modules
-install:
-- npm --production=false install
-script:
-- npm test
-before_deploy:
-- >
-  if [ -z "$BEFORE_DEPLOY_RAN" ]; then
-    npm --no-git-tag-version version $RELEASE_VERSION
-    if [ "$TRAVIS_BRANCH" == "master" ]; then export NPM_TAG=stable; fi
-    if [[ "$TRAVIS_BRANCH" == hotfix/* ]]; then export NPM_TAG=hotfix; fi # double brackets are important for matching the wildcard
-    git config --global user.email $(git log --pretty=format:"%ae" -n1)
-    git config --global user.name $(git log --pretty=format:"%an" -n1)
-    export BEFORE_DEPLOY_RAN=true
-  fi
-deploy:
-- provider: npm
-  on:
-    branch:
-    - master
-    - develop
-    - hotfix/*
-    condition: $TRAVIS_EVENT_TYPE != cron
-  skip_cleanup: true
-  email: $NPM_EMAIL
-  api_key: $NPM_TOKEN
-  tag: $NPM_TAG
-- provider: script
-  on:
-    branch:
-    - master
-    - develop
-    - smoke
-    - hotfix/*
-    condition: $TRAVIS_EVENT_TYPE != cron
-  skip_cleanup: true
-  script: if npm info scratch-gui | grep -q $RELEASE_VERSION; then git tag $RELEASE_VERSION && git push https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git $RELEASE_VERSION; fi
-- provider: script
-  on:
-    all_branches: true
-    condition: $TRAVIS_EVENT_TYPE != cron && ! $TRAVIS_BRANCH =~ ^greenkeeper/
-    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
-- provider: script
-  on:
-    branch: develop
-    condition: $TRAVIS_EVENT_TYPE == cron
-  skip_cleanup: true
-  script: npm run i18n:src && npm run i18n:push

.vscode/settings.json

@@ -0,0 +1 @@
+{}

LICENSE

@@ -1,4 +1,5 @@
 Copyright (c) 2016, Massachusetts Institute of Technology
+Copyright (c) 2020 Thomas Weber
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

README.md

@@ -1,3 +1,13 @@
+scratch-gui modified for use in [TurboWarp](https://turbowarp.org/)
+
+## Setup
+
+See https://github.com/TurboWarp/scratch-gui/wiki/Getting-Started to setup the complete TurboWarp environment.
+
+If you just want to play with the GUI then it's the same process as upstream scratch-gui.
+
+<!--
+
 # scratch-gui
 #### Scratch GUI is a set of React components that comprise the interface for creating and running Scratch 3.0 projects
 
@@ -191,6 +201,13 @@ npm install  --no-optional --save-dev react-responsive@^5.0.0
 
 Further reading: [Stack Overflow](https://stackoverflow.com/questions/46602286/npm-requires-a-peer-of-but-all-peers-are-in-package-json-and-node-modules)
 
+## Troubleshooting
+
+If you run into npm install errors, try these steps:
+1. run `npm cache clean --force`
+2. Delete the node_modules directory
+3. Delete package-lock.json
+4. run `npm install` again
 
 ## Publishing to GitHub Pages
 You can publish the GUI to github.io so that others on the Internet can view it.
@@ -253,3 +270,5 @@ Here's what will happen in the project state machine:
 
 ## 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!
+
+-->

package.json

@@ -2,11 +2,11 @@
   "name": "scratch-gui",
   "version": "0.1.0",
   "description": "GraphicaL User Interface for creating and running Scratch 3.0 projects",
-  "main": "./dist/scratch-gui.js",
+  "main": "./dist/js/scratch-gui.js",
   "scripts": {
-    "build": "npm run clean && webpack --progress --colors --bail",
+    "build": "npm run clean && webpack --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",
@@ -16,7 +16,7 @@
     "test:lint": "eslint . --ext .js,.jsx",
     "test:unit": "jest test[\\\\/]unit",
     "test:smoke": "jest --runInBand test[\\\\/]smoke",
-    "watch": "webpack --progress --colors --watch"
+    "watch": "webpack --colors --watch"
   },
   "author": "Massachusetts Institute of Technology",
   "license": "BSD-3-Clause",
@@ -25,6 +25,70 @@
     "type": "git",
     "url": "git+ssh://git@github.com/LLK/scratch-gui.git"
   },
+  "dependencies": {
+    "arraybuffer-loader": "^1.0.6",
+    "autoprefixer": "^9.0.1",
+    "base64-loader": "1.0.0",
+    "bowser": "1.9.4",
+    "classnames": "2.2.6",
+    "computed-style-to-inline-style": "3.0.0",
+    "copy-webpack-plugin": "^4.5.1",
+    "core-js": "2.5.7",
+    "css-loader": "^1.0.0",
+    "es6-object-assign": "1.1.0",
+    "file-loader": "2.0.0",
+    "get-float-time-domain-data": "0.1.0",
+    "get-user-media-promise": "1.1.4",
+    "immutable": "3.8.2",
+    "intl": "1.2.5",
+    "js-base64": "2.4.9",
+    "keymirror": "0.1.1",
+    "lodash.bindall": "4.4.0",
+    "lodash.debounce": "4.0.8",
+    "lodash.defaultsdeep": "4.6.1",
+    "lodash.omit": "4.5.0",
+    "lodash.throttle": "4.0.1",
+    "minilog": "3.1.0",
+    "omggif": "1.0.9",
+    "papaparse": "5.3.0",
+    "postcss-import": "^12.0.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-simple-vars": "^5.0.1",
+    "prop-types": "^15.5.10",
+    "query-string": "^5.1.1",
+    "raw-loader": "^0.5.1",
+    "react": "16.2.0",
+    "react-contextmenu": "2.9.4",
+    "react-dom": "16.2.1",
+    "react-draggable": "3.0.5",
+    "react-ga": "2.5.3",
+    "react-intl": "2.9.0",
+    "react-modal": "3.9.1",
+    "react-popover": "0.5.10",
+    "react-redux": "5.0.7",
+    "react-responsive": "5.0.0",
+    "react-string-replace": "^0.4.4",
+    "react-style-proptype": "3.2.2",
+    "react-tabs": "2.3.0",
+    "react-tooltip": "3.8.0",
+    "react-virtualized": "9.20.1",
+    "redux": "3.7.2",
+    "redux-throttle": "0.1.1",
+    "scratch-audio": "0.1.0-prerelease.20200528195344",
+    "scratch-blocks": "0.1.0-prerelease.20201223034356",
+    "scratch-l10n": "3.10.20201223031554",
+    "scratch-storage": "1.3.3",
+    "scratch-paint": "0.2.0-prerelease.20201020103914",
+    "scratch-render": "github:TurboWarp/scratch-render#develop",
+    "scratch-svg-renderer": "0.2.0-prerelease.20201019174008",
+    "scratch-vm": "github:TurboWarp/scratch-vm#develop",
+    "startaudiocontext": "1.2.1",
+    "style-loader": "^0.23.0",
+    "text-encoding": "0.7.0",
+    "to-style": "1.3.3",
+    "wav-encoder": "1.3.0",
+    "xhr": "2.5.0"
+  },
   "peerDependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
@@ -37,97 +101,33 @@
     "@babel/plugin-transform-async-to-generator": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "arraybuffer-loader": "^1.0.6",
-    "autoprefixer": "^9.0.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
-    "base64-loader": "1.0.0",
-    "bowser": "1.9.4",
-    "chromedriver": "80.0.0",
-    "classnames": "2.2.6",
-    "computed-style-to-inline-style": "3.0.0",
-    "copy-webpack-plugin": "^4.5.1",
-    "core-js": "2.5.7",
-    "css-loader": "^1.0.0",
+    "chromedriver": "86.0.0",
     "enzyme": "^3.5.0",
     "enzyme-adapter-react-16": "1.3.0",
-    "es6-object-assign": "1.1.0",
     "eslint": "^5.0.1",
     "eslint-config-scratch": "^5.0.0",
     "eslint-import-resolver-webpack": "^0.11.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.14.1",
     "eslint-plugin-react": "^7.12.4",
-    "file-loader": "2.0.0",
-    "get-float-time-domain-data": "0.1.0",
-    "get-user-media-promise": "1.1.4",
     "gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
-    "html-webpack-plugin": "^3.2.0",
-    "immutable": "3.8.2",
-    "intl": "1.2.5",
+    "html-webpack-plugin": "^4.3.0",
     "jest": "^21.0.0",
     "jest-junit": "^7.0.0",
-    "js-base64": "2.4.9",
-    "keymirror": "0.1.1",
-    "lodash.bindall": "4.4.0",
-    "lodash.debounce": "4.0.8",
-    "lodash.defaultsdeep": "4.6.0",
-    "lodash.isequal": "4.5.0",
-    "lodash.omit": "4.5.0",
-    "lodash.pick": "4.4.0",
-    "lodash.throttle": "4.0.1",
-    "minilog": "3.1.0",
     "mkdirp": "^1.0.3",
-    "omggif": "1.0.9",
-    "papaparse": "5.1.1",
-    "postcss-import": "^12.0.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-simple-vars": "^5.0.1",
-    "prop-types": "^15.5.10",
-    "query-string": "^5.1.1",
     "raf": "^3.4.0",
-    "raw-loader": "^0.5.1",
-    "react": "16.2.0",
-    "react-contextmenu": "2.9.4",
-    "react-dom": "16.2.0",
-    "react-draggable": "3.0.5",
-    "react-ga": "2.5.3",
-    "react-intl": "2.9.0",
-    "react-modal": "3.9.1",
-    "react-popover": "0.5.10",
-    "react-redux": "5.0.7",
-    "react-responsive": "5.0.0",
-    "react-style-proptype": "3.2.2",
-    "react-tabs": "2.3.0",
     "react-test-renderer": "16.2.0",
-    "react-tooltip": "3.8.0",
-    "react-virtualized": "9.20.1",
-    "redux": "3.7.2",
     "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.7.20200212141356",
-    "scratch-blocks": "0.1.0-prerelease.1581428931",
-    "scratch-paint": "0.2.0-prerelease.20200213174123",
-    "scratch-render": "0.1.0-prerelease.20200205011809",
-    "scratch-storage": "1.3.2",
-    "scratch-svg-renderer": "0.2.0-prerelease.20200205003400",
-    "scratch-vm": "0.2.0-prerelease.20191227164934",
     "selenium-webdriver": "3.6.0",
-    "startaudiocontext": "1.2.1",
-    "style-loader": "^0.23.0",
-    "svg-to-image": "1.1.3",
-    "text-encoding": "0.7.0",
-    "to-style": "1.3.3",
     "uglifyjs-webpack-plugin": "^1.2.5",
-    "wav-encoder": "1.3.0",
     "web-audio-test-api": "^0.5.2",
     "webpack": "^4.6.0",
     "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.3",
-    "xhr": "2.5.0"
+    "webpack-dev-server": "^3.1.3"
   },
   "jest": {
     "setupFiles": [
@@ -139,7 +139,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"
     }
   }
 }

src/addons/addons.json

@@ -0,0 +1,6 @@
+[
+    "// Make sure these IDs match their ID in SA",
+    "block-switching",
+    "editor-devtools",
+    "editor-searchable-dropdowns"
+]

src/addons/addons/block-switching.js

@@ -0,0 +1,720 @@
+/* eslint-disable */
+
+/*!
+ * https://github.com/ScratchAddons/ScratchAddons/tree/master/addons/block-switching
+ * I wrote this code and am therefore not affected by the GPL.
+ */
+
+import blockToDom from "./lib/blockToDom.js";
+
+export default async function ({ addon, global, console, msg }) {
+  const blockSwitches = {};
+
+  const noopSwitch = {
+    opcode: "noop",
+  };
+
+  if (true || addon.settings.get("motion")) {
+    blockSwitches["motion_turnright"] = [
+      noopSwitch,
+      {
+        opcode: "motion_turnleft",
+      },
+    ];
+    blockSwitches["motion_turnleft"] = [
+      {
+        opcode: "motion_turnright",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["motion_setx"] = [
+      noopSwitch,
+      {
+        opcode: "motion_changexby",
+        remap: { X: "DX" },
+      },
+      {
+        opcode: "motion_sety",
+        remap: { X: "Y" },
+      },
+      {
+        opcode: "motion_changeyby",
+        remap: { X: "DY" },
+      },
+    ];
+    blockSwitches["motion_changexby"] = [
+      {
+        opcode: "motion_setx",
+        remap: { DX: "X" },
+      },
+      noopSwitch,
+      {
+        opcode: "motion_sety",
+        remap: { DX: "Y" },
+      },
+      {
+        opcode: "motion_changeyby",
+        remap: { DX: "DY" },
+      },
+    ];
+    blockSwitches["motion_sety"] = [
+      {
+        opcode: "motion_setx",
+        remap: { Y: "X" },
+      },
+      {
+        opcode: "motion_changexby",
+        remap: { Y: "DX" },
+      },
+      noopSwitch,
+      {
+        opcode: "motion_changeyby",
+        remap: { Y: "DY" },
+      },
+    ];
+    blockSwitches["motion_changeyby"] = [
+      {
+        opcode: "motion_setx",
+        remap: { DY: "X" },
+      },
+      {
+        opcode: "motion_changexby",
+        remap: { DY: "DX" },
+      },
+      {
+        opcode: "motion_sety",
+        remap: { DY: "Y" },
+      },
+      noopSwitch,
+    ];
+    blockSwitches["motion_xposition"] = [
+      noopSwitch,
+      {
+        opcode: "motion_yposition",
+      },
+    ];
+    blockSwitches["motion_yposition"] = [
+      {
+        opcode: "motion_xposition",
+      },
+      noopSwitch,
+    ];
+  }
+
+  if (true || addon.settings.get("looks")) {
+    blockSwitches["looks_seteffectto"] = [
+      noopSwitch,
+      {
+        opcode: "looks_changeeffectby",
+        remap: { VALUE: "CHANGE" },
+      },
+    ];
+    blockSwitches["looks_changeeffectby"] = [
+      {
+        opcode: "looks_seteffectto",
+        remap: { CHANGE: "VALUE" },
+      },
+      noopSwitch,
+    ];
+    blockSwitches["looks_setsizeto"] = [
+      noopSwitch,
+      {
+        opcode: "looks_changesizeby",
+        remap: { SIZE: "CHANGE" },
+      },
+    ];
+    blockSwitches["looks_changesizeby"] = [
+      {
+        opcode: "looks_setsizeto",
+        remap: { CHANGE: "SIZE" },
+      },
+      noopSwitch,
+    ];
+    blockSwitches["looks_costumenumbername"] = [
+      noopSwitch,
+      {
+        opcode: "looks_backdropnumbername",
+      },
+    ];
+    blockSwitches["looks_backdropnumbername"] = [
+      {
+        opcode: "looks_costumenumbername",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["looks_show"] = [
+      noopSwitch,
+      {
+        opcode: "looks_hide",
+      },
+    ];
+    blockSwitches["looks_hide"] = [
+      {
+        opcode: "looks_show",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["looks_nextcostume"] = [
+      noopSwitch,
+      {
+        opcode: "looks_nextbackdrop",
+      },
+    ];
+    blockSwitches["looks_nextbackdrop"] = [
+      {
+        opcode: "looks_nextcostume",
+      },
+      noopSwitch,
+    ];
+  }
+
+  if (true || addon.settings.get("sound")) {
+    blockSwitches["sound_play"] = [
+      noopSwitch,
+      {
+        opcode: "sound_playuntildone",
+      },
+    ];
+    blockSwitches["sound_playuntildone"] = [
+      {
+        opcode: "sound_play",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["sound_seteffectto"] = [
+      noopSwitch,
+      {
+        opcode: "sound_changeeffectby",
+      },
+    ];
+    blockSwitches["sound_changeeffectby"] = [
+      {
+        opcode: "sound_seteffectto",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["sound_setvolumeto"] = [
+      noopSwitch,
+      {
+        opcode: "sound_changevolumeby",
+      },
+    ];
+    blockSwitches["sound_changevolumeby"] = [
+      {
+        opcode: "sound_setvolumeto",
+      },
+      noopSwitch,
+    ];
+  }
+
+  if (true || addon.settings.get("event")) {
+    blockSwitches["event_broadcast"] = [
+      noopSwitch,
+      {
+        opcode: "event_broadcastandwait",
+      },
+    ];
+    blockSwitches["event_broadcastandwait"] = [
+      {
+        opcode: "event_broadcast",
+      },
+      noopSwitch,
+    ];
+  }
+
+  if (true || addon.settings.get("control")) {
+    blockSwitches["control_if"] = [
+      noopSwitch,
+      {
+        opcode: "control_if_else",
+      },
+    ];
+    blockSwitches["control_if_else"] = [
+      {
+        opcode: "control_if",
+        remap: { SUBSTACK2: "split" },
+      },
+      noopSwitch,
+    ];
+    blockSwitches["control_repeat_until"] = [
+      noopSwitch,
+      {
+        opcode: "control_wait_until",
+        remap: { SUBSTACK: "split" },
+      },
+      {
+        opcode: "control_forever",
+        remap: { CONDITION: "split" },
+      },
+    ];
+    blockSwitches["control_forever"] = [
+      {
+        opcode: "control_repeat_until",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["control_wait_until"] = [
+      {
+        opcode: "control_repeat_until",
+      },
+      noopSwitch,
+    ];
+  }
+
+  if (true || addon.settings.get("operator")) {
+    blockSwitches["operator_equals"] = [
+      {
+        opcode: "operator_gt",
+      },
+      noopSwitch,
+      {
+        opcode: "operator_lt",
+      },
+    ];
+    blockSwitches["operator_gt"] = [
+      noopSwitch,
+      {
+        opcode: "operator_equals",
+      },
+      {
+        opcode: "operator_lt",
+      },
+    ];
+    blockSwitches["operator_lt"] = [
+      {
+        opcode: "operator_gt",
+      },
+      {
+        opcode: "operator_equals",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["operator_add"] = [
+      noopSwitch,
+      {
+        opcode: "operator_subtract",
+      },
+      {
+        opcode: "operator_multiply",
+      },
+      {
+        opcode: "operator_divide",
+      },
+      {
+        opcode: "operator_mod",
+      },
+    ];
+    blockSwitches["operator_subtract"] = [
+      {
+        opcode: "operator_add",
+      },
+      noopSwitch,
+      {
+        opcode: "operator_multiply",
+      },
+      {
+        opcode: "operator_divide",
+      },
+      {
+        opcode: "operator_mod",
+      },
+    ];
+    blockSwitches["operator_multiply"] = [
+      {
+        opcode: "operator_add",
+      },
+      {
+        opcode: "operator_subtract",
+      },
+      noopSwitch,
+      {
+        opcode: "operator_divide",
+      },
+      {
+        opcode: "operator_mod",
+      },
+    ];
+    blockSwitches["operator_divide"] = [
+      {
+        opcode: "operator_add",
+      },
+      {
+        opcode: "operator_subtract",
+      },
+      {
+        opcode: "operator_multiply",
+      },
+      noopSwitch,
+      {
+        opcode: "operator_mod",
+      },
+    ];
+    blockSwitches["operator_mod"] = [
+      {
+        opcode: "operator_add",
+      },
+      {
+        opcode: "operator_subtract",
+      },
+      {
+        opcode: "operator_multiply",
+      },
+      {
+        opcode: "operator_divide",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["operator_and"] = [
+      noopSwitch,
+      {
+        opcode: "operator_or",
+      },
+    ];
+    blockSwitches["operator_or"] = [
+      {
+        opcode: "operator_and",
+      },
+      noopSwitch,
+    ];
+  }
+
+  if (true || addon.settings.get("sensing")) {
+    blockSwitches["sensing_mousex"] = [
+      noopSwitch,
+      {
+        opcode: "sensing_mousey",
+      },
+    ];
+    blockSwitches["sensing_mousey"] = [
+      {
+        opcode: "sensing_mousex",
+      },
+      noopSwitch,
+    ];
+  }
+
+  if (true || addon.settings.get("data")) {
+    blockSwitches["data_setvariableto"] = [
+      noopSwitch,
+      {
+        opcode: "data_changevariableby",
+      },
+    ];
+    blockSwitches["data_changevariableby"] = [
+      {
+        opcode: "data_setvariableto",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["data_showvariable"] = [
+      noopSwitch,
+      {
+        opcode: "data_hidevariable",
+      },
+    ];
+    blockSwitches["data_hidevariable"] = [
+      {
+        opcode: "data_showvariable",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["data_showlist"] = [
+      noopSwitch,
+      {
+        opcode: "data_hidelist",
+      },
+    ];
+    blockSwitches["data_hidelist"] = [
+      {
+        opcode: "data_showlist",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["data_replaceitemoflist"] = [
+      noopSwitch,
+      {
+        opcode: "data_insertatlist",
+      },
+    ];
+    blockSwitches["data_insertatlist"] = [
+      {
+        opcode: "data_replaceitemoflist",
+      },
+      noopSwitch,
+    ];
+  }
+
+  if (true || addon.settings.get("extension")) {
+    blockSwitches["pen_penDown"] = [
+      noopSwitch,
+      {
+        opcode: "pen_penUp",
+      },
+    ];
+    blockSwitches["pen_penUp"] = [
+      {
+        opcode: "pen_penDown",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["pen_setPenColorParamTo"] = [
+      noopSwitch,
+      {
+        opcode: "pen_changePenColorParamBy",
+      },
+    ];
+    blockSwitches["pen_changePenColorParamBy"] = [
+      {
+        opcode: "pen_setPenColorParamTo",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["pen_setPenHueToNumber"] = [
+      noopSwitch,
+      {
+        opcode: "pen_changePenHueBy",
+      },
+    ];
+    blockSwitches["pen_changePenHueBy"] = [
+      {
+        opcode: "pen_setPenHueToNumber",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["pen_setPenShadeToNumber"] = [
+      noopSwitch,
+      {
+        opcode: "pen_changePenShadeBy",
+      },
+    ];
+    blockSwitches["pen_changePenShadeBy"] = [
+      {
+        opcode: "pen_setPenShadeToNumber",
+      },
+      noopSwitch,
+    ];
+    blockSwitches["pen_setPenSizeTo"] = [
+      noopSwitch,
+      {
+        opcode: "pen_changePenSizeBy",
+      },
+    ];
+    blockSwitches["pen_changePenSizeBy"] = [
+      {
+        opcode: "pen_setPenSizeTo",
+      },
+      noopSwitch,
+    ];
+  }
+
+  // Switching for these is implemented by Scratch. We only define them here to optionally add a border.
+  // Because we don't implement the switching ourselves, this is not controlled by the data category option.
+  blockSwitches["data_variable"] = [];
+  blockSwitches["data_listcontents"] = [];
+
+  let addBorderToContextMenuItem = -1;
+
+  const genuid = () => {
+    const CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%()*+,-./:;=?@[]^_`{|}~";
+    let result = "";
+    for (let i = 0; i < 20; i++) {
+      result += CHARACTERS[Math.floor(Math.random() * CHARACTERS.length)];
+    }
+    return result;
+  };
+
+  const menuCallbackFactory = (block, opcodeData) => () => {
+    if (opcodeData.opcode === "noop") {
+      return;
+    }
+
+    const workspace = block.workspace;
+
+    // Make a copy of the block with the proper type set.
+    // It doesn't seem to be possible to change a Block's type after it's created, so we'll just make a new block instead.
+    const xml = blockToDom(block);
+    xml.setAttribute("type", opcodeData.opcode);
+
+    const id = block.id;
+    const parent = block.getParent();
+
+    let parentConnection;
+    let blockConnectionType;
+    if (parent) {
+      // If the block has a parent, find the parent -> child connection that will be reattached later.
+      const parentConnections = parent.getConnections_();
+      parentConnection = parentConnections.find((c) => c.targetConnection && c.targetConnection.sourceBlock_ === block);
+      // There's two types of connections from child -> parent. We need to figure out which one is used.
+      const blockConnections = block.getConnections_();
+      const blockToParentConnection = blockConnections.find(
+        (c) => c.targetConnection && c.targetConnection.sourceBlock_ === parent
+      );
+      blockConnectionType = blockToParentConnection.type;
+    }
+
+    const pasteSeparately = [];
+    // Apply input remappings.
+    if (opcodeData.remap) {
+      const childNodes = Array.from(xml.children);
+      for (const child of childNodes) {
+        const oldName = child.getAttribute("name");
+        const newName = opcodeData.remap[oldName];
+        if (newName) {
+          if (newName === "split") {
+            // This input will be split off into its own script.
+            const inputXml = child.firstChild;
+            const inputId = inputXml.id;
+            const inputBlock = workspace.getBlockById(inputId);
+
+            const position = inputBlock.getRelativeToSurfaceXY();
+            inputXml.setAttribute("x", Math.round(workspace.RTL ? -position.x : position.x));
+            inputXml.setAttribute("y", Math.round(position.y));
+
+            pasteSeparately.push(inputXml);
+            xml.removeChild(child);
+          } else {
+            child.setAttribute("name", newName);
+          }
+        }
+      }
+    }
+
+    // Mark the latest event in the undo stack.
+    // This will be used later to group all of our events.
+    const undoStack = workspace.undoStack_;
+    if (undoStack.length) {
+      undoStack[undoStack.length - 1]._blockswitchingLastUndo = true;
+    }
+
+    // Remove the old block and insert the new one.
+    block.dispose();
+    workspace.paste(xml);
+    for (const separateBlock of pasteSeparately) {
+      workspace.paste(separateBlock);
+    }
+
+    // The new block will have the same ID as the old one.
+    const newBlock = workspace.getBlockById(id);
+
+    if (parentConnection) {
+      // Search for the same type of connection on the new block as on the old block.
+      const newBlockConnections = newBlock.getConnections_();
+      const newBlockConnection = newBlockConnections.find((c) => c.type === blockConnectionType);
+      newBlockConnection.connect(parentConnection);
+    }
+
+    // Events (responsible for undoStack updates) are delayed with a setTimeout(f, 0)
+    // https://github.com/LLK/scratch-blocks/blob/f159a1779e5391b502d374fb2fdd0cb5ca43d6a2/core/events.js#L182
+    setTimeout(() => {
+      const group = genuid();
+      for (let i = undoStack.length - 1; i >= 0 && !undoStack[i]._blockswitchingLastUndo; i--) {
+        undoStack[i].group = group;
+      }
+    }, 0);
+  };
+
+  const customContextMenuHandler = function (options) {
+    if (true || addon.settings.get("border")) {
+      addBorderToContextMenuItem = options.length;
+    }
+
+    if (this._originalCustomContextMenu) {
+      this._originalCustomContextMenu.call(this, options);
+    }
+
+    const switches = blockSwitches[this.type];
+    for (const opcodeData of switches) {
+      const isNoop = opcodeData.opcode === "noop";
+      if (isNoop && !(true || addon.settings.get("noop"))) {
+        continue;
+      }
+      const translationOpcode = isNoop ? this.type : opcodeData.opcode;
+      const translation = msg(translationOpcode);
+      options.push({
+        enabled: true,
+        text: translation,
+        callback: menuCallbackFactory(this, opcodeData),
+      });
+    }
+  };
+
+  const injectCustomContextMenu = (block) => {
+    const type = block.type;
+    if (!blockSwitches.hasOwnProperty(type)) {
+      return;
+    }
+
+    if (block._customContextMenuInjected) {
+      return;
+    }
+    block._customContextMenuInjected = true;
+
+    if (block.customContextMenu) {
+      block._originalCustomContextMenu = block.customContextMenu;
+    }
+
+    block.customContextMenu = customContextMenuHandler;
+  };
+
+  const changeListener = (change) => {
+    if (change.type !== "create") {
+      return;
+    }
+
+    for (const id of change.ids) {
+      const block = Blockly.getMainWorkspace().getBlockById(id);
+      if (!block) continue;
+      injectCustomContextMenu(block);
+    }
+  };
+
+  const mutationObserverCallback = (mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.classList.contains("blocklyContextMenu")) {
+          if (addBorderToContextMenuItem === -1) {
+            continue;
+          }
+          const children = node.children;
+          const item = children[addBorderToContextMenuItem];
+          if (item) {
+            item.style.paddingTop = "2px";
+            item.style.borderTop = "1px solid hsla(0, 0%, 0%, 0.15)";
+          }
+          addBorderToContextMenuItem = -1;
+        }
+      }
+    }
+  };
+
+  const inject = () => {
+    const workspace = Blockly.getMainWorkspace();
+    if (workspace._blockswitchingInjected) {
+      return;
+    }
+    mutationObserver.observe(document.querySelector(".blocklyWidgetDiv"), {
+      childList: true,
+    });
+    workspace._blockswitchingInjected = true;
+    workspace.getAllBlocks().forEach(injectCustomContextMenu);
+    workspace.addChangeListener(changeListener);
+    const languageSelector = document.querySelector('[class^="language-selector_language-select"]');
+    if (languageSelector) {
+      languageSelector.addEventListener("change", () => {
+        setTimeout(inject);
+      });
+    }
+  };
+
+  const mutationObserver = new MutationObserver(mutationObserverCallback);
+
+  if (addon.tab.editorMode === "editor") {
+    const interval = setInterval(() => {
+      if (Blockly.getMainWorkspace()) {
+        inject();
+        clearInterval(interval);
+      }
+    }, 100);
+  }
+  addon.tab.addEventListener("urlChange", () => addon.tab.editorMode === "editor" && inject());
+}

src/addons/addons/editor-searchable-dropdowns.js

@@ -0,0 +1,235 @@
+/* eslint-disable */
+
+/*!
+ * https://github.com/ScratchAddons/ScratchAddons/tree/master/addons/editor-searchable-dropdowns
+ * I wrote this code and am therefore not affected by the GPL.
+ */
+
+import addStyle from './lib/addStyle';
+addStyle(`
+.u-dropdown-searchbar {
+  width: 100%;
+  box-sizing: border-box;
+  /* based on styles for the title input */
+  color: white;
+  background-color: hsla(0, 100%, 100%, 0.25);
+  border: 1px dashed hsla(0, 0%, 0%, 0.15);
+  padding: 0.5rem;
+  outline: none;
+  transition: 0.25s ease-out;
+  font-size: 13px;
+  font-weight: bold;
+  border-radius: 4px;
+}
+.u-dropdown-searchbar:hover {
+  background-color: hsla(0, 100%, 100%, 0.5);
+}
+.u-dropdown-searchbar:focus {
+  background-color: white;
+  color: black;
+}
+`);
+
+export default async function ({ addon, global, console }) {
+  // The hierarchy is:
+  // blocklyDropDownDiv (position, background color, etc.) -> blocklyDropDownContent (scrollbar) -> blocklyDropdownMenu (items)
+  // The capitalization of dropdown is inconsistent in blockly too.
+  let blocklyDropDownDiv = null;
+  let blocklyDropDownContent = null;
+  let blocklyDropdownMenu = null;
+
+  function createSearchBar(node) {
+    blocklyDropdownMenu = node;
+    blocklyDropdownMenu.focus = () => {}; // no-op focus() so it can't steal it from the search bar
+
+    // Lock the width of the dropdown before adding the search bar, as sometimes adding the searchbar changes the width.
+    blocklyDropDownContent.style.width = getComputedStyle(blocklyDropDownContent).width;
+
+    const searchBar = document.createElement("input");
+    searchBar.type = "text";
+    searchBar.addEventListener("input", handleInputEvent);
+    searchBar.addEventListener("keydown", handleKeyDownEvent);
+    searchBar.classList.add("u-dropdown-searchbar");
+    blocklyDropdownMenu.insertBefore(searchBar, blocklyDropdownMenu.firstChild);
+
+    // Lock the height of the dropdown after adding the search bar.
+    blocklyDropDownContent.style.height = getComputedStyle(blocklyDropDownContent).height;
+
+    // Compensate for the scroll bar sometimes making the interface taller by pushing the whole dropdown up.
+    const hasScrollBar = blocklyDropDownContent.scrollHeight > blocklyDropDownContent.clientHeight;
+    if (!hasScrollBar) {
+      const blocklyDropDownArrow = blocklyDropDownDiv.querySelector(".blocklyDropDownArrow");
+      if (blocklyDropDownArrow.classList.contains("arrowBottom")) {
+        const searchBarHeight = searchBar.offsetHeight;
+        blocklyDropDownDiv.style.transform += ` translateY(-${searchBarHeight}px)`;
+        blocklyDropDownArrow.style.transform = `translateY(${searchBarHeight}px) ${blocklyDropDownArrow.style.transform}`;
+      }
+    }
+
+    searchBar.focus();
+  }
+
+  function cleanup() {
+    blocklyDropdownMenu = null;
+    // Reset all the things we changed about the dropdown menu.
+    // This matters because there's other types of dropdowns such as angle selectors where a search bar doesn't make sense.
+    blocklyDropDownContent.style.width = "";
+    blocklyDropDownContent.style.height = "";
+  }
+
+  function closeDropDown() {
+    document.querySelector(".blocklyToolboxDiv").dispatchEvent(new MouseEvent("mousedown"));
+  }
+
+  function selectItem(item, click) {
+    // You can't just use click() or focus() because Blockly uses mousedown and mouseup handlers, not click handlers.
+    item.dispatchEvent(new MouseEvent("mousedown", { relatedTarget: item, bubbles: true }));
+    if (click) {
+      item.dispatchEvent(new MouseEvent("mouseup", { relatedTarget: item, bubbles: true }));
+    }
+
+    // Scroll the item into view if it is offscreen.
+    const itemTop = item.offsetTop;
+    const itemEnd = itemTop + item.offsetHeight;
+
+    const scrollTop = blocklyDropDownContent.scrollTop;
+    const scrollHeight = blocklyDropDownContent.offsetHeight;
+    const scrollEnd = scrollTop + scrollHeight;
+
+    if (scrollTop > itemTop) {
+      blocklyDropDownContent.scrollTop = itemTop;
+    } else if (itemEnd > scrollEnd) {
+      blocklyDropDownContent.scrollTop = itemEnd - scrollHeight;
+    }
+  }
+
+  function handleInputEvent(event) {
+    const value = event.target.value.toLowerCase();
+    for (const item of getItems()) {
+      const text = item.textContent.toLowerCase();
+      const hidden = !text.includes(value);
+      item.hidden = hidden;
+    }
+  }
+
+  // This returns the Blockly block that is currently selected, or null.
+  function getSelectedBlock() {
+    const selected = document.querySelector(".blocklySelected");
+    if (!selected) {
+      return null;
+    }
+    const block = Blockly.getMainWorkspace().getBlockById(selected.dataset.id);
+    return block;
+  }
+
+  function handleKeyDownEvent(event) {
+    if (event.key === "Enter") {
+      // Reimplement enter to select item to account for hidden items and default to the top item.
+      event.stopPropagation();
+      event.preventDefault();
+
+      const selectedItem = blocklyDropdownMenu.querySelector(".goog-menuitem-highlight");
+      if (selectedItem && !selectedItem.hidden) {
+        selectItem(selectedItem, true);
+        return;
+      }
+
+      const selectedBlock = getSelectedBlock();
+      const items = getItems();
+      if (event.target.value === "" && selectedBlock) {
+        if (
+          selectedBlock.type === "event_broadcast" ||
+          selectedBlock.type === "event_broadcastandwait" ||
+          selectedBlock.type === "event_whenbroadcastreceived"
+        ) {
+          // The top item of these dropdowns is always "New message"
+          // When pressing enter on an empty search bar, we close the dropdown instead of making a new broadcast.
+          closeDropDown();
+          return;
+        }
+      }
+      for (const item of items) {
+        if (!item.hidden) {
+          selectItem(item, true);
+          break;
+        }
+      }
+      // If there is no top value, just leave the dropdown open.
+    } else if (event.key === "Escape") {
+      closeDropDown();
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      // Reimplement keyboard navigation to account for hidden items.
+      event.preventDefault();
+      event.stopPropagation();
+
+      const items = getItems().filter((item) => !item.hidden);
+      if (items.length === 0) {
+        return;
+      }
+
+      let selectedIndex = -1;
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].classList.contains("goog-menuitem-highlight")) {
+          selectedIndex = i;
+          break;
+        }
+      }
+
+      const lastIndex = items.length - 1;
+      let newIndex = 0;
+      if (event.key === "ArrowDown") {
+        if (selectedIndex === -1 || selectedIndex === lastIndex) {
+          newIndex = 0;
+        } else {
+          newIndex = selectedIndex + 1;
+        }
+      } else {
+        if (selectedIndex === -1 || selectedIndex === 0) {
+          newIndex = lastIndex;
+        } else {
+          newIndex = selectedIndex - 1;
+        }
+      }
+
+      selectItem(items[newIndex], false);
+    }
+  }
+
+  function getItems() {
+    if (blocklyDropdownMenu) {
+      return Array.from(blocklyDropdownMenu.children).filter((child) => child.tagName !== "INPUT");
+    }
+    return [];
+  }
+
+  function findBlocklyDropDownDiv() {
+    return addon.tab.waitForElement(".blocklyDropDownDiv").then(() => document.querySelector(".blocklyDropDownDiv"));
+  }
+
+  blocklyDropDownDiv = await findBlocklyDropDownDiv();
+  blocklyDropDownContent = blocklyDropDownDiv.querySelector(".blocklyDropDownContent");
+
+  const observer = new MutationObserver((mutationList) => {
+    for (const mutation of mutationList) {
+      if (mutation.type === "childList") {
+        // Look for a dropdown being created.
+        for (const node of mutation.addedNodes) {
+          if (node.classList && node.classList.contains("blocklyDropdownMenu")) {
+            createSearchBar(node);
+            break;
+          }
+        }
+        // Look for a dropdown being removed.
+        for (const node of mutation.removedNodes) {
+          if (node.classList && node.classList.contains("blocklyDropdownMenu")) {
+            cleanup();
+            break;
+          }
+        }
+      }
+    }
+  });
+  observer.observe(blocklyDropDownContent, {
+    childList: true,
+  });
+}

src/addons/addons/lib/addStyle.js

@@ -0,0 +1,7 @@
+const addStlye = css => {
+    const style = document.createElement('style');
+    style.innerText = css;
+    document.head.appendChild(style);
+};
+
+export default addStlye;

src/addons/addons/lib/blockToDom.js

@@ -0,0 +1,257 @@
+/* eslint-disable */
+
+/**
+ * This file is imported from https://github.com/LLK/scratch-blocks/
+ * It has been cleaned up and unnecessary functions have been removed.
+ * Original license is below.
+ *
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const INPUT_VALUE = 1;
+const NEXT_STATEMENT = 3;
+const DUMMY_INPUT = 5;
+
+// Partially implements goog.dom.createDom.
+const createDom = function (tagName, /* unused */ _params, children) {
+  const element = document.createElement(tagName);
+  if (children !== undefined) {
+    if (!Array.isArray(children)) {
+      children = [children];
+    }
+    for (const child of children) {
+      if (typeof child === "string") {
+        element.appendChild(document.createTextNode(child));
+      } else {
+        element.appendChild(child);
+      }
+    }
+  }
+  return element;
+};
+
+// Partially implements goog.dom.removeNode
+const removeNode = (node) => {
+  if (node.parentNode) {
+    node.parentNode.removeChild(node);
+  }
+};
+
+const fieldToDomVariable_ = function (field) {
+  var id = field.getValue();
+  // The field had not been initialized fully before being serialized.
+  // This can happen if a block is created directly through a call to
+  // workspace.newBlock instead of from XML.
+  // The new block will be serialized for the first time when firing a block
+  // creation event.
+  if (id == null) {
+    field.initModel();
+    id = field.getValue();
+  }
+  // Get the variable directly from the field, instead of doing a lookup.  This
+  // will work even if the variable has already been deleted.  This can happen
+  // because the flyout defers deleting blocks until the next time the flyout is
+  // opened.
+  var variable = field.getVariable();
+
+  if (!variable) {
+    throw Error("Tried to serialize a variable field with no variable.");
+  }
+  var container = createDom("field", null, variable.name);
+  container.setAttribute("name", field.name);
+  container.setAttribute("id", variable.getId());
+  container.setAttribute("variabletype", variable.type);
+  return container;
+};
+
+const fieldToDom_ = function (field) {
+  if (field.name && field.SERIALIZABLE) {
+    if (field.referencesVariables()) {
+      return fieldToDomVariable_(field);
+    } else {
+      var container = createDom("field", null, field.getValue());
+      container.setAttribute("name", field.name);
+      return container;
+    }
+  }
+  return null;
+};
+
+const allFieldsToDom_ = function (block, element) {
+  for (var i = 0, input; (input = block.inputList[i]); i++) {
+    for (var j = 0, field; (field = input.fieldRow[j]); j++) {
+      var fieldDom = fieldToDom_(field);
+      if (fieldDom) {
+        element.appendChild(fieldDom);
+      }
+    }
+  }
+};
+
+const blockToDom = function (block, opt_noId) {
+  var element = createDom(block.isShadow() ? "shadow" : "block");
+  element.setAttribute("type", block.type);
+  if (!opt_noId) {
+    element.setAttribute("id", block.id);
+  }
+  if (block.mutationToDom) {
+    // Custom data for an advanced block.
+    var mutation = block.mutationToDom();
+    if (mutation && (mutation.hasChildNodes() || mutation.hasAttributes())) {
+      element.appendChild(mutation);
+    }
+  }
+
+  allFieldsToDom_(block, element);
+
+  scratchCommentToDom_(block, element);
+
+  if (block.data) {
+    var dataElement = createDom("data", null, block.data);
+    element.appendChild(dataElement);
+  }
+
+  for (var i = 0, input; (input = block.inputList[i]); i++) {
+    var container;
+    var empty = true;
+    if (input.type == DUMMY_INPUT) {
+      continue;
+    } else {
+      var childBlock = input.connection.targetBlock();
+      if (input.type == INPUT_VALUE) {
+        container = createDom("value");
+      } else if (input.type == NEXT_STATEMENT) {
+        container = createDom("statement");
+      }
+      var shadow = input.connection.getShadowDom();
+      if (shadow && (!childBlock || !childBlock.isShadow())) {
+        var shadowClone = cloneShadow_(shadow);
+        // Remove the ID from the shadow dom clone if opt_noId
+        // is specified to true.
+        if (opt_noId && shadowClone.getAttribute("id")) {
+          shadowClone.removeAttribute("id");
+        }
+        container.appendChild(shadowClone);
+      }
+      if (childBlock) {
+        container.appendChild(blockToDom(childBlock, opt_noId));
+        empty = false;
+      }
+    }
+    container.setAttribute("name", input.name);
+    if (!empty) {
+      element.appendChild(container);
+    }
+  }
+  if (block.inputsInlineDefault != block.inputsInline) {
+    element.setAttribute("inline", block.inputsInline);
+  }
+  if (block.isCollapsed()) {
+    element.setAttribute("collapsed", true);
+  }
+  if (block.disabled) {
+    element.setAttribute("disabled", true);
+  }
+  if (!block.isDeletable() && !block.isShadow()) {
+    element.setAttribute("deletable", false);
+  }
+  if (!block.isMovable() && !block.isShadow()) {
+    element.setAttribute("movable", false);
+  }
+  if (!block.isEditable()) {
+    element.setAttribute("editable", false);
+  }
+
+  var nextBlock = block.getNextBlock();
+  if (nextBlock) {
+    var container = createDom("next", null, blockToDom(nextBlock, opt_noId));
+    element.appendChild(container);
+  }
+  var shadow = block.nextConnection && block.nextConnection.getShadowDom();
+  if (shadow && (!nextBlock || !nextBlock.isShadow())) {
+    container.appendChild(cloneShadow_(shadow));
+  }
+
+  return element;
+};
+
+const scratchCommentToDom_ = function (block, element) {
+  var commentText = block.getCommentText();
+  if (commentText) {
+    var commentElement = createDom("comment", null, commentText);
+    if (typeof block.comment == "object") {
+      commentElement.setAttribute("id", block.comment.id);
+      commentElement.setAttribute("pinned", block.comment.isVisible());
+      var hw;
+      // TODO: scratch-blocks uses `block.comment instanceof Blockly.ScratchBlockComment`
+      if (block.comment.getHeightWidth) {
+        hw = block.comment.getHeightWidth();
+      } else {
+        hw = block.comment.getBubbleSize();
+      }
+      commentElement.setAttribute("h", hw.height);
+      commentElement.setAttribute("w", hw.width);
+      var xy = block.comment.getXY();
+      commentElement.setAttribute("x", xy.x);
+      commentElement.setAttribute("y", xy.y);
+      commentElement.setAttribute("minimized", block.comment.isMinimized());
+    }
+    element.appendChild(commentElement);
+  }
+};
+
+const cloneShadow_ = function (shadow) {
+  shadow = shadow.cloneNode(true);
+  // Walk the tree looking for whitespace.  Don't prune whitespace in a tag.
+  var node = shadow;
+  var textNode;
+  while (node) {
+    if (node.firstChild) {
+      node = node.firstChild;
+    } else {
+      while (node && !node.nextSibling) {
+        textNode = node;
+        node = node.parentNode;
+        if (textNode.nodeType == 3 && textNode.data.trim() == "" && node.firstChild != textNode) {
+          // Prune whitespace after a tag.
+          removeNode(textNode);
+        }
+      }
+      if (node) {
+        textNode = node;
+        node = node.nextSibling;
+        if (textNode.nodeType == 3 && textNode.data.trim() == "") {
+          // Prune whitespace before a tag.
+          removeNode(textNode);
+        }
+      }
+    }
+  }
+  return shadow;
+};
+
+const blockToDomWithXY = (block) => {
+  const xml = blockToDom(block, false);
+  const position = block.getRelativeToSurfaceXY();
+  xml.setAttribute("x", Math.round(block.workspace.RTL ? -position.x : position.x));
+  xml.setAttribute("y", Math.round(position.y));
+  return xml;
+};
+
+export default blockToDomWithXY;

src/addons/api.js

@@ -0,0 +1,81 @@
+import translations from './l10n/en.json';
+
+class Tab extends EventTarget {
+    waitForElement (selector) {
+        return new Promise(resolve => {
+            if (document.querySelector(selector)) {
+                resolve(document.querySelector(selector));
+                return;
+            }
+
+            const observer = new MutationObserver(() => {
+                const el = document.querySelector(selector);
+                if (el) {
+                    resolve(el);
+                    observer.disconnect();
+                }
+            });
+
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        });
+    }
+
+    get editorMode () {
+        if (location.pathname.includes('editor')) return 'editor';
+        if (location.pathname.includes('fullscreen')) return 'fullscreen';
+        if (location.pathname.includes('editor')) return 'editor';
+        return 'projectpage';
+    }
+}
+
+class Addon {
+    constructor () {
+        this.tab = new Tab();
+    }
+
+    get settings () {
+        throw new Error('not implemented');
+    }
+}
+
+const addon = new Addon();
+
+const emitUrlChange = () => {
+    setTimeout(() => {
+        addon.tab.dispatchEvent(new CustomEvent('urlChange'));
+    });
+};
+
+const originalReplaceState = history.replaceState;
+history.replaceState = function (...args) {
+    originalReplaceState.apply(this, args);
+    emitUrlChange();
+};
+const originalPushState = history.pushState;
+history.pushState = function (...args) {
+    originalPushState.apply(this, args);
+    emitUrlChange();
+};
+
+class API {
+    constructor (id) {
+        this._id = id;
+        this.global = global;
+        this.console = console;
+        this.addon = addon;
+        this.msg = this.msg.bind(this);
+    }
+
+    msg (key) {
+        const namespacedKey = `${this._id}/${key}`;
+        if (translations[namespacedKey]) {
+            return translations[namespacedKey];
+        }
+        return key;
+    }
+}
+
+export default API;

src/addons/index.js

@@ -0,0 +1,11 @@
+import API from './api';
+import addons from './addons.json';
+
+for (const addonId of addons) {
+    if (addonId.startsWith('//')) {
+        continue;
+    }
+    const api = new API(addonId);
+    const module = require(`./addons/${addonId}`);
+    module.default(api);
+}

src/addons/l10n/en.json

@@ -0,0 +1,63 @@
+{
+    "block-switching/event_broadcast": "broadcast",
+    "block-switching/event_broadcastandwait": "broadcast and wait",
+    "block-switching/control_if": "if",
+    "block-switching/control_if_else": "if... else",
+    "block-switching/control_repeat_until": "repeat until",
+    "block-switching/control_forever": "forever",
+    "block-switching/control_wait_until": "wait until",
+    "block-switching/data_changevariableby": "change variable",
+    "block-switching/data_setvariableto": "set variable",
+    "block-switching/data_showvariable": "show variable",
+    "block-switching/data_hidevariable": "hide variable",
+    "block-switching/data_showlist": "show list",
+    "block-switching/data_hidelist": "hide list",
+    "block-switching/data_replaceitemoflist": "replace item",
+    "block-switching/data_insertatlist": "insert item",
+    "block-switching/looks_changeeffectby": "change effect",
+    "block-switching/looks_seteffectto": "set effect",
+    "block-switching/looks_changesizeby": "change size",
+    "block-switching/looks_setsizeto": "set size",
+    "block-switching/looks_costumenumbername": "costume number or name",
+    "block-switching/looks_backdropnumbername": "backdrop number or name",
+    "block-switching/looks_show": "show",
+    "block-switching/looks_hide": "hide",
+    "block-switching/looks_nextcostume": "next costume",
+    "block-switching/looks_nextbackdrop": "next backdrop",
+    "block-switching/motion_turnright": "turn right",
+    "block-switching/motion_turnleft": "turn left",
+    "block-switching/motion_setx": "set x",
+    "block-switching/motion_changexby": "change x",
+    "block-switching/motion_sety": "set y",
+    "block-switching/motion_changeyby": "change y",
+    "block-switching/motion_xposition": "x position",
+    "block-switching/motion_yposition": "y position",
+    "block-switching/operator_equals": "=",
+    "block-switching/operator_gt": ">",
+    "block-switching/operator_lt": "<",
+    "block-switching/operator_add": "+",
+    "block-switching/operator_subtract": "-",
+    "block-switching/operator_multiply": "*",
+    "block-switching/operator_divide": "/",
+    "block-switching/operator_mod": "mod",
+    "block-switching/operator_and": "and",
+    "block-switching/operator_or": "or",
+    "block-switching/pen_penDown": "pen down",
+    "block-switching/pen_penUp": "pen up",
+    "block-switching/pen_setPenColorParamTo": "set parameter",
+    "block-switching/pen_changePenColorParamBy": "change parameter",
+    "block-switching/pen_changePenHueBy": "change hue",
+    "block-switching/pen_setPenHueToNumber": "set hue",
+    "block-switching/pen_changePenShadeBy": "change shade",
+    "block-switching/pen_setPenShadeToNumber": "set shade",
+    "block-switching/pen_changePenSizeBy": "change size",
+    "block-switching/pen_setPenSizeTo": "set size",
+    "block-switching/sensing_mousex": "mouse x",
+    "block-switching/sensing_mousey": "mouse y",
+    "block-switching/sound_play": "play",
+    "block-switching/sound_playuntildone": "play until done",
+    "block-switching/sound_changeeffectby": "change effect",
+    "block-switching/sound_seteffectto": "set effect",
+    "block-switching/sound_setvolumeto": "set volume",
+    "block-switching/sound_changevolumeby": "change volume"
+}

src/addons/loader.js

@@ -0,0 +1,16 @@
+let loaded = false;
+
+const load = () => {
+    // import(/* webpackChunkName: "addons" */ './index');
+};
+
+const loadAddons = () => {
+    if (loaded) {
+        return;
+    }
+    loaded = true;
+
+    setTimeout(load, 0);
+};
+
+export default loadAddons;

src/components/alerts/alert.css

@@ -15,6 +15,7 @@
     padding-right: 1rem;
     margin-bottom: 7px;
     min-height: 1.5rem;
+    pointer-events: all;
 }
 
 .alert.warn {
@@ -24,9 +25,10 @@
 }
 
 .alert.success {
-    background: $extensions-light;
-    border: 1px solid $extensions-tertiary;
-    box-shadow: 0px 0px 0px 2px $extensions-light;
+    /* tw: hardcode these colors because we change extensions-* colors to be something that looks weird here */
+    background: hsla(163, 57%, 85%, 1);
+    border: 1px solid hsla(163, 85%, 30%, 1);
+    box-shadow: 0px 0px 0px 2px hsla(163, 57%, 85%, 1);
 }
 
 .alert-spinner {

src/components/alerts/alert.jsx

@@ -28,7 +28,9 @@ const AlertComponent = ({
     onDownload,
     onSaveNow,
     onReconnect,
-    showReconnect
+    onRecover,
+    showReconnect,
+    showRecover
 }) => (
     <Box
         className={classNames(styles.alert, styles[level])}
@@ -101,6 +103,18 @@ const AlertComponent = ({
                     />
                 </button>
             )}
+            {showRecover && (
+                <button
+                    className={styles.alertConnectionButton}
+                    onClick={onRecover}
+                >
+                    <FormattedMessage
+                        defaultMessage="Recover (BETA)"
+                        description="Button to recover project"
+                        id="tw.alerts.recover"
+                    />
+                </button>
+            )}
             {closeButton && (
                 <Box
                     className={styles.alertCloseButtonContainer}
@@ -128,9 +142,11 @@ AlertComponent.propTypes = {
     onDownload: PropTypes.func,
     onReconnect: PropTypes.func,
     onSaveNow: PropTypes.func,
+    onRecover: PropTypes.func,
     showDownload: PropTypes.func,
     showReconnect: PropTypes.bool,
-    showSaveNow: PropTypes.bool
+    showSaveNow: PropTypes.bool,
+    showRecover: PropTypes.bool
 };
 
 AlertComponent.defaultProps = {

src/components/alerts/alerts.jsx

@@ -31,6 +31,7 @@ const AlertsComponent = ({
                     showDownload={a.showDownload}
                     showReconnect={a.showReconnect}
                     showSaveNow={a.showSaveNow}
+                    showRecover={a.showRecover}
                     onCloseAlert={onCloseAlert}
                 />
             ))}

src/components/asset-panel/icon--sound-rtl.svg

@@ -11,7 +11,8 @@
             <mask id="mask-2" fill="white">
                 <use xlink:href="#path-1"></use>
             </mask>
-            <use id="sound" fill="#4C97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
+            <!-- tw: update fill -->
+            <use id="sound" fill="#FF4D4D" fill-rule="evenodd" xlink:href="#path-1"></use>
             <g id="Color/Gray" mask="url(#mask-2)" fill="#575E75" fill-rule="evenodd">
                 <rect id="Color" x="0" y="0" width="100" height="100"></rect>
             </g>

src/components/audio-trimmer/icon--handle.svg

@@ -8,9 +8,11 @@
     </defs>
     <g id="Bottom-Left-Handle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Bottom-Left" transform="translate(17.000000, 17.000000) scale(1, -1) translate(-17.000000, -17.000000) ">
-            <use stroke="#4D97FF33" stroke-width="8" xlink:href="#path-1"></use>
+            <!-- tw: update stroke -->
+            <use stroke="#FF4D4D33" stroke-width="8" xlink:href="#path-1"></use>
             <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-            <use stroke="#3D73CC" stroke-width="1" fill="#4D97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
+            <!-- tw: update stroke, fill -->
+            <use stroke="#FF3D3D" stroke-width="1" fill="#FF4D4D" fill-rule="evenodd" xlink:href="#path-1"></use>
         </g>
     </g>
 </svg>

src/components/backpack/backpack.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages, injectIntl, intlShape} from 'react-intl';
 import DragConstants from '../../lib/drag-constants';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import SpriteSelectorItem from '../../containers/sprite-selector-item.jsx';
@@ -17,6 +17,29 @@ const dragTypeMap = { // Keys correspond with the backpack-server item types
     sprite: DragConstants.BACKPACK_SPRITE
 };
 
+const labelMap = defineMessages({
+    costume: {
+        id: 'gui.backpack.costumeLabel',
+        defaultMessage: 'costume',
+        description: 'Label for costume backpack item'
+    },
+    sound: {
+        id: 'gui.backpack.soundLabel',
+        defaultMessage: 'sound',
+        description: 'Label for sound backpack item'
+    },
+    script: {
+        id: 'gui.backpack.scriptLabel',
+        defaultMessage: 'script',
+        description: 'Label for script backpack item'
+    },
+    sprite: {
+        id: 'gui.backpack.spriteLabel',
+        defaultMessage: 'sprite',
+        description: 'Label for sprite backpack item'
+    }
+});
+
 const Backpack = ({
     blockDragOver,
     containerRef,
@@ -24,6 +47,7 @@ const Backpack = ({
     dragOver,
     error,
     expanded,
+    intl,
     loading,
     showMore,
     onToggle,
@@ -94,7 +118,7 @@ const Backpack = ({
                                         dragType={dragTypeMap[item.type]}
                                         id={item.id}
                                         key={item.id}
-                                        name={item.type}
+                                        name={intl.formatMessage(labelMap[item.type])}
                                         selected={false}
                                         onClick={noop}
                                         onDeleteButtonClick={onDelete}
@@ -141,6 +165,7 @@ Backpack.propTypes = {
     dragOver: PropTypes.bool,
     error: PropTypes.bool,
     expanded: PropTypes.bool,
+    intl: intlShape,
     loading: PropTypes.bool,
     onDelete: PropTypes.func,
     onMore: PropTypes.func,
@@ -161,4 +186,4 @@ Backpack.defaultProps = {
     onToggle: null
 };
 
-export default Backpack;
+export default injectIntl(Backpack);

src/components/controls/controls.jsx

@@ -6,6 +6,7 @@ import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import GreenFlag from '../green-flag/green-flag.jsx';
 import StopAll from '../stop-all/stop-all.jsx';
 import TurboMode from '../turbo-mode/turbo-mode.jsx';
+import FramerateIndicator from '../tw-framerate-indicator/framerate-indicator.jsx';
 
 import styles from './controls.css';
 
@@ -30,6 +31,7 @@ const Controls = function (props) {
         onGreenFlagClick,
         onStopAllClick,
         turbo,
+        framerate,
         ...componentProps
     } = props;
     return (
@@ -50,6 +52,7 @@ const Controls = function (props) {
             {turbo ? (
                 <TurboMode />
             ) : null}
+            <FramerateIndicator framerate={framerate} />
         </div>
     );
 };
@@ -60,6 +63,7 @@ Controls.propTypes = {
     intl: intlShape.isRequired,
     onGreenFlagClick: PropTypes.func.isRequired,
     onStopAllClick: PropTypes.func.isRequired,
+    framerate: PropTypes.number,
     turbo: PropTypes.bool
 };
 

src/components/crash-message/crash-message.css

@@ -11,7 +11,7 @@
     align-items: center;
 }
 .body {
-    width: 35%;
+    width: 50%;
     color: white;
     text-align: center;
 }
@@ -26,3 +26,7 @@
     font-size: 0.875rem;
     cursor: pointer;
 }
+
+.error-message {
+    font-family: monospace;
+}

src/components/crash-message/crash-message.jsx

@@ -22,13 +22,18 @@ const CrashMessage = props => (
             </h2>
             <p>
                 <FormattedMessage
-                    defaultMessage={'We are so sorry, but it looks like Scratch has crashed. This bug has been' +
-                        ' automatically reported to the Scratch Team. Please refresh your page to try' +
+                    defaultMessage={'We are so sorry, but it looks like TurboWarp has crashed.' +
+                        ' Please refresh your page to try' +
                         ' again.'}
                     description="Message to inform the user that page has crashed."
-                    id="gui.crashMessage.description"
+                    id="tw.gui.crashMessage.description"
                 />
             </p>
+            {props.errorMessage && (
+                <p className={styles.errorMessage}>
+                    {props.errorMessage}
+                </p>
+            )}
             {props.eventId && (
                 <p>
                     <FormattedMessage
@@ -57,6 +62,7 @@ const CrashMessage = props => (
 
 CrashMessage.propTypes = {
     eventId: PropTypes.string,
+    errorMessage: PropTypes.string,
     onReload: PropTypes.func.isRequired
 };
 

src/components/direction-picker/icon--all-around.svg

@@ -5,6 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="all-around-active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M16.8786199,10.6231329 L14.6209769,14.1433441 C14.3320842,14.6034325 13.6687009,14.6034325 13.3691085,14.1433441 L11.1221651,10.6231329 C10.8011732,10.1309454 11.1542643,9.47826182 11.7427495,9.47826182 L13.0267171,9.47826182 C12.7806233,7.4453131 11.0579667,5.87245277 8.9704494,5.87245277 C6.71387632,5.87245277 4.87245277,7.71280635 4.87245277,9.9704494 C4.87245277,12.2280925 6.71387632,14.068446 8.9704494,14.068446 C9.48510642,14.068446 9.90132592,14.4846655 9.90132592,14.9993226 C9.90132592,15.5236093 9.48510642,15.9408988 8.9704494,15.9408988 C5.67493253,15.9408988 3,13.2659663 3,9.9704494 C3,6.68563226 5.67493253,4 8.9704494,4 C12.0947706,4 14.6637758,6.41813901 14.9098696,9.47826182 L16.2580356,9.47826182 C16.8465207,9.47826182 17.1996118,10.1309454 16.8786199,10.6231329" id="Rotate" fill="#4C97FF"></path>
+        <!-- tw: update fill -->
+        <path d="M16.8786199,10.6231329 L14.6209769,14.1433441 C14.3320842,14.6034325 13.6687009,14.6034325 13.3691085,14.1433441 L11.1221651,10.6231329 C10.8011732,10.1309454 11.1542643,9.47826182 11.7427495,9.47826182 L13.0267171,9.47826182 C12.7806233,7.4453131 11.0579667,5.87245277 8.9704494,5.87245277 C6.71387632,5.87245277 4.87245277,7.71280635 4.87245277,9.9704494 C4.87245277,12.2280925 6.71387632,14.068446 8.9704494,14.068446 C9.48510642,14.068446 9.90132592,14.4846655 9.90132592,14.9993226 C9.90132592,15.5236093 9.48510642,15.9408988 8.9704494,15.9408988 C5.67493253,15.9408988 3,13.2659663 3,9.9704494 C3,6.68563226 5.67493253,4 8.9704494,4 C12.0947706,4 14.6637758,6.41813901 14.9098696,9.47826182 L16.2580356,9.47826182 C16.8465207,9.47826182 17.1996118,10.1309454 16.8786199,10.6231329" id="Rotate" fill="#FF4D4D"></path>
     </g>
 </svg>

src/components/direction-picker/icon--dial.svg

@@ -1 +1,2 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112"><defs><style>.cls-1{opacity:0.25;}.cls-2{fill:#4c97ff;}.cls-3{fill:#3d79cc;}.cls-4{opacity:0.15;}.cls-5{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title>dial-face</title><g class="cls-1"><circle class="cls-2" cx="56" cy="56" r="55.5"/><path class="cls-3" d="M56,1A55,55,0,1,1,1,56,55.06,55.06,0,0,1,56,1m0-1a56,56,0,1,0,56,56A56,56,0,0,0,56,0Z"/></g><g class="cls-4"><line class="cls-5" x1="56" y1="14.86" x2="56" y2="20.73"/><line class="cls-5" x1="56" y1="91.27" x2="56" y2="97.14"/><line class="cls-5" x1="45.35" y1="16.26" x2="46.87" y2="21.94"/><line class="cls-5" x1="65.13" y1="90.06" x2="66.65" y2="95.74"/><line class="cls-5" x1="35.43" y1="20.37" x2="38.37" y2="25.46"/><line class="cls-5" x1="73.63" y1="86.54" x2="76.57" y2="91.63"/><line class="cls-5" x1="26.91" y1="26.91" x2="31.06" y2="31.06"/><line class="cls-5" x1="80.94" y1="80.94" x2="85.09" y2="85.09"/><line class="cls-5" x1="20.37" y1="35.43" x2="25.46" y2="38.37"/><line class="cls-5" x1="86.54" y1="73.63" x2="91.63" y2="76.57"/><line class="cls-5" x1="16.26" y1="45.35" x2="21.94" y2="46.87"/><line class="cls-5" x1="90.06" y1="65.13" x2="95.74" y2="66.65"/><line class="cls-5" x1="14.86" y1="56" x2="20.73" y2="56"/><line class="cls-5" x1="91.27" y1="56" x2="97.14" y2="56"/><line class="cls-5" x1="16.26" y1="66.65" x2="21.94" y2="65.13"/><line class="cls-5" x1="90.06" y1="46.87" x2="95.74" y2="45.35"/><line class="cls-5" x1="20.37" y1="76.57" x2="25.46" y2="73.63"/><line class="cls-5" x1="86.54" y1="38.37" x2="91.63" y2="35.43"/><line class="cls-5" x1="26.91" y1="85.09" x2="31.06" y2="80.94"/><line class="cls-5" x1="80.94" y1="31.06" x2="85.09" y2="26.91"/><line class="cls-5" x1="35.43" y1="91.63" x2="38.37" y2="86.54"/><line class="cls-5" x1="73.63" y1="25.46" x2="76.57" y2="20.37"/><line class="cls-5" x1="45.35" y1="95.74" x2="46.87" y2="90.06"/><line class="cls-5" x1="65.13" y1="21.94" x2="66.65" y2="16.26"/></g><circle class="cls-2" cx="56" cy="56" r="2"/></svg>
+<!-- tw: update fill -->
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112"><defs><style>.cls-1{opacity:0.25;}.cls-2{fill:#FF4D4D;}.cls-3{fill:#FF3D3D;}.cls-4{opacity:0.15;}.cls-5{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title>dial-face</title><g class="cls-1"><circle class="cls-2" cx="56" cy="56" r="55.5"/><path class="cls-3" d="M56,1A55,55,0,1,1,1,56,55.06,55.06,0,0,1,56,1m0-1a56,56,0,1,0,56,56A56,56,0,0,0,56,0Z"/></g><g class="cls-4"><line class="cls-5" x1="56" y1="14.86" x2="56" y2="20.73"/><line class="cls-5" x1="56" y1="91.27" x2="56" y2="97.14"/><line class="cls-5" x1="45.35" y1="16.26" x2="46.87" y2="21.94"/><line class="cls-5" x1="65.13" y1="90.06" x2="66.65" y2="95.74"/><line class="cls-5" x1="35.43" y1="20.37" x2="38.37" y2="25.46"/><line class="cls-5" x1="73.63" y1="86.54" x2="76.57" y2="91.63"/><line class="cls-5" x1="26.91" y1="26.91" x2="31.06" y2="31.06"/><line class="cls-5" x1="80.94" y1="80.94" x2="85.09" y2="85.09"/><line class="cls-5" x1="20.37" y1="35.43" x2="25.46" y2="38.37"/><line class="cls-5" x1="86.54" y1="73.63" x2="91.63" y2="76.57"/><line class="cls-5" x1="16.26" y1="45.35" x2="21.94" y2="46.87"/><line class="cls-5" x1="90.06" y1="65.13" x2="95.74" y2="66.65"/><line class="cls-5" x1="14.86" y1="56" x2="20.73" y2="56"/><line class="cls-5" x1="91.27" y1="56" x2="97.14" y2="56"/><line class="cls-5" x1="16.26" y1="66.65" x2="21.94" y2="65.13"/><line class="cls-5" x1="90.06" y1="46.87" x2="95.74" y2="45.35"/><line class="cls-5" x1="20.37" y1="76.57" x2="25.46" y2="73.63"/><line class="cls-5" x1="86.54" y1="38.37" x2="91.63" y2="35.43"/><line class="cls-5" x1="26.91" y1="85.09" x2="31.06" y2="80.94"/><line class="cls-5" x1="80.94" y1="31.06" x2="85.09" y2="26.91"/><line class="cls-5" x1="35.43" y1="91.63" x2="38.37" y2="86.54"/><line class="cls-5" x1="73.63" y1="25.46" x2="76.57" y2="20.37"/><line class="cls-5" x1="45.35" y1="95.74" x2="46.87" y2="90.06"/><line class="cls-5" x1="65.13" y1="21.94" x2="66.65" y2="16.26"/></g><circle class="cls-2" cx="56" cy="56" r="2"/></svg>

src/components/direction-picker/icon--dont-rotate.svg

@@ -5,6 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="dont-rotate-active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M12.5888771,8.06902644 L13.86349,6.56266574 C14.4487406,7.40331746 14.8232375,8.40101099 14.9098696,9.47826182 L16.2580356,9.47826182 C16.8465207,9.47826182 17.1996118,10.1309454 16.8786199,10.6231329 L14.6209769,14.1433441 C14.3320842,14.6034325 13.6687009,14.6034325 13.3691085,14.1433441 L11.1221651,10.6231329 C10.8011732,10.1309454 11.1542643,9.47826182 11.7427495,9.47826182 L13.0267171,9.47826182 C12.9657526,8.97464215 12.8141722,8.49925787 12.5888771,8.06902644 Z M14.9322936,3.75140819 L4.41830686,16.1770289 C4.39906741,16.1997664 4.38220902,16.2237219 4.3677064,16.2485918 L3.88169314,16.8229711 C3.70332112,17.0337744 3.38783218,17.0600652 3.17702888,16.8816931 C2.96622558,16.7033211 2.93993483,16.3878322 3.11830686,16.1770289 L4.77600701,14.2179287 C3.67971789,13.1352279 3,11.6316859 3,9.9704494 C3,6.68563226 5.67493253,4 8.9704494,4 C10.2739544,4 11.4807977,4.42091588 12.4626123,5.13375885 L14.1183069,3.17702888 C14.2966789,2.96622558 14.6121678,2.93993483 14.8229711,3.11830686 C15.0110369,3.27743943 15.052247,3.54570491 14.9322936,3.75140819 Z M6.41391759,15.3667059 L7.68705488,13.8620891 C8.09106584,13.9959518 8.52258095,14.068446 8.9704494,14.068446 C9.48510642,14.068446 9.90132592,14.4846655 9.90132592,14.9993226 C9.90132592,15.5236093 9.48510642,15.9408988 8.9704494,15.9408988 C8.05583315,15.9408988 7.1890173,15.7348626 6.41391759,15.3667059 Z M11.2481962,6.56897787 C10.5973184,6.12907251 9.81364832,5.87245277 8.9704494,5.87245277 C6.71387632,5.87245277 4.87245277,7.71280635 4.87245277,9.9704494 C4.87245277,11.0565658 5.29863553,12.0461039 5.99219528,12.7806153 L11.2481962,6.56897787 Z" id="Combined-Shape" fill="#4D97FF"></path>
+        <!-- tw: update fill -->
+        <path d="M12.5888771,8.06902644 L13.86349,6.56266574 C14.4487406,7.40331746 14.8232375,8.40101099 14.9098696,9.47826182 L16.2580356,9.47826182 C16.8465207,9.47826182 17.1996118,10.1309454 16.8786199,10.6231329 L14.6209769,14.1433441 C14.3320842,14.6034325 13.6687009,14.6034325 13.3691085,14.1433441 L11.1221651,10.6231329 C10.8011732,10.1309454 11.1542643,9.47826182 11.7427495,9.47826182 L13.0267171,9.47826182 C12.9657526,8.97464215 12.8141722,8.49925787 12.5888771,8.06902644 Z M14.9322936,3.75140819 L4.41830686,16.1770289 C4.39906741,16.1997664 4.38220902,16.2237219 4.3677064,16.2485918 L3.88169314,16.8229711 C3.70332112,17.0337744 3.38783218,17.0600652 3.17702888,16.8816931 C2.96622558,16.7033211 2.93993483,16.3878322 3.11830686,16.1770289 L4.77600701,14.2179287 C3.67971789,13.1352279 3,11.6316859 3,9.9704494 C3,6.68563226 5.67493253,4 8.9704494,4 C10.2739544,4 11.4807977,4.42091588 12.4626123,5.13375885 L14.1183069,3.17702888 C14.2966789,2.96622558 14.6121678,2.93993483 14.8229711,3.11830686 C15.0110369,3.27743943 15.052247,3.54570491 14.9322936,3.75140819 Z M6.41391759,15.3667059 L7.68705488,13.8620891 C8.09106584,13.9959518 8.52258095,14.068446 8.9704494,14.068446 C9.48510642,14.068446 9.90132592,14.4846655 9.90132592,14.9993226 C9.90132592,15.5236093 9.48510642,15.9408988 8.9704494,15.9408988 C8.05583315,15.9408988 7.1890173,15.7348626 6.41391759,15.3667059 Z M11.2481962,6.56897787 C10.5973184,6.12907251 9.81364832,5.87245277 8.9704494,5.87245277 C6.71387632,5.87245277 4.87245277,7.71280635 4.87245277,9.9704494 C4.87245277,11.0565658 5.29863553,12.0461039 5.99219528,12.7806153 L11.2481962,6.56897787 Z" id="Combined-Shape" fill="#FF4D4D"></path>
     </g>
 </svg>

src/components/direction-picker/icon--handle.svg

@@ -1 +1,2 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><style>.cls-1,.cls-2{fill:#4c97ff;}.cls-1{opacity:0.15;}.cls-3{fill:#fff;}</style></defs><title>01_Dial Elements</title><circle class="cls-1" cx="20" cy="20" r="20"/><circle class="cls-2" cx="20" cy="20" r="16"/><path class="cls-3" d="M20.53,12.44l5,5A.74.74,0,0,1,25,18.68H22.37L21,26.86a1.08,1.08,0,0,1-2.13,0l-1.34-8.18H15a.74.74,0,0,1-.52-1.26l5-5A.77.77,0,0,1,20.53,12.44Z"/></svg>
+<!-- tw: update fill -->
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><style>.cls-1,.cls-2{fill:#FF4D4D;}.cls-1{opacity:0.15;}.cls-3{fill:#fff;}</style></defs><title>01_Dial Elements</title><circle class="cls-1" cx="20" cy="20" r="20"/><circle class="cls-2" cx="20" cy="20" r="16"/><path class="cls-3" d="M20.53,12.44l5,5A.74.74,0,0,1,25,18.68H22.37L21,26.86a1.08,1.08,0,0,1-2.13,0l-1.34-8.18H15a.74.74,0,0,1-.52-1.26l5-5A.77.77,0,0,1,20.53,12.44Z"/></svg>

src/components/direction-picker/icon--left-right.svg

@@ -6,9 +6,10 @@
     <defs></defs>
     <g id="left-right-active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Flip-Left-Right" transform="translate(2.000000, 4.000000)">
-            <path d="M4.66453333,2.41690667 L4.66453333,9.60624 C4.66453333,10.08224 4.08853333,10.3209067 3.7512,9.98357333 L0.156533333,6.38890667 C-0.0514666667,6.17957333 -0.0514666667,5.84090667 0.156533333,5.63290667 L3.7512,2.03824 C4.08853333,1.70090667 4.66453333,1.93957333 4.66453333,2.41690667" id="Fill-1" fill="#4D97FF" transform="translate(2.332533, 6.010929) scale(-1, 1) translate(-2.332533, -6.010929) "></path>
-            <path d="M7.87546667,11.7567733 C7.70213333,11.7567733 7.54213333,11.6901067 7.4088,11.5581067 C7.35546667,11.5047733 7.30213333,11.42344 7.26213333,11.34344 C7.2368,11.2647733 7.2088,11.18344 7.2088,11.0901067 C7.2088,11.0101067 7.2368,10.9167733 7.26213333,10.8381067 C7.30213333,10.7567733 7.35546667,10.6767733 7.4088,10.62344 C7.59546667,10.4381067 7.89013333,10.3701067 8.14213333,10.4767733 C8.22346667,10.5167733 8.29013333,10.5581067 8.35546667,10.62344 C8.4088,10.6767733 8.46213333,10.7567733 8.50346667,10.8381067 C8.5288,10.9167733 8.5568,11.0101067 8.5568,11.0901067 C8.5568,11.18344 8.5288,11.2647733 8.50346667,11.34344 C8.46213333,11.42344 8.42213333,11.5047733 8.35546667,11.5581067 C8.2368,11.6901067 8.06346667,11.7567733 7.87546667,11.7567733 Z M7.22306667,3.27757333 C7.22306667,2.90424 7.5164,2.61090667 7.88973333,2.61090667 C8.24973333,2.61090667 8.5564,2.90424 8.5564,3.27757333 C8.5564,3.63757333 8.24973333,3.94424 7.88973333,3.94424 C7.5164,3.94424 7.22306667,3.63757333 7.22306667,3.27757333 Z M7.22306667,5.87757333 C7.22306667,5.50424 7.5164,5.21090667 7.88973333,5.21090667 C8.24973333,5.21090667 8.5564,5.50424 8.5564,5.87757333 C8.5564,6.24957333 8.24973333,6.54424 7.88973333,6.54424 C7.5164,6.54424 7.22306667,6.24957333 7.22306667,5.87757333 Z M7.22306667,8.49090667 C7.22306667,8.11757333 7.5164,7.82424 7.88973333,7.82424 C8.24973333,7.82424 8.5564,8.11757333 8.5564,8.49090667 C8.5564,8.85090667 8.24973333,9.15757333 7.88973333,9.15757333 C7.5164,9.15757333 7.22306667,8.85090667 7.22306667,8.49090667 Z M7.87546667,1.33104 C7.79546667,1.33104 7.70213333,1.31770667 7.62346667,1.29104 C7.54213333,1.24970667 7.47546667,1.19637333 7.4088,1.14304 C7.35546667,1.07770667 7.30213333,0.997706667 7.26213333,0.916373333 C7.2368,0.837706667 7.2088,0.756373333 7.2088,0.664373333 C7.2088,0.58304 7.2368,0.49104 7.26213333,0.41104 C7.30213333,0.33104 7.35546667,0.249706667 7.4088,0.196373333 C7.59546667,0.01104 7.89013333,-0.0556266667 8.14213333,0.05104 C8.22346667,0.0897066667 8.29013333,0.13104 8.35546667,0.196373333 C8.47546667,0.317706667 8.5568,0.49104 8.5568,0.664373333 C8.5568,0.756373333 8.5288,0.837706667 8.50346667,0.916373333 C8.46213333,0.997706667 8.42213333,1.07770667 8.35546667,1.14304 C8.22346667,1.26437333 8.06346667,1.33104 7.87546667,1.33104 Z" id="Combined-Shape" fill-opacity="0.25" fill="#575E75"></path>
-            <path d="M11.102,9.60570667 L11.102,2.41637333 C11.102,1.93904 11.6793333,1.70037333 12.0166667,2.03770667 L15.61,5.63370667 C15.8193333,5.84170667 15.8193333,6.18037333 15.61,6.38970667 L12.0166667,9.98304 C11.6793333,10.3203733 11.102,10.0817067 11.102,9.60570667" id="Fill-3" fill="#4D97FF" transform="translate(13.434500, 6.010396) scale(-1, 1) translate(-13.434500, -6.010396) "></path>
+            <!-- tw: update fill x3 -->
+            <path d="M4.66453333,2.41690667 L4.66453333,9.60624 C4.66453333,10.08224 4.08853333,10.3209067 3.7512,9.98357333 L0.156533333,6.38890667 C-0.0514666667,6.17957333 -0.0514666667,5.84090667 0.156533333,5.63290667 L3.7512,2.03824 C4.08853333,1.70090667 4.66453333,1.93957333 4.66453333,2.41690667" id="Fill-1" fill="#FF4D4D" transform="translate(2.332533, 6.010929) scale(-1, 1) translate(-2.332533, -6.010929) "></path>
+            <path d="M7.87546667,11.7567733 C7.70213333,11.7567733 7.54213333,11.6901067 7.4088,11.5581067 C7.35546667,11.5047733 7.30213333,11.42344 7.26213333,11.34344 C7.2368,11.2647733 7.2088,11.18344 7.2088,11.0901067 C7.2088,11.0101067 7.2368,10.9167733 7.26213333,10.8381067 C7.30213333,10.7567733 7.35546667,10.6767733 7.4088,10.62344 C7.59546667,10.4381067 7.89013333,10.3701067 8.14213333,10.4767733 C8.22346667,10.5167733 8.29013333,10.5581067 8.35546667,10.62344 C8.4088,10.6767733 8.46213333,10.7567733 8.50346667,10.8381067 C8.5288,10.9167733 8.5568,11.0101067 8.5568,11.0901067 C8.5568,11.18344 8.5288,11.2647733 8.50346667,11.34344 C8.46213333,11.42344 8.42213333,11.5047733 8.35546667,11.5581067 C8.2368,11.6901067 8.06346667,11.7567733 7.87546667,11.7567733 Z M7.22306667,3.27757333 C7.22306667,2.90424 7.5164,2.61090667 7.88973333,2.61090667 C8.24973333,2.61090667 8.5564,2.90424 8.5564,3.27757333 C8.5564,3.63757333 8.24973333,3.94424 7.88973333,3.94424 C7.5164,3.94424 7.22306667,3.63757333 7.22306667,3.27757333 Z M7.22306667,5.87757333 C7.22306667,5.50424 7.5164,5.21090667 7.88973333,5.21090667 C8.24973333,5.21090667 8.5564,5.50424 8.5564,5.87757333 C8.5564,6.24957333 8.24973333,6.54424 7.88973333,6.54424 C7.5164,6.54424 7.22306667,6.24957333 7.22306667,5.87757333 Z M7.22306667,8.49090667 C7.22306667,8.11757333 7.5164,7.82424 7.88973333,7.82424 C8.24973333,7.82424 8.5564,8.11757333 8.5564,8.49090667 C8.5564,8.85090667 8.24973333,9.15757333 7.88973333,9.15757333 C7.5164,9.15757333 7.22306667,8.85090667 7.22306667,8.49090667 Z M7.87546667,1.33104 C7.79546667,1.33104 7.70213333,1.31770667 7.62346667,1.29104 C7.54213333,1.24970667 7.47546667,1.19637333 7.4088,1.14304 C7.35546667,1.07770667 7.30213333,0.997706667 7.26213333,0.916373333 C7.2368,0.837706667 7.2088,0.756373333 7.2088,0.664373333 C7.2088,0.58304 7.2368,0.49104 7.26213333,0.41104 C7.30213333,0.33104 7.35546667,0.249706667 7.4088,0.196373333 C7.59546667,0.01104 7.89013333,-0.0556266667 8.14213333,0.05104 C8.22346667,0.0897066667 8.29013333,0.13104 8.35546667,0.196373333 C8.47546667,0.317706667 8.5568,0.49104 8.5568,0.664373333 C8.5568,0.756373333 8.5288,0.837706667 8.50346667,0.916373333 C8.46213333,0.997706667 8.42213333,1.07770667 8.35546667,1.14304 C8.22346667,1.26437333 8.06346667,1.33104 7.87546667,1.33104 Z" id="Combined-Shape" fill-opacity="0.25" fill="#FF4D4D"></path>
+            <path d="M11.102,9.60570667 L11.102,2.41637333 C11.102,1.93904 11.6793333,1.70037333 12.0166667,2.03770667 L15.61,5.63370667 C15.8193333,5.84170667 15.8193333,6.18037333 15.61,6.38970667 L12.0166667,9.98304 C11.6793333,10.3203733 11.102,10.0817067 11.102,9.60570667" id="Fill-3" fill="#FF4D4D" transform="translate(13.434500, 6.010396) scale(-1, 1) translate(-13.434500, -6.010396) "></path>
         </g>
     </g>
 </svg>

src/components/drag-layer/drag-layer.css

@@ -9,7 +9,8 @@
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%
+    height: 100%;
+    direction: ltr;
 }
 
 .image-wrapper {

src/components/filter/icon--filter.svg

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14.5" height="14.6" viewBox="0 0 14.5 14.6">
-  <path fill="#4C97FF" d="M10.4 9.2l-.8-.1-.2-.2c.5-.5.8-1 1-1.6.2-.6.3-1.2.3-1.9 0-1-.2-1.9-.7-2.7-.4-.9-1.1-1.5-1.9-2C7.3.2 6.3 0 5.4 0c-.9 0-1.9.2-2.7.7-.9.5-1.5 1.2-2 2S0 4.4 0 5.4s.2 1.9.7 2.8c.5.8 1.2 1.4 2 1.9s1.7.7 2.7.7c.7 0 1.3-.1 1.9-.3.6-.3 1.1-.6 1.6-1l.2.3v.6l4.1 4.2 1.3-1.3-4.1-4.1zM8.7 7.3c-.4.6-.8 1.1-1.4 1.4-.6.3-1.2.5-1.9.5-.6 0-1.3-.2-1.8-.5-.6-.4-1.1-.8-1.4-1.4-.3-.6-.5-1.2-.5-1.9s.2-1.4.5-1.9.8-1 1.4-1.3c.5-.4 1.1-.5 1.8-.5s1.3.1 1.9.5c.6.3 1 .8 1.4 1.3.3.6.5 1.2.5 1.9S9 6.7 8.7 7.3z"/>
+  <!-- tw: update filter -->
+  <path fill="#FF4D4D" d="M10.4 9.2l-.8-.1-.2-.2c.5-.5.8-1 1-1.6.2-.6.3-1.2.3-1.9 0-1-.2-1.9-.7-2.7-.4-.9-1.1-1.5-1.9-2C7.3.2 6.3 0 5.4 0c-.9 0-1.9.2-2.7.7-.9.5-1.5 1.2-2 2S0 4.4 0 5.4s.2 1.9.7 2.8c.5.8 1.2 1.4 2 1.9s1.7.7 2.7.7c.7 0 1.3-.1 1.9-.3.6-.3 1.1-.6 1.6-1l.2.3v.6l4.1 4.2 1.3-1.3-4.1-4.1zM8.7 7.3c-.4.6-.8 1.1-1.4 1.4-.6.3-1.2.5-1.9.5-.6 0-1.3-.2-1.8-.5-.6-.4-1.1-.8-1.4-1.4-.3-.6-.5-1.2-.5-1.9s.2-1.4.5-1.9.8-1 1.4-1.3c.5-.4 1.1-.5 1.8-.5s1.3.1 1.9.5c.6.3 1 .8 1.4 1.3.3.6.5 1.2.5 1.9S9 6.7 8.7 7.3z"/>
 </svg>

src/components/filter/icon--x.svg

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8">
-  <path fill="none" stroke="#4C97FF" stroke-width="2" d="M1 7.333L7.333 1M1 1L7.333 7.333" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- tw: update stroke -->
+  <path fill="none" stroke="#FF4D4D" stroke-width="2" d="M1 7.333L7.333 1M1 1L7.333 7.333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/green-flag/green-flag.jsx

@@ -26,6 +26,8 @@ const GreenFlagComponent = function (props) {
             src={greenFlagIcon}
             title={title}
             onClick={onClick}
+            // tw: also fire click when opening context menu (right click on all systems and alt+click on chromebooks)
+            onContextMenu={onClick}
             {...componentProps}
         />
     );

src/components/gui/gui.css

@@ -34,7 +34,17 @@
 }
 
 .editor-wrapper {
-    flex-basis: 600px;
+    /*
+        This is carefully balanced--  the minimum width at which the GUI will be displayed is 1024px.
+        At that size, the stage pane is 408px wide, with $space of padding to each side.
+        However, we must also add the border width to the stage pane. All-in-all, the stage pane's final width is
+        408px + ($space + $stage-standard-border-width * 2) (one border & padding per left/right side).
+
+        @todo This is in place to prevent "doubling up" of horizontal scrollbars in narrow windows, but there are likely
+        much better ways to solve that (e.g. undo #2124, remove this flex-basis entirely). However, they run their own
+        risks of breaking things, so let's just leave this as-is for the time being.
+    */
+    flex-basis: calc(1024px - 408px - (($space + $stage-standard-border-width) * 2));
     flex-grow: 1;
     flex-shrink: 0;
     position: relative;
@@ -197,21 +207,9 @@
     /* pad entire wrapper to the left and right; allow children to fill width */
     padding-left: $space;
     padding-right: $space;
-}
 
-.stage-and-target-wrapper.large {
-    /* Fix the max width to max large stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(480px + calc($space * 2));
-}
-
-.stage-and-target-wrapper.large-constrained {
-    /* Fix the max width to max largeConstrained stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(408px + calc($space * 2));
-}
-
-.stage-and-target-wrapper.small {
-    /* Fix the max width to max small stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(240px + calc($space * 2));
+    /* this will only ever be as wide as the stage */
+    flex-basis: 0;
 }
 
 .target-wrapper {
@@ -309,6 +307,7 @@ $fade-out-distance: 15px;
     z-index: $z-index-alerts;
     position: absolute;
     margin-top: 53px;
+    pointer-events: none;
 }
 
 /*
@@ -318,3 +317,13 @@ $fade-out-distance: 15px;
 :global(.ReactModal__Body--open) {
     overflow: hidden;
 }
+
+/* tw: tw: when window is fullscreen, put a solid white background behind the stage */
+.fullscreen-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+}

src/components/gui/gui.jsx

@@ -82,13 +82,16 @@ const GUIComponent = props => {
         enableCommunity,
         intl,
         isCreating,
+        isEmbedded,
         isFullScreen,
         isPlayerOnly,
         isRtl,
         isShared,
+        isWindowFullScreen,
         loading,
         logo,
         renderLogin,
+        onClickAbout,
         onClickAccountNav,
         onCloseAccountNav,
         onLogOut,
@@ -105,6 +108,7 @@ const GUIComponent = props => {
         onRequestCloseTelemetryModal,
         onSeeCommunity,
         onShare,
+        onShowPrivacyPolicy,
         onTelemetryModalCancel,
         onTelemetryModalOptIn,
         onTelemetryModalOptOut,
@@ -138,18 +142,25 @@ const GUIComponent = props => {
         const stageSize = resolveStageSize(stageSizeMode, isFullSize);
 
         return isPlayerOnly ? (
-            <StageWrapper
-                isFullScreen={isFullScreen}
-                isRendererSupported={isRendererSupported}
-                isRtl={isRtl}
-                loading={loading}
-                stageSize={STAGE_SIZE_MODES.large}
-                vm={vm}
-            >
-                {alertsVisible ? (
-                    <Alerts className={styles.alertsContainer} />
+            <React.Fragment>
+                {/* tw: when window is fullscreen, put a solid white background behind the stage */}
+                {isWindowFullScreen ? (
+                    <div className={styles.fullscreenBackground} />
                 ) : null}
-            </StageWrapper>
+                <StageWrapper
+                    isFullScreen={isFullScreen}
+                    isEmbedded={isEmbedded}
+                    isRendererSupported={isRendererSupported}
+                    isRtl={isRtl}
+                    loading={loading}
+                    stageSize={STAGE_SIZE_MODES.large}
+                    vm={vm}
+                >
+                    {alertsVisible ? (
+                        <Alerts className={styles.alertsContainer} />
+                    ) : null}
+                </StageWrapper>
+            </React.Fragment>
         ) : (
             <Box
                 className={styles.pageWrapper}
@@ -162,6 +173,7 @@ const GUIComponent = props => {
                         onOptIn={onTelemetryModalOptIn}
                         onOptOut={onTelemetryModalOptOut}
                         onRequestClose={onRequestCloseTelemetryModal}
+                        onShowPrivacyPolicy={onShowPrivacyPolicy}
                     />
                 ) : null}
                 {loading ? (
@@ -218,6 +230,7 @@ const GUIComponent = props => {
                     logo={logo}
                     renderLogin={renderLogin}
                     showComingSoon={showComingSoon}
+                    onClickAbout={onClickAbout}
                     onClickAccountNav={onClickAccountNav}
                     onClickLogo={onClickLogo}
                     onCloseAccountNav={onCloseAccountNav}
@@ -332,6 +345,7 @@ const GUIComponent = props => {
 
                         <Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
                             <StageWrapper
+                                isFullScreen={isFullScreen}
                                 isRendererSupported={isRendererSupported}
                                 isRtl={isRtl}
                                 stageSize={stageSize}
@@ -379,15 +393,18 @@ GUIComponent.propTypes = {
     enableCommunity: PropTypes.bool,
     intl: intlShape.isRequired,
     isCreating: PropTypes.bool,
+    isEmbedded: PropTypes.bool,
     isFullScreen: PropTypes.bool,
     isPlayerOnly: PropTypes.bool,
     isRtl: PropTypes.bool,
     isShared: PropTypes.bool,
+    isWindowFullScreen: PropTypes.bool,
     loading: PropTypes.bool,
     logo: PropTypes.string,
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
+    onClickAbout: PropTypes.func,
     onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
@@ -399,6 +416,7 @@ GUIComponent.propTypes = {
     onRequestCloseTelemetryModal: PropTypes.func,
     onSeeCommunity: PropTypes.func,
     onShare: PropTypes.func,
+    onShowPrivacyPolicy: PropTypes.func,
     onTabSelect: PropTypes.func,
     onTelemetryModalCancel: PropTypes.func,
     onTelemetryModalOptIn: PropTypes.func,
@@ -435,6 +453,7 @@ GUIComponent.defaultProps = {
 };
 
 const mapStateToProps = state => ({
+    isWindowFullScreen: state.scratchGui.tw.isWindowFullScreen,
     // This is the button's mode, as opposed to the actual current state
     stageSizeMode: state.scratchGui.stageSize.stageSize
 });

src/components/gui/icon--code.svg

@@ -5,6 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Code-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M15,14.51 C15,14.786 14.776,15.01 14.5,15.01 L9.197,15.01 C9.064,15.01 8.937,15.062 8.844,15.156 L8.146,15.854 C8.053,15.947 7.926,16 7.793,16 L6.207,16 C6.074,16 5.947,15.947 5.854,15.854 L5.156,15.156 C5.062,15.062 4.936,15.01 4.803,15.01 L3.5,15.01 C3.224,15.01 3,14.786 3,14.51 L3,11.5 C3,11.224 3.224,11 3.5,11 L4.793,11 C4.926,11 5.053,11.053 5.146,11.146 L5.854,11.854 C5.947,11.947 6.074,12 6.207,12 L7.793,12 C7.926,12 8.053,11.947 8.146,11.854 L8.854,11.146 C8.947,11.053 9.074,11 9.207,11 L14.5,11 C14.776,11 15,11.224 15,11.5 L15,14.51 Z M17,9.51 C17,9.786 16.776,10.01 16.5,10.01 L9.197,10.01 C9.064,10.01 8.937,10.062 8.844,10.156 L8.146,10.854 C8.053,10.947 7.926,11 7.793,11 L6.207,11 C6.074,11 5.947,10.947 5.854,10.854 L5.156,10.156 C5.062,10.062 4.936,10.01 4.803,10.01 L3.5,10.01 C3.224,10.01 3,9.786 3,9.51 L3,6.5 C3,6.224 3.224,6 3.5,6 L4.793,6 C4.926,6 5.053,6.053 5.146,6.146 L5.854,6.854 C5.947,6.947 6.074,7 6.207,7 L7.793,7 C7.926,7 8.053,6.947 8.146,6.854 L8.854,6.146 C8.947,6.053 9.074,6 9.207,6 L16.5,6 C16.776,6 17,6.224 17,6.5 L17,9.51 Z" id="Code" fill="#4C97FF"></path>
+        <!-- tw: fill color changed -->
+        <path d="M15,14.51 C15,14.786 14.776,15.01 14.5,15.01 L9.197,15.01 C9.064,15.01 8.937,15.062 8.844,15.156 L8.146,15.854 C8.053,15.947 7.926,16 7.793,16 L6.207,16 C6.074,16 5.947,15.947 5.854,15.854 L5.156,15.156 C5.062,15.062 4.936,15.01 4.803,15.01 L3.5,15.01 C3.224,15.01 3,14.786 3,14.51 L3,11.5 C3,11.224 3.224,11 3.5,11 L4.793,11 C4.926,11 5.053,11.053 5.146,11.146 L5.854,11.854 C5.947,11.947 6.074,12 6.207,12 L7.793,12 C7.926,12 8.053,11.947 8.146,11.854 L8.854,11.146 C8.947,11.053 9.074,11 9.207,11 L14.5,11 C14.776,11 15,11.224 15,11.5 L15,14.51 Z M17,9.51 C17,9.786 16.776,10.01 16.5,10.01 L9.197,10.01 C9.064,10.01 8.937,10.062 8.844,10.156 L8.146,10.854 C8.053,10.947 7.926,11 7.793,11 L6.207,11 C6.074,11 5.947,10.947 5.854,10.854 L5.156,10.156 C5.062,10.062 4.936,10.01 4.803,10.01 L3.5,10.01 C3.224,10.01 3,9.786 3,9.51 L3,6.5 C3,6.224 3.224,6 3.5,6 L4.793,6 C4.926,6 5.053,6.053 5.146,6.146 L5.854,6.854 C5.947,6.947 6.074,7 6.207,7 L7.793,7 C7.926,7 8.053,6.947 8.146,6.854 L8.854,6.146 C8.947,6.053 9.074,6 9.207,6 L16.5,6 C16.776,6 17,6.224 17,6.5 L17,9.51 Z" id="Code" fill="#FF4D4D"></path>
     </g>
 </svg>

src/components/gui/icon--costumes.svg

@@ -5,6 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Paint-Editor-V1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M16.1998226,6.58685277 C15.5417294,7.94213763 14.5662678,9.50539101 13.6457617,10.6638734 C12.8750097,11.639511 12.2567593,12.2117734 11.6659868,12.4909258 C11.5972923,12.5341944 11.5299717,12.5481521 11.4461644,12.5481521 C11.3912089,12.5481521 11.3362533,12.5341944 11.2675588,12.5048834 C11.1439087,12.4644063 11.0339976,12.366703 10.979042,12.2410844 C10.8141752,11.8628329 10.580614,11.5432035 10.2659932,11.2905705 C9.94862474,11.053291 9.59141344,10.871842 9.18062043,10.7741386 C9.05559648,10.7462234 8.93194641,10.6638734 8.86325193,10.5368591 C8.79455745,10.4251981 8.76845354,10.2856219 8.79455745,10.1474415 C8.9594242,9.50539101 9.38532999,8.75167956 10.1272304,7.81651905 C11.5849273,5.94480227 14.4975733,3.16863175 15.9113058,3.01370218 C16.2959949,2.9578717 16.5158172,3.08349028 16.6532062,3.19515123 C17.0117914,3.50221886 17.3690027,4.17358036 16.1998226,6.58685277 Z M10.2654437,13.9990466 C10.3478771,14.6969276 10.1692714,15.3808509 9.74199174,15.9251981 C9.37241543,16.412319 8.85033737,16.7486977 8.25956482,16.8882738 C8.23208703,16.9022315 8.19087034,16.9161891 8.16339255,16.9161891 L8.0246297,16.9301467 C7.76496455,16.9720196 7.51766442,16.9999348 7.2689904,16.9999348 C5.29196321,16.9999348 3.90296079,15.6586076 3.35477883,14.7806733 C3.14732149,14.4317328 2.83270076,13.7896823 3.10747869,13.3849114 C3.17617317,13.287208 3.36714383,13.0778437 3.77931072,13.1615894 C5.08450588,13.4407418 5.55162835,12.8545218 5.63543562,12.7428609 C6.51472499,11.5843784 8.14965365,11.3750141 9.27486926,12.2403866 C9.82579901,12.6730728 10.1816364,13.3011656 10.2654437,13.9990466 Z" id="Fill-4" fill="#4C97FF"></path>
+        <!-- tw: fill color changed -->
+        <path d="M16.1998226,6.58685277 C15.5417294,7.94213763 14.5662678,9.50539101 13.6457617,10.6638734 C12.8750097,11.639511 12.2567593,12.2117734 11.6659868,12.4909258 C11.5972923,12.5341944 11.5299717,12.5481521 11.4461644,12.5481521 C11.3912089,12.5481521 11.3362533,12.5341944 11.2675588,12.5048834 C11.1439087,12.4644063 11.0339976,12.366703 10.979042,12.2410844 C10.8141752,11.8628329 10.580614,11.5432035 10.2659932,11.2905705 C9.94862474,11.053291 9.59141344,10.871842 9.18062043,10.7741386 C9.05559648,10.7462234 8.93194641,10.6638734 8.86325193,10.5368591 C8.79455745,10.4251981 8.76845354,10.2856219 8.79455745,10.1474415 C8.9594242,9.50539101 9.38532999,8.75167956 10.1272304,7.81651905 C11.5849273,5.94480227 14.4975733,3.16863175 15.9113058,3.01370218 C16.2959949,2.9578717 16.5158172,3.08349028 16.6532062,3.19515123 C17.0117914,3.50221886 17.3690027,4.17358036 16.1998226,6.58685277 Z M10.2654437,13.9990466 C10.3478771,14.6969276 10.1692714,15.3808509 9.74199174,15.9251981 C9.37241543,16.412319 8.85033737,16.7486977 8.25956482,16.8882738 C8.23208703,16.9022315 8.19087034,16.9161891 8.16339255,16.9161891 L8.0246297,16.9301467 C7.76496455,16.9720196 7.51766442,16.9999348 7.2689904,16.9999348 C5.29196321,16.9999348 3.90296079,15.6586076 3.35477883,14.7806733 C3.14732149,14.4317328 2.83270076,13.7896823 3.10747869,13.3849114 C3.17617317,13.287208 3.36714383,13.0778437 3.77931072,13.1615894 C5.08450588,13.4407418 5.55162835,12.8545218 5.63543562,12.7428609 C6.51472499,11.5843784 8.14965365,11.3750141 9.27486926,12.2403866 C9.82579901,12.6730728 10.1816364,13.3011656 10.2654437,13.9990466 Z" id="Fill-4" fill="#FF4D4D"></path>
     </g>
 </svg>

src/components/gui/icon--sounds.svg

@@ -5,6 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Sounds-V1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M12.6307801,13.637142 C12.480284,13.637142 12.3255684,13.5975477 12.1849178,13.5141169 C11.7671856,13.2652385 11.6279416,12.7236452 11.8754866,12.303663 C12.346666,11.5004646 12.346666,10.5049512 11.8754866,9.70316691 C11.6279416,9.28177059 11.7671856,8.74017733 12.1849178,8.49129896 C12.6068695,8.24524876 13.1441547,8.38382876 13.3888867,8.80239692 C14.1863754,10.1599153 14.1863754,11.8455006 13.3888867,13.2030189 C13.225732,13.4830071 12.9317723,13.637142 12.6307801,13.637142 Z M15.2566363,15.0553244 C15.1061402,15.0553244 14.950018,15.0157301 14.810774,14.9322993 C14.3930418,14.683421 14.2537977,14.1418277 14.5013427,13.7218455 C15.4873032,12.0447447 15.4873032,9.96038836 14.5013427,8.28470164 C14.2537977,7.8647194 14.3930418,7.32171206 14.810774,7.07283369 C15.2299126,6.82819757 15.7671978,6.96536349 16.0147428,7.38393165 C17.3284191,9.61535244 17.3284191,12.3897806 16.0147428,14.6212014 C15.8501816,14.9011895 15.5576285,15.0553244 15.2566363,15.0553244 Z M10.3785286,6.67858774 L10.3785286,15.3200405 C10.3785286,16.3438356 9.17174676,16.8797725 8.41926624,16.1897007 L6.79475223,14.6978446 C6.21949142,14.1703921 5.46982391,13.8776773 4.69061978,13.8776773 L4.40650564,13.8776773 C3.63011453,13.8776773 3,13.2455828 3,12.4635956 L3,9.5505875 C3,8.77001445 3.63011453,8.13650589 4.40650564,8.13650589 L4.67514822,8.13650589 C5.45435235,8.13650589 6.20401986,7.84379099 6.77928066,7.31633855 L8.41926624,5.81034163 C9.17174676,5.1202698 10.3785286,5.65620673 10.3785286,6.67858774 Z" id="Combined-Shape" fill="#4C97FF"></path>
+        <!-- tw: fill color changed -->
+        <path d="M12.6307801,13.637142 C12.480284,13.637142 12.3255684,13.5975477 12.1849178,13.5141169 C11.7671856,13.2652385 11.6279416,12.7236452 11.8754866,12.303663 C12.346666,11.5004646 12.346666,10.5049512 11.8754866,9.70316691 C11.6279416,9.28177059 11.7671856,8.74017733 12.1849178,8.49129896 C12.6068695,8.24524876 13.1441547,8.38382876 13.3888867,8.80239692 C14.1863754,10.1599153 14.1863754,11.8455006 13.3888867,13.2030189 C13.225732,13.4830071 12.9317723,13.637142 12.6307801,13.637142 Z M15.2566363,15.0553244 C15.1061402,15.0553244 14.950018,15.0157301 14.810774,14.9322993 C14.3930418,14.683421 14.2537977,14.1418277 14.5013427,13.7218455 C15.4873032,12.0447447 15.4873032,9.96038836 14.5013427,8.28470164 C14.2537977,7.8647194 14.3930418,7.32171206 14.810774,7.07283369 C15.2299126,6.82819757 15.7671978,6.96536349 16.0147428,7.38393165 C17.3284191,9.61535244 17.3284191,12.3897806 16.0147428,14.6212014 C15.8501816,14.9011895 15.5576285,15.0553244 15.2566363,15.0553244 Z M10.3785286,6.67858774 L10.3785286,15.3200405 C10.3785286,16.3438356 9.17174676,16.8797725 8.41926624,16.1897007 L6.79475223,14.6978446 C6.21949142,14.1703921 5.46982391,13.8776773 4.69061978,13.8776773 L4.40650564,13.8776773 C3.63011453,13.8776773 3,13.2455828 3,12.4635956 L3,9.5505875 C3,8.77001445 3.63011453,8.13650589 4.40650564,8.13650589 L4.67514822,8.13650589 C5.45435235,8.13650589 6.20401986,7.84379099 6.77928066,7.31633855 L8.41926624,5.81034163 C9.17174676,5.1202698 10.3785286,5.65620673 10.3785286,6.67858774 Z" id="Combined-Shape" fill="#FF4D4D"></path>
     </g>
 </svg>

src/components/library/library.jsx

@@ -217,9 +217,9 @@ class LibraryComponent extends React.Component {
                             extensionId={dataItem.extensionId}
                             featured={dataItem.featured}
                             hidden={dataItem.hidden}
-                            iconMd5={dataItem.md5}
+                            iconMd5={dataItem.costumes ? dataItem.costumes[0].md5ext : dataItem.md5ext}
                             iconRawURL={dataItem.rawURL}
-                            icons={dataItem.json && dataItem.json.costumes}
+                            icons={dataItem.costumes}
                             id={index}
                             insetIconURL={dataItem.insetIconURL}
                             internetConnectionRequired={dataItem.internetConnectionRequired}

src/components/loader/loader.css

@@ -17,6 +17,11 @@
     color: white;
 }
 
+/* tw: dark theme */
+[theme="dark"] .background {
+    background-color: $motion-primary-dark;
+}
+
 .fullscreen {
     /* Break out of the layout using position: fixed to cover the whole screen */
     position: fixed;
@@ -180,3 +185,19 @@
     height: 20px;
     margin: 5px 0;
 }
+
+.tw-progress-outer {
+    position: relative;
+    width: 250px;
+    height: 5px;
+    border: 1px solid white;
+    margin: auto;
+}
+.tw-progress-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0;
+    background-color: white;
+}

src/components/loader/loader.jsx

@@ -1,104 +1,25 @@
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessages, FormattedMessage, intlShape, injectIntl} from 'react-intl';
 import classNames from 'classnames';
 import styles from './loader.css';
 import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
 
 import topBlock from './top-block.svg';
 import middleBlock from './middle-block.svg';
 import bottomBlock from './bottom-block.svg';
-const messages = [
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Creating blocks …"
-                description="One of the loading messages"
-                id="gui.loader.message1"
-            />
-        ),
-        weight: 50
-    },
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Loading sprites …"
-                description="One of the loading messages"
-                id="gui.loader.message2"
-            />
-        ),
-        weight: 50
-    },
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Loading sounds …"
-                description="One of the loading messages"
-                id="gui.loader.message3"
-            />
-        ),
-        weight: 50
-    },
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Loading extensions …"
-                description="One of the loading messages"
-                id="gui.loader.message4"
-            />
-        ),
-        weight: 50
-    },
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Creating blocks …"
-                description="One of the loading messages"
-                id="gui.loader.message1"
-            />
-        ),
-        weight: 20
-    },
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Herding cats …"
-                description="One of the loading messages"
-                id="gui.loader.message5"
-            />
-        ),
-        weight: 1
-    },
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Transmitting nanos …"
-                description="One of the loading messages"
-                id="gui.loader.message6"
-            />
-        ),
-        weight: 1
-    },
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Inflating gobos …"
-                description="One of the loading messages"
-                id="gui.loader.message7"
-            />
-        ),
-        weight: 1
-    },
-    {
-        message: (
-            <FormattedMessage
-                defaultMessage="Preparing emojis …"
-                description="One of the loading messages"
-                id="gui.loader.message8"
-            />
-        ),
-        weight: 1
-    }
-];
+
+// tw:
+// we make some rather large changes here:
+//  - remove random message, replaced with message dependent on what is actually being loaded
+//  - add a progress bar
+//  - bring in intl so that we can translate everything
+// The way of doing this is extremely unusual and weird compared to how things are typically done for performance.
+// This is because react updates are too performance crippling to handle the progress bar rapidly updating.
+
+// tw:
+// progress bar logic removed entirely as it is unneeded in desktop build
+
 const mainMessages = {
     'gui.loader.headline': (
         <FormattedMessage
@@ -116,34 +37,56 @@ const mainMessages = {
     )
 };
 
+const messages = defineMessages({
+    generic: {
+        defaultMessage: 'Loading project …',
+        description: 'Initial generic loading message',
+        id: 'tw.loader.generic'
+    },
+    projectData: {
+        defaultMessage: 'Loading project data …',
+        description: 'Appears when loading project data',
+        id: 'tw.loader.data'
+    },
+    assetsKnown: {
+        defaultMessage: 'Loading assets ({complete}/{total}) …',
+        description: 'Appears when loading project assets and amount of assets is known',
+        id: 'tw.loader.assets.known'
+    },
+    assetsUnknown: {
+        defaultMessage: 'Loading assets …',
+        description: 'Appears when loading project assets but amount of assets is unknown',
+        id: 'tw.loader.assets.unknown'
+    }
+});
+
 class LoaderComponent extends React.Component {
     constructor (props) {
         super(props);
-        this.state = {
-            messageNumber: this.chooseRandomMessage()
-        };
+        this._state = 0;
+        bindAll(this, [
+            'messageRef'
+        ]);
     }
     componentDidMount () {
-        // Start an interval to choose a new message every 5 seconds
-        this.intervalId = setInterval(() => {
-            this.setState({messageNumber: this.chooseRandomMessage()});
-        }, 5000);
+        this.updateMessage();
     }
-    componentWillUnmount () {
-        clearInterval(this.intervalId);
-    }
-    chooseRandomMessage () {
-        let messageNumber;
-        const sum = messages.reduce((acc, m) => acc + m.weight, 0);
-        let rand = sum * Math.random();
-        for (let i = 0; i < messages.length; i++) {
-            rand -= messages[i].weight;
-            if (rand <= 0) {
-                messageNumber = i;
-                break;
-            }
+    updateMessage () {
+        if (this._state === 0) {
+            this.message.textContent = this.props.intl.formatMessage(messages.generic);
+        } else if (this._state === 1) {
+            this.message.textContent = this.props.intl.formatMessage(messages.projectData);
+        } else if (this.total > 0) {
+            this.message.textContent = this.props.intl.formatMessage(messages.assetsKnown, {
+                complete: this.complete,
+                total: this.total
+            });
+        } else {
+            this.message.textContent = this.props.intl.formatMessage(messages.assetsUnknown);
         }
-        return messageNumber;
+    }
+    messageRef (element) {
+        this.message = element;
     }
     render () {
         return (
@@ -173,17 +116,8 @@ class LoaderComponent extends React.Component {
                     <div className={styles.messageContainerOuter}>
                         <div
                             className={styles.messageContainerInner}
-                            style={{transform: `translate(0, -${this.state.messageNumber * 25}px)`}}
-                        >
-                            {messages.map((m, i) => (
-                                <div
-                                    className={styles.message}
-                                    key={i}
-                                >
-                                    {m.message}
-                                </div>
-                            ))}
-                        </div>
+                            ref={this.messageRef}
+                        />
                     </div>
                 </div>
             </div>
@@ -193,6 +127,7 @@ class LoaderComponent extends React.Component {
 
 LoaderComponent.propTypes = {
     isFullScreen: PropTypes.bool,
+    intl: intlShape.isRequired,
     messageId: PropTypes.string
 };
 LoaderComponent.defaultProps = {
@@ -200,4 +135,4 @@ LoaderComponent.defaultProps = {
     messageId: 'gui.loader.headline'
 };
 
-export default LoaderComponent;
+export default injectIntl(LoaderComponent);

src/components/loader/tw-progress-monitor.js

@@ -0,0 +1,111 @@
+// This file implements some extremely terrible tricks to monitor project loading progress.
+// Please don't use this as a reference for "good JS code"
+
+let total = 0;
+let complete = 0;
+
+// 0 - none
+// 1 - load json
+// 2 - load assets
+let state = 0;
+
+let currentProgress = 0;
+
+let progressHandler = (state, progress, complete, total) => {};
+
+export const setProgressHandler = newHandler => {
+    progressHandler = newHandler;
+    progressHandler(state, currentProgress, complete, total);
+};
+
+let progressHandlerTimeout = null;
+const fireProgressHandler = () => {
+    progressHandler(state, currentProgress, complete, total);
+    progressHandlerTimeout = null;
+};
+
+const queueProgressHandlerUpdate = () => {
+    if (progressHandlerTimeout === null) {
+        progressHandlerTimeout = requestAnimationFrame(fireProgressHandler);
+    }
+};
+
+const setProgress = progress => {
+    if (progress < 0) {
+        progress = 0;
+    }
+    if (progress > 1) {
+        progress = 1;
+    }
+    currentProgress = progress;
+    queueProgressHandlerUpdate();
+};
+
+const setState = newState => {
+    if (state === newState) {
+        return;
+    }
+    state = newState;
+    complete = 0;
+    total = 0;
+    setProgress(0);
+};
+
+export const fetchWithProgress = url => {
+    setState(1);
+    return new Promise((resolve, reject) => {
+        // fetch() does not support progress, so we use XMLHttpRequest
+        const xhr = new XMLHttpRequest();
+        xhr.responseType = 'blob';
+        xhr.onload = () => {
+            resolve(new Response(xhr.response, {
+                status: xhr.status,
+                statusText: xhr.statusText
+            }));
+        };
+        xhr.onloadend = () => setProgress(1);
+        xhr.onerror = () => reject(new Error('[tw-progress-monitor] xhr failed'));
+        xhr.onprogress = e => {
+            if (e.lengthComputable) {
+                setProgress(e.loaded / e.total);
+            }
+        };
+        xhr.open('GET', url);
+        xhr.send();
+    });
+};
+
+// Scratch uses fetch() to download the project JSON, so we override it to monitor when the project is being downloaded.
+const originalFetch = window.fetch;
+window.fetch = (url, opts) => {
+    const isGET = typeof opts === 'object' && opts && opts.method === 'GET';
+    const isProjectURL = typeof url === 'string' && /^https:\/\/projects\.scratch\.mit\.edu\/\d+$/.test(url);
+    if (isGET && isProjectURL) {
+        return fetchWithProgress(url);
+    }
+    return originalFetch(url, opts);
+};
+
+const handleWorkerMessage = e => {
+    const data = e.data;
+    if (Array.isArray(data)) {
+        complete += data.length;
+        setProgress(complete / total);
+    }
+};
+
+let downloadWorker = null;
+const originalPostMessage = window.Worker.prototype.postMessage;
+window.Worker.prototype.postMessage = function (message) {
+    if (downloadWorker === null) {
+        if (message && message.url && message.id && message.options) {
+            downloadWorker = this;
+            downloadWorker.addEventListener('message', handleWorkerMessage);
+        }
+    }
+    if (downloadWorker === this) {
+        setState(2);
+        total++;
+    }
+    originalPostMessage.call(this, message);
+};

src/components/menu-bar/author-info.css

@@ -37,3 +37,11 @@
 .username {
     font-weight: bold;
 }
+
+.username-link, .project-link {
+    color: $ui-white !important;
+    text-decoration: none;
+}
+.username-link:hover, .project-link:hover {
+    text-decoration: underline;
+}

src/components/menu-bar/author-info.jsx

@@ -6,9 +6,11 @@ import UserAvatar from './user-avatar.jsx';
 
 import styles from './author-info.css';
 
+// tw: make author username and avatar clickable, as well as make the project title link link to the project itself
 const AuthorInfo = ({
     className,
     imageUrl,
+    projectId,
     projectTitle,
     // TODO: use userId to link to user's profile
     userId, // eslint-disable-line no-unused-vars
@@ -20,14 +22,38 @@ const AuthorInfo = ({
             styles.authorInfo
         )}
     >
-        <UserAvatar
-            className={styles.avatar}
-            imageUrl={imageUrl}
-        />
+        <a
+            className={styles.usernameLink}
+            href={`https://scratch.mit.edu/users/${username}/`}
+            target="_blank"
+            rel="noreferrer"
+        >
+            <UserAvatar
+                className={styles.avatar}
+                imageUrl={imageUrl}
+            />
+        </a>
         <div className={styles.titleAuthor}>
-            <span className={styles.projectTitle}>
-                {projectTitle}
-            </span>
+            {projectId ? (
+                <a
+                    className={styles.projectLink}
+                    href={`https://scratch.mit.edu/projects/${projectId}/`}
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    {/* tw: full project title as hover text */}
+                    <span
+                        className={styles.projectTitle}
+                        title={projectTitle}
+                    >
+                        {projectTitle}
+                    </span>
+                </a>
+            ) : (
+                <span className={styles.projectTitle}>
+                    {projectTitle}
+                </span>
+            )}
             <div>
                 <span className={styles.usernameLine}>
                     <FormattedMessage
@@ -35,7 +61,14 @@ const AuthorInfo = ({
                         description="Shows that a project was created by this user"
                         id="gui.authorInfo.byUser"
                         values={{
-                            username: <span className={styles.username}>{username}</span>
+                            username: <span className={styles.username}>
+                                <a
+                                    className={styles.usernameLink}
+                                    href={`https://scratch.mit.edu/users/${username}/`}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >{username}</a>
+                            </span>
                         }}
                     />
                 </span>
@@ -47,6 +80,7 @@ const AuthorInfo = ({
 AuthorInfo.propTypes = {
     className: PropTypes.string,
     imageUrl: PropTypes.string,
+    projectId: PropTypes.string,
     projectTitle: PropTypes.string,
     userId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     username: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])

src/components/menu-bar/icon--about.svg

@@ -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>

src/components/menu-bar/menu-bar.css

@@ -31,6 +31,11 @@
     color: $ui-white;
 }
 
+/* tw: dark theme */
+[theme="dark"] .menu-bar {
+    background-color: $motion-primary-dark;
+}
+
 .main-menu {
     display: flex;
     flex-direction: row;
@@ -116,9 +121,13 @@
 }
 
 .feedback-link {
-    color: $motion-primary;
+    color: $motion-primary !important;
     text-decoration: none;
 }
+/* tw: dark theme */
+[theme="dark"] .feedback-link {
+    color: $motion-primary-dark !important;
+}
 
 .feedback-button {
     background-color: $ui-white;
@@ -216,5 +225,17 @@
 }
 
 .mystuff > a {
-  background-image: url("/images/mystuff.png");
+  /* background-image: url("/images/mystuff.png"); */
+}
+
+.about-icon {
+    height: 1.25rem;
+    margin: 0.5rem;
+    vertical-align: middle;
+}
+
+/* tw: styles to override <a> styles */
+.menu-item-link {
+    color: $ui-white !important;
+    text-decoration: none;
 }

src/components/menu-bar/menu-bar.jsx

@@ -16,20 +16,25 @@ import ShareButton from './share-button.jsx';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import Divider from '../divider/divider.jsx';
 import LanguageSelector from '../../containers/language-selector.jsx';
-import SaveStatus from './save-status.jsx';
 import SBFileUploader from '../../containers/sb-file-uploader.jsx';
 import ProjectWatcher from '../../containers/project-watcher.jsx';
 import MenuBarMenu from './menu-bar-menu.jsx';
 import {MenuItem, MenuSection} from '../menu/menu.jsx';
 import ProjectTitleInput from './project-title-input.jsx';
 import AuthorInfo from './author-info.jsx';
-import AccountNav from '../../containers/account-nav.jsx';
-import LoginDropdown from './login-dropdown.jsx';
 import SB3Downloader from '../../containers/sb3-downloader.jsx';
 import DeletionRestorer from '../../containers/deletion-restorer.jsx';
 import TurboMode from '../../containers/turbo-mode.jsx';
 import MenuBarHOC from '../../containers/menu-bar-hoc.jsx';
 
+import FramerateChanger from '../../containers/tw-framerate-changer.jsx';
+import HighQualityPen from '../../containers/tw-high-quality-pen.jsx';
+import ChangeUsername from '../../containers/tw-change-username.jsx';
+import CloudVariablesToggler from '../../containers/tw-cloud-toggler.jsx';
+import VMOptions from '../../containers/tw-vm-options.jsx';
+import TWAutoSaveLoader from '../../containers/tw-autosave-loader.jsx';
+import TWSaveStatus from './tw-save-status.jsx';
+
 import {openTipsLibrary} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
 import {
@@ -51,6 +56,15 @@ import {
     openEditMenu,
     closeEditMenu,
     editMenuOpen,
+    openSettingsMenu,
+    closeSettingMenu,
+    settingsMenuOpen,
+    openHelpMenu,
+    closeHelpMenu,
+    helpMenuOpen,
+    openErrorsMenu,
+    closeErrorsMenu,
+    errorsMenuOpen,
     openLanguageMenu,
     closeLanguageMenu,
     languageMenuOpen,
@@ -69,11 +83,15 @@ 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 errorIcon from './tw-error.svg';
 
 import scratchLogo from './scratch-logo.svg';
 
 import sharedMessages from '../../lib/shared-messages';
 
+import SeeInsideButton from './tw-see-inside.jsx';
+
 const ariaMessages = defineMessages({
     language: {
         id: 'gui.menuBar.LanguageSelector',
@@ -87,6 +105,14 @@ const ariaMessages = defineMessages({
     }
 });
 
+const twMessages = defineMessages({
+    compileError: {
+        id: 'tw.menuBar.compileError',
+        defaultMessage: '{sprite}: {error}',
+        description: 'Error message in error menu'
+    }
+});
+
 const MenuBarItemTooltip = ({
     children,
     className,
@@ -141,10 +167,43 @@ 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
+};
+
+// Unlike <MenuItem href="">, this uses an actual <a>
+const MenuItemLink = props => (
+    <a
+        href={props.href}
+        // _blank is safe because of noopener
+        // eslint-disable-next-line react/jsx-no-target-blank
+        target="_blank"
+        rel="noopener"
+        className={styles.menuItemLink}
+    >
+        <MenuItem>{props.children}</MenuItem>
+    </a>
+);
+
+MenuItemLink.propTypes = {
+    children: PropTypes.node.isRequired,
+    href: PropTypes.string.isRequired
+};
+
 class MenuBar extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'handleClickSeeInside',
             'handleClickNew',
             'handleClickRemix',
             'handleClickSave',
@@ -221,7 +280,7 @@ class MenuBar extends React.Component {
     handleKeyPress (event) {
         const modifier = bowser.mac ? event.metaKey : event.ctrlKey;
         if (modifier && event.key === 's') {
-            this.props.onClickSave();
+            // tw: disable Ctrl+S for now until it can be hooked up to the proper API
             event.preventDefault();
         }
     }
@@ -269,6 +328,9 @@ class MenuBar extends React.Component {
         }
         }
     }
+    handleClickSeeInside () {
+        this.props.onClickSeeInside();
+    }
     render () {
         const saveNowMessage = (
             <FormattedMessage
@@ -311,6 +373,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(
@@ -320,17 +384,19 @@ class MenuBar extends React.Component {
             >
                 <div className={styles.mainMenu}>
                     <div className={styles.fileGroup}>
-                        <div className={classNames(styles.menuBarItem)}>
-                            <img
-                                alt="Scratch"
-                                className={classNames(styles.scratchLogo, {
-                                    [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
-                                })}
-                                draggable={false}
-                                src={this.props.logo}
-                                onClick={this.props.onClickLogo}
-                            />
-                        </div>
+                        {false && this.props.onClickLogo ? (
+                            <div className={classNames(styles.menuBarItem)}>
+                                <img
+                                    alt="Scratch"
+                                    className={classNames(styles.scratchLogo, {
+                                        [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
+                                    })}
+                                    draggable={false}
+                                    src={this.props.logo}
+                                    onClick={this.props.onClickLogo}
+                                />
+                            </div>
+                        ) : null}
                         {(this.props.canChangeLanguage) && (<div
                             className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
                         >
@@ -346,6 +412,59 @@ class MenuBar extends React.Component {
                             </div>
                             <LanguageSelector label={this.props.intl.formatMessage(ariaMessages.language)} />
                         </div>)}
+                        {/* tw: display compile errors */}
+                        {this.props.compileErrors.length > 0 && <div className={styles.fileGroup}>
+                            <div
+                                className={classNames(styles.menuBarItem, styles.hoverable, {
+                                    [styles.active]: this.props.errorsMenuOpen
+                                })}
+                                onMouseUp={this.props.onClickErrors}
+                            >
+                                <div className={classNames(styles.errorsMenu)}>
+                                    <img
+                                        className={styles.languageIcon}
+                                        src={errorIcon}
+                                    />
+                                    <img
+                                        className={styles.languageCaret}
+                                        src={dropdownCaret}
+                                    />
+                                </div>
+                                <MenuBarMenu
+                                    className={classNames(styles.menuBarMenu)}
+                                    open={this.props.errorsMenuOpen}
+                                    place={this.props.isRtl ? 'left' : 'right'}
+                                    onRequestClose={this.props.onRequestCloseErrors}
+                                >
+                                    <MenuSection>
+                                        <MenuItemLink href="https://scratch.mit.edu/users/GarboMuffin/#comments">
+                                            <FormattedMessage
+                                                defaultMessage="Some scripts could not be compiled."
+                                                description="Link in error menu"
+                                                id="tw.menuBar.reportError1"
+                                            />
+                                        </MenuItemLink>
+                                        <MenuItemLink href="https://scratch.mit.edu/users/GarboMuffin/#comments">
+                                            <FormattedMessage
+                                                defaultMessage="This is a bug. Please report it."
+                                                description="Link in error menu"
+                                                id="tw.menuBar.reportError2"
+                                            />
+                                        </MenuItemLink>
+                                    </MenuSection>
+                                    <MenuSection>
+                                        {this.props.compileErrors.map(({id, sprite, error}) => (
+                                            <MenuItem key={id}>
+                                                {this.props.intl.formatMessage(twMessages.compileError, {
+                                                    sprite,
+                                                    error
+                                                })}
+                                            </MenuItem>
+                                        ))}
+                                    </MenuSection>
+                                </MenuBarMenu>
+                            </div>
+                        </div>}
                         {(this.props.canManageFiles) && (
                             <div
                                 className={classNames(styles.menuBarItem, styles.hoverable, {
@@ -408,18 +527,47 @@ class MenuBar extends React.Component {
                                                 </MenuItem>
                                             )}
                                         </SBFileUploader>
-                                        <SB3Downloader>{(className, downloadProjectCallback) => (
+                                        <SB3Downloader>{(_className, downloadProject, extended) => (
+                                            <React.Fragment>
+                                                {extended.available && (
+                                                    <React.Fragment>
+                                                        {extended.name !== null && (
+                                                            <MenuItem onClick={this.getSaveToComputerHandler(extended.saveToLastFile)}>
+                                                                <FormattedMessage
+                                                                    defaultMessage="Save as {file}"
+                                                                    description="Menu bar item to save project to an existing file on the user's computer"
+                                                                    id="tw.menuBar.saveAs"
+                                                                    values={{
+                                                                        file: extended.name
+                                                                    }}
+                                                                />
+                                                            </MenuItem>
+                                                        )}
+                                                        <MenuItem onClick={this.getSaveToComputerHandler(extended.saveAsNew)}>
+                                                            <FormattedMessage
+                                                                defaultMessage="Save to your computer"
+                                                                description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
+                                                                id="gui.menuBar.downloadToComputer"
+                                                            />
+                                                        </MenuItem>
+                                                    </React.Fragment>
+                                                )}
+                                            </React.Fragment>
+                                        )}</SB3Downloader>
+                                    </MenuSection>
+                                    <MenuSection>
+                                        <TWAutoSaveLoader>{(className, loadAutoSave) => (
                                             <MenuItem
                                                 className={className}
-                                                onClick={this.getSaveToComputerHandler(downloadProjectCallback)}
+                                                onClick={loadAutoSave}
                                             >
                                                 <FormattedMessage
-                                                    defaultMessage="Save to your computer"
-                                                    description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
-                                                    id="gui.menuBar.downloadToComputer"
+                                                    defaultMessage="Load restore point (BETA)"
+                                                    description="Menu bar item for loading a restore point"
+                                                    id="tw.menuBar.loadAutoSave"
                                                 />
                                             </MenuItem>
-                                        )}</SB3Downloader>
+                                        )}</TWAutoSaveLoader>
                                     </MenuSection>
                                 </MenuBarMenu>
                             </div>
@@ -443,14 +591,16 @@ class MenuBar extends React.Component {
                                 place={this.props.isRtl ? 'left' : 'right'}
                                 onRequestClose={this.props.onRequestCloseEdit}
                             >
-                                <DeletionRestorer>{(handleRestore, {restorable, deletedItem}) => (
-                                    <MenuItem
-                                        className={classNames({[styles.disabled]: !restorable})}
-                                        onClick={this.handleRestoreOption(handleRestore)}
-                                    >
-                                        {this.restoreOptionMessage(deletedItem)}
-                                    </MenuItem>
-                                )}</DeletionRestorer>
+                                {this.props.isPlayerOnly ? null : (
+                                    <DeletionRestorer>{(handleRestore, {restorable, deletedItem}) => (
+                                        <MenuItem
+                                            className={classNames({[styles.disabled]: !restorable})}
+                                            onClick={this.handleRestoreOption(handleRestore)}
+                                        >
+                                            {this.restoreOptionMessage(deletedItem)}
+                                        </MenuItem>
+                                    )}</DeletionRestorer>
+                                )}
                                 <MenuSection>
                                     <TurboMode>{(toggleTurboMode, {turboMode}) => (
                                         <MenuItem onClick={toggleTurboMode}>
@@ -469,21 +619,231 @@ class MenuBar extends React.Component {
                                             )}
                                         </MenuItem>
                                     )}</TurboMode>
+                                    <FramerateChanger>{(changeFramerate, {framerate}) => (
+                                        <MenuItem onClick={changeFramerate}>
+                                            {framerate === 60 ? (
+                                                <FormattedMessage
+                                                    defaultMessage="Turn off 60 FPS Mode"
+                                                    description="Menu bar item for turning off 60 FPS mode"
+                                                    id="tw.menuBar.60off"
+                                                />
+                                            ) : (
+                                                <FormattedMessage
+                                                    defaultMessage="Turn on 60 FPS Mode"
+                                                    description="Menu bar item for turning on 60 FPS mode"
+                                                    id="tw.menuBar.60on"
+                                                />
+                                            )}
+                                        </MenuItem>
+                                    )}</FramerateChanger>
+                                    <ChangeUsername>{changeUsername => (
+                                        <MenuItem onClick={changeUsername}>
+                                            <FormattedMessage
+                                                defaultMessage="Change Username"
+                                                description="Menu bar item for changing the username"
+                                                id="tw.menuBar.changeUsername"
+                                            />
+                                        </MenuItem>
+                                    )}</ChangeUsername>
+                                    <CloudVariablesToggler>{(toggleCloudVariables, {enabled, canUseCloudVariables}) => (
+                                        <MenuItem
+                                            className={classNames({[styles.disabled]: !canUseCloudVariables})}
+                                            onClick={toggleCloudVariables}
+                                        >
+                                            {canUseCloudVariables ? (
+                                                enabled ? (
+                                                    <FormattedMessage
+                                                        defaultMessage="Disable Cloud Variables"
+                                                        description="Menu bar item for disabling cloud variables"
+                                                        id="tw.menuBar.cloudOff"
+                                                    />
+                                                ) : (
+                                                    <FormattedMessage
+                                                        defaultMessage="Enable Cloud Variables"
+                                                        description="Menu bar item for enabling cloud variables"
+                                                        id="tw.menuBar.cloudOn"
+                                                    />
+                                                )
+                                            ) : (
+                                                <FormattedMessage
+                                                    defaultMessage="Cloud Variables are not Available"
+                                                    description="Menu bar item for when cloud variables are not available"
+                                                    id="tw.menuBar.cloudUnavailable"
+                                                />
+                                            )}
+                                        </MenuItem>
+                                    )}</CloudVariablesToggler>
                                 </MenuSection>
                             </MenuBarMenu>
                         </div>
                     </div>
-                    <Divider className={classNames(styles.divider)} />
-                    <div
-                        aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
-                        className={classNames(styles.menuBarItem, styles.hoverable)}
-                        onClick={this.props.onOpenTipLibrary}
-                    >
-                        <img
-                            className={styles.helpIcon}
-                            src={helpIcon}
-                        />
-                        <FormattedMessage {...ariaMessages.tutorials} />
+                    <div className={styles.fileGroup}>
+                        <div
+                            className={classNames(styles.menuBarItem, styles.hoverable, {
+                                [styles.active]: this.props.settingsMenuOpen
+                            })}
+                            onMouseUp={this.props.onClickSettings}
+                        >
+                            <div className={classNames(styles.settingsMenu)}>
+                                <FormattedMessage
+                                    defaultMessage="Advanced"
+                                    description="Text for advanced settings dropdown menu"
+                                    id="tw.menuBar.advanced"
+                                />
+                            </div>
+                            <MenuBarMenu
+                                className={classNames(styles.menuBarMenu)}
+                                open={this.props.settingsMenuOpen}
+                                place={this.props.isRtl ? 'left' : 'right'}
+                                onRequestClose={this.props.onRequestCloseSettings}
+                            >
+                                <MenuSection>
+                                    <MenuItemLink href="https://github.com/TurboWarp/scratch-gui/wiki/Advanced-Settings">
+                                        <FormattedMessage
+                                            defaultMessage="Advanced Settings Help"
+                                            description="Menu bar item for advanced settings help"
+                                            id="tw.menuBar.advancedHelp"
+                                        />
+                                    </MenuItemLink>
+                                </MenuSection>
+                                <MenuSection>
+                                    {/* Wrap the top item in a div so that it gets a border */}
+                                    <div>
+                                        <HighQualityPen>{(toggleHighQualityPen, {highQualityPen}) => (
+                                            <MenuItem onClick={toggleHighQualityPen}>
+                                                {highQualityPen ? (
+                                                    <FormattedMessage
+                                                        defaultMessage="Turn off High Quality Pen"
+                                                        description="Menu bar item for turning off high quality pen"
+                                                        id="tw.menuBar.hqpOff"
+                                                    />
+                                                ) : (
+                                                    <FormattedMessage
+                                                        defaultMessage="Turn on High Quality Pen"
+                                                        description="Menu bar item for turning on high quality pen"
+                                                        id="tw.menuBar.hqpOn"
+                                                    />
+                                                )}
+                                            </MenuItem>
+                                        )}</HighQualityPen>
+                                    </div>
+                                    <VMOptions>{({
+                                        compilerEnabled,
+                                        toggleCompilerEnabled,
+                                        warpTimer,
+                                        toggleWarpTimer,
+                                        infiniteClones,
+                                        toggleInfiniteClones
+                                    }) => (
+                                        <React.Fragment>
+                                            <MenuItem onClick={toggleInfiniteClones}>
+                                                {infiniteClones ? (
+                                                    <FormattedMessage
+                                                        defaultMessage="Turn off Infinite Clones"
+                                                        description="Menu bar item for turning off Infinite Clones"
+                                                        id="tw.menuBar.infiniteClonesOff"
+                                                    />
+                                                ) : (
+                                                    <FormattedMessage
+                                                        defaultMessage="Turn on Infinite Clones"
+                                                        description="Menu bar item for turning on Infinite Clones"
+                                                        id="tw.menuBar.infiniteClonesOn"
+                                                    />
+                                                )}
+                                            </MenuItem>
+                                            <MenuItem onClick={toggleWarpTimer}>
+                                                {warpTimer ? (
+                                                    <FormattedMessage
+                                                        defaultMessage="Turn off Warp Timer"
+                                                        description="Menu bar item for turning off Warp Timer"
+                                                        id="tw.menuBar.warpTimerOff"
+                                                    />
+                                                ) : (
+                                                    <FormattedMessage
+                                                        defaultMessage="Turn on Warp Timer"
+                                                        description="Menu bar item for turning on Warp Timer"
+                                                        id="tw.menuBar.warpTimerOn"
+                                                    />
+                                                )}
+                                            </MenuItem>
+                                            <MenuItem onClick={toggleCompilerEnabled}>
+                                                {compilerEnabled ? (
+                                                    <FormattedMessage
+                                                        defaultMessage="Disable Compiler"
+                                                        description="Menu bar item for disabling the compiler"
+                                                        id="tw.menuBar.compilerOff"
+                                                    />
+                                                ) : (
+                                                    <FormattedMessage
+                                                        defaultMessage="Enable Compiler"
+                                                        description="Menu bar item for enabling the compiler"
+                                                        id="tw.menuBar.compilerOn"
+                                                    />
+                                                )}
+                                            </MenuItem>
+                                        </React.Fragment>
+                                    )}</VMOptions>
+                                </MenuSection>
+                            </MenuBarMenu>
+                        </div>
+                        <div
+                            className={classNames(styles.menuBarItem, styles.hoverable, {
+                                [styles.active]: this.props.helpMenuOpen
+                            })}
+                            onMouseUp={this.props.onClickHelp}
+                        >
+                            <div className={classNames(styles.helpMenu)}>
+                                <FormattedMessage
+                                    defaultMessage="Help"
+                                    description="Text for TurboWarp Help dropdown menu"
+                                    id="tw.menuBar.help"
+                                />
+                            </div>
+                            <MenuBarMenu
+                                className={classNames(styles.menuBarMenu)}
+                                open={this.props.helpMenuOpen}
+                                place={this.props.isRtl ? 'left' : 'right'}
+                                onRequestClose={this.props.onRequestCloseHelp}
+                            >
+                                <MenuSection>
+                                    <MenuItem onClick={this.props.onClickLogo}>
+                                        <FormattedMessage
+                                            defaultMessage="About, credits, license"
+                                            description="Link to about in desktop"
+                                            id="tw.desktop.about"
+                                        />
+                                    </MenuItem>
+                                    <MenuItemLink href="https://github.com/TurboWarp">
+                                        <FormattedMessage
+                                            defaultMessage="Source Code"
+                                            description="Link to source code"
+                                            id="tw.code"
+                                        />
+                                    </MenuItemLink>
+                                    <MenuItemLink href="https://desktop.turbowarp.org">
+                                        <FormattedMessage
+                                            defaultMessage="Website"
+                                            description="Link to website in desktop"
+                                            id="tw.desktop.website"
+                                        />
+                                    </MenuItemLink>
+                                    <MenuItemLink href="https://github.com/TurboWarp/scratch-gui/wiki/TurboWarp-blocks">
+                                        <FormattedMessage
+                                            defaultMessage="TurboWarp Blocks"
+                                            description="Menu bar item for TurboWarp blocks link"
+                                            id="tw.menuBar.blocks"
+                                        />
+                                    </MenuItemLink>
+                                    <MenuItemLink href="https://github.com/TurboWarp/translations/blob/master/CONTRIBUTING.md#readme">
+                                        <FormattedMessage
+                                            defaultMessage="Help Translate TurboWarp"
+                                            description="Menu bar item for translating TurboWarp link"
+                                            id="tw.menuBar.translate"
+                                        />
+                                    </MenuItemLink>
+                                </MenuSection>
+                            </MenuBarMenu>
+                        </div>
                     </div>
                     <Divider className={classNames(styles.divider)} />
                     {this.props.canEditTitle ? (
@@ -501,6 +861,7 @@ class MenuBar extends React.Component {
                         <AuthorInfo
                             className={styles.authorInfo}
                             imageUrl={this.props.authorThumbnailUrl}
+                            projectId={this.props.projectId}
                             projectTitle={this.props.projectTitle}
                             userId={this.props.authorId}
                             username={this.props.authorUsername}
@@ -556,145 +917,48 @@ class MenuBar extends React.Component {
                             <MenuBarItemTooltip id="community-button">
                                 <CommunityButton className={styles.menuBarButton} />
                             </MenuBarItemTooltip>
-                        ) : [])}
+                        ) : (this.props.enableSeeInside ? (
+                            <SeeInsideButton
+                                className={styles.menuBarButton}
+                                onClick={this.handleClickSeeInside}
+                            />
+                        ) : []))}
+                    </div>
+                    {/* tw: add a feedback button */}
+                    <div className={styles.menuBarItem}>
+                        <a
+                            className={styles.feedbackLink}
+                            href="https://scratch.mit.edu/users/GarboMuffin/#comments"
+                            rel="noopener noreferrer"
+                            target="_blank"
+                        >
+                            {/* todo: icon */}
+                            <Button className={styles.feedbackButton}>
+                                <FormattedMessage
+                                    defaultMessage="TurboWarp Feedback"
+                                    description="Button to give feedback in the menu bar"
+                                    id="tw.feedbackButton"
+                                />
+                            </Button>
+                        </a>
                     </div>
                 </div>
 
-                {/* show the proper UI in the account menu, given whether the user is
-                logged in, and whether a session is available to log in with */}
                 <div className={styles.accountInfoGroup}>
                     <div className={styles.menuBarItem}>
-                        {this.props.canSave && (
-                            <SaveStatus />
-                        )}
+                        <TWSaveStatus />
                     </div>
-                    {this.props.sessionExists ? (
-                        this.props.username ? (
-                            // ************ user is logged in ************
-                            <React.Fragment>
-                                <a href="/mystuff/">
-                                    <div
-                                        className={classNames(
-                                            styles.menuBarItem,
-                                            styles.hoverable,
-                                            styles.mystuffButton
-                                        )}
-                                    >
-                                        <img
-                                            className={styles.mystuffIcon}
-                                            src={mystuffIcon}
-                                        />
-                                    </div>
-                                </a>
-                                <AccountNav
-                                    className={classNames(
-                                        styles.menuBarItem,
-                                        styles.hoverable,
-                                        {[styles.active]: this.props.accountMenuOpen}
-                                    )}
-                                    isOpen={this.props.accountMenuOpen}
-                                    isRtl={this.props.isRtl}
-                                    menuBarMenuClassName={classNames(styles.menuBarMenu)}
-                                    onClick={this.props.onClickAccount}
-                                    onClose={this.props.onRequestCloseAccount}
-                                    onLogOut={this.props.onLogOut}
-                                />
-                            </React.Fragment>
-                        ) : (
-                            // ********* user not logged in, but a session exists
-                            // ********* so they can choose to log in
-                            <React.Fragment>
-                                <div
-                                    className={classNames(
-                                        styles.menuBarItem,
-                                        styles.hoverable
-                                    )}
-                                    key="join"
-                                    onMouseUp={this.props.onOpenRegistration}
-                                >
-                                    <FormattedMessage
-                                        defaultMessage="Join Scratch"
-                                        description="Link for creating a Scratch account"
-                                        id="gui.menuBar.joinScratch"
-                                    />
-                                </div>
-                                <div
-                                    className={classNames(
-                                        styles.menuBarItem,
-                                        styles.hoverable
-                                    )}
-                                    key="login"
-                                    onMouseUp={this.props.onClickLogin}
-                                >
-                                    <FormattedMessage
-                                        defaultMessage="Sign in"
-                                        description="Link for signing in to your Scratch account"
-                                        id="gui.menuBar.signIn"
-                                    />
-                                    <LoginDropdown
-                                        className={classNames(styles.menuBarMenu)}
-                                        isOpen={this.props.loginMenuOpen}
-                                        isRtl={this.props.isRtl}
-                                        renderLogin={this.props.renderLogin}
-                                        onClose={this.props.onRequestCloseLogin}
-                                    />
-                                </div>
-                            </React.Fragment>
-                        )
-                    ) : (
-                        // ******** no login session is available, so don't show login stuff
-                        <React.Fragment>
-                            {this.props.showComingSoon ? (
-                                <React.Fragment>
-                                    <MenuBarItemTooltip id="mystuff">
-                                        <div
-                                            className={classNames(
-                                                styles.menuBarItem,
-                                                styles.hoverable,
-                                                styles.mystuffButton
-                                            )}
-                                        >
-                                            <img
-                                                className={styles.mystuffIcon}
-                                                src={mystuffIcon}
-                                            />
-                                        </div>
-                                    </MenuBarItemTooltip>
-                                    <MenuBarItemTooltip
-                                        id="account-nav"
-                                        place={this.props.isRtl ? 'right' : 'left'}
-                                    >
-                                        <div
-                                            className={classNames(
-                                                styles.menuBarItem,
-                                                styles.hoverable,
-                                                styles.accountNavMenu
-                                            )}
-                                        >
-                                            <img
-                                                className={styles.profileIcon}
-                                                src={profileIcon}
-                                            />
-                                            <span>
-                                                {'scratch-cat'}
-                                            </span>
-                                            <img
-                                                className={styles.dropdownCaretIcon}
-                                                src={dropdownCaret}
-                                            />
-                                        </div>
-                                    </MenuBarItemTooltip>
-                                </React.Fragment>
-                            ) : []}
-                        </React.Fragment>
-                    )}
                 </div>
+
+                {aboutButton}
             </Box>
         );
     }
 }
 
 MenuBar.propTypes = {
+    enableSeeInside: PropTypes.bool,
+    onClickSeeInside: PropTypes.func,
     accountMenuOpen: PropTypes.bool,
     authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     authorThumbnailUrl: PropTypes.string,
@@ -709,11 +973,17 @@ MenuBar.propTypes = {
     canSave: PropTypes.bool,
     canShare: PropTypes.bool,
     className: PropTypes.string,
+    compileErrors: PropTypes.arrayOf(PropTypes.shape({
+        sprite: PropTypes.string,
+        error: PropTypes.string,
+        id: PropTypes.number
+    })),
     confirmReadyToReplaceProject: PropTypes.func,
     editMenuOpen: PropTypes.bool,
     enableCommunity: PropTypes.bool,
     fileMenuOpen: PropTypes.bool,
     intl: intlShape,
+    isPlayerOnly: PropTypes.bool,
     isRtl: PropTypes.bool,
     isShared: PropTypes.bool,
     isShowingProject: PropTypes.bool,
@@ -722,6 +992,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,
@@ -732,6 +1003,12 @@ MenuBar.propTypes = {
     onClickRemix: PropTypes.func,
     onClickSave: PropTypes.func,
     onClickSaveAsCopy: PropTypes.func,
+    onClickSettings: PropTypes.func,
+    onRequestCloseSettings: PropTypes.func,
+    onClickHelp: PropTypes.func,
+    onRequestCloseHelp: PropTypes.func,
+    onClickErrors: PropTypes.func,
+    onRequestCloseErrors: PropTypes.func,
     onLogOut: PropTypes.func,
     onOpenRegistration: PropTypes.func,
     onOpenTipLibrary: PropTypes.func,
@@ -744,9 +1021,13 @@ MenuBar.propTypes = {
     onSeeCommunity: PropTypes.func,
     onShare: PropTypes.func,
     onToggleLoginOpen: PropTypes.func,
+    projectId: PropTypes.string,
     projectTitle: PropTypes.string,
     renderLogin: PropTypes.func,
     sessionExists: PropTypes.bool,
+    settingsMenuOpen: PropTypes.bool,
+    helpMenuOpen: PropTypes.bool,
+    errorsMenuOpen: PropTypes.bool,
     shouldSaveBeforeTransition: PropTypes.func,
     showComingSoon: PropTypes.bool,
     userOwnsProject: PropTypes.bool,
@@ -764,16 +1045,24 @@ const mapStateToProps = (state, ownProps) => {
     const user = state.session && state.session.session && state.session.session.user;
     return {
         accountMenuOpen: accountMenuOpen(state),
+        authorThumbnailUrl: state.scratchGui.tw.author.thumbnail,
+        authorUsername: state.scratchGui.tw.author.username,
+        compileErrors: state.scratchGui.tw.compileErrors,
         fileMenuOpen: fileMenuOpen(state),
         editMenuOpen: editMenuOpen(state),
+        isPlayerOnly: state.scratchGui.mode.isPlayerOnly,
         isRtl: state.locales.isRtl,
         isUpdating: getIsUpdating(loadingState),
         isShowingProject: getIsShowingProject(loadingState),
         languageMenuOpen: languageMenuOpen(state),
         locale: state.locales.locale,
         loginMenuOpen: loginMenuOpen(state),
+        projectId: state.scratchGui.projectState.projectId,
         projectTitle: state.scratchGui.projectTitle,
         sessionExists: state.session && typeof state.session.session !== 'undefined',
+        settingsMenuOpen: settingsMenuOpen(state),
+        helpMenuOpen: helpMenuOpen(state),
+        errorsMenuOpen: errorsMenuOpen(state),
         username: user ? user.username : null,
         userOwnsProject: ownProps.authorUsername && user &&
             (ownProps.authorUsername === user.username),
@@ -782,6 +1071,7 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 const mapDispatchToProps = dispatch => ({
+    onClickSeeInside: () => dispatch(setPlayer(false)),
     autoUpdateProject: () => dispatch(autoUpdateProject()),
     onOpenTipLibrary: () => dispatch(openTipsLibrary()),
     onClickAccount: () => dispatch(openAccountMenu()),
@@ -794,6 +1084,12 @@ const mapDispatchToProps = dispatch => ({
     onRequestCloseLanguage: () => dispatch(closeLanguageMenu()),
     onClickLogin: () => dispatch(openLoginMenu()),
     onRequestCloseLogin: () => dispatch(closeLoginMenu()),
+    onClickSettings: () => dispatch(openSettingsMenu()),
+    onRequestCloseSettings: () => dispatch(closeSettingMenu()),
+    onClickHelp: () => dispatch(openHelpMenu()),
+    onRequestCloseHelp: () => dispatch(closeHelpMenu()),
+    onClickErrors: () => dispatch(openErrorsMenu()),
+    onRequestCloseErrors: () => dispatch(closeErrorsMenu()),
     onClickNew: needSave => dispatch(requestNewProject(needSave)),
     onClickRemix: () => dispatch(remixProject()),
     onClickSave: () => dispatch(manualUpdateProject()),

src/components/menu-bar/scratch-logo.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 66.1 24.7"><style>.st0{fill:#fff}.st1{fill:#f9a83a}</style><switch><g><g><g><path d="M60.2 24.1c-.8.1-1.3.1-1.5.2-.4.2-1.3.4-2.4.4-1.4 0-2.7-.5-3.8-1.3h-.8c-.3 0-.5 0-.8-.1-1.1.4-2.1.4-2.7.4H48c-1.4.1-2.8-.2-4-.8-.6.2-1.1.3-1.7.3l-3.7.1c-1.7 0-3.2-.6-4.4-1.7-.5 0-1-.1-1.4-.2-.6.7-1.4 1.3-2.4 1.8-1.9.9-4 1-6 .2-.2-.1-.5-.2-.7-.3l-2.3.3h-.7c-.3.1-.5.3-.7.4-1.5.7-2.9.7-3.5.7H16c-1.7 0-3.4-.5-4.7-1.4-.4.1-.9.2-1.3.2-.9.6-2 1-3.2 1.1h-.4c-3.3 0-6-2.5-6.3-5.8v-.1c0-.5-.1-1.6 0-2.8 0-.6.1-1.5.1-1.7 0-.8.2-1.6.5-2.4-.2-.8-.1-1.6 0-2.4v-.3c.1-.7.3-2.1 1-3.5C3 3 5.4 1.5 8.1 1.5 9 1 9.9.8 10.9.8h.3c2 .1 3.8 1.1 4.9 2.7.9-.8 2-1.3 3.2-1.5 2.4-.3 4.4-.4 6.1-.1.9-.8 2.1-1.4 3.3-1.5l2.6-.4h.8c1.5 0 3 .6 4.2 1.6h.2l3.8-.1c1.6 0 3-.1 3.3-.1h.5c1.4 0 2.9.5 4 1.4 1.1-.8 2.4-1.2 3.8-1.2h1.3c1-.6 2.1-1 3.3-1l3.2-.1h.1c3.4 0 6.2 2.8 6.3 6.2 0 1.6-.5 3-1.5 4.2v2.9c.9 1 1.4 2.3 1.5 3.7.2 3.4-2.4 6.3-5.9 6.6z" class="st0"/></g><path d="M60 20.5c-1.3.1-2.1.2-2.3.3l-.1.1c-.3.1-.7.3-1.2.3-.6 0-1.3-.2-1.8-.7-.2-.2-.4-.4-.5-.6h-2.3c-.4 0-.8-.1-1.1-.3-.1.1-.3.1-.4.2-.8.4-1.5.4-2 .4h-.5c-1.5 0-2.7-.5-3.5-1.4-.5.5-1.2.8-1.9.8l-3.7.1c-1.3 0-2.5-1-2.7-2.2-.5.3-1 .5-1.6.5-.6 0-1.2-.2-1.7-.5-.1-.1-.2-.2-.3-.2-.3.2-.7.2-1.1.2H31c-.4 1.2-1.1 2-2.2 2.5-.5.2-1.1.4-1.6.4s-1.1-.1-1.6-.3c-.5-.2-.9-.5-1.2-.8-.2.1-.4.1-.6.2l-2.9.4h-.4c-.3 0-.5 0-.8-.1-.4.4-.9.6-1.3.8-.8.4-1.5.4-2 .4h-.5c-1.8 0-3.2-.8-4-1.9-.8.5-1.8.8-2.7.8h-.6c0 .1-.1.1-.1.2-.5.5-1.2.9-1.9.9h-.2c-1.4 0-2.6-1.1-2.7-2.6v-.1c0-.5-.1-1.4 0-2.4 0-.7.1-1.8.1-1.8 0-.7.3-1.3.7-1.8-.4-.8-.5-1.7-.3-2.7v-.2c.1-.6.2-1.5.6-2.4.7-1.3 2-2 3.5-2H9c.5-.4 1.1-.7 1.8-.7 1.5 0 2.7 1.3 2.7 2.8v1.1c.5-.2 1.1-.3 1.7-.3.3 0 .5 0 .8.1.4-.5 1-.8 1.6-.9.1-.2.2-.3.3-.5.4-.6 1.1-1 1.8-1.1.6-.1 1.8-.2 3.2-.2 1.6 0 2.9.2 3.9.7.3-1.1 1.1-1.9 2.3-2.1l2.6-.4h.4c.8 0 1.5.3 2 .9.2.2.5.6.6.9l.1.3c.5-.3 1-.5 1.6-.5l3.9-.1c1.9 0 3.6-.1 3.6-.2h.2c.7 0 1.5.3 2 .8.4.4.7.9.8 1.5h.2c.3 0 .5 0 .8.1.4-.5 1-.8 1.6-.9.5-.7 1.4-1.3 2.4-1.3h2.6c.5-.6 1.2-1 2.1-1h3.2c1.5 0 2.7 1.2 2.8 2.7 0 1.1-.6 2.1-1.5 2.5v6.1c.8.4 1.4 1.3 1.5 2.3.1 1.5-1.1 2.8-2.6 2.9z" class="st1"/><path d="M32.3 8.5l-.7 3.6 2-.3z" class="st1"/><path d="M8.4 12c-.7-.1-1.1-.6-.9-2v-.2c.2-1.2.3-1.5.9-1.5.2 0 .4.1.6.3.2.2.6.5.8 1.1.2.4.2.7.3 1v.4c0 .2.2.4.5.5.3.1.6-.2.7-.5 0 0 .2-3.8.2-3.9 0-.3-.3-.6-.6-.6s-.6.3-.6.6v1.1c-.5-.5-1.1-1-1.8-1C6.6 7 6.4 8.7 6.3 9.7v.2c-.2 1.9.4 3.1 1.9 3.4 1.6.3 2.7.6 2.7 1.6 0 .4-.2.8-.6 1.1-.4.4-1 .5-1.6.4-.2 0-.3-.1-.5-.1-.2-.1-.8-.4-1-.8-.1-.4-.2-.9-.2-1.2v-.2c0-.3-.3-.6-.6-.6s-.6.3-.6.6c0 0 0 1.2-.1 1.9-.1 1.2 0 2.1 0 2.2 0 .3.3.6.6.6s.6-.3.6-.6v-1.1c.4.3 1 .6 1.7.7.9.2 1.8-.1 2.5-.7.6-.5 1-1.3 1-2 0-2.5-2.5-2.9-3.7-3.1M25.2 10.3c-.1.1-.2.2-.4.3-.1.1-.4.2-.5.2l-.3.1c-.4.2-1 .3-1.6.4V8.5c1.6 0 3 .1 3.3.6v.2c0 .2-.2.6-.5 1m3.5 5.4c-.3-.1-.7.1-.8.4-.2.7-.4.7-.5.8-.1.1-.3 0-.6-.1 0 0-.1-.2-.2-.3-.1-.2-.2-1-.2-1.5 0-1.8-.4-2.8-.9-3.3.3-.2.6-.5.6-.5.7-1 .9-1.8.5-2.5-1-1.7-5.3-1.2-6.7-1-.3 0-.6.4-.5.7 0 .3.4.6.7.5.3 0 .6-.1.9-.1v2.8h-.3c-.3 0-.6.3-.6.6s.3.6.6.6h.3v3.5l-.8.1c-.3 0-.6.4-.5.7 0 .3.4.6.7.5l2.9-.4c.3 0 .6-.4.5-.7 0-.3-.4-.6-.7-.5l-.9.1v-3.5c.6-.1 1.1-.2 1.6-.4h.2c.2 0 .4.1.5.3.2.3.4.9.5 2.4 0 .3.1 1.5.3 2 .1.2.4.7.9.9.4.1.9.3 1.5 0 .5-.3.9-.6 1.1-1.5.4-.2.2-.5-.1-.6M50.5 13.8c-.3 0-.6.3-.6.6v.8c0 .3-.1.7-.2.8-.1.2-.2.3-.4.5-.1.1-.3.2-.5.3-.2.1-.3.1-.7.1h-.4c-1.6.1-1.8-1.2-1.8-1.5v-2.6c.1-1 .3-1.7.7-2 .3-.2.7-.1 1.4.1.8.3 1.3 1.2 1.4 1.2.1.2.4.3.7.3.3-.1.4-.3.4-.6V9.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6v1.1c-.2-.2-.5-.3-.8-.5-.3-.2-1.5-.7-2.4-.1-.7.5-1.2 1.4-1.3 2.9v2.8c.1.9.8 2.7 3 2.7h.3c.4 0 .8 0 1.2-.2.3-.1.6-.3.9-.6.2-.2.3-.4.5-.7.2-.4.3-1.1.4-1.3v-1c0-.2-.3-.4-.6-.4M60.4 17.8c0-.3-.3-.6-.6-.6-.2 0-.5 0-.8.1 0-1 0-3.1-.1-9.9h.9c.3 0 .6-.3.6-.6s-.3-.6-.6-.6l-3.2.1c-.3 0-.6.3-.6.6s.3.6.6.6h1v4.2l-3.6.6V8.5h1c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-3.2c-.3 0-.6.3-.6.6s.3.6.6.6h1v8.1h-1c-.3 0-.6.3-.6.6s.3.6.6.6l3.3.1c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-1v-3.1l3.6-.6v4.6c-.8.2-1.4.2-1.7.6-.2.2-.2.6.1.8.2.2.5.1.9 0 .3-.2 1.5-.3 2.9-.4.3-.2.5-.5.5-.8" class="st0"/><path d="M31.6 12.1l.7-3.6 1.3 3.3-2 .3zm5.3 1c-.2.1-.5.2-1.1.5l-.8-1.9-2.3-5.5c0-.1-.1-.3-.2-.3-.1-.1-.3-.2-.5-.2l-2.6.3c-.3 0-.6.3-.5.7 0 .3.3.6.7.5 0 0 1-.1 1.8-.2-.2 1.1-1.1 5.6-1.4 7l-1.8-.1c-.3 0-.6.2-.6.6 0 .3.2.6.6.6l3 .1c.3 0 .6-.2.6-.6 0-.3-.2-.6-.6-.6l.1-.9 2.8-.5.6 1.5c-.5.3-.7.4-1 .7-.2.3-.1.6.1.8.3.2.7.1.9-.1.3-.4 1.4-.9 2.5-1.3.3-.1.5-.5.4-.8-.1-.2-.4-.4-.7-.3" class="st0"/><path d="M44.1 7s-1.8.1-3.8.2l-3.9.1c-.2 0-.3.1-.5.2-.1.1-.2.3-.1.5l.5 3c0 .3.4.6.7.5.3 0 .5-.3.5-.6 0 0-.2-1.6-.4-2.4h2.6v7.9h-1.3c-.3 0-.6.3-.6.6s.3.6.6.6l3.7-.1c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-1.2V8.4c1 0 1.9-.1 2.5-.1v1.2c0 .6.1.8.1.9.2.3.5.4.8.2.2-.1.3-.4.3-.6 0 0 0-1.4.1-2.2 0-.2 0-.3-.2-.5 0-.2-.2-.3-.4-.3M18.6 14.4c-.3 0-.6.3-.6.6V15.9c0 .2-.1.6-.2.8-.1.2-.2.3-.4.5-.1.1-.3.2-.5.3-.2.1-.3.1-.7.1h-.4c-1.6 0-1.8-1.2-1.8-1.5v-2.6c.1-1 .3-1.7.7-2 .3-.2.7-.1 1.4.1.8.3 1.4 1.2 1.4 1.2.1.2.4.3.7.3.3-.1.4-.3.4-.6V9.8c0-.3-.3-.6-.6-.6s-.6.3-.6.6v1.Line truncated
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="1" height="1">
+  <!-- help design me! -->
+</svg>

src/components/menu-bar/tw-error.svg

@@ -0,0 +1,2 @@
+<!-- From https://github.com/google/material-design-icons -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>

src/components/menu-bar/tw-save-status.jsx

@@ -0,0 +1,61 @@
+import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+import InlineMessages from '../../containers/inline-messages.jsx';
+import SB3Downloader from '../../containers/sb3-downloader.jsx';
+import {filterInlineAlerts} from '../../reducers/alerts';
+
+import styles from './save-status.css';
+
+const TWSaveStatus = ({
+    alertsList,
+    fileHandle,
+    projectChanged
+}) => (
+    filterInlineAlerts(alertsList).length > 0 ? (
+        <InlineMessages />
+    ) : projectChanged && (
+        <SB3Downloader>{(_className, _downloadProjectCallback, {smartSave}) => (
+            <div
+                onClick={smartSave}
+                className={styles.saveNow}
+            >
+                {fileHandle ? (
+                    <FormattedMessage
+                        defaultMessage="Save as {file}"
+                        description="Menu bar item to save project to an existing file on the user's computer"
+                        id="tw.menuBar.saveAs"
+                        values={{
+                            file: fileHandle.name
+                        }}
+                    />
+                ) : (
+                    <FormattedMessage
+                        defaultMessage="Save to your computer"
+                        description="Menu bar item for downloading a project to your computer"
+                        id="gui.menuBar.downloadToComputer"
+                    />
+                )}
+            </div>
+        )}</SB3Downloader>
+    ));
+
+TWSaveStatus.propTypes = {
+    alertsList: PropTypes.arrayOf(PropTypes.object),
+    fileHandle: PropTypes.shape({
+        name: PropTypes.string
+    }),
+    projectChanged: PropTypes.bool
+};
+
+const mapStateToProps = state => ({
+    alertsList: state.scratchGui.alerts.alertsList,
+    fileHandle: state.scratchGui.tw.fileHandle,
+    projectChanged: state.scratchGui.projectChanged
+});
+
+export default connect(
+    mapStateToProps,
+    () => ({})
+)(TWSaveStatus);

src/components/menu-bar/tw-see-inside.css

@@ -0,0 +1,11 @@
+@import "../../css/colors.css";
+
+/* this class must contain "see-inside-button" somewhere for the s3 dev tools to be able to reinject itself */
+/* https://github.com/griffpatch/Scratch3-Dev-Tools/blob/0.2.4/inject3.js#L1804-L1807 */
+.see-inside-button {
+    box-shadow: 0 0 0 1px $ui-black-transparent;
+}
+
+.see-inside-button-icon {
+    height: 1.25rem;
+}

src/components/menu-bar/tw-see-inside.jsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from '../button/button.jsx';
+
+import communityIcon from './icon--see-community.svg';
+import styles from './tw-see-inside.css';
+
+const SeeInsideButton = ({
+    className,
+    onClick
+}) => (
+    <Button
+        className={classNames(
+            className,
+            styles.seeInsideButton
+        )}
+        iconClassName={styles.seeInsideButtonIcon}
+        iconSrc={communityIcon}
+        onClick={onClick}
+    >
+        <FormattedMessage
+            defaultMessage="See inside"
+            description="Label for see inside button"
+            id="tw.menuBar.seeInside"
+        />
+    </Button>
+);
+
+SeeInsideButton.propTypes = {
+    className: PropTypes.string,
+    onClick: PropTypes.func
+};
+
+SeeInsideButton.defaultProps = {
+    onClick: () => {}
+};
+
+export default SeeInsideButton;

src/components/menu/menu.css

@@ -8,12 +8,18 @@
     padding: 0;
     margin: 0;
     min-width: 186px;
-    max-width: 260px;
+    /* tw: no max width */
+    /* max-width: 260px; */
     overflow: visible;
     color: $ui-white;
     box-shadow: 0 8px 8px 0 $ui-black-transparent;
 }
 
+/* tw: dark theme */
+[theme="dark"] .menu {
+    background-color: $motion-primary-dark;
+}
+
 .menu.left {
     right: 0;
 }

src/components/monitor/monitor.css

@@ -13,6 +13,7 @@
     transition: box-shadow 0.2s;
     pointer-events: all;
     overflow: hidden;
+    color: #575e75; /* tw: explicitly set color to match Scratch */
 }
 
 .monitor:hover {

src/components/sound-editor/icon--copy-to-new.svg

@@ -4,6 +4,7 @@
     <title>Sound/General/Copy to New</title>
     <desc>Created with Sketch.</desc>
     <g id="Sound/General/Copy-to-New" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M15,11.0967026 L15,4 C15,3.44771525 14.5522847,3 14,3 L4,3 C3.44771525,3 3,3.44771525 3,4 L3,12 L12.6616037,12 L11.5236347,13.0430331 C11.1882084,13.3580017 11,13.7827132 11,14.2302292 C11,14.6767472 11.187801,15.1005394 11.5128606,15.4074032 L12.1595777,16 L4,16 C2.8954305,16 2,15.1045695 2,14 L2,4 C2,2.8954305 2.8954305,2 4,2 L14,2 C15.1045695,2 16,2.8954305 16,4 L16,12.0333493 C15.8307357,11.617882 15.4895036,11.283542 15.0505738,11.115203 C15.0337809,11.1087625 15.0169209,11.1025961 15,11.0967026 Z M10.3153901,9.43844107 C10.240142,9.43844107 10.1627842,9.41684419 10.0924589,9.37133647 C9.88359282,9.23558464 9.81397079,8.94017013 9.93774329,8.71108891 C10.173333,8.27298072 10.173333,7.72997337 9.93774329,7.2926365 C9.81397079,7.06278396 9.88359282,6.76736945 10.0924589,6.63161762 C10.3034348,6.49740842 10.5720773,6.57299751 10.6944433,6.80130741 C11.0931877,7.54177197 11.0931877,8.46118212 10.6944433,9.20164668 C10.612866,9.35436749 10.4658862,9.43844107 10.3153901,9.43844107 Z M11.6283181,10.2119951 C11.5530701,10.2119951 11.475009,10.1903983 11.405387,10.1448905 C11.1965209,10.0091387 11.1268989,9.7137242 11.2506714,9.48464298 C11.7436516,8.56986072 11.7436516,7.4329391 11.2506714,6.51892817 C11.1268989,6.28984695 11.1965209,5.99366112 11.405387,5.85790929 C11.6149563,5.7244714 11.8835989,5.79928918 12.0073714,6.02759908 C12.6642095,7.2447377 12.6642095,8.75806213 12.0073714,9.97520074 C11.9250908,10.1279216 11.7788142,10.2119951 11.6283181,10.2119951 Z M9.1892643,5.64286604 L9.1892643,10.3563857 C9.1892643,10.9148194 8.58587338,11.2071486 8.20963312,10.8307458 L7.39737611,10.0170061 C7.10974571,9.72930481 6.73491195,9.56964214 6.34530989,9.56964214 L6.20325282,9.56964214 C5.81505726,9.56964214 5.5,9.22486333 5.5,8.79832489 L5.5,7.20941137 C5.5,6.78364425 5.81505726,6.43809412 6.20325282,6.43809412 L6.33757411,6.43809412 C6.72717617,6.43809412 7.10200993,6.27843145 7.38964033,5.99073012 L8.20963312,5.16927725 C8.58587338,4.79287444 9.1892643,5.08520367 9.1892643,5.64286604 Z M13.937674,12.1868928 C14.1369962,12.0038895 14.4343459,11.9498886 14.6924846,12.0488903 C14.9506233,12.1478921 15.1172698,12.3758962 15.1172698,12.6339008 L15.1172698,13.2759122 C15.2675784,13.3119129 15.44076,13.3599137 15.6237444,13.428915 C15.9439671,13.545917 16.2968655,13.7259203 16.6236234,13.9686246 C16.7053128,14.0319257 16.7837347,14.0949268 16.8621566,14.1639281 C16.9307757,14.2239291 17.0418734,14.325931 17.0908871,14.385932 C17.2215902,14.5209344 17.3555609,14.6949375 17.4699262,14.8569404 C17.6921215,15.1989465 17.8456977,15.5679531 17.9273871,15.9186594 C18.005809,16.2699656 18.0123442,16.6029716 17.9862036,16.8789765 C17.9567954,17.1579815 17.8979789,17.3709853 17.8424301,17.5389883 C17.8162895,17.6229898 17.7934164,17.6589904 17.7803461,17.6979911 L17.7574731,17.7519921 C17.6921215,17.9109949 17.5156723,18.0159968 17.3196176,17.9979965 C17.0876195,17.9769961 16.9177054,17.7849927 16.9405785,17.5719889 L16.9471136,17.5149878 C16.9503812,17.4819873 16.9634515,17.4159861 16.960184,17.3649852 C16.960184,17.2629833 16.9569164,17.0889802 16.920973,16.8999769 C16.8817621,16.7079734 16.8098753,16.4919696 16.6922425,16.2849659 C16.5746097,16.0809623 16.4144984,15.8889588 16.2282464,15.730256 C16.1269515,15.6519546 16.0387269,15.5859534 15.921094,15.5139521 C15.8492073,15.4686513 15.8328694,15.4719514 15.774053,15.4389508 C15.7217718,15.4149504 15.6694905,15.39365 15.6172092,15.3729496 C15.4374924,15.3069485 15.2675784,15.2679478 15.1172698,15.2529475 L15.1172698,15.8259577 C15.1172698,16.0839623 14.9506233,16.3119664 14.6924846,16.4109681 C14.4343459,16.5099699 14.1369962,16.4559689 13.937674,16.2729657 L12.1993223,14.6802373 C12.0718867,14.5599351 12,14.3979322 12,14.2302292 C12,14.0619262 12.0718867,13.8999234 12.1993223,13.7802212 L13.937674,12.1868928 Z" id="Copy-to-New" fill="#4D97FF" fill-rule="nonzero"></path>
+        <!-- tw: update fill -->
+        <path d="M15,11.0967026 L15,4 C15,3.44771525 14.5522847,3 14,3 L4,3 C3.44771525,3 3,3.44771525 3,4 L3,12 L12.6616037,12 L11.5236347,13.0430331 C11.1882084,13.3580017 11,13.7827132 11,14.2302292 C11,14.6767472 11.187801,15.1005394 11.5128606,15.4074032 L12.1595777,16 L4,16 C2.8954305,16 2,15.1045695 2,14 L2,4 C2,2.8954305 2.8954305,2 4,2 L14,2 C15.1045695,2 16,2.8954305 16,4 L16,12.0333493 C15.8307357,11.617882 15.4895036,11.283542 15.0505738,11.115203 C15.0337809,11.1087625 15.0169209,11.1025961 15,11.0967026 Z M10.3153901,9.43844107 C10.240142,9.43844107 10.1627842,9.41684419 10.0924589,9.37133647 C9.88359282,9.23558464 9.81397079,8.94017013 9.93774329,8.71108891 C10.173333,8.27298072 10.173333,7.72997337 9.93774329,7.2926365 C9.81397079,7.06278396 9.88359282,6.76736945 10.0924589,6.63161762 C10.3034348,6.49740842 10.5720773,6.57299751 10.6944433,6.80130741 C11.0931877,7.54177197 11.0931877,8.46118212 10.6944433,9.20164668 C10.612866,9.35436749 10.4658862,9.43844107 10.3153901,9.43844107 Z M11.6283181,10.2119951 C11.5530701,10.2119951 11.475009,10.1903983 11.405387,10.1448905 C11.1965209,10.0091387 11.1268989,9.7137242 11.2506714,9.48464298 C11.7436516,8.56986072 11.7436516,7.4329391 11.2506714,6.51892817 C11.1268989,6.28984695 11.1965209,5.99366112 11.405387,5.85790929 C11.6149563,5.7244714 11.8835989,5.79928918 12.0073714,6.02759908 C12.6642095,7.2447377 12.6642095,8.75806213 12.0073714,9.97520074 C11.9250908,10.1279216 11.7788142,10.2119951 11.6283181,10.2119951 Z M9.1892643,5.64286604 L9.1892643,10.3563857 C9.1892643,10.9148194 8.58587338,11.2071486 8.20963312,10.8307458 L7.39737611,10.0170061 C7.10974571,9.72930481 6.73491195,9.56964214 6.34530989,9.56964214 L6.20325282,9.56964214 C5.81505726,9.56964214 5.5,9.22486333 5.5,8.79832489 L5.5,7.20941137 C5.5,6.78364425 5.81505726,6.43809412 6.20325282,6.43809412 L6.33757411,6.43809412 C6.72717617,6.43809412 7.10200993,6.27843145 7.38964033,5.99073012 L8.20963312,5.16927725 C8.58587338,4.79287444 9.1892643,5.08520367 9.1892643,5.64286604 Z M13.937674,12.1868928 C14.1369962,12.0038895 14.4343459,11.9498886 14.6924846,12.0488903 C14.9506233,12.1478921 15.1172698,12.3758962 15.1172698,12.6339008 L15.1172698,13.2759122 C15.2675784,13.3119129 15.44076,13.3599137 15.6237444,13.428915 C15.9439671,13.545917 16.2968655,13.7259203 16.6236234,13.9686246 C16.7053128,14.0319257 16.7837347,14.0949268 16.8621566,14.1639281 C16.9307757,14.2239291 17.0418734,14.325931 17.0908871,14.385932 C17.2215902,14.5209344 17.3555609,14.6949375 17.4699262,14.8569404 C17.6921215,15.1989465 17.8456977,15.5679531 17.9273871,15.9186594 C18.005809,16.2699656 18.0123442,16.6029716 17.9862036,16.8789765 C17.9567954,17.1579815 17.8979789,17.3709853 17.8424301,17.5389883 C17.8162895,17.6229898 17.7934164,17.6589904 17.7803461,17.6979911 L17.7574731,17.7519921 C17.6921215,17.9109949 17.5156723,18.0159968 17.3196176,17.9979965 C17.0876195,17.9769961 16.9177054,17.7849927 16.9405785,17.5719889 L16.9471136,17.5149878 C16.9503812,17.4819873 16.9634515,17.4159861 16.960184,17.3649852 C16.960184,17.2629833 16.9569164,17.0889802 16.920973,16.8999769 C16.8817621,16.7079734 16.8098753,16.4919696 16.6922425,16.2849659 C16.5746097,16.0809623 16.4144984,15.8889588 16.2282464,15.730256 C16.1269515,15.6519546 16.0387269,15.5859534 15.921094,15.5139521 C15.8492073,15.4686513 15.8328694,15.4719514 15.774053,15.4389508 C15.7217718,15.4149504 15.6694905,15.39365 15.6172092,15.3729496 C15.4374924,15.3069485 15.2675784,15.2679478 15.1172698,15.2529475 L15.1172698,15.8259577 C15.1172698,16.0839623 14.9506233,16.3119664 14.6924846,16.4109681 C14.4343459,16.5099699 14.1369962,16.4559689 13.937674,16.2729657 L12.1993223,14.6802373 C12.0718867,14.5599351 12,14.3979322 12,14.2302292 C12,14.0619262 12.0718867,13.8999234 12.1993223,13.7802212 L13.937674,12.1868928 Z" id="Copy-to-New" fill="#FF4D4D" fill-rule="nonzero"></path>
     </g>
 </svg>

src/components/sound-editor/icon--copy.svg

@@ -4,10 +4,12 @@
     <title>Sound/General/Copy</title>
     <desc>Created with Sketch.</desc>
     <g id="Sound/General/Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Secondary-Color" opacity="0.25" transform="translate(2.000000, 4.000000)" fill="#4D97FF">
+        <!-- tw: update fill -->
+        <g id="Secondary-Color" opacity="0.25" transform="translate(2.000000, 4.000000)" fill="#FF4D4D">
             <rect id="selection" x="0" y="0" width="16" height="12"></rect>
         </g>
-        <g id="Primary-Color" transform="translate(0.000000, 2.000000)" fill="#4D97FF" fill-rule="nonzero">
+        <!-- tw: update fill -->
+        <g id="Primary-Color" transform="translate(0.000000, 2.000000)" fill="#FF4D4D" fill-rule="nonzero">
             <path d="M1.5,3.93699126 C0.637386394,3.71496986 0,2.93191971 0,2 C0,0.8954305 0.8954305,0 2,0 C3.1045695,0 4,0.8954305 4,2 C4,2.93191971 3.36261361,3.71496986 2.5,3.93699126 L2.5,12.0630087 C3.36261361,12.2850301 4,13.0680803 4,14 C4,15.1045695 3.1045695,16 2,16 C0.8954305,16 0,15.1045695 0,14 C0,13.0680803 0.637386394,12.2850301 1.5,12.0630087 L1.5,3.93699126 Z M17.5,12.0630087 L17.5,3.93699126 C16.6373864,3.71496986 16,2.93191971 16,2 C16,0.8954305 16.8954305,0 18,0 C19.1045695,0 20,0.8954305 20,2 C20,2.93191971 19.3626136,3.71496986 18.5,3.93699126 L18.5,12.0630087 C19.3626136,12.2850301 20,13.0680803 20,14 C20,15.1045695 19.1045695,16 18,16 C16.8954305,16 16,15.1045695 16,14 C16,13.0680803 16.6373864,12.2850301 17.5,12.0630087 Z M11,7 L12,7 C12.5522847,7 13,7.44771525 13,8 C13,8.55228475 12.5522847,9 12,9 L11,9 L11,10 C11,10.5522847 10.5522847,11 10,11 C9.44771525,11 9,10.5522847 9,10 L9,9 L8,9 C7.44771525,9 7,8.55228475 7,8 C7,7.44771525 7.44771525,7 8,7 L9,7 L9,6 C9,5.44771525 9.44771525,5 10,5 C10.5522847,5 11,5.44771525 11,6 L11,7 Z" id="handles-and-plus"></path>
         </g>
     </g>

src/components/sound-editor/icon--delete.svg

@@ -11,7 +11,8 @@
             <use xlink:href="#path-1"></use>
         </mask>
         <use id="Mask" fill="#575E75" xlink:href="#path-1"></use>
-        <g id="Blue/1_Blue" mask="url(#mask-2)" fill="#4D97FF">
+        <!-- tw: update fill -->
+        <g id="Blue/1_Blue" mask="url(#mask-2)" fill="#FF4D4D">
             <rect id="Primary-Blue" x="0" y="0" width="20" height="20"></rect>
         </g>
     </g>

src/components/sound-editor/icon--paste.svg

@@ -4,6 +4,7 @@
     <title>Sound/General/Paste</title>
     <desc>Created with Sketch.</desc>
     <g id="Sound/General/Paste" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M2.39776184,8.69699508 C2.82037272,8.57348907 3.12697047,8.23068036 3.44607843,7.63235294 C3.50283588,7.52593273 3.70653958,7.12084014 3.75472041,7.03050109 C4.03665487,6.50187397 4.27845388,6.25 4.66666667,6.25 C5.08719776,6.25 5.31070056,6.3254322 5.67812087,6.53210612 C5.97736723,6.7004322 6.1242348,6.75 6.44444444,6.75 C6.611898,6.75 6.70455317,6.61444047 6.85968251,6.13575567 C6.89349476,6.03068757 6.91177802,5.97409653 6.92949584,5.92094306 C7.19192893,5.1336438 7.51873661,4.75 8.22222222,4.75 C8.89163675,4.75 9.21925695,5.04485818 9.76356813,5.86132495 C10.2192569,6.54485818 10.4471923,6.75 10.8888889,6.75 C11.3661624,6.75 11.5487705,6.64281697 11.7364319,6.36132495 C11.7692531,6.31129826 11.7692531,6.31129826 11.8038172,6.25761214 C12.0332099,5.90369189 12.2433073,5.75 12.6666667,5.75 C13.1851992,5.75 13.4061497,6.04828312 13.7840084,6.89846538 C14.0728163,7.54828312 14.2222362,7.75 14.4444444,7.75 C14.7687569,7.75 14.9402848,7.69488783 15.2489243,7.52961059 L15.2905031,7.50732887 C15.6361057,7.32238348 15.857036,7.25 16.2222222,7.25 C16.6365912,7.25 16.8489777,7.46586974 17.1158999,7.96477614 C17.1606386,8.04903257 17.1606386,8.04903257 17.2045543,8.13123692 C17.3511621,8.40280419 17.4762139,8.57093888 17.631381,8.6621791 C17.7227849,8.5624959 17.8540941,8.5 18,8.5 C18.2761424,8.5 18.5,8.72385763 18.5,9 C18.5,9.27614237 18.2761424,9.5 18,9.5 C17.8540941,9.5 17.7227849,9.4375041 17.631381,9.3378209 C17.4762139,9.42906112 17.3511621,9.59719581 17.2045543,9.86876308 C17.1606386,9.95096743 17.1606386,9.95096743 17.1158999,10.0352239 C16.8489777,10.5341303 16.6365912,10.75 16.2222222,10.75 C15.857036,10.75 15.6361057,10.6776165 15.2905031,10.4926711 L15.2489243,10.4703894 C14.9402848,10.3051122 14.7687569,10.25 14.4444444,10.25 C14.2222362,10.25 14.0728163,10.4517169 13.7840084,11.1015346 C13.4061497,11.9517169 13.1851992,12.25 12.6666667,12.25 C12.2433073,12.25 12.0332099,12.0963081 11.8038172,11.7423879 C11.7692531,11.6887017 11.7692531,11.6887017 11.7364319,11.638675 C11.5487705,11.357183 11.3661624,11.25 10.8888889,11.25 C10.4471923,11.25 10.2192569,11.4551418 9.76356813,12.138675 C9.21925695,12.9551418 8.89163675,13.25 8.22222222,13.25 C7.51873661,13.25 7.19192893,12.8663562 6.92949584,12.0790569 C6.91177802,12.0259035 6.89349476,11.9693124 6.85968251,11.8642443 C6.70455317,11.3855595 6.611898,11.25 6.44444444,11.25 C6.1242348,11.25 5.97736723,11.2995678 5.67812087,11.4678939 C5.31070056,11.6745678 5.08719776,11.75 4.66666667,11.75 C4.2576716,11.75 4.07414298,11.4976192 3.8822771,10.9321841 L3.78515608,10.639352 C3.74630783,10.5239258 3.71290663,10.4315854 3.67737933,10.3436452 C3.42795496,9.72624902 3.07265238,9.37546644 2.4155666,9.27813036 C2.32583908,9.41193093 2.17320436,9.5 2,9.5 C1.72385763,9.5 1.5,9.27614237 1.5,9 C1.5,8.72385763 1.72385763,8.5 2,8.5 C2.16222865,8.5 2.306412,8.5772611 2.39776184,8.69699508 Z M9,15 L9.7763932,13.4472136 C9.80058413,13.3988317 9.83981475,13.3596011 9.8881966,13.3354102 C10.0116912,13.2736629 10.1618595,13.323719 10.2236068,13.4472136 L11,15 L12,15 C12.2761424,15 12.5,15.2238576 12.5,15.5 C12.5,15.6081851 12.4649111,15.7134519 12.4,15.8 L10.4,18.4666667 C10.2343146,18.6875806 9.9209139,18.7323521 9.7,18.5666667 C9.66209717,18.5382395 9.62842712,18.5045695 9.6,18.4666667 L7.6,15.8 C7.43431458,15.5790861 7.4790861,15.2656854 7.7,15.1 C7.78654809,15.0350889 7.89181489,15 8,15 L9,15 L9,15 Z M2,3.5 C1.72385763,3.5 1.5,3.27614237 1.5,3 C1.5,2.72385763 1.72385763,2.5 2,2.5 C2.27614237,2.5 2.5,2.72385763 2.5,3 C2.5,3.27614237 2.27614237,3.5 2,3.5 Z M4,3.5 C3.72385763,3.5 3.5,3.27614237 3.5,3 C3.5,2.72385763 3.72385763,2.5 4,2.5 C4.27614237,2.5 4.5,2.72385763 4.5,3 C4.5,3.27614237 4.27614237,3.5 4,3.5 Z M6,3.5 C5.72385763,3.5 5.5,3.27614237 5.5,3 C5.5,2.72385763 5.72385763,2.5 6,2.5 C6.27614237,2.5 6.5,2.72385763 6.5,3 C6.5,3.27614237 6.27614237,3.5 6,3.5 Z M8,3.5 C7.72385763,3.5 7.5,3.27614237 7.5,3 C7.5,2.72385763 7.72385763,2.5 8,2.5 C8.27614237,2.5 8.5,2.72385763 8.5,3 C8.5,3.27614237 8.27614237,3.5 8,3.5 Z M10,3.5 C9.72385763,3.5 9.5,3.27614237 9.5,3 C9.5,2.72385763 9.72385763,2.5 10,2.5 C10.2761424,2.5 10.5,2.72385763 10.5,3 C10.5,3.27614237 10.2761424,3.5 10,3.5 Z M12,3.5 C11.7238576,3.5 11.5,3.27614237 11.5,3 C11.5,2.72385763 11.7238576,2.5 12,2.5 C12.2761424,2.5 12.5,2.72385763 12.5,3 C12.5,3.27614237 12.2761424,3.5 12,3.5 Z M14,3.5 C13.7238576,3.5 13.5,3.27614237 13.5,3 C13.5,2.72385763 13.7238576,2.5 14,2.5 C14.2761424,2.5 14.5,2.72385763 14.5,3 C14.5,3.27614237 14.2761424,3.5 14,3.5 Z M16,3.5 C15.7238576,3.5 15.5,3.27614237 15.5,3 C15.5,2.72385763 15.7238576,2.5 16,2.5 C16.2761424,2.5 16.5,2.72385763 16.5,3 C16.5,3.27614237 16.2761424,3.5 16,3.5 Z M18,3.5 C17.7238576,3.5 17.5,3.27614237 17.5,3 C17.5,2.72385763 17.7238576,2.5 18,2.5 C18.2761424,2.5 18.5,2.72385763 18.5,3 C18.5,3.27614237 18.2761424,3.5 18,3.5 Z M18,5.5 C17.7238576,5.5 17.5,5.27614237 17.5,5 C17.5,4.72385763 17.7238576,4.5 18,4.5 C18.2761424,4.5 18.5,4.72385763 18.5,5 C18.5,Line truncated
+        <!-- tw: update fill -->
+        <path d="M2.39776184,8.69699508 C2.82037272,8.57348907 3.12697047,8.23068036 3.44607843,7.63235294 C3.50283588,7.52593273 3.70653958,7.12084014 3.75472041,7.03050109 C4.03665487,6.50187397 4.27845388,6.25 4.66666667,6.25 C5.08719776,6.25 5.31070056,6.3254322 5.67812087,6.53210612 C5.97736723,6.7004322 6.1242348,6.75 6.44444444,6.75 C6.611898,6.75 6.70455317,6.61444047 6.85968251,6.13575567 C6.89349476,6.03068757 6.91177802,5.97409653 6.92949584,5.92094306 C7.19192893,5.1336438 7.51873661,4.75 8.22222222,4.75 C8.89163675,4.75 9.21925695,5.04485818 9.76356813,5.86132495 C10.2192569,6.54485818 10.4471923,6.75 10.8888889,6.75 C11.3661624,6.75 11.5487705,6.64281697 11.7364319,6.36132495 C11.7692531,6.31129826 11.7692531,6.31129826 11.8038172,6.25761214 C12.0332099,5.90369189 12.2433073,5.75 12.6666667,5.75 C13.1851992,5.75 13.4061497,6.04828312 13.7840084,6.89846538 C14.0728163,7.54828312 14.2222362,7.75 14.4444444,7.75 C14.7687569,7.75 14.9402848,7.69488783 15.2489243,7.52961059 L15.2905031,7.50732887 C15.6361057,7.32238348 15.857036,7.25 16.2222222,7.25 C16.6365912,7.25 16.8489777,7.46586974 17.1158999,7.96477614 C17.1606386,8.04903257 17.1606386,8.04903257 17.2045543,8.13123692 C17.3511621,8.40280419 17.4762139,8.57093888 17.631381,8.6621791 C17.7227849,8.5624959 17.8540941,8.5 18,8.5 C18.2761424,8.5 18.5,8.72385763 18.5,9 C18.5,9.27614237 18.2761424,9.5 18,9.5 C17.8540941,9.5 17.7227849,9.4375041 17.631381,9.3378209 C17.4762139,9.42906112 17.3511621,9.59719581 17.2045543,9.86876308 C17.1606386,9.95096743 17.1606386,9.95096743 17.1158999,10.0352239 C16.8489777,10.5341303 16.6365912,10.75 16.2222222,10.75 C15.857036,10.75 15.6361057,10.6776165 15.2905031,10.4926711 L15.2489243,10.4703894 C14.9402848,10.3051122 14.7687569,10.25 14.4444444,10.25 C14.2222362,10.25 14.0728163,10.4517169 13.7840084,11.1015346 C13.4061497,11.9517169 13.1851992,12.25 12.6666667,12.25 C12.2433073,12.25 12.0332099,12.0963081 11.8038172,11.7423879 C11.7692531,11.6887017 11.7692531,11.6887017 11.7364319,11.638675 C11.5487705,11.357183 11.3661624,11.25 10.8888889,11.25 C10.4471923,11.25 10.2192569,11.4551418 9.76356813,12.138675 C9.21925695,12.9551418 8.89163675,13.25 8.22222222,13.25 C7.51873661,13.25 7.19192893,12.8663562 6.92949584,12.0790569 C6.91177802,12.0259035 6.89349476,11.9693124 6.85968251,11.8642443 C6.70455317,11.3855595 6.611898,11.25 6.44444444,11.25 C6.1242348,11.25 5.97736723,11.2995678 5.67812087,11.4678939 C5.31070056,11.6745678 5.08719776,11.75 4.66666667,11.75 C4.2576716,11.75 4.07414298,11.4976192 3.8822771,10.9321841 L3.78515608,10.639352 C3.74630783,10.5239258 3.71290663,10.4315854 3.67737933,10.3436452 C3.42795496,9.72624902 3.07265238,9.37546644 2.4155666,9.27813036 C2.32583908,9.41193093 2.17320436,9.5 2,9.5 C1.72385763,9.5 1.5,9.27614237 1.5,9 C1.5,8.72385763 1.72385763,8.5 2,8.5 C2.16222865,8.5 2.306412,8.5772611 2.39776184,8.69699508 Z M9,15 L9.7763932,13.4472136 C9.80058413,13.3988317 9.83981475,13.3596011 9.8881966,13.3354102 C10.0116912,13.2736629 10.1618595,13.323719 10.2236068,13.4472136 L11,15 L12,15 C12.2761424,15 12.5,15.2238576 12.5,15.5 C12.5,15.6081851 12.4649111,15.7134519 12.4,15.8 L10.4,18.4666667 C10.2343146,18.6875806 9.9209139,18.7323521 9.7,18.5666667 C9.66209717,18.5382395 9.62842712,18.5045695 9.6,18.4666667 L7.6,15.8 C7.43431458,15.5790861 7.4790861,15.2656854 7.7,15.1 C7.78654809,15.0350889 7.89181489,15 8,15 L9,15 L9,15 Z M2,3.5 C1.72385763,3.5 1.5,3.27614237 1.5,3 C1.5,2.72385763 1.72385763,2.5 2,2.5 C2.27614237,2.5 2.5,2.72385763 2.5,3 C2.5,3.27614237 2.27614237,3.5 2,3.5 Z M4,3.5 C3.72385763,3.5 3.5,3.27614237 3.5,3 C3.5,2.72385763 3.72385763,2.5 4,2.5 C4.27614237,2.5 4.5,2.72385763 4.5,3 C4.5,3.27614237 4.27614237,3.5 4,3.5 Z M6,3.5 C5.72385763,3.5 5.5,3.27614237 5.5,3 C5.5,2.72385763 5.72385763,2.5 6,2.5 C6.27614237,2.5 6.5,2.72385763 6.5,3 C6.5,3.27614237 6.27614237,3.5 6,3.5 Z M8,3.5 C7.72385763,3.5 7.5,3.27614237 7.5,3 C7.5,2.72385763 7.72385763,2.5 8,2.5 C8.27614237,2.5 8.5,2.72385763 8.5,3 C8.5,3.27614237 8.27614237,3.5 8,3.5 Z M10,3.5 C9.72385763,3.5 9.5,3.27614237 9.5,3 C9.5,2.72385763 9.72385763,2.5 10,2.5 C10.2761424,2.5 10.5,2.72385763 10.5,3 C10.5,3.27614237 10.2761424,3.5 10,3.5 Z M12,3.5 C11.7238576,3.5 11.5,3.27614237 11.5,3 C11.5,2.72385763 11.7238576,2.5 12,2.5 C12.2761424,2.5 12.5,2.72385763 12.5,3 C12.5,3.27614237 12.2761424,3.5 12,3.5 Z M14,3.5 C13.7238576,3.5 13.5,3.27614237 13.5,3 C13.5,2.72385763 13.7238576,2.5 14,2.5 C14.2761424,2.5 14.5,2.72385763 14.5,3 C14.5,3.27614237 14.2761424,3.5 14,3.5 Z M16,3.5 C15.7238576,3.5 15.5,3.27614237 15.5,3 C15.5,2.72385763 15.7238576,2.5 16,2.5 C16.2761424,2.5 16.5,2.72385763 16.5,3 C16.5,3.27614237 16.2761424,3.5 16,3.5 Z M18,3.5 C17.7238576,3.5 17.5,3.27614237 17.5,3 C17.5,2.72385763 17.7238576,2.5 18,2.5 C18.2761424,2.5 18.5,2.72385763 18.5,3 C18.5,3.27614237 18.2761424,3.5 18,3.5 Z M18,5.5 C17.7238576,5.5 17.5,5.27614237 17.5,5 C17.5,4.72385763 17.7238576,4.5 18,4.5 C18.2761424,4.5 18.5,4.72385763 18.5,5 C18.5,Line truncated
     </g>
 </svg>

src/components/sound-editor/icon--redo.svg

@@ -5,7 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="redo" fill="#4C97FF">
+        <!-- tw: update fill -->
+        <g id="redo" fill="#FF4D4D">
             <path d="M17.5581635,12.7700651 L13.8403972,16.4941315 C13.5610922,16.7671364 13.1830854,16.9211391 12.7903784,16.9211391 C12.3990715,16.9211391 12.0210647,16.7671364 11.7403597,16.4941315 L8.02399342,12.7700651 C7.5969858,12.3430574 7.47098355,11.7060461 7.70198767,11.1530362 C7.93299179,10.6000263 8.46500128,10.24302 9.06701202,10.24302 L10.4040359,10.24302 C10.3690352,9.92101423 10.2780336,9.55700774 10.1240309,9.17200087 C10.07573,9.05999887 10.0260291,8.94799688 9.97002813,8.83599488 C9.89302676,8.70999263 9.90072689,8.67499201 9.79502501,8.52098926 C9.62702201,8.26898476 9.47301926,8.07998139 9.29031601,7.86297752 C8.9200094,7.4639704 8.47200141,7.12096429 7.99599292,6.86895979 C7.5129843,6.6169553 7.00897531,6.46295255 6.56096732,6.37895105 C6.11995945,6.30194968 5.71395221,6.29494955 5.47594796,6.29494955 C5.35694584,6.28794943 5.2029431,6.31594993 5.12594172,6.32295005 C5.04194022,6.32995018 4.99293935,6.3369503 4.99293935,6.3369503 C4.49593048,6.38595117 4.04792249,6.02194468 3.99892162,5.52493582 C3.95692087,5.10492832 4.20192524,4.72692158 4.57293186,4.58691908 C4.57293186,4.58691908 4.62193273,4.56591871 4.6989341,4.53791821 C4.78993573,4.50991771 4.87393723,4.46091684 5.06994072,4.40491584 C5.46194772,4.28591371 5.95895658,4.15991147 6.60996819,4.09691034 C7.25397968,4.04090934 8.03099354,4.05490959 8.85070816,4.22291259 C9.66902276,4.39791571 10.5300381,4.72692158 11.3280524,5.20293007 C11.7060591,5.44793444 12.1120663,5.73493956 12.427072,6.01494456 C12.5670745,6.11994643 12.8050787,6.35795068 12.9450812,6.5049533 C13.1060841,6.67295629 13.2530867,6.84095929 13.4007893,7.01596241 C13.9670994,7.7159749 14.3871069,8.47198839 14.6601118,9.15800062 C14.8211147,9.55000762 14.9331167,9.92101423 15.0171182,10.24302 L16.5151449,10.24302 C17.1171556,10.24302 17.6491651,10.6000263 17.8801692,11.1530362 C18.1111734,11.7060461 17.9851711,12.3430574 17.5581635,12.7700651" id="Fill-1" transform="translate(10.994247, 10.494247) rotate(-45.000000) translate(-10.994247, -10.494247) "></path>
         </g>
     </g>

src/components/sound-editor/icon--undo.svg

@@ -5,7 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="undo" fill="#4C97FF">
+        <!-- tw: update fill -->
+        <g id="undo" fill="#FF4D4D">
             <path d="M15.5581635,12.7700651 L11.8403972,16.4941315 C11.5610922,16.7671364 11.1830854,16.9211391 10.7903784,16.9211391 C10.3990715,16.9211391 10.0210647,16.7671364 9.74035971,16.4941315 L6.02399342,12.7700651 C5.5969858,12.3430574 5.47098355,11.7060461 5.70198767,11.1530362 C5.93299179,10.6000263 6.46500128,10.24302 7.06701202,10.24302 L8.40403587,10.24302 C8.36903525,9.92101423 8.27803362,9.55700774 8.12403088,9.17200087 C8.07573002,9.05999887 8.02602913,8.94799688 7.97002813,8.83599488 C7.89302676,8.70999263 7.90072689,8.67499201 7.79502501,8.52098926 C7.62702201,8.26898476 7.47301926,8.07998139 7.29031601,7.86297752 C6.9200094,7.4639704 6.47200141,7.12096429 5.99599292,6.86895979 C5.5129843,6.6169553 5.00897531,6.46295255 4.56096732,6.37895105 C4.11995945,6.30194968 3.71395221,6.29494955 3.47594796,6.29494955 C3.35694584,6.28794943 3.2029431,6.31594993 3.12594172,6.32295005 C3.04194022,6.32995018 2.99293935,6.3369503 2.99293935,6.3369503 C2.49593048,6.38595117 2.04792249,6.02194468 1.99892162,5.52493582 C1.95692087,5.10492832 2.20192524,4.72692158 2.57293186,4.58691908 C2.57293186,4.58691908 2.62193273,4.56591871 2.6989341,4.53791821 C2.78993573,4.50991771 2.87393723,4.46091684 3.06994072,4.40491584 C3.46194772,4.28591371 3.95895658,4.15991147 4.60996819,4.09691034 C5.25397968,4.04090934 6.03099354,4.05490959 6.85070816,4.22291259 C7.66902276,4.39791571 8.53003812,4.72692158 9.32805235,5.20293007 C9.7060591,5.44793444 10.1120663,5.73493956 10.427072,6.01494456 C10.5670745,6.11994643 10.8050787,6.35795068 10.9450812,6.5049533 C11.1060841,6.67295629 11.2530867,6.84095929 11.4007893,7.01596241 C11.9670994,7.7159749 12.3871069,8.47198839 12.6601118,9.15800062 C12.8211147,9.55000762 12.9331167,9.92101423 13.0171182,10.24302 L14.5151449,10.24302 C15.1171556,10.24302 15.6491651,10.6000263 15.8801692,11.1530362 C16.1111734,11.7060461 15.9851711,12.3430574 15.5581635,12.7700651" id="Fill-1" transform="translate(8.994247, 10.494247) scale(-1, 1) rotate(-45.000000) translate(-8.994247, -10.494247) "></path>
         </g>
     </g>

src/components/sprite-info/icon--hide.svg

@@ -5,7 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="hide-icon-active" fill="#4C97FF">
+        <!-- tw: update fill -->
+        <g id="hide-icon-active" fill="#FF4D4D">
             <g transform="translate(1.000000, 1.000000)" id="Combined-Shape">
                 <path d="M2.06675537,10.5669531 C0.999299947,9.6010063 0.49087044,8.63529009 0.49087044,8.63529009 C-0.150519518,7.7321443 -0.176597571,6.24678071 0.49087044,5.36470987 C0.49087044,5.36470987 2.52555986,1.5 6.99999999,1.5 C8.31672118,1.5 9.42216368,1.83467798 10.32665,2.30705842 L11.9737085,0.659999967 L12.6808152,1.36710675 L1.36710675,12.6808152 L0.659999967,11.9737085 L2.06675537,10.5669531 Z M9.06150447,3.57220396 C8.4592531,3.20897321 7.75347776,3 6.99889412,3 C4.7900605,3 2.99944706,4.79061344 2.99944706,6.99944706 C2.99944706,7.75403071 3.20842027,8.45980605 3.57165102,9.06205741 L5.07816645,7.55554198 C5.02727139,7.37916271 5,7.19276614 5,7 C5,5.8954305 5.8954305,5 7,5 C7.19276614,5 7.37916271,5.02727139 7.55554198,5.07816645 L9.06150447,3.57220396 Z M3.68757244,11.7003495 L4.95187601,10.4360459 C5.55070241,10.7935069 6.25081289,10.9988941 6.99889412,10.9988941 C9.2077277,10.9988941 10.9983412,9.20828068 10.9983412,6.99944706 C10.9983412,6.25136583 10.792954,5.55125535 10.435493,4.95242895 L11.9445897,3.44333221 C13.0043028,4.40583676 13.5091295,5.36470987 13.5091295,5.36470987 C14.1505195,6.26785566 14.1765976,7.75321925 13.5091295,8.63529009 C13.5091295,8.63529009 11.4744401,12.5 6.99999999,12.5 C5.69017232,12.5 4.58941688,12.1688172 3.68757244,11.7003495 Z M6.46130696,8.92661494 L8.92661494,6.46130696 C8.9744347,6.63269299 9,6.81336095 9,7 C9,8.1045695 8.1045695,9 7,9 C6.81336095,9 6.63269299,8.9744347 6.46130696,8.92661494 Z"></path>
             </g>

src/components/sprite-info/icon--show.svg

@@ -5,7 +5,8 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="show-icon-active" fill-rule="nonzero" fill="#4C97FF">
+        <!-- tw: update fill -->
+        <g id="show-icon-active" fill-rule="nonzero" fill="#FF4D4D">
             <g transform="translate(1.000000, 2.000000)">
                 <path d="M13.5091295,4.36470987 C14.1505195,5.26785566 14.1765976,6.75321925 13.5091295,7.63529009 C13.5091295,7.63529009 11.4744401,11.5 6.99999999,11.5 C2.52555986,11.5 0.49087044,7.63529009 0.49087044,7.63529009 C-0.150519518,6.7321443 -0.176597571,5.24678071 0.49087044,4.36470987 C0.49087044,4.36470987 2.52555986,0.5 6.99999999,0.5 C11.4744401,0.5 13.5091295,4.36470987 13.5091295,4.36470987 Z M6.99889412,9.99889412 C9.2077277,9.99889412 10.9983412,8.20828068 10.9983412,5.99944706 C10.9983412,3.79061344 9.2077277,2 6.99889412,2 C4.7900605,2 2.99944706,3.79061344 2.99944706,5.99944706 C2.99944706,8.20828068 4.7900605,9.99889412 6.99889412,9.99889412 Z" id="Combined-Shape"></path>
                 <circle id="Oval" cx="7" cy="6" r="2"></circle>

src/components/sprite-selector/sprite-selector.jsx

@@ -120,7 +120,7 @@ const SpriteSelectorComponent = function (props) {
                         title: intl.formatMessage(messages.addSpriteFromFile),
                         img: fileUploadIcon,
                         onClick: onFileUploadClick,
-                        fileAccept: '.svg, .png, .jpg, .jpeg, .sprite2, .sprite3, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .sprite2, .sprite3, .gif',
                         fileChange: onSpriteUpload,
                         fileInput: spriteFileInput,
                         fileMultiple: true

src/components/stage-header/icon--large-stage.svg

@@ -5,10 +5,12 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Large-Stage-(active)" stroke="#4C97FF">
+        <!-- tw: update fill -->
+        <g id="Large-Stage-(active)" stroke="#FF4D4D">
             <g id="large-stage-(inactive)" transform="translate(3.000000, 4.000000)">
                 <path d="M1,0 L7,0 L7,12 L1,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 L0,1 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="Rectangle"></path>
-                <path d="M7,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,5.25 L7,5.25 L7,0 Z" id="Rectangle" fill="#4C97FF"></path>
+                <!-- tw: update fill -->
+                <path d="M7,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,5.25 L7,5.25 L7,0 Z" id="Rectangle" fill="#FF4D4D"></path>
                 <path d="M7,5 L14,5 L14,11 L14,11 C14,11.5522847 13.5522847,12 13,12 L7,12 L7,5 Z" id="Rectangle-Copy"></path>
             </g>
         </g>

src/components/stage-header/icon--small-stage.svg

@@ -5,10 +5,12 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Small-Stage-(inactive)" stroke="#4C97FF">
+        <!-- tw: update fill -->
+        <g id="Small-Stage-(inactive)" stroke="#FF4D4D">
             <g id="small-stage-(inactive)" transform="translate(3.000000, 4.000000)">
                 <path d="M1,0 L10,0 L10,12 L1,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 L0,1 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="Rectangle"></path>
-                <path d="M10,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,3 L10,3 L10,0 Z" id="Rectangle" fill="#4C97FF"></path>
+                <!-- tw: update fill -->
+                <path d="M10,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,3 L10,3 L10,0 Z" id="Rectangle" fill="#FF4D4D"></path>
                 <path d="M10,3 L14,3 L14,11 L14,11 C14,11.5522847 13.5522847,12 13,12 L10,12 L10,3 Z" id="Rectangle-Copy"></path>
             </g>
         </g>

src/components/stage-header/stage-header.css

@@ -15,6 +15,16 @@
     z-index: $z-index-stage-header;
 }
 
+/* tw: support dark mode */
+[theme="dark"] .stage-header-wrapper-overlay {
+    background-color: #111;
+}
+
+/* tw: do not show color in header when embedded */
+.embedded {
+    background-color: transparent;
+}
+
 .stage-menu-wrapper {
     display: flex;
     margin: auto;

src/components/stage-header/stage-header.jsx

@@ -19,6 +19,8 @@ import unFullScreenIcon from './icon--unfullscreen.svg';
 import scratchLogo from '../menu-bar/scratch-logo.svg';
 import styles from './stage-header.css';
 
+import FullscreenAPI from '../../lib/tw-fullscreen-api';
+
 const messages = defineMessages({
     largeStageSizeMessage: {
         defaultMessage: 'Switch to large stage',
@@ -56,29 +58,18 @@ const StageHeaderComponent = function (props) {
         onSetStageSmall,
         onSetStageFull,
         onSetStageUnFull,
-        showBranding,
+        isEmbedded,
         stageSizeMode,
         vm
     } = props;
 
     let header = null;
 
-    if (isFullScreen) {
+    if (isFullScreen || isEmbedded) {
         const stageDimensions = getStageDimensions(null, true);
-        const stageButton = showBranding ? (
-            <div className={styles.embedScratchLogo}>
-                <a
-                    href="https://scratch.mit.edu"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                >
-                    <img
-                        alt="Scratch"
-                        src={scratchLogo}
-                    />
-                </a>
-            </div>
-        ) : (
+        const stageButton = isEmbedded && !FullscreenAPI.available() ? (
+            null
+        ) : isFullScreen ? (
             <Button
                 className={styles.stageButton}
                 onClick={onSetStageUnFull}
@@ -92,9 +83,27 @@ const StageHeaderComponent = function (props) {
                     title={props.intl.formatMessage(messages.fullscreenControl)}
                 />
             </Button>
+            
+        ) : (
+            <Button
+                className={styles.stageButton}
+                onClick={onSetStageFull}
+            >
+                <img
+                    alt={props.intl.formatMessage(messages.fullStageSizeMessage)}
+                    className={styles.stageButtonIcon}
+                    draggable={false}
+                    src={fullScreenIcon}
+                    title={props.intl.formatMessage(messages.fullscreenControl)}
+                />
+            </Button>
         );
         header = (
-            <Box className={styles.stageHeaderWrapperOverlay}>
+            <Box
+                className={classNames(styles.stageHeaderWrapperOverlay, {
+                    [styles.embedded]: isEmbedded
+                })}
+            >
                 <Box
                     className={styles.stageMenuWrapper}
                     style={{width: stageDimensions.width}}
@@ -189,7 +198,7 @@ StageHeaderComponent.propTypes = {
     onSetStageLarge: PropTypes.func.isRequired,
     onSetStageSmall: PropTypes.func.isRequired,
     onSetStageUnFull: PropTypes.func.isRequired,
-    showBranding: PropTypes.bool.isRequired,
+    isEmbedded: PropTypes.bool.isRequired,
     stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
     vm: PropTypes.instanceOf(VM).isRequired
 };

src/components/stage-selector/stage-selector.jsx

@@ -102,7 +102,7 @@ const StageSelector = props => {
                         title: intl.formatMessage(messages.addBackdropFromFile),
                         img: fileUploadIcon,
                         onClick: onBackdropFileUploadClick,
-                        fileAccept: '.svg, .png, .jpg, .jpeg, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .gif',
                         fileChange: onBackdropFileUpload,
                         fileInput: fileInputRef,
                         fileMultiple: true

src/components/stage-wrapper/stage-wrapper.css

@@ -1,5 +1,11 @@
 @import "../../css/units.css";
 @import "../../css/colors.css";
+@import "../../css/z-index.css";
+
+/* tw: this changes the loading screen to be contained to the stage */
+.stage-wrapper {
+    position: relative;
+}
 
 .stage-wrapper * {
     box-sizing: border-box;
@@ -9,3 +15,31 @@
     /* Hides negative space between edge of rounded corners + container, when selected */
     user-select: none;
 }
+
+.stage-wrapper.full-screen {
+    position: fixed;
+    top: $stage-menu-height;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-stage-wrapper-overlay;
+    background-color: $ui-white;
+    /* spacing between stage and control bar (on the top), or between
+    stage and window edges (on left/right/bottom) */
+    padding: $stage-full-screen-stage-padding;
+
+    /* this centers the stage */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* tw: support dark mode */
+[theme="dark"] .stage-wrapper.full-screen {
+    background-color: #111;
+}
+
+/* tw: do not show color in embeds */
+.stage-wrapper.embedded {
+    background-color: transparent;
+}

src/components/stage-wrapper/stage-wrapper.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import VM from 'scratch-vm';
 
 import Box from '../box/box.jsx';
@@ -12,6 +13,7 @@ import styles from './stage-wrapper.css';
 
 const StageWrapperComponent = function (props) {
     const {
+        isEmbedded,
         isFullScreen,
         isRtl,
         isRendererSupported,
@@ -22,7 +24,11 @@ const StageWrapperComponent = function (props) {
 
     return (
         <Box
-            className={styles.stageWrapper}
+            className={classNames(
+                styles.stageWrapper,
+                {[styles.embedded]: isEmbedded},
+                {[styles.fullScreen]: isFullScreen},
+            )}
             dir={isRtl ? 'rtl' : 'ltr'}
         >
             <Box className={styles.stageMenuWrapper}>
@@ -49,6 +55,7 @@ const StageWrapperComponent = function (props) {
 };
 
 StageWrapperComponent.propTypes = {
+    isEmbedded: PropTypes.bool,
     isFullScreen: PropTypes.bool,
     isRendererSupported: PropTypes.bool.isRequired,
     isRtl: PropTypes.bool.isRequired,

src/components/stage/stage.css

@@ -21,6 +21,13 @@
 
     /* Make sure border is not included in size calculation */
     box-sizing: content-box !important;
+
+    /* enforce overflow + reset position of absolutely-positioned children */
+    position: relative;
+}
+
+.stage.full-screen {
+    /* tw: remove fullscreen border */
 }
 
 .with-color-picker {
@@ -43,63 +50,30 @@
     position: relative;
 }
 
-.stage-wrapper-overlay {
-    position: fixed;
-    top: $stage-menu-height;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: $z-index-stage-wrapper-overlay;
-    background-color: $ui-white;
-    /* spacing between stage and control bar (on the top), or between
-    stage and window edges (on left/right/bottom) */
-    padding: $stage-full-screen-stage-padding;
-}
-
-/* wraps only main content of overlay player, not monitors */
-.stage-overlay-content {
-    outline: none;
-    margin: auto;
-    border: $stage-full-screen-border-width solid rgb(126, 133, 151);
-    padding: 0;
-    border-radius: $space;
-
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.stage-overlay-content-border-override {
-    border: none;
-}
-
-/* adjust monitors when stage is standard size:
-shift them down and right to compensate for the stage's border */
-.stage-wrapper .monitor-wrapper {
+/* we want stage overlays to all be positioned in the same spot as the stage, but can't put them inside the border
+because we want their overflow to be visible, and the bordered element must have overflow: hidden set so that the
+stage doesn't "spill" out from under its rounded corners. instead, shift these over by the border width. */
+.stage-overlays {
+    position: absolute;
     top: $stage-standard-border-width;
     left: $stage-standard-border-width;
+
+    /* the overlay itself should not capture pointer events; only its child elements can do that */
+    pointer-events: none;
 }
 
-/* adjust monitors when stage is full screen:
-.stage-wrapper-overlay uses position: fixed instead of relative, so we need
-to adjust for the border using a different method */
-.stage-wrapper-overlay .monitor-wrapper {
-    padding-top: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
-    padding-bottom: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
+.stage-overlays.full-screen {
+    top: $stage-full-screen-border-width;
+    left: $stage-full-screen-border-width;
 }
 
 .monitor-wrapper,
-.color-picker-wrapper,
 .frame-wrapper,
 .green-flag-overlay-wrapper {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
     pointer-events: none;
-    overflow: hidden;
 }
 
 .dragging-sprite {
@@ -108,7 +82,7 @@ to adjust for the border using a different method */
     left: 0;
     z-index: $z-index-dragging-sprite;
     filter: drop-shadow(5px 5px 5px $ui-black-transparent);
- }
+}
 
 .stage-bottom-wrapper {
     position: absolute;
@@ -116,6 +90,7 @@ to adjust for the border using a different method */
     flex-direction: column;
     justify-content: flex-end;
     top: 0;
+    left: 0;
     overflow: hidden;
     pointer-events: none;
 }
@@ -133,7 +108,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;
@@ -143,6 +117,8 @@ to adjust for the border using a different method */
 }
 
 .green-flag-overlay-wrapper {
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

src/components/stage/stage.jsx

@@ -35,23 +35,17 @@ const StageComponent = props => {
     const stageDimensions = getStageDimensions(stageSize, isFullScreen);
 
     return (
-        <div>
+        <React.Fragment>
             <Box
-                className={classNames({
-                    [styles.stageWrapper]: !isFullScreen,
-                    [styles.stageWrapperOverlay]: isFullScreen,
-                    [styles.withColorPicker]: !isFullScreen && isColorPicking
-                })}
-                style={{
-                    minHeight: stageDimensions.height,
-                    minWidth: stageDimensions.width
-                }}
+                className={classNames(
+                    styles.stageWrapper,
+                    {[styles.withColorPicker]: !isFullScreen && isColorPicking})}
                 onDoubleClick={onDoubleClick}
             >
                 <Box
                     className={classNames(
                         styles.stage,
-                        {[styles.stageOverlayContent]: isFullScreen}
+                        {[styles.fullScreen]: isFullScreen}
                     )}
                     style={{
                         height: stageDimensions.height,
@@ -66,18 +60,61 @@ const StageComponent = props => {
                         }}
                         {...boxProps}
                     />
+                    <Box className={styles.monitorWrapper}>
+                        <MonitorList
+                            draggable={useEditorDragStyle}
+                            stageSize={stageDimensions}
+                        />
+                    </Box>
+                    <Box className={styles.frameWrapper}>
+                        <TargetHighlight
+                            className={styles.frame}
+                            stageHeight={stageDimensions.height}
+                            stageWidth={stageDimensions.width}
+                        />
+                    </Box>
+                    {isColorPicking && colorInfo ? (
+                        <Loupe colorInfo={colorInfo} />
+                    ) : null}
                 </Box>
-                <Box className={styles.monitorWrapper}>
-                    <MonitorList
-                        draggable={useEditorDragStyle}
-                        stageSize={stageDimensions}
-                    />
-                </Box>
-                <Box className={styles.frameWrapper}>
-                    <TargetHighlight
-                        className={styles.frame}
-                        stageHeight={stageDimensions.height}
-                        stageWidth={stageDimensions.width}
+
+                {/* `stageOverlays` is for items that should *not* have their overflow contained within the stage */}
+                <Box
+                    className={classNames(
+                        styles.stageOverlays,
+                        {[styles.fullScreen]: isFullScreen}
+                    )}
+                >
+                    <div
+                        className={styles.stageBottomWrapper}
+                        style={{
+                            width: stageDimensions.width,
+                            height: stageDimensions.height
+                        }}
+                    >
+                        {micIndicator ? (
+                            <MicIndicator
+                                className={styles.micIndicator}
+                                stageSize={stageDimensions}
+                            />
+                        ) : null}
+                        {question === null ? null : (
+                            <div
+                                className={styles.questionWrapper}
+                                style={{width: stageDimensions.width}}
+                            >
+                                <Question
+                                    question={question}
+                                    onQuestionAnswered={onQuestionAnswered}
+                                />
+                            </div>
+                        )}
+                    </div>
+                    <canvas
+                        className={styles.draggingSprite}
+                        height={0}
+                        ref={dragRef}
+                        width={0}
                     />
                 </Box>
                 {isStarted ? null : (
@@ -86,44 +123,6 @@ const StageComponent = props => {
                         wrapperClass={styles.greenFlagOverlayWrapper}
                     />
                 )}
-                {isColorPicking && colorInfo ? (
-                    <Box className={styles.colorPickerWrapper}>
-                        <Loupe colorInfo={colorInfo} />
-                    </Box>
-                ) : null}
-                <div
-                    className={styles.stageBottomWrapper}
-                    style={{
-                        width: stageDimensions.width,
-                        height: stageDimensions.height,
-                        left: '50%',
-                        marginLeft: stageDimensions.width * -0.5
-                    }}
-                >
-                    {micIndicator ? (
-                        <MicIndicator
-                            className={styles.micIndicator}
-                            stageSize={stageDimensions}
-                        />
-                    ) : null}
-                    {question === null ? null : (
-                        <div
-                            className={styles.questionWrapper}
-                            style={{width: stageDimensions.width}}
-                        >
-                            <Question
-                                question={question}
-                                onQuestionAnswered={onQuestionAnswered}
-                            />
-                        </div>
-                    )}
-                </div>
-                <canvas
-                    className={styles.draggingSprite}
-                    height={0}
-                    ref={dragRef}
-                    width={0}
-                />
             </Box>
             {isColorPicking ? (
                 <Box
@@ -131,7 +130,7 @@ const StageComponent = props => {
                     onClick={onDeactivateColorPicker}
                 />
             ) : null}
-        </div>
+        </React.Fragment>
     );
 };
 StageComponent.propTypes = {

src/components/telemetry-modal/telemetry-modal.jsx

@@ -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);

src/components/tw-description/description.css

@@ -0,0 +1,29 @@
+.description {
+    max-height: 220px;
+    overflow: auto;
+    white-space: pre-line;
+    overflow-wrap: break-word;
+    line-height: 1.5em;
+    padding: 0.5rem;
+    margin: 5px 0 8px 0;
+    border: 1px solid #b9d6ff;
+    background-color: #dbebff;
+}
+
+.description a {
+    font-weight: bold;
+    text-decoration: none;
+}
+
+[theme="dark"] .description {
+    border-color: #203652;
+    background-color: #16202c;
+}
+
+.header {
+    font-weight: bold;
+}
+
+.divider {
+    margin-top: 8px;
+}

src/components/tw-description/description.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import styles from './description.css';
+import reactStringReplace from 'react-string-replace';
+
+const decorate = text => {
+    // https://github.com/LLK/scratch-www/blob/25232a06bcceeaddec8fcb24fb63a44d870cf1cf/src/lib/decorate-text.jsx
+
+    // Make @mentions clickable
+    text = reactStringReplace(text, /@([\w-]+)/, (match, i) => (
+        <a
+            href={`https://scratch.mit.edu/users/${match}/`}
+            rel="noreferrer"
+            key={match + i}
+        >{`@${match}`}</a>
+    ));
+
+    // Make links clickable
+    const linkRegex = /(https?:\/\/[\w\d_\-.]{1,256}(?:\/(?:\S*[\w:/#[\]@$&'()*+=])?)?(?![^?!,:;\w\s]\S))/g;
+    text = reactStringReplace(text, linkRegex, (match, i) => (
+        <a
+            href={match}
+            rel="noreferrer"
+            key={match + i}
+        >{match}</a>
+    ));
+
+    // Make hashtags clickable
+    text = reactStringReplace(text, /#([\w-]+)/g, (match, i) => (
+        <a
+            href={`https://scratch.mit.edu/search/projects?q=${match}`}
+            key={match + i}
+        >{`#${match}`}</a>
+    ));
+
+    return text;
+};
+
+const Description = ({
+    instructions,
+    credits
+}) => (
+    <div className={styles.description}>
+        {instructions ? (
+            <div>
+                <div className={styles.header}>
+                    <FormattedMessage
+                        defaultMessage="Instructions"
+                        description="Header for instructions section of description"
+                        id="tw.home.instructions"
+                    />
+                </div>
+                {decorate(instructions)}
+            </div>
+        ) : null}
+        {instructions && credits ? (
+            <div className={styles.divider} />
+        ) : null}
+        {credits ? (
+            <div>
+                <div className={styles.header}>
+                    <FormattedMessage
+                        defaultMessage="Notes and Credits"
+                        description="Header for notes and credits section of description"
+                        id="tw.home.credit"
+                    />
+                </div>
+                {decorate(credits)}
+            </div>
+        ) : null}
+    </div>
+);
+
+Description.propTypes = {
+    instructions: PropTypes.string,
+    credits: PropTypes.string
+};
+
+export default Description;

src/components/tw-featured-projects/featured-projects.css

@@ -0,0 +1,43 @@
+.container {
+    margin-bottom: 8px;
+}
+
+.opener-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    opacity: 0.8;
+    color: #222;
+}
+
+.opener-container:hover {
+    opacity: 1;
+}
+
+.opener-content {
+    background-color: white;
+    padding: 4px;
+    border: 1px solid black;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
+}
+
+.projects {
+    position: relative;
+    height: 154px;
+    transition: .2s height;
+}
+
+.opened .projects {
+    height: 310px;
+}
+
+.footer {
+    
+}

src/components/tw-featured-projects/featured-projects.jsx

@@ -0,0 +1,101 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {connect} from 'react-redux';
+import StudioView from '../tw-studioview/studioview.jsx';
+import styles from './featured-projects.css';
+import {getIsLoading, getIsFetchingWithId, setProjectId} from '../../reducers/project-state';
+import analytics from '../../lib/analytics';
+
+class FeaturedProjects extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleSelect',
+            'handleOpenProjects'
+        ]);
+        this.state = {
+            opened: false
+        };
+    }
+    handleSelect (id) {
+        this.props.setProjectId(id);
+        analytics.twEvent('Load Featured');
+    }
+    handleOpenProjects () {
+        this.setState({
+            opened: true
+        });
+    }
+    render () {
+        const opened = this.state.opened;
+        return (
+            <div
+                className={classNames(
+                    styles.container,
+                    {
+                        [styles.opened]: opened
+                    }
+                )}
+            >
+                <div className={styles.projects}>
+                    <StudioView
+                        id={this.props.studio}
+                        onSelect={this.handleSelect}
+                        disabled={this.props.loading}
+                        placeholder={!opened}
+                    />
+                    {opened ? null : (
+                        <div
+                            className={styles.openerContainer}
+                            onClick={this.handleOpenProjects}
+                        >
+                            <div className={styles.openerContent}>
+                                <FormattedMessage
+                                    defaultMessage="Click to view featured projects."
+                                    description="Text to view featured projects"
+                                    id="tw.viewFeaturedProjects"
+                                />
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <div className={styles.footer}>
+                    <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={`https://scratch.mit.edu/studios/${this.props.studio}/`}
+                    >
+                        <FormattedMessage
+                            defaultMessage="View studio on Scratch."
+                            description="Link to turbowarp featured projects studio"
+                            id="tw.featuredProjectsStudio"
+                        />
+                    </a>
+                </div>
+            </div>
+        );
+    }
+}
+
+FeaturedProjects.propTypes = {
+    loading: PropTypes.bool,
+    setProjectId: PropTypes.func,
+    studio: PropTypes.string
+};
+
+const mapStateToProps = state => ({
+    loading: getIsLoading(state.scratchGui.projectState.loadingState) ||
+        getIsFetchingWithId(state.scratchGui.projectState.loadingState)
+});
+
+const mapDispatchToProps = dispatch => ({
+    setProjectId: projectId => dispatch(setProjectId(projectId))
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(FeaturedProjects);

src/components/tw-framerate-indicator/framerate-indicator.css

@@ -0,0 +1,16 @@
+@import "../../css/colors.css";
+
+.framerate-container {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem;
+    user-select: none;
+}
+
+.framerate-label {
+    font-size: 0.625rem;
+    font-weight: bold;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: $control-primary;
+    white-space: nowrap;
+}

src/components/tw-framerate-indicator/framerate-indicator.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import styles from './framerate-indicator.css';
+
+const FramerateIndicator = ({framerate}) => (
+    // do not show an indicator at 30 FPS
+    framerate === 30 ? null : (
+        <div className={styles.framerateContainer}>
+            <div className={styles.framerateLabel}>
+                <FormattedMessage
+                    defaultMessage="{framerate} FPS"
+                    description="Label indicating project framerate"
+                    id="tw.framerateIndicator"
+                    values={{
+                        framerate: framerate
+                    }}
+                />
+            </div>
+        </div>
+    )
+);
+
+FramerateIndicator.propTypes = {
+    framerate: PropTypes.number
+};
+
+export default FramerateIndicator;

src/components/tw-project-input/project-input.css

@@ -0,0 +1,17 @@
+@import "../../css/colors.css";
+
+.input {
+    border: none;
+    width: 100%;
+    font-size: 23px;
+    line-height: 32px;
+    opacity: 0.5;
+    background-color: transparent;
+    color: inherit;
+}
+.input:focus {
+    opacity: 1;
+}
+.input:disabled {
+    opacity: 0.8;
+}

src/components/tw-project-input/project-input.jsx

@@ -0,0 +1,118 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+import bindAll from 'lodash.bindall';
+
+import {defaultProjectId, setProjectId, getIsLoading, getIsFetchingWithId} from '../../reducers/project-state';
+import styles from './project-input.css';
+
+const PROJECT_BASE = 'https://scratch.mit.edu/projects/';
+
+class ProjectInput extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleKeyDown',
+            'handleChange',
+            'handlePaste',
+            'handleBlur',
+            'handleFocus',
+            'inputRef'
+        ]);
+        this.state = {
+            projectId: this.props.projectId
+        };
+    }
+    componentDidUpdate (prevProps) {
+        if (this.props.projectId !== prevProps.projectId || this.props.loading !== prevProps.loading) {
+            if (this.props.projectId === defaultProjectId) {
+                this.input.focus();
+                this.input.selectionStart = this.input.value.length;
+            } else {
+                this.input.blur();
+            }
+            this.setState({
+                projectId: this.props.projectId
+            });
+        }
+    }
+    extractProjectId (text) {
+        const numberMatch = text.match(/\d+/);
+        return numberMatch ? numberMatch[0] : null;
+    }
+    readProjectId (e) {
+        const id = this.extractProjectId(e.target.value);
+        return id || defaultProjectId;
+    }
+    handleKeyDown (e) {
+        if (e.key === 'Enter' && this.state.projectId) {
+            this.props.setProjectId(this.state.projectId);
+            this.input.blur();
+        }
+    }
+    handleChange (e) {
+        this.setState({
+            projectId: this.readProjectId(e) || defaultProjectId
+        });
+    }
+    handlePaste () {
+        // const data = e.clipboardData.getData('Text');
+        // const id = this.extractProjectId(data);
+        // if (id) {
+        //     this.setState({
+        //         projectId: id
+        //     });
+        // }
+    }
+    handleBlur () {
+        if (this.state.projectId) {
+            this.props.setProjectId(this.state.projectId);
+        }
+    }
+    handleFocus (e) {
+        if (this.extractProjectId(e.target.value)) {
+            e.target.select();
+        }
+    }
+    inputRef (el) {
+        this.input = el;
+    }
+    render () {
+        const projectId = this.state.projectId === defaultProjectId ? '' : this.state.projectId || '';
+        return (
+            <input
+                ref={this.inputRef}
+                spellCheck="false"
+                type="text"
+                value={`${PROJECT_BASE}${projectId}`}
+                className={styles.input}
+                onKeyDown={this.handleKeyDown}
+                onChange={this.handleChange}
+                onPaste={this.handlePaste}
+                onBlur={this.handleBlur}
+                onFocus={this.handleFocus}
+                disabled={this.props.loading}
+            />
+        );
+    }
+}
+
+ProjectInput.propTypes = {
+    projectId: PropTypes.string,
+    setProjectId: PropTypes.func,
+    loading: PropTypes.bool
+};
+
+const mapStateToProps = state => ({
+    projectId: state.scratchGui.projectState.projectId,
+    loading: getIsLoading(state.scratchGui.projectState.loadingState) || getIsFetchingWithId(state.scratchGui.projectState.loadingState)
+});
+
+const mapDispatchToProps = dispatch => ({
+    setProjectId: projectId => dispatch(setProjectId(projectId))
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ProjectInput);

src/components/tw-studioview/studioview.css

@@ -0,0 +1,107 @@
+/*
+Imported from:
+https://github.com/forkphorus/forkphorus/tree/master/studioview
+With changes to make it work properly in the scratch-gui environment.
+*/
+
+/* we wrap it in a <div> */
+.wrapper {
+  height: 100%;
+}
+/* we let you disable the view */
+.disabled {
+  pointer-events: none;
+  opacity: 0.8;
+}
+/* fix some styles that can be messed up by scratch-gui */
+.studioview-root * {
+  box-sizing: content-box !important;
+}
+
+.studioview-root {
+  height: 100%;
+}
+.studioview-list {
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  overflow-anchor: none;
+}
+.studioview-project, .studioview-placeholder {
+  display: inline-block;
+  width: 144px;
+  padding: 3px;
+  margin-bottom: 1px;
+  margin-right: 1px;
+}
+.studioview-root .studioview-project {
+  color: inherit;
+  position: relative;
+  text-decoration: none;
+}
+.studioview-loaded:hover::before, .studioview-loaded:active::before {
+  content: '';
+  pointer-events: none;
+  user-select: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+  opacity: 0.1;
+}
+.studioview-root .studioview-loaded:active::before {
+  opacity: 0.2;
+}
+.studioview-root .studioview-title,
+.studioview-root .studioview-author {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  color: inherit;
+  text-decoration: none;
+}
+.studioview-title {
+  font-size: 0.8em;
+  font-weight: bold;
+}
+.studioview-author {
+  font-size: 0.75em;
+}
+.studioview-error {
+  width: 100%;
+}
+
+.studioview-thumbnail, .studioview-placeholder-thumbnail {
+  width: 144px;
+  height: 108px;
+}
+.studioview-thumbnail img {
+  width: 100%;
+  height: 100%;
+}
+
+.studioview-placeholder .studioview-thumbnail,
+.studioview-placeholder .studioview-title,
+.studioview-placeholder .studioview-author {
+  background-color: currentColor;
+  opacity: 0.1;
+}
+
+.studioview-title {
+  height: 20px;
+  margin-top: 2px;
+}
+.studioview-author {
+  height: 18px;
+}
+
+.studioview-placeholder .studioview-title {
+  border-radius: 2px 2px 2px 0;
+  width: 100%;
+}
+.studioview-placeholder .studioview-author {
+  border-radius: 0 0 2px 2px;
+  width: 50%;
+}

src/components/tw-studioview/studioview.js

@@ -0,0 +1,379 @@
+/* eslint-disable */
+// Imported from:
+// https://github.com/forkphorus/forkphorus/tree/master/studioview
+// With changes to make it work properly in the scratch-gui environment.
+// todo: we have to see if we are leaking memory when this is mounted and unmounted, esp. because of event listeners
+// todo: use react-intl for translations
+
+import styles from './studioview.css';
+import classNames from 'classnames';
+
+/**
+ * Determines if an element is visible, accounting for parents and their bounding rects.
+ */
+function isElementVisible(el) {
+    // see https://stackoverflow.com/a/21627295
+    var rect = el.getBoundingClientRect();
+    var top = rect.top;
+    var height = rect.height;
+    var el = el.parentNode;
+
+    if (rect.bottom < 0) return false;
+    if (top > document.documentElement.clientHeight) return false;
+    do {
+        rect = el.getBoundingClientRect();
+        if (top <= rect.bottom === false) return false;
+        if ((top + height) <= rect.top) return false;
+        el = el.parentNode;
+    } while (el != document.body)
+    return true;
+}
+
+/**
+ * @class
+ */
+var StudioView = function (studioId) {
+    this.studioId = studioId;
+    this.page = 1;
+    this.ended = false;
+    this.loadingPage = false;
+    this.unusedPlaceholders = [];
+
+    this.root = document.createElement('div');
+    this.root.className = styles.studioviewRoot;
+    this.projectList = document.createElement('div');
+    this.projectList.className = styles.studioviewList;
+    this.projectList.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });
+    this.root.appendChild(this.projectList);
+
+    if ('IntersectionObserver' in window) {
+        this.intersectionObserver = new IntersectionObserver(this.handleIntersection.bind(this), {
+            root: this.projectList,
+            rootMargin: '25px 0px 25px 0px',
+        });
+    } else {
+        this.intersectionObserver = null;
+    }
+
+    // will be filled in by studioview.jsx
+    this.messages = {
+        AUTHOR_ATTRIBUTION: '',
+        PROJECT_HOVER_TEXT: '',
+        LOAD_ERROR: ''
+    };
+};
+
+/**
+ * Add a project to the view.
+ * An unused placeholder element may be used, or it may be created.
+ */
+StudioView.prototype.addProject = function (details) {
+    var el;
+    if (this.unusedPlaceholders.length) {
+        el = this.unusedPlaceholders.shift();
+    } else {
+        el = this.createPlaceholder();
+        this.projectList.appendChild(el);
+    }
+    this.placeholderToProject(el, details.id, details.title, details.author);
+};
+
+/**
+ * Create an <img> element that will load only when it becomes visible.
+ */
+StudioView.prototype.createLazyImage = function (src) {
+    var el = document.createElement('img');
+    if (this.intersectionObserver) {
+        this.intersectionObserver.observe(el);
+        el.className = styles.studioviewLazy;
+        el.dataset.src = src;
+    } else {
+        // then we just won't lazy load it
+        el.src = src;
+    }
+    return el;
+};
+
+/**
+ * Create a placeholder or placeholder element.
+ */
+StudioView.prototype.createPlaceholder = function () {
+    var el = document.createElement('a');
+    el.className = classNames(styles.studioviewProject, styles.studioviewPlaceholder);
+
+    var thumbnail = document.createElement('div');
+    thumbnail.className = styles.studioviewThumbnail;
+
+    var title = document.createElement('div');
+    title.className = styles.studioviewTitle;
+
+    var author = document.createElement('div');
+    author.className = styles.studioviewAuthor;
+
+    el.thumbnailEl = thumbnail;
+    el.titleEl = title;
+    el.authorEl = author;
+
+    el.appendChild(thumbnail);
+    el.appendChild(title);
+    el.appendChild(author);
+
+    return el;
+};
+
+/**
+ * Convert a placeholder element made by createPlaceholder to a project element.
+ */
+StudioView.prototype.placeholderToProject = function (el, id, title, author) {
+    el.className = classNames(styles.studioviewProject, styles.studioviewLoaded);
+    el.dataset.id = id;
+    el.dataset.title = title;
+    el.dataset.author = author;
+    el.title = this.messages.PROJECT_HOVER_TEXT.replace('$author', author).replace('$title', title);
+    el.href = StudioView.PROJECT_PAGE.replace('$id', id);
+
+    var thumbnailSrc = StudioView.THUMBNAIL_SRC.replace('$id', id);
+    var thumbnailImg = this.createLazyImage(thumbnailSrc);
+    el.thumbnailEl.appendChild(thumbnailImg);
+
+    el.titleEl.innerText = title;
+    el.authorEl.innerText = this.messages.AUTHOR_ATTRIBUTION.replace('$author', author);
+
+    el.addEventListener('click', this.handleClick.bind(this), true);
+    el.addEventListener('keydown', this.handleKeyDown.bind(this), true);
+
+    return el;
+};
+
+/**
+ * Adds an error message to the list.
+ */
+StudioView.prototype.addErrorElement = function () {
+    var el = document.createElement('div');
+    el.innerText = this.messages.LOAD_ERROR;
+    el.className = styles.studioviewError;
+    this.projectList.appendChild(el);
+};
+
+// Called when the project list is scrolled
+StudioView.prototype.handleScroll = function (e) {
+    if (this.canLoadNext() && isElementVisible(this.projectList.lastChild)) {
+        this.loadNextPage();
+    }
+};
+
+// Click a project element or a child of a project element
+StudioView.prototype.clickProject = function (el) {
+    while (!el.classList.contains(styles.studioviewProject)) {
+        el = el.parentNode;
+    }
+    var id = el.dataset.id;
+    this.onselect(id, el);
+}
+
+// Called when click is fired on a project element
+StudioView.prototype.handleClick = function (e) {
+    e.preventDefault();
+    this.clickProject(e.target);
+};
+
+// Called when keydown is fired on a project element
+StudioView.prototype.handleKeyDown = function (e) {
+    if (e.keyCode === 13) {
+        // treat enter (13) as click
+        e.preventDefault();
+        this.clickProject(e.target);
+    }
+};
+
+// Called by the IntersectionObserver when it sees an intersection
+StudioView.prototype.handleIntersection = function (entries, observer) {
+    entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+            var target = entry.target;
+            target.src = target.dataset.src;
+            target.dataset.src = '';
+            target.className = '';
+            observer.unobserve(target);
+        }
+    });
+};
+
+/**
+ * Determines whether it is safe to attempt to load the next page.
+ */
+StudioView.prototype.canLoadNext = function () {
+    return !this.loadingPage && !this.ended;
+};
+
+/**
+ * Remove all unused placeholder elements.
+ */
+StudioView.prototype.cleanupPlaceholders = function () {
+    while (this.unusedPlaceholders.length) {
+        var el = this.unusedPlaceholders.pop();
+        this.projectList.removeChild(el);
+    }
+};
+
+/**
+ * Add placeholder placeholder elements.
+ */
+StudioView.prototype.addPlaceholders = function () {
+    for (var i = 0; i < StudioView.PLACEHOLDER_COUNT; i++) {
+        var el = this.createPlaceholder();
+        this.unusedPlaceholders.push(el);
+        this.projectList.appendChild(el);
+    }
+};
+
+/**
+ * Make changes to the order of projects.
+ * Default shuffler does nothing.
+ */
+StudioView.prototype.shuffler = function (projects) {
+    return projects;
+};
+
+/**
+ * Begins loading the next page.
+ */
+StudioView.prototype.loadNextPage = function () {
+    if (this.loadingPage) {
+        throw new Error('Already loading the next page');
+    }
+    if (this.ended) {
+        throw new Error('There are no more pages to load');
+    }
+
+    if (this.unusedPlaceholders.length === 0) {
+        this.addPlaceholders();
+    }
+    this.root.setAttribute('loading', '');
+    this.loadingPage = true;
+
+    var xhr = new XMLHttpRequest();
+    xhr.onload = function () {
+        // We cannot just set xhr.responseType="document" because the proxy returns text/plain
+        var docSource = xhr.response;
+        var doc = new DOMParser().parseFromString(docSource, 'text/html');
+
+        var projects = [];
+        var projectElements = doc.querySelectorAll('.project');
+        /*
+        Each project element should be:
+        <li class="project thumb item" data-id="12345">
+          <a href="/projects/12345/">
+            <img class="lazy image" data-original="//cdn2.scratch.mit.edu/get_image/project/12345_144x108.png" width="144" height="108" />
+          </a>
+          <span class="title">
+            <a href="/projects/12345/">Title</a>
+          </span>
+          <span class="owner" >
+            by <a href="/users/Author/">Author</a>
+          </span>
+        </li>
+        */
+        for (var i = 0; i < projectElements.length; i++) {
+            var project = projectElements[i];
+            var id = project.getAttribute('data-id');
+            var title = project.querySelector('.title').textContent.trim();
+            var author = project.querySelector('.owner a').textContent.trim();
+            projects.push({
+                id: id,
+                title: title,
+                author: author,
+            });
+        }
+        projects = this.shuffler(projects);
+        for (var i = 0; i < projects.length; i++) {
+            this.addProject(projects[i]);
+        }
+        this.cleanupPlaceholders();
+
+        // All pages except the last have a next page button.
+        if (!doc.querySelector('.next-page')) {
+            this.ended = true;
+            this.onend();
+        }
+
+        this.page++;
+        this.loadingPage = false;
+        this.root.removeAttribute('loading');
+
+        this.onpageload();
+    }.bind(this);
+
+    xhr.onerror = function () {
+        this.root.setAttribute('error', '');
+        this.cleanupPlaceholders();
+        this.addErrorElement();
+        this.ended = true;
+    }.bind(this);
+
+    var url = StudioView.STUDIO_API
+        .replace('$id', this.studioId)
+        .replace('$page', '' + this.page);
+    xhr.open('GET', url);
+    xhr.send();
+};
+
+StudioView.prototype.getURL = function () {
+    return StudioView.STUDIO_PAGE.replace('$id', this.studioId);
+};
+
+StudioView.prototype.onselect = function (id, el) { };
+StudioView.prototype.onpageload = function () { };
+StudioView.prototype.onend = function () { };
+
+// Types of shufflers
+function shuffleList(list) {
+    // https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
+    for (var i = list.length - 1; i > 0; i--) {
+        var random = Math.floor(Math.random() * (i + 1));
+        var tmp = list[i];
+        list[i] = list[random];
+        list[random] = tmp;
+    }
+}
+StudioView.Shufflers = {};
+StudioView.Shufflers.random = function (groupSize) {
+    groupSize = groupSize || Infinity;
+    return function (projects) {
+        if (groupSize === Infinity) {
+            shuffleList(projects);
+            return projects;
+        }
+        var result = [];
+        for (var i = 0; i < projects.length; i += groupSize) {
+            var group = projects.slice(i, i + groupSize);
+            shuffleList(group);
+            for (var j = 0; j < group.length; j++) {
+                result.push(group[j]);
+            }
+        }
+        return result;
+    };
+};
+
+// This can be any URL that is a proxy for https://scratch.mit.edu/site-api/projects/in/5235006/1/
+// Understandably scratch does not set CORS headers on this URL, but a proxy can set it manually.
+// $id will be replaced with the studio ID, and $page with the page.
+StudioView.STUDIO_API = 'https://trampoline.turbowarp.org/site-proxy/projects/in/$id/$page/';
+
+// The URL to download thumbnails from.
+// $id is replaced with the project's ID.
+StudioView.THUMBNAIL_SRC = 'https://cdn2.scratch.mit.edu/get_image/project/$id_144x108.png';
+
+// The URL for project pages.
+// $id is replaced with the project ID.
+StudioView.PROJECT_PAGE = 'https://scratch.mit.edu/projects/$id/';
+
+// The URL for studio pages.
+// $id is replaced with the studio ID.
+StudioView.STUDIO_PAGE = 'https://scratch.mit.edu/studios/$id/';
+
+// The amount of "placeholders" to insert before the next page loads.
+StudioView.PLACEHOLDER_COUNT = 9;
+
+export default StudioView;

src/components/tw-studioview/studioview.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
+import classNames from 'classnames';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
+
+import StudioView from './studioview';
+import styles from './studioview.css';
+
+const messages = defineMessages({
+    authorAttribution: {
+        defaultMessage: 'by {author}',
+        description: 'Displayed in StudioView under project title to credit creator',
+        id: 'tw.studioview.authorAttribution'
+    },
+    hoverText: {
+        defaultMessage: '{title} by {author}',
+        description: 'Displayed in StudioView when hovering on a project',
+        id: 'tw.studioview.hoverText'
+    },
+    error: {
+        defaultMessage: 'There was an error loading the next page of projects.',
+        description: 'Displayed in StudioView when an error occurs',
+        id: 'tw.studioview.error'
+    }
+});
+
+class StudioViewComponent extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleSelect',
+            'ref'
+        ]);
+    }
+    componentDidMount () {
+        this.studioView = new StudioView(this.props.id);
+        this.studioView.messages.AUTHOR_ATTRIBUTION = this.props.intl.formatMessage(messages.authorAttribution, {
+            // studioview uses $-based variables
+            author: '$author'
+        });
+        this.studioView.messages.PROJECT_HOVER_TEXT = this.props.intl.formatMessage(messages.hoverText, {
+            // studioview uses $-based variables
+            author: '$author',
+            title: '$title'
+        });
+        this.studioView.messages.LOAD_ERROR = this.props.intl.formatMessage(messages.error);
+        if (this.props.placeholder) {
+            this.studioView.addPlaceholders();
+        } else {
+            this.studioView.loadNextPage();
+        }
+        this.studioView.onselect = this.handleSelect;
+        this.el.appendChild(this.studioView.root);
+    }
+    componentDidUpdate (prevProps) {
+        if (prevProps.placeholder && !this.props.placeholder) {
+            this.studioView.loadNextPage();
+        }
+    }
+    handleSelect (id) {
+        this.props.onSelect(id);
+    }
+    ref (el) {
+        this.el = el;
+    }
+    render () {
+        return (
+            <div
+                className={classNames(
+                    styles.wrapper,
+                    {
+                        [styles.disabled]: this.props.disabled
+                    }
+                )}
+                ref={this.ref}
+            />
+        );
+    }
+}
+
+StudioViewComponent.propTypes = {
+    id: PropTypes.string.isRequired,
+    intl: intlShape.isRequired,
+    disabled: PropTypes.bool,
+    placeholder: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired
+};
+
+export default injectIntl(StudioViewComponent);

src/containers/alert.jsx

@@ -3,6 +3,7 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import SB3Downloader from './sb3-downloader.jsx';
+import TWAutoSaveLoader from './tw-autosave-loader.jsx';
 import AlertComponent from '../components/alerts/alert.jsx';
 import {openConnectionModal} from '../reducers/modals';
 import {setConnectionModalExtensionId} from '../reducers/connection-modal';
@@ -36,27 +37,32 @@ class Alert extends React.Component {
             onSaveNow,
             showDownload,
             showReconnect,
-            showSaveNow
+            showSaveNow,
+            showRecover
         } = this.props;
         return (
-            <SB3Downloader>{(_, downloadProject) => (
-                <AlertComponent
-                    closeButton={closeButton}
-                    content={content}
-                    extensionName={extensionName}
-                    iconSpinner={iconSpinner}
-                    iconURL={iconURL}
-                    level={level}
-                    message={message}
-                    showDownload={showDownload}
-                    showReconnect={showReconnect}
-                    showSaveNow={showSaveNow}
-                    onCloseAlert={this.handleOnCloseAlert}
-                    onDownload={downloadProject}
-                    onReconnect={this.handleOnReconnect}
-                    onSaveNow={onSaveNow}
-                />
-            )}</SB3Downloader>
+            <TWAutoSaveLoader>{(__, loadAutoSave) => (
+                <SB3Downloader>{(_, downloadProject) => (
+                    <AlertComponent
+                        closeButton={closeButton}
+                        content={content}
+                        extensionName={extensionName}
+                        iconSpinner={iconSpinner}
+                        iconURL={iconURL}
+                        level={level}
+                        message={message}
+                        showDownload={showDownload}
+                        showReconnect={showReconnect}
+                        showSaveNow={showSaveNow}
+                        showRecover={showRecover}
+                        onCloseAlert={this.handleOnCloseAlert}
+                        onDownload={downloadProject}
+                        onReconnect={this.handleOnReconnect}
+                        onRecover={loadAutoSave}
+                        onSaveNow={onSaveNow}
+                    />
+                )}</SB3Downloader>
+            )}</TWAutoSaveLoader>
         );
     }
 }
@@ -88,7 +94,8 @@ Alert.propTypes = {
     onSaveNow: PropTypes.func,
     showDownload: PropTypes.bool,
     showReconnect: PropTypes.bool,
-    showSaveNow: PropTypes.bool
+    showSaveNow: PropTypes.bool,
+    showRecover: PropTypes.bool
 };
 
 export default connect(

src/containers/backdrop-library.jsx

@@ -27,13 +27,13 @@ class BackdropLibrary extends React.Component {
     handleItemSelect (item) {
         const vmBackdrop = {
             name: item.name,
-            rotationCenterX: item.info[0] && item.info[0] / 2,
-            rotationCenterY: item.info[1] && item.info[1] / 2,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            rotationCenterX: item.rotationCenterX,
+            rotationCenterY: item.rotationCenterY,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
         // Do not switch to stage, just add the backdrop
-        this.props.vm.addBackdrop(item.md5, vmBackdrop);
+        this.props.vm.addBackdrop(item.md5ext, vmBackdrop);
     }
     render () {
         return (

src/containers/blocks.jsx

@@ -14,7 +14,7 @@ import ExtensionLibrary from './extension-library.jsx';
 import extensionData from '../lib/libraries/extensions/index.jsx';
 import CustomProcedures from './custom-procedures.jsx';
 import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
-import {STAGE_DISPLAY_SIZES} from '../lib/layout-constants';
+import {BLOCKS_DEFAULT_SCALE, STAGE_DISPLAY_SIZES} from '../lib/layout-constants';
 import DropAreaHOC from '../lib/drop-area-hoc.jsx';
 import DragConstants from '../lib/drag-constants';
 import defineDynamicBlock from '../lib/define-dynamic-block';
@@ -25,12 +25,15 @@ import {activateColorPicker} from '../reducers/color-picker';
 import {closeExtensionLibrary, openSoundRecorder, openConnectionModal} from '../reducers/modals';
 import {activateCustomProcedures, deactivateCustomProcedures} from '../reducers/custom-procedures';
 import {setConnectionModalExtensionId} from '../reducers/connection-modal';
+import {updateMetrics} from '../reducers/workspace-metrics';
 
 import {
     activateTab,
     SOUNDS_TAB_INDEX
 } from '../reducers/editor-tab';
 
+import loadAddons from '../addons/loader';
+
 const addFunctionListener = (object, property, callback) => {
     const oldFn = object[property];
     object[property] = function () {
@@ -48,6 +51,7 @@ class Blocks extends React.Component {
     constructor (props) {
         super(props);
         this.ScratchBlocks = VMScratchBlocks(props.vm);
+        window.ScratchBlocks = this.ScratchBlocks;
         bindAll(this, [
             'attachVM',
             'detachVM',
@@ -79,7 +83,6 @@ class Blocks extends React.Component {
         this.ScratchBlocks.recordSoundCallback = this.handleOpenSoundRecorder;
 
         this.state = {
-            workspaceMetrics: {},
             prompt: null
         };
         this.onTargetsUpdate = debounce(this.onTargetsUpdate, 100);
@@ -161,6 +164,11 @@ class Blocks extends React.Component {
             this.requestToolboxUpdate();
         }
 
+        // tw: load addons when editor is visible
+        if (this.props.isVisible) {
+            loadAddons();
+        }
+
         if (this.props.isVisible === prevProps.isVisible) {
             if (this.props.stageSize !== prevProps.stageSize) {
                 // force workspace to redraw for the new stage size
@@ -301,14 +309,17 @@ class Blocks extends React.Component {
     onWorkspaceMetricsChange () {
         const target = this.props.vm.editingTarget;
         if (target && target.id) {
-            const workspaceMetrics = Object.assign({}, this.state.workspaceMetrics, {
-                [target.id]: {
+            // Dispatch updateMetrics later, since onWorkspaceMetricsChange may be (very indirectly)
+            // called from a reducer, i.e. when you create a custom procedure.
+            // TODO: Is this a vehement hack?
+            setTimeout(() => {
+                this.props.updateMetrics({
+                    targetID: target.id,
                     scrollX: this.workspace.scrollX,
                     scrollY: this.workspace.scrollY,
                     scale: this.workspace.scale
-                }
-            });
-            this.setState({workspaceMetrics});
+                });
+            }, 0);
         }
     }
     onScriptGlowOn (data) {
@@ -338,8 +349,8 @@ class Blocks extends React.Component {
             const stageCostumes = stage.getCostumes();
             const targetCostumes = target.getCostumes();
             const targetSounds = target.getSounds();
-            const dynamicBlocksXML = this.props.vm.runtime.getBlocksXML();
-            return makeToolboxXML(target.isStage, target.id, dynamicBlocksXML,
+            const dynamicBlocksXML = this.props.vm.runtime.getBlocksXML(target);
+            return makeToolboxXML(false, target.isStage, target.id, dynamicBlocksXML,
                 targetCostumes[targetCostumes.length - 1].name,
                 stageCostumes[stageCostumes.length - 1].name,
                 targetSounds.length > 0 ? targetSounds[targetSounds.length - 1].name : ''
@@ -355,7 +366,7 @@ class Blocks extends React.Component {
             this.props.updateToolboxState(toolboxXML);
         }
 
-        if (this.props.vm.editingTarget && !this.state.workspaceMetrics[this.props.vm.editingTarget.id]) {
+        if (this.props.vm.editingTarget && !this.props.workspaceMetrics.targets[this.props.vm.editingTarget.id]) {
             this.onWorkspaceMetricsChange();
         }
 
@@ -381,8 +392,8 @@ class Blocks extends React.Component {
         }
         this.workspace.addChangeListener(this.props.vm.blockListener);
 
-        if (this.props.vm.editingTarget && this.state.workspaceMetrics[this.props.vm.editingTarget.id]) {
-            const {scrollX, scrollY, scale} = this.state.workspaceMetrics[this.props.vm.editingTarget.id];
+        if (this.props.vm.editingTarget && this.props.workspaceMetrics.targets[this.props.vm.editingTarget.id]) {
+            const {scrollX, scrollY, scale} = this.props.workspaceMetrics.targets[this.props.vm.editingTarget.id];
             this.workspace.scrollX = scrollX;
             this.workspace.scrollY = scrollY;
             this.workspace.scale = scale;
@@ -525,6 +536,8 @@ class Blocks extends React.Component {
             onRequestCloseExtensionLibrary,
             onRequestCloseCustomProcedures,
             toolboxXML,
+            updateMetrics: updateMetricsProp,
+            workspaceMetrics,
             ...props
         } = this.props;
         /* eslint-enable no-unused-vars */
@@ -607,15 +620,19 @@ Blocks.propTypes = {
     }),
     stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
     toolboxXML: PropTypes.string,
+    updateMetrics: PropTypes.func,
     updateToolboxState: PropTypes.func,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    workspaceMetrics: PropTypes.shape({
+        targets: PropTypes.objectOf(PropTypes.object)
+    })
 };
 
 Blocks.defaultOptions = {
     zoom: {
         controls: true,
         wheel: true,
-        startScale: 0.675
+        startScale: BLOCKS_DEFAULT_SCALE
     },
     grid: {
         spacing: 40,
@@ -654,7 +671,8 @@ const mapStateToProps = state => ({
     locale: state.locales.locale,
     messages: state.locales.messages,
     toolboxXML: state.scratchGui.toolbox.toolboxXML,
-    customProceduresVisible: state.scratchGui.customProcedures.active
+    customProceduresVisible: state.scratchGui.customProcedures.active,
+    workspaceMetrics: state.scratchGui.workspaceMetrics
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -676,6 +694,9 @@ const mapDispatchToProps = dispatch => ({
     },
     updateToolboxState: toolboxXML => {
         dispatch(updateToolbox(toolboxXML));
+    },
+    updateMetrics: metrics => {
+        dispatch(updateMetrics(metrics));
     }
 });
 

src/containers/controls.jsx

@@ -16,8 +16,18 @@ class Controls extends React.Component {
     }
     handleGreenFlagClick (e) {
         e.preventDefault();
-        if (e.shiftKey) {
-            this.props.vm.setTurboMode(!this.props.turbo);
+        // tw: implement alt+click and right click to toggle FPS
+        if (e.shiftKey || e.altKey || e.type === 'contextmenu') {
+            if (e.shiftKey) {
+                this.props.vm.setTurboMode(!this.props.turbo);
+            }
+            if (e.altKey || e.type === 'contextmenu') {
+                if (this.props.framerate === 30) {
+                    this.props.vm.setFramerate(60);
+                } else {
+                    this.props.vm.setFramerate(30);
+                }
+            }
         } else {
             if (!this.props.isStarted) {
                 this.props.vm.start();
@@ -40,7 +50,7 @@ class Controls extends React.Component {
         return (
             <ControlsComponent
                 {...props}
-                active={projectRunning}
+                active={projectRunning && isStarted}
                 turbo={turbo}
                 onGreenFlagClick={this.handleGreenFlagClick}
                 onStopAllClick={this.handleStopAllClick}
@@ -53,12 +63,14 @@ Controls.propTypes = {
     isStarted: PropTypes.bool.isRequired,
     projectRunning: PropTypes.bool.isRequired,
     turbo: PropTypes.bool.isRequired,
+    framerate: PropTypes.number.isRequired,
     vm: PropTypes.instanceOf(VM)
 };
 
 const mapStateToProps = state => ({
-    isStarted: state.scratchGui.vmStatus.running,
+    isStarted: state.scratchGui.vmStatus.started,
     projectRunning: state.scratchGui.vmStatus.running,
+    framerate: state.scratchGui.tw.framerate,
     turbo: state.scratchGui.vmStatus.turbo
 });
 // no-op function to prevent dispatch prop being passed to component

src/containers/costume-library.jsx

@@ -25,18 +25,14 @@ class CostumeLibrary extends React.PureComponent {
         ]);
     }
     handleItemSelected (item) {
-        const split = item.md5.split('.');
-        const type = split.length > 1 ? split[1] : null;
-        const rotationCenterX = type === 'svg' ? item.info[0] : item.info[0] / 2;
-        const rotationCenterY = type === 'svg' ? item.info[1] : item.info[1] / 2;
         const vmCostume = {
             name: item.name,
-            rotationCenterX,
-            rotationCenterY,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            rotationCenterX: item.rotationCenterX,
+            rotationCenterY: item.rotationCenterY,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
-        this.props.vm.addCostumeFromLibrary(item.md5, vmCostume);
+        this.props.vm.addCostumeFromLibrary(item.md5ext, vmCostume);
     }
     render () {
         return (

src/containers/costume-tab.jsx

@@ -158,14 +158,17 @@ class CostumeTab extends React.Component {
         const blob = new Blob([item.asset.data], {type: item.asset.assetType.contentType});
         downloadBlob(`${item.name}.${item.asset.dataFormat}`, blob);
     }
-    handleNewCostume (costume, fromCostumeLibrary) {
+    handleNewCostume (costume, fromCostumeLibrary, targetId) {
         const costumes = Array.isArray(costume) ? costume : [costume];
 
         return Promise.all(costumes.map(c => {
             if (fromCostumeLibrary) {
                 return this.props.vm.addCostumeFromLibrary(c.md5, c);
             }
-            return this.props.vm.addCostume(c.md5, c);
+            // If targetId is falsy, VM should default it to editingTarget.id
+            // However, targetId should be provided to prevent #5876,
+            // if making new costume takes a while
+            return this.props.vm.addCostume(c.md5, c, targetId);
         }));
     }
     handleNewBlankCostume () {
@@ -176,16 +179,12 @@ class CostumeTab extends React.Component {
     }
     handleSurpriseCostume () {
         const item = costumeLibraryContent[Math.floor(Math.random() * costumeLibraryContent.length)];
-        const split = item.md5.split('.');
-        const type = split.length > 1 ? split[1] : null;
-        const rotationCenterX = type === 'svg' ? item.info[0] : item.info[0] / 2;
-        const rotationCenterY = type === 'svg' ? item.info[1] : item.info[1] / 2;
         const vmCostume = {
             name: item.name,
-            md5: item.md5,
-            rotationCenterX,
-            rotationCenterY,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            md5: item.md5ext,
+            rotationCenterX: item.rotationCenterX,
+            rotationCenterY: item.rotationCenterY,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
         this.handleNewCostume(vmCostume, true /* fromCostumeLibrary */);
@@ -194,23 +193,24 @@ class CostumeTab extends React.Component {
         const item = backdropLibraryContent[Math.floor(Math.random() * backdropLibraryContent.length)];
         const vmCostume = {
             name: item.name,
-            md5: item.md5,
-            rotationCenterX: item.info[0] && item.info[0] / 2,
-            rotationCenterY: item.info[1] && item.info[1] / 2,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            md5: item.md5ext,
+            rotationCenterX: item.rotationCenterX,
+            rotationCenterY: item.rotationCenterY,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
         this.handleNewCostume(vmCostume);
     }
     handleCostumeUpload (e) {
         const storage = this.props.vm.runtime.storage;
+        const targetId = this.props.vm.editingTarget.id;
         this.props.onShowImporting();
         handleFileUpload(e.target, (buffer, fileType, fileName, fileIndex, fileCount) => {
             costumeUpload(buffer, fileType, storage, vmCostumes => {
                 vmCostumes.forEach((costume, i) => {
                     costume.name = `${fileName}${i ? i + 1 : ''}`;
                 });
-                this.handleNewCostume(vmCostumes).then(() => {
+                this.handleNewCostume(vmCostumes, false, targetId).then(() => {
                     if (fileIndex === fileCount - 1) {
                         this.props.onCloseImporting();
                     }
@@ -220,9 +220,10 @@ class CostumeTab extends React.Component {
     }
     handleCameraBuffer (buffer) {
         const storage = this.props.vm.runtime.storage;
+        const targetId = this.props.vm.editingTarget.id;
         costumeUpload(buffer, 'image/png', storage, vmCostumes => {
             vmCostumes[0].name = this.props.intl.formatMessage(messages.costume, {index: 1});
-            this.handleNewCostume(vmCostumes);
+            this.handleNewCostume(vmCostumes, false, targetId);
         });
     }
     handleFileUploadClick () {
@@ -307,7 +308,7 @@ class CostumeTab extends React.Component {
                         title: intl.formatMessage(addFileMessage),
                         img: fileUploadIcon,
                         onClick: this.handleFileUploadClick,
-                        fileAccept: '.svg, .png, .jpg, .jpeg, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .gif',
                         fileChange: this.handleCostumeUpload,
                         fileInput: this.setFileInput,
                         fileMultiple: true

src/containers/error-boundary.jsx

@@ -5,6 +5,7 @@ import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx
 import CrashMessageComponent from '../components/crash-message/crash-message.jsx';
 import log from '../lib/log.js';
 import {recommendedBrowser} from '../lib/supported-browser';
+import analytics from '../lib/analytics';
 
 class ErrorBoundary extends React.Component {
     constructor (props) {
@@ -33,10 +34,16 @@ class ErrorBoundary extends React.Component {
             });
         }
 
+        // tw: Track error event. Error message will be included when plausible's custom props are ready.
+        if (recommendedBrowser()) {
+            analytics.twEvent('Crash');
+        }
+
         // Display fallback UI
         this.setState({
             hasError: true,
-            errorId: window.Sentry ? window.Sentry.lastEventId() : null
+            errorId: window.Sentry ? window.Sentry.lastEventId() : null,
+            errorMessage: `${(error && error.message) || error}`
         });
 
         // Log error locally for debugging as well.
@@ -57,6 +64,7 @@ class ErrorBoundary extends React.Component {
                 return (
                     <CrashMessageComponent
                         eventId={this.state.errorId}
+                        errorMessage={this.state.errorMessage}
                         onReload={this.handleReload}
                     />
                 );

src/containers/green-flag-overlay.jsx

@@ -21,8 +21,6 @@ class GreenFlagOverlay extends React.Component {
     }
 
     render () {
-        if (this.props.isStarted) return null;
-
         return (
             <Box
                 className={this.props.wrapperClass}
@@ -42,13 +40,11 @@ class GreenFlagOverlay extends React.Component {
 
 GreenFlagOverlay.propTypes = {
     className: PropTypes.string,
-    isStarted: PropTypes.bool,
     vm: PropTypes.instanceOf(VM),
     wrapperClass: PropTypes.string
 };
 
 const mapStateToProps = state => ({
-    isStarted: state.scratchGui.vmStatus.started,
     vm: state.scratchGui.vm
 });
 

src/containers/gui.jsx

@@ -100,6 +100,8 @@ GUI.propTypes = {
     fetchingProject: PropTypes.bool,
     intl: intlShape,
     isError: PropTypes.bool,
+    isEmbedded: PropTypes.bool,
+    isFullScreen: PropTypes.bool,
     isLoading: PropTypes.bool,
     isScratchDesktop: PropTypes.bool,
     isShowingProject: PropTypes.bool,
@@ -136,7 +138,8 @@ const mapStateToProps = state => {
         costumesTabVisible: state.scratchGui.editorTab.activeTabIndex === COSTUMES_TAB_INDEX,
         error: state.scratchGui.projectState.error,
         isError: getIsError(loadingState),
-        isFullScreen: state.scratchGui.mode.isFullScreen,
+        isEmbedded: state.scratchGui.mode.isEmbedded,
+        isFullScreen: state.scratchGui.mode.isFullScreen || state.scratchGui.mode.isEmbedded,
         isPlayerOnly: state.scratchGui.mode.isPlayerOnly,
         isRtl: state.locales.isRtl,
         isShowingProject: getIsShowingProject(loadingState),
@@ -175,7 +178,7 @@ const WrappedGui = compose(
     LocalizationHOC,
     ErrorBoundaryHOC('Top Level App'),
     FontLoaderHOC,
-    QueryParserHOC,
+    // QueryParserHOC, // tw: HOC is unused
     ProjectFetcherHOC,
     TitledHOC,
     ProjectSaverHOC,