Add "assert else" block and pause on error feature

Author: Valmontechno

addons-l10n/en/debugger.json

@@ -3,6 +3,7 @@
   "debugger/debug": "Debug",
   "debugger/export": "Export",
   "debugger/clear": "Clear",
+  "debugger/pause-on-error": "Pause on error",
   "debugger/close": "Close",
   "debugger/step": "Step",
   "debugger/thread": "Thread {id}",
@@ -12,12 +13,14 @@
   "debugger/clone-of": "Clone of {sprite}",
   "debugger/icon-warn": "Warning",
   "debugger/icon-error": "Error",
+  "debugger/icon-assertion-error": "Assertion Error",
   "debugger/empty-string": "(empty string)",
   "debugger/export-desc": "Click while holding Shift to customize export format.",
   "debugger/block-breakpoint": "breakpoint",
   "debugger/block-log": "log %s",
   "debugger/block-warn": "warn %s",
   "debugger/block-error": "error %s",
+  "debugger/block-assert": "assert %b else %s",
   "debugger/block-start-timer": "start timer %s",
   "debugger/block-stop-timer": "stop timer %s",
   "debugger/default-timer-label": "timer1",

addons/debugger/addon.json

@@ -1,6 +1,6 @@
 {
   "name": "Debugger",
-  "description": "Adds a new \"debugger\" window to the editor. Allows for logging into the \"Logs\" tab of the debugger window using the \"log\", \"warn\" and \"error\" blocks. The \"breakpoint\" block will pause the project when executed. All running stacks of blocks can be viewed in the \"Threads\" tab of the debugger window, and when paused the \"Step\" button can be used to execute the next block. A graph of frames per second and number of clones can be viewed in the \"Performance\" tab. Allows for timing sections of your code with the \"start timing\" and \"stop timing\" block. Timing results and more are accessible from the \"Timing\" tab.",
+  "description": "Adds a new \"debugger\" window to the editor. Allows for logging into the \"Logs\" tab of the debugger window using the \"log\", \"warn\" and \"error\" blocks. The \"assert else\" block logs an error if the specified condition is not met. The \"breakpoint\" block will pause the project when executed. All running stacks of blocks can be viewed in the \"Threads\" tab of the debugger window, and when paused the \"Step\" button can be used to execute the next block. A graph of frames per second and number of clones can be viewed in the \"Performance\" tab. Allows for timing sections of your code with the \"start timing\" and \"stop timing\" block. Timing results and more are accessible from the \"Timing\" tab.",
   "credits": [
     {
       "name": "Tacodiva",
@@ -21,6 +21,10 @@
     {
       "name": "Chrome_Cat",
       "link": "https://scratch.mit.edu/users/Chrome_Cat/"
+    },
+    {
+      "name": "Valmontechno",
+      "link": "https://scratch.mit.edu/users/valmontechno/"
     }
   ],
   "userscripts": [
@@ -103,10 +107,8 @@
   "relatedAddons": ["fps", "clones"],
   "versionAdded": "1.16.0",
   "latestUpdate": {
-    "version": "1.44.0",
-    "temporaryNotice": "New timing tab to help you with micro-optimization of your project and the debugger window is now resizable.",
-    "newSettings": ["auto_stop_timing", "show_ratio_time"],
-    "isMajor": true
+    "version": "1.45.0",
+    "temporaryNotice": "New \"assert else\" block to help you to find bugs in your code, and new feature in the logs tab for automatic pause the project when an error is logged there."
   },
   "libraries": ["chartjs", "scratch-gui", "scratch-vm"]
 }

addons/debugger/logs.js

@@ -34,7 +34,7 @@ export default async function createLogsTab({ debug, addon, console, msg }) {
 
     const icon = document.createElement("div");
     icon.className = "sa-debugger-log-icon";
-    if (row.type === "warn" || row.type === "error") {
+    if (row.type === "warn" || row.type === "error" || row.type === "assertion-error") {
       icon.title = msg("icon-" + row.type);
     }
     root.appendChild(icon);
@@ -124,6 +124,14 @@ export default async function createLogsTab({ debug, addon, console, msg }) {
     clearLogs();
   });
 
+  const pauseOnErrorButton = debug.createIconCheckbox({
+    text: msg("pause-on-error"),
+    checked: debug.pauseOnError.enabled
+  });
+  pauseOnErrorButton.checkbox.addEventListener("change", () => {
+    debug.pauseOnError.enabled = pauseOnErrorButton.checkbox.checked;
+  });
+
   const areLogsEqual = (a, b) =>
     a.text === b.text &&
     a.type === b.type &&
@@ -182,7 +190,7 @@ export default async function createLogsTab({ debug, addon, console, msg }) {
   return {
     tab,
     content: logView.outerElement,
-    buttons: [exportButton, trashButton],
+    buttons: [exportButton, trashButton, pauseOnErrorButton],
     show,
     hide,
     addLog,

addons/debugger/style.css

@@ -231,7 +231,7 @@
   color: hsl(38deg 100% 18%);
   background-color: hsl(38deg 100% 95%);
 }
-.sa-debugger-log[data-type="error"] {
+.sa-debugger-log[data-type*="error"] {
   border-color: hsl(20deg 100% 85%);
   color: hsl(20deg 100% 45%);
   background-color: hsl(20deg 100% 95%);
@@ -253,7 +253,7 @@
 [data-type="warn"] .sa-debugger-log-icon {
   background-image: url(./icons/warning.svg);
 }
-[data-type="error"] .sa-debugger-log-icon {
+[data-type*="error"] .sa-debugger-log-icon {
   background-image: url(./icons/error.svg);
 }
 .sa-debugger-threads .sa-debugger-log-icon {
@@ -460,7 +460,7 @@
 
 /* Shared checkbox styles for timing controls */
 
-.sa-timing-checkbox {
+.sa-debugger-checkbox {
   margin-right: 4px;
   cursor: pointer;
   transform: scale(1.2);
@@ -474,20 +474,20 @@
 }
 
 /* Make checkbox buttons same height as icon buttons */
-.sa-timing-profiling-toggle {
+.sa-debugger-profiling-toggle {
   height: 16px;
 }
 
 .sa-timing-heatmap-content-wrapper {
   height: 16px;
 }
 
-.sa-timing-checkbox:checked {
+.sa-debugger-checkbox:checked {
   background-color: white;
   position: relative;
 }
 
-.sa-timing-checkbox:checked::after {
+.sa-debugger-checkbox:checked::after {
   content: "";
   position: absolute;
   left: 3.75px;

addons/debugger/timing/createTimingTab.js

@@ -19,34 +19,12 @@ export default async function createTimingTab({ debug, addon, console, msg }) {
   }
 
   function createLineByLineButton() {
-    const lineByLineButton = debug.createIconButton({
+    const lineByLineButton = debug.createIconCheckbox({
       text: msg("timing-profiling"),
     });
 
-    // Add checkbox to the left side of the button
-    const checkbox = Object.assign(document.createElement("input"), {
-      type: "checkbox",
-      className: "sa-timing-checkbox",
-    });
-
-    // Add specific class
-    lineByLineButton.element.classList.add("sa-timing-profiling-toggle");
-
-    // Prepend checkbox to button (left side)
-    lineByLineButton.element.insertBefore(checkbox, lineByLineButton.element.firstChild);
-
-    // Make entire button clickable to toggle checkbox
-    lineByLineButton.element.addEventListener("click", (e) => {
-      // Don't double-toggle if clicking directly on checkbox
-      if (e.target !== checkbox) {
-        checkbox.checked = !checkbox.checked;
-        checkbox.dispatchEvent(new Event("change"));
-      }
-    });
-
-    // Handle checkbox change
-    checkbox.addEventListener("change", () => {
-      config.showLineByLine = checkbox.checked;
+    lineByLineButton.checkbox.addEventListener("change", () => {
+      config.showLineByLine = lineByLineButton.checkbox.checked;
       if (config.showLineByLine && !config.isStepThreadPolluted) {
         polluteStepThread();
       } else if (!config.showLineByLine && config.isStepThreadPolluted) {
@@ -65,7 +43,7 @@ export default async function createTimingTab({ debug, addon, console, msg }) {
     // Add checkbox to the left side of the button
     const checkbox = Object.assign(document.createElement("input"), {
       type: "checkbox",
-      className: "sa-timing-checkbox",
+      className: "sa-debugger-checkbox",
     });
 
     // Create slider container (initially hidden)

addons/debugger/userscript.js

@@ -15,6 +15,17 @@ const removeAllChildren = (element) => {
 export default async function ({ addon, console, msg }) {
   setup(addon);
 
+  const pauseOnError = {
+    _enabled: localStorage.getItem("sa-debugger-pauseOnError") === "true",
+    get enabled() {
+      return this._enabled;
+    },
+    set enabled(value) {
+      this._enabled = value;
+      localStorage.setItem("sa-debugger-pauseOnError", value);
+    }
+  }
+
   let logsTab;
   let timingTab;
   const messagesLoggedBeforeLogsTabLoaded = [];
@@ -68,6 +79,24 @@ export default async function ({ addon, console, msg }) {
     displayName: msg("block-error"),
     callback: ({ content }, thread) => {
       logMessage(content, thread, "error");
+      if (pauseOnError.enabled) {
+        pause();
+      }
+    },
+  });
+  addon.tab.addBlock("\u200B\u200Bassert\u200B\u200B %b else %s", {
+    args: [
+      {name: "assertion"},
+      {name: "message", default: "Assertion failed"}
+    ],
+    displayName: msg("block-assert"),
+    callback: ({ assertion, message }, thread) => {
+      if (!assertion) {
+        logMessage(message, thread, "assertion-error");
+        if (pauseOnError.enabled) {
+          pause();
+        }
+      }
     },
   });
   addon.tab.addBlock("\u200B\u200Bstart timer\u200B\u200B %s", {
@@ -133,14 +162,15 @@ export default async function ({ addon, console, msg }) {
     className: "sa-debugger-footer-buttons",
   });
 
+  let activeTab; // activeTab must be initialized before its first access
   let isInterfaceVisible = false;
   const setInterfaceVisible = (_isVisible) => {
     isInterfaceVisible = _isVisible;
     interfaceContainer.style.display = isInterfaceVisible ? "flex" : "";
     if (isInterfaceVisible) {
-      activeTab.show();
+      activeTab?.show();
     } else {
-      activeTab.hide();
+      activeTab?.hide();
     }
   };
 
@@ -210,10 +240,43 @@ export default async function ({ addon, console, msg }) {
     return {
       element: button,
       image: imageElement,
-      text: textElement,
+      text: textElement
     };
   };
 
+  const createIconCheckbox = ({ text, icon, description, checked=false }) => {
+    const button = createIconButton({ text, icon, description });
+
+    // Add checkbox to the left side of the button
+    const checkbox = Object.assign(document.createElement("input"), {
+      type: "checkbox",
+      checked,
+      className: "sa-debugger-checkbox",
+    });
+
+    // Add specific class
+    button.element.classList.add("sa-debugger-profiling-toggle");
+
+    // Prepend checkbox to button (left side)
+    button.element.insertBefore(checkbox, button.element.firstChild);
+
+    // Make entire button clickable to toggle checkbox
+    button.element.addEventListener("click", (e) => {
+      // Don't double-toggle if clicking directly on checkbox
+      if (e.target !== checkbox) {
+        checkbox.checked = !checkbox.checked;
+        checkbox.dispatchEvent(new Event("change"));
+      }
+    });
+
+    return {
+      element: button.element,
+      image: button.image,
+      text: button.text,
+      checkbox
+    };
+  }
+
   const createHeaderTab = ({ text, icon }) => {
     const tab = document.createElement("li");
     const imageElement = Object.assign(document.createElement("img"), {
@@ -526,14 +589,16 @@ export default async function ({ addon, console, msg }) {
 
   const api = {
     debug: {
-      createIconButton: createIconButton,
+      createIconButton,
+      createIconCheckbox,
       createHeaderTab,
       setHasUnreadMessage,
       addAfterStepCallback,
       getBlock,
       getTargetInfoById,
       createBlockLink,
       createBlockPreview,
+      pauseOnError
     },
     addon,
     msg,
@@ -562,7 +627,6 @@ export default async function ({ addon, console, msg }) {
     }
   }
 
-  let activeTab;
   const setActiveTab = (tab) => {
     if (tab === activeTab) return;
     const selectedClass = "sa-debugger-tab-selected";