Merge from LLK Scratch branch

.travis.yml

@@ -29,15 +29,6 @@ before_deploy:
     export BEFORE_DEPLOY_RAN=true
   fi
 deploy:
-- provider: script
-  on:
-    all_branches: true
-  skip_cleanup: true
-  script: npm run deploy -- -x -e $TRAVIS_BRANCH -r https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
-- provider: script
-  on:
-    all_branches: true
-  script: npm run prune -- https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
 - provider: npm
   on:
     branch:
@@ -59,5 +50,14 @@ deploy:
   acl: public_read
   skip_cleanup: true
   local_dir: build
+- provider: script
+  on:
+    all_branches: true
+  skip_cleanup: true
+  script: npm run deploy -- -x -e $TRAVIS_BRANCH -r https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
+- provider: script
+  on:
+    all_branches: true
+  script: npm run prune -- https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
 after_deploy:
 - 'curl -X POST -H "Fastly-Key: $FASTLY_TOKEN" -H "Accept: application/json" https://api.fastly.com/service/$FASTLY_SERVICE_ID/purge_all'

README.md

@@ -28,33 +28,89 @@ 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 (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 (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 by running `npm unlink` in both, and start over.
+
 ## Testing
-NOTE: If you're a windows user, please run these scripts in Windows `cmd.exe`  instead of Git Bash/MINGW64.
+### Documentation
+
+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.
+
+See [jest cli docs](https://facebook.github.io/jest/docs/en/cli.html#content) for more options.
 
-Run linter, unit tests, build, and integration tests.
+### Running tests
+
+*NOTE: If you're a windows user, please run these scripts in Windows `cmd.exe`  instead of Git Bash/MINGW64.*
+
+Before running any test, make sure you have run `npm install` from this (scratch-gui) repository's top level.
+
+#### Main testing command
+
+To run linter, unit tests, build, and integration tests, all at once:
 ```bash
 npm test
 ```
 
-Run unit tests in isolation.
+#### Running unit tests
+
+To run unit tests in isolation:
+```bash
+npm run test:unit
+```
+
+To run unit tests in watch mode (watches for code changes and continuously runs tests):
 ```bash
-npm run unit-test
+npm run test:unit -- --watch
 ```
 
-Run unit tests in watch mode (watches for code changes and continuously runs tests). See [jest cli docs](https://facebook.github.io/jest/docs/en/cli.html#content) for more options.
+#### Running integration tests
+
+Integration tests use a headless browser to manipulate the actual html and javascript that the repo
+produces. You will not see this activity (though you can hear it when sounds are played!).
+
+Note that integration tests require you to first create a build that can be loaded in a browser:
+
 ```bash
-npm run unit-test -- --watch
+npm run build
 ```
 
-Run integration tests in isolation.
+Then, you can run all integration tests:
+
 ```bash
-npm run integration-test
+npm run test:integration
 ```
 
-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.
+Or, you can run a single file of integration tests (in this example, the `backpack` tests):
 
-## Publishing to GitHub Pages
+```bash
+$(npm bin)/jest --runInBand test/integration/backpack.test.js
+```
 
+If you want to watch the browser as it runs the test, rather than running headless, use:
+
+```bash
+USE_HEADLESS=no $(npm bin)/jest --runInBand test/integration/backpack.test.js
+```
+
+## 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

@@ -29,8 +29,8 @@
     "react-dom": "^16.0.0"
   },
   "devDependencies": {
-    "arraybuffer-loader": "^1.0.3",
-    "autoprefixer": "^8.1.0",
+    "arraybuffer-loader": "^1.0.6",
+    "autoprefixer": "^9.0.1",
     "babel-core": "^6.23.1",
     "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.0",
@@ -40,14 +40,14 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.22.0",
     "base64-loader": "1.0.0",
-    "bowser": "1.9.3",
-    "chromedriver": "2.40.0",
+    "bowser": "1.9.4",
+    "chromedriver": "2.42.0",
     "classnames": "2.2.6",
     "copy-webpack-plugin": "^4.5.1",
     "core-js": "2.5.7",
-    "css-loader": "^0.28.11",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16": "1.1.1",
+    "css-loader": "^1.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",
@@ -70,50 +70,50 @@
     "lodash.pick": "4.4.0",
     "minilog": "3.1.0",
     "mkdirp": "^0.5.1",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.1.4",
-    "postcss-simple-vars": "^4.0.0",
+    "postcss-import": "^12.0.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-simple-vars": "^5.0.1",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "raw-loader": "^0.5.1",
     "react": "16.2.0",
-    "react-contextmenu": "2.9.2",
+    "react-contextmenu": "2.9.3",
     "react-dom": "16.2.0",
     "react-draggable": "3.0.5",
     "react-ga": "2.5.3",
     "react-intl": "2.4.0",
-    "react-modal": "3.4.4",
-    "react-popover": "0.5.7",
+    "react-modal": "3.6.1",
+    "react-popover": "0.5.10",
     "react-redux": "5.0.7",
-    "react-responsive": "4.1.0",
-    "react-style-proptype": "3.2.1",
-    "react-tabs": "2.2.2",
+    "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.6.1",
-    "react-virtualized": "9.20.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.20180625202813",
-    "scratch-blocks": "0.1.0-prerelease.1531482946",
-    "scratch-l10n": "3.0.20180712200642",
-    "scratch-paint": "0.2.0-prerelease.20180712195436",
-    "scratch-render": "0.1.0-prerelease.20180618173030",
-    "scratch-storage": "0.5.1",
-    "scratch-svg-renderer": "0.2.0-prerelease.20180712223402",
-    "scratch-vm": "0.1.0-prerelease.1531486395",
+    "scratch-blocks": "0.1.0-prerelease.1538658492",
+    "scratch-l10n": "3.0.20181004141631",
+    "scratch-paint": "0.2.0-prerelease.20180926191006",
+    "scratch-render": "0.1.0-prerelease.20181002192350",
+    "scratch-storage": "1.0.3",
+    "scratch-svg-renderer": "0.2.0-prerelease.20180926143036",
+    "scratch-vm": "0.2.0-prerelease.20181001223744",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.23.0",
     "svg-to-image": "1.1.3",
-    "text-encoding": "0.6.4",
+    "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": "^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/action-menu/action-menu.css

@@ -1,4 +1,5 @@
 @import "../../css/colors.css";
+@import "../../css/z-index.css";
 
 $main-button-size: 2.75rem;
 $more-button-size: 2.25rem;
@@ -44,7 +45,7 @@ button::-moz-focus-inner {
     width: $main-button-size;
     height: $main-button-size;
     box-shadow: 0 0 0 4px $motion-transparent;
-    z-index: 20; /* TODO reorder layout to prevent z-index need */
+    z-index: $z-index-add-button;
     transition: transform, box-shadow 0.5s;
 }
 
@@ -58,6 +59,10 @@ button::-moz-focus-inner {
     height: calc($main-button-size - 1rem);
 }
 
+[dir="rtl"] .main-icon {
+    transform: scaleX(-1);
+}
+
 .more-buttons-outer {
     /*
         Need to use two divs to set different overflow x/y
@@ -71,6 +76,7 @@ button::-moz-focus-inner {
     border-top-right-radius: $more-button-size;
     width: $more-button-size;
     margin-left: calc(($main-button-size - $more-button-size) / 2);
+    margin-right: calc(($main-button-size - $more-button-size) / 2);
 
     position: absolute;
     bottom: calc($main-button-size);
@@ -150,7 +156,7 @@ button::-moz-focus-inner {
     border-radius: .25rem !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-    z-index: 100 !important;
+    z-index: $z-index-tooltip !important;
 }
 
 $arrow-size: 0.5rem;

src/components/action-menu/action-menu.jsx

@@ -24,6 +24,7 @@ class ActionMenu extends React.Component {
             isOpen: false,
             forceHide: false
         };
+        this.mainTooltipId = `tooltip-${Math.random()}`;
     }
     componentDidMount () {
         // Touch start on the main button is caught to trigger open and not click
@@ -101,11 +102,10 @@ class ActionMenu extends React.Component {
             img: mainImg,
             title: mainTitle,
             moreButtons,
+            tooltipPlace,
             onClick
         } = this.props;
 
-        const mainTooltipId = `tooltip-${Math.random()}`;
-
         return (
             <div
                 className={classNames(styles.menuContainer, className, {
@@ -119,7 +119,7 @@ class ActionMenu extends React.Component {
                 <button
                     aria-label={mainTitle}
                     className={classNames(styles.button, styles.mainButton)}
-                    data-for={mainTooltipId}
+                    data-for={this.mainTooltipId}
                     data-tip={mainTitle}
                     ref={this.setButtonRef}
                     onClick={this.clickDelayer(onClick)}
@@ -133,16 +133,16 @@ class ActionMenu extends React.Component {
                 <ReactTooltip
                     className={styles.tooltip}
                     effect="solid"
-                    id={mainTooltipId}
-                    place="left"
+                    id={this.mainTooltipId}
+                    place={tooltipPlace || 'left'}
                 />
                 <div className={styles.moreButtonsOuter}>
                     <div className={styles.moreButtons}>
                         {(moreButtons || []).map(({img, title, onClick: handleClick,
                             fileAccept, fileChange, fileInput}, keyId) => {
                             const isComingSoon = !handleClick;
                             const hasFileInput = fileInput;
-                            const tooltipId = title;
+                            const tooltipId = `${this.mainTooltipId}-${title}`;
                             return (
                                 <div key={`${tooltipId}-${keyId}`}>
                                     <button
@@ -174,7 +174,7 @@ class ActionMenu extends React.Component {
                                         })}
                                         effect="solid"
                                         id={tooltipId}
-                                        place="left"
+                                        place={tooltipPlace || 'left'}
                                     />
                                 </div>
                             );
@@ -198,7 +198,8 @@ ActionMenu.propTypes = {
         fileInput: PropTypes.func // Optional, only for file upload
     })),
     onClick: PropTypes.func.isRequired,
-    title: PropTypes.node.isRequired
+    title: PropTypes.node.isRequired,
+    tooltipPlace: PropTypes.string
 };
 
 export default ActionMenu;

src/components/alerts/alert.css

@@ -0,0 +1,36 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+@import "../../css/z-index.css";
+
+.alert {
+    width: 100%;
+    background: #FFF0DF;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    align-items: left;
+    border: 1px solid #FF8C1A;
+    border-radius: 8px;
+    padding: 8px;
+    box-shadow: 0px 0px 0px 2px rgba(255, 140, 26, 0.25);
+    margin-bottom: 7px;
+}
+
+.alert-icon {
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+.alert-message {
+    color: #555;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 22pt;
+    width: 100%;
+}
+
+.alert-close-button {
+    margin-top: 7px;
+    margin-right: 4px;
+    outline-style:none;
+}