Better display of HTML

mit-plv · Mar 1, 2025 · 847d6a7 · 847d6a7
1 parent a25e4c5
commit 847d6a7
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 78 deletions.
diff --git a/fiat-html/fiat-crypto.html b/fiat-html/fiat-crypto.html
@@ -33,6 +33,15 @@
             z-index: 1;
         }
 
+        /*.output-filename {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            padding: 5px;
+            border: 1px solid #ddd;
+            z-index: 1;
+        }*/
+
         .hidden {
             display: none;
         }
@@ -132,7 +141,7 @@
 
         .file-name {
             margin-bottom: 5px;
-            width: calc(100% - 30px);
+            width: calc(100% - 60px);
             padding: 5px;
         }
 
@@ -203,19 +212,18 @@
                     <h3>Standard Input</h3>
                     <div class="stdin-entries" id="stdinEntries"></div>
                     <button type="button" id="addStdinButton" class="add-btn">+</button>
-                    <textarea id="stdin" class="hidden" placeholder="Enter stdin" readonly></textarea>
+                    <textarea id="stdinTextArea" class="hidden" placeholder="Enter stdin" readonly></textarea>
                 </div>
                 <div class="files-column">
-                    <h3>Input Files</h3>
+                    <h3>Input Files <button type="button" id="addFileButton" class="add-btn">+</button></h3>
                     <div class="file-entries" id="fileEntries">
                         <div class="file-entry">
                             <input type="text" class="file-name" placeholder="Filename">
                             <textarea class="file-content" placeholder="File content"></textarea>
                             <button type="button" class="remove-btn">-</button>
                         </div>
                     </div>
-                    <button type="button" id="addFileButton" class="add-btn">+</button>
-                    <textarea id="files" class="hidden" placeholder="Enter files" readonly></textarea>
+                    <textarea id="filesTextArea" class="hidden" placeholder="Enter files" readonly></textarea>
                 </div>
             </div>
         </div>

