Removed output-file markup and handlers

src/web/Manager.mjs

@@ -198,10 +198,6 @@ class Manager {
         document.getElementById("switch").addEventListener("click", this.output.switchClick.bind(this.output));
         document.getElementById("maximise-output").addEventListener("click", this.output.maximiseOutputClick.bind(this.output));
         document.getElementById("magic").addEventListener("click", this.output.magicClick.bind(this.output));
-        this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
-        this.addDynamicListener("#output-file-show-all", "click", this.output.showAllFile, this.output);
-        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-wrapper #output-tabs li .output-tab-content", "click", this.output.changeTabClick, this.output);
         document.getElementById("btn-previous-output-tab").addEventListener("mousedown", this.output.previousTabClick.bind(this.output));

src/web/html/index.html

@@ -323,31 +323,6 @@
                             </div>
                             <div class="textarea-wrapper">
                                 <div id="output-text"></div>
-                                <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"> <!-- TODO - is this still a thing? -->
-                                    <div class="file-overlay"></div>
-                                    <div style="position: relative; height: 100%;">
-                                        <div class="io-card card">
-                                            <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
-                                            <div class="card-body">
-                                                Size: <span id="output-file-size"></span><br>
-                                                <button id="output-file-download" type="button" class="btn btn-primary btn-outline">Download</button>
-                                                <button id="output-file-show-all" type="button" class="btn btn-warning btn-outline" data-toggle="tooltip" title="Warning: This could crash your browser. Use at your own risk.">Show all</button>
-                                                <div class="input-group">
-                                                    <span class="input-group-prepend">
-                                                        <button id="output-file-slice" type="button" class="btn btn-secondary bmd-btn-icon" data-toggle="tooltip" title="View slice">
-                                                            <i class="material-icons">search</i>
-                                                        </button>
-                                                    </span>
-                                                    <input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="128" min="0">
-                                                    <div class="input-group-addon">to</div>
-                                                    <input type="number" class="form-control" id="output-file-slice-to" placeholder="To" value="256" step="128" min="0">
-                                                    <div class="input-group-addon">KiB</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
                                 <div id="output-loader">
                                     <div id="output-loader-animation">
                                         <object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>

src/web/stylesheets/components/_pane.css

@@ -46,72 +46,6 @@
     padding: 0;
 }
 
-.io-card.card {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-    transition: 0.3s;
-    width: 400px;
-    height: 150px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-family: var(--primary-font-family);
-    color: var(--primary-font-colour);
-    line-height: 30px;
-    background-color: var(--primary-background-colour);
-    flex-direction: row;
-    padding-left: 10px;
-}
-
-.io-card.card:hover {
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-}
-
-.io-card.card>img {
-    float: left;
-    width: auto;
-    height: auto;
-    max-width: 128px;
-    max-height: 128px;
-    margin-left: auto;
-    margin-top: auto;
-    margin-right: auto;
-    margin-bottom: auto;
-    padding: 0px;
-
-}
-
-.io-card.card .card-body .close {
-    position: absolute;
-    right: 10px;
-    top: 4px;
-}
-
-.io-card.card .card-body {
-    float: left;
-    padding: 16px;
-    width: 250px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: text;
-}
-
-.io-card.card .card-body>.btn {
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
-
-.io-card.card input[type=number] {
-    padding-right: 6px;
-    padding-left: 6px;
-    height: unset;
-}
-
-.io-card.card .input-group {
-    padding-top: 5px;
-}
-
 #files .card-header .float-right a:hover {
     text-decoration: none;
 }

src/web/stylesheets/layout/_io.css

@@ -165,10 +165,6 @@
     height: calc(100% - var(--tab-height) - var(--title-height));
 }
 
-#show-file-overlay {
-    height: 32px;
-}
-
 .input-wrapper.textarea-wrapper {
     width: 100%;
     box-sizing: border-box;
@@ -221,30 +217,6 @@
     transition: all 0.5s ease;
 }
 
