replace "options" with "arguments", invert global hide-icon if needed

src/web/HTMLOperation.mjs

@@ -83,7 +83,7 @@ class HTMLOperation {
         <div class="recip-icons">
             <i class="material-icons breakpoint" title="Set breakpoint" break="false">pause</i>
             <i class="material-icons disable-icon" title="Disable operation" disabled="false">not_interested</i>
-            <i class="material-icons hide-options" title="Hide options" hide-opt="false">keyboard_arrow_up</i>
+            <i class="material-icons hide-args-icon" title="Hide arguments" hide-args="false">keyboard_arrow_up</i>
         </div>
         <div class="clearfix">&nbsp;</div>`;
 

src/web/Manager.mjs

@@ -120,7 +120,7 @@ class Manager {
         document.getElementById("load-delete-button").addEventListener("click", this.controls.loadDeleteClick.bind(this.controls));
         document.getElementById("load-name").addEventListener("change", this.controls.loadNameChange.bind(this.controls));
         document.getElementById("load-button").addEventListener("click", this.controls.loadButtonClick.bind(this.controls));
-        document.getElementById("hide-icon").addEventListener("click", this.controls.hideRecipeOptClick.bind(this.recipe));
+        document.getElementById("hide-icon").addEventListener("click", this.controls.hideRecipeArgsClick.bind(this.recipe));
         document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
         this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
 
@@ -136,7 +136,7 @@ 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(".hide-options", "click", this.recipe.hideOptClick, this.recipe);
+        this.addDynamicListener(".hide-args-icon", "click", this.recipe.hideArgsClick, this.recipe);
         this.addDynamicListener(".disable-icon", "click", this.recipe.disableClick, this.recipe);
         this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe);
         this.addDynamicListener("#rec-list li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);

src/web/html/index.html

@@ -177,7 +177,7 @@
                     <div class="title no-select">
                         Recipe
                         <span class="float-right">
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="hide-icon" data-toggle="tooltip" title="Hide options" hide-opt="false">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="hide-icon" data-toggle="tooltip" title="Hide arguments" hide-args="false">
                                 <i class="material-icons">keyboard_arrow_up</i>
                             </button>
                             <button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe">

src/web/waiters/ControlsWaiter.mjs

@@ -334,29 +334,29 @@ class ControlsWaiter {
 
 
     /**
-     * Hides the options for all the operations in the current recipe.
+     * Hides the arguments for all the operations in the current recipe.
      */
-    hideRecipeOptClick() {
+    hideRecipeArgsClick() {
         const icon = document.getElementById("hide-icon");
 
-        if (icon.getAttribute("hide-opt") === "false") {
+        if (icon.getAttribute("hide-args") === "false") {
-            icon.setAttribute("hide-opt", "true");
+            icon.setAttribute("hide-args", "true");
-            icon.setAttribute("data-original-title", "Show options");
+            icon.setAttribute("data-original-title", "Show arguments");
             icon.children[0].innerText = "keyboard_arrow_down";
-            Array.from(document.getElementsByClassName("hide-options")).forEach(function(item){
+            Array.from(document.getElementsByClassName("hide-args-icon")).forEach(function(item){
-                item.setAttribute("hide-opt", "true");
+                item.setAttribute("hide-args", "true");
                 item.innerText = "keyboard_arrow_down";
-                item.classList.add("hide-options-selected");
+                item.classList.add("hide-args-selected");
                 item.parentNode.previousElementSibling.style.display = "none";
             });
         } else {
-            icon.setAttribute("hide-opt", "false");
+            icon.setAttribute("hide-args", "false");
-            icon.setAttribute("data-original-title", "Hide options");
+            icon.setAttribute("data-original-title", "Hide arguments");
             icon.children[0].innerText = "keyboard_arrow_up";
-            Array.from(document.getElementsByClassName("hide-options")).forEach(function(item){
+            Array.from(document.getElementsByClassName("hide-args-icon")).forEach(function(item){
-                item.setAttribute("hide-opt", "false");
+                item.setAttribute("hide-args", "false");
                 item.innerText = "keyboard_arrow_up";
-                item.classList.remove("hide-options-selected");
+                item.classList.remove("hide-args-selected");
                 item.parentNode.previousElementSibling.style.display = "grid";
             });
         }

src/web/waiters/RecipeWaiter.mjs

@@ -215,27 +215,44 @@ class RecipeWaiter {
     }
 
     /**
-     * Handler for hide-opt click events.
+     * Handler for hide-args click events.
      * Updates the icon status.
      *
      * @fires Manager#statechange
      * @param {event} e
      */
-    hideOptClick(e) {
+    hideArgsClick(e) {
         const icon = e.target;
 
-        if (icon.getAttribute("hide-opt") === "false") {
+        if (icon.getAttribute("hide-args") === "false") {
-            icon.setAttribute("hide-opt", "true");
+            icon.setAttribute("hide-args", "true");
             icon.innerText = "keyboard_arrow_down";
-            icon.classList.add("hide-options-selected");
+            icon.classList.add("hide-args-selected");
             icon.parentNode.previousElementSibling.style.display = "none";
         } else {
-            icon.setAttribute("hide-opt", "false");
+            icon.setAttribute("hide-args", "false");
             icon.innerText = "keyboard_arrow_up";
-            icon.classList.remove("hide-options-selected");
+            icon.classList.remove("hide-args-selected");
             icon.parentNode.previousElementSibling.style.display = "grid";
         }
 
+        const icons = Array.from(document.getElementsByClassName("hide-args-icon"));
+        if (icons.length > 1) {
+            // Check if ALL the icons are hidden/shown
+            const uniqueIcons = icons.map(function(item) {
+                return item.getAttribute("hide-args");
+            }).unique();
+            console.log(uniqueIcons)
+
+            const controlsIconStatus = document.getElementById("hide-icon").getAttribute("hide-args");
+            console.log(controlsIconStatus)
+
+            // If all icons are in the same state and the global icon isn't, fix it
+            if (uniqueIcons.length === 1 && icon.getAttribute("hide-args") !== controlsIconStatus) {
+                this.manager.controls.hideRecipeArgsClick()
+            }
+        }
+
         window.dispatchEvent(this.manager.statechange);
     }