Deploy to Master

README.md

@@ -29,20 +29,26 @@ npm start
 Then go to [http://localhost:8601/](http://localhost:8601/) - the playground outputs the default GUI component
 
 ## Developing alongside other Scratch repositories
-
 If you wish to develop scratch-gui alongside other scratch repositories that depend on it, you may wish
 to have the other repositories use your local scratch-gui build instead of fetching the current production
 version of the scratch-gui that is found by default using `npm install`.
 
 To do this:
-
-1. Make sure you have run `npm install` from this repository's top level
+1. Make sure you have run `npm install` from this (scratch-gui) repository's top level
 2. Make sure you have run `npm install` from the top level of each repository (such as scratch-www) that depends on scratch-gui
-3. From this repository's top level, build the `dist` directory by running `BUILD_MODE=dist npm run build`
-4. From this repository's top level, establish a link to this repository by running `npm link`
+3. From this (scratch-gui) repository's top level, build the `dist` directory by running `BUILD_MODE=dist npm run build`
+4. From this (scratch-gui) repository's top level, establish a link to this repository by running `npm link`
 5. From the top level of each repository that depends on scratch-gui, run `npm link scratch-gui`
 6. Build or run the repositories that depend on scratch-gui
 
+Instead of `BUILD_MODE=dist npm run build` you can also use `BUILD_MODE=dist npm run watch`, however this may be unreliable.
+
+### Oh no! It didn't work!
+* Follow the recipe above step by step and don't change the order. It is especially important to run npm first because installing after the linking will reset the linking.
+* Make sure the repositories are siblings on your machine's file tree.
+* If you have multiple Terminal tabs or windows open for the different Scratch repositories, make sure to use the same node version in all of them.
+* In the worst case unlink the repositories with `npm unlink` and start over.
+
 ## Testing
 NOTE: If you're a windows user, please run these scripts in Windows `cmd.exe`  instead of Git Bash/MINGW64.
 
@@ -69,7 +75,6 @@ npm run integration-test
 You may want to review the documentation for [Jest](https://facebook.github.io/jest/docs/en/api.html) and [Enzyme](http://airbnb.io/enzyme/docs/api/) as you write your tests.
 
 ## Publishing to GitHub Pages
-
 You can publish the GUI to github.io so that others on the Internet can view it.
 [Read the wiki for a step-by-step guide.](https://github.com/LLK/scratch-gui/wiki/Publishing-to-GitHub-Pages)
 

package.json

@@ -46,8 +46,8 @@
     "copy-webpack-plugin": "^4.5.1",
     "core-js": "2.5.7",
     "css-loader": "^1.0.0",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16": "1.1.1",
+    "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",
@@ -96,24 +96,24 @@
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "0.1.0-prerelease.20180625202813",
-    "scratch-blocks": "0.1.0-prerelease.1535116879",
-    "scratch-l10n": "3.0.20180824134256",
-    "scratch-paint": "0.2.0-prerelease.20180823231354",
+    "scratch-blocks": "0.1.0-prerelease.1535662135",
+    "scratch-l10n": "3.0.20180830210150",
+    "scratch-paint": "0.2.0-prerelease.20180831175055",
     "scratch-render": "0.1.0-prerelease.20180824141819",
-    "scratch-storage": "1.0.0",
+    "scratch-storage": "1.0.2",
     "scratch-svg-renderer": "0.2.0-prerelease.20180817005452",
-    "scratch-vm": "0.2.0-prerelease.20180824135031",
+    "scratch-vm": "0.2.0-prerelease.20180830155110",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
-    "style-loader": "^0.22.1",
+    "style-loader": "^0.23.0",
     "svg-to-image": "1.1.3",
     "text-encoding": "0.6.4",
     "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": "^2.0.15",
+    "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.3",
     "xhr": "2.5.0"
   },

src/.eslintrc.js

@@ -12,7 +12,10 @@ module.exports = {
         'import/no-commonjs': 'error',
         'import/no-amd': 'error',
         'import/no-nodejs-modules': 'error',
-        'react/jsx-no-literals': 'error'
+        'react/jsx-no-literals': 'error',
+        'no-confusing-arrow': ['error', {
+            'allowParens': true
+        }]
     },
     settings: {
         react: {

src/components/connection-modal/connection-modal.css

@@ -121,9 +121,16 @@
 .radar-small {
     width: 40px;
     height: 40px;
+}
+
+[dir="ltr"] .radar-small {
     margin-right: 0.5rem;
 }
 
+[dir="rtl"] .radar-small {
+    margin-left: 0.5rem;
+}
+
 .radar-big {
     width: 120px;
     height: 120px;
@@ -184,6 +191,7 @@
     position: absolute;
     top: -5px;
     right: -15px;
+    left: -15px;
     padding: 5px 5px;
     background-color: $pen-primary;
     border-radius: 100%;
@@ -232,7 +240,6 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    margin-left: 3rem;
 }
 
 [dir="ltr"] .scratch-link-help-step {

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

@@ -1,12 +1,7 @@
-/* eslint-disable react/jsx-no-literals */
-/*
-    @todo Rule is disabled because this component is rendered outside the
-    intl provider right now so cannot be translated.
-*/
-
 import PropTypes from 'prop-types';
 import React from 'react';
 import Box from '../box/box.jsx';
+import {FormattedMessage} from 'react-intl';
 
 import styles from './crash-message.css';
 import reloadIcon from './reload.svg';
@@ -19,19 +14,30 @@ const CrashMessage = props => (
                 src={reloadIcon}
             />
             <h2>
-                Oops! Something went wrong.
+                <FormattedMessage
+                    defaultMessage="Oops! Something went wrong."
+                    description="Crash Message title"
+                    id="gui.crashMessage.label"
+                />
             </h2>
             <p>
-                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
-                again.
-
+                <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
+                        again."
+                    description="Message to inform the user that page has crashed."
+                    id="gui.crashMessage.description"
+                />
             </p>
             <button
                 className={styles.reloadButton}
                 onClick={props.onReload}
             >
-                Reload
+                <FormattedMessage
+                    defaultMessage="Reload"
+                    description="Button to reload the page when page crashes"
+                    id="gui.crashMessage.reload"
+                />
             </button>
         </Box>
     </div>

src/components/gui/gui.css

@@ -132,11 +132,15 @@
     margin-left: 0.125rem;
 }
 
-/* only mirror blocks tab icon */
+/* mirror blocks and sound tab icons */
 [dir="rtl"] .tab:nth-of-type(1) img {
     transform: scaleX(-1);
 }
 
+[dir="rtl"] .tab:nth-of-type(3) img {
+    transform: scaleX(-1);
+}
+
 .tab.is-selected img {
     filter: none;
 }

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

@@ -189,3 +189,16 @@
 .disabled {
     opacity: 0.5;
 }
+
+.save-in-progress {
+  animation: hue-rotate 3s linear infinite;
+}
+
+@keyframes hue-rotate {
+  from {
+    filter: hue-rotate();
+  }
+  to {
+    filter: hue-rotate(360deg);
+  }
+}

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

@@ -138,8 +138,10 @@ class MenuBar extends React.Component {
         bindAll(this, [
             'handleLanguageMouseUp',
             'handleRestoreOption',
+            'handleCloseFileMenuAndThen',
             'restoreOptionMessage'
         ]);
+        this.state = {projectSaveInProgress: false};
     }
     handleLanguageMouseUp (e) {
         if (!this.props.languageMenuOpen) {
@@ -152,6 +154,24 @@ class MenuBar extends React.Component {
             this.props.onRequestCloseEdit();
         };
     }
+    handleUpdateProject (updateFun) {
+        return () => {
+            this.props.onRequestCloseFile();
+            this.setState({projectSaveInProgress: true},
+                () => {
+                    updateFun().then(() => {
+                        this.setState({projectSaveInProgress: false});
+                    });
+                }
+            );
+        };
+    }
+    handleCloseFileMenuAndThen (fn) {
+        return () => {
+            this.props.onRequestCloseFile();
+            fn();
+        };
+    }
     restoreOptionMessage (deletedItem) {
         switch (deletedItem) {
         case 'Sprite':
@@ -182,17 +202,34 @@ class MenuBar extends React.Component {
         }
     }
     render () {
+        const saveNowMessage = (
+            <FormattedMessage
+                defaultMessage="Save now"
+                description="Menu bar item for saving now"
+                id="gui.menuBar.saveNow"
+            />
+        );
         return (
-            <Box className={styles.menuBar}>
+            <Box
+                className={classNames(styles.menuBar, {
+                    [styles.saveInProgress]: this.state.projectSaveInProgress
+                })}
+            >
                 <div className={styles.mainMenu}>
                     <div className={styles.fileGroup}>
                         <div className={classNames(styles.menuBarItem)}>
-                            <img
-                                alt="Scratch"
-                                className={styles.scratchLogo}
-                                draggable={false}
-                                src={scratchLogo}
-                            />
+                            <a
+                                href="https://scratch.mit.edu"
+                                rel="noopener noreferrer"
+                                target="_blank"
+                            >
+                                <img
+                                    alt="Scratch"
+                                    className={styles.scratchLogo}
+                                    draggable={false}
+                                    src={scratchLogo}
+                                />
+                            </a>
                         </div>
                         <div
                             className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
@@ -240,18 +277,20 @@ class MenuBar extends React.Component {
                                     </MenuItem>
                                 </MenuItemTooltip>
                                 <MenuSection>
-                                    <MenuItemTooltip
-                                        id="save"
-                                        isRtl={this.props.isRtl}
-                                    >
-                                        <MenuItem>
-                                            <FormattedMessage
-                                                defaultMessage="Save now"
-                                                description="Menu bar item for saving now"
-                                                id="gui.menuBar.saveNow"
-                                            />
-                                        </MenuItem>
-                                    </MenuItemTooltip>
+                                    <ProjectSaver>{(saveProject, updateProject) => (
+                                        this.props.canUpdateProject ? (
+                                            <MenuItem onClick={this.handleUpdateProject(updateProject)}>
+                                                {saveNowMessage}
+                                            </MenuItem>
+                                        ) : (
+                                            <MenuItemTooltip
+                                                id="save"
+                                                isRtl={this.props.isRtl}
+                                            >
+                                                <MenuItem>{saveNowMessage}</MenuItem>
+                                            </MenuItemTooltip>
+                                        )
+                                    )}</ProjectSaver>
                                     <MenuItemTooltip
                                         id="copy"
                                         isRtl={this.props.isRtl}
@@ -278,10 +317,9 @@ class MenuBar extends React.Component {
                                             {renderFileInput()}
                                         </MenuItem>
                                     )}</ProjectLoader>
-                                    <ProjectSaver>{(saveProject, saveProps) => (
+                                    <ProjectSaver>{saveProject => (
                                         <MenuItem
-                                            onClick={saveProject}
-                                            {...saveProps}
+                                            onClick={this.handleCloseFileMenuAndThen(saveProject)}
                                         >
                                             <FormattedMessage
                                                 defaultMessage="Save to your computer"
@@ -469,6 +507,7 @@ class MenuBar extends React.Component {
 }
 
 MenuBar.propTypes = {
+    canUpdateProject: PropTypes.bool,
     editMenuOpen: PropTypes.bool,
     enableCommunity: PropTypes.bool,
     fileMenuOpen: PropTypes.bool,
@@ -486,6 +525,7 @@ MenuBar.propTypes = {
 };
 
 const mapStateToProps = state => ({
+    canUpdateProject: typeof (state.session && state.session.session && state.session.session.user) !== 'undefined',
     fileMenuOpen: fileMenuOpen(state),
     editMenuOpen: editMenuOpen(state),
     isRtl: state.locales.isRtl,

src/components/modal/modal.css

@@ -83,10 +83,14 @@ $sides: 20rem;
     user-select: none;
 }
 
-.header-image {
+[dir="ltr"] .header-image {
     margin-right: 0.5rem;
 }
 
+[dir="rtl"] .header-image {
+    margin-left: 0.5rem;
+}
+
 .header-item-filter {
     display: flex;
     flex-basis: $sides;