File overlays now show a blurred representation of the file in the background.

src/web/InputWaiter.js

@@ -1,4 +1,5 @@
 import LoaderWorker from "worker-loader?inline&fallback=false!./LoaderWorker.js";
+import Utils from "../core/Utils.js";
 
 
 /**
@@ -263,11 +264,28 @@ InputWaiter.prototype.handleLoaderMessage = function(e) {
     if (r.hasOwnProperty("fileBuffer")) {
         log.debug("Input file loaded");
         this.fileBuffer = r.fileBuffer;
+        this.displayFilePreview();
         window.dispatchEvent(this.manager.statechange);
     }
 };
 
 
+/**
+ * Shows a chunk of the file in the input behind the file overlay.
+ */
+InputWaiter.prototype.displayFilePreview = function() {
+    const inputText = document.getElementById("input-text"),
+        fileSlice = this.fileBuffer.slice(0, 2048);
+
+    inputText.style.overflow = "hidden";
+    inputText.classList.add("blur");
+    inputText.value = Utils.printable(Utils.arrayBufferToStr(fileSlice));
+    if (this.fileBuffer.byteLength > 2048) {
+        inputText.value += "[truncated]";
+    }
+};
+
+
 /**
  * Handler for file close events.
  */
@@ -275,6 +293,9 @@ InputWaiter.prototype.closeFile = function() {
     if (this.loaderWorker) this.loaderWorker.terminate();
     this.fileBuffer = null;
     document.getElementById("input-file").style.display = "none";
+    const inputText = document.getElementById("input-text");
+    inputText.style.overflow = "auto";
+    inputText.classList.remove("blur");
 };
 
 

src/web/OutputWaiter.js

@@ -128,6 +128,13 @@ OutputWaiter.prototype.setFile = function(buf) {
 
     fileOverlay.style.display = "block";
     fileSize.textContent = file.size.toLocaleString() + " bytes";
+
+    // Display preview slice in the background
+    const outputText = document.getElementById("output-text"),
+        fileSlice = this.dishBuffer.slice(0, 2048);
+
+    outputText.classList.add("blur");
+    outputText.value = Utils.printable(Utils.arrayBufferToStr(fileSlice));
 };
 
 
@@ -137,6 +144,7 @@ OutputWaiter.prototype.setFile = function(buf) {
 OutputWaiter.prototype.closeFile = function() {
     this.dishBuffer = null;
     document.getElementById("output-file").style.display = "none";
+    document.getElementById("output-text").classList.remove("blur");
 };
 
 
@@ -163,6 +171,7 @@ OutputWaiter.prototype.displayFileSlice = function() {
         sliceTo = parseInt(sliceToEl.value, 10),
         str = Utils.arrayBufferToStr(this.dishBuffer.slice(sliceFrom, sliceTo));
 
+    document.getElementById("output-text").classList.remove("blur");
     showFileOverlay.style.display = "block";
     this.set(str, "string", new Date().getTime() - startTime, true);
 };
@@ -177,6 +186,7 @@ OutputWaiter.prototype.showFileOverlayClick = function(e) {
     const outputFile = document.getElementById("output-file"),
         showFileOverlay = e.target;
 
+    document.getElementById("output-text").classList.add("blur");
     outputFile.style.display = "block";
     showFileOverlay.style.display = "none";
     this.setOutputInfo(this.dishBuffer.byteLength, null, 0);

src/web/html/index.html

@@ -183,8 +183,9 @@
                         </div>
                         <div class="textarea-wrapper no-select">
                             <div id="input-highlighter" class="no-select"></div>
-                            <textarea id="input-text"></textarea>
+                            <textarea id="input-text" spellcheck="false"></textarea>
                             <div id="input-file">
+                                <div class="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">
                                     <div class="card">
                                         <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
@@ -218,9 +219,10 @@
                         <div class="textarea-wrapper">
                             <div id="output-highlighter" class="no-select"></div>
                             <div id="output-html"></div>
-                            <textarea id="output-text" readonly="readonly"></textarea>
+                            <textarea id="output-text" readonly="readonly" spellcheck="false"></textarea>
                             <img id="show-file-overlay" aria-hidden="true" src="<%- require('../static/images/file-32x32.png') %>" alt="Show file overlay" title="Show file overlay"/>
                             <div id="output-file">
+                                <div class="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">
                                     <div class="card">
                                         <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
@@ -233,7 +235,7 @@
                                                 </span>
                                                 <input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="1024" min="0">
                                                 <div class="input-group-addon">to</div>
-                                                <input type="number" class="form-control" id="output-file-slice-to" placeholder="To" value="1024" step="1024" min="0">
+                                                <input type="number" class="form-control" id="output-file-slice-to" placeholder="To" value="2048" step="1024" min="0">
                                             </div>
                                         </div>
                                     </div>

src/web/stylesheets/layout/_io.css

@@ -84,10 +84,17 @@
     top: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--title-background-colour);
     display: none;
 }
 
+.file-overlay {
+    position: absolute;
+    opacity: 0.8;
+    background-color: var(--title-background-colour);
+    width: 100%;
+    height: 100%;
+}
+
 #show-file-overlay {
     position: absolute;
     right: 15px;