Added staleness indicator to the output

src/web/App.js

@@ -107,6 +107,7 @@ App.prototype.setBakingStatus = function(bakingStatus) {
         outputElement = document.getElementById("output-text");
 
     if (bakingStatus) {
+        this.manager.controls.hideStaleIndicator();
         this.bakingStatusTimeout = setTimeout(function() {
             outputElement.disabled = true;
             outputLoader.style.visibility = "visible";
@@ -205,8 +206,10 @@ App.prototype.bakingComplete = function(response) {
  * Runs Auto Bake if it is set.
  */
 App.prototype.autoBake = function() {
-    if (this.autoBake_ && !this.autoBakePause) {
+    if (this.autoBake_ && !this.autoBakePause && !this.baking) {
         this.bake();
+    } else {
+        this.manager.controls.showStaleIndicator();
     }
 };
 
@@ -310,7 +313,7 @@ App.prototype.populateOperationsList = function() {
 App.prototype.initialiseSplitter = function() {
     this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
         sizes: [20, 30, 50],
-        minSize: [240, 325, 440],
+        minSize: [240, 325, 450],
         gutterSize: 4,
         onDrag: function() {
             this.manager.controls.adjustWidth();

src/web/ControlsWaiter.js

@@ -362,4 +362,28 @@ ControlsWaiter.prototype.supportButtonClick = function(e) {
     }
 };
 
+
+/**
+ * Shows the stale indicator to show that the input or recipe has changed
+ * since the last bake.
+ */
+ControlsWaiter.prototype.showStaleIndicator = function() {
+    const staleIndicator = document.getElementById("stale-indicator");
+
+    staleIndicator.style.visibility = "visible";
+    staleIndicator.style.opacity = 1;
+};
+
+
+/**
+ * Hides the stale indicator to show that the input or recipe has not changed
+ * since the last bake.
+ */
+ControlsWaiter.prototype.hideStaleIndicator = function() {
+    const staleIndicator = document.getElementById("stale-indicator");
+
+    staleIndicator.style.opacity = 0;
+    staleIndicator.style.visibility = "hidden";
+};
+
 export default ControlsWaiter;

src/web/html/index.html

@@ -172,6 +172,7 @@
                             </div>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>
+                            <span id="stale-indicator" title="The output is stale.&#10;The input or recipe has changed since this output was generated. Bake again to get the new value.">&#x1F551;</span>
                         </div>
                         <div class="textarea-wrapper">
                             <div id="output-highlighter" class="no-select"></div>

src/web/stylesheets/layout/_io.css

@@ -101,3 +101,11 @@
 .dropping-file {
     border: 5px dashed var(--drop-file-border-colour) !important;
 }
+
+#stale-indicator {
+    visibility: hidden;
+    transition: all 0.3s;
+    margin-left: 5px;
+    font-size: larger;
+    font-weight: normal;
+}