implement change requests

src/web/App.mjs

@@ -881,7 +881,6 @@ class App {
             true
         );
 
-        categoryList.build();
         document.querySelector("#categories").appendChild(categoryList);
     }
 }

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

@@ -7,7 +7,7 @@ export class CCategoryLi extends HTMLElement {
     /**
      * @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 {OpConfig[]} operations - The list of operation configuration objects.
      * @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
@@ -54,6 +54,8 @@ export class CCategoryLi extends HTMLElement {
 
     /**
      * Build c-category-li containing a nested c-operation-list ( op-list )
+     *
+     * @returns {HTMLElement}
      */
     build() {
         const li = this.buildListItem();
@@ -72,13 +74,13 @@ export class CCategoryLi extends HTMLElement {
             true
         );
 
-        opList.build();
-
         div.appendChild(opList);
     }
 
     /**
      * Build the li element
+     *
+     * @returns {HTMLElement}
      */
     buildListItem() {
         const li = document.createElement("li");
@@ -90,6 +92,8 @@ export class CCategoryLi extends HTMLElement {
 
     /**
      * Build the anchor element
+     *
+     * @returns {HTMLElement}
      */
     buildAnchor() {
         const a = document.createElement("a");
@@ -123,6 +127,8 @@ export class CCategoryLi extends HTMLElement {
 
     /**
      * Build the collapsable panel that contains the op-list for this category
+     *
+     * @returns {HTMLElement}
      */
     buildCollapsablePanel() {
         const div = document.createElement("div");
@@ -142,6 +148,8 @@ export class CCategoryLi extends HTMLElement {
 
     /**
      *  If this category is Favourites, build and return the star icon button
+     *
+     *  @returns {HTMLElement}
      */
     buildEditFavouritesButton() {
         const button = document.createElement("button");

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

@@ -7,7 +7,7 @@ export class CCategoryList extends HTMLElement {
     /**
      * @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 {OpConfig[]} operations - A list of operation configuration objects.
      * @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
      */
@@ -23,10 +23,14 @@ export class CCategoryList extends HTMLElement {
         this.categories = categories;
         this.operations = operations;
         this.includeOpLiStarIcon = includeOpLiStarIcon;
+
+        this.build();
     }
 
     /**
      * Build c-category-list
+     *
+     * @returns {HTMLElement}
      */
     build() {
         const ul = document.createElement("ul");

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

@@ -104,6 +104,8 @@ export class COperationLi extends HTMLElement {
 
     /**
      * Build c-operation-li
+     *
+     * @returns {HTMLElement}
      */
     build() {
         const li = this.buildListItem();
@@ -178,6 +180,8 @@ export class COperationLi extends HTMLElement {
 
     /**
      * Build the li element
+     *
+     * @returns {HTMLElement}
      */
     buildListItem() {
         const li = document.createElement("li");
@@ -209,6 +213,8 @@ export class COperationLi extends HTMLElement {
 
     /**
      * Build the operation list item right side icon
+     *
+     * @returns {HTMLElement}
      */
     buildIcon() {
         const icon = document.createElement("i");
@@ -224,6 +230,8 @@ export class COperationLi extends HTMLElement {
 
     /**
      * Build the ( optional ) star icon
+     *
+     * @returns {HTMLElement}
      */
     buildStarIcon() {
         const icon = document.createElement("i");
@@ -267,6 +275,8 @@ export class COperationLi extends HTMLElement {
     /**
      * Highlights searched strings ( if applicable ) in the name and description of the operation
      * or simply sets the name in the span element
+     *
+     * @returns {HTMLElement}
      */
     buildOperationName() {
         const span = document.createElement("span");
@@ -283,7 +293,7 @@ export class COperationLi extends HTMLElement {
                 pos = start + length;
             });
             opName += this.name.slice(pos, this.name.length);
-            span.innerHTML = `${opName}`;
+            span.innerHTML = opName;
         } else {
             span.innerText = this.name;
         }

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

@@ -31,6 +31,8 @@ export class COperationList extends HTMLElement {
         this.isCloneable = isCloneable;
         this.icon = icon;
 
+        this.build();
+
         window.addEventListener("operationadd", this.handleChange.bind(this));
         window.addEventListener("operationremove", this.handleChange.bind(this));
         window.addEventListener("favouritesupdate", this.handleChange.bind(this));
@@ -56,6 +58,8 @@ export class COperationList extends HTMLElement {
 
     /**
      * Build c-operation-list
+     *
+     * @returns {HTMLElement}
      */
     build() {
         const ul =  document.createElement("ul");

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

@@ -113,6 +113,8 @@ export class CRecipeLi extends HTMLElement {
 
     /**
      * Build the ingredient list item
+     *
+     * @returns {HTMLElement}
      */
     build() {
         const li = document.createElement("li");
@@ -154,6 +156,8 @@ export class CRecipeLi extends HTMLElement {
 
     /**
      * Build the icons ( disable and breakpoint / pause )
+     *
+     * @returns {HTMLElement}
      */
     buildIcons() {
         const div = document.createElement("div");

src/web/waiters/OperationsWaiter.mjs

@@ -204,7 +204,6 @@ class OperationsWaiter {
                 },
             );
 
-            opList.build();
             div.appendChild(opList);
         }