Reinstate localization in button titles

src/components/gui/gui.jsx

 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import MediaQuery from 'react-responsive';
 import tabStyles from 'react-tabs/style/react-tabs.css';
@@ -24,11 +25,20 @@ import layout from '../../lib/layout-constants.js';
 import styles from './gui.css';
 import addExtensionIcon from './icon--extensions.svg';
 
+const messages = defineMessages({
+    addExtension: {
+        id: 'gui.gui.addExtension',
+        description: 'Button to add an extension in the target pane',
+        defaultMessage: 'Add Extension'
+    }
+});
+
 const GUIComponent = props => {
     const {
         basePath,
         children,
         enableExtensions,
+        intl,
         feedbackFormVisible,
         vm,
         previewInfoVisible,
@@ -102,7 +112,7 @@ const GUIComponent = props => {
                                         className={classNames(styles.extensionButton, {
                                             [styles.hidden]: !enableExtensions
                                         })}
-                                        title={'Add Extension'}
+                                        title={intl.formatMessage(messages.addExtension)}
                                         onClick={onExtensionButtonClick}
                                     >
                                         <img
@@ -155,6 +165,7 @@ GUIComponent.propTypes = {
     children: PropTypes.node,
     enableExtensions: PropTypes.bool,
     feedbackFormVisible: PropTypes.bool,
+    intl: intlShape.isRequired,
     onExtensionButtonClick: PropTypes.func,
     onTabSelect: PropTypes.func,
     previewInfoVisible: PropTypes.bool,
@@ -164,4 +175,4 @@ GUIComponent.propTypes = {
 GUIComponent.defaultProps = {
     basePath: './'
 };
-export default GUIComponent;
+export default injectIntl(GUIComponent);

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

 import PropTypes from 'prop-types';
 import React from 'react';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
 import Box from '../box/box.jsx';
 import SpriteInfo from '../../containers/sprite-info.jsx';
@@ -9,8 +10,17 @@ import AssetButton from '../asset-button/asset-button.jsx';
 import styles from './sprite-selector.css';
 import spriteIcon from './icon--sprite.svg';
 
+const messages = defineMessages({
+    addSprite: {
+        id: 'gui.spriteSelector.addSprite',
+        description: 'Button to add a sprite in the target pane',
+        defaultMessage: 'Add Sprite'
+    }
+});
+
 const SpriteSelectorComponent = function (props) {
     const {
+        intl,
         onChangeSpriteDirection,
         onChangeSpriteName,
         onChangeSpriteSize,
@@ -78,7 +88,7 @@ const SpriteSelectorComponent = function (props) {
             <AssetButton
                 className={styles.addButton}
                 img={spriteIcon}
-                title={'Add Sprite'}
+                title={intl.formatMessage(messages.addSprite)}
                 onClick={onNewSpriteClick}
             />
         </Box>
@@ -86,6 +96,7 @@ const SpriteSelectorComponent = function (props) {
 };
 
 SpriteSelectorComponent.propTypes = {
+    intl: intlShape.isRequired,
     onChangeSpriteDirection: PropTypes.func,
     onChangeSpriteName: PropTypes.func,
     onChangeSpriteSize: PropTypes.func,
@@ -112,4 +123,4 @@ SpriteSelectorComponent.propTypes = {
     })
 };
 
-export default SpriteSelectorComponent;
+export default injectIntl(SpriteSelectorComponent);

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

 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessages, intlShape, injectIntl, FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
 import AssetButton from '../asset-button/asset-button.jsx';
@@ -9,9 +9,18 @@ import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
 import styles from './stage-selector.css';
 import backdropIcon from './icon--backdrop.svg';
 
+const messages = defineMessages({
+    addBackdrop: {
+        id: 'gui.stageSelector.targetPaneAddBackdrop',
+        description: 'Button to add a backdrop in the target pane',
+        defaultMessage: 'Add Backdrop'
+    }
+});
+
 const StageSelector = props => {
     const {
         backdropCount,
+        intl,
         selected,
         url,
         onClick,
@@ -48,7 +57,7 @@ const StageSelector = props => {
             <AssetButton
                 className={styles.addButton}
                 img={backdropIcon}
-                title={'Add Backdrop'}
+                title={intl.formatMessage(messages.addBackdrop)}
                 onClick={onNewBackdropClick}
             />
         </Box>
@@ -57,9 +66,10 @@ const StageSelector = props => {
 
 StageSelector.propTypes = {
     backdropCount: PropTypes.number.isRequired,
+    intl: intlShape.isRequired,
     onClick: PropTypes.func,
     onNewBackdropClick: PropTypes.func,
     selected: PropTypes.bool.isRequired,
     url: PropTypes.string
 };
-export default StageSelector;
+export default injectIntl(StageSelector);