@scratch/scratch-vm 11.1.0-spork.9 → 11.1.0

package/src/engine/runtime.js

@@ -385,8 +385,7 @@ class Runtime extends EventEmitter {
          * being added.
          * @type {function}
          */
-        this.addCloudVariable =
-            this._initializeAddCloudVariable(newCloudDataManager);
+        this.addCloudVariable = this._initializeAddCloudVariable(newCloudDataManager);
 
         /**
          * A function which updates the runtime's cloud variable limit
@@ -394,8 +393,7 @@ class Runtime extends EventEmitter {
          * if the last of the cloud variables is being removed.
          * @type {function}
          */
-        this.removeCloudVariable =
-            this._initializeRemoveCloudVariable(newCloudDataManager);
+        this.removeCloudVariable = this._initializeRemoveCloudVariable(newCloudDataManager);
 
         /**
          * A string representing the origin of the current project from outside of the
@@ -739,24 +737,24 @@ class Runtime extends EventEmitter {
     // Helper function for initializing the addCloudVariable function
     _initializeAddCloudVariable (newCloudDataManager) {
         // The addCloudVariable function
-        return () => {
+        return (() => {
             const hadCloudVarsBefore = this.hasCloudData();
             newCloudDataManager.addCloudVariable();
             if (!hadCloudVarsBefore && this.hasCloudData()) {
                 this.emit(Runtime.HAS_CLOUD_DATA_UPDATE, true);
             }
-        };
+        });
     }
 
     // Helper function for initializing the removeCloudVariable function
     _initializeRemoveCloudVariable (newCloudDataManager) {
-        return () => {
+        return (() => {
             const hadCloudVarsBefore = this.hasCloudData();
             newCloudDataManager.removeCloudVariable();
             if (hadCloudVarsBefore && !this.hasCloudData()) {
                 this.emit(Runtime.HAS_CLOUD_DATA_UPDATE, false);
             }
-        };
+        });
     }
 
     /**
@@ -766,26 +764,14 @@ class Runtime extends EventEmitter {
      */
     _registerBlockPackages () {
         for (const packageName in defaultBlockPackages) {
-            if (
-                Object.prototype.hasOwnProperty.call(
-                    defaultBlockPackages,
-                    packageName
-                )
-            ) {
+            if (Object.prototype.hasOwnProperty.call(defaultBlockPackages, packageName)) {
                 // @todo pass a different runtime depending on package privilege?
-                const packageObject = new defaultBlockPackages[packageName](
-                    this
-                );
+                const packageObject = new (defaultBlockPackages[packageName])(this);
                 // Collect primitives from package.
                 if (packageObject.getPrimitives) {
                     const packagePrimitives = packageObject.getPrimitives();
                     for (const op in packagePrimitives) {
-                        if (
-                            Object.prototype.hasOwnProperty.call(
-                                packagePrimitives,
-                                op
-                            )
-                        ) {
+                        if (Object.prototype.hasOwnProperty.call(packagePrimitives, op)) {
                             this._primitives[op] =
                                 packagePrimitives[op].bind(packageObject);
                         }
@@ -795,23 +781,14 @@ class Runtime extends EventEmitter {
                 if (packageObject.getHats) {
                     const packageHats = packageObject.getHats();
                     for (const hatName in packageHats) {
-                        if (
-                            Object.prototype.hasOwnProperty.call(
-                                packageHats,
-                                hatName
-                            )
-                        ) {
+                        if (Object.prototype.hasOwnProperty.call(packageHats, hatName)) {
                             this._hats[hatName] = packageHats[hatName];
                         }
                     }
                 }
                 // Collect monitored from package.
                 if (packageObject.getMonitored) {
-                    this.monitorBlockInfo = Object.assign(
-                        {},
-                        this.monitorBlockInfo,
-                        packageObject.getMonitored()
-                    );
+                    this.monitorBlockInfo = Object.assign({}, this.monitorBlockInfo, packageObject.getMonitored());
                 }
             }
         }
@@ -841,9 +818,7 @@ class Runtime extends EventEmitter {
         const context = {};
         target = target || this.getEditingTarget() || this.getTargetForStage();
         if (target) {
-            context.targetType = target.isStage ?
-                TargetType.STAGE :
-                TargetType.SPRITE;
+            context.targetType = (target.isStage ? TargetType.STAGE : TargetType.SPRITE);
         }
     }
 
@@ -876,14 +851,8 @@ class Runtime extends EventEmitter {
         this._fillExtensionCategory(categoryInfo, extensionInfo);
 
         for (const fieldTypeName in categoryInfo.customFieldTypes) {
-            if (
-                Object.prototype.hasOwnProperty.call(
-                    extensionInfo.customFieldTypes,
-                    fieldTypeName
-                )
-            ) {
-                const fieldTypeInfo =
-                    categoryInfo.customFieldTypes[fieldTypeName];
+            if (Object.prototype.hasOwnProperty.call(extensionInfo.customFieldTypes, fieldTypeName)) {
+                const fieldTypeInfo = categoryInfo.customFieldTypes[fieldTypeName];
 
                 // Emit events for custom field types from extension
                 this.emit(Runtime.EXTENSION_FIELD_ADDED, {
@@ -902,9 +871,7 @@ class Runtime extends EventEmitter {
      * @private
      */
     _refreshExtensionPrimitives (extensionInfo) {
-        const categoryInfo = this._blockInfo.find(
-            info => info.id === extensionInfo.id
-        );
+        const categoryInfo = this._blockInfo.find(info => info.id === extensionInfo.id);
         if (categoryInfo) {
             categoryInfo.name = maybeFormatMessage(extensionInfo.name);
             this._fillExtensionCategory(categoryInfo, extensionInfo);
@@ -927,29 +894,15 @@ class Runtime extends EventEmitter {
         categoryInfo.menuInfo = {};
 
         for (const menuName in extensionInfo.menus) {
-            if (
-                Object.prototype.hasOwnProperty.call(
-                    extensionInfo.menus,
-                    menuName
-                )
-            ) {
+            if (Object.prototype.hasOwnProperty.call(extensionInfo.menus, menuName)) {
                 const menuInfo = extensionInfo.menus[menuName];
-                const convertedMenu = this._buildMenuForScratchBlocks(
-                    menuName,
-                    menuInfo,
-                    categoryInfo
-                );
+                const convertedMenu = this._buildMenuForScratchBlocks(menuName, menuInfo, categoryInfo);
                 categoryInfo.menus.push(convertedMenu);
                 categoryInfo.menuInfo[menuName] = menuInfo;
             }
         }
         for (const fieldTypeName in extensionInfo.customFieldTypes) {
-            if (
-                Object.prototype.hasOwnProperty.call(
-                    extensionInfo.customFieldTypes,
-                    fieldTypeName
-                )
-            ) {
+            if (Object.prototype.hasOwnProperty.call(extensionInfo.customFieldTypes, fieldTypeName)) {
                 const fieldType = extensionInfo.customFieldTypes[fieldTypeName];
                 const fieldTypeInfo = this._buildCustomFieldInfo(
                     fieldTypeName,
@@ -964,32 +917,22 @@ class Runtime extends EventEmitter {
 
         for (const blockInfo of extensionInfo.blocks) {
             try {
-                const convertedBlock = this._convertForScratchBlocks(
-                    blockInfo,
-                    categoryInfo
-                );
+                const convertedBlock = this._convertForScratchBlocks(blockInfo, categoryInfo);
                 categoryInfo.blocks.push(convertedBlock);
                 if (convertedBlock.json) {
                     const opcode = convertedBlock.json.type;
                     if (blockInfo.blockType !== BlockType.EVENT) {
                         this._primitives[opcode] = convertedBlock.info.func;
                     }
-                    if (
-                        blockInfo.blockType === BlockType.EVENT ||
-                        blockInfo.blockType === BlockType.HAT
-                    ) {
+                    if (blockInfo.blockType === BlockType.EVENT || blockInfo.blockType === BlockType.HAT) {
                         this._hats[opcode] = {
                             edgeActivated: blockInfo.isEdgeActivated,
-                            restartExistingThreads:
-                                blockInfo.shouldRestartExistingThreads
+                            restartExistingThreads: blockInfo.shouldRestartExistingThreads
                         };
                     }
                 }
             } catch (e) {
-                log.error('Error parsing block: ', {
-                    block: blockInfo,
-                    error: e
-                });
+                log.error('Error parsing block: ', {block: blockInfo, error: e});
             }
         }
     }
@@ -1005,25 +948,14 @@ class Runtime extends EventEmitter {
         if (typeof menuItems !== 'function') {
             const extensionMessageContext = this.makeMessageContextForTarget();
             return menuItems.map(item => {
-                const formattedItem = maybeFormatMessage(
-                    item,
-                    extensionMessageContext
-                );
+                const formattedItem = maybeFormatMessage(item, extensionMessageContext);
                 switch (typeof formattedItem) {
                 case 'string':
                     return [formattedItem, formattedItem];
                 case 'object':
-                    return [
-                        maybeFormatMessage(
-                            item.text,
-                            extensionMessageContext
-                        ),
-                        item.value
-                    ];
+                    return [maybeFormatMessage(item.text, extensionMessageContext), item.value];
                 default:
-                    throw new Error(
-                        `Can't interpret menu item: ${JSON.stringify(item)}`
-                    );
+                    throw new Error(`Can't interpret menu item: ${JSON.stringify(item)}`);
                 }
             });
         }
@@ -1049,10 +981,11 @@ class Runtime extends EventEmitter {
                 type: menuId,
                 inputsInline: true,
                 output: 'String',
-                style: categoryInfo.id,
+                colour: categoryInfo.color1,
+                colourSecondary: categoryInfo.color2,
+                colourTertiary: categoryInfo.color3,
                 outputShape: menuInfo.acceptReporters ?
-                    ScratchBlocksConstants.OUTPUT_SHAPE_ROUND :
-                    ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE,
+                    ScratchBlocksConstants.OUTPUT_SHAPE_ROUND : ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE,
                 args0: [
                     {
                         type: 'field_dropdown',
@@ -1094,19 +1027,16 @@ class Runtime extends EventEmitter {
      * @param {object} categoryInfo - The category the field belongs to (Used to set its colors)
      * @returns {object} - Object to be inserted into scratch-blocks
      */
-    _buildCustomFieldTypeForScratchBlocks (
-        fieldName,
-        output,
-        outputShape,
-        categoryInfo
-    ) {
+    _buildCustomFieldTypeForScratchBlocks (fieldName, output, outputShape, categoryInfo) {
         return {
             json: {
                 type: fieldName,
                 message0: '%1',
                 inputsInline: true,
                 output: output,
-                style: categoryInfo.id,
+                colour: categoryInfo.color1,
+                colourSecondary: categoryInfo.color2,
+                colourTertiary: categoryInfo.color3,
                 outputShape: outputShape,
                 args0: [
                     {
@@ -1151,8 +1081,9 @@ class Runtime extends EventEmitter {
             type: extendedOpcode,
             inputsInline: true,
             category: categoryInfo.name,
-            style: categoryInfo.id,
-            extensions: []
+            colour: categoryInfo.color1,
+            colourSecondary: categoryInfo.color2,
+            colourTertiary: categoryInfo.color3
         };
         const context = {
             // TODO: store this somewhere so that we can map args appropriately after translation.
@@ -1172,7 +1103,7 @@ class Runtime extends EventEmitter {
         const iconURI = blockInfo.blockIconURI || categoryInfo.blockIconURI;
 
         if (iconURI) {
-            blockJSON.extensions.push('scratch_extension');
+            blockJSON.extensions = ['scratch_extension'];
             blockJSON.message0 = '%1 %2';
             const iconJSON = {
                 type: 'field_image',
@@ -1183,13 +1114,15 @@ class Runtime extends EventEmitter {
             const separatorJSON = {
                 type: 'field_vertical_separator'
             };
-            blockJSON.args0 = [iconJSON, separatorJSON];
+            blockJSON.args0 = [
+                iconJSON,
+                separatorJSON
+            ];
         }
 
         switch (blockInfo.blockType) {
         case BlockType.COMMAND:
-            blockJSON.outputShape =
-                    ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE;
+            blockJSON.outputShape = ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE;
             blockJSON.previousStatement = null; // null = available connection; undefined = hat
             if (!blockInfo.isTerminal) {
                 blockJSON.nextStatement = null; // null = available connection; undefined = terminal
@@ -1197,35 +1130,25 @@ class Runtime extends EventEmitter {
             break;
         case BlockType.REPORTER:
             blockJSON.output = 'String'; // TODO: distinguish number & string here?
-            blockJSON.outputShape =
-                    ScratchBlocksConstants.OUTPUT_SHAPE_ROUND;
+            blockJSON.outputShape = ScratchBlocksConstants.OUTPUT_SHAPE_ROUND;
             break;
         case BlockType.BOOLEAN:
             blockJSON.output = 'Boolean';
-            blockJSON.outputShape =
-                    ScratchBlocksConstants.OUTPUT_SHAPE_HEXAGONAL;
+            blockJSON.outputShape = ScratchBlocksConstants.OUTPUT_SHAPE_HEXAGONAL;
             break;
         case BlockType.HAT:
         case BlockType.EVENT:
-            if (
-                !Object.prototype.hasOwnProperty.call(
-                    blockInfo,
-                    'isEdgeActivated'
-                )
-            ) {
+            if (!Object.prototype.hasOwnProperty.call(blockInfo, 'isEdgeActivated')) {
                 // if absent, this property defaults to true
                 blockInfo.isEdgeActivated = true;
             }
-            blockJSON.outputShape =
-                    ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE;
+            blockJSON.outputShape = ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE;
             blockJSON.nextStatement = null; // null = available connection; undefined = terminal
-            blockJSON.extensions.push('shape_hat');
             break;
         case BlockType.CONDITIONAL:
         case BlockType.LOOP:
             blockInfo.branchCount = blockInfo.branchCount || 1;
-            blockJSON.outputShape =
-                    ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE;
+            blockJSON.outputShape = ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE;
             blockJSON.previousStatement = null; // null = available connection; undefined = hat
             if (!blockInfo.isTerminal) {
                 blockJSON.nextStatement = null; // null = available connection; undefined = terminal
@@ -1233,33 +1156,19 @@ class Runtime extends EventEmitter {
             break;
         }
 
-        const blockText = Array.isArray(blockInfo.text) ?
-            blockInfo.text :
-            [blockInfo.text];
+        const blockText = Array.isArray(blockInfo.text) ? blockInfo.text : [blockInfo.text];
         let inTextNum = 0; // text for the next block "arm" is blockText[inTextNum]
         let inBranchNum = 0; // how many branches have we placed into the JSON so far?
         let outLineNum = 0; // used for scratch-blocks `message${outLineNum}` and `args${outLineNum}`
-        const convertPlaceholders = this._convertPlaceholders.bind(
-            this,
-            context
-        );
+        const convertPlaceholders = this._convertPlaceholders.bind(this, context);
         const extensionMessageContext = this.makeMessageContextForTarget();
 
         // alternate between a block "arm" with text on it and an open slot for a substack
-        while (
-            inTextNum < blockText.length ||
-            inBranchNum < blockInfo.branchCount
-        ) {
+        while (inTextNum < blockText.length || inBranchNum < blockInfo.branchCount) {
             if (inTextNum < blockText.length) {
                 context.outLineNum = outLineNum;
-                const lineText = maybeFormatMessage(
-                    blockText[inTextNum],
-                    extensionMessageContext
-                );
-                const convertedText = lineText.replace(
-                    /\[(.+?)]/g,
-                    convertPlaceholders
-                );
+                const lineText = maybeFormatMessage(blockText[inTextNum], extensionMessageContext);
+                const convertedText = lineText.replace(/\[(.+?)]/g, convertPlaceholders);
                 if (blockJSON[`message${outLineNum}`]) {
                     blockJSON[`message${outLineNum}`] += convertedText;
                 } else {
@@ -1270,14 +1179,10 @@ class Runtime extends EventEmitter {
             }
             if (inBranchNum < blockInfo.branchCount) {
                 blockJSON[`message${outLineNum}`] = '%1';
-                blockJSON[`args${outLineNum}`] = [
-                    {
-                        type: 'input_statement',
-                        name: `SUBSTACK${
-                            inBranchNum > 0 ? inBranchNum + 1 : ''
-                        }`
-                    }
-                ];
+                blockJSON[`args${outLineNum}`] = [{
+                    type: 'input_statement',
+                    name: `SUBSTACK${inBranchNum > 0 ? inBranchNum + 1 : ''}`
+                }];
                 ++inBranchNum;
                 ++outLineNum;
             }
@@ -1285,28 +1190,24 @@ class Runtime extends EventEmitter {
 
         if (blockInfo.blockType === BlockType.REPORTER) {
             if (!blockInfo.disableMonitor && context.inputList.length === 0) {
-                blockJSON.extensions.push('monitor_block');
+                blockJSON.checkboxInFlyout = true;
             }
         } else if (blockInfo.blockType === BlockType.LOOP) {
             // Add icon to the bottom right of a loop block
             blockJSON[`lastDummyAlign${outLineNum}`] = 'RIGHT';
             blockJSON[`message${outLineNum}`] = '%1';
-            blockJSON[`args${outLineNum}`] = [
-                {
-                    type: 'field_image',
-                    src: './static/blocks-media/repeat.svg', // TODO: use a constant or make this configurable?
-                    width: 24,
-                    height: 24,
-                    alt: '*', // TODO remove this since we don't use collapsed blocks in scratch
-                    flip_rtl: true
-                }
-            ];
+            blockJSON[`args${outLineNum}`] = [{
+                type: 'field_image',
+                src: './static/blocks-media/repeat.svg', // TODO: use a constant or make this configurable?
+                width: 24,
+                height: 24,
+                alt: '*', // TODO remove this since we don't use collapsed blocks in scratch
+                flip_rtl: true
+            }];
             ++outLineNum;
         }
 
-        const mutation = blockInfo.isDynamic ?
-            `<mutation blockInfo="${xmlEscape(JSON.stringify(blockInfo))}"/>` :
-            '';
+        const mutation = blockInfo.isDynamic ? `<mutation blockInfo="${xmlEscape(JSON.stringify(blockInfo))}"/>` : '';
         const inputs = context.inputList.join('');
         const blockXML = `<block type="${extendedOpcode}">${mutation}${inputs}</block>`;
 
@@ -1341,22 +1242,13 @@ class Runtime extends EventEmitter {
      */
     _convertButtonForScratchBlocks (buttonInfo) {
         // for now we only support these pre-defined callbacks handled in scratch-blocks
-        const supportedCallbackKeys = [
-            'MAKE_A_LIST',
-            'MAKE_A_PROCEDURE',
-            'MAKE_A_VARIABLE'
-        ];
+        const supportedCallbackKeys = ['MAKE_A_LIST', 'MAKE_A_PROCEDURE', 'MAKE_A_VARIABLE'];
         if (supportedCallbackKeys.indexOf(buttonInfo.func) < 0) {
-            log.error(
-                `Custom button callbacks not supported yet: ${buttonInfo.func}`
-            );
+            log.error(`Custom button callbacks not supported yet: ${buttonInfo.func}`);
         }
 
         const extensionMessageContext = this.makeMessageContextForTarget();
-        const buttonText = maybeFormatMessage(
-            buttonInfo.text,
-            extensionMessageContext
-        );
+        const buttonText = maybeFormatMessage(buttonInfo.text, extensionMessageContext);
         return {
             info: buttonInfo,
             xml: `<button text="${buttonText}" callbackKey="${buttonInfo.func}"></button>`
@@ -1371,9 +1263,7 @@ class Runtime extends EventEmitter {
      */
     _constructInlineImageJson (argInfo) {
         if (!argInfo.dataURI) {
-            log.warn(
-                'Missing data URI in extension block with argument type IMAGE'
-            );
+            log.warn('Missing data URI in extension block with argument type IMAGE');
         }
         return {
             type: 'field_image',
@@ -1406,13 +1296,8 @@ class Runtime extends EventEmitter {
         let argTypeInfo = ArgumentTypeMap[argInfo.type] || {};
 
         // Field type not a standard field type, see if extension has registered custom field type
-        if (
-            !ArgumentTypeMap[argInfo.type] &&
-            context.categoryInfo.customFieldTypes[argInfo.type]
-        ) {
-            argTypeInfo =
-                context.categoryInfo.customFieldTypes[argInfo.type]
-                    .argumentTypeInfo;
+        if (!ArgumentTypeMap[argInfo.type] && context.categoryInfo.customFieldTypes[argInfo.type]) {
+            argTypeInfo = context.categoryInfo.customFieldTypes[argInfo.type].argumentTypeInfo;
         }
 
         // Start to construct the scratch-blocks style JSON defining how the block should be
@@ -1433,14 +1318,8 @@ class Runtime extends EventEmitter {
             };
 
             const defaultValue =
-                typeof argInfo.defaultValue === 'undefined' ?
-                    '' :
-                    xmlEscape(
-                        maybeFormatMessage(
-                            argInfo.defaultValue,
-                            this.makeMessageContextForTarget()
-                        ).toString()
-                    );
+                typeof argInfo.defaultValue === 'undefined' ? '' :
+                    xmlEscape(maybeFormatMessage(argInfo.defaultValue, this.makeMessageContextForTarget()).toString());
 
             if (argTypeInfo.check) {
                 // Right now the only type of 'check' we have specifies that the
@@ -1456,10 +1335,7 @@ class Runtime extends EventEmitter {
                 const menuInfo = context.categoryInfo.menuInfo[argInfo.menu];
                 if (menuInfo.acceptReporters) {
                     valueName = placeholder;
-                    shadowType = this._makeExtensionMenuId(
-                        argInfo.menu,
-                        context.categoryInfo.id
-                    );
+                    shadowType = this._makeExtensionMenuId(argInfo.menu, context.categoryInfo.id);
                     fieldName = argInfo.menu;
                 } else {
                     argJSON.type = 'field_dropdown';
@@ -1470,11 +1346,8 @@ class Runtime extends EventEmitter {
                 }
             } else {
                 valueName = placeholder;
-                shadowType =
-                    (argTypeInfo.shadow && argTypeInfo.shadow.type) || null;
-                fieldName =
-                    (argTypeInfo.shadow && argTypeInfo.shadow.fieldName) ||
-                    null;
+                shadowType = (argTypeInfo.shadow && argTypeInfo.shadow.type) || null;
+                fieldName = (argTypeInfo.shadow && argTypeInfo.shadow.fieldName) || null;
             }
 
             // <value> is the ScratchBlocks name for a block input.
@@ -1491,9 +1364,7 @@ class Runtime extends EventEmitter {
             // A <field> displays a dynamic value: a user-editable text field, a drop-down menu, etc.
             // Leave out the field if defaultValue or fieldName are not specified
             if (defaultValue && fieldName) {
-                context.inputList.push(
-                    `<field name="${fieldName}">${defaultValue}</field>`
-                );
+                context.inputList.push(`<field name="${fieldName}">${defaultValue}</field>`);
             }
 
             if (shadowType) {
@@ -1506,8 +1377,7 @@ class Runtime extends EventEmitter {
         }
 
         const argsName = `args${context.outLineNum}`;
-        const blockArgs = (context.blockJSON[argsName] =
-            context.blockJSON[argsName] || []);
+        const blockArgs = (context.blockJSON[argsName] = context.blockJSON[argsName] || []);
         if (argJSON) blockArgs.push(argJSON);
         const argNum = blockArgs.length;
         context.argsMap[placeholder] = argNum;
@@ -1549,7 +1419,8 @@ class Runtime extends EventEmitter {
             } else if (categoryInfo.blockIconURI) {
                 menuIconURI = categoryInfo.blockIconURI;
             }
-            const menuIconXML = menuIconURI ? `iconURI="${menuIconURI}"` : '';
+            const menuIconXML = menuIconURI ?
+                `iconURI="${menuIconURI}"` : '';
 
             let statusButtonXML = '';
             if (categoryInfo.showStatusButton) {
@@ -1558,11 +1429,8 @@ class Runtime extends EventEmitter {
 
             return {
                 id: categoryInfo.id,
-                xml: `<category name="${name}" toolboxitemid="${
-                    categoryInfo.id
-                }" ${statusButtonXML} ${colorXML} ${menuIconXML}>${paletteBlocks
-                    .map(block => block.xml)
-                    .join('')}</category>`
+                xml: `<category name="${name}" id="${categoryInfo.id}" ${statusButtonXML} ${colorXML} ${menuIconXML}>${
+                    paletteBlocks.map(block => block.xml).join('')}</category>`
             };
         });
     }
@@ -1572,12 +1440,7 @@ class Runtime extends EventEmitter {
      */
     getBlocksJSON () {
         return this._blockInfo.reduce(
-            (result, categoryInfo) =>
-                result.concat(
-                    categoryInfo.blocks.map(blockInfo => blockInfo.json)
-                ),
-            []
-        );
+            (result, categoryInfo) => result.concat(categoryInfo.blocks.map(blockInfo => blockInfo.json)), []);
     }
 
     /**
@@ -1586,8 +1449,7 @@ class Runtime extends EventEmitter {
     _initScratchLink () {
         // Check that we're actually in a real browser, not Node.js or JSDOM, and we have a valid-looking origin.
         // note that `if (self?....)` will throw if `self` is undefined, so check for that first!
-        if (
-            typeof self !== 'undefined' &&
+        if (typeof self !== 'undefined' &&
             typeof document !== 'undefined' &&
             document.getElementById &&
             self.origin &&
@@ -1600,9 +1462,7 @@ class Runtime extends EventEmitter {
             )
         ) {
             // Create a script tag for the Scratch Link browser extension, unless one already exists
-            const scriptElement = document.getElementById(
-                'scratch-link-extension-script'
-            );
+            const scriptElement = document.getElementById('scratch-link-extension-script');
             if (!scriptElement) {
                 const script = document.createElement('script');
                 script.id = 'scratch-link-extension-script';
@@ -1621,8 +1481,7 @@ class Runtime extends EventEmitter {
      * @returns {ScratchLinkSocket} The scratch link socket.
      */
     getScratchLinkSocket (type) {
-        const factory =
-            this._linkSocketFactory || this._defaultScratchLinkSocketFactory;
+        const factory = this._linkSocketFactory || this._defaultScratchLinkSocketFactory;
         return factory(type);
     }
 
@@ -1642,15 +1501,10 @@ class Runtime extends EventEmitter {
      */
     _defaultScratchLinkSocketFactory (type) {
         const Scratch = self.Scratch;
-        const ScratchLinkSafariSocket =
-            Scratch && Scratch.ScratchLinkSafariSocket;
+        const ScratchLinkSafariSocket = Scratch && Scratch.ScratchLinkSafariSocket;
         // detect this every time in case the user turns on the extension after loading the page
-        const useSafariSocket =
-            ScratchLinkSafariSocket &&
-            ScratchLinkSafariSocket.isSafariHelperCompatible();
-        return useSafariSocket ?
-            new ScratchLinkSafariSocket(type) :
-            new ScratchLinkWebSocket(type);
+        const useSafariSocket = ScratchLinkSafariSocket && ScratchLinkSafariSocket.isSafariHelperCompatible();
+        return useSafariSocket ? new ScratchLinkSafariSocket(type) : new ScratchLinkWebSocket(type);
     }
 
     /**
@@ -1739,12 +1593,11 @@ class Runtime extends EventEmitter {
      * @return {boolean} True if the op is known to be a edge-activated hat.
      */
     getIsEdgeActivatedHat (opcode) {
-        return (
-            Object.prototype.hasOwnProperty.call(this._hats, opcode) &&
-            this._hats[opcode].edgeActivated
-        );
+        return Object.prototype.hasOwnProperty.call(this._hats, opcode) &&
+            this._hats[opcode].edgeActivated;
     }
 
+
     /**
      * Attach the audio engine
      * @param {!AudioEngine} audioEngine The audio engine to attach
@@ -1848,10 +1701,10 @@ class Runtime extends EventEmitter {
      */
     isActiveThread (thread) {
         return (
-            thread.stack.length > 0 &&
-            thread.status !== Thread.STATUS_DONE &&
-            this.threads.indexOf(thread) > -1
-        );
+            (
+                thread.stack.length > 0 &&
+                thread.status !== Thread.STATUS_DONE) &&
+            this.threads.indexOf(thread) > -1);
     }
 
     /**
@@ -1876,29 +1729,18 @@ class Runtime extends EventEmitter {
      *     determines whether we show a visual report when turning on the script.
      */
     toggleScript (topBlockId, opts) {
-        opts = Object.assign(
-            {
-                target: this._editingTarget,
-                stackClick: false
-            },
-            opts
-        );
+        opts = Object.assign({
+            target: this._editingTarget,
+            stackClick: false
+        }, opts);
         // Remove any existing thread.
         for (let i = 0; i < this.threads.length; i++) {
             // Toggling a script that's already running turns it off
-            if (
-                this.threads[i].topBlock === topBlockId &&
-                this.threads[i].status !== Thread.STATUS_DONE
-            ) {
+            if (this.threads[i].topBlock === topBlockId && this.threads[i].status !== Thread.STATUS_DONE) {
                 const blockContainer = opts.target.blocks;
-                const opcode = blockContainer.getOpcode(
-                    blockContainer.getBlock(topBlockId)
-                );
+                const opcode = blockContainer.getOpcode(blockContainer.getBlock(topBlockId));
 
-                if (
-                    this.getIsEdgeActivatedHat(opcode) &&
-                    this.threads[i].stackClick !== opts.stackClick
-                ) {
+                if (this.getIsEdgeActivatedHat(opcode) && this.threads[i].stackClick !== opts.stackClick) {
                     // Allow edge activated hat thread stack click to coexist with
                     // edge activated hat thread that runs every frame
                     continue;
@@ -1920,11 +1762,8 @@ class Runtime extends EventEmitter {
         if (!optTarget) optTarget = this._editingTarget;
         for (let i = 0; i < this.threads.length; i++) {
             // Don't re-add the script if it's already running
-            if (
-                this.threads[i].topBlock === topBlockId &&
-                this.threads[i].status !== Thread.STATUS_DONE &&
-                this.threads[i].updateMonitor
-            ) {
+            if (this.threads[i].topBlock === topBlockId && this.threads[i].status !== Thread.STATUS_DONE &&
+                    this.threads[i].updateMonitor) {
                 return;
             }
         }
@@ -1962,10 +1801,7 @@ class Runtime extends EventEmitter {
         }
         for (let t = targets.length - 1; t >= 0; t--) {
             const target = targets[t];
-            const scripts = BlocksRuntimeCache.getScripts(
-                target.blocks,
-                opcode
-            );
+            const scripts = BlocksRuntimeCache.getScripts(target.blocks, opcode);
             for (let j = 0; j < scripts.length; j++) {
                 f(scripts[j], target);
             }
@@ -1979,13 +1815,9 @@ class Runtime extends EventEmitter {
      * @param {Target=} optTarget Optionally, a target to restrict to.
      * @return {Array.<Thread>} List of threads started by this function.
      */
-    startHats (requestedHatOpcode, optMatchFields, optTarget) {
-        if (
-            !Object.prototype.hasOwnProperty.call(
-                this._hats,
-                requestedHatOpcode
-            )
-        ) {
+    startHats (requestedHatOpcode,
+        optMatchFields, optTarget) {
+        if (!Object.prototype.hasOwnProperty.call(this._hats, requestedHatOpcode)) {
             // No known hat with this opcode.
             return;
         }
@@ -1995,71 +1827,58 @@ class Runtime extends EventEmitter {
         const hatMeta = instance._hats[requestedHatOpcode];
 
         for (const opts in optMatchFields) {
-            if (!Object.prototype.hasOwnProperty.call(optMatchFields, opts)) {
-                continue;
-            }
+            if (!Object.prototype.hasOwnProperty.call(optMatchFields, opts)) continue;
             optMatchFields[opts] = optMatchFields[opts].toUpperCase();
         }
 
         // Consider all scripts, looking for hats with opcode `requestedHatOpcode`.
-        this.allScriptsByOpcodeDo(
-            requestedHatOpcode,
-            (script, target) => {
-                const {blockId: topBlockId, fieldsOfInputs: hatFields} =
-                    script;
-
-                // Match any requested fields.
-                // For example: ensures that broadcasts match.
-                // This needs to happen before the block is evaluated
-                // (i.e., before the predicate can be run) because "broadcast and wait"
-                // needs to have a precise collection of started threads.
-                for (const matchField in optMatchFields) {
-                    if (
-                        hatFields[matchField].value !==
-                        optMatchFields[matchField]
-                    ) {
-                        // Field mismatch.
-                        return;
-                    }
+        this.allScriptsByOpcodeDo(requestedHatOpcode, (script, target) => {
+            const {
+                blockId: topBlockId,
+                fieldsOfInputs: hatFields
+            } = script;
+
+            // Match any requested fields.
+            // For example: ensures that broadcasts match.
+            // This needs to happen before the block is evaluated
+            // (i.e., before the predicate can be run) because "broadcast and wait"
+            // needs to have a precise collection of started threads.
+            for (const matchField in optMatchFields) {
+                if (hatFields[matchField].value !== optMatchFields[matchField]) {
+                    // Field mismatch.
+                    return;
                 }
+            }
 
-                if (hatMeta.restartExistingThreads) {
-                    // If `restartExistingThreads` is true, we should stop
-                    // any existing threads starting with the top block.
-                    for (let i = 0; i < this.threads.length; i++) {
-                        if (
-                            this.threads[i].target === target &&
-                            this.threads[i].topBlock === topBlockId &&
-                            // stack click threads and hat threads can coexist
-                            !this.threads[i].stackClick
-                        ) {
-                            newThreads.push(
-                                this._restartThread(this.threads[i])
-                            );
-                            return;
-                        }
+            if (hatMeta.restartExistingThreads) {
+                // If `restartExistingThreads` is true, we should stop
+                // any existing threads starting with the top block.
+                for (let i = 0; i < this.threads.length; i++) {
+                    if (this.threads[i].target === target &&
+                        this.threads[i].topBlock === topBlockId &&
+                        // stack click threads and hat threads can coexist
+                        !this.threads[i].stackClick) {
+                        newThreads.push(this._restartThread(this.threads[i]));
+                        return;
                     }
-                } else {
-                    // If `restartExistingThreads` is false, we should
-                    // give up if any threads with the top block are running.
-                    for (let j = 0; j < this.threads.length; j++) {
-                        if (
-                            this.threads[j].target === target &&
-                            this.threads[j].topBlock === topBlockId &&
-                            // stack click threads and hat threads can coexist
-                            !this.threads[j].stackClick &&
-                            this.threads[j].status !== Thread.STATUS_DONE
-                        ) {
-                            // Some thread is already running.
-                            return;
-                        }
+                }
+            } else {
+                // If `restartExistingThreads` is false, we should
+                // give up if any threads with the top block are running.
+                for (let j = 0; j < this.threads.length; j++) {
+                    if (this.threads[j].target === target &&
+                        this.threads[j].topBlock === topBlockId &&
+                        // stack click threads and hat threads can coexist
+                        !this.threads[j].stackClick &&
+                        this.threads[j].status !== Thread.STATUS_DONE) {
+                        // Some thread is already running.
+                        return;
                     }
                 }
-                // Start the thread with this top block.
-                newThreads.push(this._pushThread(topBlockId, target));
-            },
-            optTarget
-        );
+            }
+            // Start the thread with this top block.
+            newThreads.push(this._pushThread(topBlockId, target));
+        }, optTarget);
         // For compatibility with Scratch 2, edge triggered hats need to be processed before
         // threads are stepped. See ScratchRuntime.as for original implementation
         newThreads.forEach(thread => {
@@ -2069,6 +1888,7 @@ class Runtime extends EventEmitter {
         return newThreads;
     }
 
+
     /**
      * Dispose all targets. Return to clean state.
      */
@@ -2100,10 +1920,8 @@ class Runtime extends EventEmitter {
         const newCloudDataManager = cloudDataManager();
         this.hasCloudData = newCloudDataManager.hasCloudVariables;
         this.canAddCloudVariable = newCloudDataManager.canAddCloudVariable;
-        this.addCloudVariable =
-            this._initializeAddCloudVariable(newCloudDataManager);
-        this.removeCloudVariable =
-            this._initializeRemoveCloudVariable(newCloudDataManager);
+        this.addCloudVariable = this._initializeAddCloudVariable(newCloudDataManager);
+        this.removeCloudVariable = this._initializeRemoveCloudVariable(newCloudDataManager);
     }
 
     /**
@@ -2135,10 +1953,7 @@ class Runtime extends EventEmitter {
             newIndex = this.executableTargets.length;
         }
         if (newIndex <= 0) {
-            if (
-                this.executableTargets.length > 0 &&
-                this.executableTargets[0].isStage
-            ) {
+            if (this.executableTargets.length > 0 && this.executableTargets[0].isStage) {
                 newIndex = 1;
             } else {
                 newIndex = 0;
@@ -2218,10 +2033,7 @@ class Runtime extends EventEmitter {
         }
 
         const newRunId = uuid.v1();
-        this.storage.scratchFetch.setMetadata(
-            this.storage.scratchFetch.RequestMetadata.RunId,
-            newRunId
-        );
+        this.storage.scratchFetch.setMetadata(this.storage.scratchFetch.RequestMetadata.RunId, newRunId);
     }
 
     /**
@@ -2250,13 +2062,8 @@ class Runtime extends EventEmitter {
         const newTargets = [];
         for (let i = 0; i < this.targets.length; i++) {
             this.targets[i].onStopAll();
-            if (
-                Object.prototype.hasOwnProperty.call(
-                    this.targets[i],
-                    'isOriginal'
-                ) &&
-                !this.targets[i].isOriginal
-            ) {
+            if (Object.prototype.hasOwnProperty.call(this.targets[i], 'isOriginal') &&
+                !this.targets[i].isOriginal) {
                 this.targets[i].dispose();
             } else {
                 newTargets.push(this.targets[i]);
@@ -2290,9 +2097,7 @@ class Runtime extends EventEmitter {
 
         // Find all edge-activated hats, and add them to threads to be evaluated.
         for (const hatType in this._hats) {
-            if (!Object.prototype.hasOwnProperty.call(this._hats, hatType)) {
-                continue;
-            }
+            if (!Object.prototype.hasOwnProperty.call(this._hats, hatType)) continue;
             const hat = this._hats[hatType];
             if (hat.edgeActivated) {
                 this.startHats(hatType);
@@ -2302,9 +2107,7 @@ class Runtime extends EventEmitter {
         this._pushMonitors();
         if (this.profiler !== null) {
             if (stepThreadsProfilerId === -1) {
-                stepThreadsProfilerId = this.profiler.idByName(
-                    'Sequencer.stepThreads'
-                );
+                stepThreadsProfilerId = this.profiler.idByName('Sequencer.stepThreads');
             }
             this.profiler.start(stepThreadsProfilerId);
         }
@@ -2316,10 +2119,8 @@ class Runtime extends EventEmitter {
         // Add done threads so that even if a thread finishes within 1 frame, the green
         // flag will still indicate that a script ran.
         this._emitProjectRunStatus(
-            this.threads.length +
-                doneThreads.length -
-                this._getMonitorThreadCount([...this.threads, ...doneThreads])
-        );
+            this.threads.length + doneThreads.length -
+                this._getMonitorThreadCount([...this.threads, ...doneThreads]));
         // Store threads that completed this iteration for testing and other
         // internal purposes.
         this._lastStepDoneThreads = doneThreads;
@@ -2327,8 +2128,7 @@ class Runtime extends EventEmitter {
             // @todo: Only render when this.redrawRequested or clones rendered.
             if (this.profiler !== null) {
                 if (rendererDrawProfilerId === -1) {
-                    rendererDrawProfilerId =
-                        this.profiler.idByName('RenderWebGL.draw');
+                    rendererDrawProfilerId = this.profiler.idByName('RenderWebGL.draw');
                 }
                 this.profiler.start(rendererDrawProfilerId);
             }
@@ -2339,10 +2139,7 @@ class Runtime extends EventEmitter {
         }
 
         if (this._refreshTargets) {
-            this.emit(
-                Runtime.TARGETS_UPDATE,
-                false /* Don't emit project changed */
-            );
+            this.emit(Runtime.TARGETS_UPDATE, false /* Don't emit project changed */);
             this._refreshTargets = false;
         }
 
@@ -2429,12 +2226,12 @@ class Runtime extends EventEmitter {
             if (target === this._editingTarget) {
                 const blockForThread = thread.blockGlowInFrame;
                 if (thread.requestScriptGlowInFrame || thread.stackClick) {
-                    let script =
-                        target.blocks.getTopLevelScript(blockForThread);
+                    let script = target.blocks.getTopLevelScript(blockForThread);
                     if (!script) {
                         // Attempt to find in flyout blocks.
-                        script =
-                            this.flyoutBlocks.getTopLevelScript(blockForThread);
+                        script = this.flyoutBlocks.getTopLevelScript(
+                            blockForThread
+                        );
                     }
                     if (script) {
                         requestedGlowsThisFrame.push(script);
@@ -2552,8 +2349,7 @@ class Runtime extends EventEmitter {
      */
     requestAddMonitor (monitor) {
         const id = monitor.get('id');
-        if (!this.requestUpdateMonitor(monitor)) {
-            // update monitor if it exists in the state
+        if (!this.requestUpdateMonitor(monitor)) { // update monitor if it exists in the state
             // if the monitor did not exist in the state, add it
             this._monitorState = this._monitorState.set(id, monitor);
         }
@@ -2571,15 +2367,12 @@ class Runtime extends EventEmitter {
         if (this._monitorState.has(id)) {
             this._monitorState =
                 // Use mergeWith here to prevent undefined values from overwriting existing ones
-                this._monitorState.set(
-                    id,
-                    this._monitorState.get(id).mergeWith((prev, next) => {
-                        if (typeof next === 'undefined' || next === null) {
-                            return prev;
-                        }
-                        return next;
-                    }, monitor)
-                );
+                this._monitorState.set(id, this._monitorState.get(id).mergeWith((prev, next) => {
+                    if (typeof next === 'undefined' || next === null) {
+                        return prev;
+                    }
+                    return next;
+                }, monitor));
             return true;
         }
         return false;
@@ -2600,12 +2393,10 @@ class Runtime extends EventEmitter {
      * @return {boolean} true if monitor exists and was updated, false otherwise
      */
     requestHideMonitor (monitorId) {
-        return this.requestUpdateMonitor(
-            new Map([
-                ['id', monitorId],
-                ['visible', false]
-            ])
-        );
+        return this.requestUpdateMonitor(new Map([
+            ['id', monitorId],
+            ['visible', false]
+        ]));
     }
 
     /**
@@ -2615,12 +2406,10 @@ class Runtime extends EventEmitter {
      * @return {boolean} true if monitor exists and was updated, false otherwise
      */
     requestShowMonitor (monitorId) {
-        return this.requestUpdateMonitor(
-            new Map([
-                ['id', monitorId],
-                ['visible', true]
-            ])
-        );
+        return this.requestUpdateMonitor(new Map([
+            ['id', monitorId],
+            ['visible', true]
+        ]));
     }
 
     /**
@@ -2629,9 +2418,7 @@ class Runtime extends EventEmitter {
      * @param {!string} targetId Remove all monitors with given target ID.
      */
     requestRemoveMonitorByTargetId (targetId) {
-        this._monitorState = this._monitorState.filterNot(
-            value => value.targetId === targetId
-        );
+        this._monitorState = this._monitorState.filterNot(value => value.targetId === targetId);
     }
 
     /**
@@ -2751,10 +2538,7 @@ class Runtime extends EventEmitter {
     getAllVarNamesOfType (varType) {
         let varNames = [];
         for (const target of this.targets) {
-            const targetVarNames = target.getAllVariableNamesInScopeByType(
-                varType,
-                true
-            );
+            const targetVarNames = target.getAllVariableNamesInScopeByType(varType, true);
             varNames = varNames.concat(targetVarNames);
         }
         return varNames;
@@ -2795,8 +2579,7 @@ class Runtime extends EventEmitter {
      * @return {Variable} The new variable that was created.
      */
     createNewGlobalVariable (variableName, optVarId, optVarType) {
-        const varType =
-            typeof optVarType === 'string' ? optVarType : Variable.SCALAR_TYPE;
+        const varType = (typeof optVarType === 'string') ? optVarType : Variable.SCALAR_TYPE;
         const allVariableNames = this.getAllVarNamesOfType(varType);
         const newName = StringUtil.unusedName(variableName, allVariableNames);
         const variable = new Variable(optVarId || uid(), newName, varType);