Add searching for output tabs.

Remove all existing chefworkers before starting a bake.
Clear breakpoint when starting a bake

src/web/InputWaiter.mjs

@@ -327,7 +327,7 @@ class InputWaiter {
                 fileLoaded.textContent = "";
 
                 inputText.style.overflow = "auto";
-            inputText.classList.remove("blur");
+                inputText.classList.remove("blur");
 
                 const lines = inputData.input.length < (this.app.options.ioDisplayThreshold * 1024) ?
                     inputData.input.count("\n") + 1 : null;

src/web/Manager.mjs

@@ -201,6 +201,17 @@ class Manager {
         document.getElementById("btn-previous-output-tab").addEventListener("click", this.output.changeTabLeft.bind(this.output));
         document.getElementById("btn-next-output-tab").addEventListener("click", this.output.changeTabRight.bind(this.output));
         document.getElementById("btn-go-to-output-tab").addEventListener("click", this.output.goToTab.bind(this.output));
+        document.getElementById("btn-find-output-tab").addEventListener("click", this.output.findTab.bind(this.output));
+        document.getElementById("output-show-pending").addEventListener("change", this.output.filterTabSearch.bind(this.output));
+        document.getElementById("output-show-baking").addEventListener("change", this.output.filterTabSearch.bind(this.output));
+        document.getElementById("output-show-baked").addEventListener("change", this.output.filterTabSearch.bind(this.output));
+        document.getElementById("output-content-filter").addEventListener("change", this.output.filterTabSearch.bind(this.output));
+        document.getElementById("output-content-filter").addEventListener("keyup", this.output.filterTabSearch.bind(this.output));
+        document.getElementById("output-num-results").addEventListener("change", this.output.filterTabSearch.bind(this.output));
+        document.getElementById("output-num-results").addEventListener("keyup", this.output.filterTabSearch.bind(this.output));
+        document.getElementById("output-filter-refresh").addEventListener("click", this.output.filterTabSearch.bind(this.output));
+        // this.addDynamicListener(".output-filter-result", "click", this.output.filterItemClick, this.output);
+
 
         // Options
         document.getElementById("options").addEventListener("click", this.options.optionsClick.bind(this.options));

src/web/OutputWaiter.mjs

@@ -528,8 +528,8 @@ class OutputWaiter {
         const downloadButton = document.getElementById("save-all-to-file");
 
         downloadButton.classList.add("spin");
-        downloadButton.title = `Downloading ${inputNums.length} files...`;
-        downloadButton.setAttribute("data-original-title", `Downloading ${inputNums.length} files...`);
+        downloadButton.title = `Zipping ${inputNums.length} files...`;
+        downloadButton.setAttribute("data-original-title", `Zipping ${inputNums.length} files...`);
 
         downloadButton.firstElementChild.innerHTML = "autorenew";
 
@@ -1170,7 +1170,7 @@ class OutputWaiter {
      * @returns {boolean}
      */
     containsCR() {
-        return this.getActive(true).indexOf("\r") >= 0;
+        return this.getActive(false).indexOf("\r") >= 0;
     }
 
     /**
@@ -1256,6 +1256,83 @@ class OutputWaiter {
             this.app.resetLayout();
         }
     }
+
+    /**
+     * Handler for find tab button clicked
+     */
+    findTab() {
+        this.filterTabSearch();
+        $("#output-tab-modal").modal();
+    }
+
+    /**
+     * Searches the outputs using the filter settings and displays the results
+     */
+    filterTabSearch() {
+        const showPending = document.getElementById("output-show-pending").checked,
+            showBaking = document.getElementById("output-show-baking").checked,
+            showBaked = document.getElementById("output-show-baked").checked,
+            showStale = document.getElementById("output-show-stale").checked,
+            showErrored = document.getElementById("output-show-errored").checked,
+            contentFilter = document.getElementById("output-content-filter").value,
+            resultsList = document.getElementById("output-search-results"),
+            numResults = parseInt(document.getElementById("output-num-results").value, 10),
+            inputNums = Object.keys(this.outputs),
+            results = [];
+
+        // Search through the outputs for matching output results
+        for (let i = 0; i < inputNums.length; i++) {
+            const iNum = inputNums[i],
+                output = this.outputs[iNum];
+
+            if (output.status === "pending" && showPending ||
+                output.status === "baking" && showBaking ||
+                output.status === "errored" && showErrored ||
+                output.status === "stale" && showStale ||
+                output.status === "inactive" && showStale) {
+                const outDisplay = {
+                    "pending": "Not baked yet",
+                    "baking": "Baking",
+                    "errored": "Errored",
+                    "stale": "Stale (output is out of date)",
+                    "inactive": "Not baked yet"
+                };
+                results.push({
+                    inputNum: iNum,
+                    textDisplay: outDisplay[output.status]
+                });
+            } else if (output.status === "baked" && showBaked) {
+                let data = this.getOutput(iNum, false).slice(0, 4096);
+                if (typeof data !== "string") {
+                    data = Utils.arrayBufferToStr(data);
+                }
+                data = data.replace(/[\r\n]/g, "");
+                if (data.toLowerCase().includes(contentFilter)) {
+                    results.push({
+                        inputNum: iNum,
+                        textDisplay: data.slice(0, 100)
+                    });
+                }
+            }
+
+            if (results.length >= numResults) {
+                break;
+            }
+        }
+
+        for (let i = resultsList.children.length - 1; i >= 0; i--) {
+            resultsList.children.item(i).remove();
+        }
+
+        for (let i = 0; i < results.length; i++) {
+            const newListItem = document.createElement("li");
+            newListItem.classList.add("output-filter-result");
+            newListItem.setAttribute("inputNum", results[i].inputNum);
+            newListItem.innerText = `${results[i].inputNum}: ${results[i].textDisplay}`;
+
+            resultsList.appendChild(newListItem);
+        }
+    }
 }
 
 export default OutputWaiter;

src/web/WorkerWaiter.mjs

@@ -365,7 +365,12 @@ class WorkerWaiter {
      * @param {boolean} step
      */
     bake(recipeConfig, options, progress, step) {
+        for (let i = this.chefWorkers.length - 1; i >= 0; i--) {
+            this.removeChefWorker(this.chefWorkers[i]);
+        }
+
         this.setBakingStatus(true);
+        this.manager.recipe.updateBreakpointIndicator(false);
         this.bakeStartTime = new Date().getTime();
         this.bakeId++;
         this.recipeConfig = recipeConfig;

src/web/html/index.html

@@ -331,9 +331,17 @@
                                 <span id="btn-previous-output-tab" class="output-tab-buttons">
                                     &lt;
                                 </span>
-                                <span id="btn-go-to-output-tab" class="output-tab-buttons">
+                                <span id="btn-output-tab-dropdown" class="output-tab-buttons" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
                                     ···
                                 </span>
+                                <div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown">
+                                    <a id="btn-go-to-output-tab" class="dropdown-item">
+                                        Go to tab
+                                    </a>
+                                    <a id="btn-find-output-tab" class="dropdown-item">
+                                        Find tab
+                                    </a>
+                                </div>
                                 <span id="btn-next-output-tab" class="output-tab-buttons">
                                     &gt;
                                 </span>
@@ -770,19 +778,19 @@
                     <div class="modal-body" id="input-tab-body">
                         <h6>Load Status</h6>
                         <ul id="input-find-options">
-                            <li class="checkbox .input-find-option">
+                            <li class="checkbox input-find-option">
                                 <label for="input-show-pending">
                                     <input type="checkbox" id="input-show-pending" checked="">
                                     Pending
                                 </label>
                             </li>
-                            <li class="checkbox .input-find-option">
+                            <li class="checkbox input-find-option">
                                 <label for="input-show-loading">
                                     <input type="checkbox" id="input-show-loading" checked="">
                                     Loading
                                 </label>
                             </li>
-                            <li class="checkbox .input-find-option">
+                            <li class="checkbox input-find-option">
                                 <label for="input-show-loaded">
                                     <input type="checkbox" id="input-show-loaded" checked="">
                                     Loaded
@@ -790,18 +798,19 @@
                             </li>
                         </ul>
                         <br>
-                        <div class="form-group .input-find-option">
+                        <div class="form-group input-find-option">
                             <label for="input-filename-filter" class="bmd-label-floating">Filename</label>
                             <input type="text" class="form-control" id="input-filename-filter">
                         </div>
-                        <div class="form-group .input-find-option">
+                        <div class="form-group input-find-option">
                             <label for="input-content-filter" class="bmd-label-floating">Content</label>
                             <input type="text" class="form-control" id="input-content-filter">
                         </div>
-                        <div class="form-group .input-find-option">
-                                <label for="input-num-results" class="bmd-label-floating">Number of results</label>
-                                <input type="number" class="form-control" id="input-num-results" value="20">
-                            </div>
+                        <div class="form-group input-find-option">
+                            <label for="input-num-results" class="bmd-label-floating">Number of results</label>
+                            <input type="number" class="form-control" id="input-num-results" value="20">
+                        </div>
+                        <br>
                         <h6>Results</h6>
                         <ul id="input-search-results"></ul>
                     </div>
@@ -813,6 +822,67 @@
             </div>
         </div>
 
+        <div class="modal" id="output-tab-modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Find Output Tab</h5>
+                    </div>
+                    <div class="modal-body" id="output-tab-body">
+                        <h6>Bake Status</h6>
+                        <ul id="output-find-options">
+                            <li class="checkbox output-find-option">
+                                <label for="output-show-pending">
+                                    <input type="checkbox" id="output-show-pending" checked="">
+                                    Pending
+                                </label>
+                            </li>
+                            <li class="checkbox output-find-option">
+                                <label for="output-show-baking">
+                                    <input type="checkbox" id="output-show-baking" checked="">
+                                    Baking
+                                </label>
+                            </li>
+                            <li class="checkbox output-find-option">
+                                <label for="output-show-baked">
+                                    <input type="checkbox" id="output-show-baked" checked="">
+                                    Baked
+                                </label>
+                            </li>
+                            <li class="checkbox output-find-option">
+                                <label for="output-show-stale">
+                                    <input type="checkbox" id="output-show-stale" checked="">
+                                    Stale
+                                </label>
+                            </li>
+                            <li class="checkbox output-find-option">
+                                <label for="output-show-errored">
+                                    <input type="checkbox" id="output-show-errored" checked="">
+                                    Errored
+                                </label>
+                            </li>
+                        </ul>
+                        <br>
+                        <div class="form-group output-find-option">
+                            <label for="output-content-filter" class="bmd-label-floating">Content</label>
+                            <input type="text" class="form-control" id="output-content-filter">
+                        </div>
+                        <div class="form-group output-find-option">
+                            <label for="output-num-results" class="bmd-label-floating">Number of results</label>
+                            <input type="number" class="form-control" id="output-num-results" value="20">
+                        </div>
+                        <br>
+                        <h6>Results</h6>
+                        <ul id="output-search-results"></ul>
+                    </div>
+                    <div class="modal-footer">
+                            <button type="button" class="btn btn-primary" id="output-filter-refresh">Refresh</button>
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="modal" id="loading-files-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">

src/web/stylesheets/layout/_io.css

@@ -110,7 +110,7 @@
 #btn-next-input-tab,
 #btn-input-tab-dropdown,
 #btn-next-output-tab,
-#btn-go-to-output-tab {
+#btn-output-tab-dropdown {
     float: right;
 }
 
@@ -296,12 +296,14 @@
     fill: var(--primary-font-colour);
 }
 
-#input-find-options {
+#input-find-options,
+#output-find-options {
     list-style: none;
     width: 100%;
 }
 
-#input-find-options li {
+#input-find-options li,
+#output-find-options li {
     display: flex;
     flex-direction: row;
     float: left;
@@ -312,7 +314,8 @@
 }
 
 
-#input-search-results {
+#input-search-results,
+#output-search-results {
     list-style: none;
     width: 75%;
     min-width: 200px;
@@ -320,7 +323,8 @@
     margin-right: auto;
 }
 
-#input-search-results li {
+#input-search-results li,
+#output-search-results li {
     padding-left: 5px;
     padding-right: 5px;
     padding-top: 10px;
@@ -330,13 +334,18 @@
     color: var(--op-list-operation-font-colour);
     background-color: var(--op-list-operation-bg-colour);
     border-bottom: 2px solid var(--op-list-operation-border-colour);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-#input-search-results li:first-of-type {
+#input-search-results li:first-of-type,
+#output-search-results li:first-of-type {
     border-top: 2px solid var(--op-list-operation-border-colour);
 }
 
-#input-search-results li:hover {
+#input-search-results li:hover,
+#output-search-results li:hover {
     cursor: pointer;
     filter: brightness(98%);
 }