Rewrite InputWaiter to be less messy.

Don't create a DOM element for every tab, just reuse the same ones.
Display file information while the files are loading.
(Output tabs no longer work)

src/web/App.mjs

@@ -181,7 +181,7 @@ class App {
      * @returns {string}
      */
     getInput() {
-        return this.manager.input.get();
+        return this.manager.input.getActive();
     }
 
     /**

src/web/Manager.mjs

@@ -82,6 +82,8 @@ class Manager {
      * Sets up the various components and listeners.
      */
     setup() {
+        this.input.addTab();
+        this.input.setupLoaderWorker();
         this.worker.setupChefWorkers();
         this.recipe.initialiseOperationDragNDrop();
         this.controls.initComponents();
@@ -156,6 +158,9 @@ class Manager {
         // this.addMultiEventListener("#input-text", "mousedown dblclick select",  this.highlighter.inputMousedown, this.highlighter);
         document.querySelector("#input-file .close").addEventListener("click", this.input.clearIoClick.bind(this.input));
         document.getElementById("btn-new-tab").addEventListener("click", this.input.addTab.bind(this.input));
+        document.getElementById("btn-previous-tab").addEventListener("click", this.input.changeTabLeft.bind(this.input));
+        document.getElementById("btn-next-tab").addEventListener("click", this.input.changeTabRight.bind(this.input));
+        document.getElementById("btn-go-to-tab").addEventListener("click", this.input.goToTab.bind(this.input));
         this.addDynamicListener("#input-tabs ul li .btn-close-tab i", "click", this.input.removeTabClick, this.input);
         this.addDynamicListener("#input-tabs ul li .input-tab-content", "click", this.input.changeTabClick, this.input);
 
@@ -177,7 +182,7 @@ class Manager {
         this.addDynamicListener("#output-file-slice i", "click", this.output.displayFileSlice, this.output);
         document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));
         this.addDynamicListener(".extract-file,.extract-file i", "click", this.output.extractFileClick, this.output);
-        this.addDynamicListener("#output-tabs ul li .output-tab-content", "click", this.output.changeTabClick, this.output);
+        // this.addDynamicListener("#output-tabs ul li .output-tab-content", "click", this.output.changeTabClick, this.output);
 
         // Options
         document.getElementById("options").addEventListener("click", this.options.optionsClick.bind(this.options));

src/web/WorkerWaiter.mjs

@@ -72,7 +72,7 @@ class WorkerWaiter {
                     inputNum: r.data.inputNum
                 });
                 if (this.pendingInputs.length > 0) {
-                    log.debug("Bake complete. Baking next input");
+                    log.debug(`Bake ${r.data.inputNum} complete. Baking next input`);
                     this.bakeNextInput(r.data.inputNum);
                 } else if (this.runningWorkers <= 0) {
                     this.runningWorkers = 0;

src/web/html/index.html

@@ -229,6 +229,15 @@
                         <div class="title no-select">
                             <label for="input-text">Input</label>
                             <span class="float-right">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-previous-tab" data-toggle="tooltip" title="Go to the previous tab">
+                                    <i class="material-icons">keyboard_arrow_left</i>
+                                </button>
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-go-to-tab" data-toggle="tooltip" title="Go to a specific tab">
+                                    <i class="material-icons">more_horiz</i>
+                                </button>
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-next-tab" data-toggle="tooltip" title="Go to the next tab">
+                                    <i class="material-icons">keyboard_arrow_right</i>
+                                </button>
                                 <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab">
                                     <i class="material-icons">add</i>
                                 </button>
@@ -243,19 +252,12 @@
                                     <i class="material-icons">view_compact</i>
                                 </button>
                             </span>
+                            <div class="io-info" id="input-files-info"></div>
                             <div class="io-info" id="input-info"></div>
                             <div class="io-info" id="input-selection-info"></div>
                         </div>
                         <div id="input-tabs" style="display: none;">
                             <ul>
-                                <li id="input-tab-1" class="active-input-tab">
-                                    <div class="input-tab-content">
-                                        1: New Tab
-                                    </div>
-                                    <button type="button" class="btn btn-primary bmd-btn-icon btn-close-tab" id="btn-close-tab-1">
-                                            <i class="material-icons">clear</i>
-                                    </button>
-                                </li>
                             </ul>
                         </div>
                         <div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
@@ -315,11 +317,8 @@
                                 <ul>
                                     <li id="output-tab-1" class="active-output-tab">
                                         <div class="output-tab-content">
-                                            1: New Tab
+                                            Tab 1
                                         </div>
-                                        <button type="button" class="btn btn-primary bmd-btn-icon btn-close-tab" id="btn-close-tab-1">
-                                                <i class="material-icons">clear</i>
-                                        </button>
                                     </li>
                                 </ul>
                             </div>

src/web/stylesheets/layout/_io.css

@@ -24,6 +24,21 @@
     word-wrap: break-word;
 }
 
+#output-wrapper{
+    margin: 0;
+    padding: 0;
+    height: calc(100% - var(--title-height));
+}
+
+#output-wrapper .textarea-wrapper {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    pointer-events: auto;
+}
+
+
 #output-html {
     display: none;
     overflow-y: auto;
@@ -91,7 +106,7 @@
     width: fit-content;
 }
 
-.textarea-wrapper {
+.input-wrapper.textarea-wrapper {
     width: 100%;
     height: calc(100% - var(--title-height));
     box-sizing: border-box;