move breakpoint icon functionality into c-recipe-li, upgrade code a bit for className consistency and replacing 'parentNode.parentNode' with this.queryselector

src/web/App.mjs

@@ -627,7 +627,7 @@ class App {
                 item.querySelector(".disable-icon").click();
             }
             if (recipeConfig[i].breakpoint) {
-                item.querySelector(".breakpoint").click();
+                item.querySelector(".breakpoint-icon").click();
             }
 
             this.manager.recipe.triggerArgEvents(item);

src/web/Manager.mjs

@@ -153,7 +153,6 @@ class Manager {
         // Recipe
         this.addDynamicListener(".arg:not(select)", "input", this.recipe.ingChange, this.recipe);
         this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe);
-        this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe);
         this.addDynamicListener("#rec-list .dropdown-menu.toggle-dropdown a", "click", this.recipe.dropdownToggleClick, this.recipe);
         this.addDynamicListener("textarea.arg", "dragover", this.recipe.textArgDragover, this.recipe);
         this.addDynamicListener("textarea.arg", "dragleave", this.recipe.textArgDragLeave, this.recipe);

src/web/components/c-recipe-li.mjs

@@ -50,7 +50,9 @@ export class CRecipeLi extends HTMLElement {
      */
     handleClick(e) {
         const disableIcon = this.querySelector("i.disable-icon");
+        const breakpointIcon = this.querySelector("i.breakpoint-icon");
 
+        // handle click on 'disable-icon'
         if (e.target === disableIcon) {
             if (disableIcon.getAttribute("disabled") === "false") {
                 disableIcon.setAttribute("disabled", "true");
@@ -65,6 +67,19 @@ export class CRecipeLi extends HTMLElement {
             this.app.progress = 0;
             window.dispatchEvent(this.app.manager.statechange);
         }
+
+        // handle click on 'breakpoint-icon'
+        if (e.target === breakpointIcon) {
+            if (breakpointIcon.getAttribute("break") === "false") {
+                breakpointIcon.setAttribute("break", "true");
+                breakpointIcon.classList.add("breakpoint-selected");
+            } else {
+                breakpointIcon.setAttribute("break", "false");
+                breakpointIcon.classList.remove("breakpoint-selected");
+            }
+
+            window.dispatchEvent(this.app.manager.statechange);
+        }
     }
 
     /**
@@ -132,7 +147,7 @@ export class CRecipeLi extends HTMLElement {
 
         const breakPointIcon = document.createElement("i");
         breakPointIcon.classList.add("material-icons");
-        breakPointIcon.classList.add("breakpoint");
+        breakPointIcon.classList.add("breakpoint-icon");
         breakPointIcon.setAttribute("title", "Set breakpoint");
         breakPointIcon.setAttribute("break", "false");
         breakPointIcon.setAttribute("data-help-title", "Setting breakpoints");

src/web/stylesheets/components/_operation.css

@@ -301,7 +301,7 @@ input.toggle-string {
     color: var(--disable-icon-selected-colour);
 }
 
-.breakpoint {
+.breakpoint-icon {
     color: var(--breakpoint-icon-colour);
 }
 

src/web/waiters/BindingsWaiter.mjs

@@ -64,7 +64,7 @@ class BindingsWaiter {
                 case "KeyB": // Set breakpoint
                     e.preventDefault();
                     try {
-                        elem = document.activeElement.closest(".operation").querySelectorAll(".breakpoint")[0];
+                        elem = document.activeElement.closest(".operation").querySelectorAll(".breakpoint-icon")[0];
                         if (elem.getAttribute("break") === "false") {
                             elem.setAttribute("break", "true"); // add break point if not already enabled
                             elem.classList.add("breakpoint-selected");

src/web/waiters/RecipeWaiter.mjs

@@ -161,28 +161,6 @@ class RecipeWaiter {
     }
 
 
-    /**
-     * Handler for breakpoint click events.
-     * Updates the icon status.
-     *
-     * @fires Manager#statechange
-     * @param {Event} e
-     */
-    breakpointClick(e) {
-        const bp = e.target;
-
-        if (bp.getAttribute("break") === "false") {
-            bp.setAttribute("break", "true");
-            bp.classList.add("breakpoint-selected");
-        } else {
-            bp.setAttribute("break", "false");
-            bp.classList.remove("breakpoint-selected");
-        }
-
-        window.dispatchEvent(this.manager.statechange);
-    }
-
-
     /**
      * Generates a configuration object to represent the current recipe.
      *
@@ -196,7 +174,7 @@ class RecipeWaiter {
         for (let i = 0; i < operations.length; i++) {
             ingredients = [];
             disabled = operations[i].querySelector(".disable-icon");
-            bp = operations[i].querySelector(".breakpoint");
+            bp = operations[i].querySelector(".breakpoint-icon");
             ingList = operations[i].querySelectorAll(".arg");
 
             for (let j = 0; j < ingList.length; j++) {