Merge branch 'develop' into greenkeeper/chromedriver-2.40.0

package.json

@@ -40,7 +40,7 @@
     "babel-preset-react": "^6.22.0",
     "bowser": "1.9.3",
     "chromedriver": "2.40.0",
-    "classnames": "2.2.5",
+    "classnames": "2.2.6",
     "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.11",
     "enzyme": "^3.1.0",
@@ -92,9 +92,9 @@
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "0.1.0-prerelease.1528210666",
-    "scratch-blocks": "0.1.0-prerelease.1528400332",
+    "scratch-blocks": "0.1.0-prerelease.1528492670",
     "scratch-l10n": "3.0.20180604162003",
-    "scratch-paint": "0.2.0-prerelease.20180607153112",
+    "scratch-paint": "0.2.0-prerelease.20180607215543",
     "scratch-render": "0.1.0-prerelease.20180605145739",
     "scratch-storage": "0.5.0",
     "scratch-vm": "0.1.0-prerelease.1528399883",

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

@@ -76,8 +76,8 @@ class ActionMenu extends React.Component {
         // (possibly slow) action is started.
         return event => {
             ReactTooltip.hide();
+            if (fn) fn(event);
             this.setState({forceHide: true, isOpen: false}, () => {
-                if (fn) fn(event);
                 setTimeout(() => this.setState({forceHide: false}));
             });
         };

src/components/gui/gui.css

@@ -176,6 +176,8 @@
     padding-left: $space;
     padding-right: $space;
 
+    min-height: 0; /* this makes it work in Firefox */
+    
     /*
         For making the sprite-selector a scrollable pane
         @todo: Not working in Safari

src/components/gui/gui.jsx

@@ -15,6 +15,8 @@ import StageWrapper from '../../containers/stage-wrapper.jsx';
 import Loader from '../loader/loader.jsx';
 import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
+import CostumeLibrary from '../../containers/costume-library.jsx';
+import BackdropLibrary from '../../containers/backdrop-library.jsx';
 
 import Backpack from '../../containers/backpack.jsx';
 import PreviewModal from '../../containers/preview-modal.jsx';
@@ -46,10 +48,12 @@ const GUIComponent = props => {
     const {
         activeTabIndex,
         basePath,
+        backdropLibraryVisible,
         backpackOptions,
         blocksTabVisible,
         cardsVisible,
         children,
+        costumeLibraryVisible,
         costumesTabVisible,
         enableCommunity,
         importInfoVisible,
@@ -60,6 +64,8 @@ const GUIComponent = props => {
         onActivateCostumesTab,
         onActivateSoundsTab,
         onActivateTab,
+        onRequestCloseBackdropLibrary,
+        onRequestCloseCostumeLibrary,
         previewInfoVisible,
         targetIsStage,
         soundsTabVisible,
@@ -112,6 +118,18 @@ const GUIComponent = props => {
             {cardsVisible ? (
                 <Cards />
             ) : null}
+            {costumeLibraryVisible ? (
+                <CostumeLibrary
+                    vm={vm}
+                    onRequestClose={onRequestCloseCostumeLibrary}
+                />
+            ) : null}
+            {backdropLibraryVisible ? (
+                <BackdropLibrary
+                    vm={vm}
+                    onRequestClose={onRequestCloseBackdropLibrary}
+                />
+            ) : null}
             <MenuBar enableCommunity={enableCommunity} />
             <Box className={styles.bodyWrapper}>
                 <Box className={styles.flexWrapper}>
@@ -227,6 +245,7 @@ const GUIComponent = props => {
 };
 GUIComponent.propTypes = {
     activeTabIndex: PropTypes.number,
+    backdropLibraryVisible: PropTypes.bool,
     backpackOptions: PropTypes.shape({
         host: PropTypes.string,
         visible: PropTypes.bool
@@ -235,6 +254,7 @@ GUIComponent.propTypes = {
     blocksTabVisible: PropTypes.bool,
     cardsVisible: PropTypes.bool,
     children: PropTypes.node,
+    costumeLibraryVisible: PropTypes.bool,
     costumesTabVisible: PropTypes.bool,
     enableCommunity: PropTypes.bool,
     importInfoVisible: PropTypes.bool,
@@ -245,6 +265,8 @@ GUIComponent.propTypes = {
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,
+    onRequestCloseBackdropLibrary: PropTypes.func,
+    onRequestCloseCostumeLibrary: PropTypes.func,
     onTabSelect: PropTypes.func,
     previewInfoVisible: PropTypes.bool,
     soundsTabVisible: PropTypes.bool,

src/components/library-item/library-item.css

@@ -5,7 +5,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     flex-basis: 160px;
     max-width: 160px;
     height: 160px;

src/components/library/library.css

@@ -5,6 +5,7 @@
     display: flex;
     justify-content: flex-start;
     align-content: flex-start;
+    align-items: flex-start;
     background: $ui-secondary;
     flex-grow: 1;
     flex-wrap: wrap;

src/components/sprite-selector/sprite-selector.css

@@ -47,7 +47,7 @@
               then back up, introduces white space in the outside the page container.
     */
     height: calc(100% - $sprite-info-height);
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .items-wrapper {

src/containers/backdrop-library.jsx

@@ -2,8 +2,14 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {connect} from 'react-redux';
 import VM from 'scratch-vm';
 
+import {
+    activateTab,
+    COSTUMES_TAB_INDEX
+} from '../reducers/editor-tab';
+
 import analytics from '../lib/analytics';
 import backdropLibraryContent from '../lib/libraries/backdrops.json';
 import backdropTags from '../lib/libraries/backdrop-tags';
@@ -33,6 +39,8 @@ class BackdropLibrary extends React.Component {
             bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
             skinId: null
         };
+        this.props.vm.setEditingTarget(this.props.stageID);
+        this.props.onActivateTab(COSTUMES_TAB_INDEX);
         this.props.vm.addBackdrop(item.md5, vmBackdrop);
         analytics.event({
             category: 'library',
@@ -56,8 +64,21 @@ class BackdropLibrary extends React.Component {
 
 BackdropLibrary.propTypes = {
     intl: intlShape.isRequired,
+    onActivateTab: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func,
+    stageID: PropTypes.string.isRequired,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default injectIntl(BackdropLibrary);
+const mapStateToProps = state => ({
+    stageID: state.scratchGui.targets.stage.id
+});
+
+const mapDispatchToProps = dispatch => ({
+    onActivateTab: tab => dispatch(activateTab(tab))
+});
+
+export default injectIntl(connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(BackdropLibrary));

src/containers/costume-tab.jsx

@@ -6,8 +6,6 @@ import VM from 'scratch-vm';
 
 import AssetPanel from '../components/asset-panel/asset-panel.jsx';
 import PaintEditorWrapper from './paint-editor-wrapper.jsx';
-import CostumeLibrary from './costume-library.jsx';
-import BackdropLibrary from './backdrop-library.jsx';
 import CameraModal from './camera-modal.jsx';
 import {connect} from 'react-redux';
 import {handleFileUpload, costumeUpload} from '../lib/file-uploader.js';
@@ -15,8 +13,6 @@ import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 
 import {
     closeCameraCapture,
-    closeCostumeLibrary,
-    closeBackdropLibrary,
     openCameraCapture,
     openCostumeLibrary,
     openBackdropLibrary
@@ -209,16 +205,11 @@ class CostumeTab extends React.Component {
             onNewCostumeFromCameraClick,
             onNewLibraryBackdropClick,
             onNewLibraryCostumeClick,
-            backdropLibraryVisible,
             cameraModalVisible,
-            costumeLibraryVisible,
-            onRequestCloseBackdropLibrary,
             onRequestCloseCameraModal,
-            onRequestCloseCostumeLibrary,
             editingTarget,
             sprites,
-            stage,
-            vm
+            stage
         } = this.props;
 
         const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
@@ -284,18 +275,6 @@ class CostumeTab extends React.Component {
                     /> :
                     null
                 }
-                {costumeLibraryVisible ? (
-                    <CostumeLibrary
-                        vm={vm}
-                        onRequestClose={onRequestCloseCostumeLibrary}
-                    />
-                ) : null}
-                {backdropLibraryVisible ? (
-                    <BackdropLibrary
-                        vm={vm}
-                        onRequestClose={onRequestCloseBackdropLibrary}
-                    />
-                ) : null}
                 {cameraModalVisible ? (
                     <CameraModal
                         onClose={onRequestCloseCameraModal}
@@ -308,17 +287,13 @@ class CostumeTab extends React.Component {
 }
 
 CostumeTab.propTypes = {
-    backdropLibraryVisible: PropTypes.bool,
     cameraModalVisible: PropTypes.bool,
-    costumeLibraryVisible: PropTypes.bool,
     editingTarget: PropTypes.string,
     intl: intlShape,
     onNewCostumeFromCameraClick: PropTypes.func.isRequired,
     onNewLibraryBackdropClick: PropTypes.func.isRequired,
     onNewLibraryCostumeClick: PropTypes.func.isRequired,
-    onRequestCloseBackdropLibrary: PropTypes.func.isRequired,
     onRequestCloseCameraModal: PropTypes.func.isRequired,
-    onRequestCloseCostumeLibrary: PropTypes.func.isRequired,
     sprites: PropTypes.shape({
         id: PropTypes.shape({
             costumes: PropTypes.arrayOf(PropTypes.shape({
@@ -340,9 +315,7 @@ const mapStateToProps = state => ({
     editingTarget: state.scratchGui.targets.editingTarget,
     sprites: state.scratchGui.targets.sprites,
     stage: state.scratchGui.targets.stage,
-    cameraModalVisible: state.scratchGui.modals.cameraCapture,
-    costumeLibraryVisible: state.scratchGui.modals.costumeLibrary,
-    backdropLibraryVisible: state.scratchGui.modals.backdropLibrary
+    cameraModalVisible: state.scratchGui.modals.cameraCapture
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -357,12 +330,6 @@ const mapDispatchToProps = dispatch => ({
     onNewCostumeFromCameraClick: () => {
         dispatch(openCameraCapture());
     },
-    onRequestCloseBackdropLibrary: () => {
-        dispatch(closeBackdropLibrary());
-    },
-    onRequestCloseCostumeLibrary: () => {
-        dispatch(closeCostumeLibrary());
-    },
     onRequestCloseCameraModal: () => {
         dispatch(closeCameraCapture());
     }

src/containers/gui.jsx

@@ -14,6 +14,11 @@ import {
     SOUNDS_TAB_INDEX
 } from '../reducers/editor-tab';
 
+import {
+    closeCostumeLibrary,
+    closeBackdropLibrary
+} from '../reducers/modals';
+
 import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
 import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
 
@@ -103,8 +108,10 @@ GUI.defaultProps = GUIComponent.defaultProps;
 
 const mapStateToProps = state => ({
     activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
+    backdropLibraryVisible: state.scratchGui.modals.backdropLibrary,
     blocksTabVisible: state.scratchGui.editorTab.activeTabIndex === BLOCKS_TAB_INDEX,
     cardsVisible: state.scratchGui.cards.visible,
+    costumeLibraryVisible: state.scratchGui.modals.costumeLibrary,
     costumesTabVisible: state.scratchGui.editorTab.activeTabIndex === COSTUMES_TAB_INDEX,
     importInfoVisible: state.scratchGui.modals.importInfo,
     isPlayerOnly: state.scratchGui.mode.isPlayerOnly,
@@ -122,7 +129,9 @@ const mapDispatchToProps = dispatch => ({
     onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
     onActivateTab: tab => dispatch(activateTab(tab)),
     onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
-    onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX))
+    onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
+    onRequestCloseBackdropLibrary: () => dispatch(closeBackdropLibrary()),
+    onRequestCloseCostumeLibrary: () => dispatch(closeCostumeLibrary())
 });
 
 const ConnectedGUI = connect(

src/containers/stage-selector.jsx

@@ -119,8 +119,7 @@ const mapStateToProps = (state, {assetId, id}) => ({
 
 const mapDispatchToProps = dispatch => ({
     onNewBackdropClick: e => {
-        e.preventDefault();
-        dispatch(activateTab(COSTUMES_TAB_INDEX));
+        e.stopPropagation();
         dispatch(openBackdropLibrary());
     },
     onActivateTab: tabIndex => {

src/lib/blocks.js

@@ -185,14 +185,6 @@ export default function (vm) {
         this.jsonInit(json);
     };
 
-    ScratchBlocks.Blocks.event_touchingobjectmenu.init = function () {
-        const json = jsonForMenuBlock('TOUCHINGOBJECTMENU', spriteMenu, eventColors, [
-            ['mouse-pointer', '_mouse_'],
-            ['edge', '_edge_']
-        ]);
-        this.jsonInit(json);
-    };
-
     ScratchBlocks.Blocks.control_create_clone_of_menu.init = function () {
         const json = jsonForMenuBlock('CLONE_OPTION', cloneMenu, controlColors, []);
         this.jsonInit(json);

src/lib/make-toolbox-xml.js

@@ -321,13 +321,6 @@ const events = function (isStage) {
         ` : `
             <block type="event_whenthisspriteclicked"/>
         `}
-        ${isStage ? '' : `
-            <block type="event_whentouchingobject">
-                <value name="TOUCHINGOBJECTMENU">
-                    <shadow type="event_touchingobjectmenu"/>
-                </value>
-            </block>
-        `}
         <block type="event_whenbackdropswitchesto">
         </block>
         ${blockSeparator}