Merge pull request #5833 from LLK/dependabot/npm_and_yarn/scratch-paint-0.2.0-prerelease.20200529184518

Bumps [scratch-paint](https://github.com/LLK/scratch-paint) from 0.2.0-prerelease.20200519194740 to 0.2.0-prerelease.20200529184518.
- [Release notes](https://github.com/LLK/scratch-paint/releases)
- [Commits](https://github.com/LLK/scratch-paint/commits)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.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

.travis.yml

@@ -4,7 +4,7 @@ dist: xenial
 addons:
     chrome: stable
 node_js:
-- 8
+- 10
 env:
   global:
   - CHROMEDRIVER_VERSION=LATEST

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "npm run clean && webpack --progress --colors --bail",
     "clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
-    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
+    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1) [skip ci]\"",
     "prune": "./prune-gh-pages.sh",
     "i18n:push": "tx-push-src scratch-editor interface translations/en.json",
     "i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/ && npm run i18n:push",
@@ -103,19 +103,18 @@
     "react-test-renderer": "16.2.0",
     "react-tooltip": "3.8.0",
     "react-virtualized": "9.20.1",
-    "react-visibility-sensor": "5.0.2",
     "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",
+    "scratch-audio": "0.1.0-prerelease.20200528195344",
+    "scratch-blocks": "0.1.0-prerelease.20200528193139",
+    "scratch-l10n": "3.9.20200528181319",
+    "scratch-paint": "0.2.0-prerelease.20200529184518",
+    "scratch-render": "0.1.0-prerelease.20200512203149",
+    "scratch-storage": "1.3.3",
+    "scratch-svg-renderer": "0.2.0-prerelease.20200507183648",
+    "scratch-vm": "0.2.0-prerelease.20200527195112",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.0",
@@ -140,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/components/alerts/alert.css

@@ -15,6 +15,7 @@
     padding-right: 1rem;
     margin-bottom: 7px;
     min-height: 1.5rem;
+    pointer-events: all;
 }
 
 .alert.warn {

src/components/gui/gui.css

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

src/components/gui/gui.jsx

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

src/components/library-item/library-item.jsx

@@ -4,7 +4,6 @@ import React from 'react';
 
 import Box from '../box/box.jsx';
 import PlayButton from '../../containers/play-button.jsx';
-import ScratchImage from '../scratch-image/scratch-image.jsx';
 import styles from './library-item.css';
 import classNames from 'classnames';
 
@@ -37,12 +36,10 @@ class LibraryItemComponent extends React.PureComponent {
                             />
                         </div>
                     ) : null}
-                    {this.props.iconSource ? (
-                        <ScratchImage
-                            className={styles.featuredImage}
-                            imageSource={this.props.iconSource}
-                        />
-                    ) : null}
+                    <img
+                        className={styles.featuredImage}
+                        src={this.props.iconURL}
+                    />
                 </div>
                 {this.props.insetIconURL ? (
                     <div className={styles.libraryItemInsetImageContainer}>
@@ -130,9 +127,9 @@ class LibraryItemComponent extends React.PureComponent {
                         onMouseEnter={this.props.showPlayButton ? this.props.onMouseEnter : null}
                         onMouseLeave={this.props.showPlayButton ? this.props.onMouseLeave : null}
                     >
-                        <ScratchImage
+                        <img
                             className={styles.libraryItemImage}
-                            imageSource={this.props.iconSource}
+                            src={this.props.iconURL}
                         />
                     </Box>
                 </Box>
@@ -162,7 +159,7 @@ LibraryItemComponent.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    iconSource: ScratchImage.ImageSourcePropType,
+    iconURL: PropTypes.string,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     isPlaying: PropTypes.bool,

src/components/library/library.jsx

@@ -10,7 +10,6 @@ import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
 import Spinner from '../spinner/spinner.jsx';
-import storage from '../../lib/storage';
 
 import styles from './library.css';
 
@@ -30,47 +29,6 @@ const messages = defineMessages({
 const ALL_TAG = {tag: 'all', intlLabel: messages.allTag};
 const tagListPrefix = [ALL_TAG];
 
-/**
- * Find the AssetType which corresponds to a particular file extension. For example, 'png' => AssetType.ImageBitmap.
- * @param {string} fileExtension - the file extension to look up.
- * @returns {AssetType} - the AssetType corresponding to the extension, if any.
- */
-const getAssetTypeForFileExtension = function (fileExtension) {
-    const compareOptions = {
-        sensitivity: 'accent',
-        usage: 'search'
-    };
-    for (const assetTypeId in storage.AssetType) {
-        const assetType = storage.AssetType[assetTypeId];
-        if (fileExtension.localeCompare(assetType.runtimeFormat, compareOptions) === 0) {
-            return assetType;
-        }
-    }
-};
-
-/**
- * Figure out an `imageSource` (URI or asset ID & type) for a library item's icon.
- * @param {object} item - either a library item or one of a library item's costumes.
- * @returns {object} - an `imageSource` ready to be passed to a `ScratchImage`.
- */
-const getItemImageSource = function (item) {
-    if (item.rawURL) {
-        return {
-            uri: item.rawURL
-        };
-    }
-
-    // TODO: adjust libraries to be more storage-friendly; don't use split() here.
-    const md5ext = item.md5 || item.baseLayerMD5;
-    if (md5ext) {
-        const [assetId, fileExtension] = md5ext.split('.');
-        return {
-            assetId: assetId,
-            assetType: getAssetTypeForFileExtension(fileExtension)
-        };
-    }
-};
-
 class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
@@ -250,10 +208,8 @@ class LibraryComponent extends React.Component {
                     })}
                     ref={this.setFilteredDataRef}
                 >
-                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => {
-                        const iconSource = getItemImageSource(dataItem);
-                        const icons = dataItem.json && dataItem.json.costumes.map(getItemImageSource);
-                        return (<LibraryItem
+                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
+                        <LibraryItem
                             bluetoothRequired={dataItem.bluetoothRequired}
                             collaborator={dataItem.collaborator}
                             description={dataItem.description}
@@ -261,8 +217,9 @@ class LibraryComponent extends React.Component {
                             extensionId={dataItem.extensionId}
                             featured={dataItem.featured}
                             hidden={dataItem.hidden}
-                            iconSource={iconSource}
-                            icons={icons}
+                            iconMd5={dataItem.md5}
+                            iconRawURL={dataItem.rawURL}
+                            icons={dataItem.json && dataItem.json.costumes}
                             id={index}
                             insetIconURL={dataItem.insetIconURL}
                             internetConnectionRequired={dataItem.internetConnectionRequired}
@@ -273,8 +230,8 @@ class LibraryComponent extends React.Component {
                             onMouseEnter={this.handleMouseEnter}
                             onMouseLeave={this.handleMouseLeave}
                             onSelect={this.handleSelect}
-                        />);
-                    }) : (
+                        />
+                    )) : (
                         <div className={styles.spinnerWrapper}>
                             <Spinner
                                 large

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

@@ -218,3 +218,9 @@
 .mystuff > a {
   background-image: url("/images/mystuff.png");
 }
+
+.about-icon {
+    height: 1.25rem;
+    margin: 0.5rem;
+    vertical-align: middle;
+}

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

@@ -69,6 +69,7 @@ import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
+import aboutIcon from './icon--about.svg';
 
 import scratchLogo from './scratch-logo.svg';
 
@@ -141,6 +142,19 @@ MenuItemTooltip.propTypes = {
     isRtl: PropTypes.bool
 };
 
+const AboutButton = props => (
+    <Button
+        className={classNames(styles.menuBarItem, styles.hoverable)}
+        iconClassName={styles.aboutIcon}
+        iconSrc={aboutIcon}
+        onClick={props.onClick}
+    />
+);
+
+AboutButton.propTypes = {
+    onClick: PropTypes.func.isRequired
+};
+
 class MenuBar extends React.Component {
     constructor (props) {
         super(props);
@@ -311,6 +325,8 @@ class MenuBar extends React.Component {
                 {remixMessage}
             </Button>
         );
+        // Show the About button only if we have a handler for it (like in the desktop app)
+        const aboutButton = this.props.onClickAbout ? <AboutButton onClick={this.props.onClickAbout} /> : null;
         return (
             <Box
                 className={classNames(
@@ -689,6 +705,8 @@ class MenuBar extends React.Component {
                         </React.Fragment>
                     )}
                 </div>
+
+                {aboutButton}
             </Box>
         );
     }
@@ -722,6 +740,7 @@ MenuBar.propTypes = {
     locale: PropTypes.string.isRequired,
     loginMenuOpen: PropTypes.bool,
     logo: PropTypes.string,
+    onClickAbout: PropTypes.func,
     onClickAccount: PropTypes.func,
     onClickEdit: PropTypes.func,
     onClickFile: PropTypes.func,

src/components/scratch-image/scratch-image.jsx

@@ -1,139 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import VisibilitySensor from 'react-visibility-sensor';
-
-import storage from '../../lib/storage';
-
-class ScratchImage extends React.PureComponent {
-    static init () {
-        this._maxParallelism = 6;
-        this._currentJobs = 0;
-        this._pendingImages = new Set();
-    }
-
-    static loadPendingImages () {
-        if (this._currentJobs >= this._maxParallelism) {
-            // already busy
-            return;
-        }
-
-        // Find the first visible image. If there aren't any, find the first non-visible image.
-        let nextImage;
-        for (const image of this._pendingImages) {
-            if (image.isVisible) {
-                nextImage = image;
-                break;
-            } else {
-                nextImage = nextImage || image;
-            }
-        }
-
-        // If we found an image to load:
-        // 1) Remove it from the queue
-        // 2) Load the image
-        // 3) Pump the queue again
-        if (nextImage) {
-            this._pendingImages.delete(nextImage);
-            const imageSource = nextImage.props.imageSource;
-            ++this._currentJobs;
-            storage
-                .load(imageSource.assetType, imageSource.assetId)
-                .then(asset => {
-                    if (!nextImage.wasUnmounted) {
-                        const dataURI = asset.encodeDataURI();
-
-                        nextImage.setState({
-                            imageURI: dataURI
-                        });
-                    }
-                    --this._currentJobs;
-                    this.loadPendingImages();
-                });
-        }
-    }
-
-    constructor (props) {
-        super(props);
-        this.state = {};
-        Object.assign(this.state, this._loadImageSource(props.imageSource));
-    }
-    componentWillReceiveProps (nextProps) {
-        const newState = this._loadImageSource(nextProps.imageSource);
-        this.setState(newState);
-    }
-    componentWillUnmount () {
-        this.wasUnmounted = true;
-        ScratchImage._pendingImages.delete(this);
-    }
-    /**
-     * Calculate the state changes necessary to load the image specified in the provided source info. If the component
-     * is mounted, call setState() with the return value of this function. If the component has not yet mounted, use
-     * the return value of this function as initial state for the component.
-     *
-     * @param {object} imageSource - the new source for the image, including either assetId or URI
-     * @returns {object} - the new state values, if any.
-     */
-    _loadImageSource (imageSource) {
-        if (imageSource) {
-            if (imageSource.uri) {
-                ScratchImage._pendingImages.delete(this);
-                return {
-                    imageURI: imageSource.uri,
-                    lastRequestedAsset: null
-                };
-            }
-            if (this.state.lastRequestedAsset !== imageSource.assetId) {
-                ScratchImage._pendingImages.add(this);
-                return {
-                    lastRequestedAsset: imageSource.assetId
-                };
-            }
-        }
-        // Nothing to do - don't change any state.
-        return {};
-    }
-    render () {
-        const {
-            src: _src,
-            imageSource: _imageSource,
-            ...imgProps
-        } = this.props;
-        return (
-            <VisibilitySensor
-                intervalCheck
-                scrollCheck
-            >
-                {
-                    ({isVisible}) => {
-                        this.isVisible = isVisible;
-                        ScratchImage.loadPendingImages();
-                        return (
-                            <img
-                                src={this.state.imageURI}
-                                {...imgProps}
-                            />
-                        );
-                    }
-                }
-            </VisibilitySensor>
-        );
-    }
-}
-
-ScratchImage.ImageSourcePropType = PropTypes.oneOfType([
-    PropTypes.shape({
-        assetId: PropTypes.string.isRequired,
-        assetType: PropTypes.oneOf(Object.values(storage.AssetType)).isRequired
-    }),
-    PropTypes.shape({
-        uri: PropTypes.string.isRequired
-    })
-]);
-
-ScratchImage.propTypes = {
-    imageSource: ScratchImage.ImageSourcePropType.isRequired
-};
-
-ScratchImage.init();
-
-export default ScratchImage;

src/components/stage/stage.css

@@ -66,7 +66,6 @@
 
     overflow: hidden;
     display: flex;
-    align-items: center;
     justify-content: center;
 }
 

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/containers/library-item.jsx

@@ -91,17 +91,23 @@ class LibraryItem extends React.PureComponent {
         const nextIconIndex = (this.state.iconIndex + 1) % this.props.icons.length;
         this.setState({iconIndex: nextIconIndex});
     }
-    curIconSource () {
+    curIconMd5 () {
+        const iconMd5Prop = this.props.iconMd5;
         if (this.props.icons &&
             this.state.isRotatingIcon &&
-            this.state.iconIndex < this.props.icons.length &&
-            this.props.icons[this.state.iconIndex]) {
-            return this.props.icons[this.state.iconIndex];
+            this.state.iconIndex < this.props.icons.length) {
+            const icon = this.props.icons[this.state.iconIndex] || {};
+            return icon.md5ext || // 3.0 library format
+                icon.baseLayerMD5 || // 2.0 library format, TODO GH-5084
+                iconMd5Prop;
         }
-        return this.props.iconSource;
+        return iconMd5Prop;
     }
     render () {
-        const iconSource = this.curIconSource();
+        const iconMd5 = this.curIconMd5();
+        const iconURL = iconMd5 ?
+            `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
+            this.props.iconRawURL;
         return (
             <LibraryItemComponent
                 bluetoothRequired={this.props.bluetoothRequired}
@@ -111,7 +117,8 @@ class LibraryItem extends React.PureComponent {
                 extensionId={this.props.extensionId}
                 featured={this.props.featured}
                 hidden={this.props.hidden}
-                iconSource={iconSource}
+                iconURL={iconURL}
+                icons={this.props.icons}
                 id={this.props.id}
                 insetIconURL={this.props.insetIconURL}
                 internetConnectionRequired={this.props.internetConnectionRequired}
@@ -142,8 +149,14 @@ LibraryItem.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    iconSource: LibraryItemComponent.propTypes.iconSource, // single icon
-    icons: PropTypes.arrayOf(LibraryItemComponent.propTypes.iconSource), // rotating icons
+    iconMd5: PropTypes.string,
+    iconRawURL: PropTypes.string,
+    icons: PropTypes.arrayOf(
+        PropTypes.shape({
+            baseLayerMD5: PropTypes.string, // 2.0 library format, TODO GH-5084
+            md5ext: PropTypes.string // 3.0 library format
+        })
+    ),
     id: PropTypes.number.isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,

src/index.js

@@ -1,6 +1,5 @@
 import GUI from './containers/gui.jsx';
 import AppStateHOC from './lib/app-state-hoc.jsx';
-import TitledHOC from './lib/titled-hoc.jsx';
 import GuiReducer, {guiInitialState, guiMiddleware, initEmbedded, initFullScreen, initPlayer} from './reducers/gui';
 import LocalesReducer, {localesInitialState, initLocale} from './reducers/locales';
 import {ScratchPaintReducer} from 'scratch-paint';
@@ -17,7 +16,6 @@ const guiReducers = {
 export {
     GUI as default,
     AppStateHOC,
-    TitledHOC,
     setAppElement,
     guiReducers,
     guiInitialState,

src/lib/analytics.js

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

src/lib/download-blob.js

@@ -8,11 +8,23 @@ export default (filename, blob) => {
         return;
     }
 
-    const url = window.URL.createObjectURL(blob);
-    downloadLink.href = url;
-    downloadLink.download = filename;
-    downloadLink.type = blob.type;
-    downloadLink.click();
-    window.URL.revokeObjectURL(url);
-    document.body.removeChild(downloadLink);
+    if ('download' in HTMLAnchorElement.prototype) {
+        const url = window.URL.createObjectURL(blob);
+        downloadLink.href = url;
+        downloadLink.download = filename;
+        downloadLink.type = blob.type;
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+        window.URL.revokeObjectURL(url);
+    } else {
+        // iOS Safari, open a new page and set href to data-uri
+        let popup = window.open('', '_blank');
+        const reader = new FileReader();
+        reader.onloadend = function () {
+            popup.location.href = reader.result;
+            popup = null;
+        };
+        reader.readAsDataURL(blob);
+    }
+
 };

src/lib/drop-area-hoc.jsx

@@ -78,7 +78,7 @@ const DropAreaHOC = function (dragTypes) {
                 }
             }
             render () {
-                const componentProps = omit(this.props, ['onDrop', 'dragInfo']);
+                const componentProps = omit(this.props, ['onDrop', 'dragInfo', 'componentRef']);
                 return (
                     <WrappedComponent
                         containerRef={this.setRef}

src/lib/libraries/backdrops.json

@@ -178,7 +178,7 @@
     },
     {
         "name": "Blue Sky 2 ",
-        "md5": "5a906c2f272b77f59f0ef207857a8b3a.svg",
+        "md5": "8eb8790be5507fdccf73e7c1570bbbab.svg",
         "type": "backdrop",
         "tags": [
             "outdoors",
@@ -286,7 +286,7 @@
     },
     {
         "name": "Circles",
-        "md5": "4e29033ec2b891a8f1ca21242811d403.svg",
+        "md5": "c9847be305920807c5597d81576dd0c4.svg",
         "type": "backdrop",
         "tags": [
             "patterns"
@@ -491,7 +491,7 @@
     },
     {
         "name": "Hearts",
-        "md5": "26d3418b2fbc1af2c5fea82e1c3df1db.svg",
+        "md5": "f98526ccb0eec3ac7d6c8f8ab502825e.svg",
         "type": "backdrop",
         "tags": [
             "patterns"
@@ -1050,7 +1050,7 @@
     },
     {
         "name": "Underwater 1",
-        "md5": "fb907f72b310acc8b95cbf2d2cccabc9.svg",
+        "md5": "d3344650f594bcecdf46aa4a9441badd.svg",
         "type": "backdrop",
         "tags": [
             "ocean",
@@ -1175,7 +1175,7 @@
     },
     {
         "name": "Witch House",
-        "md5": "597b9a9813fe5d8d387283138a0b8f2b.svg",
+        "md5": "30085b2d27beb5acdbe895d8b3e64b04.svg",
         "type": "backdrop",
         "tags": [
             "fantasy",
@@ -1190,7 +1190,7 @@
     },
     {
         "name": "Woods",
-        "md5": "d26cfd278999c9e37d6af75c296a58df.svg",
+        "md5": "f3eb165d6f3fd23370f97079f2e631bf.svg",
         "type": "backdrop",
         "tags": [
             "fantasy",

src/lib/project-saver-hoc.jsx

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

src/lib/randomize-sprite-position.js

@@ -4,8 +4,8 @@ const randomizeSpritePosition = spriteObject => {
     const randomY = Math.floor((100 * Math.random()) - 50);
     if (spriteObject.hasOwnProperty('json')) {
         // Library sprite object
-        spriteObject.json.scratchX = randomX;
-        spriteObject.json.scratchY = randomY;
+        spriteObject.json.x = randomX;
+        spriteObject.json.y = randomY;
     } else if (spriteObject.hasOwnProperty('x') && spriteObject.hasOwnProperty('y')) {
         // Scratch 3 sprite object
         spriteObject.x = randomX;

src/reducers/project-state.js

@@ -17,7 +17,7 @@ const START_AUTO_UPDATING = 'scratch-gui/project-state/START_AUTO_UPDATING';
 const START_CREATING_NEW = 'scratch-gui/project-state/START_CREATING_NEW';
 const START_ERROR = 'scratch-gui/project-state/START_ERROR';
 const START_FETCHING_NEW = 'scratch-gui/project-state/START_FETCHING_NEW';
-const START_LOADING_VM_FILE_UPLOAD = 'scratch-gui/project-state/START_LOADING_FILE_UPLOAD';
+const START_LOADING_VM_FILE_UPLOAD = 'scratch-gui/project-state/START_LOADING_VM_FILE_UPLOAD';
 const START_MANUAL_UPDATING = 'scratch-gui/project-state/START_MANUAL_UPDATING';
 const START_REMIXING = 'scratch-gui/project-state/START_REMIXING';
 const START_UPDATING_BEFORE_CREATING_COPY = 'scratch-gui/project-state/START_UPDATING_BEFORE_CREATING_COPY';
@@ -413,32 +413,31 @@ const onFetchedProjectData = (projectData, loadingState) => {
 };
 
 const onLoadedProject = (loadingState, canSave, success) => {
-    if (success) {
-        switch (loadingState) {
-        case LoadingState.LOADING_VM_WITH_ID:
-            return {
-                type: DONE_LOADING_VM_WITH_ID
-            };
-        case LoadingState.LOADING_VM_FILE_UPLOAD:
-            if (canSave) {
-                return {
-                    type: DONE_LOADING_VM_TO_SAVE
-                };
-            }
-            return {
-                type: DONE_LOADING_VM_WITHOUT_ID
-            };
-        case LoadingState.LOADING_VM_NEW_DEFAULT:
-            return {
-                type: DONE_LOADING_VM_WITHOUT_ID
-            };
-        default:
-            return;
+    switch (loadingState) {
+    case LoadingState.LOADING_VM_WITH_ID:
+        if (success) {
+            return {type: DONE_LOADING_VM_WITH_ID};
         }
+        // failed to load project; just keep showing current project
+        return {type: RETURN_TO_SHOWING};
+    case LoadingState.LOADING_VM_FILE_UPLOAD:
+        if (success) {
+            if (canSave) {
+                return {type: DONE_LOADING_VM_TO_SAVE};
+            }
+            return {type: DONE_LOADING_VM_WITHOUT_ID};
+        }
+        // failed to load project; just keep showing current project
+        return {type: RETURN_TO_SHOWING};
+    case LoadingState.LOADING_VM_NEW_DEFAULT:
+        if (success) {
+            return {type: DONE_LOADING_VM_WITHOUT_ID};
+        }
+        // failed to load default project; show error
+        return {type: START_ERROR};
+    default:
+        return;
     }
-    return {
-        type: RETURN_TO_SHOWING
-    };
 };
 
 const doneUpdatingProject = loadingState => {

test/__mocks__/editor-msgs-mock.js

@@ -0,0 +1,3 @@
+export default {
+    en: {}
+};

test/helpers/selenium-helper.js

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

test/integration/blocks.test.js

@@ -3,12 +3,14 @@ import SeleniumHelper from '../helpers/selenium-helper';
 
 const {
     clickText,
+    clickBlocksCategory,
     clickButton,
     clickXpath,
     findByText,
     findByXpath,
     getDriver,
     getLogs,
+    Key,
     loadUri,
     rightClickText,
     scope
@@ -30,8 +32,7 @@ describe('Working with the blocks', () => {
     test('Blocks report when clicked in the toolbox', async () => {
         await loadUri(uri);
         await clickText('Code');
-        await clickText('Operators', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Operators');
         await clickText('join', scope.blocksTab); // Click "join <hello> <world>" block
         await findByText('apple banana', scope.reportedValue); // Tooltip with result
         const logs = await getLogs();
@@ -40,14 +41,13 @@ describe('Working with the blocks', () => {
 
     test('Switching sprites updates the block menus', async () => {
         await loadUri(uri);
-        await clickText('Sound', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Sound');
         // "Meow" sound block should be visible
         await findByText('Meow', scope.blocksTab);
         await clickText('Backdrops'); // Switch to the backdrop
         // Now "pop" sound block should be visible and motion blocks hidden
         await findByText('pop', scope.blocksTab);
-        await clickText('Motion', scope.blocksTab);
+        await clickBlocksCategory('Motion');
         await findByText('Stage selected: no motion blocks');
 
         const logs = await getLogs();
@@ -57,8 +57,7 @@ describe('Working with the blocks', () => {
     test('Creating variables', async () => {
         await loadUri(uri);
         await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');
 
         // Expect a default variable "my variable" to be visible
         await clickText('my\u00A0variable', scope.blocksTab);
@@ -74,8 +73,7 @@ describe('Working with the blocks', () => {
         await clickButton('OK');
 
         // Make sure reporting works on a new variable
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');
         await clickText('score', scope.blocksTab);
         await findByText('0', scope.reportedValue); // Tooltip with result
 
@@ -99,8 +97,7 @@ describe('Working with the blocks', () => {
     test('Creating a list', async () => {
         await loadUri(uri);
         await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Variables');
 
         await clickText('Make a List');
         let el = await findByXpath("//input[@name='New list name:']");
@@ -132,8 +129,7 @@ describe('Working with the blocks', () => {
 
     test('Custom procedures', async () => {
         await loadUri(uri);
-        await clickText('My Blocks');
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('My Blocks');
         await clickText('Make a Block');
         // Click on the "add an input" buttons
         await clickText('number or text', scope.modal);
@@ -164,8 +160,7 @@ describe('Working with the blocks', () => {
     test('Record option from sound block menu opens sound recorder', async () => {
         await loadUri(uri);
         await clickText('Code');
-        await clickText('Sound', scope.blocksTab);
-        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickBlocksCategory('Sound');
         await clickText('Meow', scope.blocksTab); // Click "play sound <Meow> until done" block
         await clickText('record'); // Click "record..." option in the block's sound menu
         // Access has been force denied, so close the alert that comes up
@@ -185,15 +180,18 @@ describe('Working with the blocks', () => {
         await clickText('costume2', scope.costumesTab);
         const el = await findByXpath("//input[@value='costume2']");
         await el.sendKeys('newname');
+        await el.sendKeys(Key.ENTER);
+        // wait until the updated costume appears in costume item list panel
+        await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
+            "//div[contains(text(), 'newname')]");
 
         // Make sure it is updated in the block menu
         await clickText('Code');
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
         await clickText('newname', scope.blocksTab);
     });
 
-    test.skip('Renaming costume with a special character should not break toolbox', async () => {
+    test('Renaming costume with a special character should not break toolbox', async () => {
         await loadUri(uri);
 
         // Rename the costume
@@ -201,22 +199,24 @@ describe('Working with the blocks', () => {
         await clickText('costume2', scope.costumesTab);
         const el = await findByXpath("//input[@value='costume2']");
         await el.sendKeys('<NewCostume>');
+        await el.sendKeys(Key.ENTER);
+        // wait until the updated costume appears in costume item list panel
+        await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
+            "//div[contains(text(), '<NewCostume>')]");
 
         // Make sure it is updated in the block menu
         await clickText('Code');
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
         await clickText('<NewCostume>', scope.blocksTab);
 
-        await clickText('Sound', scope.blocksTab);
+        await clickBlocksCategory('Sound');
     });
 
     test('Adding costumes DOES update the default costume name in the toolbox', async () => {
         await loadUri(uri);
 
         // By default, costume2 is in the costume tab
-        await clickText('Looks', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Looks');
         await clickText('costume2', scope.blocksTab);
 
         // Also check that adding a new costume does update the list
@@ -226,6 +226,9 @@ describe('Working with the blocks', () => {
             .perform();
         await driver.sleep(500); // Wait for thermometer menu to come up
         await clickXpath('//button[@aria-label="Paint"]');
+        // wait until the new costume appears in costume item list panel
+        await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
+            "//div[contains(text(), 'costume3')]");
         await clickText('costume3', scope.costumesTab);
         // Check that the menu has been updated
         await clickText('Code');
@@ -233,14 +236,16 @@ describe('Working with the blocks', () => {
     });
 
     // Skipped because it was flakey on travis, but seems to run locally ok
-    test.skip('Adding a sound DOES update the default sound name in the toolbox', async () => {
+    test('Adding a sound DOES update the default sound name in the toolbox', async () => {
         await loadUri(uri);
         await clickText('Sounds');
         await clickXpath('//button[@aria-label="Choose a Sound"]');
         await clickText('A Bass', scope.modal); // Should close the modal
+        // wait until the selected sound appears in sounds item list panel
+        await findByXpath("//div[contains(@class,'sprite-selector-item_is-selected_')]" +
+            "//div[contains(text(), 'A Bass')]");
         await clickText('Code');
-        await clickText('Sound', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Sound');
         await clickText('A\u00A0Bass', scope.blocksTab); // Need &nbsp; for block text
     });
 
@@ -249,15 +254,13 @@ describe('Working with the blocks', () => {
         const playerUri = path.resolve(__dirname, '../../build/player.html');
         await loadUri(playerUri);
         await clickText('See inside');
-        await clickText('Variables');
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Variables');
         await clickText('my\u00A0variable');
 
         await clickText('See Project Page');
         await clickText('See inside');
 
-        await clickText('Variables');
-        await driver.sleep(500); // Wait for scroll to finish
+        await clickBlocksCategory('Variables');
         await clickText('my\u00A0variable');
     });
 
@@ -266,8 +269,7 @@ describe('Working with the blocks', () => {
         await loadUri(uri);
         await clickText('Costumes');
         await clickText('Code');
-        await clickText('Variables', scope.blocksTab);
-        await driver.sleep(500); // Wait for scroll
+        await clickBlocksCategory('Variables');
         await clickText('Make a List');
         const el = await findByXpath("//input[@name='New list name:']");
         await el.sendKeys('list1');

test/integration/costumes.test.js

@@ -193,11 +193,7 @@ describe('Working with costumes', () => {
             .mouseMove(abbyElement)
             .perform();
         // wait for one of Abby's alternate costumes to appear
-        const src1 = await abbyElement.findElement({css: 'img'}).getAttribute('src');
-        await driver.sleep(300);
-        const src2 = await abbyElement.findElement({css: 'img'}).getAttribute('src');
-        const sourcesMatch = (src1 === src2);
-        await expect(sourcesMatch).toBeFalsy(); // 'src' attribute should have changed by now
+        await findByXpath('//img[@src="https://cdn.assets.scratch.mit.edu/internalapi/asset/45de34b47a2ce22f6f5d28bb35a44ff5.svg/get/"]');
         const logs = await getLogs();
         await expect(logs).toEqual([]);
     });

test/unit/components/menu-bar.test.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers';
+import MenuBar from '../../../src/components/menu-bar/menu-bar';
+import {menuInitialState} from '../../../src/reducers/menus';
+import {LoadingState} from '../../../src/reducers/project-state';
+
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+import VM from 'scratch-vm';
+
+
+describe('MenuBar Component', () => {
+    const store = configureStore()({
+        locales: {
+            isRtl: false,
+            locale: 'en-US'
+        },
+        scratchGui: {
+            menus: menuInitialState,
+            projectState: {
+                loadingState: LoadingState.NOT_LOADED
+            },
+            vm: new VM()
+        }
+    });
+
+    const getComponent = function (props = {}) {
+        return <Provider store={store}><MenuBar {...props} /></Provider>;
+    };
+
+    test('menu bar with no About handler has no About button', () => {
+        const menuBar = mountWithIntl(getComponent());
+        const button = menuBar.find('AboutButton');
+        expect(button.exists()).toBe(false);
+    });
+
+    test('menu bar with an About handler has an About button', () => {
+        const onClickAbout = jest.fn();
+        const menuBar = mountWithIntl(getComponent({onClickAbout}));
+        const button = menuBar.find('AboutButton');
+        expect(button.exists()).toBe(true);
+    });
+
+    test('clicking on About button calls the handler', () => {
+        const onClickAbout = jest.fn();
+        const menuBar = mountWithIntl(getComponent({onClickAbout}));
+        const button = menuBar.find('AboutButton');
+        expect(onClickAbout).toHaveBeenCalledTimes(0);
+        button.simulate('click');
+        expect(onClickAbout).toHaveBeenCalledTimes(1);
+    });
+});

test/unit/reducers/project-state-reducer.test.js

@@ -92,99 +92,181 @@ test('onFetchedProjectData new loads project data into vm', () => {
     expect(resultState.projectData).toBe('1010101');
 });
 
-test('onLoadedProject upload, with canSave false, shows without id', () => {
-    const initialState = {
-        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
-    };
-    const action = onLoadedProject(initialState.loadingState, false, true);
-    const resultState = projectStateReducer(initialState, action);
-    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
-});
+// onLoadedProject: LOADING_VM_WITH_ID
 
-test('onLoadedProject upload, with canSave true, prepares to save', () => {
-    const initialState = {
-        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
-    };
-    const action = onLoadedProject(initialState.loadingState, true, true);
-    const resultState = projectStateReducer(initialState, action);
-    expect(resultState.loadingState).toBe(LoadingState.AUTO_UPDATING);
-});
-
-test('onLoadedProject with id shows with id', () => {
+test('onLoadedProject(LOADING_VM_WITH_ID, true, true) results in state SHOWING_WITH_ID', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.LOADING_VM_WITH_ID
     };
     const action = onLoadedProject(initialState.loadingState, true, true);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
 });
 
-test('onLoadedProject new shows without id', () => {
+test('onLoadedProject(LOADING_VM_WITH_ID, false, true) results in state SHOWING_WITH_ID', () => {
     const initialState = {
-        loadingState: LoadingState.LOADING_VM_NEW_DEFAULT
+        projectId: '100',
+        loadingState: LoadingState.LOADING_VM_WITH_ID
+    };
+    const action = onLoadedProject(initialState.loadingState, false, true);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
+});
+
+// case where we started out viewing a project with a projectId, then
+// started to load another project; but loading fails. We go back to
+// showing the original project.
+test('onLoadedProject(LOADING_VM_WITH_ID, false, false), with project id, ' +
+    'results in state SHOWING_WITH_ID', () => {
+    const initialState = {
+        projectId: '100',
+        loadingState: LoadingState.LOADING_VM_WITH_ID
+    };
+    const action = onLoadedProject(initialState.loadingState, false, false);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
+});
+
+// case where we started out viewing a project with default projectId, then
+// started to load one with an id, such as in standalone mode when user adds
+// '#PROJECT_ID_NUMBER' to the URI; but loading fails. We go back to
+// showing the original project.
+test('onLoadedProject(LOADING_VM_WITH_ID, false, false), with no project id, ' +
+    'results in state SHOWING_WITHOUT_ID', () => {
+    const initialState = {
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_WITH_ID
+    };
+    const action = onLoadedProject(initialState.loadingState, false, false);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
+});
+
+// onLoadedProject: LOADING_VM_FILE_UPLOAD
+
+test('onLoadedProject(LOADING_VM_FILE_UPLOAD, true, true) prepares to save', () => {
+    const initialState = {
+        projectId: '100',
+        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
+    };
+    const action = onLoadedProject(initialState.loadingState, true, true);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.AUTO_UPDATING);
+    expect(resultState.projectId).toBe('100');
+});
+
+test('onLoadedProject(LOADING_VM_FILE_UPLOAD, false, true) results in state SHOWING_WITHOUT_ID', () => {
+    const initialState = {
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
     };
     const action = onLoadedProject(initialState.loadingState, false, true);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
 });
 
-test('onLoadedProject new, to save shows without id', () => {
+test('onLoadedProject(LOADING_VM_FILE_UPLOAD, false, false), when we know project id, ' +
+    'results in state SHOWING_WITH_ID', () => {
     const initialState = {
+        projectId: '100',
+        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
+    };
+    const action = onLoadedProject(initialState.loadingState, false, false);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
+});
+
+test('onLoadedProject(LOADING_VM_FILE_UPLOAD, false, false), when we ' +
+    'don\'t know project id, results in state SHOWING_WITHOUT_ID', () => {
+    const initialState = {
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_FILE_UPLOAD
+    };
+    const action = onLoadedProject(initialState.loadingState, false, false);
+    const resultState = projectStateReducer(initialState, action);
+    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
+});
+
+// onLoadedProject: LOADING_VM_NEW_DEFAULT
+
+test('onLoadedProject(LOADING_VM_NEW_DEFAULT, true, true) results in state SHOWING_WITHOUT_ID', () => {
+    const initialState = {
+        projectId: '0',
         loadingState: LoadingState.LOADING_VM_NEW_DEFAULT
     };
     const action = onLoadedProject(initialState.loadingState, true, true);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
 });
 
-test('onLoadedProject with success false, no project id, shows without id', () => {
+test('onLoadedProject(LOADING_VM_NEW_DEFAULT, false, true) results in state SHOWING_WITHOUT_ID', () => {
     const initialState = {
-        loadingState: LoadingState.LOADING_VM_WITH_ID,
-        projectId: null
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_NEW_DEFAULT
     };
-    const action = onLoadedProject(initialState.loadingState, false, false);
+    const action = onLoadedProject(initialState.loadingState, false, true);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
 });
 
-test('onLoadedProject with success false, valid project id, shows with id', () => {
+test('onLoadedProject(LOADING_VM_NEW_DEFAULT, false, false) results in ERROR state', () => {
     const initialState = {
-        loadingState: LoadingState.LOADING_VM_WITH_ID,
-        projectId: '12345'
+        projectId: '0',
+        loadingState: LoadingState.LOADING_VM_NEW_DEFAULT
     };
     const action = onLoadedProject(initialState.loadingState, false, false);
     const resultState = projectStateReducer(initialState, action);
-    expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.loadingState).toBe(LoadingState.ERROR);
+    expect(resultState.projectId).toBe('0');
 });
 
-test('doneUpdatingProject with id shows with id', () => {
+// doneUpdatingProject
+
+test('doneUpdatingProject with id results in state SHOWING_WITH_ID', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.MANUAL_UPDATING
     };
     const action = doneUpdatingProject(initialState.loadingState);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('100');
 });
 
-test('doneUpdatingProject with id, before copy, creates copy', () => {
+test('doneUpdatingProject with id, before copy occurs, results in state CREATING_COPY', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.UPDATING_BEFORE_COPY
     };
     const action = doneUpdatingProject(initialState.loadingState);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.CREATING_COPY);
+    expect(resultState.projectId).toBe('100');
 });
 
-test('doneUpdatingProject with id, before new, fetches default project', () => {
+test('doneUpdatingProject with id, before new, results in state FETCHING_NEW_DEFAULT', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.UPDATING_BEFORE_NEW
     };
     const action = doneUpdatingProject(initialState.loadingState);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.FETCHING_NEW_DEFAULT);
+    expect(resultState.projectId).toBe('0'); // resets id
 });
 
-test('setProjectId, with same id as before, should show with id, not fetch', () => {
+test('calling setProjectId, using with same id as already showing, ' +
+    'results in state SHOWING_WITH_ID', () => {
     const initialState = {
         projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
@@ -195,7 +277,8 @@ test('setProjectId, with same id as before, should show with id, not fetch', ()
     expect(resultState.projectId).toBe('100');
 });
 
-test('setProjectId, with different id as before, should fetch with id, not show with id', () => {
+test('calling setProjectId, using different id from project already showing, ' +
+    'results in state FETCHING_WITH_ID', () => {
     const initialState = {
         projectId: 99,
         loadingState: LoadingState.SHOWING_WITH_ID
@@ -206,7 +289,8 @@ test('setProjectId, with different id as before, should fetch with id, not show
     expect(resultState.projectId).toBe('100');
 });
 
-test('setProjectId, with same id as before, but not same type, should fetch because not ===', () => {
+test('setProjectId, with same id as before, but not same type, ' +
+    'results in FETCHING_WITH_ID because the two projectIds are not strictly equal', () => {
     const initialState = {
         projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
@@ -217,85 +301,104 @@ test('setProjectId, with same id as before, but not same type, should fetch beca
     expect(resultState.projectId).toBe(100);
 });
 
-test('requestNewProject, when can\'t create new, should fetch default project without id', () => {
+test('requestNewProject, when can\'t create/save, results in FETCHING_NEW_DEFAULT', () => {
     const initialState = {
+        projectId: '0',
         loadingState: LoadingState.SHOWING_WITHOUT_ID
     };
     const action = requestNewProject(false);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.FETCHING_NEW_DEFAULT);
+    expect(resultState.projectId).toBe('0');
 });
 
-test('requestNewProject, when can create new, should save and prepare to fetch default project', () => {
+test('requestNewProject, when can create/save, results in UPDATING_BEFORE_NEW ' +
+    '(in order to save before fetching default project)', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
     };
     const action = requestNewProject(true);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.UPDATING_BEFORE_NEW);
+    expect(resultState.projectId).toBe('100');
 });
 
-test('requestProjectUpload when project not loaded should load', () => {
+test('requestProjectUpload when project not loaded results in state LOADING_VM_FILE_UPLOAD', () => {
     const initialState = {
+        projectId: null,
         loadingState: LoadingState.NOT_LOADED
     };
     const action = requestProjectUpload(initialState.loadingState);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.LOADING_VM_FILE_UPLOAD);
+    expect(resultState.projectId).toBe(null);
 });
 
-test('requestProjectUpload when showing project with id should load', () => {
+test('requestProjectUpload when showing project with id results in state LOADING_VM_FILE_UPLOAD', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
     };
     const action = requestProjectUpload(initialState.loadingState);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.LOADING_VM_FILE_UPLOAD);
+    expect(resultState.projectId).toBe('100');
 });
 
-test('requestProjectUpload when showing project without id should load', () => {
+test('requestProjectUpload when showing project without id results in state LOADING_VM_FILE_UPLOAD', () => {
     const initialState = {
+        projectId: null,
         loadingState: LoadingState.SHOWING_WITHOUT_ID
     };
     const action = requestProjectUpload(initialState.loadingState);
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.LOADING_VM_FILE_UPLOAD);
+    expect(resultState.projectId).toBe(null);
 });
 
 test('manualUpdateProject should prepare to update', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
     };
     const action = manualUpdateProject();
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.MANUAL_UPDATING);
+    expect(resultState.projectId).toBe('100');
 });
 
 test('autoUpdateProject should prepare to update', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
     };
     const action = autoUpdateProject();
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.AUTO_UPDATING);
+    expect(resultState.projectId).toBe('100');
 });
 
 test('saveProjectAsCopy should save, before preparing to save as a copy', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
     };
     const action = saveProjectAsCopy();
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.UPDATING_BEFORE_COPY);
+    expect(resultState.projectId).toBe('100');
 });
 
 test('remixProject should prepare to remix', () => {
     const initialState = {
+        projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
     };
     const action = remixProject();
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.REMIXING);
+    expect(resultState.projectId).toBe('100');
 });
 
 test('projectError from various states should show error', () => {
@@ -314,11 +417,13 @@ test('projectError from various states should show error', () => {
     for (const startState of startStates) {
         const initialState = {
             error: null,
+            projectId: '100',
             loadingState: startState
         };
         const action = projectError('Error string');
         const resultState = projectStateReducer(initialState, action);
         expect(resultState.error).toEqual('Error string');
+        expect(resultState.projectId).toBe('100');
     }
 });
 
@@ -332,11 +437,13 @@ test('fatal projectError should show error state', () => {
     for (const startState of startStates) {
         const initialState = {
             error: null,
+            projectId: '100',
             loadingState: startState
         };
         const action = projectError('Error string');
         const resultState = projectStateReducer(initialState, action);
         expect(resultState.loadingState).toBe(LoadingState.ERROR);
+        expect(resultState.projectId).toBe('100');
     }
 });
 
@@ -351,15 +458,18 @@ test('non-fatal projectError should show normal state', () => {
     for (const startState of startStates) {
         const initialState = {
             error: null,
+            projectId: '100',
             loadingState: startState
         };
         const action = projectError('Error string');
         const resultState = projectStateReducer(initialState, action);
         expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+        expect(resultState.projectId).toBe('100');
     }
 });
 
-test('projectError when creating new while viewing project with id should show project with id', () => {
+test('projectError when creating new while viewing project with id should ' +
+    'go back to state SHOWING_WITH_ID', () => {
     const initialState = {
         error: null,
         loadingState: LoadingState.CREATING_NEW,
@@ -368,9 +478,11 @@ test('projectError when creating new while viewing project with id should show p
     const action = projectError('Error string');
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITH_ID);
+    expect(resultState.projectId).toBe('12345');
 });
 
-test('projectError when creating new while logged out, looking at default project should show default project', () => {
+test('projectError when creating new while logged out, looking at default project ' +
+    'should go back to state SHOWING_WITHOUT_ID', () => {
     const initialState = {
         error: null,
         loadingState: LoadingState.CREATING_NEW,
@@ -379,15 +491,19 @@ test('projectError when creating new while logged out, looking at default projec
     const action = projectError('Error string');
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.SHOWING_WITHOUT_ID);
+    expect(resultState.projectId).toBe('0');
 });
 
-test('projectError from showing project should show error', () => {
+test('projectError encountered while in state FETCHING_WITH_ID results in ' +
+    'ERROR state', () => {
     const initialState = {
         error: null,
+        projectId: null,
         loadingState: LoadingState.FETCHING_WITH_ID
     };
     const action = projectError('Error string');
     const resultState = projectStateReducer(initialState, action);
     expect(resultState.loadingState).toBe(LoadingState.ERROR);
+    expect(resultState.projectId).toBe(null);
     expect(resultState.error).toEqual('Error string');
 });

test/unit/util/project-saver-hoc.test.jsx

@@ -56,7 +56,7 @@ describe('projectSaverHOC', () => {
         expect(mockedUpdateProject).toHaveBeenCalled();
     });
 
-    test('if canSave is alreatdy true and we show a project with an id, project will NOT be saved', () => {
+    test('if canSave is already true and we show a project with an id, project will NOT be saved', () => {
         const mockedSaveProject = jest.fn();
         const Component = () => <div />;
         const WrappedComponent = projectSaverHOC(Component);