render all block ids/types

index.html

@@ -19,6 +19,7 @@
             <span>Blocks: <span id="total-blocks">0</span></span>
             <span title="Regular:Flyout:Mutator">Workspaces: <span id="total-workspaces">0:0:0</span></span>
         </div>
+        <div id="all-blocks"></div>
         <pre id="bytecode-json-container"><code id="bytecode-json"></code></pre>
         <pre id="blockly-json-container"><code id="blockly-json"></code></pre>
       </div>

src/index.js

@@ -18,13 +18,16 @@ import './index.css'
 const
   topBlocksDiv = document.getElementById('top-blocks'),
   totalBlocksDiv = document.getElementById('total-blocks'),
+  allBlocksDiv = document.getElementById('all-blocks'),
   totalWorkspacesDiv = document.getElementById('total-workspaces'),
   blocklyJsonOutputDiv = document.getElementById('blockly-json'),
   bytecodeJsonOutputDiv = document.getElementById('bytecode-json'),
 
   onJsonUpdated = bytecodeJson => {
+    const allBlocks = workspace.getAllBlocks()
     topBlocksDiv.innerText = workspace.getTopBlocks().length
-    totalBlocksDiv.innerText = workspace.getAllBlocks().length
+    totalBlocksDiv.innerText = allBlocks.length
+    allBlocksDiv.innerHTML = allBlocks.map(block => `- ${block.type} (${block.id.slice(0,3)})`).join("<br/>")
 
     blocklyJsonOutputDiv.innerText = ``
     bytecodeJsonOutputDiv.innerText = `Bytecode is valid JSON ✅\n\n${bytecodeJson}`