diff --git a/fiat-html/file-input.js b/fiat-html/file-input.js
@@ -1,61 +1,4 @@
-function getStdinFromFormBoxRaw() {
-    const stdinBox = document.getElementById('stdin');
-    return stdinBox.value;
-}
-
-function getFilesFromFormBoxRaw() {
-    const filesBox = document.getElementById('files');
-    return filesBox.value;
-}
-
-
-function getStdinFromFormBox() {
-    return JSON.parse(getStdinFromFormBoxRaw() || '[]');
-}
-
-function getFilesFromFormBox() {
-    return JSON.parse(getFilesFromFormBoxRaw() || '{}');
-}
-
-function populateStdinEntries(stdin) {
-    const stdinEntries = document.getElementById('stdinEntries');
-
-    if (stdin === undefined) {
-        stdin = getStdinFromFormBox();
-    }
-    const entries = stdinEntries.querySelectorAll('.stdin-entry');
-    entries.forEach(entry => {
-        entry.remove();
-    });
-    stdin.forEach(line => {
-        const entry = createStdinEntry(line);
-        stdinEntries.appendChild(entry);
-    });
-}
-
-function populateFileEntries(files) {
-    const fileEntries = document.getElementById('fileEntries');
-
-    if (files === undefined) {
-        files = getFilesFromFormBox();
-    }
-    const entries = fileEntries.querySelectorAll('.file-entry');
-    entries.forEach(entry => {
-        entry.remove();
-    });
-    Object.entries(files).forEach(([filename, content]) => {
-        const entry = createFileEntry(filename, content);
-        fileEntries.appendChild(entry);
-    });
-}
-
-document.addEventListener('DOMContentLoaded', function () {
-    const stdinEntries = document.getElementById('stdinEntries');
-    const fileEntries = document.getElementById('fileEntries');
-    const addStdinButton = document.getElementById('addStdinButton');
-    const addFileButton = document.getElementById('addFileButton');
-    const stdinBox = document.getElementById('stdin');
-    const filesBox = document.getElementById('files');
+(function () {
 
     // Function to create a new file entry
     function createFileEntry(filename, content) {
@@ -126,8 +69,62 @@ document.addEventListener('DOMContentLoaded', function () {
         return entry;
     }
 
+
+    function getStdinFromFormBoxRaw() {
+        const stdinBox = document.getElementById('stdinTextArea');
+        return stdinBox.value;
+    }
+
+    function getFilesFromFormBoxRaw() {
+        const filesBox = document.getElementById('filesTextArea');
+        return filesBox.value;
+    }
+
+
+    function getStdinFromFormBox() {
+        return JSON.parse(getStdinFromFormBoxRaw() || '[]');
+    }
+
+    function getFilesFromFormBox() {
+        return JSON.parse(getFilesFromFormBoxRaw() || '{}');
+    }
+
+    function populateStdinEntries(stdin) {
+        const stdinEntries = document.getElementById('stdinEntries');
+
+        if (stdin === undefined) {
+            stdin = getStdinFromFormBox();
+        }
+        const entries = stdinEntries.querySelectorAll('.stdin-entry');
+        entries.forEach(entry => {
+            entry.remove();
+        });
+        stdin.forEach(line => {
+            const entry = createStdinEntry(line);
+            stdinEntries.appendChild(entry);
+        });
+    }
+
+    function populateFileEntries(files) {
+        const fileEntries = document.getElementById('fileEntries');
+
+        if (files === undefined) {
+            files = getFilesFromFormBox();
+        }
+        const entries = fileEntries.querySelectorAll('.file-entry');
+        entries.forEach(entry => {
+            entry.remove();
+        });
+        Object.entries(files).forEach(([filename, content]) => {
+            const entry = createFileEntry(filename, content);
+            fileEntries.appendChild(entry);
+        });
+    }
+
     // Function to update the hidden stdin input value
     function updateStdinValue() {
+        const stdinEntries = document.getElementById('stdinEntries');
+        const stdinBox = document.getElementById('stdinTextArea');
         const entries = stdinEntries.querySelectorAll('.stdin-entry');
         const stdinArray = Array.from(entries).map(entry => {
             const textarea = entry.querySelector('.stdin-textarea');
@@ -138,6 +135,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // Function to update the hidden files input value
     function updateFilesValue() {
+        const fileEntries = document.getElementById('fileEntries');
+        const filesBox = document.getElementById('filesTextArea');
         const entries = fileEntries.querySelectorAll('.file-entry');
         const filesObj = {};
 
@@ -153,15 +152,27 @@ document.addEventListener('DOMContentLoaded', function () {
         filesBox.value = JSON.stringify(filesObj);
     }
 
-    // Add event listeners for adding new entries
-    addStdinButton.addEventListener('click', function () {
-        stdinEntries.appendChild(createStdinEntry());
-    });
+    window.getStdinFromFormBox = getStdinFromFormBox;
+    window.getFilesFromFormBox = getFilesFromFormBox;
+    window.getStdinFromFormBoxRaw = getStdinFromFormBoxRaw;
+    window.getFilesFromFormBoxRaw = getFilesFromFormBoxRaw;
+    window.populateStdinEntries = populateStdinEntries;
+    window.populateFileEntries = populateFileEntries;
 
-    addFileButton.addEventListener('click', function () {
-        fileEntries.appendChild(createFileEntry());
-    });
+    document.addEventListener('DOMContentLoaded', function () {
+        const addStdinButton = document.getElementById('addStdinButton');
+        const addFileButton = document.getElementById('addFileButton');
 
-    populateStdinEntries();
-    populateFileEntries();
-});
+        // Add event listeners for adding new entries
+        addStdinButton.addEventListener('click', function () {
+            stdinEntries.appendChild(createStdinEntry());
+        });
+
+        addFileButton.addEventListener('click', function () {
+            fileEntries.appendChild(createFileEntry());
+        });
+
+        populateStdinEntries();
+        populateFileEntries();
+    });
+})();
diff --git a/fiat-html/main.js b/fiat-html/main.js
@@ -107,17 +107,17 @@ document.addEventListener('DOMContentLoaded', function () {
 
         // Create a container for each output file
         const fileEntries = Object.entries(files);
-
+        
         // Add or remove 'hidden' class based on whether there are files
         if (fileEntries.length > 0) {
             // Create HTML for each file
             fileEntries.forEach(([filename, contents]) => {
                 // Create file container with HTML template literal
                 const fileHtml = `
                     <div class="code-container">
+                        <pre class="output-filename">${escapeHtml(filename)}:</pre>
                         <code id="output-file-${escapeHtml(filename)}" class="code"></code>
                         <button class="copy-button" data-target="output-file-${escapeHtml(filename)}">Copy</button>
-                        <span class="output-filename">${escapeHtml(filename)}</span>
                     </div>
                 `;
 
@@ -222,7 +222,11 @@ document.addEventListener('DOMContentLoaded', function () {
         if (!success) {
             displayError(exceptionText.join('\n'));
         }
-        displayOutput(stdout.join(''), stderr.join(''), files);
+        const filesMap = {};
+        for (const [key, value] of files) {
+            filesMap[key] = value.join('');
+        }
+        displayOutput(stdout.join(''), stderr.join(''), filesMap);
     }
 
     function handleException(err) {
@@ -247,6 +251,7 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     function handleSynthesisResult(result, cached) {
+        console.log({ 'handleSynthesisResult result': result });
         const extraCachedString = [
             result.fiat_crypto_version == fiat_crypto_version ? '' : ` in ${result.fiat_crypto_version}`,
             result.method === undefined ? '' : ` via ${result.method}`,
@@ -398,8 +403,8 @@ document.addEventListener('DOMContentLoaded', function () {
         if (argv) {
             if (nonFalseQueryParam(interactive)) {
                 inputArgs.value = decodeURIComponent(argv);
-                populateStdinEntries(decodeURIComponent(stdin));
-                populateFileEntries(decodeURIComponent(files));
+                populateStdinEntries(JSON.parse(decodeURIComponent(stdin)));
+                populateFileEntries(JSON.parse(decodeURIComponent(files)));
                 document.querySelector(`input[value="${inputType}"]`).checked = true;
                 updateInputType(inputType);
                 inputForm.classList.remove('hidden');