Improved file type detection and timing output

src/web/utils/fileDetails.mjs

@@ -6,7 +6,7 @@
 
 import {showSidePanel} from "./sidePanel.mjs";
 import Utils from "../../core/Utils.mjs";
-import {isImage} from "../../core/lib/FileType.mjs";
+import {isImage, detectFileType} from "../../core/lib/FileType.mjs";
 
 /**
  * A File Details extension for CodeMirror
@@ -102,7 +102,7 @@ class FileDetailsPanel {
         } else {
             this.resetFileThumb();
         }
-        fileType.textContent = type;
+        fileType.textContent = type ? type : detectFileType(fileBuffer)[0]?.mime ?? "unknown";
     }
 
     /**

src/web/utils/statusBar.mjs

@@ -254,7 +254,7 @@ class StatusBarPanel {
 
         if (this.label === "Output" && this.timing) {
             bakingTimeInfo.style.display = "inline-block";
-            bakingTime.textContent = this.timing.overallDuration(this.tabNumGetter());
+            bakingTime.textContent = this.timing.duration(this.tabNumGetter());
 
             const info = this.timing.printStages(this.tabNumGetter()).replace(/\n/g, "<br>");
             bakingTimeInfo.setAttribute("title", info);

src/web/waiters/TimingWaiter.mjs

@@ -54,6 +54,45 @@ class TimingWaiter {
         this.inputs[inputNum][event] = value;
     }
 
+    /**
+     * The duration of the main stages of a bake
+     *
+     * @param {number} inputNum
+     * @returns {number}
+     */
+    duration(inputNum) {
+        const input = this.inputs[inputNum.toString()];
+
+        // If this input has not been encoded yet, we cannot calculate a time
+        if (!input ||
+            !input.trigger ||
+            !input.inputEncodingEnd ||
+            !input.inputEncodingStart)
+            return 0;
+
+        // input encoding can happen before a bake is triggered, so it is calculated separately
+        const inputEncodingTotal = input.inputEncodingEnd - input.inputEncodingStart;
+
+        let total = 0, outputDecodingTotal = 0;
+
+        if (input.bakeComplete && input.bakeComplete > input.trigger)
+            total = input.bakeComplete - input.trigger;
+
+        if (input.settingOutput && input.settingOutput > input.trigger)
+            total = input.settingOutput - input.trigger;
+
+        if (input.outputDecodingStart && (input.outputDecodingStart > input.trigger) &&
+            input.outputDecodingEnd && (input.outputDecodingEnd > input.trigger)) {
+            total = input.outputDecodingEnd - input.trigger;
+            outputDecodingTotal = input.outputDecodingEnd - input.outputDecodingStart;
+        }
+
+        if (input.complete && input.complete > input.trigger)
+            total = inputEncodingTotal + input.bakeDuration + outputDecodingTotal;
+
+        return total;
+    }
+
     /**
      * The total time for a completed bake
      *
@@ -101,7 +140,6 @@ class TimingWaiter {
     printStages(inputNum) {
         const input = this.inputs[inputNum.toString()];
         if (!input || !input.trigger) return "";
-        this.logAllTimes(inputNum);
 
         const total = this.overallDuration(inputNum),
             inputEncoding = input.inputEncodingEnd - input.inputEncodingStart,
@@ -111,8 +149,7 @@ class TimingWaiter {
         return `Input encoding: ${inputEncoding}ms
 Recipe duration: ${input.bakeDuration}ms
 Output decoding: ${outputDecoding}ms
-Threading overhead: ${overhead}ms
-Total: ${total}ms`;
+<span class="small">Threading overhead: ${overhead}ms</span>`;
     }
 
     /**