Improved magic and staleness indicator animations

src/web/App.mjs

@@ -183,9 +183,10 @@ class App {
      * Sets the user's input data.
      *
      * @param {string} input - The string to set the input to
+     * @param {boolean} [silent=false] - Suppress statechange event
      */
-    setInput(input) {
-        this.manager.input.set(input);
+    setInput(input, silent=false) {
+        this.manager.input.set(input, silent);
     }
 
 
@@ -419,12 +420,12 @@ class App {
         if (this.uriParams.input) {
             try {
                 const inputData = fromBase64(this.uriParams.input);
-                this.setInput(inputData);
+                this.setInput(inputData, true);
             } catch (err) {}
         }
 
         this.autoBakePause = false;
-        this.autoBake();
+        window.dispatchEvent(this.manager.statechange);
     }
 
 
@@ -504,6 +505,7 @@ class App {
     resetLayout() {
         this.columnSplitter.setSizes([20, 30, 50]);
         this.ioSplitter.setSizes([50, 50]);
+        this.manager.recipe.adjustWidth();
     }
 
 

src/web/ControlsWaiter.mjs

@@ -355,9 +355,7 @@ ${navigator.userAgent}
      */
     showStaleIndicator() {
         const staleIndicator = document.getElementById("stale-indicator");
-
-        staleIndicator.style.visibility = "visible";
-        staleIndicator.style.opacity = 1;
+        staleIndicator.classList.remove("hidden");
     }
 
 
@@ -367,9 +365,7 @@ ${navigator.userAgent}
      */
     hideStaleIndicator() {
         const staleIndicator = document.getElementById("stale-indicator");
-
-        staleIndicator.style.opacity = 0;
-        staleIndicator.style.visibility = "hidden";
+        staleIndicator.classList.add("hidden");
     }
 
 

src/web/InputWaiter.mjs

@@ -60,10 +60,11 @@ class InputWaiter {
      * Sets the input in the input area.
      *
      * @param {string|File} input
+     * @param {boolean} [silent=false] - Suppress statechange event
      *
      * @fires Manager#statechange
      */
-    set(input) {
+    set(input, silent=false) {
         const inputText = document.getElementById("input-text");
         if (input instanceof File) {
             this.setFile(input);
@@ -72,7 +73,7 @@ class InputWaiter {
         } else {
             inputText.value = input;
             this.closeFile();
-            window.dispatchEvent(this.manager.statechange);
+            if (!silent) window.dispatchEvent(this.manager.statechange);
             const lines = input.length < (this.app.options.ioDisplayThreshold * 1024) ?
                 input.count("\n") + 1 : null;
             this.setInputInfo(input.length, lines);

src/web/OutputWaiter.mjs

@@ -447,8 +447,6 @@ class OutputWaiter {
         const recipeURL = "#recipe=" + Utils.encodeURIFragment(Utils.generatePrettyRecipe(newRecipeConfig));
         const opSequence = options[0].recipe.map(o => o.op).join(", ");
 
-        log.log(`Running <a href="${recipeURL}">${opSequence}</a> will result in "${Utils.truncate(options[0].data, 20)}"`);
-
         this.showMagicButton(opSequence, options[0].data, newRecipeConfig);
     }
 
@@ -477,10 +475,9 @@ class OutputWaiter {
      */
     showMagicButton(opSequence, result, recipeConfig) {
         const magicButton = document.getElementById("magic");
-        magicButton.setAttribute("data-original-title", `Running <i>${opSequence}</i> will result in "${Utils.truncate(result, 20)}"`);
+        magicButton.setAttribute("data-original-title", `Running <i>${opSequence}</i> will result in <span class="data-text">"${Utils.truncate(result, 30)}"</span>`);
         magicButton.setAttribute("data-recipe", JSON.stringify(recipeConfig), null, "");
-        magicButton.style.visibility = "visible";
-        magicButton.style.opacity = 1;
+        magicButton.classList.remove("hidden");
     }
 
 
@@ -489,8 +486,7 @@ class OutputWaiter {
      */
     hideMagicButton() {
         const magicButton = document.getElementById("magic");
-        magicButton.style.visibility = "hidden";
-        magicButton.style.opacity = 0;
+        magicButton.classList.add("hidden");
         magicButton.setAttribute("data-recipe", "");
         magicButton.setAttribute("data-original-title", "Magic!");
     }

src/web/html/index.html

@@ -278,12 +278,12 @@
                             </span>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
+                            <button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
                                 <svg width="22" height="22" viewBox="0 0 24 24">
                                     <path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
                                 </svg>
                             </button>
-                            <span id="stale-indicator" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
+                            <span id="stale-indicator" class="hidden" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
                                 <i class="material-icons">access_time</i>
                             </span> 
                         </div>

src/web/stylesheets/layout/_io.css

@@ -126,8 +126,9 @@
 }
 
 #stale-indicator {
-    visibility: hidden;
-    transition: all 0.3s;
+    opacity: 1;
+    visibility: visibile;
+    transition: margin 0s, opacity 0.3s;
     margin-left: 5px;
     cursor: help;
 }
@@ -148,12 +149,24 @@
 }
 
 #magic {
-    visibility: hidden;
-    transition: all 0.3s;
+    opacity: 1;
+    visibility: visibile;
+    transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s;
     margin-left: 5px;
     margin-bottom: 5px;
 }
 
+#magic.hidden,
+#stale-indicator.hidden {
+    visibility: hidden;
+    transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s;
+    opacity: 0;
+}
+
+#magic.hidden {
+    margin-left: -32px;
+}
+
 #magic svg path {
     fill: var(--primary-font-colour);
 }

src/web/stylesheets/utils/_general.css

@@ -20,6 +20,10 @@ body {
     color: var(--subtext-font-colour);
 }
 
+.data-text {
+    font-family: var(--fixed-width-font-family);
+}
+
 .word-wrap {
     white-space: pre !important;
     word-wrap: normal !important;