feat: use high contrast icons

src/components/gui/gui.jsx

@@ -33,6 +33,7 @@ import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
 
 import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
 import {resolveStageSize} from '../../lib/screen-utils';
+import {themeMap} from '../../lib/themes';
 
 import styles from './gui.css';
 import addExtensionIcon from './icon--extensions.svg';
@@ -308,7 +309,7 @@ const GUIComponent = props => {
                                             isVisible={blocksTabVisible}
                                             key={theme}
                                             options={{
-                                                media: `${basePath}static/blocks-media/`
+                                                media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
                                             }}
                                             stageSize={stageSize}
                                             theme={theme}

src/components/record-modal/record-modal.css

@@ -106,7 +106,8 @@
     text-align: center;
 }
 
-.record-button {
+/* Increase specificity to make sure this wins out over normalize.css */
+svg.record-button {
     overflow: visible;
 }
 

src/containers/blocks.jsx

@@ -19,7 +19,7 @@ import DropAreaHOC from '../lib/drop-area-hoc.jsx';
 import DragConstants from '../lib/drag-constants';
 import defineDynamicBlock from '../lib/define-dynamic-block';
 import {DEFAULT_THEME, getColorsForTheme, themeMap} from '../lib/themes';
-import {injectExtensionBlockColors, injectExtensionCategoryColors} from '../lib/themes/blockHelpers';
+import {injectExtensionBlockTheme, injectExtensionCategoryTheme} from '../lib/themes/blockHelpers';
 
 import {connect} from 'react-redux';
 import {updateToolbox} from '../reducers/toolbox';
@@ -349,7 +349,7 @@ class Blocks extends React.Component {
             const stageCostumes = stage.getCostumes();
             const targetCostumes = target.getCostumes();
             const targetSounds = target.getSounds();
-            const dynamicBlocksXML = injectExtensionCategoryColors(
+            const dynamicBlocksXML = injectExtensionCategoryTheme(
                 this.props.vm.runtime.getBlocksXML(target),
                 this.props.theme
             );
@@ -436,7 +436,7 @@ class Blocks extends React.Component {
                     if (blockInfo.info && blockInfo.info.isDynamic) {
                         dynamicBlocksInfo.push(blockInfo);
                     } else if (blockInfo.json) {
-                        staticBlocksJson.push(injectExtensionBlockColors(blockInfo.json, this.props.theme));
+                        staticBlocksJson.push(injectExtensionBlockTheme(blockInfo.json, this.props.theme));
                     }
                     // otherwise it's a non-block entry such as '---'
                 });

src/lib/themes/__mocks__/dark-mode.js

@@ -10,4 +10,9 @@ const blockColors = {
     text: '#BBBBBB'
 };
 
-export default blockColors;
+const extensions = {};
+
+export {
+    blockColors,
+    extensions
+}

src/lib/themes/__mocks__/default-colors.js

@@ -13,4 +13,6 @@ const blockColors = {
     workspace: '#555555'
 };
 
-export default blockColors;
+export {
+    blockColors
+};

src/lib/themes/blockHelpers.js

@@ -1,4 +1,4 @@
-import {DEFAULT_THEME, getColorsForTheme} from '.';
+import {DEFAULT_THEME, getColorsForTheme, themeMap} from '.';
 
 // scratch-blocks colours has a pen property that scratch-gui uses for all extensions
 const getExtensionColors = theme => getColorsForTheme(theme).pen;
@@ -12,11 +12,12 @@ const getExtensionColors = theme => getColorsForTheme(theme).pen;
  * @param {string} theme - Theme name
  * @returns {Array.<object>} Dynamic block XML updated with colors.
  */
-const injectExtensionCategoryColors = (dynamicBlockXML, theme) => {
+const injectExtensionCategoryTheme = (dynamicBlockXML, theme) => {
     // Don't do any manipulation for the default theme
     if (theme === DEFAULT_THEME) return dynamicBlockXML;
 
     const extensionColors = getExtensionColors(theme);
+    const extensionIcons = themeMap[theme].extensions;
     const parser = new DOMParser();
     const serializer = new XMLSerializer();
 
@@ -27,28 +28,55 @@ const injectExtensionCategoryColors = (dynamicBlockXML, theme) => {
         // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
         dom.documentElement.setAttribute('secondaryColour', extensionColors.tertiary);
 
+        if (extensionIcons[extension.id] && extensionIcons[extension.id].menuIconURI) {
+            dom.documentElement.setAttribute('iconURI', extensionIcons[extension.id].menuIconURI);
+        }
+
         return {
             ...extension,
             xml: serializer.serializeToString(dom)
         };
     });
 };
 
+const isScratchExtension = blockInfoJson => (blockInfoJson.extensions || []).includes('scratch_extension');
+
+const injectBlockIcons = (blockInfoJson, theme) => {
+    if (!blockInfoJson.args0 || blockInfoJson.args0[0].type !== 'field_image') return blockInfoJson;
+
+    const extensionIcons = themeMap[theme].extensions;
+    const extension = blockInfoJson.type.substring(0, blockInfoJson.type.indexOf('_'));
+
+    if (!extensionIcons[extension] || !extensionIcons[extension].blockIconURI) return blockInfoJson;
+
+    return {
+        ...blockInfoJson,
+        args0: blockInfoJson.args0.map((value, index) => {
+            if (index !== 0) return value;
+
+            return {
+                ...value,
+                src: extensionIcons[extension].blockIconURI
+            };
+        })
+    };
+};
+
 /**
  * Applies extension color theme to static block json.
  * No changes are applied if called with the default theme, allowing extensions to provide their own colors.
  * @param {object} blockInfoJson - Static block json
  * @param {string} theme - Theme name
  * @returns {object} Block info json with updated colors. The original blockInfoJson is not modified.
  */
-const injectExtensionBlockColors = (blockInfoJson, theme) => {
+const injectExtensionBlockTheme = (blockInfoJson, theme) => {
     // Don't do any manipulation for the default theme
     if (theme === DEFAULT_THEME) return blockInfoJson;
 
     const extensionColors = getExtensionColors(theme);
 
     return {
-        ...blockInfoJson,
+        ...injectBlockIcons(blockInfoJson, theme),
         colour: extensionColors.primary,
         colourSecondary: extensionColors.secondary,
         colourTertiary: extensionColors.tertiary,
@@ -57,6 +85,6 @@ const injectExtensionBlockColors = (blockInfoJson, theme) => {
 };
 
 export {
-    injectExtensionBlockColors,
-    injectExtensionCategoryColors
+    injectExtensionBlockTheme,
+    injectExtensionCategoryTheme
 };

src/lib/themes/dark-mode.js

@@ -76,4 +76,9 @@ const blockColors = {
     menuHover: 'rgba(255, 255, 255, 0.3)'
 };
 
-export default blockColors;
+const extensions = {};
+
+export {
+    blockColors,
+    extensions
+};

src/lib/themes/default-colors.js

@@ -100,4 +100,6 @@ const blockColors = {
     menuHover: 'rgba(0, 0, 0, 0.2)'
 };
 
-export default blockColors;
+export {
+    blockColors
+};

src/lib/themes/index.js

@@ -1,9 +1,15 @@
 import defaultsDeep from 'lodash.defaultsdeep';
 import {defineMessages} from 'react-intl';
 
-import darkMode from './dark-mode';
-import highContrast from './high-contrast';
-import defaultColors from './default-colors';
+import {
+    blockColors as darkModeBlockColors,
+    extensions as darkModeExtensions
+} from './dark-mode';
+import {
+    blockColors as highContrastBlockColors,
+    extensions as highContrastExtensions
+} from './high-contrast';
+import {blockColors as defaultColors} from './default-colors';
 
 import defaultIcon from './standard.svg';
 import highContrastIcon from './high-contrast.svg';
@@ -34,16 +40,22 @@ const messages = defineMessages({
 
 const themeMap = {
     [DEFAULT_THEME]: {
+        blocksMediaFolder: 'blocks-media',
         colors: defaultColors,
+        extensions: {},
         label: messages[DEFAULT_THEME],
         icon: defaultIcon
     },
     [DARK_THEME]: {
-        colors: mergeWithDefaults(darkMode),
+        blocksMediaFolder: 'blocks-media',
+        colors: mergeWithDefaults(darkModeBlockColors),
+        extensions: darkModeExtensions,
         label: messages[DARK_THEME]
     },
     [HIGH_CONTRAST_THEME]: {
-        colors: mergeWithDefaults(highContrast),
+        blocksMediaFolder: 'blocks-media-high-contrast',
+        colors: mergeWithDefaults(highContrastBlockColors),
+        extensions: highContrastExtensions,
         label: messages[HIGH_CONTRAST_THEME],
         icon: highContrastIcon
     }