completing all documentation and other such maintenance

src/web/HTMLIngredient.mjs

@@ -9,8 +9,8 @@ import Utils from "../core/Utils.mjs";
 /**
  * Object to handle the creation of operation ingredients.
  *
- * @TODO: would be nice to refactor this. Move everything to c-ingredient-li and
- * implement there accordingly, delete this file
+ * Note: Not to be confused with the native web component c-ingredient-li, which is the component that makes the parent
+ * list item 'ingredient' in recipe-list.
  */
 class HTMLIngredient {
 

src/web/TODO.md

@@ -0,0 +1,21 @@
+recipe:
+- ignore dropped item outside of rec-list
+- bit smoother sort experience would be nice
+- RecipeWaiter opSortEnd()
+
+operations:
+- can only drag an op to favourites 1 time
+- initial search is kinda slow
+- popovers should also show on key up and down per operation
+- little line on click ( for all input fields, also ingredient focus )
+- after dragging op to rec, popover no longer works on original op ( see opSortEnd )
+
+- stupid popovers on deleting favs for instance ( dont always close nicely )
+- native focus thingy is a bit ugly
+- UI tests etc.
+
+--------
+
+x highlight strings
+x esc on focused-op search results will add that op to recipe
+x be able to tab from panel to panel, open and close them, use up and down arrows

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

@@ -6,8 +6,9 @@ import {COperationList} from "./c-operation-list.mjs";
  * @param {App} app - The main view object for CyberChef
  * @param {CatConf} category - The category and operations to be populated.
  * @param {Object.<string, OpConf>} operations - The list of operation configuration objects.
- * @param {Boolean} isExpanded - expand the category on init or not
- * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to favourite an operation easily
+ * @param {Boolean} isExpanded - expand the category by default on init or not
+ * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
+ * c-operation-list > c-operation-li list items in this category
  * */
 export class CCategoryLi extends HTMLElement {
     constructor(
@@ -102,6 +103,9 @@ export class CCategoryLi extends HTMLElement {
         if (this.label === "Favourites"){
             const editFavouritesButton = this.buildEditFavouritesButton(a);
 
+            // Note: I'm leaving this here as it was in the code originally, but it's not doing anything and it didn't
+            // do anything before my refactoring. I imagine we may want to fix that at some point though,
+            // hence I'm leaving this here.
             a.setAttribute("data-help-title", "Favourite operations");
             a.setAttribute("data-help", `<p>This category displays your favourite operations.</p>
             <ul>
@@ -136,7 +140,7 @@ export class CCategoryLi extends HTMLElement {
     };
 
     /**
-     *  If this category is Favourites, build and return the star icon to the category
+     *  If this category is Favourites, build and return the star icon button
      */
     buildEditFavouritesButton() {
         const button = document.createElement("button");

src/web/components/c-category-list.mjs

@@ -6,7 +6,8 @@ import {CCategoryLi} from "./c-category-li.mjs";
  * @param {App} app - The main view object for CyberChef
  * @param {CatConf[]} categories - The list of categories and operations to be populated.
  * @param {Object.<string, OpConf>} operations - A list of operation configuration objects.
- * @param {boolean} includeOpLiStarIcon - optionally add the 'star' icon to the left of an individual operation
+ * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
+ * c-operation-list > c-operation-li list items in this c-category-list
  **/
 export class CCategoryList extends HTMLElement {
     constructor(app, categories, operations, includeOpLiStarIcon) {

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

@@ -1,5 +1,16 @@
 import HTMLIngredient from "../HTMLIngredient.mjs";
 
+/**
+ * c(ustom element)-ingredient-li ( list item ).
+ *
+ * Note: This is the #recipe-list list item component, not to be confused with HTMLIngredient which make up the smaller
+ * components of this list item. It would be good to eventually fuse that code into this component or alternatively, to
+ * turn that into a separate native web component .
+ *
+ * @param {App} app - The main view object for CyberChef
+ * @param {string} name - The operation ( or aka ingredient- in this context ) name
+ * @param {object[]} args - The args properties of the operation ( see operation config file )
+ * */
 export class CIngredientLi extends HTMLElement {
     constructor(app, name, args = []) {
         super();
@@ -18,6 +29,28 @@ export class CIngredientLi extends HTMLElement {
         this.addEventListener("dblclick", this.handleDoubleClick.bind(this));
     }
 
+    /**
+     * Remove listeners on disconnectedCallback
+     */
+    disconnectedCallback() {
+        this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
+    }
+
+    /**
+     * Handle double click
+     *
+     * @param {Event} e
+     */
+    handleDoubleClick(e) {
+        // do not remove if icons or form elements are double clicked
+        if ( e.target === this.querySelector("li") || e.target === this.querySelector("div.op-title") ) {
+            this.remove();
+        }
+    }
+
+    /**
+     * Build the ingredient list item
+     */
     build() {
         const li = document.createElement("li");
         li.classList.add("operation");
@@ -37,8 +70,22 @@ export class CIngredientLi extends HTMLElement {
             ingredientDiv.innerHTML += (this.args[i].toHtml());
         }
 
-        const iconsDiv = document.createElement("div");
-        iconsDiv.classList.add("recipe-icons");
+       const icons = this.buildIcons();
+
+        const clearfixDiv = document.createElement("div");
+
+        li.appendChild(icons);
+        li.appendChild(clearfixDiv);
+
+        this.appendChild(li);
+    }
+
+    /**
+     * Build the icons ( disable and breakpoint / pause )
+     */
+    buildIcons() {
+        const div = document.createElement("div");
+        div.classList.add("recipe-icons");
 
         const breakPointIcon = document.createElement("i");
         breakPointIcon.classList.add("material-icons");
@@ -58,29 +105,10 @@ export class CIngredientLi extends HTMLElement {
         disableIcon.setAttribute("data-help", "Disabling an operation will prevent it from being executed when the Recipe is baked. Execution will skip over the disabled operation and continue with subsequent operations.");
         disableIcon.innerText = "not_interested";
 
-        iconsDiv.appendChild(breakPointIcon);
-        iconsDiv.appendChild(disableIcon);
+        div.appendChild(breakPointIcon);
+        div.appendChild(disableIcon);
 
-        const clearfixDiv = document.createElement("div");
-
-        li.appendChild(iconsDiv);
-        li.appendChild(clearfixDiv);
-
-        this.appendChild(li);
-    }
-
-    /**
-     * Remove listeners on disconnectedCallback
-     */
-    disconnectedCallback() {
-        this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
-    }
-
-    /**
-     * Handle double click
-     */
-    handleDoubleClick() {
-        this.remove();
+        return div;
     }
 }
 

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

@@ -5,9 +5,11 @@ import url from "url";
  *
  * @param {App} app - The main view object for CyberChef
  * @param {string} name - The name of the operation
- * @param {Object} icon - { class: string, innerText: string } - The optional and customizable icon displayed on the right side of the operation
- * @param {Boolean} includeStarIcon - Include the left side 'star' icon to favourite an operation easily
- * @param {[number[]]} charIndicesToHighlight - optional array of indices that indicate characters to highlight (bold) in operation name
+ * @param {Object} icon - { class: string, innerText: string } - The optional and customizable icon displayed on the
+ * right side of the operation
+ * @param {Boolean} includeStarIcon - Include the left-side 'star' icon to favourite an operation
+ * @param {[number[]]} charIndicesToHighlight - optional array of indices that indicate characters to highlight (bold)
+ * in the operation name, for instance when the user searches for an operation by typing
  */
 export class COperationLi extends HTMLElement {
     constructor(
@@ -46,6 +48,7 @@ export class COperationLi extends HTMLElement {
     disconnectedCallback() {
         this.removeEventListener("click", this.handleClick.bind(this));
         this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
+
         if (this.includeStarIcon) {
             this.observer.disconnect();
         }
@@ -53,10 +56,11 @@ export class COperationLi extends HTMLElement {
 
     /**
      * Handle double click
+     *
      * @param {Event} e
      */
     handleDoubleClick(e) {
-        // Span contains operation title (highlighted or not)
+        // this span is element holding the operation title
         if (e.target === this.querySelector("li") || e.target === this.querySelector("span")) {
             this.app.manager.recipe.addOperation(this.name);
         }
@@ -64,12 +68,15 @@ export class COperationLi extends HTMLElement {
 
     /**
      * Handle click
+     *
      * @param {Event} e
      */
     handleClick(e) {
         if (e.target === this.querySelector("i.star-icon")) {
             this.app.addFavourite(this.name);
         }
+        // current use case: in the 'Edit favourites' modal, the c-operation-li components have a trashcan icon to the
+        // right
         if (e.target === this.querySelector("i.remove-icon")) {
             this.remove();
         }
@@ -81,6 +88,7 @@ export class COperationLi extends HTMLElement {
      * @param {HTMLElement} el
      */
     handlePopover(el){
+        // never display popovers on mobile on this component
         if (this.app.isMobileView()){
             $(el).popover("disable");
         } else {
@@ -112,7 +120,7 @@ export class COperationLi extends HTMLElement {
      * Set the target operation popover itself to gain focus which
      * enables scrolling and other interactions.
      *
-     * @param {Element} el - The element to start selecting from
+     * @param {HTMLElement} el - The element to start selecting from
      */
     setPopover(el) {
         $(el)
@@ -248,7 +256,8 @@ export class COperationLi extends HTMLElement {
 
     /**
      * Override native cloneNode method so we can clone c-operation-li properly
-     * with constructor arguments for sortable and cloneable lists
+     * with constructor arguments for sortable and cloneable lists. This function
+     * is needed for the drag and drop functionality of the Sortable lists
      */
     cloneNode() {
         const { app, name, icon, includeStarIcon, charIndicesToHighlight } = this;
@@ -257,7 +266,8 @@ export class COperationLi extends HTMLElement {
 
 
     /**
-     * Highlights searched strings in the name and description of the operation.
+     * Highlights searched strings ( if applicable ) in the name and description of the operation
+     * or simply sets the name in the span element
      */
     buildOperationName() {
         const span = document.createElement('span');
@@ -280,33 +290,6 @@ export class COperationLi extends HTMLElement {
         }
 
         return span;
-
-        // if (this.description && descIdxs.length && descIdxs[0][0] >= 0) {
-        //     // Find HTML tag offsets
-        //     const re = /<[^>]+>/g;
-        //     let match;
-        //     while ((match = re.exec(this.description))) {
-        //         // If the search string occurs within an HTML tag, return without highlighting it.
-        //         const inHTMLTag = descIdxs.reduce((acc, idxs) => {
-        //             const start = idxs[0];
-        //             return start >= match.index && start <= (match.index + match[0].length);
-        //         }, false);
-        //
-        //         if (inHTMLTag) return;
-        //     }
-        //
-        //     let desc = "",
-        //         pos = 0;
-        //
-        //     descIdxs.forEach(idxs => {
-        //         const [start, length] = idxs;
-        //         desc += this.description.slice(pos, start) + "<b><u>" +
-        //             this.description.slice(start, start + length) + "</u></b>";
-        //         pos = start + length;
-        //     });
-        //     desc += this.description.slice(pos, this.description.length);
-        //     this.description = desc;
-        // }
     }
 }
 

src/web/components/c-operation-list.mjs

@@ -6,7 +6,9 @@ import Sortable from "sortablejs";
  *
  * @param {App} app - The main view object for CyberChef
  * @param {[string, number[]]} operations - A list of operation names and indexes of characters to highlight
- * @param {boolean} includeStarIcon - optionally add the 'star' icon to the left of the operation
+ * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
+ * c-operation-list > c-operation-li list items in this c-category-list
+ *
  * @param {Object} icon ( { class: string, innerText: string } ). check-icon by default
  */
 export class COperationList extends HTMLElement {

src/web/html/index.html

@@ -578,9 +578,9 @@
                     </div>
                     <div class="modal-body" id="favourites-body">
                         <ul>
-                            <li><span style="font-weight: bold">To add:</span> drag the operation over the favourites category and drop it</li>
+                            <li><span style="font-weight: bold">To add:</span> from the Operations list, click the star icon of the operation or, on desktop devices, drag and drop the operation over to the favourites category</li>
                             <li><span style="font-weight: bold">To reorder:</span> drag up and down in the list below</li>
-                            <li><span style="font-weight: bold">To remove:</span> hit the delete button or drag out of the list below</li>
+                            <li><span style="font-weight: bold">To remove:</span> click the trashcan icon for the operation to remove below</li>
                         </ul>
                         <br>
                         <div id="editable-favourites"></div>