-#output-file {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 100%;
-    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;
-    top: calc(var(--title-height) + 10px);
-    cursor: pointer;
-    display: none;
-}
-
 .io-info {
     margin-right: 18px;
     margin-top: 1px;

src/web/waiters/OutputWaiter.mjs

@@ -512,8 +512,6 @@ class OutputWaiter {
         return new Promise(async function(resolve, reject) {
             const output = this.outputs[inputNum];
 
-            const outputFile = document.getElementById("output-file");
-
             // Update the EOL value
             this.outputEditorView.dispatch({
                 effects: this.outputEditorConf.eol.reconfigure(
@@ -539,18 +537,12 @@ class OutputWaiter {
                 this.manager.recipe.updateBreakpointIndicator(false);
             }
 
-            document.getElementById("show-file-overlay").style.display = "none";
-
             if (output.status === "pending" || output.status === "baking") {
                 // show the loader and the status message if it's being shown
                 // otherwise don't do anything
                 document.querySelector("#output-loader .loading-msg").textContent = output.statusMessage;
             } else if (output.status === "error") {
-                // style the tab if it's being shown
                 this.toggleLoader(false);
-                this.outputTextEl.style.display = "block";
-                this.outputTextEl.classList.remove("blur");
-                outputFile.style.display = "none";
                 this.clearHTMLOutput();
 
                 if (output.error) {
@@ -560,15 +552,10 @@ class OutputWaiter {
                 }
             } else if (output.status === "baked" || output.status === "inactive") {
                 document.querySelector("#output-loader .loading-msg").textContent = `Loading output ${inputNum}`;
-                this.closeFile();
 
                 if (output.data === null) {
-                    this.outputTextEl.style.display = "block";
-                    outputFile.style.display = "none";
-
                     this.clearHTMLOutput();
                     this.setOutput("");
-
                     this.toggleLoader(false);
                     return;
                 }
@@ -577,7 +564,6 @@ class OutputWaiter {
 
                 switch (output.data.type) {
                     case "html":
-                        outputFile.style.display = "none";
                         // TODO what if the HTML content needs to be in a certain character encoding?
                         // Grey out chr enc selection? Set back to Raw Bytes?
 
@@ -586,9 +572,6 @@ class OutputWaiter {
                     case "ArrayBuffer":
                     case "string":
                     default:
-                        this.outputTextEl.style.display = "block";
-                        outputFile.style.display = "none";
-
                         this.clearHTMLOutput();
                         this.setOutput(output.data.result);
                         break;
@@ -600,34 +583,6 @@ class OutputWaiter {
         }.bind(this));
     }
 
-    /**
-     * Shows file details
-     *
-     * @param {ArrayBuffer} buf
-     * @param {number} activeTab
-     */
-    setFile(buf, activeTab) {
-        if (activeTab !== this.manager.tabs.getActiveTab("output")) return;
-        // Display file overlay in output area with details
-        const fileOverlay = document.getElementById("output-file"),
-            fileSize = document.getElementById("output-file-size"),
-            fileSlice = buf.slice(0, 4096);
-
-        fileOverlay.style.display = "block";
-        fileSize.textContent = buf.byteLength.toLocaleString() + " bytes";
-
-        this.outputTextEl.classList.add("blur");
-        this.setOutput(Utils.arrayBufferToStr(fileSlice));
-    }
-
-    /**
-     * Clears output file details
-     */
-    closeFile() {
-        document.getElementById("output-file").style.display = "none";
-        this.outputTextEl.classList.remove("blur");
-    }
-
     /**
      * Retrieves the dish as a string, returning the cached version if possible.
      *
@@ -1297,80 +1252,6 @@ class OutputWaiter {
         magicButton.setAttribute("data-original-title", "Magic!");
     }
 
-
-    /**
-     * Handler for file slice display events.
-     */
-    async displayFileSlice() {
-        document.querySelector("#output-loader .loading-msg").textContent = "Loading file slice...";
-        this.toggleLoader(true);
-        const outputFile = document.getElementById("output-file"),
-            showFileOverlay = document.getElementById("show-file-overlay"),
-            sliceFromEl = document.getElementById("output-file-slice-from"),
-            sliceToEl = document.getElementById("output-file-slice-to"),
-            sliceFrom = parseInt(sliceFromEl.value, 10) * 1024,
-            sliceTo = parseInt(sliceToEl.value, 10) * 1024,
-            output = this.outputs[this.manager.tabs.getActiveTab("output")].data;
-
-        let str;
-        if (output.type === "ArrayBuffer") {
-            str = Utils.arrayBufferToStr(output.result.slice(sliceFrom, sliceTo));
-        } else {
-            str = Utils.arrayBufferToStr(await this.getDishBuffer(output.dish).slice(sliceFrom, sliceTo));
-        }
-
-        this.outputTextEl.classList.remove("blur");
-        showFileOverlay.style.display = "block";
-        this.clearHTMLOutput();
-        this.setOutput(str);
-
-        this.outputTextEl.style.display = "block";
-        outputFile.style.display = "none";
-
-        this.toggleLoader(false);
-    }
-
-    /**
-     * Handler for showing an entire file at user's discretion (even if it's way too big)
-     */
-    async showAllFile() {
-        document.querySelector("#output-loader .loading-msg").textContent = "Loading entire file at user instruction. This may cause a crash...";
-        this.toggleLoader(true);
-        const outputFile = document.getElementById("output-file"),
-            showFileOverlay = document.getElementById("show-file-overlay"),
-            output = this.outputs[this.manager.tabs.getActiveTab("output")].data;
-
-        let str;
-        if (output.type === "ArrayBuffer") {
-            str = Utils.arrayBufferToStr(output.result);
-        } else {
-            str = Utils.arrayBufferToStr(await this.getDishBuffer(output.dish));
-        }
-
-        this.outputTextEl.classList.remove("blur");
-        showFileOverlay.style.display = "none";
-        this.clearHTMLOutput();
-        this.setOutput(str);
-
-        this.outputTextEl.style.display = "block";
-        outputFile.style.display = "none";
-
-        this.toggleLoader(false);
-    }
-
-    /**
-     * Handler for show file overlay events
-     *
-     * @param {Event} e
-     */
-    showFileOverlayClick(e) {
-        const showFileOverlay = e.target;
-
-        this.outputTextEl.classList.add("blur");
-        showFileOverlay.style.display = "none";
-        this.set(this.manager.tabs.getActiveTab("output"));
-    }
-
     /**
      * Handler for extract file events.
      *