From 2adf326c230589800880faa9599eca2ecc94d283 Mon Sep 17 00:00:00 2001
From: alschmiedt <aschmiedt@google.com>
Date: Thu, 6 Jan 2022 11:28:27 -0800
Subject: [PATCH] fix: update the playground to load compressed when hosted
 (#5835)

---
 tests/multi_playground.html             |   23 +-
 tests/playground.html                   |   33 +-
 tests/playgrounds/compressed.html       | 1211 -----------------------
 tests/playgrounds/load_all.js           |   53 +
 tests/playgrounds/multi_compressed.html |  470 ---------
 5 files changed, 80 insertions(+), 1710 deletions(-)
 delete mode 100644 tests/playgrounds/compressed.html
 create mode 100644 tests/playgrounds/load_all.js
 delete mode 100644 tests/playgrounds/multi_compressed.html
diff --git a/tests/multi_playground.html b/tests/multi_playground.html
index 0cabadb6d..da48e2c85 100644
--- a/tests/multi_playground.html
+++ b/tests/multi_playground.html
@@ -3,15 +3,16 @@
 <head>
 <meta charset="utf-8">
 <title>Multi-toolbox Playground</title>
-<script src="../blockly_uncompressed.js"></script>
-<script src="../msg/messages.js"></script>
 
-<script>
-// Custom requires for the playground.
-goog.require('Blockly.blocks.all');
-</script>
+<!-- This script loads uncompressed when on localhost and loads compressed when it is being hosted.
+     Please add any other dependencies to playgrounds/load_all.js.-->
+<script src="playgrounds/load_all.js"></script>
+
 <script>
 'use strict';
+
+const IS_UNCOMPRESSED = !!document.getElementById('blockly-uncompressed-script');
+
 var options = {
   comments: true,
   collapse: true,
@@ -37,6 +38,7 @@ var options = {
 };
 
 function start() {
+  setBackgroundColour();
   var match = location.search.match(/toolbox=([^&]+)/);
   var toolbox =
       document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
@@ -63,6 +65,15 @@ function startBlocklyInstance(suffix, rtl, horizontalLayout, position,
   options.toolboxPosition = position;
   Blockly.inject('blocklyDiv' + suffix, options);
 }
+
+function setBackgroundColour() {
+  // Set background colour to differentiate between compressed and uncompressed mode.
+  if (IS_UNCOMPRESSED) {
+    document.body.style.backgroundColor = '#d6d6ff';  // Familiar lilac.
+  } else {
+    document.body.style.backgroundColor = '#60fcfc';  // Unfamiliar blue.
+  }
+}
 </script>
 
 <style>
diff --git a/tests/playground.html b/tests/playground.html
index 8e422f1e4..171c54d31 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -3,24 +3,14 @@
 <head>
 <meta charset="utf-8">
 <title>Blockly Playground</title>
-<script src="../blockly_uncompressed.js"></script>
-<script src="../msg/messages.js"></script>
-<script src="themes/test_themes.js"></script>
-<script src="./playgrounds/screenshot.js"></script>
-<script src="../node_modules/@blockly/block-test/dist/index.js"></script>
 
-<script>
-// Custom requires for the playground.
-goog.require('Blockly.Dart.all');
-goog.require('Blockly.JavaScript.all');
-goog.require('Blockly.Lua.all');
-goog.require('Blockly.PHP.all');
-goog.require('Blockly.Python.all');
-goog.require('Blockly.WorkspaceCommentSvg');
-goog.require('Blockly.blocks.all');
-</script>
+  <!-- This script loads uncompressed when on localhost and loads compressed when it is being hosted.
+       Please add any other dependencies to playgrounds/load_all.js.-->
+<script src="playgrounds/load_all.js"></script>
 <script>
 'use strict';
+
+const IS_UNCOMPRESSED = !!document.getElementById('blockly-uncompressed-script');
 var workspace = null;
 
 function start() {
@@ -97,14 +87,11 @@ function start() {
 }
 
 function setBackgroundColour() {
-  // Set background colour to differentiate file: vs. localhost
-  // vs. server copy.
-  if (location.protocol === 'file:') {
-    document.body.style.backgroundColor = '#89A203';  // Unpleasant green.
-  } else if (location.hostname  === 'localhost' ||
-      location.hostname === '127.0.0.1' ||
-      location.hostname === '[::1]') {
-    document.body.style.backgroundColor = '#d6d6ff';  // Familliar lilac.
+  // Set background colour to differentiate between compressed and uncompressed mode.
+  if (IS_UNCOMPRESSED) {
+    document.body.style.backgroundColor = '#d6d6ff';  // Familiar lilac.
+  } else {
+    document.body.style.backgroundColor = '#60fcfc';  // Unfamiliar blue.
   }
 }
 
diff --git a/tests/playgrounds/compressed.html b/tests/playgrounds/compressed.html
deleted file mode 100644
index f2dd06be4..000000000
--- a/tests/playgrounds/compressed.html
+++ /dev/null
@@ -1,1211 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>Compressed Blockly Playground</title>
-<script src="../../blockly_compressed.js"></script>
-<script src="../../blocks_compressed.js"></script>
-<script src="../../dart_compressed.js"></script>
-<script src="../../javascript_compressed.js"></script>
-<script src="../../lua_compressed.js"></script>
-<script src="../../php_compressed.js"></script>
-<script src="../../python_compressed.js"></script>
-<script src="../../msg/messages.js"></script>
-<script src="../playgrounds/screenshot.js"></script>
-<script src="../../node_modules/@blockly/block-test/dist/index.js"></script>
-
-<script>
-'use strict';
-var workspace = null;
-
-function start() {
-  setBackgroundColour();
-
-  // Parse the URL arguments.
-  var match = location.search.match(/dir=([^&]+)/);
-  var rtl = match && match[1] == 'rtl';
-  document.forms.options.elements.dir.selectedIndex = Number(rtl);
-  var toolbox = getToolboxElement();
-  setToolboxDropdown();
-  match = location.search.match(/side=([^&]+)/);
-  var autoimport = !!location.search.match(/autoimport=([^&]+)/);
-  // Create main workspace.
-  workspace = Blockly.inject('blocklyDiv',
-      {
-        comments: true,
-        collapse: true,
-        disable: true,
-        grid:
-          {
-            spacing: 25,
-            length: 3,
-            colour: '#ccc',
-            snap: true
-          },
-        horizontalLayout: false,
-        maxBlocks: Infinity,
-        maxInstances: {'test_basic_limit_instances': 3},
-        maxTrashcanContents: 256,
-        media: '../../media/',
-        oneBasedIndex: true,
-        readOnly: false,
-        rtl: rtl,
-        move: {
-          scrollbars: true,
-          drag: true,
-          wheel: false,
-        },
-        toolbox: toolbox,
-        toolboxPosition: 'start',
-        renderer: 'geras',
-        zoom:
-          {
-            controls: true,
-            wheel: true,
-            startScale: 1.0,
-            maxScale: 4,
-            minScale: 0.25,
-            scaleSpeed: 1.1
-          }
-      });
-  initToolbox(workspace);
-  workspace.configureContextMenu = configureContextMenu;
-  // Restore previously displayed text.
-  if (sessionStorage) {
-    var text = sessionStorage.getItem('textarea');
-    if (text) {
-      document.getElementById('importExport').value = text;
-    }
-    // Restore event logging state.
-    var logMainEventsState = sessionStorage.getItem('logEvents');
-    logEvents(Boolean(Number(logMainEventsState)));
-    var logToolboxFlyoutEventsState = sessionStorage.getItem('logFlyoutEvents');
-    logFlyoutEvents(Boolean(Number(logToolboxFlyoutEventsState)));
-  } else {
-    // MSIE 11 does not support sessionStorage on file:// URLs.
-    logEvents(false);
-  }
-  taChange();
-  if (autoimport) {
-    load();
-  }
-}
-
-function setBackgroundColour() {
-  // Set background colour to differentiate file: vs. localhost
-  // vs. server copy.
-  if (location.protocol === 'file:') {
-    document.body.style.backgroundColor = '#89A203';  // Unpleasant green.
-  } else if (location.hostname  === 'localhost' ||
-      location.hostname === '127.0.0.1' ||
-      location.hostname === '[::1]') {
-    document.body.style.backgroundColor = '#d6d6ff';  // Familliar lilac.
-  }
-}
-
-function getToolboxSuffix() {
-  var match = location.search.match(/toolbox=([^&]+)/);
-  // Default to the basic toolbox with categories and untyped variables,
-  // but override that if the toolbox type is set in the URL.
-  return (match ? match[1] : 'categories');
-}
-
-function getToolboxElement() {
-  var toolboxSuffix = getToolboxSuffix();
-  if (toolboxSuffix == 'test-blocks') {
-    if (typeof window.toolboxTestBlocks !== 'undefined') {
-      return toolboxTestBlocks;
-    } else {
-      alert('You need to run \'npm install\' in order to use the test blocks.');
-      toolboxSuffix = 'categories';
-    }
-  }
-  // The three possible values are: "simple", "categories",
-  // "categories-typed-variables".
-  return document.getElementById('toolbox-' + toolboxSuffix);
-}
-
-function setToolboxDropdown() {
-  var toolboxNames = [
-      'toolbox-categories',
-      'toolbox-categories-typed-variables',
-      'toolbox-simple',
-      'toolbox-test-blocks'
-  ];
-  var toolboxSuffix = getToolboxSuffix();
-  document.forms.options.elements.toolbox.selectedIndex =
-      toolboxNames.indexOf('toolbox-' + toolboxSuffix);
-}
-
-function initToolbox(workspace) {
-  var toolboxSuffix = getToolboxSuffix();
-  if (toolboxSuffix == 'test-blocks' &&
-      typeof window.toolboxTestBlocksInit !== 'undefined') {
-    toolboxTestBlocksInit(workspace);
-  }
-}
-
-function saveXml() {
-  var output = document.getElementById('importExport');
-  var xml = Blockly.Xml.workspaceToDom(workspace);
-  output.value = Blockly.Xml.domToPrettyText(xml);
-  output.focus();
-  output.select();
-  taChange();
-}
-
-function saveJson() {
-  var output = document.getElementById('importExport');
-  var state = Blockly.serialization.workspaces.save(workspace);
-  output.value = JSON.stringify(state, null, 2);
-  output.focus();
-  output.select();
-  taChange();
-}
-
-function load() {
-  var input = document.getElementById('importExport');
-  if (!input.value) {
-    return;
-  }
-  var valid = saveIsValid(input.value);
-  if (valid.json) {
-    var state = JSON.parse(input.value);
-    Blockly.serialization.workspaces.load(state, workspace);
-  } else if (valid.xml) {
-    var xml = Blockly.Xml.textToDom(input.value);
-    Blockly.Xml.domToWorkspace(xml, workspace);
-  }
-  taChange();
-}
-
-function toCode(lang) {
-  var output = document.getElementById('importExport');
-  output.value = Blockly[lang].workspaceToCode(workspace);
-  taChange();
-}
-
-// Disable the "Load" button if the save state is invalid.
-// Preserve text between page reloads.
-function taChange() {
-  var textarea = document.getElementById('importExport');
-  if (sessionStorage) {
-    sessionStorage.setItem('textarea', textarea.value);
-  }
-  var valid = saveIsValid(textarea.value);
-  document.getElementById('import').disabled = !valid.json && !valid.xml;
-}
-
-function saveIsValid(save) {
-  var validJson = true;
-  try {
-    JSON.parse(save);
-  } catch (e) {
-    validJson = false;
-  }
-  var validXml = true
-  try {
-    Blockly.Xml.textToDom(save);
-  } catch (e) {
-    validXml = false;
-  }
-  return {
-    json: validJson,
-    xml: validXml
-  }
-}
-
-function logEvents(state) {
-  var checkbox = document.getElementById('logCheck');
-  checkbox.checked = state;
-  if (sessionStorage) {
-    sessionStorage.setItem('logEvents', Number(state));
-  }
-  if (state) {
-    workspace.addChangeListener(logger);
-  } else {
-    workspace.removeChangeListener(logger);
-  }
-}
-
-function logFlyoutEvents(state) {
-  var checkbox = document.getElementById('logFlyoutCheck');
-  checkbox.checked = state;
-  if (sessionStorage) {
-    sessionStorage.setItem('logFlyoutEvents', Number(state));
-  }
-  var flyoutWorkspace = workspace.getFlyout().getWorkspace();
-  if (state) {
-    flyoutWorkspace.addChangeListener(logger);
-  } else {
-    flyoutWorkspace.removeChangeListener(logger);
-  }
-}
-
-function configureContextMenu(menuOptions, e) {
-  var screenshotOption = {
-    text: 'Download Screenshot',
-    enabled: workspace.getTopBlocks().length,
-    callback: function() {
-      Blockly.downloadScreenshot(workspace);
-    }
-  };
-  menuOptions.push(screenshotOption);
-
-  // Adds a default-sized workspace comment to the workspace.
-  menuOptions.push(Blockly.ContextMenu.workspaceCommentOption(workspace, e));
-}
-
-function logger(e) {
-  console.log(e);
-}
-
-function airstrike(n) {
-  var prototypes = [];
-  var toolbox = getToolboxElement();
-  var blocks = toolbox.getElementsByTagName('block');
-  for (var i = 0, block; block = blocks[i]; i++) {
-    prototypes.push(block.getAttribute('type'));
-  }
-  for (var i = 0; i < n; i++) {
-    var prototype = prototypes[Math.floor(Math.random() * prototypes.length)];
-    var block = workspace.newBlock(prototype);
-    block.initSvg();
-    block.getSvgRoot().setAttribute('transform', 'translate(' +
-        Math.round(Math.random() * 450 + 40) + ', ' +
-        Math.round(Math.random() * 600 + 40) + ')');
-    block.render();
-  }
-}
-
-function spaghetti(n) {
-  var xml = spaghettiXml;
-  for(var i = 0; i < n; i++) {
-    xml = xml.replace(/(<(statement|next)( name="DO0")?>)<\//g,
-        '$1' + spaghettiXml + '</');
-  }
-  xml = '<xml xmlns="https://developers.google.com/blockly/xml">' + xml + '</xml>';
-  var dom = Blockly.Xml.textToDom(xml);
-  console.time('Spaghetti domToWorkspace');
-  Blockly.Xml.domToWorkspace(dom, workspace);
-  console.timeEnd('Spaghetti domToWorkspace');
-}
-var spaghettiXml = [
-  '  <block type="controls_if">',
-  '    <value name="IF0">',
-  '      <block type="logic_compare">',
-  '        <field name="OP">EQ</field>',
-  '        <value name="A">',
-  '          <block type="math_arithmetic">',
-  '            <field name="OP">MULTIPLY</field>',
-  '            <value name="A">',
-  '              <block type="math_number">',
-  '                <field name="NUM">6</field>',
-  '              </block>',
-  '            </value>',
-  '            <value name="B">',
-  '              <block type="math_number">',
-  '                <field name="NUM">7</field>',
-  '              </block>',
-  '            </value>',
-  '          </block>',
-  '        </value>',
-  '        <value name="B">',
-  '          <block type="math_number">',
-  '            <field name="NUM">42</field>',
-  '          </block>',
-  '        </value>',
-  '      </block>',
-  '    </value>',
-  '    <statement name="DO0"></statement>',
-  '    <next></next>',
-  '  </block>'].join('\n');
-
-  function jsoSpaghetti(n) {
-    var str = spaghettiJs;
-    for (var i = 0; i < n; i++) {
-      str = str.replace(/{}/g, `{"block":${spaghettiJs}}`);
-    }
-    var obj = {
-      'blocks': {
-        'blocks': [
-          JSON.parse(str)
-        ]
-      }
-    };
-    console.time('Spaghetti serialization');
-    Blockly.serialization.workspaces.load(obj, workspace);
-    console.timeEnd('Spaghetti serialization');
-  }
-  var spaghettiJs = JSON.stringify({
-    'type': 'controls_if',
-    'inputs': {
-      'IF0': {
-        'block': {
-          'type': 'logic_compare',
-          'fields': {
-            'OP': 'EQ',
-          },
-          'inputs': {
-            'A': {
-              'block': {
-                'type': 'math_arithmetic',
-                'fields': {
-                  'OP': 'MULTIPLY',
-                },
-                'inputs': {
-                  'A': {
-                    'block': {
-                      'type': 'math_number',
-                      'fields': {
-                        'NUM': 6
-                      }
-                    }
-                  },
-                  'B': {
-                    'block': {
-                      'type': 'math_number',
-                      'fields': {
-                        'NUM': 7
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            'B': {
-              'block': {
-                'type': 'math_number',
-                'fields': {
-                  'NUM': 42
-                }
-              }
-            }
-          }
-        }
-      },
-      'DO0': { }
-    },
-    'next': { }
-  });
-
-</script>
-
-<style>
-  html, body {
-    height: 100%;
-  }
-  body {
-    background-color: #fff;
-    font-family: sans-serif;
-    overflow: hidden;
-  }
-  h1 {
-    font-weight: normal;
-    font-size: 140%;
-  }
-  #blocklyDiv {
-    float: right;
-    height: 95%;
-    width: 70%;
-  }
-  #importExport {
-    font-family: monospace;
-  }
-
-  .ioLabel>.blocklyFlyoutLabelText {
-    font-style: italic;
-  }
-
-  #blocklyDiv.renderingDebug .blockRenderDebug {
-    display: block;
-  }
-
-  .playgroundToggleOptions {
-    list-style: none;
-    padding: 0;
-  }
-  .playgroundToggleOptions li {
-    margin-top: 1em;
-  }
-
-  .blockRenderDebug {
-    display: none;
-  }
-
-  .zelos-renderer .blocklyFlyoutButton .blocklyText {
-    font-size: 1.5rem;
-  }
-</style>
-</head>
-<body onload="start()">
-
-  <div id="blocklyDiv"></div>
-
-  <h1>Blockly Playground</h1>
-
-  <p><a href="javascript:void(workspace.setVisible(true))">Show</a>
-   - <a href="javascript:void(workspace.setVisible(false))">Hide</a>
-   - <a href="playgrounds/advanced_playground.html">Advanced</a></p>
-
-  <form id="options">
-    <select name="dir" onchange="document.forms.options.submit()">
-      <option value="ltr">LTR</option>
-      <option value="rtl">RTL</option>
-    </select>
-    <select name="toolbox" onchange="document.forms.options.submit()">
-      <option value="categories">Categories (untyped variables)</option>
-      <option value="categories-typed-variables">Categories (typed variables)</option>
-      <option value="simple">Simple</option>
-      <option value="test-blocks">Test Blocks</option>
-    </select>
-  </form>
-  <p>
-    <input type="button" value="Save JSON" onclick="saveJson()">
-    <input type="button" value="Save XML" onclick="saveXml()">
-    <input type="button" value="Load" onclick="load()" id="import">
-    <br>
-    <input type="button" value="To JavaScript" onclick="toCode('JavaScript')">
-    <input type="button" value="To Python" onclick="toCode('Python')">
-    <input type="button" value="To PHP" onclick="toCode('PHP')">
-    <input type="button" value="To Lua" onclick="toCode('Lua')">
-    <input type="button" value="To Dart" onclick="toCode('Dart')">
-    <br>
-    <textarea id="importExport" style="width: 26%; height: 12em"
-      onchange="taChange();" onkeyup="taChange()"></textarea>
-  </p>
-
-  <p>
-    Stress test: &nbsp;
-    <input type="button" value="Airstrike!" onclick="airstrike(100)">
-    <input type="button" value="Spaghetti!" onclick="spaghetti(8)">
-    <input type="button" value="JS Spaghetti!" onclick="jsoSpaghetti(8)">
-  </p>
-  <ul class="playgroundToggleOptions">
-    <li>
-      <label for="logCheck">Log main workspace events:</label>
-      <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
-    </li>
-    <li>
-    <label for="logFlyoutCheck">Log flyout events:</label>
-    <input type="checkbox" onclick="logFlyoutEvents(this.checked)" id="logFlyoutCheck">
-  </li>
-  </ul>
-
-
-  <!-- The next three blocks of XML are sample toolboxes for testing basic
-  configurations.  For more information on building toolboxes, see https://developers.google.com/blockly/guides/configure/web/toolbox -->
-
-  <!-- toolbox-simple is an always-open flyout with no category menu.
-  Always-open flyouts are a good idea if you have a small number of blocks. -->
-  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-simple" style="display: none">
-    <block type="controls_ifelse"></block>
-    <block type="logic_compare"></block>
-    <!-- <block type="control_repeat"></block> -->
-    <block type="logic_operation"></block>
-    <block type="controls_repeat_ext">
-      <value name="TIMES">
-        <shadow type="math_number">
-          <field name="NUM">10</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="logic_operation"></block>
-    <block type="logic_negate"></block>
-    <block type="logic_boolean"></block>
-    <block type="logic_null" disabled="true"></block>
-    <block type="logic_ternary"></block>
-    <block type="text_charAt">
-      <value name="VALUE">
-        <block type="variables_get">
-          <field name="VAR">text</field>
-        </block>
-      </value>
-    </block>
-  </xml>
-
-  <!-- toolbox-categories has a category menu and an auto-closing flyout.  The
-  Variables category uses untyped variable blocks.
-  See https://developers.google.com/blockly/guides/create-custom-blocks/variables#untyped_variable_blocks for more information. -->
-  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-categories" style="display: none">
-    <category name="Logic" categorystyle="logic_category">
-      <block type="controls_if"></block>
-      <block type="logic_compare"></block>
-      <block type="logic_operation"></block>
-      <block type="logic_negate"></block>
-      <block type="logic_boolean"></block>
-      <block type="logic_null" disabled="true"></block>
-      <block type="logic_ternary"></block>
-    </category>
-    <category name="Loops" categorystyle="loop_category">
-      <block type="controls_repeat_ext">
-        <value name="TIMES">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="controls_repeat" disabled="true"></block>
-      <block type="controls_whileUntil"></block>
-      <block type="controls_for">
-        <value name="FROM">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="TO">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-        <value name="BY">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="controls_forEach"></block>
-      <block type="controls_flow_statements"></block>
-    </category>
-    <category name="Math" categorystyle="math_category">
-      <block type="math_number" gap="32">
-        <field name="NUM">123</field>
-      </block>
-      <block type="math_arithmetic">
-        <value name="A">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="B">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_single">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">9</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_trig">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">45</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_constant"></block>
-      <block type="math_number_property">
-        <value name="NUMBER_TO_CHECK">
-          <shadow type="math_number">
-            <field name="NUM">0</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_round">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">3.1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_on_list"></block>
-      <block type="math_modulo">
-        <value name="DIVIDEND">
-          <shadow type="math_number">
-            <field name="NUM">64</field>
-          </shadow>
-        </value>
-        <value name="DIVISOR">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_constrain">
-        <value name="VALUE">
-          <shadow type="math_number">
-            <field name="NUM">50</field>
-          </shadow>
-        </value>
-        <value name="LOW">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="HIGH">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_random_int">
-        <value name="FROM">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="TO">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_random_float"></block>
-      <block type="math_atan2">
-        <value name="X">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="Y">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <category name="Text" categorystyle="text_category">
-      <block type="text"></block>
-      <block type="text_multiline"></block>
-      <block type="text_join"></block>
-      <block type="text_append">
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <block type="text_length">
-        <value name="VALUE">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_isEmpty">
-        <value name="VALUE">
-          <shadow type="text">
-            <field name="TEXT"></field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_indexOf">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-        <value name="FIND">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_charAt">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-      </block>
-      <block type="text_getSubstring">
-        <value name="STRING">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-      </block>
-      <block type="text_changeCase">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_trim">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_count">
-        <value name="SUB">
-          <shadow type="text"></shadow>
-        </value>
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <block type="text_replace">
-        <value name="FROM">
-          <shadow type="text"></shadow>
-        </value>
-        <value name="TO">
-          <shadow type="text"></shadow>
-        </value>
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <block type="text_reverse">
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <label text="Input/Output:" web-class="ioLabel"></label>
-      <block type="text_print">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_prompt_ext">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <category name="Lists" categorystyle="list_category">
-      <block type="lists_create_with">
-        <mutation items="0"></mutation>
-      </block>
-      <block type="lists_create_with"></block>
-      <block type="lists_repeat">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">5</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="lists_length"></block>
-      <block type="lists_isEmpty"></block>
-      <block type="lists_indexOf">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_getIndex">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_setIndex">
-        <value name="LIST">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_getSublist">
-        <value name="LIST">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_split">
-        <value name="DELIM">
-          <shadow type="text">
-            <field name="TEXT">,</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="lists_sort"></block>
-      <block type="lists_reverse"></block>
-    </category>
-    <category name="Colour" categorystyle="colour_category">
-      <block type="colour_picker"></block>
-      <block type="colour_random"></block>
-      <block type="colour_rgb">
-        <value name="RED">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-        <value name="GREEN">
-          <shadow type="math_number">
-            <field name="NUM">50</field>
-          </shadow>
-        </value>
-        <value name="BLUE">
-          <shadow type="math_number">
-            <field name="NUM">0</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="colour_blend">
-        <value name="COLOUR1">
-          <shadow type="colour_picker">
-            <field name="COLOUR">#ff0000</field>
-          </shadow>
-        </value>
-        <value name="COLOUR2">
-          <shadow type="colour_picker">
-            <field name="COLOUR">#3333ff</field>
-          </shadow>
-        </value>
-        <value name="RATIO">
-          <shadow type="math_number">
-            <field name="NUM">0.5</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <sep></sep>
-    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>
-    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
-  </xml>
-
-  <!-- toolbox-categories-typed-variables has a category menu and an
-  auto-closing flyout.  The Variables category uses typed variable blocks.
-  See https://developers.google.com/blockly/guides/create-custom-blocks/variables#typed_variable_blocks for more information. -->
-  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-categories-typed-variables" style="display: none">
-    <category name="Logic" categorystyle="logic_category">
-      <block type="controls_if"></block>
-      <block type="logic_compare"></block>
-      <block type="logic_operation"></block>
-      <block type="logic_negate"></block>
-      <block type="logic_boolean"></block>
-      <block type="logic_null" disabled="true"></block>
-      <block type="logic_ternary"></block>
-    </category>
-    <category name="Loops" categorystyle="loop_category">
-      <block type="controls_repeat_ext">
-        <value name="TIMES">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="controls_repeat" disabled="true"></block>
-      <block type="controls_whileUntil"></block>
-      <block type="controls_for">
-        <value name="FROM">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="TO">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-        <value name="BY">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="controls_forEach"></block>
-      <block type="controls_flow_statements"></block>
-    </category>
-    <category name="Math" categorystyle="math_category">
-      <block type="math_number" gap="32">
-        <field name="NUM">123</field>
-      </block>
-      <block type="math_arithmetic">
-        <value name="A">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="B">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_single">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">9</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_trig">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">45</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_constant"></block>
-      <block type="math_number_property">
-        <value name="NUMBER_TO_CHECK">
-          <shadow type="math_number">
-            <field name="NUM">0</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_round">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">3.1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_on_list"></block>
-      <block type="math_modulo">
-        <value name="DIVIDEND">
-          <shadow type="math_number">
-            <field name="NUM">64</field>
-          </shadow>
-        </value>
-        <value name="DIVISOR">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_constrain">
-        <value name="VALUE">
-          <shadow type="math_number">
-            <field name="NUM">50</field>
-          </shadow>
-        </value>
-        <value name="LOW">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="HIGH">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_random_int">
-        <value name="FROM">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="TO">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_random_float"></block>
-      <block type="math_atan2">
-        <value name="X">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="Y">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <category name="Text" categorystyle="text_category">
-      <block type="text"></block>
-      <block type="text_multiline"></block>
-      <block type="text_join"></block>
-      <block type="text_append">
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <block type="text_length">
-        <value name="VALUE">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_isEmpty">
-        <value name="VALUE">
-          <shadow type="text">
-            <field name="TEXT"></field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_indexOf">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-        <value name="FIND">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_charAt">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-      </block>
-      <block type="text_getSubstring">
-        <value name="STRING">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-      </block>
-      <block type="text_changeCase">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_trim">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_count">
-        <value name="SUB">
-          <shadow type="text"></shadow>
-        </value>
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <block type="text_replace">
-        <value name="FROM">
-          <shadow type="text"></shadow>
-        </value>
-        <value name="TO">
-          <shadow type="text"></shadow>
-        </value>
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <block type="text_reverse">
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <label text="Input/Output:" web-class="ioLabel"></label>
-      <block type="text_print">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_prompt_ext">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <category name="Lists" categorystyle="list_category">
-      <block type="lists_create_with">
-        <mutation items="0"></mutation>
-      </block>
-      <block type="lists_create_with"></block>
-      <block type="lists_repeat">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">5</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="lists_length"></block>
-      <block type="lists_isEmpty"></block>
-      <block type="lists_indexOf">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_getIndex">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_setIndex">
-        <value name="LIST">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_getSublist">
-        <value name="LIST">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_split">
-        <value name="DELIM">
-          <shadow type="text">
-            <field name="TEXT">,</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="lists_sort"></block>
-      <block type="lists_reverse"></block>
-    </category>
-    <category name="Colour" categorystyle="colour_category">
-      <block type="colour_picker"></block>
-      <block type="colour_random"></block>
-      <block type="colour_rgb">
-        <value name="RED">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-        <value name="GREEN">
-          <shadow type="math_number">
-            <field name="NUM">50</field>
-          </shadow>
-        </value>
-        <value name="BLUE">
-          <shadow type="math_number">
-            <field name="NUM">0</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="colour_blend">
-        <value name="COLOUR1">
-          <shadow type="colour_picker">
-            <field name="COLOUR">#ff0000</field>
-          </shadow>
-        </value>
-        <value name="COLOUR2">
-          <shadow type="colour_picker">
-            <field name="COLOUR">#3333ff</field>
-          </shadow>
-        </value>
-        <value name="RATIO">
-          <shadow type="math_number">
-            <field name="NUM">0.5</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <sep></sep>
-    <category name="Variables" categorystyle="variable_category" custom="VARIABLE_DYNAMIC"></category>
-    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
-  </xml>
-</body>
-</html>
diff --git a/tests/playgrounds/load_all.js b/tests/playgrounds/load_all.js
new file mode 100644
index 000000000..a444e8cd3
--- /dev/null
+++ b/tests/playgrounds/load_all.js
@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Loads uncompressed Blockly when running locally. Loads
+ * compressed otherwise.
+ */
+'use strict';
+
+
+/**
+ * Loads all the compressed or uncompressed dependencies necessary to run the
+ * playground. This is necessary since the goog.module conversion. Please see
+ * issue #5557 for more information.
+ */
+(function() {
+const isIe = navigator.userAgent.indexOf('MSIE') !== -1 ||
+    navigator.appVersion.indexOf('Trident/') > -1;
+
+if ((location.hostname === 'localhost' || location.hostname === '127.0.0.1' ||
+     location.hostname === '[::1]') &&
+    !isIe) {
+  document.write(
+      `<script src="../blockly_uncompressed.js" id="blockly-uncompressed-script"></script>`);
+  document.write(`<script src="../msg/messages.js"></script>`);
+  document.write(`<script src="../tests/themes/test_themes.js"></script>`);
+  document.write(
+      `<script src="../node_modules/@blockly/block-test/dist/index.js"></script>`);
+  document.write(`<script>
+                // Custom requires for the playground.
+                goog.require('Blockly.Dart.all');
+                goog.require('Blockly.JavaScript.all');
+                goog.require('Blockly.Lua.all');
+                goog.require('Blockly.PHP.all');
+                goog.require('Blockly.Python.all');
+                goog.require('Blockly.WorkspaceCommentSvg');
+                goog.require('Blockly.blocks.all');
+            </script>`);
+} else {
+  document.write(
+      `<script src="../blockly_compressed.js" id="blockly-compressed-script"></script>`);
+  document.write(`<script src="../dart_compressed.js"></script>`);
+  document.write(`<script src="../javascript_compressed.js"></script>`);
+  document.write(`<script src="../lua_compressed.js"></script>`);
+  document.write(`<script src="../php_compressed.js"></script>`);
+  document.write(`<script src="../python_compressed.js"></script>`);
+  document.write(`<script src="../blocks_compressed.js"></script>`);
+  document.write(`<script src="../msg/messages.js"></script>`);
+}
+})();
diff --git a/tests/playgrounds/multi_compressed.html b/tests/playgrounds/multi_compressed.html
deleted file mode 100644
index 29f0ae383..000000000
--- a/tests/playgrounds/multi_compressed.html
+++ /dev/null
@@ -1,470 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>Multi-toolbox Compressed Playground</title>
-<script src="../../blockly_compressed.js"></script>
-<script src="../../blocks_compressed.js"></script>
-<script src="../../msg/messages.js"></script>
-<script>
-'use strict';
-var options = {
-  comments: true,
-  collapse: true,
-  disable: true,
-  maxBlocks: Infinity,
-  media: '../../media/',
-  oneBasedIndex: true,
-  readOnly: false,
-  //rtl: false,
-  scrollbars: true,
-  trashcan: true,
-  //toolbox: null,
-  //horizontalLayout: false,
-  //toolboxPosition: 'start',
-  zoom: {
-    controls: true,
-    wheel: false,
-    startScale: 1.0,
-    maxScale: 4,
-    minScale: 0.25,
-    scaleSpeed: 1.1
-  }
-};
-
-function start() {
-  var match = location.search.match(/toolbox=([^&]+)/);
-  var toolbox =
-      document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
-  document.forms.options.elements.toolbox.selectedIndex =
-      Number(toolbox.getElementsByTagName('category').length == 0);
-  startBlocklyInstance('VertStartLTR', false, false, 'start', toolbox);
-  startBlocklyInstance('VertStartRTL', true, false, 'start', toolbox);
-
-  startBlocklyInstance('VertEndLTR', false, false, 'end', toolbox);
-  startBlocklyInstance('VertEndRTL', true, false, 'end', toolbox);
-
-  startBlocklyInstance('HorizontalStartLTR', false, true, 'start', toolbox);
-  startBlocklyInstance('HorizontalStartRTL', true, true, 'start', toolbox);
-
-  startBlocklyInstance('HorizontalEndLTR', false, true, 'end', toolbox);
-  startBlocklyInstance('HorizontalEndRTL', true, true, 'end', toolbox);
-}
-
-function startBlocklyInstance(suffix, rtl, horizontalLayout, position,
-    toolbox) {
-  options.rtl = rtl;
-  options.toolbox = toolbox;
-  options.horizontalLayout = horizontalLayout;
-  options.toolboxPosition = position;
-  Blockly.inject('blocklyDiv' + suffix, options);
-}
-</script>
-
-<style>
-html, body {
-  height: 100%;
-}
-body {
-  background-color: #fff;
-  font-family: sans-serif;
-}
-h1 {
-  font-weight: normal;
-  font-size: 140%;
-}
-
-#octaweb {
-  width: 100%;
-}
-#octaweb th {
-  padding-top: 1em;
-  width: 50%;
-}
-#octaweb td {
-  width: 50%;
-}
-#octaweb td >div {
-  height: 480px;
-  width: 100%;
-}
-</style>
-</head>
-<body onload="start()">
-  <h1>Blockly Multi Playground</h1>
-
-  <form id="options">
-    <select name="toolbox" onchange="document.forms.options.submit()">
-      <option value="categories">Categories</option>
-      <option value="simple">Simple</option>
-    </select>
-  </form>
-
-  <table id="octaweb">
-    <tr>
-      <th>LTR, Vertical, Start</th>
-      <th>RTL, Vertical, Start</th>
-    </tr>
-    <tr>
-      <td><div id="blocklyDivVertStartLTR"></div></td>
-      <td><div id="blocklyDivVertStartRTL"></div></td>
-    </tr>
-    <tr>
-      <th>LTR, Vertical, End</th>
-      <th>RTL, Vertical, End</th>
-    </tr>
-    <tr>
-      <td><div id="blocklyDivVertEndLTR"></div></td>
-      <td><div id="blocklyDivVertEndRTL"></div></td>
-    </tr>
-    <tr>
-      <th>LTR, Horizontal, Start</th>
-      <th>RTL, Horizontal, Start</th>
-    </tr>
-    <tr>
-      <td><div id="blocklyDivHorizontalStartLTR"></div></td>
-      <td><div id="blocklyDivHorizontalStartRTL"></div></td>
-    </tr>
-    <tr>
-      <th>LTR, Horizontal, End</th>
-      <th>RTL, Horizontal, End</th>
-    </tr>
-    <tr>
-      <td><div id="blocklyDivHorizontalEndLTR"></div></td>
-      <td><div id="blocklyDivHorizontalEndRTL"></div></td>
-    </tr>
-  </table>
-
-  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-simple" style="display: none">
-    <block type="controls_if"></block>
-    <block type="logic_compare"></block>
-    <!-- <block type="control_repeat"></block> -->
-    <block type="logic_operation"></block>
-    <block type="controls_repeat_ext">
-      <value name="TIMES">
-        <shadow type="math_number">
-          <field name="NUM">10</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="logic_operation"></block>
-    <block type="logic_negate"></block>
-    <block type="logic_boolean"></block>
-    <block type="logic_null" disabled="true"></block>
-    <block type="logic_ternary"></block>
-  </xml>
-
-  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-categories" style="display: none">
-    <category name="Logic" categorystyle="logic_category">
-      <block type="controls_if"></block>
-      <block type="logic_compare"></block>
-      <block type="logic_operation"></block>
-      <block type="logic_negate"></block>
-      <block type="logic_boolean"></block>
-      <block type="logic_null" disabled="true"></block>
-      <block type="logic_ternary"></block>
-    </category>
-    <category name="Loops" categorystyle="loop_category">
-      <block type="controls_repeat_ext">
-        <value name="TIMES">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="controls_repeat" disabled="true"></block>
-      <block type="controls_whileUntil"></block>
-      <block type="controls_for">
-        <value name="FROM">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="TO">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-        <value name="BY">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="controls_forEach"></block>
-      <block type="controls_flow_statements"></block>
-    </category>
-    <category name="Math" categorystyle="math_category">
-      <block type="math_number" gap="32">
-        <field name="NUM">123</field>
-      </block>
-      <block type="math_arithmetic">
-        <value name="A">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="B">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_single">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">9</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_trig">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">45</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_constant"></block>
-      <block type="math_number_property">
-        <value name="NUMBER_TO_CHECK">
-          <shadow type="math_number">
-            <field name="NUM">0</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_round">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">3.1</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_on_list"></block>
-      <block type="math_modulo">
-        <value name="DIVIDEND">
-          <shadow type="math_number">
-            <field name="NUM">64</field>
-          </shadow>
-        </value>
-        <value name="DIVISOR">
-          <shadow type="math_number">
-            <field name="NUM">10</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_constrain">
-        <value name="VALUE">
-          <shadow type="math_number">
-            <field name="NUM">50</field>
-          </shadow>
-        </value>
-        <value name="LOW">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="HIGH">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_random_int">
-        <value name="FROM">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="TO">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="math_random_float"></block>
-      <block type="math_atan2">
-        <value name="X">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-        <value name="Y">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <category name="Text" categorystyle="text_category">
-      <block type="text"></block>
-      <block type="text_multiline"></block>
-      <block type="text_join"></block>
-      <block type="text_append">
-        <value name="TEXT">
-          <shadow type="text"></shadow>
-        </value>
-      </block>
-      <block type="text_length">
-        <value name="VALUE">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_isEmpty">
-        <value name="VALUE">
-          <shadow type="text">
-            <field name="TEXT"></field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_indexOf">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-        <value name="FIND">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_charAt">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-      </block>
-      <block type="text_getSubstring">
-        <value name="STRING">
-          <block type="variables_get">
-            <field name="VAR">text</field>
-          </block>
-        </value>
-      </block>
-      <block type="text_changeCase">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_trim">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_print">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="text_prompt_ext">
-        <value name="TEXT">
-          <shadow type="text">
-            <field name="TEXT">abc</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <category name="Lists" categorystyle="list_category">
-      <block type="lists_create_with">
-        <mutation items="0"></mutation>
-      </block>
-      <block type="lists_create_with"></block>
-      <block type="lists_repeat">
-        <value name="NUM">
-          <shadow type="math_number">
-            <field name="NUM">5</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="lists_length"></block>
-      <block type="lists_isEmpty"></block>
-      <block type="lists_indexOf">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_getIndex">
-        <value name="VALUE">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_setIndex">
-        <value name="LIST">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_getSublist">
-        <value name="LIST">
-          <block type="variables_get">
-            <field name="VAR">list</field>
-          </block>
-        </value>
-      </block>
-      <block type="lists_split">
-        <value name="DELIM">
-          <shadow type="text">
-            <field name="TEXT">,</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="lists_sort"></block>
-    </category>
-    <category name="Colour" categorystyle="colour_category">
-      <block type="colour_picker"></block>
-      <block type="colour_random"></block>
-      <block type="colour_rgb">
-        <value name="RED">
-          <shadow type="math_number">
-            <field name="NUM">100</field>
-          </shadow>
-        </value>
-        <value name="GREEN">
-          <shadow type="math_number">
-            <field name="NUM">50</field>
-          </shadow>
-        </value>
-        <value name="BLUE">
-          <shadow type="math_number">
-            <field name="NUM">0</field>
-          </shadow>
-        </value>
-      </block>
-      <block type="colour_blend">
-        <value name="COLOUR1">
-          <shadow type="colour_picker">
-            <field name="COLOUR">#ff0000</field>
-          </shadow>
-        </value>
-        <value name="COLOUR2">
-          <shadow type="colour_picker">
-            <field name="COLOUR">#3333ff</field>
-          </shadow>
-        </value>
-        <value name="RATIO">
-          <shadow type="math_number">
-            <field name="NUM">0.5</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-    <sep></sep>
-    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>
-    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
-  </xml>
-</body>
-</html>

LTR, Vertical, Start	RTL, Vertical, Start

LTR, Vertical, End	RTL, Vertical, End

LTR, Horizontal, Start	RTL, Horizontal, Start

LTR, Horizontal, End	RTL, Horizontal, End